/* ============================================================
   /pricing/ — rebuilt 1:1 to the owner's two mock-ups
   (2026-10-06: "make the pricing page 1:1 as this ... make it
   functional too"), a buyer's page and a Premium page:

     kicker, headline, lede
     plan tabs over ONE price card (buyer) | the Premium card
     the library: four figures, then what Premium includes
     the questions, as native disclosures

   Website list v1.0, item 5 holds over the picture (owner's pick,
   2026-10-06): no per-month figure, no "Best value", and the tax
   line beside the price.

   The tabs ARE the plan radios. The card shows the figure of the
   checked one through :has(), so the choice reads right with no
   script; pricing.js only guards the submit.

   Layers over notebook-components.css (nb-btn, nb-tick, nb-link)
   and the nb token layer. Test-enforced (pages/tests_notebook.py):
   every class starts nb-, every custom property --nb-pricing-,
   zero raw colours, token font sizes only, no theme forks.
   Fail-safe motion: content ships visible; html.nb-anim (set by a
   head gate only when motion is allowed) opts into the reveals,
   and reduced motion zeroes the --nb-dur-* tokens.
   ============================================================ */
.nb-pricing {
  --nb-pricing-gutter: var(--nb-s6);
  /* The widths, widest first: the library row, the price card and
     the Premium card, the FAQ, the plan tabs. */
  --nb-pricing-shell: 1120px;
  --nb-pricing-card: 940px;
  --nb-pricing-measure: 780px;
  --nb-pricing-tabs: 660px;
  /* Two display sizes off the ladder, both measured off the mock-up
     at 1440: the headline (68px) and the price on the card (60px). */
  --nb-pricing-display: clamp(2.5rem, 4.7vw, 4.25rem);
  --nb-pricing-figure-size: clamp(2.5rem, 4.2vw, 3.75rem);
  /* And the Premium card's title, between the xl and 2xl rungs. */
  --nb-pricing-card-title: 1.6875rem;
  --nb-pricing-sheet-bg: color-mix(in srgb, var(--nb-paper-raised) 72%, var(--nb-paper));
  --nb-pricing-section-space: clamp(72px, 9vh, 104px);
  /* The tick rows' leading lives here because the tick's
     first-line offset is computed from it (.nb-pricing-item). */
  --nb-pricing-row-leading: 1.5;

  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-inline: auto;
  padding-inline: var(--nb-pricing-gutter);
  padding-block: clamp(40px, 6vh, 56px) clamp(48px, 7vh, 64px);
  contain: inline-size;
  overflow-wrap: anywhere;
  color: var(--nb-ink);
  font-family: var(--nb-sans);
  font-size: var(--nb-text-base);
}

.nb-pricing *,
.nb-pricing *::before,
.nb-pricing *::after {
  box-sizing: inherit;
  min-width: 0;
}

.nb-pricing__inner {
  width: 100%;
  max-width: var(--nb-pricing-shell);
  margin-inline: auto;
}

/* ── Kickers: the small spaced capitals over every heading ──── */
.nb-pricing-kicker {
  margin: 0;
  font: var(--nb-type-label);
  font-size: var(--nb-text-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--nb-ink);
}
.nb-pricing-kicker--blue {
  color: var(--nb-blue);
}

/* ── Hero ─────────────────────────────────────────────────── */
.nb-pricing-hero {
  text-align: center;
}
.nb-pricing-title {
  margin: var(--nb-s5) 0 0;
  font: var(--nb-type-display);
  font-size: var(--nb-pricing-display);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
  color: var(--nb-ink);
}
.nb-pricing-title-line {
  display: block;
}
.nb-pricing-title-line--blue {
  color: var(--nb-blue);
}
.nb-pricing-lede {
  margin: var(--nb-s4) auto 0;
  max-width: 680px;
  font-size: var(--nb-text-lg);
  font-weight: 400;
  line-height: 1.55;
  color: var(--nb-ink);
  text-wrap: pretty;
}
.nb-pricing-lede--wide {
  max-width: 780px;
}

/* ── The offer ────────────────────────────────────────────── */
.nb-pricing-plans-section {
  margin-top: var(--nb-s9);
}
.nb-pricing-form {
  margin: 0;
}

