/* Academic Writer — "The Margin". Tokens, base, sections, story scenes. */

/* ---------- tokens ---------- */
:root[lang="he"] {
  --display: "Frank Ruhl Libre", "Spectral", Georgia, serif;
  --sans: "IBM Plex Sans Hebrew", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* light page-like surfaces that stay light in both themes (article mockups) */
.lit {
  --paper: oklch(0.985 0.006 95);
  --ink: oklch(0.25 0.04 268);
  --ink-2: oklch(0.42 0.035 265);
  --rule: oklch(0.88 0.012 260);
  --indigo: oklch(0.36 0.11 268);
  --verified: oklch(0.55 0.10 165);
  --verified-soft: oklch(0.94 0.035 165);
  --verified-ink: color-mix(in oklch, var(--verified) 62%, var(--ink));
  background: var(--paper);
  color: var(--ink);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 16px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--sans); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 500; color: var(--ink); }
:root[lang="he"] h1, :root[lang="he"] h2 { font-weight: 700; }
:root[lang="he"] h3 { font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.015em; max-inline-size: 22ch; text-wrap: balance; }
:root[lang="he"] h2 { letter-spacing: 0; line-height: 1.2; }
h3 { font-size: 1.3rem; line-height: 1.25; }
p { margin: 0; }
a { color: var(--indigo); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
code, pre { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; padding: 0.05em 0.35em; white-space: nowrap; unicode-bidi: isolate; }
:focus-visible { outline: 2px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; inset-inline-start: 8px; top: -60px; z-index: 100; background: var(--indigo); color: var(--on-indigo); padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 8px; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 700px) { :root { --gutter: 28px; } }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-inline-size: 60ch; }
.art { font-family: var(--serif); }
:lang(he) .art, .art:lang(he), .sheet:lang(he), .sheet:lang(he) .sheet__p { font-family: "Frank Ruhl Libre", var(--serif); }
:root[lang="he"] .art { font-family: "Frank Ruhl Libre", var(--serif); }
.fn { font-family: var(--serif); font-size: 0.7em; line-height: 0; vertical-align: super; color: var(--indigo); margin-inline-start: 0.06em; font-style: normal; font-weight: 500; }
.link-arrow { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.arr { display: inline-block; }
:root[dir="rtl"] .arr:not(.arr--down) { transform: scaleX(-1); }

/* ---------- section rhythm and the margin rule ---------- */
main { position: relative; }
.sec { position: relative; padding-block: clamp(64px, 8vw, 104px); --sec-bg: var(--paper); }
.sec > .wrap { position: relative; z-index: 1; }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 60; height: var(--bar); background: var(--paper); border-bottom: 1px solid var(--rule); }
.bar__in { max-width: var(--wrap); height: 100%; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: 24px; }
.brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; color: var(--ink); margin-inline-end: auto; }
.brand__name { font: 500 1.3rem/1 var(--serif); letter-spacing: -0.01em; }
.brand__ver { font: 400 0.72rem/1 var(--mono); color: var(--ink-2); }
.brand__ver:empty, [data-ver]:empty { display: none; }
.nav { display: flex; gap: 22px; font-size: 0.93rem; }
.nav a { color: var(--ink-2); text-decoration: none; padding: 6px 2px; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--ink); border-bottom-color: var(--indigo); }
.bar__tools { display: flex; align-items: center; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; padding: 2px; }
.seg button { font: 500 0.82rem/1 var(--sans); min-width: 36px; height: 30px; padding: 0 8px; border: 0; background: transparent; color: var(--ink-2); border-radius: 6px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--indigo); color: var(--on-indigo); }
.icon-btn { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid var(--rule); border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; }
.icon-btn:hover { background: var(--paper-2); }
.icon-btn svg { grid-area: 1/1; display: none; }
#theme-btn[data-mode="system"] .i-system, #theme-btn[data-mode="light"] .i-light, #theme-btn[data-mode="dark"] .i-dark { display: block; }
.menu-btn { display: none; }
.menu-btn svg { display: block; }
@media (max-width: 880px) {
  .menu-btn { display: inline-grid; }
  .nav { position: absolute; inset-inline: 0; top: var(--bar); background: var(--paper); border-bottom: 1px solid var(--rule); flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; box-shadow: var(--shadow); }
  .nav a { padding: 12px 2px; font-size: 1rem; border-bottom: 1px solid var(--rule); }
  .js .nav:not(.is-open) { display: none; }
  .bar__in { gap: 10px; }
  .brand__ver { display: none; }
}

/* ---------- buttons, command blocks ---------- */
.cmd { position: relative; display: flex; align-items: stretch; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.cmd__pre { margin: 0; padding: 16px 18px; flex: 1; min-width: 0; overflow-x: auto; font-size: 0.86rem; line-height: 1.7; text-align: left; color: var(--ink); }
.cmd__pre code { background: none; border: 0; padding: 0; white-space: pre; font-size: inherit; }
.cmd--one .cmd__pre { display: flex; align-items: center; }
@media (max-width: 560px) { .cmd__pre code { white-space: pre-wrap; overflow-wrap: anywhere; } }
.copy { display: inline-flex; align-items: center; gap: 8px; align-self: center; margin: 8px; padding: 0 14px; height: 38px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); font: 500 0.85rem/1 var(--sans); cursor: pointer; flex-shrink: 0; }
.copy:hover { border-color: var(--indigo); }
.copy.is-done { background: var(--verified-soft); border-color: var(--verified); color: var(--verified-ink); }

/* hero layout: see round 3 */
.sheet { position: relative; padding: 22px 24px 20px; border-radius: 12px; border: 1px solid var(--rule); box-shadow: var(--shadow); font-family: var(--serif); }
.sheet { --paper: oklch(0.985 0.006 95); --ink: oklch(0.25 0.04 268); --ink-2: oklch(0.42 0.035 265); --rule: oklch(0.88 0.012 260); --indigo: oklch(0.36 0.11 268); --verified: oklch(0.55 0.10 165); --verified-soft: oklch(0.94 0.035 165); --verified-ink: color-mix(in oklch, var(--verified) 62%, var(--ink)); background: var(--paper); color: var(--ink); }
.sheet__title { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
:root[lang="he"] .sheet__title, .sheet--he .sheet__title { letter-spacing: 0; text-transform: none; }
.sheet__p { font-size: 1.22rem; line-height: 1.55; position: relative; }
.sheet--he .sheet__p, .sheet:lang(he) .sheet__p { font-size: 1.3rem; line-height: 1.7; }
.sheet__notes { display: grid; gap: 7px; margin: 14px 0 18px; }
.sheet__line { display: block; height: 5px; border-radius: 3px; background: var(--rule); }
.sheet__line--s { width: 62%; }
.sheet__foot { border-top: 1px solid var(--rule); padding-top: 10px; font-size: 0.9rem; color: var(--ink-2); line-height: 1.5; }
.sheet--he .sheet__foot { font-size: 1rem; }
/* ---------- why ---------- */
.why__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; }
.why__col { padding: 28px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); }
.why__col--yes { background: var(--paper-2); }
.why__col h3 { margin-bottom: 18px; }
.why__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.why__col li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.why__col svg { margin-top: 4px; }
.why__col--no svg { color: var(--rejected-ink); }
.why__col--yes svg { color: var(--verified-ink); }
.why__col--no li { color: var(--ink-2); }
.honest { margin-top: 40px; max-inline-size: 68ch; font-family: var(--serif); font-size: 1.2rem; line-height: 1.55; padding-inline-start: 20px; border-inline-start: 2px solid var(--indigo); }
:root[lang="he"] .honest { font-family: "Frank Ruhl Libre", var(--serif); font-size: 1.3rem; }
@media (max-width: 760px) { .why__cols { grid-template-columns: 1fr; } .why__col { padding: 22px; } }

/* ---------- reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(14px); }
  .js .rv.in { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
}

/* ---------- round 5: how ---------- */
/* An animated agent graph in a dark Cowork window (about 15 s, loops). Normal page flow: no scroll lock, no pin. JS (site.js, howApi) drives data-state attributes and --f by a timeline. Desktop: nodes are placed in % of a 1.9:1 canvas that shares its coordinate system with the SVG connectors. Mobile: the graph flows top to bottom. */
.how__head { text-align: center; margin-bottom: clamp(12px, 2.2vh, 26px); }
.how__head h2 { margin-inline: auto; max-inline-size: 22ch; }
.how__head .lede { margin: 8px auto 0; max-inline-size: 56ch; }
.hw { container-type: inline-size; max-width: max(660px, min(1100px, calc((100dvh - 300px) * 1.9 + 60px))); margin-inline: auto; }
.hw__sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hw__win { --w-bg: oklch(0.19 0.03 268); --w-card: oklch(0.26 0.05 268); --w-line: oklch(0.45 0.07 268); --w-fg: oklch(0.97 0.008 260); --w-dim: oklch(0.82 0.03 262); --w-acc: oklch(0.8 0.12 272); --w-ok: oklch(0.82 0.14 165); --w-bad: oklch(0.74 0.17 35);
  font-size: clamp(15px, 2.15cqw, 20px); line-height: 1.25; color: var(--w-fg); background: var(--w-bg); border: 1px solid oklch(0.36 0.06 268); border-radius: 16px; overflow: hidden;
  box-shadow: 0 34px 70px -30px oklch(0.1 0.04 268 / 0.75), 0 0 0 1px oklch(1 0 0 / 0.04) inset; }
.hw__bar { display: flex; align-items: center; gap: 12px; height: 2.3em; padding-inline: 14px; background: oklch(0.15 0.028 268); border-bottom: 1px solid oklch(0.3 0.045 268); }
.hw__dots { display: flex; gap: 6px; }
.hw__dots i { width: 0.6em; height: 0.6em; border-radius: 50%; background: oklch(0.38 0.04 268); }
.hw__title { font: 600 1em/1 var(--sans); }
.hw__tag { margin-inline-start: auto; font: 500 0.95em/1 var(--sans); color: var(--w-dim); padding: 0.3em 0.7em; border: 1px solid oklch(0.4 0.05 268); border-radius: 99px; }
.hw__body { display: grid; grid-template-columns: 3em minmax(0, 1fr); }
.hw__rail { display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding-block: 0.7em; background: oklch(0.16 0.028 268); border-inline-end: 1px solid oklch(0.3 0.045 268); }
.hw__rail span { display: grid; place-items: center; width: 2em; height: 2em; border-radius: 0.6em; color: var(--w-dim); }
.hw__rail span.is-on { background: oklch(0.3 0.07 270); color: var(--w-fg); }
.hw__rail svg { width: 1.15em; height: 1.15em; }

