/* ============================================================
   MathematiX — Lemma AI
   The landing-page band (.lm-quiet) and the deep-dive page at
   /ai-assistant/, whose review section still runs dark (.lm-band).
   Built on the tokens in styles.css: paper + graph grid + emerald,
   Spectral / Hanken / Plex Mono.

   Everything animates off .reveal (main.js's IntersectionObserver)
   or off .is-live, which lemma-ai.js sets when a block scrolls in.
   Nothing here animates on a loop above the fold.
   ============================================================ */

/* ============================================================
   1 · SHARED CHROME
   ============================================================ */

/* A dark band that carries its own aurora. .dark supplies the base
   grid; these two layers add slow depth without a repaint storm —
   both are composited transforms on pseudo-elements. */
.lm-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.lm-band::before,
.lm-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.lm-band::before {
  inset: -40% -20% auto -20%;
  height: 120%;
  background:
    radial-gradient(ellipse at 22% 30%, rgba(63,167,118,0.20) 0 12%, transparent 46%),
    radial-gradient(ellipse at 78% 62%, rgba(47,110,158,0.16) 0 16%, transparent 50%);
  filter: blur(14px);
  animation: lm-aurora 22s ease-in-out infinite alternate;
}
.lm-band::after {
  inset: auto -10% -30% -10%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 100%, rgba(63,167,118,0.13), transparent 68%);
}
.lm-band > * { position: relative; z-index: 1; }
@keyframes lm-aurora {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(3%, 2%, 0) scale(1.1); }
}

/* section header, centered, dark-aware */
.lm-head { text-align: center; max-width: 62ch; margin: 0 auto 52px; }
.lm-head .section-title { margin: 16px auto 0; }
.lm-head .section-lead { margin: 18px auto 0; text-align: center; }

/* Tight is the default on this page. The old 52px gap plus a 3rem
   heading meant a section header alone could fill a viewport. */
.lm-head--tight { margin-bottom: 34px; }
.lm-head--left {
  text-align: left;
  max-width: none;
  margin-left: 0;
}
.lm-head--left .section-title { margin: 14px 0 0; }
.lm-head--left .section-lead { margin: 14px 0 0; text-align: left; }

/* A section title that stays a title. .section-title caps at 18ch,
   which turns a two-clause heading into four display-sized lines. */
.section-title--sm {
  font-size: clamp(1.6rem, 2.5vw, 2.05rem);
  max-width: 30ch;
  line-height: 1.12;
}
.lm-head--left .section-title--sm { max-width: 34ch; }
.dark .section-title--sm, .lm-band .section-title--sm { color: var(--dark-text); }

/* small mono label used on cards and rails */
.lm-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-700);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.dark .lm-tag, .lm-band .lm-tag { color: var(--glow); }

/* ============================================================
   2 · CAPABILITY GRID — the "what Lemma does" cards
   ============================================================ */

.lm-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
/* Six equal cards, three up. Every one is a short paragraph, so they
   set their own even height and no card needs a span override. */
.lm-grid--six { grid-template-columns: repeat(3, 1fr); }
.lm-grid--six > .lm-card { grid-column: span 1; padding: 26px 26px 28px; }
.lm-grid--six > .lm-card h3 { font-size: 1.09rem; }
.lm-grid--six > .lm-card p { font-size: 0.9rem; }
/* No pointer-tracked glow and no lift. A card that moves and lights up
   under the cursor pulls the eye off the sentence being read; the whole
   grid doing it at once is the thing that makes a page feel cheap. The
   hover is a hairline and a shadow — enough to say "this is a surface". */
.lm-card {
  grid-column: span 2;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 24px;
  background: rgba(255,255,255,0.035);
  border: 1px solid var(--dark-line);
  transition:
    border-color .3s var(--ease),
    background .3s var(--ease),
    box-shadow .3s var(--ease);
}
.lm-card:hover {
  border-color: rgba(63,167,118,0.32);
  background: rgba(255,255,255,0.05);
}