/* The plan tabs: one rounded strip, three equal tabs, the chosen
   one drawn in the blue. Each tab is a label around its radio. */
.nb-pricing-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nb-s1);
  max-width: var(--nb-pricing-tabs);
  margin: 0 auto;
  padding: var(--nb-s1);
  background: var(--nb-pricing-sheet-bg);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
}
.nb-pricing-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 68px;
  padding: var(--nb-s2) var(--nb-s3);
  border: 1.5px solid transparent;
  border-radius: var(--nb-r-md);
  text-align: center;
  cursor: pointer;
  scroll-margin-top: calc(var(--nb-chrome-h) + var(--nb-s4));
  transition:
    background-color var(--nb-dur-2) var(--nb-ease),
    border-color var(--nb-dur-2) var(--nb-ease);
}
@media (hover: hover) {
  .nb-pricing-plan:hover {
    background: color-mix(in srgb, var(--nb-ink) 4%, transparent);
  }
}
.nb-pricing-plan:has(.nb-pricing-radio:checked) {
  background: color-mix(in srgb, var(--nb-blue) 14%, var(--nb-paper-raised));
  border-color: var(--nb-blue);
}
.nb-pricing-plan:has(.nb-pricing-radio:focus-visible) {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
/* The native radio stays focusable and keyboard-driven, unseen. */
.nb-pricing-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
}
.nb-pricing-plan-name {
  font: var(--nb-type-label);
  color: var(--nb-ink);
}
.nb-pricing-plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  column-gap: var(--nb-s1);
}
.nb-pricing-plan-amount {
  font-size: var(--nb-text-lg);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--nb-ink);
}
.nb-pricing-plan-per {
  font-size: var(--nb-text-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--nb-ink);
}
/* What the tab's plan actually bills, under its price a month (owner,
   2026-10-12): "$96 every 12 months". */
.nb-pricing-plan-total {
  font-size: var(--nb-text-xs);
  line-height: 1.3;
  color: var(--nb-soft);
}

/* One sheet for the price card and the Premium card. */
.nb-pricing-sheet {
  max-width: var(--nb-pricing-card);
  margin: var(--nb-s5) auto 0;
  background: var(--nb-pricing-sheet-bg);
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-r-lg);
}

/* The price card: what you pay on the left, what you get on the
   right, a rule between them. */