.hw__graph { position: relative; aspect-ratio: 1.9 / 1; background: radial-gradient(ellipse 22% 38% at 88% 45%, oklch(0.32 0.1 272 / 0.55), transparent 70%), radial-gradient(circle, oklch(1 0 0 / 0.07) 1px, transparent 1.4px) 0 0 / 22px 22px; transition: opacity 0.45s var(--ease); }
.hw__graph[data-state="out"] { opacity: 0; }
.hw__graph[data-state="out"] * { transition: none !important; }
.hw__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
:root[dir="rtl"] .hw__svg { transform: scaleX(-1); }
.hw__ln { stroke: var(--w-acc); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--f, 0)); --o: 0.8; opacity: clamp(0, calc(var(--f, 0) * 30), var(--o)); }
.hw__g--ib .hw__ln { stroke-width: 1; stroke-dasharray: 0.02 0.03; stroke-dashoffset: 0; --o: 0.55; }
.hw__g--ib { transition: opacity 0.5s var(--ease); }
.hw__g--out[data-state="on"] ~ .hw__g--ib, .hw__graph:has(.hw__g--out[data-state="on"]) .hw__g--ib { opacity: 0; }
.hw__g--in .hw__ln { stroke: var(--w-ok); --o: 0.8; }
.hw__loop { stroke: var(--w-bad); stroke-width: 2.2; --o: 1; }
.hw__rev { stroke: var(--w-acc); stroke-width: 2; --o: 1; }
.hw__svg path[marker-end] { color: inherit; }

.hw__n { position: absolute; opacity: 0; transform: scale(0.9); transform-origin: 0 50%; transition: opacity 0.45s var(--ease), transform 0.5s var(--ease), translate 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease), background-color 0.5s var(--ease); }
:root[dir="rtl"] .hw__n { transform-origin: 100% 50%; }
.hw__n[data-state="on"], .hw__n[data-state="run"], .hw__n[data-state="ok"], .hw__n[data-state="v2"] { opacity: 1; transform: none; }
.hw__n[data-state="ok"], .hw__n[data-state="v2"] { opacity: 0.84; }
.hw__doc[data-state="ghost"] { opacity: 0.4; transform: none; border-style: dashed; }

/* command */
.hw__cmd { inset-inline-start: 1.5%; width: 27%; top: 45.2%; translate: 0 -50%; display: grid; gap: 0.15em; justify-items: start; padding: 0.7em 0.7em 0.65em; background: oklch(0.29 0.08 272); border: 1.5px solid var(--w-acc); border-radius: 0.9em; box-shadow: 0 0 0 4px oklch(0.8 0.12 272 / 0.14), 0 0 34px -4px oklch(0.8 0.12 272 / 0.55); }
.hw__cmd[data-state="on"] { opacity: 1; }
.hw__pre { direction: ltr; background: none; border: 0; padding: 0; font: 500 1em/1.2 var(--mono); color: var(--w-dim); white-space: nowrap; }
.hw__verbs { display: grid; }
.hw__v { grid-area: 1 / 1; font: 700 1.65em/1.15 var(--mono); color: var(--w-fg); opacity: 0; transform: translateY(0.35em); transition: opacity 0.4s var(--ease), transform 0.45s var(--ease); }
.hw__v[data-state="on"] { opacity: 1; transform: none; }
.hw__ready { position: static; display: inline-flex; align-items: center; gap: 0.35em; margin-top: 0.3em; padding: 0.15em 0.65em 0.15em 0.5em; border-radius: 99px; border: 1.5px solid var(--w-ok); color: var(--w-ok); font: 650 1em/1.25 var(--sans); opacity: 0; transform: scale(0.7); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.hw__ready::before { content: "\2713"; font-weight: 800; }
.hw__ready[data-state="on"] { opacity: 1; transform: none; }

/* init badges, in the agent slots */
.hw__badges { display: contents; }
.hw__b { inset-inline-start: 38%; width: 28%; top: calc(4.5% + var(--r) * 17.6%); height: 11%; display: flex; align-items: center; gap: 0.5em; padding-inline: 0.3em 0.6em; background: var(--w-card); border: 1.5px solid var(--w-line); border-radius: 99px; translate: -45% 0; transform: scale(0.5); font: 600 1em/1.1 var(--sans); white-space: nowrap; }
:root[dir="rtl"] .hw__b { translate: 45% 0; }
.hw__b[data-state="on"], .hw__b[data-state="ok"], :root[dir="rtl"] .hw__b[data-state="on"], :root[dir="rtl"] .hw__b[data-state="ok"] { translate: 0 0; }
.hw__b[data-state="on"] { border-color: var(--w-acc); box-shadow: 0 0 22px -4px oklch(0.8 0.12 272 / 0.6); }
.hw__b[data-state="ok"] { opacity: 1; border-color: color-mix(in oklch, var(--w-ok) 60%, var(--w-line)); }
.hw__b[data-state="off"] { opacity: 0; translate: -45% 0; transform: scale(0.45); }
:root[dir="rtl"] .hw__b[data-state="off"] { translate: 45% 0; }
.hw__bc { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid var(--w-acc); font-style: normal; color: oklch(0.2 0.03 268); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.hw__b[data-state="ok"] .hw__bc { background: var(--w-ok); border-color: var(--w-ok); }
.hw__b[data-state="ok"] .hw__bc::after { content: "\2713"; font-weight: 800; font-size: 0.95em; line-height: 1; }

/* agents */
.hw__a { inset-inline-start: 38%; width: 28%; top: calc(2.5% + var(--r) * 17.6%); height: 15%; display: grid; align-content: center; gap: 0.3em; padding: 0.35em 0.7em; background: var(--w-card); border: 1.5px solid var(--w-line); border-radius: 0.8em; }
.hw__a[data-state="run"], .hw__doc[data-state="run"] { border-color: var(--w-acc); box-shadow: 0 0 0 3px oklch(0.8 0.12 272 / 0.2), 0 0 30px -2px oklch(0.8 0.12 272 / 0.6); }
.hw__a[data-state="ok"] { border-color: color-mix(in oklch, var(--w-ok) 55%, var(--w-line)); }
.hw__ah { display: flex; align-items: center; gap: 0.45em; min-width: 0; }
.hw__ah svg { flex: none; width: 1.3em; height: 1.3em; color: var(--w-acc); }
.hw__ah b { font: 650 1em/1.1 var(--sans); white-space: nowrap; }
.hw__ck { margin-inline-start: auto; font-style: normal; font-weight: 800; color: var(--w-ok); opacity: 0; transform: scale(0.4); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.hw__a[data-state="ok"] .hw__ck, .hw__doc[data-state="ok"] .hw__ck, .hw__doc[data-state="v2"] .hw__ck { opacity: 1; transform: none; }
.hw__av { min-height: 1.3em; display: flex; align-items: center; }
.hw__cnt { font: 500 1em/1.2 var(--sans); color: var(--w-dim); white-space: nowrap; }
.hw__cnt b { font: 700 1.2em/1 var(--mono); color: var(--w-fg); font-variant-numeric: tabular-nums; }
.hw__t3 { gap: 0.5em; }
.hw__t3 i { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; border: 1.5px solid var(--w-line); font: 700 0.95em/1 var(--sans); font-style: normal; color: var(--w-fg); transition: opacity 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), transform 0.4s var(--ease); }
.hw__t3 i[data-state="dim"] { opacity: 0.4; }
.hw__t3 i[data-state="pick"] { background: var(--w-acc); border-color: var(--w-acc); color: oklch(0.2 0.04 268); transform: scale(1.12); }
.hw__v5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.45em; align-items: center; width: 100%; }
.hw__bars i { display: block; height: 0.42em; border-radius: 99px; background: oklch(0.38 0.05 268); position: relative; overflow: hidden; }
.hw__bars i::after { content: ""; position: absolute; inset: 0; background: var(--w-acc); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
:root[dir="rtl"] .hw__bars i::after { transform-origin: 100% 50%; }
.hw__bars i[data-state="redo"]::after { background: var(--w-bad); }
.hw__dd i { justify-self: center; width: 0.8em; height: 0.8em; border-radius: 50%; border: 2px solid var(--w-line); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.hw__dd i[data-state="ok"] { background: var(--w-acc); border-color: var(--w-acc); }
.hw__dots5 b { justify-self: center; display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; border: 2px solid var(--w-line); font: 800 0.8em/1 var(--sans); color: oklch(0.2 0.03 268); transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.hw__dots5 b[data-state="run"] { border-color: var(--w-acc); }
.hw__dots5 b[data-state="ok"] { background: var(--w-ok); border-color: var(--w-ok); }
.hw__dots5 b[data-state="ok"]::after { content: "\2713"; }
.hw__dots5 b[data-state="bad"] { background: var(--w-bad); border-color: var(--w-bad); }
.hw__dots5 b[data-state="bad"]::after { content: "\2717"; }

/* the Word file */
.hw__doc { inset-inline-start: 77.5%; width: 21.5%; top: 20%; height: 50%; display: grid; justify-items: center; align-content: center; gap: 0.5em; padding: 0.4em 0; background: var(--w-card); border: 1.5px solid var(--w-line); border-radius: 0.9em; }
.hw__doc[data-state="run"] { box-shadow: 0 0 0 4px oklch(0.82 0.14 165 / 0.2), 0 0 44px 0 oklch(0.82 0.14 165 / 0.55); border-color: var(--w-ok); }
.hw__doc[data-state="ok"], .hw__doc[data-state="v2"] { border-color: var(--w-ok); box-shadow: 0 0 30px -6px oklch(0.82 0.14 165 / 0.45); }
.hw__page { width: 3.4em; height: 4.3em; padding: 0.5em 0.45em; background: oklch(0.97 0.01 90); border-radius: 0.3em; display: grid; gap: 0.2em; align-content: start; }
.hw__page i { display: block; height: 2px; border-radius: 2px; background: oklch(0.6 0.03 268); }
.hw__page .hw__fn { margin-top: 0.25em; width: 70%; background: oklch(0.55 0.12 165); }
.hw__page .hw__fn.s { margin-top: 0; width: 45%; }
.hw__dn { display: grid; font: 600 1em/1.2 var(--mono); letter-spacing: -0.02em; white-space: nowrap; }
.hw__dn span { grid-area: 1 / 1; text-align: center; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.hw__d2 { opacity: 0; transform: translateY(0.3em); color: var(--w-ok); }
.hw__doc[data-state="v2"] .hw__d1 { opacity: 0; transform: translateY(-0.3em); }
.hw__doc[data-state="v2"] .hw__d2 { opacity: 1; transform: none; }
.hw__doc > .hw__ck { position: absolute; top: 0.3em; inset-inline-start: 0.5em; margin: 0; }
.hw__bub { position: absolute; display: grid; align-content: center; gap: 0.2em; width: 2.4em; height: 1.9em; padding: 0 0.45em; border-radius: 0.5em; background: oklch(0.93 0.09 95); opacity: 0; transform: scale(0.5); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); box-shadow: 0 4px 14px -4px oklch(0 0 0 / 0.6); }
.hw__bub::after { content: ""; position: absolute; bottom: -0.3em; inset-inline-start: 0.4em; border: 0.3em solid transparent; border-top-color: oklch(0.93 0.09 95); border-bottom: 0; }
.hw__bub i { display: block; height: 2px; border-radius: 2px; background: oklch(0.4 0.06 80); }
.hw__bub i + i { width: 60%; }
.hw__bub[data-state="on"] { opacity: 1; transform: none; }
.hw__bub1 { top: -1.1em; inset-inline-end: 0.7em; }
.hw__bub2 { top: -1.1em; inset-inline-end: 3.8em; }
.hw__rvp { inset-inline-start: 56%; top: 90.5%; translate: 0 0; padding: 0.15em 0.8em; border-radius: 99px; background: oklch(0.3 0.08 272); border: 1.5px solid var(--w-acc); color: var(--w-fg); font: 650 1em/1.3 var(--sans); white-space: nowrap; box-shadow: 0 0 26px -4px oklch(0.8 0.12 272 / 0.6); }
.hw__rvp[data-state="ok"] { box-shadow: none; }

/* controls */
.hw__ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 14px; }
.hw__phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 3fr 8fr 4fr; gap: 6px; }
.hw__phase { position: relative; display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 2px 11px; border: 0; background: none; color: var(--ink-2); font: 500 0.95rem/1.2 var(--sans); cursor: pointer; text-align: start; }
.hw__pn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule); font: 500 0.78rem/1 var(--serif); background: var(--paper); }
.hw__phase i { position: absolute; inset-inline: 0; bottom: 0; height: 4px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.hw__phase i::after { content: ""; position: absolute; inset: 0; background: var(--indigo); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
:root[dir="rtl"] .hw__phase i::after { transform-origin: 100% 50%; }
.hw__phase:hover, .hw__phase.is-on { color: var(--ink); }
.hw__phase.is-on .hw__pn, .hw__phase.is-done .hw__pn { background: var(--indigo); border-color: var(--indigo); color: var(--on-indigo); }
.hw.is-static .hw__ctl { display: none; }
.hw.is-static .hw__n, .hw.is-static .hw__n *, .hw.is-static .hw__ln { transition: none !important; }
.hw:not(.is-live) .hw__n:not(.hw__b) { opacity: 1; transform: none; }
.hw:not(.is-live) .hw__ln:not(.hw__g--ib *) { stroke-dashoffset: 0; }
/* no-JS / not-yet-live fallback: show the finished write-state graph */
.hw:not(.is-live) .hw__ln:not(.hw__g--ib *) { opacity: var(--o); }
.hw:not(.is-live) .hw__v:last-child { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hw__ctl { display: none; } .hw__n, .hw__n *, .hw__ln, .hw__graph { transition: none !important; } }

@media (max-width: 899px) {
  .hw { max-width: 560px; }
  .hw__win { font-size: 15px; }
  .hw__body { grid-template-columns: 2.6em minmax(0, 1fr); }
  .hw__graph { aspect-ratio: auto; display: flex; flex-direction: column; gap: 0.8em; padding: 0.9em 0.9em 1.1em; }
  .hw__graph::before { content: ""; position: absolute; top: 1em; bottom: 1em; inset-inline-start: 50%; width: 2px; margin-inline-start: -1px; background: linear-gradient(var(--w-acc), var(--w-ok)); transform: scaleY(var(--f, 0)); transform-origin: 50% 0; opacity: 0.75; }
  .hw__svg { display: none; }
  .hw__n { position: relative; inset: auto; width: auto; height: auto; top: auto; translate: none; }
  .hw__cmd { align-self: stretch; justify-items: center; text-align: center; width: auto; top: auto; translate: none; grid-template-columns: auto; }
  .hw__badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; height: 0; margin-top: -0.2em; align-content: flex-start; position: relative; z-index: 2; }
  .hw__b { width: auto; height: auto; padding-block: 0.25em; translate: none !important; }
  .hw__a { min-height: 4.2em; align-content: center; }
  .hw__doc { width: auto; height: auto; grid-template-columns: auto auto; gap: 0.8em; justify-content: center; align-items: center; align-content: center; padding: 0.9em 0.7em; }
  .hw__n[data-state="ok"], .hw__n[data-state="v2"] { opacity: 1; }
  .hw__doc[data-state="ghost"] { opacity: 1; }
  .hw__doc[data-state="ghost"] > :is(.hw__page, .hw__dn) { opacity: 0.4; }
  .hw__bub1 { top: -1.1em; inset-inline-end: 1em; }
  .hw__bub2 { top: -1.1em; inset-inline-end: 4.2em; }
  .hw__rvp { align-self: center; inset-inline-start: auto; top: auto; }
  .hw__tag { font-size: 13px; }
  .hw__ctl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .hw__phase { font-size: 0.9rem; gap: 5px; }
  .hw__pn { display: none; }
}
/* ---------- round 6: mobile (how) ---------- */
/* No visible pause button: #flowviz and #how pause on hover and keyboard focus; a click, tap, Space or Enter pins the pause (site.js pausable). A small pause mark shows on the tag while pinned. */
.hw__ctl { grid-template-columns: minmax(0, 1fr); }
.hw__win, #flowviz .flow { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hw__win:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.flow__stage:focus-visible { outline: 2px solid oklch(0.84 0.09 270); outline-offset: 2px; border-radius: 12px; }
.hero__viz .flow { padding-bottom: 14px; }
.hw__win[aria-pressed="true"] .hw__tag::before, #flowviz .flow:has(.flow__stage[aria-pressed="true"]) .flow__tag::before { content: ""; display: inline-block; width: 0.32em; height: 0.75em; margin-inline-end: 0.45em; border-inline: 0.12em solid currentColor; vertical-align: -0.05em; }
/* Below 900px the graph is a compact two-column grid: command on top, then Evidence | Thesis, Architect | Writers, Auditors | article.docx, with short connectors between rows. */
@media (max-width: 899px) {
  .hero__viz .flow { padding-bottom: 10px; }
  .hw__graph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto repeat(3, minmax(4.3em, auto)) auto; gap: 1.05em 0.6em; padding: 0.8em 0.8em 0.7em; }
  .hw__graph::before { content: none; }
  .hw__cmd { grid-area: 1 / 1 / 2 / -1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25em 0.6em; padding: 0.45em 0.8em; }
  .hw__pre { font-size: 0.95em; }
  .hw__v { font-size: 1.15em; transform: translateY(0.25em); }
  .hw__ready { margin-top: 0; padding-block: 0.1em; }
  .hw__badges { grid-area: 2 / 1 / 4 / -1; align-self: center; height: auto; margin: 0; gap: 0.55em 0.5em; }
  .hw__a[style*="--r:0"] { grid-area: 2 / 1; }
  .hw__a[style*="--r:1"] { grid-area: 2 / 2; }
  .hw__a[style*="--r:2"] { grid-area: 3 / 1; }
  .hw__a[style*="--r:3"] { grid-area: 3 / 2; }
  .hw__a[style*="--r:4"] { grid-area: 4 / 1; }
  .hw__doc { grid-area: 4 / 2; }
  .hw__rvp { grid-area: 5 / 1 / 6 / -1; justify-self: center; }
  .hw__a { min-height: 0; gap: 0.45em; padding: 0.55em 0.65em; }
  .hw__v5 { gap: 0.3em; }
  .hw__a::before, .hw__doc::before { content: ""; position: absolute; bottom: 100%; inset-inline-start: 50%; width: 2px; height: calc(1.05em + 1.5px); margin-inline-start: -1px; background: var(--w-line); transition: background-color 0.4s var(--ease); }
  .hw__a[data-state="run"]::before, .hw__doc[data-state="run"]::before { background: var(--w-acc); }
  .hw__a[data-state="ok"]::before, .hw__doc:is([data-state="ok"], [data-state="v2"])::before { background: var(--w-ok); }
  .hw__doc { grid-template-columns: auto; justify-items: center; gap: 0.35em; padding: 0.55em 0.3em; }
  .hw__page { width: 2.3em; height: 2.9em; padding: 0.4em 0.35em; gap: 0.16em; }
  .hw__dn { font-size: 0.94em; letter-spacing: -0.03em; }
  .hw__bub1 { top: -0.9em; inset-inline-end: 0.5em; }
  .hw__bub2 { top: -0.9em; inset-inline-end: 3.3em; }
}
@media (max-width: 599px) {
  .hw__body { grid-template-columns: minmax(0, 1fr); }
  .hw__rail { display: none; }
  .hw__bar { height: 2.1em; padding-inline: 12px; }
  .hw__win { border-radius: 14px; }
  .hw__tag { font-size: 14px; padding-block: 0.2em; }
}
.grp { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5em; }
.grp li { display: grid; gap: 0.15em; padding: 0.55em 0.8em; border: 1px solid var(--rule); border-inline-start: 3px solid var(--indigo); border-radius: 6px; background: var(--paper-2); font: 500 0.94em/1.3 var(--sans); }
.grp em { font: 400 0.88em/1.3 var(--sans); font-style: normal; color: var(--ink-2); }
@keyframes blink { 50% { visibility: hidden; } }
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- round 3: motion ---------- */
/* hero flow visualization: a real /write run as drawn nodes and one travelling packet; built for the dark hero in both themes */
#flowviz .flow { --fl-bg: oklch(0.2 0.05 268); --fl-ink: oklch(0.92 0.015 262); --fl-line: oklch(0.52 0.05 268); --fl-lit: oklch(0.84 0.09 270); --fl-ok: oklch(0.8 0.12 165); --fl-no: oklch(0.76 0.15 35);
  position: relative; display: flex; flex-direction: column; height: 100%; padding: 14px 14px 8px; border-radius: 20px; background: var(--fl-bg); border: 1px solid oklch(0.36 0.06 268); box-shadow: 0 18px 50px oklch(0.12 0.04 268 / 0.5); color: var(--fl-ink); }
