/* ====================================================================
   For Churches — section + card styles layered on top of
   extensions/index_new/styles.css (which supplies the theme tokens,
   container, nav, hero scaffolding, btn, split, section, cta-card).

   All selectors live under `.mv-root` so they only resolve where the
   redesign is mounted — the legacy /for+churches/ surface keeps its
   own utility-class styling untouched.
   ==================================================================== */

/* ---------- Decorative avatar / logo palette ----------
   These mock avatars use playful multi-stop gradients (pink/purple/green/
   cyan/amber) and the brand logo glyph is the cyan accent. They are purely
   DECORATIVE illustration colors (like practice_history's --ph-v* palette),
   so they stay static across themes — no dark override. Each stop is its
   own custom prop (so the audit strips the hex), and the full gradients are
   composed from those var()s so the PHP/inline styles can reference one
   token instead of a literal linear-gradient(). */
.mv-root {
	--fc-av-pink:   #F472B6;
	--fc-av-purple: #7C7CF5;
	--fc-av-green:  #34D399;
	--fc-av-cyan:   #22D3EE;
	--fc-av-amber:  #FBBF24;
	--fc-logo:      #00B4D8;
	--fc-grad-pink-purple: linear-gradient(135deg, var(--fc-av-pink), var(--fc-av-purple));
	--fc-grad-green-cyan:  linear-gradient(135deg, var(--fc-av-green), var(--fc-av-cyan));
	--fc-grad-amber-pink:  linear-gradient(135deg, var(--fc-av-amber), var(--fc-av-pink));
	--fc-grad-purple-cyan: linear-gradient(135deg, var(--fc-av-purple), var(--fc-av-cyan));
	--fc-grad-pink-amber:  linear-gradient(135deg, var(--fc-av-pink), var(--fc-av-amber));
}

/* ---------- In-app shell offset ----------
   Applied only when the page renders inside the site's signed-in chrome
   (extensions/for_churches.php sets `.fc-in-app` on `.mv-root` for
   logged-in users). The numbers mirror the legacy /for+churches/ page:
   60px condensed left rail + 200px Church Pages secondary sidebar
   (lt-w170px on laptop), 68px top fixed nav (60px pp / 64px tlp).
   The marketing-only variant (logged-out) renders without this class
   and uses the full viewport. */
.mv-root.fc-in-app {
	margin-left: 284px;
	min-height: calc(100vh - 68px);
	padding-top: 68px;
}
/* Horizontal offset mirrors the slate church rail (churches_loggedin/church_sidebar):
   .hl-nav-root is 224px @ left:60px (=284px) and hides at <=1180px, leaving just the
   60px icon rail; below 880px even that goes off-canvas (=0). These breakpoints match
   home_loggedin/secondary_nav.css exactly so the content and the rail never disagree. */
@media (max-width: 1180px) {
	.mv-root.fc-in-app { margin-left: 60px; }
}
/* iPad-portrait: the icon rail goes off-canvas via the scanner's tlp- (768–1180px
   device-width, portrait), so reclaim the full width across that range. Landscape keeps the rail. */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: portrait) {
	.mv-root.fc-in-app { margin-left: 0; }
}
@media (max-width: 880px) {
	.mv-root.fc-in-app { margin-left: 0; }
}
/* Top-bar clearance + split collapse keep their own (height-driven) breakpoints,
   independent of the rail's horizontal breakpoints above. */
@media (max-width: 1024px) {
	.mv-root.fc-in-app { padding-top: 64px; }
}
@media (max-width: 768px) {
	/* collapse the shared two-column .split hero so it doesn't scroll sideways on phones */
	.mv-root .split, .mv-root .split.reverse { grid-template-columns: 1fr; }
	.mv-root .split.reverse > :first-child { order: 0; }
}
@media (max-width: 480px) {
	.mv-root.fc-in-app { padding-top: 60px; }
}

/* In-app: the page sits inside the main column, so collapse the
   marketing-scale h1/h2 sizes per the design handoff's shell spec
   (h1 64 → 52, section h2 60 → 48, cta-headline 56 → 44). Also tighten
   the section vertical padding so the in-app surface doesn't waste
   space — sidebar users are reading, not scrolling a landing page. */
