/* THE PRICING PAGE, on the tokens ks-tokens.v1.css already publishes.
 *
 * Loaded directly by dist/pricing/index.html, alongside ks-home-v20.v1.css
 * whose section, shell, button and heading classes this page reuses wholesale.
 * Only what is genuinely new to a pricing page lives here — the band grid, the
 * interval control, the fee panel and the questions — which is why this file is
 * short. A second copy of the button system would be the failure to avoid.
 *
 * Registered in tests/repo/every-stylesheet-is-reachable.spec.ts under
 * DIRECTLY_LINKED, because this page links it rather than the tenant bundles.
 * A stylesheet nobody links mirrors into dist/ and loads nowhere, silently,
 * which is exactly what that spec exists to stop.
 *
 * MOBILE FIRST, and not as a slogan: the base rules below are the phone
 * layout, and every media query widens rather than narrows. A dojo owner reads
 * a pricing page on the phone in their hand between classes.
 *
 * NO COLOUR IS DEFINED HERE. Every value is a token, so the page follows the
 * platform palette and the contrast clamps that come with it.
 */

/* ── 1 · THE OFFER HEAD ─────────────────────────────────────────────────── */

.pr-head {
  padding-block: clamp(2.5rem, 7vw, 5rem) clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}
.pr-head .v20-eyebrow { justify-content: center; }
/* The h1 breaks to a second line on its own span, as the homepage h1 does, so
   the two pages carry one voice rather than two typographic ideas. */
.pr-h1 { margin: 0 0 var(--ks-s-4); }
.pr-h1 span { display: block; color: var(--primary); }
.pr-lede { margin-inline: auto; max-width: 46rem; }

.pr-trial {
  margin: var(--ks-s-5) auto 0;
  max-width: 42rem;
  padding: var(--ks-s-3) var(--ks-s-4);
  border: 1px solid var(--line);
  border-radius: var(--ks-r-md);
  background: var(--surface-sunken);
  color: var(--ink-2);
  font-size: var(--ks-t-sm);
}
.pr-trial b { color: var(--ink); }

/* ── 2 · THE INTERVAL CONTROL ───────────────────────────────────────────────
   A segmented control built from a real radio group. The inputs are visually
   hidden but never display:none and never removed from the tab order — a
   keyboard user arrows between them exactly as the semantics promise, and the
   visible state is driven by :checked on the adjacent label. */

.pr-toggle { border: 0; margin: var(--ks-s-6) 0 0; padding: 0; }
.pr-toggle-in {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--ks-r-pill);
  background: var(--surface-sunken);
}
.pr-toggle input {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.pr-toggle label {
  display: inline-flex; align-items: center; gap: var(--ks-s-2);
  padding: .55rem 1.15rem;
  border-radius: var(--ks-r-pill);
  font-size: var(--ks-t-sm); font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--ks-fast) var(--ks-ease),
              color var(--ks-fast) var(--ks-ease);
}
.pr-toggle input:checked + label {
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--ks-e1);
}
/* Focus is drawn on the LABEL because the input it belongs to is the hidden
   one. Without this the control is operable by keyboard and invisible to it,
   which is the worse half of the two failures. */
.pr-toggle input:focus-visible + label { outline: var(--ks-ring); outline-offset: 2px; }

.pr-save {
  padding: .12rem .5rem;
  border-radius: var(--ks-r-pill);
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: var(--ks-t-xs); font-weight: 800;
  letter-spacing: var(--ks-track-label); text-transform: uppercase;
}

/* ── 3 · THE BANDS ──────────────────────────────────────────────────────── */

.pr-plans { padding-top: clamp(1.5rem, 4vw, 2.5rem); }

.pr-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: var(--ks-s-4);
  /* One column on a phone. `minmax(0, 1fr)` rather than a bare `1fr`, because
     a bare 1fr is minmax(AUTO, 1fr) and a long word inside a card can then
     push the track wider than its container — the mobile-cascade defect this
     repository has already paid for once. */
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) { .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .pr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ks-s-3); } }