.lm-card__ic {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(63,167,118,0.14);
  border: 1px solid rgba(63,167,118,0.3);
  color: var(--glow);
  margin-bottom: 18px;
}
.lm-card__ic svg { width: 20px; height: 20px; }

.lm-card h3 {
  font-size: 1.2rem;
  color: var(--dark-text);
  margin-bottom: 8px;
}
.lm-card p {
  color: var(--dark-soft);
  font-size: 0.92rem;
  line-height: 1.6;
}
/* the wide card carries a live mini-surface instead of a paragraph */
.lm-card--wide { grid-column: span 3; }
.lm-card--tall { grid-column: span 3; }
/* a closing banner card: icon beside the copy rather than above it */
.lm-card--full {
  grid-column: span 6;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 20px;
  align-items: start;
}
.lm-card--full .lm-card__ic { margin-bottom: 0; }
.lm-card--full p { max-width: 90ch; }

/* light variant — a white card on paper, which is what every other
   card on the site is. Used by the deep-dive page and the home band. */
.lm-card--paper {
  background: var(--paper-3);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.lm-card--paper:hover {
  background: var(--paper-3);
  border-color: var(--mint-line);
  box-shadow: var(--shadow-md);
}
.lm-card--paper h3 { color: var(--ink); }
.lm-card--paper p { color: var(--ink-soft); }
.lm-card--paper .lm-card__ic {
  background: var(--mint);
  border-color: var(--mint-line);
  color: var(--green-700);
}

/* ============================================================
   3 · THE MINI CANVAS — a tiny, honest picture of a Lemma block
   ============================================================ */

.lm-mini {
  margin-top: 18px;
  border-radius: 14px;
  border: 1px solid var(--dark-line);
  background:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px),
    rgba(6,16,11,0.55);
  background-size: 18px 18px, 18px 18px, auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* on a white card the inset canvas is the warm paper, so the two
   surfaces still separate without another border weight */
.lm-card--paper .lm-mini {
  border-color: var(--line-soft);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    var(--paper);
  background-size: 18px 18px, 18px 18px, auto;
}

.lm-box {
  border-radius: 10px;
  border: 1px solid var(--dark-line);
  background: rgba(255,255,255,0.05);
  padding: 10px 12px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--dark-text);
  position: relative;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.lm-card--paper .lm-box {
  border-color: var(--line);
  background: var(--paper-3);
  color: var(--ink);
}
.lm-card--paper .lm-box b { color: var(--green-700); font-weight: 600; }
.lm-box__type {
  position: absolute;
  top: -8px; left: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--dark-2);
  border: 1px solid rgba(63,167,118,0.4);
  color: var(--glow);
}
.lm-card--paper .lm-box__type {
  background: var(--paper-3);
  border-color: var(--mint-line);
  color: var(--green-700);
}
.lm-box--math { font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: -0.01em; }
/* a box Lemma wrote, as opposed to one that was already in the note */
.lm-box--drop {
  border-style: dashed;
  border-color: rgba(63,167,118,0.45);
  background: rgba(63,167,118,0.06);
}
.lm-card--paper .lm-box--drop {
  border-style: dashed;
  border-color: rgba(28,124,84,0.35);
  background: rgba(28,124,84,0.05);
}

