/* ============================================================================
   MentraNote — Legacy Compatibility Layer (mentranote-compat.css)
   ----------------------------------------------------------------------------
   PURPOSE
     Bridges the purchased Bootstrap template + the legacy mentranote.css brand
     layer onto the design-system tokens in mentranote-ds.css, so all 23 pages
     retheme together WITHOUT each page being rewritten first.

   LOAD LAST. See the load-order note at the top of mentranote-ds.css.

   WHY THIS FILE IS ALLOWED TO USE !important
     The legacy layer declares its own !important (e.g. mentranote.css:40-49
     `.theme-btn { background: … !important; border-radius: 50px !important; }`).
     An !important declaration can only be beaten by another !important. Every
     !important here exists solely to unwind one in the legacy layer — do not
     add !important for convenience. As pages are converted (task 5) and the
     legacy rules are deleted, the matching block here should be deleted too.
     This file is scaffolding. It is meant to SHRINK over time.

   ⚠ THE LOGO IS OFF-LIMITS
     Per explicit instruction, nothing here may recolour, filter, mask or
     restyle the brand mark. All logo selectors are excluded — see §0. Do not
     add a rule that touches .logo, .logo img, or the header/footer brand.

   WHAT THIS FILE CANNOT FIX
     326 hard-coded hexes live in inline style="" attributes across the pages.
     Inline attributes beat stylesheets, so those require per-page edits.
     They are tracked separately and are NOT silently handled here.
   ============================================================================ */

/* ===========================================================================
   0. LOGO PROTECTION
   ---------------------------------------------------------------------------
   Defensive: if any legacy/vendor rule tries to tint the mark via currentColor
   or a filter, neutralise it. This RESTORES the logo to untouched; it does not
   restyle it.
   =========================================================================== */

.logo, .logo *,
.logo img, .footer-logo img, .mobile-logo img,
img[src*="logo"], img[src*="mentra"] {
  filter: none !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

/* ===========================================================================
   1. LEGACY VARIABLE RETARGETING  ← the highest-leverage block in this file
   ---------------------------------------------------------------------------
   mentranote.css:6-30 defines the old brand vars, and main.css / the home
   layers reference them throughout. Redefining them here (this file loads
   later, so these win) retints every consumer at once — no selector hunting.

   The old values and why each moved:
     --mn-primary      #4F7FFF → brand-600  3.61:1 FAILED AA; brand-600 is
                                            5.08:1 and visually near-identical.
                                            #4F7FFF survives as brand-500 for
                                            glow/focus/tint where contrast is
                                            not in play.
     --mn-secondary    #7B61FF → brand-500  The purple is DELETED. This is the
                                            blue→purple gradient's other half
                                            and the loudest "AI palette" tell.
     --mn-accent       #00C896 → success-600 2.16:1 — failed AA even for large
                                            text. Unusable as ink.
     --mn-text         #334155 → (ds)       Cold slate → warm neutral ramp.
     --mn-border       #E2E8F0 → (ds)       ditto.
   NOTE: --mn-text/--mn-surface/--mn-border/--mn-bg collide by name with the
   design-system role tokens. The collision is intentional and benign: the
   roles are identical, and the DS file loads first so these legacy consumers
   simply inherit the new values.
   =========================================================================== */

:root {
  --mn-primary:       var(--mn-brand-600);
  --mn-primary-dark:  var(--mn-brand-700);
  --mn-primary-light: var(--mn-brand-50);
  --mn-secondary:     var(--mn-brand-500);   /* was #7B61FF — purple removed */
  --mn-accent:        var(--mn-success-600); /* was #00C896 — 2.16:1 */

  --mn-success:       var(--mn-success-600);
  --mn-warning:       var(--mn-warning-600);
  --mn-error:         var(--mn-danger-600);

  --mn-text-light:    var(--mn-text-muted);
  --mn-bg:            var(--mn-canvas);

  /* Deep ink for the dark header/hero/footer. Kept navy (it reads trustworthy
     and is on-brand) but desaturated slightly so it sits with warm neutrals
     instead of fighting them. */
  --mn-dark:          #101623;
  --mn-dark-2:        #1A2338;

  /* Gradients: were 135° blue→purple and green→blue rainbows.
     Now TONAL — a single hue stepping in value. A gradient inside one hue
     family reads deliberate; a gradient across hues reads generated. */
  --mn-gradient:        linear-gradient(135deg, var(--mn-brand-600) 0%, var(--mn-brand-700) 100%);
  --mn-gradient-accent: linear-gradient(135deg, var(--mn-brand-500) 0%, var(--mn-brand-700) 100%);

  /* Elevation: 3 legacy shadows → the DS scale (was 117 unique values total) */
  --shadow-sm: var(--mn-shadow-sm);
  --shadow:    var(--mn-shadow-md);
  --shadow-lg: var(--mn-shadow-lg);

  /* Radius: legacy 8/14/20 → DS scale */
  --radius-sm: var(--mn-radius-sm);
  --radius:    var(--mn-radius-lg);
  --radius-lg: var(--mn-radius-xl);
}

/* ===========================================================================
   2. TYPOGRAPHY NORMALISATION
   ---------------------------------------------------------------------------
   Previously: 3 different Google Fonts URLs, and Plus Jakarta Sans loaded on
   only index/faq/platform — so headings literally differed between pages.
   =========================================================================== */

body {
  font-family: var(--mn-font-sans);
  color: var(--mn-text);
  font-size: var(--mn-fs-body);
  line-height: var(--mn-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--mn-font-display);
  color: var(--mn-heading);
  font-weight: var(--mn-fw-bold);
  letter-spacing: var(--mn-ls-heading);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--mn-fs-4xl); line-height: var(--mn-lh-tight); letter-spacing: var(--mn-ls-display); }
h2, .h2 { font-size: var(--mn-fs-3xl); line-height: var(--mn-lh-snug); }
h3, .h3 { font-size: var(--mn-fs-2xl); line-height: var(--mn-lh-snug); }
h4, .h4 { font-size: var(--mn-fs-xl);  line-height: var(--mn-lh-snug); }
h5, .h5 { font-size: var(--mn-fs-lg);  line-height: var(--mn-lh-snug); }
h6, .h6 { font-size: var(--mn-fs-body); line-height: var(--mn-lh-snug); }

p { line-height: var(--mn-lh-normal); }

a { color: var(--mn-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--mn-link-hover); }
/* The mark is a link in the header — never tint it. */
.logo a, .logo a:hover { color: inherit; }

/* ===========================================================================
   3. BUTTONS — unwinding the 50px gradient pill
   ---------------------------------------------------------------------------
   mentranote.css:40-55 forces `border-radius:50px !important` + the blue→purple
   gradient onto every .theme-btn. The fully-round gradient pill is the single
   strongest "AI template" signal on the site. Flattened to a tonal fill on the
   DS radius scale, with the glow carrying emphasis instead of the gradient.
   =========================================================================== */

