/* A single spacing rhythm across the homepage; dashboard spacing is separate. */
.markit-home {
  --home-gutter: 48px;
  --home-section-gap: 80px;
  --home-content-gap: 24px;
  --home-panel-padding: 32px;
}
.markit-home > main {
  display: flex;
  flex-direction: column;
  gap: var(--home-section-gap);
  padding-bottom: var(--home-section-gap);
}
.markit-home .markit-home-hero,
.markit-home .markit-home-trial-banner,
.markit-home #how-it-works,
.markit-home #pricing {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--home-gutter);
  padding-block: 0;
}
.markit-home .markit-home-hero { padding-top: 144px; }
.markit-home .markit-home-hero > div { gap: 48px; }
.markit-home .markit-home-hero h1 + p { margin-top: var(--home-content-gap); }
.markit-home .markit-home-hero aside { padding: var(--home-panel-padding); }
.markit-home .markit-home-hero aside > div { padding-bottom: var(--home-content-gap); }
.markit-home .markit-home-hero aside > ul { padding-block: var(--home-content-gap); }
.markit-home .markit-home-hero aside > ul > li + li { margin-top: var(--home-content-gap); }
.markit-home .markit-home-hero aside > p { padding-top: var(--home-content-gap); }
.markit-home .markit-home-trial-banner > div { padding: var(--home-content-gap) var(--home-panel-padding); gap: var(--home-content-gap); }
.markit-home .markit-home-marquee { padding-block: 16px; }
.markit-home #pricing > div.text-center { margin-bottom: 48px; }
.markit-home #pricing > div.rounded-3xl { margin-bottom: 0; padding: var(--home-panel-padding); }
.markit-home > footer { padding-block: 48px; }
.markit-home > footer > div { width: 100%; max-width: 1280px; padding-inline: var(--home-gutter); }
@media (max-width: 1023px) {
  .markit-home { --home-gutter: 32px; --home-section-gap: 64px; }
  .markit-home .markit-home-hero { padding-top: 112px; }
}
@media (max-width: 767px) {
  .markit-home { --home-gutter: 20px; --home-section-gap: 48px; --home-panel-padding: 24px; }
  .markit-home .markit-home-hero > div { gap: 32px; }
  .markit-home #pricing > div.text-center { margin-bottom: 32px; }
  .markit-home > footer { padding-block: 32px; }
}

.markit-home .markit-home-nav-content { padding-inline: var(--home-gutter); }
.markit-home .markit-home-mobile-menu { padding: 24px var(--home-gutter); gap: 8px; }
.markit-home .markit-home-mobile-menu > a,
.markit-home .markit-home-mobile-menu button { min-height: 44px; display: flex; align-items: center; }
.markit-home #pricing { scroll-margin-top: 104px; }