/* ==========================================================================
   Blush & Berry base for marketing pages that keep _MarketingLayout
   (How it works, About). Loaded by Views/Shared/_BrandPageHead.cshtml after
   landing.css + landing-pink.css; each page then adds its own stylesheet.
   - :root[data-brand-page] remaps the shared --mp-* tokens so the layout's
     nav, footer and suggestion widget follow the palette on these pages only.
   - .bp (the page root) neutralises mypariva.css's `body.mp-body h1/p/span`
     typography; page rules written as `.page .x` (two classes) win over it.
   ========================================================================== */

:root[data-brand-page] {
  --mp-pink-50: var(--lp-paper);
  --mp-pink-100: var(--lp-paper-deep);
  --mp-pink-200: var(--lp-clay-soft);
  --mp-pink-300: var(--lp-clay);
  --mp-pink-400: var(--lp-madder);
  --mp-pink-500: var(--lp-madder);
  --mp-pink-600: var(--lp-madder-deep);
  --mp-pink-700: var(--lp-madder-deep);
  --mp-ink-900: var(--lp-ink);
  --mp-ink-700: var(--lp-ink-soft);
  --mp-ink-600: var(--lp-ink-soft);
  --mp-ink-500: var(--lp-ink-soft);
  --mp-white: var(--lp-surface);
  background: var(--lp-paper);
  color-scheme: light;
}
:root[data-brand-page] body.mp-body { background: var(--lp-paper) !important; }
/* Shared CSS sets overflow-x:hidden on html and body, which turns body into a scroll
   container and silently disables position:sticky. clip prevents sideways scroll without that. */
:root[data-brand-page], :root[data-brand-page] body.mp-body { overflow-x: clip !important; overflow-y: visible !important; }
/* The layout paints decorative circles into .mp-page-content; these pages use flat paper sections instead. */
:root[data-brand-page] .mp-page-content { background: var(--lp-paper); }

/* ---------- Neutralise the layout's element typography inside the page ---------- */
.bp.bp { color: var(--lp-ink); font-family: var(--lp-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.bp.bp :where(p, span, a, li, dt, dd, label, input, select, textarea, button, strong, b, small, em, blockquote, figcaption) { font-family: var(--lp-sans); }
.bp.bp :where(h1, h2, h3, h4, h5, h6) { margin: 0; font-family: var(--lp-serif); font-weight: 500; color: var(--lp-ink); letter-spacing: -.02em; line-height: 1.08; text-wrap: balance; }
.bp.bp :where(h1, h2, h3, h4, h5, h6) :where(em, span) { font-family: inherit; }
.bp.bp :where(p) { margin: 0; color: var(--lp-ink-soft); line-height: 1.6; text-wrap: pretty; }
.bp.bp :where(ul, ol, dl, dd, blockquote, figure) { margin: 0; padding: 0; list-style: none; }
.bp.bp :where(button) { color: inherit; }
.bp.bp :focus-visible { outline: 2px solid var(--lp-madder); outline-offset: 3px; border-radius: 4px; }
.bp [hidden] { display: none !important; }

/* Landing components reused on these pages */
.bp .lp-btn { color: var(--lp-action-text); }
.bp .lp-btn:hover { color: var(--lp-surface); }
.bp .lp-link { color: var(--lp-ink); }
.bp .lp-link:hover { color: var(--lp-madder); }

@media (prefers-reduced-motion: reduce) {
  .bp *, .bp *::before, .bp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}