.theme-btn,
.theme-btn:link,
.theme-btn:visited {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--mn-space-2);
  background: var(--mn-brand-600) !important;
  color: var(--mn-text-inverse) !important;
  border: 1px solid var(--mn-brand-600) !important;
  border-radius: var(--mn-radius-md) !important;
  padding: var(--mn-space-3) var(--mn-space-6) !important;
  min-height: 44px;
  font-family: var(--mn-font-sans);
  font-size: var(--mn-fs-sm);
  font-weight: var(--mn-fw-semibold) !important;
  letter-spacing: 0 !important;
  line-height: 1;
  box-shadow: var(--mn-glow-sm);
  transition: background var(--mn-dur) var(--mn-ease),
              border-color var(--mn-dur) var(--mn-ease),
              box-shadow var(--mn-dur) var(--mn-ease),
              transform var(--mn-dur-fast) var(--mn-ease);
}
.theme-btn:hover {
  background: var(--mn-brand-700) !important;
  border-color: var(--mn-brand-700) !important;
  /* was: transform:translateY(-2px) + a 40px-blur shadow. Too much travel —
     a button is not a card. 1px of press-back reads tactile instead. */
  transform: none !important;
  box-shadow: var(--mn-glow) !important;
}
.theme-btn:active { transform: translateY(1px) !important; }
.theme-btn:focus-visible { box-shadow: var(--mn-focus-ring) !important; }

/* Secondary / outline variant */
.theme-btn.style-2,
.theme-btn.style-2:link,
.theme-btn.style-2:visited {
  background: var(--mn-surface) !important;
  color: var(--mn-brand-700) !important;
  border: 1px solid var(--mn-border-strong) !important;
  box-shadow: var(--mn-shadow-xs);
}
.theme-btn.style-2:hover {
  background: var(--mn-brand-50) !important;
  color: var(--mn-brand-700) !important;
  border-color: var(--mn-brand-300) !important;
  box-shadow: var(--mn-shadow-sm) !important;
}

/* Bootstrap buttons — same language, so a stray .btn-primary doesn't stand out */
.btn { border-radius: var(--mn-radius-md); font-weight: var(--mn-fw-semibold); font-size: var(--mn-fs-sm); padding: var(--mn-space-3) var(--mn-space-5); min-height: 44px; transition: all var(--mn-dur) var(--mn-ease); }
.btn-primary { background: var(--mn-brand-600); border-color: var(--mn-brand-600); box-shadow: var(--mn-glow-sm); }
.btn-primary:hover, .btn-primary:focus { background: var(--mn-brand-700); border-color: var(--mn-brand-700); box-shadow: var(--mn-glow); }
.btn-secondary { background: var(--mn-surface); border-color: var(--mn-border-strong); color: var(--mn-brand-700); }
.btn-secondary:hover { background: var(--mn-brand-50); border-color: var(--mn-brand-300); color: var(--mn-brand-700); }
.btn-danger { background: var(--mn-danger-600); border-color: var(--mn-danger-600); }
.btn-danger:hover { background: var(--mn-danger-700); border-color: var(--mn-danger-700); }
.btn-success { background: var(--mn-success-600); border-color: var(--mn-success-600); }
.btn-outline-primary { color: var(--mn-brand-700); border-color: var(--mn-border-strong); }
.btn-outline-primary:hover { background: var(--mn-brand-600); border-color: var(--mn-brand-600); color: #fff; }
.btn:focus-visible { box-shadow: var(--mn-focus-ring); }

/* ===========================================================================
   4. HEADER / NAV
   =========================================================================== */

/* Was a 135° gradient across two navies — flattened. A gradient that spans a
   full-bleed bar is invisible as a gradient and only costs a paint. */
.header-2 { background: var(--mn-dark) !important; }
.header-sticky {
  background: rgba(16,22,35,.92) !important;
  backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: var(--mn-shadow-md);
}
.header-main .main-menu ul li a {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-fs-sm) !important;
  font-weight: var(--mn-fw-medium);
  letter-spacing: 0;
  transition: color var(--mn-dur) var(--mn-ease);
}
.header-main .main-menu ul li a:hover,
.header-main .main-menu ul li.active > a { color: var(--mn-brand-300) !important; }
.header-main .main-menu ul li a:focus-visible { box-shadow: var(--mn-focus-ring); border-radius: var(--mn-radius-sm); }

/* Header signup button — WHITE across every page (matches the home page), the
   outline/style-2 look, on desktop AND mobile. */
.header-2 .header-right .theme-btn,
.header-2 .header-right .theme-btn:link,
.header-2 .header-right .theme-btn:visited {
  background: #fff !important;
  color: var(--mn-brand-700) !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 1px 2px rgba(10,15,30,.18) !important;
}
.header-2 .header-right .theme-btn:hover {
  background: var(--mn-brand-50) !important;
  color: var(--mn-brand-700) !important;
  border-color: #fff !important;
}

/* ── Mobile header layout fix ───────────────────────────────────────────────
   The template header crams logo + Login + Sign Up + hamburger onto one row;
   at phone widths the 80px logo and the Login link overlapped the wordmark.
   Shrink the mark, drop the secondary Login (it lives in the offcanvas menu),
   and make the white Sign Up compact so logo · Sign Up · ☰ sit cleanly. */
@media (max-width: 991px) {
  .header-2 .header-logo img { height: 46px !important; }
  .header-2 .header-right .join-text { display: none !important; }
  .header-2 .header-right .theme-btn {
    padding: 8px 15px !important; min-height: 38px; font-size: 13px !important;
  }
  .header-2 .header-right { gap: 12px; }
}
/* The mobile hamburger (☰ — the "three lines" that opens the page list) must be
   white on the dark header across every page. */
