/* header area */

header {
 background-color: #74295f;
 color: #fff;
}

header h1 {
 font-family: "Fira Sans", sans-serif;
 font-weight: 600;
 font-size: 1.75em;
 max-width: 17em;
}
@media (min-width: 50em) {
 header h1 {
  font-size: 2.25em;
 }
}
header .pre-h1 {
 font-size: 0.5em;
 display: block;
 margin-bottom: 0.25em;
 opacity: 0.85;
}
header .pre-h1::after {
 content: "";
 height: 0.25em;
 width: 1.5em;
 background: #fff;
 display: block;
 margin-bottom: 2.4em;
 margin-top: 1.2em;
 opacity: 0.85;
}

header h1 + p {
 max-width: 42em;
 font-size: 1.2em;
}
@media (min-width: 50em) {
 header .product-name

  /* keep together if space allows */ {
  white-space: nowrap;
 }
}

/* usps area */

.usps-short {
 margin-bottom: 2em;
}
.usps-short h2 {
 margin-top: 0.6em;
 margin-bottom: 1.2em;
}
.usps-short p {
 font-size: 120%;
}
.usps-long h3 {
 margin-bottom: 1.5em;
 margin-top: 0.3em;
}
.usps-long ul {
 padding-left: 0.85em;
}
.usps-long li {
 margin-bottom: 0.4em;
}

@media (min-width: 54em) {
 .usps {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3em;
 }
 .usps-short h2 {
  margin-top: 0;
 }
 .usps-long {
  grid-column: span 2;
 }
 .usps-long ul {
  column-count: 2;
  column-gap: 2em;
 }
 .usps-long li {
  page-break-inside: avoid;
  break-inside: avoid;
 }
}

/* footer */

.footer {
 border-top: 4px solid #d1dfe3;
 border-bottom: 4px solid #d1dfe3;
 background-color: #f2f8fb;
 color: #004152;
 background-image: url(./blocks.png);
 background-size: 30em;
 background-repeat: no-repeat;
 background-position: bottom center;
 background-blend-mode: multiply;
 padding-bottom: 6em;
}
.footer-items div {
 margin: 0.5em 0 2em;
}
.footer .pre-h3 {
 font-size: 0.6em;
 display: block;
 margin-bottom: 0.3em;
 text-transform: uppercase;
}
@media (min-width: 50em) {
 .footer {
  background-position: bottom right;
  padding-bottom: 4em;
 }
 .footer-items {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 3em;
 }
 .footer-items div {
  margin: 0;
 }
}

/* contact */

.contact h4,
.contact p {
 display: inline;
}
.contact a {
 color: #006fa3;
}

/* generic */

body {
 margin: 0;
 box-sizing: border-box;
 color: #004152;
 font-family: "Source Sans 3", sans-serif;
}
@media (min-width: 50em) {
 body {
  font-size: 125%;
 }
}

h1,
h2,
h3 {
 margin-top: 0;
 font-family: "Fira Sans";
}

h3 {
 margin-bottom: 0.5em;
}
h2 + p,
h3 + p,
h3 + ul {
 margin-top: 0;
}

img {
 max-width: 100%;
}

a {
 color: inherit;
}

.container {
 padding: 1em;
 max-width: 50em;
 margin: 0 auto;
}

@media (min-width: 40em) {
 .container {
  padding: 2em;
 }
}

@media (min-width: 60em) {
 .container {
  max-width: 60em;
 }
}

@media (min-width: 70em) {
 .container {
  max-width: 70em;
 }
}

@media (min-width: 80em) {
 .container {
  max-width: 80em;
 }
}