/* ==========================================================================
   Tokens
   ========================================================================== */
@font-face {
  font-family: "Red Hat Display";
  src: url("../assets/fonts/RedHatDisplay.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../assets/fonts/Poppins-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --navy: #002854;
  --blue: #00a0fb;
  --text: #333333;
  --black: #000000;
  --grey: #f0f0f0;
  --steel: #d9dfe6;
  --light: #fafafa;
  --slate: #8094aa;
  --container: 1080px;
  --font: "Red Hat Display", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --font-poppins: "Poppins", var(--font);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; }
.poppins { font-family: var(--font-poppins); font-weight: 500; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-block;
  height: 40.8px;
  padding: 0 17px;
  border: 1px solid transparent;
  font: 600 16px/38px var(--font);
  text-align: center;
  white-space: nowrap;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn--41 { height: 40.8px; line-height: 39px; }
.demo__buttons .btn, .capture .btn, .integration .btn { line-height: 38px; }
.btn--solid { height: 36.8px; padding: 0 16px; line-height: 36px; border: 0; background: var(--blue); color: #fff; }
.btn--solid:hover { background: #0090e3; }
.btn--outline { border-color: var(--blue); color: var(--blue); background: transparent; }
.btn--outline:hover { background: var(--blue); color: #fff; }
.btn--white { border-color: #fff; color: #fff; background: transparent; }
.btn--white:hover { background: #fff; color: var(--navy); }
.btn--blue-on-dark { border-color: #fff; background: var(--blue); color: #fff; }
.btn--blue-on-dark:hover { background: #0090e3; }
.btn--dark { border-color: #000; color: #000; background: transparent; }
.btn--dark:hover { background: #000; color: #fff; }

/* ==========================================================================
   Header
   ========================================================================== */
.topbar { height: 30px; background: var(--navy); }
.topbar__inner { display: flex; justify-content: flex-end; gap: 18px; }
.topbar a { font-size: 12px; font-weight: 600; line-height: 30px; color: #fff; }
.topbar a:hover { text-decoration: underline; }

.header {
  position: relative;
  z-index: 20;
  height: 87px;
  margin-bottom: 1px;
  background: #fff;
  border-bottom: 1px solid var(--blue);
}
.header::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 3px; pointer-events: none;
  background: linear-gradient(#e5e5e5 33.3%, #ebebeb 33.3% 66.6%, #fafafa 66.6%);
}
.header__inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 86px; }
.logo { display: block; margin-left: 3px; }
.logo img { width: 170px; height: 56px; }

.nav__list { display: flex; align-items: center; margin: -3px 1.7px 0 0; }
.nav__item { position: relative; display: flex; align-items: center; margin-left: 29.5px; }
.nav__item:first-child { margin-left: 0; }
.nav__item > a { font-size: 18px; font-weight: 600; line-height: 86px; color: var(--text); }
.nav__item > a:hover { color: var(--blue); }
.chev {
  width: 7.5px; height: 4.25px; margin-left: 10px;
  background: url("../assets/icons/chevron.svg") no-repeat center / 100% 100%;
}
.nav__item:nth-child(4) { margin-left: 26.6px; }
.nav__item--demo { margin-left: 29.4px; }
.nav__item--cta { margin-left: 24.8px; margin-top: 3px; }
.nav__item--search { margin-left: 22px; margin-top: 3px; }
.nav__item > a.btn-trial {
  display: block; height: 36px; padding: 0 12px; white-space: nowrap;
  background: var(--blue); color: #fff;
  font-size: 16px; font-weight: 700; line-height: 36px; text-align: center;
}
.nav__item > a.btn-trial:hover { background: #0090e3; color: #fff; }
.search { display: block; line-height: 0; }

.sub {
  position: absolute; top: 100%; left: -14px; z-index: 30;
  min-width: 220px; padding: 10px 0;
  background: #fff; border-top: 2px solid var(--blue);
  box-shadow: 0 10px 24px rgba(0, 40, 84, .18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.sub a { display: block; padding: 9px 20px; font-size: 15px; font-weight: 600; color: var(--text); }
.sub a:hover { background: var(--grey); color: var(--blue); }
.has-sub:hover > .sub, .has-sub:focus-within > .sub, .has-sub.is-open > .sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav-toggle { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { height: 390px; padding-top: 77px; background: #fff; }
.hero h1 { font-size: 30px; font-weight: 600; line-height: 36px; color: var(--navy); }
.hero p {
  max-width: 510px; margin-top: 15.5px;
  font-size: 20px; font-weight: 500; line-height: 28px; color: var(--navy);
}
.hero .btn { margin-top: 29.5px; }

/* ==========================================================================
   Modern Cloud Printing
   ========================================================================== */
.cloud { height: 1087px; padding-top: 130px; background: var(--grey); }
.cloud__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px; }
.cloud__intro { grid-column: 1 / 3; margin-top: 2px; text-align: center; }
.cloud__intro h2 { font-size: 28px; line-height: 36px; color: var(--black); }
.cloud__sub { margin-top: 12.3px; font-size: 18px; font-weight: 500; line-height: 26px; color: var(--black); }
.cloud__art { margin-top: 40.5px; }

.cloud__features {
  grid-column: 3 / 5;
  display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 60px; row-gap: 59px;
  text-align: center;
}
.feature__icon { display: flex; justify-content: center; align-items: flex-end; }
.feature__icon img { max-width: none; }
.feature__icon img[src*="globe"] { margin-left: 3.4px; }
.feature__icon img[src*="phone"] { margin-left: 3.6px; }
.feature h3 {
  margin-top: 29.4px;
  font-family: var(--font-poppins); font-size: 14px; font-weight: 600; line-height: 19px;
  text-transform: uppercase; color: var(--navy);
}
.feature p { margin: 11.2px -2.25px 0; font-size: 16px; line-height: 22.4px; color: var(--text); }
.feature--r1 .feature__icon { height: 60px; }
.feature--r3 { margin-top: -1.7px; }
.feature--r3 h3 { margin-top: 27.4px; }
.feature--r3 p { margin-top: 11px; }

/* ==========================================================================
   Setup & manage
   ========================================================================== */
.demo { height: 549px; padding-top: 84px; background: #fff; }
.demo__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px; align-items: start; }
.demo__art { grid-column: 1 / 3; width: 510px; }
.demo__copy { grid-column: 3 / 5; margin-top: -2.3px; }
.demo__copy h2 { font-size: 22px; font-weight: 500; line-height: 31px; color: var(--navy); }
.demo__copy p { margin-top: 17.1px; line-height: 28px; color: var(--text); }
.demo__buttons { display: flex; gap: 109.6px; margin-top: 17.2px; margin-left: -1.3px; }
.demo__buttons .btn:nth-child(2) { width: 148px; padding: 0; }

/* ==========================================================================
   Check lists (Modern Print Management / Secure by design)
   ========================================================================== */
.checks { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 60px; }
.checks li { position: relative; padding-left: 47px; margin-right: -2px; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 32px; height: 32px;
  background: url("../assets/icons/check.svg") no-repeat center / 100% 100%;
}
.checks h3 { font-size: 20px; font-weight: 500; line-height: 28px; color: var(--black); }
.checks p { font-size: 16px; line-height: 27.5px; color: var(--text); }
.checks h3 + p { margin-top: 10px; }

.management { height: 752px; padding-top: 58px; background: var(--steel); }
.management__title { margin-top: -0.7px; text-align: center; font-size: 26px; font-weight: 600; line-height: 31px; color: var(--black); }
.checks--lg { margin-top: 67.7px; row-gap: 52.8px; }

.quote {
  height: 106px; margin-top: 32.4px; padding-top: 21px;
  text-align: center; background: #fff;
  border: 1px solid var(--blue); border-radius: 10px;
}
.quote img { margin-inline: auto; }
.quote p {
  width: 551px; max-width: 100%; margin: 9.1px auto 0; text-align: left;
  font-size: 14px; line-height: 19px; color: var(--text);
}

/* ==========================================================================
   IDC
   ========================================================================== */
.idc { height: 290px; padding-top: 42px; background: var(--light); }
.idc__grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px; align-items: start; }
.idc__copy { grid-column: 1 / 4; }
.idc__copy h2 { font-size: 26px; font-weight: 500; line-height: 37px; color: var(--black); }
.idc__copy p { margin-top: 8.7px; line-height: 28px; color: var(--text); }
.idc__copy .btn { margin-top: 28.2px; margin-left: -1px; height: 40px; }
.idc__logo { grid-column: 4; width: 226px; margin-top: -0.5px; }

/* ==========================================================================
   Savings
   ========================================================================== */
.savings { height: 789px; padding-top: 82px; background: var(--slate); color: #fff; }
.savings__grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px; }
.savings__copy { grid-column: 1 / 3; }
.savings h2 { font-size: 28px; line-height: 36px; color: #fff; }
.savings__lead { margin-top: 11.2px; line-height: 28.8px; }
.savings h4 { margin-top: 20.8px; font-size: 18px; font-weight: 700; line-height: 25px; color: #fff; }
.savings__lead + h4 { margin-top: 30.9px; }
.bullets { margin-top: 20.9px; }
.bullets li { position: relative; padding-left: 20px; line-height: 26.5px; }
.bullets li::before {
  content: ""; position: absolute; left: 5.4px; top: 11.9px; width: 4.3px; height: 4.3px;
  border-radius: 50%; background: #fff;
}
.bullets--dark li::before { background: var(--text); }
.savings__note { margin-top: 26.5px; font-weight: 700; line-height: 27.5px; }
.savings__buttons { display: flex; gap: 24px; margin-top: 63.1px; margin-left: -1px; }
.savings__art {
  position: absolute; left: calc(50% + 44.8px); top: -82.8px;
  width: 480px; max-width: none; height: 705px;
}

.savings .btn--white { width: 119px; padding: 0; }

/* ==========================================================================
   Capture
   ========================================================================== */
.capture {
  height: 290px; padding-top: 62px; color: #fff;
  background:
    linear-gradient(90deg, rgb(66, 157, 234), rgba(66, 157, 234, 0)),
    url("../assets/img/capture-bg.png") 0 -195.7px / 100% 681.1px no-repeat,
    #4a8fd3;
}
.capture h2 { font-size: 32px; font-weight: 500; line-height: 40px; color: #fff; }
.capture p { max-width: 580px; margin-top: 13px; line-height: 28px; }
.capture .btn { margin-top: 19.2px; margin-left: -1px; width: 121px; padding: 0; }

/* ==========================================================================
   Clients
   ========================================================================== */
.clients { height: 382px; padding-top: 79.3px; text-align: center; background: #fff; }
.clients h2 { font-size: 22px; font-weight: 600; line-height: 31px; color: var(--black); }
.clients__logos {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px;
  align-items: start; margin-top: 37.2px; text-align: left;
}
.clients__logos img { max-width: none; }
.clients .btn { margin-top: 26px; }

/* ==========================================================================
   Secure by design
   ========================================================================== */
.secure { height: 470px; padding-top: 61px; text-align: center; background: var(--grey); }
.secure h2 { font-size: 22px; font-weight: 500; line-height: 31px; color: var(--black); }
.checks--md { margin-top: 64.5px; row-gap: 64px; text-align: left; }
.checks--md p { font-weight: 500; line-height: 22.4px; color: var(--black); }
.secure .btn { margin-top: 63.6px; }

/* ==========================================================================
   Integrations
   ========================================================================== */
.integrations { height: 841px; padding-top: 67px; text-align: center; background: #fff; }
.integrations h2 { font-size: 26px; font-weight: 500; line-height: 31px; color: var(--black); }
.integrations__lead { margin-top: 9.7px; line-height: 28px; color: var(--text); }
.integrations__cols { display: flex; justify-content: center; gap: 48px; margin-top: 54.2px; }
.integration { width: 276px; text-align: left; }
.integration img { max-width: none; }
.integration h3 { margin-top: 30.8px; font-size: 18px; font-weight: 600; line-height: 25px; color: var(--navy); }
.integration .bullets { margin-top: 21.6px; }
.integration .btn { display: block; width: 120px; margin: 31.9px auto 0; padding: 0; }
.integrations__rule { height: 2px; margin: 52px 0 0; border: 0; background: #7ebec5; }
.partners {
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px;
  margin-top: 59px; text-align: left;
}
.partners img { max-width: none; }

/* ==========================================================================
   Help
   ========================================================================== */
.help { height: 333px; padding-top: 44.2px; background: var(--grey); }
.help h2 { text-align: center; font-size: 26px; font-weight: 500; line-height: 31px; color: var(--navy); }
.help__cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 60px; margin-top: 53.5px; }
.help p { line-height: 28px; color: var(--text); min-height: 56px; }
.help .btn { margin-top: 27.2px; margin-left: -1.2px; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  height: 257px; padding-top: 54px; text-align: center; color: #fff;
  background: linear-gradient(45deg, #00a1fa, #00ed83);
}
.cta h2 { font-size: 22px; font-weight: 600; line-height: 31px; color: #fff; }
.cta p { margin-top: 7.6px; font-size: 17px; line-height: 27px; }
.cta .btn { margin-top: 29.4px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { height: 565px; background: var(--navy); color: #fff; }
.footer a { color: #fff; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 60px; padding-top: 65px; }
.footer h4 { font-size: 19px; font-weight: 700; line-height: 26px; color: #fff; }
.footer__cols h4 + ul { margin-top: 4.5px; }
.footer__cols > div > h4:first-child { margin-top: -0.8px; margin-bottom: 0.8px; }
.footer__h--2 { margin-top: 12.5px; }
.footer li { position: relative; padding-left: 14px; font-size: 15px; font-weight: 700; line-height: 36.5px; }
.footer li::before {
  content: ""; position: absolute; left: 0; top: 13px; width: 5.8px; height: 5.8px;
  border-radius: 50%; background: #fff;
}
.footer li a:hover { text-decoration: underline; }
.footer__legal { margin-top: 72.1px; height: 57px; }
.footer__legal .container { display: flex; gap: 25px; }
.footer__legal a { font-size: 13px; font-weight: 600; line-height: 57px; }
.footer__bottom { height: 78px; }
.footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; height: 78px; }
.footer__bottom p { font-size: 13px; line-height: 1; }
.social { display: flex; gap: 5.1px; }
.footer .social li { padding: 0; line-height: 0; }
.footer .social li::before { display: none; }
.social a {
  display: flex; align-items: center; justify-content: center;
  width: 43.2px; height: 43.2px; border-radius: 50%;
  background: rgba(0, 0, 0, .2);
}
.social a:hover { background: var(--blue); }
.social img { max-width: none; }

/* ==========================================================================
   Responsive (the desktop design is a 1080px container; below that it reflows)
   ========================================================================== */
.logo img { mix-blend-mode: multiply; }

/* ---- Tablet & below: sections size to their content ---- */
@media (max-width: 1139px) {
  .container { padding-inline: 24px; }
  .hero, .cloud, .demo, .management, .idc, .savings, .capture,
  .clients, .secure, .integrations, .help, .cta, .footer { height: auto; }

  .hero { padding-block: 56px 64px; }
  .cloud { padding-block: 72px 64px; }
  .demo, .idc, .clients, .secure, .integrations, .help { padding-block: 64px; }
  .management { padding-block: 56px 64px; }
  .savings { padding-block: 64px; }
  .capture { padding-block: 56px; }
  .cta { padding-block: 56px; }
  .footer__cols { padding-top: 56px; }
  .footer__legal { margin-top: 40px; }

  .savings__grid { grid-template-columns: minmax(0, 1fr); }
  .savings__copy { grid-column: 1; }
  .savings__art { position: static; width: 480px; max-width: 100%; height: auto; margin: 40px auto 0; }
  .management__title { margin-top: 0; }

  /* header collapses to the hamburger menu */
  .header { height: 72px; }
  .header__inner { height: 71px; }
  .logo img { width: 150px; height: auto; }
  .nav-toggle {
    display: block; width: 44px; height: 44px; margin-right: -10px; padding: 10px;
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle span { display: block; height: 2px; margin: 6px 0; background: var(--navy); transition: transform .2s, opacity .2s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    max-height: calc(100vh - 110px); overflow-y: auto;
    background: #fff; border-bottom: 1px solid var(--blue);
    box-shadow: 0 12px 24px rgba(0, 40, 84, .15);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; margin: 0; padding: 4px 24px 20px; }
  .nav__item, .nav__item:nth-child(4), .nav__item--demo {
    flex-wrap: wrap; margin: 0; border-bottom: 1px solid #e6e9ee;
  }
  .nav__item > a { flex: 1; font-size: 17px; line-height: 52px; }
  .nav__item > a.btn-trial { flex: none; }
  .chev { width: 44px; height: 52px; margin: 0; background-size: 9px 5px; background-repeat: no-repeat; cursor: pointer; }
  .sub { position: static; display: none; width: 100%; min-width: 0; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 8px 12px; }
  .has-sub.is-open > .sub { display: block; }
  .has-sub:hover > .sub { opacity: 1; visibility: visible; }
  .nav__item--cta, .nav__item--cta:nth-child(n) { margin: 16px 0 0; border: 0; }
  .nav__item--search { display: none; }
}

/* ---- Tablet / large phone ---- */
@media (max-width: 960px) {

  .hero p { max-width: none; }

  .cloud__grid, .demo__grid, .idc__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .cloud__intro, .cloud__features, .demo__art, .demo__copy, .idc__copy, .idc__logo { grid-column: 1; }
  .cloud__art, .demo__art { margin-inline: auto; }
  .demo__art { width: 100%; max-width: 510px; height: auto; }
  .cloud__features { column-gap: 32px; row-gap: 48px; }
  .feature--r3, .feature--r3 h3, .feature--r3 p { margin-top: 0; }
  .feature h3 { margin-top: 24px; }
  .feature p { margin-top: 10px; }

  .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; column-gap: 32px; }
  .checks--lg, .checks--md { margin-top: 40px; }
  .checks li { margin-right: 0; }
  .help__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; column-gap: 32px; }
  .help__cols p { min-height: 0; }
  .help .btn { margin-top: 20px; }

  .quote { height: auto; padding: 22px 24px 20px; }
  .quote p { width: auto; }

  .idc__logo { width: 180px; }

  .clients__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
  .clients__logos li { display: flex; align-items: center; justify-content: center; }
  .clients__logos img { max-width: 100%; height: auto; max-height: 70px; width: auto; }
  .clients .btn { margin-top: 36px; }

  .integrations__cols { gap: 48px 40px; margin-top: 40px; flex-wrap: wrap; }
  .integration img, .partners img { max-width: 100%; height: auto; }
  .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
  .partners li { display: flex; justify-content: center; }
  .partners img { width: 225px; }
  .integrations__rule { margin-top: 48px; }
  .integration .btn { margin-top: 24px; }

  .demo__buttons { gap: 16px; flex-wrap: wrap; margin-left: 0; }
  .demo__buttons .btn:nth-child(2) { width: auto; padding: 0 17px; }
  .savings__buttons { flex-wrap: wrap; gap: 16px; margin-top: 40px; margin-left: 0; }

  .capture {
    padding-block: 56px 0;
    background:
      linear-gradient(90deg, rgba(66, 157, 234, .9), rgba(66, 157, 234, .15)),
      url("../assets/img/capture-bg.png") 78% 50% / cover no-repeat,
      #429dea;
  }
  .capture p { max-width: 520px; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .footer__bottom-inner { height: 78px; }
}

/* ---- Phones ---- */
@media (max-width: 600px) {
  body { font-size: 15px; }
  .container { padding-inline: 20px; }
  .topbar__inner { gap: 14px; justify-content: center; }

  .hero { padding-block: 40px 48px; }
  .hero h1 { font-size: 27px; line-height: 33px; }
  .hero p { margin-top: 14px; font-size: 18px; line-height: 26px; }
  .hero .btn { margin-top: 24px; }

  .cloud { padding-block: 48px; }
  .cloud__intro h2 { font-size: 25px; line-height: 32px; }
  .cloud__sub { font-size: 16px; line-height: 23px; }
  .cloud__art { margin-top: 28px; }
  .cloud__grid { row-gap: 36px; }
  .cloud__features { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .feature p { max-width: 340px; margin-inline: auto; }

  .demo, .idc, .clients, .secure, .integrations, .help { padding-block: 48px; }
  .management { padding-block: 48px; }
  .savings { padding-block: 48px; }
  .capture { padding-block: 44px 0; }
  .cta { padding-block: 48px; }

  .demo__grid { row-gap: 28px; }
  .demo__copy h2, .idc__copy h2 { font-size: 21px; line-height: 29px; }
  .management__title, .integrations h2, .help h2 { font-size: 23px; line-height: 29px; }
  .clients h2, .secure h2 { font-size: 21px; line-height: 28px; }
  .savings h2 { font-size: 25px; line-height: 32px; }
  .capture h2 { font-size: 27px; line-height: 34px; }
  .cta h2 { font-size: 21px; line-height: 28px; }

  .checks, .help__cols { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .checks h3 { font-size: 18px; line-height: 25px; }
  .checks p { font-size: 15px; line-height: 24px; }
  .checks--lg, .checks--md { margin-top: 32px; }
  .secure .btn { margin-top: 36px; }

  .quote { padding: 20px 18px 18px; }
  .quote p { font-size: 13.5px; line-height: 19px; }

  .idc__logo { width: 150px; }

  .clients__logos { gap: 24px 20px; }
  .clients__logos img { max-height: 54px; }

  .integrations__lead { margin-top: 12px; }
  .integrations__cols { flex-direction: column; align-items: center; gap: 44px; }
  .integration { width: 100%; max-width: 300px; text-align: center; }
  .integration img { margin-inline: auto; }
  .integration .bullets { display: inline-block; text-align: left; }
  .partners { gap: 20px 12px; }
  .partners img { width: 100%; max-width: 160px; }

  .help__cols p { line-height: 25px; }

  .savings__lead, .savings__note { line-height: 26px; }
  .savings h4 { font-size: 17px; }
  .savings__buttons .btn { flex: 1 1 180px; width: auto; }

  .capture p { font-size: 15px; line-height: 25px; }
  .capture { padding-bottom: 210px;
    background:
      linear-gradient(180deg, rgba(66, 157, 234, 1) 0, rgba(66, 157, 234, 1) 52%, rgba(66, 157, 234, 0) 100%),
      url("../assets/img/capture-bg.png") 82% 100% / auto 330px no-repeat,
      #429dea;
  }

  .cta p { font-size: 15px; line-height: 24px; }
  .cta p br { display: none; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; row-gap: 28px; padding-top: 44px; }
  .footer h4 { font-size: 17px; line-height: 24px; }
  .footer__cols h4 + ul { margin-top: 8px; }
  .footer__h--2 { margin-top: 24px; }
  .footer li { padding-left: 14px; font-size: 14px; line-height: 20px; padding-block: 6px; }
  .footer li::before { top: 13px; }
  .footer__legal { margin-top: 36px; height: auto; }
  .footer__legal .container { flex-wrap: wrap; gap: 8px 22px; }
  .footer__legal a { line-height: 24px; }
  .footer__bottom { height: auto; }
  .footer__bottom-inner { flex-direction: column; justify-content: center; gap: 18px; height: auto; padding-block: 28px 36px; }
  .footer__bottom p { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}