/* Pricing — loaded AFTER page-landing.css, which supplies .wrap, section
   padding, .lede, .turn and the footer. This file only adds what is new.

   Two models on one page: the seeker side is self-serve with numbers, hiring is
   quoted per tenant. The layout says that before the copy does — two priced
   cards side by side, then one full-width band with no number on it. */

.pr-head { padding-bottom: clamp(24px, 4vw, 40px); }
.pr-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.3rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 18px;
}
.pr-head .lede { color: var(--muted); max-width: 56ch; margin: 0; font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.65; }

.pr-h2 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 700; letter-spacing: -0.025em; margin: 0 0 var(--sp-5);
}

/* ── Seeker plans ─────────────────────────────────────────────────────────── */

.pr-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.5vw, 28px);
  align-items: start;
}
.plan {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3vw, 34px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-sm);
}
/* The one emphasised card on the page. A ring rather than a scale transform, so
   the two cards stay on the same baseline and the grid does not jitter. */
.plan--featured {
  border-color: var(--teal-300);
  box-shadow: var(--shadow-teal-lg);
}
.plan__flag {
  align-self: flex-start;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--teal-700); background: var(--teal-50);
  border: 1px solid var(--teal-200); border-radius: var(--r-full);
  padding: 3px 10px; margin: 0 0 12px;
}
.plan__name { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.plan__price { margin: 0 0 6px; display: flex; align-items: baseline; gap: 6px; }
.plan__num { font-size: clamp(2rem, 4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.plan__per { color: var(--faint); font-size: 14px; }
.plan__for { margin: 0 0 var(--sp-5); color: var(--muted); font-size: var(--t-sm); }

.plan__list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: 11px; }
.plan__list li { display: flex; gap: 10px; font-size: var(--t-sm); color: var(--muted); line-height: 1.55; }
.plan__list li .ico { margin-top: 3px; flex: none; }
.plan__list b { color: var(--ink); font-weight: 650; }
/* Two columns for the hiring band, which has twice as many rows and full width. */
.plan__list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px clamp(16px, 3vw, 40px); margin-bottom: 0; }

/* `margin-top:auto` pins the CTA to the bottom so two cards of different length
   still line their buttons up. */
.plan .btn { margin-top: auto; }

/* "This is your current plan" / "You're on Pro" — what a card shows INSTEAD of
   a buy button. ⚠️ It needs `margin-top: auto` for the same reason `.plan .btn`
   has it: it sits in the CTA slot at the bottom of a column card, and without
   it the card above a state line would be a different height from the card
   above a button, so the row's baselines stop lining up. */
.plan__state {
  margin: auto 0 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
  /* Matches `.btn`'s vertical box so a card with a state line is exactly as
     tall as one with a button. */
  padding: 10px 0;
}
.plan__state .ico { flex: none; margin-top: 2px; }

.pr-note { margin: var(--sp-5) 0 0; color: var(--faint); font-size: 13.5px; max-width: 60ch; line-height: 1.6; }

/* ── Hiring band ──────────────────────────────────────────────────────────── */

.pr-hiring__head { max-width: 64ch; margin-bottom: var(--sp-6); }
.pr-hiring__head p { color: var(--muted); margin: 0; line-height: 1.65; text-wrap: pretty; }
.pr-hiring__head code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px;
  background: var(--teal-50); color: var(--teal-700); padding: 1px 6px; border-radius: var(--r-sm);
}
.pr-hiring__body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3vw, 34px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}
.pr-hiring__cta { display: grid; gap: var(--sp-4); justify-items: start; }
.pr-hiring__cta .pr-note { margin: 0; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq { margin: 0; }
.faq dt { font-weight: 650; font-size: 15.5px; margin-top: var(--sp-5); }
.faq dt:first-of-type { margin-top: 0; }
.faq dd { margin: 5px 0 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; max-width: 68ch; }

/* Interview credits: an ADD-ON, not a third plan — you buy it on top of Free or
   Pro. Deliberately outside `.pr-grid` and visually a band rather than a card,
   so it never reads as an alternative to Pro. */
.addon {
  margin-top: clamp(16px, 2.5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(20px, 2.6vw, 30px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(16px, 3vw, 40px);
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.addon__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.addon__name { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; }
.addon__copy { margin: 0; color: var(--muted); font-size: var(--t-sm); line-height: 1.6; max-width: 62ch; }
.addon__buy { display: grid; gap: var(--sp-3); justify-items: end; }
.addon__buy .plan__price { margin: 0; }

@media (max-width: 820px) {
  .pr-grid { grid-template-columns: 1fr; }
  .pr-hiring__body { grid-template-columns: 1fr; }
  .plan__list--two { grid-template-columns: 1fr; }
  .addon { grid-template-columns: 1fr; }
  .addon__buy { justify-items: start; }
}

/* ── Hiring plans ─────────────────────────────────────────────────────────── */
/* Three tiers that differ in ONE number, so the shared feature list lives in a
   band below rather than being repeated per card. Reuses .plan wholesale; only
   the grid width and the minutes block are new. */

.pr-plans__lede { margin: calc(var(--sp-5) * -1) 0 var(--sp-6); max-width: 62ch; }

.pr-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* The minutes block is the ONLY thing that varies between the tiers, so it gets
   the visual weight a feature list would normally carry. Tabular figures keep
   "500", "1,500" and "4,000" on one optical baseline down the row. */
.mins {
  margin: 0 0 var(--sp-5);
  padding: 12px 14px;
  background: var(--teal-50);
  border: 1px solid var(--teal-200);
  border-radius: var(--r-lg);
  display: grid; gap: 3px;
}
.mins__n {
  font-size: 1.05rem; font-weight: 750; letter-spacing: -0.015em;
  color: var(--teal-700); font-variant-numeric: tabular-nums;
}
.mins__sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

/* Scale's two extra rows sit above its CTA; without this they inherit the
   list's large bottom margin and push the button out of line with the others. */
.plan__list--tight { margin-bottom: var(--sp-5); gap: 8px; }

/* ── Wide cards below the tier row ────────────────────────────────────────── */
/* A card like the others, laid out HORIZONTALLY and outside the tier grid. Two
   plans use it: Screen and Custom. The three priced tiers exist to be compared
   side by side, and a fourth column breaks that comparison while making every
   card narrower, so anything that is not a rung on the volume ladder goes here
   instead.

   ⚠️ ONE definition, shared. These two cards have identical geometry at all
   three breakpoints, and giving the second its own copy is how two cards drift
   apart: the next person changes the padding on one and never sees the other. */
.plan--row {
  margin-top: clamp(16px, 2.5vw, 28px);
  flex-direction: row;
  align-items: center;
  gap: clamp(20px, 4vw, 44px);
  padding: clamp(20px, 2.6vw, 28px) clamp(24px, 3vw, 34px);
}
.plan--row__body { flex: 1; min-width: 0; }
.plan--row__body .plan__for { margin: 6px 0 0; max-width: 62ch; }
.plan--row__cta { display: grid; gap: var(--sp-3); justify-items: end; flex: none; }
.plan--row__cta .plan__price { margin: 0; }
/* `.plan .btn { margin-top:auto }` pins CTAs to the bottom of a column card;
   in a row that would drop this button below its own baseline. */
.plan--row .btn { margin-top: 0; }

/* "Let's talk" is words, not a figure, so it must not carry the 2.7rem weight
   the priced tiers use or it shouts louder than the numbers it sits under.
   ⚠️ Scoped to Custom, NOT to `.plan--row`: Screen's $199 IS a figure and
   belongs at full price weight beside the tiers it is an alternative to. */
.plan--custom .plan--row__cta .plan__num { font-size: 1.25rem; font-weight: 750; }

/* ⚠️ The lede links to `#screen`, and the nav is `position: fixed` at 64px, so
   without this the browser scrolls the card's top edge to y=0 and the nav sits
   on top of its heading. The name of the plan is the first thing the link was
   meant to show. A little extra so it does not arrive flush against the bar. */
.plan--screen { scroll-margin-top: calc(var(--nav-h) + 16px); }

/* Screen: the plan with no minutes in it.
   ⚠️ Deliberately quieter than a tier and louder than a footnote. It is a real
   purchasable plan, so it keeps the full card surface and a full-weight price,
   but it carries no `.mins` block, which is the one piece of visual weight the
   tier row uses to say "this is a rung on the ladder". Its absence is the
   whole point and is what stops the card reading as a fourth tier. */
.plan--screen__lede {
  margin: 6px 0 0;
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink-3);
  max-width: 62ch;
}
.plan--screen__has,
.plan--screen__note {
  margin: 10px 0 0;
  max-width: 68ch;
  font-size: var(--t-sm);
  color: var(--muted);
  line-height: 1.6;
}
/* The one line stating what is absent. It gets a rule beside it rather than a
   colour: red would read as an error and grey would let it disappear, and it
   is neither a warning nor small print. It is the plan's defining fact. */
.plan--screen__not {
  margin: 14px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--border-strong);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ink-3);
}

/* ── What every plan includes ─────────────────────────────────────────────── */

.pr-included {
  margin-top: clamp(16px, 2.5vw, 28px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}
.pr-included__hd {
  margin: 0 0 var(--sp-5);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.pr-included code {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px;
  background: var(--teal-50); color: var(--teal-700); padding: 1px 6px; border-radius: var(--r-sm);
}

/* ⚠️ The included list is LABEL + SENTENCE, not a short tick line.

   Both earlier attempts broke because the `<li>` held THREE children: the icon,
   the `<b>`, and a loose text run. A flex row made them three columns competing
   for width; switching to grid was worse, because the loose text became a third
   grid item and wrapped into the narrow `auto` column, where
   `overflow-wrap: anywhere` broke it into ONE LETTER PER LINE.

   Fixed in the MARKUP instead: the label and the sentence are wrapped in a
   single `.feat` span, so the row is just icon + content and the text flows as
   an ordinary paragraph. No grid, and no `overflow-wrap` override -- with one
   child there is nothing left to squeeze.
*/
.pr-included .plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.pr-included .plan__list li .ico { flex: none; margin-top: 3px; }
/* `min-width: 0` lets the span shrink below its longest word; without it a flex
   item refuses to go under its min-content width and pushes the row wide. */
.pr-included .feat { flex: 1; min-width: 0; }
.pr-included .feat b { color: var(--ink); font-weight: 650; }

/* ── Top-up packs ─────────────────────────────────────────────────────────── */
/* A band, not a fourth column: these attach to any plan, and putting them
   beside the tiers would read as a cheaper way to buy the product. */

.topups { margin-top: clamp(16px, 2.5vw, 28px); }
.topups__hd { margin: 0 0 var(--sp-4); font-size: var(--t-sm); color: var(--muted); }
.topups__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 2vw, 20px);
}
.topup {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 16px 18px;
  display: grid; gap: 4px;
}
.topup__n { font-size: var(--t-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.topup__price {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.topup__rate { font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Three columns collapse to one at the SAME breakpoint the seeker grid uses, so
   the page reflows in one step rather than in two staggered ones. */
@media (max-width: 980px) {
  .pr-grid--three { grid-template-columns: 1fr; }
  .topups__list { grid-template-columns: 1fr; }
  /* Back to a column card, with the CTA left-aligned like every other. */
  .plan--row { flex-direction: column; align-items: stretch; gap: var(--sp-4); }
  .plan--row__cta { justify-items: start; }
  /* Stacked, the price sits ABOVE the button and below the body text, so it
     reads as the plan's price rather than as a figure floating in the margin. */
  .plan--row__cta .btn { justify-self: stretch; text-align: center; }
}

/* ── Cross-link between the two pricing pages ─────────────────────────────── */
/* Deliberately quiet and deliberately singular. Each page names the OTHER
   audience once and states a starting price rather than a table, so there is
   exactly one place any figure has to be kept correct. */
.pr-cross {
  margin: clamp(28px, 5vw, 56px) 0 0;
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 30px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px clamp(16px, 3vw, 32px);
}
.pr-cross__t { margin: 0; font-weight: 650; font-size: 1rem; }
.pr-cross__d { margin: 0; flex: 1; min-width: 14rem; color: var(--muted); font-size: var(--t-sm); line-height: 1.55; }
.pr-cross .btn { flex: none; }

/* ── The chooser ──────────────────────────────────────────────────────────── */
/* Two big targets, not two price tables. Reuses `.plan` so the cards match the
   ones on the pages they lead to, but the whole card is the link: a card with a
   button in it invites a miss, and there is nothing else on it to click. */
.choose {
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.choose:hover, .choose:focus-visible {
  border-color: var(--teal-300);
  box-shadow: var(--shadow-teal-lg);
  transform: translateY(-2px);
}
.choose__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid var(--teal-200);
}
.choose .plan__name { font-size: 1.35rem; }
.choose .plan__for { margin-bottom: var(--sp-5); }
/* `margin-top:auto` on `.plan .btn` pins CTAs to the card bottom; this is not a
   button, so it needs the same treatment to line the two cards up. */
.choose__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-sm); font-weight: 650; color: var(--teal-700);
}
@media (prefers-reduced-motion: reduce) {
  .choose, .choose:hover { transition: none; transform: none; }
}