/* LingTeX Tools site: shared styles for the landing page (index.html) and the
   LingTeX-Word page (word/). The LaTeX & XLingPaper page (latex/) keeps its own
   inline styles; the tokens here are copied from it so all three pages match. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --blue-200:  #bfdbfe;
  --blue-500:  #3b82f6;
  --blue-600:  #2563eb;
  --blue-700:  #1d4ed8;
  --blue-800:  #1e40af;
  --blue-900:  #1e3a8a;
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --teal-50:   #f0fdfa;
  --teal-100:  #ccfbf1;
  --teal-600:  #0d9488;
  --teal-700:  #0f766e;
  --green-600: #16a34a;
  --amber-200: #fde68a;
  --amber-900: #78350f;

  --font:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono:  ui-monospace, 'Cascadia Code', 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --serif: 'Charis SIL', 'Doulos SIL', Cambria, 'Times New Roman', Georgia, serif;
  --r:     8px;
  --r-lg:  14px;
  --max-w: 1100px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--slate-100);
  color: var(--slate-900);
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
a { color: var(--blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
code { font-family: var(--mono); font-size: 0.85em; background: var(--slate-200); padding: 1px 5px; border-radius: 4px; }
main { flex: 1; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.site-nav {
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--slate-200);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-wrap: wrap;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--slate-900);
  white-space: nowrap;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 26px; height: 26px; border-radius: 6px; background: #fff; border: 1px solid var(--slate-200); }
.nav-links { display: flex; gap: 4px; flex-wrap: wrap; }
.nav-links a {
  font-size: 0.875rem;
  color: var(--slate-600);
  padding: 6px 11px;
  border-radius: 6px;
  white-space: nowrap;
}
.nav-links a:hover { background: var(--slate-100); color: var(--slate-900); text-decoration: none; }
.nav-links a.active { color: var(--blue-700); background: var(--blue-50); font-weight: 600; }
.nav-links a.nav-gh { border: 1px solid var(--slate-200); color: var(--slate-700); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(59,130,246,0.55), transparent 60%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 45%, var(--blue-600) 100%);
  color: #fff;
  padding: 72px 20px 120px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  max-width: 820px;
  margin: 0 auto 18px;
}
.hero-sub {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: var(--blue-100);
  max-width: 660px;
  margin: 0 auto;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--blue-100);
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 5px 12px 5px 6px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--amber-200);
  color: var(--amber-900);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: var(--r);
  font: 650 0.94rem var(--font);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--blue-700); color: #fff; box-shadow: 0 6px 16px -8px rgba(29,78,216,.8); }
.btn-primary:hover { background: var(--blue-800); }
.btn-teal { background: var(--teal-700); color: #fff; box-shadow: 0 6px 16px -8px rgba(15,118,110,.8); }
.btn-teal:hover { background: #115e59; }
.btn-light { background: #fff; color: var(--blue-800); }
.btn-light:hover { background: var(--blue-50); }
.btn-glass { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.35); }
.btn-glass:hover { background: rgba(255,255,255,0.24); }
.btn-outline { background: #fff; color: var(--slate-800); border-color: var(--slate-300); }
.btn-outline:hover { background: var(--slate-50); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.link-row { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 0.875rem; }
.link-row a { color: inherit; opacity: .85; border-bottom: 1px solid currentColor; }
.link-row a:hover { opacity: 1; text-decoration: none; }

/* ── Landing: the two choices ───────────────────────────────────────────── */
.choices {
  max-width: var(--max-w);
  margin: -78px auto 0;
  padding: 0 20px 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  position: relative;
}
.choice {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 48px -28px rgba(15,23,42,.45);
  transition: transform .18s, box-shadow .18s;
}
.choice:hover { transform: translateY(-3px); box-shadow: 0 30px 56px -28px rgba(15,23,42,.5); }
.choice-body { padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.choice-kicker { font-size: 0.74rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-700); }
.choice.latex .choice-kicker { color: var(--teal-700); }
.choice h2 { font-size: 1.6rem; letter-spacing: -0.025em; line-height: 1.15; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.choice p { color: var(--slate-600); font-size: 0.97rem; }
.checks { list-style: none; display: grid; gap: 6px; margin: 2px 0 6px; }
.checks li { display: flex; gap: 9px; align-items: baseline; font-size: 0.92rem; color: var(--slate-700); }
.checks li::before { content: '✓'; color: var(--green-600); font-weight: 800; flex-shrink: 0; }
.choice-actions { margin-top: auto; display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.choice-actions .link-row { color: var(--slate-600); }

/* The LaTeX & XLingPaper card's picture: the app's own icons, nothing new. */
.latex-art {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(420px 220px at 30% 20%, rgba(13,148,136,0.18), transparent 70%),
    radial-gradient(420px 220px at 80% 90%, rgba(29,78,216,0.12), transparent 70%),
    linear-gradient(180deg, var(--teal-50), #fff);
  border-bottom: 1px solid var(--slate-200);
  position: relative;
}
.latex-art .icons { display: flex; align-items: center; gap: 22px; }
.latex-art .app { width: min(150px, 34%); aspect-ratio: 1; background: #fff; border-radius: 30px; padding: 12px; box-shadow: 0 18px 36px -18px rgba(15,23,42,.45); border: 1px solid var(--slate-200); }
.latex-art .ext { width: min(78px, 18%); aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 12px 26px -16px rgba(15,23,42,.45); border: 1px solid var(--slate-200); }
.latex-art .chips { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 0 12px; }
.chip { font: 650 0.74rem var(--font); color: var(--teal-700); background: #fff; border: 1px solid var(--teal-100); padding: 3px 10px; border-radius: 999px; }
.chip.soon { color: var(--slate-500); border-color: var(--slate-200); }

/* ── Media slots: a recording when the file exists, the mock until then ── */
.media-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--blue-900);
  container-type: inline-size;
}
.media-slot.wide { aspect-ratio: 16 / 10; }
.media-slot > video, .media-slot > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #fff;
}
.media-slot.has-media .placeholder { display: none; }

/* The mock: one 24-second loop in pure CSS, dressed as Windows. First FLEx's lines are
   set to Morphemes and Lex. Gloss (Tools > Configure > Interlinear..., untick Word
   under Baseline, OK). Then An example is
   selected and copied in a FLEx window; Word slides in and Insert Interlinear
   draws it; then the ruler's right margin is dragged in. The example keeps its
   width, as a LingTeX example does until something re-wraps it (leaving it, a
   save, or a Re-wrap button), until Re-wrap All is clicked; the margin goes back
   while the window is out of sight. The window chrome and the FLEx interface come from
   win-mock.css, shared with the LaTeX demo. Every keyframe below shares that one
   timeline, and the cursor's stops were measured from the rendered layout, so
   clicks land on what they click. Reduced motion shows the finished page. */
.mock, .mock * { box-sizing: border-box; }
.mock { position: absolute; inset: 0; padding: 5% 6% 0; display: flex; line-height: 1.3; background:
  radial-gradient(60% 80% at 85% 0%, rgba(96,165,250,.45), transparent 70%),
  linear-gradient(160deg, var(--blue-900), var(--blue-700)); }
.mock-win { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: .8cqw .8cqw 0 0; box-shadow: 0 2cqw 5cqw rgba(2,6,23,.45); animation: mock-word-win 24s ease-in-out infinite; }
.mock-insert-btn { animation: mock-btn 24s linear infinite; }
.mock-rewrap-btn { animation: mock-btn-rw 24s linear infinite; }
.mock-tip { position: absolute; left: 0; top: calc(100% + .5cqw); z-index: 5; width: 21cqw; padding: .8cqw 1cqw; background: #fff; border: 1px solid #c8c6c4; box-shadow: 0 .4cqw 1.2cqw rgba(0,0,0,.18); color: #323130; font: 1.05cqw/1.35 'Segoe UI', system-ui, sans-serif; text-align: left; opacity: 0; animation: mock-tip 24s linear infinite; }
.mock-tip b { display: block; margin-bottom: .3cqw; font-weight: 600; }
.mock-tip-rewrap { animation-name: mock-tip-rw; }
.mock-page { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; background: #ebebeb; }
.mock-ruler { position: relative; flex-shrink: 0; width: 76cqw; height: 1.7cqw; margin: .5cqw 0 .5cqw; border: 1px solid #d2d0ce; background: repeating-linear-gradient(90deg, #a19f9d 0 1px, transparent 1px 1.27cqw) 0 55% / 100% 32% no-repeat, #fff; }
.mock-ruler::before, .mock-ruler::after { content: ''; position: absolute; top: 0; bottom: 0; background: #d2d0ce; }
.mock-ruler::before { left: 0; width: 3.6cqw; }
.mock-ruler::after { right: 0; width: 3.6cqw; animation: mock-margin 24s ease-in-out infinite; }
.mock-ruler i { position: absolute; z-index: 1; right: 3.6cqw; bottom: 0; width: 1.2cqw; height: .9cqw; background: #605e5c; clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(50%); animation: mock-handle 24s ease-in-out infinite; }
.mock-sheet { flex-shrink: 0; width: 76cqw; padding: 1.4cqw 3.6cqw 2cqw; background: #fff; box-shadow: 0 .3cqw 1.2cqw rgba(0,0,0,.14); color: #111827; font-family: var(--serif); font-size: 1.5cqw; line-height: 1.35; animation: mock-pad 24s ease-in-out infinite; }
.mock-sheet h4 { margin: 0 0 .6cqw; color: var(--slate-800); font: 700 1.7cqw var(--font); }
.mock-sheet p.prose { margin: 0 0 .9cqw; color: var(--slate-600); }
.mock-caret { position: relative; height: 0; }
.mock-caret::after { content: ''; position: absolute; left: 0; top: 0; width: .2cqw; height: 1.9cqw; background: #111827; opacity: 0; animation: mock-caret 24s linear infinite; }
.igt { display: flex; gap: 2.4cqw; }
/* The example's width is animated on its own: it stays as drawn when the margin
   moves, and only takes the new width when Re-wrap All runs (68.8cqw and 44.8cqw
   are the sheet's text width at the two margins). */
.mock .igt { border-radius: .4cqw; animation: mock-insert 24s ease-out infinite, mock-igt 24s linear infinite; }
.igt-num { flex-shrink: 0; width: 4.5cqw; }
.igt-body { flex: 1; min-width: 0; }
.igt-cols { display: flex; flex-wrap: wrap; column-gap: 1.7cqw; row-gap: .9cqw; }
.w { display: inline-flex; flex-direction: column; white-space: nowrap; }
.w i { font-style: italic; }
.sc { font-variant: small-caps; }
.igt-free { margin-top: 1cqw; }

/* FLEx, over the Word window until the copy */
.mock-flex { position: absolute; left: 6cqw; right: 6cqw; top: 5cqw; bottom: 0; z-index: 2; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: .8cqw .8cqw 0 0; box-shadow: 0 2cqw 5cqw rgba(2,6,23,.45); opacity: 0; animation: mock-flex-win 24s ease-in-out infinite; }
.mock-flex-body { flex: 1; padding: 2.4cqw 2.6cqw; }
.mock-text { display: flex; gap: 1.6cqw; color: #111827; font-family: var(--serif); font-size: 1.6cqw; }
.mock-seg { flex-shrink: 0; padding-top: .2cqw; color: #000; font: 700 1.2cqw var(--font); }
.mock-lines { position: relative; flex: 1; min-width: 0; }
.mock-sel { position: absolute; left: -.6cqw; top: -.6cqw; bottom: -.6cqw; width: 0; background: rgba(0,120,215,.25); animation: mock-sel 24s linear infinite; }
/* Rows are fixed in the markup, filled to about 90% of the pane (the way FLEx
   wraps), so the text breaks in the same places at every size and the
   cursor's measured stops stay on target. */
.mock-bundles { position: relative; display: flex; flex-direction: column; row-gap: 1.6cqw; }
.mock-row { display: flex; column-gap: 2.2cqw; }
/* A word never squeezes: an over-full row shows it (and the rows are re-filled), rather than its morphemes breaking apart. */
.mock-row > *, .mock-morphs > * { flex-shrink: 0; }
.mock-bundle { display: flex; flex-direction: column; gap: .45cqw; }
.mock-wd { height: 2.08cqw; overflow: hidden; font-weight: 600; animation: mock-wordline 24s ease-in-out infinite; }
.mock-morphs { display: flex; gap: .9cqw; animation: mock-morphgap 24s ease-in-out infinite; }
.mock-m { display: flex; flex-direction: column; gap: .35cqw; }
.mock-m span:last-child { color: #334155; font: 1.3cqw var(--font); }
.mock-free { position: relative; margin-top: 2cqw; color: #334155; font: 1.4cqw var(--font); }
.mock-free b { margin-right: 1cqw; color: var(--slate-500); font-weight: 600; }
.mock-menu { animation: mock-menu 24s linear infinite; }
.mock-edit { animation: mock-menubtn 24s linear infinite; }
.mock-menu .copy { animation: mock-copy 24s linear infinite; }

.mock-cursor { position: absolute; left: 20%; top: 30%; z-index: 6; width: 2.2cqw; pointer-events: none; filter: drop-shadow(0 .2cqw .3cqw rgba(0,0,0,.35)); animation: mock-cursor 24s ease-in-out infinite; }
.mock-long .mock-cursor { animation-name: mock-cursor-long; }
.mock-cursor svg { display: block; width: 100%; height: auto; margin: -.18cqw 0 0 -.37cqw; }
.mock-cursor::after { content: ''; position: absolute; left: -1.6cqw; top: -1.6cqw; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: rgba(0,120,215,.45); opacity: 0; animation: mock-click 24s linear infinite; }

@keyframes mock-flex-win { 0%, 53.33% { opacity: 1; transform: none; } 56.67%, 96% { opacity: 0; transform: translateX(-6%); } 98.67%, 100% { opacity: 1; transform: none; } }
@keyframes mock-word-win { 0%, 53.33% { opacity: 0; transform: translateX(6%); } 56.67%, 96% { opacity: 1; transform: none; } 98.67%, 100% { opacity: 0; transform: translateX(6%); } }
@keyframes mock-sel    { 0%, 35.33% { width: 0; } 43.33%, 57.33% { width: calc(100% + 1.2cqw); } 58%, 100% { width: 0; } }
@keyframes mock-menu   { 0%, 45.47% { opacity: 0; } 45.67%, 51% { opacity: 1; } 51.33%, 100% { opacity: 0; } }
@keyframes mock-menubtn { 0%, 45.27% { background: transparent; box-shadow: none; } 45.33%, 51.27% { background: #cce8ff; box-shadow: inset 0 0 0 1px #99d1ff; } 51.33%, 100% { background: transparent; box-shadow: none; } }
@keyframes mock-copy   { 0%, 47.67% { background: transparent; border-color: transparent; } 48%, 51% { background: #cce8ff; border-color: #99d1ff; } 51.33%, 100% { background: transparent; border-color: transparent; } }
@keyframes mock-caret  { 0%, 56.67% { opacity: 0; } 57%, 58.33% { opacity: 1; } 58.67%, 59.33% { opacity: 0; } 59.67%, 61% { opacity: 1; } 61.33%, 100% { opacity: 0; } }
@keyframes mock-btn    { 0%, 58.33% { background: transparent; } 58.67%, 60.47% { background: #e1dfdd; } 60.53%, 61.2% { background: #c8c6c4; } 61.33%, 64% { background: #e1dfdd; } 64.33%, 100% { background: transparent; } }
@keyframes mock-btn-rw { 0%, 77% { background: transparent; } 77.33%, 79.47% { background: #e1dfdd; } 79.53%, 80.2% { background: #c8c6c4; } 80.33%, 81.33% { background: #e1dfdd; } 81.67%, 100% { background: transparent; } }
@keyframes mock-tip    { 0%, 59.33% { opacity: 0; } 59.67%, 63.67% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes mock-tip-rw { 0%, 78% { opacity: 0; } 78.33%, 81.67% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes mock-insert { 0%, 61% { opacity: 0; background: rgba(253,230,138,0); } 61.33% { opacity: 1; background: rgba(253,230,138,.9); } 68%, 79.93% { opacity: 1; background: rgba(253,230,138,0); } 80.13% { background: rgba(253,230,138,.9); } 85.33%, 100% { opacity: 1; background: rgba(253,230,138,0); } }
@keyframes mock-igt    { 0%, 79.93% { width: 68.8cqw; } 80%, 98.67% { width: 44.8cqw; } 99.33%, 100% { width: 68.8cqw; } }
@keyframes mock-pad    { 0%, 69.33% { padding-right: 3.6cqw; } 74.67%, 98.67% { padding-right: 27.6cqw; } 99.33%, 100% { padding-right: 3.6cqw; } }
@keyframes mock-margin { 0%, 69.33% { width: 3.6cqw; } 74.67%, 98.67% { width: 27.6cqw; } 99.33%, 100% { width: 3.6cqw; } }
@keyframes mock-handle { 0%, 69.33% { right: 3.6cqw; } 74.67%, 98.67% { right: 27.6cqw; } 99.33%, 100% { right: 3.6cqw; } }
@keyframes mock-click {
  0%     { opacity: 0; transform: scale(.3); }
  5.93%  { opacity: 0; transform: scale(.3); } 6%     { opacity: 1; transform: scale(.3); } 7.33%  { opacity: 0; transform: scale(1.5); }
  11.93% { opacity: 0; transform: scale(.3); } 12%    { opacity: 1; transform: scale(.3); } 13.33% { opacity: 0; transform: scale(1.5); }
  18.43% { opacity: 0; transform: scale(.3); } 18.5%  { opacity: 1; transform: scale(.3); } 19.83% { opacity: 0; transform: scale(1.5); }
  23.93% { opacity: 0; transform: scale(.3); } 24%    { opacity: 1; transform: scale(.3); } 25.33% { opacity: 0; transform: scale(1.5); }
  45.26% { opacity: 0; transform: scale(.3); } 45.33% { opacity: 1; transform: scale(.3); } 46.67% { opacity: 0; transform: scale(1.5); }
  49.93% { opacity: 0; transform: scale(.3); } 50%    { opacity: 1; transform: scale(.3); } 51.33% { opacity: 0; transform: scale(1.5); }
  60.6%  { opacity: 0; transform: scale(.3); } 60.67% { opacity: 1; transform: scale(.3); } 62%    { opacity: 0; transform: scale(1.5); }
  68.93% { opacity: 0; transform: scale(.3); } 69%    { opacity: 1; transform: scale(.3); } 70.33% { opacity: 0; transform: scale(1.5); }
  79.6%  { opacity: 0; transform: scale(.3); } 79.67% { opacity: 1; transform: scale(.3); } 81%    { opacity: 0; transform: scale(1.5); }
  100%   { opacity: 0; }
}
/* The cursor's stops are the pointer tip on its target, measured from the rendered layout (landing card; the -long variant on word/). If the mock's layout changes, measure them again. */
@keyframes mock-cursor {
  0%, 2.5%                { left: 25.3%; top: 33.7%; }
  5.8%, 6.3%              { left: 42.9%; top: 17.1%; }
  8%, 9.2%                { left: 46.8%; top: 22.1%; }
  11.4%, 13.8%            { left: 66.4%; top: 22.7%; }
  18%, 19.8%              { left: 39.2%; top: 39.6%; }
  23%, 27.5%              { left: 63.5%; top: 85.5%; }
  31.5%                   { left: 25.3%; top: 33.7%; }
  35.33%                  { left: 25.3%; top: 33.7%; }
  43.33%                  { left: 91.4%; top: 56.1%; }
  45%, 45.47%             { left: 20.6%; top: 17.1%; }
  47.67%, 51%             { left: 25.9%; top: 36.6%; }
  55.33%                  { left: 30%; top: 40%; }
  58.67%, 64%             { left: 11.5%; top: 24.5%; }
  67.33%, 69.33%          { left: 84.2%; top: 39.4%; }
  74.67%                  { left: 60.2%; top: 39.4%; }
  77.33%, 81.33%          { left: 33%; top: 24.5%; }
  85.33%, 94.67%          { left: 80%; top: 78%; }
  98.67%, 100%            { left: 25.3%; top: 33.7%; }
}
/* Same stops, measured on word/. */
@keyframes mock-cursor-long {
  0%, 2.5%                { left: 25.3%; top: 33.4%; }
  5.8%, 6.3%              { left: 41.7%; top: 17.2%; }
  8%, 9.2%                { left: 45.7%; top: 21.9%; }
  11.4%, 13.8%            { left: 65.4%; top: 22.2%; }
  18%, 19.8%              { left: 39.1%; top: 39.2%; }
  23%, 27.5%              { left: 63.5%; top: 85.7%; }
  31.5%                   { left: 25.3%; top: 33.4%; }
  35.33%                  { left: 25.3%; top: 33.4%; }
  43.33%                  { left: 91.4%; top: 65.7%; }
  45%, 45.47%             { left: 20.1%; top: 17.2%; }
  47.67%, 51%             { left: 25.4%; top: 35.5%; }
  55.33%                  { left: 30%; top: 40%; }
  58.67%, 64%             { left: 11.5%; top: 24.6%; }
  67.33%, 69.33%          { left: 84.3%; top: 39.5%; }
  74.67%                  { left: 60.3%; top: 39.5%; }
  77.33%, 81.33%          { left: 33%; top: 24.5%; }
  85.33%, 94.67%          { left: 80%; top: 78%; }
  98.67%, 100%            { left: 25.3%; top: 33.4%; }
}
@media (prefers-reduced-motion: reduce) {
  .mock *, .mock *::before, .mock *::after { animation: none !important; }
  .mock-flex, .mock-cursor, .mock-tip, .mock-caret { display: none; }
}

/* The configure step: Tools > Configure > Interlinear..., untick Word under
   Baseline, OK, the Word line goes.  Seconds 0-8 of the 24 s loop. */
.mock-tools { animation: mock-toolsbtn 24s linear infinite; }
.mock-tmenu { animation: mock-tmenu 24s linear infinite; }
.mock-tmenu .mock-cfg { animation: mock-cfg 24s linear infinite; }
.mock-submenu { animation: mock-submenu 24s linear infinite; }
.mock-submenu .mock-interlin { animation: mock-interlin 24s linear infinite; }
.mock-dlg { animation: mock-dlg 24s linear infinite; }
.mock-cbword::after { animation: mock-check 24s linear infinite; }
.mock-dlgok { animation: mock-dlgok 24s linear infinite; }
@keyframes mock-toolsbtn { 0%, 5.9% { background: transparent; box-shadow: none; } 6%, 12.4% { background: #cce8ff; box-shadow: inset 0 0 0 1px #99d1ff; } 12.5%, 100% { background: transparent; box-shadow: none; } }
@keyframes mock-tmenu    { 0%, 6.1% { opacity: 0; } 6.3%, 12.4% { opacity: 1; } 12.5%, 100% { opacity: 0; } }
@keyframes mock-cfg      { 0%, 7.9% { background: transparent; border-color: transparent; } 8%, 12.4% { background: #cce8ff; border-color: #99d1ff; } 12.5%, 100% { background: transparent; border-color: transparent; } }
@keyframes mock-submenu  { 0%, 9% { opacity: 0; } 9.2%, 12.4% { opacity: 1; } 12.5%, 100% { opacity: 0; } }
@keyframes mock-interlin { 0%, 11.4% { background: transparent; border-color: transparent; } 11.5%, 12.4% { background: #cce8ff; border-color: #99d1ff; } 12.5%, 100% { background: transparent; border-color: transparent; } }
@keyframes mock-dlg      { 0%, 12.6% { opacity: 0; } 13%, 24.4% { opacity: 1; } 24.5%, 100% { opacity: 0; } }
@keyframes mock-check    { 0%, 18.5% { opacity: 1; } 18.55%, 60% { opacity: 0; } 60.1%, 100% { opacity: 1; } }
@keyframes mock-dlgok    { 0%, 22.9% { background: #e1e1e1; border-color: #adadad; } 23%, 23.9% { background: #e5f1fb; border-color: #0078d7; } 24%, 24.4% { background: #cce4f7; border-color: #005499; } 24.5%, 100% { background: #e1e1e1; border-color: #adadad; } }
@keyframes mock-wordline { 0%, 25% { height: 2.08cqw; max-width: 30cqw; margin-bottom: 0; opacity: 1; } 25.8% { opacity: 0; } 26.5%, 60% { height: 0; max-width: 0; margin-bottom: -.45cqw; opacity: 0; } 60.1%, 100% { height: 2.08cqw; max-width: 30cqw; margin-bottom: 0; opacity: 1; } }
/* With the Word line gone FLEx lays the morphemes out as columns of their own:
   a word's bundle shrinks to its morphemes, and they spread to the column gap. */
@keyframes mock-morphgap { 0%, 25% { gap: .9cqw; } 26.5%, 60% { gap: 2.2cqw; } 60.1%, 100% { gap: .9cqw; } }

/* A still's placeholder: calm art with the command's own ribbon icon. */
.still-art { position: absolute; inset: 0; display: grid; place-items: center; background:
  radial-gradient(70% 90% at 20% 0%, rgba(59,130,246,.18), transparent 70%), linear-gradient(180deg, var(--blue-50), #fff); }
.still-art img { width: 16cqw; height: 16cqw; padding: 2.4cqw; box-sizing: content-box; background: #fff; border-radius: 4cqw; border: 1px solid var(--blue-100); box-shadow: 0 1.5cqw 3.5cqw -1cqw rgba(29,78,216,.28); }

/* ── Word page sections ─────────────────────────────────────────────────── */
.word-hero-media {
  max-width: 940px; margin: -84px auto 0; padding: 0 20px; position: relative;
}
.word-hero-media .media-slot { border-radius: 16px; box-shadow: 0 34px 60px -30px rgba(2,6,23,.6); border: 1px solid rgba(255,255,255,.6); }
.hero .btn-row { justify-content: center; margin-top: 28px; }
.hero .link-row { justify-content: center; margin-top: 16px; color: var(--blue-100); }
.hero .req { margin-top: 14px; font-size: 0.85rem; color: var(--blue-200); }

.section { max-width: var(--max-w); margin: 0 auto; padding: 64px 20px 8px; }
.section h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); letter-spacing: -0.03em; line-height: 1.15; margin-bottom: 10px; }
.section .lead { color: var(--slate-600); max-width: 680px; margin-bottom: 30px; font-size: 1.02rem; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.step .media-slot { border-bottom: 1px solid var(--slate-200); background: var(--blue-50); }
.step-body { padding: 16px 18px 20px; }
.step-num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue-700); color: #fff; font-size: 0.8rem; font-weight: 750; margin-bottom: 8px; }
.step h3 { font-size: 1.08rem; letter-spacing: -0.01em; margin-bottom: 6px; }
.step p { color: var(--slate-600); font-size: 0.93rem; }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.feature { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg); padding: 18px 18px 20px; }
.feature img { width: 36px; height: 36px; margin-bottom: 10px; border-radius: 8px; border: 1px solid var(--slate-200); }
.feature h3 { font-size: 1rem; margin-bottom: 4px; }
.feature p { color: var(--slate-600); font-size: 0.92rem; }

.install { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.install-card { background: #fff; border: 1px solid var(--slate-200); border-radius: var(--r-lg); padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 12px; }
.install-card h3 { font-size: 1.15rem; display: flex; align-items: center; gap: 8px; }
.install-card ol { padding-left: 1.2rem; display: grid; gap: 8px; color: var(--slate-700); font-size: 0.94rem; }
.install-card .note { font-size: 0.86rem; color: var(--slate-500); }
.install-card .btn-row { margin-top: auto; }

.beta-band {
  max-width: var(--max-w); margin: 56px auto 0; padding: 0 20px;
}
.beta-band > div { background: linear-gradient(135deg, var(--blue-50), #fff); border: 1px solid var(--blue-100); border-radius: var(--r-lg); padding: 22px 24px; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.beta-band p { color: var(--slate-700); max-width: 640px; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer { margin-top: 64px; border-top: 1px solid var(--slate-200); background: #fff; padding: 22px 20px 26px; text-align: center; font-size: 0.82rem; color: var(--slate-500); display: grid; gap: 6px; }
.footer-links { display: flex; gap: 6px 18px; justify-content: center; flex-wrap: wrap; }
.footer-links a { color: var(--slate-600); }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .choices { grid-template-columns: 1fr; margin-top: -64px; }
  .steps, .features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .site-nav { padding: 8px 14px 0; gap: 4px; }
  .nav-links { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 8px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .hero { padding: 48px 18px 104px; }
  .steps, .features, .install { grid-template-columns: 1fr; }
  .choice-body { padding: 20px; }
  .nav-links a { padding: 5px 8px; font-size: 0.82rem; }
}