/* ============================================================
   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-stats,
html .lp-persuade,
html .lp-steps,
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-2);
}
html .lp-hero .lp-free-note,
html .lp-final-cta .lp-free-note {
  color: var(--nb-ink-3);
}
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 .lp-sv-meta {
  background: var(--nb-paper-sunken);
  border-bottom-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-method-dot {
  background: var(--nb-success);
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-method {
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-counter {
  color: var(--nb-ink-2);
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
}
html .lp-showcase-wrap [data-accent="overview"] {
  --lp-role: var(--nb-home-system);
}
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);
}
html .lp-showcase-wrap .lp-sv-pill[data-accent] {
  color: var(--lp-role);
  background: color-mix(in srgb, var(--lp-role) var(--nb-home-icon-wash), var(--nb-paper-raised));
  border: 1px solid color-mix(in srgb, var(--lp-role) var(--nb-home-icon-line), var(--nb-border));
}
html .lp-showcase-wrap .lp-sv-title {
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-sub {
  color: var(--nb-ink-2);
}

/* Overview rows — the four-step ledger, one ink */
html .lp-showcase-wrap .lp-sv-ov-row {
  background: var(--nb-paper);
  border-color: var(--nb-border);
  border-left-color: var(--nb-border);
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-ov-row:first-child {
  background: var(--nb-paper);
  border-color: var(--nb-border);
  border-left-color: var(--nb-border);
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-overview > .lp-sv-ov-row:nth-child(n) .lp-sv-ov-num {
  color: var(--lp-role);
  background: color-mix(in srgb, var(--lp-role) var(--nb-home-icon-wash), var(--nb-paper-raised));
  border-color: color-mix(in srgb, var(--lp-role) var(--nb-home-icon-line), var(--nb-border));
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-ov-name {
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-ov-badge {
  color: var(--nb-ink-2);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-ov-desc {
  color: var(--nb-ink-2);
}

/* Notes mock — the real product is paper + serif, preview it truthfully */
html .lp-showcase-wrap .lp-sv-note {
  background: var(--nb-paper);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .lp-showcase-wrap .lp-sv-note-bar {
  background: var(--nb-paper-sunken);
  border-bottom-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-note-crumb {
  color: var(--nb-ink-3);
}
html .lp-showcase-wrap .lp-sv-note-sep {
  color: var(--nb-ink-3);
}
html .lp-showcase-wrap .lp-sv-note-crumb-current {
  color: var(--nb-blue);
}
html .lp-showcase-wrap .lp-sv-note-status {
  color: var(--nb-blue);
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 28%, transparent);
}
html .lp-showcase-wrap .lp-sv-note-window,
html .lp-showcase-wrap .lp-sv-note-track {
  color: var(--nb-ink);
}
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);
}
html .lp-showcase-wrap .lp-sv-note-h2 {
  font-family: var(--nb-serif);
  color: var(--nb-ink);
  border-left-color: var(--nb-blue);
  background: var(--nb-blue-wash);
}
html .lp-showcase-wrap .lp-sv-note-p,
html .lp-showcase-wrap .lp-sv-note-window p {
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-note-p em {
  color: var(--nb-blue);
}

/* 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--objectives {
  --nbco: var(--nb-adm-tip);
}
html .lp-showcase-wrap .lp-sv-co--key {
  --nbco: var(--nb-adm-key);
}
html .lp-showcase-wrap .lp-sv-co--examiner {
  --nbco: var(--nb-adm-insight);
}
html .lp-showcase-wrap .lp-sv-co--misconception {
  --nbco: var(--nb-adm-warn);
}
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-icon {
  background: color-mix(in srgb, var(--nbco) 14%, transparent);
  border-color: color-mix(in srgb, var(--nbco) 32%, transparent);
  color: var(--nbco);
}
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-label {
  color: var(--nbco);
}
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-p,
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-list li {
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-co .lp-sv-co-list li::before {
  background: var(--nbco);
}

/* 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);
}
html .lp-showcase-wrap .lp-sv-fc-face .lp-sv-fc-label {
  color: var(--nb-blue);
  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);
}
html .lp-showcase-wrap .lp-sv-fc-hint,
html .lp-showcase-wrap .lp-sv-fc-sub {
  color: var(--nb-ink-3);
}
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-3);
}

/* MCQ mock — exam paper: examiner red judges, success confirms */
html .lp-showcase-wrap .lp-sv-mcq-card {
  background: var(--nb-paper);
  border-color: var(--nb-border);
  border-left-color: color-mix(in srgb, var(--nb-red) 30%, transparent);
  box-shadow: var(--nb-shadow-1);
}
html .lp-showcase-wrap .lp-sv-mcq-count {
  color: var(--nb-ink-3);
  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);
}
html .lp-showcase-wrap .lp-sv-mcq-option--correct .lp-sv-mcq-badge {
  background: color-mix(in srgb, var(--nb-success) 12%, 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);
}
html .lp-showcase-wrap .lp-sv-mcq-option--dimmed {
  background: transparent;
  border-color: var(--nb-border);
  color: var(--nb-ink-3);
}
html .lp-showcase-wrap .lp-sv-mcq-option--dimmed .lp-sv-mcq-badge {
  background: transparent;
  border-color: var(--nb-border);
  color: var(--nb-ink-3);
}
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-feedback {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
}
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);
}
html .lp-showcase-wrap .lp-sv-mcq-explanation p {
  color: var(--nb-ink-2);
}

/* Summary mock — ticked key points */
html .lp-showcase-wrap .lp-sv-sum {
  background: var(--nb-paper);
  border-color: var(--nb-border);
  border-top-color: var(--nb-blue);
  box-shadow: var(--nb-shadow-1);
}
html .lp-showcase-wrap .lp-sv-sum-head {
  border-bottom-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-sum-icon {
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
  color: var(--nb-blue);
}
html .lp-showcase-wrap .lp-sv-sum-title {
  color: var(--nb-ink);
}
html .lp-showcase-wrap .lp-sv-sum-count {
  color: var(--nb-blue);
  background: var(--nb-blue-wash);
  border-color: color-mix(in srgb, var(--nb-blue) 30%, transparent);
}
html .lp-showcase-wrap .lp-sv-sum-item {
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-sum-item + .lp-sv-sum-item {
  border-top-color: var(--nb-border);
}
html .lp-showcase-wrap .lp-sv-sum-check {
  background: color-mix(in srgb, var(--nb-success) 11%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}

/* Showcase bottom chrome */
html .lp-showcase-wrap .lp-sv-chrome {
  border-top-color: var(--nb-border);
  background: var(--nb-paper-sunken);
}
html .lp-showcase-wrap .lp-sv-chrome::before {
  background: linear-gradient(to bottom, transparent, var(--nb-paper-raised));
}
html .lp-showcase-wrap .lp-sv-peek-eyebrow {
  color: var(--nb-ink-3);
}
html .lp-showcase-wrap .lp-sv-peek-name {
  color: var(--nb-ink-2);
}
html .lp-showcase-wrap .lp-sv-progress .lp-sv-seg:nth-child(n) {
  background: var(--nb-border-strong);
  box-shadow: none;
}
html .lp-showcase-wrap .lp-sv-progress .lp-sv-seg--active:nth-child(n) {
  background: var(--lp-role);
  box-shadow: none;
}

/* ── Stats band — a tallied ledger, one ink ── */
html .lp-stats::before {
  background: none;
}
html .lp-stats .lp-stats-inner {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-2);
}
html .lp-stats .lp-stats-inner::before {
  background: linear-gradient(90deg, transparent, var(--nb-border-strong), transparent);
}
html .lp-stats .lp-stats-eyebrow {
  color: var(--nb-blue);
}
html .lp-stats .lp-stats-eyebrow-dot {
  background: var(--nb-blue);
  box-shadow: 0 0 0 4px var(--nb-blue-wash);
}
html .lp-stats .lp-stats-tagline {
  color: var(--nb-ink-2);
}
html .lp-stats .lp-stats-features {
  border-top-color: var(--nb-border);
}
html .lp-stats .lp-stats-pill {
  color: var(--nb-ink-2);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
}
html .lp-stats .lp-stats-pill-dot {
  background: var(--nb-blue);
  box-shadow: 0 0 0 3px var(--nb-blue-wash);
}
html .lp-stats .lp-stats-item--primary {
  --lp-role: var(--nb-home-recall);
}
html .lp-stats .lp-stats-item--questions {
  --lp-role: var(--nb-home-depth);
}
html .lp-stats .lp-stats-item--mcqs {
  --lp-role: var(--nb-home-check);
}
html .lp-stats .lp-stats-item--modes {
  --lp-role: var(--nb-home-system);
}
html .lp-stats .lp-stats-item {
  background: color-mix(in srgb, var(--lp-role) var(--nb-home-card-wash), var(--nb-paper-raised));
  border: 1px solid color-mix(in srgb, var(--lp-role) var(--nb-home-card-line), var(--nb-border));
  box-shadow: var(--nb-shadow-1);
}
html .lp-stats .lp-stats-item::before {
  width: 1px;
  background: var(--lp-role);
}
html .lp-stats .lp-stats-item::after {
  display: none;
}
html .lp-stats .lp-stats-item:hover {
  background: color-mix(in srgb, var(--lp-role) var(--nb-home-card-wash), var(--nb-paper-raised));
  border-color: var(--nb-border-strong);
  box-shadow: var(--nb-shadow-1);
}
html .lp-stats .lp-stats-number {
  color: var(--nb-ink);
  text-shadow: none;
}
html .lp-stats .lp-stats-label {
  color: var(--nb-ink-2);
}
html .lp-stats .lp-stats-sub {
  color: var(--nb-ink-3);
}

/* ── Persuade + proofs — quiet paper notes ── */
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);
}
html .lp-persuade::before {
  background: none;
}
html .lp-persuade .lp-persuade-eyebrow {
  color: var(--nb-blue);
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: none;
}
html .lp-persuade .lp-persuade-title {
  color: var(--nb-ink);
}
html .lp-persuade .lp-persuade-body {
  color: var(--nb-ink-2);
}
html .lp-persuade .lp-persuade-proofs {
  border-top-color: var(--nb-border);
}
html .lp-persuade .lp-proof {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .lp-persuade .lp-proof:hover {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border-strong);
  box-shadow: var(--nb-shadow-2);
}
html .lp-persuade .lp-proof::before {
  display: none;
}
html .lp-persuade .lp-persuade-proofs .lp-proof:nth-child(1) .lp-proof-icon {
  --lp-role: var(--nb-blue);
}
html .lp-persuade .lp-persuade-proofs .lp-proof:nth-child(2) .lp-proof-icon {
  --lp-role: var(--nb-home-depth);
}
html .lp-persuade .lp-persuade-proofs .lp-proof:nth-child(3) .lp-proof-icon {
  --lp-role: var(--nb-home-system);
}
html .lp-persuade .lp-persuade-proofs .lp-proof:nth-child(n) .lp-proof-icon {
  color: var(--lp-role);
  background: color-mix(in srgb, var(--lp-role) var(--nb-home-icon-wash), var(--nb-paper-raised));
  border: 1px solid color-mix(in srgb, var(--lp-role) var(--nb-home-icon-line), var(--nb-border));
  box-shadow: none;
}
html .lp-persuade .lp-proof-title {
  color: var(--nb-ink);
}
html .lp-persuade .lp-proof-body {
  color: var(--nb-ink-2);
}

/* ── 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;
}

/* ── Steps — the revision system cards ── */
html .lp-steps .lp-steps-eyebrow {
  color: var(--nb-blue);
}
html .lp-steps .lp-steps-eyebrow::before,
html .lp-steps .lp-steps-eyebrow::after {
  background: color-mix(in srgb, var(--nb-blue) 30%, transparent);
}
html .lp-steps .lp-section-header .lp-section-title,
html .lp-pricing .lp-section-header .lp-section-title {
  background: none;
  color: var(--nb-ink);
  -webkit-text-fill-color: var(--nb-ink);
}
html .lp-steps .lp-section-header .lp-section-sub,
html .lp-pricing .lp-section-header .lp-section-sub {
  color: var(--nb-ink-2);
}
html .lp-steps .lp-step-card--notes {
  --lp-role: var(--nb-home-depth);
}
html .lp-steps .lp-step-card--recall {
  --lp-role: var(--nb-home-recall);
}
html .lp-steps .lp-step-card--practice {
  --lp-role: var(--nb-home-check);
}
html .lp-steps .lp-step-card {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .lp-steps .lp-step-card:hover {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border-strong);
  box-shadow: var(--nb-shadow-2);
}
html .lp-steps .lp-step-card::before {
  display: none;
}
html .lp-steps .lp-step-card .lp-step-icon,
html .lp-steps .lp-step-card:hover .lp-step-icon {
  color: var(--lp-role);
  background: color-mix(in srgb, var(--lp-role) var(--nb-home-icon-wash), var(--nb-paper-raised));
  border: 1px solid color-mix(in srgb, var(--lp-role) var(--nb-home-icon-line), var(--nb-border));
  box-shadow: none;
}
html .lp-steps .lp-step-title {
  color: var(--nb-ink);
}
html .lp-steps .lp-step-desc {
  color: var(--nb-ink-2);
}
html .lp-steps .lp-step-kicker,
html .lp-steps .lp-step-card .lp-step-node {
  color: var(--lp-role);
}
html .lp-steps .lp-step-join-line {
  background: var(--nb-border-strong);
}
html .lp-steps .lp-step-join-dot {
  color: var(--nb-ink-3);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
}
html .lp-steps .lp-steps-benefits {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  box-shadow: var(--nb-shadow-1);
}
html .lp-steps .lp-steps-benefit:nth-child(n) .lp-steps-benefit-icon {
  color: var(--nb-ink-3);
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  box-shadow: none;
}
html .lp-steps .lp-steps-benefit-title {
  color: var(--nb-ink);
}
html .lp-steps .lp-steps-benefit-copy {
  color: var(--nb-ink-2);
}

/* ── 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-2);
}
html .lp-pricing-card::before {
  background: linear-gradient(90deg, transparent, var(--nb-border-strong), transparent);
}
html .lp-pricing-card .lp-pricing-card-left {
  border-right-color: var(--nb-border);
  border-bottom-color: var(--nb-border);
}
html .lp-pricing-card .lp-pricing-card-right-label {
  color: var(--nb-premium);
}
html .lp-pricing-card .lp-pricing-card-right-sub {
  color: var(--nb-ink-2);
}
html .lp-pricing-card .lp-pricing-badge {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
  box-shadow: none;
}
html .lp-pricing-card .lp-pricing-badge-icon {
  background: var(--nb-blue-wash);
}
html .lp-pricing-card .lp-pricing-tagline,
html .lp-pricing-card .lp-pricing-note {
  color: var(--nb-ink-3);
}
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-2);
}
html .lp-pricing-card .lp-plan-btn {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink-2);
  box-shadow: none;
}
html .lp-pricing-card .lp-plan-btn:hover {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border-strong);
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-plan-btn--active {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  color: var(--nb-ink);
  box-shadow: none;
}
html .lp-pricing-card .lp-plan-btn--active:hover {
  background: var(--nb-blue-wash);
  border-color: var(--nb-blue);
  box-shadow: none;
}
html .lp-pricing-card .lp-plan-btn .lp-plan-main {
  color: var(--nb-ink);
}
html .lp-pricing-card .lp-plan-btn .lp-plan-micro {
  background: var(--nb-paper-raised);
  border-color: var(--nb-border);
  color: var(--nb-ink-3);
}
html .lp-pricing-card .lp-plan-btn--active .lp-plan-micro {
  color: var(--nb-blue);
}
html .lp-pricing-card .lp-plan-check {
  color: var(--nb-blue);
}
html .lp-pricing-card .lp-pricing-benefit {
  background: var(--nb-paper-sunken);
  border-color: var(--nb-border);
  color: var(--nb-ink);
  box-shadow: none;
}
html .lp-pricing-card .lp-pricing-benefit-icon {
  background: color-mix(in srgb, var(--nb-success) 12%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 28%, transparent);
  color: var(--nb-success);
}
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 {
  color: var(--nb-success);
  background: color-mix(in srgb, var(--nb-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--nb-success) 20%, transparent);
}
html .lp-pricing-card .lp-pricing-list li::before {
  color: var(--nb-success);
}
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-2);
}

/* ============================================================
   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);
}
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);
}