/* counselara.com: the hand-written stylesheet for the static marketing pages.
   Values mirror the design tokens of the product (web/design/tokens.json); logical properties
   only, so the same rules serve the Hebrew (RTL) pages and the English (LTR) pages. */

/* ── faces (self-hosted, no CDN) ─────────────────────────────────────────────── */

/* Two voices: Rubik is the face of whoever is speaking (the site, the assistant, a question);
   Frank Ruhl Libre is the face of the record (headlines, case and document names). */
@font-face { font-family: 'Rubik Variable'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(fonts/rubik-hebrew-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Rubik Variable'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(fonts/rubik-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Frank Ruhl Libre Variable'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(fonts/frank-ruhl-libre-hebrew-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Frank Ruhl Libre Variable'; font-style: normal; font-display: swap; font-weight: 300 900;
  src: url(fonts/frank-ruhl-libre-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800;
  src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── tokens ──────────────────────────────────────────────────────────────────── */

:root {
  --cl-stone: #f1ede4;
  --cl-stone-bright: #fbf9f4;
  --cl-white: #ffffff;
  --cl-basalt: #1e1f1d;
  --cl-ink: #1e1f1d;
  --cl-ink-muted: #5f5c55;
  --cl-ink-faint: #8e8a80;
  --cl-line: #ddd6c8;
  --cl-line-strong: #cec5b3;
  --cl-copper: #a8562a;
  --cl-copper-deep: #8f4722;
  --cl-copper-wash: #f7efe7;
  --cl-wash: #e8e1d3;
  --cl-cited: #f2dcc5;
  --cl-rust: #8e2a2a;
  --cl-rust-soft: #f5e4e1;
  --cl-status-queued: #8e8a80;
  --cl-status-processing: #a8562a;
  --cl-status-ready: #8f4722;
  --cl-kind-pdf: #c2411e;
  --cl-kind-doc: #2f5d8f;
  --cl-kind-text: #5f5c55;
  --cl-kind-image: #2f7d7a;
  --cl-kind-audio: #8a6a2f;
  --cl-space-2: 8px;  --cl-space-3: 12px; --cl-space-4: 16px; --cl-space-5: 20px;
  --cl-space-6: 24px; --cl-space-8: 32px; --cl-space-10: 40px; --cl-space-12: 48px; --cl-space-16: 64px;
  --cl-radius-sm: 4px; --cl-radius-md: 6px; --cl-radius-lg: 10px;
  --cl-shadow-card: 0 1px 2px rgba(30, 31, 29, 0.06), 0 4px 14px rgba(30, 31, 29, 0.06);
  --cl-shadow-dialog: 0 12px 40px rgba(30, 31, 29, 0.24);
  --cl-font-sans: 'Rubik Variable', system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans Hebrew", sans-serif;
  --cl-font-display: 'Frank Ruhl Libre Variable', 'Rubik Variable', Georgia, "Times New Roman", serif;
  --cl-font-mono: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --cl-motion-fast: 120ms;
  --cl-motion-base: 200ms;
  --cl-motion-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  /* the site's own: the dark band the answer is built on, and the light text on it */
  --site-band: #141513;
  --site-band-ink: #f1ede4;
  --site-band-muted: #b3ada0;
  --site-band-line: #2c2d2a;
  --pad-x: clamp(20px, 4.5cqi, 64px);
  /* reading direction as a sign: motion along the reading direction multiplies by it */
  --rd: 1;
}
[dir=ltr] { --rd: -1; }

/* ── base ────────────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cl-stone); }
html { scroll-behavior: smooth; }
body { background: var(--cl-stone); color: var(--cl-ink); font-family: var(--cl-font-sans);
  font-size: 17px; line-height: 1.6; container-type: inline-size; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cl-copper); outline-offset: 3px; }
.site-nav a:not(.btn):focus-visible, .footer-nav a:focus-visible, .notfound .alt a:focus-visible { border-radius: var(--cl-radius-sm); }
h1, h2 { font-family: var(--cl-font-display); font-weight: 400; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6cqi, 44px); line-height: 1.18; }
h3 { font-weight: 500; font-size: 19px; letter-spacing: -0.005em; margin: 0 0 var(--cl-space-2); }
p { margin: 0; }
svg { flex: none; }
/* Numbers, dates, file numbers and timecodes stay LTR inside Hebrew; they sit in the text face, not the mono,
   because a date inside a sentence is prose, not an identifier. */
bdi[dir=ltr] { unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--cl-font-mono); font-variant-numeric: tabular-nums; }
.code { font-family: var(--cl-font-mono); font-size: 0.86em; letter-spacing: 0.04em; }
.wrap { max-width: 1180px; margin-inline: auto; padding-inline: var(--pad-x); }
.spacer { flex: 1; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.lede { font-size: 19px; line-height: 1.6; color: var(--cl-ink-muted); max-width: 40ch; }

.btn { display: inline-flex; align-items: center; gap: var(--cl-space-2); padding: 13px 22px;
  border-radius: var(--cl-radius-md); font-weight: 500; font-size: 16px; line-height: 1; white-space: nowrap; border: 1px solid transparent;
  transition: background-color var(--cl-motion-base) var(--cl-motion-ease), border-color var(--cl-motion-base) var(--cl-motion-ease), color var(--cl-motion-base) var(--cl-motion-ease); }
.btn-primary { background: var(--cl-copper); color: var(--cl-white); border-color: var(--cl-copper); }
.btn-primary:hover { background: var(--cl-copper-deep); border-color: var(--cl-copper-deep); }
.btn-secondary { border-color: var(--cl-line-strong); color: var(--cl-ink); }
.btn-secondary:hover { border-color: var(--cl-ink); }

/* the brand: two symbols per page. The wordmark "Counselara." with its raised copper figure is the lockup
   everywhere; the tile (the full stop and the figure on copper) is the favicon and the app icon, so it appears
   only where the app itself is depicted. The wordmark keeps its aspect (6228 x 930) at any height. */
.lockup { display: inline-flex; align-items: center; }
.wordmark { height: 24px; width: calc(24px * 6228 / 930); color: var(--cl-ink); display: block; }
.mark { width: 30px; height: 30px; }

/* the icon set: 24 grid, open arcs, currentColor; a file's kind icon carries its own colour */
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 15px; height: 15px; }
.k-pdf { color: var(--cl-kind-pdf); } .k-doc { color: var(--cl-kind-doc); } .k-text { color: var(--cl-kind-text); }
.k-image { color: var(--cl-kind-image); } .k-audio { color: var(--cl-kind-audio); }
/* rtl-check: allow. chevron-next is the one mirrored icon, flipped only under RTL */
[dir=rtl] .chev { transform: scaleX(-1); }

/* ── header ──────────────────────────────────────────────────────────────────── */

.site-header { display: flex; align-items: center; gap: var(--cl-space-5); flex-wrap: wrap; padding-block: var(--cl-space-5); }
.site-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cl-space-3) var(--cl-space-5);
  justify-content: flex-end; font-size: 15px; }
.site-nav .btn { padding: 10px 18px; font-size: 15px; }
.lang-switch { display: inline-flex; align-items: center; gap: 8px; color: var(--cl-ink-muted); }
.lang-switch .current { color: var(--cl-ink); font-weight: 500; }
.site-header .wordmark { transition: none; }

/* ── hero: the headline, and the case growing beside it ─────────────────────── */

.hero { padding-block: clamp(32px, 6cqi, 72px) clamp(48px, 7cqi, 96px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr); gap: var(--cl-space-8) clamp(32px, 6cqi, 88px); align-items: start; }
.hero-copy { padding-block-start: 8px; }
.hero h1 { grid-column: 1 / -1; margin-block-end: var(--cl-space-2); }
.hero h1 { font-size: clamp(42px, 5.6cqi, 76px); line-height: 1.06; }
.hero h1 .arc-line { position: relative; display: inline-block; }
/* the drawn underline: an open arc in ink, the mark's sweep under the one claim that deserves it */
.arc-line svg { position: absolute; inset-inline: 0; inset-block-end: -0.16em; width: 100%; height: 0.32em; overflow: visible; pointer-events: none; }
.arc-line path { fill: none; stroke: var(--cl-ink); stroke-width: 1.1; stroke-linecap: round; opacity: 0.85; }
.hero .lede { max-width: 44ch; }
.hero-ctas { display: flex; gap: var(--cl-space-3); flex-wrap: wrap; margin-block-start: var(--cl-space-8); }

/* the case pane: the material of one case, with the dates it joined on */
.case-pane { background: var(--cl-stone-bright); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg);
  box-shadow: 0 24px 60px rgba(30, 31, 29, 0.12), var(--cl-shadow-card); overflow: hidden; }
