/* ==========================================================================
   Spotless Mind — Modules
   Games, quizzes, the course, the profile builders, pricing and the account.
   Shared primitives first, then the pieces that genuinely differ.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared module primitives
   These three patterns were duplicated six ways across the old stylesheet.
   -------------------------------------------------------------------------- */

/* A panel: the standard surface every interactive tool sits on */
.sim-card, .fc-card, .pf-card, .sj-card, .rq-card, .npt-card, .au-box, .ch-head, .pr-org {
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.sim-wrap, .fc-wrap, .pf-wrap, .sj-wrap, .rq-wrap, .npt-wrap, .au-wrap {
  max-width: 48rem;
  margin-inline: auto;
  text-align: left;
}
.rq-wrap, .npt-wrap { max-width: 52rem; }
.ch-wrap { max-width: 64rem; margin-inline: auto; text-align: left; }

/* A module eyebrow: mono, uppercase, the "clinical label" register */
.sim-eyebrow, .fc-now-h, .fc-group-h, .pf-eyebrow, .sj-eyebrow, .rq-eyebrow,
.npt-eyebrow, .au-eyebrow, .cm-check-h, .pf-plan-h, .npt-h, .npt-code,
.rq-wn, .ch-c-n, .sj-scan-n {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.sim-eyebrow, .pf-eyebrow, .npt-code, .npt-h { color: var(--accent-warm); }
.fc-now-h, .sj-eyebrow, .rq-eyebrow, .npt-eyebrow, .au-eyebrow, .cm-check-h, .pf-plan-h { color: var(--brand); }
.fc-group-h, .rq-wn, .ch-c-n, .sj-scan-n { color: var(--text-muted); }

/* A progress bar */
.sim-bar, .pf-bar, .sj-bar, .npt-bar, .quiz-bar {
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--border);
  overflow: hidden;
}
.sim-bar-in, .pf-bar-in, .sj-bar-in, .npt-bar-in, .quiz-bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand), var(--deco-cool));
  transition: width var(--dur-slow) var(--ease-out);
}
.sim-bar { max-width: 20rem; margin: 0 auto var(--space-2); }
.sim-count { text-align: center; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-5); }

/* An answer option button — the single most repeated control on the site */
.sim-opt, .fc-opt, .pf-opt, .npt-opt, .cm-opt, .tt-opts button, .quiz-opts button, .sj-route {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  padding: var(--space-4) var(--space-5);
  min-height: 3rem;
  transition:
    border-color var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.sim-opt:hover:not(:disabled), .fc-opt:hover, .pf-opt:hover, .npt-opt:hover,
.cm-opt:hover:not(:disabled), .tt-opts button:hover:not(:disabled),
.quiz-opts button:hover, .sj-route:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
  transform: translateY(-2px);
}
.sim-opts, .fc-opts, .tt-opts, .quiz-opts, .cm-opts, .sj-routes {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sim-opts, .quiz-opts { max-width: 40rem; }
.tt-opts { max-width: 40rem; margin-inline: auto; }

/* Answer states, shared vocabulary: best / ok / poor */
.sim-opt.chosen.best, .cm-opt.cm-best, .tt-opts button.right {
  border-color: var(--brand);
  background: var(--brand-tint-2);
}
.sim-opt.chosen.ok, .cm-opt.cm-ok {
  border-color: var(--accent-warm);
  background: color-mix(in oklab, var(--deco-warm) 13%, transparent);
}
.sim-opt.chosen.poor, .cm-opt.cm-poor, .tt-opts button.wrong {
  border-color: var(--accent-rose);
  background: color-mix(in oklab, var(--deco-rose) 12%, transparent);
}
.sim-opt.muted, .cm-opt.cm-dim { opacity: .45; }
.sim-opt.chosen, .sim-opt:disabled, .cm-opt:disabled { cursor: default; transform: none; }

/* A selected scale option */
.pf-opt.on, .npt-opt.on {
  background: var(--brand);
  color: var(--text-on-brand);
  border-color: transparent;
}
.pf-scale, .npt-scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.pf-opt, .npt-opt { text-align: center; padding: var(--space-4) var(--space-2); }
@media (max-width: 600px) { .pf-scale, .npt-scale { grid-template-columns: 1fr 1fr; } }

/* Module action rows */
.sim-actions, .fc-actions, .pf-actions, .sj-actions, .npt-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--space-5);
}