/* a box that "lands" when the card scrolls into view */
.lm-mini .lm-box {
  opacity: 0;
  transform: translateY(10px) scale(.98);
}
.is-live .lm-mini .lm-box {
  animation: lm-drop .62s var(--spring) forwards;
}
.is-live .lm-mini .lm-box:nth-child(1) { animation-delay: .05s; }
.is-live .lm-mini .lm-box:nth-child(2) { animation-delay: .28s; }
.is-live .lm-mini .lm-box:nth-child(3) { animation-delay: .51s; }
.is-live .lm-mini .lm-box:nth-child(4) { animation-delay: .74s; }
@keyframes lm-drop {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* quiz block: answers reveal on click, like the real /quiz output */
.lm-quiz { display: flex; flex-direction: column; gap: 8px; }
.lm-q {
  border: 1px solid var(--dark-line);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  overflow: hidden;
}
.lm-card--paper .lm-q { border-color: var(--line); background: var(--paper-2); }
.lm-q__q {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dark-text);
  transition: background .25s var(--ease);
}
.lm-card--paper .lm-q__q { color: var(--ink); }
.lm-q__q:hover { background: rgba(63,167,118,0.09); }
.lm-q__n {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(63,167,118,0.16);
  color: var(--glow);
}
.lm-card--paper .lm-q__n { background: var(--mint); color: var(--green-700); }
.lm-q__chev {
  margin-left: auto; flex: none;
  width: 12px; height: 12px;
  color: var(--dark-soft);
  transition: transform .3s var(--ease);
}
.lm-card--paper .lm-q__chev { color: var(--ink-faint); }
.lm-q.is-open .lm-q__chev { transform: rotate(180deg); }
.lm-q__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .38s var(--ease);
}
.lm-q.is-open .lm-q__a { grid-template-rows: 1fr; }
.lm-q__a > span {
  overflow: hidden;
  font-size: 0.82rem;
  color: var(--dark-soft);
  line-height: 1.55;
}
.lm-card--paper .lm-q__a > span { color: var(--ink-soft); }
.lm-q__a b { color: var(--glow); font-weight: 600; }
.lm-card--paper .lm-q__a b { color: var(--green-700); }
.lm-q.is-open .lm-q__a > span { padding: 0 12px 11px 42px; }

/* ============================================================
   4 · PHOTO → EXPLAIN  (the capture strip)
   ============================================================ */

.lm-shot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--dark-line);
  background: linear-gradient(150deg, #16241c, #0d1712);
  padding: 18px 16px;
  min-height: 108px;
  display: grid;
  place-items: center;
}
.lm-card--paper .lm-shot {
  border-color: var(--line);
  background: linear-gradient(150deg, #eef1e9, #f8f7f1);
}
.lm-shot__hand {
  font-family: "Spectral", Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  color: rgba(233,241,234,0.82);
  letter-spacing: 0.01em;
  transform: rotate(-1.6deg);
  text-align: center;
  line-height: 1.7;
}
.lm-card--paper .lm-shot__hand { color: rgba(22,32,26,0.72); }
/* the scan sweep — runs once per entry, not on a loop */
.lm-shot__scan {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(63,167,118,0) 0%, rgba(63,167,118,0.22) 55%, rgba(63,167,118,0) 100%);
  border-bottom: 1px solid rgba(63,167,118,0.6);
  opacity: 0;
  pointer-events: none;
}
.is-live .lm-shot__scan { animation: lm-scan 2.1s var(--ease) .25s 2; }
@keyframes lm-scan {
  0%   { transform: translateY(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(300%); opacity: 0; }
}

/* ============================================================
   5 · REVIEW MODE — the benchmark chart
   Two series only: the raw model, and the same model with
   Review on. Bars grow from zero when the chart scrolls in.
   ============================================================ */

.lm-bench {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-3);
  box-shadow: var(--shadow-lg);
  padding: 34px 34px 28px;
  position: relative;
  overflow: hidden;
}
.dark .lm-bench, .lm-band .lm-bench {
  border-color: var(--dark-line);
  background: rgba(255,255,255,0.028);
  box-shadow: 0 40px 90px -46px rgba(0,0,0,0.8);
}
.lm-bench__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.lm-bench__head h3 { font-size: 1.44rem; }
.dark .lm-bench__head h3, .lm-band .lm-bench__head h3 { color: var(--dark-text); }
.lm-bench__head p {
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-top: 7px;
  max-width: 52ch;
}
.dark .lm-bench__head p, .lm-band .lm-bench__head p { color: var(--dark-soft); }