.pane-head { display: flex; align-items: baseline; gap: var(--cl-space-3); padding: 14px 18px 10px; }
.pane-title { font-family: var(--cl-font-display); font-weight: 500; font-size: 18px; white-space: nowrap; }
.pane-case { color: var(--cl-ink-muted); font-size: 13.5px; min-width: 0; }
.pane-count { margin-inline-start: auto; font-size: 13.5px; color: var(--cl-ink-muted); white-space: nowrap; }
.pane-list { list-style: none; margin: 0; padding: 0 10px; }
/* an arriving row stays in flow while hidden, so the pane keeps its finished height and nothing below it moves */
.pane-list li { transition: opacity 420ms var(--cl-motion-ease), transform 520ms var(--cl-motion-ease); }
.pane-list li.pending { opacity: 0; transform: translateX(calc(10px * var(--rd))); visibility: hidden; }
.row { display: grid; grid-template-columns: 18px 1fr auto auto; align-items: center; gap: 12px; padding: 10px 8px;
  border-block-start: 1px solid var(--cl-line); font-size: 15px; }
.pane-list li:first-child .row { border-block-start: 0; }
.row .name { font-family: var(--cl-font-display); font-weight: 500; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .when { font-size: 13px; color: var(--cl-ink-muted); }
.st { font-size: 12px; padding: 3px 8px; border-radius: var(--cl-radius-sm); font-weight: 500; display: inline-flex; align-items: center; gap: 6px; inline-size: 6.8em; justify-content: center;
  transition: background-color 360ms var(--cl-motion-ease), color 360ms var(--cl-motion-ease); }
.st-ready { color: var(--cl-status-ready); background: var(--cl-wash); }
.st-proc { color: var(--cl-status-processing); background: var(--cl-copper-wash); }
.st .arc { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; display: none; }
.st-proc .arc { display: block; animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pane-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px 14px; margin-block-start: 6px; border-block-start: 1px dashed var(--cl-line-strong);
  font-size: 13.5px; color: var(--cl-ink-muted); }
.pane-foot .ic { color: var(--cl-ink-faint); }

/* ── the answer, as it happens: a sticky workspace beside four steps ─────────── */

.seq { background: var(--site-band); color: var(--site-band-ink); padding-block: clamp(56px, 8cqi, 112px) clamp(40px, 6cqi, 88px); }
.seq-intro { max-width: 46ch; margin-block-end: clamp(32px, 4cqi, 56px); }
.seq-intro h2 { color: var(--cl-stone-bright); }
.seq-intro p { color: var(--site-band-muted); margin-block-start: var(--cl-space-4); font-size: 17.5px; }
.seq-grid { display: grid; grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr); gap: clamp(28px, 5cqi, 64px); align-items: start; }
.seq-steps { display: flex; flex-direction: column; padding-block-end: 26vh; }
.step { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--cl-space-6);
  border-block-start: 1px solid var(--site-band-line); color: var(--site-band-muted); transition: color 400ms var(--cl-motion-ease); }
.step:first-child { border-block-start: 0; }
.step h3 { font-size: 21px; font-weight: 500; color: inherit; margin-block-end: var(--cl-space-3); }
.step p { font-size: 16px; max-width: 30ch; }
[data-stage="1"] .step[data-step="1"], [data-stage="2"] .step[data-step="2"], [data-stage="3"] .step[data-step="3"], [data-stage="4"] .step[data-step="4"] { color: var(--cl-stone-bright); }
.seq-stage { position: sticky; top: 2vh; }

