/* ============================================================
   PAAVYA HOMEPAGE (D-515)
   What it is, what it is like to use, who it is for, how to start.
   Rules in docs/marketing-home.md. Homepage only.

   The page's motion is the product's: each product window plays its
   own flow (a cursor, typing, a click, a task completing) and the
   sections themselves stay still. Two faces on purpose: DM Sans is
   the marketing site (D-249); the product views are drawn in Inter.
   ============================================================ */

:root {
  /* Product (app/paavya-design-tokens.css light theme, D-485). Every
     color a product view draws reads one of these, so the views follow
     the page's theme the way the app follows the reader's (D-574). */
  --p-page: #F3F4F5;
  --p-card: #FFFFFF;
  --p-sunken: #F7F8F8;
  --p-line: #E5E5E6;
  --p-divider: #D8D9DC;
  --p-control: #C4C5C9;
  --p-field: #7C7F86;
  --p-ink: #17181B;
  --p-head: #1F2023;
  --p-body: #282A30;
  --p-rail: #3C4149;
  --p-muted: #5E626A;
  --p-subtle: #676B72;
  --p-ok: #4A7538;
  --p-ok-bg: #EDF6E2;
  --p-ok-soft: #C9E3AC;
  --p-warn: #A85104;
  --p-warn-bg: #FFF1E0;
  --p-warn-tag: #FBE3C4;
  --p-warn-ink: #9A5200;
  --p-warn-soft: #FDE7C8;
  --p-bad: #C0303C;
  --p-bad-bg: #FDEDEE;
  --p-sel: #E2E3E6;
  --p-teal: #00645D;           /* a fill under white text: the same in both themes */
  --p-teal-ink: #00645D;       /* teal as text or an icon */
  --p-teal-edge: #00645D;      /* teal as a selected edge */
  --p-teal-deep: #004B45;
  --p-teal-soft: #A6E7E1;
  --p-teal-line: #BDEDEA;
  --p-tint: #E9FFFE;
  --p-plate: #1C1C1F;          /* the product's dark plate */
  --p-stage: #F3F4F5;          /* the band the hero window rises out of */
  --p-logo: none;              /* the rail's wordmark is ink in light */
}

/* THE PRODUCT IN DARK: app/paavya-design-tokens.css's html.dark ramp
   (Linear's neutrals, D-485), value for value. The two blocks below are
   the same declarations; tests/marketing-theme.test.mjs holds them equal. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --p-page: #0F1011; --p-card: #17181A; --p-sunken: #1D1E20;
    --p-line: #23252A; --p-divider: #2E3035; --p-control: #3E3E44; --p-field: #6B6F76;
    --p-ink: #F7F8F8; --p-head: #EDEEF0; --p-body: #D0D6E0; --p-rail: #B4B9C1;
    --p-muted: #9EA3AB; --p-subtle: #8A8F98;
    --p-ok: #A7D68C; --p-ok-bg: #14240E; --p-ok-soft: #2E4A22;
    --p-warn: #F2A24E; --p-warn-bg: #2E1D0A; --p-warn-tag: #2E1D0A; --p-warn-ink: #F5B573; --p-warn-soft: #4A3010;
    --p-bad: #F09AA2; --p-bad-bg: #2A1013; --p-sel: #222326;
    --p-teal-ink: #59D3CE; --p-teal-edge: #59D3CE; --p-teal-deep: #6FD4CB;
    --p-teal-soft: #134440; --p-teal-line: #134440; --p-tint: #0E2E2C;
    --p-logo: brightness(0) invert(.965); --p-stage: #17181A;
  }
}
:root[data-theme="dark"] {
    --p-page: #0F1011; --p-card: #17181A; --p-sunken: #1D1E20;
    --p-line: #23252A; --p-divider: #2E3035; --p-control: #3E3E44; --p-field: #6B6F76;
    --p-ink: #F7F8F8; --p-head: #EDEEF0; --p-body: #D0D6E0; --p-rail: #B4B9C1;
    --p-muted: #9EA3AB; --p-subtle: #8A8F98;
    --p-ok: #A7D68C; --p-ok-bg: #14240E; --p-ok-soft: #2E4A22;
    --p-warn: #F2A24E; --p-warn-bg: #2E1D0A; --p-warn-tag: #2E1D0A; --p-warn-ink: #F5B573; --p-warn-soft: #4A3010;
    --p-bad: #F09AA2; --p-bad-bg: #2A1013; --p-sel: #222326;
    --p-teal-ink: #59D3CE; --p-teal-edge: #59D3CE; --p-teal-deep: #6FD4CB;
    --p-teal-soft: #134440; --p-teal-line: #134440; --p-tint: #0E2E2C;
    --p-logo: brightness(0) invert(.965); --p-stage: #17181A;
}

/* ── The page's rhythm (D-619): more air between sections ──── */
main > .sec { padding: 96px 0; }
@media (min-width: 900px) { main > .sec { padding: 152px 0; } }
main > .sec-flush { padding-top: 0; }
.sec-head.centre { text-align: center; }
.sec-head.centre .h2, .sec-head.centre .lede { margin-left: auto; margin-right: auto; }
.h2-big { font-size: clamp(36px, 5.4vw, 68px); line-height: 1.02; letter-spacing: -0.035em; max-width: 15ch; }

/* ── Hero: copy over the ribbon ──────────────────────────────── */
.hero { display: flex; align-items: center; min-height: 72vh; padding: 64px 0 88px; }
@media (min-width: 900px) { .hero { min-height: 84vh; padding: 112px 0 128px; } }
/* The ribbon fades in under the nav and out toward the next section, so
   the copy sits in clear space and the band flows beneath it. */
.hero .ambient { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 86%, transparent); }
.hero-copy { text-align: center; }
.hero h1 { font-size: clamp(56px, 10vw, 128px); line-height: .96; letter-spacing: -0.045em; max-width: 12ch; margin: 0 auto; }
.hero h1 span { display: block; color: var(--h-muted); }
.hero-sub { margin: 34px auto 0; max-width: 46ch; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--h-muted); }
/* The category line (D-542): the one phrase that says what Paavya is, on a
   line of its own under the h1, in ink and a step larger than the sentence
   that follows. Below the heading, never a label above it (D-515). */
.hero-sub strong { display: block; margin-bottom: 8px; color: var(--h-ink); font-weight: 600; font-size: clamp(18px, 1.9vw, 22px); line-height: 1.35; letter-spacing: -0.01em; }
.hero-ctas { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.hero-note { margin-top: 20px; font-size: 14.5px; color: var(--h-muted); }
@media (max-width: 520px) { .hero-ctas .btn { width: 100%; } }

/* ── Arrivals (D-619) ──────────────────────────────────────────
   The hero's lines rise a little as the page opens, and the three
   product windows marked data-enter rise as they reach the screen
   (home.js adds .enter to the root, then .is-in to each). Nothing else
   on the page animates on scroll. Reduced motion: everything rests. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { animation: home-rise var(--dur-in) var(--ease-out) both; }
  .js .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .js .hero-copy > :nth-child(3) { animation-delay: 180ms; }
  .js .hero-copy > :nth-child(4) { animation-delay: 260ms; }
  .enter [data-enter] { opacity: 0; transform: translateY(36px); transition: opacity var(--dur-in) var(--ease-out), transform 760ms var(--ease-out); }
  .enter [data-enter].is-in { opacity: 1; transform: none; }
}
@keyframes home-rise { from { opacity: 0; transform: translateY(14px); } }

/* ── The product arrives: Today under a large centered line ───── */
.rise { max-width: 1120px; margin: 0 auto; }
.film-bar { max-width: 1120px; margin: 16px auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--h-muted); }
.film-ctl { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--h-line); background: var(--h-surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--h-ink); cursor: pointer; transition: border-color var(--dur-ctl) ease; }
.film-ctl:hover { border-color: var(--control); }
.facts { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--h-line); }
.facts li { padding: 16px 0; border-bottom: 1px solid var(--h-line); font-size: 16px; color: var(--h-muted); }
.facts b { color: var(--h-ink); font-weight: 600; }
.facts.three { max-width: 1120px; margin: 56px auto 0; border-top: 0; display: grid; gap: 0 40px; }
.facts.three li { border-bottom: 0; border-top: 1px solid var(--h-line); padding: 18px 0 0; }
@media (min-width: 900px) { .facts.three { grid-template-columns: repeat(3, 1fr); } }