.mv-root.fc-in-app .fc-hero h1 { font-size: 52px; }
.mv-root.fc-in-app .split h2 { font-size: 48px; }
.mv-root.fc-in-app .section-head h2 { font-size: 44px; }
.mv-root.fc-in-app .fc-cta .cta-headline { font-size: 44px; }
.mv-root.fc-in-app .section { padding: var(--sp-24) 0; }
.mv-root.fc-in-app .fc-hero { padding: 0 0 var(--sp-20); gap: var(--sp-8); }
/* Content-top = canonical 40px: H1 sits 40px below the 68px fixed header,
   matching .mc-page (the hero owns no extra top padding/margin in-app). */
.mv-root.fc-in-app .fc-hero h1 { margin-top: 0; }
.mv-root.fc-in-app .split { gap: var(--sp-10); }
.mv-root.fc-in-app .fc-cta { padding: var(--sp-12) var(--sp-10); }
/* In-app .container = the canonical signed-in content column, identical to
   /home/ & /your+verses/ (.mc-page): max-width 1440 centered + the
   64→48→40→16 gutter ladder, so the For Churches hero/H1 line up at the
   exact same x as every other signed-in page (no bounce when navigating).
   .container owns only horizontal gutters + the cap; the vertical
   content-top is set on .fc-hero-section below. */