.lm-legend { display: flex; gap: 18px; flex-wrap: wrap; }
.lm-legend span {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dark .lm-legend span, .lm-band .lm-legend span { color: var(--dark-soft); }
.lm-legend i {
  width: 11px; height: 11px;
  border-radius: 3px;
  display: block;
}
.lm-legend i.base { background: var(--line); border: 1px solid var(--ink-faint); }
.dark .lm-legend i.base, .lm-band .lm-legend i.base { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.lm-legend i.rev { background: linear-gradient(135deg, var(--green), var(--green-300)); }
.lm-band .lm-legend i.rev { background: linear-gradient(135deg, #2f8a72, var(--glow)); }

/* --- rows --- */
.lm-rows { display: flex; flex-direction: column; gap: 20px; }
.lm-row { display: grid; grid-template-columns: 190px 1fr; gap: 22px; align-items: center; }
.lm-row__label { min-width: 0; }
.lm-row__label b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dark .lm-row__label b, .lm-band .lm-row__label b { color: var(--dark-text); }
.lm-row__label span:not(.lm-delta) {
  display: block;
  font-size: 0.79rem;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.dark .lm-row__label span:not(.lm-delta),
.lm-band .lm-row__label span:not(.lm-delta) { color: var(--dark-soft); }

.lm-bars { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lm-bar {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 12px;
  align-items: center;
}
.lm-bar__track {
  position: relative;
  height: 20px;
  border-radius: 7px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  overflow: hidden;
}
.dark .lm-bar__track, .lm-band .lm-bar__track {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.07);
}
.lm-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 6px;
  transition: width 1.15s var(--ease);
}
.is-live .lm-bar__fill { width: var(--w, 0%); }
.lm-bar--base .lm-bar__fill {
  background: repeating-linear-gradient(
    -45deg,
    rgba(22,32,26,0.16) 0 5px,
    rgba(22,32,26,0.09) 5px 10px
  );
  border: 1px solid var(--line);
}
.dark .lm-bar--base .lm-bar__fill,
.lm-band .lm-bar--base .lm-bar__fill {
  background: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.15) 0 5px,
    rgba(255,255,255,0.07) 5px 10px
  );
  border-color: rgba(255,255,255,0.14);
}
.lm-bar--rev .lm-bar__fill {
  background: linear-gradient(90deg, var(--green-700), var(--green) 62%, var(--green-300));
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset;
  transition-delay: .18s;
}
.lm-band .lm-bar--rev .lm-bar__fill {
  background: linear-gradient(90deg, #1c6a51, #2f8a72 58%, var(--glow));
}
/* The bars used to take a sheen sweep after they settled. A chart that
   glints at you is decoration on top of the only hard evidence on the
   page — the growth from zero is the animation, and it is enough. */

.lm-bar__val {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  text-align: right;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.dark .lm-bar__val, .lm-band .lm-bar__val { color: var(--dark-soft); }
.lm-bar--rev .lm-bar__val { color: var(--green-700); font-weight: 600; }
.lm-band .lm-bar--rev .lm-bar__val { color: var(--glow); }

/* the delta pill that flies in after the bar settles */
.lm-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--mint);
  border: 1px solid var(--mint-line);
  color: var(--green-700);
  margin-top: 6px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .5s var(--ease) 1.15s, transform .5s var(--ease) 1.15s;
}
.lm-band .lm-delta, .dark .lm-delta {
  background: rgba(63,167,118,0.14);
  border-color: rgba(63,167,118,0.36);
  color: var(--glow);
}
.is-live .lm-delta { opacity: 1; transform: none; }
.lm-delta--flat {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink-faint);
}
.lm-band .lm-delta--flat, .dark .lm-delta--flat {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--dark-soft);
}

.lm-bench__foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.dark .lm-bench__foot, .lm-band .lm-bench__foot {
  border-color: var(--dark-line);
  color: var(--dark-soft);
}
.lm-bench__foot svg { width: 15px; height: 15px; flex: none; }

/* ============================================================
   6 · REVIEW PIPELINE — the staged rail
   ============================================================ */

/* Eight stages in two columns. The old version was a vertical rail:
   eight full-width rows plus its own heading block, which on its own
   ran longer than the rest of the section put together. */