/* ── The sticky stage: the decision, advanced by the scroll ────
   The section is tall; the stage inside it sticks for the length of
   the demonstration, and home.js maps the scroll through the section
   onto the screen's states. Only live (is-live) when the script runs,
   the screen is wide enough and motion is allowed; otherwise it is an
   ordinary section resting on the finished screen. */
.stage-sec.is-live { padding: 0; height: 340vh; }
.stage-sec.is-live .stage-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 88px 0 16px; box-sizing: border-box; }
.stage-pin .wrap { width: 100%; }
.stage-pin .sec-head { margin-bottom: 24px; }
.stage-pin .h2 { max-width: none; }
.stage-fig { --enter: 1; --release: 0; max-width: 1120px; margin: 0 auto; transform: translateY(calc((1 - var(--enter)) * 56px)) scale(calc(.955 + var(--enter) * .045 - var(--release) * .03)); opacity: calc(var(--enter) - var(--release) * .4); will-change: transform, opacity; }
.is-live .stage-fig { max-width: min(1120px, calc((100vh - 300px) * 1.6)); }
.beats { list-style: none; margin: 28px auto 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
@media (min-width: 900px) { .beats { grid-template-columns: repeat(4, 1fr); } .is-live .beats { max-width: min(1120px, calc((100vh - 300px) * 1.6)); } }
.beats li { padding-top: 12px; border-top: 2px solid var(--h-line); font-size: 14.5px; line-height: 1.45; color: var(--h-muted); transition: border-color 400ms ease, opacity 400ms ease; }
.beats b { display: block; color: var(--h-ink); font-weight: 600; margin-bottom: 2px; }
.is-live .beats li { opacity: .5; }
.is-live .beats li.is-now { opacity: 1; border-top-color: var(--h-brand); }

/* ── The numbered narrative: three points beside one stage ─────── */
.nar { display: grid; gap: 32px; }
.nar-item { position: relative; padding: 28px 0 32px; border-top: 1px solid var(--h-line); transition: opacity 400ms ease; }
.nar-n { font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--h-brand); font-variant-numeric: tabular-nums; }
.was { color: var(--h-muted); font-size: 16px; text-decoration: line-through; text-decoration-color: var(--h-strike); text-decoration-thickness: 1px; }
.nar-item .was { margin-top: 16px; }
.nar-item h3 { margin-top: 10px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.nar-item h3 + p { margin-top: 12px; color: var(--h-muted); max-width: 46ch; }
.nar-stage { position: relative; }
.nar-scene { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.985); transition: opacity 520ms var(--ease-out), transform 680ms var(--ease-out); pointer-events: none; }
.nar-scene.is-on { position: relative; opacity: 1; transform: none; }
.nar-scene .vp { --min-sm: .38; }
@media (min-width: 1000px) {
  .nar { grid-template-columns: minmax(0, .8fr) minmax(0, 1.45fr); gap: 72px; align-items: start; }
  .nar-stage { position: sticky; top: 108px; }
  .nar-item { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: .35; }
  .nar-item.is-now { opacity: 1; }
  .nar-item:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 999px) {
  .nar-stage { position: sticky; top: 80px; z-index: 2; order: -1; }
  .nar-copy { padding-top: 8px; }
}

/* ── The walkthrough: pill tabs, one stage ───────────────────── */
.tabbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-bottom: 40px; scroll-margin-top: 92px; }
.tabs { position: relative; flex: 0 1 auto; max-width: calc(100% + var(--gutter) * 2); display: flex; gap: 2px; padding: 4px; border-radius: var(--radius-pill); background: var(--h-surface); border: 1px solid var(--h-line); box-shadow: var(--shadow-soft); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); scroll-padding-inline: 4px; }
.tabs::-webkit-scrollbar { display: none; }
@media (min-width: 1100px) { .tabs { margin: 0; overflow: visible; } }
.tab {
  position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 7px; border-radius: var(--radius-pill); border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--h-muted);
  transition: color var(--dur-ctl) ease;
}
.tab:hover { color: var(--h-ink); }
.tab-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--h-well); font-size: 13px; font-weight: 600; color: var(--h-muted); transition: background-color var(--dur-ctl) ease, color var(--dur-ctl) ease; }
.tab[aria-selected="true"] { color: var(--h-ink); font-weight: 600; }
.tab[aria-selected="true"] .tab-n { background: var(--h-fill); color: #fff; }
/* The chosen pill slides under the tab (home.js measures it). */
.tab-ind { position: absolute; top: 4px; left: 0; height: calc(100% - 8px); width: var(--w, 0px); border-radius: var(--radius-pill); background: var(--h-well); transform: translateX(var(--x, 0px)); opacity: 0; transition: transform 420ms var(--ease-out), width 420ms var(--ease-out), opacity var(--dur-ctl) ease; }
.tabs.has-ind .tab-ind { opacity: 1; }
/* The tour's clock: a bar along the active tab's foot, filled over the
   step's run time. Drawn only while the tour is playing. */
.tab-p { position: absolute; left: 16px; right: 16px; bottom: 5px; height: 2px; border-radius: 2px; background: var(--h-brand); transform: scaleX(0); transform-origin: left; opacity: 0; }
.is-touring .tab[aria-selected="true"] .tab-p { opacity: 1; animation: home-fill var(--dur, 9s) linear forwards; }
@keyframes home-fill { to { transform: scaleX(1); } }
.auto { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--h-line); background: var(--h-surface); font: inherit; font-size: 14px; font-weight: 600; color: var(--h-ink); cursor: pointer; transition: border-color var(--dur-ctl) ease; }
.auto:hover { border-color: var(--control); }

/* Each step's screen is drawn near the app's own size: the copy takes a
   narrow column on the page's own left edge, and the screen runs past
   the column's right edge toward the window's (up to 160px). */