/* the workspace frame: the conversation on the start side, the material track on the end side */
.ws { background: var(--cl-stone-bright); color: var(--cl-ink); border-radius: var(--cl-radius-lg); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42); border: 1px solid var(--site-band-line); }
.ws-top { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-block-end: 1px solid var(--cl-line); font-size: 13.5px; background: var(--cl-stone); }
.ws-top .mark { width: 20px; height: 20px; }
.ws-top .case { font-family: var(--cl-font-display); font-weight: 500; font-size: 15px; }
.ws-top .case, .ws-top .num { white-space: nowrap; }
.ws-top .num { color: var(--cl-ink-muted); font-size: 12.5px; }
.ws-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 520px; }
/* rtl-check: allow. English runs wider than Hebrew for the same words, so its conversation column takes a little more of the frame */
[dir=ltr] .ws-body { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
.conv { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; border-inline-end: 1px solid var(--cl-line); min-width: 0; }
.track { position: relative; background: var(--cl-stone); min-width: 0; }
.track-list { padding: 14px 16px; transition: opacity 500ms var(--cl-motion-ease); }
.track-list .pane-title { font-size: 15px; }
.track-list .row { grid-template-columns: 16px 1fr auto; font-size: 14px; padding: 9px 2px; }
/* the side list is narrow, and narrower in English where the conversation takes more of the frame: the names get
   the room the gaps and the status chip can spare, so none is cut */
.track-list .row { gap: 9px; }
.track-list .row .name { font-size: 14px; }
.track-list .st { inline-size: 4.8em; padding-inline: 5px; }
.track-list .row:first-of-type { border-block-start: 0; }
.track-list .pane-head { padding: 0 0 6px; flex-wrap: wrap; }
[data-stage="4"] .track-list { opacity: 0; }

.ask-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-3); border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius-md); padding: 11px 14px; color: var(--cl-ink); font-size: 15px; background: var(--cl-white); min-height: 46px; }
.ask-bar .typed { flex: 1; min-height: 1.4em; }
.ask-bar .typed:empty::before { content: attr(data-placeholder); color: var(--cl-ink-muted); }
.ask-send { width: 26px; height: 26px; border-radius: var(--cl-radius-sm); background: var(--cl-copper); color: var(--cl-white);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* the dictation square beside the field, the app's own: held, it turns copper while the microphone is open, and the
   line under the field carries the meter and the state word; the question lands in phrases, never a caret */
.dictate { width: 28px; height: 28px; border-radius: var(--cl-radius-sm); border: 1px solid var(--cl-line); background: var(--cl-white); color: var(--cl-ink-muted);
  display: inline-flex; align-items: center; justify-content: center; flex: none; transition: color var(--cl-motion-fast) var(--cl-motion-ease), border-color var(--cl-motion-fast) var(--cl-motion-ease), background-color var(--cl-motion-fast) var(--cl-motion-ease); }
.dictate.held { border-color: var(--cl-copper); background: var(--cl-copper-wash); color: var(--cl-copper); }
.dictate.held svg { animation: breathe 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes breathe { 50% { opacity: 0.5; } }
.dict-line { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--cl-ink-muted); min-height: 18px; margin-block-start: -4px; }
.dict-line.on { display: flex; }
.meter { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.meter i { display: block; width: 3px; height: 4px; border-radius: 1.5px; background: var(--cl-copper); animation: level 900ms ease-in-out infinite; }
.meter i:nth-child(2) { animation-delay: 150ms; } .meter i:nth-child(3) { animation-delay: 300ms; } .meter i:nth-child(4) { animation-delay: 450ms; } .meter i:nth-child(5) { animation-delay: 600ms; }
@keyframes level { 50% { height: 12px; } }
/* the status line belongs to the search alone: it is gone once the answer exists, and absent from the finished markup */
/* the searching line opens and closes at the pace of the folds around it (its ceiling is its real height, one line);
   closed, it takes back the conversation's gap, so it costs the other steps nothing. Switched on at once, it used to
   add its height before anything else had folded, and the frame rose for a moment on the way back to this step */
.status-line { font-size: 13px; color: var(--cl-ink-muted); display: flex; align-items: center; gap: 8px; height: 20.8px; max-height: 0; opacity: 0; overflow: hidden; margin-block-start: -12px; visibility: hidden; }
[data-stage="2"] .status-line { max-height: 20.8px; margin-block-start: 0; opacity: 1; visibility: visible; }
.status-line .arc { width: 13px; height: 13px; fill: none; stroke: var(--cl-copper); stroke-width: 2; stroke-linecap: round; animation: spin 900ms linear infinite; }
.passages { display: grid; grid-template-columns: 1fr; gap: 8px; }
.passage { background: var(--cl-stone); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-md); padding: 10px 12px; font-size: 13.5px; }
.passage-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 500; margin-block-end: 5px; }
.passage-head .name { font-family: var(--cl-font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.passage-head .loc { color: var(--cl-ink-muted); font-weight: 400; white-space: nowrap; }
.passage-quote { color: var(--cl-ink-muted); line-height: 1.5; }
.passage-quote mark { background: var(--cl-cited); color: inherit; padding-inline: 2px; border-radius: 2px; }
/* once the answer exists the passages fold to their heads: the evidence stays named under the answer, the quotes
   give up the room the answer needs, and the frame fits the screen of a laptop */
/* the quotes and the answer fold by their REAL height (a grid row between 1fr and 0fr, not a ceiling far above the
   content) and at one pace, so the frame's height moves in a straight line between two steps in either direction:
   a ceiling made the answer wait before it visibly shrank, and on the way back the unfolding quotes met it and the
   frame rose for a moment */
.passage { display: grid; grid-template-rows: auto 1fr; }
.passage-quote { min-height: 0; overflow: hidden; transition: opacity 300ms var(--cl-motion-ease); }
.passage-head { transition: margin-block-end 420ms var(--cl-motion-ease); }
[data-stage="3"] .passage, [data-stage="4"] .passage { grid-template-rows: auto 0fr; padding-block: 7px; }
[data-stage="3"] .passage-quote, [data-stage="4"] .passage-quote { opacity: 0; }
[data-stage="3"] .passage-head, [data-stage="4"] .passage-head { margin-block-end: 0; }
/* before the search the quotes wait folded as well (nothing of a passage shows yet): a scroll that skips the search
   then opens the passages straight to their heads, and the answer under them never dips on the way */
[data-stage="0"] .passage, [data-stage="1"] .passage { grid-template-rows: auto 0fr; padding-block: 7px; }
[data-stage="0"] .passage-head, [data-stage="1"] .passage-head { margin-block-end: 0; }
/* and before it exists, a part of the conversation takes no room: the frame grows as the answer is built. The passages
   and the answer each sit in a fold of their own, whose one row is the thing clipped: a box with a border or padding
   cannot be the row itself, because it never shrinks below them, and a ceiling on the passages met the quotes' fold on
   a scroll that skipped a step and pushed the answer down for a moment. The finished markup (no stage: the narrow
   layout, no script) has every fold open */
.passages-fold, .answer-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--cl-motion-ease); }
.passages-fold > .passages, .answer-fold > .answer-clip { min-height: 0; overflow: hidden; }
[data-stage="0"] .passages-fold, [data-stage="1"] .passages-fold,
[data-stage="0"] .answer-fold, [data-stage="1"] .answer-fold, [data-stage="2"] .answer-fold { grid-template-rows: 0fr; }
.answer { border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
  font-size: 15px; line-height: 1.6; background: var(--cl-white); }
.answer sup { font-size: 0.68em; line-height: 0; color: var(--cl-copper-deep); font-weight: 500; margin-inline-start: 1px; font-variant-numeric: tabular-nums; }
.cites { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-block-start: 9px; border-block-start: 1px solid var(--cl-line); }
.cites-label { font-size: 12.5px; color: var(--cl-ink-muted); margin-inline-end: 4px; }
.cite-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 9px;
  border-radius: var(--cl-radius-sm); border: 1px solid color-mix(in srgb, var(--cl-copper) 30%, transparent);
  color: var(--cl-copper-deep); background: var(--cl-copper-wash); font-weight: 500; transition: box-shadow 400ms var(--cl-motion-ease); }
.cite-chip .n { font-size: 11px; }
.cite-chip .loc { font-weight: 400; white-space: nowrap; }
.cite-chip.ring { box-shadow: 0 0 0 3px var(--cl-copper-wash), 0 0 0 4.5px var(--cl-copper); }

/* stage progression: what each stage adds; everything is present without JS (stage 4) */
.stage .s1, .stage .s2, .stage .s3 { transition: opacity 600ms var(--cl-motion-ease), transform 600ms var(--cl-motion-ease), padding 400ms var(--cl-motion-ease); }
/* a passage's rows and padding go at the fold's pace (the rule follows the shared one above, which it ties on
   specificity). The searching line carries the class of its step, so its rule names that class too: it has to beat
   the hidden-state rule below as well, whose 8px rise would otherwise land on it in one frame on the way back to
   step 1. Closed, the line also leaves the accessibility tree, after its fold; opened, at once */
.stage .passage { transition: opacity 600ms var(--cl-motion-ease), transform 600ms var(--cl-motion-ease), padding 420ms var(--cl-motion-ease), grid-template-rows 420ms var(--cl-motion-ease); }
.stage .status-line.s2 { transition: max-height 420ms var(--cl-motion-ease), margin-block-start 420ms var(--cl-motion-ease), opacity 300ms var(--cl-motion-ease), visibility 0s linear 420ms; transform: none; }
[data-stage="2"] .stage .status-line.s2 { transition-delay: 0s; }
[data-stage="0"] .s1, [data-stage="0"] .s2, [data-stage="0"] .s3,
[data-stage="1"] .s2, [data-stage="1"] .s3,
[data-stage="2"] .s3 { opacity: 0; transform: translateY(8px); }
[data-stage="0"] .s1 { transform: none; }
/* the second passage arrives a beat after the first, and the answer's sentences one after another; a delay is for an
   arrival only, never for a fold (the passage's list follows its transition list above: opacity, transform, padding,
   rows) and never for leaving: a sentence that waited before it faded was still half gone when a quick return to its
   step opened the answer again */
[data-stage="2"] .passage.s2:nth-child(2), [data-stage="3"] .passage.s2:nth-child(2), [data-stage="4"] .passage.s2:nth-child(2) { transition-delay: 160ms, 160ms, 0ms, 0ms; }
[data-stage="3"] .answer.s3 .s3, [data-stage="4"] .answer.s3 .s3 { transition-delay: 260ms; }
[data-stage="3"] .answer.s3 .s3 + .s3, [data-stage="4"] .answer.s3 .s3 + .s3 { transition-delay: 1100ms; }
[data-stage="3"] .answer.s3 .cites.s3, [data-stage="4"] .answer.s3 .cites.s3 { transition-delay: 1500ms; }

/* the source: the viewer takes the track the material list occupies, from the end side */
.viewer { position: absolute; inset: 0; background: var(--cl-stone); color: var(--cl-ink); display: flex; flex-direction: column;
  transform: translateY(8px); opacity: 0; transition: transform 600ms var(--cl-motion-ease) 120ms, opacity 500ms var(--cl-motion-ease) 120ms; }