.lm-pipe {
  margin: 22px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 24px 28px 18px;
}
.dark .lm-pipe, .lm-band .lm-pipe {
  border-color: var(--dark-line);
  background: rgba(255,255,255,0.035);
}
.lm-pipe__head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 6px;
}
.dark .lm-pipe__head, .lm-band .lm-pipe__head { border-color: var(--dark-line); }
.lm-pipe__head .lm-tag { flex: none; }
.lm-pipe__head p {
  flex: 1 1 34ch;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.dark .lm-pipe__head p, .lm-band .lm-pipe__head p { color: var(--dark-soft); }

.lm-pipe__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 34px;
  counter-reset: lm-stage;
}
.lm-pipe__list li {
  counter-increment: lm-stage;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 3px 14px;
  padding: 11px 0 12px 30px;
  border-bottom: 1px solid var(--line-soft);
}
.dark .lm-pipe__list li, .lm-band .lm-pipe__list li { border-color: var(--dark-line); }
.lm-pipe__list li:nth-last-child(-n+2) { border-bottom: 0; }
/* the step number replaces the dot-and-rail: same ordering cue, no
   34px gutter and no pseudo-element per row. */
.lm-pipe__list li::before {
  content: counter(lm-stage);
  position: absolute;
  left: 0;
  top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--green-700);
  opacity: 0.65;
}
.lm-band .lm-pipe__list li::before, .dark .lm-pipe__list li::before { color: var(--glow); }
.lm-pipe__list b {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.dark .lm-pipe__list b, .lm-band .lm-pipe__list b { color: var(--dark-text); }
.lm-pipe__list span {
  grid-column: 1 / -1;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.dark .lm-pipe__list span, .lm-band .lm-pipe__list span { color: var(--dark-soft); }
.lm-pipe__list em { font-style: italic; }
.lm-pipe__list .lm-cost { font-style: normal; align-self: center; }

.lm-cost {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  margin-top: 2px;
}
.lm-cost--free {
  background: var(--mint);
  border: 1px solid var(--mint-line);
  color: var(--green-700);
}
.lm-cost--call {
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink-faint);
}
.dark .lm-cost--free, .lm-band .lm-cost--free {
  background: rgba(63,167,118,0.14);
  border-color: rgba(63,167,118,0.36);
  color: var(--glow);
}
.dark .lm-cost--call, .lm-band .lm-cost--call {
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.12);
  color: var(--dark-soft);
}

/* ============================================================
   7 · REVIEW TOGGLE DEMO — off vs on, side by side
   ============================================================ */

