/* ===========================================================================
   The landing page (`welcome.html`): one offer, one audience, one action.

   **The site's colours and controls, with a stricter scale.** Every colour,
   shadow and control here is the site's own token or class (`tokens.css`,
   `pages.css`, `controls.css`), so the page is plainly part of the site and of
   the app. What it adds is discipline: sizes land on one type scale (12, 14,
   16, 18, 20, 24, 30, 36, 48, 60 with their line heights), room on one spacing
   scale (4, 8, 12, 16, 24, 32, 40, 48, 64, 80, 96), corners on one radius set,
   and no italics anywhere.

   Everything that moves is `transform` and `opacity` on `--ease-out`, as on
   the rest of the site; the scroll reveals are the site's own `data-reveal`.
   =========================================================================== */

.lp { position: relative; z-index: 1; }
.lp .wrap { max-width: 1120px; }
.lp em, .lp i:not([aria-hidden]) { font-style: normal; }

/* A skip link, for whoever arrives by keyboard. Out of sight until focused. */
.skip {
  position: absolute; z-index: 30; inset-inline-start: 16px; top: 8px;
  padding: 8px 12px; border-radius: var(--radius-control);
  background: var(--accent); color: #fff; font-size: 14px; line-height: 20px; font-weight: 600;
  text-decoration: none; transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip:focus-visible { transform: none; }

/* ── Type ─────────────────────────────────────────────────────────────────── */
.lp h2 {
  font-size: 36px; line-height: 40px; letter-spacing: -0.02em; font-weight: 700;
  margin: 0 0 16px; max-width: 680px; text-wrap: balance;
}
.lp h3 { font-size: 18px; line-height: 28px; font-weight: 600; margin: 0 0 8px; text-wrap: balance; }
.lp p { text-wrap: pretty; }
.lp-kicker {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 12px;
}
.lp-lead { font-size: 18px; line-height: 28px; color: var(--text-muted); max-width: 680px; margin: 0; }
.lp-body { font-size: 16px; line-height: 24px; color: var(--text-muted); margin: 0; }
.lp-small { font-size: 14px; line-height: 20px; color: var(--text-faint); margin: 0; }
@media (max-width: 720px) {
  .lp h2 { font-size: 30px; line-height: 36px; }
}

/* ── Sections ─────────────────────────────────────────────────────────────── */
.lp section { padding: 96px 0; border-top: 0; }
.lp section + section { border-top: 1px solid var(--border-soft); }
@media (max-width: 720px) { .lp section { padding: 64px 0; } }
.lp-head { margin-bottom: 48px; }

/* ── The call to action, the same at the top and at the foot ────────────── */
.lp .btn.lp-cta {
  padding: 8px 12px; font-size: 16px; line-height: 24px; font-weight: 600; gap: 8px;
}
.lp-cta svg { flex: none; }
.lp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 32px; }
.lp-also { font-size: 14px; line-height: 20px; color: var(--text-faint); margin: 0; }
.lp-also a { color: var(--text-muted); }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.lp-hero { padding: 96px 0 80px; }
.lp-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; align-items: center;
}
@media (max-width: 960px) {
  .lp-hero { padding: 64px 0; }
  .lp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
.lp-h1 {
  font-size: 48px; line-height: 48px; letter-spacing: -0.03em; font-weight: 700;
  margin: 0 0 24px; max-width: 680px; text-wrap: balance;
  /* The one gradient on the page, and it is on the words, never behind them. */
  background: linear-gradient(90deg, #000000, #666666);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="dark"] .lp-h1 { background-image: linear-gradient(90deg, #ffffff, #9b9b9b); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-h1 { background-image: linear-gradient(90deg, #ffffff, #9b9b9b); }
}
/* A right to left page reads the gradient the other way, so it still starts
   dark where the reading starts. */
[dir="rtl"] .lp-h1 { background-image: linear-gradient(270deg, #000000, #666666); }
[data-theme="dark"] [dir="rtl"] .lp-h1 { background-image: linear-gradient(270deg, #ffffff, #9b9b9b); }
.lp-h1 span { display: block; }
@media (max-width: 720px) { .lp-h1 { font-size: 36px; line-height: 40px; } }

.lp-hero .lp-lead { font-size: 20px; line-height: 28px; }
@media (max-width: 720px) { .lp-hero .lp-lead { font-size: 18px; line-height: 28px; } }
.lp-proof {
  display: flex; align-items: center; gap: 8px; margin: 24px 0 0;
  font-size: 14px; line-height: 20px; color: var(--text-muted);
}
.lp-proof strong { color: var(--text); font-weight: 600; }
.lp-proof::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 9999px; background: var(--math-accent);
}

/* **The live sheet**: a page of a real document, written while you watch. */
.lp-sheet-wrap { position: relative; padding-bottom: 48px; }
.lp-sheet {
  position: relative; background: var(--paper); color: var(--text);
  border-radius: 12px; box-shadow: var(--shadow-lg);
  padding: 40px 40px 48px; font-family: var(--font-body-en);
  font-size: 18px; line-height: 28px;
  min-height: 420px; box-sizing: border-box;
}
@media (max-width: 520px) { .lp-sheet { padding: 24px 24px 40px; font-size: 16px; line-height: 24px; min-height: 380px; } }
.lp-sheet h3 { font-family: var(--font-body-en); font-size: 20px; line-height: 28px; margin: 0 0 16px; }
.lp-sheet h3 b { color: var(--accent); font-weight: 700; margin-inline-end: 8px; }
.lp-sheet p { margin: 0 0 16px; }
.lp-sheet [dir="rtl"] { font-family: var(--font-body-he); }
.lp-sheet-eq {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 72px; margin: 8px 0 16px; position: relative;
}
.lp-sheet-eq .lp-eqno { position: absolute; inset-inline-end: 0; color: var(--text-faint); font-size: 16px; }
.lp-sheet-foot {
  position: absolute; inset-inline: 0; bottom: 16px; text-align: center;
  font-size: 12px; line-height: 16px; color: var(--text-faint); font-family: var(--font-ui);
}
/* What the hands are doing: the keys typed into the formula, under the sheet. */
.lp-keys {
  position: absolute; inset-inline-start: 24px; bottom: -8px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  background: var(--glass-body-solid), var(--surface); border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--text);
  direction: ltr;
}
.lp-keys::before { content: ""; width: 8px; height: 8px; border-radius: 9999px; background: var(--accent); }
.lp-keys[data-idle] { opacity: 0.6; }
.lp-caret {
  display: inline-block; width: 2px; height: 1.1em; vertical-align: text-bottom;
  background: var(--accent); margin-inline-start: 2px;
  animation: lp-blink 1.06s steps(1) infinite;
}
@keyframes lp-blink { 50% { opacity: 0; } }
/* A line being written arrives; it does not appear. */
.lp-line { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.lp-line[data-off] { opacity: 0; transform: translateY(8px); }
.lp-mathbox { display: inline-block; transition: opacity var(--dur-base) var(--ease-out); }

/* A formula inside a sentence is its own left to right run, whichever way the
   sentence reads: without the isolation a Hebrew line scrambles it. */
.lp-m { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ── The tagline, lit word by word as it scrolls past ───────────────────── */
.lp-tagline { padding: 96px 0; }
.lp-tagline p {
  font-size: 60px; line-height: 60px; letter-spacing: -0.025em; font-weight: 700;
  max-width: 880px; margin: 0; text-wrap: balance; color: var(--text);
}
.lp-tagline p > span { display: block; }
.lp-tagline [data-word] {
  color: color-mix(in srgb, var(--text) 28%, transparent);
  transition: color 0.7s cubic-bezier(0.32, 0.72, 0, 1);
}
.lp-tagline [data-word][data-lit] { color: var(--text); }
@media (max-width: 720px) { .lp-tagline p { font-size: 36px; line-height: 40px; } }

/* ── The usual choice ─────────────────────────────────────────────────────── */
.lp-versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .lp-versus { grid-template-columns: minmax(0, 1fr); } }
.lp-panel {
  border-radius: 16px; padding: 24px; background: var(--surface);
  border: 1px solid var(--border); display: grid; gap: 16px; align-content: start;
}
.lp-panel-label { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--text-muted); margin: 0; }
.lp-panel.is-ours { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); box-shadow: var(--shadow-md); }
.lp-panel.is-ours .lp-panel-label { color: var(--accent); }
.lp-code {
  margin: 0; padding: 16px; border-radius: 8px; overflow-x: auto;
  background: var(--surface-alt); color: var(--text);
  font-family: var(--font-mono); font-size: 14px; line-height: 20px; direction: ltr; text-align: left;
  white-space: pre;
}
.lp-code .k { color: var(--accent); }
.lp-code .err { display: block; color: #a4453a; margin-top: 8px; }
/* The compiler being run, between the typing and its verdict. */
.lp-code .run { display: block; color: var(--text-faint); margin-top: 8px; }
.lp-code .lp-caret { height: 1.2em; }
.lp-paperlet {
  background: var(--paper); border-radius: 8px; box-shadow: var(--paper-shadow, var(--shadow-sm));
  padding: 24px; font-family: var(--font-body-en); font-size: 16px; line-height: 24px; color: var(--text);
}
.lp-paperlet .lp-eqline { display: flex; justify-content: center; margin: 12px 0 0; }

/* **A document keeps its own direction.** The sheet and the small papers are
   documents, and a document never follows the interface: they are left to
   right underneath, and a Hebrew paragraph in them says so itself. */
.lp-sheet, .lp-paperlet { text-align: left; }
.lp-sheet [dir="rtl"], .lp-paperlet [dir="rtl"] { text-align: right; }

/* ── Benefits: a grid where the two that carry the page get the room ──── */
.lp-bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.lp-tile {
  grid-column: span 2; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--border-soft); padding: 24px;
  display: grid; grid-template-rows: auto 1fr; gap: 24px; min-width: 0;
}
.lp-tile.is-wide { grid-column: span 3; }
@media (max-width: 960px) { .lp-tile, .lp-tile.is-wide { grid-column: span 3; } }
@media (max-width: 640px) { .lp-tile, .lp-tile.is-wide { grid-column: span 6; } }
.lp-stage {
  border-radius: 8px; background: var(--bg); min-height: 160px;
  display: grid; place-items: center; padding: 24px; overflow: hidden; position: relative;
}
.lp-stage .lp-paperlet { width: 100%; box-sizing: border-box; padding: 16px; }
/* Keys turning into a formula: the source on the left, what it draws on the right. */
.lp-typed { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 12px 16px; justify-items: start; direction: ltr; }
.lp-typed code {
  font-family: var(--font-mono); font-size: 14px; line-height: 20px;
  padding: 4px 8px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border);
}
.lp-arrow { color: var(--text-faint); font-size: 20px; line-height: 28px; }
.lp-pages { display: flex; gap: 12px; }
.lp-page {
  width: 96px; height: 128px; background: var(--paper); border-radius: 4px; box-shadow: var(--paper-shadow, var(--shadow-sm));
  padding: 12px 12px 8px; box-sizing: border-box; display: grid; grid-template-rows: auto 1fr auto auto; gap: 4px;
}
.lp-page i { display: block; height: 3px; border-radius: 2px; background: var(--text-faint); opacity: 0.45; }
.lp-page .eq { height: 8px; width: 60%; margin: 4px auto; background: var(--math-accent); opacity: 0.8; }
.lp-page .fn { height: 2px; opacity: 0.35; }
.lp-page .rule { width: 32px; height: 1px; opacity: 0.6; }
.lp-page .no { font-family: var(--font-ui); font-size: 12px; line-height: 16px; text-align: center; color: var(--text-faint); }
.lp-steps-math { display: grid; gap: 8px; justify-items: start; direction: ltr; font-size: 16px; }
.lp-steps-math .why { font-family: var(--font-ui); font-size: 12px; line-height: 16px; color: var(--math-accent); margin-inline-start: 8px; }
.lp-files { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; direction: ltr; }
.lp-file {
  display: grid; gap: 4px; justify-items: center; padding: 12px; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); min-width: 64px;
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--text-muted);
}
.lp-file b { font-family: var(--font-ui); font-size: 20px; line-height: 28px; color: var(--accent); font-weight: 600; }