[data-stage="4"] .viewer, .seq:not([data-stage]) .viewer { transform: none; opacity: 1; }
.viewer-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-block-end: 1px solid var(--cl-line); font-size: 13.5px; background: var(--cl-stone-bright); }
.viewer-head .kind { width: 26px; height: 26px; border-radius: var(--cl-radius-sm); background: var(--cl-white); border: 1px solid var(--cl-line); display: inline-flex; align-items: center; justify-content: center; }
.viewer-head .name { font-family: var(--cl-font-display); font-weight: 500; flex: 1; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-head .ic { color: var(--cl-ink-muted); }
.viewer-tools { display: flex; align-items: center; gap: 10px; padding: 7px 14px; border-block-end: 1px solid var(--cl-line); font-size: 12.5px; color: var(--cl-ink-muted); background: var(--cl-stone-bright); }
.viewer-tools .ic { width: 15px; height: 15px; }
.viewer-tools .sep { width: 1px; height: 14px; background: var(--cl-line); }
.viewer-body { flex: 1; padding: 14px; overflow: hidden; }
.sheet { background: var(--cl-white); box-shadow: var(--cl-shadow-card); padding: 22px 20px 26px; font-family: var(--cl-font-display); font-size: 12.5px; line-height: 1.7; color: var(--cl-ink); min-height: 100%; }
.sheet h4 { margin: 0 0 6px; font-size: 13px; font-weight: 500; }
.sheet p { margin: 0 0 5px; }
.sheet .band { background: var(--cl-cited); mix-blend-mode: multiply; padding: 1px 3px; margin-inline: -3px; border-radius: 2px; }
.sheet .bar { height: 7px; border-radius: 3px; background: var(--cl-stone); margin: 7px 0; }
.viewer-foot { padding: 8px 14px; border-block-start: 1px solid var(--cl-line); font-size: 12px; color: var(--cl-ink-muted); background: var(--cl-stone-bright); }

/* ── the same question, two months later ─────────────────────────────────────── */

.twice { padding-block: clamp(56px, 8cqi, 104px); }
.twice-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--cl-space-6) clamp(32px, 5cqi, 72px); align-items: end; margin-block-end: clamp(28px, 4cqi, 48px); }
.twice-head p { color: var(--cl-ink-muted); font-size: 17.5px; max-width: 44ch; }
.twice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-6); }
.moment { background: var(--cl-stone-bright); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg); padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: var(--cl-space-4); box-shadow: var(--cl-shadow-card); }
.moment-head { display: flex; align-items: baseline; gap: 12px; padding-block-end: 12px; border-block-end: 1px solid var(--cl-line); }
.moment-head .date { font-family: var(--cl-font-display); font-size: 24px; font-weight: 400; }
.moment-head .files { color: var(--cl-ink-muted); font-size: 14px; margin-inline-start: auto; }
.moment-files { display: flex; flex-wrap: wrap; gap: 6px; }
.moment-files span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 9px; border-radius: var(--cl-radius-sm);
  border: 1px solid var(--cl-line); color: var(--cl-ink-muted); background: var(--cl-stone); }
.moment-files span.new { border-color: var(--cl-ink); color: var(--cl-ink); background: var(--cl-stone-bright); }
.q-bubble { align-self: flex-start; background: var(--cl-wash); padding: 10px 14px; font-size: 15px; max-width: 60ch;
  border-radius: var(--cl-radius-lg); border-end-start-radius: var(--cl-radius-sm); }
.moment .answer { background: var(--cl-white); }
.moment .answer.none { color: var(--cl-ink-muted); }

/* ── before the first question: what the platform prepares as material arrives ─ */

/* Three beats, one idea each: a short text beside one picture of the product's own surface, the sides
   alternating. The depicted controls are spans, not buttons; the markup is the finished state and the
   script only plays it (the drop, the reading, the proposal, the acceptance) while it is on screen. */
.before { padding-block: clamp(56px, 8cqi, 104px) clamp(8px, 2cqi, 24px); }
.beat { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: clamp(32px, 7cqi, 104px); align-items: center;
  padding-block: clamp(36px, 5.5cqi, 80px); }
.beat-flip .beat-copy { order: 2; }
.beat-flip { grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr); }
.beat-copy h3 { font-family: var(--cl-font-display); font-weight: 400; font-size: clamp(26px, 2.9cqi, 36px); line-height: 1.2; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.beat-copy p { color: var(--cl-ink-muted); font-size: 17.5px; line-height: 1.6; max-width: 40ch; margin-block-start: var(--cl-space-4); }

/* beat 1: the stage a case opens on. Its height never changes: what has not happened yet is hidden in place. */
.open-stage { position: relative; display: flex; flex-direction: column; background: var(--cl-stone-bright); border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg);
  box-shadow: 0 24px 60px rgba(30, 31, 29, 0.12), var(--cl-shadow-card); min-width: 0;
  /* the stage's own height never changes, so the browser must not pick a scroll anchor inside it: on a phone the first visible
     element is inside the stage, and as the zone folded the page followed it and scrolled by itself through the play */
  overflow-anchor: none; }
/* the frame does not clip: the hand brings the files in from outside it, so the case bar rounds its own corners */
.open-stage .ws-top { flex-wrap: nowrap; border-start-start-radius: calc(var(--cl-radius-lg) - 1px); border-start-end-radius: calc(var(--cl-radius-lg) - 1px); }
/* while the script sets the stage's opening frame, nothing may animate */
.open-still *, .open-still *::before, .open-still *::after { transition: none !important; }
.open-stage .ws-top .case { transition: opacity 320ms var(--cl-motion-ease); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.open-stage .ws-top .num[hidden] { display: none; }
.open-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
/* while the files are dropped and read the zone fills the stage, as an empty case's zone does in the app, and the
   proposal card unfolds under it once there is a proposal; the stage's own height is pinned by the script for the play */
.dropzone { border: 1px dashed var(--cl-line-strong); border-radius: var(--cl-radius-lg); padding: 14px 16px; display: flex; flex-direction: column; align-items: center; flex: 0 0 auto;
  background: var(--cl-stone); transition: border-color 240ms var(--cl-motion-ease), background-color 240ms var(--cl-motion-ease), flex-grow 360ms var(--cl-motion-ease); }
.dropzone > * + * { margin-block-start: 12px; }
/* two spacers keep the zone's content in its vertical middle while it grows and while it folds back, so the
   label travels with the zone instead of snapping to its top the moment the proposal card takes the room */
.dropzone::before, .dropzone::after { content: ""; display: block; flex: 0 1 0px; transition: flex-grow 360ms var(--cl-motion-ease); }
[data-phase=drop] .dropzone, [data-phase=reading] .dropzone { flex-grow: 1; }
[data-phase=drop] .dropzone::before, [data-phase=drop] .dropzone::after, [data-phase=reading] .dropzone::before, [data-phase=reading] .dropzone::after { flex-grow: 1; }
.dropzone.active { border-color: var(--cl-copper); background: var(--cl-copper-wash); }
/* the label is the app's: an upload tile above one line, both centred; while the zone fills the stage the
   label grows with it, so the invitation is legible at the size of the room it has */
.dropzone-line { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13.5px; color: var(--cl-ink-muted); text-align: center;
  transition: font-size 360ms var(--cl-motion-ease), gap 360ms var(--cl-motion-ease), color 240ms var(--cl-motion-ease); }
.drop-tile { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--cl-radius-md); background: var(--cl-copper-wash); color: var(--cl-basalt);
  transition: width 360ms var(--cl-motion-ease), height 360ms var(--cl-motion-ease), background-color 240ms var(--cl-motion-ease); }
.drop-tile .ic { transition: width 360ms var(--cl-motion-ease), height 360ms var(--cl-motion-ease); }
[data-phase=drop] .dropzone-line, [data-phase=reading] .dropzone-line { font-size: 17px; color: var(--cl-ink); gap: 12px; }
[data-phase=drop] .drop-tile, [data-phase=reading] .drop-tile { width: 52px; height: 52px; }
[data-phase=drop] .drop-tile .ic, [data-phase=reading] .drop-tile .ic { width: 26px; height: 26px; }
.dropzone.active .dropzone-line { color: var(--cl-copper-deep); }
.dropzone.active .drop-tile { background: var(--cl-white); color: var(--cl-copper-deep); }
.dropzone .moment-files, .dropzone .open-pending { justify-content: center; text-align: center; }
/* a chip blooms from the point its thumbnail lands on (the icon, 16px in from the start edge) and cools from the
   copper of the drop to its resting tone, so the arrival is one motion with the flight */