.header-2 .header__hamburger .sidebar__toggle,
.header-2 .header__hamburger .sidebar__toggle i,
.header-2 .sidebar__toggle i,
.header-2 .header__hamburger i { color: #fff !important; }

/* ===========================================================================
   5. SECTION HEADINGS / DECORATIVE
   =========================================================================== */

.section-title span,
.section-sub-title { color: var(--mn-brand-700) !important; font-weight: var(--mn-fw-semibold); letter-spacing: var(--mn-ls-caps); text-transform: uppercase; font-size: var(--mn-fs-caption); }
.title-shape { background: var(--mn-gradient) !important; }

/* Was blue→purple background-clip text. Now tonal; also AA-safe as real text. */
.gradient-text {
  background: var(--mn-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ===========================================================================
   6. HERO — ambient glow, de-rainbowed
   ---------------------------------------------------------------------------
   Was 3 radial gradients (purple + blue + green) over a 3-stop linear. The
   green and purple hazes are removed; what's left is one brand-hue ambient
   glow — the "soft, blurred, low-opacity" depth cue, not decoration.
   =========================================================================== */

.mn-hero {
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(79,127,255,.20), transparent 62%),
    radial-gradient(44% 44% at 88% 8%,  rgba(79,127,255,.10), transparent 62%),
    var(--mn-dark) !important;
}
.mn-hero::before { opacity: .5 !important; }

/* ===========================================================================
   7. CARDS
   =========================================================================== */

.mn-card {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  padding: var(--mn-space-6);
  box-shadow: var(--mn-shadow-xs);
  transition: box-shadow var(--mn-dur) var(--mn-ease),
              border-color var(--mn-dur) var(--mn-ease),
              transform var(--mn-dur) var(--mn-ease);
}
.mn-card:hover {
  /* was translateY(-4px) — halved. 4px on every card makes a grid feel jumpy. */
  transform: translateY(-2px);
  border-color: var(--mn-brand-200);
  box-shadow: var(--mn-shadow-md);
}
.mn-card .icon-box {
  width: 44px; height: 44px;
  border-radius: var(--mn-radius-md);
  background: var(--mn-brand-50);
  color: var(--mn-brand-700);
  font-size: 18px;
  margin-bottom: var(--mn-space-4);
}

/* ===========================================================================
   8. FORMS
   =========================================================================== */

.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="tel"], input[type="number"],
input[type="search"], input[type="date"], select, textarea {
  font-family: var(--mn-font-sans);
  font-size: var(--mn-fs-body);
  color: var(--mn-heading);
  background: var(--mn-surface);
  border: 1px solid var(--mn-border-strong);
  border-radius: var(--mn-radius-md);
  padding: var(--mn-space-3) var(--mn-space-4);
  min-height: 44px;
  transition: border-color var(--mn-dur) var(--mn-ease), box-shadow var(--mn-dur) var(--mn-ease);
}
.form-control::placeholder, textarea::placeholder { color: var(--mn-text-disabled); }
.form-control:focus, .form-select:focus, input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--mn-brand-500);
  box-shadow: var(--mn-focus-ring);
}
.form-label { font-size: var(--mn-fs-sm); font-weight: var(--mn-fw-medium); color: var(--mn-heading); margin-bottom: var(--mn-space-2); }
.form-control.is-invalid, .was-validated .form-control:invalid { border-color: var(--mn-danger-600); }
.invalid-feedback { color: var(--mn-danger-700); font-size: var(--mn-fs-caption); }
.valid-feedback   { color: var(--mn-success-700); font-size: var(--mn-fs-caption); }

/* ===========================================================================
   9. FOOTER
   =========================================================================== */

