/* /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: 16px 0 48px;
  /* A grid row's items stretch to match the tallest by default
     (align-items: stretch, unset here) — the three cards side by side are
     already equal height for free; collapses to one column below ~3×280px
     the same way, no separate mobile rule needed. */
}

.plan-card {
  border: 1px solid var(--line);
  padding: 18px 24px;
  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;
}

/* Sub-heading tier (public/assets/score.css's .panel-section h3,h4) — not
   tokenized, matching that file's own untokenized 14px sub-heading rule. */
.plan-name { font-size: 14px; margin-bottom: 4px; }
/* Reserves enough height for the longest current description (Radar's,
   ~127 characters — the other two run shorter) to wrap at the narrowest
   card width (280px) without pushing the price/features below it out of
   line with the other two cards, whose shorter text wraps to fewer lines.
   Never truncates — a much longer description would just push past this
   and misalign again, so bump this if one ever gets added. */
.plan-tagline { color: var(--stone); font-size: var(--card-body-size); margin-bottom: 12px; min-height: 6.4em; }

/* Item 10: the Blueprint card's own per-score line — no caller passes this
   any more (the results page's Blueprint hook block already leads with
   this exact count instead), kept only for a future caller with no hook of
   its own. Sits below the feature list with the delivery promise below it
   (public/assets/plans.js's renderCard) — fine print, not card body copy,
   at the page's own body size (--body-size, one step below
   --card-body-size) precisely so neither one can ever push the price/
   button row below it out of line with a card that has neither line. */
.plan-blueprint-changes { color: var(--ink); font-weight: 600; font-size: var(--body-size); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); margin-bottom: 4px; }
.plan-blueprint-suggestion { color: var(--stone); font-size: var(--body-size); margin-bottom: 4px; }

/* The Blueprint's fixed delivery/refund promise (docs/PRODUCTS.md) — same
   fine-print tier as the line above; the border/margin-top above already
   separates this bottom block from the feature list, so this only adds one
   when it's the first (blueprintChangesBlock absent, the common case). */
.plan-delivery-promise { color: var(--stone); font-size: var(--body-size); margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.plan-blueprint-changes + .plan-delivery-promise { margin-top: 0; padding-top: 0; border-top: none; }

.plan-price {
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--ink);
  margin-bottom: 2px;
  /* Radar's fallback price ("£49 / $59 / ₹2,999 per month") is long enough
     to wrap onto two or three lines at this font size in a narrow card,
     while Blueprint's/Pulse's shorter text stays on fewer — reserving room
     for three lines on every card keeps the feature list starting at the
     same height regardless of which price happens to wrap. */
  min-height: 4.4em;
}
.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: 12px; }

/* Comes after the buy action now (Phase 5: name/price/button is the
   above-the-fold decision on the results page; the feature list is
   supporting detail below it) — margin-top separates it from whichever
   action element (button, notify form, "Your website" field) precedes it,
   flex:1 1 auto still lets it absorb any extra stretched height from a
   taller sibling card. */
.plan-features { list-style: none; margin-top: 20px; margin-bottom: 24px; flex: 1 1 auto; }
.plan-features li {
  font-size: var(--card-body-size);
  color: var(--ink);
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.plan-features li:first-child { border-top: none; }

.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; }