.dropzone .moment-files span { background: var(--cl-stone-bright); transform-origin: calc(50% - var(--rd) * (16px - 50%)) 50%;
  transition: opacity 260ms var(--cl-motion-ease), transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 700ms var(--cl-motion-ease), border-color 700ms var(--cl-motion-ease); }
.open-playing .dropzone .moment-files span:not(.on) { opacity: 0; transform: scale(0.55); background: var(--cl-copper-wash); border-color: var(--cl-copper); }
.open-card { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 360ms var(--cl-motion-ease); }
.open-card > .idcard { min-height: 0; overflow: hidden; }
[data-phase=drop] .open-card, [data-phase=reading] .open-card { grid-template-rows: 0fr; }
.open-pending { display: none; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; color: var(--cl-ink-muted); padding-block-start: 2px; }
/* the reading line opens its own room when the reading begins, so the files' rows glide up to make way instead of
   jumping; through the drop it is laid out at no height, which costs the stage nothing while the card still folds */
[data-phase=drop] .open-pending, [data-phase=reading] .open-pending { display: flex; overflow: hidden; transition: max-height 360ms var(--cl-motion-ease), margin-block-start 360ms var(--cl-motion-ease), opacity 360ms var(--cl-motion-ease); }
[data-phase=drop] .dropzone > .open-pending { max-height: 0; margin-block-start: 0; opacity: 0; padding-block: 0; }
[data-phase=reading] .open-pending { max-height: 8em; opacity: 1; }
.open-pending strong { font-weight: 500; font-size: 14px; color: var(--cl-ink); }
.open-pending .arc { width: 22px; height: 22px; fill: none; stroke: var(--cl-copper); stroke-width: 2; stroke-linecap: round; animation: spin 900ms linear infinite; }
.open-stage .idcard { transition: opacity 360ms var(--cl-motion-ease), transform 360ms var(--cl-motion-ease); }
[data-phase=drop] .idcard, [data-phase=reading] .idcard { opacity: 0; transform: translateY(8px); }
.open-playing .idrows > div dd { transition: opacity 220ms var(--cl-motion-ease), transform 220ms var(--cl-motion-ease); }
.open-playing .idrows > div:not(.on) dd { opacity: 0; transform: translateY(4px); }
.idfoot { position: relative; }
.idsaved { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: 14px; font-weight: 500; color: var(--cl-copper-deep);
  opacity: 0; transition: opacity 360ms var(--cl-motion-ease); }
.idactions { transition: opacity 280ms var(--cl-motion-ease); }
[data-phase=saved] .idactions { opacity: 0; }
[data-phase=saved] .idsaved { opacity: 1; transition-delay: 300ms; }
.fbtn-primary { transition: transform 140ms var(--cl-motion-ease), background-color 140ms var(--cl-motion-ease); }
.fbtn-primary.pressed { transform: scale(0.96); background: var(--cl-copper-deep); }
/* the hand: a drawn pointer that carries the files in and later presses the button. It is placed by the script
   from measured boxes, in physical pixels, because a box on the screen is the same way round in both languages. */
.cursor { position: absolute; top: 0; /* rtl-check: allow */ left: 0; width: 22px; height: 22px; pointer-events: none; opacity: 0; z-index: 3;
  transition: transform 700ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 240ms var(--cl-motion-ease); will-change: transform; }
.cursor svg { width: 22px; height: 22px; display: block; fill: var(--cl-ink); stroke: var(--cl-stone-bright); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(30, 31, 29, 0.3)); }
.cursor.show { opacity: 1; }
.cursor.press svg { transform: scale(0.88); }
/* the files in the hand: five drawn thumbnails fanned under the pointer, one per file of the drop, in the
   drop zone's order. Each is drawn as markup (a page at 210 wide scaled down, a chat, a waveform) or the
   photograph, so it is crisp and in the page's language. On the release the script lifts them out of the
   hand and flies each to its row in the zone. */
.stack { position: absolute; top: 14px; /* rtl-check: allow */ left: 16px; width: 1px; height: 1px; opacity: 0; transition: opacity 240ms var(--cl-motion-ease); }
.cursor.carry .stack { opacity: 1; }
.thumb { position: absolute; top: 0; /* rtl-check: allow */ left: 0; display: block; overflow: hidden; border-radius: 3px; background: var(--cl-white);
  border: 1px solid var(--cl-line-strong); box-shadow: 0 6px 16px rgba(30, 31, 29, 0.22); transform-origin: top left; }
