/* Voice Memory landing. Paper desk, editorial serif, a live evidence desk.
   Signature: the highlighter stroke that marks the line an answer rests on.
   Colour has meaning: yellow = the line the answer rests on, teal = verified,
   coral/red = superseded, refused or not comparable. */

@font-face { font-family: "Newsreader"; src: url("fonts/newsreader.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("fonts/newsreader-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Plex"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
/* Hindi: IBM Plex Sans Devanagari (OFL), fetched only when Devanagari text is on screen. */
@font-face { font-family: "Plex Deva"; src: url("fonts/plex-devanagari-400.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }

:root {
  --paper: #fbfaf2;
  --paper-2: #f2f0e4;
  --ink: #161c2d;
  --ink-2: #4c5263;
  --ink-3: #80859a;
  --rule: #e2dfd1;
  --card: #12172a;
  --card-2: #1d2439;
  --card-ink: #eceae0;
  --card-ink-2: #a5aabb;
  --mark: #f4dc4a;
  --mark-soft: rgba(244, 220, 74, 0.55);
  --red: #c2412f;
  --coral: #e8735a;
  --teal: #1f9e8f;
  --teal-soft: rgba(31, 158, 143, 0.12);
  --amber: #b7791f;
  --live: #4fb986;
  --serif: "Newsreader", "Plex Deva", "Iowan Old Style", Georgia, serif;
  --sans: "Plex", "Plex Deva", "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.5, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #2b55c7; outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -40px; background: var(--ink); color: var(--paper); padding: 6px 12px; border-radius: 8px; z-index: 50; }
.skip:focus { top: 10px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.dim { color: var(--ink-3); }

/* ---------------------------------------------------------------- nav */
.nav-wrap { position: sticky; top: 14px; z-index: 30; display: flex; justify-content: center; padding: 0 16px; }
.nav {
  display: flex; align-items: center; gap: 22px;
  background: rgba(255, 255, 252, 0.86); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--rule); border-radius: 999px; padding: 7px 7px 7px 20px;
  box-shadow: 0 6px 24px -18px rgba(22, 28, 45, 0.5); max-width: 100%;
}
.brand { font-family: var(--serif); font-weight: 560; font-size: 19px; text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; }
.nav ul { display: flex; gap: 20px; font-size: 14px; color: var(--ink-2); }
.nav ul a { text-decoration: none; }
.nav ul a:hover { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--paper); text-decoration: none; font-size: 14px; font-weight: 500; padding: 8px 15px; border-radius: 999px; white-space: nowrap; }

/* ---------------------------------------------------------------- buttons */
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px; }
.ctas.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-weight: 500; font-size: 15px; cursor: pointer;
  padding: 12px 20px; border-radius: 12px; border: 1.5px solid var(--ink);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--ink); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-mark { background: var(--mark); color: var(--ink); }
.btn-line { background: #fffffb; color: var(--ink); }

.bars { display: inline-flex; align-items: center; gap: 3px; height: 16px; }
.bars i { width: 3px; height: 4px; border-radius: 2px; background: var(--ink); }
.bars.mini i { animation: bar 900ms ease-in-out infinite; }
.bars.mini i:nth-child(2) { animation-delay: 120ms; }
.bars.mini i:nth-child(3) { animation-delay: 240ms; }
.bars.mini i:nth-child(4) { animation-delay: 360ms; }
@keyframes bar { 0%, 100% { height: 4px; } 50% { height: 14px; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; }
.eyebrow.light { color: var(--mark); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(79, 185, 134, 0.6); animation: ping 2s infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(79, 185, 134, 0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(79, 185, 134, 0); } }

.h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.02em; max-width: 20ch; }
.sub { margin-top: 14px; color: var(--ink-2); font-size: 16.5px; line-height: 1.55; max-width: 52ch; }
.sub.center { text-align: center; }

/* ---------------------------------------------------------------- hero */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: center;
  max-width: 1240px; margin: 0 auto; padding: 84px 32px 88px;
}
.hero h1 { margin-top: 18px; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.8vw, 82px); line-height: 0.99; letter-spacing: -0.028em; max-width: 13ch; }
.hero h1 em { font-style: italic; position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: -3%; right: -3%; top: 54%; height: 0.07em; background: var(--red); border-radius: 2px; transform: scaleX(0); transform-origin: left; animation: strike 700ms var(--ease) 900ms forwards; }
@keyframes strike { to { transform: scaleX(1); } }
.lede { margin-top: 24px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.fine { margin-top: 18px; font-size: 13px; color: var(--ink-3); }

.hero-card {
  position: relative; background: #fffffc; border: 1px solid var(--rule); border-radius: 22px; padding: 22px 24px 18px;
  box-shadow: 0 1px 0 #fff inset, 0 40px 80px -50px rgba(22, 28, 45, 0.6), 0 10px 22px -14px rgba(22, 28, 45, 0.2);
}
.hc-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.hc-q { font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 15px; }
.hc-row { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 8px; margin-top: 18px; }
.hc-val { border-radius: 16px; padding: 14px 16px 16px; display: grid; gap: 2px; }
.hc-val.prelim { background: #fbeee9; border: 1px solid #f1d2c8; }
.hc-val.amended { background: var(--teal-soft); border: 1px solid rgba(31, 158, 143, 0.35); opacity: 0; transform: translateX(-10px); animation: in-right 600ms var(--spring) 1500ms forwards; }
@keyframes in-right { to { opacity: 1; transform: none; } }
.hc-tag { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-2); }
.hc-num { font-family: var(--serif); font-size: 76px; line-height: 0.95; letter-spacing: -0.03em; }
.hc-val.prelim .hc-num { color: var(--coral); }
.hc-val.prelim s { text-decoration: none; position: relative; }
.hc-val.prelim s::after { content: ""; position: absolute; left: -8%; right: -8%; top: 52%; height: 4px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; animation: strike 500ms var(--ease) 1100ms forwards; }
.hc-val.amended .hc-num { color: var(--teal); }
.hc-unit { font-size: 13px; color: var(--ink-3); }
.hc-arrow { width: 70px; height: 24px; fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-dasharray: 4 5; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.hc-source { margin-top: 16px; background: var(--paper); border: 1px dashed #d6d2bf; border-radius: 12px; padding: 12px 14px; font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: #2a3042; }
.hc-file { display: block; font-family: var(--sans); font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.hc-source mark, .vw-text mark, mark.hl {
  background: linear-gradient(100deg, transparent 0.5%, var(--mark-soft) 2%, var(--mark-soft) 97%, transparent 99.5%);
  background-repeat: no-repeat; background-size: 0% 100%; color: inherit; border-radius: 3px; padding: 0 2px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; animation: hl 800ms var(--ease) 1900ms forwards;
}
@keyframes hl { to { background-size: 100% 100%; } }
.hc-answer { margin-top: 14px; font-family: var(--serif); font-size: 18px; line-height: 1.45; }
.hero-card figcaption { margin-top: 12px; font-size: 12.5px; color: var(--ink-3); }

/* verdict chips: color = meaning */
.verdict-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; vertical-align: 2px; margin-right: 6px; white-space: nowrap; }
.verdict-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.v-latest, .v-ok { color: #13786c; background: var(--teal-soft); }
.v-warn { color: #8a5a10; background: rgba(183, 121, 31, 0.13); }
.v-no { color: #a3301f; background: rgba(194, 65, 47, 0.11); }
.v-ask { color: #3b4ea8; background: rgba(59, 78, 168, 0.1); }

/* ---------------------------------------------------------------- film */
.film { max-width: 1180px; margin: 0 auto; padding: 0 32px 20px; scroll-margin-top: 80px; }
.film video { width: 100%; display: block; border-radius: 22px; background: #07080d; box-shadow: 0 50px 90px -60px rgba(22, 28, 45, 0.7); aspect-ratio: 16 / 9; }
@media (max-width: 620px) { .film { padding: 0 16px 10px; } .film video { border-radius: 14px; } }

/* ---------------------------------------------------------------- problem */
.problem { max-width: 1180px; margin: 0 auto; padding: 60px 32px 40px; }
.problem .h2 { margin: 0 auto; text-align: center; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.stat { display: grid; align-content: start; gap: 10px; text-decoration: none; background: #fffffb; border: 1px solid var(--rule); border-radius: 20px; padding: 24px 24px 20px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.stat:hover { transform: translateY(-3px); box-shadow: 0 18px 30px -24px rgba(22, 28, 45, 0.45); }
.stat-num { font-family: var(--serif); font-size: 64px; line-height: 1; letter-spacing: -0.03em; color: var(--coral); }
.stat-text { font-size: 15.5px; color: var(--ink); }
.stat-src { font-size: 12.5px; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 4px; }
.stat-src::after { content: " ↗"; }
.problem-kicker { margin-top: 36px; font-family: var(--serif); font-size: 21px; color: var(--ink-2); max-width: 54ch; }

/* ---------------------------------------------------------------- try (live desk) */
.try { max-width: 1280px; margin: 0 auto; padding: 100px 32px 40px; scroll-margin-top: 70px; }
.try-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.try-head .sub { margin: 0; }
.desk {
  margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 0;
  background: #fffffc; border: 1px solid var(--rule); border-radius: 26px; overflow: hidden;
  box-shadow: 0 50px 90px -60px rgba(22, 28, 45, 0.55), 0 10px 24px -18px rgba(22, 28, 45, 0.18);
  min-height: 660px;
}
.desk-left { padding: 22px 24px 24px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cases { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; background: var(--paper-2); padding: 5px; border-radius: 16px; }
.case-tab { text-align: left; border: 0; background: transparent; padding: 10px 14px; border-radius: 12px; cursor: pointer; display: grid; gap: 1px; transition: background 200ms var(--ease), box-shadow 200ms var(--ease); }
.case-tab b { font-weight: 600; font-size: 15px; }
.case-tab span { font-size: 12.5px; color: var(--ink-3); }
.case-tab[aria-selected="true"] { background: #fffffc; box-shadow: 0 4px 14px -8px rgba(22, 28, 45, 0.35); }

.askbar { display: flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--ink); border-radius: 16px; padding: 6px 6px 6px 16px; box-shadow: 0 3px 0 var(--ink); }
.askbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 18px/1.4 var(--serif); padding: 8px 0; color: var(--ink); }
.askbar input::placeholder { color: #a3a6b3; }
.ask-go { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--mark); cursor: pointer; display: grid; place-items: center; flex: none; }
.ask-go svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ask-go:disabled { opacity: 0.5; cursor: progress; }
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--rule); background: var(--paper); border-radius: 999px; padding: 6px 12px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); transition: all 160ms var(--ease); }
.chip:hover { border-color: var(--ink); color: var(--ink); background: #fff; }

.callbar { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 12px; background: var(--card); color: var(--card-ink); border-radius: 16px; padding: 10px 12px; }
.call-btn { display: inline-flex; align-items: center; gap: 10px; border: 0; cursor: pointer; background: var(--live); color: #0c1a14; font-weight: 600; font-size: 14.5px; padding: 10px 16px; border-radius: 12px; transition: background 200ms var(--ease), transform 160ms var(--ease); }
.call-btn:hover { transform: translateY(-1px); }
.call-ico { width: 14px; height: 14px; border-radius: 50%; background: #0c1a14; box-shadow: inset 0 0 0 3px var(--live); }
.callbar.live .call-btn { background: var(--coral); color: #fff; }
.callbar.live .call-ico { background: #fff; border-radius: 3px; box-shadow: none; }
.callbar.busy .call-btn { opacity: 0.7; cursor: progress; }
.call-meter { display: inline-flex; gap: 3px; align-items: center; height: 24px; }
.call-meter i { width: 4px; height: 4px; border-radius: 2px; background: #3a4258; transition: height 90ms linear, background 200ms; }
.callbar.live .call-meter i { background: var(--mark); }
.call-state { font-size: 13px; color: var(--card-ink-2); min-width: 0; }
.call-state b { color: var(--card-ink); font-weight: 500; }

.answer { border-radius: 18px; background: var(--paper); border: 1px solid var(--rule); padding: 18px 20px 18px; min-height: 210px; position: relative; }
.answer-empty { display: grid; gap: 6px; place-content: center; text-align: center; min-height: 170px; font-family: var(--serif); font-size: 18px; color: var(--ink-2); }
.answer-empty .dim { font-family: var(--sans); font-size: 13px; }
.a-q { font-size: 13px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-q .via { font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--card); color: var(--mark); }
.a-q q { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); quotes: "“" "”"; }
.a-lead { margin-top: 10px; font-family: var(--serif); font-size: 22px; line-height: 1.4; letter-spacing: -0.005em; }
.a-lead .w { opacity: 0; animation: word 380ms var(--ease) forwards; }
@keyframes word { from { opacity: 0; filter: blur(3px); } to { opacity: 1; filter: none; } }
.a-tools { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tool { border: 1px solid var(--rule); background: #fff; border-radius: 10px; padding: 5px 10px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.tool:hover { border-color: var(--ink); }
.cites { margin-top: 14px; display: grid; gap: 8px; }
.cite { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; border: 1px solid var(--rule); background: #fffffc; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: border-color 160ms, transform 160ms var(--ease), box-shadow 160ms; opacity: 0; transform: translateY(6px); animation: rise 420ms var(--ease) forwards; }
.cite:hover, .cite.on { border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.cite-n { grid-row: span 2; width: 22px; height: 22px; border-radius: 7px; background: var(--card); color: var(--mark); font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.cite-doc { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cite-q { font-family: var(--serif); font-size: 15.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
@keyframes rise { to { opacity: 1; transform: none; } }
.tagline { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 1px 6px; border-radius: 5px; }
.tag-amended, .tag-final, .tag-current { color: #13786c; background: var(--teal-soft); }
.tag-preliminary, .tag-superseded { color: #a3301f; background: rgba(194, 65, 47, 0.1); }
.skeleton { height: 14px; border-radius: 7px; background: linear-gradient(90deg, #ece9dc 0%, #f7f5ec 50%, #ece9dc 100%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; margin-top: 10px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.a-err { font-size: 14.5px; color: var(--red); }

.thread { display: grid; gap: 6px; }
.thread li button { width: 100%; text-align: left; border: 0; background: transparent; padding: 6px 4px; font-size: 13.5px; color: var(--ink-3); cursor: pointer; border-top: 1px dashed var(--rule); display: flex; gap: 8px; }
.thread li button:hover { color: var(--ink); }

.desk-right { background: #f6f4ea; display: flex; min-width: 0; }
.viewer { display: flex; flex-direction: column; width: 100%; min-width: 0; }
.viewer-bar { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); font-size: 13px; background: #fbfaf4; }
.viewer-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-meta { color: var(--ink-3); white-space: nowrap; }
.viewer-body { flex: 1; position: relative; overflow: auto; padding: 22px; min-height: 420px; }
.viewer-empty { height: 100%; min-height: 380px; display: grid; place-items: center; text-align: center; color: var(--ink-3); font-family: var(--serif); font-size: 18px; padding: 20px; }
.page {
  position: relative; margin: 0 auto; width: 100%; max-width: 560px; aspect-ratio: 595 / 400; overflow: hidden;
  background: #fff url() no-repeat top left / 100% auto; border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 20px 40px -26px rgba(22, 28, 45, 0.5);
  animation: page-in 500ms var(--ease);
}
@keyframes page-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
.page img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
.box { position: absolute; border-radius: 3px; background: var(--mark-soft); mix-blend-mode: multiply; outline: 2px solid rgba(214, 180, 20, 0.9); transform-origin: left center; animation: box-in 600ms var(--ease) both; }
.box.old { background: rgba(232, 115, 90, 0.28); outline-color: rgba(194, 65, 47, 0.75); }
@keyframes box-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.page.stacked { margin-top: 22px; animation-fill-mode: both; }
.page-note { max-width: 560px; margin: 12px auto 0; font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vw-text { max-width: 560px; margin: 0 auto; background: #fff; border-radius: 6px; padding: 26px 28px 30px; font-family: var(--serif); font-size: 16px; line-height: 1.65; color: #2a3042; box-shadow: 0 20px 40px -26px rgba(22, 28, 45, 0.5); animation: page-in 500ms var(--ease); white-space: pre-wrap; overflow-wrap: anywhere; }
.vw-text mark { animation-delay: 250ms; }
.vw-text .h { font-weight: 600; font-size: 19px; }
.doc-rail { display: flex; gap: 6px; padding: 10px 14px 14px; overflow-x: auto; border-top: 1px solid var(--rule); background: #fbfaf4; scrollbar-width: thin; }
.doc-rail button { flex: none; border: 1px solid var(--rule); background: #fff; border-radius: 10px; padding: 6px 10px; font-size: 12.5px; cursor: pointer; color: var(--ink-2); white-space: nowrap; }
.doc-rail button.on, .doc-rail button:hover { border-color: var(--ink); color: var(--ink); }
.engine-note { margin-top: 14px; text-align: center; font-size: 13px; color: var(--ink-3); min-height: 1.4em; }

/* ---------------------------------------------------------------- how */
.how { max-width: 1180px; margin: 0 auto; padding: 120px 32px 40px; position: relative; }
.how .h2 { margin: 0 auto; text-align: center; }
.pipe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 50px; position: relative; z-index: 1; }
.pipe li { background: #fffffb; border: 1px solid var(--rule); border-radius: 20px; padding: 22px 20px; }
.pipe-n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.pipe h3 { margin-top: 10px; font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.15; }
.pipe p { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.pipe li:first-child { background: var(--card); color: var(--card-ink); border-color: var(--card); }
.pipe li:first-child p, .pipe li:first-child .pipe-n { color: var(--card-ink-2); }
.pipe li:last-child { background: var(--mark); border-color: #e5cb33; }
.pipe-wire { display: none; }

/* ---------------------------------------------------------------- catches */
.catches { max-width: 1180px; margin: 0 auto; padding: 120px 32px 40px; }
.catches .h2 { margin: 0 auto; text-align: center; }
.catch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 44px; }
.catch { text-align: left; border: 1px solid var(--rule); background: #fffffb; border-radius: 20px; padding: 20px 20px 18px; cursor: pointer; display: grid; gap: 10px; align-content: start; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease), border-color 200ms; }
.catch:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.catch h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; line-height: 1.2; }
.catch-kind { justify-self: start; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.catch-kind.ok { color: #13786c; background: var(--teal-soft); }
.catch-kind.no { color: #a3301f; background: rgba(194, 65, 47, 0.1); }
.catch-kind.warn { color: #8a5a10; background: rgba(183, 121, 31, 0.13); }
.catch-demo { font-size: 14px; color: var(--ink-2); border-top: 1px dashed var(--rule); padding-top: 10px; }
.catch-demo s { color: var(--red); }
.catch-demo b { font-weight: 600; color: var(--ink); }
.catch-demo::after { content: "Ask it live →"; display: block; margin-top: 8px; font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- graph band */
.graph-band {
  max-width: 1240px; margin: 120px auto 0; border-radius: 30px; overflow: hidden; position: relative;
  background: radial-gradient(1200px 500px at 85% 20%, #1d2a52 0%, rgba(18, 23, 42, 0) 60%), var(--card);
  color: var(--card-ink); display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 24px;
  padding: 56px 0 56px 56px;
}
.graph-band .h2 { margin-top: 12px; }
.graph-band .sub { color: var(--card-ink-2); margin: 16px 0 26px; }
.graph-band .sub b { color: var(--card-ink); font-weight: 500; }
.graph-band .btn { border-color: var(--mark); }
.graph-band .btn:hover { box-shadow: 0 3px 0 var(--mark); }
.graph-mini { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------- status */
.status { max-width: 1120px; margin: 0 auto; padding: 120px 32px 40px; }
.status .h2 { margin: 0 auto; text-align: center; }
.status .sub { text-align: center; margin-left: auto; margin-right: auto; }
.cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.cols.two { grid-template-columns: 1.15fr 1fr; }
.cols > div { background: #fffffb; border: 1px solid var(--rule); border-radius: 20px; padding: 24px 24px 26px; }
.cols h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; }
.cols ul { margin-top: 14px; display: grid; gap: 10px; }
.cols li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.cols li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 11px; height: 3px; border-radius: 2px; background: var(--teal); }
.cols > div:nth-child(2) li::before { background: var(--mark); }

.closing { text-align: center; padding: 140px 32px 120px; }
.closing h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 80px); line-height: 1; letter-spacing: -0.025em; }
.foot { border-top: 1px solid var(--rule); padding: 26px 32px 40px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); max-width: 1240px; margin: 0 auto; }
.foot a { margin-left: 8px; }

/* ---------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal].on { opacity: 1; transform: none; }
.pipe[data-reveal] { opacity: 1; transform: none; }
.pipe[data-reveal] li, .cols[data-reveal] > div { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms); }
.pipe[data-reveal].on li, .cols[data-reveal].on > div { opacity: 1; transform: none; }
.cols[data-reveal] { opacity: 1; transform: none; }
.no-js [data-reveal], .no-js [data-reveal] * { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1060px) {
  .nav ul { display: none; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 56px; }
  .desk { grid-template-columns: 1fr; }
  .desk-left { border-right: 0; border-bottom: 1px solid var(--rule); }
  .stats, .catch-grid { grid-template-columns: 1fr 1fr; }
  .pipe { grid-template-columns: 1fr 1fr; }
  .graph-band { grid-template-columns: 1fr; padding: 40px 28px; margin: 80px 16px 0; }
}
@media (max-width: 620px) {
  .hero, .problem, .try, .how, .catches, .status { padding-left: 16px; padding-right: 16px; }
  .hero { padding-top: 40px; padding-bottom: 50px; }
  .hc-row { grid-template-columns: 1fr 34px 1fr; }
  .hc-arrow { width: 34px; }
  .hc-num { font-size: 54px; }
  .stats, .catch-grid, .pipe, .cols.two { grid-template-columns: 1fr; }
  .desk-left { padding: 16px; }
  .cases { grid-template-columns: 1fr 1fr; }
  .case-tab { padding: 8px 10px; }
  .callbar { grid-template-columns: auto 1fr; }
  .call-meter { display: none; }
  .viewer-body { padding: 14px; min-height: 300px; }
  .graph-band { border-radius: 22px; }
  .nav { gap: 12px; padding-left: 14px; }
  .try { padding-top: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-reveal] * { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------- your documents */
.case-own b::before { content: "+ "; color: var(--teal); }
.upload { display: grid; gap: 10px; }
.drop { position: relative; display: grid; gap: 4px; padding: 18px 20px; border: 1.5px dashed #c9c5b3; border-radius: 16px; background: #fffef8; cursor: pointer; transition: border-color 160ms, background 160ms; }
.drop:hover, .drop.over { border-color: var(--teal); background: var(--teal-soft); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop b { font-size: 15.5px; }
.drop span { font-size: 13px; color: var(--ink-3); }
.upl-list { display: grid; gap: 6px; }
.upl-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; }
.upl-list li b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upl-st { font-size: 12px; font-weight: 600; letter-spacing: 0.03em; padding: 2px 8px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; }
.upl-st.ok { background: var(--teal-soft); color: #13786c; }
.upl-st.bad { background: rgba(194, 65, 47, 0.1); color: #a3301f; }
.upl-st.busy::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 620px) { .cases { grid-template-columns: 1fr 1fr; } .case-own { grid-column: span 2; } }

/* ---------------------------------------------------------------- motion module (motion.bundle.mjs) */
/* Hero: the preliminary 5 flies along a spline into the amended value. JS
   owns the amended box's entrance while this runs, so its layout is final
   when the path is measured. */
.hc-motion .hc-val.amended { animation: none; opacity: 0; transform: none; }
.hc-motion .hc-d5 { opacity: 0; }
.hc-motion .hc-d0 { opacity: 0; display: inline-block; transform-origin: 30% 80%; }
.hc-ghost { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; will-change: transform; color: var(--coral); }
.hero-card { transform-style: preserve-3d; will-change: transform; }
/* How it works: a question travels an unseen spline through the steps. */
.pipe-token { position: absolute; left: 0; top: 0; z-index: 3; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--mark); box-shadow: 0 0 0 4px rgba(244, 220, 74, 0.25), 0 0 18px rgba(244, 220, 74, 0.85); opacity: 0; transition: opacity 300ms var(--ease); pointer-events: none; }
/* Live call: spline waveform replaces the bars. */
.call-meter.spline i { display: none; }
.call-meter canvas { display: block; }
/* Catch cards: the question flies to the answer desk. */
.catch-ghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; background: #fffffb; border: 1px solid var(--ink); border-radius: 12px; padding: 8px 12px; font-size: 14px; color: var(--ink-2); box-shadow: 0 18px 30px -20px rgba(22, 28, 45, 0.6); }
.catch-ghost s { color: var(--red); }
.catch-ghost b { color: var(--ink); }
/* 3D memory graph: fade the canvas edges into the band. */
.graph-3d { display: block; width: 100%; height: auto; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent); mask-image: radial-gradient(closest-side, #000 72%, transparent); }


/* ================================================================ v4: precision
   Learned from Linear, Raycast and Cardboard: the product is the illustration,
   structure is hairlines rather than tinted cards, colour only where it means
   something, and motion that is continuous and physically plausible. Every
   figure below is drawn from real values in the demo documents. */
:root {
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* replaced at runtime by a real spring as linear() */
  --spring-ms: 700ms;
  --plate: #f4f2e8;
  --teal-ink: #13786c;
  --red-ink: #a3301f;
  --amber-ink: #8a5a10;
  --blue-ink: #3048a8;
}
.nav-sound { border: 0; background: transparent; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); }
.nav-sound:hover { background: var(--paper-2); color: var(--ink); }
.nav-sound svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-sound.off .w1, .nav-sound.off .w2 { opacity: 0.15; }

kbd { font: 500 11px/1 var(--sans); min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 6px; background: #fff; color: var(--ink-2); flex: none; }
.tg { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--sans); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.tg::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.tg-red { color: var(--red-ink); background: rgba(194, 65, 47, 0.1); }
.tg-teal { color: var(--teal-ink); background: var(--teal-soft); }
.tg-amber { color: var(--amber-ink); background: rgba(183, 121, 31, 0.13); }
.tg-blue { color: var(--blue-ink); background: rgba(59, 78, 168, 0.1); }

/* Pointer spotlight on grid cells (set --mx/--my from JS). */
.stat, .catch { position: relative; isolation: isolate; }
.stat::before, .catch::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease);
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(244, 220, 74, 0.16), rgba(244, 220, 74, 0) 70%);
}
.stat:hover::before, .catch:hover::before, .catch:focus-visible::before { opacity: 1; }

/* ---------------------------------------------------------------- stats: three precise figures */
.stats { gap: 0; margin-top: 52px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stat { background: none; border: 0; border-radius: 0; padding: 30px 28px 26px; box-shadow: none; gap: 12px; transition: none; }
.stat + .stat { border-left: 1px solid var(--rule); }
.stat:hover { transform: none; box-shadow: none; }
.stat-fig { display: block; height: 168px; margin-bottom: 14px; position: relative; }
.stat-art { display: block; width: 100%; height: 100%; }
.stat-num { color: var(--ink); font-size: 60px; font-variant-numeric: lining-nums tabular-nums; }
.stat-text { font-size: 15.5px; color: var(--ink-2); }
.stat-live { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.stat-live b { color: var(--ink); font-weight: 600; }
.stat-src { border-top: 0; padding-top: 0; margin-top: 2px; }
.fig-results { display: grid; align-content: center; font: 400 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.rr { display: grid; grid-template-columns: 1.35fr 0.7fr 0.75fr 1fr; gap: 10px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--rule); color: var(--ink-2); white-space: nowrap; }
.rr:first-child { border-top: 1px solid var(--rule); }
.rr b { font-weight: 600; color: var(--ink); text-align: right; }
.rr > :last-child { text-align: right; color: var(--ink-3); }
.rr-lost, .rr-lost b, .rr-lost > :last-child { color: var(--red); }
.rr-lost [data-scramble] { filter: blur(0.5px); }

/* ---------------------------------------------------------------- catches: live product figures */
.catch-grid { gap: 0; margin-top: 48px; border-top: 1px solid var(--rule); }
.catch { background: none; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 26px 26px 22px; gap: 10px; box-shadow: none; transition: background 300ms var(--ease); }
.catch:nth-child(3n + 2), .catch:nth-child(3n + 3) { border-left: 1px solid var(--rule); }
.catch:hover, .catch:focus-visible { transform: none; box-shadow: none; border-color: var(--rule); background: rgba(255, 255, 255, 0.5); }
.catch h3 { font-size: 21px; }
.catch-kind { justify-self: start; font: 500 13px/1.2 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); background: none; padding: 0; }
.catch-q { margin-top: 4px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: italic 400 15px/1.35 var(--serif); color: var(--ink-3); transition: color 200ms; }
.catch-q q { quotes: "“" "”"; }
.catch:hover .catch-q, .catch:focus-visible .catch-q { color: var(--ink); }
.catch:hover kbd { border-color: var(--ink-3); color: var(--ink); }

.fig {
  --T: 7s;
  position: relative; display: block; height: 176px; padding: 18px; margin-bottom: 8px; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 12px; background-color: var(--plate);
  background-image: radial-gradient(rgba(22, 28, 45, 0.08) 1px, transparent 1.3px); background-size: 14px 14px; background-position: 6px 6px;
  font: 400 13px/1.3 var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; text-align: left;
}
.fig .card { background: #fff; border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 1px 2px rgba(22, 28, 45, 0.05); }
.fig.play * { animation-duration: var(--T); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--spring); }

/* 1. Corrections: the 5 is struck, the amended 50 is marked */
.fig-fix { display: grid; align-content: center; gap: 8px; }
.fx-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid var(--rule); border-radius: 8px; }
.fx-k { color: var(--ink-2); }
.fx-v { font: 500 15px/1 var(--sans); color: var(--ink); }
.fx-v s, .fx-v mark { font-weight: 600; text-decoration: none; position: relative; color: inherit; }
.fx-v s::after { content: ""; position: absolute; left: -3px; right: -3px; top: 52%; height: 1.5px; background: var(--red); transform-origin: left; }
.fx-v mark { background: linear-gradient(var(--mark), var(--mark)) no-repeat left 60% / 100% 70%; padding: 0 3px; margin: 0 -3px; }
.fx-old { opacity: 0.55; }
.fx-use { font-size: 12px; color: var(--teal-ink); display: flex; align-items: center; gap: 6px; padding-left: 2px; }
.fx-use::before { content: ""; width: 10px; height: 6px; border: solid currentColor; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg) translateY(-2px); }
.fig-fix.play .fx-old { animation-name: fx-old; animation-timing-function: var(--ease); }
.fig-fix.play .fx-v s::after { animation-name: fx-strike; animation-timing-function: var(--ease); }
.fig-fix.play .fx-new { animation-name: fx-new; }
.fig-fix.play .fx-v mark { animation-name: fx-mark; animation-timing-function: var(--ease); }
.fig-fix.play .fx-use { animation-name: fx-use; }
@keyframes fx-old { 0%, 30% { opacity: 1; } 40%, 92% { opacity: 0.55; } 100% { opacity: 1; } }
@keyframes fx-strike { 0%, 30% { transform: scaleX(0); } 38%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes fx-new { 0%, 10% { opacity: 0; transform: translateY(10px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes fx-mark { 0%, 42% { background-size: 0% 70%; } 52%, 92% { background-size: 100% 70%; } 100% { background-size: 100% 70%; } }
@keyframes fx-use { 0%, 54% { opacity: 0; transform: translateX(-6px); } 62%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 2. Units: same place in each reference range, different units, no comparison */
.fig-units { display: grid; align-content: center; gap: 4px; }
.un-row { display: grid; grid-template-columns: 30px 1fr 96px; gap: 12px; align-items: center; height: 36px; }
.un-d { font-size: 12px; color: var(--ink-3); }
.un-scale { position: relative; height: 20px; }
.un-scale::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; border-radius: 1px; background: rgba(22, 28, 45, 0.14); }
.un-scale::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 12px; background: repeating-linear-gradient(90deg, rgba(22, 28, 45, 0.25) 0 1px, transparent 1px 10%); }
.un-scale i { position: absolute; top: 3px; left: calc(83% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--plate); z-index: 1; }
.un-row:nth-child(2) .un-scale i { background: var(--teal); }
.un-v { text-align: right; font: 600 15px/1 var(--sans); color: var(--ink); }
.un-v small { font-weight: 400; font-size: 12px; color: var(--ink-3); }
.un-cmp { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.un-bar { flex: 1; height: 1.5px; background: repeating-linear-gradient(90deg, var(--red) 0 5px, transparent 5px 9px); transform-origin: left; }
.fig-units.play .un-scale i { animation-name: un-mark; }
.fig-units.play .un-row:nth-child(2) .un-scale i { animation-name: un-mark2; }
.fig-units.play .un-bar { animation-name: un-bar; animation-timing-function: var(--ease); }
.fig-units.play .un-cmp .tg { animation-name: pop-late; }
@keyframes un-mark { 0%, 6% { left: -7px; opacity: 0; } 20%, 92% { left: calc(83% - 7px); opacity: 1; } 100% { left: calc(83% - 7px); opacity: 0; } }
@keyframes un-mark2 { 0%, 16% { left: -7px; opacity: 0; } 30%, 92% { left: calc(83% - 7px); opacity: 1; } 100% { left: calc(83% - 7px); opacity: 0; } }
@keyframes un-bar { 0%, 38% { transform: scaleX(0); opacity: 1; } 50%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes pop-late { 0%, 50% { opacity: 0; transform: scale(0.8); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* 3. Patients: one question, two people, so it asks which */
.fig-who { display: grid; justify-items: center; align-content: center; }
.wh-q { font: italic 400 15px/1 var(--serif); color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 999px; padding: 7px 14px; }
.wh-fork { display: block; width: 62%; height: 28px; overflow: visible; }
.wh-fork path { fill: none; stroke: var(--ink-3); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wh-pts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.wh-p { background: #fff; border: 1px solid var(--rule); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--ink-2); text-align: center; white-space: nowrap; }
.wh-p b { font-weight: 600; color: var(--ink); margin-left: 4px; }
.wh-ask { margin-top: 12px; }
.fig-who.play .wh-q { animation-name: pop-in; }
.fig-who.play .wh-fork path { animation-name: wh-draw; animation-timing-function: var(--ease); }
.fig-who.play .wh-p { animation-name: wh-pt; }
.fig-who.play .wh-ask { animation-name: pop-late; }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.85); } 8%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wh-draw { 0%, 10% { stroke-dashoffset: 1; opacity: 1; } 26%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes wh-pt { 0%, 22% { opacity: 0; transform: translateY(-6px) scale(0.94); } 32%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 4. Contracts: the version line stops before an approval that never happened */
.fig-ver { display: grid; align-content: center; }
.vr-track { position: relative; height: 2px; margin: 0 16.66%; background: repeating-linear-gradient(90deg, rgba(194, 65, 47, 0.6) 0 5px, transparent 5px 10px); }
.vr-fill { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(0.5); }
.vr-nodes { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: -8px; text-align: center; }
.vr-n i { display: block; width: 14px; height: 14px; margin: 0 auto 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 4px var(--plate); }
.vr-b i { background: #fff; border-color: var(--amber); }
.vr-c i { background: var(--plate); border: 2px dashed var(--red); }
.vr-n b { display: block; font: 600 15px/1.2 var(--sans); color: var(--ink); }
.vr-c b { color: var(--red-ink); }
.vr-n small { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.fig-ver.play .vr-fill { animation-name: vr-fill; animation-timing-function: var(--ease); }
.fig-ver.play .vr-a { animation-name: pop-in; }
.fig-ver.play .vr-b { animation-name: vr-b; }
.fig-ver.play .vr-c { animation-name: vr-c; }
.fig-ver.play .vr-c i { animation-name: vr-ping; animation-timing-function: ease-out; }
@keyframes vr-fill { 0%, 8% { transform: scaleX(0); opacity: 1; } 34%, 92% { transform: scaleX(0.5); opacity: 1; } 100% { transform: scaleX(0.5); opacity: 0; } }
@keyframes vr-b { 0%, 28% { opacity: 0; transform: translateY(6px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vr-c { 0%, 44% { opacity: 0; } 52%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vr-ping { 0%, 54% { box-shadow: 0 0 0 4px var(--plate), 0 0 0 4px rgba(194, 65, 47, 0.35); } 70% { box-shadow: 0 0 0 4px var(--plate), 0 0 0 14px rgba(194, 65, 47, 0); } 100% { box-shadow: 0 0 0 4px var(--plate), 0 0 0 14px rgba(194, 65, 47, 0); } }

/* 5. Meetings: two things said, an empty decision */
.fig-meet { display: grid; align-content: center; }
.mt-row { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; min-height: 40px; border-bottom: 1px solid var(--rule); }
.mt-src { font-size: 12px; color: var(--ink-3); }
.mt-say { font: italic 400 15px/1.3 var(--serif); color: var(--ink); }
.mt-say::before { content: "“"; } .mt-say::after { content: "”"; }
.mt-dec { border-bottom: 0; padding-top: 6px; }
.mt-slot { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; border: 1px dashed rgba(22, 28, 45, 0.25); border-radius: 7px; background: rgba(255, 255, 255, 0.6); }
.mt-slot .tg { margin-left: auto; }
.mt-caret { width: 1.5px; height: 15px; background: var(--ink); }
.fig-meet.play .mt-row:nth-child(1) .mt-say { animation-name: mt-type1; animation-timing-function: steps(18, end); }
.fig-meet.play .mt-row:nth-child(2) .mt-say { animation-name: mt-type2; animation-timing-function: steps(6, end); }
.fig-meet.play .mt-dec { animation-name: mt-dec; animation-timing-function: var(--ease); }
.fig-meet.play .mt-caret { animation: blink 1s steps(1) infinite; }
.fig-meet.play .mt-slot .tg { animation-name: pop-late; }
@keyframes mt-type1 { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 24%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes mt-type2 { 0%, 26% { clip-path: inset(0 100% 0 0); opacity: 1; } 36%, 92% { clip-path: inset(0 0 0 0); opacity: 1; } 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes mt-dec { 0%, 38% { opacity: 0; transform: translateY(6px); } 46%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: 0; } }

/* 6. Absence: every file is read, no signature is found */
.fig-scan { display: grid; align-content: start; }
.sc-files { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-files span { font-size: 11.5px; line-height: 1; padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid var(--rule); color: var(--ink-2); }
.sc-files span:nth-child(n) { --i: 0; }
.sc-files span:nth-child(2) { --i: 1; } .sc-files span:nth-child(3) { --i: 2; } .sc-files span:nth-child(4) { --i: 3; }
.sc-files span:nth-child(5) { --i: 4; } .sc-files span:nth-child(6) { --i: 5; } .sc-files span:nth-child(7) { --i: 6; }
.sc-beam { position: absolute; left: 10px; right: 10px; top: 12px; height: 2px; border-radius: 2px; opacity: 0; background: linear-gradient(90deg, rgba(244, 220, 74, 0), var(--mark) 30%, var(--mark) 70%, rgba(244, 220, 74, 0)); box-shadow: 0 0 14px 2px rgba(244, 220, 74, 0.7); }
.sc-out { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--rule); font: 500 13px/1 var(--sans); color: var(--ink); }
.fig-scan.play .sc-beam { animation-name: sc-beam; animation-timing-function: var(--ease); }
.fig-scan.play .sc-files span { animation-name: sc-file; animation-timing-function: var(--ease); animation-delay: calc(var(--i) * 0.28s); }
.fig-scan.play .sc-out .tg { animation-name: sc-out; }
@keyframes sc-beam { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 40% { opacity: 1; transform: translateY(78px); } 46%, 100% { opacity: 0; transform: translateY(78px); } }
@keyframes sc-file { 0%, 4% { background: #fff; border-color: var(--rule); color: var(--ink-2); } 9% { background: #fffbe0; border-color: var(--mark); color: var(--ink); } 20%, 88% { background: rgba(255, 255, 255, 0.55); border-color: var(--rule); color: var(--ink-3); } 100% { background: #fff; border-color: var(--rule); color: var(--ink-2); } }
@keyframes sc-out { 0%, 50% { opacity: 0; transform: scale(0.85); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- the desk: a dark app window */
.desk {
  --ink: #eceae0; --ink-2: #b3b7c5; --ink-3: #7d8397; --rule: rgba(236, 234, 224, 0.09);
  --paper: #141a2d; --paper-2: #1a2035;
  --teal-ink: #62d5c3; --red-ink: #ff8f7c; --amber-ink: #f0c25e; --blue-ink: #9cb0ff;
  color: var(--ink); border: 1px solid #232b42; border-radius: 22px;
  background: radial-gradient(900px 420px at 15% -12%, rgba(244, 220, 74, 0.07), rgba(244, 220, 74, 0) 60%), #10152a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 70px 120px -70px rgba(16, 21, 42, 0.85), 0 24px 40px -32px rgba(16, 21, 42, 0.6);
}
.desk-left { padding: 18px 20px 22px; gap: 12px; border-right: 1px solid var(--rule); }
.cases { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 4px; background: rgba(255, 255, 255, 0.035); border: 1px solid var(--rule); border-radius: 12px; }
.case-tab { position: relative; z-index: 1; background: none; border: 0; border-radius: 9px; padding: 8px 12px; box-shadow: none; transform: none; transition: none; }
.case-tab b { font-size: 13.5px; font-weight: 500; color: var(--ink-2); transition: color 200ms; }
.case-tab span { font-size: 11.5px; color: var(--ink-3); }
.case-tab:hover b, .case-tab[aria-selected="true"] b { color: var(--ink); }
.case-tab[aria-selected="true"] { background: none; box-shadow: none; }
.no-ind .case-tab[aria-selected="true"] { background: rgba(255, 255, 255, 0.08); }
.case-ind { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 9px; pointer-events: none; background: rgba(255, 255, 255, 0.085); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 6px -2px rgba(0, 0, 0, 0.5); transition: transform var(--spring-ms) var(--spring), width var(--spring-ms) var(--spring), height var(--spring-ms) var(--spring); }
.case-own b::before { color: var(--teal-ink); }

.askbar { background: #0a0f20; border: 1px solid #2a3350; border-radius: 12px; padding: 5px 5px 5px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); transition: border-color 200ms, box-shadow 300ms var(--ease); }
.askbar:focus-within { border-color: rgba(244, 220, 74, 0.55); box-shadow: 0 0 0 4px rgba(244, 220, 74, 0.1); }
.askbar input { font: 400 16.5px/1.4 var(--sans); color: var(--ink); }
.askbar input::placeholder { color: #697087; }
.ask-go { width: 40px; height: 36px; border-radius: 8px; background: var(--mark); transition: transform 300ms var(--spring), box-shadow 200ms; }
.ask-go:hover { box-shadow: 0 0 0 4px rgba(244, 220, 74, 0.18); }
.ask-go:active { transform: scale(0.94); }
.ask-go svg { stroke: #10152a; }

.chips-row { display: grid; gap: 2px; padding: 0; }
.chip {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-radius: 8px; background: transparent;
  padding: 8px 10px; font-size: 14px; color: var(--ink-2); transform: none; box-shadow: none; transition: background 160ms, color 160ms;
}
.chip::before {
  content: ""; flex: none; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.04) center / 13px no-repeat;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23b3b7c5' stroke-width='1.4' stroke-linecap='round'><path d='M4 2.5h5l3 3v8H4z'/><path d='M6 8h4M6 10.5h3'/></svg>");
}
.chip::after { content: "Ask"; margin-left: auto; font-size: 11.5px; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 5px; padding: 3px 6px; opacity: 0; transition: opacity 160ms; }
.chip:hover, .chip:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--ink); border: 0; }
.chip:hover::after, .chip:focus-visible::after { opacity: 1; }
.chip-ghost { position: fixed; z-index: 70; margin: 0; pointer-events: none; background: #1d2439; color: var(--card-ink); border-radius: 8px; }
.chip-ghost::before, .chip-ghost::after { display: none; }

.callbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--rule); border-radius: 12px; padding: 7px 12px 7px 7px; }
.call-btn { border-radius: 8px; padding: 9px 14px; font-size: 13.5px; background: var(--live); color: #0b2018; transition: transform 300ms var(--spring), box-shadow 200ms, background 200ms; }
.call-btn:hover { transform: none; box-shadow: 0 0 0 4px rgba(79, 185, 134, 0.18); }
.call-ico { box-shadow: inset 0 0 0 3px var(--live); background: #0b2018; }
.callbar.live .call-btn { background: var(--coral); }
.callbar.live .call-btn::before { content: ""; position: absolute; inset: -1px; border-radius: 9px; border: 1.5px solid rgba(232, 115, 90, 0.8); animation: ring 1.8s var(--ease) infinite; pointer-events: none; }
@keyframes ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.18, 1.5); } }
.call-btn { position: relative; }
.call-meter { justify-self: stretch; height: 30px; min-width: 0; }
.call-meter canvas { width: 100% !important; }
.call-state { max-width: 200px; text-align: right; font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }

.answer { background: rgba(255, 255, 255, 0.025); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 20px; }
.answer-empty { color: var(--ink-2); }
.a-q .via { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; background: rgba(244, 220, 74, 0.12); color: var(--mark); }
.a-q q { color: var(--ink-2); }
.a-lead { color: var(--ink); }
.answer.printing { animation: resolve 560ms var(--ease) both; }
@keyframes resolve { from { opacity: 0.3; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.answer.printing .verdict-chip { animation: chip-in var(--spring-ms) var(--spring) 200ms both; }
@keyframes chip-in { from { opacity: 0; transform: scale(0.7); } to { opacity: 1; transform: none; } }
.desk .v-latest, .desk .v-ok, .desk .tag-amended, .desk .tag-final, .desk .tag-current { color: var(--teal-ink); background: rgba(98, 213, 195, 0.12); }
.desk .v-warn { color: var(--amber-ink); background: rgba(240, 194, 94, 0.12); }
.desk .v-no, .desk .tag-preliminary, .desk .tag-superseded { color: var(--red-ink); background: rgba(255, 143, 124, 0.12); }
.desk .v-ask { color: var(--blue-ink); background: rgba(156, 176, 255, 0.12); }
.desk .page-note .verdict-chip { box-shadow: none; }
.tool { background: rgba(255, 255, 255, 0.04); border-color: var(--rule); color: var(--ink-2); }
.tool:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--ink); }
.cite { background: rgba(255, 255, 255, 0.03); border-color: var(--rule); border-radius: 10px; }
.cite:hover, .cite.on { border-color: rgba(244, 220, 74, 0.55); box-shadow: 0 0 0 3px rgba(244, 220, 74, 0.08); }
.cite-n { background: var(--mark); color: #10152a; border-radius: 6px; }
.skeleton { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.04) 100%); background-size: 200% 100%; }
.a-err { color: var(--red-ink); }

.desk-right { background: #0b1023; }
.viewer-bar { background: transparent; border-bottom: 1px solid var(--rule); color: var(--ink-2); }
.viewer-empty { color: var(--ink-3); }
.page, .vw-text { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04), 0 40px 70px -36px rgba(0, 0, 0, 0.9); }
.doc-rail { background: transparent; border-top: 1px solid var(--rule); }
.doc-rail button { background: rgba(255, 255, 255, 0.04); border-color: var(--rule); color: var(--ink-2); border-radius: 8px; }
.doc-rail button.on, .doc-rail button:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--ink); }

.drop { background: rgba(98, 213, 195, 0.05); border: 1px dashed rgba(98, 213, 195, 0.4); border-radius: 12px; transition: background 200ms, border-color 200ms; }
.drop:hover, .drop.over { background: rgba(98, 213, 195, 0.1); border-color: var(--teal-ink); }
.upl-list li { background: rgba(255, 255, 255, 0.04); border-color: var(--rule); }
.upl-st { background: rgba(255, 255, 255, 0.06); color: var(--ink-2); }
.upl-st.ok { background: rgba(98, 213, 195, 0.12); color: var(--teal-ink); }
.upl-st.bad { background: rgba(255, 143, 124, 0.12); color: var(--red-ink); }
.upload[hidden] { display: none; }

/* ---------------------------------------------------------------- v4 responsive */
@media (max-width: 1060px) {
  .stat + .stat { border-left: 0; }
  .stat:nth-child(2) { border-left: 1px solid var(--rule); }
  .stat:nth-child(3) { grid-column: span 2; border-top: 1px solid var(--rule); }
  .catch:nth-child(3n + 2), .catch:nth-child(3n + 3) { border-left: 0; }
  .catch:nth-child(2n) { border-left: 1px solid var(--rule); }
}
@media (max-width: 620px) {
  .stat, .stat:nth-child(2), .stat:nth-child(3) { border-left: 0; grid-column: auto; padding: 26px 4px 24px; }
  .stat + .stat { border-top: 1px solid var(--rule); }
  .catch, .catch:nth-child(2n) { border-left: 0; padding: 22px 4px 20px; }
  .cases { grid-template-columns: repeat(3, 1fr); }
  .case-own { grid-column: auto; }
  .case-tab { padding: 8px 6px; text-align: center; }
  .case-tab span { display: none; }
  .callbar { grid-template-columns: auto minmax(0, 1fr); }
  .call-state { grid-column: 1 / -1; text-align: left; max-width: none; }
  .call-meter { display: block; }
  .rr { font-size: 13px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fig *, .fig.play * { animation: none !important; }
  .case-ind { transition: none; }
}
.catch-ghost { font: italic 400 15px/1.35 var(--serif); }
.catch-ghost kbd { display: none; }
.catch-ghost q { quotes: "“" "”"; }
.call-meter { opacity: 0.3; transition: opacity 300ms; }
.callbar.live .call-meter { opacity: 1; }
.desk .tagline { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; }
@media (max-width: 620px) {
  .viewer-meta { display: none; }
  .case-tab b { font-size: 12.5px; white-space: nowrap; }
  .case-tab { padding: 8px 4px; }
}

/* Call entry points exist only when the server advertises voice readiness.
   The landing starts without .voice-on; connect() adds it only after
   /api/public/status reports voice.ready, so a visitor never sees a call
   button that cannot mint a session. */
html:not(.voice-on) [data-start-call],
html:not(.voice-on) [data-call-link],
html:not(.voice-on) .callbar {
  display: none !important;
}

/* Plain unavailability disclosure: visible only while the server gate
   keeps voice off; hidden automatically once voice.ready returns. */
.voice-off { display: none; margin: 14px 0 0; font-size: 13.5px; color: var(--ink-2); }
html:not(.voice-on) .voice-off { display: block; }

/* ---------------------------------------------------------------- case documents */
.files-btn {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left;
  width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(236, 234, 224, 0.18); color: var(--ink);
  transition: background 200ms, border-color 200ms;
}
.files-btn[hidden] { display: none; }
.files-btn svg { grid-row: span 2; width: 22px; height: 22px; fill: none; stroke: var(--mark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.files-btn b { font-size: 13.5px; font-weight: 500; }
.files-btn span { font-size: 12px; color: var(--ink-3); }
.files-btn:hover { background: rgba(244, 220, 74, 0.06); border-color: rgba(244, 220, 74, 0.45); }
.case-files { max-width: 620px; margin: 0 auto; }
.case-files-intro { font: 400 16px/1.5 var(--serif); color: var(--ink-2); margin: 4px 2px 16px; }
.case-files-intro b { color: var(--ink); font-weight: 500; }
.viewer-note { max-width: 620px; margin: 0 auto 14px; font: italic 400 15px/1.4 var(--serif); color: var(--ink-3); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.file-card {
  position: relative; display: grid; gap: 4px; align-content: start; text-align: left; min-height: 108px; padding: 14px 14px 30px; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(236, 234, 224, 0.1); color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  animation: rise 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms);
  transition: border-color 200ms, transform 300ms var(--spring), background 200ms;
}
.file-card b { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.file-card span:not(.file-kind) { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.file-kind { justify-self: start; font: 600 10px/1 var(--sans); letter-spacing: 0.06em; padding: 4px 6px; border-radius: 4px; background: rgba(244, 220, 74, 0.12); color: var(--mark); margin-bottom: 4px; }
.file-card i { position: absolute; left: 14px; bottom: 10px; font-style: normal; font-size: 12px; color: var(--ink-3); transition: color 200ms; }
.file-card:hover, .file-card:focus-visible { border-color: rgba(244, 220, 74, 0.5); transform: translateY(-2px); background: rgba(255, 255, 255, 0.06); }
.file-card:hover i { color: var(--mark); }
@media (max-width: 620px) { .file-grid { grid-template-columns: 1fr; } .file-card { min-height: 0; } }

/* ---------------------------------------------------------------- hero replay (data-step states) */
.hc-loop .hc-val.amended { animation: none; opacity: 0; transform: translateX(-8px); transition: opacity 420ms var(--ease), transform 600ms var(--spring); }
.hc-loop[data-step="fix"] .hc-val.amended, .hc-loop[data-step="landed"] .hc-val.amended, .hc-loop[data-step="answer"] .hc-val.amended { opacity: 1; transform: none; }
.hc-loop .hc-val.prelim s::after { animation: none; transform: scaleX(0); transition: transform 420ms var(--ease); }
.hc-loop:is([data-step="fix"], [data-step="landed"], [data-step="answer"]) .hc-val.prelim s::after { transform: scaleX(1); }
.hc-loop .hc-source mark { animation: none; transition: background-size 700ms var(--ease); }
.hc-loop:is([data-step="scan"], [data-step="fix"], [data-step="landed"], [data-step="answer"]) .hc-source mark { background-size: 100% 100%; }
.hc-loop .hc-source { position: relative; overflow: hidden; transition: border-color 300ms, background 300ms; }
.hc-loop .hc-source::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(244, 220, 74, 0), rgba(244, 220, 74, 0.35), rgba(244, 220, 74, 0));
}
.hc-loop[data-step="scan"] .hc-source { border-color: #e7cf46; background: #fffdf2; }
.hc-loop[data-step="scan"] .hc-source::after { opacity: 1; animation: hc-scan 1000ms var(--ease) both; }
@keyframes hc-scan { from { left: -30%; } to { left: 100%; } }
.hc-loop .hc-val.amended { position: relative; }
.hc-loop .hc-val.amended::after { content: ""; position: absolute; inset: -1px; border-radius: 16px; border: 2px solid var(--teal); opacity: 0; pointer-events: none; }
.hc-loop[data-step="landed"] .hc-val.amended::after { animation: hc-ring 700ms var(--ease) both; }
@keyframes hc-ring { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } }
.hc-loop .hc-answer .verdict-chip { transform: scale(0.6); opacity: 0; transition: transform var(--spring-ms) var(--spring), opacity 200ms; }
.hc-loop[data-step="answer"] .hc-answer .verdict-chip { transform: none; opacity: 1; }
.hc-loop .hc-w { opacity: 0.3; filter: blur(0.6px); transition: opacity 260ms var(--ease), filter 260ms var(--ease); transition-delay: 0ms; }
.hc-loop[data-step="answer"] .hc-w { opacity: 1; filter: none; transition-delay: calc(140ms + var(--w) * 70ms); }
.hc-loop[data-step="rest"] .hc-w, .hc-loop[data-step="rest"] .hc-val.amended, .hc-loop[data-step="rest"] .hc-answer .verdict-chip { opacity: 0.35; transition-delay: 0ms; }
.hc-head { align-items: center; }
.hc-wave { width: 46px; height: 18px; margin-left: auto; margin-right: -4px; }
.hc-loop .hc-q { transition: color 300ms; }
.hc-loop[data-step="ask"] .hc-q { color: var(--ink); }
.hc-loop[data-step="ask"] .hc-q::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--live); vertical-align: 2px; animation: blink 0.9s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .hc-wave { display: none; } }

/* ---------------------------------------------------------------- desk colour: each case has its own hue */
.desk { --accent: 98 213 195; }
.desk:has(.case-tab[data-case="deal"][aria-selected="true"]) { --accent: 156 176 255; }
.desk:has(.case-tab[data-case="own"][aria-selected="true"]) { --accent: 240 194 94; }
.desk {
  background:
    radial-gradient(900px 440px at 12% -14%, rgb(var(--accent) / 0.11), rgb(var(--accent) / 0) 62%),
    radial-gradient(700px 420px at 105% 105%, rgb(var(--accent) / 0.06), rgb(var(--accent) / 0) 60%),
    #10152a;
}
.case-tab::before { content: ""; position: absolute; left: 12px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--tab-accent)); opacity: 0.55; transition: opacity 200ms; }
.case-tab { padding-left: 26px; }
.case-tab[data-case="health"] { --tab-accent: 98 213 195; }
.case-tab[data-case="deal"] { --tab-accent: 156 176 255; }
.case-tab[data-case="own"] { --tab-accent: 240 194 94; }
.case-own b::before { content: none; }
.case-tab[aria-selected="true"]::before { opacity: 1; box-shadow: 0 0 0 3px rgb(var(--tab-accent) / 0.18); }
.case-ind { background: rgb(var(--accent) / 0.13); box-shadow: inset 0 0 0 1px rgb(var(--accent) / 0.3), 0 2px 8px -2px rgb(0 0 0 / 0.5); }
.askbar:focus-within { border-color: rgb(var(--accent) / 0.6); box-shadow: 0 0 0 4px rgb(var(--accent) / 0.12); }
.chip { --k: var(--accent); }
.chip[data-kind="change"] { --k: 240 194 94; }
.chip[data-kind="who"] { --k: 156 176 255; }
.chip[data-kind="check"] { --k: 255 143 124; }
.chip::before { background-color: rgb(var(--k) / 0.12); border-color: rgb(var(--k) / 0.3); }
.chip:hover, .chip:focus-visible { background: rgb(var(--k) / 0.08); }
.chip:hover::after { border-color: rgb(var(--k) / 0.4); color: rgb(var(--k)); }
.files-btn svg { stroke: rgb(var(--accent)); }
.files-btn:hover { background: rgb(var(--accent) / 0.07); border-color: rgb(var(--accent) / 0.5); }
.file-kind { background: rgb(var(--accent) / 0.14); color: rgb(var(--accent)); }
.file-card:hover, .file-card:focus-visible { border-color: rgb(var(--accent) / 0.55); }
.file-card:hover i { color: rgb(var(--accent)); }
.answer { border-top: 2px solid rgb(var(--accent) / 0.45); }
.a-q .via { background: rgb(var(--accent) / 0.14); color: rgb(var(--accent)); }
@media (max-width: 620px) { .case-tab { padding-left: 20px; } .case-tab::before { left: 8px; } }

/* ---------------------------------------------------------------- dictation */
.askbar { position: relative; }
.dict-btn { --lvl: 0; position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.04); color: var(--ink-2); cursor: pointer; margin-right: 6px; transition: background 160ms, color 160ms, border-color 160ms; }
.dict-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.dict-btn:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.dict-btn:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; }