.footer-section, footer.footer-section { background: var(--mn-dark) !important; }
.footer-section a { color: rgba(255,255,255,.68); transition: color var(--mn-dur) var(--mn-ease); }
.footer-section a:hover { color: #fff; }
.footer-section h3, .footer-section h4, .footer-section h5 { color: #fff; }

/* ===========================================================================
   10. BOOTSTRAP SURFACE ALIGNMENT
   =========================================================================== */

.card { border-radius: var(--mn-radius-lg); border-color: var(--mn-border); box-shadow: var(--mn-shadow-xs); }
.modal-content { border-radius: var(--mn-radius-xl); border-color: var(--mn-border); box-shadow: var(--mn-shadow-xl); }
.modal-backdrop.show { background: rgba(35,34,31,.48); opacity: 1; backdrop-filter: blur(4px); }
.dropdown-menu { border-radius: var(--mn-radius-lg); border-color: var(--mn-border); box-shadow: var(--mn-shadow-lg); padding: var(--mn-space-2); }
.dropdown-item { border-radius: var(--mn-radius-sm); font-size: var(--mn-fs-sm); padding: var(--mn-space-2) var(--mn-space-3); }
.dropdown-item:hover { background: var(--mn-surface-hover); }
.badge { border-radius: var(--mn-radius-xs); font-weight: var(--mn-fw-medium); font-size: var(--mn-fs-caption); }
.alert { border-radius: var(--mn-radius-md); border-left-width: 3px; font-size: var(--mn-fs-sm); }
.table thead th { font-size: var(--mn-fs-caption); text-transform: uppercase; letter-spacing: var(--mn-ls-caps); color: var(--mn-text-muted); background: var(--mn-surface-sunken); border-bottom-color: var(--mn-border); }
.table tbody td { color: var(--mn-text); border-bottom-color: var(--mn-border-subtle); }

/* Bootstrap's default focus ring → ours, so focus looks identical everywhere */
.form-control:focus, .form-select:focus, .btn:focus, .btn:focus-visible,
.page-link:focus, .dropdown-item:focus {
  box-shadow: var(--mn-focus-ring) !important;
  border-color: var(--mn-brand-500);
}

/* ===========================================================================
   10b. SHARED HOME-LAYER DE-PURPLE
   ---------------------------------------------------------------------------
   mentranote-home.css / -home-v6.css / mentranote.css hard-code #7B61FF (and
   #8B5CF6 / #6366F1 / #A855F7 / #C2459E) directly inside gradients — often with
   !important — so the §1 variable retarget can't reach them. These are SHARED
   across pages, so they're fixed here (centralised, reversible) rather than
   per-page. Every replacement stays inside the indigo/brand hue family: a
   gradient within one hue reads intentional; a blue→purple→magenta sweep is the
   loudest "AI generated" signal on the site.
   =========================================================================== */

/* Headline gradient-text — was 135° #4F7FFF→#7B61FF (v6.css:8). Tonal now.
   Uses background-IMAGE, not the `background` shorthand: the shorthand also
   resets background-clip to border-box, and with !important that would beat the
   `clip:text` below and paint a solid block over the letters. clip + fill are
   themselves !important so they survive any shorthand elsewhere in the cascade. */
.gradient-text {
  background-image: linear-gradient(120deg, var(--mn-brand-600) 0%, var(--mn-brand-800) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--mn-brand-700);   /* fallback if clip unsupported */
}

/* Workflow / pricing step cards — were a 6-hue rainbow (home.css:101-106).
   Collapsed to ONE indigo family with gentle value steps so the row reads as a
   set, not a paint sampler. Keeps depth without the circus. */
.mnx-pcard.c-blue,
.mnx-pcard.c-blue2 { background: linear-gradient(150deg, var(--mn-brand-500), var(--mn-brand-700)) !important; }
.mnx-pcard.c-indigo { background: linear-gradient(150deg, var(--mn-brand-600), var(--mn-brand-800)) !important; }
.mnx-pcard.c-purple,
.mnx-pcard.c-violet { background: linear-gradient(150deg, var(--mn-brand-700), var(--mn-brand-900)) !important; }
.mnx-pcard.c-teal   { background: linear-gradient(150deg, var(--mn-info-600), #1C3F9C) !important; }
.mnx-pcard .num,
.mnx-pcard.c-blue .num, .mnx-pcard.c-purple .num, .mnx-pcard.c-teal .num,
.mnx-pcard.c-indigo .num, .mnx-pcard.c-violet .num, .mnx-pcard.c-blue2 .num {
  color: var(--mn-brand-700) !important;
}
/* Pill CTA inside those cards — 50px pill → md radius, in line with all buttons */
.mnx-pbtn { border-radius: var(--mn-radius-md) !important; }

/* Final CTA band — was 115° blue→purple→magenta (home.css:156). Tonal indigo. */
.mnx-final {
  background: linear-gradient(120deg, var(--mn-brand-600) 0%, var(--mn-brand-800) 60%, var(--mn-brand-900) 100%) !important;
  border-radius: var(--mn-radius-xl) !important;
}

/* Testimonial band — was 125° triple-purple (v6.css:115). Deep tonal indigo. */
.mnx-tst { background: linear-gradient(125deg, var(--mn-brand-800) 0%, var(--mn-brand-900) 100%) !important; }

/* Stats band — was #241B54→#3A2B7A→#4A2C7A violet + purple radial glow +
   violet text tints (home.css:148-153). Retoned to deep brand indigo. */
.mnx-stats-band { background: linear-gradient(115deg, var(--mn-brand-800) 0%, var(--mn-brand-900) 100%) !important; }
.mnx-stats-band::before { background: radial-gradient(500px 300px at 12% 0%, rgba(79,127,255,.30), transparent 60%) !important; }
.mnx-statc .ic { color: var(--mn-brand-200) !important; }
.mnx-statc .l  { color: rgba(255,255,255,.78) !important; }

/* Decorative violet/pink icon tints → brand tint, so the feature grid is one hue */
.feature-icon-wrap.violet,
.feature-icon-wrap.pink { background: var(--mn-brand-50) !important; color: var(--mn-brand-700) !important; }

/* Floating AI chip + dashboard-mockup avatars/buttons inside the hero render */
.mnx-fc-ai .h .sp,
.mn-dash-avatar { background: linear-gradient(135deg, var(--mn-brand-500), var(--mn-brand-700)) !important; }
.mn-dash-newbtn {
  background: var(--mn-brand-600) !important;
  border-radius: var(--mn-radius-md) !important;
}
/* DAP note-pill was purple; realign to brand tint */
.note-pill.dap { color: var(--mn-brand-700) !important; border-color: var(--mn-brand-200) !important; background: var(--mn-brand-50) !important; }

/* ===========================================================================
   17. "Built Around…" workflow — color SVG icons on DESKTOP, FA icons on mobile
   ---------------------------------------------------------------------------
   Desktop swaps the flat Font Awesome glyphs for the color illustration SVGs
   (assets/img/workflow/*.svg, all normalized to 128×128). Mobile keeps the
   original icons per request.
   =========================================================================== */
.mnx-built .mnx-wf-i .t .wf-svg { display: none; }
@media (min-width: 768px) {
  .mnx-built .mnx-wf-i .t i { display: none; }
  .mnx-built .mnx-wf-i .t .wf-svg {
    display: block; width: 100px; height: 100px; object-fit: contain;
  }
}

/* ===========================================================================
   16. "More Human Connection" visual — isometric desk illustration
   ---------------------------------------------------------------------------
   Replaces the plain heart orb with a person-at-a-desk SVG scene (desktop).
   Keeps the morphing blob behind it and the floating stat cards around it.
   =========================================================================== */
.mnx-about-visual .mnx-desk {
  position: relative; z-index: 2;
  width: min(360px, 90%);
  filter: drop-shadow(0 26px 40px rgba(25,47,105,.28));
  animation: mnxBob 6s ease-in-out infinite;
}
.mnx-about-visual .mnx-desk svg { width: 100%; height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .mnx-about-visual .mnx-desk { animation: none; } }
/* de-purple the morphing blob behind the illustration → brand blue */
.mnx-about-visual .blob {
  background: radial-gradient(circle at 32% 30%, rgba(79,127,255,.22), rgba(44,98,242,.14) 60%, transparent 78%) !important;
}

/* ===========================================================================
   15. platform.html — feature cards restyled to the homepage "pillar" look
   ---------------------------------------------------------------------------
   Tonal-brand gradient cards with a numbered circle badge (CSS counter) and a
   faint corner icon, alternating across a 4-shade rotation. Stays inside the
   brand hue family — distinct card-to-card, but cohesive, not a rainbow.
   =========================================================================== */

.mnx-pf-grid { counter-reset: pfcard; }
.mnx-pf-grid > [class*="col-"] { margin-top: 30px; }   /* headroom for the badge */

.mnx-pf-grid .mn-card {
  position: relative;
  counter-increment: pfcard;
  border: 0 !important;
  border-radius: var(--mn-radius-xl);
  padding: 32px 28px 26px;
  color: #fff;
  box-shadow: var(--mn-shadow-lg);
  overflow: visible;
  transition: transform var(--mn-dur) var(--mn-ease), box-shadow var(--mn-dur) var(--mn-ease);
}
.mnx-pf-grid .mn-card:hover { transform: translateY(-3px); box-shadow: var(--mn-shadow-xl); }

/* numbered circle badge, top-left, overlapping the card edge */
.mnx-pf-grid .mn-card::before {
  content: counter(pfcard);
  position: absolute; top: -20px; left: 26px;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--mn-brand-700);
  border-radius: var(--mn-radius-pill);
  font-family: var(--mn-font-display); font-weight: 800; font-size: 19px;
  box-shadow: 0 8px 20px rgba(35,34,31,.20);
}

/* 4-shade tonal rotation (all brand-hue) */
.mnx-pf-grid > [class*="col-"]:nth-child(4n+1) .mn-card { background: linear-gradient(150deg, var(--mn-brand-500), var(--mn-brand-700)); }
.mnx-pf-grid > [class*="col-"]:nth-child(4n+2) .mn-card { background: linear-gradient(150deg, var(--mn-brand-700), var(--mn-brand-900)); }
.mnx-pf-grid > [class*="col-"]:nth-child(4n+3) .mn-card { background: linear-gradient(150deg, var(--mn-brand-600), var(--mn-brand-800)); }
.mnx-pf-grid > [class*="col-"]:nth-child(4n)   .mn-card { background: linear-gradient(150deg, var(--mn-brand-800), var(--mn-brand-900)); }

/* content on the coloured card */
.mnx-pf-grid .mn-card h3 { color: #fff; margin-top: 4px; }
.mnx-pf-grid .mn-card p  { color: rgba(255,255,255,.9) !important; }
.mnx-pf-grid .mn-card .feature-icon-wrap {
  position: absolute; top: 22px; right: 22px; margin: 0;
  width: 44px; height: 44px;
  background: rgba(255,255,255,.15) !important;
  color: rgba(255,255,255,.9) !important;
}
.mnx-pf-grid .mn-card .mnx-plist li { color: rgba(255,255,255,.88); }
.mnx-pf-grid .mn-card .mnx-plist li i { color: rgba(255,255,255,.85); }
.mnx-pf-grid .mn-card .mnx-plist li strong { color: #fff; }

/* ===========================================================================
   14. LEGAL PAGES — redesigned Table of Contents + 3-column sticky layout
   ---------------------------------------------------------------------------
   ToC items restyled to the reference (ff.png): each a rounded row with a small
   brand icon, generous padding, hover tint, and an active state driven by a
   scroll-spy (added in mentranote.js). Related Legal Documents moves to its own
   right-hand sticky column (per-page HTML change); both rails share .legal-sidebar.
   =========================================================================== */

/* Selectors are prefixed with .legal-sidebar so they out-specify each legal
   page's own inline .legal-toc/.legal-related rules (which load after this file
   in the cascade) WITHOUT needing !important. */
.legal-sidebar .legal-toc,
.legal-sidebar .legal-related {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  padding: 18px 14px;
  box-shadow: var(--mn-shadow-xs);
}
.legal-sidebar .legal-related { margin-top: 20px; }

.legal-sidebar .legal-toc h6,
.legal-sidebar .legal-related h6 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--mn-text-muted); font-weight: var(--mn-fw-bold);
  margin: 4px 8px 12px;
}

/* Reset the numbered <ol> into a clean icon list (ff.png style). */
.legal-sidebar .legal-toc ol { list-style: none; padding-left: 0; margin: 0; }
.legal-sidebar .legal-toc ol li { margin: 0; }
.legal-sidebar .legal-toc ol li a,
.legal-sidebar .legal-related a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--mn-radius-md);
  font-size: 13.5px; line-height: 1.35;
  color: var(--mn-text-secondary);
  text-decoration: none;
  background: transparent; border: 0;   /* clear the inline dark-pill styling */
  transition: background var(--mn-dur) var(--mn-ease), color var(--mn-dur) var(--mn-ease);
}
.legal-sidebar .legal-toc ol li a::before {
  content: "\f15c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  font-size: 11px; color: var(--mn-brand-400);
  flex-shrink: 0; width: 14px; text-align: center;
  transition: color var(--mn-dur) var(--mn-ease);
}
.legal-sidebar .legal-toc ol li a:hover,
.legal-sidebar .legal-related a:hover {
  background: var(--mn-brand-50);
  color: var(--mn-brand-700);
}
.legal-sidebar .legal-toc ol li a:hover::before { color: var(--mn-brand-600); }
/* Active section (set by the scroll-spy in mentranote.js) */
.legal-sidebar .legal-toc ol li a.is-active {
  background: var(--mn-brand-50);
  color: var(--mn-brand-700);
  font-weight: var(--mn-fw-semibold);
  box-shadow: inset 3px 0 0 var(--mn-brand-600);
}
.legal-sidebar .legal-toc ol li a.is-active::before { color: var(--mn-brand-700); }

/* Related-docs items already carry their own leading <i> icon. */
.legal-sidebar .legal-related a i { color: var(--mn-brand-500); width: 14px; text-align: center; font-size: 12px; }
.legal-sidebar .legal-related a:hover i { color: var(--mn-brand-700); }

/* ===========================================================================
   11. ACCESSIBILITY BACKSTOPS
   =========================================================================== */

/* The template hides focus rings in places. Focus visibility is not optional
   (WCAG 2.4.7) — restore it globally. */
*:focus-visible { outline-color: var(--mn-brand-500); }

::selection { background: var(--mn-brand-100); color: var(--mn-brand-900); }

/* Touch targets (WCAG 2.5.5) */
.main-menu ul li a, .footer-section a, .btn, .theme-btn { min-height: 44px; display: inline-flex; align-items: center; }
.footer-section a { min-height: 32px; }  /* dense link lists: 32px + spacing */

/* ===========================================================================
   12. MOBILE OVERFLOW FIXES
   ---------------------------------------------------------------------------
   A mobile-breakpoint sweep (360/390/768) found no VISIBLE horizontal scroll
   (the template clips with overflow-x:hidden) but two real sources of clipped
   horizontal bleed. Fixed here rather than per-page since both come from shared
   components. Belt-and-braces: also make the clip explicit so no future bleed
   ever produces a real scrollbar.
   =========================================================================== */

/* Guarantee the page itself never scrolls sideways, whatever a child does.
   `clip` (not `hidden`) avoids creating a scroll container / breaking sticky. */
html, body { overflow-x: clip; }

/* (a) Bootstrap large-gutter rows (.g-4/.g-5) carry -24px side margins, but a
   default container only pads 12px, so 12px bleeds each side. Seen on pricing
   + refund-policy. Cap the gutter on small screens so margin == container pad. */
@media (max-width: 575px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
  .row.g-4, .row.gx-4 { --bs-gutter-x: 1.5rem; }
}

/* (b) Homepage hero dashboard mock (#mnxMock/.mnx-dash) has fixed internal
   widths (142px sidebar, 4-col stats) that don't collapse, forcing the hero
   grid to ~440px and clipping the mock's right edge on phones. Let it shrink
   and simplify its internals below the point where they stop fitting. */
@media (max-width: 575px) {
  .mnx-visual { max-width: 100%; }
  .mnx-dash { width: 100%; }
  .mnx-dash-body   { grid-template-columns: 96px 1fr; }   /* was 142px 1fr */
  .mnx-dash-stats  { grid-template-columns: repeat(2, 1fr); } /* was 4 */
  .mnx-dash-panels { grid-template-columns: 1fr; }        /* stack panels */
  .mnx-dash-main   { padding: 12px; }
}

/* Raster/media should never exceed its column. Scoped to img/video only —
   NOT inline svg, whose width/height attributes size icons intentionally. */
img, video { max-width: 100%; }

/* Auth split-screen pages (login / register / forgot-password / verify-email):
   .mn-auth-right centers its form vertically in a min-height:100vh flex. On a
   SHORT screen a form taller than the viewport overflows the top and its submit
   button can't be scrolled to. Top-align on short/!tall viewports so the whole
   form — including the button at the bottom — is always reachable by scroll. */
@media (max-height: 760px) {
  .mn-auth-left, .mn-auth-right { align-items: flex-start !important; }
  .mn-auth-right { padding-top: 40px; padding-bottom: 40px; }
}
@media (max-width: 991px) {
  .mn-auth-left, .mn-auth-right { align-items: stretch !important; }
}

/* ---------------------------------------------------------------------------
   Hide decorative device/illustration mockups on phones (<=767px).
   Requested: the homepage hero dashboard render, the app phone mockup, and the
   FAQ isometric illustration add little on a narrow screen and crowd the copy.
   Hiding the hero render also removes the last few px of clipped hero bleed.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .mnx-visual,        /* hero dashboard mockup (aa.png)              */
  .mnx-phone-wrap,    /* "Everywhere You Go" phone mockup (mobile.png) */
  .mnx-faq-img,       /* FAQ isometric illustration (fag.png)        */
  .mnx-about-visual { /* "Human Connection" heart graphic (cc.png)  */
    display: none !important;
  }
}