.t-page { width: 64px; height: 86px; }
.t-photo { width: 86px; height: 58px; }
.t-photo .photo { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.t-chat { width: 66px; height: 74px; background: var(--cl-stone); padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; }
.t-audio { width: 84px; height: 46px; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 6px 7px; }
/* the fan, in the hand */
.stack .thumb:nth-child(1) { transform: translate(-34px, 8px) rotate(-14deg); z-index: 5; }
.stack .thumb:nth-child(2) { transform: translate(10px, -8px) rotate(-5deg); z-index: 4; }
.stack .thumb:nth-child(3) { transform: translate(52px, 6px) rotate(7deg); z-index: 3; }
.stack .thumb:nth-child(4) { transform: translate(-22px, 62px) rotate(9deg); z-index: 2; }
.stack .thumb:nth-child(5) { transform: translate(48px, 70px) rotate(-4deg); z-index: 1; }
/* the page: a sheet laid out at 210 wide and scaled to the thumbnail */
/* the sheet is pinned to the thumbnail's top-left corner in both directions, because it is scaled from that corner and
   a right-to-left box would otherwise overflow to the left and scale itself out of view */
.paper { display: block; position: absolute; top: 0; /* rtl-check: allow */ left: 0; width: 210px; height: 282px; transform: scale(0.305); transform-origin: top left; padding: 18px 16px; font-family: var(--cl-font-display); color: var(--cl-ink); }
.paper > * { display: block; }
.paper .p-head { font-size: 11px; font-weight: 500; text-align: center; }
.paper .p-no { font-family: var(--cl-font-mono); font-size: 9px; text-align: center; color: var(--cl-ink-muted); margin-block: 4px 12px; }
.paper .p-title { font-size: 14px; font-weight: 500; text-align: center; margin-block-end: 12px; }
.paper i { display: block; height: 5px; border-radius: 2px; background: var(--cl-line); margin-block: 7px; width: 100%; }
.paper .p-table { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3px; margin-block: 10px; }
.paper .p-table span { display: block; height: 12px; border: 1px solid var(--cl-line); }
.paper .p-table span:nth-child(-n+3) { background: var(--cl-stone); }
/* the chat: three tiny bubbles, the client's on the end side */
.t-chat .b { display: block; font-family: var(--cl-font-sans); font-size: 4.6px; line-height: 1.35; padding: 2px 4px; border-radius: 4px; background: var(--cl-white); max-width: 88%; align-self: flex-start; }
.t-chat .b.me { background: var(--cl-wash); align-self: flex-end; }
.t-chat .b i { display: block; height: 3px; width: 100%; border-radius: 1px; background: var(--cl-line); }
/* the recording: a waveform and its length */
.t-audio .wave { width: 100%; height: 18px; fill: none; stroke: var(--cl-kind-audio); stroke-width: 1.6; stroke-linecap: round; }
.t-audio .dur { font-family: var(--cl-font-mono); font-size: 8px; color: var(--cl-ink-muted); text-align: center; }
/* a thumbnail in flight, lifted out of the hand onto the stage */
.open-stage > .thumb { transition: transform 520ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 160ms linear 360ms; z-index: 2; }

/* the proposed case details, as the app draws them: a copper edge, a source on every detail */
.idcard { border: 1px solid color-mix(in srgb, var(--cl-copper) 40%, transparent); border-radius: var(--cl-radius-lg); background: var(--cl-white);
  padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.idcard-head { display: flex; align-items: flex-start; gap: 12px; }
.tile { width: 34px; height: 34px; border-radius: var(--cl-radius-md); background: var(--cl-wash); color: var(--cl-copper-deep);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.idcard-head h4 { margin: 0; font-size: 16px; font-weight: 500; }
.idcard-head p { font-size: 13.5px; line-height: 1.5; color: var(--cl-ink-muted); margin-block-start: 2px; }
.idrows { margin: 0; display: grid; }
.idrows > div { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 12px; align-items: baseline; padding-block: 8px;
  border-block-start: 1px solid var(--cl-line); font-size: 14.5px; }
.idrows dt { color: var(--cl-ink-muted); font-size: 13.5px; }
.idrows dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.idrows .val { font-weight: 500; }
.idrows .val.mono { font-size: 13.5px; font-weight: 500; }
.src { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; background: var(--cl-copper-wash); color: var(--cl-copper-deep);
  padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.src .ic { width: 12px; height: 12px; }
.idactions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-block-start: 2px; }
.fbtn { display: inline-flex; align-items: center; height: 36px; padding-inline: 14px; border-radius: var(--cl-radius-md); border: 1px solid var(--cl-line);
  background: var(--cl-white); font-size: 14px; font-weight: 500; white-space: nowrap; }
.fbtn-ghost { border-color: transparent; background: transparent; color: var(--cl-ink-muted); }
.fbtn-primary { background: var(--cl-copper); border-color: var(--cl-copper); color: var(--cl-white); }

/* beat 2: a citation that rests on a picture. The answer sits over the corner of the page it opens; the ring is a
   copper edge with the cited tint around it and nothing over the picture, as the viewer draws it, and it is drawn
   once when the beat arrives. */
.fig-stage { display: flex; flex-direction: column; min-width: 0; }
.fig-talk { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; margin-inline-end: 16%; margin-block-end: -28px; }
.fig-talk .answer { box-shadow: 0 14px 34px rgba(30, 31, 29, 0.13), var(--cl-shadow-card); }
.cap-ic { width: 14px; height: 14px; }
/* the page's frame begins under the answer's overlap, so its title bar is never covered */
.fig-viewer { position: static; transform: none; opacity: 1; margin-inline-start: 10%; border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg); overflow: hidden;
  box-shadow: 0 24px 60px rgba(30, 31, 29, 0.12), var(--cl-shadow-card); padding-block-start: 34px; background: var(--cl-stone-bright); }
.fig-viewer .viewer-body { padding: 16px; background: var(--cl-stone); }
.fig-viewer .sheet { min-height: 0; padding: 20px 22px 22px; font-size: 13px; }
.figwrap { position: relative; padding: 8px; margin: 10px 0 12px; }
.photo { display: block; width: 100%; height: auto; border-radius: 2px; }
.figring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; border-radius: 3px; box-shadow: 0 0 0 4px var(--cl-cited); }
.figring rect { fill: none; stroke: var(--cl-copper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.reveal-armed .fig-stage .figring { box-shadow: 0 0 0 4px transparent; transition: box-shadow 500ms var(--cl-motion-ease) 1500ms; }
.reveal-armed .fig-stage .figring rect { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--cl-motion-ease) 700ms; }
.reveal-armed .fig-stage.revealed .figring { box-shadow: 0 0 0 4px var(--cl-cited); }
.reveal-armed .fig-stage.revealed .figring rect { stroke-dashoffset: 0; }

/* beat 3: a file's summary unfolded in its material row, and the case summary's control under it */
.sumcard { border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg); background: var(--cl-white); overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  box-shadow: 0 24px 60px rgba(30, 31, 29, 0.12), var(--cl-shadow-card); }
.sumcard .moment-head { padding: 14px 16px 10px; }
.sumcard .moment-head .date { font-size: 20px; }
.sumcard .row { border-block-start: 0; padding: 12px 16px 14px; }
.sum { padding: 12px 18px 16px; display: flex; flex-direction: column; gap: 12px; border-block-start: 1px solid var(--cl-line); }
.sum-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--cl-copper-deep); }
.sec h4 { margin: 0 0 3px; font-size: 11.5px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cl-ink-muted); }
.sec p { font-size: 14.5px; line-height: 1.55; }
.pg { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; border-radius: var(--cl-radius-sm); background: var(--cl-wash); color: var(--cl-copper-deep);
  padding: 1px 6px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.more { font-size: 12.5px; font-weight: 500; color: var(--cl-copper-deep); }
.cov { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 16px; border-block-start: 1px solid var(--cl-line); background: var(--cl-stone); }
.sumbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding-inline: 12px; border: 1px solid var(--cl-line); border-radius: var(--cl-radius-md);
  background: var(--cl-white); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.sumbtn .ic { color: var(--cl-copper); }
.covline { font-size: 13px; color: var(--cl-ink-muted); }
/* the summary unfolds a point at a time when the beat arrives */
.reveal-armed .sumcard .sec, .reveal-armed .sumcard .more, .reveal-armed .sumcard .cov > * { opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--cl-motion-ease), transform 420ms var(--cl-motion-ease); }
.reveal-armed .sumcard.revealed .sec, .reveal-armed .sumcard.revealed .more, .reveal-armed .sumcard.revealed .cov > * { opacity: 1; transform: none; }
.reveal-armed .sumcard.revealed .sec:nth-of-type(1) { transition-delay: 350ms; }
.reveal-armed .sumcard.revealed .sec:nth-of-type(2) { transition-delay: 650ms; }
.reveal-armed .sumcard.revealed .sec:nth-of-type(3) { transition-delay: 950ms; }
.reveal-armed .sumcard.revealed .more { transition-delay: 1200ms; }
.reveal-armed .sumcard.revealed .cov > * { transition-delay: 1500ms; }

/* ── a way in, mid-page: one line and the button, between the answer and what comes before a question ─ */

.cta-mid { padding-block: clamp(40px, 5cqi, 64px) 0; }
.cta-line { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; border: 1px solid var(--cl-line); border-radius: var(--cl-radius-lg);
  background: var(--cl-stone-bright); padding: 22px 28px; box-shadow: var(--cl-shadow-card); }
.cta-line p { font-size: 18px; color: var(--cl-ink); max-width: 44ch; }

/* ── security and privacy ────────────────────────────────────────────────────── */

.trust { padding-block: clamp(56px, 7cqi, 96px); }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: var(--cl-space-8) clamp(32px, 5cqi, 72px); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--cl-space-5) var(--cl-space-8); }
.trust-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.55; padding-block: 14px; border-block-start: 1px solid var(--cl-line-strong); }
.trust-list .ic { color: var(--cl-ink-muted); margin-block-start: 4px; width: 20px; height: 20px; }

/* ── closing call ────────────────────────────────────────────────────────────── */

.cta-section { padding-block: 0 clamp(56px, 7cqi, 96px); }
.cta-card { background: var(--cl-basalt); color: var(--cl-stone); border-radius: var(--cl-radius-lg); padding: clamp(36px, 5cqi, 64px) clamp(24px, 4cqi, 56px);
  display: grid; grid-template-columns: minmax(0, 1.4fr) auto; align-items: center; gap: 28px; }
.cta-card h2 { font-size: clamp(28px, 3.4cqi, 40px); max-width: 22ch; color: var(--cl-stone-bright); }
.cta-card p { color: var(--site-band-muted); margin-block-start: var(--cl-space-3); font-size: 16.5px; max-width: 44ch; }
.cta-card .btn-primary { font-size: 17px; padding: 15px 26px; }

/* ── not found ───────────────────────────────────────────────────────────────── */