.walk { overflow-x: clip; }
.panel { display: grid; gap: 32px; align-items: start; }
@media (min-width: 1000px) {
  .panel { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
  .panel-view { margin-right: max(-160px, min(0px, (1200px + var(--gutter) * 2 - 100vw) / 2)); }
}
/* Below the two-column width the screen leads: the flow plays where the
   visitor is looking, and the words that explain it follow. */
@media (max-width: 999px) { .panel-view { order: -1; } }
.panel + .panel { margin-top: 64px; }
.js .panels .panel + .panel { margin-top: 0; }
.panel-copy h3 { font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; }
.panel-copy .lede { margin-top: 12px; font-size: 17px; }
.roles { margin: 28px 0 0; display: grid; gap: 14px; }
.roles div { display: grid; grid-template-columns: 84px 1fr; gap: 12px; font-size: 16px; line-height: 1.5; padding-top: 14px; border-top: 1px solid var(--h-line); }
.roles dt { font-size: 14px; font-weight: 600; color: var(--h-muted); }
.roles div:last-child dt { color: var(--h-brand); }
.roles dd { margin: 0; color: var(--h-ink-2); }
.panel-nav { margin-top: 20px; }
/* A chosen step: the words and the screen arrive together, on one stage. */
.panel.is-in .panel-copy { animation: home-swap 420ms var(--ease-out) both; }
.panel.is-in .panel-view { animation: home-view 560ms var(--ease-out) both; }
@keyframes home-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes home-view { from { opacity: 0; transform: translateY(14px) scale(.992); } to { opacity: 1; transform: none; } }

/* ── Split sections (Scribble, Trust) ─────────────────────────── */
.split { display: grid; gap: 48px; align-items: center; }
.split.top { align-items: start; }
.split > * { min-width: 0; }
@media (min-width: 1000px) { .split { grid-template-columns: 1fr 1.15fr; gap: 72px; } .split.flip > :first-child { order: 2; } .split.top { grid-template-columns: 1fr 1fr; } }

/* ── People ──────────────────────────────────────────────────── */
.people { display: grid; border-top: 1px solid var(--h-line); }
.person { padding: 28px 0; border-bottom: 1px solid var(--h-line); }
.person h3 { font-size: 21px; line-height: 1.3; }
.person p { margin-top: 10px; color: var(--h-muted); max-width: 60ch; }
@media (min-width: 900px) {
  .people { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .person { padding: 0 32px; border-bottom: 0; border-left: 1px solid var(--h-line); }
  .person:first-child { padding-left: 0; border-left: 0; }
}
.more { margin-top: 28px; }

/* ── How teams start: a sequence, so it is drawn as one ─────── */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.timeline li { position: relative; padding-left: 28px; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--h-brand); background: var(--h-canvas); }
.timeline li::after { content: ""; position: absolute; left: 6px; top: 22px; bottom: -28px; width: 1px; background: var(--h-line); }
.timeline li:last-child::after { display: none; }
.when { font-size: 14px; font-weight: 600; color: var(--h-brand); }
.timeline h3 { margin-top: 6px; font-size: 20px; line-height: 1.3; }
.timeline p { margin-top: 8px; color: var(--h-muted); }
@media (min-width: 900px) {
  .timeline { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .timeline li { padding: 32px 0 0; }
  .timeline li::before { top: 0; }
  .timeline li::after { left: 15px; right: -40px; top: 6px; bottom: auto; width: auto; height: 1px; }
}

/* ── Pricing ─────────────────────────────────────────────────── */
.price { display: grid; gap: 24px; align-items: center; padding: 40px 0; border-top: 1px solid var(--h-line); border-bottom: 1px solid var(--h-line); }
@media (min-width: 900px) { .price { grid-template-columns: 1.1fr 1fr auto; gap: 56px; } }
.price-big { font-size: clamp(36px, 4.4vw, 52px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; }
.price-big small { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; color: var(--h-muted); letter-spacing: 0; }
.price-sub { margin-top: 12px; color: var(--h-muted); }
.price ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; }
.price li { padding-left: 22px; position: relative; }
.price li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 5px; border-left: 2px solid var(--h-brand); border-bottom: 2px solid var(--h-brand); transform: rotate(-45deg); }

/* ════════════════════════════════════════════════════════════════
   THE PRODUCT VIEWS: the app, at the app's own size
   ════════════════════════════════════════════════════════════════
   Each window holds a screen drawn at the desk's real pixel size
   (the 1440-wide desk, or a crop of it) and scaled down to fit, the
   way a screenshot is. Every size, color and radius below was read
   off the running app (light theme, D-485) with the browser's
   computed styles, not chosen here: re-measure when the app moves.

   .win  the frame on the page: border, corner, shadow
   .vp   the visible part: --w x --h design pixels, scaled by --s
   .scr  the screen itself, at design size

   --s fits the screen to the frame's width. home.js measures it and
   sets --fit-js on the .win (outside the snapshot a film restores);
   before it runs, or without it, CSS works it out (tan(atan2(a, b))
   is a/b as a plain number). On a phone-width frame it stops at --min
   and the screen is cropped around --fx, the x it was framed on.  */
.win {
  position: relative; isolation: isolate; container-type: inline-size;
  border: 1px solid var(--p-divider); border-radius: var(--radius-win); overflow: hidden;
  background: var(--p-page); box-shadow: var(--shadow-win); text-align: left;
}
.vp {
  --fit: var(--fit-js, .6); --min: 0; --fx: 0;
  --s: max(min(var(--fit), 1), var(--min));
  position: relative; overflow: hidden;
  height: calc(var(--h) * var(--s) * 1px);
}
@supports (width: calc(tan(atan2(1px, 2px)) * 1px)) {
  .vp { --fit: var(--fit-js, tan(atan2(100cqw, calc(var(--w) * 1px)))); }
}
/* Only a phone-width frame crops (around --fx); a tablet, in any
   orientation or split, always shows the whole screen (D-588). */
@container (max-width: 440px) { .vp { --min: var(--min-sm, .5); } }
.scr {
  position: absolute; left: 0; top: 0;
  /* At full size (--s of 1) a frame wider than the screen is filled by
     the screen, not left with a blank band beside it. */
  width: max(calc(var(--w) * 1px), calc(100cqw / var(--s))); height: calc(var(--h) * 1px);
  transform-origin: 0 0; transform: scale(var(--s));
  translate: calc(-1 * clamp(0px, var(--fx) * var(--s) * 1px - 50cqw, var(--w) * var(--s) * 1px - 100cqw)) 0;
  /* the app's own body */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 24px; font-weight: 400; color: var(--p-body);
  letter-spacing: 0; background: var(--p-page); overflow: hidden;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
}
.scr *, .scr *::before, .scr *::after { box-sizing: border-box; }
.scr [hidden] { display: none !important; }
.scr b, .scr strong { font-weight: 600; }
.scr .t1, .scr .t2 { display: block; max-width: none; }
.scr p { margin: 0; }
.scr .ai { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scr .ai.s14 { width: 14px; height: 14px; }
.scr .ai.s17 { width: 17px; height: 17px; }
.scr .ai.s12 { width: 12px; height: 12px; }
.scr .ai.teal { color: var(--p-teal-ink); }

/* ── The desk: rail, topbar, column ────────────────────────────── */
.scr .ap { position: absolute; inset: 0; display: grid; grid-template-columns: 244px 1fr; }
.scr .ap.bare { grid-template-columns: 1fr; }
.scr .rail { display: flex; flex-direction: column; padding: 20px 14px 18px; border-right: 1px solid var(--p-line); background: var(--p-page); }
.scr .rail-logo { height: 26px; width: auto; margin: 0 0 6px 0; align-self: flex-start; filter: var(--p-logo); }
.scr .rail-items { display: flex; flex-direction: column; gap: 4px; flex: 1; margin-top: 15px; }
.scr .rail-i { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px; border-radius: 4px; color: var(--p-rail); font-size: 15px; line-height: 23px; }
.scr .rail-i .ai { color: var(--p-rail); }
.scr .rail-i.on { background: var(--p-sel); color: var(--p-ink); font-weight: 600; }
.scr .rail-i.on .ai { color: var(--p-ink); }
.scr .rail-gap { flex: 1; }
.scr .col { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.scr .top { flex: none; height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 18px 0 14px; background: var(--p-card); border-bottom: 1px solid var(--p-line); }
.scr .top .tog { color: var(--p-muted); margin-right: 13px; }
.scr .srch { width: 520px; height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 4px; background: var(--p-sunken); color: var(--p-muted); font-size: 13px; line-height: 20px; }
.scr .srch .grow { flex: 1; }
.scr .srch kbd { font: inherit; font-weight: 500; }
.scr .top .sp { flex: 1; }
.scr .tb { height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 4px; font-size: 15px; line-height: 22.5px; font-weight: 600; white-space: nowrap; }
.scr .tb.ol { background: var(--p-card); color: var(--p-head); border: 1px solid var(--p-divider); }
.scr .tb.pr { background: var(--p-teal); color: #fff; }
.scr .av { position: relative; width: 36px; height: 36px; margin-left: 2px; border-radius: 999px; display: grid; place-items: center; background: var(--p-teal-line); color: var(--p-teal-deep); font-size: 13px; font-weight: 600; }
.scr .av::after { content: ""; position: absolute; right: -2px; bottom: 0; width: 10px; height: 10px; border-radius: 999px; background: #59D3CE; border: 1px solid var(--p-card); }

/* The page under the topbar, and the docked footer over its foot */
.scr .pg { position: relative; flex: 1; min-height: 0; padding: 26px 32px 0; overflow: hidden; }
.scr .dock { position: absolute; left: 0; right: 0; bottom: 0; height: 71px; display: flex; align-items: center; gap: 12px; padding: 12px 32px; background: var(--p-card); border-top: 1px solid var(--p-line); z-index: 2; }
.scr .dock .sp { flex: 1; }
.scr .dock .dnote { font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .ticks { display: flex; align-items: center; gap: 12px; }
.scr .tk { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; line-height: 22.5px; font-weight: 600; color: var(--p-ok); transition: color 240ms ease; }
.scr .tk .ai { width: 14px; height: 14px; }
.scr .tk .o { display: none; }
.scr .tk.is-todo { color: var(--p-muted); }
.scr .tk.is-todo .ai:not(.o) { display: none; }
.scr .tk.is-todo .o { display: block; }
.scr .tk.run { color: var(--p-ok); }
.scr .tk .dotp { width: 5px; height: 5px; border-radius: 999px; background: var(--p-teal); margin: 0 4px; }

/* ── Buttons ───────────────────────────────────────────────────── */
.scr .btn-p, .scr .btn-o { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border-radius: 4px; font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: .15px; white-space: nowrap; border: 1px solid var(--p-teal); background: var(--p-teal); color: #fff; transition: background-color 240ms ease, border-color 240ms ease, opacity 240ms ease, box-shadow 240ms ease; }
.scr .btn-o { height: 40px; padding: 0 16px; background: var(--p-card); color: var(--p-body); border-color: var(--p-divider); }
.scr .btn-p.md { height: 40px; padding: 0 18px; }
.scr .btn-p.is-dim { opacity: .55; }
.scr .lnk { color: var(--p-teal-ink); font-size: 13px; line-height: 20px; text-decoration: underline; text-underline-offset: 2px; }
.scr .lnk.b { font-size: 15px; line-height: 24px; font-weight: 600; text-decoration: none; }

/* ── Page head: title, tabs, the seven-step rail ───────────────── */
.scr .ph { display: flex; align-items: flex-start; gap: 18px; }
.scr .ph .t1 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 300; letter-spacing: -.48px; color: var(--p-ink); white-space: nowrap; }
.scr .ph .ref { font-size: 15px; line-height: 24px; color: var(--p-muted); margin-top: 4px; white-space: nowrap; }
.scr .ph .sp { flex: 1; }
.scr .ph .t1, .scr .ph .ref { flex: none; }
.scr .ph-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.scr .chip-t { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 3px; background: var(--p-teal-soft); color: var(--p-teal-deep); font-size: 13px; line-height: 20px; }
.scr .ptabs { display: flex; gap: 1px; padding: 2px; border: 1px solid var(--p-line); border-radius: 4px; background: var(--p-sunken); }
.scr .ptabs span { height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 4px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--p-muted); white-space: nowrap; }
.scr .ptabs span.on { background: var(--p-card); color: var(--p-head); font-weight: 600; }
.scr .ptabs i { font-style: normal; color: var(--p-subtle); }
.scr .srail { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 16px; }
.scr .srail span { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); white-space: nowrap; }
.scr .srail span::before { content: ""; display: block; height: 4px; margin-bottom: 6px; border-radius: 3px; background: var(--p-divider); }
.scr .srail .dn::before { background: var(--p-teal); }
.scr .srail .dn i { font-style: normal; }
.scr .srail .dn i::before { content: "\2713\00A0"; }
.scr .brief .nx .lnk::after { content: "\00A0\2192"; }
.scr .srail .now { font-size: 15px; line-height: 22.5px; font-weight: 600; color: var(--p-ink); }
.scr .srail .now::before { background: var(--p-teal); box-shadow: 0 0 0 2px var(--p-card), 0 0 0 4px var(--p-teal-soft); }

/* The step brief: needed now · who · blocking · carried · next */
.scr .brief { display: flex; margin-top: 6px; background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; }
.scr .brief > div { padding: 12px 18px 18px; border-left: 1px solid var(--p-line); min-width: 0; }
.scr .brief > div:first-child { border-left: 0; }
.scr .brief .nx { margin-left: auto; display: flex; align-items: center; padding-right: 18px; white-space: nowrap; }
.scr .brief p.warn { color: var(--p-warn); }
.scr .brief p.mut { color: var(--p-muted); }
.scr .cap { display: block; font-size: 13px; line-height: 19px; font-weight: 500; letter-spacing: 1.17px; text-transform: uppercase; color: var(--p-subtle); margin-bottom: 3px; }
.scr .brief p { font-size: 15px; line-height: 24px; color: var(--p-head); }
.scr .brief small { display: block; margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .brief .lnk { display: inline-block; margin-top: 3px; }
.scr .warn { color: var(--p-warn); }
.scr .bad { color: var(--p-bad); }
.scr .ok { color: var(--p-ok); }
.scr .mut { color: var(--p-muted); }

/* ── Cards ─────────────────────────────────────────────────────── */
.scr .body { display: grid; gap: 18px; margin-top: 30px; align-items: start; }
.scr .body.c2 { grid-template-columns: minmax(0, 1fr) 376px; }
.scr .stack { display: grid; gap: 18px; align-content: start; min-width: 0; }
.scr .card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; padding: 18px 24px; min-width: 0; }
.scr .card.flush { padding: 0; }
.scr .card.tint { background: var(--p-tint); }
.scr .card .t2 { margin: 0; font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 1.17px; text-transform: uppercase; color: var(--p-muted); }
.scr .card.tint .t2 { color: var(--p-ok); }
.scr .card .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.scr .card .hd.pad { padding: 18px 24px; border-bottom: 1px solid var(--p-line); }
.scr .card .t { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--p-head); }
.scr .rchip { display: inline-flex; align-items: center; height: 32px; padding: 0 8px; border-radius: 999px; background: var(--p-sunken); color: var(--p-head); font-size: 15px; line-height: 22.5px; font-weight: 600; white-space: nowrap; }
.scr .rchip.tl { background: var(--p-tint); color: var(--p-ok); }
.scr .tag { display: inline-flex; align-items: center; height: 19px; padding: 0 6px; border-radius: 3px; font-size: 13px; line-height: 19px; font-weight: 600; white-space: nowrap; }
.scr .tag.warn { background: var(--p-warn-tag); color: var(--p-warn-ink); }
.scr .tag.ok { background: var(--p-ok-bg); color: var(--p-ok); }
.scr .tag.tl { background: var(--p-tint); color: var(--p-teal-ink); }
.scr .tag.grey { background: var(--p-page); color: var(--p-muted); }
.scr .tag.bad { background: var(--p-bad-bg); color: var(--p-bad); }

/* Decide: the read, the decision */
.scr .pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.scr .pillar { position: relative; padding: 12px; border-radius: 8px; background: var(--p-sunken); min-height: 112px; }
.scr .pillar small { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .pillar b { display: block; margin-top: 2px; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--p-head); }
.scr .pillar b.warn { color: var(--p-warn); }
.scr .pillar b.bad { color: var(--p-bad); }
.scr .pillar p { margin-top: 2px; font-size: 13px; line-height: 20px; color: var(--p-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scr .choice { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.scr .choice span { display: block; height: 76px; padding: 12px 18px; border-radius: 8px; border: 1px solid var(--p-line); background: var(--p-card); font-size: 15px; line-height: 24px; color: var(--p-muted); transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 160ms ease; }
.scr .choice b { display: block; font-size: 17px; line-height: 24px; font-weight: 600; color: var(--p-head); margin-bottom: 2px; }
.scr .choice span.on { background: var(--p-tint); border-color: var(--p-teal-edge); box-shadow: inset 0 0 0 1px var(--p-teal-edge); }
.scr .choice span.mute b, .scr .choice span.mute { color: var(--p-subtle); }
.scr .why { display: inline-block; margin-top: 12px; color: var(--p-teal-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.scr .risks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.scr .risks li { font-size: 15px; line-height: 24px; color: var(--p-head); }
.scr .risks li.warn { color: var(--p-warn); }

/* Decide on the stage: a pillar picked out, and the panel that opens over
   the column with what the recommendation rests on (the app's Panel). */
.scr .pillar.is-sel { background: var(--p-tint); box-shadow: inset 0 0 0 1.5px var(--p-teal-edge); }
.scr .ovl { position: absolute; z-index: 6; top: 0; right: 0; bottom: 0; width: 420px; display: flex; flex-direction: column; background: var(--p-card); border-left: 1px solid var(--p-line); box-shadow: -24px 0 48px -32px rgba(0, 0, 0, .25); transform: translateX(100%); opacity: 0; transition: transform 560ms var(--ease-out), opacity 320ms ease; }
.scr .ovl.is-open { transform: none; opacity: 1; }
.scr .ovl-h { flex: none; display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 24px; border-bottom: 1px solid var(--p-line); }
.scr .ovl-h .t2 { margin: 0; font-size: 15px; line-height: 24px; letter-spacing: 0; text-transform: none; color: var(--p-ink); }
.scr .ovl-x { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 4px; color: var(--p-muted); }
.scr .ovl-x .ai { transform: rotate(45deg); }
.scr .ovl-b { flex: 1; min-height: 0; padding: 18px 24px; overflow: hidden; }
.scr .ovl-b .cap { display: block; margin-top: 18px; }
.scr .ovl-b .cap:first-child { margin-top: 0; }
.scr .ovl-b p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--p-head); }
.scr .ovl-rows { margin: 8px 0 0; }
.scr .ovl-rows div { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 9px 0; border-top: 1px solid var(--p-line); font-size: 13px; line-height: 20px; }
.scr .ovl-rows dt { color: var(--p-muted); }
.scr .ovl-rows dd { margin: 0; color: var(--p-head); }
.scr .ovl-rows dd b { display: block; font-weight: 600; }
.scr .ovl-call { margin-top: 18px; padding: 14px 16px; border-radius: 8px; background: var(--p-tint); border: 1px solid var(--p-teal-line); opacity: .55; transition: opacity 400ms ease, box-shadow 400ms ease; }
.scr .ovl-call.is-hot { opacity: 1; box-shadow: 0 0 0 3px var(--p-teal-soft); }
.scr .ovl-call .t2 { color: var(--p-ok); }
.scr .ovl-call b { display: block; margin-top: 4px; font-size: 24px; line-height: 30px; font-weight: 300; letter-spacing: -.48px; color: var(--p-ink); }
.scr .ovl-call span { display: block; margin-top: 4px; font-size: 13px; line-height: 20px; color: var(--p-head); }
.scr .ovl-f { flex: none; display: flex; justify-content: flex-end; padding: 12px 24px; border-top: 1px solid var(--p-line); background: var(--p-sunken); }

/* Understand: key details, sources, the analysis */
.scr .kd { display: grid; grid-template-columns: 234px 1fr auto; align-items: center; gap: 0 24px; padding: 12px 24px; border-top: 1px solid var(--p-line); }
.scr .kd > span:first-child { color: var(--p-body); }
.scr .kd b { display: block; font-weight: 600; color: var(--p-head); }
.scr .kd small { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .kd small.warn { color: var(--p-warn); }
.scr .kd .ck { color: var(--p-ok); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.scr .also { padding: 12px 24px; border-top: 1px solid var(--p-line); font-size: 13px; line-height: 20px; color: var(--p-muted); display: flex; gap: 12px; }
.scr .src { display: grid; grid-template-columns: 156px 1fr auto; align-items: center; gap: 0 22px; padding: 10px 24px; border-top: 1px solid var(--p-line); position: relative; }
.scr .typ { display: inline-flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 10px; border: 1px solid var(--p-divider); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--p-head); }
.scr .src .nm { font-size: 15px; line-height: 24px; color: var(--p-head); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .src .nm small { color: var(--p-muted); font-size: 15px; }
.scr .src .bar { position: absolute; left: 202px; right: 24px; bottom: 6px; height: 3px; border-radius: 3px; background: var(--p-page); overflow: hidden; opacity: 0; }
.scr .src .bar::after { content: ""; position: absolute; inset: 0; background: var(--p-teal); transform-origin: 0 50%; transform: scaleX(var(--f, 0)); transition: transform var(--bt, 0ms) linear; }
.scr .src .bar.is-shown { opacity: 1; }
.scr .ana { list-style: none; margin: 0; padding: 0; }
.scr .ana li { display: grid; grid-template-columns: 16px 1fr; gap: 12px; padding: 11px 24px; border-top: 1px solid var(--p-line); font-size: 15px; line-height: 24px; color: var(--p-head); }
.scr .ana li .ai { margin-top: 4px; color: var(--p-ok); }
.scr .ana li .ai.sp { display: none; color: var(--p-teal-ink); animation: ap-spin .9s linear infinite; }
.scr .ana li.wait { color: var(--p-muted); }
.scr .ana li.wait .ai:first-child { display: none; }
.scr .ana li.wait .ai.sp { display: block; }
@keyframes ap-spin { to { transform: rotate(360deg); } }
.scr .ask { margin-top: 18px; height: 46px; display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--p-divider); border-radius: 4px; background: var(--p-card); color: var(--p-muted); }

/* Plan: the table */
.scr .seg2 { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--p-sunken); }
.scr .seg2 span { height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px; color: var(--p-muted); transition: background-color 240ms ease, color 240ms ease; }
.scr .seg2 span.on { background: var(--p-card); color: var(--p-head); font-weight: 600; box-shadow: 0 1px 2px rgba(7, 40, 38, .06); }
.scr .tbl { width: 100%; border-collapse: collapse; table-layout: fixed; }
.scr .tbl th, .scr .tbl td { text-align: left; vertical-align: middle; padding: 8px 12px; border-bottom: 1px solid var(--p-line); font-size: 15px; line-height: 24px; color: var(--p-body); }
.scr .tbl thead th { padding: 8px 12px; background: var(--p-sunken); font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 1.17px; text-transform: uppercase; color: var(--p-muted); }
.scr .tbl th:first-child, .scr .tbl td:first-child { padding-left: 24px; }
.scr .tbl tbody th { font-weight: 600; color: var(--p-head); }
.scr .tbl tbody th small { display: block; font-size: 13px; line-height: 19px; font-weight: 400; color: var(--p-warn); }
.scr .sel { position: relative; height: 40px; display: flex; align-items: center; padding: 0 34px 0 8px; border: 1px solid var(--p-field); border-radius: 4px; background: var(--p-card); color: var(--p-head); font-weight: 600; white-space: nowrap; overflow: hidden; }
.scr .sel::after { content: ""; position: absolute; right: 14px; top: 15px; width: 6px; height: 6px; border-right: 1.5px solid var(--p-muted); border-bottom: 1.5px solid var(--p-muted); transform: rotate(45deg); }
.scr .sel.empty { color: var(--p-muted); font-weight: 400; }
.scr .sel .who { display: block; }
.scr .due { color: var(--p-head); white-space: nowrap; }

/* Draft: sections, the editor, the Library */
.scr .dr { display: grid; grid-template-columns: 257px minmax(0, 1fr) 302px; gap: 18px; margin-top: 18px; align-items: start; }
.scr .secs { padding: 12px 8px; }
.scr .secs .cap2 { padding: 7px 12px 7px; font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 1.17px; text-transform: uppercase; color: var(--p-muted); }
.scr .dsec { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 4px; font-size: 15px; line-height: 24px; color: var(--p-head); }
.scr .dsec .ai { width: 14px; height: 14px; color: var(--p-teal-ink); }
.scr .dsec small { font-size: 13px; color: var(--p-muted); }
.scr .dsec.on { background: var(--p-tint); font-weight: 600; }
.scr .dsec .dt { width: 6px; height: 6px; margin-left: 4px; border-radius: 999px; background: var(--p-warn); }
.scr .ed { padding: 0; }
.scr .ed-h { display: flex; justify-content: space-between; gap: 18px; padding: 18px 24px 12px; border-bottom: 1px solid var(--p-line); }
.scr .ed-h .t2 { margin: 0; font-size: 24px; line-height: 30px; font-weight: 300; letter-spacing: -.48px; color: var(--p-ink); text-transform: none; }
.scr .ed-h p { margin-top: 2px; color: var(--p-muted); }
.scr .seg3 { display: inline-flex; padding: 2px; border-radius: 8px; background: var(--p-sunken); height: 44px; flex: none; }
.scr .seg3 span { height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px; color: var(--p-muted); }
.scr .seg3 span.on { background: var(--p-card); color: var(--p-head); font-weight: 600; }
.scr .ed-tools { display: flex; gap: 4px; padding: 6px 18px; border-bottom: 1px solid var(--p-line); }
.scr .ed-tools span { width: 40px; height: 40px; display: grid; place-items: center; font-weight: 600; color: var(--p-head); }
.scr .ed-txt { padding: 18px 24px; min-height: 236px; font-size: 16px; line-height: 26px; color: var(--p-body); }
.scr .ed-txt p + p { margin-top: 14px; }
/* An inserted Library answer is plain text in the editor, as in the app;
   while a scene plays it carries a wash for a moment so the eye finds it. */
.scr .ins { margin-left: -6px; margin-right: -6px; padding: 0 6px; border-radius: 4px; transition: background-color 1.4s ease; }
.scr .ins.is-new { background: var(--p-tint); transition: none; }
.scr .req { margin: 0 24px; padding: 10px 12px; border: 1px solid var(--p-line); border-radius: 4px; background: var(--p-sunken); font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .req b { color: var(--p-head); }
.scr .ed-f { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 24px; padding: 18px 0; border-top: 1px solid var(--p-line); }
.scr .ed-f small { font-size: 13px; color: var(--p-subtle); }
.scr .lib { padding: 18px; }
.scr .lib .t2 { color: var(--p-ok); }
.scr .match { margin-top: 12px; padding: 12px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); }
.scr .match b { display: block; font-size: 15px; line-height: 22px; color: var(--p-head); }
.scr .match p { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .match .mf { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }

/* Validate: the Library Card Scan */
.scr .scan-h { display: flex; align-items: flex-start; gap: 12px; padding: 12px 24px 0; }
.scr .scan-h .dotp { width: 5px; height: 5px; margin-top: 18px; border-radius: 999px; background: var(--p-teal); flex: none; }
.scr .scan-h .grow { flex: 1; min-width: 0; }
.scr .scan-h b { display: block; font-size: 17px; line-height: 24px; color: var(--p-head); }
.scr .scan-h small { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .prog { position: relative; height: 4px; margin: 12px 24px 12px; border-radius: 3px; background: var(--p-sunken); overflow: hidden; }
.scr .prog::after { content: ""; position: absolute; inset: 0; background: var(--p-teal); transform-origin: 0 50%; transform: scaleX(var(--f, 1)); transition: transform var(--bt, 0ms) linear; }
.scr .scan-b { display: grid; grid-template-columns: 429px 1fr; border-top: 1px solid var(--p-line); }
.scr .scan-doc { padding: 12px 18px; background: var(--p-sunken); }
.scr .sheet { position: relative; padding: 18px; background: var(--p-card); border: 1px solid var(--p-line); border-radius: 8px; height: 244px; overflow: hidden; }
.scr .sheet .cap { color: var(--p-muted); font-weight: 600; }
.scr .sheet .st { font-size: 17px; line-height: 24px; font-weight: 300; letter-spacing: -.34px; color: var(--p-ink); }
.scr .ln { display: block; height: 4px; margin-top: 6px; border-radius: 3px; background: var(--p-page); }
.scr .hl { display: flex; align-items: center; gap: 6px; margin: 8px -6px; padding: 4px 6px; border-radius: 4px; background: var(--p-tint); }
.scr .hl i { width: 136px; height: 4px; border-radius: 3px; background: var(--p-teal-soft); flex: none; }
.scr .hl b { font-size: 13px; line-height: 19px; color: var(--p-teal-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr .hl.warn { background: var(--p-warn-bg); }
.scr .hl.warn i { background: var(--p-warn-soft); }
.scr .hl.warn b { color: var(--p-warn); }
.scr .hl.ok { background: var(--p-ok-bg); }
.scr .hl.ok i { background: var(--p-ok-soft); }
.scr .hl.ok b { color: var(--p-ok); }
.scr .slist { list-style: none; margin: 0; padding: 0; }
.scr .slist li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 12px; height: 41px; padding: 0 18px; border-bottom: 1px solid var(--p-line); font-size: 15px; color: var(--p-muted); }
.scr .slist li small { font-size: 13px; color: var(--p-muted); }
.scr .slist .rd { width: 12px; height: 12px; margin: 0 2px; border-radius: 999px; border: 2px solid var(--p-divider); }
.scr .slist li.on { background: var(--p-tint); color: var(--p-head); font-weight: 600; }
.scr .slist li.on small { color: var(--p-teal-ink); font-weight: 400; }
.scr .slist li.on .rd { width: 16px; height: 16px; margin: 0; border-color: var(--p-teal-soft); border-top-color: var(--p-teal-edge); animation: ap-spin .9s linear infinite; }
.scr .slist li.dn { color: var(--p-head); }
.scr .slist li.dn .rd { display: none; }
.scr .slist li .ck { display: none; width: 14px; height: 14px; color: var(--p-ok); }
.scr .slist li.dn .ck { display: block; }
.scr .slist li.fx small { color: var(--p-warn); font-weight: 600; }
.scr .slist li.fx.fixed small { color: var(--p-ok); }
.scr .chks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 6px; padding: 12px 24px 14px; border-top: 1px solid var(--p-line); }
.scr .chks .cap { margin: 0 6px 0 0; color: var(--p-muted); font-weight: 600; }
.scr .chk { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border-radius: 999px; border: 1px solid var(--p-line); font-size: 13px; color: var(--p-muted); transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease; }
.scr .chk::before { content: ""; width: 7px; height: 7px; border-radius: 999px; border: 1px solid var(--p-divider); }
.scr .chk.on { background: var(--p-tint); border-color: var(--p-teal-soft); color: var(--p-teal-ink); font-weight: 600; }
.scr .chk.on::before { background: var(--p-teal); border-color: var(--p-teal); }

/* Submit: the package, delivery */
.scr .pkg { display: flex; align-items: center; gap: 12px; padding: 8px 24px 18px; }
.scr .pdf { width: 48px; height: 46px; display: grid; place-items: center; border-radius: 4px; background: var(--p-bad-bg); color: var(--p-bad); font-size: 13px; font-weight: 600; }
.scr .pkg .grow { flex: 1; }
.scr .pkg b { display: block; font-weight: 600; color: var(--p-head); }
.scr .pkg small { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .dl { display: grid; grid-template-columns: 140px 1fr; align-items: center; padding: 8px 24px; min-height: 41px; border-top: 1px solid var(--p-line); }
.scr .dl > span:first-child { color: var(--p-muted); }
.scr .dl.tall { align-items: start; padding-top: 10px; }
.scr .msg { padding: 10px 12px; border: 1px solid var(--p-field); border-radius: 4px; color: var(--p-head); height: 112px; overflow: hidden; }

/* Outcome: the result, the learning */
.scr .res { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.scr .res span { display: block; padding: 9px 8px 10px; border: 1px solid var(--p-line); border-radius: 4px; font-size: 13px; line-height: 20px; color: var(--p-muted); transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease, transform 160ms ease; }
.scr .res b { display: block; font-size: 15px; line-height: 23px; font-weight: 600; color: var(--p-head); }
.scr .res span.on { background: var(--p-tint); border-color: var(--p-teal-edge); box-shadow: inset 0 0 0 1px var(--p-teal-edge); }
.scr .fld { display: flex; align-items: center; height: 46px; padding: 0 12px; border: 1px solid var(--p-field); border-radius: 4px; color: var(--p-head); white-space: nowrap; }
.scr .fld.area { display: block; height: auto; min-height: 96px; padding: 10px 12px; white-space: normal; }
.scr .lr-h, .scr .lr { display: grid; grid-template-columns: minmax(0, 1fr) 52px 128px; gap: 12px; align-items: center; padding: 10px 24px; border-top: 1px solid var(--p-line); }
.scr .lr-h { font-size: 13px; line-height: 19px; font-weight: 600; letter-spacing: 1.17px; text-transform: uppercase; color: var(--p-muted); background: var(--p-card); }
.scr .lr b { display: block; color: var(--p-teal-ink); font-weight: 600; font-size: 15px; line-height: 22px; }
.scr .lr small { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .lr .pc { font-weight: 600; color: var(--p-head); }
.scr .lrbtn { justify-self: end; height: 32px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 4px; border: 1px solid var(--p-divider); background: var(--p-card); font-size: 13px; font-weight: 600; color: var(--p-body); white-space: nowrap; }
.scr .lr .nt { justify-self: end; font-size: 13px; color: var(--p-muted); }

/* Today */
.scr .td { padding: 36px 32px 0; }
.scr .td time { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .td .t1 { margin: 4px 0 0; font-size: 32px; line-height: 38px; font-weight: 300; letter-spacing: -.64px; color: var(--p-ink); }
.scr .askbar { display: flex; align-items: center; gap: 10px; width: 560px; height: 52px; margin-top: 24px; padding: 0 8px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); color: var(--p-muted); }
.scr .askbar .pl { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--p-tint); color: var(--p-teal-ink); }
.scr .askbar .grow { flex: 1; }
.scr .askbar .go { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; background: var(--p-page); color: var(--p-body); }
.scr .figs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 24px; }
.scr .fig { position: relative; height: 129px; padding: 18px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); }
.scr .fig .fl { display: flex; justify-content: space-between; font-size: 13px; line-height: 20px; color: var(--p-muted); white-space: nowrap; }
.scr .fig .fl .ai { color: var(--p-subtle); }
.scr .fig .fn { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.scr .fig .fn b { font-size: 24px; line-height: 30px; font-weight: 300; letter-spacing: -.48px; color: var(--p-head); font-variant-numeric: tabular-nums; }
.scr .fig small { display: block; margin-top: 4px; font-size: 13px; line-height: 19px; font-weight: 500; color: var(--p-muted); white-space: nowrap; }
.scr .fig .meter { position: absolute; left: 18px; right: 18px; bottom: 22px; height: 4px; border-radius: 999px; background: var(--p-sunken); }
.scr .fig .meter i { display: block; height: 100%; width: var(--m); border-radius: 999px; background: var(--p-teal); }
.scr .tdg { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.scr .recs { padding: 24px 32px 0; border-radius: 8px; background: #004B45; color: #fff; }
.scr .recs .rh { display: flex; align-items: center; justify-content: space-between; }
.scr .recs .t2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.17px; color: #fff; text-transform: none; }
.scr .recs .t2 .ai { color: #fff; }
.scr .recs .rh span { font-size: 13px; }
.scr .rec { display: grid; grid-template-columns: 18px 1fr; gap: 18px; padding: 18px 0; border-bottom: 1px solid #0A7A72; }
.scr .rec:last-child { border-bottom: 0; }
.scr .rec > span { font-size: 17px; line-height: 24px; font-weight: 300; }
.scr .rec b { display: block; font-size: 17px; line-height: 24px; font-weight: 400; }
.scr .rec small { display: block; margin-top: 4px; font-size: 13px; line-height: 20px; }
.scr .rec p { margin-top: 4px; font-size: 13px; line-height: 20px; }
.scr .rec .ra { display: flex; align-items: center; gap: 18px; margin-top: 12px; font-size: 13px; }
.scr .rec .wb { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; border-radius: 4px; background: #fff; color: #004B45; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform 160ms ease, box-shadow 240ms ease; }
.scr .anl { padding: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(7, 40, 38, .035); }
.scr .anl .ah { display: flex; align-items: center; justify-content: space-between; height: 53px; padding: 0 18px; border-bottom: 1px solid var(--p-line); }
.scr .anl .ah b { font-size: 17px; line-height: 24px; color: var(--p-head); }
.scr .anl .ab { padding: 18px 32px; display: grid; gap: 16px; }
.scr .anl small { display: block; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .anl strong { display: block; font-size: 15px; line-height: 22.5px; color: var(--p-head); }

/* Chat */
.scr .chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--p-page); }
.scr .chat-h { flex: none; display: flex; align-items: center; gap: 10px; height: 49px; padding: 0 24px; border-bottom: 1px solid var(--p-line); font-size: 17px; line-height: 24px; font-weight: 600; color: var(--p-head); }
.scr .chat-h .ai { width: 22px; height: 22px; color: var(--p-teal-ink); }
.scr .thread { flex: 1; min-height: 0; padding: 24px 24px 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; overflow: hidden; }
.scr .mine { align-self: flex-end; display: grid; justify-items: end; gap: 4px; max-width: 520px; }
.scr .who-l { display: flex; align-items: center; gap: 6px; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--p-head); }
.scr .who-l small { font-size: 13px; font-weight: 500; color: var(--p-subtle); }
.scr .who-l .me { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; background: var(--p-teal); color: #fff; font-size: 13px; font-weight: 700; }
.scr .bub { padding: 8px 12px; border-radius: 8px 3px 8px 8px; background: var(--p-teal); color: #fff; }
.scr .theirs { display: grid; grid-template-columns: 26px 1fr; gap: 8px; max-width: 600px; }
.scr .theirs > .ai { width: 26px; height: 26px; margin-top: 0; color: var(--p-teal-ink); }
.scr .theirs .who-l { color: var(--p-teal-ink); }
.scr .ans { margin-top: 6px; padding: 8px 12px; border-radius: 3px 8px 8px; background: var(--p-sunken); color: var(--p-head); }
.scr .ans p + p { margin-top: 8px; }
.scr .runs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 2px; }
.scr .runs li { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 20px; color: var(--p-muted); }
.scr .runs li .ai { width: 13px; height: 13px; color: var(--p-ok); }
.scr .cfm { margin-top: 6px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); overflow: hidden; }
.scr .cfm .cb { padding: 14px 18px 16px; }
.scr .cfm .cb .cap { font-size: 13px; letter-spacing: .78px; }
.scr .cfm .cl { font-size: 15px; line-height: 23px; font-weight: 600; color: var(--p-head); }
.scr .cfm dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 12px 0 0; }
.scr .cfm dt { font-size: 13px; line-height: 20px; color: var(--p-subtle); white-space: nowrap; }
.scr .cfm dd { margin: 0; font-size: 13px; line-height: 20px; color: var(--p-body); }
.scr .cfm .cf { display: flex; justify-content: flex-end; gap: 12px; padding: 12px 18px; background: var(--p-sunken); border-top: 1px solid var(--p-line); }
.scr .cfm .cf span { height: 32px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 4px; font-size: 13px; font-weight: 600; border: 1px solid var(--p-divider); background: var(--p-card); color: var(--p-body); }
.scr .cfm .cf span.y { background: var(--p-teal); border-color: var(--p-teal); color: #fff; transition: transform 160ms ease; }
.scr .done-l { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--p-ok); font-weight: 600; }
.scr .composer { flex: none; display: flex; align-items: center; gap: 8px; margin: 18px 24px 20px; height: 50px; padding: 4px; border: 1px solid var(--p-line); border-radius: 8px; background: var(--p-card); }
.scr .composer .pl { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--p-tint); color: var(--p-teal-ink); }
.scr .composer-text { flex: 1; color: var(--p-muted); white-space: nowrap; overflow: hidden; }
.scr .composer-text.is-text { color: var(--p-head); }
.scr .composer .mic { color: var(--p-muted); }
.scr .composer-send { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--p-teal); color: #fff; }

/* The app's toast: a sentence over the page's foot (Toast.jsx) */
.scr .toast { position: absolute; z-index: 18; left: 50%; bottom: 84px; max-width: 520px; padding: 11px 20px; border-radius: 6px; background: #15803D; color: #fff; font-size: 15px; line-height: 22px; font-weight: 600; text-align: center; white-space: nowrap; box-shadow: 0 1px 3px rgba(7, 40, 38, .05), 0 8px 24px -8px rgba(7, 40, 38, .3); transform: translate(-50%, 12px); opacity: 0; transition: transform 380ms var(--ease-out), opacity 240ms ease; }
.scr .toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.scr .td ~ .toast { bottom: 24px; }

/* ════════════════════════════════════════════════════════════════
   THE FILM LAYER: classes home.js adds while a scene plays. None of
   them is in the markup, so the resting page is the finished state.
   ════════════════════════════════════════════════════════════════ */
/* Anything a scene holds back is hidden in place, so the window never
   changes size while it plays. */
.win .is-off { opacity: 0 !important; transform: translateY(6px); }
.win [data-k] { transition: opacity 320ms ease, transform 420ms var(--ease-out), background-color 240ms ease, color 240ms ease, border-color 240ms ease, box-shadow 240ms ease; }
.win .is-pop { animation: home-pop 420ms var(--ease-out); }
@keyframes home-pop { 0% { transform: scale(.94); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.win .is-pressed { transform: scale(.95); }
.win .is-glow { box-shadow: 0 0 0 4px rgba(0, 100, 93, .18); }
.win .is-blank { color: transparent !important; }

/* A verdict still being read: the word's slot shimmers. */
.pillar.is-reading b, .pillar.is-reading p { opacity: 0; }
.pillar.is-reading::after { content: ""; position: absolute; left: 12px; right: 30%; top: 38px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--p-sel) 0%, var(--p-card) 50%, var(--p-sel) 100%) 0 0 / 200% 100%; animation: home-shimmer 1.1s linear infinite; }
.pillar.is-reading::before { content: ""; position: absolute; left: 12px; right: 18%; top: 66px; height: 10px; border-radius: 4px; background: linear-gradient(90deg, var(--p-sel) 0%, var(--p-card) 50%, var(--p-sel) 100%) 0 0 / 200% 100%; animation: home-shimmer 1.1s linear infinite; }
@keyframes home-shimmer { to { background-position: -200% 0; } }

/* Typing */
.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--h-brand); animation: home-caret 1s steps(1) infinite; }
@keyframes home-caret { 50% { opacity: 0; } }
.dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-control); animation: home-dot 1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .15s; }
.dots i:nth-child(3) { animation-delay: .3s; }
@keyframes home-dot { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-2px); } }

/* The pointer */
.cur { position: absolute; left: 0; top: 0; z-index: 20; width: 22px; height: 22px; pointer-events: none; opacity: 0; transform: translate(var(--x, 0), var(--y, 0)); transition: transform var(--mt, 700ms) var(--ease-move), opacity 240ms ease; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.cur.is-on { opacity: 1; }
.cur svg { width: 22px; height: 22px; display: block; transition: transform 120ms ease; transform-origin: 4px 3px; }
.cur.is-down svg { transform: scale(.82); }
.ripple { position: absolute; z-index: 19; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--h-brand); pointer-events: none; animation: home-ripple 520ms var(--ease-out) forwards; }
@keyframes home-ripple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.4); } }


@media (prefers-reduced-motion: reduce) {
  .panel.is-in .panel-copy { animation: none; }
  .link-arrow .ic, .btn { transition: none; }
  .btn:active { transform: none; }
}