/* /pricing/ in the lit look (owner, 2026-10-21: the "Site 1 - Pricing page" mock-up; "make it that theme and style
   but don't change the features").

   A layer over notebook-pricing.css and pricing-shelf.css, loaded after nb-lit.css, on /pricing/ only. It changes the
   dress, never the page: the words, the per-month figures with what each plan bills, the tax line, the currency line,
   the radios that ARE the plan choice and the form that posts it, the busy and paused states, the Premium student's
   card and the questions all stay as the template and the two sheets underneath make them. What it draws:
   - the headings in the site's one face (Plex), one ink, no kicker over them;
   - the price card as the page's one lit object (nb-lit.css): one centred column, the periods as a segmented switch
     at its top (the thumb a raised white segment, the chosen period in ink), the price a month big and light, Get
     Premium, and what Premium includes as one quiet line;
   - the Stripe and cancel lines, the currency line and the free-chapter line quietly under the card;
   - the library as one sentence, its figures in weight; the questions as a plain list beside their heading.
   Every rule hangs off .nb-pricing (the plain paper behind it through body:has(.nb-pricing)). Tokens only (colours are --nb-* tokens or mixes of them with white); no pill. */

/* ── Plain paper behind the page, as on the homepage: the dot grid means a page of notes ── */
html.theme-light body:has(.nb-pricing),
html:not(.theme-light) body:has(.nb-pricing) { background-image: none; }

