/* The lit material (owner, 2026-10-21: the homepage's lit price card and molecule, "where else can we add glassy?
   to make it not seem off", then "do it 1-5" and "make it that theme and style but don't change the features").

   One rule keeps it from feeling off: ONE lit object per page, at the moment that matters (the price, the paywall,
   the marked answer, the flashcard, the place to carry on), and everything a student reads stays flat paper. The
   light always comes from the top left, the same light as the homepage molecule's atoms, so every lit object agrees
   with every other. A lit object is a raised sheet with a deep soft shadow and a faint sheen along its top edge;
   under the pointer it tilts a little and catches the light (nb-lit.js). Never a glow, never frosted glass.

   Tokens only: every colour is an --nb-* token, a color-mix of tokens, or a mix toward white or black. */

/* the price's big light figures: Plex Light, the official 1.1.0 complete face (fonts/IBM-Plex-PROVENANCE.md) */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-1.1.0-complete-300.57c6c8fb7d9a.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --nb-lit-r: 24px;
  --nb-lit-shadow: 0 1px 2px color-mix(in srgb, black 40%, transparent), 0 40px 80px -36px color-mix(in srgb, black 90%, transparent);
  --nb-lit-edge: inset 0 1px 0 color-mix(in srgb, white 5%, transparent);
  --nb-lit-sheen: color-mix(in srgb, white 6%, transparent);
  --nb-lit-top: color-mix(in srgb, white 2.5%, transparent);
}
html.theme-light {
  --nb-lit-shadow: 0 1px 2px color-mix(in srgb, var(--nb-ink) 4%, transparent), 0 40px 80px -40px color-mix(in srgb, var(--nb-ink) 28%, transparent);
  --nb-lit-edge: inset 0 0 0 0 transparent;
  --nb-lit-sheen: color-mix(in srgb, white 65%, transparent);
  --nb-lit-top: color-mix(in srgb, white 35%, transparent);
}

.nb-lit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--nb-border);
  border-radius: var(--nb-lit-r);
  background: var(--nb-paper-raised);
  box-shadow: var(--nb-lit-edge), var(--nb-lit-shadow);
  transform: perspective(1600px) rotateX(var(--nb-lit-tx, 0deg)) rotateY(var(--nb-lit-ty, 0deg));
  transition: transform 700ms var(--nb-ease);
}
.nb-lit.is-lit-tracking { transition: transform 120ms linear; }
/* the light it catches under the pointer */
.nb-lit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(520px circle at var(--nb-lit-mx, 50%) var(--nb-lit-my, -10%), var(--nb-lit-sheen), transparent 62%);
  opacity: 0;
  transition: opacity 500ms var(--nb-ease);
  pointer-events: none;
}
.nb-lit.is-lit-tracking::before { opacity: 1; }
/* at rest it still shows where the light is: a faint sheen along the top edge */
.nb-lit::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  z-index: -1;
  background: linear-gradient(var(--nb-lit-top), transparent);
  pointer-events: none;
}

/* ── The Premium card's parts, shared by the homepage, /pricing/ and the paywall ── */
/* the switch: equal segments, a thumb that only ever slides, the chosen period in ink */
.nb-switch {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 4px;
  border-radius: var(--nb-r-lg);
  background: color-mix(in srgb, var(--nb-ink) 6%, transparent);
}
.nb-switch > button {
  position: relative;
  z-index: 1;
  min-height: 0;
  padding: 10px 22px;
  border: 0;
  border-radius: var(--nb-r-md);
  background: none;
  box-shadow: none;
  font: 500 var(--nb-text-base)/1 var(--nb-sans);
  color: var(--nb-soft);
  cursor: pointer;
  transition: color 300ms var(--nb-ease);
}
.nb-switch > button:hover,
.nb-switch > button.is-on { color: var(--nb-ink); }
.nb-switch > button:focus-visible { outline: 2px solid var(--nb-blue); outline-offset: 2px; }
.nb-switch > button small { display: block; margin-top: 5px; font: 400 var(--nb-text-xs)/1 var(--nb-sans); color: var(--nb-soft); }
.nb-switch-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 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);
  transition: transform 460ms var(--nb-ease);
  pointer-events: none;
}
html.theme-light .nb-switch-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);
}

/* the price: big and light */
.nb-price-fig {
  display: inline-block;
  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);
  transition: opacity 240ms var(--nb-ease), translate 520ms var(--nb-ease), filter 320ms var(--nb-ease);
}
.nb-price-fig.is-out { opacity: 0; translate: 0 -0.08em; filter: blur(6px); }
.nb-price-fig.is-in { opacity: 0; translate: 0 0.08em; filter: blur(6px); transition: none; }
.nb-price-unit { font: 300 clamp(24px, 2.4vw, 32px)/1 var(--nb-sans); color: var(--nb-soft); }
.nb-price-per { margin-top: 14px; font: 400 var(--nb-text-lg)/1.3 var(--nb-sans); color: var(--nb-ink); transition: opacity 240ms var(--nb-ease); }
.nb-price-per.is-out { opacity: 0; }
.nb-price-tax { margin-top: 6px; font: 400 var(--nb-text-sm)/1.5 var(--nb-sans); color: var(--nb-soft); }
/* what Premium includes, as one quiet line that breaks between items, never inside one */
/* what Premium includes (owner, 2026-10-21: "neatly formatted instead of a huge bulky paragraph"; then, of its four
   items two by two between hairlines, 2026-10-23: "im sure you can make this better"). Apple's own way of saying what you
   get: four short paragraphs, two by two, each opening with its name in the ink at 600 and running on in the soft ink
   ("Every chapter. Your whole syllabus, topic by topic."), under a plain heading; no table lines, no ticks, no icons, and
   one under another on a phone */
.nb-plan-inc { max-width: 36rem; margin: 36px auto 0; font-family: var(--nb-sans); }
.nb-plan-inc-h { margin: 0 0 14px; font-size: var(--nb-text-base); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--nb-ink); text-align: left; }
.nb-plan-inc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
}
.nb-plan-inc-list > li {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--nb-text-base);
  font-weight: 400;
  line-height: 1.5;
  color: var(--nb-soft);
  text-align: left;
  text-wrap: pretty;
}
.nb-plan-inc-list > li > b { font-weight: 600; color: var(--nb-ink); }

@media (max-width: 640px) {
  :root { --nb-lit-r: 20px; }
  .nb-switch > button { padding: 10px 13px; }
  .nb-plan-inc-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-lit,
  .nb-lit::before,
  .nb-switch-thumb,
  .nb-price-fig,
  .nb-price-per { transition: none; }
}