/* Feedback / fine print */
.sim-fb {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--leading-prose);
}
.sim-foot, .pf-disclaim, .rq-fine, .npt-fine, .sj-fine, .fc-note, .au-fine {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-prose);
  margin-top: var(--space-4);
}
.sim-foot { max-width: 42rem; margin-inline: auto; text-align: center; }
.pf-disclaim { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); }
.pf-disclaim b { color: var(--accent-warm); }
.sim-reset {
  color: var(--brand);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* --------------------------------------------------------------------------
   Mind Games shell
   -------------------------------------------------------------------------- */
.game-shell {
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: var(--block-gap);
  box-shadow: var(--shadow-2);
}
.game-tabs {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.game-tabs button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  min-height: 2.75rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text-muted);
  transition:
    background var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.game-tabs button:hover { color: var(--text); border-color: var(--brand); transform: translateY(-1px); }
.game-tabs button.on {
  background: var(--brand);
  color: var(--text-on-brand);
  border-color: transparent;
}
.game-tabs button svg { width: 1rem; height: 1rem; flex: none; }
.game-tabs small { font-size: var(--text-2xs); opacity: .72; }

.game { display: none; text-align: center; }
.game.on { display: block; animation: pageIn var(--dur-slow) var(--ease-out); }
.game > .lead { margin-inline: auto; font-size: var(--text-base); margin-bottom: var(--space-5); }
.game-score {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--accent-warm);
  margin-top: var(--space-4);
  min-height: 1.5em;
}

/* Calm Bubble */
#bubbleStage {
  position: relative;
  height: 20rem;
  display: grid;
  place-items: center;
}
#bubble {
  width: 7rem; height: 7rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.7), transparent 42%),
    radial-gradient(circle at 60% 70%, color-mix(in oklab, var(--deco-cool) 45%, transparent), transparent 60%),
    color-mix(in oklab, var(--brand) 42%, transparent);
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  box-shadow: 0 0 3rem color-mix(in oklab, var(--brand) 30%, transparent), inset 0 0 2.5rem rgba(255,255,255,.14);
  transition: transform 4s var(--ease-in-out);
  will-change: transform;
}
#bubbleWord {
  position: absolute;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text);
  pointer-events: none;
}

/* Emotion Match */
#matchGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 7rem));
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--space-3);
}
@media (max-width: 560px) { #matchGrid { grid-template-columns: repeat(4, 1fr); gap: var(--space-2); } }
.mcard {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: clamp(.8rem, 2.6vw, 1rem);
  padding: var(--space-2);
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--weight-semi);
  color: var(--text);
  user-select: none;
  transition: transform var(--dur-slow) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.mcard:hover:not(.done) { border-color: var(--brand); }
.mcard.hidden-face {
  color: transparent;
  background: linear-gradient(140deg, var(--brand-tint-2), color-mix(in oklab, var(--deco-cool) 14%, transparent));
}
.mcard.hidden-face .mcard-back { opacity: .55; }
.mcard-back { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; color: var(--brand); pointer-events: none; }
.mcard-back svg { width: 1.4rem; height: 1.4rem; }
.mcard-face { width: 2.25rem; height: 2.25rem; color: var(--accent-warm); }
.mcard.hidden-face .mcard-face { opacity: 0; }

/* Icons rendered from data by ico() */
.ico    { width: 1.1em; height: 1.1em; vertical-align: -.18em; }
.ico-sm { width: .9em;  height: .9em;  vertical-align: -.1em; }
.ico-star { width: 1.15rem; height: 1.15rem; color: var(--accent-warm); margin-inline: 1px; vertical-align: -.2em; }
.rq-tick .ico { width: .85rem; height: .85rem; }
.sj-done .ico { width: 1.1rem; height: 1.1rem; }
.ff-orb .ico  { width: 1.25rem; height: 1.25rem; }
.mcard.flip { transform: rotateY(180deg) scale(1.04); }
.mcard.done { background: var(--brand-tint-2); border-color: var(--brand); cursor: default; }

/* Tantrum Tamer / Face Decoder */
#ttScenario {
  font-size: var(--text-lg);
  max-width: 40rem;
  margin: 0 auto var(--space-5);
  min-height: 3.4em;
  color: var(--text);
}
#ttFeedback, #fdFeedback {
  max-width: 40rem;
  margin: var(--space-5) auto 0;
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: var(--leading-prose);
  min-height: 3em;
}
#fdFace {
  width: 7rem;
  height: 7rem;
  margin: var(--space-2) auto var(--space-1);
  color: var(--accent-warm);
}
#fdFace svg { width: 100%; height: 100%; }
#fdContext { color: var(--text-muted); font-size: var(--text-base); max-width: 36rem; margin: 0 auto var(--space-5); }