/* ===========================================================================
   13. TRUSTED-BY LOGO STRIP — HIGHLIGHTED BACKGROUND + VISIBILITY
   ---------------------------------------------------------------------------
   The homepage "Trusted by thousands of mental health professionals" client
   logo strip (Thriveworks / LifeStance / Foresight / UCLA / WellMind / Compass)
   rendered as very faint grey marks on white — easy to miss. Give the strip a
   distinct highlighted band (desktop + mobile) and make the wordmarks + icons
   much more visible.
   =========================================================================== */

/* The strip (.mnx-logos) already curves up over the dark hero via its arc top
   (border-radius:50% 50% 0 0 / 56px, margin-top:-46px in the home layer). That
   ARC is the intended hero→content transition — keep it. The original fill was
   purple/pink (#EDE6FF / #FBE4F1); re-tint the whole arc band to brand blue so
   it reads highlighted + on-brand on desktop AND mobile. Highlight lives on the
   SECTION so it flows with the arc, not a floating panel that fights it. */
.mnx-logos {
  background:
    radial-gradient(640px 190px at 50% 0%,  #D8E4FF 0%, transparent 72%),
    radial-gradient(440px 150px at 82% 10%, #E6EDFF 0%, transparent 72%),
    linear-gradient(180deg, #E9F0FF 0%, #F1F5FF 58%, #FFFFFF 100%) !important;
  /* arc top + margin-top inherited from the home layer are left intact */
}

/* Label — was muted grey; lift to brand ink, clearly legible. */
.mnx-logos .cap {
  color: var(--mn-brand-800) !important;
  font-weight: var(--mn-fw-bold) !important;
  opacity: 1 !important;
}
/* Logos — were #9AA3B8 grey + grayscale(1) + opacity .8 (near-invisible).
   Remove the desaturation, lift to strong brand ink so they read clearly. */
.mnx-logos .mnx-logo-row .lg {
  color: var(--mn-brand-800) !important;
  filter: none !important;
  opacity: 1 !important;
}
.mnx-logos .mnx-logo-row .lg i { color: var(--mn-brand-600) !important; }
.mnx-logos .mnx-logo-row .lg small { color: var(--mn-brand-600) !important; }
/* Keep the hover as a subtle deepen rather than a reveal (already full colour). */
.mnx-logos .mnx-logo-row .lg:hover { color: var(--mn-brand-900) !important; }

/* ---------------------------------------------------------------------------
   faq.html two-column layout: illustration on the LEFT, accordion on the RIGHT.
   Equal-height columns make the image height track the FAQ questions list.
   --------------------------------------------------------------------------- */
.faq-two-col { align-items: stretch; }
/* The column stretches to the accordion's height (align-items:stretch), so the
   illustration panel's height tracks the FAQ questions list. A soft brand panel
   frames the illustration and fills that full height; the art stays contained
   (undistorted, uncropped) and centered within it. */
.faq-illustration-col { display: flex; }
.faq-illustration-col > .faq-side-img,
.faq-illustration-col {
  border-radius: var(--mn-radius-xl);
}
.faq-illustration-col {
  align-items: center; justify-content: center;
  padding: 28px;
  /* white interior blends the illustration's baked white background seamlessly;
     the border + shadow make the full-height card read as an intentional panel
     whose height tracks the FAQ list. */
  background: #fff;
  border: 1px solid var(--mn-border);
  box-shadow: var(--mn-shadow-sm);
}
.faq-side-img {
  width: 100%; height: auto;
  max-height: 100%;
  object-fit: contain;
}
/* On phones the illustration is hidden (see §12 .mnx-faq-img rule); the
   accordion column then spans full width automatically. */

/* Infinite scrolling marquee (desktop + mobile). The row holds the 6 logos
   twice; translateX(-50%) advances exactly one set, so the loop is seamless.
   Even per-item margins (not flex gap) keep both sets identical for the loop. */
.mnx-logos-marquee {
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.mnx-logos .mnx-logo-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  width: max-content;
  gap: 0 !important;
  animation: mnx-logo-marquee 32s linear infinite;
  will-change: transform;
}
.mnx-logos .mnx-logo-row .lg {
  flex: 0 0 auto;
  margin: 0 34px;
  white-space: nowrap;
}
@keyframes mnx-logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Pause on hover so a visitor can read a specific logo. */
.mnx-logos-marquee:hover .mnx-logo-row { animation-play-state: paused; }
/* Respect reduced-motion: stop the scroll, show the first set static. */
@media (prefers-reduced-motion: reduce) {
  .mnx-logos .mnx-logo-row { animation: none; transform: none; }
}

/* ===========================================================================
   18. PHOTO HERO — background photo + scrim, copy in a transparent glass panel
   ---------------------------------------------------------------------------
   Generalizes the service.html hero (the reference) so every page hero can wear
   a topical background photo WITHOUT re-writing each page's markup: a page sets
   its image via the --hero-img custom property on the section, and wraps its
   existing hero copy in .hero-glass. The photo reads clearly through the page;
   a moderate scrim + the glass panel's own blur keep white text AA-legible.
   Human-crafted, not AI: considered radius, hairline border, layered warm-ink
   shadow, real backdrop blur — no pill/gradient-rainbow/oversized-glow tells.
   =========================================================================== */
/* The scrim + photo are set INLINE on each section (background-image:
   linear-gradient(scrim), url(photo) !important) so the url() resolves against
   the HTML document — NOT this stylesheet — and the inline !important beats the
   legacy .mn-hero / .mn-page-hero !important backgrounds. This class only owns
   sizing, the dark fallback, and stacking so hero copy stays above the photo. */
.mn-photo-hero {
  position: relative;
  background-color: var(--mn-dark) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}
.mn-photo-hero > .container,
.mn-photo-hero > .mn-hero-inner,
.mn-photo-hero > .hero-glass { position: relative; z-index: 1; }

/* Transparent glass wrapper around hero copy (buttons + text sit above photo). */
.hero-glass {
  position: relative;
  background: rgba(10,17,34,.26);
  -webkit-backdrop-filter: blur(7px) saturate(120%);
          backdrop-filter: blur(7px) saturate(120%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--mn-radius-xl, 24px);
  padding: 42px 44px;
  box-shadow: 0 30px 80px -24px rgba(0,0,0,.55);
}
.hero-glass.is-center { text-align: center; }
@media (max-width: 767px) {
  .hero-glass { padding: 26px 20px; border-radius: 18px; }
}

/* ===========================================================================
   19. CTA BAND — photo behind a transparent text panel (de-AI the flat gradient)
   ---------------------------------------------------------------------------
   The final "Ready to…/Get Started/Start Today" bands were flat generated-looking
   gradient blocks. Same treatment as the photo hero: a matching topical photo
   sits behind, the copy rides a translucent glass panel. Add .mn-cta-photo to
   the band and set --cta-img; the existing inner content is wrapped in .cta-glass.
   =========================================================================== */
.mn-cta-photo {
  position: relative;
  background-color: var(--mn-dark) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  overflow: hidden;
}
.mn-cta-photo > * { position: relative; z-index: 1; }
.cta-glass {
  /* a touch more opaque than the hero glass: CTA photos vary in brightness
     (e.g. the sunset hourglass), and white copy must stay AA on all of them. */
  background: rgba(10,17,34,.42);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--mn-radius-xl, 24px);
  box-shadow: 0 26px 70px -24px rgba(0,0,0,.55);
}

/* ===========================================================================
   20. FOOTER — uniform logo + mobile polish (spec item 12)
   ---------------------------------------------------------------------------
   Standardises the footer logo size across pages (trust-center shipped a 60px
   one vs 38–40px elsewhere) and, on phones, makes all footer copy white, nudges
   the logo up, sits Platform + Legal side-by-side with bolder headings, centres
   the copyright row, and gives the newsletter field one consistent design.
   =========================================================================== */

/* Uniform footer logo on every page (NOTE 2d). Inline heights vary (38/60px);
   !important normalises them without touching each page. */
.footer-section .widget-head img,
.footer-section .footer-logo img { height: 40px !important; width: auto !important; }

/* (d) Newsletter your@email input + button — ONE design + colours everywhere. */
.footer-section .footer-input-2 {
  display: flex; align-items: center; gap: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--mn-radius-md); overflow: hidden;
}
.footer-section .footer-input-2 input {
  flex: 1 1 auto; min-width: 0;
  background: transparent !important; border: 0 !important;
  color: #fff !important; padding: 11px 14px; min-height: 46px;
}
.footer-section .footer-input-2 input::placeholder { color: rgba(255,255,255,.6); }
.footer-section .footer-input-2 .newsletter-btn {
  flex: 0 0 auto; width: 50px; min-height: 46px;
  background: var(--mn-brand-600) !important; color: #fff !important;
  border: 0 !important; border-radius: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--mn-dur) var(--mn-ease);
}
.footer-section .footer-input-2 .newsletter-btn:hover { background: var(--mn-brand-700) !important; }

