/* My Polished Profile — structural typography + alignment rules
   v172: baseline alignment, native search-result type, numbered rows,
   FAQ underline offsets, and primary UI tracking. */

/* 1) Timeline baseline match.
   Any timeline row/entry using a time label and adjacent heading is a flex row.
   `first baseline` is intentionally repeated after the baseline fallback. */
.timeline-row,
.timeline-entry,
.timeline-item,
.timeline-block,
[data-timeline-row] {
  display: flex !important;
  align-items: baseline !important;
  align-items: first baseline !important;
}

.timeline-row > :is(.timeline-time,.timestamp,.time,.moment-kicker),
.timeline-entry > :is(.timeline-time,.timestamp,.time,.moment-kicker),
.timeline-item > :is(.timeline-time,.timestamp,.time,.moment-kicker),
.timeline-block > :is(.timeline-time,.timestamp,.time,.moment-kicker),
[data-timeline-row] > :is(.timeline-time,.timestamp,.time,.moment-kicker) {
  flex: 0 0 auto;
}

.timeline-row > :is(h2,h3,.timeline-title,.timeline-heading),
.timeline-entry > :is(h2,h3,.timeline-title,.timeline-heading),
.timeline-item > :is(h2,h3,.timeline-title,.timeline-heading),
.timeline-block > :is(h2,h3,.timeline-title,.timeline-heading),
[data-timeline-row] > :is(h2,h3,.timeline-title,.timeline-heading) {
  min-width: 0;
}

/* 2) Search-engine snippet typography.
   These values intentionally mirror native Google-result proportions. */
#heroStage .serp-title,
#heroStage .google-result strong,
.audit-report .google-result a,
.search-result .search-title,
.search-snippet .search-title {
  font-size: 1.25rem !important;
  line-height: 1.3 !important;
  color: #1a0dab !important;
}

#heroStage .serp-desc,
#heroStage .serp-snippet,
#heroStage .google-result p,
.audit-report .google-result .snippet,
.search-result .snippet,
.search-snippet .snippet {
  font-size: 0.875rem !important;
  line-height: 1.4 !important;
  color: #4d5156 !important;
  max-width: 600px !important;
}

/* Keep the active simulated search card roomy enough for the native-scale type. */
#heroStage .google-results-moment .google-moment-window {
  min-height: 0 !important;
}
#heroStage .google-results-moment .google-moment-results {
  overflow: auto;
}

/* 3) Large-number process rows.
   Free Audit reveal rows and homepage audit preview use one strict flex row. */
.reveals .signal,
.audit-preview-card .audit-signal,
.numbered-process-row,
.process-list-large > .process-step-large {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
}

.reveals .signal > .num,
.audit-preview-card .audit-signal > span:first-child,
.numbered-process-row > :is(.num,.number,.step-number),
.process-list-large > .process-step-large > :is(.num,.number,.step-number) {
  flex: 0 0 auto !important;
  margin-right: 1.5rem !important;
}

.reveals .signal > div:not(.num),
.audit-preview-card .audit-signal > div,
.numbered-process-row > .process-copy,
.process-list-large > .process-step-large > .process-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.reveals .signal > .arrow {
  flex: 0 0 auto;
  margin-left: auto;
}

/* 4) FAQ link underline rhythm. */
:is(.faq-list,.faq-home-list,.contact-faq,.faq-wrap,[class*="faq"]) a,
:is(.faq-list,.faq-home-list,.contact-faq,.faq-wrap,[class*="faq"]) summary,
details a {
  text-underline-offset: 4px !important;
}

/* Primary structural actions use one consistent uppercase tracking value. */
:is(
  .btn,
  .cta,
  .nav-cta,
  .continue,
  .process-retry,
  .mpp-toolbar-audit,
  .mpp-toolbar-contact,
  .mpp-toolbar-mobile-cta,
  .mpp-mobile-audit,
  .mpp-mobile-contact
) {
  letter-spacing: 0.1em !important;
}

