/* Shared visual-system refinements for the DWEL staging review. */
:root {
  --ink: #102d2a;
  --dwel-reading-width: 760px;
  --dwel-mobile-gutter: 20px;
}

main h1,
main h2,
main h3,
main .h2 {
  color: var(--ink);
  text-wrap: balance;
}

main h1,
main h2,
main .h2 {
  letter-spacing: -.03em;
}

.page-marketing main h1 {
  font-size: 56px !important;
  line-height: 1.07 !important;
}

.page-utility main h1,
.page-article main h1,
.page-legal main h1 {
  font-size: 48px !important;
  line-height: 1.08 !important;
}

.page-contact main h2 {
  font-size: 24px !important;
  line-height: 1.2 !important;
}

.page-faq main h2 {
  font-size: 36px !important;
  line-height: 1.14 !important;
}

.page-marketing main h2,
.page-marketing main .h2 {
  font-size: 42px !important;
  line-height: 1.12 !important;
}

.page-marketing main .od h2,
.page-marketing main .oc h2 {
  font-size: 48px !important;
  line-height: 1.1 !important;
}

.page-marketing main .qa h2 {
  font-size: 28px !important;
  line-height: 1.2 !important;
}

.eyebrow,
.rl,
.tag,
.od-eyebrow,
.oc-eyebrow,
.uc-eyebrow {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  line-height: 1.4 !important;
}

.page-marketing main .body {
  color: #3e5551;
  line-height: 1.6;
}

/* Keep every value in the evidence bands optically consistent. Arial supplies
   lining figures, so numbers, currency signs and abbreviated units share a
   baseline without one-off positioning adjustments. */
.metrics b,
.metrics-feature b,
.metrics2 b {
  font-family: Arial, sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.035em;
}

.metrics span,
.metrics-feature span,
.metrics2 span,
.metrics em,
.metrics-feature em,
.metrics2 em,
.metrics-feature a,
.metrics2 a {
  font-weight: 400;
}

/* Maintain a deliberate feature scale rather than allowing feature headings
   to become larger than the page title. */
.od > p {
  max-width: 680px !important;
}

.uc {
  padding-top: 88px !important;
  padding-bottom: 88px !important;
}

.page-company main p[style*="max-width: 860px"] {
  max-width: 680px !important;
}

.page-contact .ct-wrap {
  max-width: 1200px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}

.page-resources main a[href^="/blog/"][style*="background: #E8D5A9"] {
  background: #058284 !important;
  color: #fff !important;
}

/* Company advisor groups read as three complete categories instead of three
   uneven vertical columns. */
.page-company .ad-grid {
  display: flex !important;
  flex-direction: column;
  gap: 36px !important;
}

.page-company .ad-col {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px !important;
}

.page-company .ad-g {
  grid-column: 1 / -1;
  text-align: left !important;
  padding: 0 0 10px !important;
}

/* Shared header interaction sizes. */
.site .mob summary,
.sheet a {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* Footer links retain the established design while providing intentional
   mobile wrapping and touch areas. */
.f-note {
  line-height: 1.5;
}

@media (max-width: 900px) {
  .page-marketing main h1,
  .page-utility main h1,
  .page-article main h1,
  .page-legal main h1 {
    font-size: 40px !important;
    line-height: 1.08 !important;
  }

  .page-marketing main h2,
  .page-marketing main .h2,
  .page-utility main h2,
  .page-article main h2 {
    font-size: 30px !important;
    line-height: 1.14 !important;
  }

  .page-contact main h2 {
    font-size: 22px !important;
  }

  .page-faq main h2 {
    font-size: 30px !important;
  }

  .page-marketing main .od h2,
  .page-marketing main .oc h2 {
    font-size: 32px !important;
  }

  .page-marketing main .qa h2 {
    font-size: 28px !important;
  }

  main [style*="max-width: 1200px"] {
    padding-left: var(--dwel-mobile-gutter) !important;
    padding-right: var(--dwel-mobile-gutter) !important;
  }

  .uc,
  .metrics,
  .metrics2,
  .metrics-feature,
  .co-design,
  .od {
    box-sizing: border-box !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: var(--dwel-mobile-gutter) !important;
    padding-right: var(--dwel-mobile-gutter) !important;
  }

  .page-employers main section > .metrics2,
  .page-employers main section > [style*="width: 100vw"] {
    margin-left: calc(-1 * var(--dwel-mobile-gutter)) !important;
    margin-right: calc(-1 * var(--dwel-mobile-gutter)) !important;
  }

  .uc {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  .page-contact .ct-wrap {
    padding-left: var(--dwel-mobile-gutter) !important;
    padding-right: var(--dwel-mobile-gutter) !important;
  }

  main a[aria-label^="Play video"] {
    height: clamp(260px, 70vw, 420px) !important;
    min-height: 260px;
  }

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

@media (max-width: 700px) {
  footer.f .in {
    column-gap: 24px !important;
    row-gap: 30px !important;
  }

  footer.f .in a {
    min-height: 44px;
    padding: 10px 0 !important;
    display: flex;
    align-items: center;
  }

  footer.f .f-legal {
    gap: 14px !important;
  }

  .f-legal > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px !important;
    width: 100%;
  }

  .f-legal strong {
    grid-column: 1 / -1;
    margin-bottom: 4px;
  }

  .f-legal a,
  .dwel-privacy-choice {
    min-height: 44px;
    display: flex !important;
    align-items: center;
  }

  .page-company .ad-col {
    grid-template-columns: 1fr;
  }
}