.lm-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
.lm-pane {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease);
}
.dark .lm-pane, .lm-band .lm-pane {
  border-color: var(--dark-line);
  background: rgba(255,255,255,0.028);
}
.lm-pane--on { border-color: var(--green-300); box-shadow: var(--shadow-md); }
.lm-band .lm-pane--on { border-color: rgba(63,167,118,0.42); box-shadow: 0 26px 60px -36px rgba(0,0,0,0.85); }
.lm-pane__bar {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.dark .lm-pane__bar, .lm-band .lm-pane__bar { border-color: var(--dark-line); color: var(--dark-soft); }
.lm-pane--on .lm-pane__bar { color: var(--green-700); }
.lm-band .lm-pane--on .lm-pane__bar { color: var(--glow); }
.lm-pane__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.lm-line {
  font-family: var(--font-mono);
  font-size: 0.79rem;
  line-height: 1.6;
  padding: 8px 11px;
  border-radius: 9px;
  border: 1px solid var(--line-soft);
  background: var(--paper-2);
  color: var(--ink-soft);
}
.dark .lm-line, .lm-band .lm-line {
  border-color: rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
  color: var(--dark-soft);
}
.lm-line--bad { border-color: rgba(185,137,47,0.42); background: rgba(185,137,47,0.09); color: var(--amber); }
.lm-line--good { border-color: var(--mint-line); background: var(--mint); color: var(--green-800); }
.lm-band .lm-line--good, .dark .lm-line--good {
  border-color: rgba(63,167,118,0.4);
  background: rgba(63,167,118,0.11);
  color: var(--dark-text);
}
.lm-line b { color: inherit; font-weight: 600; }
.lm-line__flag {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0;
  margin-top: 5px;
  opacity: .82;
}

/* ============================================================
   8 · HOME BAND LAYOUT

   The landing band used to be an inverted dark spotlight with an
   animated aurora behind it. It is paper now (.lm-quiet), like the
   rest of the page: same notebook grid, hairlines top and bottom
   instead of a colour flip. It still reads as its own chapter, but
   the page no longer changes temperature halfway down.

   .lm-band (dark) is still used by the review section of the
   deep-dive page, so both variants live here.
   ============================================================ */

/* Same treatment as the deep-dive hero, so the two Lemma surfaces
   match: notebook paper, one soft green wash in the top corner to
   mark whose chapter this is, and a hairline at each end instead of
   a change of colour. The cards are white, so they sit on it clearly. */
.lm-quiet {
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 520px at 85% -8%, rgba(28,124,84,0.07), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: auto, 30px 30px, 30px 30px, 150px 150px, 150px 150px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lm-quiet .lm-head { margin-bottom: 44px; }
.lm-quiet .lm-bench { margin-top: 26px; }
.lm-quiet .lm-band__note { color: var(--ink-soft); }

/* Four equal quadrants rather than the old six-column mosaic of five
   cards. One job per card — write, capture, check, revise — so the
   grid can be read once, in order, instead of scanned for the shape. */
.lm-grid--quad { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lm-grid--quad > .lm-card { grid-column: span 1; padding: 28px; }

/* The chart runs the full width of the band, which is room enough to
   set the delta pill beside the metric name rather than under it. That
   takes each label from three stacked lines to two, so a row is only as
   tall as its pair of bars and the whole card loses about a third of
   its height without dropping anything from it. */
.lm-bench--wide { padding: 28px 30px 22px; }
.lm-bench--wide .lm-bench__head { margin-bottom: 24px; }
.lm-bench--wide .lm-bench__head h3 { font-size: 1.3rem; }
.lm-bench--wide .lm-bench__head p { max-width: 62ch; font-size: 0.87rem; }

.lm-bench--wide .lm-rows { gap: 14px; }
.lm-bench--wide .lm-row { grid-template-columns: 268px 1fr; gap: 24px; }
.lm-bench--wide .lm-row__label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 10px;
}
.lm-bench--wide .lm-row__label b { font-size: 0.92rem; }
.lm-bench--wide .lm-row__label .lm-delta { margin-top: 0; }
.lm-bench--wide .lm-row__label span:not(.lm-delta) {
  flex: 1 1 100%;
  margin-top: 0;
  font-size: 0.775rem;
  line-height: 1.35;
}

.lm-bench--wide .lm-bars { gap: 6px; }
.lm-bench--wide .lm-bar__track { height: 16px; border-radius: 6px; }
.lm-bench--wide .lm-bar { grid-template-columns: 1fr 52px; gap: 10px; }
.lm-bench--wide .lm-bar__val { font-size: 0.77rem; }

.lm-bench--wide .lm-bench__foot {
  margin-top: 18px;
  padding-top: 15px;
  font-size: 0.79rem;
}

/* an inline slash command, e.g. /quiz */
.lm-cmd {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--green-700);
  background: var(--mint);
  border: 1px solid var(--mint-line);
  border-radius: 6px;
  padding: 1px 6px;
}

.lm-band__cta {
  margin-top: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.lm-band__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--dark-soft);
}

/* The benchmark reads on paper, one beat below the dark pipeline band:
   the claim runs dark, the evidence for it runs light. */
.lm-results { background: linear-gradient(var(--paper-2), var(--paper)); }
.lm-results .lm-band__note { color: var(--ink-faint); }
.lm-band .lm-pipe:last-child { margin-bottom: 0; }

/* ============================================================
   9 · DEEP-DIVE PAGE CHROME
   ============================================================ */

.lm-hero { padding: 88px 0 76px; }
/* One centered column. The benchmark chart used to sit beside this and
   pushed the hero past two screens; it lives in the review band now. */
