/* Plot45 — pricing.css
   The pricing page is a SELLING page, so it lives in the landing family
   (suite.css) rather than the app's austere Broadsheet stylesheet: it gets the
   site header, the shared footer and the yellow brand language, and it sits
   beside teachers.html, which is where most buyers arrive from.

   It is allowed to be warmer than the app rooms. What it is not allowed to be
   is pushy: no invented scarcity, no ticking clocks, no pre-selected extras,
   no buried cancellation. Every number here is a number we actually charge,
   and the reassurances below the buttons are all things a buyer can hold us to. */

.prc { padding: clamp(34px, 6vw, 62px) 0 clamp(56px, 8vw, 92px); }

/* ── the opening ──────────────────────────────────────────────────────────── */
.prc__head { text-align: center; max-width: 720px; margin: 0 auto clamp(30px, 4vw, 44px); }
.prc__head h1 { font-size: clamp(34px, 5.2vw, 54px); line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 14px; }
.prc__dek { color: var(--muted); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; margin: 0; }

/* The launch note. A quiet strip, not a countdown: the date is real and stated
   once, which is the whole of the urgency we are entitled to. */
.prc__launchline {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  margin: 22px auto 0; padding: 9px 16px;
  background: var(--brand-45); color: var(--brand-45-ink);
  border-radius: 999px; font-size: 14px; font-weight: 650;
}
.prc__launchline em { font-style: normal; font-weight: 550; opacity: 0.82; }

/* ── the three plans ──────────────────────────────────────────────────────── */
.prc__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  align-items: start; max-width: 1080px; margin: 0 auto;
}
.prc__card {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line-strong); border-radius: var(--radius-plate);
  background: var(--panel); padding: 28px 26px 26px; position: relative;
}
/* The Teacher plan stands slightly forward because it is the product most of
   this page is about, and its ribbon says what it IS ("For one class"), not how
   popular it is. An earlier draft said "Most teachers choose this", which was a
   claim about customer behaviour made while we have no customers: false, and
   exactly the invented social proof the note at the top of this file refuses.
   The other two plans keep their full descriptions and their own buttons. */
.prc__card--feature {
  border: 2px solid var(--ink); box-shadow: 0 18px 40px -28px rgba(16, 18, 22, 0.5);
}
.prc__ribbon {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 14px; border-radius: 999px;
  background: var(--ink); color: var(--ink-text);
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
/* In dark mode the ink border and ribbon are nearly the colour of the page, so
   the recommended plan ended up looking LESS prominent than the two beside it.
   The brand yellow does the emphasising instead, which also ties the card to
   the launch pill above it. */
[data-theme="dark"] .prc__card--feature {
  border-color: var(--brand-45);
  box-shadow: 0 18px 44px -30px rgba(255, 219, 0, 0.45);
}
[data-theme="dark"] .prc__ribbon { background: var(--brand-45); color: var(--brand-45-ink); }
.prc__plan { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.prc__pricerow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.prc__price { font-size: clamp(38px, 4.4vw, 48px); font-weight: 780; letter-spacing: -0.035em; line-height: 1; color: var(--text); }
.prc__price--sm { font-size: clamp(30px, 3.4vw, 38px); }
/* "By quote" is words, not a figure, so it takes the weight of a heading rather
   than the weight of a price. The School plan carries no published number: the
   old "from $799" was an anchor nobody had ever been charged, and it priced a
   four-teacher department as though it were a large one (founder call,
   2026-08-18). */
.prc__price--quote { font-size: clamp(26px, 2.8vw, 32px); letter-spacing: -0.02em; }
.prc__was { font-size: 22px; font-weight: 600; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 2px; }
.prc__from { font-size: 15px; font-weight: 600; color: var(--muted); }
/* The billing period, sitting against the figure itself. Without it a large
   "$79" reads as a monthly price to anyone used to monthly software, and they
   price us at twelve times the truth before they reach the line below (founder
   catch, 2026-08-18). */
.prc__period { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.prc__per { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 10px 0 0; }
.prc__per strong { color: var(--text); font-weight: 700; }
.prc__after {
  margin: 10px 0 0; font-size: 14px; color: var(--muted); line-height: 1.55;
  /* The renewal price is the single most important honesty on this page, so it
     is set in the same colour as the body text rather than a lighter aside. A
     price that only appears in the small print is the pattern we refuse. */
}

.prc__feat { list-style: none; margin: 22px 0 0; padding: 0; }
.prc__feat li { position: relative; padding: 8px 0 8px 27px; line-height: 1.5; font-size: 15px; }
.prc__feat li::before {
  content: ""; position: absolute; left: 3px; top: 14px; width: 11px; height: 6px;
  border-left: 2.2px solid var(--app-plot); border-bottom: 2.2px solid var(--app-plot);
  transform: rotate(-45deg);
}
.prc__spring { margin-top: auto; }

/* the extra-seat stepper */
.prc__seats {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding: 14px 0; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--muted);
}
.prc__seats__ctl { display: inline-flex; align-items: center; gap: 10px; }
.prc__seats__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; min-width: 30px; height: 30px; padding: 0;
  font: inherit; font-size: 17px; line-height: 1; color: var(--text);
  background: none; border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer;
}
.prc__seats__btn:hover:not(:disabled) { border-color: var(--text); }
.prc__seats__btn:disabled { opacity: 0.3; cursor: default; }
.prc__seats__n { min-width: 34px; text-align: center; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); font-size: 16px; }

.prc__cta { width: 100%; margin-top: 16px; }
.prc__cta + .prc__cta { margin-top: 9px; }
.prc__ctafoot { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); line-height: 1.5; min-height: 1.2em; }

/* ── the reassurance row ──────────────────────────────────────────────────── */
.prc__promises {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 1080px; margin: clamp(38px, 5vw, 56px) auto 0;
  padding-top: clamp(30px, 4vw, 40px); border-top: 1px solid var(--line);
}
.prc__promise h3 { margin: 0 0 5px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.prc__promise p { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ── questions ────────────────────────────────────────────────────────────── */
.prc__faq { max-width: 820px; margin: clamp(44px, 6vw, 68px) auto 0; }
.prc__faq h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.02em; margin: 0 0 22px; text-align: center; }
.prc__q { border-top: 1px solid var(--line); padding: 20px 0; }
.prc__q:last-child { border-bottom: 1px solid var(--line); }
.prc__q h3 { margin: 0 0 7px; font-size: 16.5px; font-weight: 700; letter-spacing: -0.01em; }
.prc__q p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 15px; }
.prc__q a { color: var(--text); }

.prc__note { max-width: 820px; margin: clamp(34px, 4vw, 46px) auto 0; color: var(--faint); font-size: 13.5px; line-height: 1.7; }
.prc__note a { color: var(--muted); }

/* ── narrower screens ─────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .prc__grid { grid-template-columns: 1fr; max-width: 520px; }
  .prc__card--feature { order: -1; }        /* the recommended plan leads on a phone */
  .prc__promises { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 520px) {
  .prc__promises { grid-template-columns: 1fr; }
  .prc__seats { flex-direction: column; align-items: flex-start; gap: 10px; }
}