/* Focus Filter */
#ffHud {
  display: flex;
  justify-content: center;
  gap: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
#ffHud b { color: var(--accent-warm); font-variant-numeric: tabular-nums; }
#ffStage {
  position: relative;
  height: 20rem;
  border-radius: var(--radius-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  margin: var(--space-3) 0;
  cursor: crosshair;
}
.ff-orb {
  position: absolute;
  width: 3.25rem; height: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  user-select: none;
  color: #fff;
  animation: orbPop var(--dur-base) var(--ease-spring);
  transition: transform var(--dur-fast) var(--ease-out);
}
.ff-orb svg { width: 1.3rem; height: 1.3rem; }
.ff-orb:hover { transform: scale(1.1); }
@keyframes orbPop { from { transform: scale(0); } to { transform: scale(1); } }
.ff-good { background: radial-gradient(circle at 34% 28%, #B4F0DA, #2E9B77); box-shadow: 0 0 1.4rem rgba(46,155,119,.45); }
.ff-bad  { background: radial-gradient(circle at 34% 28%, #F6C9BE, #C2705E); box-shadow: 0 0 1.4rem rgba(194,112,94,.45); }

/* --------------------------------------------------------------------------
   Calm Style Quiz
   -------------------------------------------------------------------------- */
.quiz-shell {
  max-width: 44rem;
  margin: var(--block-gap) auto;
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
  box-shadow: var(--shadow-2);
}
.quiz-bar { margin-bottom: var(--space-7); }
.quiz-q {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--text);
  margin-bottom: var(--space-6);
  min-height: 2.5em;
  text-wrap: balance;
}
.quiz-opts { margin-inline: auto; }
.quiz-result { animation: pageIn var(--dur-slower) var(--ease-entrance); }
.quiz-result .quiz-icon {
  width: 5rem; height: 5rem;
  margin: 0 auto var(--space-4);
  color: var(--brand);
}
.quiz-result h2 { margin-top: var(--space-3); }
.quiz-result .lead { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Message simulator (phone)
   -------------------------------------------------------------------------- */
.phone {
  max-width: 26rem;
  margin: var(--block-gap) auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-4);
}
.phone-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-4);
  text-align: left;
}
.phone-top .avatar {
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: linear-gradient(130deg, var(--deco-rose), var(--deco-warm));
  display: grid; place-items: center;
  color: #fff;
  flex: none;
}
.phone-top .avatar svg { width: 1.1rem; height: 1.1rem; }
.phone-top b { font-family: var(--font-display); color: var(--text); display: block; }
.phone-top span { font-size: var(--text-xs); color: var(--text-muted); }

.chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 12rem;
  max-height: 20rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
  text-align: left;
}
.bub {
  max-width: 82%;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  animation: bubIn var(--dur-slow) var(--ease-entrance);
}
@keyframes bubIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.bub.them { align-self: flex-start; background: var(--surface-2); color: var(--text); border-bottom-left-radius: var(--radius-xs); }
.bub.me   { align-self: flex-end;   background: var(--brand); color: var(--text-on-brand); border-bottom-right-radius: var(--radius-xs); }
.bub.note {
  align-self: center;
  background: color-mix(in oklab, var(--deco-warm) 14%, transparent);
  color: var(--accent-warm);
  font-size: var(--text-xs);
  text-align: center;
  max-width: 94%;
  border-radius: var(--radius-md);
}
.chat-opts { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.chat-opts button {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  min-height: 2.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--glass);
  color: var(--text);
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.chat-opts button:hover { border-color: var(--brand); background: var(--brand-tint); transform: translateX(4px); }
.typing { align-self: flex-start; display: flex; gap: 4px; padding: var(--space-3) var(--space-4); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: typDot 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typDot { 0%,100% { opacity: .3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-3px); } }

/* --------------------------------------------------------------------------
   Conversation Simulator
   -------------------------------------------------------------------------- */
.sim-top { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-5); }
.sim-chip {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: var(--space-2) var(--space-4);
  min-height: 2.375rem;
  border-radius: var(--radius-full);
  font-size: var(--text-base);
  font-family: var(--font-body);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sim-chip:hover { color: var(--text); border-color: var(--brand); }
.sim-chip.on { background: var(--brand); color: var(--text-on-brand); border-color: transparent; }
.sim-chip.done { border-color: var(--brand); }
.sim-setup { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-4); line-height: var(--leading-prose); }
.sim-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-5); }
.sim-end .sim-principle { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text); margin-bottom: var(--space-4); }
.sim-tally { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-prose); }

/* --------------------------------------------------------------------------
   Feelings Compass
   -------------------------------------------------------------------------- */
