/* SystemLore brand theme — linked AFTER each page's inline <style> so it wins the cascade.
   Engineering-notebook identity: warm graphite ink + one rust-signal accent.
   Dark = immersive default; light = reading/learning surfaces (Academy, Library, hub). */
:root{
  /* PRIMITIVE PALETTE
     One place for the actual color decisions. Page CSS should prefer the semantic
     --sl-* tokens below; the old --bg/--surface aliases remain only for migration. */
  --sl-ink-950:#100e0b;
  --sl-ink-900:#16130f;
  --sl-ink-850:#1e1a15;
  --sl-ink-800:#262119;
  --sl-line-700:#332c22;
  --sl-line-650:#473d2f;
  --sl-paper-50:#fffdf8;
  --sl-paper-100:#faf6ec;
  --sl-paper-150:#f5f1e8;
  --sl-paper-200:#efe8d8;
  --sl-paper-250:#e3dccc;
  --sl-paper-300:#d2c8b3;
  --sl-rust-500:#e0683a;
  --sl-rust-600:#c4541f;
  --sl-rust-700:#b84d18;
  --sl-rust-800:#a3440f;
  --sl-rust-900:#87370b;
  --sl-amber-500:#d9a441;
  --sl-amber-650:#b9821f;
  --sl-red-500:#d6604d;
  --sl-red-650:#b5482f;
  --sl-olive-500:#8a9a55;
  --sl-olive-650:#6f7d3f;

  /* SEMANTIC TOKENS: DARK */
  --sl-page:var(--sl-ink-950);
  --sl-canvas:var(--sl-ink-900);
  --sl-surface:var(--sl-ink-850);
  --sl-surface-raised:var(--sl-ink-800);
  --sl-surface-muted:var(--sl-ink-900);
  --sl-border:var(--sl-line-700);
  --sl-border-strong:var(--sl-line-650);
  --sl-text:#f3ece1;
  --sl-text-muted:#b3a791;
  --sl-text-faint:#928771; /* passes AA on dark page for normal text */
  --sl-accent:var(--sl-rust-500);
  --sl-accent-strong:var(--sl-rust-600);
  --sl-accent-soft:#3a2417;
  --sl-warning:var(--sl-amber-500);
  --sl-danger:var(--sl-red-500);
  --sl-success:var(--sl-olive-500);
  --sl-on-accent:#1a0f08;
  --sl-on-accent-contrast:#fff8f2;
  --sl-page-bg:radial-gradient(1100px 760px at 72% -12%, var(--sl-surface), var(--sl-page) 60%);
  --sl-surface-bg:var(--sl-surface);
  --sl-card-bg:var(--sl-surface);
  --sl-card-bg-raised:var(--sl-surface-raised);
  --sl-input-bg:var(--sl-page);
  --sl-overlay:rgba(16,14,11,.86);
  --sl-focus:var(--sl-accent);
  --sl-shadow-card:0 18px 45px rgba(0,0,0,.28);
  --sl-shadow-overlay:0 30px 80px rgba(0,0,0,.6);
  --sl-success-soft:rgba(16,40,24,.85);
  --sl-success-border:#2c4a1e;
  --sl-danger-soft:#241413;
  --sl-danger-border:#5a2e28;
  --sl-canvas-grid:rgba(71,61,47,.22);
  --sl-canvas-node:#1e1a15;
  --sl-canvas-label:#928771;
  --sl-canvas-glow-start:rgba(255,255,255,.04);
  --sl-canvas-glow-end:rgba(0,0,0,0);
  --sl-flow-read:#e0683a;
  --sl-flow-write:#d9a441;
  --sl-flow-success:#8a9a55;
  --sl-flow-danger:#d6604d;
  --mono:'Spline Sans Mono',ui-monospace,Menlo,Consolas,monospace;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Fraunces','Libre Franklin',Georgia,serif;

  /* LEGACY ALIASES: kept so page-level CSS can migrate incrementally. */
  --bg:var(--sl-canvas);
  --bg2:var(--sl-page);
  --surface:var(--sl-surface);
  --surface2:var(--sl-surface-raised);
  --panel:var(--sl-surface);
  --line:var(--sl-border);
  --line2:var(--sl-border-strong);
  --txt:var(--sl-text);
  --mut:var(--sl-text-muted);
  --dim:var(--sl-text-faint);
  --acc:var(--sl-accent);
  --acc2:var(--sl-accent);
  --acc-deep:var(--sl-accent-strong);
  --acc-soft:var(--sl-accent-soft);
  --warn:var(--sl-warning);
  --bad:var(--sl-danger);
  --good:var(--sl-success);
  --gold:var(--sl-warning);
  --purple:var(--sl-accent);
  --pink:var(--sl-accent);
  --blue:var(--sl-accent);
  --indigo:var(--sl-accent);
  /* .g is now solid, but keep --brand-grad defined as a flat accent for consumers */
  --brand-grad:linear-gradient(135deg,var(--sl-accent) 0%,var(--sl-accent) 100%);
  color-scheme:dark;
}
/* .g — was gradient text; now a solid confident treatment (the rust accent). Class name preserved. */
.g{ background-image:none; -webkit-background-clip:border-box; background-clip:border-box; -webkit-text-fill-color:var(--acc); color:var(--acc); }