/* ── The window: the whole of the app, in the face the page is in ─────── */
.lp-window {
  border-radius: 16px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); background: var(--surface); margin-top: 48px;
}
/* The corners are the picture's own, not a clip on the frame: a clip would cut
   off the rim the frame wears, which sits just outside it. */
.lp-window img { display: block; width: 100%; height: auto; border-radius: 15px; }
.lp-window .for-dark { display: none; }
[data-theme="dark"] .lp-window .for-light { display: none; }
[data-theme="dark"] .lp-window .for-dark { display: block; }

/* ── How it works ─────────────────────────────────────────────────────────── */
.lp-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
@media (max-width: 860px) { .lp-how { grid-template-columns: minmax(0, 1fr); } }
.lp-how li { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-soft); }
.lp-how li::after {
  order: -1; counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 14px; line-height: 20px;
  margin-bottom: 8px;
}
.lp kbd {
  font-family: var(--font-mono); font-size: 12px; line-height: 16px; padding: 2px 6px;
  border-radius: 4px; border: 1px solid var(--border); background: var(--bg); color: var(--text);
}

/* ── The facts, said with numbers that are counted rather than rounded ── */
.lp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .lp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp-fact { display: grid; gap: 4px; align-content: start; }
.lp-fact b { font-size: 48px; line-height: 48px; letter-spacing: -0.03em; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.lp-fact span { font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.lp-faq { display: grid; gap: 8px; max-width: 800px; }
.lp-faq details { border-radius: 12px; background: var(--surface); border: 1px solid var(--border-soft); }
.lp-faq summary {
  list-style: none; cursor: pointer; padding: 16px 24px; display: flex; align-items: center; gap: 16px;
  font-size: 16px; line-height: 24px; font-weight: 600; border-radius: 12px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
/* The chevron is an element of its own: a summary is a control, and a
   control's two pseudo-elements are its rim and its wash. */
.lp-chev {
  margin-inline-start: auto; flex: none; width: 8px; height: 8px;
  border-inline-end: 1.5px solid var(--text-faint); border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-fast) var(--ease-out);
}
.lp-faq details[open] .lp-chev { transform: rotate(225deg) translateY(-2px); }
/* The answers are in the site's tone for a sentence beside a link — every one
   of them, so the three that hold a link do not look like a different kind. */
.lp-faq .lp-a { padding: 0 24px 16px; margin: 0; font-size: 16px; line-height: 24px; color: var(--text-faint); text-wrap: pretty; }

/* ── The last word ────────────────────────────────────────────────────────── */
.lp-final { text-align: center; }
.lp-final h2, .lp-final .lp-lead { margin-inline: auto; }
.lp-final .lp-cta-row { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .lp-caret { animation: none; }
  .lp-line[data-off] { transform: none; }
  .lp-tagline [data-word] { transition: color var(--dur-fast) linear; }
}