/* ---- pricing page ------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 46px 0 96px;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  background: var(--bone);
  border: 1px solid var(--line);
}
.plan.is-recommended { border-color: var(--ink); }
.plan-flag {
  position: absolute; top: -1px; right: -1px;
  padding: 5px 10px;
  background: var(--lime); color: var(--ink);
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
}
.plan h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin: 0 0 10px; color: var(--ink); }
.plan-price { margin: 0 0 8px; display: flex; align-items: baseline; gap: 6px; }
.plan-price .amount { font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--ink); }
.plan-price .per { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--earth-2); }
.plan-blurb { margin: 0 0 18px; color: var(--ink-2); font-size: 14px; }
.plan-inherit {
  margin: 0 0 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--earth-2);
}
.plan-features { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.plan-features li {
  position: relative; padding-left: 18px;
  color: var(--ink-2); font-size: 14px; line-height: 1.5;
}
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--lime-ink);
}
.plan-cta { margin-top: auto; justify-content: center; text-align: center; }

/* the two Frontier prices, as one choice inside the card */
.plan-choice { display: flex; gap: 6px; margin: 0 0 18px; }
.plan-choice button {
  flex: 1; padding: 8px 0; cursor: pointer;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.plan-choice button[aria-checked="true"] { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.plan-choice button:hover[aria-checked="false"] { border-color: var(--ink); color: var(--ink); }

/* the four notes under the table */
.pricing-notes { margin: 0 0 96px; }
.pricing-notes h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); margin: 0 0 22px; color: var(--ink); }
.note-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.note-grid h3 { font-size: 15px; margin: 0 0 8px; color: var(--ink); font-weight: 500; }
.note-grid p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.pricing-faq { padding: 0 0 40px; }

@media (max-width: 980px) {
  .plans, .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .plans, .note-grid { grid-template-columns: 1fr; }
}

/* the three promises that make charging during a beta defensible */
.pledges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin: 34px 0 8px;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}
.pledges h2 {
  margin: 0 0 8px;
  font-family: var(--sans); font-weight: 500; font-size: 15px;
  color: var(--ink);
}
.pledges p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
@media (max-width: 820px) { .pledges { grid-template-columns: 1fr; gap: 20px; } }