.notfound { padding-block: clamp(48px, 10cqi, 120px) 96px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--cl-space-4); }
.notfound .code { color: var(--cl-ink-muted); }
.notfound h1 { font-size: clamp(36px, 5cqi, 64px); line-height: 1.1; }
.notfound > p { color: var(--cl-ink-muted); font-size: 18px; max-width: 44ch; }
.notfound .btn { margin-block-start: var(--cl-space-2); }
.notfound .alt { font-size: 14px; color: var(--cl-ink-muted); margin-block-start: var(--cl-space-6); }
.notfound .alt a:hover { color: var(--cl-ink); }
/* the waiting list on the coming-soon page: our own fields, one column, the note and the outcome under them */
.soon h1 { max-width: 18ch; }
.soon-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 0.85fr); gap: var(--cl-space-8) clamp(32px, 6cqi, 88px); align-items: start; width: 100%; }
.soon-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cl-space-4); }
.soon-copy > p { color: var(--cl-ink-muted); font-size: 18px; max-width: 44ch; }
.soon-side { padding-block-start: 12px; }
.wait { display: flex; flex-direction: column; gap: var(--cl-space-4); width: min(100%, 440px); margin-block-start: var(--cl-space-4); }
/* the form gives way to the thank-you line once the address is saved: the script sets hidden on it, and the display above
   outranks the browser's own rule for hidden, so the hiding has to be said here too */
.wait[hidden] { display: none; }
.wait-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--cl-ink-muted); }
.wait-field input { font: inherit; font-size: 16px; color: var(--cl-ink); background: var(--cl-white); border: 1px solid var(--cl-line-strong); border-radius: var(--cl-radius-md); padding: 11px 14px; min-height: 46px; }
.wait-field input:focus-visible { outline: 2px solid var(--cl-copper); outline-offset: 2px; border-color: var(--cl-copper); }
.wait-field input[aria-invalid="true"] { border-color: var(--cl-rust); }
.wait-note { font-size: 13.5px; color: var(--cl-ink-muted); max-width: 44ch; line-height: 1.5; }
/* the link to the privacy policy under the notice; the production bundle removes it while the policy is held back,
   and the paragraph it leaves empty takes no room */
.wait-policy { font-size: 13.5px; color: var(--cl-ink-muted); margin-block-start: -6px; }
.wait-policy:empty { display: none; }
.wait-policy a { text-decoration: underline; text-decoration-color: var(--cl-line-strong); text-underline-offset: 3px; }
.wait-policy a:hover { color: var(--cl-ink); text-decoration-color: var(--cl-ink); }
.wait .btn { align-self: flex-start; }
.wait .btn[disabled] { opacity: 0.6; }
.wait-msg { font-size: 14.5px; color: var(--cl-rust); min-height: 1.5em; }
.wait-msg:empty { display: none; }
.wait-msg a { text-decoration: underline; text-underline-offset: 3px; }
.wait-done { font-size: 18px; color: var(--cl-ink); max-width: 44ch; margin-block-start: var(--cl-space-4); }

/* ── the legal pages: privacy policy, terms of service ───────────────────────── */

/* A document to read, not a page to scan: one column at a reading measure, the display face for the headings the
   rest of the site uses, the text a notch larger and looser than the site's body. The contents list is the page's
   only navigation; the terms number their clauses so a letter can cite one, the privacy policy does not. */
.legal { padding-block: clamp(40px, 7cqi, 88px) 72px; }
.legal-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cl-space-4); max-width: 68ch; }
.legal-head h1 { font-size: clamp(34px, 4.6cqi, 56px); line-height: 1.12; }
.legal-meta { color: var(--cl-ink-muted); font-size: 14px; }
.legal-draft { color: var(--cl-copper-deep); background: var(--cl-copper-wash); border: 1px solid var(--cl-cited);
  border-radius: var(--cl-radius-sm); padding: 3px 10px; font-size: 13.5px; }
.legal-scope { color: var(--cl-ink-muted); font-size: 18px; line-height: 1.6; }
.legal-toc { margin-block-start: var(--cl-space-8); padding-block: var(--cl-space-5); border-block: 1px solid var(--cl-line); max-width: 68ch; }
.legal-toc h2 { font-family: var(--cl-font-sans); font-size: 14px; font-weight: 500; color: var(--cl-ink-muted); margin-block-end: var(--cl-space-3); }
.legal-toc ol { margin: 0; padding-inline-start: 1.4em; columns: 2 16em; column-gap: var(--cl-space-8); font-size: 15.5px; }
.legal-toc li { padding-block: 3px; break-inside: avoid; }
.legal-toc li::marker { color: var(--cl-ink-faint); }
.legal-toc a { color: var(--cl-ink-muted); }
/* the annex sits under the numbered list, unnumbered, as it is in the body */
.legal-toc-annex { margin-block-start: var(--cl-space-2); font-size: 15.5px; }
.legal-toc a:hover { color: var(--cl-ink); }
.legal-body { max-width: 68ch; }
.legal-body section { padding-block-start: var(--cl-space-10); scroll-margin-block-start: var(--cl-space-6); }
.legal-body h2 { font-size: clamp(24px, 2.6cqi, 30px); line-height: 1.25; margin-block-end: var(--cl-space-4); }
.legal-body h3 { margin-block-start: var(--cl-space-6); }
.legal-body p, .legal-body li { font-size: 17px; line-height: 1.7; }
.legal-body p + p, .legal-body p + ul, .legal-body ul + p, .legal-body p + ol, .legal-body ol + p { margin-block-start: var(--cl-space-3); }
.legal-body ul, .legal-body ol { margin: var(--cl-space-3) 0 0; padding-inline-start: 1.3em; }
.legal-body li + li { margin-block-start: 6px; }
.legal-body li::marker { color: var(--cl-ink-faint); }
.legal-body a { text-decoration: underline; text-decoration-color: var(--cl-line-strong); text-underline-offset: 3px; }
.legal-body a:hover { text-decoration-color: var(--cl-ink); }
.legal-body a:focus-visible, .legal-toc a:focus-visible { border-radius: var(--cl-radius-sm); }
/* Numbered clauses. The number is a left-to-right island at the start of the line, so "4.2" reads the same inside
   Hebrew as inside English and never turns into "2.4". The island is made inside the generated text itself (the
   isolate marks U+2066 and U+2069), not by setting direction on the pseudo-element: a direction there would also
   flip its own logical offsets and margins, and in Hebrew the number would land on the wrong side of the text. */
.legal-terms .legal-body { counter-reset: clause; }
.legal-terms .legal-body h2 { counter-increment: clause; }
.legal-terms .legal-body h2.annex { counter-increment: none; }
.legal-terms .legal-body h2.annex::before { content: none; }
.legal-terms .legal-body h2::before { content: "\2066" counter(clause) ".\2069"; margin-inline-end: 0.45em; color: var(--cl-ink-faint); }
.legal-terms .clauses { list-style: none; padding: 0; counter-reset: sub; }
.legal-terms .clauses > li { counter-increment: sub; position: relative; padding-inline-start: 2.9em; }
.legal-terms .clauses > li::before { content: "\2066" counter(clause) "." counter(sub) "\2069"; position: absolute; inset-inline-start: 0;
  color: var(--cl-ink-faint); font-variant-numeric: tabular-nums; }
.legal-terms .clauses ul { margin-block-start: 6px; }
.legal-list { list-style: none; padding: 0; }
.legal-list > li { padding-block: var(--cl-space-3); border-block-start: 1px solid var(--cl-line); }
.legal-list > li:last-child { border-block-end: 1px solid var(--cl-line); }
.legal-list b { font-weight: 500; }
.legal-foot { margin-block-start: var(--cl-space-12); display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; color: var(--cl-ink-muted); }
.legal-foot a:hover { color: var(--cl-ink); }
@container (max-width: 600px) {
  .legal-body p, .legal-body li { font-size: 16.5px; }
  .legal-terms .clauses > li { padding-inline-start: 2.6em; }
}
/* printed, a legal page is the document alone; every other page prints as it did */
@media print {
  body:has(> main.legal) > .site-header, .legal-toc, .legal-foot { display: none; }
  html:has(main.legal), body:has(> main.legal) { background: var(--cl-white); }
  .legal { padding-block: 0; }
  .legal-body a { text-decoration: none; }
}

