/* Lintel hero and walkthrough: one synthetic file, told in six short chapters.
   Scoped to .lsc. Uses the site's fonts and tokens from styles.css.
   Sizes inside the stage are in em, and the stage's em scales with its width,
   so a scene keeps its composition like a film frame.
   States: no class = static hero (no script, or the script failed);
   .js = space reserved for the film, hero still static;
   .is-live = the controller is running; .is-started / .is-ended = film / closing hero. */

.lsc {
  --lsc-paper: #F3EEE3;
  --lsc-ink: #1D1B18;
  --lsc-soft: #4B453D;
  --lsc-ox: #6E1D1B;
  --lsc-ox-deep: #521512;
  --lsc-brass: #A7823A;
  --lsc-proof: #B3261E;
  --lsc-serif: var(--serif, "Caslon Text", Georgia, serif);
  --lsc-display: var(--display, "Caslon Display", "Caslon Text", Georgia, serif);
  /* Lintel's own screens: a working web app in the system face, not paper. */
  --lsc-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lsc-ui-ink: #1E2024;
  --lsc-ui-soft: #5D616A;
  --lsc-ui-faint: #8B8F98;
  --lsc-ui-line: #E3E5E9;
  --lsc-ui-fill: #F5F6F8;
  --lsc-ui-ox-tint: #F6EAE8;
  --lsc-ui-ok: #1C7346;
  --lsc-ui-ok-tint: #E5F2EA;
  /* Page-level controls below the stage follow the page theme. */
  --lsc-ctl-ink: var(--oxblood, #6E1D1B);
  --lsc-ctl-line: var(--ink, #1D1B18);
  color: var(--ink, #1D1B18);
}
.lsc *, .lsc *::before, .lsc *::after { box-sizing: border-box; }

/* The frame is the size container. Inside it, the namesake: a course of brick,
   the oxblood beam, two square posts and a stone threshold, drawn the way the
   wordmark draws them. The story plays in the opening the beam carries. */
.lsc-frame { container: lsc / inline-size; }
.lsc-lintel {
  --course: 0.75em; --beam: 1.15em; --post: 0.55em; --over: 0.35em; --sill: 0.5em;
  --beam-ink: var(--oxblood, #6E1D1B); --post-ink: var(--ink, #1D1B18);
  position: relative;
  font: min(4.3cqi, 18px)/1.45 var(--lsc-serif);
  padding: calc(var(--course) + var(--beam)) calc(var(--over) + var(--post)) var(--sill);
  background:
    linear-gradient(rgb(226 199 127 / 0.6), rgb(226 199 127 / 0.6)) 50% calc(var(--course) + var(--beam) - 0.28em) / calc(100% - 1.4em) 1px no-repeat,
    linear-gradient(var(--beam-ink), var(--beam-ink)) 0 var(--course) / 100% var(--beam) no-repeat,
    linear-gradient(var(--post-ink), var(--post-ink)) left var(--over) top var(--course) / var(--post) 100% no-repeat,
    linear-gradient(var(--post-ink), var(--post-ink)) right var(--over) top var(--course) / var(--post) 100% no-repeat,
    linear-gradient(color-mix(in srgb, var(--post-ink) 28%, transparent), color-mix(in srgb, var(--post-ink) 28%, transparent)) 0 100% / 100% var(--sill) no-repeat;
}
/* The course: a bed joint along the top, head joints down to the beam. */
.lsc-lintel::before {
  content: ""; position: absolute; inset: 0 0 auto; height: var(--course); opacity: 0.55;
  background:
    linear-gradient(var(--post-ink), var(--post-ink)) 0 0.15em / 100% 0.12em no-repeat,
    repeating-linear-gradient(90deg, transparent 0 calc(12.5% - 0.12em), var(--post-ink) calc(12.5% - 0.12em) 12.5%) 6.25% 0 / 100% 100% no-repeat;
}
@container lsc (min-width: 900px) {
  .lsc-lintel { font-size: 1.6cqi; --course: 0.9em; --beam: 1.6em; --post: 1.1em; --over: 0.7em; --sill: 0.7em; }
}
.lsc-stage {
  position: relative;
  display: grid;
  overflow: hidden;
  font-variant-numeric: lining-nums;
  /* A lit document in the doorway: daylight palette whatever the page chooses. */
  color-scheme: light;
  color: var(--lsc-ink);
  background:
    radial-gradient(ellipse 80% 70% at 30% 35%, rgb(255 252 244 / 0.75), transparent 70%),
    #E9E1D0;
}
/* Reserved from first paint (theme.js sets .js), so the page does not move when
   the controller arrives. Content taller than this simply grows the stage. */
.js .lsc-stage, .lsc.is-live .lsc-stage { min-height: min(190cqi, 42em); }
@container lsc (min-width: 900px) {
  .js .lsc-stage, .lsc.is-live .lsc-stage { min-height: 52cqi; } /* about 16:9; a min, so long copy grows it */
}
.lsc-stage p, .lsc-stage h4 { margin: 0; }

/* The hero: first frame and last frame. */
.lsc-hero {
  display: grid; align-content: center; gap: 1em;
  padding: 1.6em 1.2em 2.8em;
  transition: opacity 0.6s ease;
}
.lsc-hero-copy { --proof: var(--lsc-proof); position: relative; }
.lsc-eyebrow { font-variant: small-caps; text-transform: lowercase; letter-spacing: 0.08em; color: var(--lsc-soft); font-size: 1.05em; }
:lang(zh) .lsc-eyebrow, :lang(hi) .lsc-eyebrow { font-variant: normal; text-transform: none; letter-spacing: 0.04em; }
.lsc-hero h1 { font: 2.35em/1.08 var(--lsc-display); letter-spacing: -0.01em; margin: 0; color: var(--lsc-ink); text-wrap: balance; }
:lang(fr) .lsc-hero h1, :lang(es) .lsc-hero h1 { font-size: 2.05em; }
:lang(zh) .lsc-hero h1, :lang(hi) .lsc-hero h1 { line-height: 1.3; }
.lsc-hero h1 .ins { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lsc-hero .hand { font-size: 1.45em; --hand-indent: 0.6em; margin: 0.7em 0 0.55em var(--hand-indent); color: var(--lsc-proof); }
:lang(es) .lsc-hero .hand { font-size: 1.25em; }
.lsc-hero-lede { font-size: 1.12em; max-width: 30em; }
.lsc-hero-price { font-size: 1.05em; }
.lsc-hero-price strong { color: var(--lsc-ox); }
.lsc-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7em 1em; margin-top: 0.3em !important; }
/* What it feels like, at a glance: shown beside the copy on wide screens. */
.lsc-hero .lsc-hero-chat { display: none; }

/* The keys, on the threshold, once the story is told. */
.lsc-keys { position: absolute; left: 50%; bottom: calc(var(--sill) - 0.15em); width: 5.6em; margin-left: -2.8em; pointer-events: none; opacity: 0; transform: translateY(-1.5em); }
.lsc-tag { font: 8px var(--lsc-serif); fill: #1D1B18; }
.lsc.is-ended .lsc-keys { opacity: 1; transform: none; transition: opacity 0.4s ease 0.5s, transform 0.7s cubic-bezier(0.3, 0.75, 0.3, 1.2) 0.5s; }

@container lsc (min-width: 900px) {
  .lsc-hero {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    grid-template-areas: "copy chat" "lede chat" "price chat" "actions chat";
    column-gap: 3.5em; row-gap: 1em; padding: 2em 3.4em 2.8em;
  }
  .lsc-hero-copy { grid-area: copy; }
  .lsc-hero-lede { grid-area: lede; font-size: 1.3em; }
  .lsc-hero-price { grid-area: price; font-size: 1.2em; }
  .lsc-hero-actions { grid-area: actions; }
  /* The phone stands on the stage floor, beside the copy. */
  .lsc-hero .lsc-hero-chat { display: block; position: relative; grid-area: chat; align-self: stretch; min-height: 26em; margin-bottom: -2.8em; font-size: 0.92em; }
  .lsc-hero h1 { font-size: 3.7em; }
  :lang(fr) .lsc-hero h1, :lang(es) .lsc-hero h1 { font-size: 2.9em; }
  :lang(zh) .lsc-hero h1, :lang(hi) .lsc-hero h1 { font-size: 2.9em; }
  .lsc-hero .hand { font-size: 2.1em; --hand-indent: 2.5em; }
  :lang(hi) .lsc-hero .hand { font-size: 1.7em; }
  :lang(es) .lsc-hero .hand { font-size: 1.45em; }
}

/* Buttons: words in a frame, like a door plate. */
.lsc-button {
  display: inline-flex; align-items: center; gap: 0.5em; min-height: 48px; padding: 0.5em 1.3em;
  font: 1.05em/1.15 var(--lsc-serif); text-decoration: none; cursor: pointer; border-radius: 2px;
  background: var(--lsc-ox); color: var(--lsc-paper);
  border: 2px solid var(--lsc-ox-deep);
  box-shadow: inset 0 0 0 3px var(--lsc-ox), inset 0 0 0 4px rgb(243 238 227 / 0.35), 0 2px 0 rgb(29 27 24 / 0.22);
}
.lsc-button:hover { background: var(--lsc-ox-deep); color: var(--lsc-paper); }
.lsc-button:focus-visible { outline: 3px solid var(--lsc-brass); outline-offset: 3px; }

/* Live: the hero gives way to the film and returns at the end. */
.lsc-scenes { display: none; list-style: none; margin: 0; padding: 0; }
.lsc.is-live .lsc-scenes { display: block; }
.lsc.is-live.is-started:not(.is-ended) .lsc-hero { opacity: 0; transition-duration: 0.3s; }

.lsc-scene {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.9em;
  padding: 1em 0.9em;
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.lsc-scene.is-active { opacity: 1; visibility: visible; transition: opacity 0.5s ease 0.15s; }
@container lsc (min-width: 900px) { .lsc-scene { padding: 1.4em 3em; } }
.lsc-chapter { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lsc-cap {
  font: 1.22em/1.2 var(--lsc-display);
  text-align: center; text-wrap: balance;
  min-height: 2.4em; display: block; align-content: center;
  max-width: 32em; justify-self: center;
}
@container lsc (min-width: 900px) { .lsc-cap { font-size: 1.55em; min-height: 1.3em; } }

/* Beats keep their place from the start, so nothing jumps. */
.lsc.is-live [data-at], .lsc.is-live [data-out] { transition: opacity 0.5s ease, transform 0.5s ease; }
.lsc.is-live [data-at]:not(.is-on), .lsc.is-live [data-out].is-past { opacity: 0; transform: translateY(0.35em); }

/* Two screens tell the story: the lawyer's own phone (mail, then the
   conversation with Jane A in Lintel), and brief cutaways to Lintel on the
   desktop for the file log and the searches. Nothing in either is a control. */

/* On wide stages a phone chapter sets its caption beside the handset. */
@container lsc (min-width: 900px) {
  .lsc-scene:has(> .lsc-hold) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 3.5em; padding-bottom: 0; }
  .lsc-scene > .lsc-hold .lsc-phone { left: auto; right: 0; translate: none; }
  .lsc-scene > .lsc-hold ~ .lsc-cap { grid-area: 1 / 2; align-self: center; justify-self: start; max-width: 12em; margin-bottom: 1.2em; text-align: start; font-size: 2.1em; line-height: 1.15; }
}

/* The desktop: Lintel's web app, with its sidebar on wide stages. */
.lsc-win {
  position: relative; display: flex; flex-direction: column; min-height: 0;
  width: 100%; max-width: 55em; justify-self: center; overflow: hidden;
  font: 0.84em/1.45 var(--lsc-ui); color: var(--lsc-ui-ink); background: #FFF;
  border: 1px solid rgb(20 22 28 / 0.16); border-radius: 0.8em;
  box-shadow: 0 1px 2px rgb(20 22 28 / 0.06), 0 0.9em 2.2em rgb(50 38 20 / 0.2);
}
.lsc-side { display: none; list-style: none; margin: 0; padding: 0.9em 0.6em; font-size: 0.92em; line-height: 1.25; color: var(--lsc-ui-soft); background: var(--lsc-ui-fill); border-right: 1px solid var(--lsc-ui-line); }
.lsc-side li { padding: 0.5em 0.7em; border-radius: 0.5em; }
.lsc-side li + li { margin-top: 0.15em; }
.lsc-side .lsc-brand { display: flex; align-items: center; gap: 0.55em; margin-bottom: 0.7em; font-weight: 650; color: var(--lsc-ui-ink); }
.lsc-side .is-cur { font-weight: 600; color: var(--lsc-ui-ink); background: #FFF; box-shadow: inset 0.18em 0 0 var(--lsc-ox), 0 0 0 1px var(--lsc-ui-line); }
.lsc-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15em 0.6em;
  min-height: 3.1em; padding: 0.5em 1em; font-size: 0.92em; color: var(--lsc-ui-soft);
  border-bottom: 1px solid var(--lsc-ui-line);
}
.lsc-bar > span:nth-child(2) { font-weight: 600; color: var(--lsc-ui-ink); }
.lsc-bar-meta { margin-inline-start: auto; white-space: nowrap; font-size: 0.94em; font-variant-numeric: tabular-nums; }
/* The app uses the same soft-post icon as the site. */
.lsc-mark { flex: none; width: 1.55em; height: 1.55em; background: url("/icon.svg") center / cover; }
@container lsc (min-width: 900px) {
  .lsc-win:has(> .lsc-side) { display: grid; grid-template-columns: 11em minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
  .lsc-win > .lsc-side { display: block; grid-area: 1 / 1 / 4; }
  .lsc-win:has(> .lsc-side) > :not(.lsc-side) { grid-column: 2; }
  .lsc-win:has(> .lsc-side) .lsc-bar > .lsc-mark { display: none; }
  .lsc-bar { padding-inline: 1.4em; }
}

/* The phone. It rises from below the frame, so the type stays phone-sized. */
.lsc-hold {
  position: relative; min-height: 0;
  -webkit-mask: linear-gradient(#000 calc(100% - 2.2em), transparent);
          mask: linear-gradient(#000 calc(100% - 2.2em), transparent);
}
.lsc-phone {
  position: absolute; top: 0; bottom: -1em; left: 50%; translate: -50% 0;
  display: flex; flex-direction: column;
  width: min(100%, 24.5em); overflow: hidden;
  font: 0.86em/1.4 var(--lsc-ui);
  color: #1F1F22; background: #FFF;
  border: 0.55em solid #1C1D21; border-bottom: 0; border-radius: 3.2em 3.2em 0 0;
  box-shadow: 0 0 0 1px #4A4C52, 0 1.2em 2.4em rgb(30 28 24 / 0.28);
}
@container lsc (min-width: 900px) {
  .lsc-phone { width: min(100%, 27em); font-size: 0.82em; }
}
/* The camera island. */
.lsc-phone::before { content: ""; position: absolute; z-index: 4; top: 0.5em; left: 50%; width: 6.4em; height: 1.75em; margin-left: -3.2em; border-radius: 1em; background: #0B0B0C; }
.lsc-ph-status { flex: none; display: flex; justify-content: space-between; align-items: center; height: 2.7em; padding: 0.2em 1.7em 0 2.1em; font-weight: 600; font-size: 0.95em; font-variant-numeric: tabular-nums; }
.lsc-ph-bars {
  width: 3.9em; height: 0.75em;
  background:
    linear-gradient(#1F1F22, #1F1F22) 0 100% / 0.22em 35% no-repeat,
    linear-gradient(#1F1F22, #1F1F22) 0.32em 100% / 0.22em 55% no-repeat,
    linear-gradient(#1F1F22, #1F1F22) 0.64em 100% / 0.22em 78% no-repeat,
    linear-gradient(#1F1F22, #1F1F22) 0.96em 100% / 0.22em 100% no-repeat,
    linear-gradient(#1F1F22, #1F1F22) 100% 50% / 0.14em 40% no-repeat,
    linear-gradient(#1F1F22, #1F1F22) calc(100% - 0.4em) 50% / 1.25em 70% no-repeat;
  border-radius: 1px;
}

/* 1. Mail, the phone's own: blue, plain, no Lintel. */
.lsc-ph-nav { padding: 0.3em 1em 0.5em; color: #1A62D6; font-size: 1.02em; }
.lsc-ph-nav span::before { content: "\2039"; display: inline-block; margin-inline-end: 0.3em; font-size: 1.6em; line-height: 0.6; vertical-align: -0.12em; }
.lsc-mail { padding: 0 1.1em 1.2em; }
.lsc-mail h4 { font-size: 1.3em; font-weight: 600; line-height: 1.22; margin-bottom: 0.7em !important; text-wrap: balance; }
.lsc-mail-from { display: grid; grid-template-columns: 2.5em 1fr; column-gap: 0.7em; font-size: 0.9em; line-height: 1.35; color: #5F6368; }
.lsc-mail-from p { grid-column: 2; }
.lsc-mail-from p:first-of-type { display: flex; justify-content: space-between; gap: 0.6em; }
.lsc-mail-from strong { color: #1F1F22; font-size: 1.08em; }
.lsc-mail-av { grid-row: span 3; align-self: start; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: #DCE7F8; color: #1A4FA8; font-weight: 600; font-size: 0.95em; }
.lsc-mail-body { margin-top: 0.9em; font-size: 0.98em; }
.lsc-mail-body p + p { margin-top: 0.55em !important; }
.lsc-mail-file {
  display: flex; align-items: center; gap: 0.7em; margin-top: 0.9em !important; padding: 0.5em 0.7em;
  border: 1px solid #DADCE0; border-radius: 0.7em; font-size: 0.9em; line-height: 1.25;
}
.lsc-mail-file > span:last-child { display: grid; min-width: 0; }
.lsc-mail-file strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsc-mail-file small { color: #5F6368; font-size: 0.88em; }
.lsc-pdf { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.6em; border-radius: 0.3em; background: #D93025; color: #FFF; font-size: 0.72em; font-weight: 700; letter-spacing: 0.03em; }
.lsc-mail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55em; margin-top: 0.9em !important; }
.lsc-mail-acts > span[aria-hidden] { padding: 0.35em 0.95em; border: 1px solid #C4C7CC; border-radius: 2em; color: #1A62D6; font-size: 0.92em; font-weight: 500; transition: background-color 0.3s ease, border-color 0.3s ease; }
.lsc-mail-acts > span[aria-hidden]::before { content: "\21A9"; margin-inline-end: 0.35em; }
.lsc-mail-acts > span[aria-hidden] + span[aria-hidden]::before { content: "\21AA"; }
/* The note points at Forward, and Forward lights up. */
.lsc-mail-acts:has(.lsc-scrawl.is-on) .lsc-fwd { background: #E3ECFB; border-color: #1A62D6; }

/* Other apps break in over the mail, the way phones do, and are swiped away. */
.lsc-ph-alerts { position: absolute; top: 2.6em; left: 0.5em; right: 0.5em; display: grid; list-style: none; margin: 0; padding: 0; }
.lsc-ph-alerts li {
  grid-area: 1 / 1; display: grid; gap: 0.05em; padding: 0.6em 0.9em 0.7em;
  background: rgb(244 245 247 / 0.94); border-radius: 1.2em; font-size: 0.92em; line-height: 1.3;
  box-shadow: 0 0.4em 1.4em rgb(0 0 0 / 0.18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lsc-ph-alerts li + li { z-index: 1; }
.lsc-ph-alerts span:last-child { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lsc-ph-app { display: flex; align-items: center; gap: 0.4em; color: #5F6368; font-size: 0.85em; }
.lsc-ph-app::before { content: ""; width: 1.15em; height: 1.15em; border-radius: 0.3em; background: #34C759; }
.lsc.is-live .lsc-ph-alerts:has(li + li.is-on) li.is-on:first-child { transform: translateY(0.6em) scale(0.94); }

/* A note in the lawyer's own hand. */
.lsc-scrawl { font: 500 1.6em/1.1 "Lintel Hand", cursive; color: var(--lsc-proof); rotate: -3deg; }
.lsc-mail-acts .lsc-scrawl { flex: 1 0 100%; text-align: end; margin-top: 0.15em; }
:lang(zh) .lsc-scrawl { font-family: "Lintel Hand ZH", cursive; font-weight: 400; }
:lang(hi) .lsc-scrawl { font-family: "Lintel Hand HI", cursive; font-weight: 400; }
.lsc-scrawl::before {
  content: ""; display: inline-block; inline-size: 1.1em; block-size: 0.9em; margin-inline-end: 0.2em; vertical-align: 0.1em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cpath d='M20 15 C 14 14, 8 10, 4 3 M4 3 L 3.2 9 M4 3 L 9.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 18'%3E%3Cpath d='M20 15 C 14 14, 8 10, 4 3 M4 3 L 3.2 9 M4 3 L 9.5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 2. The handoff: views stacked in one place, as on a phone. The forward
   sheet sits over the inbox, is sent and slides away; Jane A's message
   arrives as a banner; a tap opens the conversation over everything. */
.lsc-views { position: relative; flex: 1; min-height: 0; display: grid; }
.lsc-views > * { position: relative; grid-area: 1 / 1; min-height: 0; }
.lsc-inbox { padding: 0 1.1em; transition: opacity 0.4s ease; }
.lsc.is-live .lsc-views:has(> .lsc-compose:not(.is-past)) > .lsc-inbox { opacity: 0.35; }
.lsc-inbox-h { padding: 0.15em 0 0.35em; font-size: 1.85em; font-weight: 700; letter-spacing: -0.01em; }
.lsc-inbox-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6em; padding: 0.65em 0 0.7em; border-bottom: 1px solid #E6E7EA; line-height: 1.3; }
.lsc-inbox-row strong { font-weight: 600; }
.lsc-inbox-row span { font-size: 0.85em; color: #8A8D93; white-space: nowrap; }
.lsc-inbox-row b, .lsc-inbox-row small { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lsc-inbox-row b { font-weight: 400; }
.lsc-inbox-row small { font-size: 0.92em; color: #6B6E75; }

.lsc-compose {
  margin-top: 0.5em; padding: 0 1.1em 1em; background: #FFF;
  border-radius: 1em 1em 0 0; box-shadow: 0 -0.2em 1.2em rgb(0 0 0 / 0.14);
}
.lsc.is-live .lsc-compose.is-past { opacity: 0; transform: translateY(60%); transition: transform 0.55s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.35s ease 0.2s; }
.lsc-cmp-bar { display: flex; justify-content: space-between; align-items: center; padding: 0.7em 0 0.4em; color: #1A62D6; }
.lsc-cmp-send { position: relative; padding: 0.25em 0.95em; border-radius: 1em; font-weight: 600; color: #FFF; background: #1A62D6; transition: scale 0.15s ease; }
.lsc-cmp-send:has(.lsc-tap.is-on) { scale: 0.94; }
.lsc-compose h4 { padding: 0.25em 0 0.45em; font-size: 1.2em; font-weight: 650; line-height: 1.25; text-wrap: balance; }
.lsc-cmp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em 0.4em; padding: 0.5em 0; border-top: 1px solid #E6E7EA; color: #6B6E75; }
.lsc-token { padding: 0.08em 0.6em; border-radius: 1em; font-weight: 500; color: #1A4FA8; background: #E3ECFB; }
.lsc-addr { font-size: 0.88em; color: #8A8D93; }
.lsc-compose .lsc-typed { min-height: 3.4em; padding: 0.7em 0 0.6em; border-top: 1px solid #E6E7EA; }
.lsc-quoted { padding-inline-start: 0.8em; border-inline-start: 2px solid #C9CCD2; font-size: 0.86em; line-height: 1.4; color: #6B6E75; }
.lsc-quoted p:first-child { font-weight: 600; }
.lsc-quoted p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A message from Jane A, in Lintel's own banner. */
.lsc-banner {
  position: absolute; z-index: 3; top: 2.75em; left: 0.5em; right: 0.5em;
  display: grid; grid-template-columns: 2.35em minmax(0, 1fr); column-gap: 0.7em; row-gap: 0.05em;
  padding: 0.65em 0.9em 0.75em 0.75em; line-height: 1.3;
  background: rgb(244 245 247 / 0.96); border-radius: 1.3em;
  box-shadow: 0 0.5em 1.6em rgb(0 0 0 / 0.22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.lsc-banner::before { content: ""; grid-area: 1 / 1 / 4; align-self: center; width: 2.35em; height: 2.35em; border-radius: 0.6em; background: url("/icon.svg") center / cover; }
.lsc-banner > :not(.lsc-tap) { grid-column: 2; min-width: 0; }
.lsc-banner-app { display: flex; justify-content: space-between; gap: 0.6em; font-size: 0.82em; color: #6B6E75; }
.lsc-banner-app span { font-style: normal; }
.lsc-banner strong { font-weight: 600; }
.lsc-banner > span:nth-of-type(2) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.lsc.is-live .lsc-banner { transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.05), scale 0.15s ease; }
.lsc.is-live .lsc-banner:not(.is-on) { transform: translateY(-140%); }
.lsc.is-live .lsc-banner.is-past { transform: none; scale: 1.03; }
.lsc.is-live .lsc-banner:has(.lsc-tap.is-on) { scale: 0.97; }

/* A fingertip, drawn: where the lawyer taps. */
.lsc-tap {
  position: absolute; top: 50%; left: 62%; width: 2.6em; height: 2.6em; margin: -1.3em 0 0 -1.3em;
  border-radius: 50%; background: rgb(40 40 46 / 0.22); border: 2px solid rgb(255 255 255 / 0.9);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.14); pointer-events: none;
}
.lsc-cmp-send .lsc-tap { left: 50%; }
.lsc.is-live .lsc-tap { transition: opacity 0.2s ease, transform 0.25s ease-out; }
.lsc.is-live .lsc-tap:not(.is-on) { transform: scale(1.7); }

/* Lintel's conversation with Jane A: a quiet, ordinary chat. */
.lsc-dm { display: flex; flex-direction: column; min-height: 0; padding-bottom: 3.4em; background: #FFF; }
.lsc-phone > .lsc-dm { flex: 1; }
.lsc.is-live .lsc-views > .lsc-dm { transform-origin: 50% 0; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lsc.is-live .lsc-views > .lsc-dm:not(.is-on) { transform: translateY(-0.8em) scale(0.96); }
.lsc-dm-head { flex: none; display: flex; align-items: center; gap: 0.6em; padding: 0.3em 1em 0.6em 0.8em; border-bottom: 1px solid #ECEDF0; }
.lsc-dm-head::before { content: "\2039"; font-size: 1.9em; line-height: 0.6; color: var(--lsc-ox); }
/* Jane A's picture: a round portrait once approved; until then, her initials. */
.lsc-dm-av { flex: none; display: grid; place-items: center; width: 2.3em; height: 2.3em; overflow: hidden; border-radius: 50%; font-size: 0.92em; font-weight: 650; color: var(--lsc-ox); background: var(--lsc-ui-ox-tint); box-shadow: inset 0 0 0 1px rgb(110 29 27 / 0.16); }
.lsc-dm-av img { width: 100%; height: 100%; object-fit: cover; }
.lsc-dm-head > span:last-child { display: grid; min-width: 0; line-height: 1.2; }
.lsc-dm-head strong { font-weight: 600; }
.lsc-dm-head small { font-size: 0.82em; color: #6B6E75; }
.lsc-dm-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.3em; padding: 0.7em 0.85em 0.6em; overflow: hidden; }
.lsc-in, .lsc-out { max-width: 84%; padding: 0.5em 0.85em 0.55em; border-radius: 1.15em; line-height: 1.35; }
.lsc-in { align-self: flex-start; color: #1F1F22; background: #EFF0F3; border-end-start-radius: 0.35em; }
.lsc-out { align-self: flex-end; color: #FFF; background: var(--lsc-ox); border-end-end-radius: 0.35em; }
.lsc-in + .lsc-in { border-start-start-radius: 0.35em; }
.lsc-in + .lsc-out, .lsc-out + .lsc-in, .lsc-out + .lsc-note { margin-top: 0.45em; }
.lsc-stamp { align-self: center; margin: 0.35em 0 0.15em; font-size: 0.78em; font-weight: 500; color: #8A8D93; }
/* Events on the file, set like a chat's system line. */
.lsc-note { align-self: center; display: flex; gap: 0.45em; max-width: 92%; margin-block: 0.15em; font-size: 0.84em; line-height: 1.3; color: #5D616A; text-wrap: pretty; }
.lsc-note::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; font-size: 0.85em; font-weight: 700; color: var(--lsc-ui-ok); background: var(--lsc-ui-ok-tint); }
/* The lawyer's own steps carry the lawyer's mark: oxblood. */
.lsc-by-you { color: var(--lsc-ui-ink); }
.lsc-by-you::before { content: ""; background: radial-gradient(circle, var(--lsc-ox) 0 30%, var(--lsc-ui-ox-tint) 33%); }
.lsc-keys-out { font-weight: 600; color: var(--lsc-ui-ok); }
.lsc-keys-out::before { color: #FFF; background: var(--lsc-ui-ok); }
/* What only the lawyer can decide is marked as such. */
.lsc-in.lsc-judge { max-width: 92%; background: #FBF3F2; border: 1px solid #EBDAD7; }
.lsc-judge-h { display: inline-block; padding: 0.12em 0.55em; margin-bottom: 0.35em !important; border-radius: 1em; font-size: 0.74em; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lsc-ox); background: var(--lsc-ui-ox-tint); }
:lang(zh) .lsc-judge-h, :lang(hi) .lsc-judge-h { text-transform: none; letter-spacing: 0.02em; }
/* Jane A's checklist: what the file holds before the lawyer closes. */
.lsc-in.lsc-check { max-width: 92%; background: #FFF; border: 1px solid #E1E3E8; box-shadow: 0 1px 2px rgb(20 22 28 / 0.05); }
.lsc-check-h { margin-bottom: 0.35em !important; font-weight: 650; }
.lsc-check ul { display: grid; gap: 0.3em; margin: 0; padding: 0; list-style: none; font-size: 0.93em; line-height: 1.3; }
.lsc-check li { position: relative; padding-inline-start: 1.6em; }
.lsc-check li::before { content: "\2713"; position: absolute; inset-inline-start: 0; top: 0.08em; display: grid; place-items: center; width: 1.15em; height: 1.15em; border-radius: 50%; font-size: 0.85em; font-weight: 700; color: #FFF; background: var(--lsc-ui-ok); }

/* Typed and streamed text: what is not yet written keeps its place, unseen. */
.lsc-rest { color: transparent; }
.lsc-sr-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lsc-fresh { animation: lsc-fade 0.3s ease both; }
@keyframes lsc-fade { from { opacity: 0; } }
.lsc-caret { display: inline-block; width: 2px; height: 1.15em; margin: 0 -1px; vertical-align: -0.2em; background: var(--lsc-ox); animation: lsc-caret 1s steps(1) infinite; }
.lsc-compose .lsc-caret { background: #1A62D6; }
.is-typing .lsc-caret { animation: none; }
@keyframes lsc-caret { 50% { opacity: 0; } }
/* While a reply streams, a dot rides its last word. It takes no width, so nothing rewraps. */
.lsc-stream.is-typing .lsc-rest::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; margin-inline: 0.2em -0.75em; border-radius: 50%; background: currentColor; opacity: 0.55; vertical-align: 0.05em; }

/* The composer holds only what is in it now: a draft or the prompt. */
.lsc-composer {
  position: relative; flex: none; display: grid; align-content: center;
  margin: 0.2em 0.8em 0; padding: 0.45em 2.7em 0.45em 0.95em; min-height: 2.6em;
  background: #FFF; border: 1px solid #D5D8DE; border-radius: 1.4em;
}
.lsc.is-live .lsc-composer > :is([data-at], [data-out]):not(.is-on) { display: none; }
.lsc-ph { color: #8A8D93; }
.lsc-send {
  position: absolute; right: 0.3em; bottom: 0.3em; width: 1.95em; height: 1.95em;
  overflow: hidden; white-space: nowrap; color: transparent; border-radius: 50%;
  background: #DCDFE4; transition: background-color 0.2s ease;
}
.lsc-send::before {
  content: ""; position: absolute; inset: 0; background: #FFF;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15V5M5.5 9.5 10 5l4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 15V5M5.5 9.5 10 5l4.5 4.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.lsc-composer:has(.lsc-typed.is-on) .lsc-send { background: var(--lsc-ox); }

/* The file log: an activity feed. */
.lsc-entries { list-style: none; margin: 0; padding: 0.2em 0; }
.lsc-entries li {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.8em;
  padding: 0.6em 1em 0.65em 3.1em; border-bottom: 1px solid var(--lsc-ui-line);
}
.lsc-entries li:last-child { border-bottom: 0; }
/* Who moved: Jane A out (arrow), a reply in, or done. */
.lsc-entries li::before {
  content: "\2197"; position: absolute; left: 1em; top: 0.6em; display: grid; place-items: center;
  width: 1.6em; height: 1.6em; border-radius: 50%; font-size: 0.95em; line-height: 1;
  color: var(--lsc-ui-soft); background: var(--lsc-ui-fill); border: 1px solid var(--lsc-ui-line);
}
.lsc-entries .lsc-reply-in::before { content: "\2199"; color: var(--lsc-ui-ok); background: var(--lsc-ui-ok-tint); border-color: transparent; }
.lsc-entries .lsc-done::before { content: "\2713"; font-weight: 700; color: #FFF; background: var(--lsc-ui-ok); border-color: transparent; }
.lsc-entries time { grid-area: 1 / 2; font-size: 0.88em; color: var(--lsc-ui-soft); white-space: nowrap; font-variant-numeric: tabular-nums; padding-top: 0.08em; }
.lsc-via { grid-area: 1 / 1; font-weight: 600; }
.lsc-entries li > :last-child { grid-column: 1 / -1; color: var(--lsc-ui-soft); }
.lsc-entries q { quotes: "\201C" "\201D"; }
.lsc-reply-in .lsc-via, .lsc-done .lsc-via { color: var(--lsc-ui-ok); }
/* Jane A's call to Priya: logged like any call, with what was said. */
.lsc-entries .lsc-call::before {
  content: "";
  background: var(--lsc-ui-ox-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 2.8 8.4 5.5c.4.5.3 1.2-.1 1.6l-1.2 1c.8 1.8 2.1 3.1 3.9 3.9l1-1.2c.4-.5 1.1-.5 1.6-.1l2.7 2.2c.5.4.5 1.1.1 1.6l-1.3 1.4c-.6.6-1.5.8-2.3.5C8.6 15 5 11.4 3.6 7.2c-.3-.8-.1-1.7.5-2.3l1.4-1.3c.2-.4.4-.8.7-.8z' fill='%236E1D1B'/%3E%3C/svg%3E") center / 62% no-repeat;
  border-color: transparent;
}
.lsc-via small { margin-inline-start: 0.5em; padding: 0.05em 0.45em; border-radius: 0.4em; font-size: 0.82em; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--lsc-ui-soft); background: var(--lsc-ui-fill); }
.lsc-entries .lsc-call-lines { display: grid; gap: 0.3em; margin-top: 0.35em; padding: 0.55em 0.75em; border-radius: 0.6em; color: var(--lsc-ui-ink); background: var(--lsc-ui-fill); line-height: 1.35; }
.lsc-call-lines b { margin-inline-end: 0.45em; font-weight: 650; color: var(--lsc-ox); }
.lsc-call-lines p:nth-child(2) b { color: #1A4FA8; }
/* Heard: the line being spoken stands out; the rest wait, readable. */
.lsc.is-hearing .lsc-call-lines p { transition: opacity 0.25s ease; }
/* Narrow stages: the log already says the waiver is in; the status bar steps aside for the call. */
@container lsc (max-width: 899px) { .lsc-s-chase .lsc-status { display: none; } }
.lsc.is-hearing .lsc-call-lines p:not(.is-said), .lsc.is-hearing .lsc-call-lines p.is-said:has(+ p.is-said) { opacity: 0.45; }
/* The waiver in: a status line, in the app's own words. */
.lsc-status {
  display: flex; align-items: center; gap: 0.5em; margin-top: auto !important; padding: 0.7em 1em;
  font-weight: 600; color: var(--lsc-ui-ok); background: var(--lsc-ui-ok-tint); border-top: 1px solid #CFE5D8;
}
.lsc-status::before { content: "\2713"; flex: none; display: grid; place-items: center; width: 1.4em; height: 1.4em; border-radius: 50%; font-size: 0.85em; color: #FFF; background: var(--lsc-ui-ok); }
.lsc-status small { margin-inline-start: auto; font-size: 0.92em; font-weight: 400; color: var(--lsc-ui-soft); }
@container lsc (min-width: 900px) {
  .lsc-entries { padding: 0.4em 0.6em; }
  .lsc-entries li { padding-inline-end: 1.4em; }
  .lsc-status { padding-inline: 1.4em; }
}

/* Searches: result cards, each with its next step. */
.lsc-finds { flex: 1; display: grid; align-content: start; gap: 0.7em; padding: 1em; background: var(--lsc-ui-fill); }
.lsc-finds section { padding: 0.75em 0.95em 0.8em; background: #FFF; border: 1px solid var(--lsc-ui-line); border-radius: 0.7em; box-shadow: 0 1px 2px rgb(20 22 28 / 0.04); }
.lsc-finds h4 { font-size: 0.8em; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: var(--lsc-ui-soft); margin-bottom: 0.3em !important; }
:lang(zh) .lsc-finds h4, :lang(hi) .lsc-finds h4 { text-transform: none; letter-spacing: 0.02em; }
.lsc-so { display: flex; gap: 0.45em; margin-top: 0.6em !important; padding-top: 0.55em; border-top: 1px solid var(--lsc-ui-line); font-weight: 600; color: var(--lsc-ox); }
.lsc-so::before { content: "\2192"; flex: none; }
@container lsc (min-width: 900px) {
  .lsc-finds { gap: 0.8em; padding: 1.4em 1.6em; }
  .lsc-finds section { display: grid; grid-template-columns: 9em minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; column-gap: 1.4em; padding: 1em 1.2em; }
  .lsc-finds h4 { margin: 0 !important; }
  .lsc-so { margin: 0 !important; padding: 0 0 0 1.2em; border: 0; border-left: 1px solid var(--lsc-ui-line); }
}

/* Controls, below the stage, in the page's own theme. */
.lsc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin-top: 1rem; }
.lsc-controls[hidden] { display: none; }
.lsc-ctl {
  min-height: 48px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
  padding: 0 1em; cursor: pointer; font: 1.05rem/1.15 var(--lsc-serif);
  color: var(--lsc-ctl-ink); background: transparent; border: 1.5px solid var(--lsc-ctl-ink); border-radius: 2px;
}
.lsc-ctl:hover { background: color-mix(in srgb, var(--lsc-ctl-ink) 10%, transparent); }
.lsc-ctl svg { width: 1em; height: 1em; }
.lsc-i-pause, .is-playing .lsc-i-play { display: none; }
.is-playing .lsc-i-pause { display: inline; }
/* One play button: the hold before it plays by itself is a hairline filling it. */
.lsc-toggle { position: relative; overflow: hidden; }
.lsc-toggle::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--lsc-ctl-ink); transform: scaleX(0); transform-origin: left; }
.is-counting .lsc-toggle::after { transform: scaleX(1); transition: transform var(--lsc-hold, 8500ms) linear; }
/* Reduced motion steps chapter by chapter: the button starts and replays, nothing to pause. */
.is-manual.is-started:not(.is-ended) .lsc-toggle { display: none; }
.lsc-step { padding: 0; font-size: 1.7rem; }
.lsc-chapters { display: flex; flex: 1 1 12rem; gap: 3px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.lsc-chapters li { flex: var(--d, 1) 1 0; min-width: 0; }
.lsc-chapters button { position: relative; display: block; width: 100%; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.lsc-chapters button::before, .lsc-chapters button::after { content: ""; position: absolute; left: 0; top: 50%; height: 6px; margin-top: -3px; }
.lsc-chapters button::before { right: 0; background: color-mix(in srgb, var(--lsc-ctl-line) 16%, transparent); }
.lsc-chapters button::after { width: calc(var(--p, 0) * 100%); background: var(--lsc-ctl-ink); }
.lsc-chapters button[aria-current="step"]::before, .lsc-chapters button[aria-current="step"]::after { height: 10px; margin-top: -5px; }
.lsc-chapters button:hover::before { background: color-mix(in srgb, var(--lsc-ctl-line) 32%, transparent); }
.lsc-chapters span, .lsc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Sound is the reader's choice: one button, only on the chapter with the call. */
.lsc-hear[hidden] { display: none; }
.lsc-hear { padding-inline: 0.9em; flex-wrap: wrap; column-gap: 0.45em; row-gap: 0; }
.lsc-hear small { font-size: 0.78em; color: var(--ink-soft, #4B453D); }
.lsc.is-hearing .lsc-hear { background: color-mix(in srgb, var(--lsc-ctl-ink) 12%, transparent); }
.lsc-now { margin: 0 0 0 0.4rem; font-size: 1rem; color: var(--ink-soft, #4B453D); min-width: 8em; }
@container lsc (max-width: 899px) {
  .lsc-controls { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 0.5rem; }
  .lsc-controls[hidden] { display: none; }
  .lsc-toggle { grid-column: 1 / -1; justify-self: start; max-width: 100%; padding-inline: 0.8em; }
  .lsc-now { grid-column: 1 / -1; margin: 0; min-height: 1.5em; }
  .lsc-hear { grid-column: 1 / -1; justify-self: start; }
}
.lsc-ctl:focus-visible, .lsc-chapters button:focus-visible { outline: 3px solid var(--brass, #A7823A); outline-offset: 3px; }

/* Transcript */
.lsc-transcript { margin-top: 1.2rem; max-width: 46rem; border-top: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-bottom: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.lsc-transcript summary { cursor: pointer; padding: 0.8rem 0; min-height: 44px; font-size: 1.1rem; color: var(--oxblood, #6E1D1B); }
.lsc-transcript li { font-size: 1.05rem; margin-bottom: 0.6em; }

/* Phones: the stage runs edge to edge for larger type. */
@media (max-width: 640px) {
  .lsc-frame { margin-inline: calc(50% - 50vw); }
  .lsc-controls, .lsc-sr { padding-inline: 1rem; }
  .lsc-stage { border-radius: 0; }
}

/* Reduced motion: nothing moves; the reader steps through finished frames. */
@media (prefers-reduced-motion: reduce) {
  .lsc *, .lsc *::before, .lsc *::after { transition: none !important; animation: none !important; }
}
.is-manual * { transition: none !important; }

@media print {
  .lsc-controls { display: none; }
}