.fc-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); line-height: var(--leading-snug); }
.fc-lede { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-prose); margin-bottom: var(--space-5); }
.fc-opt b { display: block; font-size: var(--text-md); font-weight: var(--weight-semi); margin-bottom: 2px; }
.fc-opt span { display: block; font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
.fc-opt-safe { border-style: dashed; border-color: var(--accent-rose); }
.fc-opt-safe:hover { border-color: var(--accent-rose); background: color-mix(in oklab, var(--deco-rose) 8%, transparent); }
.fc-now {
  background: var(--brand-tint);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.fc-now ol { padding-left: var(--space-5); }
.fc-now li { margin-bottom: var(--space-2); font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text); }
.fc-now li:last-child { margin-bottom: 0; }
.fc-links { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-5); }
.fc-links > div { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fc-safety { border-color: color-mix(in oklab, var(--deco-rose) 42%, transparent); }
.fc-help { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-5) 0; }
@media (max-width: 560px) { .fc-help { grid-template-columns: 1fr; } }
.fc-help div { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); }
.fc-help b { display: block; font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-rose); margin-bottom: 2px; }
.fc-help span { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }

/* --------------------------------------------------------------------------
   Profile Builder — including its ranked-domain bar chart
   -------------------------------------------------------------------------- */
.pf-top { margin-bottom: var(--space-5); }
.pf-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); line-height: var(--leading-snug); }
.pf-sub { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-prose); margin-bottom: var(--space-5); }

/* The results chart: a labelled horizontal bar per domain, works in both themes
   because the track is a border token and the fill is the brand ramp. */
.pf-chart { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-7); }
.pf-row { display: flex; align-items: center; gap: var(--space-4); }
.pf-row-l { flex: 0 0 42%; font-size: var(--text-base); color: var(--text); line-height: var(--leading-normal); }
@media (max-width: 560px) { .pf-row-l { flex-basis: 50%; font-size: var(--text-sm); } }
.pf-row-b { flex: 1; height: 9px; border-radius: var(--radius-full); background: var(--border); overflow: hidden; }
.pf-row-b i {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--brand), var(--deco-cool));
  transition: width var(--dur-slower) var(--ease-out);
}
.pf-row-v { flex: 0 0 2.5rem; text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.pf-dom {
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.pf-dom h4 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--accent-warm); margin-bottom: var(--space-2); }
.pf-what { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-4); }
.pf-steps { margin-bottom: var(--space-4); padding-left: var(--space-5); }
.pf-steps li { margin-bottom: var(--space-2); font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text); }
.pf-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   Neurodivergent Personality Test
   -------------------------------------------------------------------------- */
.npt-top { margin-bottom: var(--space-4); }
.npt-card h3 { font-size: var(--text-xl); line-height: var(--leading-snug); margin-bottom: var(--space-4); }
.npt-type { font-family: var(--font-display); font-size: var(--text-4xl) !important; color: var(--brand); margin-bottom: var(--space-1) !important; }
.npt-blurb { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); margin-bottom: var(--space-5); color: var(--text); }
.npt-dims { display: grid; gap: var(--space-4); margin-bottom: var(--space-5); }
.npt-dim-l { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.npt-dim-l b { color: var(--text); font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.npt-dim-b {
  position: relative;
  height: 9px;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand) 34%, transparent), color-mix(in oklab, var(--deco-cool) 34%, transparent));
  margin: var(--space-2) 0 var(--space-1);
}
.npt-dim-b i {
  position: absolute;
  top: -5px;
  width: 1.1rem; height: 1.1rem;
  border-radius: 50%;
  background: var(--brand);
  border: 3px solid var(--bg);
  transform: translateX(-50%);
  box-shadow: var(--shadow-2);
  transition: left var(--dur-slower) var(--ease-out);
}
.npt-dim-v { font-size: var(--text-sm); color: var(--text); }
.npt-cols, .npt-top2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
@media (max-width: 600px) { .npt-cols, .npt-top2 { grid-template-columns: 1fr; } }
.npt-cols ul, .npt-learn { padding-left: var(--space-5); }
.npt-cols li, .npt-learn li { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-2); }
.npt-t2 { background: var(--brand-tint); border: 1px solid var(--border-brand); border-radius: var(--radius-lg); padding: var(--space-4); }
.npt-t2 b { display: block; font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--space-2); color: var(--text); }
.npt-t2 p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); }
.npt-par { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); }
.npt-locked { position: relative; overflow: hidden; }
.npt-locked .npt-inner {
  filter: blur(6px);
  opacity: .42;
  pointer-events: none;
  user-select: none;
  max-height: 32rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
}
.npt-lockp { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-2); }

