/*
 * Home style.css
 */

.section {
  padding:68px 0;
  background:#fff
}
.section-alt {
  background:var(--background);
  border-block:1px solid var(--border-light)
}
.section-heading {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:50px;
  align-items:normal;
  margin-bottom:34px
}
.section-heading p,
p {
  color:var(--muted)
}
.value-grid,
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.value-grid article,
.feature-grid article {
  background:#fff;
  border:1px solid var(--border);
  padding:23px;
  min-height:190px
}
.value-grid article:hover,
.feature-grid article:hover {
  border-color:#b9c9d8
}
.number {
  color:var(--blue);
  font-size:12px;
  font-weight:700;
  margin-bottom:23px
}
h3 {
  color:#30485f;
  line-height:1.3;
  font-size:18px;
  margin:0 0 10px
}
.value-grid p,
.feature-grid p {
  font-size:14px;
  margin:0
}
.split {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
  align-items:center
}
.split p {
  max-width:700px
}
.check-list {
  padding:0;
  margin:22px 0 0;
  list-style:none
}
.check-list li {
  padding:8px 0 8px 25px;
  border-bottom:1px solid var(--border-light);
  position:relative;
  color:var(--muted)
}
.check-list li:before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--blue);
  font-weight:700
}
.callout {
  background:var(--navy);
  color:#fff;
  padding:31px;
  border-left:5px solid var(--blue)
}
.callout-label {
  color:#b9d5ed;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.4px;
  margin-bottom:16px
}
.callout h3 {
  color:#fff;
  font-size:23px
}
.callout p {
  color:#d5e0ea
}
.deployment-card {
  border:1px solid var(--border);
  background:#fff
}
.deployment-card>div {
  padding:20px;
  border-bottom:1px solid var(--border-light)
}
.deployment-card>div:last-child {
  border-bottom:0
}
.deployment-card span {
  color:var(--blue);
  font-size:11px;
  font-weight:700
}
.deployment-card h3 {
  margin:5px 0 3px
}
.deployment-card p {
  margin:0;
  font-size:13px
}
.statement {
  background:var(--navy-dark);
  color:#fff;
  padding:58px 0;
  text-align:center
}
.statement h2 {
  color:#fff;
  font-size:34px
}
.statement p {
  color:#cbd7e2;
  margin:9px 0 0
}
.contact-box {
  display:grid;
  grid-template-columns:1fr auto;
  gap:50px;
  align-items:center;
  border:1px solid var(--border);
  padding:35px
}
.contact-details {
  min-width:230px
}
.contact-details .button {
  margin-bottom:15px
}
.contact-details strong {
  display:block;
  color:#536270;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.7px;
  margin-top:10px
}
.contact-details a:not(.button) {
  display:block;
  text-decoration:none
}

@media(max-width:850px) {
  nav {
    display:none
  }
  .section-heading,
  .split,
  .contact-box {
    grid-template-columns:1fr;
    gap:25px
  }
  .value-grid,
  .feature-grid {
    grid-template-columns:repeat(2,1fr)
  }
}
@media(max-width:560px) {
  .container {
    width:calc(100% - 28px)
  }
  .hero {
    padding:50px 0 58px
  }
  .hero h1 {
    font-size:39px
  }
  .hero-copy {
    font-size:16px
  }
  .section {
    padding:48px 0
  }
  h2 {
    font-size:26px
  }
  .value-grid,
  .feature-grid {
    grid-template-columns:1fr
  }
  .value-grid article,
  .feature-grid article {
    min-height:auto
  }
  .footer-inner {
    padding:14px 0;
    flex-direction:column;
    align-items:flex-start
  }
}