@font-face{
  font-family:"Futura";
  src:local("Futura"),local("Futura PT"),local("Futura Std"),url("../fonts/futura-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Futura";
  src:local("Futura Bold"),local("Futura PT Bold"),local("Futura Std Bold"),url("../fonts/futura-bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --primary:#5B1038;
  --bg:#F5F2E8;
  --on-dark:#F5F2E8;
  --on-light:#5B1038;
  --card:#F5F2E8;
  --shadow: 0 10px 28px rgba(91,16,56,.10);
  --shadow-hover: 0 14px 36px rgba(91,16,56,.18);
  --radius: 18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--on-light);
  font-family:"Futura", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  letter-spacing:.01em;
}

.page{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:28px 16px 40px;
}

.header{
  width:min(980px, 100%);
  text-align:center;
  padding:12px 10px 22px;
}
.brand{
  margin:0;
  font-weight:700;
  color:var(--primary);
  font-size:clamp(28px, 4.5vw, 44px);
  letter-spacing:.02em;
}
.tagline{
  margin:10px 0 0;
  color:var(--primary);
  font-weight:700;
  font-size:12px;
  letter-spacing:.34em;
  text-transform:uppercase;
}

.cards{
  width:min(980px, 100%);
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
  padding:6px 0 20px;
}

.card{
  grid-column:span 12;
  background:var(--card);
  border:1px solid rgba(91,16,56,.22);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 16px 14px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:focus-within,
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:rgba(91,16,56,.42);
}

.card-top{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  padding-bottom:8px;
}

.icon{
  width:44px;
  height:44px;
  color:var(--primary);
  display:grid;
  place-items:center;
}
.icon svg{width:44px;height:44px;}

.card-title{
  margin:0;
  font-weight:700;
  color:var(--primary);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:14px;
}

.list{
  margin:8px 0 0;
  padding:0;
}

.row{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:baseline;
  gap:12px;
  padding:10px 0;
  position:relative;
}

.row::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:calc(50% + 2px);
  border-bottom:1px dotted rgba(91,16,56,.35);
  pointer-events:none;
}

.name,
.value{
  position:relative;
  z-index:1;
  background:var(--card);
}

.name{
  margin:0;
  padding-right:10px;
  font-weight:400;
  letter-spacing:.01em;
}

.value{
  margin:0;
  padding-left:10px;
  font-weight:400;
  text-align:right;
}

.value.note{
  font-style:italic;
  opacity:.92;
}

.cta{
  width:min(980px, 100%);
  padding:12px 0 6px;
  display:flex;
  justify-content:center;
}

.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:min(520px, 100%);
  padding:14px 18px;
  border-radius:999px;
  background:var(--primary);
  color:var(--on-dark);
  text-decoration:none;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  border:1px solid rgba(91,16,56,.15);
  box-shadow: 0 14px 34px rgba(91,16,56,.22);
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.button:focus-visible{
  outline:3px solid rgba(91,16,56,.35);
  outline-offset:3px;
}
.button:hover{
  transform:translateY(-2px);
  box-shadow: 0 18px 40px rgba(91,16,56,.28);
  filter:saturate(1.05);
}
.button:active{
  transform:translateY(0);
}

.footer{
  width:min(980px, 100%);
  text-align:center;
  padding:12px 0 0;
}
.footer-text{
  margin:0;
  font-size:12px;
  opacity:.75;
}

@media (min-width: 720px){
  .card{padding:20px 20px 14px;}
  .cards{gap:18px;}
}

@media (min-width: 900px){
  .cards{gap:18px;}
  .card{grid-column:span 4;}
  .card-top{align-items:flex-start;}
}

@media (prefers-reduced-motion: reduce){
  .card,.button{transition:none;}
}