/* ==================================================================
   AI-103 Study Lab — design layer.

   Loaded after the page's own <style>, so it restyles the app without
   touching a single line of its markup or JS. The original CSS is
   entirely var()-driven, which means redefining the tokens below
   re-skins every screen coherently — landing page and guide alike.

   Direction: light, clean, academic. Light is now the default; the
   existing theme toggle still switches to a refined dark.
================================================================== */

/* ---------------- Tokens ---------------- */

/* Light is the default, including before the theme script runs. */
:root,
:root[data-theme="light"] {
  --paper: #FBFBFD;          /* page canvas, a hair off pure white */
  --surface: #FFFFFF;        /* raised cards */
  --card: #FFFFFF;
  --card-tint: #F6F7FB;      /* secondary fills */
  --ink: #0C1425;            /* near-black, slightly blue */
  --ink-mid: #3C4759;
  --ink-soft: #667085;
  --line: #E5E8EF;
  --line-strong: #D3D8E3;
  --accent: #1D4ED8;
  --accent-deep: #1E3A8A;
  --accent-soft: #EEF3FE;
  --gold: #9A6B12;
  --gold-soft: #FBF3E0;
  --pass: #1F7A4D;
  --pass-soft: #E6F5EC;
  --fail: #B3382C;
  --fail-soft: #FCEDEA;

  --dom-genai: #12706B;    --dom-genai-soft: #E6F2F0;
  --dom-plan: #3C5285;     --dom-plan-soft: #ECEFF7;
  --dom-extract: #8A4630;  --dom-extract-soft: #F7EDE8;
  --dom-text: #97671A;     --dom-text-soft: #FBF3E2;
  --dom-vision: #634580;   --dom-vision-soft: #F2EDF7;

  --shadow-sm: 0 1px 2px rgba(12, 20, 37, 0.05);
  --shadow-md: 0 4px 16px -4px rgba(12, 20, 37, 0.10), 0 1px 3px rgba(12, 20, 37, 0.05);
  --shadow-lg: 0 24px 60px -18px rgba(12, 20, 37, 0.22), 0 2px 8px rgba(12, 20, 37, 0.06);
  --radius: 12px;
  --radius-lg: 18px;
}

:root[data-theme="dark"] {
  --paper: #0B1017;
  --surface: #131B26;
  --card: #131B26;
  --card-tint: #18212E;
  --ink: #EEF2F7;
  --ink-mid: #B9C3D2;
  --ink-soft: #8E9AAC;
  --line: #24303F;
  --line-strong: #334154;
  --accent: #4CC8E8;
  --accent-deep: #8FDDF2;
  --accent-soft: #10323F;
  --gold: #E4B357;
  --gold-soft: #33280F;
  --pass: #3FBE86;
  --pass-soft: #103526;
  --fail: #F08A80;
  --fail-soft: #3A1C1A;

  --dom-genai: #35C3BB;    --dom-genai-soft: #0F2F2D;
  --dom-plan: #7E93C4;     --dom-plan-soft: #1A2133;
  --dom-extract: #D38A65;  --dom-extract-soft: #2C1E16;
  --dom-text: #E0AE4B;     --dom-text-soft: #2C2310;
  --dom-vision: #B396D3;   --dom-vision-soft: #221A2E;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 28px 70px -20px rgba(0, 0, 0, 0.7);
}

/* ---------------- Base ---------------- */

body {
  background:
    radial-gradient(1100px 520px at 12% -8%, var(--accent-soft), transparent 60%),
    var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: -0.015em; color: var(--ink); }
h1 { font-weight: 700; }

/* The blanket transition on * made large pages feel sluggish on theme
   switch; scope it to the properties and elements that actually need it. */
