/* AI-Author: ZCode (Z.ai ZCode) — Pricing page. Plan cards: black/white only,
   thin rules, no shadows or gradients (per task + brief). Layout only; the
   shared design system (base.css) provides sections, type, buttons, motion. */

.page-hero { padding-top: calc(var(--section-pad) + 3rem); }

/* Section 2: the three plans. */
.plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gutter);
  align-items: stretch;
  margin-top: 4rem;
}
.plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-200);
  padding: clamp(1.8rem, 2.6vw, 2.8rem);
}
.plan-head { display: flex; align-items: center; gap: .9rem; }
.plan-head .mark { width: 2.5rem; height: 2.5rem; } /* one step up from 2.2rem (client, 2026-10-04) */
.plan-name {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.8rem; line-height: 1.1; letter-spacing: .01em; margin: 0;
}
.plan-tagline { margin: 1.4rem 0 0; }
.plan-price {
  margin: 2.2rem 0 0;
  font-family: var(--serif); font-size: var(--fs-md); line-height: 1.2;
}
.plan-price .per {
  font-family: var(--sans); font-size: var(--fs-small); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500);
}
.plan-features { list-style: none; margin: 2.2rem 0 0; padding: 0; }
.plan-features li { padding: .85rem 0; }
.plan-features li + li { border-top: 1px solid var(--ink-200); }
.plan-cta { margin-top: auto; padding-top: 2.6rem; }

/* The combined plan is the inverted card (still strictly black and white). */
.plan--combined { background: var(--black); color: var(--white); border-color: var(--black); }
.plan--combined .plan-features li + li { border-color: var(--ink-800); }
.plan--combined .plan-price .per { color: var(--ink-400); }
.plan--combined .btn:hover,
.plan--combined .btn:focus-visible { background: var(--white); color: var(--black); }

/* Placeholders stay visible until the client confirms numbers. */
.placeholder {
  font-family: var(--sans); font-size: .92em; font-style: italic;
  color: var(--ink-500); border-bottom: 1px dashed currentColor;
}
.plan--combined .placeholder { color: var(--ink-300); }
.section--black .placeholder { color: var(--ink-400); }

.draft-note {
  margin-top: 4rem; font-size: var(--fs-small);
  color: var(--ink-500); letter-spacing: .05em;
}

@media (max-width: 860px) {
  .plans { grid-template-columns: 1fr; }
}
/* Tailored pricing (Matin, 2026-10-09): the sub-line reads as a sentence, not a small-caps label. */
.plan-price .per { display: block; margin-top: .6rem; text-transform: none; letter-spacing: .01em; font-weight: 400; line-height: 1.45; }
/* Price tiers per product (proposal, 2026-10-11; Enterprise keeps Matin's "Tailored pricing"). */
.plan-tiers { margin: 2rem 0 0; display: grid; gap: .1rem; }
.tier { display: flex; align-items: baseline; gap: .6rem; margin: 0; padding: .65rem 0; border-top: 1px solid var(--ink-200); }
.plan--combined .tier { border-color: var(--ink-800); }
.tier-name { flex: 1; font-size: var(--fs-small); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); }
.plan--combined .tier-name { color: var(--ink-400); }
.tier-price { font-family: var(--serif); font-size: var(--fs-md); line-height: 1; }
.tier-per, .tier-tailored { font-size: var(--fs-small); color: var(--ink-500); }
.tier-tailored { font-family: var(--serif); font-size: 1.15rem; color: inherit; }
.plan--combined .tier-per { color: var(--ink-400); }
/* Price + "/ month + VAT", bundle saving right under its own price (client, 2026-10-11). */
.tier-amount { text-align: right; max-width: 9.5rem; }
.tier-amount .tier-per { display: block; margin-top: .3rem; white-space: nowrap; }
.tier-save { display: block; margin-top: .3rem; font-size: .78rem; color: var(--line-d); }
.pricing-note { margin-top: 2.4rem; font-size: var(--fs-small); color: var(--ink-500); letter-spacing: .02em; }
/* Volume limit under each tier name. */
.tier { align-items: center; }
.tier-name small { display: block; margin-top: .25rem; font-size: .78rem; font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--ink-500); }
.plan--combined .tier-name small { color: var(--ink-400); }
.tier-tailored { white-space: nowrap; }
/* Phone design pass (2026-10-13, Codex review): each tier = name + price on
   the first line, its volume and its saving on full-width lines below, so the
   bundle's volumes no longer wrap over four lines. Same words as desktop. */
@media (max-width: 860px) {
  .plans { margin-top: 2.5rem; }
  .tier { display: grid; grid-template-columns: 1fr auto auto; column-gap: .45rem; align-items: baseline; }
  .tier-name, .tier-amount { display: contents; }
  .tier-name small { grid-column: 1 / -1; grid-row: 2; margin-top: .3rem; }
  .tier-price { grid-column: 2; grid-row: 1; }
  .tier-amount .tier-per { grid-column: 3; grid-row: 1; margin-top: 0; }
  .tier-save { grid-column: 1 / -1; grid-row: 3; margin-top: .2rem; }
  .tier-tailored { grid-column: 2 / -1; grid-row: 1; text-align: right; }
  .plan-cta { padding-top: 2rem; }
}
/* Small phones: keep the card button on one line (44px tall, same label size). */
@media (max-width: 400px) {
  .plan-cta .btn { padding-left: 1.1rem; padding-right: 1.1rem; letter-spacing: .16em; gap: .5rem; }
}