.mv-root.fc-in-app .container {
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 64px;
	padding-right: 64px;
}
@media (max-width: 1600px) {
	.mv-root.fc-in-app .container { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 1180px) {
	.mv-root.fc-in-app .container { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 767px) {
	.mv-root.fc-in-app .container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- "Your church" member banner ----------
   Renders above the pastor-pitch hero for signed-in members who follow a
   church they don't lead — their one-click route back to /church/<slug>/.
   Whole card is the link; the CTA pill is decorative affordance. */
.mv-root .fc-mychurch-strip {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: var(--sp-8);
}
.mv-root .fc-mychurch {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-radius: 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.mv-root .fc-mychurch:hover { border-color: var(--accent); box-shadow: 0 4px 18px rgba(11, 20, 38, 0.07); }
.mv-root .fc-mychurch-logo {
	width: 44px;
	height: 44px;
	border-radius: 11px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--fc-grad-purple-cyan);
	color: #fff;
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 600;
}
.mv-root .fc-mychurch-logo img { width: 100%; height: 100%; object-fit: cover; }
.mv-root .fc-mychurch-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mv-root .fc-mychurch-eye {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
}
.mv-root .fc-mychurch-name {
	font-family: var(--font-serif);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--text-1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mv-root .fc-mychurch-sub { font-size: 12.5px; color: var(--text-3); }
.mv-root .fc-mychurch-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
	padding: 9px 16px;
	border-radius: 999px;
	background: var(--brand);
	color: var(--brand-fg);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}
@media (max-width: 640px) {
	.mv-root .fc-mychurch { flex-wrap: wrap; }
	.mv-root .fc-mychurch-cta { width: 100%; justify-content: center; }
}

/* In-app hero is a SINGLE focused column (no preview card on the right for
   signed-in pastors), so the 3 "easy steps" become the full-width centerpiece:
   one row of three, slightly enlarged for prominence. They wrap then stack on
   smaller widths (phone rules further down). The chevron separators stay hidden. */
.mv-root.fc-in-app .fc-hero { grid-template-columns: 1fr; }
.mv-root.fc-in-app .fc-steps { flex-wrap: wrap; gap: var(--sp-4); }
.mv-root.fc-in-app .fc-step { flex: 1 1 0; min-width: 150px; padding: 18px; }
.mv-root.fc-in-app .fc-step-num { width: 34px; height: 34px; font-size: 14px; }
.mv-root.fc-in-app .fc-step-title { font-size: 14px; }
.mv-root.fc-in-app .fc-step-sep { display: none; }

/* Cards sit edge-to-edge of the right column in-app instead of
   right-aligned with a max-width — the column is already constrained. */
.mv-root.fc-in-app .church-verse-card,
.mv-root.fc-in-app .twv-card,
.mv-root.fc-in-app .group-card,
.mv-root.fc-in-app .share-card { max-width: none; margin-left: 0; }

/* Hide the marketing breadcrumb in-app — the secondary sidebar is the
   nav surface for signed-in users. */
.mv-root.fc-in-app .fc-breadcrumb { display: none; }
.mv-root.fc-in-app .fc-hero-section { padding-top: 40px; }

/* ---------- Breadcrumb ---------- */
.mv-root .fc-breadcrumb {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--text-3);
	padding-top: var(--sp-8);
	margin-bottom: var(--sp-6);
}
.mv-root .fc-bc-link { color: var(--accent); font-weight: 500; text-decoration: none; }
.mv-root .fc-bc-link:hover { text-decoration: underline; }
.mv-root .fc-bc-chev { transform: rotate(-90deg); opacity: 0.5; }
.mv-root .fc-bc-current { color: var(--text-2); font-weight: 500; }

/* ---------- Hero (For Churches) ----------
   FC's marketing hero uses a tighter top padding than the shared .hero
   (64 vs 120) because the breadcrumb + "New · Memorize With Your Church"
   eyebrow already sit above the h1. The h1 mirrors the shared Slate &
   Coral hero spec — stated explicitly here so renames upstream don't
   silently drift FC out of lockstep. */
.mv-root .fc-hero { padding: 64px 0 80px; }
.mv-root .fc-hero h1 { font-size: 64px; line-height: 1.0; letter-spacing: -0.022em; margin-top: 12px; }

/* New · Church Pages eyebrow pill */
.mv-root .fc-eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	background: var(--accent-soft);
	border: 1px solid rgba(124, 124, 245, 0.25);
	border-radius: var(--radius-pill);
	text-transform: none;
	letter-spacing: 0.04em;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-2);
}
.mv-root.theme-light .fc-eyebrow-pill { border-color: rgba(85, 88, 224, 0.20); }
.mv-root .fc-eyebrow-tag {
	background: var(--accent);
	color: white;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* 3-step indicator */
.mv-root .fc-steps {
	display: flex;
	align-items: stretch;
	gap: var(--sp-3);
	margin-top: var(--sp-8);
	margin-bottom: var(--sp-8);
}
.mv-root .fc-step {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	flex: 1;
	min-width: 0;
	box-shadow: var(--shadow-card);
}
.mv-root .fc-step-num {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--accent-soft);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.mv-root .fc-step-title { font-size: 13px; font-weight: 600; color: var(--text-1); line-height: 1.2; }
.mv-root .fc-step-desc { font-size: 11px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
.mv-root .fc-step-sep { color: var(--text-muted); align-self: center; transform: rotate(-90deg); flex-shrink: 0; }

/* Sign-in helper text */
.mv-root .fc-signin { font-size: 14px; color: var(--text-3); }
.mv-root .fc-signin-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.mv-root .fc-signin-link:hover { text-decoration: underline; }

/* ---------- Church Verse Card (hero widget) ---------- */
.mv-root .church-verse-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-elev);
	position: relative;
	overflow: hidden;
}
.mv-root .church-verse-card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 55%);
	pointer-events: none;
}
.mv-root .cv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	position: relative;
	margin-bottom: var(--sp-5);
}
.mv-root .cv-church { display: flex; align-items: center; gap: 12px; }
.mv-root .cv-church-logo {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--accent), var(--brand));
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.mv-root .cv-church-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-root .cv-church-name {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 600;
	color: var(--text-1);
	line-height: 1.1;
}
.mv-root .cv-church-meta {
	font-size: 12px;
	color: var(--text-3);
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
}
.mv-root .cv-dot {
	width: 6px; height: 6px;
	background: var(--success);
	border-radius: 50%;
	box-shadow: 0 0 0 3px var(--success-soft);
}
.mv-root .cv-verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	font-weight: 600;
	color: var(--success);
	background: var(--success-soft);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}

.mv-root .cv-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: var(--sp-4);
	position: relative;
}
.mv-root .cv-pulse {
	width: 6px; height: 6px;
	background: var(--accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.mv-root .cv-ref {
	font-family: var(--font-serif);
	font-size: 30px;
	font-weight: 600;
	color: var(--text-1);
	letter-spacing: -0.015em;
	margin-bottom: var(--sp-3);
	position: relative;
}
.mv-root .cv-translation {
	font-family: var(--font-mono);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-3);
	vertical-align: middle;
	margin-left: 6px;
}

.mv-root .cv-quote {
	font-family: var(--font-serif);
	font-size: 17px;
	font-weight: 500;
	font-style: italic;
	color: var(--text-2);
	line-height: 1.45;
	padding: 14px 16px;
	background: var(--surface-2);
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-5);
	position: relative;
	border-left: 3px solid var(--accent);
}