.pr-card {
  display: flex; flex-direction: column;
  padding: var(--ks-s-5);
  border: 1px solid var(--line);
  border-radius: var(--ks-r-lg);
  background: var(--surface-raised);
  box-shadow: var(--ks-e1);
}
.pr-card-featured {
  border-color: var(--primary);
  box-shadow: var(--ks-e3);
}
.pr-flag {
  align-self: flex-start;
  margin: 0 0 var(--ks-s-2);
  padding: .15rem .6rem;
  border-radius: var(--ks-r-pill);
  background: var(--primary); color: var(--ks-white);
  font-size: var(--ks-t-xs); font-weight: 800;
  letter-spacing: var(--ks-track-label); text-transform: uppercase;
}
/* The featured card carries a flag the others do not, so without this its
   name would sit lower than its neighbours' on a wide grid. */
@media (min-width: 1040px) {
  .pr-card:not(.pr-card-featured) .pr-name { margin-top: calc(var(--ks-t-xs) + .3rem + var(--ks-s-2)); }
}

.pr-name {
  margin: 0;
  font-family: var(--ks-display);
  font-size: var(--ks-t-h3); font-weight: 800;
  color: var(--ink);
}
.pr-band {
  margin: var(--ks-s-1) 0 var(--ks-s-4);
  font-size: var(--ks-t-sm); color: var(--ink-3); font-weight: 600;
}

.pr-price { margin: 0; display: flex; align-items: baseline; gap: .25rem; flex-wrap: wrap; }
.pr-amount {
  font-family: var(--ks-display);
  /* Clamped rather than fixed so four cards never force a horizontal scroll on
     a 320px phone, and never look timid on a desktop. */
  font-size: clamp(2.1rem, 7vw, 2.6rem);
  font-weight: 800; line-height: 1;
  color: var(--ink);
  /* The number is the one thing on this page that changes under the reader's
     finger. Tabular figures stop the card from reflowing as it does. */
  font-variant-numeric: tabular-nums;
}
.pr-per { font-size: var(--ks-t-sm); color: var(--ink-3); font-weight: 600; }
.pr-equiv {
  margin: var(--ks-s-2) 0 0;
  font-size: var(--ks-t-xs); color: var(--ink-3);
}

/* margin-top:auto pins every call to action to the bottom of its card, so the
   four buttons line up across a row whose notes are different lengths. */
.pr-cta { margin-top: auto; width: 100%; }
.pr-card .pr-cta { margin-top: var(--ks-s-5); }
@media (min-width: 640px) { .pr-card .pr-cta { margin-top: auto; } }
.pr-note {
  margin: var(--ks-s-3) 0 0;
  font-size: var(--ks-t-xs); color: var(--ink-3);
}

/* ── Enterprise ─────────────────────────────────────────────────────────── */

.pr-ent {
  margin-top: var(--ks-s-4);
  padding: var(--ks-s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--ks-r-lg);
  background: var(--surface-sunken);
  display: flex; flex-direction: column; gap: var(--ks-s-4);
  align-items: flex-start;
}
@media (min-width: 720px) {
  .pr-ent { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--ks-s-6); }
}
.pr-ent-copy p { margin: var(--ks-s-2) 0 0; color: var(--ink-2); font-size: var(--ks-t-sm); max-width: 48rem; }
.pr-ent .v20-btn { flex-shrink: 0; }

.pr-counted {
  margin: var(--ks-s-5) 0 0;
  text-align: center;
  font-size: var(--ks-t-sm); color: var(--ink-2);
}

/* ── 4 · WHAT IS INCLUDED ───────────────────────────────────────────────── */

/* THE VALUE GROUPS (2026-09-22). The included list used to be twelve equal
   lines in a three-column grid — a wall of ticks that a dojo owner scans
   without reading. It is four named groups now, each answering a question
   somebody actually has ("can it run my week?", "can it grade my students?"),
   with the lines underneath. Two columns at desktop rather than three: the
   group heading is the thing being scanned, and three columns of headings
   reads as a table of contents rather than an answer.

   The list inside each group reuses .pr-incl unchanged, so the tick, the
   spacing and the ink are the same everywhere on the page. */
.pr-groups {
  display: grid; gap: var(--ks-s-7);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) { .pr-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s-7) var(--ks-s-8); } }

