/* ============================================================
   ANNOTATED NOTEBOOK SKIN — the public family (legacy layouts).
   COLORS ONLY. Covers the homepage (hero, 4-step showcase, stats,
   persuade, steps, pricing panel, final CTA); the pricing page and
   the coming-soon preview join this file as Wave 2 continues.
   Same treatment as the hub + picker skins: structure 1:1,
   notebook ink over it.

   Loaded ONLY when nb_active (pages/includes/nb_public_skin.html),
   after styles.css + the theme-light.css link: rules mirror legacy
   selectors under an `html .<section-root>` prefix that TIES
   theme-light.css's `html.theme-light` prefix, so later-in-cascade
   wins in both themes; tokens flip the values.

   Retired-Candy Rule: the per-stage showcase accents
   (--sv-accent-rgb), per-stat / per-step / per-proof palettes
   (--stat-*, --landing-*) and the flashcard question/answer hues all
   collapse into student blue. The showcase's mock CALLOUTS keep the
   semantic admonition palette (--nb-adm-*) because the mock previews
   the real notes product, and the MCQ mock keeps its judgment voices:
   examiner red for "not awarded", --nb-success for "correct" — same
   rules the real study surfaces follow.
   ============================================================ */

/* ── Page is the notebook paper; the light-show layers go dark ── */
html.theme-light body,
html:not(.theme-light) body {
  background-color: var(--nb-paper);
  background-image: radial-gradient(var(--nb-grid-dot) 1px, transparent 1px);
  background-size: var(--nb-grid-size) var(--nb-grid-size);
}
html.theme-light .lp-atmosphere,
html:not(.theme-light) .lp-atmosphere {
  display: none;
}
html .lp-hero,
html .lp-persuade,
html .lp-pricing,
html .lp-final-cta {
  font-family: var(--nb-sans);
}

/* ── Hero: eyebrow, headline, subline, CTA, free note ── */
html .lp-hero .lp-eyebrow {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
  box-shadow: var(--nb-shadow-1);
}
html .lp-hero .lp-eyebrow::after {
  display: none; /* the sheen sweep is retired candy */
}
html .lp-hero .lp-eyebrow .lp-eyebrow-tile {
  background: var(--nb-blue-wash);
  border-color: var(--nb-border);
  color: var(--nb-blue);
}
html .lp-hero .lp-eyebrow.lp-eyebrow--premium {
  background: var(--nb-premium-wash);
  border-color: color-mix(in srgb, var(--nb-premium) 32%, transparent);
  color: var(--nb-premium);
}
html .lp-hero .lp-eyebrow--premium .lp-eyebrow-tile {
  background: var(--nb-paper-raised);
  border-color: color-mix(in srgb, var(--nb-premium) 32%, transparent);
  color: var(--nb-premium);
}
html .lp-hero .lp-headline,
html .lp-hero .lp-headline-line {
  color: var(--nb-ink);
  -webkit-text-fill-color: var(--nb-ink);
}
html .lp-hero .lp-headline-accent {
  background: none;
  color: var(--nb-blue);
  -webkit-text-fill-color: var(--nb-blue);
}
html .lp-hero .lp-subline {
  color: var(--nb-ink);
}
html .lp-hero .lp-free-note,
html .lp-final-cta .lp-free-note {
  color: var(--nb-ink);
}
html .lp-hero .lp-cta-primary,
html .lp-final-cta .lp-cta-primary {
  background: var(--nb-blue);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-sm);
  color: var(--nb-on-blue);
  box-shadow: none;
  text-shadow: none;
}
html .lp-hero .lp-cta-primary:hover,
html .lp-final-cta .lp-cta-primary:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
}
html .lp-hero .lp-cta-primary:focus-visible,
html .lp-final-cta .lp-cta-primary:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}

/* ── Showcase frame — a raised page of the notebook ── */
html .lp-hero .lp-showcase-wrap {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-3);
}
html .lp-showcase-wrap [data-accent="summary"] {
  --lp-role: var(--nb-home-system);
}
html .lp-showcase-wrap [data-accent="notes"] {
  --lp-role: var(--nb-blue);
}
html .lp-showcase-wrap [data-accent="flashcards"] {
  --lp-role: var(--nb-home-recall);
}
html .lp-showcase-wrap [data-accent="questions"] {
  --lp-role: var(--nb-home-check);
}