.flow__stage { position: relative; flex: 1; min-height: 0; }
.flow__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.flow__tag { position: absolute; z-index: 2; top: 12px; inset-inline-start: 14px; padding: 4px 9px; border: 1px solid oklch(0.4 0.06 268); border-radius: 99px; font: 500 0.7rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: oklch(0.8 0.03 262); }
:root[lang="he"] .flow__tag { letter-spacing: 0; text-transform: none; font-size: 0.78rem; }
.flow__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; list-style: none; }
#flowviz .flow svg text { font: 500 var(--fs, 14px) var(--sans); fill: var(--fl-ink); text-anchor: middle; }
#flowviz .flow svg .fn__s { font-size: calc(var(--fs, 14px) * 0.82); font-weight: 400; fill: oklch(0.8 0.03 262); }
.fl-base { fill: none; stroke: var(--fl-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; }
.fl-ret { stroke-dasharray: 2 7; }
.fl-trail { fill: none; stroke: var(--fl-lit); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.fl-voice { fill: none; stroke: var(--fl-line); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: 0.55; }
.fl-voice.is-lit { stroke: var(--fl-lit); opacity: 0.9; }
.fn { opacity: 0.62; transition: opacity 0.5s var(--ease); }
.fn.is-done { opacity: 0.88; }
.fn.is-cur { opacity: 1; }
.fn__c { fill: oklch(0.25 0.05 268); stroke: var(--fl-line); stroke-width: 1.5; }
.fn__hl, .fn__bad, .fn__ok { fill: none; stroke-width: 2.4; opacity: 0; transition: opacity 0.4s var(--ease); }
.fn__hl { stroke: var(--fl-lit); }
.fn__bad { stroke: var(--fl-no); }
.fn__ok { stroke: var(--fl-ok); }
.fn.is-cur .fn__hl { opacity: 1; }
.fn.is-bad .fn__bad, .fn.is-ok .fn__ok { opacity: 1; }
.fn.is-bad .fn__hl, .fn.is-ok .fn__hl { opacity: 0; }
.fn__i { fill: none; stroke: var(--fl-ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.fn--voice .fn__c { stroke-dasharray: 3 4; }
.fn__b0, .fn__b1 { opacity: 0; transition: opacity 0.3s var(--ease); }
.fn.is-bad .fn__b1, .fn.is-ok .fn__b0 { opacity: 1; }
.fn__b0 circle { fill: var(--fl-ok); }
.fn__b1 circle { fill: var(--fl-no); }
.fn__b0 path, .fn__b1 path { fill: none; stroke: oklch(0.18 0.04 268); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pk__dot { fill: oklch(0.93 0.06 270); }
.pk__paper { fill: oklch(0.965 0.01 95); }
.pk__ln { fill: oklch(0.72 0.03 262); }
.pk__stem { stroke: var(--fl-lit); stroke-width: 1; opacity: 0.5; }
.pk__fn circle { fill: oklch(0.7 0.07 270); }
.pk__fn path { fill: none; stroke: oklch(0.18 0.04 268); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.pk--bad .pk__fn circle { fill: var(--fl-no); }
.pk--ok .pk__fn circle { fill: var(--fl-ok); }
.pk--bad .pk__x, .pk--ok .pk__v { opacity: 1; }
.bb__shape { fill: oklch(0.9 0.04 270); }
.bb__dot { fill: oklch(0.3 0.06 268); }
.vd { fill: var(--fl-lit); }
@media (max-width: 899px) {
  #flowviz .flow { padding: 10px 8px 6px; }
  .flow__stage { flex: none; aspect-ratio: 360 / 352; }
  .flow__tag { top: 8px; inset-inline-start: 10px; }
}
@media (prefers-reduced-motion: reduce) { .fn, .fn__hl, .fn__bad, .fn__ok, .fn__b0, .fn__b1 { transition: none; } }
/* ---------- round 2: motion ---------- */

/* ---------- gate ---------- */
.gate__head { display: grid; gap: 20px; margin-bottom: 56px; }
.flow { position: relative; }
.flow__row { display: grid; grid-template-columns: 1fr 48px 1fr 48px 1fr 48px 1.2fr; align-items: center; }
.node { display: grid; gap: 4px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--rule); background: var(--paper); }
.node__k { display: block; font: 500 0.74rem/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }
:root[lang="he"] .node__k { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.node__v { display: block; font: 500 1.05rem/1.35 var(--sans); }
.node__v.art { font-family: var(--serif); font-size: 1.1rem; }
.outs { display: grid; gap: 12px; }
.node--ok, .node--no { grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px 16px; }
.node--ok { background: var(--verified-soft); border-color: var(--verified); color: var(--verified-ink); }
.node--no { background: var(--rejected-soft); border-color: var(--rejected); color: var(--rejected-ink); }
.node--ok .node__k, .node--no .node__k { color: inherit; }
.arrow { width: 48px; height: 12px; fill: none; stroke: var(--indigo); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:root[dir="rtl"] .arrow { transform: scaleX(-1); }
.js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.loop { height: 56px; margin-top: 6px; }
.loop svg { width: 100%; height: 100%; overflow: visible; }
.loop { position: relative; }
.loop::after { content: ""; position: absolute; inset-inline-start: calc(8% - 5px); top: -2px; border: 5px solid transparent; border-bottom: 8px solid var(--rejected); border-top: 0; }
.loop .draw { stroke: var(--rejected); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
:root[dir="rtl"] .loop svg { transform: scaleX(-1); }
.loop__t { margin-top: 4px; text-align: center; max-inline-size: 70ch; margin-inline: auto; color: var(--ink-2); }
.loop__a, .loop__b { display: block; }
.loop__b { margin-top: 6px; }
.flow.in .draw { animation: draw 0.9s var(--ease) forwards; }
.flow.in .arrow:nth-of-type(2) .draw { animation-delay: 0.2s; }
.flow.in .arrow:nth-of-type(3) .draw { animation-delay: 0.4s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.js .flow:not(.in) .loop::after { opacity: 0; }
.js .flow.in .loop::after { opacity: 1; transition: opacity 0.2s var(--ease) 1.8s; }
.js .loop .draw { stroke-dasharray: 4000; stroke-dashoffset: 4000; }
.js .flow.in .loop .draw { animation: draw4k 1.2s var(--ease) 0.7s forwards; }
@keyframes draw4k { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; animation: none !important; } }
@media (max-width: 899px) {
  .flow__row { grid-template-columns: 1fr; gap: 0; justify-items: stretch; }
  .arrow { transform: rotate(90deg); margin: 8px auto; }
  :root[dir="rtl"] .arrow { transform: rotate(90deg); }
  .loop { display: none; }
  .loop__t { margin-top: 24px; text-align: start; }
}

/* ---------- film ---------- */
.film__fig { margin: 40px 0 0; max-width: 960px; }
.film__frame { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper-2); box-shadow: var(--shadow); }
.film__frame video { width: 100%; height: 100%; object-fit: cover; background: var(--paper-2); }
.film__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.film--fail .film__frame video { display: none; }
.film--fail .film__poster { display: block; }
.film__fig figcaption { margin-top: 10px; font-size: 0.85rem; color: var(--ink-2); }
.transcript { margin-top: 24px; max-width: 960px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
.transcript summary { padding: 14px 18px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; }
.transcript summary::after, .terminal summary::after, .faq__list summary::after { content: "+"; font: 400 1.4rem/1 var(--serif); color: var(--indigo); }
details[open] > summary::after { content: "\2212"; }
.transcript ol { margin: 0; padding: 0 18px 18px 44px; display: grid; gap: 8px; color: var(--ink-2); max-inline-size: 68ch; }
:root[dir="rtl"] .transcript ol { padding: 0 44px 18px 18px; }

/* ---------- features ---------- */
.features h2 { margin-bottom: clamp(40px, 6vw, 72px); }
.feat { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: clamp(64px, 9vw, 120px); }
.feat--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.feat__text { display: grid; gap: 16px; align-content: center; }
.feat__text h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; }
.feat__text p { color: var(--ink-2); max-inline-size: 56ch; }
.plate { margin: 0; }
.plate__mat { background: oklch(0.975 0.008 95); border: 1px solid var(--rule); border-radius: 4px; padding: clamp(8px, 1.5vw, 16px); box-shadow: var(--shadow); }
.plate__mat img { width: 100%; height: auto; filter: var(--plate-filter); aspect-ratio: 1200 / 896; object-fit: cover; }
.plate figcaption { margin-top: 12px; font: italic 400 0.92rem/1.4 var(--serif); color: var(--ink-2); }
:root[lang="he"] .plate figcaption { font-family: "Frank Ruhl Libre", var(--serif); font-style: normal; font-size: 1rem; }
.plate figcaption b { font-style: normal; font-weight: 600; letter-spacing: 0.02em; margin-inline-end: 4px; color: var(--ink); }
.plate--sheet .sheet { padding: 28px 30px 24px; }
.sheet--he { text-align: start; }
.submit { border-top: 1px solid var(--rule); padding-top: 48px; margin-bottom: clamp(56px, 8vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; }
.submit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.submit h4 { font: 500 1rem/1.3 var(--sans); margin-bottom: 8px; }
.submit h4 code { white-space: normal; word-break: break-all; }
.submit p { color: var(--ink-2); }
.cmds h3 { margin-bottom: 20px; }
.cmds dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.cmds dl > div { display: grid; grid-template-columns: minmax(0, 16rem) 1fr; gap: 14px; padding-block: 14px; border-top: 1px solid var(--rule); align-items: baseline; }
.cmds dt code { font-size: 0.8rem; white-space: normal; word-break: break-all; }
.cmds dd { margin: 0; color: var(--ink-2); font-size: 0.95rem; }
@media (max-width: 899px) {
  .feat, .feat--flip { grid-template-columns: 1fr; gap: 28px; }
  .feat--flip .feat__text { order: -1; }
  .feat .plate { order: 2; }
  .submit { grid-template-columns: 1fr; }
  .submit__cols { grid-template-columns: 1fr; }
  .cmds dl { grid-template-columns: 1fr; }
  .cmds dl > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- install ---------- */
.terminal { margin-top: 48px; max-width: 760px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.terminal summary { padding: 14px 18px; font-weight: 500; display: flex; justify-content: space-between; }
.terminal__in { padding: 0 18px 18px; display: grid; gap: 12px; color: var(--ink-2); }
.terminal__in ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.terminal__in b { color: var(--ink); margin-inline-end: 8px; }
.reqs { margin-top: 64px; max-width: 960px; }
.reqs h3 { margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
th, td { text-align: start; padding: 14px 18px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); background: var(--paper-2); }
:root[lang="he"] thead th { letter-spacing: 0; text-transform: none; font-size: 0.88rem; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody th { font-weight: 600; white-space: nowrap; }
td { color: var(--ink-2); }

.mono-ph { text-align: center; color: var(--indigo); }
@media (max-width: 560px) { .who > div, .files li { grid-template-columns: 1fr; gap: 4px; } .istep { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; } .istep__n { font-size: 1.9rem; } }

/* ---------- faq ---------- */
.faq__list { margin-top: 40px; border-bottom: 1px solid var(--rule); }
.faq__list details { border-top: 1px solid var(--rule); }
.faq__list summary { display: flex; justify-content: space-between; gap: 24px; padding: 20px 0; font: 500 1.12rem/1.35 var(--sans); }
.faq__list details p { padding-bottom: 22px; color: var(--ink-2); max-inline-size: 64ch; }
.faq__more { margin-top: 28px; }

/* ---------- final + footer ---------- */
.final { padding-block: clamp(96px, 13vw, 168px); }
.final__h { font-size: clamp(2.3rem, 6.4vw, 5.4rem); line-height: 1.04; letter-spacing: -0.02em; max-inline-size: 14ch; font-weight: 500; }
.final__h span { display: block; }
:root[lang="he"] .final__h { letter-spacing: 0; font-weight: 700; line-height: 1.12; }
.final__cta { margin-top: 48px; max-width: 560px; display: grid; gap: 24px; }
.final__links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.final__links a { font-weight: 500; }
.foot { padding-block: 32px; font-size: 0.9rem; color: var(--ink-2); background: var(--paper); position: relative; z-index: 1; }
.foot__in { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.foot__links { display: flex; gap: 24px; }
.foot__ver { font-family: var(--mono); font-size: 0.8rem; margin-inline-start: 6px; }

/* ---------- reduced motion and no-JS safety ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .demo__fn, .demo__fnline, .stamp { opacity: 1 !important; transform: none !important; }
  .caret { animation: none; }
}

/* ---------- round 2: content ---------- */
.eyebrow { display: block; font: 500 0.82rem/1.2 var(--mono); color: var(--indigo); margin-bottom: 14px; text-align: start; unicode-bidi: isolate; }
.tag { display: inline-block; font: 500 0.72rem/1 var(--sans); padding: 0.4em 0.8em; border: 1px solid var(--rule); border-radius: 99px; color: var(--ink-2); background: var(--paper); white-space: nowrap; }
.badge { display: inline-block; font: 600 0.74rem/1 var(--sans); padding: 0.45em 0.9em; border-radius: 99px; background: var(--verified-soft); color: var(--verified-ink); border: 1px solid var(--verified); white-space: nowrap; }
.needs { margin-top: 28px; max-inline-size: 78ch; color: var(--ink-2); font-size: 0.95rem; }
.sechead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.sechead--one { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sechead__text { display: grid; gap: 20px; align-content: center; justify-items: start; }
.sechead__text .eyebrow { margin: 0; }
.trust { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border: 1px solid var(--verified); background: var(--verified-soft); color: var(--verified-ink); border-radius: 12px; font-weight: 500; font-size: 1.05rem; max-inline-size: 54ch; }
.trust svg { flex-shrink: 0; }
.voice h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-inline-size: 16ch; }

/* voice steps: one sequence, horizontal on desktop */
.vsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); counter-reset: v; }
.vsteps li { position: relative; padding: 38px 18px 0 0; }
:root[dir="rtl"] .vsteps li { padding: 38px 0 0 18px; }
.vsteps li::before { content: ""; position: absolute; top: 13px; inset-inline: 0; height: 1px; background: var(--rule); }
.vsteps li:last-child::before { inset-inline-end: auto; width: 24px; }
.vsteps li::after { counter-increment: v; content: counter(v); position: absolute; top: 0; inset-inline-start: 0; width: 27px; height: 27px; border-radius: 50%; background: var(--indigo); color: var(--on-indigo); font: 500 0.85rem/27px var(--serif); text-align: center; }
.vsteps h3 { font-size: 1.12rem; line-height: 1.25; margin-bottom: 8px; }
.vsteps p { font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }

/* mockup cards */
.vp { margin-top: clamp(40px, 5vw, 64px); border: 1px solid var(--rule); border-radius: 16px; background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; }
.revise__vis .vp { margin-top: 20px; }
.vp__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.vp__t { font: 600 0.95rem/1.2 var(--sans); }
.vp__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.vp__col { padding: 24px 28px 28px; }
.vp__col + .vp__col { border-inline-start: 1px solid var(--rule); }
.vp__h { font: 500 0.78rem/1 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 16px; }
:root[lang="he"] .vp__h { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.vp__foot { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--rule); background: var(--paper); font: 500 0.9rem/1.4 var(--sans); color: var(--ink-2); }
.ex { padding: 18px 20px 18px; border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); }
.ex__src { font: 500 0.85rem/1.3 var(--sans); color: var(--ink-2); margin-bottom: 14px; }
.ex .sheet__notes { margin: 0; }
.ex__act { display: flex; gap: 10px; margin-top: 18px; }
.bm { display: inline-block; padding: 0.55em 1.1em; border-radius: 8px; font: 500 0.88rem/1 var(--sans); border: 1px solid var(--rule); background: var(--paper); color: var(--ink); white-space: nowrap; }
.bm--keep { background: var(--indigo); color: var(--on-indigo); border-color: var(--indigo); }
.moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.moves li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; font: 1.05rem/1.35 var(--serif); }
:root[lang="he"] .moves li { font-family: "Frank Ruhl Libre", var(--serif); font-size: 1.12rem; }
.edit { display: inline-flex; align-items: center; gap: 6px; font: 500 0.82rem/1 var(--sans); color: var(--indigo); flex-shrink: 0; }
#revise .grp { padding: 16px 22px; border-bottom: 1px solid var(--rule); display: grid; gap: 10px; }
.grp__h { font: 600 0.9rem/1.3 var(--sans); }
.grp__row { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 0.95rem; line-height: 1.4; }
.grp__act { display: inline-flex; gap: 8px; }
.grp__ok { display: inline-flex; align-items: center; gap: 8px; color: var(--verified-ink); font-weight: 500; }

/* revise */
.revise__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.revise__text { display: grid; gap: 22px; justify-items: start; }
.revise__text .eyebrow { margin: 0; }
.revise__text h2 { max-inline-size: 18ch; }
.rloop { list-style: none; margin: 8px 0 0; padding: 0; padding-inline-end: 44px; display: grid; gap: 16px; position: relative; counter-reset: rl; width: 100%; }
.rloop li { position: relative; display: grid; gap: 2px; padding-inline-start: 46px; min-height: 38px; }
.rloop li::before { counter-increment: rl; content: counter(rl); position: absolute; inset-inline-start: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--indigo); color: var(--indigo); background: var(--paper); font: 500 0.9rem/29px var(--serif); text-align: center; z-index: 1; }
.rloop li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 15.5px; top: 34px; bottom: -14px; width: 1px; background: var(--indigo); opacity: 0.5; }
.rloop b { font: 600 1.02rem/1.3 var(--sans); }
.rloop li span { color: var(--ink-2); font-size: 0.93rem; line-height: 1.45; }
.rloop::before { content: ""; position: absolute; inset-inline-end: 12px; top: 16px; bottom: 16px; width: 28px; border: 1.5px dashed var(--indigo); border-inline-start: 0; border-start-end-radius: 16px; border-end-end-radius: 16px; opacity: 0.7; }
.rloop::after { content: "↺"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); width: 24px; text-align: center; font-size: 1.3rem; color: var(--indigo); background: var(--paper); line-height: 1; padding-block: 4px; }
.revise__vis { display: grid; gap: 0; }
.plate__mat--wide img { aspect-ratio: 2 / 1; }

/* courses and lesson notes */
.courses h2 { max-inline-size: 22ch; }
.cgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: stretch; }
.ccard { border: 1px solid var(--rule); border-radius: 16px; background: var(--paper-2); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; align-content: start; min-width: 0; }
.ccard .eyebrow { margin: 0; }
.ccard h3 { font-size: 1.7rem; }
.ccard > p { color: var(--ink-2); }
.csteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: cs; }
.csteps > li { position: relative; padding-inline-start: 34px; color: var(--ink); font-size: 0.97rem; line-height: 1.5; }
.csteps > li::before { counter-increment: cs; content: counter(cs); position: absolute; inset-inline-start: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--indigo-soft); color: var(--indigo); font: 600 0.78rem/22px var(--sans); text-align: center; }
.csteps .cmd { margin-top: 8px; }
.digest { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); }
.digest p { color: var(--ink-2); font-size: 0.92rem; }
.cx-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cx { display: inline-block; font: 500 0.8rem/1 var(--sans); padding: 0.45em 0.8em; border-radius: 99px; background: var(--verified-soft); color: var(--verified-ink); border: 1px solid var(--verified); }
.trustl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--ink-2); font-size: 0.92rem; }
.trustl li { position: relative; padding-inline-start: 22px; }
.trustl li::before { content: ""; position: absolute; inset-inline-start: 2px; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--verified); }
.lpage { padding: 18px 22px 16px; border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); font-family: "Frank Ruhl Libre", var(--serif); }
.lpage__t { font-weight: 700; font-size: 1.12rem; margin-bottom: 12px; text-align: start; }
.lpage ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; }
.lpage li { font-size: 1.02rem; padding: 6px 0; border-top: 1px solid var(--rule); color: var(--ink); }