* { transition: none; }
a, button, .card, .kcheck, .kcheck-opt, .lab-choice, .domain-card,
.tool-group, .toolbelt-item, .side-step-link, .watch-item, .audio-card,
.auth-btn, .auth-tab, .step-nav-btn, .lp-card, .lp-btn, .lp-plan {
  transition: background-color 0.18s ease, border-color 0.18s ease,
              color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- App chrome ---------------- */

.topbar-global {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.topbar-brand { letter-spacing: -0.02em; }

.sidebar {
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  border-right: 1px solid var(--line);
}
.side-step-link.current {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.side-step-link:hover { background: var(--card-tint); }

.step-topbar { border-bottom: 1px solid var(--line); }
.step-progress-track { background: var(--line); }

/* The footer nav is sticky at the bottom, so while it is pinned it sits over
   whatever is above it in flow. Without room to scroll past, the last element
   on a step stays permanently half-hidden behind it. Reserve the footer's own
   height (plus a little air) at the end of the pane. */
.step-content-pane { padding-bottom: 104px; }
@media (max-width: 720px) {
  .step-content-pane { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)); }
}

/* Keep the bar opaque over anything that scrolls beneath it. */
.step-footer-nav { background: var(--paper); }

/* Cards and panels: hairline border plus a soft lift. */
.card, .kcheck, .lab, .tool-group, .toolbelt-item, .diagram-wrap,
.auth-panel, .audio-card, .watch-item {
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.kcheck { background: var(--surface); border-color: var(--line); }
.callout { border-radius: var(--radius); }

.kcheck-opt, .lab-choice {
  border-radius: 10px;
  background: var(--surface);
  border-color: var(--line-strong);
}
.kcheck-opt:hover:not([disabled]), .lab-choice:hover:not([disabled]) {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}

.step-nav-btn, .auth-btn, .auth-submit, .lab-restart, .kcheck-again {
  border-radius: 999px;
}
.step-nav-btn.primary, .auth-submit {
  background: var(--accent);
  color: #fff;
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
.step-nav-btn.primary:hover, .auth-submit:hover:not([disabled]) {
  background: var(--accent-deep);
}

.domain-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}
.domain-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.progress-chip {
  border-radius: 999px;
  background: var(--card-tint);
  border: 1px solid var(--line);
}

table { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
th { background: var(--card-tint); }

/* Reference links, tucked behind a disclosure at the end of the guide. */
.tool-details {
  margin: 20px 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-tint);
  padding: 0 16px;
}
.tool-details summary {
  cursor: pointer; padding: 14px 0; list-style: none;
  font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 14px;
  color: var(--ink); display: flex; align-items: center; gap: 8px;
}
.tool-details summary::-webkit-details-marker { display: none; }
.tool-details summary::before {
  content: "▸"; color: var(--accent); font-size: 12px; transition: transform 0.15s ease;
}
.tool-details[open] summary::before { transform: rotate(90deg); }
.tool-details summary:hover { color: var(--accent); }
.tool-details[open] { padding-bottom: 16px; }

/* ---------------- How it works ---------------- */

.hiw-scrim {
  position: fixed; inset: 0; background: rgba(8, 14, 25, 0.6);
  z-index: 60; display: none;
}
.hiw-scrim.open { display: block; }
.hiw-panel {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(760px, calc(100vw - 32px)); max-height: min(88vh, 860px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 36px; display: none;
  box-shadow: var(--shadow-lg);
}
.hiw-panel.open { display: block; }

.hiw-head { margin-bottom: 26px; }
.hiw-panel h3 {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
  letter-spacing: -0.02em; margin: 0 0 10px;
}
.hiw-lede { font-size: 15px; color: var(--ink-mid); line-height: 1.6; margin: 0; max-width: 62ch; }

.hiw-steps { list-style: none; padding: 0; margin: 0 0 30px; counter-reset: none; }
.hiw-step {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.hiw-step:first-child { border-top: none; padding-top: 0; }
.hiw-step-n {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 700;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.hiw-step h4 {
  font-family: 'Fraunces', serif; font-size: 1.02rem; font-weight: 600;
  margin: 4px 0 6px; letter-spacing: -0.01em;
}
.hiw-step p { margin: 0; font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

.hiw-h4 {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
  margin: 0 0 14px;
}
.hiw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; margin-bottom: 22px; }
.hiw-item { display: flex; gap: 10px; align-items: flex-start; }
.hiw-item strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.hiw-item span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.hiw-tick { color: var(--pass); font-weight: 700; flex: 0 0 auto; font-size: 13px; line-height: 1.6; }

.hiw-note {
  background: var(--card-tint); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
  font-size: 13.5px; color: var(--ink-mid); line-height: 1.55; margin-bottom: 24px;
}
.hiw-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hiw-cta .lp-btn { flex: 1 1 200px; }

@media (max-width: 640px) {
  .hiw-panel { padding: 26px 18px; }
  .hiw-grid { grid-template-columns: 1fr; }
}

/* ---------------- About this material ---------------- */

.sidebar-about {
  display: inline-block; margin-top: 8px; padding: 0;
  background: none; border: none; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-size: inherit;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px;
}
.sidebar-about:hover { color: var(--accent); }

.lp-footer-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-footer-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-size: 13px;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px;
}
.lp-footer-link:hover { color: var(--accent); }

.about-scrim {
  position: fixed; inset: 0; background: rgba(8, 14, 25, 0.55);
  z-index: 60; display: none;
}
.about-scrim.open { display: block; }
.about-panel {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(600px, calc(100vw - 32px)); max-height: min(84vh, 720px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px 30px; display: none;
  box-shadow: var(--shadow-lg);
}
.about-panel.open { display: block; }
.about-panel h3 { font-family: 'Fraunces', serif; font-size: 1.32rem; margin: 0 0 4px; }
.about-h4 {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent);
  margin: 22px 0 8px;
}
.about-p { font-size: 14px; color: var(--ink-mid); line-height: 1.65; margin: 0; }
.about-p a { color: var(--accent); }

@media (max-width: 560px) { .about-panel { padding: 22px 18px; } }

/* ---------------- Foundry SDK code lab ---------------- */

/* Code sits on a dark editor surface in both themes: it reads as code at a
   glance, and syntax colours need a fixed background to stay legible. */
.cl-code, .lp-code {
  background: #0F1623; color: #D7DEE8;
  border: 1px solid #1E2A3B; border-radius: 10px;
  padding: 12px 0; margin: 4px 0 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 12.8px; line-height: 1.7;
  overflow-x: auto;
}
.cl-line { display: flex; align-items: baseline; white-space: pre; min-height: 1.7em; }
.cl-ln {
  flex: 0 0 auto; width: 34px; padding-right: 12px; text-align: right;
  color: #4A5870; user-select: none;
}
.cl-text { padding-right: 14px; }

.tok-k { color: #C792EA; }            /* keywords */
.tok-s { color: #C3E88D; }            /* strings */
.tok-c { color: #65758C; font-style: italic; }  /* comments */
.tok-t { color: #82AAFF; }            /* CapitalisedNames */

.cl-slot {
  color: #F5C77A; background: rgba(245, 199, 122, 0.08);
  border: 1px dashed rgba(245, 199, 122, 0.55); border-radius: 5px;
  padding: 0 8px; margin-left: -2px; font-style: italic;
}
.cl-fill-ok, .cl-fill-bad { border-radius: 5px; padding: 0 8px; margin-left: -2px; }
.cl-fill-ok { background: rgba(63, 190, 134, 0.16); box-shadow: inset 3px 0 0 #3FBE86; }
.cl-fill-bad { background: rgba(240, 138, 128, 0.16); box-shadow: inset 3px 0 0 #F08A80; }

.cl-opts { display: flex; flex-direction: column; gap: 8px; }
.cl-opt {
  text-align: left; cursor: pointer;
  font-family: 'JetBrains Mono', monospace; font-size: 12.5px; white-space: pre-wrap;
  background: #0F1623; color: #D7DEE8;
  border: 1px solid #1E2A3B; border-radius: 8px; padding: 10px 13px;
}
.cl-opt:hover:not([disabled]) { border-color: var(--accent); transform: translateY(-1px); }
.cl-opt.correct { border-color: #3FBE86; box-shadow: inset 3px 0 0 #3FBE86; }
.cl-opt.wrong { border-color: #F08A80; box-shadow: inset 3px 0 0 #F08A80; }
.cl-opt.dim { opacity: 0.4; }

.cl-caveat {
  margin-top: 14px; font-size: 12px; color: var(--ink-soft); line-height: 1.55;
}
.cl-caveat a { color: var(--accent); }

/* The same code lab, compacted for the landing hero. */
.lp-code-body { min-height: 468px; }
.lp-code-prompt { font-size: 13px; min-height: 2.6em; margin-bottom: 10px; }
.lp-code { font-size: 11.6px; line-height: 1.65; margin: 0 0 10px; padding: 9px 0; overflow-x: hidden; }
.lp-code .cl-ln { width: 26px; padding-right: 10px; }
/* The hero column is a fixed width now, and a few SDK lines are longer than
   it — wrap them under their own line number instead of scrolling code out
   of sight in a demo nobody can scroll. */
.lp-code .cl-line { white-space: pre-wrap; }
.lp-code .cl-text { min-width: 0; overflow-wrap: anywhere; }
.lp-code-opts { display: flex; flex-direction: column; gap: 6px; }
.lp-code-opt {
  font-family: 'JetBrains Mono', monospace; font-size: 11.2px;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden;
  background: #0F1623; color: #D7DEE8;
  border: 1px solid #1E2A3B; border-radius: 7px; padding: 7px 11px;
  transition: opacity 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.lp-code-opt.is-correct { border-color: #3FBE86; box-shadow: inset 3px 0 0 #3FBE86; }
.lp-code-opt.is-dim { opacity: 0.35; }
.lp-code-body .lp-demo-feedback { min-height: 4.4em; }

@media (max-width: 600px) {
  .lp-code-body { min-height: 440px; }
}

/* Premium prompt in place of a lab's reshuffle control. */
.lab-upsell {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 10px; padding: 16px 18px; margin-top: 12px;
  text-align: center;
}
.lab-upsell-text { font-size: 13.5px; color: var(--ink-mid); line-height: 1.55; }

/* Free-preview exhausted prompt inside a knowledge check. */
.kcheck-upsell {
  width: 100%;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 10px; padding: 14px 16px;
  font-size: 13.5px; color: var(--ink-mid); line-height: 1.55;
}
.kcheck-upsell-btn {
  margin-top: 10px;
  font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 13.5px;
  background: var(--accent); color: #fff; border: none;
  border-radius: 999px; padding: 9px 18px; cursor: pointer;
}
.kcheck-upsell-btn:hover { background: var(--accent-deep); }
.kcheck-upsell-btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------------- Copy deterrent on paid content ----------------
   Only the question bank and labs. Lesson prose stays selectable: it is
   free content, and blocking it would just irritate readers. */
.kcheck, .lab, .sim-mount {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Inputs inside the simulators must still accept typing and selection. */
.kcheck input, .kcheck textarea,
.lab input, .lab textarea,
.sim-mount input, .sim-mount textarea {
  -webkit-user-select: text;
  user-select: text;
}
.kcheck img, .lab img, .sim-mount img { -webkit-user-drag: none; user-drag: none; }

.copy-guard-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px);
  z-index: 80; max-width: min(460px, calc(100vw - 32px));
  background: var(--ink); color: var(--paper);
  padding: 12px 20px; border-radius: 999px;
  font-family: 'Source Sans 3', sans-serif; font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.copy-guard-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Signed-in account chip in the landing nav. */
.lp-account {
  display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 14px 4px 4px; cursor: pointer;
  max-width: 280px;
}
.lp-account:hover { border-color: var(--accent); }
.lp-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-account-text { display: flex; align-items: center; gap: 7px; min-width: 0; }
.lp-account-email {
  font-family: 'Source Sans 3', sans-serif; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px;
}
.lp-account .acct-badge { margin-top: 0; }
.lp-btn[disabled] { opacity: 0.7; cursor: default; transform: none; }

@media (max-width: 600px) {
  /* Avatar only on a phone — the nav has no room for an email address. */
  .lp-account { padding: 4px; }
  .lp-account-text { display: none; }
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.auth-hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ---------------- Account menu ---------------- */

.topbar-brand {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1rem;
  color: var(--ink); letter-spacing: -0.02em;
}
.topbar-brand:hover { color: var(--accent); }
.topbar-brand:hover span { color: var(--accent); }
.topbar-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.acct-menu { position: relative; }
.acct-trigger {
  display: flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: 4px 10px 4px 4px; cursor: pointer;
}
.acct-trigger:hover { border-color: var(--accent); }
.acct-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.acct-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--dom-genai));
  color: #fff; font-size: 12px; font-weight: 700;
  font-family: 'Source Sans 3', sans-serif;
}
.acct-caret { font-size: 10px; color: var(--ink-soft); }
/* The plan, shown in the trigger itself so it's visible on every page
   without opening the menu. */
.acct-badge.acct-inline { margin-top: 0; }
.acct-badge.acct-free { background: var(--card-tint); color: var(--ink-soft); border: 1px solid var(--line); }
.acct-badge.acct-suspended { background: var(--fail-soft); color: var(--fail); }
.acct-signin { text-decoration: none; display: inline-flex; align-items: center; }

.acct-drop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 232px; display: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 6px;
}
.acct-menu.open .acct-drop { display: block; }
.acct-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.acct-email {
  font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-badge {
  display: inline-block; margin-top: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--card-tint); color: var(--ink-soft);
}
.acct-badge.acct-paid, .acct-badge.acct-admin { background: var(--accent-soft); color: var(--accent); }
.acct-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-radius: 8px;
  font-family: 'Source Sans 3', sans-serif; font-size: 14px; color: var(--ink);
  padding: 9px 12px; cursor: pointer;
}
.acct-item:hover { background: var(--card-tint); }
.acct-upgrade { color: var(--accent); font-weight: 600; display: block; }
.acct-upgrade-title { display: block; }
.acct-upgrade-sub {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 500; color: var(--ink-soft);
}
.acct-signout { color: var(--ink-soft); }
.acct-sep { height: 1px; background: var(--line); margin: 6px 0; }

/* ---------------- Progress dashboard ---------------- */

.dash-scrim {
  position: fixed; inset: 0; background: rgba(8, 14, 25, 0.55);
  z-index: 60; display: none;
}
.dash-scrim.open { display: block; }
.dash-panel {
  position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px)); max-height: min(86vh, 760px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 28px; display: none;
  box-shadow: var(--shadow-lg);
}
.dash-panel.open { display: block; }
.dash-panel h3 { font-family: 'Fraunces', serif; font-size: 1.32rem; margin: 0 0 6px; }
.dash-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }
.dash-loading { color: var(--ink-soft); font-size: 14px; padding: 20px 0; }

.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin-bottom: 24px;
}
.dash-stat { background: var(--card-tint); padding: 14px 8px; text-align: center; }
.dash-stat-n { font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.35rem; line-height: 1; }
.dash-stat-l {
  font-size: 10.5px; color: var(--ink-soft); margin-top: 5px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}

.dash-h4 {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-soft);
  margin: 24px 0 12px;
}
.dash-domains { display: flex; flex-direction: column; gap: 13px; }
.dash-domain-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dash-domain-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.dash-domain-n { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-soft); }
.dash-bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s ease; }

.dash-recs { display: flex; flex-direction: column; gap: 8px; }
.dash-rec {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card-tint); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif;
}
.dash-rec:hover { border-color: var(--accent); background: var(--accent-soft); }
.dash-rec-tag {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 7px; border-radius: 999px; flex: 0 0 auto;
}
.dash-not-yet-right { background: var(--fail-soft); color: var(--fail); }
.dash-not-started { background: var(--card-tint); color: var(--ink-soft); border: 1px solid var(--line); }
.dash-shaky { background: var(--gold-soft); color: var(--gold); }
.dash-mastered { background: var(--pass-soft); color: var(--pass); }
.dash-rec-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-rec-title {
  font-size: 13.8px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-rec-why { font-size: 12px; color: var(--ink-soft); }
.dash-rec-go { color: var(--accent); font-weight: 700; flex: 0 0 auto; }
.dash-empty { color: var(--ink-soft); font-size: 14px; margin: 0; }

.dash-milestones { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
.dash-milestone-pill {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 999px; background: var(--pass-soft); color: var(--pass);
}

.dash-upsell {
  margin-top: 16px; padding: 16px; border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.dash-upsell p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-mid); }
.dash-upsell-btn {
  width: 100%; background: var(--accent); color: #fff; border: none;
  border-radius: 999px; padding: 11px; cursor: pointer;
  font-family: 'Source Sans 3', sans-serif; font-weight: 700; font-size: 14px;
}
.dash-upsell-btn:hover { background: var(--accent-deep); }
.dash-upsell-btn[disabled] { opacity: 0.6; cursor: progress; }

.dash-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; background: var(--ink); color: var(--paper);
  padding: 13px 22px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow-lg);
}
.dash-toast.ok { background: var(--pass); color: #fff; }
.dash-toast.warn { background: var(--gold); color: #fff; }

@media (max-width: 560px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-panel { padding: 22px 18px; }
}

/* ==================================================================
   Landing page
================================================================== */

.lp {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}
body.landing-open .lp { display: flex; }
body.landing-open .app,
body.landing-open .topbar-global { display: none; }

.lp-inner { width: min(1120px, 100% - 44px); margin: 0 auto; }

/* --- top bar --- */
.lp-nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid transparent;
}
.lp-nav.scrolled { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }
.lp-nav-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 0;
}
.lp-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.05rem;
  color: var(--ink); letter-spacing: -0.02em;
}
/* The site icon itself, rather than a "103" tile that said the same thing
   twice next to the wordmark. The SVG carries its own rounded gradient. */
.lp-logo-mark {
  width: 30px; height: 30px; flex: 0 0 auto; display: block;
  border-radius: 9px; box-shadow: var(--shadow-sm);
}
.lp-logo span { color: var(--ink-soft); font-family: 'Source Sans 3', sans-serif; font-weight: 500; }
.lp-nav-actions { display: flex; align-items: center; gap: 10px; }

.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Source Sans 3', sans-serif; font-weight: 600; font-size: 14.5px;
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  text-decoration: none; white-space: nowrap;
}
.lp-btn:hover { border-color: var(--accent); color: var(--accent); }
.lp-btn-primary {
  background: var(--accent); border-color: transparent; color: #fff;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.lp-btn-primary:hover { background: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.lp-btn-ghost { background: transparent; border-color: transparent; }
.lp-btn-ghost:hover { background: var(--card-tint); color: var(--ink); }
.lp-btn-lg { padding: 14px 26px; font-size: 15.5px; }

/* --- hero --- */
.lp-hero { padding: 62px 0 34px; }
/* minmax(0, …) rather than a bare fr: the demo cycles through five drills
   whose code lines differ in length, and an auto minimum would let the
   longest line widen the figure column on every step — pushing the copy
   beside it into different line breaks. The tracks stay put instead. */
.lp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 52px; align-items: center;
}
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 20px;
}
.lp-h1 {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.5rem);
  line-height: 1.08; letter-spacing: -0.03em; margin: 0 0 18px;
}
.lp-h1 em {
  font-style: normal;
  background: linear-gradient(120deg, var(--accent), var(--dom-genai));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lp-lede {
  font-size: clamp(1rem, 0.96rem + 0.25vw, 1.16rem);
  color: var(--ink-mid); line-height: 1.6; margin: 0 0 28px; max-width: 54ch;
}
.lp-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.lp-cta-note {
  margin-top: 14px; font-size: 13px; color: var(--ink-soft);
  display: flex; align-items: center; gap: 7px;
}

/* --- hero demo: the interactive lab, playing itself --- */
.lp-figure-wrap { position: relative; }
.lp-figure-demo { padding: 0; overflow: hidden; }

.lp-demo-badge {
  position: absolute; top: -14px; right: -10px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 9px 14px; box-shadow: var(--shadow-md);
  font-family: 'Source Sans 3', sans-serif; font-size: 12.5px; line-height: 1.25;
}
.lp-demo-badge strong { display: block; color: var(--ink); font-size: 13px; }
.lp-demo-badge-sub { display: block; color: var(--ink-soft); font-size: 11.5px; }
.lp-demo-badge-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--pass); flex: 0 0 auto;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass) 22%, transparent);
  animation: lp-live 2s ease-in-out infinite;
}
@keyframes lp-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.lp-demo { background: var(--card-tint); border-radius: inherit; overflow: hidden; }
.lp-demo-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px; background: var(--card-tint);
  border-bottom: 1px solid var(--line);
}
.lp-demo-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.lp-demo-url {
  margin-left: 10px; flex: 1;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 10px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lp-demo-body { position: relative; background: var(--surface); padding: 18px 20px 20px; min-height: 322px; }
.lp-demo-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lp-demo-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 14.5px; color: var(--ink); }
.lp-demo-score { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-soft); }
.lp-demo-scenario {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.45; margin-bottom: 14px; min-height: 3.6em;
}
.lp-demo-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-demo-choice {
  font-size: 12.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 9px 11px;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.lp-demo-choice.is-correct {
  border-color: var(--pass); background: var(--pass-soft); color: var(--pass); font-weight: 600;
}
.lp-demo-choice.is-wrong { border-color: var(--fail); background: var(--fail-soft); color: var(--fail); }
.lp-demo-choice.is-dim { opacity: 0.45; }

.lp-demo-feedback {
  margin-top: 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-mid); border-left: 3px solid var(--pass);
  padding-left: 11px; opacity: 0; transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  min-height: 3em;
}
.lp-demo-feedback.is-shown { opacity: 1; transform: none; }

