/* ====================================================================
   Family — marketing landing page redesign (slate + coral).
   Ported from /design_handoff_family/ (Claude Design's JSX preview).
   Mirrors the For Churches / Friends logged-out marketing pages.

   Load order (see family_new_test.php):
     1. extensions/index_new/styles.css        — tokens, nav, hero, btn,
                                                  split, section, eyebrow,
                                                  hero-meta, stack, avatar,
                                                  section-head, footer
     2. extensions/for_churches_new/for_churches.css
                                                — fc-breadcrumb, fc-hero,
                                                  fc-eyebrow-pill, fc-signin,
                                                  fc-checklist / fc-check
     3. extensions/friends_loggedin/friends_loggedout.css
                                                — frlo-act-ava (+ tones / sm),
                                                  frlo-feed-foot-l, frlo-pulse,
                                                  yv-quickstats, yv-final-cta
     4. this file                               — all .famlo-* rules + the
                                                  .fam-in-app shell offset
   ==================================================================== */

/* ====================================================================
   HERO — eyebrow pill, H1 spacing + decorative avatar stack
   Page-owned styles, previously borrowed from the fc- namespace or set
   via inline styles. Colors resolve to theme tokens so they track
   light/dark. The two illustrative avatar hues with no palette token
   (violet / cyan) live in local custom properties — same swatches as
   the For Churches / Friends hero stacks, just lifted out of the markup.
   ==================================================================== */
.mv-root .fc-hero h1 { margin-top: var(--sp-4); } /* 16px — gap below the plain eyebrow label */

/* Plain hero eyebrow (replaced the famlo-eyebrow-pill) — small uppercase
   label + coral dot, no pill chrome. Inherits the shared .eyebrow base
   (uppercase / accent color / letter-spacing) from index_new/styles.css. */
.mv-root .fc-hero .eyebrow {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 0;
}
.mv-root .fc-hero .eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}

.mv-root .famlo-eyebrow-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 6px;
  background: var(--accent-soft);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.mv-root .famlo-eyebrow-tag {
  background: var(--accent);
  color: var(--surface);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mv-root {
  --famlo-violet: #7C7CF5;
  --famlo-violet-soft: #A78BFA;
  --famlo-cyan: #22D3EE;
  --famlo-cyan-deep: #0EA5C5;
}
.famlo-ava-1 { background: linear-gradient(135deg, var(--famlo-violet), var(--famlo-cyan)); }
.famlo-ava-2 { background: linear-gradient(135deg, var(--warning), var(--pink)); }
.famlo-ava-3 { background: linear-gradient(135deg, var(--success), var(--famlo-cyan-deep)); }
.famlo-ava-4 { background: linear-gradient(135deg, var(--famlo-violet-soft), var(--famlo-violet)); }

/* ====================================================================
   HERO — Family Roster card
   ==================================================================== */
.famlo-roster-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.famlo-roster-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-3);
}
.famlo-roster-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.famlo-roster-title svg { color: var(--accent); }
.famlo-roster-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
}

.famlo-roster-list {
  display: flex; flex-direction: column;
  gap: 6px;
}

.famlo-member {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color .15s;
}
.famlo-member:hover { border-color: var(--border-strong); }
.famlo-member-info { flex: 1; min-width: 0; }
.famlo-member-name {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin-bottom: 1px;
}
.famlo-member-online {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 2px var(--success-soft);
}
.famlo-member-role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}
.famlo-member-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.famlo-member-verses {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1;
}
.famlo-member-verses span {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-left: 2px;
}
.famlo-member-streak {
  display: inline-flex; align-items: center; gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--warning);
  letter-spacing: 0.02em;
}

.famlo-roster-foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px;
  color: var(--text-3);
}
.famlo-roster-foot-r {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.famlo-roster-foot-r:hover { text-decoration: underline; }

/* ====================================================================
   SECTION 2 — Member Space card with tabs
   ==================================================================== */
.famlo-space-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}