/* also in the box */
.features h2 { margin-bottom: clamp(32px, 4vw, 48px); }
.also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(48px, 6vw, 72px); align-items: start; }
.also__c { display: grid; gap: 14px; align-content: start; min-width: 0; }
.also__c h3 { font-size: 1.35rem; }
.also__c p { color: var(--ink-2); }
.also__c .sheet { padding: 16px 18px 14px; margin-top: 4px; }
.also__c .sheet__p { font-size: 1.1rem; }

/* install */
.inst2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.icard { border: 1px solid var(--rule); border-radius: 16px; background: var(--paper-2); padding: clamp(22px, 3vw, 32px); display: grid; gap: 16px; min-width: 0; }
.icard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.icard__top h3 { font-size: 1.7rem; }
.icard__p, .icard__n { color: var(--ink-2); font-size: 0.95rem; }
.reqs { max-width: none; }

/* faq: full container, two columns */
.faq__wrap { max-width: none; }
.faq__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 5vw, 72px); align-items: start; border-bottom: 0; }
.faq__col { border-bottom: 1px solid var(--rule); }
.faq__list details p { max-inline-size: 60ch; }

/* film: heading beside the video, same container edges */
.film .wrap { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7.5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.film__lede { margin-top: 20px; }
.film__fig { max-width: none; margin: 0; }
.final__cta { max-width: 640px; }
.final__note { color: var(--ink-2); font-size: 0.95rem; }

@media (max-width: 1099px) {
  .vsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .vsteps li:nth-child(3)::before { inset-inline-end: auto; width: 24px; }
}
@media (max-width: 899px) {
  .sechead, .revise__grid, .cgrid, .inst2, .isteps, .film .wrap, .faq__list { grid-template-columns: minmax(0, 1fr); }
  .faq__list { gap: 0; }
  .faq__col:first-child { border-bottom: 0; }
  .also { grid-template-columns: minmax(0, 1fr); }
  .vp__body { grid-template-columns: minmax(0, 1fr); }
  .vp__col + .vp__col { border-inline-start: 0; border-top: 1px solid var(--rule); }
  .vsteps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .vsteps li, :root[dir="rtl"] .vsteps li { padding: 0 0 26px 0; padding-inline-start: 46px; }
  .vsteps li::before, .vsteps li:last-child::before, .vsteps li:nth-child(3)::before { top: 30px; bottom: 2px; inset-inline-start: 13px; inset-inline-end: auto; width: 1px; height: auto; }
  .vsteps li:last-child::before { display: none; }
  .revise__text { order: 1; }
  .revise__vis { order: 2; }
}
@media (max-width: 560px) {
  .vp__bar, .vp__foot, .grp { padding-inline: 16px; }
  .vp__col { padding: 20px 16px 22px; }
  .lpage ul { grid-template-columns: 1fr; }
  .rloop { padding-inline-end: 36px; }
}

/* ---------- round 3: design ---------- */
/* Dark ink-indigo bands (hero, film, final CTA, the "before you submit" tile, the files card) and the top bar over the hero.
   They stay dark in BOTH themes; every token is re-declared so the normal components read correctly on them. */
.band, .over-hero .bar {
  --paper: oklch(0.22 0.06 268);
  --paper-2: oklch(0.27 0.06 268);
  --ink: oklch(0.96 0.008 260);
  --ink-2: oklch(0.82 0.02 262);
  --rule: oklch(0.38 0.05 268);
  --indigo: oklch(0.84 0.09 270);
  --indigo-soft: oklch(0.31 0.07 268);
  --verified: oklch(0.76 0.11 165);
  --verified-soft: oklch(0.29 0.05 165);
  --rejected: oklch(0.74 0.14 35);
  --rejected-soft: oklch(0.30 0.06 32);
  --on-indigo: oklch(0.2 0.05 268);
  --verified-ink: color-mix(in oklch, var(--verified) 70%, var(--ink));
  --rejected-ink: color-mix(in oklch, var(--rejected) 70%, var(--ink));
  --shadow: 0 1px 2px oklch(0 0 0 / 0.3), 0 24px 48px -24px oklch(0 0 0 / 0.6);
  --plate-filter: none;
  color-scheme: dark;
  background-color: var(--paper);
  color: var(--ink);
}
:root { --lift: 0 2px 4px oklch(0.24 0.05 268 / 0.08), 0 40px 80px -32px oklch(0.24 0.05 268 / 0.45); --r-band: clamp(28px, 4vw, 56px); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lift: 0 2px 4px oklch(0 0 0 / 0.4), 0 40px 80px -32px oklch(0 0 0 / 0.8); } }
:root[data-theme="dark"] { --lift: 0 2px 4px oklch(0 0 0 / 0.4), 0 40px 80px -32px oklch(0 0 0 / 0.8); }
.plate__mat--16x9 img { aspect-ratio: 1376 / 768; }
.plate__mat { box-shadow: var(--lift); }

