/* The Premium page (premium/show): two plans as cards, Free and Premium, the
   story table's head over them and the fine print under them.

   Drawn by the story table (pages/story_cards.css): its head, its card face,
   which lists .plan-card beside .story-card and .seed-card, and the name and
   chip on a card's top row. .story-page brings the parchment, nav, flash and
   buttons (pages/parchment.css). Sizes in px, as story_cards.css's are. */

.plans { max-width: 820px; padding-top: 28px; }

/* Flat for everyone, as the pages under the signed-in nav are (base.css). A
   visitor reads the prices signed out, with no nav, and the vintage edges
   (body::after) that sign-in and the legal pages keep did not suit a page of
   prices and plans. */
body:has(.plans)::after { display: none; }

/* ── The deck: side by side, Free on the left; stacked on a phone, Free first ──
   Side by side, both cards take the row's height (the grid's stretch) in
   every state, and the feet sit level at the bottom. Stacked, each card is
   as tall as its words. */
.plan-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 780px;
  margin: 0 auto;
}

/* ── A plan's card: the story table's face ── */
.plan-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 24px 24px 22px;
  color: #5a4a30;
}
/* The plan you are on: the dark edge of random setup's active card. */
.plan-card.is-current {
  border-color: #3a2a14;
  box-shadow: 0 0 0 1px #3a2a14, 0 10px 24px rgba(40, 25, 10, 0.24);
}
@media (forced-colors: active) {
  .plan-card.is-current { outline: 3px solid Highlight; outline-offset: -3px; }
}
.plan-card .story-card-top { align-items: center; min-height: 26px; }
/* Full width on a phone, so the name and chip keep the desktop's size:
   story_cards.css shrinks both for its two-a-row phone faces. */
.plan-card .story-card-name { font-size: 12px; letter-spacing: 0.2em; }
/* "Your plan" is the plain paper chip; the card's dark edge carries the
   emphasis, so ink stays the seal's alone. */
.plan-card .plan-chip { padding: 4px 8px; font-size: 10px; letter-spacing: 0.16em; }

/* The price, and the one line under it. */
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin-top: 14px;
}
/* Lora, not Cinzel: Paddle sends the price as one string, and Cinzel has
   no lowercase, which would set Polish "29,99 zł" as "29,99 ZŁ". */
.plan-amount {
  font-family: 'Lora', Georgia, serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0;
  color: #2a1d0e;
  white-space: nowrap;
}
.plan-period {
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  color: #5a4a30;
  white-space: nowrap;
}
.plan-price-note {
  margin-top: 2px;
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* What the plan gives, under a gilt line. Premium's list starts with
   "Everything in Free, plus:", which takes the line. */
.plan-lead,
.plan-list {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(160, 137, 94, 0.45);
}
.plan-lead {
  font-family: 'Lora', Georgia, serif;
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.45;
  color: #5a4a30;
}
.plan-lead + .plan-list { margin-top: 10px; padding-top: 0; border-top: 0; }
.plan-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 22px;
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  color: #3a2a14;
}
.plan-list li { position: relative; padding-left: 22px; }
/* The shelf's star, not read out. */
.plan-list li::before {
  content: '✦';
  content: '✦' / '';
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 0.8em;
  color: #8a7354;
}
.plan-list-sub {
  display: block;
  margin-top: 1px;
  font-size: 13.5px;
  font-style: italic;
  color: var(--ink-muted);
}

/* The button, or where you stand, at the card's foot: level on both cards
   side by side whatever their lists hold. */
.plan-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(160, 137, 94, 0.45);
  text-align: center;
}
.plan-foot .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  text-align: center;
}
/* The seal: the thing this screen is for. Weighted, as Start's on the
   story table, to outrank parchment.css's .btn--primary. */
body .btn.plan-seal {
  min-height: 48px;
  padding: 12px 24px;
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.plan-status {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #3a2a14;
}
.plan-note {
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.5;
  color: #5a4a30;
}

/* ── The fine print: what Paddle's review and German law need on this page ── */
.plan-terms {
  max-width: 640px;
  margin: 34px auto 0;
  font-family: 'Lora', Georgia, serif;
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-muted);
}
.plan-terms-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
/* A wrapping row, as the footer's: each link wraps whole, no dots between. */
.plan-terms-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 1.6em;
  margin-top: 12px;
  font-style: italic;
}
/* Ink, as Profile's legal links: base.css's teal is about 1.6:1 here. */
.plan-terms-links a { color: #4a4030; text-decoration: underline; text-underline-offset: 2px; }
@media (hover: hover) {
  .plan-terms-links a:hover { color: #2a1d0e; }
}
/* WCAG's 24px for legal links on a touch screen, as access.css gives the
   footer's and the sidebar's. Their 0.4rem would make these 13px lines 34px
   tall and push the two rows apart; 0.2rem makes 27. */
@media (pointer: coarse) {
  .plan-terms-links { row-gap: 2px; }
  .plan-terms-links a { display: inline-block; padding-block: 0.2rem; }
}

/* Just paid: the confirmation takes the lede's place and Refresh sits
   under it, so a phone shows it on the first screen. */
.plans-head-action { margin-top: 14px; }
.plans-head-action .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 140px;
  min-height: 44px;
}

/* Profile's gilt divider, then Back. */
.plan-divider {
  max-width: 640px;
  height: 1px;
  margin: 28px auto 20px;
  border: 0;
  background: linear-gradient(to right, transparent 0%, #a0895e 20%, #8a7354 50%, #a0895e 80%, transparent 100%);
  opacity: 0.5;
}
.plan-back { text-align: center; }

/* ── A phone ── */
@media (max-width: 640px) {
  /* None on top, as the story table's own phone padding: the first card
     starts high on the first screen. */
  .plans { padding-top: 0; }
  .plans .story-table-header { margin-bottom: 16px; padding-bottom: 14px; }
  .plans .story-table-title { margin: 4px 0 6px; }
  .plans .story-table-lede { font-size: 14px; line-height: 1.5; }
  .plan-deck { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .plan-card { padding: 16px 18px 16px; }
  .plan-card::before { inset: 5px; }
  .plan-price { margin-top: 8px; }
  .plan-amount { font-size: 28px; }
  .plan-lead, .plan-list { margin-top: 12px; padding-top: 12px; }
  .plan-list { font-size: 14.5px; gap: 8px; margin-bottom: 16px; }
  .plan-terms { margin-top: 26px; font-size: 13px; }
}