/* Notes mock — the real product is paper + serif, preview it truthfully */
html .lp-showcase-wrap .lp-sv-note-h1 {
  font-family: var(--nb-serif);
  background: none;
  color: var(--nb-ink);
  -webkit-text-fill-color: var(--nb-ink);
  border-bottom-color: var(--nb-border);
}

/* Callout mocks — the SEMANTIC admonition palette, like the real notes.
   The legacy rgba(var(--co-rgb)) channel mechanism is bypassed: each
   variant re-inks its own surfaces from one --nbco accent. */
html .lp-showcase-wrap .lp-sv-co {
  --nbco: var(--nb-adm-key);
  background: color-mix(in srgb, var(--nbco) 9%, transparent);
  border-color: color-mix(in srgb, var(--nbco) 24%, transparent);
  border-left-color: var(--nbco);
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-co--misconception {
  --nbco: var(--nb-adm-warn);
}
html .lp-showcase-wrap .lp-sv-co--examiner {
  --nbco: var(--nb-adm-insight);
}
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-icon {
  background: none;
  border: 0;
  color: var(--nbco);
}
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-label {
  color: var(--nbco);
}
/* Restored: pass B deleted this with a shared rule whose other member was dead,
   leaving the callout body on a raw near-white that measured 1.18:1 in light. */
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-p {
  color: var(--nb-ink);
}

/* Flashcard mock — both faces are index cards in one blue */
html .lp-showcase-wrap .lp-sv-fc-face {
  background: var(--nb-paper);
  border-color: var(--nb-border);
  border-top-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-2);
}
html .lp-showcase-wrap .lp-sv-fc-face--back {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  border-top-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-2);
}
/* Colour is NOT set here: the rule below at "the accent label must not outrank
   the lifted body ink" supersedes it deliberately. Only the plate removal is
   live from this rule. */
html .lp-showcase-wrap .lp-sv-fc-face .lp-sv-fc-label {
  background: none;
  border-color: transparent;
}
html .lp-showcase-wrap .lp-sv-fc-face .lp-sv-fc-text,
html .lp-showcase-wrap .lp-sv-fc-face p {
  color: var(--nb-ink);
}
/* Split from one shared rule: the hint is a prompt, the sub is a line a reader
   reads, so they no longer share an ink. */
