@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;600&family=Roboto+Slab:wght@700&display=swap');

:root{
  --white:#ffffff;
  --ink:#172233;
  --blue:#285fc0;
  --cyan:#208d99;
  --line:#d8e1ec;
  --soft:#edf4fb;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--ink);
  background:var(--white);
  font-family:"IBM Plex Sans",sans-serif;
}

nav{
  padding:1.3rem max(1.3rem,6vw);
  border-bottom:1px solid var(--line);
}

nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem 1.2rem;
  margin:0;
  padding:0;
  list-style:none;
}

nav a{
  color:var(--blue);
  font-weight:600;
  text-decoration:none;
}

header{
  padding:5rem max(1.5rem,8vw);
  background:
    linear-gradient(120deg,rgba(40,95,192,.08),rgba(32,141,153,.08)),
    var(--soft);
}

.eyebrow{
  color:var(--cyan);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  font-weight:600;
}

h1,h2{font-family:"Roboto Slab",serif}

h1{
  margin:.5rem 0 1rem;
  font-size:clamp(3.5rem,8vw,7rem);
  line-height:.9;
}

header > p:last-child{
  max-width:48rem;
  color:#5c6a7d;
  font-size:1.08rem;
  line-height:1.7;
}

main{
  max-width:74rem;
  margin:auto;
  padding:5rem 2rem 7rem;
}

article{
  display:grid;
  grid-template-columns:17rem minmax(0,1fr);
  gap:0 3rem;
  font-size:1.04rem;
  line-height:1.85;
}

article h2{
  margin:0;
  padding:1.6rem 0;
  color:var(--blue);
  border-top:1px solid var(--line);
  font-size:1.55rem;
}

article p{
  margin:0;
  padding:1.6rem 0;
  border-top:1px solid var(--line);
}

.closing{
  grid-column:1/-1;
  margin-top:2rem;
  padding:2rem;
  border:0;
  background:var(--soft);
}

@media(max-width:760px){
  article{grid-template-columns:1fr}
  article h2{padding-bottom:.3rem}
  article p{padding-top:0;border-top:0}
}