/* Pricing page only. Kept out of styles.css so adding it does not need a cache-bust on every
   other page. Same rules as the rest of the site: ink on stone, 2px corners, no colour that is
   not a verdict. */

.price-head { padding: 4rem 0 1rem; }
.price-head .lead { margin-top: 1.15rem; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 2.5rem 0 0; align-items: stretch; }
.tier {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1.75rem; display: flex; flex-direction: column;
}
.tier-mid { border-color: var(--ink); }
.tier h2 { font-size: 1.375rem; max-width: none; }
.tier-for { font-size: .9375rem; margin: .5rem 0 0; min-height: 3rem; }
.tier-price {
  margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--rule-2);
  font-family: var(--serif); font-size: 2.5rem; font-weight: 600; line-height: 1;
  color: var(--ink); letter-spacing: -.02em; max-width: none;
}
.tier-price small { font-family: var(--mono); font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--ink-3); }
.tier-from { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); display: block; margin-bottom: .4rem; letter-spacing: .08em; text-transform: uppercase; }
.tier-bill { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); margin: .6rem 0 0; }
.tier ul { list-style: none; margin: 1.5rem 0 1.75rem; padding: 0; flex: 1; }
.tier li {
  font-size: .9375rem; color: var(--ink-2); padding: .5rem 0 .5rem 1.25rem;
  border-bottom: 1px solid var(--rule-2); position: relative;
}
.tier li:last-child { border-bottom: 0; }
.tier li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: .5rem; height: 2px; background: var(--ink); }
.tier .btn { width: 100%; cursor: pointer; }

.price-notes { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); max-width: 46rem; }
.price-notes p { font-size: .875rem; color: var(--ink-3); max-width: none; }
.price-notes a { color: var(--ink-2); text-underline-offset: 3px; }
.price-foot { padding-bottom: 5rem; }

/* ---------- checkout dialog ---------- */
.checkout {
  border: 1px solid var(--ink); border-radius: var(--radius); background: var(--surface);
  color: var(--ink); padding: 0; width: min(30rem, calc(100vw - 2rem));
}
.checkout::backdrop { background: rgba(20, 23, 26, .45); }
.checkout form, .checkout .done { padding: 1.75rem; }
.checkout h2 { font-size: 1.375rem; max-width: none; }
.checkout .sum { font-family: var(--mono); font-size: .8125rem; color: var(--ink-2); margin: .5rem 0 1.25rem; }
.checkout label { display: block; font-size: .8125rem; font-weight: 500; color: var(--ink-2); margin: 1rem 0 .35rem; }
.checkout input[type="text"], .checkout input[type="email"] {
  width: 100%; padding: .65rem .75rem; font: inherit; font-size: .9375rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
}
.checkout input:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.checkout .agree { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.25rem; font-weight: 400; font-size: .8125rem; line-height: 1.55; }
.checkout .agree input { margin-top: .2rem; flex: none; }
.checkout .agree a { color: var(--ink); text-underline-offset: 3px; }
.checkout .msg { font-size: .875rem; color: var(--block); margin: 1rem 0 0; min-height: 1.3em; max-width: none; }
.checkout .row-btns { display: flex; gap: .75rem; margin-top: 1.25rem; }
.checkout .row-btns .btn { flex: 1; cursor: pointer; font-family: var(--sans); }
.checkout .btn[disabled] { opacity: .55; cursor: default; }
.checkout .fine { font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); margin: 1rem 0 0; line-height: 1.7; max-width: none; }
.checkout .done p { font-size: .9375rem; max-width: none; }

@media (max-width: 64rem) {
  .tiers { grid-template-columns: 1fr; }
  .tier-for { min-height: 0; }
  .price-head { padding-top: 3rem; }
}