html .lp-showcase-wrap .lp-sv-fc-hint {
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-fc-btn {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-fc-counter {
  color: var(--nb-ink);
}

/* MCQ mock — exam paper: examiner red judges, success confirms */
html .lp-showcase-wrap .lp-sv-mcq-count {
  color: var(--nb-ink);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-mcq-state--incorrect {
  font-family: var(--nb-serif);
  font-style: italic;
  color: var(--nb-red);
  background: var(--nb-red-wash);
  border-color: color-mix(in srgb, var(--nb-red) 25%, transparent);
}
html .lp-showcase-wrap .lp-sv-mcq-num {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 26%, transparent);
  color: var(--nb-blue);
}
html .lp-showcase-wrap .lp-sv-mcq-question {
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-mcq-option {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-mcq-option .lp-sv-mcq-badge {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-mcq-option--incorrect {
  background: var(--nb-red-wash);
  border-color: color-mix(in srgb, var(--nb-red) 30%, transparent);
  color: var(--nb-red);
}
html .lp-showcase-wrap .lp-sv-mcq-option--incorrect .lp-sv-mcq-badge {
  background: var(--nb-red-wash);
  border-color: color-mix(in srgb, var(--nb-red) 34%, transparent);
  color: var(--nb-red);
}
html .lp-showcase-wrap .lp-sv-mcq-option--incorrect .lp-sv-mcq-text {
  color: var(--nb-red);
}
html .lp-showcase-wrap .lp-sv-mcq-option--correct {
  background: color-mix(in srgb, var(--nb-success) 9%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 30%, transparent);
  color: var(--nb-success);
}
/* Wash 12% -> 0: at 12% the letter measured 3.58:1 in light and 5% only reached
   4.19 — the option row's own wash is doing most of the darkening, so the badge
   wash had nothing left to give. The plate stays as a bordered element, which is
   what makes a badge read as a discrete control; only its fill is dropped. */
html .lp-showcase-wrap .lp-sv-mcq-option--correct .lp-sv-mcq-badge {
  background: transparent;
  border-color: color-mix(in srgb, var(--nb-success) 34%, transparent);
  color: var(--nb-success);
}
html .lp-showcase-wrap .lp-sv-mcq-option--correct .lp-sv-mcq-text {
  color: var(--nb-success);
}
/* MCQ reveal. The stage reads as already-answered; this plays it out once per
   activation so it reads as someone answering. Colour only — the keyframes
   declare ONLY a `from`, so the implicit `to` is each element's own computed
   style and `backwards` fill means the end state is byte-identical to no
   animation at all. Nothing here touches layout. */
@keyframes lp-sv-mcq-row-in {
  from {
    background: var(--nb-paper-sunken);
    border-color: var(--nb-border);
    color: var(--nb-ink-2);
  }
}

@keyframes lp-sv-mcq-badge-in {
  from {
    background: var(--nb-paper-raised);
    border-color: var(--nb-border);
    color: var(--nb-ink-2);
  }
}

@keyframes lp-sv-mcq-ink-in {
  from { color: var(--nb-ink-2); }
}

html .lp-showcase-wrap .lp-sv-stage--active .lp-sv-mcq-option--incorrect {
  animation: lp-sv-mcq-row-in 0.34s ease 0.30s backwards;
}
html .lp-showcase-wrap .lp-sv-stage--active .lp-sv-mcq-option--incorrect .lp-sv-mcq-badge {
  animation: lp-sv-mcq-badge-in 0.34s ease 0.30s backwards;
}
html .lp-showcase-wrap .lp-sv-stage--active .lp-sv-mcq-option--incorrect .lp-sv-mcq-text {
  animation: lp-sv-mcq-ink-in 0.34s ease 0.30s backwards;
}
html .lp-showcase-wrap .lp-sv-stage--active .lp-sv-mcq-option--correct {
  animation: lp-sv-mcq-row-in 0.34s ease 0.62s backwards;
}
html .lp-showcase-wrap .lp-sv-stage--active .lp-sv-mcq-option--correct .lp-sv-mcq-badge {
  animation: lp-sv-mcq-badge-in 0.34s ease 0.62s backwards;
}
html .lp-showcase-wrap .lp-sv-stage--active .lp-sv-mcq-option--correct .lp-sv-mcq-text {
  animation: lp-sv-mcq-ink-in 0.34s ease 0.62s backwards;
}

html .lp-showcase-wrap .lp-sv-mcq-option--dimmed {
  background: transparent;
  border-color: var(--nb-border);
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-mcq-option--dimmed .lp-sv-mcq-badge {
  background: transparent;
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-mcq-option--correct .lp-sv-mcq-mark {
  color: var(--nb-success);
  background: color-mix(in srgb, var(--nb-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 22%, transparent);
}
html .lp-showcase-wrap .lp-sv-mcq-option--incorrect .lp-sv-mcq-mark {
  color: var(--nb-red);
  background: var(--nb-red-wash);
  border-color: color-mix(in srgb, var(--nb-red) 22%, transparent);
}
html .lp-showcase-wrap .lp-sv-mcq-verdict {
  border-bottom-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-mcq-verdict--incorrect {
  font-family: var(--nb-serif);
  font-style: italic;
  color: var(--nb-red);
  background: var(--nb-red-wash);
  border-bottom-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-mcq-explanation + .lp-sv-mcq-explanation {
  border-top-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-mcq-explanation--incorrect .lp-sv-mcq-explanation-label {
  color: var(--nb-red);
}
html .lp-showcase-wrap .lp-sv-mcq-explanation--correct .lp-sv-mcq-explanation-label {
  color: var(--nb-success);
}
/* The explanation IS the <p> since pass C, so the "explanation p" rule below no
   longer matches anything and the element fell back to a hardcoded #151A2D —
   1.14:1 in dark. This restores it on a token. */
html .lp-showcase-wrap .lp-sv-mcq-explanation {
  color: var(--nb-ink);
}

/* Panel header — one framing line, four tabs. The active tab is the only
   role-coloured element in the header; inactive tabs stay neutral. */
html .lp-showcase-wrap .lp-sv-bezel-title {
  color: var(--nb-ink);
}
/* Screen stays on --nb-paper. --nb-paper-sunken was tried and reverted: in dark
   it moved deltaL only 0.0058 -> 0.0076 (there is almost no room left below
   #0F1013), while in light it overshot to 0.1218 and pushed the misconception
   callout label to 4.38:1, under AA. Deepening the screen is the wrong lever;
   lightening the bezel is the one with headroom. */
html .lp-showcase-wrap .lp-sv-screen {
  background: var(--nb-paper);
  border-top-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-tab {
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-tab:hover {
  color: var(--nb-ink-2);
}
/* One underline for all four tabs. DESIGN.md's Retired-Candy Rule permits role
   colour on "showcase state indicators", so this deliberately NARROWS that
   documented exception: the same rule reserves blue for "actions, links, focus,
   progress, and persistent selection", and an active tab is persistent
   selection. A hue that changes per tab reads as inconsistency, not intent. */
html .lp-showcase-wrap .lp-sv-tab--active {
  color: var(--nb-ink);
  border-bottom-color: var(--nb-blue);
}

/* Study loop — the tutor node carries the stage's own dispatched role, so the
   stage stays monochrome and a role remap needs no edit here. */
/* Decorative accents collapse to one. The tutor node is identity, not meaning:
   nothing about it is correct/incorrect/warning, so it takes the single blue. */
html .lp-showcase-wrap .lp-sv-loop-node--tutor rect {
  stroke: var(--nb-blue);
}
html .lp-showcase-wrap .lp-sv-loop-node--tutor text {
  fill: var(--nb-blue);
}


/* Ink lift: content the reader reads sits on --nb-ink, genuine secondary on
   --nb-ink-2, only true metadata stays on --nb-ink-3. Re-derived against the
   screen (--nb-paper), which is now the surface all of this sits on. */
html .lp-showcase-wrap .lp-sv-mcq-option--dimmed .lp-sv-mcq-text {
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-loop-node text {
  fill: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-loop-caption {
  color: var(--nb-ink);
}
/* The accent label must not outrank the lifted body ink beside it. */
html .lp-showcase-wrap .lp-sv-fc-face .lp-sv-fc-label {
  color: var(--nb-ink-2);
}

/* Showcase bottom chrome */

/* ── Persuade — quiet paper notes ── */
/* The rule below is pinned verbatim by
   tests_notebook.py::test_public_skin_outspecifies_legacy_persuade_surface.
   border-top-color is live: it colours the one rule marking the seam against
   .lp-mark. border-bottom-color is now inert -- styles.css declares no
   bottom border, since .lp-divider draws that seam itself -- but the rule
   stays exactly as written. */
html.theme-light .lp-persuade,
html:not(.theme-light) .lp-persuade {
  background: transparent;
  border-top-color: var(--nb-border);
  border-bottom-color: var(--nb-border);
}
/* theme-light.css paints a white pill behind the kicker (its
   .lp-persuade-eyebrow rule) and white cards behind the rows (.lp-proof and
   .lp-proof:hover). Those were masked by this skin's own card rules until the
   restyle removed them, at which point they surfaced as white blocks on the
   paper in light mode. They are neutralised HERE, at this skin's existing
   specificity, rather than by editing theme-light.css -- that file's HEAD blob
   has corrupt mixed line endings and cannot be staged by hunk.
   Dark is unaffected: theme-light.css does not load in it. */
html .lp-persuade .lp-persuade-eyebrow,
html .lp-persuade .lp-proof,
html .lp-persuade .lp-proof:hover {
  background: none;
  border: 0;
  box-shadow: none;
}

/* The kicker joins the section's ONE ink. It was the last blue thing here, and
   the artifact above tints nothing in its own heading block. */
html .lp-persuade .lp-persuade-eyebrow {
  color: var(--nb-ink);
}
html .lp-persuade .lp-persuade-title {
  color: var(--nb-ink);
}
html .lp-persuade .lp-persuade-body {
  color: var(--nb-ink);
}
html .lp-persuade .lp-proof-title {
  color: var(--nb-ink);
}
html .lp-persuade .lp-proof-body {
  color: var(--nb-ink);
}

/* ── Section divider — a ruled line, not a light beam ── */
html.theme-light .lp-divider,
html:not(.theme-light) .lp-divider {
  background: linear-gradient(90deg, transparent, var(--nb-border-strong) 32%, var(--nb-border-strong) 68%, transparent);
  box-shadow: none;
}

html .lp-pricing .lp-section-header .lp-section-title {
  background: none;
  color: var(--nb-ink);
  -webkit-text-fill-color: var(--nb-ink);
}
html .lp-pricing .lp-section-header .lp-section-sub {
  color: var(--nb-ink);
}

/* ── Pricing panel (shared include: homepage + /pricing) ──
   The panel's palette flows through --lp-price-* custom props;
   re-point them at the notebook, then re-ink the raw-value spots. */
html .lp-pricing .lp-pricing-card,
html .lp-pricing--page .lp-pricing-card {
  --lp-price-card-bg: var(--nb-paper-raised);
  --lp-price-card-border: var(--nb-border);
  --lp-price-card-shadow: var(--nb-shadow-2);
  --lp-price-divider: var(--nb-border);
  --lp-price-surface: var(--nb-paper-sunken);
  --lp-price-surface-2: var(--nb-paper-sunken);
  --lp-price-text: var(--nb-ink);
  --lp-price-muted: var(--nb-ink-2);
  --lp-price-faint: var(--nb-ink-3);
  --lp-price-accent: var(--nb-blue);
  --lp-price-accent-border: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  --lp-price-accent-surface: var(--nb-blue-wash);
  --lp-price-accent-soft: var(--nb-blue-wash);
  --lp-price-accent-strong: var(--nb-blue-strong);
  --lp-price-accent-shadow: var(--nb-shadow-1);
  --lp-price-success: var(--nb-success);
  --lp-price-success-bg: color-mix(in srgb, var(--nb-success) 12%, transparent);
}
html .lp-pricing .lp-section-sub {
  color: var(--nb-ink);
}
/* NEUTRALISER -- do not delete, and do not "simplify" by deleting the
   theme-light.css rules it counters instead. theme-light.css carries 39 rules
   for this section that an ablation reports dead; they are dead ONLY while this
   skin overrides them. Strip the skin's card rules without this block and they
   resurface as white fills on the paper in light mode, which is exactly what
   happened when .lp-persuade was restyled. theme-light.css itself stays
   untouched: its HEAD blob has corrupt mixed line endings. */
html .lp-pricing-card,
html .lp-pricing-card .lp-pricing-card-left,
html .lp-pricing-card .lp-pricing-badge,
html .lp-pricing-card .lp-plan-btn,
html .lp-pricing-card .lp-plan-btn:hover,
html .lp-pricing-card .lp-plan-btn--active,
html .lp-pricing-card .lp-plan-btn--active:hover,
html .lp-pricing-card .lp-plan-btn .lp-plan-micro,
html .lp-pricing-card .lp-pricing-benefit,
html .lp-pricing-card .lp-pricing-benefit-icon {
  background: none;
  box-shadow: none;
}

/* The active option is marked by its underline alone -- .lp-sv-tab's treatment,
   the page's one persistent-selection language. */
html .lp-pricing-card .lp-plan-btn {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--nb-ink-2);
}
html .lp-pricing-card .lp-plan-btn:hover {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-plan-btn--active {
  border-bottom-color: var(--nb-blue);
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-card-right-label {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-card-right-sub {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-badge {
  border: 0;
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-plan-price {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-tagline,
html .lp-pricing-card .lp-pricing-note {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-price {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-period,
html .lp-pricing-card .lp-pricing-billing {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-plan-btn .lp-plan-main {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-plan-btn .lp-plan-micro {
  border: 0;
  color: var(--nb-ink-2);
}
html .lp-pricing-card .lp-plan-btn--active .lp-plan-micro {
  color: var(--nb-ink-2);
}
/* The price lines (Website list v1.0, item 5). Each option's price reads
   as one figure, "$15 every month", with the period a step quieter, and
   the tax line under it in sentence case at the fine-print size: part of the
   price, never a shouting caps label. Under the big figure the same tax line
   and the US-dollar line close the price block. Small words take 500 (The
   One-Ink Rule). */
html .lp-pricing-card .lp-plan-btn .lp-plan-period {
  font-size: var(--nb-text-sm);
  font-weight: 500;
}
html .lp-pricing-card .lp-plan-btn .lp-plan-tax {
  display: block;
  max-width: 22ch;
  font-size: var(--nb-text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--nb-ink);
  text-wrap: balance;
}
html .lp-pricing-card .lp-pricing-tax,
html .lp-pricing-card .lp-pricing-fine {
  margin: 0;
  font-weight: 500;
  line-height: 1.5;
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-tax {
  font-size: var(--nb-text-sm);
}
html .lp-pricing-card .lp-pricing-fine {
  margin-top: var(--nb-s1);
  font-size: var(--nb-text-xs);
}
html .lp-pricing-card .lp-plan-check {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-benefit {
  border: 0;
  color: var(--nb-ink);
}
/* Ink, not --nb-success. This tick confirms inclusion; it is not a verdict.
   The same glyph in .lp-mark-row IS a verdict and keeps its colour there. */
html .lp-pricing-card .lp-pricing-benefit-icon {
  border: 0;
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-benefit-text {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-meta-icon,
html .lp-pricing-card .lp-pricing-note-icon {
  background: none;
  border: 0;
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-pricing-cta-primary {
  background: var(--nb-blue);
  border: 1px solid var(--nb-blue);
  color: var(--nb-on-blue);
  box-shadow: none;
  text-shadow: none;
}
html .lp-pricing-card .lp-pricing-cta-primary:hover {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
}
html .lp-pricing-card .lp-pricing-cta-primary:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 2px;
}
html .lp-pricing-card .lp-pricing-secondary-cta {
  color: var(--nb-blue);
}
html .lp-pricing-card .lp-pricing-secondary-cta:hover {
  color: var(--nb-blue-strong);
}

/* ── Final CTA — a closing line on the paper ── */
html .lp-final-cta {
  border-top-color: var(--nb-border);
}
html .lp-final-cta::before {
  background: none;
}
html .lp-final-cta .lp-final-cta-title {
  background: none;
  color: var(--nb-ink);
  -webkit-text-fill-color: var(--nb-ink);
}
html .lp-final-cta .lp-final-cta-sub {
  color: var(--nb-ink);
}

/* ============================================================
   COMING-SOON SUBJECT PREVIEW (/…/notes/ before publish) — the
   cs-* family. Per-proof (blue/gold/rose) + per-chip palettes
   collapse to student blue; the "Planning complete" stage keeps
   --nb-success (a functional completion mark, not decoration).
   ============================================================ */
html .cs-page {
  background: transparent;
}
html .cs-page::before {
  background: none;
}
html .cs-page .cs-panel,
html .cs-page .cs-support-panel,
html .cs-page .cs-support-panel--accent,
html .cs-page .cs-support-panel--glow,
html .cs-page .cs-support-panel--timeline {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-2);
}
html .cs-page .cs-panel::before {
  background: linear-gradient(90deg, transparent, var(--nb-border-strong), transparent);
}
html .cs-page .cs-panel-divider {
  background: linear-gradient(90deg, transparent, var(--nb-border), transparent);
}
html .cs-page .cs-status {
  color: var(--nb-ink-2);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  border-left-color: var(--nb-border);
  box-shadow: none;
}
html .cs-page .cs-status::before {
  background: var(--nb-success);
  box-shadow: none;
}
html .cs-page .cs-heading {
  color: var(--nb-ink);
  -webkit-text-fill-color: var(--nb-ink);
}
/* The hero's meta row (SAT · MATH). noteviewer.css paints it in translucent
   white and a translucent periwinkle, and theme-light.css the dot at 38%:
   grey words by the One-Ink Rule (owner, 2026-09-26). The programme and
   board tags keep their blue, opaque; the dot and the subject are the ink. */
html .cs-page .nv-hero-tag {
  color: var(--nb-blue);
}
html .cs-page .nv-hero-sep,
html .cs-page .nv-hero-subject {
  color: var(--nb-ink);
}
html .cs-page .cs-body {
  color: var(--nb-ink-2);
}
html .cs-page .cs-proof-item,
html .cs-page .cs-proof-item:nth-child(1),
html .cs-page .cs-proof-item:nth-child(2),
html .cs-page .cs-proof-item:nth-child(3) {
  --proof-accent: var(--nb-blue);
  --proof-accent-2: var(--nb-blue);
  --proof-soft: var(--nb-blue-wash);
  --proof-border: color-mix(in srgb, var(--nb-blue) 28%, transparent);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .cs-page .cs-proof-item:hover {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-2);
}
html .cs-page .cs-proof-item::after {
  background: none;
  filter: none;
}
html .cs-page .cs-proof-icon {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 28%, transparent);
  color: var(--nb-blue);
  box-shadow: none;
}
html .cs-page .cs-proof-title {
  color: var(--nb-ink);
}
html .cs-page .cs-proof-text,
html .cs-page .cs-inline-note {
  color: var(--nb-ink-2);
}
html .cs-page a.cs-btn,
html .cs-page a.cs-btn:link,
html .cs-page a.cs-btn:visited {
  background: var(--nb-blue);
  border: 1px solid var(--nb-blue);
  border-radius: var(--nb-r-sm);
  color: var(--nb-on-blue);
  box-shadow: none;
}
html .cs-page a.cs-btn:hover,
html .cs-page a.cs-btn:focus-visible {
  background: var(--nb-blue-strong);
  border-color: var(--nb-blue-strong);
  color: var(--nb-on-blue);
  box-shadow: var(--nb-shadow-1);
}
html .cs-page a.cs-btn:focus-visible {
  outline: 2px solid var(--nb-blue);
  outline-offset: 3px;
}
html .cs-page .cs-support-label,
html .cs-page .cs-support-panel--glow .cs-support-label {
  color: var(--nb-blue);
}
html .cs-page .cs-support-text,
html .cs-page .cs-support-panel--glow .cs-support-text {
  color: var(--nb-ink-2);
}
html .cs-page .cs-chip,
html .cs-page .cs-chip:nth-child(1),
html .cs-page .cs-chip:nth-child(2),
html .cs-page .cs-chip:nth-child(3),
html .cs-page .cs-chip:nth-child(4),
html .cs-page .cs-chip:nth-child(5) {
  color: var(--nb-ink);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
}
html .cs-page .cs-chip::before {
  background: var(--nb-blue);
  box-shadow: 0 0 0 3px var(--nb-blue-wash);
}
html .cs-page .cs-timeline-meta {
  color: var(--nb-ink-2);
}
html .cs-page .cs-progress-track {
  background: var(--nb-paper-sunken);
  box-shadow: none;
}
html .cs-page .cs-progress-fill {
  background: var(--nb-blue);
  box-shadow: none;
}
html .cs-page .cs-stage strong {
  color: var(--nb-ink);
}
html .cs-page .cs-stage span:not(.cs-stage-dot) {
  color: var(--nb-ink-3);
}
html .cs-page .cs-stage-dot {
  background: var(--nb-border-strong);
  border-color: var(--nb-border-strong);
}
html .cs-page .cs-stage.is-complete .cs-stage-dot {
  background: var(--nb-success);
  border-color: color-mix(in srgb, var(--nb-success) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nb-success) 16%, transparent);
}
html .cs-page .cs-stage.is-complete strong {
  color: var(--nb-ink);
}
html .cs-page .cs-stage.is-complete span:not(.cs-stage-dot) {
  color: var(--nb-success);
}
html .cs-page .cs-stage.is-active .cs-stage-dot {
  background: var(--nb-blue);
  border-color: color-mix(in srgb, var(--nb-blue) 55%, transparent);
  box-shadow: 0 0 0 4px var(--nb-blue-wash);
}
html .cs-page .cs-stage.is-active strong {
  color: var(--nb-ink);
}
html .cs-page .cs-stage.is-active span:not(.cs-stage-dot) {
  color: var(--nb-blue);
}

/* ── One ink on the AI band (owner, 2026-09-26: "make all the text colors
   that are like this weird bluish, purple gray into fullbright white").
   The band is night navy in both themes, so its subhead takes the band's
   own ink (the cream of its headline), not the page ink; the 60px serif
   against the 17px sans still carries the hierarchy. ── */
html .lp-ai {
  --lp-ai-ink-2: var(--lp-ai-ink);
}