/* top bar: transparent over the hero, solid paper afterwards */
.bar { margin-bottom: calc(var(--bar) * -1); transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease); }
.over-hero .bar { background-color: transparent; border-bottom-color: transparent; }
.over-hero .bar .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 880px) { .over-hero .bar .nav { background: oklch(0.22 0.06 268); } }

/* ---- hero ---- */
.hero { position: relative; isolation: isolate; min-height: max(88svh, 640px); display: flex; align-items: center; overflow: clip;
  padding-block: calc(var(--bar) + clamp(40px, 6vw, 80px)) clamp(64px, 8vw, 104px); border-radius: 0 0 var(--r-band) var(--r-band);
  background:
    radial-gradient(ellipse 52% 70% at 76% 48%, oklch(0.31 0.10 270) 0%, transparent 70%),
    radial-gradient(ellipse 45% 55% at 6% 0%, oklch(0.27 0.09 285) 0%, transparent 70%),
    oklch(0.2 0.06 268); }
.hero > .wrap { width: 100%; }
.hero__plate { position: absolute; z-index: -1; inset-block-start: 0; inset-inline-end: 0; width: min(92vw, 1320px); margin: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 85%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 30%, #000 85%, transparent 100%), linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-composite: intersect; }
.hero__plate img { width: 100%; height: auto; filter: invert(1) brightness(1.05); mix-blend-mode: screen; opacity: 0.2; }
:root[dir="rtl"] .hero__plate { transform: scaleX(-1); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
h1 { font-size: clamp(2.5rem, 4.9vw, 4.4rem); line-height: 1.05; letter-spacing: -0.015em; text-wrap: balance; margin-bottom: 24px; }
:root[lang="he"] h1 { letter-spacing: 0; line-height: 1.12; }
.hero .lede { margin-bottom: 36px; font-size: clamp(1.1rem, 1.6vw, 1.3rem); max-inline-size: 48ch; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 99px; font: 600 1rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid transparent; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: oklch(0.96 0.01 260); color: oklch(0.22 0.06 268); }
.btn--primary:hover { background: oklch(0.99 0.004 250); }
.btn--ghost { color: var(--ink); border-color: oklch(0.52 0.07 268); }
.btn--ghost:hover { border-color: var(--ink); }
.marks { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--ink-2); }
.hero__viz { justify-self: end; width: 100%; max-width: 620px; aspect-ratio: 5 / 4; position: relative; }
@media (max-width: 899px) {
  .hero { min-height: 0; align-items: flex-start; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__viz { justify-self: stretch; max-width: none; aspect-ratio: auto; min-height: 280px; }
  .hero__plate { width: 150%; inset-inline-end: -20%; }
}

/* ---- why: one wide versus card ---- */
.why { padding-block: clamp(80px, 10vw, 136px); }
.versus { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(36px, 5vw, 64px); border-radius: 32px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--lift); }
.versus__side { padding: clamp(28px, 4vw, 56px); display: grid; gap: 18px; align-content: start; }
.versus__side--no { background: var(--paper-2); }
.versus__side--yes { background: var(--verified-soft); }
.versus__g { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; }
.versus__g svg { width: 36px; height: 36px; }
.versus__side--no .versus__g { background: var(--rejected-soft); color: var(--rejected-ink); box-shadow: inset 0 0 0 1.5px var(--rejected); }
.versus__side--yes .versus__g { background: var(--verified); color: var(--paper); }
.versus__side h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.versus ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.versus li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.versus li svg { margin-top: 4px; }
.versus__side--no li { color: var(--ink-2); }
.versus__side--no li svg { color: var(--rejected-ink); }
.versus__side--yes li svg { color: var(--verified-ink); }
.versus__img { margin-top: 12px; }
.versus__img .plate__mat { padding: 8px; box-shadow: none; }
.versus__img img { aspect-ratio: 16 / 9; object-position: 50% 35%; }
.versus__vs { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--paper); color: var(--ink-2); font: italic 500 1.1rem/1 var(--serif); box-shadow: 0 0 0 6px var(--paper), var(--shadow); }
@media (max-width: 760px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .versus__vs { position: static; transform: none; margin: -28px auto; }
}