.nb-pricing-offer {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
}
.nb-pricing-buy {
  padding: var(--nb-s8) var(--nb-s9) var(--nb-s7);
}
.nb-pricing-figure {
  display: none;
  margin-top: var(--nb-s3);
  animation: nb-pricing-swap var(--nb-dur-3) var(--nb-ease);
}
.nb-pricing-form:has(.nb-pricing-radio[value="monthly"]:checked) .nb-pricing-figure[data-plan="monthly"],
.nb-pricing-form:has(.nb-pricing-radio[value="3_month"]:checked) .nb-pricing-figure[data-plan="3_month"],
.nb-pricing-form:has(.nb-pricing-radio[value="yearly"]:checked) .nb-pricing-figure[data-plan="yearly"] {
  display: block;
}
@keyframes nb-pricing-swap {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
.nb-pricing-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--nb-s3);
  margin: 0;
}
.nb-pricing-amount {
  font-size: var(--nb-pricing-figure-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* a price must never break mid-number */
  color: var(--nb-ink);
}
.nb-pricing-per {
  font-size: var(--nb-text-lg);
  font-weight: 400;
  white-space: nowrap;
  color: var(--nb-ink);
}
/* Beside every price (Website list v1.0, item 5): the billing
   period and the tax line, in one sentence under the figure. */
.nb-pricing-tax {
  margin: var(--nb-s2) 0 0;
  font-size: var(--nb-text-base);
  font-weight: 500;
  line-height: 1.5;
  color: var(--nb-ink);
  text-wrap: pretty;
}

.nb-pricing-cta {
  display: flex;
  width: 100%;
  min-height: 54px;
  margin-top: var(--nb-s6);
  border-radius: var(--nb-r-pill);
  /* nb-btn ships nowrap for chrome buttons; the locked label must
     wrap rather than run off a 360px screen. */
  white-space: normal;
  text-align: center;
  font: var(--nb-type-control);
  font-size: var(--nb-text-md);
  /* pricing.js scrolls the CTA into view after sign-in returns to a
     plan anchor; this keeps it 8px off the bottom edge. */
  scroll-margin-bottom: var(--nb-s2);
}
/* Working, not inert: the busy state keeps the blue voice (the
   sunken disabled grammar means dead, the opposite of what a
   payment in flight should say). */
.nb-pricing-cta[data-ui-busy="true"],
.nb-pricing-cta[data-ui-busy="true"]:disabled {
  background: var(--nb-blue);
  border-color: transparent;
  color: var(--nb-on-blue);
  cursor: progress;
}

.nb-pricing-assure {
  display: grid;
  gap: var(--nb-s3);
  margin: var(--nb-s5) 0 0;
  padding: 0;
  list-style: none;
}
.nb-pricing-assure li {
  display: flex;
  align-items: center;
  gap: var(--nb-s3);
  font-size: var(--nb-text-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--nb-ink);
}
.nb-pricing-assure svg {
  flex: none;
  width: 24px;
  height: 24px;
}

/* What you get: the rule runs the card's full height, the list
   sits in its middle. */
.nb-pricing-unlocks {
  display: flex;
  align-items: center;
  margin-block: var(--nb-s7);
  padding: var(--nb-s2) var(--nb-s9) var(--nb-s2) var(--nb-s7);
  border-left: 1px solid var(--nb-border);
}
.nb-pricing-list {
  display: grid;
  gap: var(--nb-s6);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* One tick row: the tick in a fixed column, the sentence in the
   other, wrapping INSIDE its own column so the tick always sits
   beside its first line (owner fix 2026-09-24). */
.nb-pricing-item {
  display: grid;
  grid-template-columns: var(--nb-s5) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--nb-s4);
  font-size: var(--nb-text-md);
  line-height: var(--nb-pricing-row-leading);
  color: var(--nb-ink);
}
.nb-pricing-item > span {
  text-wrap: pretty;
}
/* Centred on the sentence's FIRST line box, whatever the text size. */
.nb-pricing-item .nb-tick {
  width: var(--nb-s5);
  height: var(--nb-s5);
  margin-top: calc((var(--nb-pricing-row-leading) * 1em - var(--nb-s5)) / 2);
  color: var(--nb-success);
}
/* Fail-safe tick drawing: ticks ship drawn; only the motion gate
   hides them so the pen can draw each stroke in, staggered. */
.nb-pricing-list .nb-tick-path {
  stroke-dashoffset: 0;
  transition-delay: calc(var(--nb-pricing-i, 0) * var(--nb-dur-1));
}
.nb-anim .nb-pricing-list:not(.nb-is-drawn) .nb-tick-path {
  stroke-dashoffset: 24;
}

.nb-pricing-terms {
  margin: var(--nb-s7) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--nb-text-sm);
  /* one ink: a 13px word at 400 smooths into the night paper and
     reads grey, so it takes 500 (owner, 2026-09-26) */
  font-weight: 500;
  line-height: 1.6;
  color: var(--nb-ink);
  text-wrap: balance;
}
.nb-pricing-note {
  margin: var(--nb-s3) auto 0;
  max-width: 62ch;
  text-align: center;
  font-size: var(--nb-text-md);
  line-height: 1.75;
  color: var(--nb-ink);
}
.nb-pricing-note .nb-link {
  display: table;
  margin-inline: auto;
  white-space: nowrap;
}
.nb-pricing-arrow {
  display: inline-block;
  transition: transform var(--nb-dur-2) var(--nb-ease);
}
@media (hover: hover) {
  .nb-pricing-note .nb-link:hover .nb-pricing-arrow {
    transform: translateX(3px);
  }
}