/* ============================ LIGHT MODE ============================ */
/* Warm paper light mode — cream surfaces, ink text, same rust accent. */
html[data-theme="light"]{
  --sl-page:var(--sl-paper-200);
  --sl-canvas:var(--sl-paper-150);
  --sl-surface:var(--sl-paper-50);
  --sl-surface-raised:#faf3e9;
  --sl-surface-muted:var(--sl-paper-150);
  --sl-border:var(--sl-paper-250);
  --sl-border-strong:var(--sl-paper-300);
  --sl-text:#221d16;
  --sl-text-muted:#5e564a;
  --sl-text-faint:#736957; /* passes AA on paper/surface */
  --sl-accent:var(--sl-rust-800); /* small rust text must pass on all paper surfaces */
  --sl-accent-strong:var(--sl-rust-900);
  --sl-accent-soft:#f4e6d8;
  --sl-warning:#8f5c0e;
  --sl-danger:var(--sl-red-650);
  --sl-success:var(--sl-olive-650);
  --sl-on-accent:var(--sl-on-accent-contrast);
  --sl-page-bg:radial-gradient(1100px 760px at 72% -12%, var(--sl-paper-100), var(--sl-canvas) 60%);
  --sl-surface-bg:var(--sl-surface);
  --sl-card-bg:var(--sl-surface);
  --sl-card-bg-raised:var(--sl-surface-raised);
  --sl-input-bg:var(--sl-surface);
  --sl-overlay:rgba(34,29,22,.78);
  --sl-shadow-card:none;
  --sl-shadow-overlay:0 24px 70px rgba(64,45,21,.24);
  --sl-success-soft:color-mix(in srgb,var(--sl-success) 11%,var(--sl-card-bg));
  --sl-success-border:color-mix(in srgb,var(--sl-success) 30%,var(--sl-border));
  --sl-danger-soft:color-mix(in srgb,var(--sl-danger) 10%,var(--sl-card-bg));
  --sl-danger-border:color-mix(in srgb,var(--sl-danger) 30%,var(--sl-border));
  --sl-canvas-grid:rgba(115,105,87,.24);
  --sl-canvas-node:var(--sl-surface);
  --sl-canvas-label:var(--sl-text-faint);
  --sl-canvas-glow-start:rgba(255,253,248,.36);
  --sl-canvas-glow-end:rgba(255,253,248,0);
  --sl-flow-read:var(--sl-accent);
  --sl-flow-write:var(--sl-warning);
  --sl-flow-success:var(--sl-success);
  --sl-flow-danger:var(--sl-danger);
  color-scheme:light;
}
html[data-theme="light"] body{ background:var(--sl-page-bg); color:var(--sl-text); }
html[data-theme="light"] .g{ -webkit-text-fill-color:var(--sl-accent); color:var(--sl-accent); }