/* ---- how: a calm desk for the Cowork window ---- */
#how.sec { display: flex; align-items: center; min-height: calc(100dvh - var(--bar, 56px)); padding-block: clamp(32px, 5vh, 72px); background-color: var(--paper-2); background-image: radial-gradient(circle, color-mix(in oklch, var(--ink) 16%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; }
#how.sec > .wrap { width: 100%; }

/* ---- gate: verdigris band ---- */
.gate { overflow: clip; padding-block: clamp(88px, 11vw, 152px); background: linear-gradient(180deg, color-mix(in oklch, var(--verified-soft) 92%, var(--paper)), color-mix(in oklch, var(--verified-soft) 52%, var(--paper))); }
.gate::before { content: ""; position: absolute; z-index: 0; inset-inline-end: -120px; top: 40px; width: min(560px, 80vw); aspect-ratio: 1; background: var(--verified); opacity: 0.1; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3Cpath d='m28 52 15 15 29-33'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='50' cy='50' r='44'/%3E%3Cpath d='m28 52 15 15 29-33'/%3E%3C/svg%3E") center / contain no-repeat; }
.gate h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-inline-size: 20ch; }
.gate__head { margin-bottom: clamp(48px, 6vw, 80px); }
.gate .node { padding: 22px 24px; border-radius: 18px; box-shadow: var(--shadow); }
.gate .node__v { font-size: 1.2rem; }
.gate .node__v.art { font-size: 1.25rem; }
.gate .node--ok, .gate .node--no { padding: 16px 20px; }
.gate .arrow { stroke-width: 2; }
.gate .loop__t { font-size: 1.1rem; }

/* ---- voice: large inset panel ---- */
.voice { padding-block: clamp(16px, 3vw, 40px); padding-inline: 16px; }
.voice > .wrap { position: relative; max-width: calc(var(--wrap) + 64px); background: var(--indigo-soft); border-radius: 32px; padding: clamp(32px, 6vw, 88px) clamp(20px, 5vw, 72px); overflow: clip; }
.voice > .wrap::before { content: "\201C"; position: absolute; z-index: 0; inset-inline-end: 3%; inset-block-start: -0.12em; font: 500 clamp(16rem, 32vw, 32rem)/1 var(--serif); color: var(--indigo); opacity: 0.1; pointer-events: none; }
.voice > .wrap > * { position: relative; z-index: 1; }
.voice h2 { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.voice .plate__mat { transform: rotate(1.2deg); }
@media (max-width: 640px) { .voice .plate__mat { transform: none; } }

/* ---- revise: paper with a big faint loop ---- */
.revise { overflow: clip; padding-block: clamp(88px, 11vw, 152px); }
.revise::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 50%; width: min(860px, 120vw); aspect-ratio: 1; transform: translate(-50%, -50%); background: var(--indigo); opacity: 0.07; pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8a42 42 0 1 1-36 20'/%3E%3Cpath d='M5 26l9 3 3-10'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M50 8a42 42 0 1 1-36 20'/%3E%3Cpath d='M5 26l9 3 3-10'/%3E%3C/svg%3E") center / contain no-repeat; }
:root[dir="rtl"] .revise::before { transform: translate(-50%, -50%) scaleX(-1); }
.revise h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); }
.revise__vis .plate { position: relative; z-index: 0; }
.revise__vis .plate__mat { transform: rotate(-1.2deg); }
.revise__vis .vp { position: relative; z-index: 1; margin-top: -56px; margin-inline-start: clamp(16px, 6vw, 72px); box-shadow: var(--lift); border-radius: 20px; }
.rloop li::before { box-shadow: 0 0 0 5px var(--paper); }

/* ---- courses: a notebook ---- */
.courses { background-color: var(--paper); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, color-mix(in oklch, var(--indigo) 15%, transparent) 31px, color-mix(in oklch, var(--indigo) 15%, transparent) 32px); background-position: 0 14px; }
.courses::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: clamp(8px, 2.6vw, 40px); width: 2px; background: color-mix(in oklch, var(--rejected) 50%, transparent); }
.courses .sechead { margin-bottom: clamp(32px, 4vw, 48px); }
.courses .sechead .lede { background: var(--paper); box-shadow: 0 0 0 10px var(--paper); border-radius: 4px; }
.courses .plate__mat { transform: rotate(0.8deg); }
.courses .ccard { background: var(--paper); box-shadow: var(--lift); border-radius: 24px; }
.courses .digest { background: var(--paper-2); }

/* ---------- round 6: mobile (samples) ---------- */
.lpage:not(:lang(he)), .lpage:not(:lang(he)) li, .sheet--he:not(:lang(he)) { font-family: var(--serif); }
.sheet--he:not(:lang(he)) .sheet__p { font-size: 1.15rem; line-height: 1.6; }
.sheet--he:not(:lang(he)) .sheet__foot { font-size: 0.9rem; }

/* ---- features: bento ---- */
.features { padding-block: clamp(80px, 10vw, 136px); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); }
.tile { border-radius: 28px; background: var(--paper-2); border: 1px solid var(--rule); padding: clamp(22px, 3vw, 40px); display: grid; gap: 14px; align-content: start; min-width: 0; }
.tile h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.tile p { color: var(--ink-2); }
.tile__ic, .tool__ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--indigo-soft); color: var(--indigo); }
.tile--lib { grid-column: span 7; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 36px); align-items: center; background: var(--indigo-soft); border-color: transparent; }
.tile--lib .tile__text { display: grid; gap: 14px; }
.tile--lib .tile__ic { background: var(--paper); }
.tile--lib .plate__mat { transform: rotate(1.5deg); padding: 8px; }
.tile--he { grid-column: span 5; background: var(--paper); box-shadow: var(--shadow); }
.tool__ic { width: 40px; height: 40px; border-radius: 12px; grid-row: 1 / 3; background: var(--paper); }
@media (max-width: 1000px) { .tile--lib, .tile--he { grid-column: 1 / -1; } .tile--s { grid-column: span 6; } }
@media (max-width: 700px) { .tile--lib { grid-template-columns: minmax(0, 1fr); } .tile--s { grid-column: 1 / -1; } .tile { border-radius: 22px; } }

/* ---- film: screening room ---- */
.film { border-radius: var(--r-band); padding-block: clamp(88px, 11vw, 152px);
  background: radial-gradient(ellipse 70% 55% at 50% 62%, oklch(0.30 0.09 270) 0%, transparent 75%), oklch(0.19 0.05 268); }
.film .wrap { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: clamp(28px, 4vw, 48px); max-width: 1180px; }
.film h2 { margin-inline: auto; max-inline-size: 24ch; font-size: clamp(2.2rem, 4.6vw, 3.8rem); }
.film .lede { margin-inline: auto; margin-top: 16px; }
.film__fig { width: 100%; max-width: 1080px; }
.film__frame { border-radius: 18px; border-color: oklch(0.42 0.07 268); box-shadow: 0 0 0 8px oklch(0.25 0.06 268), 0 60px 120px -30px oklch(0 0 0 / 0.8); }

