/* THE PRICING PAGE. The lined look, applied to a ladder.
 *
 * Three marks and no fourth: the SEAM under the header, a RULE between plans, and one MARKER — the
 * left edge on the plan a reader should press. No corners, no shadows, no boxed cards. A price list
 * drawn as five floating tiles reads as a comparison somebody wants you to lose track of; drawn as
 * lines it reads as a ladder, which is what it is.
 *
 * Every colour is a token from style.css. theme.js is the only writer of a colour in this product
 * and prefers-color-scheme is not used anywhere — see the note at the top of theme.js. */

.price-page .top-in { justify-content: flex-start; }
/* padding-block, NOT a padding shorthand, and that is the whole bug this line used to be.
   <main> carries .wrap, which supplies the page's side gutter as padding: 0 var(--gut). This rule
   is in pricing.css, which loads after style.css, and both selectors are a single class — so a
   four-value shorthand here won the cascade and set the left and right padding to 0. The header
   kept its 32px because .top-in never touches padding, and the plan rows kept 24px of their own,
   which is why the page rendered with three different left edges and the title sat flat against
   the window. Vertical padding only; the gutter is not this rule's business. */
.price-main { padding-block: var(--space-12); }

/* ── the opening ───────────────────────────────────────────────────────────────────────────── */
.price-head { max-width: 60ch; margin: 0 0 var(--space-12); }
.price-head .page-title { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: var(--space-2) 0 var(--space-4); }
.price-head .page-sub { color: var(--ink-soft); font-size: calc(16px + var(--ui-text-step, 0px)); }

/* ── the ladder ────────────────────────────────────────────────────────────────────────────── */
.plans { border-top: var(--w-rule) solid var(--hair-dk); }

/* One plan is one row: name, fee, what it buys. The RULE between them is the second mark. */
.plan {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(140px, auto) minmax(0, 1.4fr);
  gap: var(--space-8);
  align-items: baseline;
  padding: var(--space-8) 0 var(--space-8) var(--space-6);
  border-bottom: var(--w-rule) solid var(--hair-dk);
  position: relative;
}

/* THE ONE MARKER, and the only box on the page. It is a left edge rather than an outline because
   an outline would be a fourth mark and the look has three. */
.plan-pick::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--w-edge);
  background: var(--ink);
}

/* The name and its tag are one cell, so the tag sits under the name rather than beside the fee.
   This had no rule at all on its first pass and rendered unstyled — an unstyled element does not
   throw, does not log, and just looks broken to somebody deciding whether to buy. */
.plan-id { display: flex; flex-direction: column; }
.plan-name { font-size: calc(19px + var(--ui-text-step, 0px)); font-weight: 500; }
.plan-tag {
  display: block; margin-top: var(--space-1);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft);
}

.plan-fee { display: flex; flex-direction: column; }
.fee { font-size: clamp(24px, 3.4vw, 34px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fee-per, .fee-year { color: var(--ink-soft); font-size: 13px; }
.fee-year { margin-top: var(--space-1); font-variant-numeric: tabular-nums; }

.plan-size p { margin: 0 0 var(--space-2); }
.plan-size p:last-child { margin-bottom: 0; }
.plan-size .hint { color: var(--ink-soft); font-size: 13px; }

/* ── the notes underneath ──────────────────────────────────────────────────────────────────── */
.price-note { max-width: 60ch; margin-top: var(--space-12); }
.price-note .section-label {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: var(--space-4);
}
.price-note .hint { color: var(--ink-soft); font-size: 13px; }

.fine { margin: 0; padding: 0; list-style: none; }
.fine li { padding: var(--space-3) 0; border-top: var(--w-rule) solid var(--hair-dk); }
.fine li:last-child { border-bottom: var(--w-rule) solid var(--hair-dk); }

.section-foot {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: var(--w-rule) solid var(--hair-dk);
  color: var(--ink-soft); font-size: 13px;
}

/* ── narrow ────────────────────────────────────────────────────────────────────────────────── */
/* Below the fold on a phone the three columns stack, and the fee goes FIRST after the name —
   somebody scrolling a price list is looking for the number, not for the prose. */
@media (max-width: 860px) {
  .plan { grid-template-columns: 1fr; gap: var(--space-3); padding-left: var(--space-4); }
  .plan-fee { flex-direction: row; align-items: baseline; gap: var(--space-2); }
  .fee-year { margin-top: 0; }
}