/* Pricing plans */
.price {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:56px;
  align-items:stretch
}

.plan {
  border:1px solid var(--line);
  border-radius:24px;
  padding:32px;
  display:flex;
  flex-direction:column;
  background:var(--card);
  min-height:470px
}

.plan.hot {
  border-color:#00e1ff88;
  box-shadow:0 0 60px #00e1ff22;
  background:linear-gradient(180deg,#132038aa,#08101eaa)
}

.plan.a {
  background:linear-gradient(180deg,#00000000 30%,#08101ef0),linear-gradient(160deg,#1f3a5a,#1b1a24 60%);
  justify-content:flex-end
}

.plan.c {
  background:linear-gradient(180deg,#00000000 30%,#08101ef0),linear-gradient(160deg,#3d7ca633,#0d1b38 55%);
  justify-content:flex-end
}

.plan h3 {
  font-size:26px;
  font-family:var(--sans);
  font-weight:500
}

.plan .sub {
  color:var(--mut);
  font-size:14px;
  margin:4px 0 22px
}

.amt {
  font:400 44px var(--serif);
  margin-bottom:14px
}

.amt small {
  font:13px var(--sans);
  color:var(--mut);
  margin-left:6px
}

.plan ul {
  list-style:none;
  padding:0;
  display:grid;
  gap:12px;
  font-size:15px;
  margin-bottom:auto;
  color:#d3def4
}

.plan li::before {
  content:"✓";
  color:var(--cy);
  margin-right:12px
}

.plan .btn {
  margin-top:26px;
  justify-content:center
}

.pill {
  font:12px var(--mono);
  border:1px solid var(--line);
  border-radius:8px;
  padding:5px 10px;
  color:#b8f3ff;
  width:fit-content;
  margin-bottom:22px
}

.perks {
  display:flex;
  gap:28px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:34px;
  color:#b9c8e6;
  font-size:14px
}

.perks span::before {
  content:"✓";
  color:var(--cy);
  margin-right:8px
}

.plan {
  transition:transform .35s
}

.plan:hover {
  transform:translateY(-6px)
}

.plan.hot {
  animation:hot 4s ease-in-out infinite
}

.plan.hot.flip {
  animation:flip 1.2s ease-in-out
}