.lm-hero__inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.lm-hero__inner .section-lead { max-width: 60ch; }
.lm-hero .h-display { margin-top: 18px; }
.dark .lm-hero .h-display, .lm-band.lm-hero .h-display { color: var(--dark-text); }
.lm-hero__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
.lm-hero__inner .lm-hero__cta { justify-content: center; }

/* stat rail under the hero */
.lm-rail {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--dark-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  justify-content: start;
}
.lm-hero__inner .lm-rail { text-align: center; }
.lm-rail div b {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--glow);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.lm-rail div span {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dark-soft);
}

/* "A day with it" — four across. Stacked full-width rows with a pill
   tray each turned four short sentences into most of a screen. */
.lm-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.lm-step {
  padding: 22px 22px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--paper-2);
  transition: transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease);
}
.lm-step:hover {
  transform: translateY(-4px);
  border-color: var(--green-300);
  background: var(--paper-3);
  box-shadow: var(--shadow-md);
}
.lm-step__n {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--mint);
  border: 1px solid var(--mint-line);
  color: var(--green-700);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.lm-step h3 { font-size: 1.09rem; margin: 14px 0 7px; }
.lm-step p { color: var(--ink-soft); font-size: 0.89rem; line-height: 1.58; }
.lm-step code, .lm-demo__side code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--green-700);
}

/* Effort / Intent / slash commands, three lists side by side rather
   than three stacked bands of chips. */
.lm-dials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 40px;
  align-items: start;
}
/* Flat columns with a rule on top, not three cards: the lists are 3, 5
   and 5 items long, and boxed columns would stretch the short one to
   match with a third of it empty. */
.lm-dial {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.lm-list { margin-top: 12px; }
.lm-list li {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}
.lm-list li:first-child { border-top: 0; padding-top: 4px; }
.lm-list b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.lm-list--mono b { font-family: var(--font-mono); font-size: 0.85rem; color: var(--green-700); letter-spacing: 0; }
.lm-list span {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* the one interactive demo on the page, beside its explanation */
.lm-demo {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 32px;
  align-items: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--paper-2);
  padding: 30px 32px;
}
.lm-demo__side h3 { font-size: 1.24rem; margin: 12px 0 9px; }
.lm-demo__side p { color: var(--ink-soft); font-size: 0.93rem; line-height: 1.6; }
.lm-demo .lm-q { border-color: var(--line); background: var(--paper-3); }
.lm-demo .lm-q__q { color: var(--ink); }
.lm-demo .lm-q__n { background: var(--mint); color: var(--green-700); }
.lm-demo .lm-q__chev { color: var(--ink-faint); }
.lm-demo .lm-q__a > span { color: var(--ink-soft); }
.lm-demo .lm-q__a b { color: var(--green-700); }

/* ============================================================
   9b · LIGHT HERO
   The deep-dive page opens on paper rather than in the dark band:
   one centered column, no card beside it. The benchmark chart now
   sits in the review band, where its argument is.
   ============================================================ */

.lm-hero--light {
  /* the same graph paper the body uses, over a warm wash and a single
     green glow behind the chart — the notebook, lit rather than inverted */
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 480px at 50% -18%, rgba(28,124,84,0.08), transparent 64%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--paper-2), var(--paper));
  background-size: auto, 30px 30px, 30px 30px, 150px 150px, 150px 150px, auto;
  border-bottom: 1px solid var(--line);
}
.lm-hero--light .h-display { color: var(--ink); }
.lm-hero--light .section-lead { color: var(--ink-soft); }

/* the stat rail reads on paper: hairline in --line, numbers in green */
.lm-hero--light .lm-rail { border-top-color: var(--line); }
.lm-hero--light .lm-rail div b { color: var(--green-700); }
.lm-hero--light .lm-rail div span { color: var(--ink-faint); }

