/**
 * BettrAi Elementor Widgets — frontend styles.
 *
 * Structure:
 *   1. Design tokens (:root custom properties)
 *   2. Shared primitives (container, button, pill, card)
 *   3. Per-widget section styles
 *   4. Responsive breakpoints
 *
 * No Tailwind. Plain CSS with custom properties. Values approximate the Figma
 * homepage reference (.planning/homepage-figma-reference.png).
 */

/* Roboto isn't self-hosted like Satoshi/Sora — used only for the small
   radial-diagram node labels on the Providers page, pulled from Google Fonts. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

/* Roboto Condensed — used for the Platform Showcase tab graphics (compact
   stat cards need the tighter set width to stay legible at small sizes). */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

/* Kill the default UA body margin so the hero sits flush to the top,
   regardless of theme/wrapper (fixes the white gap above the hero). */
html,
body {
	margin: 0;
	padding: 0;
}

/* Self-hosted brand fonts (from Figma: Satoshi headings, Sora body). */
@font-face {
	font-family: "Satoshi";
	src: url("../fonts/Satoshi-Variable.woff2") format("woff2");
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Sora";
	src: url("../fonts/Sora-Variable.woff2") format("woff2");
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

@property --bettrai-gauge-progress {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

:root {
	--bettrai-navy: #07124a;
	--bettrai-blue: #2339e6;
	--bettrai-cyan: #72d2dc;
	--bettrai-mint: #8fe9c4;
	--bettrai-green: #16845f;
	--bettrai-btn-green: #64C5C5; /* normal green button color */
	--bettrai-teal-hover: #29BCBC; /* hover color for green/primary buttons */
	--bettrai-nav-hover: #77D8D8; /* hover color for header nav links */
	--bettrai-ink: #16313a;
	--bettrai-muted: #8D8D9A;
	--bettrai-soft: #edf0f0;
	--bettrai-white: #ffffff;

	--bettrai-radius-sm: 8px;
	--bettrai-radius-md: 12px;
	--bettrai-radius-lg: 18px;
	--bettrai-container: 1480px;
	--bettrai-container-narrow: 900px;

	--bettrai-shadow-card: 0 12px 30px rgba(7, 18, 74, 0.08);
	--bettrai-shadow-soft: 0 4px 12px rgba(7, 18, 74, 0.06);

	--bettrai-heading: rgba(72, 72, 104, 1); /* #484868 — Figma heading color */
	--bettrai-body: #8D8D9A;

	--bettrai-font-heading: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--bettrai-font: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--bettrai-space-section: clamp(56px, 7vw, 104px);
}

/* ==========================================================================
   2. Shared primitives
   ========================================================================== */

.bettrai-container {
	width: 100%;
	max-width: var(--bettrai-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}

.bettrai-container--narrow {
	max-width: var(--bettrai-container-narrow);
}

/* Buttons */
.bettrai-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 0;
	border-radius: var(--bettrai-radius-md); /* rounded rectangle — NEVER a pill/999px */
	font-family: var(--bettrai-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.bettrai-btn:hover {
	transform: translateY(-1px);
}

.bettrai-btn:focus-visible {
	outline: 3px solid var(--bettrai-cyan);
	outline-offset: 2px;
}

.bettrai-btn--primary {
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
	box-shadow: var(--bettrai-shadow-soft);
}

/* Green/primary buttons hover to a solid teal. */
.bettrai-btn--primary:hover {
	background: var(--bettrai-teal-hover);
	color: var(--bettrai-white);
}

.bettrai-btn--light {
	background: var(--bettrai-white);
	color: var(--bettrai-navy);
	box-shadow: var(--bettrai-shadow-soft);
}

.bettrai-btn__arrow {
	font-size: 1.1em;
	line-height: 1;
}

.bettrai-btn__arrow svg {
	width: 1.15em;
	height: 1.15em;
	display: block;
}

/* Pills */
.bettrai-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--bettrai-white);
	border: 1px solid rgba(7, 18, 74, 0.08);
	box-shadow: var(--bettrai-shadow-soft);
	font-weight: 600;
	color: var(--bettrai-ink);
	list-style: none;
	cursor: pointer;
}

/* Generic card */
.bettrai-card {
	background: var(--bettrai-white);
	border: 1px solid rgba(7, 18, 74, 0.08);
	border-radius: var(--bettrai-radius-md);
	box-shadow: var(--bettrai-shadow-card);
}

/* Screen-reader only helper (in case theme lacks it) */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

html:has(body.bettrai-preview-template) {
	margin-top: 0 !important;
	padding-top: 0 !important;
	scroll-padding-top: 0 !important;
}

body.bettrai-preview-template {
	margin: 0;
	padding: 0;
	background: var(--bettrai-white);
	color: var(--bettrai-ink);
	font-family: var(--bettrai-font);
	overflow-x: hidden;
}

body.bettrai-preview-template * {
	box-sizing: border-box;
}

/* The shared header can be rendered through an Elementor header template before
   the page content. Its actual BettrAi header is fixed, so Elementor's wrapper
   must not reserve its default column padding as a white band above the hero. */
.elementor[data-elementor-type="section"]:has(.elementor-widget-bettrai_site_header),
.elementor-section:has(.elementor-widget-bettrai_site_header),
.elementor-section:has(.elementor-widget-bettrai_site_header) > .elementor-container,
.elementor-section:has(.elementor-widget-bettrai_site_header) > .elementor-container > .elementor-column,
.elementor-section:has(.elementor-widget-bettrai_site_header) .elementor-widget-wrap,
.elementor-widget-bettrai_site_header,
.elementor-widget-bettrai_site_header > .elementor-widget-container {
	min-height: 0 !important;
	height: 0 !important;
	margin-block: 0 !important;
	padding-block: 0 !important;
}

.bettrai-home-preview {
	width: 100%;
	overflow-x: clip;
	background: var(--bettrai-white);
}

.bettrai-home-preview img {
	max-width: 100%;
}

.bettrai-section-kicker {
	margin: 0 0 12px;
	color: var(--bettrai-green);
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0;
}

/* ==========================================================================
   3. Widget sections
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.bettrai-hero {
	position: relative;
	/* Sit above following sections so the fixed header (trapped in this
	   stacking context by isolation) stays on top of the logo carousel etc. */
	z-index: 40;
	min-height: clamp(680px, 100vh, 1080px);
	display: flex;
	flex-direction: column;
	color: var(--bettrai-white);
	font-family: var(--bettrai-font);
	overflow: hidden;
	isolation: isolate;
}

.bettrai-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -3;
}

.bettrai-hero__overlay {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Gradient colors/angle set inline per-instance from the Hero widget's
	   Overlay controls (Chrome::header-style pattern); this is just the
	   positioning + a same-as-default fallback in case JS/inline style fails. */
	background: linear-gradient(225deg, rgba(16, 158, 144, 0.3) 0%, rgba(9, 74, 179, 0.62) 100%);
}

/* Plexus grid clip screen-blended over the gradient at low opacity (Figma comp). */
.bettrai-hero__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
	opacity: 0.28;
	mix-blend-mode: screen;
	pointer-events: none;
}

.bettrai-hero__header {
	display: flex;
	align-items: center;
	gap: 24px;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	max-width: var(--bettrai-container);
	width: calc(100% - clamp(24px, 4vw, 48px));
	margin: clamp(14px, 2vw, 22px) auto 0;
	padding: 14px clamp(18px, 3vw, 28px);
	/* Glass bar */
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 8px 32px rgba(11, 31, 51, 0.18);
	/* max-width is driven continuously by JS on scroll (no transition, to
	   avoid lag/jitter). Other props still ease for the docking effect. */
	transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease, margin-top 0.35s ease;
}

/* Scrolled state: dock as a solid WHITE bar (width handled inline by JS). */
.bettrai-hero__header.is-scrolled {
	margin-top: clamp(8px, 1vw, 12px);
	background: #ffffff;
	border-color: rgba(7, 18, 74, 0.08);
	box-shadow: 0 10px 30px rgba(11, 31, 51, 0.18);
}

/* WordPress core CSS pushes the whole page down via `html.wp-toolbar {
   padding-top: 32px }` when the admin bar is present. That shifts the hero
   section (and its background) down too, exposing the body's white
   background above it. Cancel that push so the hero starts at true
   viewport 0 and sits behind the admin bar like a normal fixed-position
   page; only the header itself needs the 32px offset. */
html.wp-toolbar {
	padding-top: 0 !important;
}

body.admin-bar .bettrai-hero__header {
	top: 32px;
	margin-top: 0;
}

body.admin-bar .bettrai-hero__header.is-scrolled {
	margin-top: 0;
}

@media screen and (max-width: 782px) {
	body.admin-bar .bettrai-hero__header {
		top: 46px;
	}
}

@media screen and (max-width: 782px) {
	body.admin-bar .bettrai-hero__header {
		top: 46px;
	}
}

/* Flip nav + CTA to dark-on-white once the bar is white. */
.bettrai-hero__header.is-scrolled .bettrai-hero__nav a {
	color: var(--bettrai-navy);
	opacity: 0.85;
}

.bettrai-hero__header.is-scrolled .bettrai-hero__nav a:hover,
.bettrai-hero__header.is-scrolled .bettrai-hero__nav a:focus-visible {
	color: var(--bettrai-nav-hover);
	opacity: 1;
}

.bettrai-hero__header.is-scrolled .bettrai-hero__nav-cta {
	background: #64C5C5;
	color: var(--bettrai-white);
}

.bettrai-hero__header.is-scrolled .bettrai-hero__nav-cta:hover {
	background: var(--bettrai-teal-hover);
}

.bettrai-hero__brand {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 34px;
	font-weight: 700;
	font-size: 1.4rem;
	line-height: 1;
}

.bettrai-hero__logo {
	max-height: 26px;
	width: auto;
	display: block;
	transition: opacity 0.35s ease;
}

/* Light logo at top, dark logo once the bar turns white. Stack them. */
.bettrai-hero__logo--dark {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	opacity: 0;
}

.bettrai-hero__header.is-scrolled .bettrai-hero__logo--light {
	opacity: 0;
}

.bettrai-hero__header.is-scrolled .bettrai-hero__logo--dark {
	opacity: 1;
}

.bettrai-hero__nav-cta {
	min-height: 52px;
	padding: 0 30px;
	font-size: 0.95rem;
	color: #4E556D;
	/* Figma 1:140 (Get In Touch, 187x56): corner radius 10, not pill. */
	border-radius: 10px;
}

/* Figma 1:145 (hero Get Started): split label button + separate arrow square. */
.bettrai-hero__cta {
	gap: 10px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	color: var(--bettrai-white);
}

.bettrai-hero__cta:hover {
	transform: translateY(-1px);
	/* Container stays transparent — only the label/arrow recolor on hover. */
	background: transparent;
}

.bettrai-hero__cta .bettrai-btn__label,
.bettrai-hero__cta .bettrai-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	box-shadow: var(--bettrai-shadow-soft);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.bettrai-hero__cta .bettrai-btn__label {
	min-width: 154px;
	padding: 0 32px;
	border-radius: 12px;
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
}

.bettrai-hero__cta .bettrai-btn__arrow {
	width: 52px;
	border-radius: 12px;
	background: var(--bettrai-white);
	color: var(--bettrai-btn-green);
	font-size: 1.2rem;
	font-weight: 700;
}

/* Hover: green split button turns solid teal. */
.bettrai-hero__cta:hover .bettrai-btn__label {
	background: var(--bettrai-teal-hover);
}

.bettrai-hero__cta:hover .bettrai-btn__arrow {
	color: var(--bettrai-teal-hover);
}

.bettrai-hero__nav {
	margin-inline: auto;
}

.bettrai-hero__nav ul {
	display: flex;
	gap: clamp(16px, 2vw, 32px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.bettrai-hero__nav a {
	color: var(--bettrai-white);
	text-decoration: none;
	font-family: var(--bettrai-font-heading);
	font-size: 1.075rem;
	font-weight: 500;
	letter-spacing: 0.005em;
	opacity: 0.9;
	transition: color 0.35s ease, opacity 0.35s ease;
}

.bettrai-hero__nav a:hover,
.bettrai-hero__nav a:focus-visible {
	color: var(--bettrai-nav-hover);
	opacity: 1;
	text-decoration: none;
}

/* Hamburger toggle — hidden on desktop, shown at <=900px (see Responsive).
   A slim vector icon (3 hairline strokes) instead of stacked <span> bars, so
   it renders crisp at any DPR and morphs cleanly into an X. */
.bettrai-hero__burger {
	display: none;
	flex: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: color 0.35s ease;
}
/* Selector specificity note: the theme's reset.css sets
   `[type="button"], [type="submit"], button { color: #cc3366 }` at the same
   specificity as a single class — since this button has type="button", the
   `button.` element+class form is required to reliably win the `color`,
   regardless of stylesheet load order. Kept separate from the rule above so
   it doesn't also out-rank the <=900px `display: flex` override. */
button.bettrai-hero__burger { color: var(--bettrai-white); }
.bettrai-hero__burger-icon {
	width: 21px;
	height: 15px;
	overflow: visible;
}
.bettrai-hero__burger-bar {
	transform-box: fill-box;
	transform-origin: center;
	transition: transform 0.25s ease, opacity 0.2s ease;
}
/* Dark strokes once the bar docks white (or on light-header pages). */
.bettrai-hero__header.is-scrolled .bettrai-hero__burger { color: var(--bettrai-navy); }
/* Open state: morph the three bars into a centered X. Each bar first rotates
   in place about its own center, then slides onto the middle bar's line —
   composing translate+rotate (not a single rotate about an external pivot,
   which sweeps the bar along an arc instead of crossing at the center). */
.bettrai-hero__header.is-nav-open .bettrai-hero__burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.bettrai-hero__header.is-nav-open .bettrai-hero__burger-bar:nth-child(2) { opacity: 0; }
.bettrai-hero__header.is-nav-open .bettrai-hero__burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Dropdown submenu (e.g. Who We Serve -> Payers / Providers). */
.bettrai-hero__nav li { position: relative; }
.bettrai-hero__has-sub > a { display: inline-flex; align-items: center; }
.bettrai-hero__caret {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-1px) rotate(45deg);
	transition: none;
}
.bettrai-hero__nav .bettrai-hero__submenu {
	display: block;
	gap: 0;
}
.bettrai-hero__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	list-style: none;
	margin: 0;
	padding: 8px;
	background: #ffffff;
	border: 1px solid rgba(7, 18, 74, 0.08);
	border-radius: 12px;
	box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	z-index: 60;
}
.bettrai-hero__has-sub:hover .bettrai-hero__submenu,
.bettrai-hero__has-sub:focus-within .bettrai-hero__submenu {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.bettrai-hero__has-sub:hover .bettrai-hero__caret,
.bettrai-hero__has-sub:focus-within .bettrai-hero__caret {
	transform: translateY(-1px) rotate(45deg);
}
.bettrai-hero__submenu a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	color: var(--bettrai-navy);
	opacity: 0.9;
	font-size: 0.92rem;
	white-space: nowrap;
}
.bettrai-hero__submenu a:hover,
.bettrai-hero__submenu a:focus-visible {
	background: rgba(100, 197, 197, 0.14);
	color: var(--bettrai-btn-green);
	opacity: 1;
}

/* Rich image-card mega dropdown (Who We Serve). */
.bettrai-hero__mega {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	transform: translate(-50%, 8px);
	width: min(780px, 92vw);
	padding: 18px;
	background: #ffffff;
	border: 1px solid rgba(7, 18, 74, 0.08);
	border-radius: 18px;
	box-shadow: 0 24px 56px rgba(11, 31, 51, 0.20);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 60;
}
.bettrai-hero__mega::before {
	/* Invisible hover bridge so the menu doesn't close in the gap. */
	content: "";
	position: absolute;
	top: -18px;
	left: 0;
	right: 0;
	height: 18px;
}
.bettrai-hero__has-mega:hover .bettrai-hero__mega,
.bettrai-hero__has-mega:focus-within .bettrai-hero__mega {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}
.bettrai-hero__mega-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.bettrai-hero__mega-card {
	display: block;
	padding: 10px;
	border-radius: 14px;
	color: var(--bettrai-navy);
	text-decoration: none;
	transition: background 0.18s ease, transform 0.18s ease;
}
.bettrai-hero__mega-card:hover .bettrai-hero__mega-title,
.bettrai-hero__mega-card:focus-visible .bettrai-hero__mega-title {
	color: var(--bettrai-btn-green);
}
.bettrai-hero__mega-media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 12px;
}
.bettrai-hero__mega-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}
.bettrai-hero__mega-title {
	display: block;
	font-weight: 700;
	font-size: 1.25rem;
	margin: 0 4px 4px;
	color: var(--bettrai-navy, #07124a);
	transition: color 0.18s ease;
}
.bettrai-hero__mega-desc {
	display: block;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--sp-body, #5b6472);
	margin: 0 4px;
}

.bettrai-hero__content {
	max-width: var(--bettrai-container);
	width: 100%;
	margin-inline: auto;
	padding: clamp(28px, 6vw, 82px) clamp(18px, 4vw, 44px);
	margin-top: auto;
	margin-bottom: auto;
}

.bettrai-hero__heading {
	/* font-size/line-height/font-weight/font-family now controlled per-
	   breakpoint via the Hero widget's Heading Typography control. */
	margin: 0 0 20px;
	max-width: 19ch;
}

.bettrai-hero__subheading {
	/* font-size/line-height/font-weight/font-family now controlled via the
	   Hero widget's Supporting Text Typography control. */
	max-width: 52ch;
	margin: 0 0 32px;
	opacity: 0.92;
}

/* --- Logo strip ----------------------------------------------------------- */
.bettrai-logostrip {
	padding-block: clamp(16px, 2.2vw, 28px);
	background: var(--bettrai-white);
}

.bettrai-logostrip__intro {
	/* Was `display: none` unconditionally — the widget's "Intro Text" control
	   could never actually show even when filled in. render() already only
	   outputs this <p> when the field is non-empty, so just let it display. */
	text-align: center;
	color: var(--bettrai-muted);
	font-weight: 600;
	margin: 0 0 20px;
}

.bettrai-logostrip__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.bettrai-logostrip__track {
	display: flex;
	width: max-content;
	animation: bettrai-logostrip-scroll 28s linear infinite;
}

.bettrai-logostrip__viewport:hover .bettrai-logostrip__track {
	animation-play-state: paused;
}

@keyframes bettrai-logostrip-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

.bettrai-logostrip__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(34px, 5vw, 72px);
	list-style: none;
	margin: 0;
	padding: 0 clamp(18px, 3vw, 42px);
}

.bettrai-logostrip__item {
	flex: 0 0 clamp(92px, 9vw, 132px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(92px, 9vw, 132px);
	height: clamp(28px, 3vw, 38px);
}

.bettrai-logostrip .bettrai-logostrip__img {
	/* Fit each mixed-ratio partner mark into the same visual box. */
	display: block;
	height: 100%;
	width: 100%;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity 0.2s ease, filter 0.2s ease;
}

.bettrai-logostrip__item:hover .bettrai-logostrip__img {
	filter: none !important;
	opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-logostrip__track {
		animation: none;
	}
}

/* --- Problem / Solution --------------------------------------------------- */
.bettrai-probsol {
	padding-top: clamp(86px, 8vw, 128px);
	padding-bottom: clamp(64px, 6vw, 96px);
	background: linear-gradient(180deg, #ffffff 0%, #f6f7f7 52%, #edf0f1 100%);
	font-family: var(--bettrai-font);
	color: var(--bettrai-ink);
}

.bettrai-probsol__intro {
	text-align: center;
	max-width: 1120px;
	margin: 0 auto 54px;
}

.bettrai-probsol__icon {
	display: block;
	width: 119px;
	height: 40px;
	margin: 0 auto 42px;
	object-fit: contain;
}

.bettrai-probsol__heading {
	font-size: clamp(2.2rem, 2.85vw, 3.1rem);
	line-height: 1.12;
	font-weight: 650;
	margin: 0 0 26px;
	color: var(--bettrai-heading);
	text-wrap: balance;
}

.bettrai-probsol__heading span {
	display: block;
	color: var(--bettrai-btn-green);
}

.bettrai-probsol__copy {
	color: rgb(141, 141, 154);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.65;
	max-width: 900px;
	margin: 0 auto;
}

.bettrai-probsol__pills {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 0;
	margin: 0 0 34px;
}

.bettrai-probsol__pills .bettrai-pill {
	position: relative;
	justify-content: space-between;
	min-height: 64px;
	padding: 0 20px 0 32px;
	border: 1px solid rgba(100, 197, 197, 0.38);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: none;
	color: #717184;
	font-size: clamp(1.1rem, 1.3vw, 1.35rem);
	font-weight: 500;
	transition: color 0.25s ease, border-color 0.25s ease;
}

.bettrai-probsol__pills .bettrai-pill.is-active {
	color: #269c9b;
	border-color: var(--bettrai-btn-green);
}

/* Auto-progress line: a 1px bar growing along the bottom of the active tab,
   drawn as a background so the border-radius clips it cleanly (no corner bleed). */
.bettrai-pill__fill {
	display: none;
}

.bettrai-probsol__pills .bettrai-pill.is-active {
	background-image: linear-gradient(var(--bettrai-btn-green), var(--bettrai-btn-green));
	background-repeat: no-repeat;
	background-position: bottom left;
	background-size: 0 1px;
	animation: bettrai-tab-fill 5s linear forwards;
}

@keyframes bettrai-tab-fill {
	from { background-size: 0 1px; }
	to { background-size: 100% 1px; }
}

.bettrai-probsol__pills .bettrai-pill span:not(.bettrai-pill__fill) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 7px;
	background: rgba(100, 197, 197, 0.2);
	color: var(--bettrai-btn-green);
	font-size: 1.2rem;
	line-height: 1;
}

.bettrai-probsol__pills .bettrai-pill.is-active span:not(.bettrai-pill__fill) {
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
}

.bettrai-probsol__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
	background: var(--bettrai-white);
	border-radius: var(--bettrai-radius-lg);
	box-shadow: none;
	padding: clamp(34px, 4.6vw, 64px);
}

.bettrai-probsol__card-body,
.bettrai-probsol__card-text {
	max-width: 570px;
}

.bettrai-probsol__card-kicker {
	margin: 0 0 24px;
	color: #3E9E9E;
	font-size: clamp(1rem, 1.15vw, 1.12rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: 0;
}

.bettrai-probsol__card-heading {
	max-width: 560px;
	font-size: clamp(2.05rem, 2.85vw, 3.05rem);
	font-weight: 700;
	line-height: 1.08;
	margin: 0 0 22px;
	color: var(--bettrai-heading);
	text-wrap: balance;
}

.bettrai-probsol__card-copy {
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 1.75;
	margin: 0 0 32px;
	max-width: 550px;
}

.bettrai-probsol__card-cta {
	gap: 8px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
	color: var(--bettrai-white);
}

.bettrai-probsol__card-cta:hover {
	background: transparent;
	transform: translateY(-1px);
}

.bettrai-probsol__card-cta .bettrai-btn__label,
.bettrai-probsol__card-cta .bettrai-btn__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	box-shadow: var(--bettrai-shadow-soft);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bettrai-probsol__card-cta .bettrai-btn__label {
	min-width: 142px;
	padding: 0 28px;
	border-radius: 10px;
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
}

.bettrai-probsol__card-cta .bettrai-btn__arrow {
	width: 48px;
	border: 1px solid rgba(100, 197, 197, 0.35);
	border-radius: 10px;
	background: var(--bettrai-white);
	color: var(--bettrai-btn-green);
	font-size: 1.1rem;
	font-weight: 700;
}

.bettrai-probsol__card-cta:hover .bettrai-btn__label {
	background: var(--bettrai-teal-hover);
}

.bettrai-probsol__card-cta:hover .bettrai-btn__arrow {
	border-color: rgba(41, 188, 188, 0.5);
	color: var(--bettrai-teal-hover);
}

.bettrai-probsol__card-media {
	position: relative;
}

.bettrai-probsol__card-img {
	display: block;
	width: 100%;
	aspect-ratio: 607 / 500;
	object-fit: cover;
	border-radius: 10px;
	transition: opacity 0.25s ease;
}

.bettrai-probsol__card-body {
	transition: opacity 0.25s ease;
}

.bettrai-probsol__card.is-swapping .bettrai-probsol__card-body,
.bettrai-probsol__card.is-swapping .bettrai-probsol__card-img {
	opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-probsol__card-body,
	.bettrai-probsol__card-img {
		transition: none;
	}
}


/* --- What Sophie Takes ---------------------------------------------------- */
.bettrai-sophie {
	padding-top: clamp(72px, 8.5vw, 124px);
	padding-bottom: var(--bettrai-space-section);
	background: linear-gradient(180deg, #ffffff 0%, #F7FEFF 42%);
	font-family: var(--bettrai-font);
	color: var(--bettrai-ink);
}

.bettrai-sophie__head {
	display: grid;
	grid-template-columns: minmax(0, 720px) minmax(0, 520px);
	justify-content: space-between;
	gap: clamp(42px, 6vw, 100px);
	align-items: start;
	margin: 0 0 34px;
}

.bettrai-sophie__heading {
	max-width: 720px;
	font-size: clamp(1.85rem, 2.35vw, 2.45rem);
	font-weight: 650;
	line-height: 1.08;
	margin: 0;
	color: var(--bettrai-heading);
}

.bettrai-sophie__heading span {
	color: var(--bettrai-btn-green);
}

.bettrai-sophie__copy {
	justify-self: end;
	max-width: 560px;
	text-align: right;
	color: #8D8D9A;
	font-size: clamp(0.88rem, 0.92vw, 0.98rem);
	font-weight: 400;
	line-height: 1.55;
	margin: 4px 0 0;
}

.bettrai-sophie__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	align-items: start;
	margin: 0;
}

/* Outlined, staggered cards. Outline (incl. wavy bottom) is the design SVG,
   stretched to each card via background-size with a non-scaling 1px stroke. */
.bettrai-sophie__card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(26px, 2.6vw, 40px);
	padding-bottom: clamp(56px, 7vw, 92px);
	min-height: 300px;
	/* Straight sides are crisp 1px solid-color layers (no raster blur), sized to
	   stop exactly where the wavy bottom edge (an image layer) takes over — so
	   seams between cards never double up and the straight line never runs past
	   the wave. */
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/* Top edge + wave only — NO vertical side lines. Adjacent cards share an
	   invisible seam (nothing drawn there at all), so there's nothing to
	   misalign or double up. Only the outer-left (first) and outer-right
	   (last) edges of the whole group get a vertical line. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 446' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.5 0.5H455.5M455.5 386.744C411.048 386.806 360.435 395.053 309.523 405.344C258.394 415.679 207.001 428.065 161.132 436.327C115.259 444.59 75.0428 448.701 46.3125 442.527C31.9588 439.443 20.5186 433.8 12.665 424.869C4.81681 415.944 0.500075 403.678 0.5 387.243' stroke='%23cfe0e2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat;
	background-size: 100% 100%;
}
.bettrai-sophie__card:first-child {
	/* Outer-left edge of the whole group. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 446' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.5 387.243V0.5H455.5M455.5 386.744C411.048 386.806 360.435 395.053 309.523 405.344C258.394 415.679 207.001 428.065 161.132 436.327C115.259 444.59 75.0428 448.701 46.3125 442.527C31.9588 439.443 20.5186 433.8 12.665 424.869C4.81681 415.944 0.500075 403.678 0.5 387.243' stroke='%23cfe0e2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.bettrai-sophie__card:last-child {
	/* Outer-right edge of the whole group. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 446' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.5 0.5H455.5V386.744C411.048 386.806 360.435 395.053 309.523 405.344C258.394 415.679 207.001 428.065 161.132 436.327C115.259 444.59 75.0428 448.701 46.3125 442.527C31.9588 439.443 20.5186 433.8 12.665 424.869C4.81681 415.944 0.500075 403.678 0.5 387.243' stroke='%23cfe0e2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

/* Separator between cards: a single crisp 1px line (not part of either card's
   own image, so it can never drift out of alignment with the wave beneath it). */
.bettrai-sophie__card:not(:first-child)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 86.7%;
	background: #cfe0e2;
}

/* Rising step to the right: first card lowest, last highest (46 : 27 : 0). */
/* Heights chosen so every card's vertical CENTRE lands at ~207px, which keeps
   the centred content lined up across the row despite the staggered outlines. */
.bettrai-sophie__card:nth-child(1) { margin-top: 32px; min-height: 350px; }
.bettrai-sophie__card:nth-child(2) { margin-top: 18px; min-height: 378px; }
.bettrai-sophie__card:nth-child(3) { margin-top: 0; min-height: 414px; }

.bettrai-sophie__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: 30px;
	border-radius: 0;
	background: transparent;
	color: var(--bettrai-green);
	margin-bottom: 20px;
	justify-content: flex-start;
}

.bettrai-sophie__icon img {
	width: auto;
	height: 28px;
	display: block;
}

.bettrai-sophie__card-title {
	font-size: clamp(1.18rem, 1.25vw, 1.32rem);
	font-weight: 500;
	line-height: 1.25;
	margin: 0 0 16px;
	color: var(--bettrai-navy);
}

.bettrai-sophie__card-text {
	max-width: 315px;
	color: #8D8D9A;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0;
}

/* --- Care fit ------------------------------------------------------------- */
.bettrai-care {
	padding-block: var(--bettrai-space-section);
	background: var(--bettrai-white);
	font-family: var(--bettrai-font);
	color: var(--bettrai-ink);
}

/* Section header: kicker label with a full-width hairline rule beneath it. */
.bettrai-care .bettrai-section-kicker {
	display: block;
	margin: 0 0 clamp(40px, 5vw, 72px);
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(7, 18, 74, 0.1);
	color: #3E9E9E;
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.bettrai-care__grid {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) minmax(360px, 0.82fr);
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
}

/* Two-line heading: dark line then teal line, matched size/weight. */
.bettrai-care__eyebrow {
	font-family: var(--bettrai-font-heading);
	color: var(--bettrai-heading);
	font-size: clamp(1.9rem, 3.2vw, 3rem);
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0;
}

.bettrai-care__heading {
	font-family: var(--bettrai-font-heading);
	color: var(--bettrai-heading);
	font-size: clamp(1.9rem, 3.2vw, 3rem);
	font-weight: 650;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 28px;
	max-width: 14ch;
}

.bettrai-care__text {
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 1.65;
	margin: 0 0 40px;
	max-width: 54ch;
}

.bettrai-care__text--support {
	margin-top: 20px;
}

.bettrai-care__tabs {
	position: relative;
	display: grid;
	gap: 30px;
	padding: 2px 0 2px 22px;
	margin: 4px 0 0;
	list-style: none;
	border-left: 2px solid rgba(7, 18, 74, 0.1);
	color: var(--bettrai-navy);
	font-weight: 700;
	font-size: 1.05rem;
}

.bettrai-care__tabs li {
	position: relative;
	cursor: pointer;
	transition: color 0.4s ease;
}

.bettrai-care__tabs li:hover { color: var(--bettrai-teal-hover); }

.bettrai-care__tabs li.is-active { color: var(--bettrai-btn-green); }

/* Single indicator that glides down the rail as roles advance. */
.bettrai-care__tabs-marker {
	position: absolute;
	left: -2px;
	top: 0;
	width: 2px;
	height: 0;
	background: var(--bettrai-btn-green);
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-care__tabs-marker { transition: none; }
}

/* ==========================================================================
   Care section — live, tab-driven right-side panel (replaces baked SVG).
   ========================================================================== */

/* Outer light-blue card; holds the darker "stage" + bottom copy. */
.bettrai-care__panel {
	border-radius: var(--bettrai-radius-lg);
	background: #5699B8;
	padding: clamp(14px, 2.2cqw, 26px);
	container-type: inline-size;
	font-family: var(--bettrai-font);
}

.bettrai-care__media {
	position: relative;
	width: 100%;
	aspect-ratio: 635 / 452;
	border-radius: calc(var(--bettrai-radius-lg) - 10px);
	overflow: hidden;
}

.bettrai-care__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	transition: opacity 0.26s ease;
}

.bettrai-care__panel-copy {
	transition: opacity 0.26s ease, transform 0.26s ease;
}
.bettrai-care__panel.is-swapping .bettrai-care__img,
.bettrai-care__panel.is-swapping .bettrai-care__panel-copy {
	opacity: 0;
	transform: translateY(6px);
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-care__img,
	.bettrai-care__panel-copy {
		transition: none;
	}
}

/* "One Layer"-style headline + copy in the light-blue area below the stage. */
.bettrai-care__panel-copy {
	padding: clamp(18px, 3cqw, 34px) clamp(10px, 2cqw, 24px) clamp(6px, 1cqw, 12px);
	color: #fff;
}
.bettrai-care__panel-copy h3 {
	margin: 0 0 clamp(8px, 1.4cqw, 16px);
	font-size: clamp(1.3rem, 3.6cqw, 2rem);
	font-weight: 600;
	color: #fff;
}
.bettrai-care__panel-copy p {
	margin: 0;
	font-size: clamp(0.95rem, 2.1cqw, 1.15rem);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.85);
	max-width: 46ch;
}

/* Smooth, subtle active-marker glide on the existing role rail. */
.bettrai-care__tabs li.is-active::before {
	transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1), bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Scroll-pinned progression (desktop only) ---------------------------- */
.bettrai-care-pin { position: relative; }

@media (min-width: 1025px) {
	.bettrai-care-pin.is-pinnable { height: 260vh; }
	.bettrai-care-pin.is-pinnable > .bettrai-care {
		position: sticky;
		top: 0;
		height: 100vh;
		padding-block: 0;
		display: flex;
		align-items: center;
		overflow: hidden;
	}
	.bettrai-care-pin.is-pinnable > .bettrai-care > .bettrai-container {
		width: 100%;
		margin-block: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-care-pin.is-pinnable { height: auto; }
	.bettrai-care-pin.is-pinnable > .bettrai-care {
		position: static;
		min-height: 0;
	}
	.bettrai-care__tabs li.is-active::before { transition: none; }
}

/* --- Mission -------------------------------------------------------------- */
.bettrai-mission {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-top: clamp(72px, 8.5vw, 140px);
	padding-bottom: clamp(32px, 4vw, 64px);
	background:
		radial-gradient(ellipse 56% 62% at 50% 55%, rgba(55, 48, 194, 0.72) 0%, rgba(36, 46, 164, 0.42) 36%, rgba(7, 18, 74, 0) 70%),
		radial-gradient(ellipse 38% 42% at 50% 38%, rgba(99, 112, 238, 0.34) 0%, rgba(7, 18, 74, 0) 70%),
		linear-gradient(180deg, #07124a 0%, #061141 100%);
	color: var(--bettrai-white);
	font-family: var(--bettrai-font);
	text-align: center;
}

.bettrai-mission::before,
.bettrai-mission::after {
	content: "";
	position: absolute;
	inset: -15% -10%;
	z-index: -1;
	pointer-events: none;
}

.bettrai-mission::before {
	background:
		radial-gradient(ellipse 42% 40% at 52% 52%, rgba(120, 98, 255, 0.75) 0%, rgba(89, 73, 232, 0.4) 40%, rgba(7, 18, 74, 0) 72%),
		radial-gradient(ellipse 30% 26% at 40% 62%, rgba(90, 140, 255, 0.35) 0%, rgba(7, 18, 74, 0) 68%);
	filter: blur(24px);
	opacity: 0.85;
	transform: translate3d(0, 0, 0) scale(1);
	animation: bettrai-mission-blob 9s ease-in-out infinite;
	will-change: transform, opacity;
}

.bettrai-mission::after {
	background:
		radial-gradient(ellipse 26% 24% at 62% 42%, rgba(156, 161, 255, 0.55) 0%, rgba(7, 18, 74, 0) 70%);
	filter: blur(20px);
	opacity: 0.7;
	transform: translate3d(0, 0, 0) scale(1);
	animation: bettrai-mission-blob-2 12s ease-in-out infinite;
	will-change: transform, opacity;
}

@keyframes bettrai-mission-blob {
	0%, 100% {
		opacity: 0.7;
		transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
	}
	25% {
		opacity: 1;
		transform: translate3d(9%, -10%, 0) scale(1.3) rotate(8deg);
	}
	50% {
		opacity: 0.85;
		transform: translate3d(-8%, 7%, 0) scale(0.82) rotate(-6deg);
	}
	75% {
		opacity: 1;
		transform: translate3d(7%, 9%, 0) scale(1.22) rotate(6deg);
	}
}

@keyframes bettrai-mission-blob-2 {
	0%, 100% {
		opacity: 0.55;
		transform: translate3d(0, 0, 0) scale(1);
	}
	33% {
		opacity: 0.9;
		transform: translate3d(-10%, 8%, 0) scale(1.25);
	}
	66% {
		opacity: 0.75;
		transform: translate3d(8%, -9%, 0) scale(0.85);
	}
}

.bettrai-mission > .bettrai-container {
	position: relative;
	z-index: 1;
}

.bettrai-mission__title {
	max-width: 920px;
	margin: 0 auto 16px;
	font-size: clamp(1.8rem, 3.2vw, 3rem);
	line-height: 1.18;
	font-weight: 700;
	text-align: center;
	background: linear-gradient(90deg, #ffffff 0%, #9ca1ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.bettrai-mission__heading {
	max-width: 1140px;
	margin: 0 auto clamp(32px, 4.4vw, 56px);
	font-size: clamp(1.68rem, 3vw, 2.88rem);
	line-height: 1.18;
	font-weight: 300;
	background: linear-gradient(90deg, #ffffff 0%, #9ca1ff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}

.bettrai-mission__team {
	display: flex;
	align-items: flex-end;
	gap: clamp(10px, 1.4vw, 20px);
	width: 100%;
}

.bettrai-mission__card {
	flex: 1 1 0;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	background: #9ea9d6;
	padding-top: 5%;
	box-sizing: border-box;
}

.bettrai-mission__card img {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Platform ------------------------------------------------------------- */
.bettrai-platform {
	padding-block: var(--bettrai-space-section);
	background: linear-gradient(180deg, #ffffff 0%, #ffffff 18%, #eef8fb 42%, #dcf0f4 70%, #e6f6f6 100%);
	font-family: var(--bettrai-font);
	color: var(--bettrai-ink);
}

.bettrai-platform__challenge {
	text-align: center;
	padding-bottom: clamp(52px, 7vw, 88px);
	border-bottom: 1px solid rgba(7, 18, 74, 0.08);
	margin-bottom: clamp(52px, 7vw, 88px);
}

.bettrai-platform__challenge h2 {
	color: var(--bettrai-navy);
	font-family: var(--bettrai-font-heading);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: 650;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 auto 24px;
	max-width: 16ch;
}

.bettrai-platform__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 1180px;
	margin-inline: auto;
}

.bettrai-platform__chips > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 46px;
	padding: 13px 24px;
	border: 1px solid rgba(41, 188, 188, 0.62);
	border-radius: 999px;
	background: var(--bettrai-white);
	color: #506f80;
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.bettrai-platform__chip-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--bettrai-btn-green);
	transition: color 0.2s ease;
}

.bettrai-platform__chip-arrow svg {
	display: block;
	width: 100%;
	height: 100%;
}

.bettrai-platform__chips > a:hover .bettrai-platform__chip-arrow,
.bettrai-platform__chips > a:focus-visible .bettrai-platform__chip-arrow {
	color: var(--bettrai-white);
}

.bettrai-platform__chips > a:hover,
.bettrai-platform__chips > a:focus-visible {
	transform: translateY(-2px);
	border-color: var(--bettrai-teal-hover);
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
	box-shadow: 0 8px 18px rgba(41, 188, 188, 0.22);
}

.bettrai-platform__intro {
	display: grid;
	grid-template-columns: minmax(280px, 0.9fr) minmax(460px, 1.1fr);
	gap: 0;
	align-items: stretch;
	padding: 0;
	border-radius: var(--bettrai-radius-lg);
	background: linear-gradient(180deg, #ffffff 0%, #fbfeff 100%);
	box-shadow: 0 24px 60px rgba(7, 18, 74, 0.06);
	overflow: hidden;
}

.bettrai-platform__copy {
	padding: clamp(36px, 5vw, 64px);
	border-right: 1px solid rgba(100, 197, 197, 0.32);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}

/* Lead heading + subtext sitting above the tabbed card (outside it). */
.bettrai-platform__lead {
	margin: 0 0 clamp(28px, 4vw, 44px);
	padding-inline: clamp(4px, 1vw, 12px);
}
.bettrai-platform__lead-title {
	margin: 0 0 14px;
	color: #484868;
	font-family: var(--bettrai-font-heading);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: 650;
	line-height: 1.12;
	letter-spacing: -0.01em;
}
.bettrai-platform__lead-sub {
	margin: 0;
	max-width: 60ch;
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 1.6;
}

.bettrai-platform__tabs {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-column: 1 / -1;
	order: -1;
	list-style: none;
	padding: 0 clamp(24px, 3vw, 44px);
	margin: 0;
	border-bottom: 1px solid rgba(100, 197, 197, 0.45);
}

.bettrai-platform__tabs li {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 62px;
	padding: 0 clamp(16px, 2vw, 28px);
	color: #506f80;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.18s ease;
}

.bettrai-platform__tabs li:hover,
.bettrai-platform__tabs li.is-active {
	color: var(--bettrai-btn-green);
}

.bettrai-platform__tabs li.is-active::after {
	content: "";
	position: absolute;
	left: 2%;
	right: 2%;
	bottom: -2px;
	height: 3.5px;
	border-radius: 4px;
	background: linear-gradient(90deg, #64C5C5, #29BCBC);
	box-shadow: 0 1px 6px rgba(41, 188, 188, 0.4);
	transform: scaleX(1);
	transform-origin: left;
}

/* When auto-advancing, the active underline fills like a progress bar. */
.bettrai-platform__intro.is-autoplay .bettrai-platform__tabs li.is-active::after {
	animation: bettrai-platform-progress var(--pd, 6000ms) linear;
}
.bettrai-platform__intro.is-autoplay.is-paused .bettrai-platform__tabs li.is-active::after {
	animation-play-state: paused;
}
@keyframes bettrai-platform-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-platform__intro.is-autoplay .bettrai-platform__tabs li.is-active::after {
		animation: none;
		transform: scaleX(1);
	}
}

.bettrai-platform__intro > .bettrai-platform__tabs {
	grid-column: 1 / -1;
}

.bettrai-platform__intro h2 {
	color: var(--bettrai-navy);
	font-family: var(--bettrai-font-heading);
	font-size: clamp(1.9rem, 2.9vw, 2.7rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 26px;
	max-width: 31ch;
}

.bettrai-platform__heading-accent {
	display: block;
	margin-top: 0;
	line-height: inherit;
	color: var(--bettrai-btn-green);
	text-wrap: balance;
}

.bettrai-platform__copy h2[data-platform-heading] {
	font-family: var(--bettrai-font-heading);
	font-size: clamp(1.6rem, 2.8vw, 2.4rem);
	font-weight: 650;
	line-height: 1.15;
	margin: 0 0 14px;
	color: var(--bettrai-heading);
}

/* Design shows an outlined, rounded-rectangle Get Started button here. */
.bettrai-platform__intro .bettrai-btn--primary {
	background: transparent;
	color: var(--bettrai-btn-green);
	border: 1.5px solid var(--bettrai-btn-green);
	border-radius: var(--bettrai-radius-md);
	box-shadow: none;
}
.bettrai-platform__intro .bettrai-btn--primary:hover {
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
}

.bettrai-platform__intro p {
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 1.65;
	margin: 0 0 32px;
	max-width: 56ch;
}

.bettrai-platform__visual {
	display: grid;
	place-items: center;
	padding: clamp(20px, 3vw, 40px);
}

/* Constructed "Sophie hub": ring background + figure + floating cards. */
.bettrai-hub {
	position: relative;
	width: 100%;
	max-width: 720px;
	aspect-ratio: 1 / 1;
	container-type: inline-size;
}
.bettrai-hub__rings {
	position: absolute;
	top: 46%;
	left: 50%;
	width: 88%;
	transform: translate(-50%, -50%);
	opacity: 0.85;
	pointer-events: none;
}
.bettrai-hub__figure {
	position: absolute;
	left: 50%;
	bottom: 2%;
	transform: translateX(-50%);
	width: 33%;
	height: auto;
	filter: drop-shadow(0 26px 40px rgba(7, 18, 74, 0.16));
}
/* Floating cards. */
.bettrai-hub__card {
	position: absolute;
	display: flex;
	gap: 8px;
	align-items: flex-start;
	padding: 10px 12px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(7, 18, 74, 0.09);
	width: 180px;
	z-index: 2;
}
.bettrai-hub__card-title {
	margin: 0;
	font-size: 13.5px;
	font-weight: 700;
	color: #1a2b3d;
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.bettrai-hub__card .bettrai-hub__card-text {
	margin: 0 !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: #6B7686 !important;
	max-width: none !important;
}
.bettrai-hub__card-text b { color: #1a2b3d; }

.bettrai-hub__online {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	color: #12a150;
}
.bettrai-hub__dot { width: 6px; height: 6px; border-radius: 50%; background: #17c26a; }

/* Sophie card: icon+title row, full-width paragraph below (matches reference). */
.bettrai-hub__card--sophie { flex-direction: column; gap: 6px; width: 190px; }
.bettrai-hub__card-head { display: flex; align-items: center; gap: 8px; }

.bettrai-hub__check {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #17c26a;
}
.bettrai-hub__check svg { width: 55%; }

.bettrai-hub__ring { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.bettrai-hub__ring svg { width: 100%; height: 100%; }
.bettrai-hub__ring-val { position: absolute; font-size: 12px; font-weight: 700; color: #1b9fd6; }

.bettrai-hub__card--capacity { flex-direction: column; gap: 6px; width: 170px; }
.bettrai-hub__card .bettrai-hub__card-label { margin: 0 !important; font-size: 12.5px !important; color: #6B7686 !important; }
.bettrai-hub__card .bettrai-hub__stat { margin: 0 !important; font-size: 23px !important; font-weight: 800; color: #1a2b3d; }
.bettrai-hub__stat span { font-size: 12.5px; font-weight: 600; color: #6B7686; }
.bettrai-hub__bars { display: flex; align-items: flex-end; gap: 3px; height: 36px; width: 100%; }
.bettrai-hub__bars span {
	flex: 1 1 0;
	min-width: 2px;
	border-radius: 1px;
	background: linear-gradient(180deg, #2f6df6, #38c6a4);
}

.bettrai-hub__bell {
	flex: none;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9px;
	background: var(--bettrai-btn-green);
}
.bettrai-hub__bell svg { width: 56%; }
.bettrai-hub__by { color: var(--bettrai-btn-green); font-weight: 600; }
.bettrai-hub__task-body { min-width: 0; }

/* Placement of the four cards at the corners around Sophie. */
.bettrai-hub__card--sophie { left: 3%; top: 8%; }
.bettrai-hub__card--engagement { right: 3%; top: 10%; }
.bettrai-hub__card--capacity { left: 4%; bottom: 8%; }
.bettrai-hub__card--task { right: 3%; bottom: 10%; }


/* ==========================================================================
   Platform tab graphics — five genuinely distinct scenes.
   ========================================================================== */
.bettrai-gfx {
	position: relative;
	width: 100%;
	max-width: 690px;
	aspect-ratio: 1 / 0.84;
	container-type: inline-size;
}
.bettrai-gfx,
.bettrai-gfx p {
	font-family: "Roboto Condensed", "Roboto", var(--bettrai-font) !important;
}
.bettrai-gfx__scene {
	position: absolute;
	inset: 0;
	display: flex;
	opacity: 0;
	visibility: hidden;
	transform: translateY(16px);
	transition: opacity 0.45s ease, transform 0.45s ease, visibility 0.45s;
}
.bettrai-gfx__scene.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.bettrai-pipe__eyebrow {
	display: block;
	margin-bottom: 1cqw;
	font-size: 1.7cqw;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #8a97a6;
}

/* --- 0 · Healthcare Analytics: live signal correlation ------------------- */
/* Must stay absolute (like the scene base) so it does not enter normal flow
   and stack with other scenes — that would double the graphic's height. */
.bettrai-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; letter-spacing: -0.005em; }
.bettrai-canvas,
.bettrai-canvas p {
	font-family: "Roboto Condensed", "Roboto", var(--bettrai-font) !important;
}

/* JS-drawn connector layer. viewBox is set to the pixel box so paths anchor
   exactly to card edges; strokes/dots are therefore in px, not cqw. */
.bettrai-canvas__wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; }
.bettrai-canvas__wires .wire {
	fill: none;
	stroke: rgba(41, 188, 188, 0.55);
	stroke-width: 1.3;
	stroke-linecap: round;
}
.bettrai-canvas__wires .wire--out {
	stroke: #0e9ea0;
	stroke-width: 2;
	stroke-dasharray: none;
}
.bettrai-canvas__wires .flow-dot { fill: #14c0c0; filter: drop-shadow(0 0 3px rgba(20, 192, 192, 0.9)); }
.bettrai-canvas__wires .flow-dot--out { fill: #0e9ea0; r: 3.6; }

/* Supporting clinical signals — each a distinct data format. */
.bettrai-sig {
	position: absolute;
	transform: translate(-50%, -50%) translateY(10px);
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	background: #fff;
	border: 1px solid #e7eef2;
	border-radius: 10px;
	padding: 1.9cqw 2.4cqw;
	box-shadow: 0 8px 20px rgba(7, 18, 74, 0.08);
	font-size: 2.05cqw;
	color: #1a2b3d;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
	white-space: nowrap;
}
.bettrai-sig.is-in { opacity: 1; transform: translate(-50%, -50%); }
.bettrai-sig__body { display: flex; flex-direction: column; gap: 0.3cqw; }
.bettrai-sig__body b { font-size: 2.3cqw; font-weight: 700; display: flex; align-items: baseline; gap: 0.5cqw; }
.bettrai-sig__k { font-size: 1.55cqw; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa7b3; font-weight: 600; }
.bettrai-sig__meta, .bettrai-sig__flag { font-size: 1.65cqw; color: #8a97a6; font-weight: 500; }
.bettrai-sig__flag { color: #e0865c; font-weight: 600; }
.bettrai-sig__unit { font-size: 1.5cqw; color: #9aa7b3; font-weight: 600; }
.bettrai-sig__up { color: #e0403c; font-size: 1.5cqw; }
.bettrai-sig__down { color: #e0865c; font-size: 1.5cqw; }
.bettrai-sig__ic { flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 50%; display: grid; place-items: center; font-size: 2.3cqw; font-weight: 700; }
.bettrai-sig__ic--er { background: #fdecec; color: #e0403c; }
.bettrai-sig--lab { align-items: flex-start; }
.bettrai-sig__dot { flex: none; align-self: flex-start; margin-top: 0.7cqw; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #e0865c; box-shadow: 0 0 0 0.5cqw rgba(224, 134, 92, 0.18); }
.bettrai-sig__spark { width: 10cqw; height: 3.8cqw; display: block; }
.bettrai-sig__meter { width: 9cqw; height: 1.4cqw; border-radius: 99px; background: #eef2f5; overflow: hidden; }
.bettrai-sig__meter i { display: block; height: 100%; background: linear-gradient(90deg, #e0865c, #e0403c); }

/* Signal placements — centred on the given point (transform-centred). */
.bettrai-sig--er  { left: 17%; top: 15%; }
.bettrai-sig--bp  { left: 83%; top: 13%; }
.bettrai-sig--a1c { left: 12%; top: 46%; }
.bettrai-sig--lab { left: 87%; top: 47%; }
.bettrai-sig--med { left: 20%; top: 80%; }

/* Central intelligence card — the focal point Sophie drives. */
.bettrai-focal {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(0.94);
	width: 34cqw;
	background: #fff;
	border-radius: 3cqw;
	padding: 2.8cqw 3cqw 3cqw;
	box-shadow: 0 20px 48px rgba(7, 18, 74, 0.16);
	z-index: 3;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease;
}
.bettrai-focal.is-live { opacity: 1; transform: translate(-50%, -50%) scale(1); box-shadow: 0 22px 54px rgba(14, 158, 160, 0.22); }
.bettrai-focal__sophie { display: flex; align-items: center; gap: 1.2cqw; margin-bottom: 1.6cqw; }
.bettrai-focal__avatar {
	flex: none;
	width: 5cqw;
	height: 5cqw;
	border-radius: 50%;
	overflow: hidden;
	background: #e8f6f6;
	box-shadow: 0 0 0 0 rgba(41, 188, 188, 0.5);
}
.bettrai-focal__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bettrai-focal.is-pulse .bettrai-focal__avatar { animation: bettrai-sophie-pulse 0.9s ease; }
@keyframes bettrai-sophie-pulse {
	0% { box-shadow: 0 0 0 0 rgba(41, 188, 188, 0.5); }
	60% { box-shadow: 0 0 0 1.2cqw rgba(41, 188, 188, 0); }
	100% { box-shadow: 0 0 0 0 rgba(41, 188, 188, 0); }
}
.bettrai-focal__state { font-size: 1.55cqw; font-weight: 600; color: #0e8f92; letter-spacing: 0.01em; }
.bettrai-focal__tag {
	display: inline-block;
	font-size: 1.35cqw;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #e0403c;
	background: #fdecec;
	padding: 0.8cqw 1.6cqw;
	border-radius: 99px;
	margin-bottom: 1.6cqw;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.bettrai-focal.is-live .bettrai-focal__tag { opacity: 1; transform: none; }
.bettrai-focal__score { display: flex; align-items: center; justify-content: space-between; gap: 2cqw; }
.bettrai-focal__num span { display: block; font-size: 1.4cqw; color: #6B7686; margin-bottom: 0.4cqw; }
.bettrai-focal__num b { font-size: 6cqw; color: #1a2b3d; line-height: 1; font-variant-numeric: tabular-nums; }
.bettrai-focal__gauge { width: 11cqw; height: 11cqw; flex: none; }
.bettrai-focal .bettrai-focal__note { margin: 1.8cqw 0 0; font-size: 1.5cqw; line-height: 1.4; color: #8a97a6; }

/* Surfaced action, downstream of the analysis. */
.bettrai-canvas__action {
	position: absolute;
	left: 78%;
	top: 85%;
	transform: translate(-50%, -50%) scale(0.9);
	background: linear-gradient(180deg, #0e9ea0, #0a7f86);
	color: #fff;
	border-radius: 2.4cqw;
	padding: 1.9cqw 2.8cqw;
	font-size: 2.1cqw;
	box-shadow: 0 12px 26px rgba(10, 127, 134, 0.28);
	z-index: 3;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bettrai-canvas__action.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bettrai-canvas__action b { font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
	.bettrai-sig, .bettrai-focal, .bettrai-focal__tag, .bettrai-canvas__action { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none; }
	.bettrai-focal { transform: translate(-50%, -50%) !important; }
}

/* --- 1 · Care Management: patient journey / orchestration ----------------- */
.bettrai-journey { flex-direction: column; justify-content: center; gap: 6cqw; padding: 4cqw; }
.bettrai-journey__track { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.bettrai-journey__track::before { content: ""; position: absolute; left: 4%; right: 4%; top: 2.5cqw; height: 2px; background: #dfe7ec; }
.bettrai-journey__track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; width: 15%; font-size: 1.55cqw; font-weight: 600; color: #8a97a6; text-align: center; }
.bettrai-journey__track li span { width: 5cqw; height: 5cqw; border-radius: 50%; background: #fff; border: 2px solid #dfe7ec; z-index: 1; }
.bettrai-journey__track li.is-done { color: #1a2b3d; }
.bettrai-journey__track li.is-done span { background: #29BCBC; border-color: #29BCBC; }
.bettrai-journey__track li.is-active { color: #0e6f92; }
.bettrai-journey__track li.is-active span { border-color: #29BCBC; box-shadow: 0 0 0 1.4cqw rgba(41, 188, 188, 0.2); }
.bettrai-journey__notes { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2cqw; }
.bettrai-jnote { background: #fff; border: 1px solid #e7eef2; border-radius: 2.4cqw; padding: 2.4cqw; font-size: 2cqw; font-weight: 600; color: #1a2b3d; box-shadow: 0 6px 16px rgba(7, 18, 74, 0.06); display: flex; align-items: center; gap: 1.6cqw; }
.bettrai-jnote__who { flex: none; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; background: #eaf7f7; color: #0e8f8f; display: grid; place-items: center; font-size: 1.6cqw; font-weight: 700; }
.bettrai-jnote--ok { color: #0f9b6c; }
.bettrai-jnote--ok::after { content: " \2713"; }

/* --- 2 · Engagement: one connected engagement journey ------------------- */
.bettrai-engage { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* Ambient depth layer — faint product grid + soft glows, behind everything. */
.bettrai-engage::before,
.bettrai-engage::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bettrai-engage::before {
	background-image:
		linear-gradient(rgba(20, 165, 175, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 165, 175, 0.04) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(circle at 48% 48%, #000 0%, rgba(0, 0, 0, 0.25) 32%, transparent 55%);
	mask-image: radial-gradient(circle at 48% 48%, #000 0%, rgba(0, 0, 0, 0.25) 32%, transparent 55%);
}
.bettrai-engage::after {
	background: radial-gradient(circle at 48% 52%, rgba(64, 197, 197, 0.12) 0%, rgba(64, 197, 197, 0.05) 30%, transparent 60%);
}

/* Flowing communication path (JS-drawn spline through the journey nodes). */
.bettrai-engage__path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; filter: drop-shadow(0 0 3px rgba(20, 192, 192, 0.35)); }
.bettrai-engage__path .epath { fill: none; stroke: rgba(41, 188, 188, 0.5); stroke-width: 2; stroke-linecap: round; }
.bettrai-engage__path .eflow { fill: #14c0c0; filter: drop-shadow(0 0 4px rgba(20, 192, 192, 0.9)); }

/* Shared entrance for every journey fragment. */
.bettrai-eng-node,
.bettrai-eng-msg,
.bettrai-eng-event,
.bettrai-eng-meter {
	position: absolute;
	transform: translate(-50%, -50%) translateY(10px);
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 2;
}
.bettrai-eng-node.is-in,
.bettrai-eng-msg.is-in,
.bettrai-eng-event.is-in,
.bettrai-eng-meter.is-in { opacity: 1; transform: translate(-50%, -50%); }

/* Circular journey nodes (patient start, Sophie outcome). */
.bettrai-eng-node {
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	background: #fff;
	border-radius: 99px;
	padding: 1.3cqw 3.6cqw 1.3cqw 1.3cqw;
	box-shadow: 0 12px 28px rgba(7, 18, 74, 0.12);
	white-space: nowrap;
	z-index: 3;
}
.bettrai-eng-node__ava {
	flex: none;
	width: 6.6cqw;
	height: 6.6cqw;
	border-radius: 50%;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: linear-gradient(150deg, #64C5C5, #2f9ec9);
	color: #fff;
	font-weight: 700;
	font-size: 2.2cqw;
}
.bettrai-eng-node__ava img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.bettrai-eng-node__ava--sophie { background: #e8f6f6; }
.bettrai-eng-node__label { display: flex; flex-direction: column; gap: 0.2cqw; }
.bettrai-eng-node__label b { font-size: 1.8cqw; font-weight: 700; color: #1a2b3d; }
.bettrai-eng-node__label i { font-size: 1.4cqw; font-style: normal; font-weight: 600; color: #17c26a; }
.bettrai-eng-node--patient { left: 19%; top: 50%; }
.bettrai-eng-node--sophie { left: 85%; top: 63%; }
.bettrai-eng-status { color: #9aa7b3; transition: color 0.45s ease; }
.bettrai-eng-node--sophie.is-resolved .bettrai-eng-status { color: #12a150; }
.bettrai-eng-node--sophie.is-active .bettrai-eng-node__ava--sophie { box-shadow: 0 0 0 0.5cqw rgba(41, 188, 188, 0.25); }

/* Message bubbles (Sophie check-in / patient reply). */
.bettrai-eng-msg {
	max-width: 28cqw;
	padding: 1.5cqw 1.9cqw;
	border-radius: 2.4cqw;
	font-size: 1.55cqw;
	line-height: 1.4;
	box-shadow: 0 10px 24px rgba(7, 18, 74, 0.08);
}
.bettrai-eng-msg--in { left: 41%; top: 25%; background: #fff; color: #1a2b3d; border-bottom-left-radius: 0.6cqw; }
.bettrai-eng-msg--out { left: 54%; top: 73%; background: #0e8f92; color: #fff; border-bottom-right-radius: 0.6cqw; }
.bettrai-eng-msg__from { display: flex; align-items: center; gap: 0.8cqw; margin-bottom: 0.7cqw; font-size: 1.2cqw; font-weight: 700; color: #0e8f92; }
.bettrai-eng-msg__from img { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; object-fit: cover; object-position: top; }
.bettrai-eng-msg__tick { margin-left: 0.5cqw; font-size: 1.25cqw; color: rgba(255, 255, 255, 0.75); }

/* Medication timeline event. */
.bettrai-eng-event {
	left: 73%;
	top: 28%;
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	background: #fff;
	border-radius: 2.2cqw;
	padding: 1.3cqw 3cqw 1.3cqw 1.4cqw;
	box-shadow: 0 10px 24px rgba(7, 18, 74, 0.08);
	white-space: nowrap;
}
.bettrai-eng-event__time { flex: none; align-self: stretch; display: grid; place-items: center; font-size: 1.3cqw; font-weight: 800; color: #0e8f92; background: #eafafa; padding: 0.7cqw 1.1cqw; border-radius: 1cqw; }
.bettrai-eng-event__body { display: flex; flex-direction: column; gap: 0.3cqw; }
.bettrai-eng-event__body b { font-size: 1.5cqw; color: #1a2b3d; font-weight: 700; }
.bettrai-eng-event__status { font-size: 1.3cqw; font-weight: 700; color: #9aa7b3; transition: color 0.45s ease; }
.bettrai-eng-event.is-confirmed .bettrai-eng-event__status { color: #12a150; }

/* Small engagement indicator. */
.bettrai-eng-meter { left: 15%; top: 16%; text-align: center; background: #fff; border-radius: 2cqw; padding: 1cqw 1.8cqw; box-shadow: 0 8px 20px rgba(7, 18, 74, 0.07); line-height: 1.15; }
.bettrai-eng-meter__k { display: block; font-size: 1.05cqw; text-transform: uppercase; letter-spacing: 0.05em; color: #9aa7b3; font-weight: 700; margin-bottom: 0.05cqw; }
.bettrai-eng-meter b { font-size: 1.55cqw; color: #0e8f92; font-weight: 700; }
.bettrai-eng-meter b i { font-style: normal; }

/* Cooler, diffuse card depth so fragments float above the grid. */
.bettrai-engage .bettrai-eng-node,
.bettrai-engage .bettrai-eng-event,
.bettrai-engage .bettrai-eng-meter,
.bettrai-engage .bettrai-eng-msg--in { box-shadow: 0 16px 34px rgba(16, 110, 132, 0.12), 0 2px 6px rgba(16, 110, 132, 0.05); }
.bettrai-engage .bettrai-eng-msg--out { box-shadow: 0 16px 34px rgba(14, 143, 146, 0.28); }

/* Soft radial halo behind the profile nodes (subtle, not a bright glow). */
.bettrai-eng-node--patient::after,
.bettrai-eng-node--sophie::after {
	content: "";
	position: absolute;
	left: 4.4cqw;
	top: 50%;
	width: 13cqw;
	height: 13cqw;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(41, 188, 188, 0.2), transparent 70%);
	z-index: -1;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-eng-node, .bettrai-eng-msg, .bettrai-eng-event, .bettrai-eng-meter {
		opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none;
	}
}

/* --- 3 · Population Health: cohort grid ----------------------------------- */
.bettrai-pop { flex-direction: column; justify-content: center; gap: 3cqw; padding: 3.5cqw; }
.bettrai-pop__controls { display: flex; gap: 1.4cqw; }
.bettrai-pop__controls span { font-size: 2.1cqw; font-weight: 600; color: #6B7686; padding: 1.2cqw 2.4cqw; border-radius: 99px; background: #fff; border: 1px solid #e7eef2; }
.bettrai-pop__controls span.is-active { background: #0e6f92; color: #fff; border-color: #0e6f92; }
.bettrai-pop__grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 1.5cqw; }
.bettrai-node { width: 100%; aspect-ratio: 1; border-radius: 50%; background: #cfe0e8; }
.bettrai-node--high { background: #E0403C; }
.bettrai-node--rising { background: #e0865c; }
.bettrai-node--stable { background: #9fd6cf; }
/* is-cohort is just a marker for which dots form the cohort; the selection
   outline is drawn sequentially by JS via .is-selected. */

/* --- Analytical dot-matrix animation ------------------------------------ */
.bettrai-pop .bettrai-node {
	opacity: 0;
	transform: scale(0.5);
	transform-origin: center;
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.35s ease, filter 0.22s ease;
}
.bettrai-pop .bettrai-node.is-in { opacity: 1; transform: scale(1); }
/* scan wave: brief scale-up + brighten as Sophie's analysis passes over */
.bettrai-pop .bettrai-node.is-in.is-scan { transform: scale(1.08); filter: brightness(1.2) saturate(1.1); }
/* single risk pulse — a signal being detected */
.bettrai-pop .bettrai-node.is-pulse { animation: bettrai-pop-pulse 0.7s ease; }
@keyframes bettrai-pop-pulse {
	0% { box-shadow: 0 0 0 0 rgba(224, 64, 60, 0.5); }
	55% { box-shadow: 0 0 0 1.4cqw rgba(224, 64, 60, 0); transform: scale(1.14); }
	100% { box-shadow: 0 0 0 0 rgba(224, 64, 60, 0); }
}
.bettrai-pop .bettrai-node--rising.is-pulse { animation-name: bettrai-pop-pulse-o; }
@keyframes bettrai-pop-pulse-o {
	0% { box-shadow: 0 0 0 0 rgba(224, 134, 92, 0.5); }
	55% { box-shadow: 0 0 0 1.4cqw rgba(224, 134, 92, 0); transform: scale(1.14); }
	100% { box-shadow: 0 0 0 0 rgba(224, 134, 92, 0); }
}
/* cohort selection outline, drawn one dot at a time — white gap + turquoise
   ring so it reads clearly on red/orange/teal dots alike */
.bettrai-pop .bettrai-node.is-selected { box-shadow: 0 0 0 1.5px #fff, 0 0 0 3.5px #14c0c0; }
/* dim unrelated dots while a cohort is focused */
.bettrai-pop.is-focus .bettrai-node:not(.is-selected) { opacity: 0.75; transform: scale(0.93); }
/* one synchronized pulse of the identified cohort */
.bettrai-pop.is-cohort-pulse .bettrai-node.is-selected { animation: bettrai-pop-cohort 0.6s ease; }
@keyframes bettrai-pop-cohort { 50% { transform: scale(1.16); box-shadow: 0 0 0 1.5px #fff, 0 0 0 5px #14c0c0; } }
/* High Risk filter — fade the non-risk population */
.bettrai-pop.is-highrisk .bettrai-node:not(.bettrai-node--high):not(.bettrai-node--rising) { opacity: 0.22; transform: scale(0.9); }
/* Sophie pill rises in only after cohort selection completes */
.bettrai-pop__sophie { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.bettrai-pop__sophie.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.bettrai-pop .bettrai-node { opacity: 1 !important; transform: none !important; transition: none; animation: none; }
	.bettrai-pop__sophie { opacity: 1 !important; transform: none !important; }
}
.bettrai-pop__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2cqw; margin-top: 1cqw; }
.bettrai-pop__stats div { display: flex; flex-direction: column; gap: 0.4cqw; }
.bettrai-pop__stats b { font-size: 3.9cqw; color: #1a2b3d; }
.bettrai-pop__stats span { font-size: 1.8cqw; color: #6B7686; }

/* --- 4 · Human-Guided AI: one connected review workflow ----------------- */
.bettrai-hgai { display: block; }

/* Environmental depth — faint grid + one soft glow behind the card cluster. */
.bettrai-hgai::before, .bettrai-hgai::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bettrai-hgai::before {
	background-image:
		linear-gradient(rgba(20, 165, 175, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(20, 165, 175, 0.045) 1px, transparent 1px);
	background-size: 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse 46% 54% at 46% 52%, #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 82%);
	mask-image: radial-gradient(ellipse 46% 54% at 46% 52%, #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 82%);
}
.bettrai-hgai::after { background: radial-gradient(circle at 44% 54%, rgba(41, 188, 188, 0.10), transparent 56%); }

/* BettrAi node — Sophie resumes the workflow (teal circle, white mark). */
.bettrai-hgai__brand {
	position: absolute;
	left: 79%;
	top: 46%;
	transform: translate(-50%, -50%) scale(0.6);
	width: 9cqw;
	height: 9cqw;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: linear-gradient(150deg, #64C5C5, #4BC4C5);
	box-shadow: 0 12px 26px rgba(20, 140, 150, 0.32);
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1);
	z-index: 3;
}
.bettrai-hgai__brand.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bettrai-hgai__brand img { width: 48%; height: auto; filter: brightness(0) invert(1); }
.bettrai-hgai__link { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: visible; filter: drop-shadow(0 0 4px rgba(20, 192, 192, 0.4)); }
.bettrai-hgai__link .hlink { fill: none; stroke: rgba(20, 175, 185, 0.75); stroke-width: 2.4; stroke-linecap: round; }
.bettrai-hgai__link .hflow { fill: #14c0c0; filter: drop-shadow(0 0 4px rgba(20, 192, 192, 0.9)); }

/* Shared entrance for the three positioned fragments. */
.bettrai-hgai__review, .bettrai-hgai__rec, .bettrai-hgai__approved {
	position: absolute;
	transform: translate(-50%, -50%) translateY(12px);
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 2;
}
.bettrai-hgai__review.is-in, .bettrai-hgai__rec.is-in, .bettrai-hgai__approved.is-in { opacity: 1; transform: translate(-50%, -50%); }

/* Recommendation card — dominant anchor. */
.bettrai-hgai__rec { left: 36%; top: 44%; width: 47cqw; background: #fff; border-radius: 2.6cqw; padding: 3cqw 3.2cqw; box-shadow: 0 26px 56px rgba(16, 110, 132, 0.18), 0 4px 12px rgba(16, 110, 132, 0.07); z-index: 3; }
.bettrai-hgai__rec.is-focus { box-shadow: 0 26px 56px rgba(20, 192, 192, 0.26), 0 4px 12px rgba(16, 110, 132, 0.08); }
.bettrai-hgai__sophie { display: inline-flex; align-items: center; gap: 1cqw; padding: 0.6cqw 1.5cqw 0.6cqw 0.6cqw; background: #f2fbfb; border-radius: 99px; font-size: 1.5cqw; color: #0e8f92; margin-bottom: 1.7cqw; }
.bettrai-hgai__sophie img { width: 3.2cqw; height: 3.2cqw; border-radius: 50%; object-fit: cover; object-position: top; }
.bettrai-hgai__sophie b { font-weight: 700; }
.bettrai-hgai__patient { display: flex; align-items: center; gap: 1.5cqw; margin-bottom: 2cqw; }
.bettrai-hgai__pava { flex: none; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: linear-gradient(150deg, #64C5C5, #2f9ec9); color: #fff; font-weight: 700; font-size: 2.3cqw; }
.bettrai-hgai__pava img { width: 100%; height: 100%; object-fit: cover; }
.bettrai-hgai__pmeta { display: flex; flex-direction: column; gap: 0.3cqw; }
.bettrai-hgai__pmeta b { font-size: 2.2cqw; font-weight: 700; color: #1a2b3d; }
.bettrai-hgai__signal { display: inline-flex; align-items: center; gap: 0.7cqw; font-size: 1.55cqw; font-weight: 600; color: #0e8f92; }
.bettrai-hgai__sigdot { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #14c0c0; }
.bettrai-hgai__signal.is-lit .bettrai-hgai__sigdot { animation: bettrai-hgai-sig 1.3s ease infinite; }
@keyframes bettrai-hgai-sig { 0%, 100% { box-shadow: 0 0 0 0 rgba(20, 192, 192, 0.5); } 60% { box-shadow: 0 0 0 1cqw rgba(20, 192, 192, 0); } }
.bettrai-hgai__reco { margin: 0 0 2cqw; font-size: 3.1cqw; font-weight: 700; color: #1a2b3d; line-height: 1.2; }
.bettrai-hgai__reco b { color: #0e8f92; }
.bettrai-hgai__reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1cqw; }
.bettrai-hgai__reasons li { display: flex; align-items: center; gap: 1.3cqw; font-size: 1.7cqw; font-weight: 600; color: #51606f; opacity: 0; transform: translateX(-6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.bettrai-hgai__reasons li.is-in { opacity: 1; transform: none; }
.bettrai-hgai__ric { flex: none; width: 4cqw; height: 4cqw; border-radius: 1.1cqw; display: grid; place-items: center; font-size: 1.7cqw; font-weight: 700; }
.bettrai-hgai__ric--up { background: #fdecec; color: #e0403c; }
.bettrai-hgai__ric--med { background: #eef2f7; color: #1a2b57; }
.bettrai-hgai__ric--bp { background: #eafafa; color: #0e8f92; }
.bettrai-hgai__ric--bp svg { width: 66%; }
.bettrai-hgai__ric--med svg { width: 66%; }

/* Action bar — attached to the bottom of the card (not a floating island). */
.bettrai-hgai__actions { display: flex; align-items: center; gap: 2cqw; margin-top: 2.2cqw; padding-top: 2cqw; border-top: 1px solid #eef2f5; opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s ease; }
.bettrai-hgai__actions.is-in { opacity: 1; transform: none; }
.bettrai-hgai__approve { display: inline-block; font-family: inherit; font-size: 1.75cqw; font-weight: 700; color: #fff; background: var(--bettrai-btn-green); border: none; outline: none; -webkit-appearance: none; appearance: none; border-radius: 99px; padding: 1.35cqw 3.2cqw; cursor: default; user-select: none; box-shadow: 0 8px 18px rgba(100, 197, 197, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; }
.bettrai-hgai__approve.is-press { transform: scale(0.95); background: var(--bettrai-teal-hover); box-shadow: 0 4px 10px rgba(41, 188, 188, 0.5); }
.bettrai-hgai__act { font-size: 1.6cqw; font-weight: 600; color: #6B7686; cursor: default; user-select: none; }

/* Clinician review node — sits just above the card's upper-right. */
.bettrai-hgai__review { left: 81%; top: 17%; display: flex; align-items: center; gap: 1.2cqw; background: #fff; border-radius: 99px; padding: 1.1cqw 3.6cqw 1.1cqw 1.1cqw; box-shadow: 0 12px 26px rgba(16, 110, 132, 0.13); white-space: nowrap; z-index: 3; }
.bettrai-hgai__cava { flex: none; width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #1a2b57; color: #fff; font-weight: 700; font-size: 1.9cqw; }
.bettrai-hgai__cava img { width: 100%; height: 100%; object-fit: cover; }
.bettrai-hgai__cmeta { display: flex; flex-direction: column; gap: 0.2cqw; }
.bettrai-hgai__cmeta b { font-size: 1.9cqw; font-weight: 700; color: #1a2b3d; }
.bettrai-hgai__rstatus { font-size: 1.5cqw; font-weight: 600; color: #8a97a6; transition: color 0.4s ease; }
.bettrai-hgai__review.is-active { box-shadow: 0 12px 30px rgba(41, 188, 188, 0.32); }
.bettrai-hgai__review.is-approved .bettrai-hgai__rstatus { color: #12a150; }

/* Approved confirmation — just beneath the card, offset right, lighter. */
.bettrai-hgai__approved { left: 62%; top: 85%; display: flex; align-items: center; gap: 1.4cqw; background: #eafaf1; border-radius: 2cqw; padding: 1.3cqw 2.1cqw; box-shadow: 0 8px 20px rgba(18, 161, 80, 0.12); white-space: nowrap; z-index: 3; }
.bettrai-hgai__check { flex: none; width: 3.8cqw; height: 3.8cqw; border-radius: 50%; background: #12a150; display: grid; place-items: center; }
.bettrai-hgai__check svg { width: 60%; }
.bettrai-hgai__amt { display: flex; flex-direction: column; gap: 0.2cqw; }
.bettrai-hgai__amt b { font-size: 1.65cqw; font-weight: 700; color: #0f7a42; }
.bettrai-hgai__amt span { font-size: 1.4cqw; color: #4f9a70; }

@media (prefers-reduced-motion: reduce) {
	.bettrai-hgai__review, .bettrai-hgai__rec, .bettrai-hgai__approved { opacity: 1 !important; transform: translate(-50%, -50%) !important; transition: none; }
	.bettrai-hgai__reasons li, .bettrai-hgai__actions { opacity: 1 !important; transform: none !important; }
}

/* Care Management: Sophie hub scene. The full designed composition (rings,
   glow, connectors and the four cards) lives in platform-hub.svg; only Sophie
   the character is layered on top, centred over the ring. */
.bettrai-gfx__scene--hub { align-items: center; justify-content: center; }
.bettrai-gfx__scene--hub .bettrai-hub {
	position: relative;
	max-width: none;
	width: 100%;
	height: auto;
	aspect-ratio: 800 / 613;
	container-type: inline-size;
}
.bettrai-gfx__scene--hub .bettrai-hub__rings {
	position: absolute;
	inset: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
	opacity: 1;
	pointer-events: none;
}
.bettrai-gfx__scene--hub .bettrai-hub__rings::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 48%;
	width: 50%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px dashed rgba(22, 179, 163, 0.45);
}
.bettrai-hub__glow {
	position: absolute;
	left: 50%;
	top: 48%;
	width: 62%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(129, 228, 218, 0.38) 0%, rgba(129, 228, 218, 0.16) 45%, transparent 72%);
	z-index: 0;
}
.bettrai-hub__outer-ring {
	position: absolute;
	left: 50%;
	top: 48%;
	width: 74%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 1.5px dashed rgba(120, 145, 160, 0.4);
}
.bettrai-gfx__scene--hub .bettrai-hub__rings::after {
	content: none;
}
.bettrai-gfx__scene--hub .bettrai-hub__figure {
	position: absolute;
	left: 50%;
	bottom: 1%;
	transform: translateX(-50%);
	width: auto;
	height: 96%;
	filter: drop-shadow(0 26px 40px rgba(7, 18, 74, 0.16));
	z-index: 2;
}

/* Entrance + idle animation. Rings scale/fade in, Sophie rises, then a very
   gentle idle float. Data pulses along the connectors are drawn by JS into
   .bettrai-hub__flow (see initCareHub). */
.bettrai-gfx__scene--hub .bettrai-hub__rings {
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.bettrai-gfx__scene--hub .bettrai-hub__figure {
	opacity: 0;
	transform: translateX(-50%) translateY(18px);
	transition: opacity 0.7s ease 0.12s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
}
.bettrai-gfx__scene--hub.is-active .bettrai-hub__rings { opacity: 1; transform: scale(1); }
/* Inline SVG fills the ring area; its dashed strokes flow when the tab is active. */
.bettrai-gfx__scene--hub .bettrai-hub__rings svg { width: 100%; height: 100%; display: block; }
.bettrai-gfx__scene--hub.is-active .bettrai-hub__rings svg path[stroke-dasharray] {
	animation: bettrai-hub-dashflow 24s linear infinite;
}
@keyframes bettrai-hub-dashflow { to { stroke-dashoffset: -260; } }
@media (prefers-reduced-motion: reduce) {
	.bettrai-gfx__scene--hub.is-active .bettrai-hub__rings svg path[stroke-dasharray] { animation: none; }
}
.bettrai-gfx__scene--hub.is-active .bettrai-hub__figure {
	opacity: 1;
	transform: translateX(-50%);
}
.bettrai-hub__flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.bettrai-hub__flow .wire { stroke: rgba(41, 188, 188, 0.45); stroke-width: 2; stroke-linecap: round; }
.bettrai-hub__flow .hub-dot { fill: #2fb7bf; filter: drop-shadow(0 0 4px rgba(47, 183, 191, 0.85)); }
@media (prefers-reduced-motion: reduce) {
	.bettrai-gfx__scene--hub .bettrai-hub__rings,
	.bettrai-gfx__scene--hub .bettrai-hub__figure { opacity: 1 !important; transform: translateX(-50%) !important; animation: none; transition: none; }
	.bettrai-gfx__scene--hub .bettrai-hub__rings { transform: none !important; }
}

/* Sophie presence woven into every scene (consistent avatar motif). */
.bettrai-pipe__sophie {
	position: absolute;
	top: -3cqw;
	left: -2.4cqw;
	width: 8cqw;
	height: 8cqw;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 18%;
	border: 2px solid #fff;
	box-shadow: 0 4px 10px rgba(7, 18, 74, 0.2);
	background: #dff0f0;
}
.bettrai-chat__sender {
	display: flex;
	align-items: center;
	gap: 1.4cqw;
	margin-bottom: 0.6cqw;
	font-size: 1.7cqw;
	font-weight: 700;
	color: #0e8f8f;
}
.bettrai-chat__sender img { width: 5cqw; height: 5cqw; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.bettrai-pop__sophie {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 1.4cqw;
	padding: 1.2cqw 2.2cqw 1.2cqw 1.2cqw;
	border-radius: 99px;
	background: #fff;
	border: 1px solid #e7eef2;
	box-shadow: 0 6px 16px rgba(7, 18, 74, 0.08);
	font-size: 1.9cqw;
	font-weight: 600;
	color: #1a2b3d;
}
.bettrai-pop__sophie img { width: 5cqw; height: 5cqw; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.bettrai-review__sophie {
	width: 7cqw;
	height: 7cqw;
	border-radius: 50%;
	object-fit: cover;
	object-position: 50% 18%;
	border: 2px solid rgba(255, 255, 255, 0.6);
	margin-bottom: 1.6cqw;
	display: block;
}

/* --- Outcomes bento ------------------------------------------------------- */
.bettrai-bento {
	padding-block: var(--bettrai-space-section);
	background: var(--bettrai-white);
	font-family: var(--bettrai-font);
}

.bettrai-bento__head {
	text-align: center;
	margin-bottom: clamp(36px, 3.9vw, 54px);
}

.bettrai-bento__eyebrow {
	color: var(--bettrai-heading);
	font-family: var(--bettrai-font-heading);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
}

.bettrai-bento__heading {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 clamp(20px, 1.7vw, 26px);
	color: var(--bettrai-btn-green);
}

.bettrai-bento__intro {
	max-width: 820px;
	margin: 0 auto;
	color: rgb(141, 141, 154);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
}

.bettrai-bento__figure {
	max-width: 1394px;
	margin-inline: auto;
}

.bettrai-bento__figure img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--bettrai-radius-md);
}

.bettrai-bento__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-template-rows: minmax(260px, 330px) minmax(210px, 240px);
	gap: 10px;
	max-width: 1394px;
	margin: 0 auto;
}

.bettrai-bento__cell {
	position: relative;
	border-radius: 14px;
	padding: clamp(28px, 3vw, 38px) clamp(24px, 2.8vw, 34px);
	display: grid;
	flex-direction: column;
	align-content: start;
	overflow: hidden;
	color: var(--bettrai-white);
	box-shadow: none;
}

.bettrai-bento__cell::before,
.bettrai-bento__cell::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

.bettrai-bento__cell--wide { grid-column: span 6; }

.bettrai-bento__cell--stat {
	grid-column: span 3;
	background: #bee6f3;
	color: #173545;
}

.bettrai-bento__cell--stat.bettrai-bento__cell--blue {
	grid-column: span 6;
	background: #2437e8;
	color: var(--bettrai-white);
	justify-items: center;
	align-content: center;
	text-align: center;
}

.bettrai-bento__cell--stat.bettrai-bento__cell--cyan {
	background: linear-gradient(135deg, #67c6d1, #54bba9);
	color: var(--bettrai-white);
}

.bettrai-bento__cell--stat.bettrai-bento__cell--navy {
	background: #bee6f3;
	color: #173545;
}

.bettrai-bento__cell--stat.bettrai-bento__cell--green,
.bettrai-bento__cell--quote.bettrai-bento__cell--green {
	background: #178765;
	color: var(--bettrai-white);
}

.bettrai-bento__cell--quote {
	grid-column: span 6;
	align-content: center;
	background: #178765 url("../images/bento-quote-bg.png") center / cover no-repeat;
}

.bettrai-bento__cell--bp {
	grid-column: span 6;
	background: #2437e8;
	justify-items: center;
	align-content: start;
	text-align: center;
}

.bettrai-bento__cell--photo,
.bettrai-bento__cell--image {
	grid-column: span 3;
	padding: 0;
	background: #dce9e8;
}

.bettrai-bento__cell--photo img,
.bettrai-bento__cell--photo video,
.bettrai-bento__cell--image img,
.bettrai-bento__cell--image video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.bettrai-bento__cell--admissions {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(135deg, rgba(103, 198, 209, 0.88), rgba(84, 187, 169, 0.88)),
		url("../images/bento-admissions-bg.png") right center / cover no-repeat;
}

.bettrai-bento__cell--admissions .bettrai-bento__stat {
	margin-top: auto;
}

.bettrai-bento__cell--admissions .bettrai-bento__stat-label {
	margin-bottom: auto;
}

.bettrai-bento__cell--prior {
	grid-column: span 3;
	background: #bee6f3;
	color: #173545;
}

.bettrai-bento__kicker {
	position: relative;
	z-index: 1;
	margin: 0 0 clamp(24px, 3.4vw, 46px);
	font-size: 0.78rem;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.72;
}

.bettrai-bento__stat {
	position: relative;
	z-index: 1;
	font-size: clamp(3.05rem, 5.1vw, 4.6rem);
	font-weight: 800;
	line-height: 1;
}

.bettrai-bento__cell--admissions .bettrai-bento__stat {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--bettrai-white);
}

.bettrai-bento__cell--admissions .bettrai-bento__stat span[aria-hidden="true"] {
	color: #8de8bd;
	font-size: 0.42em;
	line-height: 1;
}

.bettrai-bento__cell--prior .bettrai-bento__stat {
	color: #173545;
}

.bettrai-bento__cell--bp .bettrai-bento__kicker {
	justify-self: start;
	margin-bottom: clamp(26px, 3.2vw, 44px);
}

.bettrai-bento__cell--bp .bettrai-bento__stat {
	font-size: clamp(1.9rem, 2.9vw, 3rem);
	margin-top: clamp(-68px, -4.4vw, -54px);
	transform: translateX(2px);
}

.bettrai-bento__cell--bp .bettrai-bento__stat-label {
	max-width: 340px;
	margin-top: 8px;
}

.bettrai-bento__stat-label {
	position: relative;
	z-index: 1;
	margin: 12px 0 0;
	max-width: 300px;
	font-size: clamp(0.9rem, 1.05vw, 1.02rem);
	font-weight: 750;
	line-height: 1.25;
	opacity: 0.95;
}

.bettrai-bento__quote {
	margin: 0;
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 650px;
}

.bettrai-bento__quote p {
	font-size: clamp(1.05rem, 1.55vw, 1.45rem);
	line-height: 1.2;
	margin: 0 0 22px;
	font-weight: 800;
}

.bettrai-bento__quote span { color: #85dfbb; }

.bettrai-bento__quote cite {
	display: block;
	font-style: normal;
	opacity: 0.9;
	font-size: 0.78rem;
	font-weight: 750;
}

.bettrai-bento__gauge {
	position: relative;
	z-index: 1;
	width: clamp(220px, 30vw, 300px);
	aspect-ratio: 2 / 1;
	margin-bottom: 0;
}

.bettrai-bento__gauge svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

.bettrai-bento__gauge path {
	fill: none;
	stroke-linecap: round;
	stroke-width: 10;
}

.bettrai-bento__gauge-track {
	stroke: rgba(255, 255, 255, 0.22);
}

.bettrai-bento__gauge-fill {
	stroke: var(--bettrai-white);
	stroke-linecap: butt;
	stroke-dasharray: 0 100;
	transition: stroke-dasharray 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.bettrai-bento__gauge.is-visible .bettrai-bento__gauge-fill {
	stroke-linecap: round;
	stroke-dasharray: 70 100;
}

/* --- Steps ---------------------------------------------------------------- */
.bettrai-steps {
	padding-block: clamp(42px, 4vw, 64px) clamp(52px, 6vw, 86px);
	background: linear-gradient(180deg, #ffffff 0%, #f4f7f7 220px);
	font-family: var(--bettrai-font);
	color: var(--bettrai-ink);
}

.bettrai-steps__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 5vw, 80px);
	align-items: start;
	margin-bottom: 40px;
}

.bettrai-steps__heading {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	line-height: 1.15;
	margin: 0;
	color: var(--bettrai-navy);
	font-weight: 650;
}

.bettrai-steps__heading span {
	color: var(--bettrai-btn-green);
}

/* Supporting paragraph — exact spec from the design. */
.bettrai-steps__head p {
	font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: rgb(141, 141, 154);
	text-align: right;
	margin: 0;
	align-self: start;
}

.bettrai-steps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.bettrai-steps__card {
	min-height: 342px;
	padding: 40px 34px 64px;
	border: none;
	border-radius: 0;
	background: #fff;
	box-shadow: none;
	/* Vertically centre the icon/title/body block in the card's face. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Unique wavy-bottom card shape, defined in CSS via an objectBoundingBox
	   clip-path (scales cleanly, no image distortion). */
	-webkit-clip-path: url(#bettrai-step-wave);
	clip-path: url(#bettrai-step-wave);
	filter: drop-shadow(0 16px 26px rgba(7, 18, 74, 0.06));
}
.bettrai-steps__defs { position: absolute; width: 0; height: 0; }

.bettrai-steps__icon {
	display: flex;
	align-items: center;
	height: 30px;
	margin-bottom: 22px;
	color: var(--bettrai-btn-green);
}
/* Cap both dimensions so icons of differing aspect ratios read at a
   consistent visual size (the wide chart icon otherwise looks oversized). */
.bettrai-steps__icon svg,
.bettrai-steps__icon img { width: auto; height: auto; max-width: 26px; max-height: 30px; display: block; }

.bettrai-steps__card h3 {
	color: var(--bettrai-navy);
	margin: 0 0 12px;
	font-size: 1.25rem;
	font-weight: 600;
}

.bettrai-steps__card p {
	font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.6;
	color: rgb(141, 141, 154);
	margin: 0;
}

/* --- FAQ ------------------------------------------------------------------ */
.bettrai-faq {
	padding-block: var(--bettrai-space-section);
	font-family: var(--bettrai-font);
	color: var(--bettrai-ink);
}

.bettrai-faq__head {
	text-align: center;
	margin-bottom: 40px;
}

.bettrai-faq__heading {
	font-size: clamp(1.8rem, 3.2vw, 2.6rem);
	margin: 0 0 12px;
	color: var(--bettrai-navy);
	line-height: 1.15;
	font-weight: 600;
}
.bettrai-providers-page .bettrai-faq__heading,
.bettrai-payers-page .bettrai-faq__heading {
	font-size: 48px;
	font-weight: 650;
	line-height: 1.3;
}
@media (max-width: 767px) {
	/* Floating pill header sits with a visible gap above it (the desktop
	   margin-top) - looks especially odd at the bottom of the page where the
	   fixed header floats over the footer. Pull it in close to the top edge
	   on mobile instead. */
	.bettrai-hero__header { margin-top: 6px; }

	/* Fixed 48px with no responsive clamp - oversized on phones, same
	   "not uniform with the home page H1" issue fixed elsewhere on these
	   pages. */
	.bettrai-providers-page .bettrai-faq__heading,
	.bettrai-payers-page .bettrai-faq__heading {
		font-size: clamp(1.9rem, 8vw, 2.3rem);
		line-height: 1.2;
	}
	/* "Don't Let Fragmented Care" + accented "Hold You Back" is one sentence;
	   the accent span's display:block forced it onto its own line always,
	   which combined with the phone-width wrap of the first part orphaned
	   "Care" onto its own line. Let it flow as plain inline text and wrap
	   naturally by width instead of by color boundary. */
	.bettrai-faq__heading-accent { display: inline !important; }
	.bettrai-faq__head { text-align: left; }

	/* Site-wide: every section heading below uses a hardcoded desktop clamp()
	   whose MIN bound (1.8-2.75rem, or bettrai-bento__heading's flat 48px with
	   no clamp at all) is still too large for a ~340px phone content column,
	   wrapping to one or two words per line. Same root cause as the FAQ heading
	   fix above; normalized to one shared phone-safe size per tier here instead
	   of patching each widget's mobile size individually. */
	.bettrai-probsol__heading,
	.bettrai-probsol__card-heading,
	.bettrai-sophie__heading,
	.bettrai-care__heading,
	.bettrai-platform__challenge h2,
	.bettrai-platform__intro h2,
	.bettrai-steps__heading,
	.bettrai-cta__heading,
	.bettrai-bento__heading,
	.bettrai-bento__eyebrow,
	.bettrai-faq__heading,
	.bettrai-sophie-faq__head .bettrai-sophie-h2,
	.bettrai-programs-faq__head .bettrai-programs-h2,
	.bettrai-platform__lead-title {
		font-size: clamp(1.7rem, 7.5vw, 2.1rem) !important;
		line-height: 1.2 !important;
	}

	/* "Improved Lives." (2 words) easily fits on one line at this mobile size;
	   without this it wraps mid-phrase into "Improved" / "Lives." across two
	   separate lines, orphaning the second word. */
	.bettrai-bento__heading {
		white-space: nowrap;
		margin-bottom: 36px !important;
	}

	.bettrai-sophie__card-title,
	.bettrai-care__panel h3 {
		font-size: clamp(1.05rem, 5vw, 1.3rem) !important;
		line-height: 1.3 !important;
	}

	/* Big bento stat numbers (45%, 87%, etc.) at 49px min-bound clip against the
	   phone-width card padding. */
	.bettrai-bento__stat {
		font-size: clamp(2.4rem, 12vw, 3rem) !important;
	}
}
.bettrai-faq__heading-accent {
	display: block;
	color: var(--bettrai-btn-green);
}

.bettrai-faq__copy {
	color: rgb(141, 141, 154);
	font-family: var(--bettrai-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	margin: 0 auto;
	/* No max-width previously — the subtext stretched to the full section
	   width as one long line. Cap it so it wraps naturally onto ~2 lines
	   under the centered heading instead. */
	max-width: 560px;
}

.bettrai-faq__item {
	border-bottom: 1px solid rgba(7, 18, 74, 0.1);
}

.bettrai-faq__q {
	margin: 0;
}

.bettrai-faq .bettrai-faq__trigger,
.bettrai-sophie-faq .bettrai-faq__trigger,
.bettrai-programs-faq .bettrai-faq__trigger,
.bettrai-programs-between__list .bettrai-faq__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 24px 8px;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	font-family: inherit;
	font-size: clamp(1rem, 1.4vw, 1.15rem);
	font-weight: 600;
	line-height: 1.4;
	color: var(--bettrai-navy);
}

.bettrai-faq button.bettrai-faq__trigger,
.bettrai-faq button.bettrai-faq__trigger:not(:hover):not(:active),
.bettrai-faq .bettrai-faq__trigger:focus,
.bettrai-faq .bettrai-faq__trigger[aria-expanded="true"],
.bettrai-faq .bettrai-faq__item.is-open .bettrai-faq__trigger,
.bettrai-sophie-faq button.bettrai-faq__trigger,
.bettrai-sophie-faq button.bettrai-faq__trigger:not(:hover):not(:active),
.bettrai-sophie-faq .bettrai-faq__trigger:focus,
.bettrai-sophie-faq .bettrai-faq__trigger[aria-expanded="true"],
.bettrai-sophie-faq .bettrai-faq__item.is-open .bettrai-faq__trigger,
.bettrai-programs-between__list .bettrai-faq__trigger,
.bettrai-programs-between__list .bettrai-faq__trigger:focus,
.bettrai-programs-between__list .bettrai-faq__trigger[aria-expanded="true"],
.bettrai-programs-between__list .bettrai-faq__item.is-open .bettrai-faq__trigger,
.bettrai-programs-faq button.bettrai-faq__trigger,
.bettrai-programs-faq button.bettrai-faq__trigger:not(:hover):not(:active),
.bettrai-programs-faq .bettrai-faq__trigger:focus,
.bettrai-programs-faq .bettrai-faq__trigger[aria-expanded="true"],
.bettrai-programs-faq .bettrai-faq__item.is-open .bettrai-faq__trigger {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--bettrai-navy) !important;
}

.bettrai-faq .bettrai-faq__trigger:hover,
.bettrai-faq .bettrai-faq__trigger:active,
.bettrai-sophie-faq .bettrai-faq__trigger:hover,
.bettrai-sophie-faq .bettrai-faq__trigger:active,
.bettrai-programs-between__list .bettrai-faq__trigger:hover,
.bettrai-programs-between__list .bettrai-faq__trigger:active,
.bettrai-programs-faq .bettrai-faq__trigger:hover,
.bettrai-programs-faq .bettrai-faq__trigger:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: var(--bettrai-btn-green) !important;
}

.bettrai-faq__trigger:focus-visible {
	outline: 3px solid var(--bettrai-cyan);
	outline-offset: 2px;
	border-radius: var(--bettrai-radius-sm);
}

.bettrai-faq__icon {
	position: relative;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.bettrai-faq__icon::before,
.bettrai-faq__icon::after {
	content: "";
	position: absolute;
	background: var(--bettrai-btn-green);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.bettrai-faq__icon::before {
	top: 9px;
	left: 0;
	width: 20px;
	height: 2px;
}

.bettrai-faq__icon::after {
	top: 0;
	left: 9px;
	width: 2px;
	height: 20px;
}

.bettrai-faq__item.is-open .bettrai-faq__icon::after {
	transform: scaleY(0);
	opacity: 0;
}

.bettrai-faq__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.22s ease;
}

.bettrai-faq__answer {
	padding: 0 8px 24px;
	color: rgb(141, 141, 154);
	font-family: var(--bettrai-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 30px;
	max-width: 70ch;
}

.bettrai-faq__answer p {
	margin: 0;
	font: inherit;
	color: inherit;
	line-height: inherit;
}

/* --- CTA + Footer --------------------------------------------------------- */
.bettrai-ctafooter {
	padding-block: clamp(42px, 5vw, 68px);
	background:
		linear-gradient(90deg, rgba(246, 253, 255, 0.94), rgba(224, 253, 244, 0.9)),
		url("../images/bento-quote-bg.png") right center / cover no-repeat;
	font-family: var(--bettrai-font);
}

.bettrai-cta {
	display: flex;
	align-items: stretch;
	gap: clamp(18px, 2vw, 28px);
	max-width: none;
	margin-inline: 0;
}

.bettrai-cta__card {
	position: relative;
	flex: 1.12 1 0;
	background: linear-gradient(120deg, var(--bettrai-blue), var(--bettrai-cyan));
	border-radius: var(--bettrai-radius-lg);
	height: clamp(340px, 27vw, 410px);
	padding: clamp(42px, 4.1vw, 58px) clamp(42px, 4.6vw, 64px);
	color: var(--bettrai-white);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bettrai-cta__heading {
	font-size: clamp(2.75rem, 3.25vw, 3.85rem);
	line-height: 1.04;
	font-weight: 500;
	margin: 0 0 clamp(28px, 2.8vw, 38px);
	max-width: 28ch;
	letter-spacing: 0;
}

.bettrai-cta__heading span {
	color: #61EFEF;
}

.bettrai-cta__mark {
	position: absolute;
	top: clamp(24px, 3vw, 34px);
	right: clamp(24px, 3vw, 34px);
	width: clamp(36px, 3.4vw, 48px);
	height: auto;
}

.bettrai-cta__lead {
	color: rgba(255, 255, 255, 0.85);
	font-size: 1rem;
	line-height: 1.65;
	max-width: 52ch;
	margin: -14px 0 26px;
}

.bettrai-cta__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bettrai-cta .bettrai-btn--primary {
	border-radius: 10px;
	min-height: 48px;
	padding-inline: 30px;
	font-size: 0.95rem;
}

.bettrai-cta .bettrai-btn--primary,
.bettrai-cta .bettrai-btn--primary:hover,
.bettrai-cta .bettrai-btn--primary:focus-visible {
	color: var(--bettrai-white) !important;
}

.bettrai-cta__arrow {
	width: 48px;
	height: 48px;
	display: inline-grid;
	place-items: center;
	border-radius: 10px;
	background: var(--bettrai-white);
	color: var(--bettrai-btn-green);
	text-decoration: none;
	box-shadow: var(--bettrai-shadow-soft);
}

.bettrai-cta__arrow svg {
	width: 20px;
	height: 20px;
}

.bettrai-cta__media {
	flex: 0.88 1 0;
	height: clamp(340px, 27vw, 410px);
	overflow: hidden;
	border-radius: var(--bettrai-radius-lg);
}

.bettrai-cta__media img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	border-radius: var(--bettrai-radius-lg);
	display: block;
	object-fit: cover;
	object-position: center;
}

.bettrai-footer {
	/* Default gradient — overridden per-instance via inline style computed
	   in Chrome::footer() from Elementor's Site Footer template settings. */
	background: linear-gradient(118deg, #172261 0%, #2937a0 54%, #3142b8 100%);
	color: rgba(255, 255, 255, 0.76);
	font-family: var(--bettrai-font-heading);
	padding-block: clamp(48px, 4.6vw, 64px) 0;
}

.bettrai-footer > .bettrai-container {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--bettrai-container);
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
	background: transparent !important;
}

.bettrai-footer__masthead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(330px, 0.95fr);
	align-items: center;
	gap: clamp(32px, 7vw, 120px);
	padding-bottom: 38px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.bettrai-footer__mastbrand p,
.bettrai-footer__newsletter p {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.82);
}

.bettrai-footer__logo {
	max-height: 40px;
	width: auto;
	margin-bottom: 18px;
}

.bettrai-footer__logo-text {
	display: inline-block;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--bettrai-white);
	margin-bottom: 16px;
}

.bettrai-footer__tagline {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.65;
	margin: 0 0 44px;
	max-width: 42ch;
	color: rgba(255, 255, 255, 0.66);
}

.bettrai-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.bettrai-footer__signup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 46px;
	align-items: center;
	min-height: 58px;
	padding: 4px;
	border: 1px solid rgba(100, 197, 197, 0.72);
	border-radius: 999px;
	background: transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.bettrai-footer__signup:focus-within {
	border-width: 2px;
	border-color: var(--bettrai-btn-green);
}

.bettrai-footer .bettrai-footer__nl-input {
	width: 100%;
	min-width: 0;
	padding: 0 20px;
	border-radius: 999px;
	border: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	color: var(--bettrai-white);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	outline: 0;
}

.bettrai-footer .bettrai-footer__nl-input:focus,
.bettrai-footer .bettrai-footer__nl-input:focus-visible {
	border: 0;
	box-shadow: none;
	outline: 0;
	background: transparent;
}

.bettrai-footer__nl-input::placeholder {
	color: rgba(255, 255, 255, 0.82);
}

.bettrai-footer .bettrai-footer__submit {
	width: 46px;
	height: 46px;
	padding: 0;
	border: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	line-height: 1;
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
	cursor: pointer;
}

.bettrai-footer .bettrai-footer__submit:hover {
	background: var(--bettrai-teal-hover);
	color: var(--bettrai-white);
}

.bettrai-footer .bettrai-footer__submit svg path {
	stroke: currentColor;
}

.bettrai-footer__submit svg {
	width: 22px;
	height: 22px;
	display: block;
}

.bettrai-footer__main {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(190px, 1.05fr) minmax(230px, 1.25fr);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.bettrai-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.bettrai-footer__about,
.bettrai-footer__main > .bettrai-footer__col {
	padding-block: 34px 38px;
}

.bettrai-footer__main > .bettrai-footer__col {
	padding-left: clamp(34px, 5vw, 76px);
	border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.bettrai-footer__col-title {
	color: var(--bettrai-white);
	font-size: 17px;
	line-height: 1.3;
	margin: 0 0 24px;
	font-weight: 700;
}

.bettrai-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	color: rgba(255, 255, 255, 0.66);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.6;
}

.bettrai-footer__col a {
	color: rgba(255, 255, 255, 0.66);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.bettrai-footer__col a:hover,
.bettrai-footer__col a:focus-visible {
	color: #4BC4C5;
	text-decoration: none;
}

.bettrai-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 58px;
	padding-block: 20px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
}

.bettrai-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bettrai-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	min-width: 34px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.1);
	color: var(--bettrai-white);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.bettrai-footer__social a:hover,
.bettrai-footer__social a:focus-visible {
	background: var(--bettrai-blue);
	color: var(--bettrai-white) !important;
	text-decoration: none;
}

.bettrai-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bettrai-footer__legal li:not(:first-child) {
	position: relative;
	padding-left: 16px;
}

.bettrai-footer__legal li:not(:first-child)::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 14px;
	background: rgba(255, 255, 255, 0.28);
}

.bettrai-footer__legal a {
	color: rgba(255, 255, 255, 0.84);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s ease;
}

.bettrai-footer__legal a:hover,
.bettrai-footer__legal a:focus-visible {
	color: #4BC4C5;
	text-decoration: none;
}

.bettrai-footer__bottom p {
	margin: 0;
	color: rgba(255, 255, 255, 0.72);
	font-size: 14px;
	line-height: 1.55;
}

@media (max-width: 900px) {
	.bettrai-footer__masthead,
	.bettrai-footer__main {
		grid-template-columns: 1fr;
	}

	.bettrai-footer__main > .bettrai-footer__col {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}
}

/* --- Typography alignment to Figma (Satoshi headings, corrected colors) --- */
.bettrai-hero__heading,
.bettrai-probsol__heading,
.bettrai-probsol__card-heading,
.bettrai-sophie__heading,
.bettrai-sophie__card-title,
.bettrai-care__heading,
.bettrai-care__panel h3,
.bettrai-platform__challenge h2,
.bettrai-platform__intro h2,
.bettrai-bento__heading,
.bettrai-steps__heading,
.bettrai-steps__card h3,
.bettrai-faq__heading,
.bettrai-cta__heading,
.bettrai-mission__title,
.bettrai-mission__heading {
	font-family: var(--bettrai-font-heading);
	letter-spacing: -0.01em;
}

/* Light-section headings use the Figma slate (#484868), not deep navy. */
.bettrai-probsol__heading,
.bettrai-probsol__card-heading,
.bettrai-sophie__heading,
.bettrai-platform__challenge h2,
.bettrai-platform__intro h2,
.bettrai-steps__heading,
.bettrai-faq__heading {
	color: var(--bettrai-heading);
}

/* ==========================================================================
   4. Responsive
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
	.bettrai-care__grid,
	.bettrai-platform__intro {
		grid-template-columns: 1fr;
	}

	.bettrai-sophie__grid {
		grid-template-columns: repeat(2, 1fr);
		align-items: stretch;
		gap: 16px;
	}

	.bettrai-probsol__card {
		grid-template-columns: 1fr;
	}

	/* "How It Works" (Steps widget), tablet only: same treatment as the
	   Sophie cards above — drop the wavy SVG clip-path card shape (it doesn't
	   read well at 2-column width), 2 cards side by side, 3rd card stretched
	   full width. */
	.bettrai-steps__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
	.bettrai-steps__card {
		min-height: 0;
		padding: clamp(32px, 4vw, 40px) clamp(26px, 3vw, 34px);
		background: transparent;
		border: 1px solid #cfe0e2;
		border-radius: var(--bettrai-radius-md);
		-webkit-clip-path: none;
		clip-path: none;
		filter: none;
	}
	.bettrai-steps__card:nth-child(3) { grid-column: 1 / -1; }

	.bettrai-faq__head { text-align: left; }

	/* "More Support For Patients." head, tablet only: the 2-col
	   heading|copy grid is too tight at tablet width and forces awkward
	   wraps — stack heading on top, copy below, both left-aligned. */
	.bettrai-sophie__head {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 20px;
	}
	.bettrai-sophie__copy {
		text-align: left;
		justify-self: start;
	}

	/* "Less Administrative Burden / More Time for What Matters." (OutcomesBento),
	   tablet only: fixed 48px H1 with no responsive clamp is oversized at
	   tablet width too (only phones were covered before). Desktop untouched. */
	.bettrai-bento__eyebrow,
	.bettrai-bento__heading {
		font-size: clamp(1.9rem, 5vw, 2.6rem);
	}

	/* "How It Works" head, tablet only: same treatment as the Sophie head —
	   stack heading on top, copy below, both left-aligned. */
	.bettrai-steps__head {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-bottom: 20px;
	}
	.bettrai-steps__head p {
		text-align: left;
	}

	.bettrai-bento__quote p {
		line-height: 1.4;
	}

	.bettrai-sophie__heading {
		line-height: 1.25;
	}

	/* Tablet only (768-1024px): drop the decorative wavy SVG outline/stagger
	   (same plain-border treatment as mobile, see block #16 below) since at
	   2-column width the wave no longer aligns across cards, and make the
	   3rd card span both columns as a full-width wrapper instead of sitting
	   alone in column 1. */
	.bettrai-sophie__card,
	.bettrai-sophie__card:first-child,
	.bettrai-sophie__card:last-child {
		background: transparent;
		border: 1px solid #cfe0e2;
		border-radius: var(--bettrai-radius-md);
		box-shadow: none;
		min-height: 0;
		margin-top: 0;
		padding: clamp(26px, 2.6vw, 40px);
	}
	.bettrai-sophie__card:nth-child(1),
	.bettrai-sophie__card:nth-child(2),
	.bettrai-sophie__card:nth-child(3) {
		min-height: 0;
		margin-top: 0;
	}
	.bettrai-sophie__card::before { display: none; }
	.bettrai-sophie__card:nth-child(3) { grid-column: 1 / -1; }
	.bettrai-sophie__card:nth-child(3) .bettrai-sophie__card-text {
		max-width: none;
	}

	.bettrai-bento__grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
	}

	.bettrai-bento__cell,
	.bettrai-bento__cell--bp,
	.bettrai-bento__cell--photo,
	.bettrai-bento__cell--image,
	.bettrai-bento__cell--admissions,
	.bettrai-bento__cell--prior,
	.bettrai-bento__cell--stat,
	.bettrai-bento__cell--quote,
	.bettrai-bento__cell--wide {
		grid-column: span 2;
	}

	/* Admissions + Prior Auth stat cards side by side on tablet, instead of
	   each taking the full width like the rest of the bento cells. The
	   (empty on tablet) decorative photo/image cells between them are grid
	   items too, even with no visible content, so they still occupy their
	   own row and force admissions/prior apart — take them out of flow. */
	.bettrai-bento__cell--admissions,
	.bettrai-bento__cell--prior {
		grid-column: span 1;
	}
	.bettrai-bento__cell--photo,
	.bettrai-bento__cell--image {
		display: none;
	}

	.bettrai-mission__team {
		flex-wrap: wrap;
	}

	.bettrai-mission__card {
		flex-basis: calc(33.333% - 14px);
	}

	.bettrai-mission__card:nth-child(4),
	.bettrai-mission__card:nth-child(5) {
		display: none;
	}
}

/* Mobile / small-tablet navigation: collapse the primary nav into a
   hamburger-triggered dropdown. Desktop (>900px) is unaffected. */
@media (max-width: 900px) {
	.bettrai-hero__burger { display: flex; }

	/* Keep the glass bar docked; push the CTA + burger to the right. */
	.bettrai-hero__brand { margin-right: auto; }

	.bettrai-hero__nav-cta {
		min-height: 44px;
		padding: 0 18px;
		font-size: 0.9rem;
	}

	/* Nav becomes a dropdown card anchored under the bar; hidden until open. */
	.bettrai-hero__nav {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		margin-inline: 0;
		background: #ffffff;
		border-radius: 14px;
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		border: 1px solid rgba(7, 18, 74, 0.08);
		padding: 10px;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	}

	.bettrai-hero__header.is-nav-open .bettrai-hero__nav {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-hero__nav ul {
		flex-direction: column;
		gap: 2px;
		align-items: stretch;
	}

	.bettrai-hero__nav li { width: 100%; }

	.bettrai-hero__nav a {
		display: block;
		padding: 12px 14px;
		border-radius: 10px;
		color: var(--bettrai-navy);
		opacity: 1;
		font-size: 1rem;
	}

	.bettrai-hero__nav a:hover,
	.bettrai-hero__nav a:focus-visible {
		background: rgba(100, 197, 197, 0.14);
		color: var(--bettrai-btn-green);
	}

	/* Submenu expands inline (indented) inside the dropdown on mobile. */
	.bettrai-hero__submenu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		min-width: 0;
		padding: 2px 0 6px 14px;
	}
	.bettrai-hero__submenu a { font-size: 0.95rem; padding: 10px 14px; }
	.bettrai-hero__has-sub > a { font-weight: 600; }

}

/* Mobile */
@media (max-width: 767px) {
	.bettrai-container {
		padding-inline: 18px;
	}

	.bettrai-hero {
		min-height: 620px;
	}

	.bettrai-probsol__card {
		grid-template-columns: 1fr;
	}

	.bettrai-probsol__pills {
		grid-template-columns: 1fr;
	}

	.bettrai-sophie__head,
	.bettrai-steps__head {
		grid-template-columns: 1fr;
	}

	.bettrai-sophie__grid {
		grid-template-columns: 1fr;
	}

	.bettrai-care__panel,
	.bettrai-platform__visual {
		min-height: auto;
	}

	/* Same fixed-size-clamp issue as the FAQ heading elsewhere in this file — but
	   ALSO overridden by Elementor's own generated per-post CSS (the widget's
	   Typography control has no responsive breakpoint set, so it applies a flat
	   48px at every screen size via a much more specific selector chain like
	   ".elementor-7 .elementor-element.elementor-element-XXXX .bettrai-mission__title").
	   !important is required here to actually win against that. */
	.bettrai-mission__title {
		font-size: clamp(1.5rem, 7vw, 1.9rem) !important;
		line-height: 1.25 !important;
	}
	.bettrai-mission__heading {
		font-size: clamp(1.15rem, 5.2vw, 1.4rem) !important;
		line-height: 1.4 !important;
	}

	/* Care Management scene (the animated Sophie hub graphic): 4 floating cards
	   crowd/overlap the figure at phone width and the engagement card covers
	   her face. Keep only the Sophie identity card, moved down clear of her
	   face; drop the other 3. */
	.bettrai-hub__card--capacity,
	.bettrai-hub__card--task,
	.bettrai-hub__card--engagement {
		display: none;
	}
	.bettrai-hub__card--sophie {
		top: auto !important;
		bottom: 6% !important;
		left: 50% !important;
		transform: translateX(-50%);
	}

	/* Hero: tighten the subtext's own line spacing (Elementor's Supporting Text
	   Typography control has no good mobile line-height set, so it inherits an
	   oversized one), while giving the H1 more room from the paragraph below it,
	   and nudge the whole content block down a touch from the top of the hero. */
	.bettrai-hero__content {
		padding-top: clamp(72px, 15vw, 120px);
	}
	.bettrai-hero__heading {
		margin-bottom: 28px;
	}
	.bettrai-hero__subheading {
		line-height: 1.5 !important;
	}

	/* Only the first 3 cards, sized down further since phone width can't
	   comfortably fit even 3 at tablet size. */
	.bettrai-mission__team {
		flex-wrap: wrap;
		align-items: flex-end;
		justify-content: center;
		gap: 16px;
	}

	.bettrai-mission__card {
		flex-basis: calc(33.333% - 11px);
		max-width: 130px;
	}

	.bettrai-mission__card img {
		border-radius: 12px;
	}

	.bettrai-mission__card:nth-child(4),
	.bettrai-mission__card:nth-child(5) {
		display: none;
	}

	.bettrai-steps__grid {
		grid-template-columns: 1fr;
	}

	.bettrai-steps__card {
		margin-left: 0 !important;
	}

	.bettrai-bento__grid {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}

	.bettrai-bento__cell {
		min-height: 200px;
	}

	.bettrai-bento__cell,
	.bettrai-bento__cell--bp,
	.bettrai-bento__cell--photo,
	.bettrai-bento__cell--image,
	.bettrai-bento__cell--admissions,
	.bettrai-bento__cell--prior,
	.bettrai-bento__cell--stat,
	.bettrai-bento__cell--quote,
	.bettrai-bento__cell--wide {
		grid-column: span 1;
	}

	/* Admissions/Prior Auth stat cards: the shared 200px min-height is taller
	   than their short kicker+stat+label content, and the base
	   align-content:start (needed for desktop row alignment) leaves that
	   leftover space stranded below the text instead of framing it evenly.
	   The quote card doesn't have this problem because it stretches+centers
	   internally; give these cards the same centered feel. */
	.bettrai-bento__cell--admissions,
	.bettrai-bento__cell--prior,
	.bettrai-bento__cell--stat {
		align-content: center;
	}

	.bettrai-cta {
		flex-direction: column;
	}

	.bettrai-footer__top {
		grid-template-columns: 1fr;
	}

	.bettrai-footer__bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bettrai-btn,
	.bettrai-faq__icon::before,
	.bettrai-faq__icon::after,
	.bettrai-faq__panel,
	.bettrai-logostrip__img {
		transition: none;
	}

	.bettrai-mission::before {
		animation: none;
	}
}

/* ==========================================================================
   SOPHIE LANDING PAGE  (.bettrai-sophie-page)
   Scoped page built from assets/figma-sophie reference. Never affects the
   homepage preview. Teal accent = #29BCBC, navy ink = #232350.
   ========================================================================== */

.bettrai-sophie-page {
	--sp-teal: #29BCBC;
	--sp-teal-soft: #5cc9c9;
	--sp-ink: #24244d;
	--sp-navy: #0b1533;
	--sp-navy-2: #0e1a3d;
	--sp-body: #6a6a80;
	--sp-mint: #c7ede6;
	--sp-green: #16845f;
	--sp-green-2: #1f7a5e;
	font-family: var(--bettrai-font);
	color: var(--sp-ink);
	background: #ffffff;
	overflow-x: hidden;
}

.bettrai-sophie-page img { max-width: 100%; }

.bettrai-sophie-h2 {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: rgb(72, 72, 104);
	line-height: 1.22;
	letter-spacing: -0.01em;
	margin: 0;
	font-size: clamp(1.9rem, 3.4vw, 3rem);
}
.bettrai-sophie-h2 span { color: var(--sp-teal); }
@media (max-width: 767px) {
	/* Uniform mobile H1/H2 size across every Sophie inner-page section
	   (this one shared class), matching the Home page's mobile heading size.
	   !important: several widgets register their own Elementor typography
	   control targeting "h2.bettrai-sophie-h2" (element+class), which beats
	   this plain class selector on specificity regardless of source order. */
	.bettrai-sophie-h2 { font-size: 28px !important; line-height: 1.30 !important; }
	/* Same uniform mobile size/line-height for every other page's main section
	   heading class — matches the Sophie page treatment above. !important for
	   the same reason: per-widget Elementor typography controls target
	   "h2.bettrai-x-h2" (element+class) and outrank a plain class selector on
	   specificity regardless of source order. */
	.bettrai-payers-h2,
	.bettrai-providers-h2,
	.bettrai-programs-h2,
	.bettrai-about-h2,
	.bettrai-contact-h2 { font-size: 28px !important; line-height: 1.30 !important; }
}

.bettrai-sophie-eyebrow {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid var(--sp-teal);
	border-radius: 999px;
	color: var(--sp-teal);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Square outline arrow button */
.bettrai-sophie-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--bettrai-radius-md);
	border: 1.5px solid var(--sp-teal);
	background: #fff;
	color: var(--sp-teal);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bettrai-sophie-square svg { width: 20px; height: 20px; }
.bettrai-sophie-square:hover { background: var(--sp-teal); color: #fff; }
.bettrai-sophie-square--light { border-color: rgba(255,255,255,0.6); color: #fff; }
.bettrai-sophie-square--light:hover { background: #fff; color: var(--sp-navy); }

/* ------------------------------- HEADER -------------------------------
   Reuses the shared .bettrai-hero__header component. The Sophie hero is
   light, so the glass bar is themed to its solid/white "docked" look from
   the top (dark logo + dark nav + green CTA); the scroll-docking width JS
   still applies. */
.bettrai-sophie-page .bettrai-hero__header {
	background: #fff;
	border-color: rgba(7, 18, 74, 0.06);
	box-shadow: 0 10px 30px rgba(11, 21, 51, 0.10);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.bettrai-sophie-page .bettrai-hero__logo--light { opacity: 0; }
.bettrai-sophie-page .bettrai-hero__logo--dark { opacity: 1; }
.bettrai-sophie-page .bettrai-hero__nav a { color: var(--bettrai-navy); opacity: 0.85; }
/* The burger icon is inline SVG <line> elements using stroke="currentColor",
   not <span> bars - the old span-targeting rule here never matched, so the
   icon stayed at the default white (meant for a transparent header over a
   photo) and was nearly invisible against this page's solid white bar. */
.bettrai-sophie-page .bettrai-hero__burger { color: var(--bettrai-navy); }
.bettrai-sophie-page .bettrai-hero__nav a:hover { color: var(--sp-teal); opacity: 1; }
.bettrai-sophie-page .bettrai-hero__nav-cta {
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
}
.bettrai-sophie-page .bettrai-hero__nav-cta:hover { background: var(--bettrai-teal-hover); }

/* Legal pages (Privacy / Terms): no dark hero, so theme the shared glass bar to
   the same solid-white "docked" look as the Sophie page from the top — dark logo,
   navy nav, green CTA. Uses global tokens (sp-* are scoped to the Sophie page). */
.bettrai-legal-page .bettrai-hero__header {
	background: #fff;
	border-color: rgba(7, 18, 74, 0.06);
	box-shadow: 0 10px 30px rgba(11, 21, 51, 0.10);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.bettrai-legal-page .bettrai-hero__logo--light { opacity: 0; }
.bettrai-legal-page .bettrai-hero__logo--dark { opacity: 1; }
.bettrai-legal-page .bettrai-hero__nav a { color: var(--bettrai-navy); opacity: 0.85; }
.bettrai-legal-page .bettrai-hero__burger span { background: var(--bettrai-navy); }
.bettrai-legal-page .bettrai-hero__nav a:hover { color: var(--bettrai-teal-hover); opacity: 1; }
.bettrai-legal-page .bettrai-hero__nav-cta {
	background: var(--bettrai-btn-green);
	color: var(--bettrai-white);
}
.bettrai-legal-page .bettrai-hero__nav-cta:hover { background: var(--bettrai-teal-hover); }

/* -------------------------------- HERO -------------------------------- */
.bettrai-sophie-hero {
	position: relative;
	background: linear-gradient(180deg, #eef7f8 0%, #f6fbfb 60%, #ffffff 100%);
	/* Clear the fixed shared header. */
	padding-top: clamp(96px, 10vw, 132px);
	overflow: hidden;
}
/* Hospital corridor as the full-fold hero background. */
.bettrai-sophie-hero__bg {
	position: absolute;
	/* width/height:100% + inset:0 together (confirmed via devtools measurement
	   - width was rendering at the image's intrinsic size, e.g. 1660px inside
	   a 1920px section, instead of stretching). A prior attempt removed
	   width/height:100% to fix a MOBILE height bug (this <img> stopping
	   partway down the section), but that broke desktop/tablet width instead.
	   This element is now hidden on mobile anyway (see the CSS
	   background-image fallback further down), so it only needs to be
	   correct for desktop/tablet here - width/height:100% is safe again. */
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	max-width: none;
	object-fit: cover;
	object-position: 65% center;
	pointer-events: none;
}
/* Soft wash so headline/body stay readable over the bright-left corridor. */
.bettrai-sophie-hero__wash {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(238, 247, 248, 0.92) 0%, rgba(240, 249, 250, 0.7) 34%, rgba(246, 251, 251, 0.15) 60%, rgba(255, 255, 255, 0) 82%);
}
.bettrai-sophie-hero__inner { position: relative; z-index: 2; }
.bettrai-sophie-hero__inner {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	align-items: end;
	gap: 20px;
	min-height: 760px;
}
.bettrai-sophie-hero__copy { padding: 20px 0 80px; max-width: 760px; align-self: center; }
.bettrai-sophie-hero__title {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: rgb(72, 72, 104);
	font-size: clamp(2.4rem, 4vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.015em;
	margin: 22px 0 20px;
	white-space: nowrap;
}
.bettrai-sophie-hero__title span { color: var(--sp-teal); }
.bettrai-sophie-hero__lead {
	font-family: var(--bettrai-font);
	font-weight: 500;
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 30px;
	max-width: 520px;
	margin: 0 0 30px;
}
.bettrai-sophie-hero__actions { display: flex; align-items: center; gap: 14px; }
/* Match the design: primary CTA is a rounded rectangle the same height as the
   arrow square (not a full pill). */
.bettrai-sophie-hero__actions .bettrai-btn--primary {
	border-radius: var(--bettrai-radius-md);
	min-height: 52px;
	padding: 0 30px;
}
/* Transparent Sophie cutout bleeds into the hero — no card/box. */
.bettrai-sophie-hero__media {
	align-self: end;
	justify-self: end;
	position: relative;
	width: min(64vw, 1080px);
	max-width: none;
	/* Bigger Sophie, pulled left toward the text (still clear of the right edge). */
	margin-right: 0;
	/* Slide Sophie left toward the text (image is wider than its grid track, so a
	   transform is the reliable way to move her). */
	transform: translateX(clamp(-480px, -30vw, -240px));
}
.bettrai-sophie-hero__figure {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	filter: drop-shadow(0 24px 40px rgba(11, 21, 51, 0.12));
}
.bettrai-sophie-hero__glow {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 44%;
	transform: translate(-50%, -50%);
	width: 92%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(114, 210, 220, 0.32) 0%, rgba(114, 210, 220, 0) 66%);
}
/* Your badge cluster SVG, sat in the space to Sophie's RIGHT, in front of the
   background curves (not between Sophie and the body text). */
.bettrai-sophie-hero__badges {
	position: absolute;
	z-index: 4;
	right: 2%;
	top: 30%;
	width: clamp(78px, 12%, 130px);
	aspect-ratio: 181 / 244;
	pointer-events: none;
	transform-origin: center;
	animation: bettrai-badges-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s both,
		bettrai-badges-float 4.5s ease-in-out 1.15s infinite;
}
.bettrai-sophie-hero__badge {
	position: absolute;
	display: grid;
	place-items: center;
	border-radius: 50%;
	box-shadow: 0 8px 20px rgba(7, 18, 74, 0.14);
}
.bettrai-sophie-hero__badge svg { width: 42%; height: 42%; fill: #fff; color: #fff; }
.bettrai-sophie-hero__badge i { color: #fff; font-size: 38%; }
.bettrai-sophie-hero__badge--1 { left: -1%; top: 11%; width: 63%; aspect-ratio: 1; background: #64C5C5; }
.bettrai-sophie-hero__badge--2 { left: 14%; top: 72%; width: 36%; aspect-ratio: 1; background: #00414B; }
.bettrai-sophie-hero__badge--3 { left: 68%; top: -4%; width: 32%; aspect-ratio: 1; background: #008A8F; }

@keyframes bettrai-badges-in {
	0%   { opacity: 0; transform: translateY(14px) scale(0.6); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes bettrai-badges-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
	.bettrai-sophie-hero__badges { animation: none; }
}

/* ------------------------------ SUPPORT ------------------------------ */
.bettrai-sophie-support { padding: clamp(24px, 3vw, 48px) 0 clamp(88px, 10vw, 144px); }
.bettrai-sophie-support__inner {
	display: grid;
	grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1fr);
	column-gap: clamp(32px, 4.5vw, 64px);
	row-gap: clamp(28px, 3.8vw, 42px);
	align-items: center;
}
.bettrai-sophie-support__media { position: relative; }
.bettrai-sophie-support__media img,
.bettrai-sophie-support__media video {
	width: 100%;
	display: block;
	aspect-ratio: 1 / 0.86;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
	box-shadow: none;
}
.bettrai-sophie-support__chip {
	position: absolute;
	left: 18px;
	bottom: 18px;
	display: flex;
	align-items: center;
	gap: 10px;
	background: #fff;
	border-radius: var(--bettrai-radius-md);
	padding: 10px 14px;
	box-shadow: 0 12px 26px rgba(11,21,51,0.14);
}
.bettrai-sophie-support__chip-ava {
	position: relative;
	width: 34px; height: 34px; border-radius: 50%; flex: none;
	background: var(--sp-mint);
}
.bettrai-sophie-support__chip-ava img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.bettrai-sophie-support__chip-check {
	position: absolute;
	right: -3px; bottom: -3px;
	width: 16px; height: 16px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sp-teal);
	border: 2px solid #fff;
	border-radius: 50%;
}
.bettrai-sophie-support__chip-check svg { width: 10px; height: 10px; }
.bettrai-sophie-support__chip-txt { display: flex; flex-direction: column; line-height: 1.2; }
.bettrai-sophie-support__chip-txt b { font-size: 0.85rem; color: var(--sp-ink); display: inline-flex; align-items: center; gap: 6px; }
.bettrai-sophie-support__chip-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--sp-teal); flex: none;
}
.bettrai-sophie-support__chip-txt i { font-size: 0.72rem; font-style: normal; color: var(--sp-body); }

.bettrai-sophie-support__text {
	font-family: var(--bettrai-font);
	font-weight: 500;
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 30px;
	max-width: 670px;
	margin: 18px 0 28px;
}
.bettrai-sophie-support__text p {
	margin: 0;
}
.bettrai-sophie-support__text p + p {
	margin-top: 24px;
}
.bettrai-sophie-support__copy .bettrai-btn--primary {
	min-height: 52px;
	padding: 0 36px;
	border: 1px solid var(--sp-teal);
	border-radius: var(--bettrai-radius-md);
	background: transparent;
	color: var(--sp-teal);
	box-shadow: none;
}
.bettrai-sophie-support__copy .bettrai-btn--primary:hover {
	background: var(--sp-teal);
	color: #fff;
}
.bettrai-sophie-support__defs {
	position: absolute;
	width: 0;
	height: 0;
}
.bettrai-sophie-support__pillars {
	grid-column: 1 / -1;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}
.bettrai-sophie-support__pillars li {
	min-height: clamp(300px, 21vw, 390px);
	padding: clamp(64px, 7vw, 92px) clamp(24px, 3vw, 42px) 78px;
	background: #dff6f0;
	border-radius: 0;
	-webkit-clip-path: url(#bettrai-sophie-pillar-wave);
	clip-path: url(#bettrai-sophie-pillar-wave);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bettrai-sophie-support__pillars li:nth-child(2) {
	background: #cfeffa;
}
.bettrai-sophie-support__pillars li:nth-child(3) {
	background: #dff6f0;
}
.bettrai-sophie-support__pic {
	display: inline-flex;
	height: 30px;
	align-items: center;
	justify-content: flex-start;
	color: var(--sp-navy);
	margin-bottom: 28px;
}
.bettrai-sophie-support__pic svg {
	width: auto;
	height: 100%;
}
.bettrai-sophie-support__pic-img {
	width: 30px;
	height: 30px;
	object-fit: contain;
}
.bettrai-sophie-support__pillars li:first-child .bettrai-sophie-support__pic svg {
	width: 36px;
	height: auto;
}
.bettrai-sophie-support__pillars b {
	display: block;
	font-family: var(--bettrai-font-heading);
	font-weight: 500;
	color: rgb(7, 18, 74);
	font-size: 20px;
	line-height: 24px;
	margin-bottom: 14px;
}
.bettrai-sophie-support__pillars p {
	margin: 0;
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: #757589;
	font-size: 17px;
	line-height: 26px;
}

/* --------------------------- CARE CONTINUES --------------------------- */
.bettrai-sophie-continues { padding: clamp(56px, 6vw, 88px) 0; background: #f6fafa; }
.bettrai-sophie-continues__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 3vw, 34px);
	align-items: stretch;
}
.bettrai-sophie-continues__head {
	grid-column: 1 / -1;
	max-width: 790px;
	margin: 0 auto clamp(32px, 4vw, 52px);
	text-align: center;
}
.bettrai-sophie-continues__title { text-align: center; }
.bettrai-sophie-continues__lead {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: rgb(141, 141, 154);
	font-size: 18px;
	line-height: 30px;
	margin: 18px 0 0;
}
.bettrai-sophie-continues__copy {
	display: flex;
	align-items: center;
	height: clamp(470px, 33vw, 520px);
}
.bettrai-sophie-continues__list {
	width: 100%;
	height: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.bettrai-sophie-continues__item {
	position: relative;
	background: transparent;
	border-bottom: 1px solid rgba(41, 188, 188, 0.28);
	box-shadow: none;
	transition: background-color 0.2s ease, flex-grow 0.25s ease;
}
/* Hide the divider directly above an open item so its highlight box has no top line. */
.bettrai-sophie-continues__item:has(+ .is-active) { border-bottom: 0; }
.bettrai-sophie-continues__item.is-active {
	flex: 1 1 auto;
	background: #e5f9ff;
	border-bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bettrai-sophie-continues .bettrai-sophie-continues__trigger,
.bettrai-programs-between__list .bettrai-sophie-continues__trigger {
	position: relative;
	width: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	color: rgb(7, 18, 74) !important;
	font: inherit;
	font-family: var(--bettrai-font-heading);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
	text-align: left;
	text-transform: none;
	letter-spacing: normal;
	padding: 24px 32px;
	cursor: pointer;
	display: block;
}

.bettrai-sophie-continues .bettrai-sophie-continues__trigger:hover,
.bettrai-sophie-continues .bettrai-sophie-continues__trigger:focus,
.bettrai-sophie-continues__item.is-active .bettrai-sophie-continues__trigger,
.bettrai-programs-between__list .bettrai-sophie-continues__trigger:hover,
.bettrai-programs-between__list .bettrai-sophie-continues__trigger:focus {
	background: transparent !important;
	color: rgb(7, 18, 74) !important;
}
.bettrai-sophie-continues__trigger:focus-visible {
	outline: 2px solid rgba(41, 188, 188, 0.48);
	outline-offset: -2px;
}
.bettrai-sophie-continues__item.is-active .bettrai-sophie-continues__trigger {
	padding: 36px 32px 10px 32px;
	cursor: default;
}
.bettrai-sophie-continues__panel-copy {
	overflow: hidden;
	max-height: 0;
	transition: max-height 0.25s ease;
	padding: 0 112px 0 32px;
}
.bettrai-sophie-continues__panel-copy p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: rgb(141, 141, 154);
	font-size: 17px;
	line-height: 30px;
	margin: 0;
	padding: 0 0 36px;
}
.bettrai-sophie-continues__item.is-active .bettrai-sophie-continues__panel-copy { max-height: 210px; }

.bettrai-sophie-continues__panel {
	position: relative;
	isolation: isolate;
	background: linear-gradient(150deg, #0f5560 0%, #072429 100%);
	border-radius: 8px;
	height: clamp(470px, 33vw, 520px);
	padding: 0;
	overflow: hidden;
}
.bettrai-sophie-continues__gfx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	container-type: inline-size;
}
.bettrai-sophie-continues__panel-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}
.bettrai-sophie-monitoring {
	position: absolute;
	inset: 50% auto auto 50%;
	width: min(92%, 700px);
	aspect-ratio: 700 / 480;
	transform: translate(-50%, -54%);
	z-index: 1;
}
.bettrai-sophie-monitoring--builder {
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	transform: none;
	background: linear-gradient(150deg, #0f5560 0%, #072429 100%);
	border-radius: 8px;
	overflow: hidden;
}
.bettrai-sophie-monitoring--builder .bettrai-sophie-monitoring__scenes { inset: 0; display: flex; align-items: center; justify-content: center; }
.bettrai-sophie-monitoring--builder .mon-scene { position: absolute; }
/* --- Swappable scenes (one per accordion item) --- */
.bettrai-sophie-monitoring__scenes { position: absolute; inset: 0; z-index: 1; }
.bettrai-sophie-monitoring__hub { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.mon-scene {
	position: absolute; inset: 0; width: 100%; height: 100%;
	opacity: 0; transform: translateY(8px); pointer-events: none;
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.mon-scene.is-active { opacity: 1; transform: none; }

/* SVG text — shared typography language. */
.mon-txt { font-family: var(--bettrai-font-heading); fill: #1D2255; font-weight: 600; font-size: 18px; }
.mon-txt--muted { fill: #9AA0AC; font-weight: 500; }
.mon-txt--sm { font-size: 17px; font-weight: 600; }
.mon-txt--title { font-size: 24px; font-weight: 700; }
.mon-txt--title-sm { font-size: 19px; font-weight: 700; }
.mon-txt--row { font-size: 19px; font-weight: 500; fill: #3A4A5A; }
.mon-txt--muted-sm { fill: #9AA0AC; font-weight: 500; font-size: 16px; }
.mon-txt--muted-xs { fill: #9AA0AC; font-weight: 500; font-size: 15px; }

/* Per-widget reveal, driven by the active scene. */
.mon-scene .mon-w,
.mon-scene .mon-fill,
.mon-scene .mon-ic,
.mon-scene .mon-refresh { transform-box: fill-box; }
.mon-scene .mon-w { opacity: 0; transform: translateY(8px); }
.mon-scene .mon-fill { transform: scaleX(0); transform-origin: left center; }
.mon-scene .mon-line { opacity: 0; }
.mon-scene.is-active .mon-line { animation: bettrai-mon-fade 0.45s ease-out 0.05s both; }
.mon-scene.is-active .mon-w1 { animation: bettrai-mon-appear 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.06s both; }
.mon-scene.is-active .mon-w2 { animation: bettrai-mon-appear 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.19s both; }
.mon-scene.is-active .mon-w3 { animation: bettrai-mon-appear 0.42s cubic-bezier(0.22,0.61,0.36,1) 0.32s both; }
.mon-scene.is-active .mon-fill { animation: bettrai-mon-fill 0.8s cubic-bezier(0.22,0.61,0.36,1) 0.38s both; transform-origin: left center; }
.mon-scene.is-active .mon-ic { animation: bettrai-mon-pulse 0.34s ease-out 0.5s both; transform-origin: center; }
.mon-scene.is-active .mon-refresh { animation: bettrai-mon-rotate 0.6s cubic-bezier(0.65,0,0.35,1) 0.55s both; transform-origin: center; }
@keyframes bettrai-mon-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bettrai-mon-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bettrai-mon-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bettrai-mon-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes bettrai-mon-rotate { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) {
	.bettrai-sophie-continues__panel::after { animation: none; }
	.mon-scene { transition: opacity 0.2s ease; transform: none; }
	.mon-scene .mon-w { opacity: 1; transform: none; }
	.mon-scene .mon-line { opacity: 1; }
	.mon-scene .mon-fill { transform: scaleX(1); }
	.mon-scene.is-active .mon-w,
	.mon-scene.is-active .mon-line,
	.mon-scene.is-active .mon-fill,
	.mon-scene.is-active .mon-ic,
	.mon-scene.is-active .mon-refresh { animation: none; }
}
/* Animated concentric swirl rings radiating from the teal hub icon. */
.bettrai-sophie-monitoring__swirl {
	position: absolute;
	z-index: 0;
	left: 14.3%;
	top: 55.2%;
	width: 0;
	height: 0;
	pointer-events: none;
}
.bettrai-sophie-monitoring__swirl span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: clamp(120px, 20vw, 240px);
	height: clamp(120px, 20vw, 240px);
	margin-left: calc(clamp(120px, 20vw, 240px) / -2);
	margin-top: calc(clamp(120px, 20vw, 240px) / -2);
	border-radius: 50%;
	border: 1px solid rgba(120, 224, 220, 0.5);
	opacity: 0;
	transform: scale(0.3);
	animation: bettrai-swirl 5s ease-out infinite;
}
.bettrai-sophie-monitoring__swirl span:nth-child(2) { animation-delay: 1.6s; }
.bettrai-sophie-monitoring__swirl span:nth-child(3) { animation-delay: 3.2s; }
@keyframes bettrai-swirl {
	0%   { opacity: 0;    transform: scale(0.3); }
	18%  { opacity: 0.55; }
	100% { opacity: 0;    transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-sophie-monitoring__swirl span { animation: none; opacity: 0.28; transform: scale(1); }
	.bettrai-sophie-monitoring__swirl span:nth-child(1) { transform: scale(0.6); }
	.bettrai-sophie-monitoring__swirl span:nth-child(2) { transform: scale(1); }
	.bettrai-sophie-monitoring__swirl span:nth-child(3) { transform: scale(1.4); }
}
.bettrai-sophie-monitoring__node {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.bettrai-sophie-monitoring__figure {
	position: absolute;
	z-index: 3;
	left: 19.4%;
	top: auto;
	bottom: 5.8%;
	width: 16.3%;
	height: auto;
	filter: drop-shadow(0 18px 24px rgba(0,0,0,0.22));
}
/* Soft contact shadow so Sophie reads as grounded on every scene. */
.bettrai-sophie-monitoring__ground {
	position: absolute;
	z-index: 2;
	left: 20%;
	bottom: 6.5%;
	width: 15%;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 24, 24, 0.5), transparent 70%);
	filter: blur(5px);
	pointer-events: none;
}
.bettrai-sophie-chat {
	position: relative;
	z-index: 4;
	margin-left: auto;
	width: min(360px, 72%);
	display: grid;
	gap: 28px;
}
.bettrai-sophie-chat__search {
	display: flex; align-items: center; gap: 8px;
	background: #fff; border-radius: 16px; padding: 18px 20px;
	color: var(--sp-ink); font-size: 0.78rem; font-weight: 700;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}
.bettrai-sophie-chat__search svg {
	width: 36px;
	height: 36px;
	padding: 10px;
	border-radius: 10px;
	color: var(--sp-teal);
	background: #eef9f9;
	flex: none;
}
.bettrai-sophie-chat__signal::after {
	content: "";
	width: 48%;
	height: 10px;
	margin-left: auto;
	border-radius: 999px;
	background: #edf2f2;
}
.bettrai-sophie-chat__signal--short {
	width: 82%;
	margin-left: auto;
}
.bettrai-sophie-chat__bubble {
	border-radius: var(--bettrai-radius-md); padding: 12px 14px; font-size: 0.82rem; line-height: 1.5; max-width: 90%;
}
.bettrai-sophie-chat__bubble--in { background: #fff; color: var(--sp-ink); border-bottom-left-radius: 4px; }
.bettrai-sophie-chat__bubble--out { background: var(--sp-teal); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.bettrai-sophie-chat__reply {
	display: flex; align-items: center; gap: 8px;
	width: 94%;
	margin-left: auto;
	background: #fff;
	border: 0;
	border-radius: 16px;
	padding: 14px 14px 14px 64px;
	color: #9aa0ad;
	font-size: 0.82rem;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.12);
}
.bettrai-sophie-chat__reply button {
	margin-left: auto; width: 42px; height: 42px; border: 0; border-radius: 14px;
	background: #1d2255; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.bettrai-sophie-chat__reply button svg { width: 20px; height: 20px; }

/* ---------------------------- PATIENT JOURNEY ---------------------------- */
.bettrai-sophie-journey { background: var(--sp-navy); padding: var(--bettrai-space-section) 0; color: #fff; }
.bettrai-sophie-journey__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end;
	margin-bottom: 48px;
}
.bettrai-sophie-journey__title { color: #fff; }
.bettrai-sophie-journey__title span { color: var(--sp-teal-soft); }
.bettrai-sophie-journey__intro { color: rgba(255,255,255,0.65); font-size: 0.95rem; line-height: 1.7; text-align: right; }
.bettrai-sophie-journey__intro br { display: block; }
.bettrai-sophie-journey__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.bettrai-sophie-journey__media {
	position: relative;
	border-top-left-radius: var(--bettrai-radius-md);
	border-top-right-radius: var(--bettrai-radius-md);
	border-bottom-left-radius: var(--bettrai-radius-md);
	border-bottom-right-radius: var(--bettrai-radius-md);
	overflow: hidden;
	height: 0;
	padding-bottom: 68.75%;
	margin-bottom: 26px;
}
.bettrai-sophie-journey__media > img:not(.bettrai-sophie-journey__sophie):not(.bettrai-sophie-journey__ui) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.bettrai-sophie-journey__media--green {
	background-color: #1f9d78;
	background-size: cover;
	background-position: center;
}
.bettrai-sophie-journey__media img.bettrai-sophie-journey__sophie {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 50%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	object-position: bottom;
	z-index: 1;
}
.bettrai-sophie-journey__media img.bettrai-sophie-journey__ui {
	position: absolute;
	right: 6%;
	top: 7%;
	width: 58%;
	height: auto;
	object-fit: contain;
	z-index: 2;
}
.bettrai-sophie-journey__note {
	position: absolute;
	left: 24px;
	bottom: 24px;
	right: auto;
	width: min(68%, 520px);
	min-height: 112px;
	display: flex;
	align-items: center;
	gap: 22px;
	background: #fff;
	border-radius: 18px;
	padding: 20px 26px 20px 20px;
	color: var(--sp-ink);
	box-shadow: 0 18px 34px rgba(0,0,0,0.16);
	opacity: 0;
}
.bettrai-sophie-journey__note.is-revealed {
	animation: bettrai-note-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes bettrai-note-up {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-sophie-journey__note { opacity: 1; }
	.bettrai-sophie-journey__note.is-revealed { animation: none; }
}
.bettrai-sophie-journey__note-txt b { line-height: 1.2; margin-bottom: 5px; }
.bettrai-sophie-journey__note-txt i { line-height: 1.4; }
.bettrai-sophie-journey__media img.bettrai-sophie-journey__note-ic {
	width: 65px;
	height: 65px;
	display: block;
	flex: none;
	object-fit: contain;
}
.bettrai-sophie-journey__note-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bettrai-sophie-journey__note-txt b { font-size: 0.98rem; }
.bettrai-sophie-journey__note-txt i { font-style: normal; font-size: 0.735rem; color: var(--sp-body); max-width: 270px; }
.bettrai-sophie-journey__seen {
	align-self: center;
	margin-left: auto;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--sp-green);
	background: #e7f6ef;
	padding: 6px 13px;
	border-radius: 999px;
	white-space: nowrap;
}
/* "Monitor fatigue / Seen" floating note card, mobile only: at the fixed
   68%-of-card width this note becomes too narrow to fit the icon, text, and
   the "Seen" pill on one row, so the pill overlapped the description text.
   Give the card more room and shrink the pill so it fits its own row width
   without colliding. Desktop/tablet untouched. */
@media (max-width: 600px) {
	.bettrai-sophie-journey__note { display: none; }
}

.bettrai-sophie-journey__col h3 { font-family: var(--bettrai-font-heading); font-size: 1.4rem; margin: 0 0 12px; color: #fff; }
.bettrai-sophie-journey__col p { color: rgba(255,255,255,0.65); font-size: 0.95rem; line-height: 1.7; margin: 0; }

/* Priority patients card */
.bettrai-sophie-priority {
	position: absolute; right: 5%; top: 8%; width: 64%;
	background: #fff; border-radius: var(--bettrai-radius-lg); padding: 14px; color: var(--sp-ink);
	box-shadow: 0 20px 40px rgba(0,0,0,0.22);
}
.bettrai-sophie-priority header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.bettrai-sophie-priority__ic { width: 26px; height: 26px; border-radius: var(--bettrai-radius-sm); background: var(--sp-mint); color: var(--sp-green); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; }
.bettrai-sophie-priority header > span:nth-child(2) { display: flex; flex-direction: column; line-height: 1.2; }
.bettrai-sophie-priority header b { font-size: 0.78rem; }
.bettrai-sophie-priority header i { font-style: normal; font-size: 0.62rem; color: var(--sp-body); }
.bettrai-sophie-priority__today { margin-left: auto; font-size: 0.6rem; color: var(--sp-teal); background: #e6f7f7; padding: 4px 9px; border-radius: 999px; }
.bettrai-sophie-priority ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bettrai-sophie-priority li { display: flex; gap: 8px; align-items: flex-start; }
.bettrai-sophie-priority li > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.bettrai-sophie-priority li b { font-size: 0.72rem; }
.bettrai-sophie-priority li i { font-style: normal; font-size: 0.62rem; color: var(--sp-body); }
.bettrai-sophie-priority li em { font-style: normal; font-size: 0.6rem; margin-top: 4px; color: var(--sp-green); background: #e7f6ef; padding: 3px 8px; border-radius: 999px; align-self: flex-start; }
.bettrai-sophie-priority li em.is-dark { color: #fff; background: var(--sp-navy); }
.bettrai-sophie-priority__flag { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.62rem; flex: none; margin-top: 1px; }
.bettrai-sophie-priority__flag--warn { background: #fde9d6; color: #d08a2c; }
.bettrai-sophie-priority__flag--ok { background: #e7f6ef; color: var(--sp-green); }
.bettrai-sophie-priority footer { position: relative; margin-top: 12px; background: #eef8f4; border-radius: var(--bettrai-radius-md); padding: 10px 12px; display: flex; flex-direction: column; line-height: 1.3; }
.bettrai-sophie-priority footer b { font-size: 0.72rem; }
.bettrai-sophie-priority footer i { font-style: normal; font-size: 0.62rem; color: var(--sp-body); }
.bettrai-sophie-priority__hand { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: var(--sp-teal); display: inline-flex; align-items: center; justify-content: center; }
.bettrai-sophie-priority__hand svg { width: 18px; height: 18px; }

/* ------------------------------- ORBIT ------------------------------- */
.bettrai-sophie-orbit { padding: clamp(72px, 7vw, 104px) 0; background: #eef3f3; text-align: center; }
.bettrai-sophie-orbit__head { max-width: 840px; margin: 0 auto 56px; }
.bettrai-sophie-orbit__head h2,
.bettrai-sophie-orbit__head .bettrai-sophie-h2 { color: rgb(72, 72, 104); }
.bettrai-sophie-orbit__head p { color: var(--sp-body); font-size: 0.98rem; line-height: 1.75; margin-top: 18px; }
.bettrai-sophie-orbit__stage {
	position: relative;
	width: min(1394px, 100%);
	margin: 0 auto;
}
.bettrai-sophie-orbit__hub {
	display: block;
	width: 100%;
	height: auto;
}
.bettrai-sophie-orbit__hub svg {
	display: block;
	width: 100%;
	height: auto;
}
.bettrai-sophie-orbit__hub-img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}
/* Flowing signal along each connector line (spokes stroked with a gradient). */
.bettrai-sophie-orbit__hub svg path[stroke^="url("] {
	stroke-dasharray: 16 7;
	animation: bettrai-line-flow 1.6s linear infinite;
}
@keyframes bettrai-line-flow {
	to { stroke-dashoffset: -23; }
}
/* Gentle pulse on the connector dots (solid teal centres + soft halos). */
.bettrai-sophie-orbit__hub svg path[fill="#008a8f"] {
	animation: bettrai-dot-pulse 2.4s ease-in-out infinite;
}
.bettrai-sophie-orbit__hub svg path[opacity="0.16"] {
	animation: bettrai-halo-pulse 2.4s ease-in-out infinite;
}
@keyframes bettrai-dot-pulse {
	0%, 100% { opacity: 0.55; }
	50%      { opacity: 1; }
}
@keyframes bettrai-halo-pulse {
	0%, 100% { opacity: 0.10; }
	50%      { opacity: 0.30; }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-sophie-orbit__hub svg path[stroke^="url("],
	.bettrai-sophie-orbit__hub svg path[fill="#008a8f"],
	.bettrai-sophie-orbit__hub svg path[opacity="0.16"] {
		animation: none;
	}
}
/* --------------------------- CARE SETTINGS --------------------------- */
.bettrai-sophie-settings { padding: clamp(84px, 9vw, 124px) 0; }
.bettrai-sophie-settings__head { max-width: 760px; margin-bottom: 42px; }
.bettrai-sophie-settings__head p { color: var(--sp-body); font-size: 0.98rem; line-height: 1.7; margin-top: 16px; }
.bettrai-sophie-settings__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: clamp(305px, 24vw, 350px);
	gap: 18px;
}
.bettrai-sophie-scard {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: none;
	background: #d3eff8;
	--sophie-card-content-pad: clamp(24px, 2vw, 32px);
	--sophie-card-band: #d3eff8;
	--sophie-card-band-text: var(--sp-navy);
	--sophie-card-fill: #d3eff8;
	--sophie-card-fill-accent: rgba(41,188,188,0.18);
	isolation: isolate;
	transform: translateY(0);
	transition: transform 0.28s ease, box-shadow 0.28s ease, filter 0.28s ease;
}
.bettrai-sophie-scard::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(circle at 88% 72%, var(--sophie-card-fill-accent) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
		radial-gradient(circle at 84% 56%, transparent 0 112px, var(--sophie-card-fill-accent) 113px, transparent 114px),
		linear-gradient(180deg, var(--sophie-card-fill) 0%, var(--sophie-card-band) 100%);
	opacity: 0;
	transform: translateY(100%);
	transition: opacity 0.28s ease, transform 0.34s ease;
	pointer-events: none;
}
.bettrai-sophie-scard:hover,
.bettrai-sophie-scard:focus-within {
	transform: translateY(-8px);
	box-shadow: 0 22px 44px rgba(11, 21, 51, 0.14);
}
.bettrai-sophie-scard:hover::before,
.bettrai-sophie-scard:focus-within::before {
	opacity: 1;
	transform: translateY(0);
}
.bettrai-sophie-scard__media {
	position: absolute;
	/* Cover the full card, not just "above the label band" (inset ... 52px):
	   the label <h3> below already paints its own opaque background and
	   sits on top via z-index, so it fully hides the image behind it. Only
	   reserving the top portion for the image left a gap whenever the
	   card's actual rendered height (grid-stretched per breakpoint) didn't
	   land exactly 52px above the label, showing the card's own background
	   through as a stray strip between photo and label. */
	inset: 0;
	overflow: hidden;
	z-index: 0;
	transition: opacity 0.26s ease;
}
.bettrai-sophie-scard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform 0.45s ease, filter 0.45s ease;
}
.bettrai-sophie-scard:hover .bettrai-sophie-scard__media img,
.bettrai-sophie-scard:focus-within .bettrai-sophie-scard__media img {
	transform: scale(1.045);
	filter: saturate(1.05) contrast(1.02);
}
.bettrai-sophie-scard:hover .bettrai-sophie-scard__media,
.bettrai-sophie-scard:focus-within .bettrai-sophie-scard__media {
	opacity: 0;
}
.bettrai-sophie-scard > h3 {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	min-height: 52px;
	display: flex;
	align-items: center;
	padding: 0 var(--sophie-card-content-pad);
	color: var(--sophie-card-band-text);
	font-family: var(--bettrai-font-heading);
	font-size: 1rem;
	line-height: 1.2;
	margin: 0;
	text-shadow: none;
	background: var(--sophie-card-band);
	/* Defensive overlap: extends this label's own solid color a few px
	   upward past its own box, in the same color, so any hairline/rounding
	   gap between the absolutely-positioned image above and this label
	   (seen intermittently depending on the card's resolved height) is
	   always painted over rather than showing the card's own background. */
	box-shadow: 0 -2px 0 0 var(--sophie-card-band);
	transition: background-color 0.28s ease, color 0.28s ease, bottom 0.3s ease, transform 0.3s ease;
}
.bettrai-sophie-scard:nth-child(2) > h3,
.bettrai-sophie-scard:nth-child(5) > h3 {
	background: var(--sophie-card-band);
}
.bettrai-sophie-scard:nth-child(3) > h3,
.bettrai-sophie-scard:nth-child(5) > h3 {
	color: var(--sophie-card-band-text);
	background: var(--sophie-card-band);
}
.bettrai-sophie-scard:nth-child(6) > h3 {
	background: var(--sophie-card-band);
}
.bettrai-sophie-scard:hover > h3,
.bettrai-sophie-scard:focus-within > h3 {
	bottom: auto;
	top: clamp(28px, 3vw, 42px);
	background: transparent;
	color: var(--sophie-card-band-text);
}
.bettrai-sophie-scard__details {
	position: absolute;
	left: var(--sophie-card-content-pad);
	right: var(--sophie-card-content-pad);
	top: calc(clamp(28px, 3vw, 42px) + 58px);
	z-index: 3;
	color: var(--sophie-card-band-text);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.24s ease 0.08s, transform 0.28s ease 0.08s;
	pointer-events: none;
}
.bettrai-sophie-scard:hover .bettrai-sophie-scard__details,
.bettrai-sophie-scard:focus-within .bettrai-sophie-scard__details {
	opacity: 1;
	transform: translateY(0);
}
.bettrai-sophie-scard__details p {
	max-width: 340px;
	margin: 0 0 28px;
	color: currentColor;
	font-size: 0.9rem;
	line-height: 1.65;
}
.bettrai-sophie-scard__details ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.bettrai-sophie-scard__details li {
	position: relative;
	padding-left: 22px;
	font-size: 0.82rem;
	color: currentColor;
}
.bettrai-sophie-scard__details li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: currentColor;
	font-weight: 700;
}
.bettrai-sophie-scard:nth-child(2) {
	--sophie-card-band: #d9f4ed;
	--sophie-card-fill: #d9f4ed;
	--sophie-card-fill-accent: rgba(41,188,188,0.16);
}
.bettrai-sophie-scard:nth-child(3),
.bettrai-sophie-scard:nth-child(5) {
	--sophie-card-band: #058f92;
	--sophie-card-band-text: #fff;
	--sophie-card-fill: #058f92;
	--sophie-card-fill-accent: rgba(255,255,255,0.12);
}
.bettrai-sophie-scard:nth-child(6) {
	--sophie-card-band: #c4def8;
	--sophie-card-fill: #c4def8;
	--sophie-card-fill-accent: rgba(41,188,188,0.14);
}
.bettrai-sophie-scard--wide { grid-column: span 1; }
.bettrai-sophie-scard--green {
	background: #f6fafa;
	--sophie-card-band: #0d9b75;
	--sophie-card-band-text: #fff;
	--sophie-card-fill: #0d9b75;
	--sophie-card-fill-accent: rgba(255,255,255,0.12);
	color: #fff;
}

/* --------------------------- CONNECTED CARE HERO --------------------------- */
.bettrai-sophie-connected {
	position: relative;
	min-height: clamp(520px, 48vw, 680px);
	background-size: cover;
	background-position: 58% 34%;
	padding: clamp(120px, 14vw, 190px) 0;
	display: flex;
	align-items: center;
}
.bettrai-sophie-connected__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(8,16,40,0.34) 0%, rgba(8,16,40,0.1) 55%, rgba(8,16,40,0) 100%);
}
.bettrai-sophie-connected__inner { position: relative; color: #fff; }
.bettrai-sophie-connected__inner > * { max-width: 640px; }
.bettrai-sophie-connected__title {
	font-family: var(--bettrai-font-heading);
	font-weight: 650;
	font-size: clamp(3rem, 4.6vw, 68px);
	line-height: 1.08;
	max-width: 820px;
	margin: 0 0 32px;
}
.bettrai-sophie-connected__sub { font-family: var(--bettrai-font); color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.6; margin: 0 0 40px; max-width: 600px; }
/* Match the home/header "Get Started" button: rounded-rect (radius 10), 52px tall. */
.bettrai-sophie-connected .bettrai-btn--primary {
	min-height: 52px;
	padding: 0 30px;
	font-size: 0.95rem;
	border-radius: 10px;
}
.bettrai-sophie-connected__actions { display: flex; align-items: center; gap: 14px; }

/* ------------------------------- TRUST ------------------------------- */
.bettrai-sophie-trust { padding: var(--bettrai-space-section) 0; background: #f6fafa; }
.bettrai-sophie-trust__head { max-width: 980px; margin-bottom: 44px; }
.bettrai-sophie-trust__head .bettrai-sophie-h2 {
	font-size: clamp(1.8rem, 2.35vw, 2.5rem);
	line-height: 1.16;
	white-space: nowrap;
}
.bettrai-sophie-trust__head p { color: var(--sp-body); font-size: 0.98rem; line-height: 1.75; margin-top: 18px; }
.bettrai-sophie-trust__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-bottom: 40px; }
.bettrai-sophie-tcard { background: #fff; border-radius: var(--bettrai-radius-lg); padding: 26px 20px; text-align: center; box-shadow: var(--bettrai-shadow-soft); }
.bettrai-sophie-tcard__ic { display: inline-flex; width: 64px; height: 64px; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid var(--sp-teal); background: #fff; color: var(--sp-teal); margin-bottom: 16px; opacity: 0; transform: translateY(14px) scale(0.6); }
.bettrai-sophie-tcard.is-revealed .bettrai-sophie-tcard__ic { animation: bettrai-badges-in 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--bettrai-reveal-delay, 0s) both; }
@media (prefers-reduced-motion: reduce) {
	.bettrai-sophie-tcard__ic { opacity: 1; transform: none; }
	.bettrai-sophie-tcard.is-revealed .bettrai-sophie-tcard__ic { animation: none; }
}
.bettrai-sophie-tcard__ic svg { width: 26px; height: 26px; }
.bettrai-sophie-tcard__ic img { width: 32px; height: 32px; object-fit: contain; }
.bettrai-sophie-tcard b { display: block; color: var(--sp-ink); font-size: 0.98rem; margin-bottom: 8px; }
.bettrai-sophie-tcard p { margin: 0; color: var(--sp-body); font-size: 0.78rem; line-height: 1.55; }

.bettrai-sophie-testimonial {
	position: relative;
	background: #0f4733 url('../images/sophie/testimonial-bg.png') center/cover no-repeat;
	border-radius: var(--bettrai-radius-lg); padding: clamp(64px, 8vw, 110px) clamp(36px, 6vw, 96px); margin: 0;
	color: #fff; text-align: center; overflow: hidden;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 420px;
}
.bettrai-sophie-testimonial__quote { position: relative; display: block; margin: 0 0 18px; }
.bettrai-sophie-testimonial__quote svg { width: 24px; height: auto; }
.bettrai-sophie-testimonial__quote-img { width: 24px; height: auto; object-fit: contain; }
.bettrai-sophie-testimonial blockquote { position: relative; font-size: clamp(1.05rem, 1.7vw, 1.4rem); line-height: 1.7; font-weight: 500; max-width: 900px; margin: 0 auto 24px; }
.bettrai-sophie-testimonial figcaption { position: relative; font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.6; }
.bettrai-sophie-testimonial figcaption b { color: #fff; }
.bettrai-sophie-testimonial figcaption span { color: #a8e6cf; }

/* ------------------------------ RESOURCES ------------------------------ */
.bettrai-sophie-resources { padding: clamp(90px, 9vw, 126px) 0; background: var(--sp-navy); }
.bettrai-sophie-resources__mobile-break { display: none; }
.bettrai-sophie-resources__title {
	color: #fff;
	text-align: center;
	margin: 0 auto 54px;
	font-size: clamp(2rem, 3vw, 48px);
	line-height: 1.15;
	max-width: 540px;
}
.bettrai-sophie-resources__title span { color: var(--sp-teal-soft); }
.bettrai-sophie-resources__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: none;
	margin: 0 auto;
}
.bettrai-sophie-rcard {
	position: relative !important;
	border-radius: 4px;
	overflow: hidden;
	background: #102247;
	aspect-ratio: 4 / 5.5 !important;
	box-shadow: none;
	display: block !important;
	height: auto !important;
}
.bettrai-sophie-rcard__media {
	position: absolute !important;
	inset: 0 !important;
	overflow: hidden;
	width: 100% !important;
	height: 100% !important;
}
.bettrai-sophie-rcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(4, 8, 22, 0.2);
	pointer-events: none;
}
.bettrai-sophie-rcard__media img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center;
	display: block;
	transform: scale(1);
	transition: transform 0.42s ease, filter 0.42s ease;
}
.bettrai-sophie-rcard--dark .bettrai-sophie-rcard__media img {
	object-fit: cover;
	object-position: center;
	background: #102247;
}
.bettrai-sophie-rcard:hover .bettrai-sophie-rcard__media img {
	transform: scale(1.045);
	filter: saturate(1.08) contrast(1.03) brightness(1.12);
}
.bettrai-sophie-rcard h3 {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 0 18px;
	border-radius: 4px;
	color: #fff;
	background: rgba(7, 56, 45, 0.9);
	font-family: var(--bettrai-font-heading);
	font-size: 0.98rem;
	line-height: 1.2;
	margin: 0;
}
.bettrai-sophie-rcard--teal h3 { background: #058f92; }
.bettrai-sophie-rcard--blue h3 {
	color: var(--sp-navy);
	background: #c4def8;
}

/* -------------------------------- FAQ -------------------------------- */
.bettrai-sophie-faq { padding: var(--bettrai-space-section) 0; }
.bettrai-sophie-faq__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.bettrai-sophie-faq__head p { color: var(--sp-body); font-size: 1rem; line-height: 1.7; margin: 16px auto 0; max-width: 560px; }
.bettrai-sophie-faq__list { max-width: none; margin: 0; }

/* ------------------------------- CTA -------------------------------- */
.bettrai-sophie-cta {
	padding-block: clamp(42px, 5vw, 68px);
	background:
		radial-gradient(circle at 92% 52%, rgba(255,255,255,0.34) 0 1px, transparent 1.5px) 0 0 / 22px 22px,
		radial-gradient(circle at 88% 50%, transparent 0 220px, rgba(255,255,255,0.18) 221px, transparent 222px),
		linear-gradient(90deg, #eefafa 0%, #d3f4ee 100%);
}
.bettrai-sophie-cta .bettrai-cta {
	max-width: none;
	margin-inline: 0;
	gap: clamp(16px, 1.6vw, 24px);
}
.bettrai-sophie-cta .bettrai-cta__card { flex: 1.75 1 0; }
.bettrai-sophie-cta .bettrai-cta__media { flex: 1 1 320px; }
.bettrai-sophie-cta .bettrai-cta__media img {
	border-radius: var(--bettrai-radius-md);
	object-position: center;
}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 1024px) {
	.bettrai-sophie-hero__inner { grid-template-columns: 1fr; }
	.bettrai-sophie-hero__media { justify-self: center; max-width: 420px; }
	.bettrai-sophie-support__inner,
	.bettrai-sophie-continues__inner,
		.bettrai-sophie-journey__head,
		.bettrai-sophie-journey__grid { grid-template-columns: minmax(0, 1fr); }
		.bettrai-sophie-cta .bettrai-cta { flex-direction: column; }
		/* Grid items default to min-width:auto, so even after collapsing to a
		   single column above, this head/lead block (spanning both tracks)
		   still sized to its unconstrained content width and bled past the
		   viewport edge on phones instead of wrapping. */
		.bettrai-sophie-continues__head,
		.bettrai-sophie-continues__lead { min-width: 0; max-width: 100%; }
		.bettrai-sophie-continues__copy { height: auto; min-height: 0; }
		.bettrai-sophie-continues__panel { height: auto; min-height: 430px; }
		.bettrai-sophie-continues__list { height: auto; }
		.bettrai-sophie-journey__head { margin-bottom: 28px; }
		.bettrai-sophie-journey__intro { text-align: left; }
		.bettrai-sophie-journey__intro br { display: none; }
		.bettrai-sophie-settings__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(300px, auto); }
		/* 5 cards in 3 columns leaves the last row's 2 cards short of the
		   3rd column, with a dead gap where the missing 5th card would be.
		   Use a 6-col track instead: first 3 cards span 2 cols each (3 equal
		   cards, row 1), last 2 cards span 3 cols each (2 equal cards
		   stretched full width, row 2). */
		.bettrai-sophie-trust__grid { grid-template-columns: repeat(6, 1fr); }
		.bettrai-sophie-trust__grid .bettrai-sophie-tcard:nth-child(1),
		.bettrai-sophie-trust__grid .bettrai-sophie-tcard:nth-child(2),
		.bettrai-sophie-trust__grid .bettrai-sophie-tcard:nth-child(3) {
			grid-column: span 2;
		}
		.bettrai-sophie-trust__grid .bettrai-sophie-tcard:nth-child(4),
		.bettrai-sophie-trust__grid .bettrai-sophie-tcard:nth-child(5) {
			grid-column: span 3;
		}
		.bettrai-sophie-resources__grid { grid-template-columns: 1fr; max-width: none; margin: 0; }
}

	@media (max-width: 680px) {
		.bettrai-sophie-support__pillars { grid-template-columns: 1fr !important; }
		.bettrai-sophie-continues { padding: 48px 0 32px; }
		.bettrai-sophie-continues__head {
			margin-bottom: 36px;
			text-align: left;
			margin-inline: 0;
		}
		.bettrai-sophie-continues__title { text-align: left; }
		.bettrai-sophie-continues__trigger { padding-inline: 24px; font-size: 15px; }
		.bettrai-sophie-continues__item.is-active .bettrai-sophie-continues__trigger { padding-inline: 26px; }
		.bettrai-sophie-continues__panel-copy { padding-inline: 26px; }
		/* This card's height was set for the two-column desktop layout, far
		   taller than the monitoring mockup actually needs at mobile widths
		   (mockup is width-constrained via aspect-ratio: 700/480), leaving
		   large empty bands above/below it. Shrink to fit. */
		.bettrai-sophie-continues__panel { height: auto; min-height: 260px; }
		/* These cards are built for a desktop hover effect: image and label
		   are both position:absolute, stacked via inset/bottom math against
		   a fixed-height card, with the details panel only revealing on
		   :hover. On mobile there's no hover at all, so that entire
		   mechanism is dead weight - and it's exactly why the image/label
		   boundary kept showing a seam on some cards but not others (tiny
		   differences in how each card's height resolved). Drop the
		   absolute-position overlay approach entirely here: image and label
		   just stack in normal flow, image sized by aspect-ratio. This
		   can't produce a gap - there's no height math to get wrong. */
		.bettrai-sophie-settings__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
		.bettrai-sophie-scard {
			height: auto;
			min-height: 0;
			display: block;
			/* The details text color (--sophie-card-band-text, e.g. white for
			   the green/colored variants) was only ever meant to be read
			   against the hover-triggered ::before fill gradient, not this
			   card's resting background. Now that details show permanently
			   in flow below the image, give the card that same fill color
			   as its actual background so the text (any variant) stays
			   readable without needing hover. */
			background: var(--sophie-card-fill) !important;
		}
		.bettrai-sophie-scard__media {
			position: relative;
			inset: auto;
			aspect-ratio: 16 / 10;
		}
		.bettrai-sophie-scard > h3 {
			position: relative;
			inset: auto;
			bottom: auto;
		}
		/* Touch has no real :hover - mobile browsers fake a "sticky hover"
		   after a tap, so this reveal-on-hover content can end up shown but
		   was still absolutely positioned/opacity-driven with no room made
		   for it, overflowing past the card. Show it in normal flow instead
		   so the card (now height:auto above) just grows to fit it. */
		.bettrai-sophie-scard__details {
			position: relative;
			inset: auto;
			top: auto;
			left: auto;
			right: auto;
			opacity: 1;
			transform: none;
			pointer-events: auto;
			padding: 4px var(--sophie-card-content-pad) 24px;
		}
		.bettrai-sophie-scard > h3 {
			font-weight: 700;
			min-height: 0;
			align-items: flex-end;
			padding-top: 20px;
			padding-bottom: 0;
		}
		.bettrai-sophie-scard__details { padding-top: 11px; }
		.bettrai-sophie-scard__details p { margin-bottom: 14px; }
		.bettrai-sophie-trust__head .bettrai-sophie-h2 { white-space: normal; }
		.bettrai-sophie-trust__grid { grid-template-columns: repeat(2, 1fr); margin-bottom: 18px; }
		/* At any gap distance, two rounded-corner cards stacked closely
		   create a faint curved sliver of the page's light background
		   peeking through where the corners recede from each other at
		   center - reads as a stray "shadow" on the dark card below. Drop
		   the light card's own box-shadow on mobile so there's nothing to
		   blend into that sliver. */
		.bettrai-sophie-tcard { box-shadow: none; }
		/* testimonial-bg.png has faint decorative corner arcs, subtle at
		   full width. On a narrow phone card, background-size:cover scales
		   the image up drastically to fill the tall/narrow box, magnifying
		   those arcs into a stray line cutting across the card. Drop the
		   image on mobile and keep just the solid base color. */
		.bettrai-sophie-testimonial { background-image: none; background-color: #007F5F; }
		/* 5 badges in a 2-column grid leaves the 5th (FDA Approved) as a lone
		   orphan spanning only half the row, with dead space beside it.
		   Stretch it to the full row width when it ends up alone. */
		.bettrai-sophie-trust__grid > *:last-child:nth-child(odd) { grid-column: 1 / -1; }
	/* NOTE: .bettrai-sophie-orbit__ring/__center/__node and the old
	   grid-template-columns/display:grid treatment here targeted a previous
	   version of this widget (separate ring/node elements). The current
	   markup is a single baked <svg> (.bettrai-sophie-orbit__hub) - that old
	   display:grid was still applying to __stage, though, confining the hub
	   to one of two equal grid columns (i.e. half width) instead of letting
	   it use the stage's full (now edge-to-edge, see below) width. Only
	   .bettrai-sophie-orbit__head br is still relevant and kept. */
	.bettrai-sophie-orbit__head br { display: none; }
	.bettrai-sophie-priority { position: static; width: 100%; margin-top: -40px; }
	/* Orbit -> Settings transition (NOT .bettrai-sophie-trust - that class
	   is a different, later section, "Built for Healthcare. Designed for
	   Trust.", between Connected and Resources; a previous edit here
	   mistakenly zeroed ITS top padding thinking it was this transition,
	   leaving that section's heading flush against the image above it).
	   Orbit's ~72-104px bottom padding stacked with Settings' own top
	   padding read as an oversized gap - trim only Orbit's bottom edge. */
	.bettrai-sophie-orbit { padding-top: 44px; padding-bottom: 56px; }
	.bettrai-sophie-settings { padding-top: 48px; padding-bottom: 40px; }
	.bettrai-sophie-trust { padding-top: 40px; padding-bottom: 32px; }
	/* The overlay is a left-to-right gradient tuned for desktop, where the
	   text column sits over the dark left side and the photo's brighter
	   right side is well clear of it. On phones the text spans nearly the
	   full card width, over the brightest part of the photo (white shirt),
	   with barely any darkening there - hard to read. Add a fuller, more
	   uniform dark wash for mobile only. */
	.bettrai-sophie-connected__overlay {
		background:
			linear-gradient(180deg, rgba(8,16,40,0.32) 0%, rgba(8,16,40,0.22) 45%, rgba(8,16,40,0.4) 100%);
	}
	/* Same "not uniform with the home page H1" issue as the Sophie hero
	   title earlier - this heading had no mobile clamp of its own. Match
	   the home hero's mobile H1 size (.bettrai-hero__heading at <=767px). */
	.bettrai-sophie-connected__title {
		font-size: clamp(1.9rem, 8vw, 2.3rem);
		max-width: 260px;
		margin-bottom: 16px;
		line-height: 1.25;
	}
	.bettrai-sophie-connected__sub { max-width: 330px; margin-bottom: 20px; }
	/* The desktop photo is set via inline style="background-image:...", so
	   it needs !important here to win. Swap to a dedicated portrait crop
	   (already framed so the subject isn't cut off) for mobile instead of
	   fighting the desktop crop's position. This widget (bettrai_sophie_connected)
	   is reused on multiple pages with a different photo per instance via
	   that inline style, so the mobile swap must be scoped per-page too -
	   an earlier unscoped rule here was showing the Sophie page's mobile
	   photo on the Providers page as well. */
	.bettrai-sophie-page .bettrai-sophie-connected {
		background-image: url("../images/sophie/connected-hero-mobile.jpg") !important;
		background-position: center 15%;
	}
	.bettrai-providers-page .bettrai-sophie-connected {
		background-image: url("../images/providers/connected-cta-mobile.jpg") !important;
		background-position: center 15%;
	}
	/* Providers page override text "Care Doesn't Stop When the Visit Ends."
	   is longer than this widget's other page's title and wraps to 3 lines
	   at the shared 260px max-width/2.3rem cap above. Widen and shrink
	   slightly, scoped to this page only, so it fits on 2 lines. */
	.bettrai-providers-page .bettrai-sophie-connected__title {
		max-width: 300px;
		font-size: clamp(1.7rem, 7vw, 2.1rem);
	}
	.bettrai-sophie-settings__head p { max-width: 34ch; }
	.bettrai-sophie-journey__media { aspect-ratio: auto; padding-top: 200px; }
	.bettrai-sophie-journey__sophie { width: 150px; }
}

/* ==========================================================================
   PAYERS LANDING PAGE  (.bettrai-payers-page)
   Scoped page built from assets/figma-payers reference (Logos/Payers.png).
   Reuses shared header/footer, buttons, FAQ, and card radius/token system.
   Teal accent = #29BCBC, navy ink = #24244d. Never affects other pages.
   ========================================================================== */

/* Tokens are also exposed at :root so payers section widgets rendered by
   Elementor (which have no .bettrai-payers-page ancestor) still get the palette. */
:root,
.bettrai-payers-page {
	--pp-teal: #29BCBC;
	--pp-teal-soft: #5cc9c9;
	--pp-ink: #07124a;
	--pp-heading: #484868;
	--pp-navy: #0b1533;
	--pp-navy-2: #0e1a3d;
	--pp-body: #8D8D9A;
	--pp-mint: #e8f6f1;
	--pp-sky: #eaf1fb;
	--pp-pale: #e9f4f8;
	--pp-green: #1f7a5e;
	--pp-green-2: #16845f;
	font-family: var(--bettrai-font);
	color: var(--pp-ink);
	background: #fff;
	overflow-x: hidden;
}

.bettrai-payers-page img { max-width: 100%; display: block; }

.bettrai-payers-page,
.bettrai-payers-page button,
.bettrai-payers-page input,
.bettrai-payers-page textarea,
.bettrai-payers-page select,
[class^="bettrai-payers-"] button,
[class*=" bettrai-payers-"] button,
[class^="bettrai-payers-"] input,
[class*=" bettrai-payers-"] input {
	font-family: var(--bettrai-font) !important;
}

.bettrai-payers-page :where(button:not(.bettrai-btn), input, textarea, select),
[class^="bettrai-payers-"] :where(button:not(.bettrai-btn), input, textarea, select),
[class*=" bettrai-payers-"] :where(button:not(.bettrai-btn), input, textarea, select) {
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}

.bettrai-payers-page h1,
.bettrai-payers-page h2,
.bettrai-payers-page h3,
.bettrai-payers-page h4,
.bettrai-payers-page h5,
.bettrai-payers-page h6,
[class^="bettrai-payers-"] h1,
[class^="bettrai-payers-"] h2,
[class^="bettrai-payers-"] h3,
[class^="bettrai-payers-"] h4,
[class^="bettrai-payers-"] h5,
[class^="bettrai-payers-"] h6,
[class*=" bettrai-payers-"] h1,
[class*=" bettrai-payers-"] h2,
[class*=" bettrai-payers-"] h3,
[class*=" bettrai-payers-"] h4,
[class*=" bettrai-payers-"] h5,
[class*=" bettrai-payers-"] h6 {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.bettrai-payers-hero__title,
.bettrai-payers-h2,
.bettrai-payers-pop__list h3,
.bettrai-payers-pop__item h4,
.bettrai-payers-vcard h3,
.bettrai-payers-panel__copy h3,
.bettrai-payers-ncard h3,
.bettrai-payers-compare__panel h3 {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Prevent grid/flex children with images from blowing out their track
   (min-width:auto defaults to min-content = the image's intrinsic width). */
.bettrai-payers-interaction__media,
.bettrai-payers-risk__media,
.bettrai-payers-sophie__media,
.bettrai-payers-pop__list,
.bettrai-payers-panel__flow,
.bettrai-payers-compare__panel { min-width: 0; }

/* Shared heading */
.bettrai-payers-h2 {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 650;
	color: var(--pp-heading);
	/* Uniform with the Providers page section headings (.bettrai-providers-h2):
	   same clamp range and line-height ratio, so heading size reads
	   consistent across both pages at every viewport width. */
	line-height: 1.12;
	letter-spacing: 0;
	margin: 0;
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.bettrai-payers-h2 span { color: var(--pp-teal); }
.bettrai-payers-h2--center { text-align: center; }
.bettrai-payers-vbc__head .bettrai-payers-h2 { white-space: nowrap; }
@media (max-width: 767px) {
	/* Fixed 48px with no responsive clamp, plus forced single-line -
	   massively oversized and overflowing off the right edge on phones. */
	.bettrai-payers-vbc__head .bettrai-payers-h2 {
		white-space: normal;
		font-size: clamp(1.9rem, 8vw, 2.3rem);
	}
}
.bettrai-payers-h2--light { color: #fff; }
.bettrai-payers-h2--light span { color: var(--pp-teal-soft); }

.bettrai-payers-eyebrow {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid rgba(97, 239, 239, 0.7);
	border-radius: 999px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Square outline arrow button (matches Sophie square) */
.bettrai-payers-square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--bettrai-radius-md);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease;
	flex: none;
}
.bettrai-payers-square svg { width: 20px; height: 20px; }
.bettrai-payers-square:hover { background: #fff; color: var(--pp-navy); }
.bettrai-payers-square--light { border: 0; color: var(--pp-teal); background: #fff; }
.bettrai-payers-square--light:hover { background: var(--pp-teal); color: #fff; }

/* Outline button variant reused on this page. Unscoped (not gated behind the
   .bettrai-payers-page preview-harness wrapper) so it also applies on the
   live Elementor-built page, which never has that wrapper. */
.bettrai-btn--outline {
	background: transparent;
	color: var(--pp-teal);
	border: 1.5px solid var(--pp-teal);
	border-radius: 10px;
	min-height: 52px;
	padding: 0 34px;
}
.bettrai-btn--outline:hover {
	background: transparent;
	color: var(--pp-teal);
	border-color: var(--pp-teal);
}

.bettrai-payers-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--pp-teal); display: inline-block; flex: none;
}

/* ------------------------------- HEADER --------------------------------
   Hero is dark, so the glass header keeps its light (white-text) look at
   the top; the shared scroll-docking JS still swaps it to white. */
.bettrai-payers-page .bettrai-hero__header { background: rgba(255,255,255,0.10); }

/* ------------------------------- HERO ---------------------------------- */
.bettrai-payers-hero {
	position: relative;
	background-size: cover;
	background-position: center 22%;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	/* Clear the fixed shared header (matches Sophie hero). */
	padding-top: clamp(96px, 10vw, 132px);
}
.bettrai-payers-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(15, 32, 40, 0.62) 0%, rgba(17, 34, 42, 0.38) 34%, rgba(20, 38, 46, 0.12) 58%, rgba(0, 0, 0, 0) 78%);
}
@media (max-width: 767px) {
	/* The desktop overlay is a diagonal gradient that's dark on the left
	   (where the copy sits) and fades to transparent by 78% width (where the
	   photo shows through, no text there on desktop). On mobile the copy
	   stacks full-width over the whole photo, so that same fade-out left
	   white text unreadable over the brighter/busier right side of the image.
	   Swap to a uniform, stronger dark scrim across the whole hero instead. */
	.bettrai-payers-hero__overlay {
		background: linear-gradient(180deg, rgba(10, 22, 28, 0.82) 0%, rgba(12, 26, 33, 0.74) 55%, rgba(12, 26, 33, 0.84) 100%);
	}
}
.bettrai-payers-hero__inner {
	min-height: 760px;
	display: flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}
.bettrai-payers-hero__copy { max-width: 760px; }
/* Programs hero reuses the shared payers-hero markup/classes, but should
   match the Providers page hero's height exactly (both are "inner page"
   heroes, unlike the taller Payers homepage-style hero). Desktop only -
   tablet already gets its own min-height: 560px override below, which
   matches the Providers tablet value. */
.bettrai-payers-hero--programs .bettrai-payers-hero__inner { min-height: 660px; }
.bettrai-payers-hero__title {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 700;
	/* Uniform with the Providers page hero (.bettrai-providers-hero__title):
	   same clamp range and line-height ratio, so h1 size reads consistent
	   across both pages at every viewport width. */
	font-size: clamp(2.3rem, 4.6vw, 3.8rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	margin: 22px 0 22px;
}

/* Page Hero: dedicated mobile copy fields (eyebrow/title/lead) swap in at the
   mobile breakpoint so mobile can run shorter copy than desktop/tablet
   without duplicating the hero DOM structure. */
.bettrai-payers-hero__mobile-only { display: none; }
@media (max-width: 767px) {
	.bettrai-payers-hero__desktop-only { display: none; }
	.bettrai-payers-hero__mobile-only { display: block; }
	span.bettrai-payers-hero__mobile-only { display: inline-block; }
}

/* Providers hero, mobile only: swap to a dedicated portrait crop instead of
   stretching the wide desktop photo (same technique used for the Sophie
   hero background). Scoped to .bettrai-providers-page only - .bettrai-payers-hero
   is a shared component also used on the Payers page, which keeps its own
   photo. The desktop photo is set via inline style="background-image:...",
   so this needs !important to win. */
@media (max-width: 767px) {
	.bettrai-providers-page .bettrai-payers-hero {
		background-image: url("../images/providers/hero-mobile.jpg") !important;
		background-position: center top;
	}
}

.bettrai-payers-hero__lead {
	font-family: var(--bettrai-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 34px;
	color: rgb(255, 255, 255);
	max-width: 640px;
	margin: 0 0 40px;
}
@media (max-width: 767px) {
	/* This override was previously positioned BEFORE the base rule above,
	   so plain cascade source-order let the base rule win regardless of
	   the media query - confirmed via devtools computed styles showing
	   34px line-height on mobile despite this rule "matching". Fixed by
	   placing it after the base rule, like every other mobile override in
	   this file. */
	.bettrai-payers-hero__lead {
		font-size: 16px;
		line-height: 27px;
		margin-bottom: 24px;
	}
}
.bettrai-payers-hero__actions { display: flex; align-items: center; gap: 14px; }
/* Hero arrow square: solid white box with a green arrow (matches other sections). */
.bettrai-payers-hero__actions .bettrai-payers-square { background: #fff; border: 0; color: var(--bettrai-btn-green); }
.bettrai-payers-hero__actions .bettrai-payers-square:hover { background: var(--bettrai-teal-hover); color: #fff; }
.bettrai-payers-hero__actions .bettrai-btn--primary {
	border-radius: var(--bettrai-radius-md);
	min-height: 52px;
	padding: 0 30px;
}

/* ------------------------- POPULATION DATA ----------------------------- */
.bettrai-payers-pop { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 70px); }
.bettrai-payers-pop .bettrai-payers-h2 {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	font-weight: 700;
	font-size: 48px;
	line-height: 59px;
}
.bettrai-payers-pop__head {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 44px;
}
.bettrai-payers-pop__intro {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	font-size: 17px;
	line-height: 30px;
	margin: 0;
}

.bettrai-payers-pop__card {
	position: relative;
	display: grid;
	grid-template-columns: minmax(470px, 0.96fr) minmax(430px, 0.82fr);
	gap: clamp(36px, 4.4vw, 70px);
	align-items: stretch;
	background: linear-gradient(120deg, #078b8d 0%, #087b7d 38%, #07505a 100%);
	border-radius: 10px;
	min-height: clamp(430px, 34vw, 510px);
	padding: 0 clamp(48px, 5.5vw, 76px) 0 clamp(58px, 6vw, 88px);
	overflow: hidden;
}
.bettrai-payers-pop__portrait {
	position: relative;
	align-self: stretch;
	min-height: clamp(480px, 38vw, 560px);
}
.bettrai-payers-pop__rings {
	position: absolute;
	z-index: 1;
	left: clamp(-66px, -5vw, -34px);
	top: clamp(28px, 4vw, 54px);
	width: min(118%, 570px);
	height: auto;
	opacity: 1;
	pointer-events: none;
}
/* Concentric dashed rings whose dashes flow around the circle — a shimmer
   that travels inside the rings (no float/spin). Mirrors the home connector-line
   flow. Each ring flows at a different speed for depth. */
.bettrai-payers-pop__flow {
	position: absolute;
	z-index: 1;
	left: clamp(-66px, -5vw, -34px);
	top: clamp(28px, 4vw, 54px);
	width: min(118%, 570px);
	height: auto;
	aspect-ratio: 1;
	pointer-events: none;
}
.bettrai-payers-pop__flow-img {
	position: absolute;
	z-index: 1;
	left: clamp(-66px, -5vw, -34px);
	top: clamp(28px, 4vw, 54px);
	width: min(118%, 570px);
	height: auto;
	pointer-events: none;
}
.bettrai-payers-pop__flow circle {
	animation: bettrai-ring-flow 5s linear infinite;
}
.bettrai-payers-pop__flow circle:nth-child(2) { animation-duration: 7s; animation-direction: reverse; }
.bettrai-payers-pop__flow circle:nth-child(3) { animation-duration: 9s; }
@keyframes bettrai-ring-flow {
	to { stroke-dashoffset: -120; }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-payers-pop__flow circle { animation: none; }
}
.bettrai-payers-pop__person {
	position: absolute;
	z-index: 2;
	left: clamp(10px, 2vw, 46px);
	bottom: 0;
	width: min(78%, 410px);
	max-width: none;
	height: auto;
	display: block;
}
.bettrai-payers-stat {
	position: absolute;
	z-index: 3;
	background: rgba(35, 176, 172, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 10px;
	padding: 15px 17px;
	color: #fff;
	min-width: 170px;
	box-shadow: 0 18px 36px rgba(5, 38, 45, 0.12);
}
.bettrai-payers-stat__tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.58rem;
	font-weight: 700;
	line-height: 1.1;
	opacity: 0.92;
}
.bettrai-payers-stat b {
	display: block;
	font-size: clamp(1.65rem, 2.2vw, 2rem);
	line-height: 1;
	font-weight: 800;
	margin-top: 9px;
}
.bettrai-payers-stat i {
	display: inline-block;
	font-style: normal;
	font-size: 0.58rem;
	line-height: 1.25;
	opacity: 0.78;
}
.bettrai-payers-stat--a {
	top: clamp(86px, 9vw, 118px);
	right: clamp(40px, 5vw, 82px);
}
.bettrai-payers-stat--b {
	right: clamp(-6px, 1.2vw, 18px);
	bottom: clamp(94px, 10vw, 132px);
	min-width: 198px;
}
.bettrai-payers-stat__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 7px;
}
.bettrai-payers-stat__ring {
	--bettrai-ring: 96;
	width: 42px; height: 42px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.6rem; font-weight: 700;
	background:
		radial-gradient(circle at center, rgba(35, 176, 172, 0.8) 0 52%, transparent 54%),
		conic-gradient(#7fe1de calc(var(--bettrai-ring) * 1%), rgba(255,255,255,0.22) 0);
	color: #fff;
}
.bettrai-payers-stat--b > i {
	margin-top: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	opacity: 0.92;
}

.bettrai-payers-pop__list {
	align-self: stretch;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Reserve enough height for any single open item so the panel (and the
	   portrait) never jump when the accordion expands/collapses. */
	min-height: clamp(480px, 38vw, 560px);
	padding: clamp(44px, 5vw, 64px) 0 clamp(40px, 4.4vw, 56px) clamp(38px, 4.4vw, 58px);
}
.bettrai-payers-pop__list::before {
	content: "";
	position: absolute;
	left: 0;
	top: clamp(34px, 4vw, 54px);
	bottom: clamp(34px, 4vw, 54px);
	width: 1px;
	background: rgba(255, 255, 255, 0.16);
}
.bettrai-payers-pop__list h3 {
	color: #fff;
	font-size: clamp(1.8rem, 2.6vw, 2.35rem);
	line-height: 1.05;
	font-weight: 800;
	margin: 0 0 18px;
}
.bettrai-payers-pop__item {
	box-sizing: border-box;
	position: relative;
	padding: 26px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.13);
}
.bettrai-payers-pop__item h4 {
	color: #fff;
	font-size: clamp(1rem, 1.18vw, 1.15rem);
	line-height: 1.3;
	font-weight: 800;
	margin: 0;
}
.bettrai-payers-pop__item h4 button {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0;
	/* The theme's own reset.css sets `button { white-space: nowrap }`
	   globally (confirmed via computed styles - it was overriding this
	   button's wrap behavior even though nothing in our CSS asked for
	   nowrap). Override it directly here since inherited values from an
	   ancestor never beat an explicit rule on the element itself. */
	white-space: normal;
	overflow-wrap: anywhere;
	border: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	color: inherit !important;
	font: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
	transition: color 0.18s ease;
}
.bettrai-payers-pop__item h4 button:hover,
.bettrai-payers-pop__item h4 button:focus,
.bettrai-payers-pop__item h4 button:active {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	color: #64C5C5 !important;
	box-shadow: none !important;
}
.bettrai-payers-pop__item h4 button:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.72);
	outline-offset: 4px;
	border-radius: 4px;
}
.bettrai-payers-pop__item p {
	color: rgba(255, 255, 255, 0.68);
	font-size: clamp(0.9rem, 1vw, 0.98rem);
	line-height: 1.6;
	margin: 0;
	max-width: 560px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease;
}
.bettrai-payers-pop__item.is-lead p {
	max-height: 320px;
	opacity: 1;
	margin-top: 16px;
}

/* ------------------------- VALUE-BASED CARE ---------------------------- */
.bettrai-payers-vbc { padding: clamp(50px, 6vw, 90px) 0; }
.bettrai-payers-vbc__head { text-align: center; max-width: 640px; margin: 0 auto 46px; }
.bettrai-payers-vbc__head p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	font-size: 18px;
	line-height: 30px;
	margin: 16px 0 0;
}
.bettrai-payers-vbc__defs { position: absolute; width: 0; height: 0; }
.bettrai-payers-vbc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; position: relative; z-index: 2; }
.bettrai-payers-vcard {
	position: relative;
	border-radius: 0;
	padding: clamp(64px, 7vw, 92px) clamp(24px, 3vw, 42px) 78px;
	min-height: clamp(300px, 21vw, 390px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	-webkit-clip-path: url(#bettrai-payers-card-wave);
	clip-path: url(#bettrai-payers-card-wave);
}
.bettrai-payers-vcard--mint { background: var(--pp-mint); }
.bettrai-payers-vcard--sky { background: var(--pp-sky); }
.bettrai-payers-vcard__ic {
	display: inline-flex; height: 30px; margin-bottom: 28px;
}
.bettrai-payers-vcard__ic svg { height: 100%; width: auto; }
.bettrai-payers-vcard__ic-img { height: 100%; width: auto; object-fit: contain; }
.bettrai-payers-vcard h3 {
	font-family: var(--bettrai-font-heading);
	font-weight: 500;
	color: rgb(7, 18, 74);
	font-size: 20px;
	line-height: 24px;
	margin: 0 0 14px;
}
.bettrai-payers-vcard p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: rgb(141, 141, 154);
	font-size: 17px;
	line-height: 26px;
	margin: 0;
	position: relative;
	z-index: 1;
}

/* Smarter Coordination pale block — a decorative mirrored wavy-top shape
   (Vector.svg, drawn as a background layer so content is never clipped),
   mirroring the wavy-bottom cards above. */
.bettrai-payers-coord {
	position: relative;
	margin-top: -18px;
	background: transparent;
	border-radius: 0;
	padding: clamp(120px, 13vw, 180px) clamp(30px, 4vw, 64px) clamp(60px, 6.5vw, 96px) clamp(24px, 2.4vw, 34px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 50px;
	align-items: center;
}
.bettrai-payers-coord__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	pointer-events: none;
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
	overflow: hidden;
}
.bettrai-payers-coord__bg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	pointer-events: none;
	border-bottom-left-radius: 28px;
	border-bottom-right-radius: 28px;
}
.bettrai-payers-coord__copy,
.bettrai-payers-coord__media {
	position: relative;
	z-index: 1;
}
.bettrai-payers-coord__copy .bettrai-payers-h2 { margin-bottom: 18px; }
.bettrai-payers-coord__strong { font-weight: 600; color: var(--pp-ink); margin: 0 0 14px; line-height: 1.55; }
.bettrai-payers-coord__copy p:last-child {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	font-size: 18px;
	line-height: 30px;
	margin: 0;
}
.bettrai-payers-coord__media { position: relative; min-width: 0; }
/* Connected tag pills across the top; connector lines drop onto the photo. */
.bettrai-payers-coord__tags {
	display: block; position: relative; z-index: 1;
	width: 100%; height: auto; pointer-events: none;
}
/* Traveling comet shimmers riding the connector lines (matches homepage wires). */
.bettrai-payers-coord__tags-fx {
	position: absolute; top: 0; left: 0; z-index: 1;
	width: 100%; height: auto; pointer-events: none;
}
.bettrai-payers-coord__tags-fx-img {
	position: absolute; top: 0; left: 0; z-index: 1;
	width: 100%; height: auto; pointer-events: none;
}
.bettrai-coord-comet {
	fill: none; stroke: #4BC4C5; stroke-width: 2.4; stroke-linecap: round;
	stroke-dasharray: 8 92;
	filter: drop-shadow(0 0 3px rgba(75, 196, 197, 0.7));
	animation: bettrai-coord-comet 3.2s linear infinite;
}
.bettrai-coord-comet--b { animation-delay: 0.8s; }
.bettrai-coord-comet--c { animation-delay: 1.4s; }
.bettrai-coord-comet--d { animation-delay: 2.2s; }
@keyframes bettrai-coord-comet {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-coord-comet { animation: none; }
}

/* Finished, pre-tinted people photo (soft rounded, no card needed).
   Pulled up so the tags' connector lines land on its top edge. */
.bettrai-payers-coord__photo {
	display: block; position: relative; z-index: 2;
	width: 100%; height: auto; margin-top: -9%;
}
/* Green heart badge on the photo's top-left corner. */
.bettrai-payers-coord__badge {
	position: absolute; z-index: 4; left: calc(9.66% - 28px); top: clamp(58px, 5vw + 20px, 72px);
	width: 56px; height: 56px;
	filter: drop-shadow(0 8px 18px rgba(7, 18, 74, 0.12));
}

/* --------------------- DARK PLATFORM SECTION --------------------------- */
.bettrai-payers-platform {
	background: linear-gradient(180deg, #0b1533 0%, #101d47 50%, #0b1533 100%);
	padding: clamp(70px, 8vw, 118px) 0 clamp(82px, 9vw, 132px);
	color: #fff;
}
.bettrai-payers-platform__head { text-align: center; max-width: 640px; margin: 0 auto clamp(46px, 5vw, 64px); }
.bettrai-payers-platform__head .bettrai-payers-h2 { }
.bettrai-payers-platform__head p { font-family: var(--bettrai-font); color: rgba(255, 255, 255, 0.72); line-height: 1.7; margin: 16px 0 0; }

.bettrai-payers-panel {
	position: relative;
	z-index: 1;
	background: linear-gradient(180deg, #eaf3fb 0%, #dcecf7 100%);
	border: 6px solid #cdeef7;
	border-radius: 12px;
	overflow: hidden;
	box-shadow:
		0 42px 110px rgba(48, 56, 255, 0.42),
		0 22px 70px rgba(75, 196, 197, 0.16),
		0 30px 80px rgba(4, 10, 30, 0.44);
	max-width: 1468px;
	margin: 0 auto;
}
.bettrai-payers-panel__tabs,
.bettrai-payers-panel__body {
	position: relative;
	z-index: 1;
}
.bettrai-payers-panel__tabs { border-radius: 6px 6px 0 0; overflow: hidden; }
.bettrai-payers-panel__body { border-radius: 0 0 6px 6px; overflow: hidden; background: linear-gradient(180deg, #eaf3fb 0%, #dcecf7 100%); }
.bettrai-payers-panel__tabs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: #fff;
	border-bottom: 1px solid rgba(7, 18, 74, 0.07);
	padding: 8px;
}
.bettrai-payers-panel__tabs button {
	min-width: 0;
	min-height: 54px;
	margin: 0;
	font-family: "Roboto", var(--bettrai-font);
	font-size: 0.9rem;
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var(--pp-ink) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0;
	border-color: transparent !important;
	border-radius: 9px;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	padding: 0 18px;
	cursor: pointer;
}
.bettrai-payers-panel__tabs button:hover,
.bettrai-payers-panel__tabs button:focus {
	color: #64C5C5 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
}
.bettrai-payers-panel__tabs button.is-active,
.bettrai-payers-panel__tabs button.is-active:hover,
.bettrai-payers-panel__tabs button.is-active:focus {
	background: #0F5550 !important;
	background-color: #0F5550 !important;
	color: #fff !important;
}
.bettrai-payers-panel__body { position: relative; }
/* Each capability tab renders as a stacked pane; only the active one shows,
   and all panes share the same min-height so switching tabs never changes the
   section height. */
.bettrai-payers-panel__pane { display: none; }
.bettrai-payers-panel__pane.is-active {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: clamp(44px, 5vw, 72px);
	min-height: clamp(460px, 34vw, 560px);
	padding: clamp(44px, 5vw, 72px) clamp(44px, 5vw, 72px) clamp(52px, 6vw, 82px);
	align-items: center;
}
.bettrai-payers-panel__copy h3 {
	font-family: "Roboto", var(--bettrai-font);
	font-size: 48px;
	font-weight: 650;
	color: var(--pp-heading);
	margin: 0 0 22px;
	line-height: 1.15;
	letter-spacing: 0;
	text-wrap: balance;
}
.bettrai-payers-panel__headline-break { display: block; }
.bettrai-payers-panel__copy p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	line-height: 30px;
	margin: 0 0 18px;
	font-size: 18px;
	max-width: 610px;
}
.bettrai-payers-panel__actions { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.bettrai-payers-panel__actions .bettrai-btn__label { font-family: "Roboto", var(--bettrai-font); }
.bettrai-payers-panel__actions .bettrai-btn--primary,
.bettrai-payers-panel__actions .bettrai-payers-square {
	height: 52px;
	border-radius: 8px;
}
.bettrai-payers-panel__actions .bettrai-btn--primary {
	min-width: 154px;
	padding-left: 24px;
	padding-right: 24px;
	justify-content: center;
}

.bettrai-payers-panel__flow {
	position: relative;
	min-height: clamp(360px, 28vw, 440px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bettrai-payers-panel__flow::before {
	content: "";
	position: absolute;
	left: calc(clamp(44px, 5vw, 72px) / -2);
	top: 0;
	bottom: 0;
	width: 1px;
	background: rgba(7, 18, 74, 0.08);
}
.bettrai-payers-panel__flow::after {
	content: "";
	position: absolute;
	inset: -6%;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 58% 52% at 50% 46%, rgba(41, 188, 188, 0.22) 0%, rgba(41, 188, 188, 0.12) 32%, rgba(41, 188, 188, 0.04) 55%, rgba(41, 188, 188, 0) 72%);
}
.pp-mex-img-wrap { position: relative; z-index: 1; }
.bettrai-payers-panel__graphic {
	position: relative;
	z-index: 1;
	display: block;
	width: min(112%, 860px);
	height: auto;
	max-height: clamp(420px, 32vw, 520px);
	object-fit: contain;
	align-self: center;
}
.bettrai-payers-flow__sophie { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.bettrai-payers-flow__ava { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid var(--pp-teal); background: #fff; }
.bettrai-payers-flow__ava img { width: 100%; height: 100%; object-fit: cover; }
.bettrai-payers-flow__name { background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 0.72rem; font-weight: 700; color: var(--pp-teal); box-shadow: var(--bettrai-shadow-soft); }
.bettrai-payers-flow__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bettrai-payers-flow__card { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--bettrai-shadow-soft); }
.bettrai-payers-flow__card b { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; color: var(--pp-ink); margin-bottom: 5px; }
.bettrai-payers-flow__card i { font-style: normal; font-size: 0.66rem; line-height: 1.45; color: var(--pp-body); display: block; }
.bettrai-payers-flow__ic { color: var(--pp-teal); font-size: 0.72rem; }
.bettrai-payers-flow__card--green { background: var(--pp-green); }
.bettrai-payers-flow__card--green b, .bettrai-payers-flow__card--green i, .bettrai-payers-flow__card--green .bettrai-payers-flow__ic { color: #fff; }
.bettrai-payers-flow__card--accent { border: 1.5px solid var(--pp-teal); }

/* ----------------- EVERY INTERACTION BETTER CONNECTED ------------------ */
.bettrai-payers-interaction { padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-payers-interaction__inner {
	display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.bettrai-payers-interaction__media {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
.bettrai-payers-interaction__media > img {
	display: block;
	border-radius: inherit;
	width: 100%;
	height: 500px;
	object-fit: cover;
}
.bettrai-payers-interaction__chip {
	position: absolute;
	left: 42px;
	right: 42px;
	bottom: 30px;
	min-height: 106px;
	display: block;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.76));
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.78);
	border-radius: 10px;
	padding: 20px 24px 18px;
	box-shadow: 0 16px 36px rgba(7, 18, 74, 0.12);
}
.bettrai-payers-interaction__sophie {
	display: none;
}
.bettrai-payers-interaction__chip-body { flex: 1; min-width: 0; }
.bettrai-payers-interaction__chip-title {
	display: block;
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	color: var(--pp-ink);
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(75, 196, 197, 0.35);
}
.bettrai-payers-interaction__feats { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 0; }
.bettrai-payers-interaction__feat {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	padding: 0 14px;
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 600;
	color: var(--pp-ink);
	white-space: nowrap;
}
.bettrai-payers-interaction__feat:first-child { padding-left: 0; }
.bettrai-payers-interaction__feat:last-child { padding-right: 0; }
.bettrai-payers-interaction__feat + .bettrai-payers-interaction__feat { border-left: 1px solid rgba(75, 196, 197, 0.3); }
.bettrai-payers-interaction__feat i { display: inline-flex; width: 18px; height: 18px; color: var(--pp-teal); flex: none; }
.bettrai-payers-interaction__feat svg { width: 100%; height: 100%; }
.bettrai-payers-interaction__copy .bettrai-payers-h2 {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 48px;
	line-height: 56px;
	font-weight: 650;
	letter-spacing: 0;
	color: var(--pp-heading);
	margin-bottom: 20px;
}
.bettrai-payers-interaction__copy .bettrai-payers-h2 span {
	color: var(--pp-teal);
}
.bettrai-payers-interaction__copy p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	line-height: 30px;
	margin: 0 0 16px;
	font-size: 18px;
}
.bettrai-payers-interaction__copy .bettrai-btn,
.bettrai-payers-interaction__copy .bettrai-btn:visited {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-width: 154px;
	margin-top: 8px;
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 16px;
	text-decoration: none !important;
	transform: none !important;
}
.bettrai-payers-interaction__copy .bettrai-btn .bettrai-btn__label {
	color: inherit !important;
}

/* ------------------- EVERYTHING CARE TEAMS NEED ------------------------ */
.bettrai-payers-need {
	padding: clamp(42px, 4vw, 64px) 0 clamp(52px, 6vw, 86px);
	background: linear-gradient(180deg, #ffffff 0%, #f4f7f7 220px);
}
.bettrai-payers-need__head { text-align: center; margin: 0 auto 40px; }
.bettrai-payers-need__head .bettrai-payers-h2 { }
.bettrai-payers-need__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
/* Same outlined-card technique as .bettrai-sophie__card (a CSS background-image
   SVG, stretched via background-size with a non-scaling 1px stroke — reliable
   regardless of each card's actual height, since there's no rounded corner to
   distort). Payers cards sit apart with a gutter, so unlike the homepage
   version (which shares seams between touching cards) each card here draws
   its own full outline: left + top + right + wavy bottom. */
.bettrai-payers-ncard {
	position: relative;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 456 446' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M0.5 387.243V0.5H455.5V386.744C411.048 386.806 360.435 395.053 309.523 405.344C258.394 415.679 207.001 428.065 161.132 436.327C115.259 444.59 75.0428 448.701 46.3125 442.527C31.9588 439.443 20.5186 433.8 12.665 424.869C4.81681 415.944 0.500075 403.678 0.5 387.243Z' stroke='%23d9dfe8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") no-repeat;
	background-size: 100% 100%;
	padding: 40px 34px 48px;
	min-height: 342px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bettrai-payers-ncard__ic { display: inline-flex; align-items: center; height: 30px; margin-bottom: 22px; }
.bettrai-payers-ncard__ic svg { width: auto; height: auto; max-width: 30px; max-height: 30px; }
.bettrai-payers-ncard h3 {
	font-family: var(--bettrai-font-heading);
	font-weight: 500;
	color: rgb(7, 18, 74);
	font-size: 20px;
	line-height: 24px;
	margin: 0 0 14px;
}
.bettrai-payers-ncard p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	font-size: 17px;
	line-height: 26px;
	margin: 0;
}
.bettrai-payers-ncard__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--pp-teal); font-weight: 600; font-size: 0.85rem; text-decoration: none; position: relative; z-index: 1; }
.bettrai-payers-ncard__link:hover { color: var(--bettrai-teal-hover); }

/* --------------------- SOLUTIONS FOR HEALTH PLANS ---------------------- */
.bettrai-payers-solutions { background: linear-gradient(180deg, #ffffff 0%, var(--pp-pale) 100%); padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-payers-solutions__head .bettrai-payers-h2 { }
.bettrai-payers-solutions__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px;
}
.bettrai-payers-solutions__head p {
	justify-self: end;
	max-width: 500px;
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	font-size: 18px;
	line-height: 30px;
	margin: 0;
	text-align: right;
}
.bettrai-payers-solutions__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bettrai-payers-plan { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--bettrai-shadow-soft); }
.bettrai-payers-plan__media { position: relative; aspect-ratio: 4 / 3.4; overflow: hidden; }
.bettrai-payers-plan__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover !important;
	margin: 0 !important;
}
.bettrai-payers-plan__cap { display: block; text-align: center; font-weight: 600; font-size: 0.92rem; padding: 14px; }
.bettrai-payers-plan__cap--a { background: #dcecf6; color: var(--pp-ink); }
.bettrai-payers-plan__cap--b { background: #d8efe6; color: var(--pp-ink); }
.bettrai-payers-plan__cap--c { background: var(--pp-green); color: #fff; }

/* -------------------- ALIGN CLINICAL QUALITY --------------------------- */
.bettrai-payers-align { padding: clamp(56px, 7vw, 100px) 0; background: var(--pp-pale); }
.bettrai-payers-align__head { text-align: center; max-width: 860px; margin: 0 auto 60px; }
.bettrai-payers-align__head .bettrai-payers-h2 { }
.bettrai-payers-align__head p {
	font-family: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 400;
	color: var(--pp-body);
	font-size: 18px;
	line-height: 30px;
	margin: 16px auto 0;
}
.bettrai-payers-compare {
	position: relative;
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
	align-items: stretch;
}
.bettrai-payers-compare__panel { border-radius: 20px; padding: 44px 40px; display: flex; flex-direction: column; }
.bettrai-payers-compare__panel--old { background: #d1ebf6; }
.bettrai-payers-compare__panel--new { background: #e7f5ee; }
.bettrai-payers-compare__panel h3 {
	font-family: var(--bettrai-font-heading);
	font-size: 28px;
	font-weight: 500;
	color: rgb(7, 18, 74);
	line-height: 32px;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
}
.bettrai-payers-compare__panel--new h3 img { height: 30px; width: auto; }
.bettrai-payers-compare__sub {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: #6E7998;
	font-size: 18px;
	line-height: 30px;
	margin: 0 0 20px;
}
.bettrai-payers-compare__row { display: flex; gap: 22px; padding: 18px 0; align-items: center; border-top: 1px solid rgba(7, 18, 74, 0.1); }
.bettrai-payers-compare__ic {
	width: 56px; height: 56px; border-radius: 50%; flex: none;
	display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem;
	background: #fff;
}
.bettrai-payers-compare__ic svg { width: 24px; height: 24px; }
.bettrai-payers-compare__ic-img { width: 24px; height: 24px; object-fit: contain; }
.bettrai-payers-compare__ic--old { color: #97a3b0; }
.bettrai-payers-compare__ic--new { color: #16B3A3; }
.bettrai-payers-compare__row b { display: block; font-size: 1.25rem; color: var(--pp-ink); margin-bottom: 4px; }
.bettrai-payers-compare__row i { font-style: normal; font-size: 1.05rem; color: #6E7998; line-height: 1.55; }
.bettrai-payers-compare__foot {
	display: flex; align-items: center; gap: 12px;
	border-radius: 12px; padding: 16px 18px; margin-top: 18px; font-size: 1.05rem; line-height: 1.5;
}
.bettrai-payers-compare__foot--old { background: #DFF5FF; color: #6E7998; }
.bettrai-payers-compare__foot--new { background: #BBEFE6; color: #16B3A3; }
.bettrai-payers-compare__trend { display: inline-flex; flex: none; }
.bettrai-payers-compare__trend svg { width: 20px; height: 20px; }
.bettrai-payers-compare__vs {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 68px; height: 68px; border-radius: 50%;
	background: #fff; box-shadow: var(--bettrai-shadow-card);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1.1rem; font-weight: 700; color: var(--pp-teal); z-index: 2;
}
.bettrai-payers-compare__vs::before {
	content: ""; position: absolute; inset: -10px; border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.65);
}

.bettrai-payers-greencta {
	margin-top: 34px;
	background: linear-gradient(120deg, #1f7a5e 0%, #14624c 100%);
	border-radius: 18px;
	padding: 26px clamp(24px, 3vw, 40px);
	display: flex; align-items: center; gap: 24px;
	color: #fff;
}
.bettrai-payers-greencta__mark { width: 58px; height: 58px; border-radius: 50%; background: #16B3A3; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bettrai-payers-greencta__mark img { width: 46%; height: 46%; object-fit: contain; }
.bettrai-payers-greencta p { flex: 1; font-family: var(--bettrai-font-heading); font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 700; margin: 0; line-height: 1.25; }
.bettrai-payers-greencta__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.bettrai-payers-greencta__actions .bettrai-btn { border-radius: 10px; min-height: 52px; }
.bettrai-payers-greencta__actions .bettrai-payers-square { border: 0; }

/* --------------------------- MEET SOPHIE ------------------------------- */
.bettrai-payers-sophie {
	position: relative;
	background: linear-gradient(180deg, #07102d 0%, #1c1471 100%);
	padding: clamp(36px, 4.5vw, 56px) 0 0;
	color: #fff;
	overflow: hidden;
}
.bettrai-payers-sophie::before,
.bettrai-payers-sophie::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(70px);
	pointer-events: none;
	opacity: 0.55;
}
.bettrai-payers-sophie::before {
	width: 420px;
	height: 420px;
	left: -120px;
	top: -90px;
	background: radial-gradient(circle, rgba(41, 188, 188, 0.38) 0%, rgba(41, 188, 188, 0) 70%);
	animation: bettrai-sophie-blob-a 16s ease-in-out infinite;
}
.bettrai-payers-sophie::after {
	width: 380px;
	height: 380px;
	right: -100px;
	top: 6%;
	background: radial-gradient(circle, rgba(108, 99, 255, 0.32) 0%, rgba(108, 99, 255, 0) 70%);
	animation: bettrai-sophie-blob-b 20s ease-in-out infinite;
}
@keyframes bettrai-sophie-blob-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(40px, 50px) scale(1.1); }
}
@keyframes bettrai-sophie-blob-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-35px, -35px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-payers-sophie::before,
	.bettrai-payers-sophie::after { animation: none; }
}
.bettrai-payers-sophie__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 50px; align-items: end; }
.bettrai-payers-sophie__copy { align-self: center; padding-bottom: clamp(36px, 4.5vw, 56px); }
.bettrai-payers-sophie__copy .bettrai-payers-h2 { margin-bottom: 6px; }
.bettrai-payers-sophie__tag { font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0 0 30px; }
.bettrai-payers-sophie__copy p:not(.bettrai-payers-sophie__tag) { color: rgba(255, 255, 255, 0.75); line-height: 1.7; margin: 0 0 16px; font-family: var(--bettrai-font); font-size: 17px; }
.bettrai-payers-sophie__actions { display: flex; align-items: center; gap: 12px; margin-top: 32px; }
.bettrai-payers-sophie__actions .bettrai-btn--primary {
	border-radius: var(--bettrai-radius-md);
	min-height: 52px;
	padding: 0 30px;
}
.bettrai-payers-sophie__actions .bettrai-payers-square { border: 0; }
.bettrai-payers-sophie__media { position: relative; display: flex; justify-content: center; align-items: flex-end; }
.bettrai-payers-sophie__glow {
	position: absolute; inset: 0; margin: auto;
	width: 66%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(circle, rgba(40, 36, 159, 0.55) 0%, rgba(40, 36, 159, 0) 66%);
	z-index: 0;
	animation: bettrai-sophie-glow-pulse 6s ease-in-out infinite;
}
.bettrai-payers-sophie__backdrop {
	position: absolute; z-index: 0; left: 50%; top: 44%;
	transform: translate(-50%, -50%);
	width: 92%; max-width: 700px; height: auto;
	pointer-events: none;
	animation: bettrai-sophie-backdrop-spin 50s linear infinite;
}
@keyframes bettrai-sophie-backdrop-spin {
	from { transform: translate(-50%, -50%) rotate(0deg); }
	to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes bettrai-sophie-glow-pulse {
	0%, 100% { transform: scale(1); opacity: 0.85; }
	50%      { transform: scale(1.12); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-payers-sophie__backdrop,
	.bettrai-payers-sophie__glow { animation: none; }
}
.bettrai-payers-sophie__figure { position: relative; z-index: 1; max-height: 680px; width: auto; margin-bottom: -8px; }
.bettrai-payers-sophie__toast {
	position: absolute; z-index: 2; right: 4%; bottom: 12%;
	display: flex; align-items: center; gap: 16px;
	background: #fff; border-radius: 20px; padding: 16px 24px 16px 16px;
	box-shadow: var(--bettrai-shadow-card); max-width: 360px;
}
.bettrai-payers-sophie__toast-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--pp-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bettrai-payers-sophie__toast-ic svg { width: 26px; height: 26px; }
.bettrai-payers-sophie__toast-ic-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.bettrai-payers-sophie__toast-txt b { display: block; font-size: 1.15rem; font-weight: 700; color: var(--pp-ink); margin-bottom: 2px; }
.bettrai-payers-sophie__toast-txt i { font-style: normal; font-size: 0.95rem; color: var(--pp-body); }

/* ---------------------- HIGH-RISK MEMBERS ------------------------------ */
.bettrai-payers-risk { padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-payers-risk__inner { display: grid; grid-template-columns: 1.08fr 1fr; gap: 36px; align-items: stretch; }
.bettrai-payers-risk__copy .bettrai-payers-h2 { margin-bottom: 16px; font-size: 44px; line-height: 48px; }
.bettrai-payers-h2__accent { color: var(--bettrai-btn-green); }
.bettrai-payers-risk__copy > p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	line-height: 28px;
	margin: 0 0 22px;
	font-size: 17px;
	max-width: 680px;
}
.bettrai-payers-risk__copy > p:last-of-type { margin-bottom: 40px; }
.bettrai-payers-risk__media { position: relative; border-radius: 18px; overflow: hidden; }
.bettrai-payers-risk__media img { display: block; border-radius: 18px; width: 100%; aspect-ratio: 19 / 10; object-fit: cover; }
.bettrai-payers-risk__media::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(7, 18, 74, 0.28) 0%, rgba(7, 18, 74, 0.12) 35%, rgba(7, 18, 74, 0) 65%);
}
.bettrai-payers-risk__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; column-gap: 17px; row-gap: 17px; height: 100%; }
.bettrai-payers-metric {
	position: relative;
	border-radius: 18px;
	padding: 40px 28px 36px;
	color: #fff;
	height: 100%;
	display: flex; flex-direction: column; justify-content: flex-start;
	overflow: hidden;
}
.bettrai-payers-metric::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		repeating-radial-gradient(circle at 80% 24%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 40px),
		radial-gradient(circle 2.5px at 88% 66%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 75%);
	pointer-events: none;
}
.bettrai-payers-metric::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 130px;
	height: 100px;
	opacity: 0.5;
	background-image: radial-gradient(rgba(255, 255, 255, 0.4) 1px, transparent 1.6px);
	background-size: 10px 10px;
	-webkit-mask-image: linear-gradient(315deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 75%);
	mask-image: linear-gradient(315deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 75%);
	pointer-events: none;
}
.bettrai-payers-metric--mint::before,
.bettrai-payers-metric--mint::after { opacity: 0.35; }
.bettrai-payers-metric__mark { position: absolute; z-index: 1; top: 18px; right: 20px; font-size: 1.15rem; opacity: 0.7; }
.bettrai-payers-metric b { position: relative; z-index: 1; font-size: 3rem; font-weight: 700; line-height: 1; margin-bottom: 34px; }
.bettrai-payers-metric h4 { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 700; margin: 0 0 16px; max-width: 62%; line-height: 1.3; }
.bettrai-payers-metric i { position: relative; z-index: 1; font-style: normal; font-size: 0.82rem; opacity: 0.85; line-height: 1.55; max-width: 62%; margin-top: auto; }
.bettrai-payers-metric--blue { background: linear-gradient(150deg, #2f5bd6, #2339e6); }
.bettrai-payers-metric--green { background: linear-gradient(150deg, #1f9f6e, #16845f); }
.bettrai-payers-metric--teal { background: linear-gradient(150deg, #2fb8b8, #1f8f9c); }
.bettrai-payers-metric--mint { background: linear-gradient(150deg, #bfe9df, #a7ded1); color: var(--pp-ink); }
.bettrai-payers-metric--mint i { opacity: 0.7; }

/* ------------------------------- FAQ ----------------------------------- */
.bettrai-payers-faq { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-payers-faq__head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.bettrai-payers-faq__head p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	color: var(--pp-body);
	line-height: 30px;
	margin: 16px 0 0;
	font-size: 18px;
}
.bettrai-payers-faq__list { max-width: none; width: 100%; margin: 0; }


/* ============================ RESPONSIVE =============================== */
@media (max-width: 1024px) {
	.bettrai-payers-pop__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.bettrai-payers-pop__card { grid-template-columns: minmax(360px, 0.9fr) minmax(360px, 1fr); gap: 24px; padding: 0 34px 0 42px; }
	.bettrai-payers-pop__person { width: min(80%, 330px); left: -4px; }
	.bettrai-payers-pop__rings { left: -56px; width: 480px; opacity: 0.86; }
	.bettrai-payers-stat--a { right: 18px; }
	.bettrai-payers-stat--b { right: 0; }
	.bettrai-payers-panel__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bettrai-payers-panel__pane.is-active { grid-template-columns: minmax(0, 1fr); }
	.bettrai-payers-panel__flow::before { display: none; }
	/* Value-based-care pillar cards, tablet only: drop the decorative SVG
	   clip-path wave (same problem/fix as the mobile breakpoint below) and
	   lay the first two cards side by side with the third stretched full
	   width beneath them, covering the grid wrapper. */
	.bettrai-payers-vbc__grid { grid-template-columns: repeat(2, 1fr); }
	.bettrai-payers-vcard {
		min-height: 260px;
		padding: clamp(36px, 5vw, 44px) clamp(24px, 3vw, 32px) clamp(28px, 4vw, 34px);
		border-radius: var(--bettrai-radius-md);
		-webkit-clip-path: none;
		clip-path: none;
	}
	.bettrai-payers-vcard:nth-child(3) { grid-column: 1 / -1; }
	/* Smarter Coordination scalloped-top background, tablet only: same
	   decorative-wave cleanup as the pillar cards above - drop it and give
	   the block a plain flat background. */
	.bettrai-payers-coord__bg { display: none; }
	.bettrai-payers-coord {
		background: #E9F6FB;
		grid-template-columns: minmax(0, 1fr);
		text-align: center;
	}
	.bettrai-payers-coord__copy { text-align: center; }
	.bettrai-payers-coord__media { order: 2; width: 100%; }
	.bettrai-payers-coord__photo { width: 100%; }
	/* "Every Interaction. Better Connected." (PayersInteraction), tablet
	   only: stack media above copy, same single-column layout already used
	   at the narrower mobile breakpoint. Desktop untouched. */
	.bettrai-payers-interaction__inner { grid-template-columns: minmax(0, 1fr); gap: 17px; }
	.bettrai-payers-interaction__chip { display: none; }
	/* "Everything Care Teams Need To Deliver Better Care." (PayersNeed)
	   cards, tablet only: drop the decorative wavy SVG outline background
	   (same problem/fix as the value-based-care pillar cards) and lay the
	   first two cards side by side with the third stretched full width
	   beneath them, covering the grid wrapper. */
	.bettrai-payers-need__grid { grid-template-columns: repeat(2, 1fr); }
	.bettrai-payers-ncard {
		background: none;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		min-height: 260px;
	}
	.bettrai-payers-ncard:nth-child(3) { grid-column: 1 / -1; }
	/* "Solutions Built for Every Type of Health Plan." (PayersSolutions)
	   head, tablet only: stack the heading above the subtext (matching the
	   mobile layout) instead of the desktop side-by-side grid. */
	.bettrai-payers-solutions__head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.bettrai-payers-solutions__head p { justify-self: start; text-align: left; }
	.bettrai-payers-solutions__head .bettrai-payers-h2 { line-height: 1.15; }
	/* Payers hero title, tablet only: keep "Member Outcomes." together so it
	   wraps onto its own line instead of splitting "Bettr Member" / "Outcomes."
	   across two lines. Desktop and mobile untouched. */
	.bettrai-payers-hero__title-nowrap-tablet { white-space: nowrap; }
}

@media (max-width: 1024px) {
	/* Tablet only: symmetric top/bottom padding (instead of a large
	   top-only value) so align-items:center on this flex container
	   actually centers the copy block in the hero, instead of the
	   asymmetric padding pushing it toward the top. */
	.bettrai-payers-hero__inner { min-height: 640px; padding-top: 56px; padding-bottom: 56px; }
	.bettrai-payers-pop__head,
	.bettrai-payers-solutions__head { grid-template-columns: minmax(0, 1fr); gap: 18px; }
	.bettrai-payers-solutions__head p { justify-self: start; text-align: left; }
	.bettrai-payers-pop__card { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 28px 0; }
	.bettrai-payers-pop__list { order: 1; padding: 34px 0 0; min-height: 0; justify-content: flex-start; }
	.bettrai-payers-pop__portrait { order: 2; width: min(100%, 520px); margin: 0 auto; }
	.bettrai-payers-pop__person { width: min(88%, 420px); left: 0; }
	.bettrai-payers-pop__rings { left: 50%; top: 34px; width: min(100%, 470px); opacity: 0.82; transform: translateX(-52%); }
	.bettrai-payers-stat--a { display: none; }
	.bettrai-payers-stat--b { right: 2%; bottom: 24px; }
	.bettrai-payers-pop__list::before { display: none; }
	.bettrai-payers-pop__intro { font-size: 16px; }
	/* VBC/Need card grids intentionally excluded here - kept as the
	   2-up + full-width-3rd layout built for tablet specifically. */
	.bettrai-payers-solutions__grid { grid-template-columns: minmax(0, 1fr); }
	/* Value-based-care pillar cards, mobile only: same wavy-clip-path-card
	   problem fixed elsewhere on the site (Sophie "Handles the routine" cards,
	   Steps cards, Sophie support pillars) - the decorative SVG clip-path wave
	   needs a large fixed min-height to fit its curve, which just reads as
	   excess empty space once these cards stack full-width on phones. Drop to
	   a plain rounded card sized to its own content. */
	.bettrai-payers-vcard {
		min-height: 300px;
		padding: clamp(40px, 9vw, 48px) clamp(22px, 6vw, 28px) clamp(28px, 6vw, 34px);
		border-radius: var(--bettrai-radius-md);
		-webkit-clip-path: none;
		clip-path: none;
	}
	.bettrai-payers-vcard p { font-size: 16px; }
	/* Smarter Coordination scalloped-top background, mobile only: same
	   decorative-wave cleanup as the pillar cards above - it just reads as
	   awkward petal shapes floating above the block once stacked full-width
	   on phones. Drop it and give the block a plain flat background. */
	.bettrai-payers-coord__bg { display: none; }
	.bettrai-payers-pop { padding-bottom: 24px; }
	.bettrai-payers-vbc { padding-top: 24px; padding-bottom: 0; }
	.bettrai-payers-coord { background: #E9F6FB; margin-top: 15px; padding-top: clamp(30px, 6vw, 40px); padding-bottom: clamp(40px, 8vw, 56px); }
	.bettrai-payers-coord__badge { left: 12px; top: auto; bottom: 12px; }
	.bettrai-payers-platform__head { text-align: left; margin-left: 0; margin-right: 0; }
	.bettrai-payers-platform__head .bettrai-payers-h2--center { text-align: left; }
	.bettrai-payers-coord,
	.bettrai-payers-interaction__inner,
	.bettrai-payers-sophie__inner,
	.bettrai-payers-risk__inner { grid-template-columns: minmax(0, 1fr); gap: 17px; }
	.bettrai-payers-risk__copy .bettrai-payers-h2 { font-size: clamp(1.9rem, 8vw, 2.3rem); line-height: 1.2; }
	.bettrai-payers-risk { padding-bottom: 24px; }
	.bettrai-payers-page .bettrai-faq { padding-top: 24px; }
	.bettrai-payers-page .bettrai-faq__heading { margin-bottom: 24px; }
	.bettrai-about-page .bettrai-faq { padding-top: 8px; }
	.bettrai-about-page .bettrai-faq__heading { margin-bottom: 24px; }
	.bettrai-payers-interaction__chip {
		left: 28px;
		right: 28px;
		bottom: 24px;
		padding: 18px 20px;
	}
	.bettrai-payers-coord__chip--2 { display: none; }
	.bettrai-payers-compare { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.bettrai-payers-compare__vs { display: none; }
	.bettrai-payers-compare__panel { padding: 36px 22px; }
	.bettrai-payers-compare__row { align-items: flex-start; }
	.bettrai-payers-greencta { flex-direction: column; text-align: center; padding-top: 40px; padding-bottom: 40px; }
	.bettrai-payers-sophie__figure { max-height: 400px; }
	.bettrai-payers-sophie__media { margin-top: -40px; }
	.bettrai-payers-sophie__toast { display: none; }
	.bettrai-payers-panel__pane.is-active { min-height: auto; }
}

@media (max-width: 520px) {
	.bettrai-payers-pop__card { padding: 0 18px 0; }
	.bettrai-payers-pop__list { padding-bottom: 0; }
	.bettrai-payers-pop__portrait { min-height: 280px; }
	.bettrai-payers-pop__person { width: 98%; left: 0; bottom: 0; }
	.bettrai-payers-pop__rings,
	.bettrai-payers-pop__flow { top: 6px; width: 66%; opacity: 0.78; }
	.bettrai-payers-stat { min-width: 138px; padding: 11px 12px; border-radius: 9px; }
	.bettrai-payers-stat__tag { font-size: 0.52rem; }
	.bettrai-payers-stat b { font-size: 1.45rem; }
	.bettrai-payers-stat i { font-size: 0.52rem; }
	.bettrai-payers-stat--b { min-width: 168px; right: 4%; bottom: 20px; }
	.bettrai-payers-stat__ring { width: 34px; height: 34px; }
	.bettrai-payers-risk__grid { grid-template-columns: minmax(0, 1fr); }
	.bettrai-payers-interaction__chip {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
		margin: -72px 16px 0;
		padding: 18px;
		min-height: 106px;
	}
	.bettrai-payers-interaction__feats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.bettrai-payers-interaction__feat { padding: 0; }
	.bettrai-payers-interaction__feat + .bettrai-payers-interaction__feat { border-left: 0; }
	.bettrai-payers-flow__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Payers "Member Experience / Quality Performance" capability tabs, tablet
   and mobile: replaced by a compact dropdown, same pattern as the Providers
   workflow tabs (ProvidersWorkflow) and the ProvidersServe audience tabs -
   see initPayersPanelTabsMobile() in frontend.js. Options proxy a click to
   the real (hidden) tab button so all existing interaction is reused
   verbatim. Desktop's tab row is untouched. */
.bettrai-payers-panel__tabs-mobile { display: none; }

@media (max-width: 1024px) {
	.bettrai-payers-panel__tabs { display: none; }

	.bettrai-payers-panel__tabs-mobile {
		display: block;
		position: relative;
		margin: 0;
		padding: 12px;
	}

	button.bettrai-payers-panel__tabs-mobile-trigger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid rgba(41, 188, 188, 0.38);
		border-radius: var(--bettrai-radius-md);
		background: #fff;
		box-shadow: none;
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	button.bettrai-payers-panel__tabs-mobile-trigger:hover,
	button.bettrai-payers-panel__tabs-mobile-trigger:focus {
		background: #fff;
		color: inherit;
	}

	.bettrai-payers-panel__tabs-mobile-label {
		flex: 1 1 auto;
		color: var(--pp-ink);
		font-size: 0.95rem;
		font-weight: 700;
	}

	.bettrai-payers-panel__tabs-mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--pp-teal, #29bcbc);
		border-bottom: 2px solid var(--pp-teal, #29bcbc);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}
	.bettrai-payers-panel__tabs-mobile.is-open .bettrai-payers-panel__tabs-mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-payers-panel__tabs-mobile-list {
		position: absolute;
		top: calc(100% + 4px);
		left: 12px;
		right: 12px;
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.bettrai-payers-panel__tabs-mobile.is-open .bettrai-payers-panel__tabs-mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-payers-panel__tabs-mobile-list li {
		padding: 12px 14px;
		border-radius: 8px;
		color: #717184;
		font-size: 0.95rem;
		font-weight: 500;
		cursor: pointer;
	}
	.bettrai-payers-panel__tabs-mobile-list li.is-active {
		color: var(--pp-teal, #29bcbc);
		background: rgba(41, 188, 188, 0.12);
		font-weight: 700;
	}

	.bettrai-payers-panel__pane.is-active {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}
	.bettrai-payers-panel__copy p {
		font-size: 16px;
		line-height: 30px;
	}
	/* "Deliver Better Care" need cards, mobile only: same wavy-outline-card
	   cleanup as the value-based-care pillar cards above - the decorative SVG
	   outline needs a large fixed min-height to fit its curve, which just
	   reads as excess empty space once these cards stack full-width on
	   phones. Drop to a plain flat card sized to its own content. */
	.bettrai-payers-ncard {
		background: #fff;
		min-height: 0;
		padding: clamp(38px, 9vw, 46px) clamp(22px, 6vw, 28px);
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
	}
	.bettrai-payers-ncard p { font-size: 16px; }
}

/* ==========================================================================
   PROVIDERS LANDING PAGE  (.bettrai-providers-page)
   Scoped page built from assets/figma-providers reference (Logos/Providers.png).
   Reuses shared header/footer, buttons, FAQ, and card radius/token system.
   Teal accent = #29BCBC, navy ink = #24244d. Never affects other pages.
   ========================================================================== */

/* Tokens are also exposed at :root so providers section widgets rendered by
   Elementor (which have no .bettrai-providers-page ancestor) still get the palette. */
:root,
.bettrai-providers-page {
	--pv-teal: #29BCBC;
	--pv-teal-soft: #5cc9c9;
	--pv-ink: #24244d;
	--pv-navy: #0b1533;
	--pv-body: #6a6a80;
	--pv-mint: #e6f5ef;
	--pv-sky: #e4f0fb;
	--pv-pale: #eef4fb;
	--pv-green: #0f6b56;
	--pv-green-2: #0b5344;
	font-family: var(--bettrai-font);
	color: var(--pv-ink);
	background: #fff;
	overflow-x: hidden;
}

.bettrai-providers-page img { max-width: 100%; display: block; }

.bettrai-providers-admin__media,
.bettrai-providers-connected__grid,
.bettrai-providers-insight__ui,
.bettrai-providers-platform__media,
.bettrai-providers-perf__outreach,
.bettrai-providers-cta__media { min-width: 0; }

/* Shared heading */
.bettrai-providers-h2 {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: rgb(72, 72, 104);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0;
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.bettrai-providers-h2 span { color: var(--pv-teal); }
.bettrai-providers-h2--center { text-align: center; }
.bettrai-providers-h2--light { color: #fff; }
.bettrai-providers-h2--light span { color: var(--pv-teal-soft); }

.bettrai-providers-eyebrow {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Square outline arrow button */
.bettrai-providers-square {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: var(--bettrai-radius-md);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff; background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease;
	flex: none;
}
.bettrai-providers-square svg,
.bettrai-providers-square img { width: 20px; height: 20px; }
.bettrai-providers-square i { font-size: 18px; }
.bettrai-providers-square:hover { background: #fff; color: var(--pv-navy); }
.bettrai-providers-square--light { border: 0; color: var(--pv-teal); background: #fff; }
.bettrai-providers-square--light:hover { background: var(--pv-teal); color: #fff; }
.bettrai-providers-square--onblue { background: #fff; color: var(--pv-teal); border-color: #fff; }
.bettrai-providers-square--onblue:hover { background: var(--pv-teal); color: #fff; }

/* Light-outline (stroke) button used on the dark teal insight card.
   Unscoped from .bettrai-providers-page so it also styles the live
   Elementor-rendered widget, which has no such wrapper ancestor. */
.bettrai-btn--outline-light {
	background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.7);
}
.bettrai-btn--outline-light .bettrai-btn__label {
	font-family: var(--bettrai-font);
	font-weight: 600;
	font-size: 16px;
	line-height: 16px;
	color: #fff;
}
.bettrai-btn--outline-light:hover { background: var(--bettrai-teal-hover); border-color: var(--bettrai-teal-hover); }
.bettrai-btn--outline-light:hover .bettrai-btn__label { color: #fff; }

.bettrai-providers-dot {
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--pv-teal); display: inline-block; flex: none;
}
.bettrai-providers-dot--amber { background: #0A34DC; }

/* ------------------------------- HEADER -------------------------------- */
.bettrai-providers-page .bettrai-hero__header { background: rgba(255,255,255,0.10); }

/* ------------------------------- HERO ---------------------------------- */
.bettrai-providers-hero {
	position: relative; background-size: cover; background-position: center;
	color: #fff; overflow: hidden; isolation: isolate;
}
.bettrai-providers-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(110deg, rgba(9, 46, 54, 0.9) 0%, rgba(12, 58, 64, 0.68) 46%, rgba(12, 58, 64, 0.30) 100%),
		linear-gradient(0deg, rgba(7, 30, 36, 0.5), rgba(7, 30, 36, 0.12));
}
.bettrai-providers-hero__inner {
	min-height: 660px; display: flex; align-items: center;
	padding-top: 150px; padding-bottom: 96px;
}
.bettrai-providers-hero__copy { max-width: 640px; }
.bettrai-providers-hero__title {
	font-family: var(--bettrai-font-heading); font-weight: 700;
	font-size: clamp(2.3rem, 4.6vw, 3.8rem);
	line-height: 1.06; letter-spacing: -0.015em; margin: 22px 0 20px;
}
.bettrai-providers-hero__lead {
	font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.9);
	max-width: 560px; margin: 0 0 32px;
}
.bettrai-providers-hero__actions { display: flex; align-items: center; gap: 14px; }

/* ------------------------- ADMINISTRATIVE WORK ------------------------- */
.bettrai-providers-admin {
	background: linear-gradient(180deg, #eef5fb 0%, #f6fafd 100%);
	padding: clamp(56px, 7vw, 96px) 0;
}
.bettrai-providers-admin__inner {
	display: grid; grid-template-columns: 1.12fr 1fr; gap: 30px; align-items: stretch;
}
.bettrai-providers-admin__intro {
	font-family: var(--bettrai-font); font-weight: 400;
	font-size: 17px; line-height: 30px; color: rgb(141, 141, 154);
	margin: 16px 0 30px; max-width: none;
}
.bettrai-providers-admin__row {
	display: flex; gap: 22px; align-items: flex-start;
	background: #fff; border-radius: 16px; padding: 26px 26px; margin-bottom: 22px;
	box-shadow: var(--bettrai-shadow-soft);
}
.bettrai-providers-admin__row:last-child { margin-bottom: 0; }
.bettrai-providers-admin__ic {
	width: 80px; height: 80px; border-radius: 50%; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--pv-mint);
}
.bettrai-providers-admin__ic--mint { background: var(--pv-mint); }
.bettrai-providers-admin__ic--sky { background: var(--pv-sky); }
.bettrai-providers-admin__ic svg { width: 38px; height: 38px; }
.bettrai-providers-admin__ic img { width: 38px; height: 38px; object-fit: contain; }
.bettrai-providers-admin__ic i { font-size: 32px; color: #23304A; }
.bettrai-providers-admin__rowtxt h3 {
	font-family: var(--bettrai-font-heading); font-weight: 500;
	font-size: 20px; line-height: 24px; color: rgb(7, 18, 74); margin: 0 0 14px;
}
.bettrai-providers-admin__rowtxt p {
	font-family: var(--bettrai-font); font-weight: 400;
	font-size: 16px; line-height: 26px; color: rgb(141, 141, 154); margin: 0;
}
.bettrai-providers-admin__media {
	position: relative; height: 100%; align-self: stretch;
	background: linear-gradient(150deg, #2fb0ac 0%, #2f96b0 46%, #3f89b3 100%);
	border-radius: 24px; overflow: hidden; isolation: isolate;
	display: flex; align-items: flex-end; justify-content: center;
	min-height: 380px;
}
.bettrai-providers-admin__doctors {
	position: absolute; inset: 0; z-index: 2;
	width: 100%; height: 100%; object-fit: cover; object-position: center bottom;
}

/* -- Animated background inspired by the Figma teal-blob artwork ---------- */
.bettrai-providers-blobs {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; border-radius: inherit;
	pointer-events: none;
}
.bettrai-providers-blobs-img {
	position: absolute; inset: 0; z-index: 1;
	width: 100%; height: 100%; border-radius: inherit;
	object-fit: cover;
	pointer-events: none;
}
/* Floating circle clusters (translate in SVG user units) */
.bettrai-providers-blobs__g {
	will-change: transform;
	animation: bettrai-blob-float-a 22s ease-in-out infinite;
}
.bettrai-providers-blobs__g--a { animation-name: bettrai-blob-float-a; animation-duration: 22s; }
.bettrai-providers-blobs__g--b { animation-name: bettrai-blob-float-b; animation-duration: 26s; animation-delay: -6s; }
.bettrai-providers-blobs__g--c { animation-name: bettrai-blob-float-c; animation-duration: 19s; animation-delay: -10s; }
/* Flowing lines draw themselves in */
.bettrai-providers-blobs__line {
	stroke-dasharray: 900; stroke-dashoffset: 900;
	animation: bettrai-blob-draw 6s ease-out forwards;
}
.bettrai-providers-blobs__line--2 { animation-delay: 0.5s; }
.bettrai-providers-blobs__line--3 { animation-delay: 1s; }
/* Node dots pop, then pulse */
.bettrai-providers-blobs__dot {
	opacity: 0; transform-box: fill-box; transform-origin: center;
	animation: bettrai-blob-pop 0.6s ease-out forwards, bettrai-blob-pulse 4s ease-in-out infinite;
}
.bettrai-providers-blobs__dot--a { animation-delay: 2.4s, 3s; }
.bettrai-providers-blobs__dot--b { animation-delay: 3.6s, 4.2s; }
.bettrai-providers-blobs__dot--c { animation-delay: 4.4s, 5s; }
.bettrai-providers-blobs__dot--d { animation-delay: 5s, 5.6s; }

@keyframes bettrai-blob-float-a {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(26px, -30px); }
}
@keyframes bettrai-blob-float-b {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(-28px, 22px); }
}
@keyframes bettrai-blob-float-c {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(22px, 28px); }
}
@keyframes bettrai-blob-draw {
	to { stroke-dashoffset: 0; }
}
@keyframes bettrai-blob-pop {
	from { opacity: 0; transform: scale(0.2); }
	to   { opacity: 1; transform: scale(1); }
}
@keyframes bettrai-blob-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-blobs__g,
	.bettrai-providers-blobs__line,
	.bettrai-providers-blobs__dot { animation: none; }
	.bettrai-providers-blobs__line { stroke-dashoffset: 0; }
	.bettrai-providers-blobs__dot { opacity: 1; }
}

/* -------------------- DARK GREEN CONNECTED CARE ------------------------ */
.bettrai-providers-connected {
	background: linear-gradient(135deg, #008A8F 0%, #0D434A 100%);
	padding: clamp(64px, 6vw, 96px) 0 0; color: #fff; overflow: hidden;
	position: relative;
}
.bettrai-providers-connected::before,
.bettrai-providers-connected::after {
	content: ""; position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
}
.bettrai-providers-connected::before {
	left: 8%; bottom: -34%; width: 38%; padding-top: 38%;
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.02) 60%, transparent 72%);
	animation: bettrai-shape-float-a 14s ease-in-out infinite;
}
.bettrai-providers-connected::after {
	left: 20%; bottom: -24%; width: 24%; padding-top: 24%;
	background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 55%, transparent 70%);
	animation: bettrai-shape-float-b 11s ease-in-out infinite;
}
@keyframes bettrai-shape-float-a {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(10px, -8px) scale(1.03); }
}
@keyframes bettrai-shape-float-b {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(-8px, 6px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-connected::before,
	.bettrai-providers-connected::after { animation: none; }
}
.bettrai-providers-connected__inner { position: relative; z-index: 1; }
.bettrai-providers-connected__inner {
	display: grid; grid-template-columns: 0.98fr 1px 1fr; column-gap: 28px; align-items: stretch;
}
.bettrai-providers-connected__divider { background: rgba(255,255,255,0.08); width: 1px; height: calc(100% + clamp(120px, 10vw, 160px)); margin-top: clamp(-160px, -10vw, -120px); }
.bettrai-providers-connected__left { display: flex; flex-direction: column; }
.bettrai-providers-connected .bettrai-providers-h2--light span { color: #8FE9DC; }
.bettrai-providers-connected__lead { font-family: var(--bettrai-font); color: rgba(255,255,255,0.8); line-height: 1.7; margin: 20px 0 0; max-width: 620px; font-size: 18px; }
.bettrai-providers-connected__figure { position: relative; margin-top: 58px; width: 100%; flex: 1; display: flex; justify-content: center; align-items: flex-end; }
.bettrai-providers-connected__rings {
	position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
	width: 420px; height: 420px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.10) 0 1px, transparent 1px) 0 0 / 30px 30px;
	-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 70%);
	mask-image: radial-gradient(circle, #000 55%, transparent 70%);
	opacity: 0.55;
}
.bettrai-providers-connected__sophie { position: relative; z-index: 1; max-height: 550px; width: auto; }
.bettrai-providers-connected__chip {
	position: absolute; z-index: 2;
	display: inline-flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 999px; padding: 8px 18px 8px 8px;
	font-family: var(--bettrai-font-heading); font-size: 0.95rem; font-weight: 700; color: var(--pv-ink);
	box-shadow: var(--bettrai-shadow-card);
}
.bettrai-providers-connected__chip-icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 28px; height: 28px; border-radius: 50%; background: var(--pv-teal);
}
.bettrai-providers-connected__chip-icon svg,
.bettrai-providers-connected__chip-icon img { width: 15px; height: 15px; }
.bettrai-providers-connected__chip-icon i { font-size: 13px; color: #fff; }
.bettrai-providers-connected__chip--a { top: 44%; left: 14%; animation: bettrai-chip-float 4.5s ease-in-out infinite; }
@keyframes bettrai-chip-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-connected__chip--a { animation: none; }
}
.bettrai-providers-connected__chip--b { top: 70%; right: calc(10% + 20px); }
.bettrai-providers-connected__grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: min-content; gap: 22px; align-items: stretch; align-self: start; }
.bettrai-providers-ccard {
	background: #E3FFFF; border-radius: 18px; padding: 34px 28px 46px; height: 350px;
	display: flex; flex-direction: column; justify-content: center;
}
.bettrai-providers-ccard__ic { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--pv-teal); margin-bottom: 20px; }
.bettrai-providers-ccard__ic svg,
.bettrai-providers-ccard__ic img { width: 100%; height: 100%; }
.bettrai-providers-ccard__ic i { font-size: 28px; }
.bettrai-providers-ccard h3 { font-family: var(--bettrai-font-heading); font-size: 20px; font-weight: 500; line-height: 24px; color: rgb(7, 18, 74); margin: 0 0 10px; max-width: 230px; min-height: 48px; }
.bettrai-providers-ccard p { font-family: var(--bettrai-font); font-weight: 400; font-size: 16px; line-height: 26px; color: rgb(141, 141, 154); margin: 0; }
.bettrai-providers-ccard--blue,
.bettrai-providers-ccard--green,
.bettrai-providers-ccard--teal,
.bettrai-providers-ccard--mint { background: #E3FFFF; }

/* -------------------------- PATIENT DATA ------------------------------- */
.bettrai-providers-data { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-providers-data__head { text-align: center; max-width: 760px; margin: 0 auto 46px; }
.bettrai-providers-data__head p {
	font-family: var(--bettrai-font); font-weight: 400;
	font-size: 18px; line-height: 30px; color: rgb(141, 141, 154); margin: 18px 0 0;
	text-wrap: balance;
}
/* Horizontal accordion: one panel expanded, hover a panel to expand it */
.bettrai-providers-data__grid { display: flex; gap: 20px; }
.bettrai-providers-dcard {
	position: relative; border-radius: 18px; overflow: hidden; min-height: 480px;
	flex: 1 1 0%; min-width: 0;
	transition: flex-grow 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.bettrai-providers-dcard img,
.bettrai-providers-dcard video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; }
.bettrai-providers-dcard::after {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: linear-gradient(180deg, rgba(11,32,40,0) 38%, rgba(11,32,40,0.86) 100%);
	opacity: 0; transition: opacity 0.5s ease;
}
.bettrai-providers-dcard__body {
	position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
	padding: 22px; color: #fff;
}
/* Collapsed state = pill label, text hidden */
.bettrai-providers-dcard__body h3 {
	font-family: var(--bettrai-font-heading);
	font-size: 0.98rem; font-weight: 600; margin: 0;
	padding: 14px 20px; border-radius: 12px; text-align: center;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	transition: color 0.3s ease, padding 0.3s ease;
}
.bettrai-providers-dcard--dark .bettrai-providers-dcard__body h3 { background: rgba(11,32,40,0.62); color: #fff; }
.bettrai-providers-dcard--teal .bettrai-providers-dcard__body h3 { background: var(--pv-teal); color: #fff; }
.bettrai-providers-dcard--light .bettrai-providers-dcard__body h3 { background: rgba(255,255,255,0.92); color: var(--pv-ink); }
.bettrai-providers-dcard__body p {
	font-size: 0.9rem; line-height: 1.6; margin: 0; color: rgba(255,255,255,0.9);
	opacity: 0; max-height: 0; overflow: hidden;
	transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.4s ease;
}

/* Expanded state: default active panel, or the panel being hovered */
.bettrai-providers-data__grid:not(:hover) .bettrai-providers-dcard.is-active,
.bettrai-providers-data__grid:hover .bettrai-providers-dcard:hover { flex-grow: 2; }

.bettrai-providers-data__grid:not(:hover) .bettrai-providers-dcard.is-active::after,
.bettrai-providers-data__grid:hover .bettrai-providers-dcard:hover::after { opacity: 1; }

.bettrai-providers-data__grid:not(:hover) .bettrai-providers-dcard.is-active .bettrai-providers-dcard__body h3,
.bettrai-providers-data__grid:hover .bettrai-providers-dcard:hover .bettrai-providers-dcard__body h3 {
	background: transparent !important; color: #fff; padding: 0; text-align: left;
	font-size: 1.2rem; font-weight: 700; margin: 0 0 10px; white-space: normal;
}
.bettrai-providers-data__grid:not(:hover) .bettrai-providers-dcard.is-active .bettrai-providers-dcard__body p,
.bettrai-providers-data__grid:hover .bettrai-providers-dcard:hover .bettrai-providers-dcard__body p {
	font-family: var(--bettrai-font); font-size: 15px;
	opacity: 1; max-height: 220px;
	text-wrap: balance;
}

/* Insight teal CTA card */
.bettrai-providers-insight {
	margin-top: 34px;
	background: linear-gradient(135deg, #008A8F 0%, #0D434A 100%);
	border-radius: 26px; padding: clamp(52px, 6vw, 88px) clamp(34px, 4vw, 60px);
	display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
	color: #fff; overflow: hidden; position: relative;
}
.bettrai-providers-insight__copy .bettrai-providers-h2 {
	margin-bottom: 18px;
	font-weight: 650;
	font-size: 39px;
	line-height: 50px;
}
.bettrai-providers-insight__copy p { color: rgba(255,255,255,0.82); font-family: var(--bettrai-font); font-size: 18px; line-height: 1.7; margin: 0 0 26px; max-width: 540px; text-wrap: balance; }
.bettrai-providers-insight__ui { position: relative; }
.bettrai-providers-insight__art { position: relative; z-index: 1; display: block; width: 100%; height: auto; margin-left: auto; }

/* Overlapping circle-shape composition behind the card (crisp, animated) */
.bettrai-providers-insight__glow { position: absolute; inset: -20% -10% -20% -14%; z-index: 0; pointer-events: none; }
.bettrai-providers-insight__glow i {
	position: absolute; border-radius: 50%; aspect-ratio: 1 / 1;
	animation: bettrai-insight-glow 16s ease-in-out infinite;
}
/* Filled translucent discs */
.bettrai-providers-insight__glow i:nth-child(1) { width: 54%; top: 4%;  left: 2%;   background: rgba(143,233,220,0.22); animation-duration: 9s; }
.bettrai-providers-insight__glow i:nth-child(2) { width: 40%; bottom: 2%; left: 26%; background: rgba(255,255,255,0.14);  animation-duration: 11s; animation-delay: -5s; }
/* Ring outlines */
.bettrai-providers-insight__glow i:nth-child(3) { width: 62%; top: 8%; right: -8%; border: 1.5px solid rgba(143,233,220,0.26); animation-duration: 10s; animation-delay: -8s; }
.bettrai-providers-insight__glow i:nth-child(4) { width: 30%; top: -4%; right: 30%; border: 1.5px solid rgba(255,255,255,0.22); animation-duration: 8s; animation-delay: -2s; }

@keyframes bettrai-insight-glow {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(6%, -9%, 0) scale(1.14); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-insight__glow i { animation: none; }
}
.bettrai-providers-insight__card {
	position: relative; z-index: 1; background: #fff; border-radius: 16px;
	padding: 20px 22px; max-width: 340px; margin-left: auto;
	box-shadow: 0 24px 60px rgba(4, 20, 24, 0.4); color: var(--pv-ink);
}
.bettrai-providers-insight__eyebrow { display: flex; align-items: center; justify-content: space-between; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: var(--pv-teal); margin-bottom: 14px; }
.bettrai-providers-insight__eyebrow b { color: #b7c0cc; font-weight: 400; }
.bettrai-providers-insight__pt { display: flex; align-items: center; gap: 12px; }
.bettrai-providers-insight__ava { width: 40px; height: 40px; border-radius: 50%; background: #d8efe6; color: var(--pv-green); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem; flex: none; }
.bettrai-providers-insight__pt b { display: block; font-size: 0.98rem; color: var(--pv-ink); }
.bettrai-providers-insight__pt em { font-style: normal; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.04em; color: #0A34DC; background: #e4f0fb; border-radius: 999px; padding: 2px 8px; display: inline-block; margin-top: 3px; }
.bettrai-providers-insight__meta { display: block; font-size: 0.68rem; color: #9aa3b0; margin: 14px 0; padding-bottom: 12px; border-bottom: 1px solid #eef1f5; }
.bettrai-providers-insight__plan { display: flex; align-items: center; gap: 12px; background: #eef8f3; border-radius: 12px; padding: 12px 14px; }
.bettrai-providers-insight__check { width: 26px; height: 26px; border-radius: 50%; background: var(--pv-teal); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.72rem; flex: none; }
.bettrai-providers-insight__plan b { display: block; font-size: 0.82rem; color: var(--pv-ink); }
.bettrai-providers-insight__plan i { font-style: normal; font-size: 0.66rem; color: var(--pv-body); }
.bettrai-providers-insight__plan div { flex: 1; }
.bettrai-providers-insight__planic { color: var(--pv-teal); }
.bettrai-providers-insight__tag {
	position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
	background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 0.7rem; font-weight: 600; color: var(--pv-ink);
	box-shadow: var(--bettrai-shadow-card); white-space: nowrap;
}
.bettrai-providers-insight__tag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bettrai-providers-insight__tag--a { top: 0; right: 4%; }
.bettrai-providers-insight__tag--b { bottom: 6%; right: 12%; }
@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-insight__tag--a,
	.bettrai-providers-insight__tag--b { animation: none; }
}

/* --------------------- BETWEEN VISITS BAND ----------------------------- */
.bettrai-providers-band {
	position: relative; background-size: cover; background-position: center;
	color: #fff; overflow: hidden; isolation: isolate;
}
.bettrai-providers-band__overlay {
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(100deg, rgba(9, 34, 42, 0.72) 0%, rgba(11, 44, 52, 0.5) 46%, rgba(11, 44, 52, 0.2) 100%);
}
.bettrai-providers-band__inner { min-height: 460px; display: flex; flex-direction: column; justify-content: center; padding: 90px 0; }
.bettrai-providers-band__title { font-family: var(--bettrai-font-heading); font-weight: 700; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.08; margin: 0 0 20px; }
.bettrai-providers-band__inner p { color: rgba(255,255,255,0.9); line-height: 1.65; max-width: 480px; margin: 0 0 30px; }
.bettrai-providers-band__actions { display: flex; align-items: center; gap: 14px; }

/* --------------------- CONNECTED CARE (TABS) --------------------------- */
.bettrai-providers-serve { background: var(--pv-pale); padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-providers-serve__head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.bettrai-providers-serve__head .bettrai-providers-h2,
.bettrai-providers-serve__head h1,
.bettrai-providers-serve__head h2 { line-height: 1.18; color: rgb(72, 72, 104); }
.bettrai-providers-serve__head p { color: #8D8D9A; font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; margin: 22px 0 0; }
.bettrai-providers-serve__panel {
	background: #DEF4F0; border-radius: 26px; padding: clamp(38px, 4vw, 64px);
	display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center;
}
/* Doubled selectors: Hello Elementor's reset.css styles [type=button] (pink
   chip, inline-block, nowrap) at class-level specificity and loads after this
   file, so single-class rules on these <button>s lose to it. */
.bettrai-providers-serve__tabs { background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--bettrai-shadow-soft); }
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab {
	display: block; width: 100%; text-align: left;
	font-family: var(--bettrai-font-heading); font-size: 20px; line-height: 24px; font-weight: 500; color: #07124A;
	background: transparent; border: 0; border-radius: 10px; padding: 26px 22px; cursor: pointer;
	border-bottom: 1px solid #eef1f4; white-space: normal;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab:hover,
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab:focus {
	background: transparent; color: var(--pv-teal); text-decoration: none;
}
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab:last-child { border-bottom: 0; }
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab.is-active,
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab.is-active:hover,
.bettrai-providers-serve__tabs .bettrai-providers-serve__tab.is-active:focus {
	background: var(--pv-green); color: #fff; font-weight: 600; border-bottom-color: transparent;
}
.bettrai-providers-serve__pane[hidden] { display: none !important; }
.bettrai-providers-serve__pane.is-active { animation: bettrai-serve-fade 0.25s ease; }
@keyframes bettrai-serve-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bettrai-providers-serve__content h3 { font-family: var(--bettrai-font-heading); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 700; color: rgb(72, 72, 104); margin: 0 0 24px; }
.bettrai-providers-serve__content p { color: #8D8D9A; font-family: var(--bettrai-font); font-weight: 400; line-height: 33px; margin: 0 0 18px; font-size: 18px; max-width: 640px; }
.bettrai-providers-serve__actions { display: flex; align-items: center; gap: 10px; margin-top: 38px; }
/* Match the home hero split-button: 52px-tall green label + 52px white arrow, both 12px radius, aligned. */
.bettrai-providers-serve__actions .bettrai-btn--primary { min-height: 52px; padding: 0 32px; border-radius: var(--bettrai-radius-md); }
.bettrai-providers-serve__actions .bettrai-providers-square { width: 52px; height: 52px; border-radius: var(--bettrai-radius-md); }
/* No hover state on the white arrow square in this section. */
.bettrai-providers-serve__actions .bettrai-providers-square:hover { background: #fff; color: var(--pv-teal); }

/* ------------------- EXISTING WORKFLOW (DARK NAVY) --------------------- */
.bettrai-providers-workflow {
	background: linear-gradient(180deg, #0b1533 0%, #101d47 50%, #0b1533 100%);
	padding: clamp(70px, 8vw, 118px) 0 clamp(82px, 9vw, 132px); color: #fff; position: relative; overflow: hidden;
}
.bettrai-providers-workflow__head { text-align: center; max-width: 820px; margin: 0 auto clamp(46px, 5vw, 64px); }
.bettrai-providers-workflow__head .bettrai-providers-h2 { font-size: 48px; }
.bettrai-providers-workflow__head p { font-family: var(--bettrai-font); color: rgba(255,255,255,0.72); line-height: 1.7; margin: 16px 0 0; text-wrap: balance; }
.bettrai-providers-wpanel {
	position: relative; z-index: 1;
	background: linear-gradient(180deg, #eaf3fb 0%, #dcecf7 100%);
	border: 6px solid #cdeef7; border-radius: 12px; overflow: hidden;
	box-shadow:
		0 42px 110px rgba(48, 56, 255, 0.42),
		0 22px 70px rgba(75, 196, 197, 0.16),
		0 30px 80px rgba(4, 10, 30, 0.44);
	max-width: 1468px; margin: 0 auto;
}
.bettrai-providers-wpanel__tabs {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	background: #fff; border-bottom: 1px solid rgba(7,18,74,0.07); padding: 8px;
	border-radius: 6px 6px 0 0; overflow: hidden;
}
.bettrai-providers-wpanel__tabs button {
	min-width: 0; min-height: 54px; margin: 0; font-family: inherit; font-size: 0.9rem; font-weight: 700;
	color: var(--pv-ink) !important; background: transparent !important; border: 0; border-radius: 9px;
	box-shadow: none !important; padding: 0 18px; cursor: pointer;
}
.bettrai-providers-wpanel__tabs button:hover,
.bettrai-providers-wpanel__tabs button:focus { color: #64C5C5 !important; background: transparent !important; }
.bettrai-providers-wpanel__tabs button.is-active,
.bettrai-providers-wpanel__tabs button.is-active:hover,
.bettrai-providers-wpanel__tabs button.is-active:focus { background: #0F5550 !important; color: #fff !important; }
.bettrai-providers-wpanel__body {
	position: relative;
	min-height: clamp(560px, 40vw, 680px);
	border-radius: 0 0 6px 6px;
}
/* Each tab is a fully stacked pane (copy + graphic together) that crossfades
   in place; every pane shares the panel's min-height so switching tabs never
   changes the section height. */
.bettrai-providers-wpanel__pane {
	position: absolute; inset: 0;
	display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 3vw, 48px); align-items: center;
	padding: clamp(44px, 5vw, 72px) clamp(44px, 5vw, 72px) clamp(52px, 6vw, 82px);
	opacity: 0; transform: translateY(10px);
	transition: opacity 0.32s ease, transform 0.32s ease;
	pointer-events: none;
}
.bettrai-providers-wpanel__pane.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.bettrai-providers-wpanel__copy h3 { font-family: var(--bettrai-font-heading); font-size: 48px; font-weight: 650; color: rgb(72, 72, 104); margin: 0 0 22px; line-height: 1.15; text-wrap: balance; }
.bettrai-providers-wpanel__copy h3 span { color: var(--pv-teal); }
.bettrai-providers-wpanel__copy p { font-family: var(--bettrai-font); font-weight: 400; color: rgb(141, 141, 154); line-height: 30px; margin: 0 0 18px; font-size: 17px; max-width: 610px; }
.bettrai-providers-wpanel__copy p.bettrai-providers-wpanel__note { color: var(--pv-ink); font-weight: 400; margin: 4px 0 0; }
.bettrai-providers-wpanel__copy p.bettrai-providers-wpanel__note strong { font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-wpanel__pane { transition: none; transform: none; }
}

/* Radial care diagram — shared frame. All four tabs render the same custom
   live diagram inside .bettrai-providers-radial__canvas (no baked SVG). */
.bettrai-providers-radial {
	position: relative; min-height: 420px; align-self: stretch;
}
.bettrai-providers-radial::before {
	content: ""; position: absolute; left: 0;
	top: calc(28px - clamp(44px, 5vw, 72px)); bottom: calc(28px - clamp(52px, 6vw, 82px));
	width: 1px; background: rgba(7,18,74,0.08); pointer-events: none;
}
.bettrai-providers-radial--graphic { display: flex; align-items: center; justify-content: center; padding: 20px 0 20px 28px; }

/* Live diagram: fixed 628x601 canvas so every tab shares identical center
   position, orbit radii, node size, and connector geometry. */
.bettrai-providers-radial__canvas { position: relative; width: 100%; max-width: 460px; aspect-ratio: 628 / 601; margin: 0 auto; }
.bettrai-providers-radial__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* Dashed double orbit — rotates slowly (opposite directions) so the dashes
   drift around the hub like a galaxy. */
.bettrai-providers-radial__ring-svg {
	fill: none; stroke: #6FDDB6; stroke-opacity: 1; stroke-width: 1.8; stroke-dasharray: 2.4 8; stroke-linecap: round;
	transform-box: view-box; transform-origin: 314px 300px;
}
.bettrai-providers-radial__ring-svg--1 { animation: bettrai-radial-spin 90s linear infinite; }
.bettrai-providers-radial__ring-svg--2 { animation: bettrai-radial-spin-rev 64s linear infinite; }

/* Static base connector + a bright pulse that travels hub → node repeatedly. */
.bettrai-providers-radial__line-svg { fill: none; stroke: #6BE4D3; stroke-width: 1.6; }
.bettrai-providers-radial__line-pulse {
	fill: none; stroke: #29BCBC; stroke-width: 2.6; stroke-linecap: round;
	stroke-dasharray: 8 92; stroke-dashoffset: 100;
	animation: bettrai-radial-flow 2.4s linear infinite;
}

@keyframes bettrai-radial-spin { to { transform: rotate(360deg); } }
@keyframes bettrai-radial-spin-rev { to { transform: rotate(-360deg); } }
@keyframes bettrai-radial-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

.bettrai-providers-radial__center {
	position: absolute; top: 49.92%; left: 50%; transform: translate(-50%, -50%);
	width: 29.5%; aspect-ratio: 1 / 1; border-radius: 50%;
	background: linear-gradient(135deg, #1FC7B6 0%, #0F9C8E 100%); color: #fff;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	z-index: 3; box-shadow: 0 14px 28px rgba(15, 107, 86, 0.38);
}
.bettrai-providers-radial__center span { font-family: "Roboto Condensed", "Roboto", var(--bettrai-font); font-size: 14px; font-weight: 700; line-height: 1.1; }
/* Soft sonar halo pulsing out from the hub. */
.bettrai-providers-radial__center::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; z-index: -1;
	box-shadow: 0 0 0 0 rgba(31, 199, 182, 0.45);
	animation: bettrai-radial-halo 3s ease-out infinite;
}
@keyframes bettrai-radial-halo {
	0% { box-shadow: 0 0 0 0 rgba(31, 199, 182, 0.42); }
	70% { box-shadow: 0 0 0 24px rgba(31, 199, 182, 0); }
	100% { box-shadow: 0 0 0 0 rgba(31, 199, 182, 0); }
}

.bettrai-providers-radial__node {
	position: absolute; transform: translate(-50%, -50%);
	width: 24.5%; aspect-ratio: 1 / 1; border-radius: 50%; background: #fff; border: 1.4px solid #E3EFEC;
	display: flex; align-items: center; justify-content: center; text-align: center;
	box-shadow: var(--bettrai-shadow-card); z-index: 2; padding: 6%;
}
.bettrai-providers-radial__node span { font-family: "Roboto Condensed", "Roboto", var(--bettrai-font); font-size: 13px; font-weight: 600; color: var(--pv-ink); line-height: 1.25; }
.bettrai-providers-radial__trend { position: absolute; top: 9%; left: 50%; transform: translateX(-50%); line-height: 0; }
.bettrai-providers-radial__node--n1 { left: 50.00%; top: 14.14%; }
.bettrai-providers-radial__node--n2 { left: 82.64%; top: 38.77%; }
.bettrai-providers-radial__node--n3 { left: 70.06%; top: 78.87%; }
.bettrai-providers-radial__node--n4 { left: 29.94%; top: 78.87%; }
.bettrai-providers-radial__node--n5 { left: 17.36%; top: 38.77%; }

@media (prefers-reduced-motion: reduce) {
	.bettrai-providers-radial__ring-svg--1,
	.bettrai-providers-radial__ring-svg--2,
	.bettrai-providers-radial__line-pulse,
	.bettrai-providers-radial__center::after { animation: none; }
	.bettrai-providers-radial__line-pulse { display: none; }
}

/* ----------------- ONE PLATFORM FOR CONNECTED CARE --------------------- */
.bettrai-providers-platform { padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-providers-platform__head { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.bettrai-providers-platform__head .bettrai-providers-h2 { white-space: nowrap; }
.bettrai-providers-platform__head p { color: #8D8D9A; font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; margin: 16px auto 0; max-width: 560px; }
.bettrai-providers-platform__grid {
	display: grid; grid-template-columns: 1fr 1fr 0.92fr; grid-template-rows: auto auto; gap: 24px;
	align-items: stretch;
}
.bettrai-providers-pcard { border-radius: 18px; padding: 48px 40px; min-height: 310px; display: flex; flex-direction: column; }
.bettrai-providers-pcard--mint { background: var(--pv-mint); }
.bettrai-providers-pcard--sky { background: var(--pv-sky); }
.bettrai-providers-pcard__ic { display: inline-flex; align-items: center; height: 40px; width: auto; margin-bottom: auto; color: #23304A; }
.bettrai-providers-pcard__ic svg,
.bettrai-providers-pcard__ic img { height: 100%; width: auto; display: block; }
.bettrai-providers-pcard__ic i { font-size: 32px; }
.bettrai-providers-pcard h3 { font-family: var(--bettrai-font-heading); font-size: 20px; line-height: 24px; font-weight: 500; color: #07124A; margin: 0 0 12px; }
.bettrai-providers-pcard p { font-family: var(--bettrai-font); font-weight: 400; font-size: 17px; line-height: 26px; color: #757589; margin: 0; }
.bettrai-providers-platform__media { grid-column: 3; grid-row: 1 / -1; border-radius: 18px; overflow: hidden; position: relative; align-self: stretch; }
.bettrai-providers-platform__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------- PERFORMANCE ------------------------------- */
.bettrai-providers-perf { background: linear-gradient(180deg, #e9f2fb 0%, #f3f8fd 100%); padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-providers-perf__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; margin-bottom: 40px; }
.bettrai-providers-perf__head .bettrai-providers-h2 { font-size: 48px; }
@media (max-width: 767px) {
	/* Same fixed-48px-no-clamp issue as the FAQ heading above. */
	.bettrai-providers-perf__head .bettrai-providers-h2 {
		font-size: 28px;
	}
}

/* "Keeping Care Connected" (ProvidersServe) audience tabs, mobile only: the
   vertical tab list is replaced by a compact dropdown, same pattern used
   for the homepage's "Who We Work With" mobile dropdown. Options proxy a
   click to the real (hidden) tab button so all existing pane-swap
   interaction is reused verbatim - see initProvidersServeTabsMobile() in
   frontend.js. Desktop's tab list is completely untouched. */
.bettrai-providers-serve__tabs-mobile { display: none; }

@media (max-width: 1024px) {
	.bettrai-providers-serve__tabs { display: none; }

	.bettrai-providers-serve__tabs-mobile {
		display: block;
		position: relative;
		margin: 0;
	}

	button.bettrai-providers-serve__tabs-mobile-trigger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid rgba(41, 188, 188, 0.38);
		border-radius: var(--bettrai-radius-md);
		background: rgba(255, 255, 255, 0.95);
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	button.bettrai-providers-serve__tabs-mobile-trigger:hover,
	button.bettrai-providers-serve__tabs-mobile-trigger:focus {
		background: rgba(255, 255, 255, 0.95);
		color: inherit;
	}

	.bettrai-providers-serve__tabs-mobile-label {
		flex: 1 1 auto;
		color: rgb(7, 18, 74);
		font-size: 1rem;
		font-weight: 700;
	}

	.bettrai-providers-serve__tabs-mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--pv-teal, #29bcbc);
		border-bottom: 2px solid var(--pv-teal, #29bcbc);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}
	.bettrai-providers-serve__tabs-mobile.is-open .bettrai-providers-serve__tabs-mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-providers-serve__tabs-mobile-list {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.bettrai-providers-serve__tabs-mobile.is-open .bettrai-providers-serve__tabs-mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-providers-serve__tabs-mobile-list li {
		padding: 12px 14px;
		border-radius: 8px;
		color: #717184;
		font-size: 0.95rem;
		font-weight: 500;
		cursor: pointer;
	}
	.bettrai-providers-serve__tabs-mobile-list li.is-active {
		color: var(--pv-teal, #29bcbc);
		background: rgba(41, 188, 188, 0.12);
		font-weight: 700;
	}
}

/* Same fixed-48px-no-responsive-clamp issue, found sitewide across nearly
   every Payers/Providers section heading - each one massively oversized on
   phones, all fixed in one pass here instead of one at a time. */
@media (max-width: 767px) {
	.bettrai-payers-vbc__head .bettrai-payers-h2,
	.bettrai-payers-pop .bettrai-payers-h2,
	.bettrai-payers-coord__copy .bettrai-payers-h2,
	.bettrai-payers-platform__head .bettrai-payers-h2,
	.bettrai-payers-panel__copy h3,
	.bettrai-payers-interaction__copy .bettrai-payers-h2,
	.bettrai-payers-need__head .bettrai-payers-h2,
	.bettrai-payers-solutions__head .bettrai-payers-h2,
	.bettrai-payers-align__head .bettrai-payers-h2,
	.bettrai-payers-sophie__copy .bettrai-payers-h2,
	.bettrai-providers-workflow__head .bettrai-providers-h2,
	.bettrai-providers-wpanel__copy h3 {
		font-size: clamp(1.9rem, 8vw, 2.3rem) !important;
		line-height: 1.2 !important;
		white-space: normal !important;
	}
	.bettrai-providers-workflow__head { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
	.bettrai-providers-workflow__head .bettrai-providers-h2--center { text-align: left; }
	.bettrai-providers-wpanel__pane { padding: 32px 14px 24px; gap: 12px; }
	.bettrai-providers-workflow { padding-top: 44px; padding-bottom: 44px; }
}
.bettrai-providers-perf__head p { font-family: var(--bettrai-font); font-size: 17px; color: var(--pv-body); line-height: 1.7; margin: 0; text-align: right; text-wrap: balance; }
.bettrai-providers-perf__row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 26px; }
.bettrai-providers-perf__outreach { position: relative; border-radius: 20px; overflow: hidden; min-height: 440px; display: flex; align-items: flex-end; }
.bettrai-providers-perf__outreach img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bettrai-providers-perf__outreach::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,40,60,0.28) 0%, rgba(20,40,60,0) 22%, rgba(20,40,60,0) 40%, rgba(20,40,60,0.8) 100%); }
.bettrai-providers-perf__outreach-body { position: relative; z-index: 1; padding: 28px; color: #fff; }
.bettrai-providers-perf__outreach-body h3 { font-family: var(--bettrai-font-heading); font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; }
.bettrai-providers-perf__outreach-body p { font-family: var(--bettrai-font); font-weight: 400; font-size: 15px; line-height: 24px; margin: 0; color: rgba(255,255,255,0.9); max-width: 340px; }
.bettrai-providers-perf__impact { position: relative; border-radius: 20px; overflow: hidden; min-height: 440px; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: #fff; }
.bettrai-providers-perf__impact-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,18,48,0.15) 0%, rgba(13,18,48,0.2) 45%, rgba(13,18,48,0.88) 100%); }
.bettrai-providers-perf__badge { position: absolute; top: 24px; left: 24px; z-index: 2; display: inline-flex; align-items: center; line-height: 1; background: var(--pv-teal); color: #fff; font-family: var(--bettrai-font-heading); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; padding: 9px 16px; border-radius: 999px; }
.bettrai-providers-perf__impact-body { position: relative; z-index: 1; }
.bettrai-providers-perf__impact-body em { font-style: normal; display: block; font-size: 0.95rem; margin-bottom: 6px; color: rgba(255,255,255,0.92); }
.bettrai-providers-perf__impact-body b { display: block; font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; line-height: 1; margin-bottom: 8px; }
.bettrai-providers-perf__impact-body i { font-style: normal; font-size: 0.78rem; color: rgba(255,255,255,0.7); }

/* Green testimonial card */
.bettrai-providers-quote {
	position: relative; margin: 30px 0 0;
	background: linear-gradient(120deg, #0f6b56 0%, #0b5344 55%, #0a3f38 100%);
	border-radius: 24px; padding: clamp(40px, 5vw, 70px) clamp(30px, 6vw, 120px);
	text-align: center; color: #fff; overflow: hidden;
}
.bettrai-providers-quote__mark { display: block; font-family: var(--bettrai-font-heading); font-size: 3.4rem; line-height: 0.5; color: var(--pv-teal-soft); margin-bottom: 24px; }
.bettrai-providers-quote blockquote { margin: 0 0 28px; font-size: clamp(1.02rem, 1.7vw, 1.28rem); line-height: 1.6; color: rgba(255,255,255,0.94); }
.bettrai-providers-quote figcaption b { display: block; font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.bettrai-providers-quote figcaption span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pv-teal-soft); }

/* ------------------------------- FAQ ----------------------------------- */
.bettrai-providers-faq { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-providers-faq__head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.bettrai-providers-faq__head p { color: var(--pv-body); line-height: 1.7; margin: 16px 0 0; }
.bettrai-providers-faq__list { max-width: 900px; margin: 0 auto; }

/* ---------------------------- BOTTOM CTA ------------------------------- */
.bettrai-providers-cta { padding: 0 0 clamp(56px, 7vw, 100px); }
.bettrai-providers-cta__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: stretch; }
.bettrai-providers-cta__panel {
	position: relative;
	background: linear-gradient(120deg, #2340c8 0%, #2f6fd0 55%, #3aa9c9 100%);
	border-radius: 24px; padding: clamp(34px, 4vw, 60px); color: #fff;
	display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.bettrai-providers-cta__mark { position: absolute; top: 30px; right: 30px; width: 40px; opacity: 0.9; }
.bettrai-providers-cta__panel h2 { font-family: var(--bettrai-font-heading); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.08; margin: 0 0 16px; }
.bettrai-providers-cta__panel h2 span { color: rgba(255, 255, 255, 0.72); }
.bettrai-providers-cta__panel p { color: rgba(255, 255, 255, 0.9); line-height: 1.65; margin: 0 0 28px; max-width: 420px; }
.bettrai-providers-cta__actions { display: flex; align-items: center; gap: 12px; }
.bettrai-providers-cta__media { border-radius: 24px; overflow: hidden; }
.bettrai-providers-cta__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 1024px) {
	.bettrai-providers-serve__panel { grid-template-columns: 280px 1fr; gap: 30px; }
	/* Below the crossfade breakpoint, panes drop out of the absolute stack and
	   swap instantly in normal flow — content height varies naturally with no
	   risk of clipping wrapped copy, and text stacks above the graphic. */
	.bettrai-providers-wpanel__pane {
		position: static; display: none; grid-template-columns: 1fr;
		opacity: 1; transform: none; transition: none; pointer-events: auto;
	}
	.bettrai-providers-wpanel__pane.is-active { display: grid; }
	.bettrai-providers-radial { border-left: 0; border-top: 0; padding-top: 4px; }
	.bettrai-providers-radial::before { display: none; }
	.bettrai-providers-radial__center span { font-size: 10px; }
	.bettrai-providers-radial__node span { font-size: 10px; }
	.bettrai-providers-platform__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.bettrai-providers-platform__media { grid-column: 1 / span 2; grid-row: auto; min-height: 260px; }
}

@media (max-width: 1024px) {
	/* Tablet only: symmetric top/bottom padding so align-items:center
	   actually centers the copy block instead of the asymmetric
	   top-only padding pushing it toward the top. */
	.bettrai-providers-hero__inner { min-height: 560px; padding-top: 56px; padding-bottom: 56px; }
	.bettrai-providers-admin__inner,
	.bettrai-providers-connected__inner,
	.bettrai-providers-insight,
	.bettrai-providers-perf__head,
	.bettrai-providers-cta__grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.bettrai-providers-perf__head p { text-align: left; }
	.bettrai-providers-insight__copy .bettrai-providers-h2 { font-size: 29px; line-height: 38px; }
	.bettrai-providers-insight__glow { inset: 0 -10% 0 -14%; }
	.bettrai-providers-insight { padding-left: 22px; padding-right: 22px; }
	.bettrai-providers-serve__head { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
	.bettrai-providers-serve__head .bettrai-providers-h2--center { text-align: left; }
	.bettrai-providers-data__grid,
	.bettrai-providers-perf__row,
	.bettrai-providers-platform__grid { grid-template-columns: minmax(0, 1fr); }
	/* Fixed min-height:310px sized these cards for a 3-column desktop row;
	   once stacked to one column on phones, cards with less text (e.g.
	   "Streamline Workflows") were left with a large dead gap between the
	   icon and the copy below it. Let each card size to its own content. */
	.bettrai-providers-pcard { min-height: 0; padding: 40px 24px; }
	.bettrai-providers-pcard__ic { margin-bottom: 20px; }
	.bettrai-providers-connected__grid { grid-template-columns: minmax(0, 1fr); }
	/* Accordion stacks; every panel fully open on mobile */
	.bettrai-providers-data__grid { flex-direction: column; }
	.bettrai-providers-dcard { min-height: 340px; }
	.bettrai-providers-dcard::after { opacity: 1; }
	/* !important: Elementor's own "Collapsed Title Pill Background" style
	   controls emit .elementor-element-{id}-scoped CSS for the tone variants
	   (--dark/--teal/--light), which outranks this plain class selector and
	   otherwise keeps the colored pill background showing even though every
	   panel is meant to render "expanded" (transparent h3 background) on mobile. */
	.bettrai-providers-dcard .bettrai-providers-dcard__body h3 {
		background: transparent !important; color: #fff; padding: 0; text-align: left;
		font-size: 1.15rem; font-weight: 700; margin: 0 0 10px; white-space: normal;
	}
	.bettrai-providers-dcard__body p { opacity: 1; max-height: 220px; }
	.bettrai-providers-platform__media { grid-column: auto; }
	.bettrai-providers-serve__panel { grid-template-columns: minmax(0, 1fr); padding: clamp(38px, 4vw, 64px) 20px; gap: 16px; }
	.bettrai-providers-serve__actions { margin-top: 18px; }
	.bettrai-providers-cta__media { min-height: 260px; }
	.bettrai-providers-admin__media { min-height: 380px; }
}

/* "Built to Fit Into Your Existing Care Workflow" (ProvidersWorkflow) tabs,
   mobile only: replaced by a compact dropdown, same pattern as the
   ProvidersServe audience tabs above and the homepage's mobile dropdowns.
   (Previously this row of 4 buttons was squeezed into a 2x2 grid, but per
   request it now matches the dropdown treatment instead.) Options proxy a
   click to the real (hidden) tab button so all existing interaction is
   reused verbatim - see initProvidersWorkflowTabsMobile() in frontend.js.
   Desktop's tab row is completely untouched. */
.bettrai-providers-wpanel__tabs-mobile { display: none; }

@media (max-width: 1024px) {
	.bettrai-providers-wpanel__tabs { display: none; }

	.bettrai-providers-wpanel__tabs-mobile {
		display: block;
		position: relative;
		margin: 0;
		padding: 12px;
	}

	button.bettrai-providers-wpanel__tabs-mobile-trigger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid rgba(41, 188, 188, 0.38);
		border-radius: var(--bettrai-radius-md);
		background: #fff;
		box-shadow: none;
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	button.bettrai-providers-wpanel__tabs-mobile-trigger:hover,
	button.bettrai-providers-wpanel__tabs-mobile-trigger:focus {
		background: #fff;
		color: inherit;
	}

	.bettrai-providers-wpanel__tabs-mobile-label {
		flex: 1 1 auto;
		color: var(--pv-ink);
		font-size: 0.95rem;
		font-weight: 700;
	}

	.bettrai-providers-wpanel__tabs-mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--pv-teal, #29bcbc);
		border-bottom: 2px solid var(--pv-teal, #29bcbc);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}
	.bettrai-providers-wpanel__tabs-mobile.is-open .bettrai-providers-wpanel__tabs-mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-providers-wpanel__tabs-mobile-list {
		position: absolute;
		top: calc(100% + 4px);
		left: 12px;
		right: 12px;
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.bettrai-providers-wpanel__tabs-mobile.is-open .bettrai-providers-wpanel__tabs-mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-providers-wpanel__tabs-mobile-list li {
		padding: 12px 14px;
		border-radius: 8px;
		color: #717184;
		font-size: 0.95rem;
		font-weight: 500;
		cursor: pointer;
	}
	.bettrai-providers-wpanel__tabs-mobile-list li.is-active {
		color: var(--pv-teal, #29bcbc);
		background: rgba(41, 188, 188, 0.12);
		font-weight: 700;
	}
}

/* Providers section headings ("Connected Care Starts With / One Complete
   View.", "Keeping Care Connected / Every Step of the Way", etc.) are one
   sentence with a color change partway through, authored with a hard <br>
   for the desktop line break - same pattern fixed sitewide on the Sophie
   page. On phones that forced break reads as arbitrary; let it flow and
   wrap naturally instead. Desktop/tablet keep the authored break. */
@media (max-width: 767px) {
	/* Hero H1 (shared PageHero widget, used across Providers/Payers/Programs)
	   has no mobile override - the clamp's 2.3rem floor (~37px) is way
	   oversized on phones and overflows. Match the site's mobile H1 spec.
	   !important: PageHero registers its own Elementor Typography control
	   targeting this same class, which Elementor emits as an element+class
	   (or #elementor-element-{id}-scoped) selector — higher specificity than
	   this plain class, so it wins regardless of source order without this. */
	.bettrai-payers-hero__title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
	/* The shared tablet block above (@media max-width:1024px, unbounded) sets
	   these two card grids to 2 columns for tablet width — with no min-width
	   floor on that block, phones inherit the same 2-column rule and the
	   cards render squeezed side-by-side instead of stacked. Force back to a
	   single column here (same specificity, later source wins; !important
	   for safety against any Elementor-injected per-widget grid overrides). */
	.bettrai-payers-vbc__grid,
	.bettrai-payers-need__grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	/* ProgramsBetween's dark panel H1 ("Keep Every Care Program Moving...")
	   has a clamp(1.9rem, 2.9vw, 2.5rem) with no mobile override — the 1.9rem
	   (~30px) floor overflows the narrow panel. Match the site's 28px spec. */
	.bettrai-programs-behind__panel h1 {
		font-size: 28px !important;
		line-height: 1.3 !important;
	}
	/* Same unbounded-tablet-block issue as the grids above: the "tablet only"
	   @media(max-width:1024px) rule at .bettrai-about-collage has no
	   min-width floor, so phones inherit its 2-column (stat + card)
	   side-by-side layout instead of stacking. No true mobile override
	   existed for this one at all — add it here. */
	.bettrai-about-collage {
		grid-template-columns: minmax(0, 1fr) !important;
		grid-template-rows: none !important;
		min-height: 0 !important;
	}
	/* Same clamp-floor-overflow pattern as the other page hero H1s fixed
	   above: Contact/Resources hero + Resources intro titles have no mobile
	   override, so their clamp() floor (~37px/40px/33.6px) overflows narrow
	   screens. Match the site's 30px hero / 28px sub-heading mobile spec. */
	.bettrai-contact-hero__title,
	.bettrai-resources-hero__title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
	.bettrai-resources-intro__title {
		font-size: 28px !important;
		line-height: 1.3 !important;
	}
	/* LegalDoc (Terms of Service / Privacy Policy) H1 — same clamp-floor
	   overflow pattern, no mobile override existed. */
	.bettrai-legal__title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
	/* Section H2s (.bettrai-providers-h2 / .bettrai-payers-h2 share the same
	   clamp(1.8rem, 3.2vw, 2.7rem)) settle at ~28.8px on phones since the
	   clamp floor wins - pin to the exact 28px mobile heading spec. */
	.bettrai-providers-h2,
	.bettrai-payers-h2 {
		font-size: 28px;
	}
	.bettrai-providers-h2 br {
		display: none;
	}
	/* "One Platform for Connected Care." is forced to a single line
	   (white-space:nowrap, meant to keep it centered on one line on desktop)
	   which just overflows off the right edge of the viewport on phones
	   instead of wrapping. */
	.bettrai-providers-platform__head .bettrai-providers-h2 {
		white-space: normal;
	}
	.bettrai-providers-platform__head { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
	.bettrai-providers-platform__head .bettrai-providers-h2--center { text-align: left; }
	.bettrai-providers-platform__head p { margin-left: 0; margin-right: 0; max-width: none; }
}

/* ==========================================================================
   PROGRAMS LANDING PAGE  (.bettrai-programs-page)
   Scoped page built from Desktop/Programs.png reference. Reuses shared
   header/footer, buttons, FAQ, and card radius/token system.
   Teal accent = #29BCBC, navy ink = #24244d. Never affects other pages.
   ========================================================================== */

:root,
.bettrai-programs-page {
	--pg-teal: #29BCBC;
	--pg-teal-soft: #5cc9c9;
	--pg-ink: #24244d;
	--pg-navy: #0b1533;
	--pg-navy-2: #0a1230;
	--pg-body: #6a6a80;
	--pg-mint: #e6f5ef;
	--pg-sky: #e4f0fb;
	--pg-pale: #eef4fb;
	--pg-green: #0f6b56;
	--pg-green-2: #0b5344;
	font-family: var(--bettrai-font);
	color: var(--pg-ink);
	background: #fff;
	overflow-x: hidden;
}
.bettrai-programs-page img { max-width: 100%; display: block; }

/* Shared heading */
.bettrai-programs-h2 {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: #484868;
	line-height: 1.30;
	letter-spacing: -0.01em;
	margin: 0;
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.bettrai-programs-h2 span { color: var(--pg-teal); }
.bettrai-programs-intro__head .bettrai-programs-h2 { font-size: 48px; }
.bettrai-programs-faq__head .bettrai-programs-h2 { font-weight: 650; font-size: 48px; line-height: 1.3; }
.bettrai-programs-h2--center { text-align: center; }
.bettrai-programs-h2--light { color: #fff; }
.bettrai-programs-h2--light span { color: var(--pg-teal-soft); }

.bettrai-programs-eyebrow {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bettrai-programs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pg-teal); display: inline-block; flex: none; }

/* Square outline arrow button */
.bettrai-programs-square {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: var(--bettrai-radius-md);
	border: 0;
	color: var(--bettrai-btn-green); background: #fff;
	box-shadow: var(--bettrai-shadow-soft);
	transition: background-color 0.15s ease, color 0.15s ease;
	flex: none;
}
.bettrai-programs-square svg { width: 20px; height: 20px; }
.bettrai-programs-square:hover { background: var(--bettrai-teal-hover); color: #fff; }
.bettrai-programs-square--onblue { background: #fff; color: var(--pg-teal); border-color: #fff; }
.bettrai-programs-square--onblue:hover { background: var(--pg-teal); color: #fff; }

/* ------------------------------- HEADER -------------------------------- */
.bettrai-programs-page .bettrai-hero__header { background: rgba(255,255,255,0.10); }

/* ------------------------------- HERO ---------------------------------- */
.bettrai-programs-hero {
	position: relative; background-size: cover; background-position: center;
	color: #fff; overflow: hidden; isolation: isolate;
}
.bettrai-programs-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	/* Flat uniform darkening layer across the whole section (on top of the
	   directional gradient below) so the busy background photo never fights
	   with the white copy anywhere in the section, not just near the left
	   edge. Desktop and tablet both use this - only mobile's own hero rules
	   are untouched. */
	background:
		linear-gradient(rgba(6, 20, 26, 0.42), rgba(6, 20, 26, 0.42)),
		linear-gradient(110deg, rgba(9, 46, 54, 0.92) 0%, rgba(12, 58, 64, 0.7) 46%, rgba(12, 58, 64, 0.34) 100%),
		linear-gradient(0deg, rgba(7, 30, 36, 0.5), rgba(7, 30, 36, 0.12));
}
.bettrai-programs-hero__inner {
	min-height: 660px; display: flex; align-items: center;
	padding-top: 150px; padding-bottom: 96px;
}
.bettrai-programs-hero__copy { max-width: 640px; }
.bettrai-programs-hero__title {
	font-family: var(--bettrai-font-heading); font-weight: 700;
	font-size: clamp(2.3rem, 4.6vw, 3.8rem);
	line-height: 1.06; letter-spacing: -0.015em; margin: 22px 0 20px;
}
.bettrai-programs-hero__lead {
	font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.9);
	max-width: 560px; margin: 0 0 32px;
}
.bettrai-programs-hero__actions { display: flex; align-items: center; gap: 14px; }

/* -------------------------------- INTRO -------------------------------- */
.bettrai-programs-intro { padding: clamp(56px, 7vw, 100px) 0; background: linear-gradient(180deg, #ffffff 0%, #f7feff 42%); }
.bettrai-programs-intro__head { text-align: center; max-width: 720px; margin: 0 auto 46px; }
.bettrai-programs-intro__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 18px 0 0; }
.bettrai-programs-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
.bettrai-programs-icard {
	background: var(--pg-mint); border-radius: 22px; padding: 36px 36px 0;
	display: flex; flex-direction: column; overflow: hidden; min-height: 400px;
}
.bettrai-programs-intro__grid .bettrai-programs-icard:first-child { background: #D1EBF6; position: relative; }
/* Soft teal arc/hill behind the people, flush to the card's right edge (matches Figma). */
.bettrai-programs-intro__grid .bettrai-programs-icard:first-child::before {
	content: ""; position: absolute; right: 0; bottom: 0;
	width: 58%; height: 62%;
	background: rgba(100, 197, 197, 0.22);
	border-radius: 50% 50% 0 0 / 82% 82% 0 0;
	z-index: 0; pointer-events: none;
}
.bettrai-programs-icard__copy { padding-top: 34px; }
.bettrai-programs-icard__copy h3 { font-family: var(--bettrai-font-heading); font-size: 27px; font-weight: 700; color: var(--pg-ink); margin: 0 0 14px; }
.bettrai-programs-icard__copy p { color: #8D8D9A; font-family: var(--bettrai-font); font-weight: 400; line-height: 30px; margin: 0 0 26px; font-size: 18px; max-width: 440px; }
.bettrai-programs-icard__media { margin-top: auto; border-radius: 16px 16px 0 0; overflow: hidden; }
.bettrai-programs-icard__media img { width: 100%; height: 100%; object-fit: cover; }
/* First intro card: transparent cutout sits flush to the bottom edge, centered, a touch smaller. */
.bettrai-programs-intro__grid .bettrai-programs-icard:first-child .bettrai-programs-icard__media {
	position: relative; margin: 0; border-radius: 0; overflow: visible; text-align: center;
	/* When the sibling "Smarter Care Coordination" card's taller diagram
	   stretches this row (align-items: stretch on the grid), a fixed-height
	   image can't fill the extra stretched space, leaving a gap below it.
	   Make this wrapper fill all remaining vertical space in the flex
	   column and bottom-align the (uncropped, object-fit: contain) image
	   inside it, so the photo's people are never cropped but the image
	   still always reaches the card's bottom edge. */
	flex: 1 1 auto;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.bettrai-programs-intro__grid .bettrai-programs-icard:first-child .bettrai-programs-icard__media img {
	position: relative; z-index: 1;
	height: 100%; max-height: 380px; width: auto; max-width: 100%; object-fit: contain;
	display: block; margin: 0 auto;
}

/* Coordination network diagram (right intro card) */
.bettrai-programs-icard__diagram { position: relative; margin: 12px 0 0; display: flex; justify-content: center; align-items: flex-end; }
.bettrai-programs-icard__diagram img,
.bettrai-programs-icard__diagram svg { height: 428px; width: auto; max-width: 100%; display: block; }
.bettrai-programs-icard__diagram--mobile { display: none; }
.bettrai-programs-icard__diagram-img { position: relative; margin: 12px auto 0; display: block; height: 428px; width: auto; max-width: 100%; object-fit: contain; }
/* Animate the coordination graphic: every teal line/ring shimmers and flows (no scaling). */
.bettrai-programs-icard__diagram svg path[stroke="#16b3a3"] {
	stroke-dasharray: 6 8;
	animation: bettrai-dashflow 1.5s linear infinite;
}
@keyframes bettrai-dashflow { to { stroke-dashoffset: -28; } }
@media (prefers-reduced-motion: reduce) {
	.bettrai-programs-icard__diagram svg path[stroke="#16b3a3"] { animation: none; }
}
.bettrai-programs-net__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.bettrai-programs-net__core {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	z-index: 2; width: 76px; height: 76px; border-radius: 50%;
	background: var(--pg-teal); color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 0.72rem; font-weight: 700; box-shadow: 0 10px 24px rgba(41,188,188,0.35);
}
.bettrai-programs-net__node {
	position: absolute; width: 16px; height: 16px; border-radius: 50%;
	background: #fff; border: 3px solid var(--pg-teal-soft); z-index: 1;
}
.bettrai-programs-net__node--1 { top: 14%; left: 12%; }
.bettrai-programs-net__node--2 { top: 14%; right: 12%; }
.bettrai-programs-net__node--3 { top: 48%; left: 6%; }
.bettrai-programs-net__node--4 { top: 48%; right: 6%; }
.bettrai-programs-net__node--5 { bottom: 12%; left: 20%; }
.bettrai-programs-net__node--6 { bottom: 12%; right: 20%; }

/* ---------------------------- BEHIND SCENES ---------------------------- */
.bettrai-programs-behind { background: #ffffff; padding: clamp(56px, 6vw, 88px) 0; }
.bettrai-programs-behind__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.bettrai-programs-behind__head p { color: var(--pg-body); font-family: var(--bettrai-font); font-size: 17px; line-height: 28px; margin: 0 0 0 auto; max-width: 560px; }
.bettrai-programs-behind__grid {
	display: grid; grid-template-columns: 1.7fr 1fr; gap: clamp(32px, 3.5vw, 52px);
	align-items: stretch;
	background: linear-gradient(120deg, #008A8F 0%, #0D434A 100%);
	border-radius: 28px; padding: clamp(36px, 3.5vw, 48px);
}
.bettrai-programs-behind__panel {
	color: #fff;
	display: flex; flex-direction: column; justify-content: center;
}
.bettrai-programs-behind__panel h1 { font-family: var(--bettrai-font-heading); font-size: clamp(1.9rem, 2.9vw, 2.5rem); font-weight: 700; line-height: 1.18; margin: 0 0 18px; max-width: none; }
.bettrai-programs-behind__panel p { color: rgba(255,255,255,0.85); font-family: var(--bettrai-font); font-size: 18px; line-height: 30px; margin: 0 0 30px; max-width: 620px; }
.bettrai-programs-behind__panel .bettrai-btn { align-self: flex-start; }
.bettrai-programs-behind__media {
	border-radius: 16px; padding: 10px;
	border: 1px solid rgba(255,255,255,0.35);
}
.bettrai-programs-behind .bettrai-programs-behind__media img { display: block; width: 100%; height: clamp(360px, 26vw, 420px); object-fit: cover; object-position: center 28%; border-radius: 10px; }
.bettrai-programs-behind__panel .bettrai-btn--outline-light { border: 0; box-shadow: inset 0 0 0 1.5px #A4DEDE; }
.bettrai-programs-behind__panel .bettrai-btn--outline-light .bettrai-btn__label { color: #A4DEDE; }
.bettrai-programs-behind__panel .bettrai-btn--outline-light:hover { background: #A4DEDE; box-shadow: none; }
.bettrai-programs-behind__panel .bettrai-btn--outline-light:hover .bettrai-btn__label { color: #07124a; }

/* ---------------------------- BETWEEN VISITS --------------------------- */
.bettrai-programs-between { padding: clamp(56px, 7vw, 100px) 0; background: #EDFDFF; }
.bettrai-programs-between__list .bettrai-sophie-continues__item.is-active { background: #DBEFF6; }
.bettrai-programs-between__head { text-align: center; max-width: 1000px; margin: 0 auto 46px; }
.bettrai-programs-between__head .bettrai-programs-h2,
.bettrai-programs-between__head .bettrai-programs-h2 span { color: #484868; white-space: nowrap; }
.bettrai-programs-between__break { display: none; }
.bettrai-programs-between__lead { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 18px auto 0; max-width: 900px; text-wrap: balance; }
.bettrai-programs-between__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.bettrai-programs-between__list .bettrai-faq__item { border-radius: 14px; }

/* "Unified Care Platform" wheel — self-contained Figma SVG. */
.bettrai-ucp-wheel {
	max-width: 540px; margin: 0 auto; width: 100%;
}
.bettrai-ucp-wheel svg { display: block; width: 100%; height: auto; }
.bettrai-pb-wheel-img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Continuously rotate the dashed inner ring. */
.bettrai-ucp-wheel svg path[stroke-dasharray] {
	transform-box: fill-box; transform-origin: center;
	animation: bettrai-ucp-spin 26s linear infinite;
}
@keyframes bettrai-ucp-spin { to { transform: rotate(360deg); } }
/* Gentle pulse when the accordion selection changes. */
.bettrai-ucp-wheel.is-pulse { animation: bettrai-ucp-pulse 0.5s ease; }
@keyframes bettrai-ucp-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.035); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
	.bettrai-ucp-wheel svg path[stroke-dasharray],
	.bettrai-ucp-wheel.is-pulse { animation: none; }
}

/* ------------------------- MODERN CARE BAND ---------------------------- */
/* Height/arrangement matched to .bettrai-sophie-connected (Providers CTA). */
.bettrai-programs-band {
	position: relative; background-size: cover; background-position: center;
	color: #fff; overflow: hidden; isolation: isolate;
	min-height: clamp(520px, 48vw, 680px);
	display: flex; align-items: center;
}
.bettrai-programs-band__overlay {
	position: absolute; inset: 0; z-index: -1;
	/* Flat uniform darkening layer across the whole section (on top of the
	   directional gradient) so the busy background photo never fights with
	   the white copy anywhere in the section, not just near the left edge.
	   Desktop and tablet both use this. */
	background:
		linear-gradient(rgba(6, 12, 30, 0.22), rgba(6, 12, 30, 0.22)),
		linear-gradient(90deg, rgba(8,16,40,0.2) 0%, rgba(8,16,40,0.06) 55%, rgba(8,16,40,0) 100%);
}
.bettrai-programs-band__inner { min-height: 0; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(120px, 14vw, 190px); }
.bettrai-programs-band__title { font-family: var(--bettrai-font-heading); font-weight: 650; font-size: clamp(3rem, 4.6vw, 68px); line-height: 1.08; max-width: 820px; margin: 0 0 32px; }
.bettrai-programs-band__inner p { font-family: var(--bettrai-font); color: rgba(255,255,255,0.85); font-size: 18px; line-height: 1.6; max-width: 600px; margin: 0 0 40px; }
.bettrai-programs-band__actions { display: flex; align-items: center; gap: 14px; }
.bettrai-programs-band .bettrai-btn--primary { min-height: 52px; padding: 0 30px; font-size: 0.95rem; border-radius: 10px; }
@media (max-width: 1024px) {
	/* "Programs Built for Modern Care" band, tablet only: dedicated crop
	   supplied for this width instead of the desktop image. */
	.bettrai-programs-band { background-image: url("../images/programs/band-tablet-v3.png") !important; }
}
@media (max-width: 767px) {
	/* "Programs Built for Modern Care" band, mobile only: dedicated crop
	   supplied for this width instead of the desktop image. */
	.bettrai-programs-band { background-image: url("../images/programs/band-mobile-v3.png") !important; }
}

/* ------------------------ PROGRAMS TOGETHER ---------------------------- */
.bettrai-programs-together { padding: clamp(56px, 7vw, 100px) 0; background: linear-gradient(180deg, #ffffff 0%, #EDFDFF 100%); }
.bettrai-programs-together__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin-bottom: 44px; }
.bettrai-programs-together__head .bettrai-programs-h2 { margin: 0; color: #484868; }
.bettrai-programs-together__intro { color: var(--pg-body); font-family: var(--bettrai-font); font-size: 17px; line-height: 28px; margin: 0 0 0 auto; max-width: 560px; text-align: right; }
.bettrai-programs-together__body { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.bettrai-programs-together__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bettrai-programs-tcard { border-radius: 20px; padding: 34px 32px 26px; display: flex; flex-direction: column; }
.bettrai-programs-tcard--green { background: #e7f3ee; }
.bettrai-programs-tcard--blue { background: #e3eef8; }
.bettrai-programs-tcard h3 { font-family: var(--bettrai-font-heading); font-size: 1.18rem; font-weight: 700; color: #484868; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid rgba(7,18,74,0.12); }
.bettrai-programs-tcard ul { list-style: none; margin: 0; padding: 0; }
.bettrai-programs-tcard li { font-family: var(--bettrai-font); font-size: 0.95rem; color: var(--pg-ink); padding: 16px 0; border-bottom: 1px solid rgba(7,18,74,0.10); }
.bettrai-programs-tcard li:last-child { border-bottom: 0; }
.bettrai-programs-together__media { position: relative; border-radius: 22px; }
.bettrai-programs-together .bettrai-programs-together__media img { display: block; width: 100%; height: 100%; min-height: 100%; object-fit: cover; border-radius: 22px; }
.bettrai-programs-together__stamp { position: absolute; right: 20px; bottom: 20px; width: clamp(92px, 8vw, 120px); height: clamp(92px, 8vw, 120px); z-index: 2; filter: drop-shadow(0 12px 26px rgba(7,18,74,0.28)); }
.bettrai-programs-together__stamp svg { width: 100%; height: 100%; }
.bettrai-programs-together__ring { transform-origin: 66px 66px; animation: bettrai-stamp-spin 18s linear infinite; }
.bettrai-programs-together__stamptext { fill: #fff; font-family: var(--bettrai-font-heading); font-size: 9.4px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
@keyframes bettrai-stamp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bettrai-programs-together__ring { animation: none; } }

/* --------------------------- SOPHIE JOURNEY ---------------------------- */
.bettrai-programs-journey { background: linear-gradient(180deg, #f2f9fb 0%, #eaf5f8 100%); padding: clamp(56px, 7vw, 100px) 0 0; overflow: hidden; }
.bettrai-programs-journey__head { text-align: center; max-width: 640px; margin: 0 auto 18px; }
.bettrai-programs-journey__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 16px 0 0; }

/* ---- Orbital stage: Sophie centered, six touchpoints around the circle ---- */
.bettrai-programs-journey__stage { position: relative; display: flex; justify-content: center; }
.bettrai-programs-journey__orbit {
	position: relative; width: 900px; height: 600px; margin: 0 auto;
	font-family: var(--bettrai-font);
}

/* Concentric rings — behind Sophie, uniting the composition. */
.bettrai-programs-journey__ring {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	border-radius: 50%; pointer-events: none; z-index: 0;
}
.bettrai-programs-journey__ring--1 { width: 300px; height: 300px; border: 1px solid rgba(41,188,188,0.16); }
.bettrai-programs-journey__ring--2 { width: 470px; height: 470px; border: 1.5px dashed rgba(41,188,188,0.30); animation: bettraiOrbitSpin 90s linear infinite; }
.bettrai-programs-journey__ring--3 { width: 600px; height: 600px; border: 1px solid rgba(41,188,188,0.11); }

/* Subtle teal radial glow behind Sophie. */
.bettrai-programs-journey__glow {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 520px; height: 520px; border-radius: 50%; pointer-events: none; z-index: 0;
	background: radial-gradient(circle, rgba(41,188,188,0.17) 0%, rgba(41,188,188,0.07) 40%, rgba(41,188,188,0) 72%);
}

/* Sophie — free-standing, no card/frame; overlaps the rings, extends slightly below. */
.bettrai-programs-journey__orbit img.bettrai-programs-journey__sophie {
	position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	height: 600px; width: auto; max-width: none; z-index: 5; object-fit: contain;
	filter: drop-shadow(0 20px 34px rgba(31,81,102,0.10));
}

/* Feature touchpoint — label + circular teal icon, no bounding box. */
.bettrai-programs-journey__node {
	position: absolute; z-index: 20; display: flex; align-items: center; gap: 13px;
	white-space: nowrap;
}
.bettrai-programs-journey__node--left { flex-direction: row-reverse; }
.bettrai-programs-journey__ic {
	display: flex; align-items: center; justify-content: center;
	width: 58px; height: 58px; border-radius: 50%; flex: 0 0 58px;
	background: linear-gradient(135deg, #34c7b8 0%, #1f9f92 100%);
	color: #fff;
	box-shadow: 0 12px 26px rgba(31,177,171,0.22), 0 0 0 8px rgba(45,188,183,0.05);
	animation: bettraiIconFloat 4.8s ease-in-out infinite;
}
.bettrai-programs-journey__ic svg { width: 26px; height: 26px; }
.bettrai-programs-journey__ic-img { width: 26px; height: 26px; object-fit: contain; }
.bettrai-programs-journey__ctitle { font-family: var(--bettrai-font-heading); font-size: 1.02rem; font-weight: 700; color: #484868; line-height: 1.25; }
.bettrai-programs-journey__node--left .bettrai-programs-journey__ctitle { text-align: right; }

/* Tiny orbit anchor dot bridging label and the circular system. */
.bettrai-programs-journey__node::after {
	content: ''; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%;
	background: rgba(45,188,183,0.5); transform: translateY(-50%);
}
.bettrai-programs-journey__node--left::after { right: -19px; }
.bettrai-programs-journey__node--right::after { left: -19px; }

/* Radial positions — icon centers ride the circle; corners tuck inward, mids widest.
   Left nodes anchor their inner (right) edge; right nodes anchor their inner (left) edge. */
.bettrai-programs-journey__node--f1 { top: 150px; left: 245px; transform: translate(-100%, -50%); } /* 10 o'clock */
.bettrai-programs-journey__node--f2 { top: 285px; left: 179px; transform: translate(-100%, -50%); } /* 9 o'clock  */
.bettrai-programs-journey__node--f3 { top: 476px; left: 288px; transform: translate(-100%, -50%); } /* 7:30       */
.bettrai-programs-journey__node--f4 { top: 150px; left: 655px; transform: translateY(-50%); }       /* 2 o'clock  */
.bettrai-programs-journey__node--f5 { top: 285px; left: 721px; transform: translateY(-50%); }       /* 3 o'clock  */
.bettrai-programs-journey__node--f6 { top: 476px; left: 612px; transform: translateY(-50%); }       /* 4:30       */

/* Staggered, extremely subtle float. */
.bettrai-programs-journey__node--f2 .bettrai-programs-journey__ic,
.bettrai-programs-journey__node--f5 .bettrai-programs-journey__ic { animation-delay: .8s; }
.bettrai-programs-journey__node--f3 .bettrai-programs-journey__ic,
.bettrai-programs-journey__node--f4 .bettrai-programs-journey__ic { animation-delay: 1.4s; }

@keyframes bettraiIconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bettraiOrbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.bettrai-programs-journey__ic,
	.bettrai-programs-journey__ring--2 { animation: none; }
}

/* Scale the whole orbit down proportionally on medium screens (keeps geometry). */
@media (max-width: 960px) {
	.bettrai-programs-journey__orbit { transform: scale(0.74); transform-origin: top center; margin-bottom: -156px; }
}
@media (max-width: 720px) {
	.bettrai-programs-journey__orbit { transform: scale(0.6); margin-bottom: -240px; }
}

/* Mobile-only card: Sophie stands on top of a white panel; the panel shows one
   capability tag at a time, auto-rotating (see initJourneyRotator in frontend.js). */
.bettrai-programs-journey__mcard { display: none; }

/* Below phone width: swap the crowded orbit for the compact card + rotator. */
@media (max-width: 560px) {
	.bettrai-programs-journey__stage { display: none; }
	.bettrai-programs-journey { padding-bottom: 20px; }

	.bettrai-programs-journey__mcard {
		display: block; position: relative; max-width: 320px; margin: 0 auto; padding-top: 150px;
	}
	.bettrai-programs-journey__mcard-sophie {
		position: absolute; top: 0; left: 50%; transform: translateX(-50%);
		height: 260px; width: auto; z-index: 2;
		filter: drop-shadow(0 16px 26px rgba(31,81,102,0.16));
	}
	.bettrai-programs-journey__mcard-panel {
		position: relative; z-index: 1; background: #fff; border-radius: 22px;
		box-shadow: 0 18px 40px rgba(31,81,102,0.12);
		padding: 110px 24px 28px; text-align: center;
	}
	.bettrai-programs-journey__rotator { position: relative; min-height: 60px; }
	.bettrai-programs-journey__ritem {
		position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
		opacity: 0; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease;
		pointer-events: none;
	}
	.bettrai-programs-journey__ritem.is-active {
		position: relative; opacity: 1; transform: translateY(0); pointer-events: auto;
	}
	.bettrai-programs-journey__ritem .bettrai-programs-journey__ic { width: 52px; height: 52px; flex-basis: 52px; }
	.bettrai-programs-journey__ritem .bettrai-programs-journey__ic svg { width: 24px; height: 24px; }
	.bettrai-programs-journey__ritem .bettrai-programs-journey__ic-img { width: 24px; height: 24px; }
	.bettrai-programs-journey__ritem .bettrai-programs-journey__ctitle { font-size: 1.02rem; text-align: center; }
	@media (prefers-reduced-motion: reduce) {
		.bettrai-programs-journey__ritem { transition: none; }
	}
}

/* --------------------- DARK NAVY PLATFORM FLOW ------------------------- */
.bettrai-programs-platform {
	position: relative; background: radial-gradient(120% 100% at 50% 0%, #12245c 0%, #0a1230 55%, #070d24 100%);
	padding: clamp(56px, 7vw, 100px) 0 clamp(96px, 11vw, 168px); color: #fff; overflow: hidden; isolation: isolate;
}
.bettrai-programs-platform__glow { position: absolute; border-radius: 50%; z-index: -1; filter: blur(10px); }
.bettrai-programs-platform__glow--a { top: -120px; left: -80px; width: 460px; height: 460px; background: radial-gradient(circle, rgba(41,188,188,0.22), transparent 65%); }
.bettrai-programs-platform__glow--b { bottom: -160px; right: -100px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(35,64,200,0.28), transparent 65%); }
.bettrai-programs-platform__head { text-align: center; max-width: 640px; margin: 64px auto 48px; }
.bettrai-programs-platform__head p { color: rgba(255,255,255,0.82); font-family: var(--bettrai-font); font-size: 18px; line-height: 30px; margin: 16px 0 0; }
/* Flow-chart: left column (2 cards) → green hub → right column (3 cards). */
.bettrai-programs-flow {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 24px 52px; align-items: center; position: relative;
}
.bettrai-programs-flow__col { display: flex; flex-direction: column; gap: 24px; position: relative; }
/* Stagger: left pair sits higher, right trio sits lower (matches Figma). */
.bettrai-programs-flow__col--left { transform: translateY(-84px); }
.bettrai-programs-flow__col--right { transform: translateY(84px); }
.bettrai-programs-flow__col--center { position: relative; }

/* -------- Subtle network connectors: thin dashed rails behind the cards -----
 * Rendered on a layer BELOW the cards (z-index:1 vs cards z-index:2) so the
 * opaque card surfaces interrupt the lines, leaving only the linking segments
 * in the gaps visible — a system diagram, not a flowchart. Each side has one
 * vertical spine + one horizontal branch that meet at a square corner inside
 * the same column, so they always stay connected regardless of column width. */
.bettrai-flow-conn { position: absolute; z-index: 1; pointer-events: none; }
/* Animated dashed hairlines. Each segment is drawn as a flowing gradient dash
 * ("marching ants") rather than a static border, since CSS borders can't animate
 * their dashes. Spec unchanged: 1px, 4px dash / 4px gap, rgba(210,225,235,0.45),
 * only 90-degree H/V segments. Geometry is anchored to the green hub card (which
 * fills the centre column: top = 0, mid = 50%, right edge = 100%) and the fixed
 * ±84px column stagger. Straight connectors are painted on the element itself;
 * elbows/staples paint their extra legs via ::before / ::after. */

/* Horizontal dashes flowing to the right. */
.bettrai-flow-conn--enroll-hub,
.bettrai-flow-conn--patient-hub::before,
.bettrai-flow-conn--hub-sophie {
	background-image: repeating-linear-gradient(90deg, rgba(210, 225, 235, 0.45) 0 4px, transparent 4px 8px);
	background-size: 8px 1px; background-repeat: repeat-x; background-position: 0 0;
	animation: bettraiDashX 900ms linear infinite;
}
/* Vertical dashes flowing downward. */
.bettrai-flow-conn--spine-left,
.bettrai-flow-conn--spine-right,
.bettrai-flow-conn--patient-hub::after,
.bettrai-flow-conn--hub-sophie::before,
.bettrai-flow-conn--hub-sophie::after {
	background-image: repeating-linear-gradient(180deg, rgba(210, 225, 235, 0.45) 0 4px, transparent 4px 8px);
	background-size: 1px 8px; background-repeat: repeat-y; background-position: 0 0;
	animation: bettraiDashY 900ms linear infinite;
}
/* Elbow / staple legs. */
.bettrai-flow-conn--patient-hub::before,
.bettrai-flow-conn--patient-hub::after,
.bettrai-flow-conn--hub-sophie::before,
.bettrai-flow-conn--hub-sophie::after { content: ""; position: absolute; }

/* LEFT: vertical dashed spine linking Patient → Enrollment (shown only in the
 * gap between them; the opaque cards cover the rest). */
.bettrai-flow-conn--spine-left { left: 50%; top: 16px; bottom: 16px; width: 1px; }
/* Enrollment → hub: straight horizontal from Enrollment's right edge into the
 * hub's left edge, at roughly Enrollment mid-height. */
.bettrai-flow-conn--enroll-hub { left: -52px; top: 126px; width: 52px; height: 1px; }
/* Patient → hub: elbow (┐) — leaves the right side of Patient, runs right, then
 * drops straight down into the hub's top-left area. */
.bettrai-flow-conn--patient-hub { left: -52px; top: -46px; width: 72px; height: 46px; }
.bettrai-flow-conn--patient-hub::before { top: 0; left: 0; width: 100%; height: 1px; }
.bettrai-flow-conn--patient-hub::after { top: 0; right: 0; width: 1px; height: 100%; }
/* Hub → Sophie: stepped staple (⊓) — up from the hub's top-right, across above
 * Sophie, then down into the top of the Sophie card (the lower part of the
 * right leg is hidden behind Sophie). Element paints the top edge. */
.bettrai-flow-conn--hub-sophie { left: calc(100% - 40px); top: -100px; width: 340px; height: 100px; }
/* Origin leg: drops from above into the top of the green box, 40px inside its
 * right edge. Sits BEHIND the card (default z-index 1) so the card surface hides
 * the lower part — the line reads as entering the box, not drawn over its text. */
.bettrai-flow-conn--hub-sophie::before { top: 0; left: 0; width: 1px; height: 250px; }
/* Down leg into the top of the Sophie card. */
.bettrai-flow-conn--hub-sophie::after { top: 0; right: 0; width: 1px; height: 54px; }
/* RIGHT: one vertical dashed spine through Sophie → Care Team → Bettr Outcomes
 * (shown only in the gaps between the cards). */
.bettrai-flow-conn--spine-right { left: 50%; top: 16px; bottom: 16px; width: 1px; }

@keyframes bettraiDashX { to { background-position: 8px 0; } }
@keyframes bettraiDashY { to { background-position: 0 8px; } }
@media (prefers-reduced-motion: reduce) {
	.bettrai-flow-conn,
	.bettrai-flow-conn::before,
	.bettrai-flow-conn::after { animation: none; }
}

/* Light mint cards (left + right columns). */
.bettrai-pcard {
	position: relative; z-index: 2;
	background: #DCF1EC; border-radius: 16px; padding: 24px 26px;
}
/* Left pair: roomier interior padding. */
.bettrai-programs-flow__col--left .bettrai-pcard { padding: 32px 32px; }
.bettrai-pcard h3 { font-family: var(--bettrai-font-heading); font-size: 1.15rem; font-weight: 700; color: #0B2A4A; margin: 0 0 10px; }
.bettrai-pcard p { font-family: var(--bettrai-font); font-size: 0.92rem; line-height: 1.6; color: #52607a; margin: 0; }

/* Green hub card (center). */
.bettrai-pcard--hub {
	background: linear-gradient(160deg, #12a06a 0%, #0c8a5b 100%);
	padding: 48px 30px 44px; box-shadow: 0 26px 60px rgba(6, 60, 40, 0.42);
}
.bettrai-pcard--hub h3 { color: #fff; font-size: 1.35rem; }
.bettrai-pcard--hub p { color: rgba(255,255,255,0.9); font-size: 0.95rem; }
.bettrai-pcard__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.bettrai-pcard__chip {
	font-family: var(--bettrai-font); font-size: 0.82rem; font-weight: 600; color: #fff;
	border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; padding: 6px 16px; line-height: 1;
}
.bettrai-pcard__chip.is-on { background: #fff; color: #0c8a5b; border-color: #fff; }

/* ------------------------------ OUTCOMES ------------------------------- */
.bettrai-programs-outcomes { padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-programs-outcomes__head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.bettrai-programs-outcomes__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 16px 0 0; }
/* 6-col grid: 2 wide cards on top (span 3), 3 cards below (span 2). */
.bettrai-programs-outcomes__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; }
.bettrai-programs-ocard:nth-child(1),
.bettrai-programs-ocard:nth-child(2) { grid-column: span 3; }
.bettrai-programs-ocard:nth-child(3),
.bettrai-programs-ocard:nth-child(4),
.bettrai-programs-ocard:nth-child(5) { grid-column: span 2; }
.bettrai-programs-ocard { position: relative; border-radius: 18px; overflow: hidden; height: 380px; min-height: 380px; display: flex; align-items: flex-end; padding: 20px; }
.bettrai-programs-outcomes__grid .bettrai-programs-ocard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Pill label at the bottom — font matches the Providers data cards. */
.bettrai-programs-ocard__label {
	position: relative; z-index: 1; width: 100%;
	display: flex; align-items: center;
	font-family: var(--bettrai-font-heading); font-size: 0.98rem; font-weight: 600; line-height: 1.2;
	padding: 15px 20px; border-radius: 12px;
}
.bettrai-programs-ocard--green .bettrai-programs-ocard__label { background: var(--pg-green); color: #fff; }
.bettrai-programs-ocard--teal .bettrai-programs-ocard__label { background: var(--pg-teal); color: #fff; }
.bettrai-programs-ocard--light .bettrai-programs-ocard__label { background: #D1EBF6; color: var(--pg-navy); }

/* Green CTA strip */
.bettrai-programs-strip {
	margin-top: 34px;
	background: linear-gradient(120deg, #1f7a5e 0%, #14624c 100%);
	border-radius: 18px;
	padding: 26px clamp(24px, 3vw, 40px);
	display: flex; align-items: center; gap: 24px; color: #fff;
}
.bettrai-programs-strip__mark { width: 58px; height: 58px; border-radius: 50%; background: #16B3A3; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bettrai-programs-strip__mark img { width: 46%; height: 46%; object-fit: contain; }
.bettrai-programs-strip__copy { flex: 1; }
.bettrai-programs-strip__copy h3 { font-family: var(--bettrai-font-heading); font-size: clamp(1.05rem, 1.8vw, 1.4rem); font-weight: 700; margin: 0 0 6px; line-height: 1.25; }
.bettrai-programs-strip__copy p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: rgba(255,255,255,0.85); margin: 0; max-width: 620px; }
.bettrai-programs-strip__actions { display: flex; align-items: center; gap: 12px; flex: none; }
.bettrai-programs-strip__actions .bettrai-btn { border-radius: 10px; min-height: 52px; }
.bettrai-programs-strip__actions .bettrai-payers-square { border: 0; }

/* ------------------------- COMPARE PROGRAMS ---------------------------- */
.bettrai-programs-compare {
	background: linear-gradient(180deg, #0a1230 0%, #10204d 50%, #0a1230 100%);
	padding: clamp(56px, 7vw, 100px) 0; color: #fff;
}
.bettrai-programs-compare__card {
	background: transparent; border: 0; border-radius: 0; padding: 0;
}
.bettrai-programs-compare__head {
	display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin: 0 0 28px;
}
.bettrai-programs-compare__title { font-family: var(--bettrai-font-heading); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.30; margin: 0; color: #fff; }
.bettrai-programs-compare__accent { color: var(--pg-teal); }
.bettrai-programs-compare__intro { color: rgba(255,255,255,0.72); font-family: var(--bettrai-font); font-weight: 400; font-size: 17px; line-height: 28px; margin: 0 0 0 auto; max-width: 420px; text-align: right; }
.bettrai-programs-table__wrap { overflow-x: auto; }
/* Five independent vertical column cards with tiny gaps — the navy section shows
   through the gaps, so each column reads as its own standalone data card. */
.bettrai-programs-grid {
	display: grid;
	grid-template-columns: 2fr 0.78fr 1fr 1fr 1fr;
	gap: 4px;
	min-width: 760px;
}
.bettrai-programs-col { border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
/* Shared header + row metrics keep every column aligned row-for-row. */
.bettrai-programs-col__head {
	min-height: 54px; display: flex; align-items: center; justify-content: center; gap: 9px;
	color: #fff; font-family: var(--bettrai-font-heading); font-size: 0.95rem; font-weight: 700;
	padding: 12px 20px; white-space: nowrap;
}
.bettrai-programs-col__head i { display: inline-flex; opacity: 0.92; }
.bettrai-programs-col__head i svg { width: 19px; height: 19px; }
.bettrai-programs-col__head-img { width: 19px; height: 19px; object-fit: contain; }
.bettrai-programs-col__cell {
	min-height: 64px; display: flex; align-items: center; justify-content: center; padding: 12px 20px;
}
/* Program column — one standalone card: green header, dark green-navy body. */
.bettrai-programs-col--program { background: rgba(31,160,111,0.12); }
.bettrai-programs-col--program .bettrai-programs-col__head { justify-content: flex-start; background: linear-gradient(135deg, #23a874 0%, #17855c 100%); }
.bettrai-programs-col--program .bettrai-programs-col__cell {
	justify-content: flex-start; text-align: left; white-space: nowrap;
	font-family: var(--bettrai-font); font-size: 17px; font-weight: 500; color: #eaf3f2;
	border-bottom: 1px dashed rgba(92,199,200,0.22);
}
/* Value columns — teal header, subtle navy body slightly lighter than the page. */
.bettrai-programs-col--value { background: rgba(255,255,255,0.03); }
.bettrai-programs-col--value .bettrai-programs-col__head { background: linear-gradient(135deg, #3fc9c0 0%, #2fb0ad 100%); }
.bettrai-programs-col--value .bettrai-programs-col__cell {
	border-bottom: 1px dashed rgba(92,199,200,0.16);
}
/* Round the whole column, never individual rows; no divider after the last row. */
.bettrai-programs-col .bettrai-programs-col__cell:last-child { border-bottom: 0; }
.bettrai-programs-table__yes { color: var(--pg-teal); font-size: 1.15rem; font-weight: 700; }
.bettrai-programs-table__no { color: rgba(120,150,190,0.45); font-size: 1.2rem; }
/* Tablet — tighten padding before allowing horizontal scroll on smaller screens. */
@media (max-width: 900px) {
	.bettrai-programs-col__cell, .bettrai-programs-col__head { padding-left: 14px; padding-right: 14px; }
	.bettrai-programs-col--program .bettrai-programs-col__cell { font-size: 16px; }
}
@media (max-width: 640px) {
	.bettrai-programs-grid { grid-template-columns: 1.5fr 0.68fr 1fr 1fr 1fr; min-width: 560px; }
	.bettrai-programs-col--program .bettrai-programs-col__cell { font-size: 14px; line-height: 1.3; white-space: normal; }
	.bettrai-programs-col--program .bettrai-programs-col__head span { font-size: 14px; }
	.bettrai-programs-col__cell, .bettrai-programs-col__head { padding-left: 10px; padding-right: 10px; }
	.bettrai-programs-col__head { gap: 5px; font-size: 0.72rem; white-space: normal; text-align: center; line-height: 1.15; padding-left: 8px; padding-right: 8px; }
	.bettrai-programs-col__head i svg { width: 14px; height: 14px; }
	.bettrai-programs-col__head-img { width: 14px; height: 14px; }
}
.bettrai-programs-compare__caption { text-align: center; color: rgba(255,255,255,0.6); font-family: var(--bettrai-font); font-weight: 400; font-size: 17px; line-height: 28px; max-width: 760px; margin: 30px auto 0; }

/* -------------------------------- FAQ ---------------------------------- */
.bettrai-programs-faq { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-programs-faq__head { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.bettrai-programs-faq__head .bettrai-programs-h2 { text-wrap: balance; }
.bettrai-programs-faq__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 16px auto 0; max-width: 560px; text-wrap: pretty; }
.bettrai-programs-faq__list { margin: 0 auto; }
.bettrai-programs-faq .bettrai-faq__answer p { font-size: 18px; color: rgba(102,102,118,0.88); line-height: 30px; }

/* ----------------------------- BOTTOM CTA ------------------------------ */
.bettrai-programs-cta { padding: 0 0 clamp(56px, 7vw, 100px); }
.bettrai-programs-cta__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: stretch; }
.bettrai-programs-cta__panel {
	position: relative;
	background: linear-gradient(120deg, #2340c8 0%, #2f6fd0 55%, #3aa9c9 100%);
	border-radius: 24px; padding: clamp(34px, 4vw, 60px); color: #fff;
	display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.bettrai-programs-cta__mark { position: absolute; top: 30px; right: 30px; width: 40px; opacity: 0.9; }
.bettrai-programs-cta__panel h2 { font-family: var(--bettrai-font-heading); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.08; margin: 0 0 16px; }
.bettrai-programs-cta__panel h2 span { color: rgba(255, 255, 255, 0.72); }
.bettrai-programs-cta__panel p { color: rgba(255, 255, 255, 0.9); line-height: 1.65; margin: 0 0 28px; max-width: 420px; }
.bettrai-programs-cta__actions { display: flex; align-items: center; gap: 12px; }
.bettrai-programs-cta__media { border-radius: 24px; overflow: hidden; }
.bettrai-programs-cta__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 1024px) {
	/* "What Sophie Handles Behind The Scenes" head, tablet only: stack the
	   heading above the subtext instead of the desktop side-by-side grid. */
	.bettrai-programs-behind__head { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
	.bettrai-programs-behind__head p { margin: 0; max-width: none; }
	.bettrai-programs-flow { grid-template-columns: 1fr; gap: 20px; }
	.bettrai-programs-flow__col--left,
	.bettrai-programs-flow__col--right { transform: none; }
	.bettrai-flow-conn { display: none; }
	.bettrai-programs-outcomes__grid { grid-template-columns: repeat(2, 1fr); }
	.bettrai-programs-outcomes__grid .bettrai-programs-ocard { grid-column: span 1 !important; }
}

@media (max-width: 1024px) {
	.bettrai-programs-intro__head { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
	.bettrai-programs-intro__head .bettrai-programs-h2,
	.bettrai-programs-intro__head .bettrai-programs-h2--center { font-size: clamp(1.9rem, 8vw, 2.3rem); line-height: 1.2; text-align: left !important; }
	.bettrai-programs-intro__head p { text-align: left; }
	.bettrai-programs-icard { padding: 24px 24px 0; min-height: 0; }
	/* "Smarter Care Coordination" diagram card (second intro card), tablet
	   only: the diagram sits flush with the card's 0 bottom padding, which
	   reads too tight. Give this card specifically some breathing room
	   below the diagram - the first (photo) card intentionally stays flush
	   so its image bleeds to the card edge. */
	.bettrai-programs-intro__grid .bettrai-programs-icard:last-child { padding-bottom: 28px; }
	.bettrai-programs-icard__copy { padding-top: 18px; }
	.bettrai-programs-icard__media { margin-top: 6px; }
	.bettrai-programs-intro__grid .bettrai-programs-icard:first-child .bettrai-programs-icard__media { margin-top: 0; }
	.bettrai-programs-intro__grid .bettrai-programs-icard:first-child .bettrai-programs-icard__media img { height: auto; width: 100%; max-width: 320px; margin: 0 auto; }
	.bettrai-programs-icard__diagram { margin-top: -12px; }
	.bettrai-programs-icard__diagram svg { height: auto; width: 100%; max-width: 340px; }
	.bettrai-programs-icard__diagram--desktop { display: none; }
	.bettrai-programs-icard__diagram--mobile { display: flex; }
	.bettrai-programs-icard__diagram-img { margin-top: -12px; height: auto; width: 100%; max-width: 340px; }
	.bettrai-programs-between__head { text-align: left; max-width: none; }
	/* Align the accordion list's text with the heading above it - the
	   FAQ-style trigger buttons have their own 8px horizontal padding,
	   which otherwise indents the list text slightly right of the heading. */
	.bettrai-programs-between__list .bettrai-faq__trigger { padding-left: 0; padding-right: 0; }
	.bettrai-programs-between__head .bettrai-programs-h2,
	.bettrai-programs-between__head .bettrai-programs-h2 span { white-space: normal; text-align: left; }
	.bettrai-programs-between__lead { text-align: left; }
	.bettrai-programs-between__break { display: block; }
	.bettrai-programs-intro__grid .bettrai-programs-icard:first-child::before { height: 46%; }
	.bettrai-programs-intro__break { display: none; }
	.bettrai-programs-intro__head .bettrai-programs-h2 span::before { content: " "; }
	.bettrai-programs-intro__grid,
	.bettrai-programs-behind__head,
	.bettrai-programs-behind__grid,
	.bettrai-programs-between__grid,
	.bettrai-programs-together__head,
	.bettrai-programs-together__body,
	.bettrai-programs-cta__grid { grid-template-columns: 1fr; gap: 30px; }
	.bettrai-programs-behind__grid { padding: 44px 22px 28px; }
	.bettrai-programs-together__intro { text-align: left; margin-left: 0; }
	.bettrai-programs-together__grid { grid-template-columns: 1fr 1fr; }
	.bettrai-programs-flow,
	.bettrai-programs-outcomes__grid { grid-template-columns: 1fr; }
	.bettrai-programs-outcomes__grid .bettrai-programs-ocard { grid-column: span 1 !important; }
	.bettrai-programs-cta__media,
	.bettrai-programs-behind__media { min-height: 260px; }
	.bettrai-programs-strip { flex-direction: column; align-items: flex-start; padding-top: 34px; padding-bottom: 34px; }
	.bettrai-programs-outcomes__grid { gap: 12px; }
	.bettrai-programs-platform { padding-top: 40px; padding-bottom: 40px; }
	.bettrai-programs-journey { padding-top: 28px; }
	.bettrai-programs-between { padding-bottom: 32px; }
	.bettrai-programs-journey__head { text-align: left; max-width: none; margin-bottom: 10px; }
	.bettrai-programs-journey__head .bettrai-programs-h2 { text-align: left; }
	.bettrai-programs-journey__head p { text-align: left; }
	.bettrai-programs-platform__head { margin: 0 0 32px; text-align: left; max-width: none; }
	.bettrai-programs-platform__head .bettrai-programs-h2 { text-align: left; }
	.bettrai-programs-platform__head p { text-align: left; }
	.bettrai-programs-journey { padding-bottom: 20px; }
	.bettrai-programs-together { padding-top: 40px; padding-bottom: 40px; }
	.bettrai-programs-outcomes { padding-top: 32px; padding-bottom: 32px; }
	.bettrai-programs-outcomes__head { margin-bottom: 24px; }
	.bettrai-programs-compare { padding-top: 32px; }
	.bettrai-programs-compare__head { grid-template-columns: 1fr; align-items: start; gap: 14px; }
	.bettrai-programs-compare__title { text-align: left; }
	.bettrai-programs-compare__intro { text-align: left; margin: 0; max-width: none; }
	.bettrai-programs-compare__caption { text-align: left; margin: 30px 0 0; max-width: none; font-size: 16px; }
	.bettrai-programs-faq__head { text-align: left; max-width: none; }
	.bettrai-programs-faq__head .bettrai-programs-h2 { text-align: left; font-size: clamp(1.5rem, 6.5vw, 2rem); line-height: 1.25; }
	.bettrai-programs-band__title { font-size: 30px; line-height: 38px; margin-bottom: 16px; }
	.bettrai-programs-faq__head .bettrai-programs-h2 span { font-size: inherit; font-weight: inherit; }
	.bettrai-programs-faq__head p { text-align: left; }
	.bettrai-programs-together__head { gap: 14px; margin-bottom: 28px; }
	.bettrai-programs-together__head .bettrai-programs-h2 { text-align: left; line-height: 1.35; }
}

@media (max-width: 520px) {
	.bettrai-programs-together__grid { grid-template-columns: 1fr; }
	.bettrai-programs-orbit__seg { font-size: 0.64rem; padding: 6px 10px; }
}

/* ==========================================================================
   ABOUT US LANDING PAGE  (.bettrai-about-page)
   Scoped page built from Logos/About Us.png reference. Reuses shared
   header/footer, buttons, FAQ, and card radius/token system.
   Teal accent = #29BCBC, navy ink = #24244d. Never affects other pages.
   ========================================================================== */

.bettrai-about-page {
	--ab-teal: #29BCBC;
	--ab-teal-soft: #5cc9c9;
	--ab-ink: #24244d;
	--ab-navy: #0b1533;
	--ab-navy-2: #0a1230;
	--ab-body: #6a6a80;
	--ab-mint: #e6f5ef;
	--ab-sky: #e4f0fb;
	--ab-pale: #eef4fb;
	--ab-green: #0f6b56;
	--ab-green-2: #0b5344;
	font-family: var(--bettrai-font);
	color: var(--ab-ink);
	background: #fff;
	overflow-x: hidden;
}
.bettrai-about-page img { max-width: 100%; display: block; }

/* Shared heading */
.bettrai-about-h2 {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: var(--ab-ink);
	line-height: 1.30;
	letter-spacing: -0.01em;
	margin: 0;
	font-size: clamp(1.8rem, 3.2vw, 2.7rem);
}
.bettrai-about-h2 span { color: var(--ab-teal); }
.bettrai-about-h2--center { text-align: center; }
.bettrai-about-h2--light { color: #fff; }
.bettrai-about-h2--light span { color: var(--ab-teal-soft); }

.bettrai-about-eyebrow {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.bettrai-about-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ab-teal); display: inline-block; flex: none; }

/* Square outline arrow button */
.bettrai-about-square {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: var(--bettrai-radius-md);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff; background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease;
	flex: none;
}
.bettrai-about-square svg { width: 20px; height: 20px; }
.bettrai-about-square:hover { background: #fff; color: var(--ab-navy); }
.bettrai-about-square--light { border-color: var(--ab-teal); color: var(--ab-teal); background: #fff; }
.bettrai-about-square--light:hover { background: var(--ab-teal); color: #fff; }
.bettrai-about-square--onblue { background: #fff; color: var(--ab-teal); border-color: #fff; }
.bettrai-about-square--onblue:hover { background: var(--ab-teal); color: #fff; }

/* ------------------------------- HEADER -------------------------------- */
.bettrai-about-page .bettrai-hero__header { background: rgba(255,255,255,0.10); }

/* About hero reuses the shared payers-hero shell; lift the background image so
   the seated subjects sit higher in the frame (nudge toward top). */
.bettrai-payers-hero--about { background-position: center 42%; }
/* Flat, uniform overlay across the full image for consistent text contrast
   (About only — the default shared overlay fades out toward the right). */
.bettrai-payers-hero--about .bettrai-payers-hero__overlay {
	background: rgba(10, 28, 34, 0.62);
}
/* Keep "Building a More Connected" on one line so the title reads as two lines
   (line 2 = "Future for Healthcare."); allow natural wrapping on small screens. */
@media (min-width: 992px) {
	.bettrai-payers-hero--about .bettrai-payers-hero__title { white-space: nowrap; }
}
@media (max-width: 1024px) {
	.bettrai-payers-hero--about { background-position: center 18%; }
	.bettrai-payers-hero--about .bettrai-payers-hero__inner {
		min-height: 560px; padding-top: 90px; padding-bottom: 70px; align-items: flex-start;
	}
	.bettrai-payers-hero--about .bettrai-payers-hero__title {
		font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.18; white-space: normal;
	}
	/* Uniform with the Providers page hero tablet treatment: same
	   min-height and symmetric padding so align-items:center (inherited,
	   not overridden here) actually centers the copy the same way. */
	.bettrai-payers-hero--programs .bettrai-payers-hero__inner {
		min-height: 560px; padding-top: 56px; padding-bottom: 56px;
	}
	.bettrai-payers-hero--programs .bettrai-payers-hero__title {
		font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.18;
	}
}

/* ------------------------------- HERO ---------------------------------- */
.bettrai-about-hero {
	position: relative; background-size: cover; background-position: 50% 12%;
	color: #fff; overflow: hidden; isolation: isolate;
}
.bettrai-about-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(rgba(9, 34, 40, 0.72), rgba(9, 34, 40, 0.72)),
		linear-gradient(0deg, rgba(7, 30, 36, 0.85), rgba(7, 30, 36, 0.5) 55%, rgba(7, 30, 36, 0.3));
}
.bettrai-about-hero__inner {
	min-height: 600px; display: flex; align-items: center;
	padding-top: 150px; padding-bottom: 90px;
}
.bettrai-about-hero__copy { max-width: 600px; }
.bettrai-about-hero__title {
	font-family: var(--bettrai-font-heading); font-weight: 700;
	font-size: clamp(2.3rem, 4.6vw, 3.7rem);
	line-height: 1.06; letter-spacing: -0.015em; margin: 22px 0 20px;
}
.bettrai-about-hero__lead {
	font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.9);
	max-width: 520px; margin: 0 0 32px;
}
.bettrai-about-hero__actions { display: flex; align-items: center; gap: 14px; }

/* --------------------------- COMPANY SNAPSHOT -------------------------- */
.bettrai-about-snapshot { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-about-snapshot__grid { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px; align-items: center; }

/* Collage */
.bettrai-about-collage {
	display: grid; grid-template-columns: 0.82fr 1.18fr; grid-template-rows: 1fr 1fr;
	gap: 18px; min-height: 520px; align-items: stretch;
}
/* Every tile fills its grid cell fully so the image and the green card in the
   same row are always the same height (balanced). */
.bettrai-about-collage__stat,
.bettrai-about-collage__pic,
.bettrai-about-collage__card { border-radius: 18px; overflow: hidden; position: relative; min-height: 200px; align-self: stretch; }
.bettrai-about-collage__stat {
	background: linear-gradient(150deg, #0f7d74 0%, #0b5a56 55%, #0a4247 100%);
	color: #fff; padding: 28px; display: flex; flex-direction: column;
}
/* Bare glyph at the top (no wrapper box); value/label pushed to the bottom. */
.bettrai-about-collage__stat-ic { display: inline-flex; color: #fff; }
.bettrai-about-collage__stat-ic svg { width: 34px; height: 34px; }
.bettrai-about-collage__stat-body { margin-top: auto; }
.bettrai-about-collage__stat b { display: block; font-family: var(--bettrai-font-heading); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 700; line-height: 1; }
.bettrai-about-collage__stat span { display: block; font-size: 0.86rem; color: rgba(255,255,255,0.82); margin-top: 6px; }
/* Fill the tile fully. !important defeats Elementor's global `img { height:auto }`
   which otherwise forces the image to its natural aspect (leaving a gap below). */
.bettrai-about-collage__pic img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
/* Frame the seated doctor on the face/hands so nothing important is cropped. */
.bettrai-about-collage__pic--screen img { object-position: center 30%; }
.bettrai-about-collage__badge {
	position: absolute; bottom: 12px; left: 12px; z-index: 2;
	width: 46px; height: 46px; border-radius: 50%; background: var(--ab-teal); color: #fff;
	display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(41,188,188,0.4);
}
.bettrai-about-collage__badge svg { width: 24px; height: 24px; }
.bettrai-about-collage__card {
	background: linear-gradient(140deg, #0f7d74 0%, #0b5a56 55%, #0a3f44 100%);
	color: #fff; padding: 28px; display: flex; flex-direction: column; justify-content: center;
}
.bettrai-about-collage__card h3 { font-family: var(--bettrai-font-heading); font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 700; line-height: 1.14; margin: 0 0 12px; }
.bettrai-about-collage__card p { font-size: 0.85rem; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0; }

.bettrai-about-snapshot__copy .bettrai-about-h2,
.bettrai-about-snapshot__copy h1,
.bettrai-about-snapshot__copy h2 {
	margin: 0 0 20px;
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: rgb(72, 72, 104);
	letter-spacing: -0.015em;
	max-width: none;
	width: 100%;
}
.bettrai-about-snapshot__copy .bettrai-about-h2 span,
.bettrai-about-snapshot__copy h1 span,
.bettrai-about-snapshot__copy h2 span {
	color: var(--ab-teal);
}
@media (min-width: 992px) {
	.bettrai-about-snapshot__copy .bettrai-about-h2,
	.bettrai-about-snapshot__copy h1,
	.bettrai-about-snapshot__copy h2 {
		font-size: 48px;
		line-height: 1.08;
	}
	.bettrai-about-snapshot__copy .bettrai-about-h2 span,
	.bettrai-about-snapshot__copy h1 span,
	.bettrai-about-snapshot__copy h2 span {
		white-space: nowrap;
	}
}
/* Site-wide subtext spec: Sora 18px / 30px, #8D8D9A on light backgrounds. */
.bettrai-about-snapshot__copy p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: #8D8D9A;
	margin: 0 0 22px;
	max-width: 100%;
}
.bettrai-about-snapshot__copy p:last-child { margin-bottom: 0; }
/* Closing brand-statement line — teal, slightly heavier to stand apart. */
.bettrai-about-snapshot__closer { color: var(--ab-teal); font-weight: 600; }
.bettrai-about-snapshot__actions { display: flex; align-items: center; gap: 12px; }

/* Stat strip */
.bettrai-about-stats {
	margin-top: 40px; background: #fff; border-radius: 18px; box-shadow: var(--bettrai-shadow-card);
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 26px 30px;
}
.bettrai-about-stat { display: flex; align-items: center; gap: 14px; }
.bettrai-about-stat:not(:last-child) { border-right: 1px solid #eef1f5; }
.bettrai-about-stat__ic { width: 58px; height: 58px; border-radius: 50%; background: var(--ab-mint); color: var(--ab-teal); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.bettrai-about-stat__ic svg { width: 30px; height: 30px; }
/* Force brand-teal strokes on the stat icons (beats the currentColor attribute). */
.bettrai-about-stat__ic svg path,
.bettrai-about-stat__ic svg circle { stroke: var(--ab-teal); }
.bettrai-about-stat b { display: block; font-size: 0.98rem; color: var(--ab-ink); }
.bettrai-about-stat span { font-size: 0.8rem; color: var(--ab-body); }

/* ----------------------- MISSION / VISION (DARK) ---------------------- */
.bettrai-about-mv {
	background: linear-gradient(180deg, #0a1230 0%, #10204d 50%, #0a1230 100%);
	padding: clamp(56px, 7vw, 100px) 0; color: #fff; position: relative; overflow: hidden;
}
/* Subtle decorative glows/rings in the navy background. */
.bettrai-about-mv::before,
.bettrai-about-mv::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.bettrai-about-mv::before { width: 660px; height: 660px; right: -170px; top: -210px; background: radial-gradient(circle, rgba(75,196,197,0.18) 0%, rgba(75,196,197,0) 66%); }
.bettrai-about-mv::after { width: 820px; height: 820px; left: -300px; bottom: -360px; background: radial-gradient(circle, rgba(41,188,188,0.13) 0%, rgba(41,188,188,0) 68%); }
.bettrai-about-mv > .bettrai-container { position: relative; z-index: 1; }

.bettrai-about-mission__video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
/* Two-column header: heading left, intro right. */
.bettrai-about-mv__head { display: grid; grid-template-columns: 1.22fr 0.78fr; gap: clamp(28px, 5vw, 72px); align-items: center; margin: 0 0 40px; text-align: left; }
.bettrai-about-mv__head .bettrai-about-h2,
.bettrai-about-mv__head h1,
.bettrai-about-mv__head h2 {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 48px);
	line-height: 1.1;
}
/* Keep each heading line on one line so the title stays exactly two lines. */
@media (min-width: 861px) {
	.bettrai-about-mv__head .bettrai-about-h2,
	.bettrai-about-mv__head h1,
	.bettrai-about-mv__head h2 {
		font-size: 48px;
		line-height: 1.08;
		white-space: nowrap;
	}
}
.bettrai-about-mv__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: rgba(255,255,255,0.78); margin: 0; }

/* Full-width teal feature panels (Mission / Vision), stacked. */
.bettrai-about-mv__panels { display: flex; flex-direction: column; gap: 26px; }
.bettrai-about-mvpanel {
	position: relative; overflow: hidden;
	background: linear-gradient(130deg, #1aa39a 0%, #0f7d74 52%, #0a5a55 100%);
	border-radius: 26px;
	padding: clamp(32px, 4vw, 56px);
	min-height: 300px;
	display: flex; flex-direction: column; justify-content: center;
}
.bettrai-about-mvpanel--media { min-height: 500px; padding-right: clamp(320px, 40%, 640px); }
/* Solid concentric circles behind the figures (clipped by the card), gently
   breathing. Flat fills — no outline rings. */
.bettrai-about-mvpanel--media::before,
.bettrai-about-mvpanel--media::after { content: ""; position: absolute; border-radius: 50%; z-index: 0; pointer-events: none; top: 50%; animation: bettrai-mv-breathe 7s ease-in-out infinite; }
.bettrai-about-mvpanel--media::after { right: clamp(20px, 3vw, 56px); width: clamp(300px, 32vw, 440px); aspect-ratio: 1; transform: translateY(-42%); background: rgba(255,255,255,0.06); }
.bettrai-about-mvpanel--media::before { right: clamp(80px, 8vw, 150px); width: clamp(220px, 24vw, 330px); aspect-ratio: 1; transform: translateY(-42%); background: rgba(255,255,255,0.12); animation-delay: -3.5s; }
@keyframes bettrai-mv-breathe {
	0%, 100% { transform: translateY(-42%) scale(1); }
	50% { transform: translateY(-42%) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
	.bettrai-about-mvpanel--media::before,
	.bettrai-about-mvpanel--media::after { animation: none; }
}
.bettrai-about-mvpanel__copy { max-width: 620px; position: relative; z-index: 2; }
.bettrai-about-mvpanel h3 { font-family: var(--bettrai-font-heading); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 700; color: #fff; margin: 0 0 18px; }
.bettrai-about-mvpanel p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: rgba(255,255,255,0.9); margin: 0 0 16px; }
.bettrai-about-mvpanel p:last-child { margin-bottom: 0; }
/* Cutout image sized by the panel height and anchored to the bottom-right so the
   full figures (heads to feet) show with their feet on the panel's bottom edge.
   Larger image + pulled toward the copy to tighten the middle gap. */
.bettrai-about-mvpanel__media { position: absolute; right: clamp(80px, 8vw, 168px); bottom: 0; top: 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.bettrai-about-mvpanel__media img { display: block; height: 90% !important; width: auto !important; max-width: none; }

/* --------- MISSION: white section, image left / copy right (Sophie-style) ---- */
.bettrai-about-mission { background: #fff; padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-about-mission__inner { display: grid; grid-template-columns: 0.86fr 1.14fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.bettrai-about-mission__media { border-radius: 22px; overflow: hidden; position: relative; aspect-ratio: 4 / 3.4; box-shadow: var(--bettrai-shadow-card); }
.bettrai-about-mission__media img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
.bettrai-about-mission__stamp { position: absolute; left: 20px; bottom: 20px; width: clamp(92px, 8vw, 120px); height: clamp(92px, 8vw, 120px); z-index: 2; filter: drop-shadow(0 12px 26px rgba(7,18,74,0.28)); }
.bettrai-about-mission__stamp svg { width: 100%; height: 100%; }
.bettrai-about-mission__ring { transform-origin: 66px 66px; animation: bettrai-stamp-spin 18s linear infinite; }
.bettrai-about-mission__stamptext { fill: #fff; font-family: var(--bettrai-font-heading); font-size: 9.4px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; }
.bettrai-about-mission__copy .bettrai-about-h2,
.bettrai-about-mission__copy h1,
.bettrai-about-mission__copy h2,
.bettrai-about-mission__copy h3 {
	margin: 0 0 22px;
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: rgb(72, 72, 104);
	letter-spacing: -0.015em;
	font-size: clamp(2rem, 3.4vw, 48px);
	line-height: 1.1;
}
@media (min-width: 992px) {
	.bettrai-about-mission__copy .bettrai-about-h2,
	.bettrai-about-mission__copy h1,
	.bettrai-about-mission__copy h2,
	.bettrai-about-mission__copy h3 {
		font-size: 48px;
		line-height: 1.08;
	}
}
.bettrai-about-mission__copy p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 0; max-width: 620px; }
/* First paragraph is the primary body copy; second gets extra breathing room above. */
.bettrai-about-mission__copy p + p { margin-top: 20px; }
.bettrai-about-mission__copy p:last-of-type { margin-bottom: 0; }

/* ------------------------------ WORKFLOW ------------------------------- */
.bettrai-about-workflow { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-about-workflow__head { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: end; margin-bottom: 40px; }
.bettrai-about-workflow__head p { color: var(--ab-body); line-height: 1.7; margin: 0; text-align: right; }
.bettrai-about-workflow__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bettrai-about-wcard { background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--bettrai-shadow-card); }
.bettrai-about-wcard__media { position: relative; height: 220px; }
.bettrai-about-wcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bettrai-about-wcard__body { position: relative; padding: 34px 26px 28px; }
.bettrai-about-wcard__body::before {
	content: ""; position: absolute; top: -22px; left: 26px;
	width: 44px; height: 44px; border-radius: 50%; background: var(--ab-mint);
	border: 4px solid #fff; box-shadow: var(--bettrai-shadow-soft);
}
.bettrai-about-wcard__body::after {
	content: ""; position: absolute; top: -8px; left: 42px;
	width: 12px; height: 12px; border-radius: 3px; background: var(--ab-teal);
}
.bettrai-about-wcard__body h3 { font-size: 1.1rem; font-weight: 700; color: var(--ab-ink); margin: 0 0 10px; }
.bettrai-about-wcard__body p { font-size: 0.86rem; line-height: 1.6; color: var(--ab-body); margin: 0; }

/* ------------------------------- TEAM ---------------------------------- */
.bettrai-about-team { background: linear-gradient(180deg, #f2f9fb 0%, #eef6f9 100%); padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-about-team__head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.bettrai-about-team__head .bettrai-about-h2,
.bettrai-about-team__head h1,
.bettrai-about-team__head h2 {
	margin: 0;
	color: rgb(72, 72, 104);
}
.bettrai-about-team__head .bettrai-about-h2 span,
.bettrai-about-team__head h1 span,
.bettrai-about-team__head h2 span {
	color: var(--ab-teal);
}
.bettrai-about-team__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 18px 0 0; }
.bettrai-about-team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; align-items: stretch; }
/* Team card — same technique as the Programs outcome cards: the image fills the
   card, and the label sits at the bottom via flex (in-flow, over the image).
   Fixed height + !important on the photo so every card is identical regardless
   of image aspect or Elementor's global `img { height:auto }`. */
.bettrai-teamcard { position: relative; border-radius: 16px; overflow: hidden; height: 380px; min-height: 380px; display: flex; align-items: flex-end; padding: 16px; box-shadow: var(--bettrai-shadow-card); }
.bettrai-teamcard__photo { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top center; }
.bettrai-teamcard__tag { position: relative; z-index: 1; width: 100%; min-height: 62px; padding: 13px 18px; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; }
.bettrai-teamcard__tag b { display: block; font-family: var(--bettrai-font-heading); font-size: 1.02rem; font-weight: 700; line-height: 1.2; }
.bettrai-teamcard__tag span { display: block; font-size: 0.8rem; margin-top: 2px; }
.bettrai-teamcard--blue .bettrai-teamcard__tag { background: #cfe0f2; color: var(--ab-ink); }
.bettrai-teamcard--blue .bettrai-teamcard__tag span { color: #5a6a86; }
.bettrai-teamcard--green .bettrai-teamcard__tag { background: #1f8a5c; color: #fff; }
.bettrai-teamcard--green .bettrai-teamcard__tag span { color: rgba(255,255,255,0.82); }
.bettrai-teamcard--navy .bettrai-teamcard__tag { background: #0d3b40; color: #fff; }
.bettrai-teamcard--navy .bettrai-teamcard__tag span { color: rgba(255,255,255,0.75); }
.bettrai-teamcard--teal .bettrai-teamcard__tag { background: #0f8a8a; color: #fff; }
.bettrai-teamcard--teal .bettrai-teamcard__tag span { color: rgba(255,255,255,0.82); }

/* ------------------------------ CORE VALUES ---------------------------- */
.bettrai-about-values { background: #f7fafc; padding: clamp(64px, 8vw, 108px) 0; }
.bettrai-about-values__head { text-align: center; max-width: 880px; margin: 0 auto clamp(40px, 4.5vw, 60px); }
.bettrai-about-values__head .bettrai-about-h2,
.bettrai-about-values__head h1,
.bettrai-about-values__head h2 {
	margin: 0;
	color: rgb(72, 72, 104);
	font-size: clamp(2rem, 3.4vw, 48px);
	line-height: 1.08;
}
.bettrai-about-values__head .bettrai-about-h2 span,
.bettrai-about-values__head h1 span,
.bettrai-about-values__head h2 span {
	color: var(--ab-teal);
}
@media (min-width: 992px) {
	.bettrai-about-values__head .bettrai-about-h2,
	.bettrai-about-values__head h1,
	.bettrai-about-values__head h2 {
		font-size: 48px;
		line-height: 1.08;
		white-space: nowrap;
	}
}
.bettrai-about-values__head p { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 18px auto 0; max-width: 720px; }
.bettrai-about-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bettrai-about-valuecard {
	background: #dff6f0;
	border: 1px solid #e9eef4;
	border-radius: 18px;
	padding: clamp(36px, 3.5vw, 48px) clamp(28px, 2.6vw, 36px);
	min-height: clamp(320px, 24vw, 360px);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-shadow: 0 1px 2px rgba(20, 40, 60, 0.03);
}
.bettrai-about-valuecard:nth-child(odd) {
	background: #dff6f0;
}
.bettrai-about-valuecard:nth-child(even) {
	background: #cfeffa;
}
.bettrai-about-valuecard__icon {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	color: var(--ab-teal);
	margin-bottom: 20px;
	flex: none;
}
.bettrai-about-valuecard__icon svg {
	width: 32px;
	height: 32px;
	stroke: var(--ab-teal);
	display: block;
}
.bettrai-about-valuecard__title { font-family: var(--bettrai-font-heading); font-size: 1.28rem; font-weight: 700; color: var(--ab-ink); line-height: 1.25; margin: 0 0 12px; }
.bettrai-about-valuecard__body { font-family: var(--bettrai-font); font-weight: 400; font-size: 16px; line-height: 27px; color: #8D8D9A; margin: 0; }

/* ---------------------------- COMMITMENT ------------------------------- */
/* Height/arrangement matched to .bettrai-sophie-connected (Providers CTA). */
.bettrai-about-commit {
	position: relative;
	min-height: clamp(520px, 48vw, 680px);
	background-size: cover;
	background-position: center;
	padding: clamp(120px, 14vw, 190px) 0;
	display: flex;
	align-items: center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.bettrai-about-commit__video {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.bettrai-about-commit__overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(8, 16, 40, 0.55) 0%, rgba(8, 16, 40, 0) 22%),
		linear-gradient(90deg, rgba(8, 16, 40, 0.40) 0%, rgba(8, 16, 40, 0.18) 55%, rgba(8, 16, 40, 0.05) 100%);
}
.bettrai-about-commit__inner {
	position: relative;
	color: #fff;
	width: 100%;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* This element also has the .bettrai-container class - only reset the
	   block (vertical) padding here, never padding-inline, or it wipes out
	   .bettrai-container's own left/right gutter and the text no longer
	   lines up with the grid/cards above and below. */
	padding-block: 0;
}
.bettrai-about-commit__inner > * {
	max-width: 640px;
}
.bettrai-about-commit__title {
	font-family: var(--bettrai-font-heading);
	font-weight: 650;
	font-size: clamp(3rem, 4.6vw, 68px);
	line-height: 1.08;
	max-width: 820px;
	margin: 0 0 32px;
}
.bettrai-about-commit__sub,
.bettrai-about-commit__inner > p {
	font-family: var(--bettrai-font);
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	line-height: 1.6;
	max-width: 600px;
	margin: 0;
}
/* ------------------------- QUADRUPLE AIM GUARANTEE ----------------------- */
.bettrai-about-aim { padding: clamp(64px, 8vw, 108px) 0; }
.bettrai-about-aim__head { text-align: center; max-width: 820px; margin: 0 auto clamp(40px, 4.5vw, 56px); }
.bettrai-about-aim__head h1,
.bettrai-about-aim__head .bettrai-about-h2 {
	font-family: var(--bettrai-font-heading);
	font-size: clamp(2rem, 3.4vw, 48px);
	font-weight: 700;
	color: rgb(72, 72, 104);
	line-height: 1.1;
	margin: 0;
}
@media (min-width: 992px) {
	.bettrai-about-aim__head h1,
	.bettrai-about-aim__head .bettrai-about-h2 {
		font-size: 48px;
		line-height: 1.1;
		white-space: nowrap;
	}
}
.bettrai-about-aim__head p {
	font-family: var(--bettrai-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: #8D8D9A;
	margin: 16px auto 0;
	max-width: 780px;
}
.bettrai-about-aim__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.bettrai-about-aim__grid .bettrai-programs-ocard {
	grid-column: span 1 !important;
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	height: 380px;
	min-height: 380px;
	display: flex;
	align-items: flex-end;
	padding: 20px;
}
.bettrai-about-aim__grid .bettrai-about-aim__featured,
.bettrai-about-aim__grid .bettrai-programs-ocard:first-child {
	grid-column: 1 / -1 !important;
	height: clamp(340px, 28vw, 420px);
	min-height: 340px;
}
.bettrai-about-aim__grid .bettrai-about-aim__featured {
	align-items: flex-end;
	padding: clamp(28px, 3.5vw, 44px);
}
.bettrai-about-aim__grid .bettrai-about-aim__featured::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(8, 16, 40, 0) 55%, rgba(8, 16, 40, 0.55) 100%);
	pointer-events: none;
}
.bettrai-about-aim__featured-label {
	position: relative;
	z-index: 2;
	font-family: var(--bettrai-font-heading);
	font-size: clamp(1.3rem, 2vw, 1.6rem);
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.bettrai-about-aim__grid .bettrai-programs-ocard img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}
.bettrai-about-aim__grid .bettrai-programs-ocard:hover img {
	transform: scale(1.025);
}
@media (max-width: 991px) {
	.bettrai-about-aim__grid {
		grid-template-columns: 1fr;
	}
	.bettrai-about-aim__grid .bettrai-about-aim__featured,
	.bettrai-about-aim__grid .bettrai-programs-ocard {
		grid-column: span 1 !important;
		height: 340px;
		min-height: 340px;
	}
}

/* ---------------------------- PARTNERS --------------------------------- */
.bettrai-about-partners { background: linear-gradient(180deg, #eaf3fb 0%, #eef5fc 100%); padding: clamp(56px, 7vw, 100px) 0; }
.bettrai-about-partners__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: center; }
.bettrai-about-partners__copy .bettrai-about-h2 { margin-bottom: 18px; }
.bettrai-about-partners__copy p { color: var(--ab-body); line-height: 1.7; margin: 0 0 28px; max-width: 400px; }
.bettrai-about-partners__actions { display: flex; align-items: center; gap: 12px; }
.bettrai-about-partners__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.bettrai-about-logo {
	display: flex; align-items: center; justify-content: center;
	background: rgba(190, 226, 219, 0.28); border-radius: 16px; min-height: 130px; padding: 24px;
}
.bettrai-about-logo img { max-height: 56px; width: auto; opacity: 0.5; filter: grayscale(1); }
.bettrai-about-logo--1 { transform: translateY(-14px); }
.bettrai-about-logo--4 { transform: translateY(-14px); }
.bettrai-about-logo--5 { grid-column: 1; transform: translateY(-14px); }

/* -------------------------------- FAQ ---------------------------------- */
.bettrai-about-faq { padding: clamp(56px, 7vw, 96px) 0; }
.bettrai-about-faq__head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.bettrai-about-faq__head p { color: var(--ab-body); line-height: 1.7; margin: 16px 0 0; }
.bettrai-about-faq__list { max-width: 900px; margin: 0 auto; }
.bettrai-about-faq .bettrai-faq__answer p { font-size: 18px; color: rgba(102,102,118,0.88); line-height: 30px; }

/* ----------------------------- BOTTOM CTA ------------------------------ */
.bettrai-about-cta { padding: 0 0 clamp(56px, 7vw, 100px); }
.bettrai-about-cta__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: stretch; }
.bettrai-about-cta__panel {
	position: relative;
	background: linear-gradient(120deg, #2340c8 0%, #2f6fd0 52%, #3aa9c9 100%);
	border-radius: 24px; padding: clamp(34px, 4vw, 60px); color: #fff;
	display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.bettrai-about-cta__mark { position: absolute; top: 30px; right: 30px; width: 40px; opacity: 0.9; }
.bettrai-about-cta__panel h2 { font-family: var(--bettrai-font-heading); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.08; margin: 0 0 16px; }
.bettrai-about-cta__panel h2 span { color: rgba(255, 255, 255, 0.72); }
.bettrai-about-cta__panel p { color: rgba(255, 255, 255, 0.9); line-height: 1.65; margin: 0 0 28px; max-width: 420px; }
.bettrai-about-cta__actions { display: flex; align-items: center; gap: 12px; }
.bettrai-about-cta__media { border-radius: 24px; overflow: hidden; }
.bettrai-about-cta__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 1024px) {
	.bettrai-about-team__grid { grid-template-columns: repeat(2, 1fr); }
	.bettrai-about-values__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
	.bettrai-about-values__grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
	.bettrai-about-hero__inner { min-height: 560px; padding-top: 6px; padding-bottom: 110px; align-items: flex-start; }
	.bettrai-about-hero__title { font-size: clamp(1.9rem, 8vw, 2.5rem); line-height: 1.18; font-weight: 800; margin: 16px 0 8px; }
	.bettrai-about-hero__lead { margin-bottom: 20px; }
	.bettrai-about-snapshot__grid,
	.bettrai-about-mv__head,
	.bettrai-about-mission__inner,
	.bettrai-about-workflow__head,
	.bettrai-about-partners__inner,
	.bettrai-about-cta__grid { grid-template-columns: 1fr; gap: 34px; }
	.bettrai-about-workflow__head p { text-align: left; }
	.bettrai-about-snapshot__grid.bettrai-about-snapshot__grid { gap: 28px; }
	.bettrai-about-snapshot { padding-top: 32px; }
	/* Panels: stack copy above the image, image no longer absolute. */
	.bettrai-about-mvpanel--media { padding-right: clamp(32px, 4vw, 56px); padding-bottom: 0; }
	.bettrai-about-mvpanel__media {
		position: relative; right: auto; width: min(360px, 80%); margin: 24px auto 0;
		display: flex; justify-content: center;
	}
	.bettrai-about-mvpanel--media::before,
	.bettrai-about-mvpanel--media::after { display: none; }
	.bettrai-about-mvpanel__media img {
		height: auto !important; width: 100% !important; max-width: 100%;
	}
	.bettrai-about-workflow__grid { grid-template-columns: 1fr; }
	.bettrai-about-stats { grid-template-columns: 1fr 1fr; }
	.bettrai-about-stat:nth-child(2) { border-right: 0; }
	.bettrai-about-cta__media { min-height: 260px; }
}

@media (max-width: 1024px) {
	/* Tablet only: keep just the two green boxes (stat + card) side by
	   side, dropping both photo tiles entirely - the collage's fixed
	   520px min-height/2x2 grid otherwise leaves the photos oddly cropped
	   at this width. True mobile gets its own stacked treatment below. */
	.bettrai-about-collage {
		grid-template-columns: repeat(2, 1fr); grid-template-rows: none;
		min-height: 0; gap: 18px;
	}
	.bettrai-about-collage__pic { display: none; }
	.bettrai-about-collage__stat,
	.bettrai-about-collage__card { min-height: 200px; }
	.bettrai-about-stats {
		grid-template-columns: 1fr 1fr; gap: 12px; padding: 0; background: transparent;
		box-shadow: none; border-radius: 0;
	}
	.bettrai-about-stat {
		border-right: 0 !important; flex-direction: column; align-items: flex-start; gap: 10px;
		background: #fff; border-radius: 16px; box-shadow: var(--bettrai-shadow-card); padding: 18px;
	}
	.bettrai-about-stat__ic { width: 46px; height: 46px; }
	.bettrai-about-stat__ic svg { width: 22px; height: 22px; }
	.bettrai-about-mv { padding-top: 40px; }
	.bettrai-about-values { padding-bottom: 40px; }
	.bettrai-about-aim { padding-top: 40px; }
	.bettrai-about-mission__media { order: 2; }
	.bettrai-about-mission__copy { order: 1; }
	.bettrai-about-team__head { text-align: left; max-width: none; }
	.bettrai-about-team__head .bettrai-about-h2,
	.bettrai-about-team__head h1,
	.bettrai-about-team__head h2 { text-align: left; }
	.bettrai-about-team__head p { text-align: left; }
	.bettrai-about-commit { padding-top: 48px; padding-bottom: 48px; min-height: clamp(520px, 48vw, 680px); }
	.bettrai-about-commit__title { font-size: 30px; line-height: 38px; margin-bottom: 16px; }
	/* Reduced from the mobile 0.68 - reads too dark at tablet width where
	   there's more image visible either side of the text. */
	.bettrai-about-commit__overlay { background: rgba(8, 16, 32, 0.5); }
	/* .bettrai-about-commit__inner already has the .bettrai-container class,
	   so its own padding-inline is the grid gutter - adding more here
	   double-indents the text past where the grid/cards above and below
	   align, instead of matching them. */
	.bettrai-about-values__head { text-align: left; max-width: none; }
	.bettrai-about-values__head .bettrai-about-h2,
	.bettrai-about-values__head h1,
	.bettrai-about-values__head h2 { text-align: left; }
	.bettrai-about-values__head p { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
	.bettrai-about-aim__head { text-align: left; max-width: none; }
	.bettrai-about-aim__head .bettrai-about-h2,
	.bettrai-about-aim__head h1,
	.bettrai-about-aim__head h2 { text-align: left; }
	.bettrai-about-aim__head p { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
	.bettrai-about-mv__head.bettrai-about-mv__head { gap: 12px; }
	.bettrai-about-mvpanel { padding-left: 20px; padding-right: 20px; border-radius: 18px; }
	.bettrai-about-partners__grid { grid-template-columns: 1fr; }
	.bettrai-about-logo { transform: none !important; }
}

/* ==========================================================================
   CONTACT PAGE  (.bettrai-contact-page)
   Scoped page built from Logos/Contact.png reference. Reuses shared
   header/footer, buttons, card radius, and token system so it belongs to the
   same design language as the Home page. Teal accent = #29BCBC.
   ========================================================================== */

/* Tokens are also exposed at :root so contact section widgets rendered by
   Elementor (which have no .bettrai-contact-page ancestor) still get the palette. */
:root,
.bettrai-contact-page {
	--ct-teal: #29BCBC;
	--ct-teal-soft: #5cc9c9;
	--ct-ink: #24244d;
	--ct-navy: #0b1533;
	--ct-body: #6a6a80;
	--ct-mint: #d9efe9;
	--ct-mint-2: #cfe7f2;
	--ct-green: #0f6b56;
	--ct-green-2: #0b5344;
}
.bettrai-contact-page {
	font-family: var(--bettrai-font);
	color: var(--ct-ink);
	background: #fff;
	overflow-x: hidden;
}
.bettrai-contact-page img { max-width: 100%; display: block; }

/* Shared heading */
.bettrai-contact-h2 {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	color: rgb(72, 72, 104);
	line-height: 1.12;
	letter-spacing: -0.01em;
	margin: 0;
	font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}

.bettrai-contact-eyebrow {
	display: inline-block;
	padding: 8px 20px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 999px;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Square outline arrow button */
.bettrai-contact-square {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px;
	border-radius: var(--bettrai-radius-md);
	border: 1.5px solid rgba(255, 255, 255, 0.55);
	color: #fff; background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.15s ease, color 0.15s ease;
	flex: none;
}
.bettrai-contact-square svg { width: 20px; height: 20px; }
.bettrai-contact-square:hover { background: #fff; color: var(--ct-navy); }
.bettrai-contact-square--onblue { background: #fff; color: var(--ct-teal); border-color: #fff; }
.bettrai-contact-square--onblue:hover { background: var(--ct-teal); color: #fff; }

/* ------------------------------- HEADER -------------------------------- */
.bettrai-contact-page .bettrai-hero__header { background: rgba(255,255,255,0.10); }

/* ------------------------------- HERO ---------------------------------- */
.bettrai-contact-hero {
	position: relative; background-size: cover; background-position: center;
	color: #fff; overflow: hidden; isolation: isolate;
}
.bettrai-contact-hero__overlay {
	position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(105deg, rgba(9, 46, 54, 0.9) 0%, rgba(12, 58, 64, 0.62) 44%, rgba(12, 58, 64, 0.2) 100%),
		linear-gradient(0deg, rgba(7, 30, 36, 0.45), rgba(7, 30, 36, 0.08));
}
.bettrai-contact-hero__inner {
	min-height: 560px; display: flex; align-items: center;
	padding-top: 150px; padding-bottom: 88px;
}
.bettrai-contact-hero__copy { max-width: 560px; }
.bettrai-contact-hero__title {
	font-family: var(--bettrai-font-heading); font-weight: 700;
	font-size: clamp(2.3rem, 4.6vw, 3.6rem);
	line-height: 1.06; letter-spacing: -0.015em; margin: 22px 0 20px;
}
.bettrai-contact-hero__lead {
	font-family: var(--bettrai-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: rgba(255, 255, 255, 0.9);
	max-width: 540px;
	margin: 0 0 30px;
}
.bettrai-contact-hero__actions { display: flex; align-items: center; gap: 14px; }

/* -------------------------- MAIN (IMAGE + FORM) ------------------------ */
body.page-id-11 {
	background: linear-gradient(180deg, #F4FBFC 0%, #EAF5F8 100%);
}
.bettrai-contact-main {
	padding: clamp(56px, 7vw, 90px) 0 clamp(40px, 5vw, 60px);
}
.bettrai-contact-main__grid { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: clamp(20px, 2.4vw, 36px); align-items: stretch; }

.bettrai-contact-figure {
	position: relative; border-radius: 18px; overflow: hidden;
	background-size: cover; background-position: center;
	min-height: 660px; box-shadow: var(--bettrai-shadow-card);
}

.bettrai-contact-figure__mark {
	position: absolute; top: 20px; left: 20px; z-index: 2;
	display: inline-flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 999px;
	background: var(--ct-teal); box-shadow: var(--bettrai-shadow-soft);
}
.bettrai-contact-figure__mark img { width: 28px; height: 28px; }

.bettrai-contact-figure__scrim {
	position: absolute; inset: auto 0 0 0; height: 45%; z-index: 1;
	background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.72) 100%);
	pointer-events: none;
}
.bettrai-contact-figure__caption {
	position: absolute; left: 28px; right: 28px; bottom: 26px; z-index: 2;
	color: #fff; font-family: var(--bettrai-font-heading); font-weight: 600;
	font-size: clamp(1.3rem, 1.8vw, 1.65rem); line-height: 1.28; margin: 0;
}

.bettrai-contact-form {
	background: #fff; border: 1px solid #eef1f6; border-radius: 20px;
	padding: clamp(28px, 3vw, 44px); box-shadow: var(--bettrai-shadow-card);
	display: flex; flex-direction: column; justify-content: center;
}

.bettrai-contact-form__lead { font-family: var(--bettrai-font); font-weight: 400; font-size: 18px; line-height: 30px; color: #8D8D9A; margin: 12px 0 26px; max-width: 440px; }
.bettrai-contact-form__fields { display: flex; flex-direction: column; gap: 16px; }
.bettrai-contact-field--split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Generic side-by-side row for the Form Fields repeater's per-field Width control
   (25/33/50/100%) — each child .bettrai-contact-field gets an inline width:X%. */
.bettrai-contact-fields-row { display: flex; flex-wrap: wrap; gap: 16px; }
.bettrai-contact-fields-row .bettrai-contact-field { flex: 0 0 auto; box-sizing: border-box; }
@media (max-width: 640px) {
	.bettrai-contact-fields-row .bettrai-contact-field { width: 100% !important; }
}

.bettrai-contact-form input[type],
.bettrai-contact-form textarea {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	font-family: var(--bettrai-font) !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	line-height: 22px !important;
	color: #8D8D9A !important;
	background: rgba(72, 110, 168, 0.05) !important;
	border: 1px solid rgba(72, 110, 168, 0.14) !important;
	border-radius: 14px !important;
	padding: 16px 18px !important;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.bettrai-contact-form textarea { resize: vertical !important; min-height: 140px !important; }
.bettrai-contact-form input[type]::placeholder,
.bettrai-contact-form textarea::placeholder {
	font-family: var(--bettrai-font) !important; font-weight: 400 !important;
	font-size: 15px !important; line-height: 22px !important; color: #8D8D9A !important;
}
.bettrai-contact-form input[type]:focus,
.bettrai-contact-form textarea:focus {
	outline: none !important; background: #fff !important;
	border-color: var(--ct-teal) !important; box-shadow: 0 0 0 3px rgba(41,188,188,0.14) !important;
}
.bettrai-contact-form input[type]:user-invalid,
.bettrai-contact-form textarea:user-invalid {
	border-color: #e0575e !important; background: rgba(224, 87, 94, 0.05) !important;
}
.bettrai-contact-form input[type]:user-invalid:focus,
.bettrai-contact-form textarea:user-invalid:focus {
	box-shadow: 0 0 0 3px rgba(224, 87, 94, 0.14) !important;
}
.bettrai-contact-submit {
	width: 100% !important; margin-top: 6px !important;
	min-height: 58px !important; padding-block: 16px !important;
	background: var(--bettrai-btn-green) !important;
	border-color: var(--bettrai-btn-green) !important;
	color: #fff !important;
	border-radius: var(--bettrai-radius-md) !important;
}
.bettrai-contact-submit:hover { background: var(--bettrai-teal-hover) !important; border-color: var(--bettrai-teal-hover) !important; }
.bettrai-contact-submit:disabled { opacity: 0.7; cursor: not-allowed; }

/* Honeypot: off-screen for sighted users/screen readers, but still present in
   the DOM so simple form-filling bots submit it and get silently rejected. */
.bettrai-contact-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	margin: 0 !important;
}

.bettrai-contact-form__notice {
	font-family: var(--bettrai-font);
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	padding: 14px 18px;
	border-radius: var(--bettrai-radius-md);
	margin-bottom: 16px;
}
.bettrai-contact-form__notice--success { background: rgba(22, 132, 95, 0.1); color: #16845F; }
.bettrai-contact-form__notice--error { background: rgba(224, 87, 94, 0.1); color: #E0575E; }

/* --------------------------- INFO CARDS -------------------------------- */
.bettrai-contact-info { padding: clamp(30px, 4vw, 48px) 0 0; }
.bettrai-contact-info__divider { grid-column: 1 / -1; height: 1px; background: rgba(11, 21, 51, 0.08); margin-bottom: clamp(30px, 4vw, 48px); }
.bettrai-contact-info__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bettrai-contact-card {
	background: var(--ct-mint); border-radius: 16px; padding: 34px 26px; text-align: center;
}
.bettrai-contact-card:nth-child(2) { background: var(--ct-mint-2); }
.bettrai-contact-card__ic {
	display: inline-flex; align-items: center; justify-content: center;
	width: 52px; height: 52px; color: var(--ct-teal); margin-bottom: 14px;
}
.bettrai-contact-card__ic svg { width: 30px; height: 30px; }
.bettrai-contact-card h3 { font-family: var(--bettrai-font-heading); font-size: 1.16rem; font-weight: 700; color: var(--ct-ink); margin: 0 0 8px; }
.bettrai-contact-card p { font-size: 0.92rem; line-height: 1.55; color: var(--ct-body); margin: 0; }
.bettrai-contact-card a { color: inherit; text-decoration: none; }
.bettrai-contact-card a:hover { color: var(--ct-teal); }

/* ------------------------------- MAP ----------------------------------- */
.bettrai-contact-map { padding: clamp(16px, 2vw, 24px) 0 clamp(56px, 6vw, 90px); }
.bettrai-contact-map__frame { display: block; border-radius: 16px; overflow: hidden; box-shadow: var(--bettrai-shadow-soft); }
.bettrai-contact-map__frame img,
.bettrai-contact-map__frame iframe { display: block; width: 100%; height: clamp(300px, 40vw, 460px); border: 0; object-fit: cover; }

/* ------------------------ DARK GREEN CTA STRIP ------------------------- */
.bettrai-contact-strip-wrap { padding: clamp(12px, 1.6vw, 20px) 0; }
.bettrai-contact-strip {
	background: linear-gradient(120deg, #0f6b56 0%, #0b5344 55%, #0a3f38 100%);
	border-radius: 18px; padding: clamp(26px, 3vw, 40px) clamp(26px, 3.4vw, 46px);
	display: flex; align-items: center; gap: 26px; color: #fff; flex-wrap: wrap;
}
.bettrai-contact-strip__mark {
	width: 54px; height: 54px; border-radius: 14px; flex: none;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,0.12); color: #fff;
}
.bettrai-contact-strip__mark svg { width: 28px; height: 28px; }
.bettrai-contact-strip__mark-img { width: 28px; height: 28px; object-fit: contain; display: block; }
.bettrai-contact-strip__copy { flex: 1 1 300px; }
.bettrai-contact-strip__copy h3 { font-family: var(--bettrai-font-heading); font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; margin: 0 0 6px; }
.bettrai-contact-strip__copy p { color: rgba(255,255,255,0.85); line-height: 1.55; margin: 0; font-size: 0.94rem; }
.bettrai-contact-strip__actions { display: flex; align-items: center; gap: 12px; }

/* ----------------------------- BOTTOM CTA ------------------------------ */
.bettrai-contact-cta { padding: clamp(12px, 1.6vw, 20px) 0 clamp(56px, 7vw, 100px); }
.bettrai-contact-cta__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 26px; align-items: stretch; }
.bettrai-contact-cta__panel {
	position: relative;
	background: linear-gradient(120deg, #2340c8 0%, #2f6fd0 52%, #3aa9c9 100%);
	border-radius: 24px; padding: clamp(34px, 4vw, 60px); color: #fff;
	display: flex; flex-direction: column; justify-content: center; overflow: hidden;
}
.bettrai-contact-cta__mark { position: absolute; top: 30px; right: 30px; width: 40px; opacity: 0.9; }
.bettrai-contact-cta__panel h2 { font-family: var(--bettrai-font-heading); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 700; line-height: 1.08; margin: 0 0 16px; }
.bettrai-contact-cta__panel h2 span { color: rgba(255, 255, 255, 0.72); }
.bettrai-contact-cta__panel p { color: rgba(255, 255, 255, 0.9); line-height: 1.65; margin: 0 0 28px; max-width: 420px; }
.bettrai-contact-cta__actions { display: flex; align-items: center; gap: 12px; }
.bettrai-contact-cta__media { border-radius: 24px; overflow: hidden; }
.bettrai-contact-cta__media img { width: 100%; height: 100%; object-fit: cover; }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 860px) {
	.bettrai-contact-hero__inner { min-height: 480px; padding-top: 130px; }
	.bettrai-contact-main__grid,
	.bettrai-contact-cta__grid { grid-template-columns: 1fr; }
	.bettrai-contact-figure { min-height: 360px; order: 2; }
	.bettrai-contact-form { order: 1; }
	.bettrai-contact-info__grid { grid-template-columns: 1fr; }
	.bettrai-contact-strip { flex-direction: column; align-items: flex-start; }
	.bettrai-contact-cta__media { min-height: 260px; }
}

@media (max-width: 520px) {
	.bettrai-contact-field--split { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Sticky-header docking on inner pages.
   The page-specific glass rules (e.g. .bettrai-payers-page .bettrai-hero__header)
   appear later in this file than the generic `.is-scrolled` white state, so
   they win on the cascade and the bar stays glassy while scrolling. Re-assert
   the solid-white docked bar for every inner page that uses the glass header,
   matching the Home/Sophie behaviour.
   -------------------------------------------------------------------------- */
.bettrai-payers-page .bettrai-hero__header.is-scrolled,
.bettrai-providers-page .bettrai-hero__header.is-scrolled,
.bettrai-programs-page .bettrai-hero__header.is-scrolled,
.bettrai-about-page .bettrai-hero__header.is-scrolled,
.bettrai-contact-page .bettrai-hero__header.is-scrolled {
	background: #ffffff;
	border-color: rgba(7, 18, 74, 0.08);
	box-shadow: 0 10px 30px rgba(11, 31, 51, 0.18);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* ==========================================================================
   PAYERS PLATFORM PANEL — tabbed workflow graphics
   Three bespoke "product story" illustrations (Quality / Cost / Ops) that sit
   in the same footprint as the Member Experience benchmark. Cards are placed
   on a fixed 620x470 stage by percentage; connectors live in an SVG overlay
   sharing that coordinate system. All text scales with the stage via cqw so
   the graphic stays legible at any width. Motion is CSS-only, gated on
   `.pp-stage.is-play`; JS just toggles that class per active pane.
   ========================================================================== */
.pp-stage {
	position: relative;
	z-index: 1;
	width: min(108%, 760px);
	aspect-ratio: 620 / 470;
	margin: 0 auto;
	align-self: center;
	container-type: inline-size;
	font-family: inherit;
}
.pp-wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 1;
}
.pp-wire {
	fill: none;
	stroke: #8bc9cc;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.pp-wire--esc { stroke: var(--pp-teal); stroke-width: 1.7; }
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-wire {
	animation: pp-draw 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards;
	animation-delay: var(--d, 0s);
}
@keyframes pp-draw { to { stroke-dashoffset: 0; } }

/* --- cards --------------------------------------------------------------- */
.pp-card {
	position: absolute;
	box-sizing: border-box;
	z-index: 2;
	background: #fff;
	border-radius: 1.7cqw;
	padding: 1.3cqw 1.6cqw;
	box-shadow: 0 1cqw 2.6cqw rgba(7, 18, 74, 0.10);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.4cqw;
}
.pp-card b {
	font-size: 1.7cqw;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--pp-ink);
	line-height: 1.25;
	display: flex;
	align-items: center;
	gap: 0.6cqw;
}
.pp-card .pp-sub { font-size: 1.2cqw; font-weight: 600; color: var(--pp-body); line-height: 1.35; }
.pp-card .pp-act { font-size: 1.1cqw; font-weight: 700; color: var(--pp-teal); line-height: 1.3; margin-top: 0.25cqw; }
.pp-card--green { background: var(--pp-green); }
.pp-card--green b, .pp-card--green .pp-sub { color: #fff; }

.pp-card[data-in] { opacity: 0; transform: translateY(1.6cqw); }
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-card[data-in] {
	animation: pp-rise 0.6s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay: var(--d, 0s);
}
@keyframes pp-rise { to { opacity: 1; transform: none; } }

/* check badges */
.pp-chk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3cqw;
	height: 2.3cqw;
	min-width: 15px;
	min-height: 15px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
	font-size: 1.35cqw;
	line-height: 1;
	margin-left: auto;
	flex: none;
	opacity: 0;
}
.pp-step .pp-chk, .pp-comp .pp-chk { background: var(--pp-teal); color: #fff; }
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-chk {
	animation: pp-pop 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
	animation-delay: var(--d, 0s);
}
@keyframes pp-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }

/* badges + tags */
.pp-badge { align-self: flex-start; font-size: 1.1cqw; font-weight: 700; padding: 0.5cqw 1.1cqw; border-radius: 999px; margin-top: 0.5cqw; }
.pp-badge--flag { background: var(--pp-mint); color: var(--pp-green); }
.pp-tag { font-size: 1cqw; font-weight: 700; color: var(--pp-teal); background: var(--pp-mint); padding: 0.3cqw 0.8cqw; border-radius: 999px; }

/* value cross-fade (metric update / member risk status) */
.pp-swap__a { position: relative; display: inline-block; }
.pp-swap__b { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-swap__a { animation: pp-fade-out 0.5s ease forwards; animation-delay: var(--u, 1.4s); }
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-swap__b { animation: pp-fade-in 0.5s ease forwards; animation-delay: var(--u, 1.4s); }
@keyframes pp-fade-out { to { opacity: 0; } }
@keyframes pp-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Member Experience -------------------------------------------------
   CSS Grid instead of absolute-percentage positioning: 3 equal columns
   (Sophie/Phone/Faxes | Smart intake/Data entry | Proactive/Care-gap),
   3 rows. Grid guarantees consistent, tight spacing regardless of the
   container's actual pixel width — no more fragile percentage math. */
.pp-mex-grid,
.pp-mex-grid *,
.pp-mex-grid *::before,
.pp-mex-grid *::after {
	box-sizing: border-box;
}
.pp-mex-grid {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, auto);
	column-gap: clamp(14px, 1.6vw, 22px);
	row-gap: clamp(46px, 5.5vw, 84px);
	--mex-cg: clamp(14px, 1.6vw, 22px);
	--mex-rg: clamp(46px, 5.5vw, 84px);
}
.pp-mex-sophie { position: relative; z-index: 2; grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pp-mex-sophie__ava { position: relative; width: clamp(58px, 6vw, 78px); height: clamp(58px, 6vw, 78px); }
.pp-mex-sophie__ava img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pp-mex-sophie__dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--pp-teal); border: 2px solid #fff; }
.pp-mex-sophie__label { font-family: "Roboto", var(--bettrai-font); font-size: 0.85rem; font-weight: 700; color: var(--pp-ink); background: #fff; padding: 3px 12px; border-radius: 999px; box-shadow: 0 3px 8px rgba(7, 18, 74, 0.08); }
.pp-mex-sophie__ava::after { content: ''; position: absolute; z-index: -1; top: 53%; left: 60%; width: 220px; height: 1.6px; background: #8bc9cc; }

.pp-mex-card { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 6px; background: #fff; border-radius: 14px; box-shadow: 0 4px 12px rgba(7, 18, 74, 0.07); border: 1px solid rgba(11, 21, 51, 0.06); padding: 18px 40px 18px 20px; }
.pp-mex-card b { font-family: "Roboto", var(--bettrai-font); font-size: 0.86rem; font-weight: 700; color: var(--pp-ink); line-height: 1.2; }
.pp-mex-card .pp-sub { font-family: "Roboto", var(--bettrai-font); font-size: 0.85rem; font-weight: 600; color: rgba(11, 21, 51, 0.62); line-height: 1.4; }
.pp-mex-card .pp-mex-ic { position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 50%; background: transparent; color: var(--pp-teal); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.pp-mex-card .pp-mex-ic svg { width: 13px; height: 13px; }
.pp-mex-card--solid { background: var(--pp-green); border-color: transparent; }
.pp-mex-card--solid b { color: #fff; }
.pp-mex-card--solid .pp-sub { color: rgba(255, 255, 255, 0.85); }
.pp-mex-card--solid .pp-mex-ic,
.pp-mex-card--smart .pp-mex-ic,
.pp-mex-card--care .pp-mex-ic { background: var(--pp-teal); color: #fff; }
.pp-mex-card--solid .pp-mex-ic { background: rgba(255, 255, 255, 0.25); }
.pp-mex-card--dashed { border-width: 1.5px; border-style: dashed; border-color: rgba(41, 188, 188, 0.55); box-shadow: none; background: rgba(255, 255, 255, 0.55); }
.pp-mex-card--dashed b { font-family: 'Courier New', ui-monospace, monospace; font-weight: 700; }
.pp-mex-card--dashed .pp-sub { font-family: 'Courier New', ui-monospace, monospace; font-weight: 400; }

.pp-mex-card--smart { grid-column: 2; grid-row: 1; }
.pp-mex-card--proactive { grid-column: 3; grid-row: 1; }
.pp-mex-card--phone { grid-column: 1; grid-row: 2; }
.pp-mex-card--data { grid-column: 2; grid-row: 2; }
.pp-mex-card--faxes { grid-column: 1; grid-row: 3; }
.pp-mex-card--care { grid-column: 3; grid-row: 3; }

/* short connectors: exactly one gap track long, so pseudo-elements can be
   sized precisely with the same --mex-cg/--mex-rg variables the grid uses.
   Solid ones are the "AI path"; dashed ones are the "manual path" and
   march gently to read as an active, ongoing process. */
.pp-mex-card--smart::after { content: ''; position: absolute; z-index: 1; top: 50%; left: 100%; width: var(--mex-cg); height: 1.6px; background: #8bc9cc; }
.pp-mex-card--smart::before,
.pp-mex-card--phone::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 100%;
	width: 2px;
	height: var(--mex-rg);
	background: repeating-linear-gradient(to bottom, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 2px 26px;
	animation: pp-mex-dash-v 1.6s linear infinite;
}
.pp-mex-card--phone::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 100%;
	width: var(--mex-cg);
	height: 2px;
	background: repeating-linear-gradient(to right, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 26px 2px;
	animation: pp-mex-dash-h 1.6s linear infinite;
}
@keyframes pp-mex-dash-v { to { background-position-y: -26px; } }
@keyframes pp-mex-dash-h { to { background-position-x: -26px; } }

/* "Member Experience" workflow diagram (Sophie avatar + 6 connected cards)
   has zero responsive handling - a fixed 3-column sparse grid with explicit
   grid-column/grid-row placement per card. On phones this left cards
   overflowing off the right edge of the viewport (confirmed: cards
   rendered 43px past the viewport edge). Simplify to a plain single-column
   stacked list in natural DOM order and drop the connector lines/dashes,
   which only make sense in the spatial 3-column layout. Desktop/tablet
   untouched. */
@media (max-width: 1024px) {
	.pp-mex-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		row-gap: 12px;
	}
	.pp-mex-sophie,
	.pp-mex-card--smart,
	.pp-mex-card--proactive,
	.pp-mex-card--phone,
	.pp-mex-card--data,
	.pp-mex-card--faxes,
	.pp-mex-card--care {
		grid-column: 1;
		grid-row: auto;
	}
	.pp-mex-sophie { flex-direction: row; justify-content: flex-start; padding-bottom: 4px; }
	.pp-mex-sophie__ava::after,
	.pp-mex-card--smart::after,
	.pp-mex-card--smart::before,
	.pp-mex-card--phone::before,
	.pp-mex-card--phone::after {
		display: none;
	}
	.pp-mex-card { padding: 16px 18px; }

	/* Six stacked cards ran too tall for the phone viewport. Show only two
	   at a time and auto-rotate through the rest - see
	   initPayersMexCardsMobile() in frontend.js. The corner icon has no room
	   at this width, so it's dropped too. */
	.pp-mex-card .pp-mex-ic { display: none; }
	.pp-mex-card {
		display: flex;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition: opacity 0.45s ease, max-height 0.45s ease;
	}
	.pp-mex-card.is-mex-visible { max-height: 200px; opacity: 1; pointer-events: auto; }
	.pp-mex-line--care,
	.bettrai-payers-panel__flow::before { display: none !important; }
	.bettrai-payers-panel__flow { min-height: 0; justify-content: flex-start; align-self: start; }
	.bettrai-payers-panel__flow::after { display: none; }

	/* "Sophie Keeping Members Connected" overlay chip on the interaction
	   photo, mobile only: redundant with the heading/copy right below it and
	   just covers part of the photo at this width. Drop it. */
	.bettrai-payers-interaction__chip { display: none; }

	/* Cost Management graphic, mobile only: same overflow/overlap problem as
	   Member Experience above (fixed-grid + absolute rails/lines/floating
	   Sophie avatar). Stack in flow, drop the decorative rails/line/Sophie/
	   logo dot (no room at this width), keep the hub always visible, and
	   rotate the 4 side cards two at a time - see initPayersMexCardsMobile()
	   in frontend.js, which also drives this group. */
	.pp-cost-grid {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.pp-cost-sophie,
	.pp-cost-rail,
	.pp-cost-line,
	.pp-cost-dot { display: none; }
	.pp-cost-card,
	.pp-cost-hub {
		width: 100%;
	}
	.pp-cost-hub { order: -1; }
	.pp-cost-card {
		display: flex;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition: opacity 0.45s ease, max-height 0.45s ease;
	}
	.pp-cost-card.is-mex-visible { max-height: 200px; opacity: 1; pointer-events: auto; }

	/* Quality Performance graphic, mobile only: same fix - this one uses
	   inline left/top percentages on a fixed-aspect stage instead of CSS
	   grid, which is what caused the cards to pile up on top of each other
	   and the Sophie figure/blob to overlap the hub. Stack in flow, drop the
	   connector wires and hub decoration, keep the hub always visible, and
	   rotate the remaining cards two at a time. */
	.pp-stage.pp-qual {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		container-type: normal;
	}
	.pp-qual .pp-wires { display: none; }
	.pp-qual .pp-card {
		position: static;
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
		padding: 16px 18px;
	}
	.pp-qual .pp-card b { font-size: 0.95rem; }
	.pp-qual .pp-card .pp-sub { font-size: 0.85rem; }
	.pp-qual .pp-card .pp-act { font-size: 0.85rem; }
	.pp-qual .pp-metric__v { font-size: 1.5rem; }
	.pp-qual .pp-metric__v i { font-size: 0.85rem; }
	.pp-qual .pp-hub__big { font-size: 1.8rem; }
	.pp-qual .pp-hub__big span { font-size: 0.95rem; }
	.pp-qual .pp-hub__sub { font-size: 0.85rem; }
	.pp-qual .pp-badge--flag,
	.pp-qual .pp-tag { font-size: 0.78rem; height: auto; padding: 4px 10px; }
	.pp-qual .pp-tag--corner { position: static; display: inline-flex; margin-bottom: 6px; }
	.pp-qual .pp-hub__figure,
	.pp-qual .pp-hub__blob { display: none; }
	.pp-qual .pp-hub { order: -1; }
	.pp-qual .pp-card:not(.pp-hub) {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition: opacity 0.45s ease, max-height 0.45s ease;
	}
	.pp-qual .pp-card:not(.pp-hub).is-mex-visible { max-height: 200px; opacity: 1; pointer-events: auto; }

	/* Operations tab diagram (4th capability tab), mobile only: same fix as
	   Quality Performance above - inline % positioning on a fixed-aspect
	   stage. Keep the Sophie figure column always visible, stack the rest in
	   flow, rotate two at a time. */
	.pp-stage.pp-ops {
		display: flex;
		flex-direction: column;
		gap: 12px;
		width: 100%;
		height: auto;
		aspect-ratio: auto;
		container-type: normal;
	}
	.pp-ops .pp-wires { display: none; }
	.pp-ops .pp-card {
		position: static;
		width: 100%;
		height: auto;
		left: auto;
		top: auto;
		padding: 16px 18px;
	}
	.pp-ops .pp-card b { font-size: 0.95rem; }
	.pp-ops .pp-card .pp-sub { font-size: 0.85rem; }
	.pp-ops .pp-auto { order: -1; height: auto; padding: 12px; }
	.pp-ops .pp-auto__figure { max-height: 220px; width: auto; margin: 0 auto; display: block; }
	.pp-ops .pp-card:not(.pp-auto) {
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		transition: opacity 0.45s ease, max-height 0.45s ease;
	}
	.pp-ops .pp-card:not(.pp-auto).is-mex-visible { max-height: 200px; opacity: 1; pointer-events: auto; }

	/* "Everything Care Teams Need To / Deliver Better Care." headline,
	   mobile only: the hard <br> forced "Need To" onto its own centered
	   line, reading as a broken sentence at phone widths. Drop the forced
	   break and left-align so it wraps naturally as one continuous
	   headline. Desktop's two-line balance is untouched. */
	.bettrai-payers-need__head .bettrai-payers-h2--center { text-align: left; }
	.bettrai-payers-need__break { display: none; }
	.bettrai-payers-need__head .bettrai-payers-h2 span::before { content: " "; }

	/* "Align Clinical Quality With Financial Performance." head, mobile
	   only: left-align (matches the rest of the page's mobile headings) and
	   trim the oversized gap between the photo/tag block above and the
	   heading. */
	.bettrai-payers-align { padding-top: 32px; }
	.bettrai-payers-align__head { text-align: left; margin: 0 auto 32px; }
	.bettrai-payers-align__head .bettrai-payers-h2--center { text-align: left; }
	.bettrai-payers-align__break { display: none; }
	.bettrai-payers-align__head .bettrai-payers-h2 span::before { content: " "; }
}

/* Payers capability tab diagrams (Member Experience / Cost Management /
   Quality Performance / Operations), mobile only: the desktop diagrams are
   spatial/absolute layouts built for a wide canvas - adapting them in place
   (above) still fought their own positioning math and jumped/settled oddly
   while loading. Simpler and steadier: hide the desktop diagram outright
   below 860px and replace it with a plain, purpose-built mobile list built
   from the same card text - see initPayersMobileCardsFallback() in
   frontend.js, which reads each diagram's cards once and builds
   .pp-mobile-cards, then the existing initMexStyleRotation() driver rotates
   two of them at a time with a smooth crossfade. Desktop is untouched. */
.pp-mobile-cards,
.pp-mobile-cards__ava { display: none; }
@media (max-width: 1024px) {
	.pp-mex-grid,
	.pp-cost-grid,
	.pp-stage.pp-qual,
	.pp-stage.pp-ops { display: none !important; }

	.pp-mobile-cards__ava {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 4px;
	}
	.pp-mobile-cards__ava img {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		object-fit: cover;
		border: 2px solid var(--pp-teal);
	}
	.pp-mobile-cards__ava span {
		font-family: var(--bettrai-font-heading);
		font-size: 0.9rem;
		font-weight: 700;
		color: var(--pp-ink);
		background: #fff;
		padding: 4px 14px;
		border-radius: 999px;
		box-shadow: 0 3px 8px rgba(7, 18, 74, 0.08);
	}

	.pp-mobile-cards {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 4px 0;
	}
	.pp-mobile-card {
		background: #fff;
		border-radius: 14px;
		box-shadow: 0 4px 12px rgba(7, 18, 74, 0.07);
		border: 1px solid rgba(11, 21, 51, 0.06);
		padding: 18px 20px;
		min-height: 96px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 6px;
		opacity: 1;
		transition: opacity 0.22s ease;
	}
	.pp-mobile-card.is-fading { opacity: 0; }
	.pp-mobile-card b { font-family: var(--bettrai-font-heading); font-size: 0.95rem; font-weight: 700; color: var(--pp-ink); }
	.pp-mobile-card span { font-family: var(--bettrai-font); font-size: 0.85rem; font-weight: 600; color: rgba(11, 21, 51, 0.62); line-height: 1.4; }
}

/* "Cost Management" tab diagram (Sophie -> Claims/Risk -> hub -> Outreach/
   Savings) has the same problem as the Member Experience diagram above: a
   fixed multi-column grid (150px 150px side columns + rail columns) with no
   responsive handling at all, overflowing off the viewport on phones.
   Same fix: stack to a single column in natural DOM order, drop the
   decorative rail/line connectors (spatial-only), keep the closing badge. */
@media (max-width: 767px) {
	.pp-cost-grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		row-gap: 12px;
	}
	.pp-cost-sophie,
	.pp-cost-card--claims,
	.pp-cost-card--risk,
	.pp-cost-hub,
	.pp-cost-card--outreach,
	.pp-cost-card--savings,
	.pp-cost-dot {
		grid-column: 1;
		grid-row: auto;
		justify-self: center;
	}
	.pp-cost-rail,
	.pp-cost-sophie::after,
	.pp-cost-card--claims::after,
	.pp-cost-card--outreach::after,
	.pp-cost-card--risk::after,
	.pp-cost-card--savings::after,
	.pp-cost-line {
		display: none;
	}
	.pp-cost-hub { width: 100%; }
}

/* long connector: Proactive outreach -> Care-gap insight skips row 2
   entirely, so its length depends on that row's real content height —
   handled as its own grid item spanning all 3 rows instead of guessed math. */
.pp-mex-line--care { grid-column: 3; grid-row: 1 / 4; position: relative; z-index: 1; pointer-events: none; }
.pp-mex-line--care::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.8px; background: #8bc9cc; }

/* --- Quality Performance ------------------------------------------------- */
/* Cards show immediately, no fade-in — only the connector lines animate. */
.pp-qual .pp-card[data-in], .pp-qual .pp-sophie-float[data-in] { opacity: 1; transform: none; animation: none !important; }
/* Tighter, crisper elevation + roomier type scale for this tab only. */
.pp-qual .pp-card { box-shadow: 0 0.5cqw 1.4cqw rgba(7, 18, 74, 0.07); border: 1px solid rgba(11, 21, 51, 0.05); padding: 1.3cqw 1.6cqw; }
.pp-qual .pp-card--green { border-color: transparent; }
.pp-qual .pp-card b { font-size: 1.7cqw; }
.pp-qual .pp-card .pp-sub { font-size: 1.25cqw; color: rgba(11, 21, 51, 0.62); }
.pp-qual .pp-card .pp-act { font-size: 1.25cqw; }
.pp-qual .pp-card--green .pp-sub { color: rgba(255, 255, 255, 0.8); }

.pp-metric { gap: 0.15cqw; }
.pp-metric__v { font-style: normal; font-size: 2.2cqw; font-weight: 650; color: var(--pp-teal); position: relative; display: inline-block; }
.pp-metric__v i { font-style: normal; font-size: 1.25cqw; color: var(--pp-green); }

/* Sophie sits inside the hub card on a teal blob, right side, overflowing
   slightly above the card top edge for a bit of life/depth. */
.pp-hub__figure {
	position: absolute;
	z-index: 4;
	right: 0.9cqw;
	top: 50%;
	transform: translateY(-50%);
	width: 16cqw;
	max-width: 175px;
	min-width: 106px;
	height: auto;
	pointer-events: none;
}
.pp-hub {
	position: relative;
	overflow: visible;
	isolation: isolate;
}
.pp-hub__blob {
	position: absolute;
	z-index: 3;
	right: 1.7cqw;
	top: 50%;
	transform: translateY(-50%);
	width: 15cqw;
	height: 15cqw;
	max-width: 160px;
	max-height: 160px;
	min-width: 96px;
	min-height: 96px;
	border-radius: 48% 52% 55% 45% / 52% 45% 55% 48%;
	background: linear-gradient(160deg, var(--pp-teal) 0%, var(--pp-mint) 100%);
	opacity: 0.45;
}

/* hub: the "12 Care Gaps" card — the central Quality Performance hub */
.pp-hub { align-items: flex-start; gap: 0.4cqw; border: 1.5px solid rgba(41, 188, 188, 0.5); padding: 1.7cqw 12cqw 1.7cqw 1.9cqw; }
.pp-hub__big { font-size: 3.1cqw; margin-top: 0.2cqw; }
.pp-hub__big span { font-size: 1.7cqw; font-weight: 700; }
.pp-hub__sub { font-size: 1.25cqw; color: rgba(11, 21, 51, 0.62); margin-top: -0.3cqw; }

.pp-case--flag { border: 1.5px solid var(--pp-teal); }
.pp-case { transition: none; }
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-case[data-in] {
	animation: pp-rise 0.6s cubic-bezier(0.4, 0, 0.2, 1) both, pp-case-activate 0.5s ease-out both;
	animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.35s);
}
@keyframes pp-case-activate {
	0% { box-shadow: 0 0.5cqw 1.4cqw rgba(7, 18, 74, 0.07); border-color: rgba(41, 188, 188, 0.15); }
	40% { box-shadow: 0 0 0 3px rgba(41, 188, 188, 0.18); border-color: var(--pp-teal); }
	100% { box-shadow: 0 0.5cqw 1.4cqw rgba(7, 18, 74, 0.07); }
}

/* Gap Closed: icon, title, and copy stacked and centered as one column */
.pp-qual .pp-done { align-items: center; text-align: center; gap: 0.35cqw; }
.pp-qual .pp-done b { justify-content: center; }
.pp-qual .pp-done { gap: 0.55cqw; }
.pp-qual .pp-done .pp-chk {
	position: static;
	margin: 0 0 0.5cqw;
	flex: none;
	width: clamp(20px, 2.2cqw, 26px);
	height: clamp(20px, 2.2cqw, 26px);
	font-size: 1.15cqw;
	background: rgba(255, 255, 255, 0.22);
	opacity: 1;
	animation: none !important;
}
.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-qual .pp-done .pp-chk {
	animation: pp-chk-pulse 2.4s ease-in-out infinite 2s !important;
}
@keyframes pp-chk-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35); }
	50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0); }
}

/* pills: identical footprint across the "4 high priority" badge and the "High priority" tag */
.pp-qual .pp-badge--flag,
.pp-qual .pp-tag {
	display: inline-flex;
	align-items: center;
	height: 2.2cqw;
	min-height: 18px;
	font-size: 1.05cqw;
	font-weight: 700;
	padding: 0 1cqw;
	border-radius: 999px;
	line-height: 1;
}
.pp-qual .pp-badge--flag { background: var(--pp-mint); color: var(--pp-green); align-self: flex-start; margin-top: 0.6cqw; }
.pp-qual .pp-tag { background: var(--pp-mint); color: var(--pp-teal); }
.pp-qual .pp-tag--corner { position: absolute; top: 1.1cqw; right: 1.1cqw; }

.bettrai-payers-panel__pane.is-active .pp-stage.is-play .pp-badge--flag { animation: pp-flash 3s ease-in-out infinite 2.4s; }
@keyframes pp-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(41, 188, 188, 0); } 50% { box-shadow: 0 0 0 0.5cqw rgba(41, 188, 188, 0.16); } }

/* connectors: dashed line, drawn in once, then all of them keep marching
   gently to hint at the signal flowing toward Gap Closed. */
.pp-qual .pp-wire { stroke: #8bc9cc; stroke-width: 1.6; stroke-dasharray: 0.045 0.03; }
.pp-qual .pp-wire--trunk { stroke-width: 1.8; }
.bettrai-payers-panel__pane.is-active .pp-qual.pp-stage.is-play .pp-wire {
	animation: pp-draw 0.85s cubic-bezier(0.4, 0, 0.2, 1) forwards, pp-wire-flow 6s linear infinite;
	animation-delay: var(--d, 0s), calc(var(--d, 0s) + 0.85s);
}
@keyframes pp-wire-flow {
	0% { stroke-dashoffset: 0; }
	100% { stroke-dashoffset: -0.6; }
}

/* --- Cost Management -------------------------------------------------
   Same CSS Grid approach as Member Experience: 4 small stat cards in the
   corners, one hub card centered and spanning both rows, everything shows
   immediately (no fade-in), no fragile percentage math. */
/* 5 real columns (card | gap | hub | gap | card) and 6 real rows
   (r1 | half-gap | half-gap | r2 | line | dot) — the gaps are explicit
   tracks, not the `gap` property, so connectors can be placed INTO them
   as normal grid items. The grid then computes their exact size and
   position itself; nothing here is a guessed pixel value. Because r1 and
   r2 hold matching card content they're always equal height, so the
   boundary between the two half-gap rows is always the true vertical
   center of the hub's span — which is where every elbow bends. */
.pp-cost-grid {
	position: relative;
	z-index: 1;
	width: 100%;
	display: grid;
	grid-template-columns: 150px var(--cost-cg) 1fr var(--cost-cg) 150px;
	grid-template-rows: auto calc(var(--cost-rg) / 2) calc(var(--cost-rg) / 2) auto clamp(28px, 3.5vw, 42px) auto;
	--cost-cg: clamp(16px, 2.2vw, 32px);
	--cost-rg: clamp(32px, 4.4vw, 64px);
}
.pp-cost-grid,
.pp-cost-grid *,
.pp-cost-grid *::before,
.pp-cost-grid *::after {
	box-sizing: border-box;
}
.pp-cost-card {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(7, 18, 74, 0.07);
	border: 1px solid rgba(11, 21, 51, 0.06);
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.pp-cost-card b { font-size: 0.95rem; font-weight: 700; color: var(--pp-ink); }
.pp-cost-card .pp-sub { font-size: 0.85rem; font-weight: 600; color: rgba(11, 21, 51, 0.6); }
.pp-cost-ic { color: var(--pp-teal); }
.pp-cost-ic svg { width: 22px; height: 22px; }
.pp-cost-card--risk .pp-cost-ic { color: var(--pp-green); }

.pp-cost-card--claims { grid-column: 1; grid-row: 1; }
.pp-cost-card--risk { grid-column: 5; grid-row: 1; }
.pp-cost-card--outreach { grid-column: 1; grid-row: 4; }
.pp-cost-card--savings { grid-column: 5; grid-row: 4; }

/* Rails: each side's vertical line is built from 3 grid-placed pieces so
   it starts exactly at the top card's own center and ends exactly at the
   bottom card's own center — no pixel guessing, no overshoot:
     -top piece  (grid-row 1, same row as the top card): center → row edge
     -mid piece  (grid-row 2/4, the gap): full height, plus the branch
                  into the hub at ITS OWN 50%, which is the true center
                  since the gap is symmetric by construction
     -bot piece  (grid-row 4, same row as the bottom card): row edge → center
   Each side card gets its own short horizontal stub (on the card element
   itself) reaching from the card's edge to the rail — meeting the rail's
   top/bottom endpoint exactly, forming a clean 90° corner. No dots. */
.pp-cost-rail { position: relative; }
.pp-cost-rail--left-top { grid-column: 2; grid-row: 1; }
.pp-cost-rail--left-mid { grid-column: 2; grid-row: 2 / 4; }
.pp-cost-rail--left-bot { grid-column: 2; grid-row: 4; }
.pp-cost-rail--right-top { grid-column: 4; grid-row: 1; }
.pp-cost-rail--right-mid { grid-column: 4; grid-row: 2 / 4; }
.pp-cost-rail--right-bot { grid-column: 4; grid-row: 4; }

.pp-cost-rail--left-top::before,
.pp-cost-rail--left-mid::before,
.pp-cost-rail--left-bot::before {
	content: '';
	position: absolute;
	left: 14px;
	width: 2px;
	background: repeating-linear-gradient(to bottom, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 2px 26px;
}
.pp-cost-rail--left-top::before { top: 50%; bottom: 0; }
.pp-cost-rail--left-mid::before { top: 0; bottom: 0; }
.pp-cost-rail--left-bot::before { top: 0; bottom: 50%; }

.pp-cost-rail--right-top::before,
.pp-cost-rail--right-mid::before,
.pp-cost-rail--right-bot::before {
	content: '';
	position: absolute;
	right: 14px;
	width: 2px;
	background: repeating-linear-gradient(to bottom, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 2px 26px;
}
.pp-cost-rail--right-top::before { top: 50%; bottom: 0; }
.pp-cost-rail--right-mid::before { top: 0; bottom: 0; }
.pp-cost-rail--right-bot::before { top: 0; bottom: 50%; }

.pp-cost-rail--left-mid::after {
	content: '';
	position: absolute;
	left: 14px;
	right: 0;
	top: 50%;
	height: 2px;
	background: repeating-linear-gradient(to right, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 26px 2px;
}
.pp-cost-rail--right-mid::after {
	content: '';
	position: absolute;
	right: 14px;
	left: 0;
	top: 50%;
	height: 2px;
	background: repeating-linear-gradient(to right, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 26px 2px;
}

/* short horizontal stub on each side card, reaching to the rail */
.pp-cost-card--claims::after,
.pp-cost-card--outreach::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 100%;
	width: 14px;
	height: 2px;
	background: repeating-linear-gradient(to right, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 26px 2px;
}
.pp-cost-card--risk::after,
.pp-cost-card--savings::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 100%;
	width: 14px;
	height: 2px;
	background: repeating-linear-gradient(to right, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 26px 2px;
}

.bettrai-payers-panel__pane.is-active .pp-cost-rail--left-top::before,
.bettrai-payers-panel__pane.is-active .pp-cost-rail--left-mid::before,
.bettrai-payers-panel__pane.is-active .pp-cost-rail--left-bot::before,
.bettrai-payers-panel__pane.is-active .pp-cost-rail--right-top::before,
.bettrai-payers-panel__pane.is-active .pp-cost-rail--right-mid::before,
.bettrai-payers-panel__pane.is-active .pp-cost-rail--right-bot::before {
	animation: pp-cost-dash-v 1.6s linear infinite;
}
.bettrai-payers-panel__pane.is-active .pp-cost-rail--left-mid::after,
.bettrai-payers-panel__pane.is-active .pp-cost-rail--right-mid::after,
.bettrai-payers-panel__pane.is-active .pp-cost-card--claims::after,
.bettrai-payers-panel__pane.is-active .pp-cost-card--outreach::after,
.bettrai-payers-panel__pane.is-active .pp-cost-card--risk::after,
.bettrai-payers-panel__pane.is-active .pp-cost-card--savings::after {
	animation: pp-cost-dash-h 1.6s linear infinite;
}

/* Sophie sits above the hub, in the otherwise-empty top of the hub's own
   column (the hub is align-self:center and shorter than the full span, so
   this space is free). A short line drops from her into the hub; it's
   drawn generously long and lower z-index than the hub so it's simply
   hidden wherever it overlaps the hub card, regardless of hub's exact
   height — same safe-overrun technique used on the Member Experience tab. */
.pp-cost-sophie {
	grid-column: 3;
	grid-row: 1;
	justify-self: center;
	align-self: start;
	position: relative;
}
.pp-cost-sophie__ava {
	position: relative;
	z-index: 3;
	display: block;
	width: clamp(48px, 5vw, 60px);
	height: clamp(48px, 5vw, 60px);
}
.pp-cost-sophie__ava img { display: block; width: 100%; height: 100%; }
.pp-cost-sophie::after {
	content: '';
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 60%;
	width: 2px;
	height: 90px;
	background: repeating-linear-gradient(to bottom, #8bc9cc 0 6px, transparent 6px 13px);
	background-size: 2px 26px;
}
.bettrai-payers-panel__pane.is-active .pp-cost-sophie::after {
	animation: pp-cost-dash-v 1.6s linear infinite;
}

.pp-cost-hub {
	grid-column: 3;
	grid-row: 1 / 5;
	align-self: center;
	position: relative;
	z-index: 2;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(7, 18, 74, 0.1);
	border: 1px solid rgba(11, 21, 51, 0.06);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 4px;
}
.pp-cost-hub b { font-size: 0.95rem; font-weight: 700; color: var(--pp-ink); }
.pp-cost-hub__num { font-style: normal; font-size: 2.6rem; font-weight: 800; color: var(--pp-teal); line-height: 1.1; }
.pp-cost-hub .pp-sub { font-size: 0.85rem; font-weight: 600; color: rgba(11, 21, 51, 0.6); }

.pp-cost-line {
	/* hub is align-self:center and shorter than its full row span, so its
	   true bottom edge isn't at the row-4/row-5 boundary. Span up into row
	   4 too, with z-index below the hub, so the excess is simply hidden
	   behind the hub card — the visible portion always starts exactly at
	   hub's real bottom edge regardless of hub's rendered height. */
	grid-column: 3;
	grid-row: 4 / 6;
	justify-self: center;
	z-index: 1;
	width: 2px;
	height: 100%;
	background: var(--pp-teal);
}
@keyframes pp-cost-dash-v { to { background-position-y: -26px; } }
@keyframes pp-cost-dash-h { to { background-position-x: -26px; } }
.pp-cost-dot {
	grid-column: 3;
	grid-row: 6;
	justify-self: center;
	align-self: start;
	width: clamp(56px, 6vw, 72px);
	height: clamp(56px, 6vw, 72px);
	border-radius: 50%;
	background: var(--pp-teal);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pp-cost-dot img { width: 42%; height: 42%; }

/* --- Operational Efficiency --------------------------------------------- */
.pp-task { flex-direction: row; align-items: center; background: #f4f8fc; box-shadow: 0 0.5cqw 1.4cqw rgba(7, 18, 74, 0.06); }
.pp-task b { font-weight: 600; color: var(--pp-ink); }
.pp-task__ic { flex: none; width: 2.2cqw; height: 2.2cqw; display: inline-flex; align-items: center; justify-content: center; color: var(--pp-teal); }
.pp-task__ic svg { width: 100%; height: 100%; }
.pp-auto { align-items: center; text-align: center; justify-content: center; border-radius: 0; border: none; background: transparent; box-shadow: none; padding: 0; }
.pp-auto__figure { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.pp-comp { flex-direction: row; align-items: center; }
.pp-team { flex-direction: row; align-items: center; justify-content: flex-start; gap: 1cqw; background: #198461; }
.pp-team b, .pp-team .pp-sub { color: #fff; }
.pp-team__ic { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.9cqw; flex: none; }
.pp-team__meta { display: flex; flex-direction: column; text-align: left; }
.pp-task b, .pp-comp b, .pp-team b { font-size: 1.85cqw; }
.pp-team .pp-sub { font-size: 1.3cqw; }
.pp-esc { border: 1.5px solid var(--pp-teal); gap: 0.6cqw; }
.pp-esc b { display: block; font-size: 2cqw; }
.pp-esc .pp-sub { display: block; font-size: 1.4cqw; }
.pp-esc[data-in] { transform: translateY(3cqw); }

/* --- reduced motion: show final states, no animation --------------------- */
@media (prefers-reduced-motion: reduce) {
	.pp-card[data-in], .pp-esc[data-in] { opacity: 1 !important; transform: none !important; animation: none !important; }
	.pp-wire { stroke-dashoffset: 0 !important; animation: none !important; }
	.pp-chk, .pp-hub__sophie { opacity: 1 !important; animation: none !important; }
	.pp-swap__a { opacity: 0 !important; animation: none !important; }
	.pp-swap__b { opacity: 1 !important; animation: none !important; }
	.pp-badge--flag, .pp-mem__ring { animation: none !important; }
}

/* ===================================================================== */
/* Image Band CTA (bettrai_image_band_cta) — full-width bg band          */
/* ===================================================================== */
.bettrai-imageband {
	position: relative;
	width: 100%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 96px 0;
	overflow: hidden;
}
.bettrai-imageband__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11, 22, 42, 0.62), rgba(11, 22, 42, 0.78));
	z-index: 0;
}
.bettrai-imageband__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 20px;
}
.bettrai-imageband__title {
	margin: 0;
	color: #fff;
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1.15;
	font-weight: 700;
}
.bettrai-imageband__text {
	margin: 0;
	max-width: 640px;
	color: rgba(255, 255, 255, 0.88);
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.6;
}
.bettrai-imageband__inner .bettrai-btn {
	margin-top: 8px;
}
@media (max-width: 782px) {
	.bettrai-imageband { padding: 64px 0; }
}

/* --- Auto-injected chrome integration: keep the mobile burger off desktop and
   ensure it never picks up a theme button background. --- */
@media (min-width: 901px) {
	.bettrai-hero__burger { display: none !important; }
}
.bettrai-hero__burger,
.bettrai-hero__burger:hover,
.bettrai-hero__burger:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

/* --- Hide Hello Elementor's default theme header/footer: BettrAi renders its
   own chrome (.bettrai-hero__header / .bettrai-footer), so the theme's
   site-title header and default footer must not show. Also removes the empty
   top gap they left above the hero. --- */
.site-header,
header.site-header,
.site-footer,
footer.site-footer { display: none !important; }

/* ==========================================================================
   Legal pages (Privacy Policy / Terms of Service) — bettrai_legal widget
   ========================================================================== */
.bettrai-legal {
	/* Soft teal page wash (same family as the Sophie/Programs sections) instead
	   of flat white. */
	background: linear-gradient(180deg, #F4FBFC 0%, #EAF5F8 100%);
	/* Top padding clears the fixed floating header (no hero on these pages). */
	padding: clamp(140px, 15vw, 190px) 0 clamp(64px, 8vw, 110px);
	font-family: var(--bettrai-font);
}
/* Wider reading column on legal pages (overrides the shared 900px narrow token
   just here) so the content tracks closer to the full-width header. */
.bettrai-legal .bettrai-container--narrow { max-width: 1200px; }
.bettrai-legal__head { margin: 0 0 44px; }
.bettrai-legal__eyebrow {
	display: inline-block;
	font-size: 13px; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--pv-teal);
	margin: 0 0 14px;
}
.bettrai-legal__title {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	font-size: clamp(2.2rem, 4.6vw, 3.4rem);
	line-height: 1.1;
	color: var(--bettrai-heading);
	margin: 0 0 14px;
}
.bettrai-legal__meta { color: var(--pv-teal); font-size: 15px; font-weight: 500; margin: 0; }
.bettrai-legal__body { font-family: var(--bettrai-font); color: var(--pv-body); font-size: 18px; line-height: 1.75; }
.bettrai-legal__body p { margin: 0 0 18px; }
.bettrai-legal__body h2 {
	font-family: var(--bettrai-font-heading);
	font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 700;
	color: var(--bettrai-heading);
	margin: 46px 0 16px;
}
.bettrai-legal__body h3 {
	font-family: var(--bettrai-font-heading);
	font-size: 1.18rem; font-weight: 700;
	color: var(--bettrai-heading);
	margin: 30px 0 12px;
}
.bettrai-legal__body h4 { font-size: 1rem; font-weight: 600; color: var(--bettrai-heading); margin: 22px 0 8px; }
.bettrai-legal__body ul { margin: 0 0 18px; padding-left: 24px; }
.bettrai-legal__body li { margin: 0 0 10px; }
.bettrai-legal__body li::marker { color: var(--pv-teal); }
.bettrai-legal__body a { color: var(--pv-teal); text-decoration: none; }
.bettrai-legal__body a:hover { text-decoration: underline; }
.bettrai-legal__callout {
	background: var(--pv-mint);
	border-radius: var(--bettrai-radius-lg);
	padding: 26px 30px;
	margin: 0 0 26px;
}
.bettrai-legal__callout h4 { margin: 0 0 10px; }
.bettrai-legal__callout p:last-child,
.bettrai-legal__callout ul:last-child { margin-bottom: 0; }

/* ==========================================================================
   RESOURCES / RESOURCE CENTER  (.bettrai-resources-*)
   Short no-photo hero + centered H1 intro + dynamic post card grid. Reuses
   --pv-teal / --bettrai-* tokens; no page-scoped wrapper needed since it
   renders like other Elementor section widgets.
   ========================================================================== */

.bettrai-resources-hero {
	position: relative;
	background-size: cover;
	background-position: 70% center;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
.bettrai-resources-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(7, 18, 42, 0.86) 0%, rgba(11, 27, 42, 0.68) 55%, rgba(11, 27, 42, 0.5) 100%);
	z-index: -1;
}
.bettrai-resources-hero__inner {
	min-height: clamp(360px, 28vw, 460px);
	padding: clamp(120px, 12vw, 140px) 0 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bettrai-resources-hero__title {
	font-family: "Satoshi", "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(2.5rem, 4.4vw, 64px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	margin: 0;
	text-align: center;
}

.bettrai-resources-intro {
	background: linear-gradient(180deg, #F4FBFC 0%, #EAF5F8 100%);
	padding: clamp(48px, 6vw, 80px) 0 clamp(20px, 3vw, 32px);
}
.bettrai-resources-intro__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.bettrai-resources-intro__title {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	font-size: clamp(2.1rem, 4.2vw, 3.1rem);
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--bettrai-heading);
	margin: 0 0 18px;
}
.bettrai-resources-intro__title-highlight { color: var(--pv-teal); }
.bettrai-resources-intro__lead {
	font-family: var(--bettrai-font);
	font-weight: 400;
	font-size: 18px;
	line-height: 30px;
	color: #8D8D9A;
	margin: 0;
}

.bettrai-resources-grid { padding: 0 0 clamp(64px, 8vw, 110px); background: #EAF5F8; }
.bettrai-resources-grid__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 40px;
}
.bettrai-resources-pill {
	display: inline-block;
	padding: 9px 20px;
	border-radius: var(--bettrai-radius-md);
	border: 1px solid rgba(41, 188, 188, 0.35);
	color: var(--pv-ink);
	font-family: var(--bettrai-font);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bettrai-resources-pill:hover { border-color: var(--pv-teal); }
.bettrai-resources-pill.is-active {
	background: var(--pv-teal);
	border-color: var(--pv-teal);
	color: #fff;
}

.bettrai-resources-grid__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}
.bettrai-rcard {
	background: #fff;
	border-radius: var(--bettrai-radius-lg);
	overflow: hidden;
	box-shadow: var(--bettrai-shadow-card);
	display: flex;
	flex-direction: column;
}
.bettrai-rcard__media {
	display: block;
	aspect-ratio: 100 / 38;
	overflow: hidden;
	background-color: var(--pv-mint);
	background-size: cover;
	background-position: center center;
}
.bettrai-rcard__media--placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--pv-mint), var(--pv-sky)); }
.bettrai-rcard__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.bettrai-rcard__tag {
	display: inline-block;
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--pv-mint);
	color: var(--pv-green);
	font-family: var(--bettrai-font);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 12px;
}
.bettrai-rcard__title { margin: 0 0 10px; font-family: var(--bettrai-font-heading); font-size: 1.15rem; line-height: 1.32; font-weight: 700; }
.bettrai-rcard__title a { color: var(--bettrai-heading); text-decoration: none; }
.bettrai-rcard__title a:hover { color: var(--pv-teal); }
.bettrai-rcard__excerpt { font-family: var(--bettrai-font); font-size: 15px; line-height: 24px; color: #8D8D9A; margin: 0 0 18px; flex: 1; }
.bettrai-rcard__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bettrai-rcard__meta span { font-family: var(--bettrai-font); font-size: 13px; color: #a1a1ad; }
.bettrai-rcard__link {
	display: inline-flex; align-items: center; gap: 6px;
	color: var(--pv-teal); font-family: var(--bettrai-font); font-size: 13px; font-weight: 600;
	text-decoration: none;
}
.bettrai-rcard__link svg { width: 14px; height: 14px; }
.bettrai-rcard__link:hover { color: #1F8F8F; }

.bettrai-resources-grid__pager {
	display: flex; align-items: center; justify-content: center; gap: 20px;
	margin-top: 48px;
}
.bettrai-resources-grid__pager-btn {
	padding: 12px 22px;
	border-radius: var(--bettrai-radius-md);
	border: 1px solid rgba(41, 188, 188, 0.35);
	background: #fff;
	color: var(--pv-ink);
	font-family: var(--bettrai-font);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.bettrai-resources-grid__pager-btn:hover { border-color: var(--pv-teal); color: var(--pv-teal); }
.bettrai-resources-grid__pager-count { font-family: var(--bettrai-font); font-size: 14px; color: #8D8D9A; }
.bettrai-resources-grid__empty { text-align: center; color: #8D8D9A; font-family: var(--bettrai-font); font-size: 16px; padding: 40px 0; }

@media (max-width: 1024px) {
	.bettrai-resources-grid__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.bettrai-resources-grid__list { grid-template-columns: 1fr; }
	.bettrai-resources-hero__inner { padding-top: 116px; }
}

/* Single resource (blog post) page — .bettrai-resource-post, rendered by the
   template_include override in includes/SingleResource.php (not an Elementor
   widget, since single posts aren't built in the Elementor editor). Reuses
   .bettrai-legal__body's typography rules for the article body. */
.bettrai-resource-post__hero {
	background: linear-gradient(180deg, #F4FBFC 0%, #EAF5F8 100%);
	color: var(--bettrai-heading);
	padding: clamp(150px, 16vw, 190px) 0 56px;
}
.bettrai-resource-post__hero .bettrai-resources-pill { background: #fff; border-color: rgba(41, 188, 188, 0.35); color: var(--pv-ink); }
.bettrai-resource-post__tag {
	display: inline-block;
	padding: 6px 16px;
	border-radius: 999px;
	border: 1px solid rgba(41, 188, 188, 0.5);
	background: transparent;
	color: var(--pv-green);
	font-family: var(--bettrai-font);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 18px;
}
.bettrai-resource-post__title {
	font-family: var(--bettrai-font-heading);
	font-weight: 700;
	font-size: clamp(1.9rem, 4vw, 2.9rem);
	line-height: 1.14;
	margin: 0 0 18px;
	color: var(--bettrai-heading);
}
.bettrai-resource-post__meta { font-family: var(--bettrai-font); font-size: 14px; color: #8D8D9A; }
/* Single shared reading-width wrapper — used by the hero, the pulled-up
   featured image, and the article body, so all three align to the same
   left/right edges instead of the hero using the full site container while
   the body used the narrower one. */
.bettrai-resource-post__container {
	width: 100%;
	max-width: 1100px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 40px);
}
.bettrai-resource-post__figure {
	background: #EAF5F8;
	padding: 0 0 clamp(32px, 4vw, 48px);
	/* Establish a new block-formatting context so the child's negative
	   margin-top (below) pulls the image up visually without collapsing
	   through this element's own top edge and dragging its background
	   with it — that collapse was the actual cause of the white gap.
	   flow-root (not overflow:hidden) so the image can still visually
	   overlap upward into the hero without its top edge being clipped. */
	display: flow-root;
}
.bettrai-resource-post__figure-inner { margin-top: -40px; }
.bettrai-resource-post__figure img { width: 100%; border-radius: var(--bettrai-radius-lg); box-shadow: var(--bettrai-shadow-card); display: block; }
.bettrai-resource-post__wrap { background: #EAF5F8; padding: 0 0 clamp(48px, 6vw, 80px); }
.bettrai-resource-post__crumb { margin: 0 0 22px; }
.bettrai-resource-post__back { display: inline-flex; align-items: center; gap: 6px; color: var(--pv-teal); font-family: var(--bettrai-font); font-size: 14px; font-weight: 400; text-decoration: none; }
.bettrai-resource-post__back:hover { color: var(--bettrai-teal-hover); }

/* Backstop: page canvas itself matches the article's light gradient, so any
   future stray gap between sections shows this color instead of raw white. */
body.bettrai-resource-single { background: #EAF5F8; }

/* =========================================================================
   RESPONSIVE HARDENING — 2026-08-16
   Surgical, additive fixes for tablet/mobile overflow, the closing CTA band,
   FAQ wrapping, and moving the header "Contact" button into the drawer.
   No desktop redesign. TO REVERT: delete everything below this banner and
   restore includes/Chrome.php from .backups/responsive-*/Chrome.php.
   ========================================================================= */

/* 1. Global horizontal-overflow guard. Kills the white side-gap / page
   "shoved narrow" symptom caused by stray wide or decorative elements
   (glows, rings, marquee tracks, sub-pixel bleeds) at tablet/mobile.
   `overflow-x: clip` (NOT hidden) does not create a scroll container, so the
   desktop scroll-pin `position: sticky` (>=1025px) and inner horizontal
   scrollers (comparison table, platform/panel tabs) keep working. */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* 2. FAQ questions must wrap on narrow screens. The <button> trigger was
   passing white-space: nowrap down to the question text, forcing the row
   wider than the viewport (home @375 overflowed by ~158px). */
.bettrai-faq__trigger,
.bettrai-faq__q-text {
	white-space: normal;
	overflow-wrap: anywhere;
	min-width: 0;
}

/* 3. Sophie hero title: allow wrapping below tablet. Desktop keeps its
   controlled single-line / <br> layout. */
@media (max-width: 860px) {
	.bettrai-sophie-hero__title { white-space: normal; }
}

/* Sophie hero H1/subtext, mobile only: sized independently from the home
   page hero, so the two read as different scales when a visitor moves
   between pages. Match the home hero's mobile H1 clamp (.bettrai-hero__heading
   at <=767px) and its subheading font-size, so the two hero styles feel
   like the same design system. Desktop/tablet untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-hero__title { font-size: 30px !important; line-height: 1.3 !important; }
	.bettrai-sophie-hero__lead { font-size: 16px; }
}

/* Sophie closing CTA, mobile only: the home page's closing CTA has no
   configured image so it just shows the gradient card; Sophie's does have
   one, which on phones renders as an extra photo below the card - match the
   home page look by dropping it here. Desktop/tablet untouched. */
@media (max-width: 900px) {
	.bettrai-sophie-cta .bettrai-cta__media { display: none; }
	/* .bettrai-sophie-cta .bettrai-cta__card's own `flex: 1.75 1 0` rule
	   (scoped, so it beats the generic .bettrai-cta__card mobile fix above
	   on specificity regardless of source order) keeps the card's flex-basis
	   at 0 once stacked to a column with no free space to grow into, and its
	   fixed height clamp(340px,27vw,410px) still clips the heading/button.
	   Reset both the same way the generic fix does. */
	.bettrai-sophie-cta .bettrai-cta__card {
		flex: 0 0 auto;
		height: auto;
		min-height: 0;
		padding-block: clamp(36px, 8vw, 52px);
	}
}

/* Sophie Resources → FAQ transition, mobile only: Resources' own 90px+
   bottom padding stacked with the FAQ section's shared top padding reads
   as an oversized gap on phones. Trim Resources' bottom edge only; its top
   padding (spacing from the section above) and desktop/tablet are
   untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-resources { padding-top: 40px; padding-bottom: 56px; }
	.bettrai-sophie-resources__mobile-break { display: block; }
}

/* Orbit diagram ("Keeping Care Connected...") on phones: the SVG is capped
   to the same width as the text column above it, which reads tiny at
   mobile widths. Let it bleed edge-to-edge (full viewport width) instead of
   staying inside the container's side padding, so it renders noticeably
   bigger while staying centered. Desktop/tablet untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-orbit__stage {
		width: 100vw;
		margin-inline: calc(50% - 50vw);
	}
}

/* "Stay Ahead / Stay Informed / Stay Connected" pillar cards, mobile only:
   same wavy-clip-path-card problem fixed elsewhere on this site (see the
   Sophie "Handles the routine" cards and Steps cards above) - the decorative
   SVG clip-path wave needs a large fixed min-height to fit its curve, which
   just reads as excess empty space once these cards stack full-width on
   phones. Drop to a plain rounded card sized to its own content. */
@media (max-width: 767px) {
	.bettrai-sophie-support__pillars li {
		min-height: 0;
		padding: clamp(40px, 9vw, 48px) clamp(22px, 6vw, 28px);
		border-radius: var(--bettrai-radius-md);
		-webkit-clip-path: none;
		clip-path: none;
	}
}

/* Sophie hero, mobile only: the small "Meet Sophie" eyebrow pill is
   redundant with the big heading itself, whose first line already reads
   "Meet Sophie™" - on phones the two together read as the name repeated
   twice right on top of each other. Drop the pill; the heading's own first
   line already carries that label. Desktop untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-hero__copy .bettrai-sophie-eyebrow { display: none; }
}

/* Sophie hero figure, mobile only: the desktop rule slides her far left with
   a large negative transform (translateX(-240px to -480px)) to tuck her
   behind the text column. With no mobile override that same transform
   pushed her mostly off the left edge of the phone viewport, leaving only a
   sliver visible instead of the full figure. Reset the transform, size her
   to the column width, and center her under the copy - matching the
   reference layout (large, centered figure below the text/buttons).
   Desktop/tablet untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-hero__inner { min-height: 0; }
	.bettrai-sophie-hero__copy { padding-bottom: 24px; }
	.bettrai-sophie-hero__media {
		justify-self: center;
		width: min(84%, 420px);
		margin: 0 auto;
		/* The source PNG itself isn't centered in its own canvas - Sophie's
		   figure sits far right of the transparent canvas's midpoint (648px
		   of empty space on the left vs 220px on the right, out of 1536px
		   wide). Centering this box mathematically therefore still renders
		   her visibly off-center to the right. Nudge left by that same
		   percentage so the actual artwork - not the transparent canvas -
		   lands in the middle. */
		transform: translateX(-22%);
	}
}

/* Sophie hero background, mobile only: swap to the dedicated portrait crop
   (see the <picture>/<source> in SophieHero.php) instead of stretching the
   wide desktop corridor photo. object-position was tuned (65% center) for
   that wide crop; the portrait asset is already framed for phones, so just
   center it. */
@media (max-width: 767px) {
	/* Belt-and-suspenders on top of the inset:0 fix above: drive the mobile
	   background as a plain CSS background-image on the section itself
	   instead of the absolutely-positioned <img>. A CSS background-image
	   with background-size:cover is guaranteed by definition to fill its
	   element's full rendered box - no auto-height/abs-position edge cases
	   possible - so Sophie's figure (which sits in normal flow below it)
	   can never run past where the photo stops. The <img> is hidden here;
	   its <picture>/<source> markup and desktop styling are untouched. */
	.bettrai-sophie-hero {
		background-image: url("../images/sophie/hero-corridor-mobile.png") !important;
		background-size: cover !important;
		background-position: center center !important;
		background-repeat: no-repeat !important;
	}
	.bettrai-sophie-hero__bg { display: none; }
}

/* Sophie hero badge cluster, mobile only: at the desktop size/position (12%
   of media width, right:2%) the badges land on top of her chest/waist
   instead of beside her once the media box shrinks to mobile width. Shrink
   them and push them out past her silhouette so they sit beside her, per
   the reference layout. Desktop/tablet untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-hero__badges {
		width: clamp(60px, 11%, 76px);
		right: -6%;
		top: 26%;
	}
}

/* "Checking in with your patients" (Sophie Support) section, mobile only:
   the video/photo is first in the markup so it stacks above the heading and
   copy once the grid collapses to one column, meaning the section opens
   with a video before any context. Reverse it so the text leads. Desktop
   two-column layout (image | copy side by side) is untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-support__copy { order: 1; }
	.bettrai-sophie-support__media { order: 2; }
	/* The "Stay Ahead/Informed/Connected" pillar cards are a third grid item
	   in this same row (grid-column:1/-1) with no order set, which defaults
	   to 0 - lower than the copy/media orders above, so it jumped to the
	   very top of the section instead of staying after them. Pin it last. */
	.bettrai-sophie-support__pillars { order: 3; }
}

/* Sophie hero -> Support transition, mobile only: hero's figure sits right
   against Support's heading with almost no breathing room (top padding
   there is only ~24-27px at this width). Slight bump. Desktop untouched. */
@media (max-width: 767px) {
	.bettrai-sophie-support { padding-top: 56px; padding-bottom: 44px; }
}

/* Sophie section headings ("Keeping Care Connected / Every Step of the Way",
   "Care Doesn't End / When the Visit Does", "Helping Care Teams Deliver /
   Better Outcomes Every Day", etc.) are one sentence with a color change
   partway through, authored with a hard <br> for the desktop line break.
   On phones that break reads as arbitrary; let it flow and wrap naturally
   like normal text instead. Desktop/tablet keep the authored break. */
@media (max-width: 767px) {
	.bettrai-sophie-h2 br,
	.bettrai-cta__heading br {
		display: none;
	}
	/* Exception: the Sophie-page FAQ heading ("Care Doesn't End / When the
	   Visit Does") reads badly with the break removed - "When" ends up
	   trailing on line 1 instead of leading line 2. Keep its authored break
	   on mobile too. */
	.bettrai-sophie-faq__head .bettrai-sophie-h2 br {
		display: block;
	}
	/* Left-align this heading + intro to match the left-aligned FAQ list
	   below it, instead of center (which reads oddly once the two-line
	   heading + wrapped paragraph are this close to the questions). */
	.bettrai-sophie-faq__head {
		text-align: left;
		margin-inline: 0;
	}
}

/* 4. Closing CTA band ("...Start With Bettr Connection"). It only stacked at
   <=767px, so at 768 the image + card were still side-by-side and the big
   heading overflowed the fixed-height card (clipped by overflow:hidden).
   Stack from tablet down, let the card grow, and shrink the heading on
   phones so it never clips. */
@media (max-width: 900px) {
	.bettrai-cta { flex-direction: column; }
	/* .bettrai-cta__card's desktop flex-basis is 0px (flex: 1.12 1 0px), sized
	   entirely by flex-grow distributing the row's free space. Once stacked
	   to a column with an auto-height parent, there's no free space to
	   distribute, and overflow:hidden strips the flex item's automatic
	   content-based minimum size - the card collapses to ~0 and clips its
	   own text. Switch flex-basis to auto so it sizes by content again. */
	.bettrai-cta__card { flex: 0 0 auto; height: auto; min-height: 0; padding-block: clamp(36px, 8vw, 52px); }
	.bettrai-cta__media { display: none; }
}
@media (max-width: 560px) {
	.bettrai-cta__card { padding: clamp(28px, 7vw, 42px); }
	.bettrai-cta__heading {
		font-size: clamp(1.9rem, 8.5vw, 2.75rem);
		/* Leave the mark icon (top-right, ~clamp 36-48px wide + its own offset)
		   clear of the heading text instead of letting lines run under it. */
		max-width: calc(100% - 64px);
		overflow-wrap: anywhere;
	}
}

/* 5. Programs comparison table keeps its own horizontal scroll and never
   pushes the page wide. */
.bettrai-programs-table__wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

/* 6. Header CTA -> drawer. Desktop shows the in-bar "Contact" button and
   hides the list item. On mobile (<=900px, where the burger appears) hide
   the in-bar button and show "Contact" as a plain drawer item, styled
   identically to the other links (no highlight) — it inherits the existing
   `.bettrai-hero__nav a` rules automatically since it's a normal <li><a>. */
.bettrai-hero__nav-contact { display: none; }

@media (max-width: 900px) {
	.bettrai-hero__nav-cta { display: none !important; }
	.bettrai-hero__nav-contact { display: block; }
}

/* 6b. Shorten the mobile sticky bar a bit (less vertical padding + a
   slightly smaller burger hit-area) without touching the desktop bar. */
@media (max-width: 900px) {
	.bettrai-hero__header { padding-top: 10px; padding-bottom: 10px; }
	.bettrai-hero__burger { width: 34px; height: 34px; margin-left: 12px; }
}

/* 7. Multi-level "Who We Serve" menu didn't open on mobile: the mega/submenu
   only appears on :hover/:focus-within, which touch has no equivalent for.
   JS (see initSubmenuToggle) now toggles `.is-open` on tap; make both
   submenu types collapse/expand inline instead of relying on hover. */
@media (max-width: 900px) {
	.bettrai-hero__submenu,
	.bettrai-hero__mega {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		width: auto;
		min-width: 0;
		max-height: 0;
		padding: 0;
		margin: 0;
		overflow: hidden;
		transition: max-height 0.25s ease;
	}
	.bettrai-hero__mega::before { display: none; }
	.bettrai-hero__has-sub.is-open > .bettrai-hero__submenu {
		max-height: 600px;
		padding: 2px 0 6px 14px;
	}
	.bettrai-hero__has-mega.is-open > .bettrai-hero__mega {
		max-height: 800px;
		padding: 2px 0 6px 14px;
	}
	/* Keep it a simple text list on mobile — no image cards. */
	.bettrai-hero__mega-grid { grid-template-columns: 1fr; gap: 0; }
	.bettrai-hero__mega-media,
	.bettrai-hero__mega-desc { display: none; }
	.bettrai-hero__mega-card {
		padding: 10px 14px;
		border-radius: 10px;
		font-size: 0.95rem;
	}
	.bettrai-hero__mega-card:hover,
	.bettrai-hero__mega-card:focus-visible {
		background: rgba(100, 197, 197, 0.14);
	}
	.bettrai-hero__mega-title {
		margin: 0;
		font-size: inherit;
		font-weight: 500;
	}
	.bettrai-hero__mega-card:hover .bettrai-hero__mega-title,
	.bettrai-hero__mega-card:focus-visible .bettrai-hero__mega-title {
		color: var(--bettrai-btn-green);
	}

	/* Parent trigger ("Who We Serve"): same full-row block as every other
	   item, caret hugging the label — no separate flex/width behavior. */
	.bettrai-hero__has-sub > a {
		display: flex;
		align-items: center;
		width: 100%;
	}
	.bettrai-hero__caret { margin-left: 10px; }
	/* Keep the caret always facing down — no open/closed rotation. */
	.bettrai-hero__has-sub > a .bettrai-hero__caret,
	.bettrai-hero__has-sub.is-open > a .bettrai-hero__caret {
		transform: translateY(-1px) rotate(45deg);
	}
	/* Bold only while open — normal weight the rest of the time. */
	.bettrai-hero__has-sub > a { font-weight: 500; }
	.bettrai-hero__has-sub.is-open > a { font-weight: 600; }
	/* Don't tint the trigger just because its submenu is open — mobile
	   browsers commonly latch :hover "on" after a tap (there's no pointer to
	   leave), so a `:not(:hover)` guard here would never actually apply.
	   Same specificity as `.bettrai-hero__nav a:hover`; wins on source order. */
	.bettrai-hero__has-sub.is-open > a {
		background: transparent;
		color: var(--bettrai-navy);
	}
	/* The desktop hover-reveal rule (`:hover`/`:focus-within` -> translate
	   -50%) is MORE specific than the plain `.bettrai-hero__mega { transform:
	   none }` reset above, so it still wins and shoves the mega dropdown off
	   to the left whenever the tapped trigger holds focus. Neutralize it
	   explicitly at this same specificity for mobile. */
	.bettrai-hero__has-mega:hover .bettrai-hero__mega,
	.bettrai-hero__has-mega:focus-within .bettrai-hero__mega {
		transform: none;
	}
}

/* 8. Home hero H1 mobile sizing: now owned entirely by the Hero widget's
   responsive Heading Typography control (Mobile default 32px) — see
   Hero.php register_controls(). The old body.page-id-8 override here was
   dead CSS: the Sophie page's H1 uses .bettrai-sophie-hero__title, a
   different class, not .bettrai-hero__heading. */

/* 9. Mobile hero: the portrait object-fit:cover crop shows a brighter slice
   of the background photo than the wide desktop crop, so the existing
   gradient overlay reads much weaker. Add one small extra scrim layer
   (mobile-only, additive — the original .bettrai-hero__overlay and its
   Elementor-controlled opacity are untouched) to match desktop's contrast. */
@media (max-width: 900px) {
	.bettrai-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: rgba(7, 18, 74, 0.22);
		pointer-events: none;
	}
}

/* 10. "Identify / Extend / Improve" capability tabs on phones: 3 full-width
   stacked pills eat a lot of vertical space and read as a wall of cards
   before the user even reaches the content. Swap to a single compact
   "current step" selector (tap to open a short dropdown) + a thin 1/2/3
   progress line, same pattern used for step-based mobile nav elsewhere.
   Desktop's 3-up pills are untouched. */
.bettrai-probsol__mobile-tabs { display: none; }

@media (max-width: 767px) {
	.bettrai-probsol__pills { display: none; }

	.bettrai-probsol__mobile-tabs {
		display: block;
		position: relative;
		margin: 0 0 34px;
	}

	/* `button.` prefix (not just `.class`) so this reliably beats the theme's
	   reset.css `[type="button"], button { border:#c36; background:...; }`
	   rule, which sits at the same specificity — see the burger icon note
	   above for the same issue. */
	button.bettrai-probsol__mobile-trigger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid rgba(100, 197, 197, 0.38);
		border-radius: var(--bettrai-radius-md);
		background: rgba(255, 255, 255, 0.9);
		box-shadow: var(--bettrai-shadow-soft);
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	/* reset.css's `button:hover/:focus { background:#c36; color:#fff }` outranks
	   the base rule above (higher specificity), so guard those states too. */
	button.bettrai-probsol__mobile-trigger:hover,
	button.bettrai-probsol__mobile-trigger:focus {
		background: rgba(255, 255, 255, 0.9);
		color: inherit;
	}

	.bettrai-probsol__mobile-step {
		display: inline-flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: 8px;
		background: var(--bettrai-btn-green);
		color: var(--bettrai-white);
		font-size: 0.85rem;
		font-weight: 700;
	}

	.bettrai-probsol__mobile-label {
		flex: 1 1 auto;
		color: var(--bettrai-navy);
		font-size: 1rem;
		font-weight: 600;
	}

	.bettrai-probsol__mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--bettrai-btn-green);
		border-bottom: 2px solid var(--bettrai-btn-green);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}

	.bettrai-probsol__mobile-tabs.is-open .bettrai-probsol__mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-probsol__mobile-list {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}

	.bettrai-probsol__mobile-tabs.is-open .bettrai-probsol__mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-probsol__mobile-list li {
		padding: 12px 14px;
		border-radius: 8px;
		color: #717184;
		font-size: 0.95rem;
		font-weight: 500;
		cursor: pointer;
	}

	.bettrai-probsol__mobile-list li.is-active {
		color: #269c9b;
		background: rgba(100, 197, 197, 0.12);
		font-weight: 600;
	}

	/* 1/2/3 progress row: only the CURRENT step's segment fills (0% -> 100%
	   over the 5s it's active), then the next step's segment starts filling
	   from empty when it becomes active — steps don't stay lit after their
	   turn passes. Sits flush under the field with matching rounded ends so
	   it reads as an extension of the field rather than a disconnected row. */
	.bettrai-probsol__mobile-progress {
		display: flex;
		gap: 6px;
		margin-top: 16px;
		margin-inline: 1.5px;
	}

	.bettrai-probsol__mobile-dot {
		flex: 1 1 0;
		height: 2px;
		border-radius: 2px;
		background: rgba(100, 197, 197, 0.2);
		overflow: hidden;
	}

	.bettrai-probsol__mobile-dot:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
	.bettrai-probsol__mobile-dot:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; }

	.bettrai-probsol__mobile-dot.is-active {
		background-image: linear-gradient(var(--bettrai-btn-green), var(--bettrai-btn-green));
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 0% 100%;
		animation: bettrai-tab-fill 5s linear forwards;
	}
}

/* 12. "More Support For Patients. / More Alignment For Care Teams." heading
   (WhatSophieTakes widget): the hard <br> between the two colored lines,
   combined with each line separately word-wrapping, reads as an awkward
   paragraph-like gap on phones. Drop the forced break only on mobile so it
   flows as one sentence with the color changing mid-line — wording, both
   colors, typography, font-size, and desktop/tablet are untouched (the <br>
   still renders there). Wrapping is then purely the browser's natural
   text flow for the available width. */
@media (max-width: 767px) {
	.bettrai-sophie__heading br { display: none; }
}

/* 13. Sophie intro copy on mobile: the desktop two-column layout right-aligns
   this paragraph in its own column; once the grid stacks to one column on
   phones that reads as off-balance against the left-aligned heading above
   it. Left-align and bump it up slightly from its very small desktop-floor
   size (0.88rem) for mobile legibility. */
@media (max-width: 767px) {
	.bettrai-sophie__copy {
		text-align: left;
		justify-self: start;
		font-size: 1rem;
	}
}

/* 14. Same section, mobile only: the shared --bettrai-space-section top
   padding (56px) reads as too much dead air above this specific heading, and
   the 3-line flowed heading (see #12) is tighter to read at the default
   1.08 line-height. Override locally — the shared token/site-wide spacing
   is untouched. */
@media (max-width: 767px) {
	.bettrai-sophie { padding-top: 56px; }
	.bettrai-sophie__heading { line-height: 1.25; }
}

/* 15. Same section, mobile only: .bettrai-sophie__head's grid `gap` is a
   horizontal column-gap on desktop (heading | copy side by side), but once
   the grid stacks to one column on phones (#4413) that same gap becomes a
   large VERTICAL gap between the heading and the copy paragraph. Its
   margin-bottom (spacing before the card grid below) is also oversized for
   the stacked layout. Tighten both; desktop's two-column gap is untouched. */
@media (max-width: 767px) {
	.bettrai-sophie__head {
		gap: 16px;
		margin-bottom: 20px;
	}
}

/* 16. "Handles the routine" etc. cards, mobile only: the desktop look is a
   decorative outline (a stretched SVG background with a wavy bottom edge)
   sized with a large fixed min-height + extra bottom padding to fit that
   wave — once stacked to one column on phones that leaves a big dead gap
   under the text before the wave. Drop only the wave/stagger; everything
   else (no fill — stays transparent over the section background, just a
   plain stroke outline, same as desktop) matches the original style. All
   three cards share one min-height (tallest card's natural content height +
   a little buffer, measured with the real copy) so a short card doesn't
   look randomly shorter than the others in the stack. Desktop's SVG
   outline/wave/stagger treatment is untouched. */
@media (max-width: 767px) {
	.bettrai-sophie__grid { gap: 16px; }

	.bettrai-sophie__card,
	.bettrai-sophie__card:first-child,
	.bettrai-sophie__card:last-child {
		background: transparent;
		border: 1px solid #cfe0e2;
		border-radius: var(--bettrai-radius-md);
		box-shadow: none;
		padding: clamp(36px, 9vw, 48px) clamp(26px, 6vw, 32px);
		min-height: 390px;
		margin-top: 0;
	}

	/* The desktop per-card :nth-child(1/2/3) rules (different min-height +
	   margin-top for the staggered look) are MORE specific than the plain
	   .bettrai-sophie__card override above, so they'd still win despite
	   coming earlier in the file — specificity beats source order. Match
	   them explicitly so every card is forced back to the shared height. */
	.bettrai-sophie__card:nth-child(1),
	.bettrai-sophie__card:nth-child(2),
	.bettrai-sophie__card:nth-child(3) {
		min-height: 390px;
		margin-top: 0;
	}

	.bettrai-sophie__card::before { display: none; }
}

/* 17. "How It Works" (Steps widget), mobile only:
   a) the supporting paragraph inherits right-align from the desktop
      two-column head; left-align it to match the heading above it.
   b) same wavy-card-shape problem as #16 above, same fix — plain stroke
      outline instead of the SVG clip-path wave, sized to content. Desktop
      untouched. */
@media (max-width: 767px) {
	.bettrai-steps__head p { text-align: left; }

	.bettrai-steps__card {
		min-height: 0;
		padding: clamp(32px, 8vw, 40px) clamp(26px, 6vw, 32px);
		background: transparent;
		border: 1px solid #cfe0e2;
		border-radius: var(--bettrai-radius-md);
		-webkit-clip-path: none;
		clip-path: none;
		filter: none;
	}
	.bettrai-steps__grid { gap: 16px; }
}

/* 18. Homepage "Less Administrative Burden / More Time for What Matters."
   (OutcomesBento widget) — fixed 48px H1 with no responsive clamp at all,
   massively oversized on phones. Match the same mobile cap used for the
   other page H1s (uniform site-wide mobile heading size). The eyebrow
   (black first line) and heading (green second line) are separate elements
   that must shrink together or the two lines render at mismatched sizes.
   Desktop/tablet untouched (48px only overridden inside this max-width
   query). */
@media (max-width: 600px) {
	.bettrai-bento__eyebrow,
	.bettrai-bento__heading {
		font-size: clamp(1.9rem, 8vw, 2.3rem);
	}

	/* The eyebrow and heading are separate block elements (<p> + <h2>), so
	   they always force a hard line break between them even though the copy
	   is one continuous sentence ("Less Administrative Burden More Time for
	   What Matters.") with just a color change partway through. Make them
	   inline on mobile so they flow and wrap together naturally, like the
	   Sophie heading treatment elsewhere on the site. */
	.bettrai-bento__eyebrow,
	.bettrai-bento__heading {
		display: inline;
	}
}

/* 18b. Bento quote card ("Point-of-care insights...") on phones: the tight
   1.2 line-height reads cramped at the card's mobile width where the quote
   wraps to 5-6 lines. Drop the size slightly and open up the leading. */
@media (max-width: 767px) {
	.bettrai-bento__quote p {
		font-size: 0.95rem;
		line-height: 1.55;
	}
}

/* 19. Footer, mobile only: the bottom copyright/legal bar sits flush against
   the very edge of the viewport (.bettrai-footer has 0 bottom padding by
   design). Add breathing room only — no border here. The Contact Us column
   right above already gets its own border-top when columns stack (see the
   `.bettrai-footer__main > .bettrai-footer__col` rule), so adding a second
   hairline here sandwiched the contact block between two dividers, which
   read as a doubled/duplicate line. Desktop spacing is untouched. */
@media (max-width: 767px) {
	.bettrai-footer { padding-bottom: 32px; }
	.bettrai-footer__bottom {
		margin-top: 8px;
		padding-top: 20px;
	}
}

/* 20. "Who We Work With" (CareFits widget), mobile only: the vertical role
   list (ACOs / Physicians / Community Pharmacies / Home Health / SNF)
   collapses into a compact dropdown selector, same pattern used elsewhere
   on this site. Picking an option proxies a click to the real (hidden) <li>
   tab so 100% of the existing interaction — panel crossfade, auto-advance,
   marker — is reused verbatim (see initCareMobileTabs() in frontend.js).
   Desktop's vertical rail + marker is completely untouched. */
.bettrai-care__mobile-tabs { display: none; }

@media (max-width: 1024px) {
	.bettrai-care__tabs { display: none; }

	.bettrai-care__mobile-tabs {
		display: block;
		position: relative;
		margin: 4px 0 0;
	}

	button.bettrai-care__mobile-trigger {
		display: flex;
		align-items: center;
		gap: 12px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid rgba(100, 197, 197, 0.38);
		border-radius: var(--bettrai-radius-md);
		background: rgba(255, 255, 255, 0.9);
		box-shadow: var(--bettrai-shadow-soft);
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	button.bettrai-care__mobile-trigger:hover,
	button.bettrai-care__mobile-trigger:focus {
		background: rgba(255, 255, 255, 0.9);
		color: inherit;
	}

	.bettrai-care__mobile-label {
		flex: 1 1 auto;
		color: var(--bettrai-navy);
		font-size: 1rem;
		font-weight: 600;
	}

	.bettrai-care__mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--bettrai-btn-green);
		border-bottom: 2px solid var(--bettrai-btn-green);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}
	.bettrai-care__mobile-tabs.is-open .bettrai-care__mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-care__mobile-list {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.bettrai-care__mobile-tabs.is-open .bettrai-care__mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-care__mobile-list li {
		padding: 12px 14px;
		border-radius: 8px;
		color: #717184;
		font-size: 0.95rem;
		font-weight: 500;
		cursor: pointer;
	}
	.bettrai-care__mobile-list li.is-active {
		color: var(--bettrai-btn-green);
		background: rgba(100, 197, 197, 0.12);
		font-weight: 700;
	}
}

/* 21. "What Challenge Are You Looking To Solve?" pills (PlatformShowcase
   widget), mobile only: 7 stacked pills eat too much vertical space, so they
   collapse into a "Choose a challenge" dropdown. Options are real links
   (same hrefs as the desktop pills) — picking one navigates directly, no
   in-place swap, no auto-rotation. Desktop pill row is untouched. */
.bettrai-platform__chips-mobile { display: none; }

@media (max-width: 767px) {
	.bettrai-platform__chips { display: none; }

	.bettrai-platform__chips-mobile {
		display: block;
		position: relative;
		max-width: 1180px;
		margin: 0 auto;
	}

	button.bettrai-platform__chips-mobile-trigger {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 46px;
		padding: 13px 24px;
		border: 1px solid rgba(41, 188, 188, 0.62);
		border-radius: var(--bettrai-radius-md);
		background: var(--bettrai-white);
		color: #506f80;
		font-size: 0.9rem;
		font-weight: 500;
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	button.bettrai-platform__chips-mobile-trigger:hover,
	button.bettrai-platform__chips-mobile-trigger:focus {
		background: var(--bettrai-white);
		color: #506f80;
	}

	.bettrai-platform__chips-mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--bettrai-btn-green);
		border-bottom: 2px solid var(--bettrai-btn-green);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}
	.bettrai-platform__chips-mobile.is-open .bettrai-platform__chips-mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-platform__chips-mobile-list {
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		right: 0;
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.bettrai-platform__chips-mobile.is-open .bettrai-platform__chips-mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.bettrai-platform__chips-mobile-list li a {
		display: block;
		padding: 12px 14px;
		border-radius: 8px;
		color: #506f80;
		font-size: 0.92rem;
		font-weight: 500;
		text-decoration: none;
	}
	.bettrai-platform__chips-mobile-list li a:hover,
	.bettrai-platform__chips-mobile-list li a:focus-visible {
		background: rgba(100, 197, 197, 0.14);
		color: var(--bettrai-btn-green);
	}
}

/* 22. Platform capability tabs (Healthcare Analytics / Care Management /
   Engagement / Population Health / Human-Guided AI), mobile only: the 5-col
   tab bar has nowhere to go on phones. Swap in a single "Active Tab · X of
   5" control with a progress row; tapping opens a dropdown of all 5.
   Picking an option proxies a click to the real (hidden) <li> tab, reusing
   100% of the existing crossfade + auto-advance (initPlatformTabsMobile()
   in frontend.js). The desktop tabs bar is taken out of layout with
   position:absolute + visibility:hidden (NOT display:none) specifically so
   its CSS animation — which the existing auto-advance timing depends on via
   `animationend` — keeps running invisibly; the mobile progress dot reuses
   that exact same animation/duration for a visually equivalent indicator.
   Desktop tab bar design is completely untouched. */
.bettrai-platform__tabs-mobile { display: none; }

@media (max-width: 1024px) {
	.bettrai-platform__tabs {
		position: absolute;
		width: 0;
		height: 0;
		overflow: hidden;
		visibility: hidden;
	}

	.bettrai-platform__tabs-mobile {
		display: block;
		position: relative;
		grid-column: 1 / -1;
		order: -1;
		padding: clamp(20px, 4vw, 28px) clamp(20px, 4vw, 28px) 0;
	}

	button.bettrai-platform__tabs-mobile-trigger {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		padding: 14px 16px;
		border: 1px solid rgba(100, 197, 197, 0.38);
		border-radius: var(--bettrai-radius-md);
		background: rgba(255, 255, 255, 0.9);
		box-shadow: var(--bettrai-shadow-soft);
		font-family: inherit;
		cursor: pointer;
		text-align: left;
	}
	button.bettrai-platform__tabs-mobile-trigger:hover,
	button.bettrai-platform__tabs-mobile-trigger:focus {
		background: rgba(255, 255, 255, 0.9);
		color: inherit;
	}

	.bettrai-platform__tabs-mobile-label {
		flex: 1 1 auto;
		color: var(--bettrai-navy);
		font-size: 1rem;
		font-weight: 600;
	}
	.bettrai-platform__tabs-mobile-count {
		flex: none;
		color: #8D8D9A;
		font-size: 0.85rem;
		font-weight: 500;
	}
	.bettrai-platform__tabs-mobile-caret {
		flex: none;
		width: 8px;
		height: 8px;
		border-right: 2px solid var(--bettrai-btn-green);
		border-bottom: 2px solid var(--bettrai-btn-green);
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s ease;
	}
	.bettrai-platform__tabs-mobile.is-open .bettrai-platform__tabs-mobile-caret {
		transform: translateY(2px) rotate(225deg);
	}

	.bettrai-platform__tabs-mobile-progress {
		display: flex;
		gap: 6px;
		margin-top: 12px;
	}
	.bettrai-platform__tabs-mobile-dot {
		flex: 1 1 0;
		height: 3px;
		border-radius: 2px;
		background: #e1e4e8;
		overflow: hidden;
	}
	/* A completed (already-visited) step reads as fully filled; only the
	   CURRENT step animates its fill, matching the desktop underline. */
	.bettrai-platform__tabs-mobile-dot.is-done {
		background: var(--bettrai-btn-green);
	}
	/* Default (no autoplay running): a manually-selected step reads as the
	   current position, so show it fully filled like a completed step — not
	   empty/gray, which looked indistinguishable from untouched future steps. */
	.bettrai-platform__tabs-mobile-dot.is-active {
		background: var(--bettrai-btn-green);
	}
	/* Only when autoplay is actually driving the tabs does the active dot
	   start empty and animate its own fill in over the dwell time. */
	.bettrai-platform__intro.is-autoplay .bettrai-platform__tabs-mobile-dot.is-active {
		background-image: linear-gradient(var(--bettrai-btn-green), var(--bettrai-btn-green));
		background-repeat: no-repeat;
		background-position: left center;
		background-size: 0% 100%;
		background-color: transparent;
	}
	/* Dedicated keyframe: this dot fills via background-size (it needs to stay
	   flush inside its own gray track, not move/scale the whole element), unlike
	   the desktop underline's ::after bar which fills via transform: scaleX().
	   Reusing that transform-based animation here was scaling the entire dot
	   element from nothing, which could flash the section's background through
	   as a gap between dots mid-animation instead of growing the fill in place. */
	.bettrai-platform__intro.is-autoplay .bettrai-platform__tabs-mobile-dot.is-active {
		animation: bettrai-platform-progress-fill var(--pd, 6000ms) linear;
	}
	.bettrai-platform__intro.is-autoplay.is-paused .bettrai-platform__tabs-mobile-dot.is-active {
		animation-play-state: paused;
	}
	@keyframes bettrai-platform-progress-fill {
		from { background-size: 0% 100%; }
		to { background-size: 100% 100%; }
	}

	.bettrai-platform__tabs-mobile-list {
		position: absolute;
		top: calc(100% + 8px);
		left: clamp(20px, 4vw, 28px);
		right: clamp(20px, 4vw, 28px);
		z-index: 5;
		margin: 0;
		padding: 8px;
		list-style: none;
		background: #ffffff;
		border: 1px solid rgba(7, 18, 74, 0.08);
		border-radius: var(--bettrai-radius-md);
		box-shadow: 0 18px 40px rgba(11, 31, 51, 0.18);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
	}
	.bettrai-platform__tabs-mobile.is-open .bettrai-platform__tabs-mobile-list {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	.bettrai-platform__tabs-mobile-list li {
		padding: 12px 14px;
		border-radius: 8px;
		color: #506f80;
		font-size: 0.95rem;
		font-weight: 500;
		cursor: pointer;
	}
	.bettrai-platform__tabs-mobile-list li.is-active {
		color: var(--bettrai-btn-green);
		background: rgba(100, 197, 197, 0.12);
		font-weight: 700;
	}
}

/* 23. Site-wide subtext/body-copy paragraphs are all individually set to the
   documented spec (Sora, 18px/30px, #8D8D9A on light backgrounds) rather
   than inheriting from one shared class. On mobile only, drop that to 17px
   across every one of those paragraph classes — every selector below is one
   of the rules that currently reads `font-size: 18px`. Desktop/tablet keep
   18px untouched; only font-size changes here, not color/line-height/family/
   weight/margin. */
@media (max-width: 767px) {
	.bettrai-probsol__copy,
	.bettrai-probsol__card-copy,
	.bettrai-care__text,
	.bettrai-platform__lead-sub,
	.bettrai-platform__intro p,
	.bettrai-steps__card p,
	.bettrai-faq__copy,
	.bettrai-faq__answer,
	.bettrai-sophie-hero__lead,
	.bettrai-sophie-support__text,
	.bettrai-sophie-continues__lead,
	.bettrai-sophie-connected__sub,
	.bettrai-payers-hero__lead,
	.bettrai-payers-vbc__head p,
	.bettrai-payers-coord__copy p:last-child,
	.bettrai-payers-panel__copy p,
	.bettrai-payers-interaction__copy p,
	.bettrai-payers-solutions__head p,
	.bettrai-payers-align__head p,
	.bettrai-payers-compare__sub,
	.bettrai-payers-faq__head p,
	.bettrai-providers-connected__lead,
	.bettrai-providers-data__head p,
	.bettrai-providers-insight__copy p,
	.bettrai-providers-serve__head p,
	.bettrai-providers-serve__content p,
	.bettrai-providers-wpanel__copy p,
	.bettrai-providers-platform__head p,
	.bettrai-programs-intro__head p,
	.bettrai-programs-icard__copy p,
	.bettrai-programs-behind__panel p,
	.bettrai-programs-between__lead,
	.bettrai-programs-band__inner p,
	.bettrai-programs-journey__head p,
	.bettrai-programs-platform__head p,
	.bettrai-programs-outcomes__head p,
	.bettrai-programs-strip__copy p,
	.bettrai-programs-faq__head p,
	.bettrai-programs-faq .bettrai-faq__answer p,
	.bettrai-about-snapshot__copy p,
	.bettrai-about-mv__head p,
	.bettrai-about-mvpanel p,
	.bettrai-about-mission__copy p,
	.bettrai-about-team__head p,
	.bettrai-about-values__head p,
	.bettrai-about-commit__sub,
	.bettrai-about-commit__inner > p,
	.bettrai-about-aim__head p,
	.bettrai-about-faq .bettrai-faq__answer p,
	.bettrai-contact-hero__lead,
	.bettrai-contact-form__lead,
	.bettrai-legal__body,
	.bettrai-resources-intro__lead {
		font-size: 16px;
	}

	/* FAQ +/- toggle icon reads oversized against the smaller mobile question
	   text; shrink it to match. Positions of the +/- bars are scaled down
	   proportionally with the smaller box (was 20px/2px thick). Desktop
	   untouched. */
	.bettrai-faq__icon {
		width: 16px;
		height: 16px;
	}

	.bettrai-faq__icon::before {
		top: 7px;
		width: 16px;
	}

	.bettrai-faq__icon::after {
		left: 7px;
		height: 16px;
	}

	/* FAQ answers specifically go one step smaller than the shared 17px
	   mobile body-copy size above (per request), not just the site-wide
	   17px cap. The trigger row above reserves ~36px on the right for the
	   +/- icon (16px gap + 20px icon), so its question text naturally stops
	   short of the edge; the answer row has no icon and was stretching all
	   the way to the container edge, reading as lopsided against the
	   question above it. Match that same right inset. */
	.bettrai-faq__answer {
		font-size: 16px;
		padding-right: 36px;
	}
}

/* Re-homed here (was previously positioned earlier in the file, BEFORE
   these components' own base rules - plain cascade source order let the
   base rules win regardless of the media query matching, so none of these
   ever actually applied). Every mobile override in this file needs to come
   after its base rule; the end of the file guarantees that. */

/* "Fragmented Patient Information" / "Limited Care-Team Capacity" rows,
   mobile only: the icon-left, text-right side-by-side layout leaves the
   text column too narrow once padding/gap eat into a 375px-wide card,
   forcing every line to wrap awkwardly. Stack icon above text and shrink
   the icon so the text gets the full card width. Desktop/tablet untouched. */
@media (max-width: 767px) {
	.bettrai-providers-admin__intro { font-size: 16px; }
	.bettrai-providers-admin__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		padding-block: 32px;
	}
	.bettrai-providers-admin__ic {
		width: 36px;
		height: 36px;
	}
	.bettrai-providers-admin__ic svg {
		width: 18px;
		height: 18px;
	}
	.bettrai-providers-admin__ic img {
		width: 18px;
		height: 18px;
	}
	.bettrai-providers-admin__ic i {
		font-size: 16px;
	}
}

/* "Connected Care Starts With One Complete View." Sophie figure, mobile
   only: max-height:550px lets her fill almost the entire card on a phone
   screen, dominating the section. Cap her smaller. Desktop/tablet
   untouched. */
@media (max-width: 767px) {
	.bettrai-about-team__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
	.bettrai-providers-connected__figure { margin-top: 28px; }
	.bettrai-providers-connected__sophie { max-height: 320px; }
	/* This divider is a decorative vertical rule BETWEEN the two desktop
	   columns (left copy | divider | right stat grid), sized with a
	   calc(100% + ...) height formula that only makes sense inside that
	   3-column row. Once the grid collapses to one column on mobile it
	   becomes its own orphaned "row" - a stray vertical line hanging below
	   the teal section, unrelated to anything around it. */
	.bettrai-providers-connected__divider { display: none; }
}

/* Radial care diagram ("Care Manager / PCP / Pharmacy / Specialist" around
   Patient), mobile only: min-height:420px was sized for the desktop
   two-column layout; at the mobile canvas width (max-width:460px, aspect
   628/601) the diagram itself only needs ~ its own width in height, leaving
   a large dead gap above/below it inside that fixed min-height. Also drop
   the lopsided 28px-left/0-right padding to a symmetric, smaller value now
   that it's centered under the copy instead of beside it. */
@media (max-width: 767px) {
	.bettrai-providers-radial {
		min-height: 0;
		border-left: 0;
		border-top: 0;
		padding-top: 4px;
	}
	.bettrai-providers-radial--graphic {
		padding: 20px 0;
	}
	.bettrai-providers-radial__canvas { max-width: 100%; }
}

/* "Connected Care Starts With One Complete View." (ProvidersConnected)
   section, mobile only: trim the gap above the teal card. Desktop
   untouched. */
@media (max-width: 767px) {
	.bettrai-providers-connected { padding-top: 40px; padding-bottom: 48px; }
	/* sophie-connected.png is a tight torso crop with zero transparent
	   padding at the bottom edge (pixels run flush to the canvas edge), so
	   she's meant to visibly overlap/sit on top of the card with no gap -
	   her legs being cropped by the card edge is expected here. */
	.bettrai-providers-connected__grid { margin-top: -35px; }
	/* Fixed height:350px was sized for the 2-column desktop grid; stacked to
	   one column on mobile it leaves a huge dead gap under short card copy.
	   Let each card size to its own content. Desktop/tablet untouched. */
	.bettrai-providers-ccard { height: auto; padding-bottom: 30px; }
}

/* "One Platform for Connected Care." (ProvidersPlatform) section, mobile
   only: a bit more breathing room above the heading so it doesn't sit
   flush against the section above it. Desktop untouched. */
@media (max-width: 767px) {
	.bettrai-providers-platform { padding-top: 48px; padding-bottom: 32px; }
	.bettrai-providers-perf { padding-top: 32px; }
	.bettrai-providers-perf__outreach img { display: none; }
	.bettrai-providers-perf__outreach {
		background-image: url("../images/providers/outreach-mobile.jpg");
		background-size: cover;
		background-position: center;
	}
	.bettrai-providers-perf__impact {
		background-image: url("../images/providers/impact-mobile.jpg") !important;
		background-size: cover;
		background-position: center;
	}
	.bettrai-providers-perf__impact-overlay {
		background: linear-gradient(180deg, rgba(13,18,48,0.55) 0%, rgba(13,18,48,0.6) 35%, rgba(13,18,48,0.94) 100%);
	}
}

/* "See The Full Picture. Support Every Patient." (ProvidersData) head,
   mobile only: left-align instead of centered. Desktop untouched. */
@media (max-width: 767px) {
	.bettrai-providers-data__head,
	.bettrai-providers-data__head .bettrai-providers-h2--center { text-align: left; }
}

/* Sophie page, tablet only (768-1024px). Placed at the very end of the
   stylesheet on purpose: these override component base rules that are
   declared FURTHER DOWN the file than the shared "4. Responsive" tablet
   block near the top (e.g. .bettrai-sophie-hero's own rules live around
   line 4744, .bettrai-sophie-connected's around line 5773) — same
   specificity + later source order meant those base rules were silently
   winning over the earlier tablet overrides. Living last in the cascade
   guarantees these always win regardless of where each widget's own CSS
   happens to sit in the file. Desktop (>1024px) and mobile (<=767px) are
   untouched. */
@media (max-width: 1024px) {
	/* "Checking in with your patients" (Support) section: same reorder as
	   mobile — text leads, video/photo sits below it. Also matches the
	   mobile top-padding bump — the hero figure sits directly above with
	   no bottom padding now that it's stacked, so the desktop 24-48px top
	   padding reads as the heading touching the figure. */
	.bettrai-sophie-support { padding-top: 56px; }
	.bettrai-sophie-support__copy { order: 1; }
	.bettrai-sophie-support__media { order: 2; }
	.bettrai-sophie-support__pillars { order: 3; }

	/* Sophie hero: reuse the exact same mobile treatment (eyebrow hidden,
	   figure reset/centered under the copy, portrait-crop background
	   covering the full section) instead of the desktop side-by-side
	   layout, which pushes Sophie mostly off-screen at tablet widths via
	   its large negative translateX. */
	.bettrai-sophie-hero__copy .bettrai-sophie-eyebrow { display: none; }
	.bettrai-sophie-hero__inner { min-height: 0; }
	.bettrai-sophie-hero__copy { padding-bottom: 24px; }
	.bettrai-sophie-hero__media {
		justify-self: center;
		width: min(84%, 520px);
		margin: 0 auto;
		transform: translateX(-22%);
	}
	.bettrai-sophie-hero {
		background-image: url("../images/sophie/hero-corridor-tablet.png") !important;
		background-size: cover !important;
		background-position: center 30% !important;
		background-repeat: no-repeat !important;
	}
	.bettrai-sophie-hero__bg { display: none; }
	.bettrai-sophie-hero__badges {
		width: clamp(60px, 11%, 76px);
		right: -6%;
		top: 26%;
	}

	/* "Stay Ahead / Stay Informed / Stay Connected" pillar cards: drop the
	   wavy clip-path card shape, 2 cards side by side, 3rd stretched full
	   width. */
	.bettrai-sophie-support__pillars {
		grid-template-columns: repeat(2, 1fr);
	}
	.bettrai-sophie-support__pillars li {
		min-height: 0;
		padding: clamp(32px, 4vw, 40px) clamp(24px, 3vw, 34px);
		border-radius: var(--bettrai-radius-md);
		-webkit-clip-path: none;
		clip-path: none;
	}
	.bettrai-sophie-support__pillars li:nth-child(3) {
		grid-column: 1 / -1;
	}

	/* "More Connected Care Starts with Sophie" CTA: fuller wash across the
	   whole image (matching the mobile fix) instead of the desktop
	   left-to-right gradient, and cap the title/sub width so they break
	   onto their own lines instead of stretching nearly edge-to-edge. */
	.bettrai-sophie-connected__overlay {
		background: linear-gradient(180deg, rgba(8,16,40,0.32) 0%, rgba(8,16,40,0.22) 45%, rgba(8,16,40,0.4) 100%);
	}
	.bettrai-sophie-connected__title {
		max-width: 420px;
	}
	.bettrai-sophie-connected__sub {
		max-width: 420px;
	}
	/* Providers page reuses this same CTA with a longer title ("Care
	   Doesn't Stop When the Visit Ends.") that wraps to 3 lines at the
	   420px cap above — widen just for this page so it settles on 2. */
	.bettrai-providers-page .bettrai-sophie-connected__title {
		max-width: 540px;
	}

	/* Sophie FAQ ("Care Doesn't End When the Visit Does"): same left-align
	   as mobile instead of the default centered head. */
	.bettrai-sophie-faq__head {
		text-align: left;
		margin-inline: 0;
	}

	/* Resource cards: keep the same full-bleed photo + overlaid caption
	   band design as desktop at every width — no separate tablet layout,
	   so there's no risk of the caption detaching from the photo. */

	/* "Conversations with Smarter AI" closing CTA: the existing mobile fix
	   only covers <=900px, leaving a 901-1024px gap where .bettrai-cta is
	   already stacked to a column (from the shared tablet rule) but the
	   card still carries its fixed height/flex-basis, clipping the heading
	   and overlapping the photo. No image on tablet either — card only. */
	.bettrai-sophie-cta .bettrai-cta__media { display: none; }
	.bettrai-sophie-cta .bettrai-cta__card {
		flex: 0 0 auto;
		height: auto;
		min-height: 0;
		padding-block: clamp(36px, 8vw, 52px);
	}
}

/* "The Hardest Part of Care Often Begins After the Visit Ends"
   (ProvidersAdmin widget), tablet only: rows 1 + 2 side by side, row 3 side
   by side with the photo, instead of everything stacked full-width in one
   column. .copy is set to display:contents so its children (heading, intro,
   the 3 row cards) become direct grid items of .inner and can be placed
   in the same 2-col/4-row grid as .media — icon-left row layout inside each
   card is untouched, only the outer arrangement changes. Desktop (>1024px)
   and mobile (<=767px, which already stacks everything full-width) are
   untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
	.bettrai-providers-admin__inner {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
		gap: 16px;
	}
	.bettrai-providers-admin__copy { display: contents; }
	/* NOTE: must be a descendant selector, not `>` — display:contents on
	   .copy doesn't change the real DOM parent-child relationship the `>`
	   combinator matches against, so a `.inner > .h2` rule here would never
	   match and the heading would fall back to 1-column auto-placement
	   (narrow width, wrapping to 3 lines) instead of spanning full width. */
	.bettrai-providers-admin__inner .bettrai-providers-h2 { grid-column: 1 / -1; grid-row: 1; }
	.bettrai-providers-admin__intro { grid-column: 1 / -1; grid-row: 2; margin-bottom: 0; }
	.bettrai-providers-admin__row { margin-bottom: 0; }
	.bettrai-providers-admin__row:nth-of-type(1) { grid-column: 1; grid-row: 3; }
	.bettrai-providers-admin__row:nth-of-type(2) { grid-column: 2; grid-row: 3; }
	.bettrai-providers-admin__row:nth-of-type(3) { grid-column: 1; grid-row: 4; }
	.bettrai-providers-admin__media { grid-column: 2; grid-row: 4; }

	/* Icons stacked above text, not side by side — same as mobile, since
	   these cards are now half-width on tablet too and the icon-left
	   layout leaves too little room for the text. */
	.bettrai-providers-admin__row {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}
	.bettrai-providers-admin__ic {
		width: 36px;
		height: 36px;
	}
	.bettrai-providers-admin__ic svg {
		width: 18px;
		height: 18px;
	}
	.bettrai-providers-admin__ic img {
		width: 18px;
		height: 18px;
	}
	.bettrai-providers-admin__ic i {
		font-size: 16px;
	}

	/* All 4 boxes (3 row cards + the photo) same height, forming a neat
	   2x2 grid instead of each row sizing to its own content. */
	.bettrai-providers-admin__row,
	.bettrai-providers-admin__media {
		min-height: 260px;
	}
	.bettrai-providers-admin__row:nth-of-type(1),
	.bettrai-providers-admin__row:nth-of-type(2) {
		min-height: 300px;
	}

	/* "The Hardest Part of Care..." heading wraps to 3 lines at tablet
	   width; shrink slightly so it settles on 2. */
	.bettrai-providers-admin__inner .bettrai-providers-h2 {
		font-size: clamp(1.6rem, 3.2vw, 2rem);
	}

	/* Providers hero "Smarter Care Starts with Bettr Coordination.": the
	   fixed 69px line-height (tuned for the 64px desktop font size) is way
	   looser than the tablet clamp size, reading as an oddly large gap
	   between lines. Tighten it the same way the mobile fix does. The wide
	   760px copy column also lets "Bettr" fit onto line 1 with only
	   "Coordination." wrapping alone onto line 3 — narrow the column so
	   "Smarter Care Starts with" fills line 1 and "Bettr Coordination."
	   wraps together onto line 2. Scoped to the Providers page only (same
	   pattern as the existing providers-page hero overrides below) so
	   other pages using this shared hero widget are untouched. */
	.bettrai-payers-hero__title {
		line-height: 1.15em;
	}
	.bettrai-providers-page .bettrai-payers-hero__copy {
		max-width: 480px;
	}
}

/* "Connected Care Starts With One Complete View." (ProvidersConnected
   widget), tablet only: drop the Sophie figure column and divider, stack
   heading+lead above the 4 cards, and lay the cards out as a proper 2x2
   grid instead of 1 narrow column of 4 stacked rows (the shared
   .bettrai-providers-connected__inner 3-col grid squeezes .left down to a
   narrow track at tablet width, and the base tablet rule forces the card
   grid to 1 column). Desktop (>1024px) and mobile (<=767px, which already
   has its own stacked treatment) are untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
	.bettrai-providers-connected__inner {
		grid-template-columns: 1fr;
	}
	.bettrai-providers-connected__figure,
	.bettrai-providers-connected__divider {
		display: none;
	}
	.bettrai-providers-connected__grid {
		grid-template-columns: repeat(2, 1fr);
		margin-top: 28px;
	}
	/* Fixed 350px height was tuned for the desktop 4-across row (narrower
	   cards, more text wrapping); in the 2x2 tablet grid the text is much
	   shorter relative to that height, leaving dead space at the bottom. */
	.bettrai-providers-ccard {
		height: auto;
		padding-bottom: 28px;
	}
	/* Base section has 0 bottom padding — desktop relies on the (now
	   hidden) Sophie figure column to extend the section's height. Without
	   it the cards sit flush against the section's bottom edge. */
	.bettrai-providers-connected {
		padding-bottom: 56px;
	}
}

/* "Built to Fit Into Your Existing Care Workflow" heading (ProvidersWorkflow
   widget), tablet only: fixed 48px with the base 1.12 line-height wraps to 2
   lines at tablet width, and 48px*1.12 per line reads as an oversized gap
   relative to the narrower column. Shrink the same way other fixed-48px
   headings on this site are handled at tablet. Desktop untouched. */
@media (min-width: 768px) and (max-width: 1024px) {
	.bettrai-providers-workflow__head .bettrai-providers-h2 {
		font-size: clamp(1.9rem, 4vw, 2.4rem);
	}
}
@media (max-width: 767px) {
	.bettrai-providers-workflow__head .bettrai-providers-h2 {
		font-size: 28px !important;
	}
}

/* ProvidersPlatform "Engage Patients / Streamline Workflows / Coordinate
   Care / Surface Insights" photo, tablet only: the shared tablet rule caps
   it at a short 260px min-height with default (center) object-position,
   cropping into people's faces near the top of the frame. Taller box +
   top-anchored crop keeps faces in frame. Desktop untouched. */
@media (max-width: 1024px) {
	.bettrai-providers-platform__media {
		min-height: 420px;
	}
	.bettrai-providers-platform__media img {
		object-position: center top;
	}
}

/* "Better for Patients. Better for Teams. Better for Performance." head
   (ProvidersPerf widget), tablet only: stack heading above the paragraph
   instead of the desktop 2-col side-by-side grid, and left-align the
   paragraph (its desktop right-align only makes sense next to the
   heading). Desktop untouched. */
@media (max-width: 1024px) {
	.bettrai-providers-perf__head {
		grid-template-columns: 1fr;
	}
	.bettrai-providers-perf__head p {
		text-align: left;
	}
	/* "Automate Routine Outreach" / medication-adherence cards: swap to the
	   same dedicated mobile crops already used at <=767px instead of the
	   desktop images, which crop awkwardly at tablet card proportions. */
	.bettrai-providers-perf__outreach img { display: none; }
	.bettrai-providers-perf__outreach {
		background-image: url("../images/providers/outreach-mobile.jpg");
		background-size: cover;
		background-position: center;
	}
	.bettrai-providers-perf__impact {
		background-image: url("../images/providers/impact-mobile.jpg") !important;
		background-size: cover;
		background-position: center;
	}
	.bettrai-providers-perf__impact-overlay {
		background: linear-gradient(180deg, rgba(13,18,48,0.55) 0%, rgba(13,18,48,0.6) 35%, rgba(13,18,48,0.94) 100%);
	}
}

/* "Keeping Care Connected" (ProvidersServe) panel, tablet only: more
   breathing room around the dropdown/content now that the left tab column
   is gone — the existing tablet padding reads tight against the panel
   edges. Desktop untouched. */
@media (max-width: 1024px) {
	.bettrai-providers-serve__panel {
		padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 36px);
	}
}

/* "Automate Routine Outreach" / medication-adherence cards (ProvidersPerf
   widget), tablet only: stack full-width, one above the other (matching
   the mobile layout) instead of the desktop side-by-side 2-col row —
   full-width photo cards read better than two squeezed narrow columns at
   tablet width. Desktop untouched. */
@media (max-width: 1024px) {
	.bettrai-providers-perf__row {
		grid-template-columns: 1fr;
	}
}

/* "Keeping Care Connected" (ProvidersServe) panel: an older, narrower rule
   (@media max-width:860px) is the only place that actually collapses the
   panel to a single column — the wider tablet range (861-1024px) was still
   getting the desktop `280px 1fr` two-column grid from a separate
   max-width:1024px rule earlier in the file, colliding with the dropdown
   (which switches in at <=1024px) and rendering it as a tiny left column
   instead of a full-width bar on top. Force single-column across the FULL
   768-1024px tablet range here, last in the cascade, so there's no gap.
   Desktop untouched. */
@media (max-width: 1024px) {
	.bettrai-providers-serve__panel {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* "Designed Around the Way You Deliver Care." (ProvidersWorkflow tab
   content) heading, tablet only: the base line-height is an independent
   clamp(2.35rem,3.55vw,56px) — NOT tied to the fixed 48px font-size — and
   at tablet viewport widths that clamp bottoms out below 48px, making the
   line-height shorter than the text itself so wrapped lines overlap.
   Same relative line-height approach as the existing mobile fix, sized for
   tablet. !important matches the specificity of the base clamp() rule,
   which otherwise wins on source order despite living earlier in the file. */
@media (max-width: 1024px) {
	.bettrai-providers-wpanel__copy h3 {
		font-size: clamp(1.9rem, 3.6vw, 2.4rem) !important;
		line-height: 1.2 !important;
	}
}

/* Care-team radial diagram (Care Manager / PCP / Specialist / Pharmacy /
   Family-Caregiver / Patient hub) circles, tablet only: sized up slightly
   from the desktop percentages — node/center diameters are set as a % of
   the container so bumping the percentage scales every circle together
   without touching their (unchanged) center-point positions. Desktop
   untouched. */
@media (max-width: 1024px) {
	.bettrai-providers-radial__node {
		width: 27%;
	}
	.bettrai-providers-radial__center {
		width: 32%;
	}
}