.lp-demo-cursor {
  position: absolute; top: 0; left: 0; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
  opacity: 0; pointer-events: none;
  transition: transform 0.75s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.3s ease;
}
.lp-demo-cursor.is-tapping { transform-origin: center; filter: brightness(1.25); }

@media (max-width: 960px) {
  .lp-demo-badge { top: -12px; right: 0; }
}
@media (max-width: 600px) {
  .lp-demo-body { min-height: 300px; padding: 16px 14px 18px; }
  .lp-demo-choices { grid-template-columns: 1fr; }
  .lp-demo-badge { display: none; }
}

/* --- hero figure --- */
.lp-figure {
  position: relative; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: 22px; overflow: hidden;
}
.lp-figure::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px 220px at 78% 8%, var(--accent-soft), transparent 70%);
  pointer-events: none;
}
.lp-figure svg { display: block; width: 100%; height: auto; position: relative; }

.lp-flow-line { stroke-dasharray: 5 7; animation: lp-dash 2.6s linear infinite; }
@keyframes lp-dash { to { stroke-dashoffset: -24; } }
.lp-pulse { animation: lp-pulse 3s ease-in-out infinite; transform-origin: center; }
.lp-pulse-2 { animation-delay: 0.5s; }
.lp-pulse-3 { animation-delay: 1s; }
.lp-pulse-4 { animation-delay: 1.5s; }
.lp-pulse-5 { animation-delay: 2s; }
@keyframes lp-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

