@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════
   Feature-page module demonstration.

   Standalone: the four easing curves and the colour tokens are declared
   again here, so this does not depend on hero-demo.css or
   assistant-tabs.css being present or loading first.

   ONE unit again — every size is calc(N * var(--u)); --u scales with the
   container on desktop and becomes a real pixel in compact. Changing the
   scale is two lines.

   The two acts stack vertically and both stay on screen: on a feature page
   the reader scrolls, so there is no reason to throw Act 1 away.
   ═══════════════════════════════════════════════════════════════════════ */

.h2-fd {
  --d-enter:  cubic-bezier(.33, 0, .20, 1);
  --d-exit:   cubic-bezier(.33, 0, .83, .83);
  --d-travel: cubic-bezier(.17, .17, .83, .83);

  --f-card:  #FFFFFF;
  --f-ink:   var(--black, #1D1D1F);
  --f-mute:  var(--gray-600, #6E6E73);
  --f-line:  var(--gray-100, #E8E8ED);
  --f-green: var(--accent, #1B4332);
  --f-warn:  var(--guard-amber, #B45309);

  width: 100%;
  text-align: left;
  container-type: inline-size;   /* queried by the stage below */
}

.h2-fd-stage {
  position: relative;
  width: 100%;
  color: var(--f-ink);
  display: flex; flex-direction: column;
  gap: calc(18 * var(--u));
  --u: calc(100cqw / 1120);    /* the demo sits under the prose at full width */
}

.h2-fd-act { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }

/* ── one reveal rule for every scripted element ── */
.h2-fd [data-s] {
  opacity: 0;
  transform: translateY(calc(8 * var(--u)));
  transition: opacity .34s var(--d-enter), transform .34s var(--d-enter);
}
.h2-fd [data-s].is-on { opacity: 1; transform: none; }

/* ── shared ── */
.h2-fd-card {
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: calc(14 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  padding: calc(16 * var(--u)) calc(18 * var(--u));
}
.h2-fd-kind, .h2-fd-sect {
  font-size: calc(11 * var(--u)); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--f-mute);
}
.h2-fd-kind { margin-bottom: calc(10 * var(--u)); }
.h2-fd-l1 { font-size: calc(13.5 * var(--u)); font-weight: 650; letter-spacing: -0.01em; }
.h2-fd-l2 { font-size: calc(12 * var(--u)); color: var(--f-mute); }

.h2-fd-pill {
  flex: none;
  font-size: calc(10 * var(--u)); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px; white-space: nowrap;
}
.h2-fd-pill-new  { background: var(--guard-amber-bg, rgba(180,83,9,.08)); color: var(--f-warn); }
.h2-fd-pill-hot  { background: var(--problem-red-bg, rgba(220,38,38,.07)); color: var(--problem-red, #DC2626); }
.h2-fd-pill-warm { background: rgba(0,0,0,.05); color: var(--f-mute); }

/* ── Act 1 · inbox ── */
.h2-fd-inbox { padding: 0; overflow: hidden; }
.h2-fd-bar {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  background: var(--off-white, #F5F5F7);
  border-bottom: 1px solid var(--f-line);
}
.h2-fd-bar-ico { display: inline-flex; color: var(--f-mute); flex: none; }
.h2-fd-bar-ico svg { width: calc(14 * var(--u)); height: auto; display: block; }
.h2-fd-bar-t { font-size: calc(11.5 * var(--u)); font-weight: 600; color: var(--f-mute); }

.h2-fd-mail {
  display: flex; align-items: center; gap: calc(11 * var(--u));
  padding: calc(13 * var(--u)) calc(16 * var(--u));
}
.h2-fd-ico {
  display: grid; place-items: center; flex: none;
  width: calc(34 * var(--u)); height: calc(34 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--accent-lighter, rgba(27,67,50,.05));
  color: var(--f-green);
}
.h2-fd-mail-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.h2-fd-note {
  padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u));
  font-size: calc(12.5 * var(--u)); color: var(--f-warn);
}

/* ── Act 1 · the drafted contact ── */
.h2-fd-sect { margin-bottom: calc(6 * var(--u)); }
.h2-fd-name { font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -0.02em; }
.h2-fd-role { font-size: calc(12.5 * var(--u)); color: var(--f-mute); margin-bottom: calc(12 * var(--u)); }

.h2-fd-uid {
  display: flex; align-items: center; flex-wrap: wrap; gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  border: 1px solid var(--f-line); border-radius: calc(10 * var(--u));
  background: var(--off-white, #F5F5F7);
}
.h2-fd-uid-l { font-size: calc(10.5 * var(--u)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--f-mute); }
.h2-fd-uid-v { font-size: calc(13 * var(--u)); font-weight: 650; font-variant-numeric: tabular-nums; }
.h2-fd-uid-state { display: inline-flex; align-items: center; gap: calc(5 * var(--u)); font-size: calc(12 * var(--u)); margin-left: auto; }
.h2-fd-uid-checking { color: var(--f-mute); }
.h2-fd-uid-ok { color: var(--f-green); font-weight: 650; display: none; }
/* ⚠ must outrank the blanket [data-s].is-on rule, hence the extra class */
.h2-fd .h2-fd-uid.is-verified .h2-fd-uid-checking { display: none; }
.h2-fd .h2-fd-uid.is-verified .h2-fd-uid-ok { display: inline-flex; }

.h2-fd-dots { display: inline-flex; gap: calc(3 * var(--u)); }
.h2-fd-dots i {
  width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%;
  background: currentColor; animation: h2FdDot 1.1s infinite var(--d-travel);
}
.h2-fd-dots i:nth-child(2) { animation-delay: .18s; }
.h2-fd-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes h2FdDot { 0%,100% { opacity: .25; } 50% { opacity: 1; } }

/* ── the approve button, same grammar as the other demos ── */
.h2-fd-approve { display: flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(14 * var(--u)); }
.h2-fd-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: calc(6 * var(--u));
  font-size: calc(12.5 * var(--u)); font-weight: 650;
  color: #fff; background: var(--f-ink);
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border-radius: 999px;
  transition: transform .18s var(--d-enter);
}
.h2-fd-btn::after {
  content: ""; position: absolute; inset: 0; background: var(--f-green);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--d-enter);
}
/* ⚠ the label must be an element: a bare text node cannot sit above ::after */
.h2-fd-btn svg, .h2-fd-btn-l { position: relative; z-index: 1; }
.h2-fd-approve.is-pressed .h2-fd-btn { transform: scale(.96); }
.h2-fd-approve.is-done .h2-fd-btn::after { transform: scaleX(1); }
.h2-fd-meta { font-size: calc(11.5 * var(--u)); color: var(--f-mute); font-style: italic; }

.h2-fd-done {
  margin-top: calc(10 * var(--u));
  font-size: calc(12 * var(--u)); font-weight: 600; color: var(--f-green);
  opacity: 0; transform: translateY(calc(5 * var(--u)));
  transition: opacity .32s var(--d-enter), transform .32s var(--d-enter);
}
.h2-fd-done.is-on { opacity: 1; transform: none; }

/* ── Act 2 · ask + answer ── */
.h2-fd-caret {
  width: calc(1.5 * var(--u)); height: calc(15 * var(--u));
  background: var(--f-green); margin-left: calc(2 * var(--u)); flex: none;
  align-self: center;
  animation: h2FdCaret 1s steps(1) infinite;
}
@keyframes h2FdCaret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.h2-fd-composer .h2-fd-caret { display: none; }
.h2-fd-composer.is-focus .h2-fd-caret { display: block; }

.h2-fd-load { display: flex; gap: calc(5 * var(--u)); justify-content: center; }
.h2-fd-load i {
  width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%;
  background: var(--gray-400, #98989D); animation: h2FdDot 1.1s infinite var(--d-travel);
}
.h2-fd-load i:nth-child(2) { animation-delay: .18s; }
.h2-fd-load i:nth-child(3) { animation-delay: .36s; }
.h2-fd .h2-fd-load.is-done { display: none; }

.h2-fd-contact-row {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(10 * var(--u)) 0;
  border-bottom: 1px solid var(--f-line);
}
.h2-fd-av {
  flex: none; display: grid; place-items: center;
  width: calc(30 * var(--u)); height: calc(30 * var(--u));
  border-radius: 50%;
  background: var(--accent-light, rgba(27,67,50,.10)); color: var(--f-green);
  font-size: calc(11 * var(--u)); font-weight: 700;
}
.h2-fd-crow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.h2-fd-crow-meta { display: flex; flex-direction: column; text-align: right; }

.h2-fd-suggest {
  margin-top: calc(12 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u));
  font-size: calc(12.5 * var(--u)); line-height: 1.5;
  background: var(--accent-lighter, rgba(27,67,50,.05));
  border-left: calc(2 * var(--u)) solid var(--f-green);
  border-radius: calc(8 * var(--u));
}
.h2-fd-source {
  margin-top: calc(10 * var(--u));
  font-size: calc(11 * var(--u)); color: var(--f-mute);
  padding-left: calc(9 * var(--u));
  border-left: calc(2 * var(--u)) solid var(--f-line);
}

/* ── the cursor ── */
.h2-fd-cursor {
  position: absolute; left: 0; top: 0; z-index: 5;
  color: var(--f-ink); opacity: 0;
  transform: translate(calc(880 * var(--u)), calc(160 * var(--u)));
  transition: transform .7s var(--d-travel), opacity .35s var(--d-enter);
  pointer-events: none;
}
.h2-fd-cursor svg { width: calc(18 * var(--u)); height: auto; display: block; }
.h2-fd-cursor.is-on { opacity: 1; }
.h2-fd-cursor.is-on[data-at="away"] { opacity: 0; }
/* ⚠ The stops live in each demo's timeline ("stops" in the JSON), because
   they depend on THAT demo's geometry — the invoice draft is taller than
   the contact draft, so one set of coordinates cannot serve both. The clock
   writes --cx/--cy; always MEASURE them (scratchpad/measure.js), never guess. */
.h2-fd-cursor[data-at] {
  transform: translate(calc(var(--cx, 760) * var(--u)), calc(var(--cy, 150) * var(--u)));
}



/* ═══════════════════════════════════════════════════════════════════════
   THE PLATFORM SHELL

   Before this, the demo was two white cards on a white page with a
   traffic-light bar — it could have been any SaaS. The shell carries the
   four marks a visitor recognises from the product: the green brand rail,
   the tenant name, the "KI bereit" state, and the composer.

   The shell does NOT animate in. It is there in the very first frame, and
   in reduced motion, so the platform registers before anything moves.
   ═══════════════════════════════════════════════════════════════════════ */

.h2-fd-app {
  display: flex;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: calc(16 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 34px rgba(0,0,0,.07);
  overflow: hidden;
}

/* ── the brand rail ── */
.h2-fd-rail {
  flex: none;
  width: calc(50 * var(--u));
  background: var(--f-green);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(13 * var(--u)) 0;
}
.h2-fd-logo {
  display: grid; place-items: center;
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  margin-bottom: calc(10 * var(--u));
  color: #fff;
}
.h2-fd-logo svg { width: calc(18 * var(--u)); height: auto; }
/* ── the sidebar ── */
.h2-fd-side {
  flex: none;
  width: calc(196 * var(--u));
  background: var(--f-card);
  border-right: 1px solid var(--f-line);
  display: flex; flex-direction: column;
  padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
}
.h2-fd-side-head {
  display: flex; align-items: center; gap: calc(6 * var(--u));
  padding: 0 calc(4 * var(--u)) calc(10 * var(--u));
}
.h2-fd-side-ten { font-size: calc(13 * var(--u)); font-weight: 750; letter-spacing: -0.015em; }
.h2-fd-side-col { margin-left: auto; color: var(--gray-400, #98989D); display: inline-flex; }
.h2-fd-side-col svg { width: calc(13 * var(--u)); height: auto; }

.h2-fd-newchat {
  display: flex; align-items: center; justify-content: center;
  gap: calc(6 * var(--u));
  height: calc(31 * var(--u));
  border-radius: calc(9 * var(--u));
  background: var(--f-ink); color: #fff;
  font-size: calc(12 * var(--u)); font-weight: 650;
  margin-bottom: calc(4 * var(--u));
}
.h2-fd-newchat svg { width: calc(14 * var(--u)); height: auto; flex: none; }

.h2-fd-side-grp {
  font-size: calc(8.5 * var(--u)); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-400, #98989D);
  padding: calc(11 * var(--u)) calc(6 * var(--u)) calc(4 * var(--u));
}
.h2-fd-side-it {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  height: calc(25 * var(--u));
  padding: 0 calc(7 * var(--u));
  border-radius: calc(7 * var(--u));
  font-size: calc(11.5 * var(--u)); font-weight: 550;
  color: var(--f-ink);
}
.h2-fd-side-it svg { width: calc(14 * var(--u)); height: auto; flex: none; color: var(--f-mute); }
/* ⚠ --accent-lighter is only 5% on the live sheet — far too faint for an
   active row. Explicit tint plus a marker bar, so it reads at a glance. */
.h2-fd-side-it.is-active {
  position: relative;
  background: rgba(27,67,50,.10);
  color: var(--f-green); font-weight: 700;
}
.h2-fd-side-it.is-active::before {
  content: ""; position: absolute;
  left: calc(-7 * var(--u)); top: calc(5 * var(--u)); bottom: calc(5 * var(--u));
  width: calc(2.5 * var(--u));
  border-radius: 999px;
  background: var(--f-green);
}
.h2-fd-side-it.is-active svg { color: var(--f-green); }

.h2-fd-side-user {
  margin-top: auto;
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(8 * var(--u)) calc(7 * var(--u)) 0;
  border-top: 1px solid var(--f-line);
}
.h2-fd-side-av {
  flex: none; display: grid; place-items: center;
  width: calc(26 * var(--u)); height: calc(26 * var(--u));
  border-radius: 50%;
  background: var(--f-green); color: #fff;
  font-size: calc(10 * var(--u)); font-weight: 700;
}
.h2-fd-side-utxt { display: flex; flex-direction: column; min-width: 0; }
.h2-fd-side-un { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
.h2-fd-side-ur { font-size: calc(9.5 * var(--u)); color: var(--f-mute); }

/* ── main column ── */
.h2-fd-main {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--off-white, #F5F5F7);
}

.h2-fd-top {
  display: flex; align-items: center; gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(14 * var(--u));
  background: var(--f-card);
  border-bottom: 1px solid var(--f-line);
}
.h2-fd-tenant { font-size: calc(12.5 * var(--u)); font-weight: 700; letter-spacing: -0.01em; }
/* only in a narrow slot, where the sidebar is folded away — as in the app */
.h2-fd-burger { display: none; color: var(--f-ink); }
.h2-fd-burger svg { width: calc(16 * var(--u)); height: auto; display: block; }
.h2-fd-crumb {
  font-size: calc(10.5 * var(--u)); font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--f-mute);
  padding-left: calc(8 * var(--u));
  border-left: 1px solid var(--f-line);
}
.h2-fd-ready {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: calc(5 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 600; color: var(--f-green);
  background: var(--accent-lighter, rgba(27,67,50,.06));
  padding: calc(4 * var(--u)) calc(9 * var(--u));
  border-radius: 999px;
}
.h2-fd-ready i {
  width: calc(5 * var(--u)); height: calc(5 * var(--u));
  border-radius: 50%; background: var(--f-green);
  animation: h2FdPulse 2.2s ease-in-out infinite;
}
@keyframes h2FdPulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.h2-fd-body { display: flex; align-items: stretch; }
.h2-fd-pane {
  flex: 0 0 44%; min-width: 0;
  display: flex; flex-direction: column; gap: calc(14 * var(--u));
  padding: calc(16 * var(--u));
  border-right: 1px solid var(--f-line);
}
.h2-fd-chat {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  padding: calc(16 * var(--u)) calc(16 * var(--u)) 0;
  background: var(--f-card);
}
/* the transcript grows downward and the composer stays at the foot of the
   chat column, exactly as in the product */
.h2-fd-chat .h2-fd-act { gap: calc(12 * var(--u)); }
.h2-fd-chat .h2-fd-composer { margin-top: auto; }

/* ── Act 2 · the sent message ── */
.h2-fd-msg {
  display: flex; align-items: flex-start; justify-content: flex-end;
  gap: calc(8 * var(--u));
}
.h2-fd-msg-b {
  max-width: 78%;
  font-size: calc(12.5 * var(--u)); line-height: 1.5; font-weight: 500;
  background: var(--f-card);
  border: 1px solid var(--f-line);
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u));
  padding: calc(9 * var(--u)) calc(13 * var(--u));
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.h2-fd-msg-av {
  flex: none; display: grid; place-items: center;
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  border-radius: 50%;
  background: var(--accent-light, rgba(27,67,50,.10)); color: var(--f-green);
  font-size: calc(10 * var(--u)); font-weight: 700;
}

/* ── the composer ── */
.h2-fd-composer {
  display: flex; align-items: center; gap: calc(9 * var(--u));
  margin: calc(12 * var(--u)) 0 0;
  padding: calc(9 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u)) calc(12 * var(--u));
  background: var(--f-card);
  border: 1px solid var(--gray-200, #D2D2D7);
  border-radius: 999px;
  transition: border-color .25s var(--d-enter), box-shadow .25s var(--d-enter);
}
.h2-fd-composer.is-focus {
  border-color: var(--f-green);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--accent-lighter, rgba(27,67,50,.08));
}
.h2-fd-comp-dots { flex: none; color: var(--f-mute); display: inline-flex; }
.h2-fd-comp-dots svg { width: calc(16 * var(--u)); height: auto; }

.h2-fd-comp-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  font-size: calc(12.5 * var(--u)); line-height: 1.45;
}
/* placeholder and typed text occupy the same line; the placeholder goes as
   soon as a character is typed, and comes back when the message is sent */
.h2-fd-comp-ph { color: var(--gray-400, #98989D); display: none; }
.h2-fd-composer.is-empty .h2-fd-comp-ph { display: inline; }
.h2-fd-comp-txt { font-weight: 500; }

.h2-fd-mic, .h2-fd-send {
  flex: none; display: grid; place-items: center;
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  border-radius: 50%;
}
.h2-fd-mic { color: var(--f-mute); }
.h2-fd-mic svg { width: calc(15 * var(--u)); height: auto; }
.h2-fd-send {
  background: var(--f-ink); color: #fff;
  transition: transform .18s var(--d-enter), background-color .3s var(--d-enter);
}
.h2-fd-send svg { width: calc(14 * var(--u)); height: auto; }
.h2-fd-send.is-pressed { transform: scale(.9); }
.h2-fd-send.is-sent { background: var(--f-green); }

.h2-fd-disc {
  text-align: center;
  padding: calc(7 * var(--u)) 0 calc(10 * var(--u));
  font-size: calc(9.5 * var(--u)); color: var(--gray-400, #98989D);
}

/* ⚠⚠ These overrides MUST stay at the end of the file. They were written
   before the shell section and lost every cascade battle against it:
   same specificity, earlier in source. The sidebar kept its 196u on a
   phone and squeezed each line to one word — and the rule looked correct
   in isolation, which is why it cost an hour. Anything appended after
   this point must be an override too, not a base rule. */
/* ───────────────────────────────────────────────────────────────────────
   COMPACT — the slot becomes full width, the unit becomes a real pixel
   ─────────────────────────────────────────────────────────────────────── */
/* a narrow SLOT (not a narrow window): fall back to one column and a
   560-based unit, so the demo still reads at ~760px */
@container (max-width: 880px) {
  .h2-fd-stage { --u: calc(100cqw / 560); }
  /* ⚠ the sidebar must GO, not shrink: at 196u it left the content ~140px
     and every line broke to one word. The app folds it away too. */
  .h2-fd-side { display: none; }
  .h2-fd-burger { display: inline-flex; }
  .h2-fd-body { flex-direction: column; }
  .h2-fd-pane {
    flex: none; border-right: 0;
    border-bottom: 1px solid var(--f-line);
  }
  .h2-fd-chat { padding-bottom: 0; }
}

/* A demo with a single act has no transcript column, so the pane would sit
   in its 44% and leave half the stage empty. Scoped by :only-child, so it
   touches none of the eleven two-column demos — and kept inside a CONTAINER
   query: below 880 the columns stack and the pane is flex:none, where this
   rule would win on specificity (0,3,0 beats 0,1,0) and break the stacking. */
@container (min-width: 881px) {
  .h2-fd-body > .h2-fd-pane:only-child { flex: 1 1 auto; border-right: 0; }
}

@media (max-width: 900px) {
  .h2-fd-stage { --u: 1px; gap: 14px; }
  .h2-fd-cursor { display: none; }
  .h2-fd-crow-meta { display: none; }   /* the row needs the width on a phone */
  /* the rail is the single most recognisable mark — it stays, narrowed */
  .h2-fd-rail { width: 34px; }
  .h2-fd-logo { width: 22px; height: 22px; margin-bottom: 0; }
  .h2-fd-logo svg { width: 15px; }
  .h2-fd-body { flex-direction: column; }
  .h2-fd-pane { flex: none; border-right: 0; border-bottom: 1px solid var(--f-line); padding: 12px 10px; gap: 12px; }
  .h2-fd-chat { padding: 12px 10px 0; }
  .h2-fd-composer { margin: 12px 0 0; }
  .h2-fd-msg-b { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .h2-fd *, .h2-fd *::after { transition: none !important; animation: none !important; }
}

/* ── PHONE: the pinned window, driven by scroll ─────────────────────────
   Only when the JS has taken over (it adds .h2-fd-scrub). Without JS, or
   under reduced motion, the demo stays in normal flow — a tall sticky
   track with no animation would just be a long stretch of nothing. */
.h2-fd.h2-fd-scrub {
  min-height: 250vh;                 /* the scroll track = the timeline */
}
.h2-fd-scrub .h2-fd-stage {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center;
  padding: 10px 0;
}
.h2-fd-scrub .h2-fd-app {
  height: 100%;
  max-height: 86vh;
}
.h2-fd-scrub .h2-fd-main { min-height: 0; }
/* the transcript scrolls inside the window; follow() drives scrollTop */
/* ⚠ NOT position: relative — the pinned composer below is absolutely
   positioned, and a positioned scroller here would become its containing
   block, so it would scroll away with the transcript. follow() measures
   with getBoundingClientRect and needs no offset parent. */
.h2-fd-scrub .h2-fd-body {
  flex: 1; min-height: 0;
  overflow: hidden;
}

/* The composer is pinned to the foot of the pinned window, as in the app.
   Taking it out of flow also removes the dead strip that showed under Act 1
   while Act 2's space was still reserved and empty. */
.h2-fd-scrub .h2-fd-main { position: relative; }
.h2-fd-scrub .h2-fd-body { padding-bottom: 80px; }
/* an opaque band behind the pinned composer, so the transcript does not
   show through it while scrolling */
.h2-fd-scrub .h2-fd-main::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 76px; background: var(--f-card); z-index: 2;
}
.h2-fd-scrub .h2-fd-composer {
  position: absolute; left: 10px; right: 10px; bottom: 24px;
  margin: 0; z-index: 3;
}
.h2-fd-scrub .h2-fd-disc {
  position: absolute; left: 0; right: 0; bottom: 3px;
  padding: 0 10px; z-index: 3;
}

/* ═══════════════════════════════════════════════════════════════════════
   FIRST IMPRESSION

   The pinned window opened empty: a top bar over a blank area, which reads
   as unfinished rather than as ready, and nothing suggested scrolling.
   Three pieces fix that — the product's own resting state, a scroll
   affordance, and a progress line that makes the pinning feel deliberate.
   ═══════════════════════════════════════════════════════════════════════ */

.h2-fd-main { position: relative; }

/* ── the resting state: an empty chat greets you, as in the product ── */
.h2-fd-idle {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(6 * var(--u));
  padding: 0 calc(24 * var(--u)) calc(40 * var(--u));
  text-align: center;
  background: var(--f-card);
  /* short: a long fade ghosts the greeting over the first cards */
  transition: opacity .22s var(--d-enter);
}
.h2-fd-idle-t {
  font-size: calc(19 * var(--u)); font-weight: 750; letter-spacing: -0.025em;
}
.h2-fd-idle-s { font-size: calc(13 * var(--u)); color: var(--f-mute); }
/* the first scripted step clears it */
.h2-fd-idle.is-gone { opacity: 0; pointer-events: none; }

/* ── the scroll affordance ── */
.h2-fd-hint { display: none; }
.h2-fd-scrub .h2-fd-hint {
  display: inline-flex; align-items: center; gap: 6px;
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  padding: 7px 14px 7px 16px;
  border-radius: 999px;
  background: rgba(29,29,31,.86); color: #fff;
  font-size: 11.5px; font-weight: 650; letter-spacing: .02em;
  white-space: nowrap;
  transition: opacity .4s var(--d-enter), transform .4s var(--d-enter);
}
.h2-fd-hint svg { width: 13px; height: auto; animation: h2FdNudge 1.6s ease-in-out infinite; }
@keyframes h2FdNudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }
/* gone as soon as the reader actually scrolls */
.h2-fd.is-started .h2-fd-hint { opacity: 0; transform: translateX(-50%) translateY(6px); }

/* ── the progress line ── */
.h2-fd-prog { display: none; }
.h2-fd-scrub .h2-fd-prog {
  display: block;
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--f-line); z-index: 5;
}
.h2-fd-scrub .h2-fd-prog i {
  display: block; height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--f-green);
}

@media (prefers-reduced-motion: reduce) {
  .h2-fd-hint svg { animation: none !important; }
}

/* ── explicit stacking order ──────────────────────────────────────────
   The greeting covers the transcript area ONLY. It must not hide the two
   things that make the product recognisable — the header and the composer
   — which is exactly what inset:0 plus a high z-index did at first. */
.h2-fd-idle            { z-index: 1; }
.h2-fd-scrub .h2-fd-main::after { z-index: 2; }   /* band behind composer */
.h2-fd-composer        { position: relative; z-index: 3; }
.h2-fd-disc            { position: relative; z-index: 3; }
.h2-fd-top             { position: relative; z-index: 6; }
.h2-fd-scrub .h2-fd-prog { z-index: 7; }