@media (max-width: 767px) {
  /* (a/b) Every footer string white — about copy, headings, links, bottom bar. */
  .footer-section,
  .footer-section p, .footer-section li, .footer-section span,
  .footer-section .footer-content p,
  .footer-bottom, .footer-bottom p, .footer-bottom a { color: #fff !important; }
  .footer-section a { color: #fff !important; opacity: .92; }
  .footer-section a:hover { opacity: 1; color: #fff !important; }

  /* (c) Nudge the footer logo up a little. */
  .footer-section .widget-head { margin-top: -8px; margin-bottom: 14px; }

  /* Social / media icons centered in the footer (all pages). */
  .footer-section .social-icon { display: flex !important; justify-content: center; flex-wrap: wrap; }

  /* (g) Platform (2nd) LEFT + Legal (3rd) RIGHT, side-by-side; bold headings. */
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(2),
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3) {
    flex: 0 0 50% !important; max-width: 50% !important;
  }
  /* Legal column aligned to the right edge — heading AND links. The links are
     inline-flex (touch-target rule §11), so text-align alone won't move them;
     push them with justify-content:flex-end. */
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3),
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3) .widget-head,
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3) .list-items { text-align: right !important; }
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3) .list-items { padding-left: 0 !important; list-style: none; }
  /* The template makes each li `display:table` (shrink-to-fit), which pins the
     link left. Force the li to a full-width block so text-align:right can pull
     the inline-flex link to the right edge. */
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3) .list-items li {
    display: block !important; width: 100%; text-align: right !important;
  }
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(3) .list-items li a {
    display: inline-flex !important; justify-content: flex-end !important;
  }
  .footer-section .widget-head h3,
  .footer-section .widget-head h4 {
    font-weight: 800 !important; font-size: 16px; letter-spacing: .2px;
    color: #fff !important; margin-bottom: 12px;
  }

  /* 4th column (Compliance Contact / Newsletter) — full width, centered. */
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(4),
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(4) .footer-content,
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(4) .widget-head { text-align: center; }
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(4) .footer-input-2 { max-width: 320px; margin-left: auto; margin-right: auto; }
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(4) .social-icon { justify-content: center; display: flex; }

  /* (f) Centre the copyright + Privacy · Terms · HIPAA row. */
  .footer-bottom .footer-bottom-wrapper {
    flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: 8px;
  }
  .footer-bottom .footer-menu { justify-content: center; padding-left: 0; }
  .footer-bottom p { text-align: center; }
}