/* --- stats --- */
.lp-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 44px 0 8px;
}
.lp-stat { background: var(--surface); padding: 22px 20px; text-align: center; }
.lp-stat-n {
  font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.9rem;
  color: var(--ink); line-height: 1; letter-spacing: -0.02em;
}
.lp-stat-l {
  font-size: 12.5px; color: var(--ink-soft); margin-top: 7px;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
}

/* --- sections --- */
.lp-section { padding: 74px 0; }
.lp-section-head { max-width: 62ch; margin-bottom: 38px; }
.lp-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);
  margin-bottom: 12px;
}
.lp-h2 {
  font-family: 'Fraunces', serif; font-weight: 700;
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.3rem);
  line-height: 1.15; letter-spacing: -0.025em; margin: 0 0 14px;
}
.lp-sub { color: var(--ink-mid); font-size: 1.02rem; margin: 0; line-height: 1.6; }

.lp-grid { display: grid; gap: 18px; }
.lp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid-2 { grid-template-columns: repeat(2, 1fr); }

.lp-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.lp-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lp-card-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px;
  display: grid; place-items: center; font-size: 18px;
  background: var(--accent-soft); color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}
.lp-card h3 {
  font-family: 'Fraunces', serif; font-size: 1.08rem; font-weight: 600;
  margin: 0 0 8px; letter-spacing: -0.01em;
}
.lp-card p { margin: 0; color: var(--ink-soft); font-size: 14.2px; line-height: 1.6; }