/* --------------------------------------------------------------------------
   Sleep Journey
   -------------------------------------------------------------------------- */
.sj-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.sj-lede { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-prose); margin-bottom: var(--space-5); }
.sj-top { margin-bottom: var(--space-4); }
.sj-art { border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-5); border: 1px solid var(--border-subtle); }
.sj-art svg { width: 100%; height: auto; }
.sj-do {
  background: var(--brand-tint);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  text-align: center;
}
.sj-scan-say { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-snug); color: var(--text); margin-bottom: var(--space-3); }
.sj-scan-part { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--brand); margin-bottom: var(--space-1); }
.sj-hint { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); margin-top: var(--space-3); }
.sj-clock { font-family: var(--font-mono); font-size: var(--text-4xl); color: var(--brand); margin-bottom: var(--space-4); font-variant-numeric: tabular-nums; }
.sj-write { text-align: left; }
.sj-write label { margin-top: var(--space-3); }
.sj-write label:first-child { margin-top: 0; }
.sj-breathe { padding: var(--space-8) var(--space-5); }
.sj-orb {
  width: 10.5rem; height: 10.5rem;
  margin: 0 auto;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, color-mix(in oklab, var(--brand) 34%, transparent), color-mix(in oklab, var(--deco-cool) 16%, transparent));
  display: grid;
  place-items: center;
  animation: sjBreath 10s var(--ease-in-out) infinite;
  position: relative;
  will-change: transform;
}
.sj-orb-in { position: absolute; inset: 1rem; border-radius: 50%; border: 1.5px solid var(--border-brand); }
.sj-orb span { font-family: var(--font-display); font-size: var(--text-md); color: var(--text); position: relative; }
@keyframes sjBreath { 0% { transform: scale(.72); } 40% { transform: scale(1); } 100% { transform: scale(.72); } }
@media (prefers-reduced-motion: reduce) { .sj-orb { animation: none; transform: scale(.9); } }
.sj-toggle { color: var(--accent-warm); font-family: var(--font-body); font-size: var(--text-base); padding: var(--space-2) 0; margin-bottom: var(--space-1); text-decoration: underline; text-underline-offset: .2em; }
.sj-why, .sj-recall { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.sj-why p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-3); }
.sj-why ul, .sj-recall ul { padding-left: var(--space-5); }
.sj-why li, .sj-recall li { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); margin-bottom: var(--space-2); }
.sj-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.sj-route b { display: block; font-family: var(--font-display); font-size: var(--text-md); margin-bottom: 2px; }
.sj-route span { display: block; font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
.sj-stats { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.sj-stats > div { flex: 1; min-width: 6.5rem; background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.sj-stats b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--brand); line-height: var(--leading-tight); }
.sj-stats span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.sj-done b { color: var(--accent-warm); }

/* --------------------------------------------------------------------------
   Regulation Quest
   -------------------------------------------------------------------------- */
.rq-head { display: flex; gap: var(--space-7); align-items: center; margin-bottom: var(--space-5); }
@media (max-width: 620px) { .rq-head { flex-direction: column; text-align: center; } }
.rq-ring, .ch-ring { position: relative; flex: 0 0 6.875rem; }
.rq-ring-n, .ch-ring-n { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; }
.rq-ring-n b, .ch-ring-n b { font-family: var(--font-display); font-size: var(--text-xl); color: var(--brand); line-height: 1; }
.rq-ring-n span, .ch-ring-n span { font-size: var(--text-2xs); color: var(--text-muted); margin-top: 2px; }
.rq-head-t h3 { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.rq-head-t p { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-prose); }
.rq-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }

.rq-week { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); margin-bottom: var(--space-3); overflow: hidden; }
.rq-week.rq-done { border-color: color-mix(in oklab, var(--deco-warm) 45%, transparent); }
.rq-week-h {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; padding: var(--space-5);
  color: var(--text); font-family: var(--font-body); text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
}
.rq-week-h:hover { background: var(--glass-quiet); }
.rq-wn { flex: 0 0 3.6rem; margin-bottom: 0; }
.rq-wt { flex: 1; }
.rq-wt b { display: block; font-family: var(--font-display); font-size: var(--text-lg); }
.rq-wt i { display: block; font-style: normal; font-size: var(--text-base); color: var(--text-muted); margin-top: 2px; }
.rq-wp { font-size: var(--text-sm); color: var(--accent-warm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rq-caret, .ch-caret { color: var(--text-muted); flex: none; display: grid; place-items: center; transition: transform var(--dur-base) var(--ease-out); }
.rq-caret svg, .ch-caret svg { width: .9rem; height: .9rem; }
.rq-week.open .rq-caret, .ch-move.on .ch-caret { transform: rotate(180deg); }
.rq-week-b { padding: 0 var(--space-5) var(--space-5); }
@media (max-width: 560px) { .rq-week-h { padding: var(--space-4); gap: var(--space-3); } .rq-week-b { padding: 0 var(--space-4) var(--space-4); } }
.rq-wlede { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-prose); margin-bottom: var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border-subtle); }
.rq-m { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-subtle); }
.rq-m:last-child { border-bottom: none; padding-bottom: 0; }
.rq-m.on { opacity: .62; }
.rq-tick {
  flex: 0 0 1.75rem; height: 1.75rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  color: var(--brand);
  margin-top: 2px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rq-tick svg { width: .8rem; height: .8rem; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.rq-tick:hover { border-color: var(--brand); }
.rq-m.on .rq-tick { background: var(--brand-tint-2); border-color: var(--brand); }
.rq-m.on .rq-tick svg { opacity: 1; }
.rq-m-b { flex: 1; }
.rq-m-b h4 { font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--space-2); color: var(--text); }
.rq-m.on .rq-m-b h4 { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.rq-do { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text); margin-bottom: var(--space-2); }
.rq-why { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-3); }
.rq-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* --------------------------------------------------------------------------
   The Calm Brain Method course
   -------------------------------------------------------------------------- */
.ch-head { display: flex; gap: var(--space-7); align-items: center; margin-bottom: var(--space-5); }
@media (max-width: 660px) { .ch-head { flex-direction: column; text-align: center; } }
.ch-head-t { flex: 1; }
.ch-head-t p { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-prose); margin-bottom: var(--space-4); }
.ch-cert {
  background: color-mix(in oklab, var(--deco-warm) 13%, transparent);
  border: 1px solid color-mix(in oklab, var(--deco-warm) 38%, transparent);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.ch-cert b { display: block; font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-warm); margin-bottom: var(--space-1); }
.ch-cert span { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }

.ch-diagram {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.ch-diagram figure { margin: 0; }
.ch-diagram svg { display: block; width: 100%; height: auto; }
.ch-diagram figcaption {
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding: 0 var(--space-5) var(--space-4);
  text-align: center;
  font-style: italic;
}

.ch-moves { margin-bottom: var(--space-5); }
.ch-move { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin-bottom: var(--space-2); overflow: hidden; }
.ch-move.on { border-color: var(--border-brand); }
.ch-move-h {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%; padding: var(--space-4) var(--space-5);
  color: var(--text); font-family: var(--font-body); text-align: left;
  min-height: 3.5rem;
  transition: background var(--dur-fast) var(--ease-out);
}
.ch-move-h:hover { background: var(--glass-quiet); }
.ch-mn {
  flex: 0 0 1.875rem; height: 1.875rem;
  border-radius: 50%;
  background: var(--brand-tint-2);
  color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-base);
}
.ch-mt { flex: 1; }
.ch-mt b { display: block; font-family: var(--font-display); font-size: var(--text-md); }
.ch-mt i { display: block; font-style: normal; font-size: var(--text-base); color: var(--text-muted); margin-top: 1px; }
.ch-mp { font-size: var(--text-sm); color: var(--accent-warm); white-space: nowrap; }
.ch-move-b { padding: 0 var(--space-5) var(--space-4) 4rem; }
@media (max-width: 560px) { .ch-move-b { padding: 0 var(--space-5) var(--space-4); } }
.ch-move-b p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); }

.ch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.ch-card {
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: left;
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.ch-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-3); }
.ch-card.on { border-color: color-mix(in oklab, var(--deco-warm) 45%, transparent); }
.ch-c-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); gap: var(--space-2); }
.ch-c-n { margin-bottom: 0; }
.ch-c-mins { font-size: var(--text-xs); color: var(--text-muted); }
.ch-c-tick { font-size: var(--text-xs); color: var(--accent-warm); font-weight: var(--weight-semi); white-space: nowrap; }
.ch-card h4 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-2); color: var(--text); }
.ch-card p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); margin-bottom: var(--space-3); }
.ch-c-go { font-size: var(--text-base); color: var(--brand); display: inline-flex; align-items: center; gap: var(--space-1); }