/* ===========================================================================
   21. LEGAL HERO META PILLS — compact, side-by-side on mobile (spec 4a/7b/8b/10b)
   ---------------------------------------------------------------------------
   The legal-page heroes list an effective-date pill + two compliance pills and
   a "Print This Page" button. On phones they stacked full-width; make them a
   tidy, centred, wrapping row of compact pills with the print button in line.
   =========================================================================== */
@media (max-width: 767px) {
  .mn-photo-hero .hero-glass .d-flex.flex-wrap { gap: 6px !important; row-gap: 6px !important; }
  /* Compact enough that two pills sit per row inside the ~324px glass panel
     (icons hidden on mobile to reclaim width — the labels are self-explanatory). */
  .mn-photo-hero .trust-badge {
    font-size: 10px; padding: 5px 9px; gap: 0; border-radius: 40px; white-space: nowrap;
  }
  .mn-photo-hero .trust-badge i { display: none; }
  /* Pull the print button up so it reads as part of the same pill group, and
     size it like a pill so the row stays even. */
  .mn-photo-hero .hero-glass .mt-4 { margin-top: 8px !important; }
  .mn-photo-hero .hero-glass .mt-4 button {
    padding: 6px 14px !important; font-size: 11px !important; border-radius: 40px !important;
  }
}

/* ===========================================================================
   22. RELATED LEGAL DOCUMENTS — restore the subtle dark-navy gradient card
   ---------------------------------------------------------------------------
   §14 flattened the whole legal sidebar (ToC + Related) to a light surface. The
   "Related Legal Documents" card was originally a subtle navy gradient (the
   legal pages' own .legal-related rule) — restore that look here (card + light
   link chips) while the ToC stays light. (NOTE 2c)
   =========================================================================== */