.pr-group > .pr-incl { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .pr-group > .pr-incl { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1040px) { .pr-group > .pr-incl { grid-template-columns: minmax(0, 1fr); } }

.pr-group-t {
  margin: 0 0 var(--ks-s-3);
  font-size: var(--ks-t-base);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .01em;
}

/* What is switched on by asking, and what is not open yet. Deliberately NOT
   ticked: these are not things a dojo has on day one, and a tick beside them
   would be the page telling the same half-truth the ticks replaced. */
.pr-extra {
  margin-top: var(--ks-s-8);
  padding-top: var(--ks-s-6);
  border-top: 1px solid var(--ks-line-soft, rgba(15, 23, 42, .12));
}
.pr-extra p {
  margin: 0 0 var(--ks-s-3);
  color: var(--ink-2);
  font-size: var(--ks-t-sm);
  line-height: 1.6;
  max-width: 58rem;
}
.pr-extra b { color: var(--ink); }
/* The headings here sit over paragraphs rather than a list, and a list's own
   top margin was doing the spacing everywhere else — so they need their own. */
.pr-extra .pr-group-t { margin-top: var(--ks-s-6); margin-bottom: var(--ks-s-3); }
.pr-extra .pr-group-t:first-child { margin-top: 0; }

.pr-incl {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--ks-s-4);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 700px) { .pr-incl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ks-s-4) var(--ks-s-6); } }
@media (min-width: 1040px) { .pr-incl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr-incl li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--ink-2);
  font-size: var(--ks-t-sm);
  line-height: 1.55;
}
.pr-incl b { color: var(--ink); display: block; }
/* The tick is a pseudo-element and aria-hidden by nature: a screen reader
   announces twelve list items, not twelve check marks. */
.pr-incl li::before {
  content: "";
  position: absolute; left: 0; top: .34em;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  background: var(--primary-soft);
  box-shadow: inset 0 0 0 1.5px var(--primary);
}
.pr-incl li::after {
  content: "";
  position: absolute; left: .32rem; top: .58em;
  width: .38rem; height: .2rem;
  border-left: 2px solid var(--primary-deep);
  border-bottom: 2px solid var(--primary-deep);
  transform: rotate(-45deg);
}

/* ── 5 · THE FEE ────────────────────────────────────────────────────────── */

.pr-fee { display: grid; gap: var(--ks-s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .pr-fee { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--ks-s-8); } }

.pr-fee-pts { list-style: none; margin: var(--ks-s-5) 0 0; padding: 0; display: grid; gap: var(--ks-s-3); }
.pr-fee-pts li {
  padding-left: var(--ks-s-4);
  border-left: 2px solid var(--line-strong);
  color: var(--ink-2); font-size: var(--ks-t-sm);
}
.pr-fee-pts b { color: var(--ink); }

.pr-fee-card {
  padding: var(--ks-s-6);
  border: 1px solid var(--line);
  border-radius: var(--ks-r-lg);
  background: var(--surface-sunken);
  text-align: center;
}
.pr-fee-k { margin: 0; font-size: var(--ks-t-xs); color: var(--ink-3); font-weight: 700;
  letter-spacing: var(--ks-track-label); text-transform: uppercase; }
.pr-fee-v {
  margin: var(--ks-s-2) 0;
  font-family: var(--ks-display);
  font-size: clamp(2.2rem, 8vw, 3rem); font-weight: 800; line-height: 1;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.pr-fee-n { margin: 0; font-size: var(--ks-t-xs); color: var(--ink-3); line-height: 1.5; }

/* ── 6 · QUESTIONS ──────────────────────────────────────────────────────── */

.pr-faq { max-width: 52rem; margin-inline: auto; display: grid; gap: var(--ks-s-2); }
.pr-faq details {
  border: 1px solid var(--line);
  border-radius: var(--ks-r-md);
  background: var(--surface-raised);
}
.pr-faq summary {
  /* list-style on the element plus the WebKit pseudo — Safari ignores the
     first and every other engine ignores the second. */
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--ks-s-4);
  padding: var(--ks-s-4);
  font-weight: 700; color: var(--ink); font-size: var(--ks-t-sm);
  cursor: pointer;
}
.pr-faq summary::-webkit-details-marker { display: none; }
.pr-faq summary::after {
  content: ""; flex-shrink: 0;
  width: .55rem; height: .55rem;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ks-fast) var(--ks-ease);
}
.pr-faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.pr-faq summary:focus-visible { outline: var(--ks-ring); outline-offset: -2px; border-radius: var(--ks-r-md); }
.pr-faq p { margin: 0; padding: 0 var(--ks-s-4) var(--ks-s-4); color: var(--ink-2); font-size: var(--ks-t-sm); line-height: 1.6; }

/* ── 7 · MOTION ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .pr-toggle label,
  .pr-faq summary::after { transition: none; }
}