/* ── The Premium card ─────────────────────────────────────── */
.nb-pricing-active {
  padding: var(--nb-s7) var(--nb-s9) var(--nb-s8);
}
.nb-pricing-active-head {
  display: flex;
  align-items: flex-start;
  gap: var(--nb-s7);
  padding-bottom: var(--nb-s7);
  border-bottom: 1px solid var(--nb-border);
}
.nb-pricing-active-disc {
  display: grid;
  flex: none;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--nb-r-pill);
  background: var(--nb-m-green);
  color: var(--nb-on-blue);
}
.nb-pricing-active-disc svg {
  width: 26px;
  height: 26px;
}
.nb-pricing-active-title {
  margin: var(--nb-s1) 0 0;
  font: var(--nb-type-headline);
  font-size: var(--nb-pricing-card-title);
  color: var(--nb-ink);
}
.nb-pricing-active-note {
  margin: var(--nb-s2) 0 0;
  font-size: var(--nb-text-lg);
  line-height: 1.5;
  color: var(--nb-ink);
}
/* The plan, the date and the billing link: first at the left
   edge, last at the right, a rule halfway between each pair. */
.nb-pricing-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nb-s4);
  padding-block: var(--nb-s6);
}
.nb-pricing-meta-cell {
  display: inline-flex;
  align-items: center;
  gap: var(--nb-s3);
  font-size: var(--nb-text-md);
  line-height: 1.4;
  color: var(--nb-ink);
}
.nb-pricing-meta-cell:only-child {
  margin-inline: auto;
}
.nb-pricing-meta-icon {
  flex: none;
  width: 24px;
  height: 24px;
}
.nb-pricing-meta-rule {
  align-self: stretch;
  width: 1px;
  min-height: 36px;
  background: var(--nb-border);
}
.nb-pricing-meta-link {
  border-radius: var(--nb-r-sm);
  color: var(--nb-blue);
  text-decoration: none;
  transition: color var(--nb-dur-1) var(--nb-ease);
}
@media (hover: hover) {
  .nb-pricing-meta-link:hover {
    color: var(--nb-blue-strong);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.nb-pricing-meta-link:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 4px;
}
.nb-pricing-premium-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nb-s4) var(--nb-s7);
  margin-top: var(--nb-s2);
}
.nb-pricing-active-btn {
  min-height: 58px;
  min-width: 200px;
  padding-inline: var(--nb-s8);
  border-radius: var(--nb-r-md);
  font-size: var(--nb-text-md);
}
.nb-pricing-active-btn--ghost {
  background: var(--nb-pricing-sheet-bg);
  border-color: color-mix(in srgb, var(--nb-blue) 42%, var(--nb-border));
  color: var(--nb-ink);
  font-size: var(--nb-text-base);
  font-weight: 500;
}
@media (hover: hover) {
  .nb-pricing-active-btn--ghost:hover {
    border-color: var(--nb-blue);
    background: var(--nb-blue-wash);
    transform: translateY(-1px);
  }
}

/* ── Section heads (the library, the questions) ───────────── */
.nb-pricing-section-head {
  text-align: center;
}
.nb-pricing-h2 {
  margin: var(--nb-s4) 0 0;
  font: var(--nb-type-headline);
  font-size: var(--nb-text-3xl);
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--nb-ink);
}
.nb-pricing-section-lede {
  margin: var(--nb-s5) auto 0;
  max-width: 620px;
  font-size: var(--nb-text-md);
  line-height: 1.55;
  color: var(--nb-ink);
  text-wrap: balance;
}

/* ── The library ──────────────────────────────────────────── */
.nb-pricing-library {
  margin-top: var(--nb-pricing-section-space);
}
/* Four columns with a rule between each. The same CONTENT_STATS
   floors the homepage renders, so the two pages cannot disagree.
   Each figure's icon wears one colour, as the mock-up draws them
   (periwinkle, green, amber, rose), and nothing else does. The
   resource hues stay on the hub (tests_notebook), so these
   come from the theme's own tinted tokens, never a violet. */