/* ── footer ──────────────────────────────────────────────────────────────────── */

.site-footer { border-block-start: 1px solid var(--cl-line); padding-block: var(--cl-space-10) var(--cl-space-8); }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--cl-space-6); align-items: flex-start; }
.footer-brand p { color: var(--cl-ink-muted); margin-block-start: var(--cl-space-3); font-size: 15px; }
.footer-nav { display: flex; gap: 12px 22px; font-size: 15px; align-items: center; flex-wrap: wrap; }
.footer-note { color: var(--cl-ink-muted); font-size: 14px; margin-block-start: var(--cl-space-3); max-width: 44ch; }
.copyright { margin-block-start: 28px; color: var(--cl-ink-muted); font-size: 13px; }

/* ── motion: reveal on scroll, armed by the script only when the visitor allows motion ─── */

/* a block arrives with a fade and a small rise, the way the reader is already moving; the first version slid it 14px along
   the reading direction, and on a wide screen several large blocks doing that in turn read as the page shifting sideways */
.reveal-armed [data-reveal] { opacity: 0; transform: translateY(10px);
  transition: opacity 380ms var(--cl-motion-ease), transform 380ms var(--cl-motion-ease); }
.reveal-armed [data-reveal].revealed { opacity: 1; transform: none; }
/* the hero underline draws itself once the faces are in; without the script it is simply there */
.reveal-armed .arc-line path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 900ms var(--cl-motion-ease) 300ms; }
.reveal-armed .arc-line.drawn path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .reveal-armed [data-reveal], .reveal-armed .arc-line path { opacity: 1; transform: none; transition: none; stroke-dashoffset: 0; }
  .btn, .viewer, .track-list, .stage .s1, .stage .s2, .stage .s3, .pane-list li, .st, .cite-chip { transition: none; }
  .st-proc .arc, .status-line .arc { animation: none; }
  .dictate.held svg, .meter i { animation: none; }
  .open-pending .arc { animation: none; }
  .cursor, .dropzone, .fbtn-primary { transition: none; }
}

/* the office laptop: 1366 by 768 leaves about 650px of page, and the pinned frame has to fit in it with the chips */
@media (max-height: 760px) {
  .seq-stage { top: 1vh; }
  .ws-body { min-height: 0; }
  .conv { padding: 12px 14px; gap: 10px; }
  .status-line { margin-block-start: -10px; }
  .ask-bar { padding: 9px 12px; min-height: 42px; }
  .answer { padding: 11px 13px; gap: 6px; font-size: 14px; line-height: 1.5; }
  .cites { padding-block-start: 7px; gap: 5px; }
  .cite-chip { font-size: 12px; padding: 3px 8px; }
  .passage { font-size: 13px; }
}

/* ── narrow ──────────────────────────────────────────────────────────────────── */

/* the side-by-side sequence at its narrowest (a half-screen window, a tablet on its side): the material list gives its
   names the room its padding, its gaps and the fixed width of the status chip can spare, so none is cut in English
   either, and the answer sets a size smaller, so the frame keeps one height from the first step to the last */
@container (min-width: 961px) and (max-width: 1130px) {
  .track-list { padding-inline: 10px; }
  .track-list .row { gap: 6px; }
  .track-list .row .name { font-size: 13px; }
  .track-list .st { inline-size: auto; }
  .answer { font-size: 14px; line-height: 1.55; }
}
@container (max-width: 960px) {
  .site-nav .hide-sm { display: none; }
  /* the header keeps a way to the other language: its name alone */
  .site-nav .lang-switch .current, .site-nav .lang-switch > span:not(.current) { display: none; }
  .soon-grid { grid-template-columns: 1fr; }
  .soon-side { display: none; }
  .hero-grid { grid-template-columns: 1fr; }
  .seq-grid { grid-template-columns: 1fr; }
  .seq-stage { position: static; order: -1; }
  /* below the sticky layout the workspace shows the finished answer with the source open beside it */
  .ws-body, [dir=ltr] .ws-body { grid-template-columns: 1fr; min-height: 0; }
  .conv { border-inline-end: 0; border-block-end: 1px solid var(--cl-line); }
  .track-list { display: none; }
  .viewer { position: static; transform: none !important; opacity: 1 !important; }
  .stage .s1, .stage .s2, .stage .s3 { opacity: 1 !important; transform: none !important; }
  .seq-steps { padding-block-end: 0; }
  .step { min-height: 0; padding-block: var(--cl-space-5); color: var(--cl-stone-bright); }
  .step p { color: var(--site-band-muted); }
  .seq-steps { margin-block-start: var(--cl-space-8); }
  .twice-head, .twice-grid, .trust-grid, .beat, .beat-flip { grid-template-columns: 1fr; }
  .beat-flip .beat-copy { order: 0; }
  .beat-copy p { max-width: 56ch; }
  .cta-card { grid-template-columns: 1fr; }
}
@container (max-width: 600px) {
  .site-header { gap: 10px; }
  .site-nav { gap: 10px; font-size: 14px; }
  .site-nav .btn { padding: 9px 12px; font-size: 14px; }
  .site-header .wordmark { height: 20px; width: calc(20px * 6228 / 930); }
  /* the two moments share a thumb's flick: the file chips give way to the one new file */
  .moment .moment-files span:not(.new) { display: none; }
  .moment .moment-files span.new::before { content: attr(data-new) ": "; font-weight: 400; color: var(--cl-ink-muted); }
  .moment { padding: 14px 16px 16px; gap: 10px; }
  .moment-head .date { font-size: 20px; }
  .moment .q-bubble, .moment .answer { font-size: 14.5px; }
  .moment .answer { padding: 12px 14px; gap: 8px; }
  .trust-list { grid-template-columns: 1fr; }
  .row { grid-template-columns: 18px 1fr auto; }
  .row .when { display: none; }
  .arc-line svg { display: none; }
  .ws-top { flex-wrap: wrap; }
  .pane-head { flex-wrap: wrap; }
  .idrows > div { grid-template-columns: 5.6em minmax(0, 1fr); gap: 8px; padding-block: 6px; font-size: 13.5px; }
  .idrows dt { font-size: 12.5px; }
  .idrows dd { gap: 4px 8px; }
  .src { font-size: 11px; padding: 1px 7px; }
  .idcard { padding: 14px; gap: 10px; }
  .idcard-head p { display: none; }
  .fbtn { height: 32px; font-size: 13px; padding-inline: 11px; }
  .open-body { gap: 10px; }
  .dropzone { padding: 10px 12px; }
  .dropzone > * + * { margin-block-start: 8px; }
  .dropzone-line { gap: 6px; }
  .drop-tile { width: 32px; height: 32px; }
  [data-phase=drop] .dropzone-line, [data-phase=reading] .dropzone-line { font-size: 15px; gap: 8px; }
  [data-phase=drop] .drop-tile, [data-phase=reading] .drop-tile { width: 44px; height: 44px; }
  [data-phase=drop] .drop-tile .ic, [data-phase=reading] .drop-tile .ic { width: 22px; height: 22px; }
  .dropzone .moment-files span { font-size: 12px; padding: 2px 7px; }
  .dropzone .moment-files span .ic { display: none; }
  .fbtn-ghost { border-color: var(--cl-line); }
  .idactions { justify-content: flex-start; }
  .idsaved { justify-content: flex-start; }
  .fig-talk { margin-inline-end: 6%; }
  .fig-viewer { margin-inline-start: 4%; }
}
/* the narrowest phones: the header still fits one row in English */
@container (max-width: 400px) {
  /* the narrowest phones: the file names get the room the status chip and the gaps can spare, so none is cut */
  .row { gap: 8px; padding-inline: 4px; }
  .row .name { font-size: 15px; }
  .st { inline-size: 5.6em; padding-inline: 6px; }
  .site-nav .btn { padding: 9px 10px; font-size: 13.5px; }
  .site-header .wordmark { height: 18px; width: calc(18px * 6228 / 930); }
}