.mv-root .cv-pastor-note {
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin-bottom: var(--sp-5);
	background: transparent;
	position: relative;
}
.mv-root .cv-pn-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mv-root .cv-pn-av {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--fc-grad-pink-purple);
	color: white;
	font-weight: 600;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	flex-shrink: 0;
}
.mv-root .cv-pn-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-root .cv-pn-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.mv-root .cv-pn-role { font-size: 11px; color: var(--text-3); margin-top: 1px; font-family: var(--font-mono); }
.mv-root .cv-pastor-note p { font-size: 13px; color: var(--text-2); line-height: 1.55; font-style: italic; }

.mv-root .cv-progress { position: relative; margin-bottom: var(--sp-5); }
.mv-root .cv-progress-bar {
	height: 6px;
	background: var(--surface-2);
	border-radius: var(--radius-pill);
	overflow: hidden;
	margin-bottom: 8px;
}
.mv-root .cv-progress-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--accent), var(--brand));
	border-radius: inherit;
}
.mv-root .cv-progress-meta { font-size: 12px; color: var(--text-3); }
.mv-root .cv-progress-meta strong { color: var(--text-1); font-weight: 600; }

.mv-root .cv-cta { width: 100%; justify-content: center; padding: 14px 18px; position: relative; text-decoration: none; }

/* ---------- This Week's Verse (group widget) ---------- */
.mv-root .twv-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-card);
	max-width: 540px;
	margin-left: auto;
}
.mv-root .twv-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.mv-root .twv-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--text-1); }
.mv-root .twv-icon {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex; align-items: center; justify-content: center;
}
.mv-root .twv-pill {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 11px; font-weight: 600;
	color: var(--success);
	background: var(--success-soft);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mv-root .twv-pulse { width: 6px; height: 6px; background: var(--success); border-radius: 50%; }
.mv-root .twv-verse-box {
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	background: var(--surface-2);
	margin-bottom: var(--sp-5);
}
.mv-root .twv-ref { font-family: var(--font-serif); font-size: 18px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.mv-root .twv-text { font-family: var(--font-serif); font-size: 16px; font-style: italic; color: var(--text-2); line-height: 1.5; }
.mv-root .twv-progress-row {
	display: flex; align-items: center; gap: var(--sp-4);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--border);
}
.mv-root .twv-ring { width: 56px; height: 56px; position: relative; flex-shrink: 0; }
.mv-root .twv-ring svg { width: 100%; height: 100%; }
.mv-root .twv-ring-pct {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--font-mono); font-size: 12px; font-weight: 600;
	color: var(--accent);
}
.mv-root .twv-prog-main { font-size: 14px; color: var(--text-2); }
.mv-root .twv-prog-main strong { color: var(--text-1); font-weight: 600; }
.mv-root .twv-prog-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mv-root .twv-view { margin-left: auto; padding: 10px 16px; font-size: 13px; text-decoration: none; }
.mv-root .twv-members { margin-top: var(--sp-5); }
.mv-root .twv-members-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 10px;
}
.mv-root .twv-members-stack { display: flex; }
.mv-root .twv-mem {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 2px solid var(--surface);
	margin-left: -8px;
	display: flex; align-items: center; justify-content: center;
	color: white;
	font-weight: 600; font-size: 11px;
	overflow: hidden;
}
.mv-root .twv-mem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-root .twv-mem:first-child { margin-left: 0; }
.mv-root .twv-mem.more {
	background: var(--surface-2);
	color: var(--text-2);
	border-color: var(--surface);
	font-family: var(--font-mono);
}

/* ---------- Checklist ---------- */
.mv-root .fc-checklist { display: flex; flex-direction: column; gap: 12px; margin-top: var(--sp-6); margin-bottom: var(--sp-6); }
.mv-root .fc-check { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-2); }
.mv-root .fc-check svg {
	flex-shrink: 0;
	width: 22px; height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--success-soft);
	color: var(--success);
}

