body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.Page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.Page-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.Page-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-top: var(--masthead-height);
}

main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1 1 auto;
}

.Page-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1 1 auto;
}

.Page-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  flex: 1 1 auto;
}

section {
  flex: 1 1 auto;
  padding: var(--step-8) var(--step-4);
}

.Page-container {
  width: 100%;
  max-width: var(--shell-width);
  margin: 0 auto;
}


.Masthead {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  background: var(--color-surface);
  border-bottom: var(--rule-width) solid var(--line-hair);
  box-shadow: var(--shade-low);
}

.Masthead-wrapper {
  width: 100%;
}

.Masthead-container {
  display: flex;
  align-items: center;
  gap: var(--step-3);
  width: 100%;
  max-width: var(--shell-width);
  margin: 0 auto;
  min-height: var(--masthead-height);
  padding: 0 var(--step-3);
}

.Masthead-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.Masthead-logo img {
  height: 2rem;
  width: auto;
}

.Masthead-nav {
  margin-left: auto;
}

.Masthead-list {
  display: flex;
  align-items: center;
}

.Masthead-link {
  font-family: var(--face-body);
  font-size: var(--type-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.Masthead-link:hover {
  color: var(--color-accent);
  text-decoration: none;
}

.Masthead-call {
  font-family: var(--face-display);
  font-size: var(--type-lg);
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
  flex: 0 0 auto;
}

.Masthead-toggle {
  margin-left: auto;
}


.Section-wrapper {
  width: 100%;
}

.Section-container {
  width: 100%;
  max-width: var(--shell-width);
  margin: 0 auto;
}

.Section-head {
  max-width: 44rem;
  margin-bottom: var(--step-5);
}

.Section-kicker {
  font-size: var(--type-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--step-1);
}

.Section-title {
  margin-bottom: var(--step-2);
}

.Section-lead {
  color: var(--color-ink-soft);
  max-width: 40rem;
}

.Section--tinted {
  background: var(--color-surface-alt);
}

.Section--deep {
  background: var(--color-night);
  color: var(--color-ink-invert);
}

.Section--deep h2,
.Section--deep h3 {
  color: var(--color-ink-invert);
}

.Section--deep .Section-lead {
  color: rgba(255, 255, 255, 0.78);
}


.Grid {
  display: grid;
  gap: var(--step-3);
}

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

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

.Grid--split {
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--step-6);
  align-items: start;
}

.Divider {
  display: none;
}


.u-block { display: block; }
.u-flex { display: flex; }
.u-wrap { flex-wrap: wrap; }
.u-column { flex-direction: column; }
.u-middle { align-items: center; }
.u-center { text-align: center; }
.u-gap1 { gap: var(--step-1); }
.u-gap2 { gap: var(--step-2); }
.u-gap3 { gap: var(--step-3); }
.u-full { width: 100%; }
.u-mt1 { margin-top: var(--step-1); }
.u-mt2 { margin-top: var(--step-2); }
.u-mt3 { margin-top: var(--step-3); }
.u-mt4 { margin-top: var(--step-4); }
.u-mb1 { margin-bottom: var(--step-1); }
.u-mb2 { margin-bottom: var(--step-2); }
.u-mb3 { margin-bottom: var(--step-3); }
.u-lead { font-size: var(--type-lg); line-height: 1.6; }
.u-small { font-size: var(--type-sm); }
.u-fine { font-size: var(--type-xs); }
.u-muted { color: var(--color-ink-muted); }
.u-soft { color: var(--color-ink-soft); }
.u-serif { font-family: var(--face-display); }
.u-upper { text-transform: uppercase; letter-spacing: 0.14em; }
.u-bold { font-weight: 600; }
.u-hidden { display: none; }


@media (max-width: 1024px) {
  :root {
    --type-3xl: 3rem;
    --type-2xl: 1.875rem;
  }
  .Grid--four {
    grid-template-columns: repeat(2, 1fr);
  }
  .Grid--split {
    grid-template-columns: 1fr;
    gap: var(--step-4);
  }
  .Masthead-call {
    font-size: var(--type-md);
  }
  section {
    padding: var(--step-6) var(--step-3);
  }
}


@media (max-width: 768px) {
  :root {
    --type-3xl: 2.5rem;
    --masthead-height: 4rem;
  }
  section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--step-5) var(--step-2);
  }
  .Grid--three,
  .Grid--four {
    grid-template-columns: 1fr;
  }
  .Masthead-nav {
    margin-left: 0;
  }
  .Masthead-call {
    font-size: var(--type-sm);
  }
  .Masthead-toggle {
    margin-left: auto;
  }
}


.Section {
  position: relative;
}

[id] {
  scroll-margin-top: 5.5rem;
}

.Page-mainWrapper {
  width: 100%;
}

.Masthead-item {
  display: block;
}

.Masthead-overlay {
  pointer-events: auto;
}

.InfoZone,
.ServicesHub,
.ProductBazaar,
.MethodSpace,
.PricingCenter,
.HelpStation {
  position: relative;
}