:root{
  --ink:#1E2A3A;
  --red:#D7262E;
  --off:#F3F4F6;
  --slate:#5B6675;
  --line:#E2E5EA;
  --radius:12px;
  --max:720px;
  --head:"Manrope",system-ui,sans-serif;
  --body:"Libre Franklin",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--body);
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--head);line-height:1.2;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(1.7rem,3.6vw,2.45rem);font-weight:800}
h2{font-size:1.15rem;font-weight:700;margin:0 0 .45em}
p{margin:0}
a{color:inherit}

.page{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:48px 24px 32px;
  text-align:center;
}

.brand{margin-bottom:36px}
.logo{display:block;height:52px;width:auto;max-width:min(100%,300px);margin:0 auto}

.intro{margin-bottom:36px}
.lead{font-size:1.12rem;color:var(--slate);max-width:38em;margin:0 auto}

.cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  width:100%;
  margin-bottom:40px;
  text-align:left;
}
.card{
  background:var(--off);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px 22px;
  border-top:3px solid var(--red);
}
.card p{color:var(--slate);font-size:15.5px}

.contact{margin-bottom:8px}
.contact h2{margin-bottom:14px;font-size:1.2rem}

.btn{
  display:inline-block;
  background:var(--red);
  color:#fff !important;
  text-decoration:none;
  font-family:var(--head);
  font-weight:700;
  padding:14px 24px;
  border-radius:8px;
  border:2px solid var(--red);
  font-size:16px;
  transition:background .15s;
}
.btn:hover{background:#b81f26;border-color:#b81f26}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.site-footer{
  padding:20px 24px 28px;
  text-align:center;
}
.copy{margin:0;font-size:14px;color:var(--slate)}

@media (max-width:640px){
  body{font-size:16px}
  .page{padding:36px 20px 24px;justify-content:flex-start}
  .brand{margin-bottom:28px}
  .logo{height:40px}
  .intro{margin-bottom:28px}
  .lead{font-size:1.05rem}
  .cards{grid-template-columns:1fr;gap:14px;margin-bottom:32px}
  .btn{width:100%;max-width:22rem}
}