/* ---------- Group Card ---------- */
.mv-root .group-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-card);
	max-width: 520px;
}
.mv-root .group-head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--border);
	margin-bottom: var(--sp-5);
}
.mv-root .group-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; color: var(--text-1); }
.mv-root .group-icon {
	width: 30px; height: 30px;
	border-radius: 8px;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex; align-items: center; justify-content: center;
}
.mv-root .group-meta-pill {
	font-family: var(--font-mono);
	font-size: 11px; font-weight: 600;
	color: var(--text-3);
	background: var(--surface-2);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	border: 1px solid var(--border);
}

.mv-root .group-verse {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 14px;
	background: var(--accent-soft);
	border-radius: var(--radius-md);
	margin-bottom: var(--sp-5);
}
.mv-root .group-verse-ref {
	font-size: 11px; font-weight: 600;
	color: var(--accent);
	letter-spacing: 0.08em; text-transform: uppercase;
}
.mv-root .group-verse-name { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--text-1); margin-top: 2px; }
.mv-root .group-verse-translation { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: 4px; }

.mv-root .group-list { display: flex; flex-direction: column; gap: 12px; }
.mv-root .group-row { display: flex; align-items: center; gap: 12px; }
.mv-root .group-av {
	width: 36px; height: 36px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 600; color: white;
	font-size: 12px;
	flex-shrink: 0;
	overflow: hidden;
}
.mv-root .group-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mv-root .group-info { flex: 1; min-width: 0; }
.mv-root .group-name-line { display: flex; align-items: center; gap: 6px; }
.mv-root .group-name { font-weight: 600; font-size: 14px; color: var(--text-1); }
.mv-root .group-online {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px var(--success-soft);
}
.mv-root .group-star {
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--success);
	color: white;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.mv-root .group-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.mv-root .group-pct { width: 90px; flex-shrink: 0; }
.mv-root .group-bar {
	height: 5px;
	background: var(--surface-2);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.mv-root .group-bar > span { display: block; height: 100%; background: var(--accent); }

.mv-root .group-footer {
	display: flex; align-items: center; justify-content: space-between;
	padding-top: var(--sp-4);
	margin-top: var(--sp-5);
	border-top: 1px solid var(--border);
	font-size: 12px;
	color: var(--text-3);
}
.mv-root .group-footer strong { color: var(--warning); font-weight: 600; }
.mv-root .group-footer span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.mv-root .group-footer svg { color: var(--warning); }
.mv-root .group-foot-link {
	color: var(--accent);
	font-weight: 600;
	cursor: pointer;
	display: inline-flex; align-items: center; gap: 4px;
	text-decoration: none;
}

/* ---------- Share Card ---------- */
.mv-root .share-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-xl);
	padding: var(--sp-6);
	box-shadow: var(--shadow-card);
	max-width: 520px;
	margin-left: auto;
}
.mv-root .share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-5); }
.mv-root .share-title { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; color: var(--text-1); }
.mv-root .share-icon {
	width: 28px; height: 28px;
	border-radius: 7px;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex; align-items: center; justify-content: center;
}
.mv-root .share-id {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--text-3);
	background: var(--surface-2);
	padding: 5px 10px;
	border-radius: 6px;
	border: 1px solid var(--border);
}
.mv-root .share-id-code { color: var(--accent); font-weight: 600; }
.mv-root .share-verse-box {
	padding: 16px 18px;
	background: var(--surface-2);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	margin-bottom: var(--sp-5);
}
.mv-root .share-verse-ref { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--text-1); margin-bottom: 6px; }
.mv-root .share-verse-translation { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); margin-left: 4px; vertical-align: middle; }
.mv-root .share-verse-text { font-family: var(--font-serif); font-size: 15px; font-style: italic; color: var(--text-2); line-height: 1.5; }
.mv-root .share-channels {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: var(--sp-4);
}
.mv-root .share-channel {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	padding: 10px 8px;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 12px; font-weight: 500;
	color: var(--text-2);
	cursor: pointer;
	background: var(--surface);
	transition: all .15s;
}
.mv-root .share-channel:hover { background: var(--surface-2); color: var(--text-1); border-color: var(--border-strong); }
.mv-root .share-cta { width: 100%; justify-content: center; margin-bottom: var(--sp-5); text-decoration: none; }
.mv-root .share-recipients { padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.mv-root .share-rcp-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--text-3);
	margin-bottom: 12px;
}
.mv-root .share-rcp-list { display: flex; flex-direction: column; gap: 10px; }
.mv-root .share-rcp { display: flex; align-items: center; gap: 12px; }
.mv-root .share-rcp-av {
	width: 34px; height: 34px;
	border-radius: 50%;
	color: white;
	font-weight: 600; font-size: 11px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.mv-root .share-rcp-name { font-size: 13px; font-weight: 600; color: var(--text-1); }
.mv-root .share-rcp-meta { font-size: 11px; color: var(--text-3); margin-top: 1px; font-family: var(--font-mono); }

/* ---------- Features grid (Simple Tools, Lasting Impact) ---------- */
.mv-root .fc-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-5);
	margin-top: var(--sp-10);
	margin-bottom: var(--sp-10);
}
.mv-root .fc-feature {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: var(--sp-6);
	box-shadow: var(--shadow-card);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	position: relative;
}
.mv-root .fc-feature.highlight {
	border-color: var(--accent);
	background: linear-gradient(180deg, var(--accent-soft), transparent 50%), var(--surface);
}
.mv-root .fc-feature-icon {
	width: 44px; height: 44px;
	border-radius: 12px;
	background: var(--accent-soft);
	color: var(--accent);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: var(--sp-3);
}
.mv-root .fc-feature-icon.cyan { background: var(--brand-soft); color: var(--brand); }
.mv-root .fc-feature-icon.amber { background: var(--warning-soft); color: var(--warning); }
.mv-root .fc-feature h4 {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -0.012em;
	margin: 0 0 4px 0;
	line-height: 1.15;
	color: var(--text-1);
}
.mv-root .fc-feature p { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.mv-root .fc-feature-meta { margin-top: auto; padding-top: var(--sp-3); }
.mv-root .fc-feature-tag {
	font-family: var(--font-mono);
	font-size: 11px; font-weight: 600;
	color: var(--text-3);
	background: var(--surface-2);
	border: 1px solid var(--border);
	padding: 4px 10px;
	border-radius: 6px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.mv-root .fc-features-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-4);
}
.mv-root .fc-mini-feature {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
}
.mv-root .fc-mini-feature > svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.mv-root .fc-mini-title { font-size: 13px; font-weight: 600; color: var(--text-1); }
.mv-root .fc-mini-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; line-height: 1.4; }

