/* BusinessAtNight / AtNightX: V20.11 optical-symmetry pass.
   Founder source: 12 November 2026 four-page Canva alignment reference.
   The headless website remains the source of UI and behavior.
   This file changes homepage-only alignment and content grouping.
   It does NOT change any media, copy, font size, brand effects, colors,
   links, forms, navigation, motion or other pages. */

/* 1. Exact common X axis for the pre-existing measured Canva title. */
html body.home.ban-home-videos-v20 #ban-home-hero .ban-v207-hero-overlay.ban-v210-canva-title {
  left: 50% !important;
}

/* 2. Multiplication chapter: title, explanation, and chips share one axis.
   Keep the original responsive grid/flex behavior inside the chip row. */
html body.home.ban-home-videos-v20 #what-the-x-means {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 #what-the-x-means > .eyebrow {
  justify-content: center !important;
}
html body.home.ban-home-videos-v20 #what-the-x-means > p {
  margin: 12px auto 0 !important;
  width: min(760px, 100%) !important;
  text-align: center !important;
  text-wrap: pretty;
}
html body.home.ban-home-videos-v20 #what-the-x-means .x-multipliers {
  justify-content: center !important;
  width: 100%;
  gap: 10px !important;
}

/* 3. Public Ask AI chapter: source, statement and tools are one composition. */
html body.home.ban-home-videos-v20 #ask-ai > .section-heading {
  width: min(820px,100%) !important;
  text-align: center !important;
  margin: 0 auto 28px !important;
}
html body.home.ban-home-videos-v20 #ask-ai .section-heading > .eyebrow {
  justify-content: center !important;
}
html body.home.ban-home-videos-v20 #ask-ai .section-heading > p {
  margin-inline: auto !important;
}
html body.home.ban-home-videos-v20 #ask-ai > .button-row {
  justify-content: center !important;
  align-items: center !important;
  margin-inline: auto !important;
}

/* 4. Mission budget: prevent the intro's supporting copy from drifting to
   the right of the headline. The existing planner card is left untouched. */
html body.home.ban-home-videos-v20 #budget-home-section .budget-section-intro {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  width: min(960px, 100%) !important;
  margin: 0 auto clamp(22px,2.8vw,36px) !important;
  gap: 12px !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 #budget-home-section .budget-section-intro > div {
  width: 100%;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 #budget-home-section .budget-section-intro .eyebrow {
  justify-content: center !important;
}
html body.home.ban-home-videos-v20 #budget-home-section .budget-section-intro h2 {
  max-width: 860px !important;
  margin: 12px auto 0 !important;
  text-align: center !important;
  text-wrap: balance;
}
html body.home.ban-home-videos-v20 #budget-home-section .budget-section-intro > p {
  max-width: 730px !important;
  margin: 0 auto !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* 5. Three-card system: centered heading with symmetric card columns. */
html body.home.ban-home-videos-v20 #difference .section-heading {
  width: min(920px,100%) !important;
  margin: 0 auto clamp(22px,3.2vw,44px) !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 #difference .section-heading .eyebrow {
  justify-content: center !important;
}
html body.home.ban-home-videos-v20 #difference .section-heading > p {
  margin: 0 auto !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 #difference .feature-grid {
  justify-items: stretch !important;
  align-items: stretch !important;
}

/* 6. The platform chapter is intentionally two-sided. Symmetry means
   balanced columns and an internal centerline in each, not a mirrored image. */
html body.home.ban-home-videos-v20 main > section.panel-dark > .split-layout {
  grid-template-columns: minmax(0,.98fr) minmax(0,1.02fr) !important;
  align-items: center !important;
  column-gap: clamp(22px,3.5vw,52px) !important;
}
html body.home.ban-home-videos-v20 main > section.panel-dark .section-heading {
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 main > section.panel-dark .section-heading .eyebrow {
  justify-content: center !important;
}
html body.home.ban-home-videos-v20 main > section.panel-dark .section-heading > p {
  margin: 0 auto !important;
  max-width: 510px !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 main > section.panel-dark .section-heading .button-row {
  justify-content: center !important;
  align-items: center !important;
}
html body.home.ban-home-videos-v20 main > section.panel-dark .preview-stack {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

/* 7. Final conversion section: statement, explanation and CTA share an axis.
   No changes to CTA destination or interaction. */
html body.home.ban-home-videos-v20 .end-panel .end-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(17px,2.4vw,32px) !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 .end-panel .end-inner > div {
  width: min(900px,100%) !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 .end-panel .end-inner .eyebrow {
  justify-content: center !important;
}
html body.home.ban-home-videos-v20 .end-panel .end-inner h2,
html body.home.ban-home-videos-v20 .end-panel .end-inner p {
  margin-inline: auto !important;
  text-align: center !important;
}
html body.home.ban-home-videos-v20 .end-panel .end-inner .micro-note {
  text-align: center !important;
  margin: 10px auto 0 !important;
}

@media (max-width: 940px) {
  html body.home.ban-home-videos-v20 main > section.panel-dark > .split-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(22px,4vw,40px) !important;
  }
  html body.home.ban-home-videos-v20 main > section.panel-dark .section-heading {
    max-width: 680px !important;
  }
  html body.home.ban-home-videos-v20 main > section.panel-dark .preview-stack {
    max-width: 740px !important;
  }
}
@media (max-width: 640px) {
  html body.home.ban-home-videos-v20 #ask-ai > .button-row {
    gap: 9px !important;
  }
  html body.home.ban-home-videos-v20 #budget-home-section .budget-section-intro {
    margin-bottom: 20px !important;
    gap: 12px !important;
  }
  html body.home.ban-home-videos-v20 .end-panel .end-inner {
    padding-inline: 21px !important;
  }
}