/* ---- install: inset panel ---- */
.install { padding-inline: 16px; padding-block: clamp(32px, 5vw, 72px); }
.install > .wrap { max-width: calc(var(--wrap) + 64px); background: var(--paper-2); border-radius: 32px; padding: clamp(28px, 5vw, 72px) clamp(18px, 4vw, 64px); }
.install .icard { background: var(--paper); border-radius: 24px; }
@media (max-width: 560px) { .install { padding-inline: 8px; } .istep { grid-template-columns: 44px minmax(0, 1fr); } .istep__n { font-size: 3rem; } }


/* ---- faq: one column ---- */
.faq { overflow: clip; padding-block: clamp(80px, 10vw, 136px); }
.faq::before { content: "?"; position: absolute; z-index: 0; inset-inline-end: 4%; top: -0.1em; font: 500 clamp(14rem, 30vw, 30rem)/1 var(--serif); color: var(--indigo); opacity: 0.06; pointer-events: none; }
.faq > .wrap { max-width: 860px; }
.faq h2 { margin-inline: auto; text-align: center; max-inline-size: 24ch; }
.faq__list { display: block; margin-top: clamp(32px, 5vw, 56px); }
.faq__col { display: contents; border: 0; }
.faq__list details { border: 1px solid var(--rule); border-radius: 20px; background: var(--paper-2); margin-bottom: 12px; padding-inline: clamp(18px, 3vw, 28px); transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease); }
.faq__list details[open] { background: var(--paper); border-color: var(--indigo); box-shadow: var(--shadow); }
.faq__list summary { padding: 22px 0; font-size: clamp(1.08rem, 1.6vw, 1.25rem); }
.faq__list summary::after { flex-shrink: 0; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--indigo-soft); font-size: 1.4rem; }
.faq__list details p { max-inline-size: 64ch; }
.faq__more { text-align: center; margin-top: 32px; }

/* ---- final CTA + footer ---- */
.final { z-index: 1; border-radius: var(--r-band); padding-block: clamp(88px, 11vw, 152px);
  background: radial-gradient(ellipse 55% 70% at 85% 40%, oklch(0.31 0.10 270) 0%, transparent 70%), radial-gradient(ellipse 45% 55% at 0% 100%, oklch(0.27 0.09 285) 0%, transparent 70%), oklch(0.2 0.06 268); }