/* the ghost button sits on paper now, so it needs a hover that reads */
.lm-hero--light .btn--ghost { background: var(--paper-3); box-shadow: var(--shadow-sm); }
.lm-hero--light .btn--ghost:hover { border-color: var(--green-300); box-shadow: var(--shadow-md); }

/* ============================================================
   10 · RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .lm-grid { grid-template-columns: repeat(4, 1fr); }
  .lm-card, .lm-card--wide, .lm-card--tall { grid-column: span 2; }
  .lm-card--full { grid-column: span 4; }
  /* two per row here, so an odd card count would leave the last one
     stranded at half width. Let it run the full row instead. */
  .lm-grid > .lm-card:last-child:nth-child(odd) { grid-column: span 4; }
  /* the quad grid is already two-up, so it only needs its span back */
  .lm-grid--quad { grid-template-columns: repeat(2, 1fr); }
  .lm-grid--quad > .lm-card { grid-column: span 1; }
  /* six is a clean two-up; nothing is left stranded */
  .lm-grid--six { grid-template-columns: repeat(2, 1fr); }
  .lm-grid--six > .lm-card { grid-column: span 1; }
  .lm-flow { grid-template-columns: repeat(2, 1fr); }
  .lm-dials { grid-template-columns: 1fr 1fr; }
  .lm-dials > .lm-dial:last-child { grid-column: 1 / -1; }
  .lm-dials > .lm-dial:last-child .lm-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px;
  }
  .lm-dials > .lm-dial:last-child .lm-list li:nth-child(2) { border-top: 0; padding-top: 4px; }
}

@media (max-width: 900px) {
  .lm-pipe__list { grid-template-columns: 1fr; }
  .lm-pipe__list li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .dark .lm-pipe__list li:nth-last-child(-n+2),
  .lm-band .lm-pipe__list li:nth-last-child(-n+2) { border-color: var(--dark-line); }
  .lm-pipe__list li:last-child { border-bottom: 0; }
  .lm-demo { grid-template-columns: 1fr; gap: 22px; padding: 26px 24px; }
}

@media (max-width: 860px) {
  .lm-grid { grid-template-columns: 1fr; }
  .lm-grid--quad { grid-template-columns: 1fr; }
  .lm-grid--quad > .lm-card { padding: 24px; }
  .lm-card, .lm-card--wide, .lm-card--tall, .lm-card--full { grid-column: span 1; }
  .lm-compare { grid-template-columns: 1fr; }
  .lm-row, .lm-bench--wide .lm-row { grid-template-columns: 1fr; gap: 12px; }
  .lm-bench--wide { padding: 26px 22px 22px; }
  .lm-rail { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .lm-bench { padding: 26px 22px 22px; }
  .lm-pipe { padding: 24px 22px 20px; }
}

@media (max-width: 560px) {
  .lm-hero { padding: 56px 0 60px; }
  .lm-card--full { grid-template-columns: 1fr; gap: 14px; }
  .lm-grid--six { grid-template-columns: 1fr; }
  .lm-flow { grid-template-columns: 1fr; }
  .lm-step { padding: 20px; }
  .lm-step:hover { transform: none; }
  .lm-dials, .lm-dials > .lm-dial:last-child .lm-list { grid-template-columns: 1fr; }
  .lm-dials > .lm-dial:last-child .lm-list li:nth-child(2) { border-top: 1px solid var(--line-soft); padding-top: 11px; }
  .lm-rail { grid-template-columns: 1fr; gap: 16px; text-align: left; }
  .lm-hero__inner .lm-rail { text-align: left; }
  .lm-bar { grid-template-columns: 1fr 50px; gap: 9px; }
  .lm-bench { padding: 22px 18px 18px; border-radius: var(--radius); }
  .lm-bench--wide { padding: 22px 18px 18px; }
  .lm-band__cta { flex-direction: column; align-items: stretch; }
  .lm-band__cta .btn { width: 100%; }
  .lm-band__note { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .lm-band::before,
  .lm-shot__scan { animation: none !important; }
  .is-live .lm-mini .lm-box { animation: none; opacity: 1; transform: none; }
  .lm-shot__scan { opacity: 0; }
}