/* /plans — product cards. Reuses site.css's tokens only (--ink, --bone,
   --orange, --stone, --line, --serif, --sans) and score.css's checkout
   button/message and email-capture styles (both pages load score.css) —
   no new colours, no duplicated component CSS. */

.plans-hero { padding: 56px 0 8px; }

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  margin: 40px 0 64px;
}

.plan-card {
  border: 1px solid var(--line);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.plan-badge {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stone);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 14px;
}

.plan-name { font-size: 1.5rem; margin-bottom: 6px; }
.plan-tagline { color: var(--stone); font-size: 0.95rem; margin-bottom: 18px; min-height: 3em; }

.plan-price {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.plan-price .cadence { font-family: var(--sans); font-size: 0.85rem; color: var(--stone); }
.plan-price-note { font-size: 0.8rem; color: var(--stone); margin-bottom: 18px; }

.plan-features { list-style: none; margin-bottom: 24px; flex: 1 1 auto; }
.plan-features li {
  font-size: 0.92rem;
  color: var(--ink);
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.plan-features li:first-child { border-top: none; }

.blueprint-url-field { margin-top: auto; padding-bottom: 6px; }
.blueprint-url-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--stone);
  margin-bottom: 6px;
}
.blueprint-url-field input {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  box-sizing: border-box;
  margin-bottom: 14px;
}
.blueprint-url-field input:focus { border-bottom-color: var(--ink); }

.plan-card .notify-form { margin-top: auto; }
.plan-card .notify-form form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.plan-card .notify-form input {
  flex: 1 1 160px;
  font: inherit;
  font-size: 0.92rem;
  padding: 10px 0;
  border: none;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.plan-card .notify-form input:focus { border-bottom-color: var(--ink); }
.plan-card .notify-form button {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 4px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.plan-card .notify-form button:hover { background: var(--orange); border-color: var(--orange); }
.plan-card .notify-form button:disabled { opacity: 0.6; cursor: default; }
.plan-card .notify-message { margin-top: 10px; font-size: 0.85rem; color: var(--stone); }

.plans-delivery { max-width: 720px; margin: 0 0 56px; }
.plans-delivery p { color: var(--stone); }

.plans-refund { max-width: 720px; margin: 0 0 64px; padding: 24px 26px; border: 1px solid var(--line); }
.plans-refund h2 { font-size: 1.2rem; margin-bottom: 10px; }
.plans-refund p, .plans-refund li { color: var(--stone); font-size: 0.92rem; }
.plans-refund ul { padding-left: 20px; margin-top: 8px; }