.final__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.final__h { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.final__plate .plate__mat { transform: rotate(1.6deg); box-shadow: 0 40px 80px -30px oklch(0 0 0 / 0.7); }
.final a { color: var(--indigo); }
.foot { background: var(--paper-2); margin-top: calc(var(--r-band) * -1); padding-top: calc(var(--r-band) + 28px); padding-bottom: 28px; }
@media (max-width: 899px) { .final__grid { grid-template-columns: minmax(0, 1fr); } .final__plate { order: 2; } }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

/* ---------- round 4: content ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* hero: exactly one viewport */
.hero { min-height: 100vh; min-height: 100dvh; padding-block: calc(var(--bar) + 16px) clamp(24px, 4vw, 48px); }
.hero__viz { max-width: min(620px, 100%, calc((100dvh - var(--bar) - 80px) * 1.25)); }
@media (max-width: 899px) { .hero { min-height: 100vh; min-height: 100dvh; align-items: center; } .hero__viz { min-height: 0; aspect-ratio: 5 / 4; } .hero .lede { margin-bottom: 20px; } .marks { margin-top: 20px; gap: 8px 20px; } h1 { margin-bottom: 14px; } }
@media (max-width: 899px) and (max-height: 900px) { .hero__viz { display: none; } }
/* why: three-way comparison, one viewport */
.why { min-height: calc(100vh - var(--bar)); min-height: calc(100dvh - var(--bar)); display: flex; align-items: center; padding-block: clamp(32px, 4vw, 56px); }
.why > .wrap { width: 100%; }
.why__grid { display: grid; grid-template-columns: minmax(0, 3.1fr) minmax(0, 8.9fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.why__fig .plate__mat { transform: rotate(-1.2deg); }
.why__q { margin: 18px 4px 0; font: italic 500 1.25rem/1.3 var(--serif); color: var(--ink); }
:root[lang="he"] .why__q { font-style: normal; font-family: "Frank Ruhl Libre", var(--serif); font-size: 1.3rem; }
.why h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 20px; max-inline-size: none; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.93rem; line-height: 1.4; background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.cmp th, .cmp td { padding: 11px 14px; text-align: start; vertical-align: top; border-bottom: 1px solid var(--rule); }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp thead th { font: 600 0.82rem/1.2 var(--sans); color: var(--ink-2); background: var(--paper-2); vertical-align: middle; }
.cmp tbody th { font: 600 0.86rem/1.3 var(--sans); width: 12%; color: var(--ink); }
.cmp .is-aw { background: var(--verified-soft); border-inline: 1.5px solid var(--verified); }
.cmp thead .is-aw { color: var(--verified-ink); font-size: 0.95rem; border-top: 0; }
.cmp__c { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; align-items: start; }
.cmp__who { display: none; grid-column: 1 / -1; font: 600 0.8rem/1.2 var(--sans); color: var(--ink-2); }
.cmp td:not(.is-aw) .cmp__t { color: var(--ink-2); }
.g { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; font: 600 0.8rem/1 var(--sans); }
.g--no { background: var(--rejected-soft); color: var(--rejected-ink); }
.g--part { background: var(--paper-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.g--none { background: transparent; color: var(--ink-2); }
.g--yes { background: var(--verified); color: var(--paper); }
.why__note { margin-top: 16px; font-size: 0.95rem; color: var(--ink-2); max-inline-size: 70ch; }
@media (max-width: 899px) {
  .why { min-height: 0; display: block; }
  .why__grid { grid-template-columns: minmax(0, 1fr); }
  .why__fig { max-width: 340px; margin-inline: auto; }
  .why__main { order: -1; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp { background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .cmp tbody tr { margin-bottom: 14px; border: 1px solid var(--rule); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow); overflow: hidden; }
  .cmp tbody th { width: auto; padding: 12px 16px; background: var(--paper-2); font-size: 0.95rem; }
  .cmp td { padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 0.97rem; }
  .cmp td.is-aw { border-inline: 0; border-bottom: 0; }
  .cmp__who { display: block; }
}
/* ---------- round 6: mobile (why) ---------- */
.cmpm { display: none; }
@media (min-width: 700px) and (max-width: 899px) {
  .cmp { display: table; background: var(--paper); border: 1px solid var(--rule); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
  .cmp tbody { display: table-row-group; }
  .cmp tr { display: table-row; }
  .cmp th, .cmp td { display: table-cell; }
  .cmp thead { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: table-header-group; }
  .cmp tbody tr { margin: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
  .cmp tbody th { width: 12%; padding: 11px 14px; background: transparent; font-size: 0.86rem; }
  .cmp td { padding: 11px 14px; border-bottom: 1px solid var(--rule); font-size: inherit; }
  .cmp tbody tr:last-child > * { border-bottom: 0; }
  .cmp td.is-aw { border-inline: 1.5px solid var(--verified); }
  .cmp__who { display: none; }
}
@media (max-width: 699px) {
  .why__grid { grid-template-columns: minmax(0, 1fr) 104px; gap: 12px 16px; align-items: center; }
  .why__main { display: contents; }
  .why h2 { grid-column: 1; grid-row: 1; margin: 0; font-size: clamp(1.45rem, 6.4vw, 1.8rem); }
  .why__fig { grid-column: 2; grid-row: 1; max-width: none; margin: 0; }
  .why__fig .plate__mat { padding: 4px; border-radius: 12px; }
  .why__fig img { border-radius: 8px; }
  .why__q { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .why .cmp { display: none; }
  .cmpm { display: table; grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; font-size: 0.9rem; table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); line-height: 1.3; }
  .why__note { grid-column: 1 / -1; grid-row: 3; margin-top: 0; font-size: 0.9rem; }
  .cmpm thead th { width: 21%; padding: 8px 0; text-transform: none; letter-spacing: 0; text-align: center; vertical-align: middle; font: 600 0.72rem/1.2 var(--sans); overflow: hidden; color: var(--ink-2); background: var(--paper-2); border-bottom: 1px solid var(--rule); }
  .cmpm thead th:first-child { width: 37%; }
  .cmpm thead .is-aw { color: var(--verified-ink); }
  .cmpm td, .cmpm tbody th { padding: 0; border-bottom: 1px solid var(--rule); }
  .cmpm td { height: 48px; text-align: center; vertical-align: middle; }
  .cmpm .g { display: inline-grid; margin: 0; width: 24px; height: 24px; font-size: 0.95rem; vertical-align: middle; }
  .cmpm .is-aw { background: var(--verified-soft); border-inline: 1.5px solid var(--verified); }
  .cmpm thead .is-aw { border-top: 0; }
  .cmpm__b { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-height: 48px; padding: 6px 8px 6px 12px; padding-inline: 12px 8px; border: 0; background: transparent; color: var(--ink); font: 600 0.9rem/1.2 var(--sans); text-align: start; cursor: pointer; }
  .cmpm__b svg { flex: none; transition: transform 0.2s; color: var(--ink-2); }
  .cmpm__b[aria-expanded="true"] svg { transform: rotate(180deg); }
  .cmpm__b:focus-visible { outline: 2px solid var(--verified); outline-offset: -2px; }
  .cmpm__d td { padding: 0 10px 10px; border-bottom: 1px solid var(--rule); }
  .cmpm tbody tr:last-child > * { border-bottom: 0; }
  .js .cmpm__d:not(.is-open) { display: none; }
  .cmpm dl { text-align: start; display: grid; gap: 6px; margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--paper-2); }
  .cmpm dl > div { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr); gap: 8px; font-size: 0.9rem; line-height: 1.35; }
  .cmpm dt { font-weight: 600; color: var(--ink-2); }
  .cmpm dd { margin: 0; overflow-wrap: anywhere; }
  .cmpm dl > div:last-child dt, .cmpm dl > div:last-child dd { color: var(--verified-ink); }
}
/* voice: compact before -> after */
.voice > .wrap { padding: clamp(24px, 3.2vw, 44px) clamp(20px, 4vw, 56px); }
.voice > .wrap::before { font-size: clamp(8rem, 16vw, 14rem); }
.vhead { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 32px; align-items: center; margin-bottom: 20px; }
.voice h2 { font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 10px; max-inline-size: none; }
.voice .lede { margin: 0; font-size: 1.05rem; max-inline-size: 62ch; }
.vhead__img .plate__mat { padding: 6px; }
.vdemo { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr) auto minmax(0, 1.35fr); gap: 14px; align-items: stretch; padding: 36px 20px 20px; background: var(--paper); border-radius: 22px; box-shadow: var(--lift); }
.vdemo__tag { position: absolute; inset-block-start: 12px; inset-inline-end: 16px; }
.vd__arr { align-self: center; font: 500 1.5rem/1 var(--serif); color: var(--indigo); }
:root[dir="rtl"] .vd__arr { transform: scaleX(-1); }
.vd__h { font: 500 0.76rem/1.2 var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px; }
:root[lang="he"] .vd__h { letter-spacing: 0; text-transform: none; font-size: 0.9rem; }
.vd__papers { display: grid; gap: 8px; }
.vd__paper { display: grid; gap: 6px; padding: 10px 12px; background: oklch(0.975 0.008 95); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); color: var(--ink); }
.vd__paper:nth-child(2) { transform: translateX(6px); }
:root[dir="rtl"] .vd__paper:nth-child(2) { transform: translateX(-6px); }
.vd__ttl { font: 500 0.78rem/1.2 var(--sans); color: var(--ink-2); }
.vd__ex { margin: 0 0 8px; padding: 8px 12px; border-inline-start: 3px solid var(--indigo); background: var(--paper-2); font: italic 400 0.95rem/1.4 var(--serif); }
:root[lang="he"] .vd__ex { font-style: normal; font-family: "Frank Ruhl Libre", var(--serif); font-size: 1rem; }
.vd__moves { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.vd__moves li, .vd__moves b { display: flex; align-items: center; }
.vd__moves li { gap: 8px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper-2); font: 500 0.88rem/1.3 var(--sans); }
.vd__moves b { justify-content: center; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--indigo); color: var(--on-indigo); font: 600 0.72rem/1 var(--sans); }
.vd__draft { font: 400 1.08rem/1.65 var(--serif); }
:root[lang="he"] .vd__draft { font-family: "Frank Ruhl Libre", var(--serif); font-size: 1.12rem; line-height: 1.7; }
.vd__draft mark { background: color-mix(in oklch, var(--indigo) 16%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; text-decoration: underline; text-decoration-color: var(--indigo); text-underline-offset: 3px; }
.vd__draft sup { display: inline-flex; justify-content: center; align-items: center; vertical-align: middle; width: 17px; height: 17px; margin-inline: 3px 4px; border-radius: 50%; background: var(--indigo); color: var(--on-indigo); font: 600 0.66rem/1 var(--sans); position: static; }
.vnote { margin: 16px 0 0; font-size: 1.02rem; font-weight: 500; max-inline-size: none; }
@media (max-width: 1099px) {
  .vdemo { grid-template-columns: minmax(0, 1fr); }
  .vd__arr, :root[dir="rtl"] .vd__arr { justify-self: center; transform: rotate(90deg); }
  .vd__papers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) { .vhead { grid-template-columns: minmax(0, 1fr); } .vhead__img { max-width: 160px; } .vd__papers { grid-template-columns: minmax(0, 1fr); } }
.why__main, .why__fig { min-width: 0; }
.cmp__t { overflow-wrap: anywhere; }
.cmp { min-width: 0; }
.marks { list-style: none; padding: 0; margin-block-end: 0; }
.marks li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.marks svg { flex: none; }

/* ---- round 6: condensed ---- */
.tile--s { grid-column: span 4; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding: clamp(16px, 2vw, 24px); background: var(--paper); }
.tile--s .tile__ic { grid-row: 1 / 3; }
.tile--s h3 { font-size: 1.15rem; align-self: end; }
.tile--s p { font-size: 0.93rem; line-height: 1.4; align-self: start; }
.crs__needs { margin-top: 24px; color: var(--ink-2); font-size: 0.95rem; }
.inst__then { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: clamp(24px, 3vw, 36px); }
.inst__then .cmd { margin: 0; }
.inst__tl { font-weight: 600; }
.reqs { max-width: none; margin-top: clamp(28px, 4vw, 40px); }
.reqs h3 { font-size: 1.05rem; margin-bottom: 10px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.chips li { padding: 8px 14px; border: 1px solid var(--rule); border-radius: 99px; background: var(--paper); font-size: 0.95rem; }
.faq__ul { margin: 0; padding-inline-start: 1.2em; display: grid; gap: 6px; color: var(--ink-2); }
.sec:not(.how):not(.final) { padding-block: clamp(48px, 6vw, 80px); }
.sec.final { padding-block: clamp(64px, 8vw, 112px); }
.faq code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 1000px) { .tile--s { grid-column: span 6; } }
@media (max-width: 700px) { .tile--s { grid-column: 1 / -1; } }

.inst2 { align-items: start; } .install h2 { margin-bottom: 24px; }
.icard .csteps > li { min-width: 0; } .icard .cmd { max-width: 100%; min-width: 0; } .icard .cmd__pre { min-width: 0; overflow-x: auto; }
.cgrid { align-items: start; }
.faq__list summary { padding: 14px 0; }
.why { min-height: 0; }
.revise__vis .plate { max-width: 72%; margin-inline: auto; }
.revise h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.courses .sechead .plate { max-width: 80%; justify-self: end; }
.install h2, .features h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.sec.final { padding-block: clamp(48px, 6vw, 80px); }
.faq h2 { margin-bottom: 20px; }
.icard, .inst2 > *, .final__cta, .final__main { min-width: 0; }
.cmd { max-width: 100%; min-width: 0; box-sizing: border-box; }
.cmd__pre, .cmd pre { min-width: 0; flex: 1 1 0; overflow: visible; white-space: pre-wrap; overflow-wrap: anywhere; }
.cmd code { white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.icard .cmd__pre { overflow: visible; }

/* ---------- round 6: mobile (samples: plates on phones) ---------- */
@media (max-width: 599px) {
  .plate, .plate__mat { max-width: 100%; box-sizing: border-box; }
  .plate { width: 100%; }
  .voice .plate__mat, .revise__vis .plate__mat, .courses .plate__mat, .tile--lib .plate__mat, .final__plate .plate__mat, .why__fig .plate__mat { transform: none; }
  .plate__mat img { max-width: 100%; }
  .lpage, .sheet--he { overflow-wrap: anywhere; }
}

/* ---------- round 6: mobile (global) ---------- */
@media (min-width: 360px) { :root { --gutter: 20px; } }
@media (min-width: 414px) { :root { --gutter: 24px; } }
@media (min-width: 700px) { :root { --gutter: 28px; } }
/* final CTA: Cowork and Claude Code, equal weight */
.final__cta { max-width: 720px; }
.final__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.final__way { min-width: 0; display: grid; gap: 10px; align-content: start; padding: 18px; border: 1px solid oklch(0.42 0.07 268); border-radius: 18px; background: oklch(0.24 0.06 268 / 0.6); }
.final__way h3 { font-size: 1.25rem; margin: 0; }
.final__way .final__note { margin: 0; }
.final__way .cmd { margin-top: auto; }
.final__links a, .foot__links a, .faq__more a, .link-arrow { display: inline-flex; align-items: center; min-height: 44px; }
.final__links, .foot__links { gap: 0 20px; }
/* courses: two balanced cards */
.cgrid { align-items: stretch; }
.cgrid > .ccard { display: flex; flex-direction: column; }
.ccard .trustl { margin-top: auto; }
/* tap targets, touch sizes */
.copy { min-height: 44px; min-width: 44px; }
.brand { min-height: 44px; align-items: center; min-width: 0; }
.brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px), (pointer: coarse) {
  .seg button { min-width: 44px; height: 44px; font-size: 0.9rem; }
  .seg { padding: 0; border-radius: 10px; overflow: hidden; }
  .icon-btn { width: 44px; height: 44px; }
  .bar__in, .bar__tools { gap: 6px; }
  .eyebrow, .cx, .vd__ttl, .vd__h, .node__k, .foot__ver, .copy__t { font-size: 0.875rem; }
  .tag, .flow__tag { font-size: 0.78rem; }
}
/* inset panels keep a visible inset from the screen edge on phones */
@media (max-width: 599px) {
  .voice { padding-inline: var(--gutter); }
  .voice > .wrap { padding-inline: 18px; border-radius: 26px; }
  .install { padding-inline: var(--gutter); }
  .install > .wrap { padding-inline: 18px; border-radius: 26px; }
  .hero, .film, .final { margin-inline: 10px; border-radius: 28px; }
  .hero { margin-top: 10px; min-height: calc(100dvh - 10px); }
  .film .wrap, .final .wrap, .hero > .wrap { padding-inline: 18px; }
  .final__two { grid-template-columns: minmax(0, 1fr); }
  .tile, .ccard, .icard { padding: 20px; }
  .revise__vis .vp { margin-top: -24px; margin-inline-start: 0; }
  /* hero engraving: the whole composition across the top, not a zoomed crop */
  .hero__plate { width: 100%; inset-inline: 0; }
  .hero__plate img { opacity: 0.3; }
}
@media (max-width: 380px) { h1 { font-size: 2.1rem; } .hero .lede { font-size: 1.05rem; } }
/* short landscape phones: let the hero grow with its content */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: 0; padding-block: calc(var(--bar) + 12px) 28px; }
  .marks { margin-top: 14px; }
}

.foot__links a, .final__links a { min-width: 44px; justify-content: center; padding-inline: 4px; }
@media (max-width: 599px) {
  .cmp thead th, .cmp thead th.is-aw { font-size: 0.75rem !important; }
  .revise__vis .vp { margin-top: 12px; }
}

/* ---------- round 6: mobile (global, pass 2) ---------- */
@media (max-width: 899px), (pointer: coarse) {
  :root[lang="he"] .node__k, :root[lang="he"] .vd__h { font-size: 0.875rem; }
  .cmd__pre { font-size: 0.9rem; }
  .hw__phase { min-height: 44px; }
  .cmpm thead th { font-size: 0.78rem; }
}
@media (max-width: 440px) { .brand__name { font-size: 1.12rem; } .bar__in { padding-inline: 14px; } }
@media (max-width: 340px) { .brand__name { font-size: 1rem; } }
@media (max-width: 599px) {
  .cmd { flex-direction: column; }
  .cmd .copy { align-self: stretch; justify-content: center; margin: 0 10px 10px; }
  .cmd__pre { padding: 14px 16px 8px; }
  .inst__then { display: grid; gap: 10px; }
  .inst__then .arr { display: none; }
}

/* ---------- final review fixes ---------- */
/* Final CTA: stacked cards give each command the full column width; break only between words. */
.final__two { grid-template-columns: minmax(0, 1fr); }
.cmd__pre code { overflow-wrap: normal; word-break: normal; }
@media (max-width: 420px) { .cmd__pre code { overflow-wrap: anywhere; } }

/* ---------- dashboard and activity section (layout only) ---------- */
.dash__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 40px); align-items: start; }
.dash__fig { margin: 0; min-width: 0; }
.dash__img { display: block; inline-size: 100%; block-size: auto; border: 1px solid var(--rule); border-radius: 12px; }
.dash__img--dark { display: none; }
.dash__fig figcaption { margin-top: 12px; color: var(--ink-2); font-size: 0.92rem; }
.dash__trust { margin-top: clamp(24px, 3vw, 36px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dash__img--light { display: none; }
  :root:not([data-theme="light"]) .dash__img--dark { display: block; }
}
:root[data-theme="dark"] .dash__img--light { display: none; }
:root[data-theme="dark"] .dash__img--dark { display: block; }
@media (max-width: 900px) { .dash__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- what's new (block generated by scripts/gen-site-news.py) ---------- */
.news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 40px; }
.news__rel { border-top: 1px solid var(--rule); padding-top: 18px; }
.news__rel h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font: 500 1.12rem/1.35 var(--sans); }
.news__date { font: 400 0.82rem/1.2 var(--mono); color: var(--ink-2); }
.news__rel ul { margin: 12px 0 0; padding-inline-start: 1.1em; color: var(--ink-2); }
.news__rel li { margin-bottom: 8px; }
.news__more { margin-top: 28px; }
@media (max-width: 900px) { .news__grid { grid-template-columns: minmax(0, 1fr); } }