.ch-book {
  display: flex; align-items: center; gap: var(--space-5);
  width: 100%; text-align: left;
  background: linear-gradient(120deg, color-mix(in oklab, var(--deco-warm) 12%, transparent), var(--brand-tint));
  border: 1px solid color-mix(in oklab, var(--deco-warm) 32%, transparent);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ch-book:hover { border-color: var(--accent-warm); transform: translateY(-2px); }
.ch-book-i { flex: none; color: var(--accent-warm); }
.ch-book-i svg { width: 1.75rem; height: 1.75rem; }
.ch-book b { display: block; font-family: var(--font-display); font-size: var(--text-md); margin-bottom: var(--space-1); color: var(--text); }
.ch-book span { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-normal); }
.ch-book-go { flex: none; font-size: var(--text-base); color: var(--accent-warm); white-space: nowrap; }
@media (max-width: 620px) { .ch-book { flex-direction: column; text-align: center; gap: var(--space-3); } }
.ch-foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.ch-foot span { font-size: var(--text-sm); color: var(--text-muted); flex: 1; min-width: 14rem; line-height: var(--leading-normal); }

/* In-module comprehension check */
.reader-card #cmCheck {
  background: var(--brand-tint);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin: var(--space-7) 0 var(--space-3);
}
@media (max-width: 560px) { .reader-card #cmCheck { padding: var(--space-5) var(--space-4); } }
.cm-check-lede { font-size: var(--text-base); color: var(--text-muted); line-height: var(--leading-prose); margin-bottom: var(--space-5); }
.cm-q { margin-bottom: var(--space-6); }
.cm-q:last-of-type { margin-bottom: var(--space-4); }
.cm-q-t { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug); margin-bottom: var(--space-3); color: var(--text); }
.cm-fb { border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); border: 1px solid var(--border-subtle); background: var(--glass); }
.cm-fb b { display: block; font-family: var(--font-display); font-size: var(--text-base); margin-bottom: var(--space-1); }
.cm-fb p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); }
.cm-fb-best b { color: var(--brand); }
.cm-fb-ok b   { color: var(--accent-warm); }
.cm-fb-poor b { color: var(--accent-rose); }
.cm-done { background: var(--glass); border: 1px solid color-mix(in oklab, var(--deco-warm) 38%, transparent); border-radius: var(--radius-lg); padding: var(--space-5); }
.cm-done b { display: block; font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-warm); margin-bottom: var(--space-2); }
.cm-done p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
.pr-toggle {
  display: inline-flex;
  gap: var(--space-1);
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  padding: var(--space-1);
  margin: var(--space-6) 0 var(--space-5);
}
.pr-tg {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--text-muted);
  font-family: var(--font-body); font-size: var(--text-base);
  padding: var(--space-2) var(--space-5);
  min-height: 2.5rem;
  border-radius: var(--radius-full);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pr-tg.on { background: var(--brand); color: var(--text-on-brand); font-weight: var(--weight-semi); }
.pr-tg span {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  background: color-mix(in oklab, var(--deco-warm) 22%, transparent);
  color: var(--accent-warm);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}
.pr-tg.on span { background: color-mix(in oklab, var(--text-on-brand) 20%, transparent); color: var(--text-on-brand); }

.pr-grid { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .pr-grid { grid-template-columns: 1fr 1fr; } .pr-grid > .pr-card:last-child { grid-column: 1 / -1; } }
@media (max-width: 680px)  { .pr-grid { grid-template-columns: 1fr; } .pr-grid > .pr-card:last-child { grid-column: auto; } }

.pr-card {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 3vw, 2rem);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pr-feat {
  border-color: var(--border-brand);
  background: linear-gradient(155deg, var(--brand-tint), color-mix(in oklab, var(--deco-cool) 7%, transparent)), var(--surface);
  box-shadow: var(--shadow-4);
}
.pr-tag { position: absolute; top: -.7rem; left: var(--space-6); }
.pr-card h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.pr-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-3); }
.pr-from { font-size: var(--text-base); color: var(--text-muted); }
.pr-price b { font-family: var(--font-display); font-size: var(--text-4xl); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.pr-price > span { font-size: var(--text-base); color: var(--text-muted); }
.pr-price b span { font: inherit; color: inherit; }
.pr-sub { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-5); }
.pr-list { list-style: none; margin-bottom: var(--space-6); flex: 1; }
.pr-list li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-muted); }
.pr-list li::before {
  content: "";
  position: absolute; left: 0; top: .34em;
  width: 1rem; height: 1rem;
  background: var(--brand);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}
.pr-list b { color: var(--text); font-weight: var(--weight-semi); }
.pr-cta { width: 100%; }
.pr-form { margin: 0; }
.pr-form.nl-form { max-width: none; margin-top: 0; }
.pr-note { font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-3); line-height: var(--leading-normal); }