.nb-pricing-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--nb-s9) 0 0;
  padding: 0;
  list-style: none;
}
.nb-pricing-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--nb-s6);
  text-align: center;
}
.nb-pricing-stat + .nb-pricing-stat {
  border-left: 1px solid var(--nb-border);
}
.nb-pricing-stat-icon {
  width: 42px;
  height: 42px;
  margin-bottom: var(--nb-s3);
  stroke-width: 2;
}
.nb-pricing-stat--flashcards .nb-pricing-stat-icon {
  color: var(--nb-adm-example);
}
.nb-pricing-stat--questions .nb-pricing-stat-icon {
  color: var(--nb-m-green);
}
.nb-pricing-stat--mcqs .nb-pricing-stat-icon {
  color: var(--nb-desk-amber);
}
.nb-pricing-stat--subjects .nb-pricing-stat-icon {
  color: var(--nb-adm-mnemonic);
}
.nb-pricing-stat-figure {
  font-size: var(--nb-text-3xl);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* a figure must never break mid-number */
  color: var(--nb-ink);
}
.nb-pricing-stat-label {
  margin-top: var(--nb-s2);
  font: var(--nb-type-title);
  font-size: var(--nb-text-md);
  color: var(--nb-ink);
}
.nb-pricing-stat-desc {
  margin-top: var(--nb-s3);
  max-width: 22ch;
  font-size: var(--nb-text-base);
  line-height: 1.55;
  color: var(--nb-ink);
  text-wrap: balance;
}

/* What Premium includes: under a full-width rule, two columns
   split by a rule, each list centred in its half. */
.nb-pricing-includes {
  margin-top: var(--nb-s7);
  padding-top: var(--nb-s6);
  border-top: 1px solid var(--nb-border);
  text-align: center;
}
.nb-pricing-includes-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--nb-s5);
}
.nb-pricing-includes-col {
  display: grid;
  align-content: center;
  justify-content: center;
  gap: var(--nb-s6);
  margin: 0;
  padding: var(--nb-s2) var(--nb-s6);
  list-style: none;
  text-align: left;
}
.nb-pricing-includes-col + .nb-pricing-includes-col {
  border-left: 1px solid var(--nb-border);
}
.nb-pricing-includes-col li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  column-gap: var(--nb-s5);
  max-width: 420px;
  font-size: var(--nb-text-md);
  line-height: 1.5;
  color: var(--nb-ink);
}
.nb-pricing-includes-col svg {
  width: 30px;
  height: 30px;
  color: var(--nb-blue);
}

/* ── FAQ ──────────────────────────────────────────────────────
   Native <details>/<summary>: the keyboard comes free, so the
   only work is the chevron (two borders, so it can rotate). Rows
   are ruled top and bottom, no fill. */
.nb-pricing-faq {
  margin-top: var(--nb-pricing-section-space);
}
.nb-pricing-faq-list {
  display: flex;
  flex-direction: column;
  max-width: var(--nb-pricing-measure);
  margin: var(--nb-s7) auto 0;
  border-bottom: 1px solid var(--nb-border);
}
.nb-pricing-faq-item {
  border-top: 1px solid var(--nb-border);
}
.nb-pricing-faq-q {
  position: relative;
  padding: 10px var(--nb-s8) 10px var(--nb-s2);
  cursor: pointer;
  list-style: none;
  font-size: var(--nb-text-md);
  font-weight: 700;
  line-height: 1.4;
  color: var(--nb-ink);
}
.nb-pricing-faq-q::-webkit-details-marker {
  display: none;
}
.nb-pricing-faq-q::after {
  content: "";
  position: absolute;
  top: calc(var(--nb-s3) + 0.7em - 6px);
  inset-inline-end: var(--nb-s3);
  width: 9px;
  height: 9px;
  border-right: 1.75px solid var(--nb-ink);
  border-bottom: 1.75px solid var(--nb-ink);
  transform: rotate(45deg);
  transition:
    transform var(--nb-dur-2) var(--nb-ease),
    border-color var(--nb-dur-2) var(--nb-ease);
}
.nb-pricing-faq-item[open] .nb-pricing-faq-q::after {
  top: calc(var(--nb-s3) + 0.7em - 2px);
  border-color: var(--nb-blue);
  transform: rotate(-135deg);
}
.nb-pricing-faq-q:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: -2px;
  border-radius: var(--nb-r-sm);
}
.nb-pricing-faq-a {
  margin: 0;
  padding: 0 var(--nb-s2) var(--nb-s4);
  max-width: 62ch;
  font-size: var(--nb-text-md);
  line-height: 1.6;
  color: var(--nb-ink);
}
.nb-anim .nb-pricing-faq-item[open] .nb-pricing-faq-a {
  animation: nb-pricing-swap var(--nb-dur-3) var(--nb-ease);
}

