/* Shared layout rhythm. Kept separate from the export so the review is reversible. */
:root { --page-margin: 32px; --page-gutter: 24px; --page-content: 1280px; }
@media (max-width: 991px) { :root { --page-margin: 24px; } }
@media (max-width: 767px) { :root { --page-margin: 20px; --page-gutter: 16px; } }
@media (min-width: 992px) {
  body[data-page="home"] .container-3.in-nav {
    width: min(var(--page-content), calc(100% - var(--page-margin) * 2));
    max-width: var(--page-content);
    margin-inline: auto;
    padding-inline: 0;
  }
  body[data-page="home"] .hero-home-wrapper { min-height: 720px; }
  body[data-page="home"] .hero-wrapper {
    width: min(var(--page-content), calc(100% - var(--page-margin) * 2));
    max-width: var(--page-content);
    margin-inline: auto;
  }
  body[data-page="home"] .hero-wrapper .heading-new-1.home { max-width: 1080px; }
  body[data-page="home"] .hero-wrapper .hero-p.home { max-width: 840px; }
  body[data-page="home"] .features-section-main,
  body[data-page="home"] .results-main,
  body[data-page="home"] .for-customers-ai,
  body[data-page="home"] .testemonials-main,
  body[data-page="home"] div.partner-cta {
    width: min(var(--page-content), calc(100% - var(--page-margin) * 2));
    max-width: var(--page-content);
    margin-inline: auto;
  }
  body[data-page="home"] .features-section-main { padding-inline: 32px; }
  body[data-page="home"] .testemonials-main { padding-inline: 48px; }
  body[data-page="home"] .statement-wrapper { padding-inline: var(--page-margin); }
  body[data-page="home"] .statement-block { max-width: var(--page-content); margin-inline: auto; }
  /* The legacy nav card (About, Careers, Shop) is wider than the page column by the bar's
     inner padding and 1px border on each side, so its logo starts on the rail. Where the
     viewport is too narrow for that, the card itself keeps the page margin instead. */
  :is(body[data-page="about-us"], body[data-page="carriers"], body[data-page="shop-medicare"]) .nav {
    --nav-inset: 24px;
    width: min(var(--page-content) + (var(--nav-inset) + 1px) * 2, 100% - var(--page-margin) * 2);
    max-width: none;
  }
  body[data-page="about-us"] .why-mahnolia-wrapper,
  body[data-page="carriers"] .benefits-wrapper,
  body[data-page="shop-medicare"] .stories-section {
    width: min(var(--page-content), calc(100% - var(--page-margin) * 2));
    max-width: var(--page-content);
    margin-inline: auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  body[data-page="home"] .results-main.white.waypoint__white,
  body[data-page="home"] .testemonials-main,
  body[data-page="home"] div.partner-cta {
    width: calc(100% - 48px); margin-inline: auto;
  }
  body[data-page="home"] .testemonials-main { padding-inline: 32px; }
}
/* Footer surfaces span the page; their content columns (and the legal row) sit on the page rail. */
:is(.footer, .demo-footer) > .footer-top,
.bellow-footer {
  width: min(var(--page-content), calc(100% - var(--page-margin) * 2));
  max-width: var(--page-content);
  margin-inline: auto;
}
@media (max-width: 767px) {
  body[data-page="home"] .plans-compare-wrapper.atlas-section,
  body[data-page="home"] .atlas-section { padding-inline: var(--page-margin); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}
/* Keep text readable while the optional animated background initializes. */
body[data-page="home"] .hero-home-wrapper { position: relative; isolation: isolate; background: #123f35; }
body[data-page="home"] .hero-wrapper > :not(.code-embed-10) { position: relative; z-index: 1; }
body[data-page="home"] .code-embed-10 { z-index: 0; opacity: .45; }
body[data-page="home"] .hero-home-wrapper .button.green { background: #fff; color: #164d3f; }
body[data-page="home"] .hero-home-wrapper .button.green .text-block-10 { color: inherit; }
@media (max-width: 991px) {
  body[data-page="home"] .atlas-section { width: 100%; min-width: 0; max-width: 100%; }
  body[data-page="home"] .custom-animation-atlas { width: 100%; min-width: 0; max-width: 100%; }
}
@media (min-width: 992px) {
  body[data-page="home"] .container-3.in-nav { flex: none; min-width: 0; }
  body[data-page="home"] .partner-cta-wrapper { width: 100%; max-width: none; padding-inline: 0; }
}
/* Contact sits on a light background, including its navigation. */
body.body-3 .navigation.version-white { background: #fff !important; border-bottom: 1px solid #e2e9e5; }
body.body-3 .navigation.version-white .brand,
body.body-3 .navigation.version-white .brand-2,
body.body-3 .navigation.version-white .nav-link.white { color: #124d3f !important; }
body.body-3 .navigation.version-white .hamburger-line { background-color: #124d3f !important; }
@media (max-width: 991px) {
  .footer-wrap, .footer-wrap.black.waypoint__black, .demo-footer { overflow: clip; }
  .demo-footer .magflowerf-footer { z-index: 0; }
  .demo-footer .footer-top { z-index: 1; }
}
/* Fill the actual hero, including the shorter desktop viewport case. */
body[data-page="home"] .code-embed-10 { height: 100%; }
/* Contact's exported wordmark uses fixed white fills instead of currentColor. */
body.body-3 .navigation .brand svg path[fill="white"] { fill: currentColor; }