.famlo-space-tabs {
  display: flex; gap: 6px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
  overflow-x: auto;
}
.famlo-space-tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  flex-shrink: 0;
  transition: all .15s;
}
.famlo-space-tab:hover { border-color: var(--border-strong); }
.famlo-space-tab.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.famlo-space-panel-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px dashed var(--border);
  margin-bottom: var(--sp-4);
}
.famlo-space-name {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.famlo-space-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.famlo-space-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.famlo-verse-list {
  display: flex; flex-direction: column;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.famlo-verse-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.famlo-verse-row.done {
  background: var(--success-soft);
  border-color: rgba(52, 211, 153, 0.35);
}
.theme-light .famlo-verse-row.done {
  border-color: rgba(5, 150, 105, 0.20);
}
.famlo-verse-row.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.famlo-vref {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
}
.famlo-vstatus {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--success);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.famlo-vstatus.practice { color: var(--accent); }
.famlo-vstatus.next {
  color: var(--text-3);
  text-transform: uppercase;
}

.famlo-space-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-align: center;
}
.famlo-space-stats > div + div { border-left: 1px solid var(--border); }
.famlo-stat-v {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 4px;
}
.famlo-stat-l {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ====================================================================
   SECTION 3 — Kid Practice card
   ==================================================================== */
.famlo-kid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.famlo-kid-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--accent-soft) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.famlo-kid-card > * { position: relative; z-index: 1; }

.famlo-kid-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-4);
}
.famlo-kid-name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.famlo-kid-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
  margin-top: 1px;
}
.famlo-kid-shield {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  background: var(--success-soft);
  color: var(--success);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.famlo-kid-verse {
  padding: 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}
.famlo-kid-vref {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.famlo-kid-vtext {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-1);
  letter-spacing: -0.005em;
}
.famlo-kid-tap {
  display: inline-block;
  padding: 1px 8px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  border-radius: var(--radius-sm);
  font-style: italic;
}

.famlo-kid-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: var(--sp-4);
}
.famlo-kid-opt {
  padding: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  cursor: pointer;
  transition: all .15s;
}
.famlo-kid-opt:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.famlo-kid-opt.correct {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success);
  font-weight: 600;
}

.famlo-kid-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.famlo-kid-streak {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-2);
  letter-spacing: 0.02em;
}
.famlo-kid-streak strong {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-1);
  margin-right: 2px;
}
.famlo-streak-flame {
  display: inline-flex;
  color: var(--brand);
}
.famlo-kid-stars {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--warning);
}
.famlo-stars-count {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--warning);
  margin-left: 4px;
  letter-spacing: 0.02em;
}

/* ====================================================================
   SECTION 4 — Parent Controls card
   ==================================================================== */
.famlo-control-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
.famlo-control-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-3);
}
.famlo-control-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.famlo-control-title svg { color: var(--accent); }
.famlo-control-sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: 0.02em;
}

.famlo-control-rows {
  display: flex; flex-direction: column;
}
.famlo-control-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 4px;
}
.famlo-control-row + .famlo-control-row {
  border-top: 1px solid var(--border);
}
.famlo-ctrl-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}
.famlo-ctrl-desc {
  font-size: 11.5px;
  color: var(--text-3);
}

.famlo-toggle {
  width: 36px; height: 20px;
  border-radius: 999px;
  background: var(--border-strong);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.famlo-toggle span {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform .18s;
}
.famlo-toggle.on { background: var(--success); }
.famlo-toggle.on span { transform: translateX(16px); }
.famlo-toggle.off span { transform: translateX(0); }

.famlo-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.famlo-control-foot {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-3);
}

/* ====================================================================
   SECTION 5 — Reasons grid
   ==================================================================== */
.famlo-reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.famlo-reason {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}
.famlo-reason-ic {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: var(--sp-4);
}
.famlo-reason h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.012em;
  margin: 0 0 var(--sp-3);
}
.famlo-reason p {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.55;
  margin: 0;
}

/* ====================================================================
   Responsive — collapse the reasons grid + member-space stats
   ==================================================================== */
@media (max-width: 768px) {
  .famlo-reasons { grid-template-columns: 1fr; }
  .famlo-kid-options { grid-template-columns: repeat(2, 1fr); }
}

/* ====================================================================
   IN-APP SHELL OFFSET (logged-in users)
   family_memorization.php sets `.fam-in-app` on `.mv-root` for signed-in
   visitors, who keep the site's top fixed nav (68px) + condensed left
   rail (60px). Unlike For Churches, the Family marketing page has no
   200px secondary sidebar, so the left offset is just the 60px rail.
   The rail slides off-canvas below 1024px (margin collapses to 0).
   Also collapses the marketing-scale headings so the page reads as an
   in-app surface, not a full-bleed landing page.
   ==================================================================== */
.mv-root.fam-in-app {
  margin-left: 60px;
  min-height: calc(100vh - 68px);
  padding-top: 68px;
}
@media (max-width: 1024px) {
  .mv-root.fam-in-app { padding-top: 64px; }
}
/* Drop the 60px rail gutter ONLY where the rail is actually off-canvas — the
   scanner's tlp- (tablet-portrait, 768–1180px device-width) + mobile. Desktop,
   laptop and tablet-LANDSCAPE keep the visible rail, so the margin stays there
   (a blanket max-width:1024 reset would slide content under the still-visible rail
   on narrow desktop windows and iPad-mini landscape — the reverse of the gutter bug). */
@media only screen and (min-device-width: 768px) and (max-device-width: 1180px) and (orientation: portrait) {
  .mv-root.fam-in-app { margin-left: 0; }
}
@media (max-width: 767px) {
  .mv-root.fam-in-app { margin-left: 0; }
}
@media (max-width: 480px) {
  .mv-root.fam-in-app { padding-top: 60px; }
}
.mv-root.fam-in-app .fc-breadcrumb { display: none; }
.mv-root.fam-in-app .fc-hero h1 { font-size: 52px; }
.mv-root.fam-in-app .split h2 { font-size: 40px; }
.mv-root.fam-in-app .section-head h2 { font-size: 40px; }
.mv-root.fam-in-app .yv-final-cta h2 { font-size: 40px; }
.mv-root.fam-in-app .section { padding: var(--sp-16) 0; }