/* --- domains --- */
.lp-domains { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.lp-domain {
  border-radius: var(--radius); padding: 20px 18px;
  border: 1px solid var(--line); background: var(--surface);
  border-top: 3px solid var(--d);
}
.lp-domain-w {
  font-family: 'JetBrains Mono', monospace; font-size: 11.5px;
  font-weight: 700; color: var(--d);
}
.lp-domain-n {
  font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 600;
  margin: 9px 0 0; line-height: 1.3;
}

/* --- pricing --- */
.lp-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; align-items: stretch; }
.lp-plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px; position: relative;
  /* A column so the call to action can be pinned to the bottom: the two plans
     list different numbers of features, and buttons at different heights read
     as a mistake. */
  display: flex; flex-direction: column;
}
.lp-plan-featured {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* A quiet accent rule rather than a loud badge — the premium plan should draw
   the eye without shouting over the teaching. */
.lp-plan-featured::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--dom-genai));
}
.lp-plan-tag {
  position: absolute; top: 18px; right: 20px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em;
  background: var(--accent-soft); color: var(--accent);
  padding: 4px 10px; border-radius: 999px;
}
.lp-plan h3 { font-family: 'Fraunces', serif; font-size: 1.22rem; margin: 0 0 6px; }
.lp-plan-price {
  font-family: 'Fraunces', serif; font-size: 2.1rem; font-weight: 700;
  letter-spacing: -0.02em; margin: 14px 0 4px; line-height: 1;
}
.lp-plan-price small { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); }
/* Both notes are one line at desktop width; reserving two keeps the feature
   lists starting on the same line when one of them wraps. */