/* ---------- CTA card override (For Churches) ---------- */
.mv-root .fc-cta { padding: var(--sp-16) var(--sp-12); }
.mv-root .fc-cta .cta-headline { font-size: 56px; }
.mv-root .fc-cta-ghost {
	background: rgba(255, 255, 255, 0.12);
	color: white;
	border: 1px solid rgba(255, 255, 255, 0.25);
	padding: 18px 28px;
	text-decoration: none;
}
.mv-root .fc-cta-ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.mv-root .fc-hero { grid-template-columns: 1fr; }
	.mv-root .fc-hero h1 { font-size: 50px; }
	.mv-root .church-verse-card,
	.mv-root .twv-card,
	.mv-root .group-card,
	.mv-root .share-card { margin-left: 0; max-width: 100%; }
	.mv-root .fc-features-grid { grid-template-columns: 1fr; }
	.mv-root .fc-features-row { grid-template-columns: repeat(2, 1fr); }
	.mv-root .fc-steps { flex-wrap: wrap; }
	.mv-root .fc-cta .cta-headline { font-size: 44px; }
}
@media (max-width: 700px) {
	.mv-root .fc-hero h1 { font-size: 40px; }
	/* Steps were flex:1 thirds that squeezed past the viewport instead of wrapping
	   (min-width:0 lets them shrink forever). Stack them vertically on phone. */
	.mv-root .fc-steps { flex-direction: column; }
	.mv-root .fc-step { flex: none; width: 100%; }
	.mv-root .fc-step-sep { display: none; }
	.mv-root .fc-features-row { grid-template-columns: 1fr; }
	.mv-root .fc-cta .cta-headline { font-size: 36px; }
	.mv-root .fc-cta { padding: var(--sp-12) var(--sp-6); }
	.mv-root .share-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone portrait: hide the hero eyebrow/pill above the main H1 (section eyebrows stay). */
@media (max-width: 560px) { .mv-root .fc-hero .eyebrow { display: none !important; } }