.pr-strip { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); }
.pr-strip > div { flex: 1; min-width: 7rem; background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.pr-strip b { display: block; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--brand); line-height: var(--leading-tight); }
.pr-strip span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); line-height: var(--leading-normal); }
.pr-live { font-size: var(--text-base); color: var(--text-muted); margin-top: var(--space-4); text-align: center; }

.pr-org-t { margin-bottom: var(--space-5); }
.pr-form-org { position: relative; }
.pr-form-org > label { display: block; margin-bottom: var(--space-4); }
.pr-org-b { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }

.pr-legal { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6); }
.pr-legal b { display: block; font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-warm); margin-bottom: var(--space-2); }
.pr-legal p { font-size: var(--text-sm); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-3); max-width: var(--measure); }
.pr-legal p:last-child { margin-bottom: 0; }
.pr-faq { margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Account
   -------------------------------------------------------------------------- */
.au-box { margin-bottom: var(--space-4); }
.au-box.au-soft { padding: var(--space-5); }
.au-box h3 { font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.au-box p { font-size: var(--text-base); line-height: var(--leading-prose); color: var(--text-muted); margin-bottom: var(--space-4); max-width: var(--measure); }
.au-box p:last-child { margin-bottom: 0; }
.au-box a { color: var(--brand); }
.au-plan b { color: var(--text); }
.au-plan span { font-size: var(--text-base); }
.au-btns { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-2) 0 var(--space-3); }

/* --------------------------------------------------------------------------
   Premium reader content (illustrated stories, worksheets, tables)
   -------------------------------------------------------------------------- */
.reader-card .pm-art { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); margin: var(--block-gap) 0; overflow: hidden; }
/* Story illustrations are square (1254×1254, matching the 8.5×8.5 print
   editions). At full column width five of them in a row is an enormous
   scroll, so they are capped and centred rather than run full-bleed. */
.reader-card .pm-art.pm-art-img {
  padding: 0;
  background: none;
  border: none;
  display: flex;
  justify-content: center;
}
.reader-card .pm-art.pm-art-img img {
  width: 100%;
  max-width: min(100%, 30rem);
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-3);
}
.reader-card p.pm-story { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-prose); margin-bottom: var(--space-2); }
.reader-card .pm-sec { margin-bottom: var(--space-7); }
.reader-card .pm-fig { margin: var(--space-5) 0; }
.reader-card .pm-fig figcaption { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); text-align: center; font-style: italic; }
.reader-card .pm-obj { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); margin: var(--space-5) 0 var(--block-gap); }
.reader-card .pm-obj b { font-family: var(--font-display); color: var(--brand); }
.reader-card .pm-obj ul { margin-top: var(--space-3); padding-left: var(--space-5); }
.reader-card .pm-obj li { margin-bottom: var(--space-2); font-size: var(--text-base); color: var(--text-muted); }

.reader-card table.pm-table { width: 100%; margin: var(--space-4) 0; font-size: var(--text-base); display: block; overflow-x: auto; }
.reader-card table.pm-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-warm);
  border-bottom: 2px solid var(--border);
  padding: var(--space-2) var(--space-3);
  white-space: nowrap;
}
.reader-card table.pm-table td {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3);
  vertical-align: top;
  line-height: var(--leading-normal);
  color: var(--text-muted);
  min-width: 9rem;
}

.reader-card .pm-ws { background: var(--brand-tint); border: 1px solid var(--border-brand); border-radius: var(--radius-xl); padding: var(--space-6); margin: var(--block-gap) 0; }
.reader-card .pm-ws h4 { font-family: var(--font-display); font-size: var(--text-lg); margin-bottom: var(--space-1); color: var(--brand); }
.reader-card .pm-ws > p { font-size: var(--text-base); color: var(--text-muted); margin-bottom: var(--space-5); }
.pm-ws-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.pm-ws-row > div:only-child { grid-column: 1 / -1; }
.pm-ws-row label { display: block; font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--text); margin-bottom: var(--space-2); }
.pm-ws-row span { display: block; border-bottom: 1.5px solid var(--border); height: 1.6rem; }
@media (max-width: 560px) { .pm-ws-row { grid-template-columns: 1fr; } }

.reader-card .pm-next { background: var(--glass); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); margin-top: var(--space-6); }
.reader-card .pm-next b { display: block; font-family: var(--font-display); font-size: var(--text-md); color: var(--accent-warm); margin-bottom: var(--space-1); }
.reader-card .pm-next span { font-size: var(--text-base); color: var(--text-muted); }