.legal-sidebar .legal-related {
  background: linear-gradient(135deg, var(--mn-dark), var(--mn-dark-2)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.legal-sidebar .legal-related h6 { color: rgba(255,255,255,.55) !important; }
.legal-sidebar .legal-related a {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82) !important; border-radius: 10px; margin-bottom: 8px;
}
.legal-sidebar .legal-related a:hover {
  background: rgba(79,127,255,.20); border-color: rgba(79,127,255,.40); color: #fff !important;
}
.legal-sidebar .legal-related a i { color: var(--mn-brand-300) !important; }

/* ===========================================================================
   23. MOBILE TEXT JUSTIFICATION (spec NOTE 2b)
   ---------------------------------------------------------------------------
   Justify body paragraphs on phones. Headings, links and list items are left
   as-is; intentionally-centered copy (hero, CTA bands, section intros, footer
   bottom, footer newsletter/compliance column) is re-centred so justification
   never fights the centered layouts. hyphens:auto keeps justified lines tight.
   =========================================================================== */
@media (max-width: 767px) {
  p {
    text-align: justify; text-justify: inter-word;
    -webkit-hyphens: auto; hyphens: auto;
  }
  /* Keep deliberately-centered copy centered (and un-hyphenated — hyphenation
     only helps justified body text; on centered lines it just looks odd). */
  .text-center p, .text-center,
  .mn-hero p, .mn-photo-hero p, .hero-glass p,
  .cta-section p, .mn-cta-section p, .cta-glass p, .mnx-cta-dark p, .mnx-final p,
  .section-title p, .section-title, .mnx-sec-head p,
  .footer-bottom p {
    text-align: center;
    -webkit-hyphens: manual; hyphens: manual;
  }
  /* Footer columns: about copy (col 1) left; compliance/newsletter (col 4) centered. */
  .footer-widgets-wrapper p { text-align: left; }
  .footer-widgets-wrapper .row > [class*="col-"]:nth-child(4) p { text-align: center; }
}

/* ===========================================================================
   24. MOBILE SECTION SPACING — close inter-section gaps (spec 1a-c/2a-c/9a-c)
   ---------------------------------------------------------------------------
   Sections shipped 80–96px (and inline 90px) vertical padding, which on phones
   left large gaps between cards/sections. Cap non-hero sections to a small,
   UNIFORM rhythm on mobile only (desktop untouched). !important beats the inline
   padding on the index/platform sections; heroes are excluded so the fixed
   header offset (their big top padding) is preserved.
   =========================================================================== */
@media (max-width: 767px) {
  section:not(.mn-hero):not(.mn-photo-hero):not(.mn-page-hero):not(.mnx-hero):not(.cta-section) {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }
  .section-padding, .section-padding-sm { padding-top: 42px !important; padding-bottom: 42px !important; }
  .svc-section { padding-top: 40px !important; padding-bottom: 40px !important; }
  .mnx-cta-dark, .mn-cta-section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* ===========================================================================
   25. PRICING — collapsible plan cards + full-width comparison on mobile (6b/6c)
   =========================================================================== */
/* (6c) Full Plan Comparison: fit ALL columns (incl. Premium) on phones — no
   sideways scroll. Fixed layout, compact type, feature column wraps. */
@media (max-width: 767px) {
  .table-responsive { overflow-x: visible !important; }
  .mn-compare-table { width: 100% !important; table-layout: fixed; font-size: 10px !important; }
  .mn-compare-table th, .mn-compare-table td {
    padding: 6px 2px !important; text-align: center !important;
    word-break: break-word; white-space: normal !important; line-height: 1.25;
  }
  .mn-compare-table th:first-child, .mn-compare-table td:first-child {
    text-align: left !important; width: 30%; font-size: 9.5px !important;
  }
  .mn-compare-table th:not(:first-child), .mn-compare-table td:not(:first-child) { width: 17.5%; }
}

/* (6b) Plan cards collapse to their heading on mobile; a labelled toggle
   ("Click To View More Detail") reveals the full plan. The toggle element is
   injected by mentranote.js; its label flips to "Hide Details" when open. */
.mn-pcard.mn-collapsible { cursor: pointer; }
.mn-pcard-toggle { display: none; }
.mn-pcard.mn-collapsible .mn-pcard-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 10px 14px;
  background: var(--mn-brand-50); color: var(--mn-brand-700);
  border: 1px solid var(--mn-brand-200); border-radius: var(--mn-radius-md);
  font-size: 13px; font-weight: 700; letter-spacing: .2px;
  cursor: pointer; transition: background .18s var(--mn-ease), border-color .18s var(--mn-ease);
}
.mn-pcard.mn-collapsible .mn-pcard-toggle:hover { background: var(--mn-brand-100); border-color: var(--mn-brand-300); }
.mn-pcard.mn-collapsible .mn-pcard-toggle i { font-size: 11px; transition: transform .25s var(--mn-ease); }
.mn-pcard.mn-collapsible.is-open .mn-pcard-toggle i { transform: rotate(180deg); }
@media (max-width: 767px) {
  .mn-pcard.mn-collapsible .mn-pcard-features,
  .mn-pcard.mn-collapsible .mn-pcard-divider,
  .mn-pcard.mn-collapsible .mn-pcard-desc,
  .mn-pcard.mn-collapsible .mn-pcard-cta { display: none; }
  .mn-pcard.mn-collapsible.is-open .mn-pcard-features { display: block; }
  .mn-pcard.mn-collapsible.is-open .mn-pcard-divider { display: block; }
  .mn-pcard.mn-collapsible.is-open .mn-pcard-desc { display: block; }
  .mn-pcard.mn-collapsible.is-open .mn-pcard-cta { display: inline-flex; }
}

/* ===========================================================================
   26. FOOTER STORE / NEWSLETTER BUTTONS — consistent colour + centered on mobile
   ---------------------------------------------------------------------------
   The email field + App Store / Google Play buttons must look identical on every
   page (the home-page treatment) and centre on phones. Two competing
   .mn-store-btn-sm rules existed; this is the authoritative footer style.
   =========================================================================== */
.footer-section .mn-store-btn-sm,
.mn-foot .mn-store-btn-sm {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.08); color: #fff;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .2s var(--mn-ease), border-color .2s var(--mn-ease);
}
.footer-section .mn-store-btn-sm:hover,
.mn-foot .mn-store-btn-sm:hover {
  background: rgba(79,127,255,.22); border-color: rgba(79,127,255,.45); color: #fff;
}
.footer-section .mn-store-btn-sm i,
.mn-foot .mn-store-btn-sm i { font-size: 15px; }

@media (max-width: 767px) {
  /* Centre the email field + store buttons in the footer newsletter/contact col. */
  .footer-section .footer-input-2 { max-width: 320px; margin-left: auto; margin-right: auto; }
  .footer-section .footer-content > .d-flex,
  .footer-section .footer-content .mn-store-row { justify-content: center !important; }
}