.lp-plan-note { font-size: 13px; color: var(--ink-soft); margin: 0 0 20px; min-height: 2.6em; }
.lp-plan ul {
  list-style: none; padding: 0; margin: 0 0 24px;
  border-top: 1px solid var(--line); padding-top: 6px;
}
.lp-plan li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14.2px; color: var(--ink-mid); padding: 7px 0; line-height: 1.5;
}
.lp-plan li::before {
  content: "✓"; color: var(--pass); font-weight: 700; flex: 0 0 auto;
  font-size: 13px; line-height: 1.5;
}
.lp-plan li.off { color: var(--ink-soft); }
.lp-plan li.off::before { content: "—"; color: var(--ink-soft); }
/* auto margin: whatever each plan lists, the two buttons line up. */
.lp-plan .lp-btn { width: 100%; margin-top: auto; }

/* --- integrity panel --- */
.lp-integrity {
  background: var(--card-tint); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 34px 32px;
}
.lp-integrity h2 { font-family: 'Fraunces', serif; font-size: 1.3rem; margin: 0 0 12px; }
.lp-integrity p { color: var(--ink-mid); font-size: 14.6px; line-height: 1.65; margin: 0 0 12px; max-width: 78ch; }
.lp-integrity p:last-child { margin-bottom: 0; }