/* ── Motion (fail-safe; durations are tokens, zeroed under
      reduced motion) ──────────────────────────────────────── */
.nb-anim .nb-pricing-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--nb-dur-3) var(--nb-ease),
    transform var(--nb-dur-3) var(--nb-ease);
  transition-delay: calc(var(--nb-pricing-i, 0) * var(--nb-dur-1));
}
.nb-anim .nb-pricing-reveal.nb-is-visible {
  opacity: 1;
  transform: none;
}

/* ── Responsive ───────────────────────────────────────────── */
/* The floating theme button (fixed, right 24px, 46px wide, shown
   from 1024px up) must never sit on the library row: the gutter
   ends the shell 8px left of it (24 + 46 + 8 = 78px), and never
   less than the space the centred shell already leaves, so the
   band has no step at either end. */
@media (min-width: 1024px) and (max-width: 1275px) {
  .nb-pricing {
    --nb-pricing-gutter: max(78px, (100% - 1120px) / 2);
  }
}
@media (max-width: 880px) {
  .nb-pricing {
    --nb-pricing-section-space: 64px;
  }
  .nb-pricing-offer {
    grid-template-columns: minmax(0, 1fr);
  }
  .nb-pricing-buy {
    padding: var(--nb-s7) var(--nb-s7) var(--nb-s6);
  }
  .nb-pricing-unlocks {
    margin: 0 var(--nb-s7);
    padding: var(--nb-s6) 0 var(--nb-s7);
    border-left: 0;
    border-top: 1px solid var(--nb-border);
  }
  .nb-pricing-list {
    gap: var(--nb-s4);
  }
  /* html already reserves the chrome for an anchor jump. */
  .nb-pricing-plan {
    scroll-margin-top: 0;
  }
  .nb-pricing-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: var(--nb-s8);
  }
  .nb-pricing-stat:nth-child(odd) {
    border-left: 0;
  }
  .nb-pricing-active {
    padding: var(--nb-s6) var(--nb-s6) var(--nb-s7);
  }
}
@media (max-width: 720px) {
  .nb-pricing-includes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--nb-s5);
  }
  .nb-pricing-includes-col {
    justify-content: start;
    gap: var(--nb-s5);
    padding: 0;
  }
  .nb-pricing-includes-col + .nb-pricing-includes-col {
    border-left: 0;
  }
  .nb-pricing-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--nb-s3);
  }
  .nb-pricing-meta-rule {
    display: none;
  }
  .nb-pricing-meta-cell:only-child {
    margin-inline: 0;
  }
  .nb-pricing-premium-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 560px) {
  .nb-pricing {
    --nb-pricing-gutter: var(--nb-s4);
  }
  /* Three tabs in a phone's width: the period goes under the
     figure instead of beside it. */
  .nb-pricing-plan {
    padding-inline: var(--nb-s1);
  }
  .nb-pricing-plan-price {
    flex-direction: column;
    align-items: center;
  }
  .nb-pricing-plan-per {
    white-space: normal;
  }
  .nb-pricing-buy {
    padding: var(--nb-s6) var(--nb-s5) var(--nb-s5);
  }
  .nb-pricing-unlocks {
    margin-inline: var(--nb-s5);
  }
  .nb-pricing-stat {
    padding-inline: var(--nb-s3);
  }
  .nb-pricing-active-head {
    gap: var(--nb-s4);
  }
  .nb-pricing-active-disc {
    width: 44px;
    height: 44px;
  }
}
/* Under 375px the headline's floor cannot hold "Chapter 1 is
   free." on one line; one step down the ladder it takes two. */
@media (max-width: 374px) {
  .nb-pricing-title {
    font-size: var(--nb-text-3xl);
  }
}
/* Touch targets (44px) on a coarse pointer. */
@media (pointer: coarse) {
  .nb-pricing-note .nb-link {
    position: relative;
  }
  .nb-pricing-note .nb-link::before {
    content: "";
    position: absolute;
    inset: -11px 0;
  }
  .nb-pricing-premium-actions .nb-btn {
    min-height: 44px;
  }
}