/* ==========================================================================
   PRICING · page-specific
   Tokens, nav, sub hero, buttons, .close and footer come from site.css.

   The page has one job: make a per-assessment price legible to someone who is
   used to per-seat SaaS. Two things follow from that. The plan cards state a
   RANGE rather than a figure, because the candidate's clock is derived from the
   tasks that get generated rather than set by the plan — so a single number
   would be a promise the product does not make. And the cohort table sells
   bonus credit rather than a lower unit price, because the margin is global:
   there is no per-customer price to discount.
   ========================================================================== */

.subhero__lede {
  max-inline-size: 56ch;
  color: var(--ink-2);
  font-size: 1.06rem;
}
.sec-lede {
  max-inline-size: 62ch;
  color: var(--ink-2);
}

/* ---- Plans. Two cards, so a fixed two-column grid collapsing to one rather
   than auto-fit: with only two items auto-fit leaves a lone card stretched
   across the full width at middling viewports. ---- */
/* Section separation only. The vertical PADDING is deliberately left to
   site.css's `section { padding-block: clamp(5rem, 11vh, 8.5rem) }`. The
   `.page` scrim starts fully transparent and only reaches opacity at 16vh, so
   that generous top padding is what carries the first heading past the
   un-scrimmed band and off the background illustration. Overriding it with a
   smaller value put the headings back on the artwork. */
.plans-sec,
.incl-sec,
.vol-sec,
.cv-sec {
  border-block-start: 1px solid var(--line);
}

/* The backdrop pairing comes from how-we-evaluate.html, which this page's
   `art--island` illustration is borrowed from: `page--doc` opens at 0.8 alpha
   where plain `.page` opens at 0, so content is legible from the first line
   and no section needs clearance of its own. */
.plans {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.plan h3 {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.plan__shape {
  color: var(--ink-3);
  font-size: 0.9rem;
  margin: 0;
}
/* Tabular figures so the two prices line up across the cards. */
.plan__price {
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin: 0.5rem 0 0.2rem;
  line-height: 1.1;
}
.plan__price span {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--ink-3);
}
.plan__note {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.95rem;
}
.plans__foot {
  margin-block-start: 1.5rem;
  color: var(--ink-3);
  font-size: 0.92rem;
  max-inline-size: 68ch;
}

/* ---- What is included. A rule above each item rather than a card: these are
   six facts of equal weight, and six bordered boxes would compete with the two
   plan cards above them for the same attention. ---- */
.incl {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.incl li {
  border-block-start: 1px solid var(--line);
  padding-block-start: 0.85rem;
}
.incl b {
  display: block;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  margin-block-end: 0.25rem;
}
.incl span {
  color: var(--ink-2);
  font-size: 0.94rem;
}

/* ---- Cohort table. Scrolls in its own container so the five columns never
   push the page sideways on a phone. ---- */
.tw {
  overflow-x: auto;
  margin-block: 1.75rem 0;
}
.vol {
  border-collapse: collapse;
  inline-size: 100%;
  min-inline-size: 30rem;
  font-variant-numeric: tabular-nums;
}
.vol th,
.vol td {
  text-align: right;
  padding: 0.7rem 0.9rem;
  border-block-end: 1px solid var(--line);
}
.vol th:first-child,
.vol td:first-child {
  text-align: left;
}
.vol thead th {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.vol tbody tr:last-child td {
  border-block-end: none;
}
.vol .bon {
  color: var(--accent);
  font-weight: 600;
}
.vol .dash {
  color: var(--ink-3);
}
.vol__foot {
  margin-block-start: 1.25rem;
  color: var(--ink-3);
  font-size: 0.92rem;
  max-inline-size: 68ch;
}

/* Table caption for screen readers — the column headers alone do not say what
   the numbers are counting. */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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