/* --- final CTA --- */
.lp-final {
  text-align: center; padding: 64px 40px; border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--accent-deep), var(--accent));
  box-shadow: var(--shadow-lg); color: #fff;
}
.lp-final h2 {
  font-family: 'Fraunces', serif; font-weight: 700; color: #fff;
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  letter-spacing: -0.025em; margin: 0 0 12px;
}
.lp-final p { color: rgba(255, 255, 255, 0.86); margin: 0 auto 26px; max-width: 54ch; font-size: 1.02rem; }
.lp-final .lp-btn {
  background: #fff; color: var(--accent-deep); border-color: transparent;
}
.lp-final .lp-btn:hover { background: #F1F5FF; color: var(--accent-deep); transform: translateY(-1px); }

/* --- footer --- */
.lp-footer {
  margin-top: 72px; border-top: 1px solid var(--line);
  padding: 30px 0 44px; color: var(--ink-soft); font-size: 13px;
}
.lp-footer-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.lp-footer a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 2px; }
.lp-footer a:hover { color: var(--accent); }

/* --- responsive --- */
@media (max-width: 960px) {
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .lp-figure { order: -1; }
  .lp-grid-3, .lp-grid-2 { grid-template-columns: 1fr; }
  .lp-domains { grid-template-columns: repeat(2, 1fr); }
  .lp-stats { grid-template-columns: repeat(2, 1fr); }
  .lp-plans { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-inner { width: calc(100% - 32px); }
  .lp-hero { padding: 38px 0 20px; }
  .lp-section { padding: 52px 0; }
  .lp-domains { grid-template-columns: 1fr; }
  .lp-nav-actions .lp-btn:not(.lp-btn-primary) { display: none; }
  .lp-final { padding: 44px 22px; }
  .lp-cta-row .lp-btn { flex: 1 1 100%; }
}