/* The plans page (plans.html): one product's tiers, a table, worked examples.

   Built on promo.css -- the advertising pages' look -- so it reads as one of
   them, and its cards ARE promo.css's plan cards with a price added.

   Tokens only, never a colour: it has to look right in all eight themes.
   Added 2026-10-03. */

/* Every block of the page sits in the same centred column. promo.css
   centres the direct children of .promo, but some of its own blocks
   (.promo-plans, .promo-faq, .promo-fineprint) reset their side margins to
   0 -- harmless on the pages where they sit inside a wrapper, but here they
   are direct children, so on a wide screen they hung to the left while the
   rest sat in the middle. Same weight as those rules and loaded after them,
   so this wins; top and bottom margins are left as they were. */
.plans > * {
  margin-left: auto;
  margin-right: auto;
}

/* For the person being helped: before anything else, because they are the
   one most likely to be confused by a page of prices. */
.plans-client {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--info-soft);
  border-left: 4px solid var(--info);
  color: var(--ink);
}

.plans-client p {
  margin: 0;
}

/* Under construction: says so before anything else on the page. */
.plans-draft {
  max-width: var(--promo-width);
  margin: 16px auto 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--warn-soft);
  border-left: 4px solid var(--warn);
  color: var(--ink);
}

.plans-draft p {
  margin: 0;
}

/* A sale, while one runs (Admin > Plans). The accent, not a warning
   colour: it is good news. */
.plans-sale {
  max-width: var(--promo-width);
  margin: 16px auto 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--accent-soft);
  border-left: 4px solid var(--accent);
  color: var(--ink);
}

.plans-sale b {
  color: var(--accent);
}

/* One column. promo.css's hero is two -- the words beside a picture -- and
   this page has no picture, so the title was squeezed into the left half and
   wrapped while the cards below ran the full width. The lede keeps its
   reading width (promo.css). */
.plans-hero {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: 4px;
}

/* ---- monthly / yearly ---- */

.plans-period {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 8px auto 4px;
}

.plans-period__btn {
  padding: 9px 20px;
  border: 2px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-head, 'Trebuchet MS', sans-serif);
  font-size: calc(1rem * var(--font-scale, 1));
  font-weight: 700;
  cursor: pointer;
}

.plans-period__btn:first-child {
  border-radius: 8px 0 0 8px;
}

.plans-period__btn:last-child {
  border-radius: 0 8px 8px 0;
  border-left: none;
}

.plans-period__btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--on-accent);
}

.plans-period__btn:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.plans-period__save {
  font-weight: 400;
  font-size: 0.85em;
}

/* ---- the cards ---- */

/* Same height, so every card's button sits on one line at the bottom. */
.plans-cards {
  align-items: stretch;
}

/* Room for two lines of tagline on every card, so the prices line up. */
.plans-card .promo-plan__tag {
  min-height: 3.2em;
  min-height: 2lh;
}

.plans-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Sits on the card's top edge, so the popular card's name and price line up
   with the others instead of being pushed down by the badge. */
.plans-card__badge {
  position: absolute;
  top: -12px;
  left: 18px;
  margin: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: calc(0.78rem * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.plans-price {
  margin: 6px 0 0;
  color: var(--ink);
}

.plans-price__amount {
  font-family: var(--font-head, 'Trebuchet MS', sans-serif);
  font-size: calc(2.2rem * var(--font-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plans-price__per {
  color: var(--ink-muted);
}

/* The normal price, struck through beside a sale price. */
.plans-price__was {
  color: var(--ink-faint);
  font-size: calc(1.1rem * var(--font-scale, 1));
  font-weight: 400;
}

/* How long a sale price lasts and what comes after it. */
.plans-price__sale {
  margin: 2px 0 0;
  color: var(--accent);
  font-size: calc(0.9rem * var(--font-scale, 1));
  font-weight: 700;
}

.plans-price__sub {
  margin: 2px 0 14px;
  color: var(--ink-muted);
  font-size: calc(0.9rem * var(--font-scale, 1));
}

.promo-plan ul.plans-facts,
.promo-plan ul.plans-caps {
  list-style: none;
  padding-left: 0;
}

.plans-facts {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

.plans-fact__figure {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.plans-cap {
  display: flex;
  gap: 8px;
}

.plans-cap__mark {
  flex: none;
  width: 1em;
  color: var(--ok);
  font-weight: 700;
}

/* A capability offered but not built yet. */
.plans-cap__coming {
  flex: none;
  align-self: center;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  color: var(--ink-muted);
  font-size: calc(0.72rem * var(--font-scale, 1));
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.plans-cap.is-missing {
  color: var(--ink-faint);
}

.plans-cap.is-missing .plans-cap__mark {
  color: var(--ink-faint);
}

/* What it runs on, under every plan's list. */
.plans-card__platform {
  margin: 4px 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  color: var(--ink-muted);
  font-size: calc(0.85rem * var(--font-scale, 1));
}

.plans-buy {
  margin-top: auto;
  justify-content: center;
}

.plans-buy:disabled {
  background: var(--surface-alt);
  border-color: var(--rule-strong);
  color: var(--ink-muted);
  cursor: not-allowed;
}

/* ---- the top-up ---- */

/* The card beside the order a month's data is used in; one above the other
   on a phone. */
.plans-topup__body {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 640px) {
  .plans-topup__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.plans-topup__note {
  max-width: var(--promo-text);
  color: var(--ink);
}

.plans-topup__note p {
  margin: 0 0 8px;
}

/* Numbered with promo.css's .promo-steps circles. */
.plans-topup__order {
  margin: 0 0 6px;
}

.plans-topup__order li {
  margin-bottom: 10px;
}

/* ---- the table ---- */

.plans-h2 {
  margin-top: 36px;
  color: var(--ink);
}

.plans-note {
  color: var(--ink-muted);
}

.plans-table-wrap {
  overflow-x: auto;
}

.plans-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.plans-table th,
.plans-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
}

.plans-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-muted);
}

.plans-table thead th {
  color: var(--ink);
  border-bottom: 2px solid var(--rule-strong);
}

.plans-table .is-popular {
  background: var(--accent-soft);
}

/* ---- the worked examples ---- */

.plans-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 14px;
}

.plans-scenario {
  min-width: 0;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.plans-scenario h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: calc(1.05rem * var(--font-scale, 1));
}

.plans-scenario p {
  margin: 0 0 8px;
}

.plans-scenario__needs {
  color: var(--ink-muted);
  font-size: calc(0.9rem * var(--font-scale, 1));
}

.plans-scenario__fit {
  padding-top: 8px;
  border-top: 1px solid var(--rule);
}

.plans-scenario__fit b {
  color: var(--accent);
}

.plans-scenario__fit.is-none b {
  color: var(--warn);
}

/* ---- questions ---- */

/* The column is the page's width (see .plans > * at the top); the answers
   keep a reading width inside it. */
.plans-faq {
  max-width: var(--promo-width);
}

.plans-faq details {
  max-width: var(--promo-text);
}

/* The page shows and hides whole blocks with the hidden attribute, and
   several of them set their own display (.plans-period is a flex row), which
   beats [hidden]. Found 2026-10-09: the Monthly/Yearly switch never hid. */
.plans [hidden] {
  display: none !important;
}