/* Landing hero + proof strip stay an intentional WARM DARK band on the cream page
   (immersive masthead). Their text is forced light so nothing reads dark-on-dark. */
html[data-theme="light"] .hero{ background:#100e0b; border-bottom-color:#332c22; }
html[data-theme="light"] .proof{ background:#16130f; border-bottom-color:#332c22; }
html[data-theme="light"] .hero h1,html[data-theme="light"] .hero .sub b{ color:#f3ece1; }
html[data-theme="light"] .hero .sub{ color:#b3a791; }
html[data-theme="light"] .hero .pill{ background:#3a2417; border-color:#473d2f; color:#e0683a; }
html[data-theme="light"] .hero .micro,html[data-theme="light"] .proof .lead{ color:#7d735f; }
html[data-theme="light"] .proof .statbar .n{ color:#e0683a; }
html[data-theme="light"] .proof .statbar .l{ color:#b3a791; }
html[data-theme="light"] .hero .btn.sec{ border-color:#473d2f; color:#f3ece1; }
html[data-theme="light"] .hero .btn.sec:hover{ border-color:#e0683a; color:#e0683a; }
/* Solid-rust buttons: the deepened light-mode accent (#b84d18) is too dark for ink text
   (3.7:1). Use light text on it in light mode — 5.1:1, passes AA. Dark mode keeps ink. */
html[data-theme="light"] .btn.pri,
html[data-theme="light"] .big,
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .chatin button,
html[data-theme="light"] .mcard button,
html[data-theme="light"] .sidetoggle,
html[data-theme="light"] .plan .pbtn.go,
html[data-theme="light"] .plan .pbadge,
html[data-theme="light"] .skip-to-main{ color:var(--sl-on-accent); }
/* Light: active/selected states + emphasis that used white text on now-light surfaces. */
html[data-theme="light"] .seg button.active,
html[data-theme="light"] .tab.active,
html[data-theme="light"] .chip.on{ color:var(--acc-deep); }
html[data-theme="light"] .legend b,
html[data-theme="light"] .drill .da b,
html[data-theme="light"] .da b{ color:var(--txt); }
/* segmented-control active fill: tint with the accent so the selected seat reads clearly */
html[data-theme="light"] .seg button.active{ background:var(--acc-soft); }

/* surfaces → cream cards on light bg (beats inline dark surfaces via ). Flat, no glow. */
html[data-theme="light"] .card,html[data-theme="light"] .feature,html[data-theme="light"] .mode,html[data-theme="light"] .plan,
html[data-theme="light"] .step,html[data-theme="light"] .whycard,html[data-theme="light"] .ss,html[data-theme="light"] .lobcard,
html[data-theme="light"] .trk,html[data-theme="light"] .concept,html[data-theme="light"] .overall,html[data-theme="light"] .vizbox,
html[data-theme="light"] .quiz,html[data-theme="light"] .donebar,html[data-theme="light"] .lvl,html[data-theme="light"] .stat,
html[data-theme="light"] .dcard,html[data-theme="light"] .sheet,html[data-theme="light"] .reqcol,html[data-theme="light"] .drill,
html[data-theme="light"] .opt,html[data-theme="light"] .search,html[data-theme="light"] .finalcta,html[data-theme="light"] .proof{
  background:var(--sl-card-bg); border-color:var(--sl-border); box-shadow:var(--sl-shadow-card);
}
html[data-theme="light"] .whycard.them{ background:var(--sl-surface-muted); }
html[data-theme="light"] .whycard.us,html[data-theme="light"] .plan.pro{ background:var(--sl-card-bg-raised); border-color:var(--sl-accent); }
html[data-theme="light"] .feature,html[data-theme="light"] .mode.client,html[data-theme="light"] .mode.studio{ background:var(--sl-card-bg); }
html[data-theme="light"] .feat .art{ background:var(--sl-card-bg-raised); border-color:var(--sl-border-strong); }
html[data-theme="light"] .sheet .sh,html[data-theme="light"] .tabs{ background:color-mix(in srgb,var(--sl-card-bg) 92%,transparent); }
html[data-theme="light"] #binav{ background:var(--sl-card-bg); }
html[data-theme="light"] .deepbox{ background:color-mix(in srgb,var(--sl-warning) 10%,var(--sl-card-bg)); border-color:color-mix(in srgb,var(--sl-warning) 28%,var(--sl-border)); }
html[data-theme="light"] .missbox{ background:color-mix(in srgb,var(--sl-danger) 9%,var(--sl-card-bg)); border-color:color-mix(in srgb,var(--sl-danger) 25%,var(--sl-border)); }
html[data-theme="light"] .reveal,html[data-theme="light"] .pm{ background:color-mix(in srgb,var(--sl-accent) 9%,var(--sl-card-bg)); border-color:color-mix(in srgb,var(--sl-accent) 24%,var(--sl-border)); }
html[data-theme="light"] .gchip{ background:var(--sl-page); border-color:var(--sl-border-strong); color:var(--sl-text-muted); }
html[data-theme="light"] .chip,html[data-theme="light"] .tag,html[data-theme="light"] .tg,html[data-theme="light"] .feat span,html[data-theme="light"] .chips .chip{ background:transparent; border-color:var(--sl-border-strong); color:var(--sl-text-muted); }

/* text → ink on cream */
html[data-theme="light"] p,html[data-theme="light"] li,html[data-theme="light"] .ds,html[data-theme="light"] .tkblurb,
html[data-theme="light"] .ask,html[data-theme="light"] .rndq,html[data-theme="light"] .da,html[data-theme="light"] .md,
html[data-theme="light"] .sub,html[data-theme="light"] .tag,html[data-theme="light"] .secsub,html[data-theme="light"] .mission,
html[data-theme="light"] .head p,html[data-theme="light"] .lead p{ color:var(--sl-text-muted); }
html[data-theme="light"] h1,html[data-theme="light"] h2,html[data-theme="light"] h3,html[data-theme="light"] .nm,
html[data-theme="light"] .cn,html[data-theme="light"] .chname,html[data-theme="light"] .sectitle,html[data-theme="light"] strong{ color:var(--sl-text); }
html[data-theme="light"] .bi-links a{ color:var(--sl-text-muted); }
html[data-theme="light"] .bi-links a:hover{ background:var(--sl-page); color:var(--sl-text); }
html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] textarea{ background:var(--sl-input-bg); color:var(--sl-text); border-color:var(--sl-border-strong); }

/* ============================ ACCESSIBILITY ============================ */
/* Linked AFTER every page's inline <style>, so these win the cascade and give
   ALL pages (index/play/academy/library/multiplayer + injected auth nav/modals)
   a visible keyboard focus ring in both themes. WCAG 2.4.7. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible,
.btn:focus-visible, .pbtn:focus-visible, .step:focus-visible, .seg button:focus-visible,
.tab:focus-visible, .ptile:focus-visible, .mini:focus-visible, .icon:focus-visible,
.bi-links a:focus-visible, .bi-theme:focus-visible, .bi-link:focus-visible, .bi-up:focus-visible,
.bi-prof:focus-visible, .bi-primary:focus-visible, .bi-ghost:focus-visible, .bi-tab:focus-visible,
.bi-billbtn:focus-visible, .bi-brand:focus-visible, .skip:focus-visible, .starpick span:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px; border-radius:6px;
}
/* Inputs already carry their own border; keep the ring tight against them.
   (We deliberately do NOT add input:focus{outline:none} here — that would override
   the :focus-visible ring under equal specificity and re-break keyboard focus.) */
input:focus-visible, select:focus-visible, textarea:focus-visible{ outline-offset:1px; }

/* screen-reader-only utility (visually hidden, still announced). */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Skip-to-content link: off-screen until focused. */
.skip-to-main{ position:fixed; top:0; left:0; z-index:200; background:var(--acc); color:#1a0f08;
  font-weight:700; font-size:13px; padding:10px 16px; border-radius:0 0 8px 0;
  transform:translateY(-120%); transition:transform .15s; }
.skip-to-main:focus{ transform:translateY(0); outline:2px solid var(--txt); outline-offset:-4px; }

/* Respect reduced-motion globally (WCAG 2.3.3 / vestibular safety).
   theme.css is loaded on every page, so this is the single shared safety net that
   neutralises CSS motion sitewide — covering multiplayer.html and any page that has
   no reduced-motion block of its own. Per-page sheets may still add specifics.
   We near-zero (not hard-disable) durations so functional transitions still "complete"
   instantly, and we stop scroll-smoothing and any decorative looping animation. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .skip-to-main{ transition:none; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ====================== LANDING: INTERVIEW ACADEMY ====================== */
.landing-v2{
  --page-gutter:clamp(20px,6vw,72px);
  --page-max:1120px;
}
.landing-v2 .wrap{
  max-width:var(--page-max);
  padding-left:var(--page-gutter);
  padding-right:var(--page-gutter);
}
.landing-v2 .hero{
  padding:clamp(48px,7vw,86px) 0 clamp(30px,5vw,54px);
  background:
    linear-gradient(135deg,rgba(224,104,58,.08),transparent 34%),
    var(--bg2);
}
.landing-v2 .hero .inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
.landing-v2 .hero-copy{min-width:0}
.landing-v2 .hero .pill{color:#f08a62}
.landing-v2 .hero h1{
  max-width:760px;
  font-size:clamp(38px,6.4vw,68px);
  letter-spacing:-1px;
  margin-bottom:18px;
}
.landing-v2 .hero .sub{max-width:650px}
.landing-v2 .hero .micro{color:var(--dim);max-width:620px;line-height:1.55}
.landing-v2 .prep-preview{
  position:relative;
  z-index:1;
  border:1px solid var(--line2);
  border-radius:10px;
  background:linear-gradient(180deg,var(--surface2),var(--surface));
  padding:18px;
  box-shadow:0 22px 60px rgba(0,0,0,.18);
  min-width:0;
}
.landing-v2 .prep-preview::before{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(224,104,58,.12);
  border-radius:8px;
  pointer-events:none;
}
.landing-v2 .brief-card,
.landing-v2 .academy-pane,
.landing-v2 .studio-pane,
.landing-v2 .pressure-row{
  position:relative;
  z-index:1;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(16,14,11,.34);
}
.landing-v2 .brief-card{padding:18px;margin-bottom:12px}
.landing-v2 .preview-kicker,
.landing-v2 .pane-head{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:#f08a62;
  margin-bottom:8px;
}
.landing-v2 .brief-card h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(21px,2.4vw,28px);
  letter-spacing:-.35px;
  line-height:1.1;
  margin-bottom:12px;
}
.landing-v2 .brief-meta{display:flex;gap:8px;flex-wrap:wrap}
.landing-v2 .brief-meta span,
.landing-v2 .lesson-strip span{
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mut);
  border:1px solid var(--line2);
  border-radius:5px;
  padding:4px 8px;
}
.landing-v2 .preview-grid{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:12px;
}
.landing-v2 .academy-pane,
.landing-v2 .studio-pane{padding:14px;min-height:170px}
.landing-v2 .academy-pane strong{display:block;font-size:17px;margin-bottom:8px}
.landing-v2 .academy-pane p{font-size:13px;line-height:1.55;color:var(--mut);margin-bottom:18px}
.landing-v2 .progress-line,
.landing-v2 .studio-meter i{
  display:block;
  height:7px;
  border-radius:999px;
  background:var(--line);
  overflow:hidden;
}
.landing-v2 .progress-line i,
.landing-v2 .studio-meter em{
  display:block;
  height:100%;
  background:var(--acc);
  border-radius:inherit;
}
.landing-v2 .canvas-mini{
  position:relative;
  min-height:120px;
  border-radius:7px;
  background:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:22px 22px;
  overflow:hidden;
}
.landing-v2 .node{
  position:absolute;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:58px;
  height:30px;
  border:1px solid var(--line2);
  border-radius:6px;
  background:var(--surface);
  color:var(--txt);
  font-family:var(--mono);
  font-size:10px;
}
.landing-v2 .node.client{left:10px;top:15px}
.landing-v2 .node.api{left:92px;top:15px;border-color:var(--acc)}
.landing-v2 .node.cache{left:92px;top:73px}
.landing-v2 .node.db{right:10px;top:48px}
.landing-v2 .wire{
  position:absolute;
  z-index:1;
  height:1px;
  background:var(--acc);
  transform-origin:left center;
  opacity:.7;
}
.landing-v2 .w1{left:67px;top:30px;width:26px}
.landing-v2 .w2{left:122px;top:45px;width:44px;transform:rotate(58deg)}
.landing-v2 .w3{left:150px;top:88px;width:44px;transform:rotate(-38deg)}
.landing-v2 .pressure-row{
  display:flex;
  gap:10px;
  justify-content:space-between;
  margin-top:12px;
  padding:11px 12px;
  color:var(--mut);
  font-family:var(--mono);
  font-size:10.5px;
}
.landing-v2 .landing-proof{
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
.landing-v2 .landing-proof .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  padding-top:22px;
  padding-bottom:22px;
}
.landing-v2 .landing-proof .lead{margin:0}
.landing-v2 .landing-proof .statbar{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}
.landing-v2 .landing-proof .s{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
  border:1px solid var(--line);
  border-radius:8px;
  padding:13px;
  min-width:0;
  background:var(--surface);
}
.landing-v2 .landing-proof .n{font-size:20px;line-height:1.1}
.landing-v2 .landing-proof .l{font-size:12px;line-height:1.35}
.landing-v2 section{padding:clamp(50px,7vw,82px) 0}
.landing-v2 .steps{border-top-color:var(--line2)}
.landing-v2 .step{
  grid-template-columns:auto auto minmax(0,1fr);
  gap:20px 18px;
  padding:24px clamp(18px,2.6vw,32px);
}
.landing-v2 .systems-band{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.landing-v2 .system-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.landing-v2 .system-card{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  padding:18px;
  min-width:0;
}
.landing-v2 .card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.landing-v2 .system-card h3,
.landing-v2 .learning-panel h3{
  font-family:var(--serif);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.25px;
  line-height:1.1;
}
.landing-v2 .card-top span,
.landing-v2 .panel-label{
  flex:none;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:var(--acc);
}
.landing-v2 .system-card p{color:var(--dim);font-family:var(--mono);font-size:11px;margin-bottom:10px}
.landing-v2 .system-card strong{
  display:block;
  color:var(--txt);
  font-size:13.5px;
  line-height:1.55;
  min-height:42px;
}
.landing-v2 .system-card a{
  display:inline-flex;
  margin-top:18px;
  color:var(--acc);
  font-weight:700;
  font-size:13px;
}
.landing-v2 .split-panels{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.landing-v2 .learning-panel{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface);
  padding:24px;
}
.landing-v2 .learning-panel h3{margin:8px 0 14px}
.landing-v2 .learning-panel ul{list-style:none;color:var(--mut);font-size:14px;line-height:1.7;margin-bottom:18px}
.landing-v2 .learning-panel li{position:relative;padding-left:18px}
.landing-v2 .learning-panel li::before{content:"›";position:absolute;left:0;color:var(--acc);font-weight:700}
.landing-v2 .lesson-strip{display:flex;gap:7px;flex-wrap:wrap}
.landing-v2 .academy-track{
  display:grid;
  gap:8px;
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.landing-v2 .academy-track div{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:2px 12px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  padding:12px;
}
.landing-v2 .academy-track span{
  grid-row:1/3;
  font-family:var(--mono);
  font-size:11px;
  color:var(--acc);
  padding-top:2px;
}
.landing-v2 .academy-track b{
  color:var(--txt);
  font-size:14px;
}
.landing-v2 .academy-track em{
  color:var(--mut);
  font-style:normal;
  font-size:12.5px;
  line-height:1.45;
}
.landing-v2 .studio-meter{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  padding:14px;
  font-family:var(--mono);
  color:var(--mut);
  font-size:11px;
}
.landing-v2 .studio-example{
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--bg);
  padding:12px;
  margin-bottom:12px;
}
.landing-v2 .studio-example .canvas-mini{
  min-height:150px;
}
.landing-v2 .example-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:10.5px;
  color:var(--mut);
}
.landing-v2 .example-top b{
  color:var(--acc);
  font-weight:600;
}
.landing-v2 .studio-meter b{display:block;color:var(--txt);font-family:var(--serif);font-size:32px;margin:6px 0}
.landing-v2 .comparison .whycard li{padding-left:18px}
.landing-v2 .finalcta h2{max-width:23ch}
.landing-v2 .foot .wrap{
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
  align-items:center;
}
.landing-v2 .foot a{
  color:var(--mut);
  text-decoration:none;
}
.landing-v2 .foot a:hover{color:var(--acc)}

html[data-theme="light"] body.landing-v2{
  background:var(--sl-canvas);
}
html[data-theme="light"] .landing-v2 .hero{
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--sl-accent) 10%,transparent),transparent 36%),
    var(--sl-canvas);
  border-bottom-color:var(--sl-border);
}
html[data-theme="light"] .landing-v2 .hero h1,
html[data-theme="light"] .landing-v2 .hero .sub b{color:var(--txt)}
html[data-theme="light"] .landing-v2 .hero .sub,
html[data-theme="light"] .landing-v2 .hero .micro{color:var(--mut)}
html[data-theme="light"] .landing-v2 .hero .pill{
  background:var(--acc-soft);
  border-color:var(--line2);
  color:var(--acc-deep);
}
html[data-theme="light"] .landing-v2 .hero .btn.sec{
  border-color:var(--line2);
  color:var(--txt);
}
html[data-theme="light"] .landing-v2 .hero .btn.sec:hover{
  border-color:var(--acc);
  color:var(--acc);
}
html[data-theme="light"] .landing-v2 .prep-preview{
  background:var(--sl-ink-900);
  border-color:var(--sl-line-650);
  color:#f3ece1;
  box-shadow:0 18px 45px rgba(64,45,21,.18);
}
html[data-theme="light"] .landing-v2 .brief-card,
html[data-theme="light"] .landing-v2 .academy-pane,
html[data-theme="light"] .landing-v2 .studio-pane,
html[data-theme="light"] .landing-v2 .pressure-row{
  background:var(--sl-ink-850);
  border-color:var(--sl-line-650);
}
html[data-theme="light"] .landing-v2 .prep-preview p,
html[data-theme="light"] .landing-v2 .pressure-row,
html[data-theme="light"] .landing-v2 .brief-meta span,
html[data-theme="light"] .landing-v2 .academy-pane p{color:#b3a791}
html[data-theme="light"] .landing-v2 .prep-preview h2,
html[data-theme="light"] .landing-v2 .prep-preview strong{
  color:#f3ece1;
}
html[data-theme="light"] .landing-v2 .canvas-mini{background-color:var(--sl-ink-900)}
html[data-theme="light"] .landing-v2 .node{background:var(--sl-ink-800);color:#f3ece1;border-color:var(--sl-line-650)}
html[data-theme="light"] .landing-v2 .reveal{
  background:transparent;
  border-color:inherit;
}
html[data-theme="light"] .landing-v2 .landing-proof{
  background:var(--sl-page);
  border-color:var(--sl-border);
}
html[data-theme="light"] .landing-v2 .landing-proof .lead{color:var(--mut)}
html[data-theme="light"] .landing-v2 .landing-proof .s,
html[data-theme="light"] .landing-v2 .system-card{
  background:var(--sl-card-bg);
  border-color:var(--sl-border);
}
html[data-theme="light"] .landing-v2 .landing-proof .n{color:var(--acc)}
html[data-theme="light"] .landing-v2 .landing-proof .l{color:var(--mut)}
html[data-theme="light"] .landing-v2 .systems-band{
  background:var(--sl-page);
  border-color:var(--sl-border);
}
html[data-theme="light"] .landing-v2 .learning-panel,
html[data-theme="light"] .landing-v2 .academy-track div,
html[data-theme="light"] .landing-v2 .studio-example,
html[data-theme="light"] .landing-v2 .studio-meter{
  background:var(--sl-card-bg);
  border-color:var(--sl-border);
}
html[data-theme="light"] .landing-v2 .foot{
  background:var(--sl-canvas);
}

/* Campaign mode polish: play.html has its own screen-level design, but theme.css
   loads after it, so these keep light mode from flattening the campaign path. */
html[data-theme="light"] #scr-select{
  background:
    radial-gradient(900px 560px at 78% 4%,color-mix(in srgb,var(--sl-accent) 11%,transparent),transparent 62%),
    linear-gradient(180deg,var(--sl-canvas),var(--sl-page));
}
html[data-theme="light"] .topbar{
  background:color-mix(in srgb,var(--sl-card-bg) 90%,transparent);
  border-color:var(--sl-border-strong);
}
html[data-theme="light"] .campaign-panel,
html[data-theme="light"] .campaign-coach{
  background:linear-gradient(180deg,var(--sl-card-bg),var(--sl-canvas));
  border-color:var(--sl-border-strong);
}
html[data-theme="light"] .campaign-readout div,
html[data-theme="light"] .campaign-meter{
  background:var(--sl-canvas);
  border-color:var(--sl-border-strong);
}
html[data-theme="light"] .campaign-levels .lvl{
  background:linear-gradient(160deg,var(--sl-card-bg),var(--sl-canvas));
  border-color:var(--sl-border-strong);
  color:var(--sl-text);
}
html[data-theme="light"] .campaign-levels .lvl:hover:not(.locked){
  background:linear-gradient(160deg,var(--sl-card-bg),var(--sl-card-bg-raised));
  border-color:var(--sl-accent);
}
html[data-theme="light"] .campaign-levels .lvl.locked{
  background:linear-gradient(160deg,var(--sl-canvas),var(--sl-page));
}
html[data-theme="light"] .campaign-levels .lvl-icon,
html[data-theme="light"] .campaign-levels .lock{
  background:var(--sl-canvas);
  border-color:var(--sl-border-strong);
}

@media(max-width:920px){
  .landing-v2 .hero .inner,
  .landing-v2 .split-panels{grid-template-columns:1fr}
  .landing-v2 .prep-preview{max-width:620px}
  .landing-v2 .system-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .landing-v2 .landing-proof .statbar{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .landing-v2 .hero{padding-top:36px}
  .landing-v2 .hero h1{font-size:clamp(34px,10vw,46px)}
  .landing-v2 .hero .ctas .btn{width:100%;justify-content:center}
  .landing-v2 .preview-grid,
  .landing-v2 .system-grid,
  .landing-v2 .landing-proof .statbar{grid-template-columns:1fr}
  .landing-v2 .academy-pane,
  .landing-v2 .studio-pane{min-height:auto}
  .landing-v2 .pressure-row{flex-direction:column}
  .landing-v2 .step{
    grid-template-columns:auto minmax(0,1fr);
    gap:10px 14px;
    padding:22px 16px;
  }
  .landing-v2 .step .ic{display:none}
  .landing-v2 .foot .wrap{gap:10px 16px}
}