/* ── Headings: the site's one face and one ink ────────────────────────── */
.nb-pricing .nb-pricing-title,
.nb-pricing .nb-pricing-h2,
.nb-pricing .nb-pricing-active-title {
  font-family: var(--nb-sans);
  color: var(--nb-ink);
}
.nb-pricing .nb-pricing-title {
  margin-top: 0;
  font-weight: 600;
  font-size: clamp(2.75rem, 5.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.nb-pricing .nb-pricing-lede {
  max-width: 36em;
  margin-top: 22px;
  font-size: clamp(var(--nb-text-md), 1.5vw, var(--nb-text-lg));
  line-height: 1.6;
  color: var(--nb-soft);
}

/* ── The card: one centred column, the page's one lit object ─────────── */
.nb-pricing .nb-pricing-plans-section { margin-top: 56px; }
.nb-pricing .nb-pricing-offer {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 64px) 40px;
  text-align: center;
}
.nb-pricing .nb-pricing-buy {
  padding: 0;
  background: none;
}

/* the periods: a segmented switch, a raised white thumb under the chosen one */
.nb-pricing .nb-pricing-plans {
  width: min(100%, 560px);
  max-width: 100%;
  margin: 0 auto;
  padding: 4px;
  border: 0;
  border-radius: var(--nb-r-lg);
  background: color-mix(in srgb, var(--nb-ink) 6%, transparent);
}
.nb-pricing .pxs-seg-thumb {
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / 3);
  border: 0;
  border-radius: var(--nb-r-md);
  background: color-mix(in srgb, white 9%, var(--nb-paper-raised));
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 6%, transparent);
}
html.theme-light .nb-pricing .pxs-seg-thumb {
  background: white;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--nb-ink) 10%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--nb-ink) 10%, transparent);
}
.nb-pricing .nb-pricing-plan {
  min-height: 0;
  gap: 3px;
  padding: 11px 10px 10px;
  border: 0;
  border-radius: var(--nb-r-md);
}
.nb-pricing .nb-pricing-plan-name {
  font: 500 var(--nb-text-base)/1.2 var(--nb-sans);
  letter-spacing: 0;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-plan-amount {
  font-size: var(--nb-text-sm);
  font-weight: 600;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-plan-per,
.nb-pricing .nb-pricing-plan-total {
  font-size: var(--nb-text-xs);
  font-weight: 400;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-plan:has(.nb-pricing-radio:checked) :is(.nb-pricing-plan-name, .nb-pricing-plan-amount, .nb-pricing-plan-per) {
  color: var(--nb-ink);
}
.nb-pricing .nb-pricing-plan:has(.nb-pricing-radio:checked) .nb-pricing-plan-name { font-weight: 600; }

/* the price a month, big and light; what it bills and the tax line under it */
.nb-pricing .nb-pricing-figure { margin-top: 34px; }
.nb-pricing .nb-pricing-price {
  justify-content: center;
  column-gap: 10px;
}
.nb-pricing .nb-pricing-amount {
  font: 300 clamp(88px, 11vw, 140px)/1 var(--nb-sans);
  letter-spacing: -0.05em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--nb-ink);
}
.nb-pricing .nb-pricing-per {
  font: 300 clamp(24px, 2.4vw, 32px)/1 var(--nb-sans);
  color: var(--nb-soft);
}
/* under it, small: what is charged and how often, then the tax note (owner, 2026-10-22: "a small remark that says
   for yearly"; the homepage card and the Premium dialog print the same two lines) */
.nb-pricing .nb-pricing-bill {
  margin: 16px auto 0;
  font: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  color: var(--nb-ink);
}
.nb-pricing .nb-pricing-tax {
  max-width: 34em;
  margin: 6px auto 0;
  font: 400 var(--nb-text-sm)/1.5 var(--nb-sans);
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-cta {
  width: min(100%, 300px);
  min-height: 58px;
  margin: 32px auto 0;
  padding: 0 32px;
  border-radius: var(--nb-r-lg);
  font-size: var(--nb-text-lg);
}

/* what Premium includes: its heading over the four items, two by two, each opening with its name (nb-lit.css
   .nb-plan-inc), in place of the ticked list; the old rows' tick column and type step aside */
.nb-pricing .nb-pricing-unlocks.nb-plan-inc {
  display: block;
  margin: 36px auto 0;
  padding: 0;
  border: 0;
}
.nb-pricing .nb-plan-inc .nb-pricing-item {
  display: block;
  font-size: var(--nb-text-base);
  line-height: 1.5;
}

/* ── Under the card: quiet lines, words only, parted by a dot (owner, 2026-10-23: the card and the payment icons went with
   "im sure you can make this better") ── */
.nb-pricing .nb-pricing-assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 0;
  margin: 26px auto 0;
}
.nb-pricing .nb-pricing-assure li {
  gap: 0;
  font-size: var(--nb-text-sm);
  font-weight: 400;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-assure li + li::before {
  content: "\00B7";
  margin: 0 12px;
}
.nb-pricing .nb-pricing-terms {
  margin-top: 6px;
  font-weight: 400;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-note {
  margin-top: 22px;
  font-size: var(--nb-text-base);
  font-weight: 500;
  line-height: 1.6;
}
.nb-pricing .nb-pricing-note .nb-link {
  display: inline;
  margin-left: 6px;
}

/* ── The Premium student's card: the lit object on their page, in the homepage card's language (owner, 2026-10-24: "i
   like this but it doesnt match with the homepage"). One centred column as wide as the buyer's card; "Premium active"
   in the success green where the switch stands on the homepage; the subjects it opens as the big light figure where
   the price stands; the plan and its date as the one line under it; the shelf; Continue revising as the homepage's
   Get Premium (300px, 58px, its arrow); the account and billing links as quiet words under it. ── */
.nb-pricing .nb-pricing-active {
  display: block;
  max-width: 760px;
  margin: 0 auto;
  padding: 40px clamp(20px, 5vw, 64px) 36px;
  text-align: center;
}
.nb-pricing .nb-pricing-active-title {
  margin: 0;
  font: 600 var(--nb-text-md)/1.3 var(--nb-sans);
  letter-spacing: -0.005em;
  color: var(--nb-success);
}
.nb-pricing .nb-pricing-active-fig {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 10px;
  margin: 22px 0 0;
}
.nb-pricing .nb-pricing-active-plan {
  margin: 16px auto 0;
  font: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  color: var(--nb-ink);
}
.nb-pricing .nb-pricing-active-sep {
  margin: 0 10px;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-active .pxs-shelf--open {
  margin: 34px 0 0;
}
.nb-pricing .nb-pricing-active .pxs-shelf-cap {
  text-align: center;
  font-weight: 400;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-active .nb-pricing-premium-actions {
  margin-top: 34px;
}
.nb-pricing .nb-pricing-active .nb-pricing-active-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 300px);
  min-width: 0;
  min-height: 58px;
  padding: 0 32px;
  border-radius: var(--nb-r-lg);
  font-size: var(--nb-text-lg);
  font-weight: 600;
}
.nb-pricing .nb-pricing-active-arrow {
  flex: none;
  width: 20px;
  height: 20px;
}
.nb-pricing .nb-pricing-active-links {
  margin: 18px 0 0;
  font: 400 var(--nb-text-sm)/1.5 var(--nb-sans);
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-active-links a {
  color: var(--nb-blue);
  text-decoration: none;
}
@media (hover: hover) {
  .nb-pricing .nb-pricing-active-links a:hover {
    color: var(--nb-blue-strong, var(--nb-blue));
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}
.nb-pricing .nb-pricing-active-links a:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
  border-radius: var(--nb-r-sm);
}

/* ── The library: one sentence ───────────────────────────────────────── */
.nb-pricing .nb-pricing-library { margin-top: clamp(96px, 10vw, 140px); }
.nb-pricing .nb-pricing-h2 {
  margin-top: 0;
  font-weight: 600;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
}
.nb-pricing .nb-pricing-library-line {
  max-width: 34em;
  margin-top: 22px;
  font: 400 clamp(19px, 1.8vw, 23px)/1.55 var(--nb-sans);
  letter-spacing: -0.01em;
  color: var(--nb-soft);
}
.nb-pricing .nb-pricing-library-line .nb-pricing-stat-figure {
  font: inherit;
  font-weight: 600;
  letter-spacing: inherit;
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
}

/* ── The questions: a plain list beside their heading ─────────────────── */
.nb-pricing .nb-pricing-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(96px, 10vw, 140px);
}
.nb-pricing .nb-pricing-faq .nb-pricing-section-head {
  position: sticky;
  top: calc(var(--nb-chrome-h, 72px) + 32px);
  text-align: left;
}
.nb-pricing .nb-pricing-faq-list {
  max-width: none;
  margin: 0;
}
.nb-pricing .nb-pricing-faq-q {
  padding: 20px var(--nb-s8) 20px 0;
  font-size: var(--nb-text-lg);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.nb-pricing .nb-pricing-faq-q::after { top: calc(20px + 0.7em - 6px); }
.nb-pricing .nb-pricing-faq-item[open] .nb-pricing-faq-q::after { top: calc(20px + 0.7em - 2px); }
.nb-pricing .nb-pricing-faq-a {
  padding: 0 var(--nb-s8) 22px 0;
  color: var(--nb-soft);
}

@media (max-width: 900px) {
  .nb-pricing .nb-pricing-faq { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .nb-pricing .nb-pricing-faq .nb-pricing-section-head { position: static; }
}
@media (max-width: 880px) {
  .nb-pricing .nb-pricing-offer { padding: 32px 20px 32px; }
  .nb-pricing .nb-pricing-buy { padding: 0; }
}
@media (max-width: 640px) {
  .nb-pricing .nb-pricing-offer { padding: 24px 12px 28px; }
  .nb-pricing .nb-pricing-plan { padding: 9px 4px 8px; }
  .nb-pricing .nb-pricing-plan-name { font-size: var(--nb-text-sm); }
  .nb-pricing .nb-pricing-cta { width: 100%; }
  .nb-pricing .nb-pricing-assure { flex-direction: column; align-items: center; gap: 4px; }
  .nb-pricing .nb-pricing-assure li + li::before { content: none; }
  .nb-pricing .nb-pricing-faq-a { padding-right: 0; }
}