/* --------------------------------------------------------------------------
   v174 — Desktop shared container rail
   One visible-width grid for nav, hero, main section containers, contact layouts and footer.
   Navbar capsule and primary containers share the exact same outer 1280px rail
   with identical 32px inner gutters.
   -------------------------------------------------------------------------- */
:root {
  --mpp-desktop-rail-max: 1280px;
  --mpp-desktop-gutter: 32px;
  --mpp-desktop-edge-gap: 32px;
}

@media (min-width: 981px) {
  /* Keep legacy page variables from creating competing desktop rails. */
  :root {
    --max: var(--mpp-desktop-rail-max) !important;
    --pad: var(--mpp-desktop-gutter) !important;
    --page-pad: var(--mpp-desktop-gutter) !important;
  }

  /* The visible navbar capsule now uses the exact same outer width as page containers. */
  .mpp-shared-toolbar {
    width: min(var(--mpp-desktop-rail-max), calc(100vw - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
  }

  .mpp-shared-toolbar > .mpp-toolbar-inner {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
  }

  /* Standard page rails. Narrow specialty modules can retain their own width. */
  main .container:not(.return-inner) {
    width: min(var(--mpp-desktop-rail-max), calc(100% - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Home hero previously used its own 1700px rail. Snap it to the global grid. */
  .hero-section > .hero {
    width: min(var(--mpp-desktop-rail-max), calc(100% - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Contact page uses named wrappers instead of .container. */
  .contact-hero-inner,
  .contact-wrap,
  .contact-grid,
  section.band > .wrap {
    width: min(var(--mpp-desktop-rail-max), calc(100% - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Legal, article and start-page hero headings begin on the same desktop line. */
  main > .hero > .hero-inner,
  main > section.hero > .hero-inner {
    width: min(var(--mpp-desktop-rail-max), calc(100% - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Legacy portfolio nav: use the same desktop rail until it joins shared shell. */
  body > .nav {
    width: min(var(--mpp-desktop-rail-max), calc(100vw - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Canonical footer follows the same left/right grid as the page above it. */
  .mpp-site-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .mpp-site-footer-grid,
  .mpp-site-footer-sms,
  .mpp-site-footer-bottom {
    width: min(var(--mpp-desktop-rail-max), calc(100% - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }
}

/* Shared header wrapper must remain a flex row below the desktop breakpoint too.
   Desktop sizing is applied above; mobile keeps the existing shell padding/behavior. */
.mpp-shared-toolbar > .mpp-toolbar-inner {
  display: flex !important;
  align-items: center !important;
  width: 100%;
  height: 100% !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

@media (min-width: 981px) {
  .mpp-shared-toolbar > .mpp-toolbar-inner {
    width: 100% !important;
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   v175 — Unified floating desktop shell
   Navbar and page body now share the same visible outer card boundaries.
   Internal content uses the same 32px left/right grid so logo/headlines snap.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  /* One visible card system: same width, radius, border and centering as nav. */
  .mpp-body-card {
    width: min(var(--mpp-desktop-rail-max), calc(100vw - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin: 10px auto 28px !important;
    border: 1px solid rgba(47,33,58,.42) !important;
    border-radius: 22px !important;
    box-shadow: 0 22px 52px rgba(36,22,34,.16) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Remove the old nested rail: each section now fills the body card and
     receives the exact same 32px inner gutter used by the navbar. */
  .mpp-body-card .container:not(.return-inner),
  .mpp-body-card .contact-hero-inner,
  .mpp-body-card .contact-wrap,
  .mpp-body-card .contact-grid,
  .mpp-body-card section.band > .wrap,
  .mpp-body-card > .hero-section > .hero,
  .mpp-body-card > section.hero > .hero-inner,
  .mpp-body-card > .hero > .hero-inner {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Home hero is no longer its own full-bleed rectangle. The body card owns
     the visible outer shape, so the hero surface simply fills it. */
  .mpp-body-card > .hero-section {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Logo and headline share an exact vertical start line: outer card edge + 32px. */
  .mpp-shared-toolbar > .mpp-toolbar-inner,
  .mpp-body-card > .hero-section > .hero {
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
  }

  /* Home hero typography refinement. */
  .mpp-body-card .hero h1 {
    line-height: 1.075 !important;
  }
  .mpp-body-card .hero-lede {
    color: rgba(247,243,238,.84) !important;
  }

  /* Podcast state: the changing 03:00 label and its card use the same left edge. */
  #heroStage:has(.podcast-verdict-moment.active) .stage-label {
    left: 2% !important;
    top: 0 !important;
  }
  #heroStage:has(.podcast-verdict-moment.active) .podcast-verdict-moment {
    left: 2% !important;
    top: 7% !important;
  }

  /* Pull the vertical opportunity label away from the large outline numeral. */
  .mpp-body-card .seconds-label {
    right: .5% !important;
  }
}

/* --------------------------------------------------------------------------
   v176 — Home document rail unification
   The dark countdown card establishes the canonical 1280px outer desktop rail.
   Every lower home-page section now lives inside the same centered boundary.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  .mpp-document-rail {
    width: min(var(--mpp-desktop-rail-max), calc(100vw - var(--mpp-desktop-edge-gap))) !important;
    max-width: var(--mpp-desktop-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Every full-width lower section stops at the same physical edges as the
     navbar pill and countdown card rather than returning to viewport width. */
  .mpp-document-rail > section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Canonical content axis: outer rail edge + 32px. This is the same inset
     used by .mpp-toolbar-inner, so the logo and section copy snap vertically. */
  .mpp-document-rail > section > .container,
  .mpp-document-rail > .home-bridge > .home-bridge-inner,
  .mpp-document-rail > .final-section > .final-inner,
  .mpp-document-rail .mpp-site-footer-grid,
  .mpp-document-rail .mpp-site-footer-sms,
  .mpp-document-rail .mpp-site-footer-bottom {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-desktop-gutter) !important;
    padding-right: var(--mpp-desktop-gutter) !important;
    box-sizing: border-box !important;
  }

  /* Preserve deliberate centered/narrow copy inside these sections while
     keeping the section's structural edges on the shared grid. */
  .mpp-document-rail > .home-bridge > .home-bridge-inner {
    text-align: center;
  }
  .mpp-document-rail > .home-bridge > .home-bridge-inner > * {
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
  }
  .mpp-document-rail > .final-section > .final-inner > .display {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .mpp-document-rail > .final-section > .final-inner > .lede {
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* --------------------------------------------------------------------------
   v178 — Sitewide design-system normalization
   Shared outer rail, floating-shell geometry, mobile editorial rhythm,
   equal-height card rows, button symmetry and image safety.
   -------------------------------------------------------------------------- */
:root {
  --mpp-rail-max: 1280px;
  --mpp-gutter-desktop: 32px;
  --mpp-gutter-mobile: 16px;
  --mpp-edge-desktop: 32px;
  --mpp-edge-mobile: 18px;
  --mpp-radius-desktop: 22px;
  --mpp-radius-mobile: 18px;
  --mpp-layer-gap-desktop: 20px;
  --mpp-layer-gap-mobile: 14px;
  --mpp-meta-tracking: .15em;
}

/* Tiny editorial metadata uses one luxury tracking standard. */
:is(.eyebrow,.moment-kicker,.stage-label,.report-label,.section-kicker,.tier-kicker,.scan-top span,.mpp-site-footer-heading,[class*="kicker"],[class*="meta"]) {
  letter-spacing: var(--mpp-meta-tracking) !important;
}

/* Safe responsive media defaults. Custom wrappers may still provide a crop,
   but the image itself is never squeezed out of proportion. */
:is(.mpp-body-card,.mpp-document-rail,.mpp-site-footer,main) img:not([style*="position:absolute"]),
:is(.mpp-body-card,.mpp-document-rail,.mpp-site-footer,main) picture,
:is(.mpp-body-card,.mpp-document-rail,.mpp-site-footer,main) video {
  max-width: 100%;
}
:is(.mpp-body-card,.mpp-document-rail,.mpp-site-footer,main) img:not(.cover-image):not([class*="cover"]) {
  height: auto;
}

/* Two-column editorial rows balance vertically. */
:is(.hero-grid,.grid2,.system-grid,.contact-hero-inner,.contact-grid,.compare-grid,.boutique-grid,.cta-grid,.publish-intro,.proof-home-grid,.booking-wrap) {
  align-items: center !important;
}

/* Multi-column card systems stretch to one baseline. */
:is(.pillar-grid,.grid3,.package-grid,.books-grid,.portfolio-grid,.proof-home-quotes,.findings-grid,.search-summary-grid) {
  align-items: stretch !important;
}
:is(.pillar-grid,.grid3,.package-grid,.books-grid,.portfolio-grid,.proof-home-quotes,.findings-grid,.search-summary-grid) > :is(article,.pillar-card,.panel,.pkg,.book-card,.portfolio-card,.proof-home-outcome,.report-card,.summary-card) {
  height: 100% !important;
}
:is(.pillar-card,.pkg,.portfolio-card,.proof-home-outcome,.report-card,.summary-card) {
  display: flex;
  flex-direction: column;
}
:is(.pillar-card .pillar-details,.pkg .tier-link,.pkg .pkg-action,.portfolio-card .portfolio-link,.proof-home-outcome small) {
  margin-top: auto !important;
}

/* Button rows use matching weight and dimensions. */
:is(.hero-actions,.actions,.final-actions,.cta-actions) {
  gap: 12px !important;
}
:is(.hero-actions,.actions,.final-actions,.cta-actions) :is(.btn,a.btn,button.btn),
:is(.mpp-toolbar-actions) a {
  min-height: 48px;
  padding-left: 22px;
  padding-right: 22px;
  box-sizing: border-box;
}

/* Divider cushioning: equal air above and below the thin rules. */
:is(.hero-rule,.line-rule,.section-rule,.divider,.rule) {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
}

@media (min-width: 981px) {
  /* One mathematical desktop rail for nav, page cards and footer internals. */
  .mpp-shared-toolbar,
  .mpp-body-card,
  .mpp-document-rail,
  body > .mpp-toolbar,
  .booking-top-shell,
  .booking-main {
    width: min(var(--mpp-rail-max), calc(100vw - var(--mpp-edge-desktop))) !important;
    max-width: var(--mpp-rail-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .mpp-shared-toolbar,
  body > .mpp-toolbar,
  .booking-pill,
  .mpp-body-card {
    border-radius: var(--mpp-radius-desktop) !important;
  }

  .mpp-shared-toolbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mpp-shared-toolbar > .mpp-toolbar-inner {
    padding-left: var(--mpp-gutter-desktop) !important;
    padding-right: var(--mpp-gutter-desktop) !important;
  }

  /* Legacy portfolio toolbar uses the same visual rail/gutter until migrated
     into the canonical shared header markup. */
  body > .mpp-toolbar:not(.mpp-shared-toolbar) {
    padding-left: var(--mpp-gutter-desktop) !important;
    padding-right: var(--mpp-gutter-desktop) !important;
  }

  /* All structural content starts on the exact same logo axis. */
  .mpp-body-card :is(.container,.contact-hero-inner,.contact-wrap,.contact-grid,.booking-wrap),
  .mpp-document-rail > section > .container,
  .mpp-document-rail > .home-bridge > .home-bridge-inner,
  .mpp-document-rail > .final-section > .final-inner,
  body > main:not(.mpp-body-card) > section > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-gutter-desktop) !important;
    padding-right: var(--mpp-gutter-desktop) !important;
    box-sizing: border-box !important;
  }

  /* Keep intentional nested/narrow modules narrow without moving their axis. */
  .mpp-body-card .return-inner {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .mpp-body-card,
  .mpp-document-rail > section {
    overflow: hidden;
  }

  /* Floating body layers keep a consistent visual gap from the pill header. */
  .mpp-body-card {
    margin-top: 10px !important;
    margin-bottom: var(--mpp-layer-gap-desktop) !important;
  }
  .mpp-document-rail > section {
    border-radius: var(--mpp-radius-desktop) !important;
    margin-bottom: var(--mpp-layer-gap-desktop) !important;
  }

  /* Footer content snaps to the same outer grid. */
  .mpp-site-footer-grid,
  .mpp-site-footer-sms,
  .mpp-site-footer-bottom {
    width: min(var(--mpp-rail-max), calc(100vw - var(--mpp-edge-desktop))) !important;
    max-width: var(--mpp-rail-max) !important;
    padding-left: var(--mpp-gutter-desktop) !important;
    padding-right: var(--mpp-gutter-desktop) !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 980px) {
  /* The navbar and every primary mobile surface share the same 9px outer edge
     and 16px internal content axis. */
  .mpp-shared-toolbar,
  body > .mpp-toolbar,
  .mpp-body-card,
  .mpp-document-rail,
  .booking-top-shell,
  .booking-main {
    width: calc(100% - var(--mpp-edge-mobile)) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .mpp-shared-toolbar,
  body > .mpp-toolbar,
  .booking-pill,
  .mpp-body-card,
  .mpp-document-rail > section,
  .booking-main {
    border-radius: var(--mpp-radius-mobile) !important;
  }

  .mpp-shared-toolbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .mpp-shared-toolbar > .mpp-toolbar-inner {
    padding-left: var(--mpp-gutter-mobile) !important;
    padding-right: var(--mpp-gutter-mobile) !important;
  }
  body > .mpp-toolbar:not(.mpp-shared-toolbar) {
    padding-left: var(--mpp-gutter-mobile) !important;
    padding-right: var(--mpp-gutter-mobile) !important;
  }

  .mpp-body-card {
    margin-top: 10px !important;
    margin-bottom: var(--mpp-layer-gap-mobile) !important;
    overflow: hidden !important;
  }
  .mpp-document-rail > section {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: var(--mpp-layer-gap-mobile) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* Mobile content starts on the same axis as the nav logo. */
  .mpp-body-card :is(.container,.contact-hero-inner,.contact-wrap,.contact-grid,.booking-wrap),
  .mpp-document-rail > section > .container,
  .mpp-document-rail > .home-bridge > .home-bridge-inner,
  .mpp-document-rail > .final-section > .final-inner,
  body > main:not(.mpp-body-card) > section > .container {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mpp-gutter-mobile) !important;
    padding-right: var(--mpp-gutter-mobile) !important;
    box-sizing: border-box !important;
  }

  /* High-end mobile editorial rhythm: tight headline block, large eyebrow gap. */
  :is(
    .hero-copy,
    .contact-intro,
    .publish-intro .hero-copy,
    .dpm-hero .grid2 > div:first-child,
    .booking-copy,
    .mpp-body-card > section:first-child .reveal
  ) > .eyebrow {
    margin-bottom: 32px !important;
  }

  :is(
    .hero-copy h1,
    .contact-hero h1,
    .publish-intro h1,
    .dpm-hero h1,
    .booking-copy h1,
    .mpp-body-card > section:first-child h1,
    body > main:not(.mpp-body-card) > section:first-child h1
  ) {
    line-height: 1.15 !important;
  }

  /* Mobile action groups stack full-width instead of squeezing side-by-side. */
  :is(.hero-actions,.actions,.final-actions,.cta-actions) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 10px !important;
  }
  :is(.hero-actions,.actions,.final-actions,.cta-actions) > :is(.btn,a,button) {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Preserve the locked original homepage animation geometry. The v145/v177
     countdown placement remains authoritative; no v178 rule moves it. */

  .mpp-site-footer {
    width: calc(100% - var(--mpp-edge-mobile)) !important;
    max-width: none !important;
    margin: 0 auto var(--mpp-layer-gap-mobile) !important;
    border-radius: var(--mpp-radius-mobile) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    padding-left: var(--mpp-gutter-mobile) !important;
    padding-right: var(--mpp-gutter-mobile) !important;
  }
  .mpp-site-footer-grid,
  .mpp-site-footer-sms,
  .mpp-site-footer-bottom {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 600px) {
  /* Dividers stay cushioned without consuming too much of the first viewport. */
  :is(.hero-rule,.line-rule,.section-rule,.divider,.rule) {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
}

/* --------------------------------------------------------------------------
   v190 — desktop alignment wall + navbar action symmetry
   One outer rail and one inner gutter for the shared navbar, body card and footer.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {
  :root{
    --mpp-rail-max:1280px;
    --mpp-gutter-desktop:32px;
    --mpp-edge-desktop:32px;
  }

  .mpp-shared-toolbar,
  .mpp-body-card{
    width:min(var(--mpp-rail-max),calc(100vw - var(--mpp-edge-desktop)))!important;
    max-width:var(--mpp-rail-max)!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  .mpp-shared-toolbar > .mpp-toolbar-inner,
  .mpp-body-card :is(.container,.contact-hero-inner,.contact-wrap,.contact-grid,.booking-wrap),
  .mpp-site-footer-grid,
  .mpp-site-footer-sms,
  .mpp-site-footer-bottom{
    width:100%!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
    padding-left:var(--mpp-gutter-desktop)!important;
    padding-right:var(--mpp-gutter-desktop)!important;
    box-sizing:border-box!important;
  }

  .mpp-site-footer-grid,
  .mpp-site-footer-sms,
  .mpp-site-footer-bottom{
    width:min(var(--mpp-rail-max),calc(100vw - var(--mpp-edge-desktop)))!important;
    max-width:var(--mpp-rail-max)!important;
  }

  /* Shared navbar buttons: same physical height, padding and box model. */
  .mpp-shared-toolbar .mpp-toolbar-audit,
  .mpp-shared-toolbar .mpp-toolbar-contact{
    height:48px!important;
    min-height:48px!important;
    padding:0 24px!important;
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    line-height:1!important;
  }
}

/* --------------------------------------------------------------------------
   v191 — Unified Floating Cards system, sitewide QA
   Each major page row is an independent floating editorial card. The main
   element becomes the rail/canvas only; individual sections own the radius.
   -------------------------------------------------------------------------- */
:root{
  --mpp-section-gap-desktop:20px;
  --mpp-section-gap-mobile:14px;
}

/* Sitewide metadata rhythm: one exact editorial tracking value. */
:is(
  .eyebrow,
  .pkg-label,
  .tier-kicker,
  .moment-kicker,
  .stage-label,
  .section-kicker,
  .report-label,
  .scan-top span,
  .lifetime-head h3,
  .mpp-site-footer-heading,
  [class*="kicker"],
  [class*="meta"]
){
  letter-spacing:.15em!important;
}

@media (min-width:981px){
  /* The page main is a transparent rail. Direct child sections are the cards. */
  main.mpp-body-card:not(.booking-main){
    width:min(var(--mpp-rail-max),calc(100vw - var(--mpp-edge-desktop)))!important;
    max-width:var(--mpp-rail-max)!important;
    margin:10px auto var(--mpp-section-gap-desktop)!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }

  main.mpp-body-card:not(.booking-main) > section{
    width:100%!important;
    max-width:none!important;
    margin:0 0 var(--mpp-section-gap-desktop)!important;
    border-radius:var(--mpp-radius-desktop)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    box-shadow:0 18px 44px rgba(36,22,34,.10)!important;
  }
  main.mpp-body-card:not(.booking-main) > section:last-child{margin-bottom:0!important;}

  /* Preserve the existing card-like Book page while keeping it on the same rail. */
  main.booking-main.mpp-body-card{
    width:min(var(--mpp-rail-max),calc(100vw - var(--mpp-edge-desktop)))!important;
    max-width:var(--mpp-rail-max)!important;
    margin:10px auto var(--mpp-section-gap-desktop)!important;
    border-radius:var(--mpp-radius-desktop)!important;
    box-sizing:border-box!important;
  }

  /* Legacy Portfolio has no mpp-body-card wrapper; give its direct rows the same system. */
  body > main:not(.mpp-body-card){
    width:min(var(--mpp-rail-max),calc(100vw - var(--mpp-edge-desktop)))!important;
    max-width:var(--mpp-rail-max)!important;
    margin:10px auto var(--mpp-section-gap-desktop)!important;
    padding:0!important;
    box-sizing:border-box!important;
    background:transparent!important;
  }
  body > main:not(.mpp-body-card) > :is(section,article,.form-wrap){
    width:100%!important;
    max-width:none!important;
    margin:0 0 var(--mpp-section-gap-desktop)!important;
    border-radius:var(--mpp-radius-desktop)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
    box-shadow:0 18px 44px rgba(36,22,34,.10)!important;
  }
  body > main:not(.mpp-body-card) > :is(section,article,.form-wrap):last-child{margin-bottom:0!important;}

  /* Home lower document rail already uses section cards; sync the exact gap. */
  .mpp-document-rail > section{margin-bottom:var(--mpp-section-gap-desktop)!important;}

  /* Major section internals retain the exact navbar logo axis. */
  main.mpp-body-card > section > :is(.container,.contact-hero-inner,.contact-wrap,.contact-grid),
  body > main:not(.mpp-body-card) > :is(section,article,.form-wrap) > .container{
    padding-left:var(--mpp-gutter-desktop)!important;
    padding-right:var(--mpp-gutter-desktop)!important;
    box-sizing:border-box!important;
  }
}

@media (max-width:980px){
  main.mpp-body-card:not(.booking-main){
    width:calc(100% - var(--mpp-edge-mobile))!important;
    max-width:none!important;
    margin:10px auto var(--mpp-section-gap-mobile)!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  main.mpp-body-card:not(.booking-main) > section{
    width:100%!important;
    margin:0 0 var(--mpp-section-gap-mobile)!important;
    border-radius:var(--mpp-radius-mobile)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  main.mpp-body-card:not(.booking-main) > section:last-child{margin-bottom:0!important;}

  body > main:not(.mpp-body-card){
    width:calc(100% - var(--mpp-edge-mobile))!important;
    margin:10px auto var(--mpp-section-gap-mobile)!important;
    padding:0!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }
  body > main:not(.mpp-body-card) > :is(section,article,.form-wrap){
    width:100%!important;
    margin:0 0 var(--mpp-section-gap-mobile)!important;
    border-radius:var(--mpp-radius-mobile)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  body > main:not(.mpp-body-card) > :is(section,article,.form-wrap):last-child{margin-bottom:0!important;}
}

/* --------------------------------------------------------------------------
   v196 — compact floating sections + canonical floating footer
   Reduce dead vertical space without compressing content, and make every
   footer a true sibling floating card on the shared rail.
   -------------------------------------------------------------------------- */
@media (min-width:981px){
  .mpp-site-footer{
    width:min(var(--mpp-rail-max),calc(100vw - var(--mpp-edge-desktop)))!important;
    max-width:var(--mpp-rail-max)!important;
    margin:var(--mpp-layer-gap-desktop) auto var(--mpp-layer-gap-desktop)!important;
    padding:44px 0 26px!important;
    border:1px solid rgba(47,33,58,.36)!important;
    border-radius:var(--mpp-radius-desktop)!important;
    box-shadow:0 20px 46px rgba(36,22,34,.13)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
  .mpp-site-footer-grid,
  .mpp-site-footer-sms,
  .mpp-site-footer-bottom{
    width:100%!important;
    max-width:none!important;
    padding-left:var(--mpp-gutter-desktop)!important;
    padding-right:var(--mpp-gutter-desktop)!important;
    box-sizing:border-box!important;
  }
}
@media (max-width:980px){
  .mpp-site-footer{
    width:calc(100% - var(--mpp-edge-mobile))!important;
    margin:var(--mpp-layer-gap-mobile) auto var(--mpp-layer-gap-mobile)!important;
    border-radius:var(--mpp-radius-mobile)!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }
}