:root{
  --layout-max: 1440px;
  --layout-wide: 1560px;
  --layout-gutter: 20px;

  --section-space-xl: 104px;
  --section-space-lg: 80px;
  --section-space-md: 64px;
  --section-space-sm: 44px;
  --section-space-xs: 28px;

  --stack-2xs: 8px;
  --stack-xs: 12px;
  --stack-sm: 16px;
  --stack-md: 24px;
  --stack-lg: 32px;
  --stack-xl: 48px;

  --grid-gap-sm: 14px;
  --grid-gap-md: 18px;
  --grid-gap-lg: 24px;

  --content-narrow: 760px;
  --content-text: 860px;

  --radius-layout: 24px;
}


.container,
.layout-container,
.section__inner,
.hero__inner,
.site-footer__inner,
.site-header__inner{
  width: min(100%, var(--layout-max));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.container--wide,
.layout-container--wide{
  width: min(100%, var(--layout-wide));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.container--narrow,
.layout-container--narrow{
  width: min(100%, var(--content-narrow));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.container--text,
.layout-container--text{
  width: min(100%, var(--content-text));
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}


main,
#content{
  display: block;
  min-width: 0;
}

main > section:first-child,
#content > section:first-child{
  margin-top: 0;
}


.section{
  position: relative;
  padding-block: var(--section-space-lg);
}

.section--xl{
  padding-block: var(--section-space-xl);
}

.section--lg{
  padding-block: var(--section-space-lg);
}

.section--md{
  padding-block: var(--section-space-md);
}

.section--sm{
  padding-block: var(--section-space-sm);
}

.section--xs{
  padding-block: var(--section-space-xs);
}

.section--flush-top{
  padding-top: 0;
}

.section--flush-bottom{
  padding-bottom: 0;
}

.section + .section{
  margin-top: 0;
}


.hero{
  position: relative;
  padding-top: 56px;
  padding-bottom: 64px;
}

.hero--tight{
  padding-top: 40px;
  padding-bottom: 48px;
}

.hero--spacious{
  padding-top: 72px;
  padding-bottom: 84px;
}


.section__inner{
  display: block;
  min-width: 0;
}

.section__inner--narrow{
  width: min(100%, var(--content-narrow));
}

.section__inner--text{
  width: min(100%, var(--content-text));
}

.section__inner--two{
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 460px);
  gap: 28px;
  align-items: center;
}

.section__inner--twoWide{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .95fr);
  gap: 32px;
  align-items: center;
}

.section__inner--split{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: start;
}

.section__inner--three{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap-md);
  align-items: start;
}


.content-narrow{
  max-width: var(--content-narrow);
}

.content-text{
  max-width: var(--content-text);
}

.content-measure{
  max-width: 68ch;
}


.stack-2xs > * + *{
  margin-top: var(--stack-2xs);
}

.stack-xs > * + *{
  margin-top: var(--stack-xs);
}

.stack-sm > * + *{
  margin-top: var(--stack-sm);
}

.stack-md > * + *{
  margin-top: var(--stack-md);
}

.stack-lg > * + *{
  margin-top: var(--stack-lg);
}

.stack-xl > * + *{
  margin-top: var(--stack-xl);
}


.section__eyebrow{
  margin: 0 0 10px;
}

.section__title{
  margin: 0 0 14px;
}

.section__lead{
  margin: 0;
}

.section__text{
  margin: 16px 0 0;
}

.section__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}


.grid{
  display: grid;
  gap: var(--grid-gap-md);
}

.grid--sm{
  gap: var(--grid-gap-sm);
}

.grid--md{
  gap: var(--grid-gap-md);
}

.grid--lg{
  gap: var(--grid-gap-lg);
}

.grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--auto-2{
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid--auto-3{
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.grid--auto-4{
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}


.block-grid{
  margin-top: 28px;
}

.card-grid{
  display: grid;
  gap: var(--grid-gap-md);
  margin-top: 28px;
}

.card-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.card-grid--3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card-grid--4{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-grid--auto{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}


.media-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 28px;
  align-items: center;
}

.media-layout--reverse{
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
}

.media-layout__copy,
.media-layout__media{
  min-width: 0;
}


.flex-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.flex-row--between{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.flex-wrap{
  flex-wrap: wrap;
}

.flex-col{
  display: flex;
  flex-direction: column;
  gap: 12px;
}


.surface-pad-sm{
  padding: 16px;
}

.surface-pad-md{
  padding: 20px;
}

.surface-pad-lg{
  padding: 24px;
}

.surface-pad-xl{
  padding: 32px;
}


.mt-0{ margin-top: 0 !important; }
.mt-8{ margin-top: 8px !important; }
.mt-12{ margin-top: 12px !important; }
.mt-16{ margin-top: 16px !important; }
.mt-20{ margin-top: 20px !important; }
.mt-24{ margin-top: 24px !important; }
.mt-28{ margin-top: 28px !important; }
.mt-32{ margin-top: 32px !important; }
.mt-40{ margin-top: 40px !important; }
.mt-48{ margin-top: 48px !important; }

.mb-0{ margin-bottom: 0 !important; }
.mb-8{ margin-bottom: 8px !important; }
.mb-12{ margin-bottom: 12px !important; }
.mb-16{ margin-bottom: 16px !important; }
.mb-20{ margin-bottom: 20px !important; }
.mb-24{ margin-bottom: 24px !important; }
.mb-28{ margin-bottom: 28px !important; }
.mb-32{ margin-bottom: 32px !important; }
.mb-40{ margin-bottom: 40px !important; }
.mb-48{ margin-bottom: 48px !important; }


.hero + .section{
  padding-top: 72px;
}

.section .block-grid:first-child,
.section .grid:first-child,
.section .card-grid:first-child{
  margin-top: 24px;
}


.section,
.section__inner,
.hero,
.hero__inner,
.grid,
.card-grid,
.media-layout,
.section__inner--two,
.section__inner--twoWide,
.section__inner--split,
.section__inner--three{
  min-width: 0;
}

.section__inner > *,
.hero__inner > *,
.grid > *,
.card-grid > *,
.media-layout > *{
  min-width: 0;
}


@media (max-width: 1280px){
  :root{
    --layout-max: 1360px;
    --layout-wide: 1460px;
    --layout-gutter: 18px;
  }
}

@media (max-width: 1180px){
  :root{
    --layout-gutter: 18px;
    --section-space-xl: 88px;
    --section-space-lg: 72px;
    --section-space-md: 56px;
  }

  .section__inner--two,
  .section__inner--twoWide,
  .media-layout{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .section__inner--three{
    grid-template-columns: 1fr 1fr;
  }

  .grid--4,
  .card-grid--4{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px){
  :root{
    --layout-max: 100%;
    --layout-wide: 100%;
    --layout-gutter: 16px;
    --section-space-xl: 72px;
    --section-space-lg: 60px;
    --section-space-md: 48px;
    --section-space-sm: 36px;
  }

  .hero{
    padding-top: 40px;
    padding-bottom: 46px;
  }

  .section__inner--split,
  .section__inner--three,
  .grid--3,
  .grid--4,
  .card-grid--3,
  .card-grid--4{
    grid-template-columns: 1fr;
  }

  .grid--2,
  .card-grid--2{
    grid-template-columns: 1fr;
  }

  .block-grid,
  .card-grid{
    margin-top: 24px;
  }

  .section__actions{
    margin-top: 20px;
  }
}

@media (max-width: 760px){
  :root{
    --layout-gutter: 14px;
    --section-space-xl: 56px;
    --section-space-lg: 44px;
    --section-space-md: 36px;
    --section-space-sm: 28px;
    --section-space-xs: 20px;

    --stack-md: 20px;
    --stack-lg: 24px;
    --stack-xl: 32px;
  }

  .hero{
    padding-top: 28px;
    padding-bottom: 34px;
  }

  .section__title{
    margin-bottom: 12px;
  }

  .section__text{
    margin-top: 12px;
  }

  .block-grid,
  .card-grid,
  .section .grid:first-child{
    margin-top: 20px;
  }

  .surface-pad-lg{
    padding: 20px;
  }

  .surface-pad-xl{
    padding: 24px;
  }
}

@media (max-width: 480px){
  :root{
    --layout-gutter: 12px;
    --section-space-xl: 44px;
    --section-space-lg: 36px;
    --section-space-md: 30px;
    --section-space-sm: 24px;
    --section-space-xs: 16px;
  }

  .hero{
    padding-top: 22px;
    padding-bottom: 28px;
  }

  .section__actions{
    gap: 10px;
    margin-top: 18px;
  }

  .surface-pad-md{
    padding: 16px;
  }

  .surface-pad-lg{
    padding: 18px;
  }

  .surface-pad-xl{
    padding: 20px;
  }
}