/* ====================================================================
   PHONE-PORTRAIT RESPONSIVE  (kept LAST on purpose)
   The shared .split grid (index_new/styles.css) ships with NO
   breakpoints, so its two columns never collapse — on phones the second
   column runs off the right edge and the whole page scrolls sideways
   (the 60px serif headings overflow too). Stack the grid and tame the
   headings for BOTH the logged-out marketing view and the in-app
   (.fam-in-app) view. This block sits after the .fam-in-app rules above
   so the matching-specificity heading overrides win by source order.
   NOTE: root cause is global — every redesign page on the shared .split
   has the same gap; this fix is scoped to family.css for now.
   ==================================================================== */
@media (max-width: 768px) {
  .mv-root .split { grid-template-columns: 1fr; gap: var(--sp-8); }
  .mv-root .split p { max-width: none; }
  .mv-root .split h2,
  .mv-root.fam-in-app .split h2 { font-size: 34px; }
  .mv-root.fam-in-app .fc-hero h1 { font-size: 40px; }
  .mv-root .section-head h2,
  .mv-root.fam-in-app .section-head h2,
  .mv-root .yv-final-cta h2,
  .mv-root.fam-in-app .yv-final-cta h2 { font-size: 34px; }
}
@media (max-width: 480px) {
  .mv-root .split h2,
  .mv-root.fam-in-app .split h2 { font-size: 28px; }
  .mv-root .fc-hero h1,
  .mv-root.fam-in-app .fc-hero h1 { font-size: 34px; margin-top: var(--sp-5); } /* 20px on phones */
}

/* ====================================================================
   FIX (2026-06-03) — restore horizontal padding on `container section`.
   The two sections that put `container` and `section` on the SAME element
   — §3 "Designed for kids" / "Emma's Practice" and §5 "Why memorize as a
   family" — lose their horizontal padding to a `padding` SHORTHAND
   collision: `.container { padding: 0 var(--sp-10) }` (styles.css) is
   overwritten by `.section { padding: var(--sp-24) 0 }` (later, equal
   specificity) and, in-app, by `.mv-root.fam-in-app .section
   { padding: var(--sp-16) 0 }` above — both zero out left/right. So the
   reason cards / kid card sat flush against the screen edges.

   For Churches (which family was ported from) avoids this with an in-app
   `.container` LONGHAND rule (for_churches.css:54); family dropped it.
   Re-assert the horizontal padding with a LONGHAND rule of matching/higher
   specificity, kept AFTER the `.fam-in-app .section` rule so equal-spec
   in-app selectors lose to source order. Covers BOTH auth states (the
   `.mv-root .container.section` selector wins logged-out by specificity
   and in-app by source order). sp-10 matches the other sections' gutters.
   ==================================================================== */
.mv-root .container.section { padding-left: var(--sp-10); padding-right: var(--sp-10); }

/* Grid-overflow guard: shared `.split` children default to min-width:auto,
   which can push a column past the container's right edge (sideways
   scroll) when its content can't shrink. Let them shrink. Harmless where
   no overflow exists. */
.mv-root .split > * { min-width: 0; }

/* ====================================================================
   FIX (2026-06-03) — signed-in shaded sections as contained panels.
   In-app, `.section.alt` (§2 "Emma's Memory Verses" + §4 "Parents stay
   in control") rendered as a full-bleed band: offset 60px on the left by
   the nav rail but flush to the right edge — the lopsided look that was
   flagged. Per the chosen design, present the shaded sections as
   balanced, capped, content-hugging panels instead:
     - clear the full-bleed background from the .section and add a small
       horizontal padding, so the inner .container is ALWAYS inset from the
       content-area edges by >= sp-6 (this keeps the gaps equal even in the
       ~1025-1300px range where the rail shows but mv-root is narrower than
       the 1240 cap, so margin:auto alone wouldn't create a right gap);
     - move the shaded background + border + radius + internal vertical
       padding onto the .container, which keeps its max-width:1240 +
       margin:auto so the panel caps and centers on wide screens and hugs
       its content rather than stretching to fill the column.
   Logged-out keeps the full-bleed bands (this rule is .fam-in-app only).
   ==================================================================== */
.mv-root.fam-in-app .section.alt {
  background: transparent;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}
.mv-root.fam-in-app .section.alt > .container {
  background: var(--bg-section);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding-top: var(--sp-12);
  padding-bottom: var(--sp-12);
}
@media (max-width: 768px) {
  .mv-root.fam-in-app .section.alt { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .mv-root.fam-in-app .section.alt > .container {
    border-radius: var(--radius-lg);
    padding-top: var(--sp-8);
    padding-bottom: var(--sp-8);
  }
}