/* =========================================================
   Lisseno hero — interactive product demo
   1:1 AppShell mock of the real macOS app.
   Fixed frame · all screens · mocks · responsive · calm shadows
   ========================================================= */

.app-demo [hidden]{display:none!important;}

/* —— Hero stage (wide, airy, copy left / product right) —— */
.hero.wrap{
  max-width:min(1760px,94vw);
  padding-left:clamp(32px,3.5vw,56px);
  padding-right:clamp(32px,3.5vw,56px);
}
.hero{padding:76px 0 104px;position:relative;overflow:visible;}
.hero-grid{
  display:grid;
  /* Product column gets priority so Speak dual-lanes stay 1:1, not squeezed */
  grid-template-columns:minmax(280px,0.58fr) minmax(0,1.55fr);
  gap:clamp(36px,4vw,64px);
  align-items:center;
}

/* Left copy column — editorial stack, deliberate rhythm */
.hero-copy{
  min-width:0;
  max-width:28rem;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-block:8px;
}

.hero .eyebrow{
  justify-content:flex-start;
  margin:0 0 18px;
  font-size:11px;
  letter-spacing:.12em;
  line-height:1.4;
  color:var(--fg-3);
  max-width:none;
  white-space:nowrap;
}
.hero .eyebrow .pip{
  width:6px;height:6px;flex-shrink:0;
  box-shadow:0 0 0 3px rgba(53,94,75,.12);
}

.hero .h1{
  text-align:left;
  margin:0;
  max-width:13.5ch;
  font-size:clamp(40px,4.4vw,56px);
  line-height:1.07;
  letter-spacing:-.015em;
  color:var(--fg-1);
  text-wrap:balance;
}
/* Emphasized product nouns — soft forest underline, not a heavy bar */
.hero .h1 .em{
  font-style:italic;
  white-space:nowrap;
  color:var(--fg-1);
}
.hero .h1 .em::after{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:.05em;
  height:1.5px;
  background:var(--btn);
  opacity:.4;
  border-radius:1px;
}

.hero .lede{
  text-align:left;
  margin:20px 0 0;
  max-width:36ch;
  font-size:16.5px;
  line-height:1.62;
  letter-spacing:-.005em;
  color:var(--fg-2);
  text-wrap:pretty;
}

.hero .cta-row{
  justify-content:flex-start;
  margin-top:30px;
  gap:12px;
}
.hero .cta-row .btn{
  min-height:48px;
  padding:0 22px;
  font-size:15px;
  letter-spacing:-.01em;
}
.hero .cta-row .btn-ghost{
  background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--border-strong);
}
.hero .cta-row .btn-ghost:hover{
  background:var(--pad);
}

.hero .cta-note{
  text-align:left;
  margin:14px 0 0;
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--fg-3);
  line-height:1.4;
}

/* Trust chips sit under the copy, not under the whole hero */
.hero .trust{
  margin-top:28px;
  justify-content:flex-start;
  gap:8px;
  max-width:100%;
}
.hero .trust .t{
  font-size:12.5px;
  line-height:1.25;
  color:var(--fg-2);
  padding:8px 12px;
  background:rgba(252,251,249,.72);
  border:1px solid rgba(16,37,42,.08);
  white-space:normal;
}
.hero .trust .t svg{
  width:14px;height:14px;
  color:var(--btn);
  opacity:.9;
}

/* Stage: soft multi-layer ground shadow under the window (slight float) */
.hero-demo-wrap{
  position:relative;
  min-width:0;
  display:flex;flex-direction:column;align-items:flex-end;
  padding:18px 10px 44px 14px;
}
/* Wide ambient pool — soft lift off the page */
.hero-demo-wrap::before{
  content:"";
  position:absolute;
  z-index:0;
  left:4%;right:0%;bottom:6px;
  height:72px;
  background:radial-gradient(ellipse 72% 100% at 50% 0%,
    rgba(16,37,42,.22) 0%,
    rgba(16,37,42,.10) 36%,
    rgba(16,37,42,.04) 58%,
    transparent 74%);
  filter:blur(6px);
  pointer-events:none;
}
/* Tighter contact shadow — grounds the window */
.hero-demo-wrap::after{
  content:"";
  position:absolute;
  z-index:0;
  left:14%;right:6%;bottom:0;
  height:36px;
  background:radial-gradient(ellipse 78% 100% at 50% 0%,
    rgba(16,37,42,.14) 0%,
    rgba(16,37,42,.05) 48%,
    transparent 72%);
  filter:blur(1.5px);
  pointer-events:none;
}
.app-demo-badge{
  position:relative;z-index:1;
  margin:18px 0 0;width:100%;max-width:var(--demo-w,1120px);
  text-align:center;
  font-family:var(--font-mono);font-size:11px;color:var(--fg-3);letter-spacing:.04em;
}

/* —— Fixed app window — layered float (edge + mid + deep ambient) —— */
.app-demo{
  /* Desktop default sized like a real macOS app window (Speak dual lanes need air) */
  --demo-w:1120px;
  --demo-h:700px;
  --side-w:224px;
  position:relative;z-index:1;
  width:min(100%,var(--demo-w));
  height:var(--demo-h);
  background:var(--bg);
  border-radius:var(--r-window);
  overflow:hidden;
  display:flex;flex-direction:column;
  /* Hero-only float: contact → mid drop → deep soft ambient */
  box-shadow:
    0 0 0 0.5px rgba(16,37,42,.12),
    0 2px 4px rgba(16,37,42,.04),
    0 12px 28px rgba(16,37,42,.10),
    0 28px 64px rgba(16,37,42,.14),
    0 48px 96px rgba(16,37,42,.08);
}

.app-demo-chrome{
  flex:0 0 38px;height:38px;
  display:flex;align-items:center;gap:8px;padding:0 14px;
  background:#F7F5F2;
  border-bottom:1px solid var(--divider);
}
.app-demo-chrome .tl{
  width:12px;height:12px;border-radius:50%;flex-shrink:0;
  box-shadow:inset 0 0 0 0.5px rgba(0,0,0,.12);
}
.app-demo-chrome .tl.r{background:#FF5F57;}
.app-demo-chrome .tl.y{background:#FEBC2E;}
.app-demo-chrome .tl.g{background:#28C840;}
.app-demo-chrome .tb-name{
  font-size:12.5px;color:var(--fg-3);font-weight:500;margin-left:6px;
}

.app-demo-body{
  flex:1;min-height:0;
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  gap:6px;
  padding:4px 10px 10px;
  background:var(--bg);
}

/* Sidebar */
.app-demo-side{
  display:flex;flex-direction:column;gap:3px;
  padding:14px 10px 12px;
  background:var(--sidebar);
  border-radius:var(--r-side);
  min-height:0;
}
.app-demo-brand{
  display:flex;align-items:center;
  padding:6px 8px 16px;min-height:40px;
}
.app-demo-brand .brand-lockup{
  display:block;height:32px;width:auto;max-width:100%;
  object-fit:contain;object-position:left center;
}
.app-demo-nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;}
.app-demo-nav button{
  appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:var(--font-body);
  display:flex;align-items:center;gap:10px;width:100%;
  text-align:left;padding:8px 10px;border-radius:var(--r-pill);
  font-size:14px;font-weight:500;letter-spacing:-.01em;color:var(--fg-2);
}
.app-demo-nav button:hover{background:var(--pad);color:var(--fg-1);}
.app-demo-nav button.is-active{
  background:var(--pad-strong);color:var(--fg-1);font-weight:600;
}
.app-demo-nav button svg{flex-shrink:0;width:14px;height:14px;}
.app-demo-side-foot{
  margin-top:auto;display:flex;flex-direction:column;gap:1px;padding-top:8px;
}
.app-demo-side-foot .side-link{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:500;color:var(--fg-2);
  cursor:default;user-select:none;
}
.app-demo-side-foot .side-link svg{width:14px;height:14px;}
.app-demo-side-foot .side-meta{
  padding:6px 12px 2px;
  font-family:var(--font-mono);font-size:10px;color:var(--fg-disabled);
}

/* Main */
.app-demo-main{
  position:relative;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  padding:16px 36px 18px 28px;
}
.app-demo-head{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;min-height:28px;margin-bottom:18px;
}
.app-demo-head .mode-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;
}
.app-demo-head .mode-label[data-live="true"]{color:var(--btn);}
.app-demo-ready{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--btn);
  background:var(--ok-soft);
  border:1px solid rgba(53,94,75,.14);
  border-radius:999px;padding:4px 11px 4px 9px;
}
.app-demo-ready .pip{
  width:7px;height:7px;border-radius:50%;background:var(--live);
  animation:lis-pulse-live 2s ease-out infinite;
}
.app-demo-head-meta{
  display:flex;align-items:center;gap:10px;
  font-size:12px;color:var(--fg-2);
}
.app-demo-head-meta .elapsed{
  font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--fg-1);
  font-variant-numeric:tabular-nums;
}
.app-demo-head-meta .cost{
  font-family:var(--font-mono);font-size:12px;color:var(--fg-3);
  font-variant-numeric:tabular-nums;
}
.app-demo-head-meta .sep{width:1px;height:12px;background:var(--divider);flex-shrink:0;}
.app-demo-head-meta .muted{color:var(--fg-3);}

/* Level meter (head + lane status) */
.level-meter{
  display:inline-flex;align-items:flex-end;gap:1.5px;height:12px;
}
.level-meter i{
  display:block;width:2px;border-radius:1px;background:var(--fg-3);
  height:30%;opacity:.7;
}
.level-meter i:nth-child(2){height:55%;}
.level-meter i:nth-child(3){height:85%;}
.level-meter i:nth-child(4){height:45%;}
.level-meter.sm{height:10px;}
.level-meter.sm i{width:1.5px;}
.app-demo[data-phase="running"] .level-meter i{
  background:var(--live);
  animation:lis-wave-bar 1s ease-in-out infinite;
}
.app-demo[data-phase="running"] .level-meter i:nth-child(1){animation-delay:0s;}
.app-demo[data-phase="running"] .level-meter i:nth-child(2){animation-delay:.1s;}
.app-demo[data-phase="running"] .level-meter i:nth-child(3){animation-delay:.2s;}
.app-demo[data-phase="running"] .level-meter i:nth-child(4){animation-delay:.15s;}

.app-demo-main > [data-panel]{
  flex:1;min-height:0;position:relative;
}
.app-demo-screen{
  position:absolute;inset:0;
  display:flex;flex-direction:column;min-height:0;
}

/* Shared actions */
.app-demo-actions{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  flex:0 0 auto;
}
.app-demo-start{
  appearance:none;border:0;cursor:pointer;font-family:var(--font-body);
  display:inline-flex;align-items:center;gap:9px;
  height:44px;padding:0 24px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:#F0EEEB;background:var(--btn);border-radius:var(--r-button);
  box-shadow:var(--shadow-btn);
}
.app-demo-start:hover{background:var(--btn-hover);}
.app-demo-start svg{display:block;}
.app-demo-ghost{
  appearance:none;cursor:pointer;font-family:var(--font-body);
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;
  font-size:13.5px;font-weight:600;color:var(--fg-1);
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-button);
}
.app-demo-ghost:hover{background:var(--pad);}
.app-demo-ghost[disabled],.app-demo-ghost.is-disabled{
  opacity:.45;pointer-events:none;
}
.app-demo-stop{
  appearance:none;border:0;cursor:pointer;font-family:var(--font-body);
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 18px;
  font-size:13.5px;font-weight:600;color:#F0EEEB;
  background:#10252A;border-radius:var(--r-button);
}
.app-demo-stop:hover{background:#1a343b;}
.app-demo-kbd{
  display:inline-flex;align-items:center;gap:6px;
  font-size:13px;font-weight:500;color:var(--fg-3);
}
.app-demo-kbd kbd{
  font-family:var(--font-mono);font-size:11px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:5px;padding:2px 6px;color:var(--fg-2);
}
.app-demo-test{
  appearance:none;border:0;background:transparent;cursor:default;
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--fg-2);
  padding:0 0 0 12px;border-left:1px solid var(--divider);line-height:1;
}
.app-demo-flag{font-size:15px;line-height:1;}
.app-demo-arrow{color:var(--fg-3);opacity:.55;display:inline-flex;flex-shrink:0;}

/* —— Listen idle —— */
.app-demo-idle{
  justify-content:center;align-items:center;text-align:center;
  padding:4px 0 0;
}
.app-demo-prompt{
  font-size:30px;font-weight:500;letter-spacing:-.03em;
  color:var(--fg-1);line-height:1.12;margin:0 0 28px;
}
.app-demo-tokens{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;
  gap:10px;margin:0 0 24px;max-width:100%;
}
.app-demo-token{position:relative;flex:0 1 auto;min-width:0;}
.app-demo-token > button{
  appearance:none;cursor:pointer;font-family:var(--font-body);
  display:flex;align-items:center;gap:12px;
  height:60px;padding:0 14px 0 12px;
  background:var(--surface);
  border:1px solid var(--border-strong);
  border-radius:var(--r-button);
}
.app-demo-token > button:hover{background:#FCFBF9;}
.app-demo-token > button[aria-expanded="true"]{background:var(--pad);box-shadow:var(--shadow-pop);}
.app-demo-token .lead{
  width:28px;height:28px;display:grid;place-items:center;flex-shrink:0;color:var(--fg-1);
}
.app-demo-token .lead svg{display:block;width:16px;height:16px;}
.app-demo-token .txt{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;}
.app-demo-token .sub{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--fg-3);
}
.app-demo-token .val{
  font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--fg-1);
  white-space:nowrap;max-width:148px;overflow:hidden;text-overflow:ellipsis;
}
.app-demo-token .chev{color:var(--fg-3);opacity:.75;flex-shrink:0;}
.app-demo-idle .app-demo-actions{justify-content:center;margin:0 0 20px;}
.app-demo-recents{
  width:100%;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--divider);text-align:left;
}
.app-demo-recents .rec-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;margin-bottom:8px;
}
.app-demo-recents .rec-empty{font-size:13px;color:var(--fg-3);line-height:1.4;}
.app-demo-recents .rec-list{display:flex;flex-direction:column;gap:4px;}
.app-demo-recents .rec-item{
  appearance:none;border:0;background:transparent;cursor:pointer;width:100%;
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:8px 10px;border-radius:10px;font-family:var(--font-body);
}
.app-demo-recents .rec-item:hover{background:var(--pad);}
.app-demo-recents .rec-item .rec-title{
  flex:1;font-size:13px;font-weight:600;color:var(--fg-1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app-demo-recents .rec-item .rec-meta{
  font-family:var(--font-mono);font-size:10.5px;color:var(--fg-3);flex-shrink:0;
}

/* Menus */
.app-demo-menu{
  position:absolute;z-index:40;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  min-width:220px;max-height:220px;overflow:auto;padding:6px;
  border-radius:12px;background:#FCFBF9;border:1px solid var(--border);
  box-shadow:var(--shadow-pop);
}
.app-demo-option{
  appearance:none;border:0;background:transparent;width:100%;
  display:flex;align-items:center;gap:8px;text-align:left;
  padding:9px 10px;border-radius:8px;cursor:pointer;
  font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--fg-2);
}
.app-demo-option:hover{background:var(--pad);color:var(--fg-1);}
.app-demo-option.is-active{background:var(--ok-soft);color:var(--btn);font-weight:600;}

/* —— Listen running —— */
.app-demo-listen-run{
  justify-content:flex-start;gap:14px;padding-top:2px;
}
.app-demo-route{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;
  flex:0 0 auto;
}
.app-demo-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:999px;padding:7px 12px;
  font-size:12.5px;font-weight:600;color:var(--fg-1);
}
.app-demo-transcript{
  flex:1;min-height:0;
  display:flex;flex-direction:column;gap:12px;
  padding:16px 18px;
  border-radius:var(--r-card);
  background:var(--sidebar);
  overflow:hidden;
}
.app-demo-transcript .cap-meta{
  display:flex;align-items:center;gap:12px;
}
.app-demo-transcript .cap-meta .eyebrow{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;
  margin:0;justify-content:flex-start;
}
.app-demo-transcript .src-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;color:var(--fg-3);
}
.app-demo-transcript .src-chip .code{
  background:var(--pad);border-radius:5px;padding:2px 6px;color:var(--fg-2);font-weight:600;
}
.app-demo-transcript .src-text{font-size:14px;color:var(--fg-3);line-height:1.45;}
.app-demo-transcript .out-text{
  font-family:var(--font-body);font-style:italic;
  font-size:17px;line-height:1.4;color:var(--fg-1);
  flex:1;min-height:0;overflow:auto;letter-spacing:-.01em;
}
.app-demo-audio-status{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--fg-2);flex:0 0 auto;
}
.app-demo-listen-run .app-demo-actions{margin-top:0;}

/* —— Speak idle —— */
.app-demo-speak-idle{
  justify-content:flex-start;gap:14px;padding-top:0;
}
.app-demo-meeting{
  flex:0 0 auto;
  display:flex;align-items:center;gap:14px;
}
.app-demo-meeting .meet-k{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-3);flex-shrink:0;
}
.app-demo-meeting .meet-field{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-button);
  background:var(--surface);
  font-size:15px;font-weight:600;letter-spacing:-.015em;color:var(--fg-1);
}
.app-demo-meeting .meet-field svg{flex-shrink:0;}
.app-demo-meeting .meet-field .muted{
  font-weight:500;color:var(--fg-3);font-size:12px;
}
.app-demo-meeting .meet-field .chev{color:var(--fg-3);margin-left:auto;flex-shrink:0;}

.app-demo-lanes{
  flex:1;min-height:0;
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  align-items:stretch;
}
.app-demo-lane{
  min-height:0;height:100%;padding:18px;
  border-radius:var(--r-card);
  background:var(--surface);
  border:1px solid var(--border-strong);
  display:flex;flex-direction:column;gap:14px;
  align-items:stretch;
}
.app-demo-lane h4{
  margin:0;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;
}
.app-demo-lane .lane-sub{
  font-size:13px;color:var(--fg-2);line-height:1.35;margin:-10px 0 0;
}
.app-demo-lane .lane-rows{
  display:flex;flex-direction:column;gap:8px;flex:0 0 auto;
}
.app-demo-lane .lane-row{display:flex;align-items:center;gap:12px;}
.app-demo-lane .lane-row .k{
  width:42px;flex-shrink:0;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--fg-3);
}
.app-demo-lane .lane-field{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;
  border:1px solid var(--border-strong);
  border-radius:var(--r-button);
  background:var(--surface);
  font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--fg-1);
}
.app-demo-lane .lane-field .lead-ic,
.app-demo-lane .lane-plain .lead-ic{
  width:18px;height:18px;display:grid;place-items:center;flex-shrink:0;
}
.app-demo-lane .lane-field .lead-ic svg,
.app-demo-lane .lane-plain .lead-ic svg{display:block;width:15px;height:15px;}
.app-demo-lane .lane-field .trunc{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.app-demo-lane .lane-field .chev{color:var(--fg-3);flex-shrink:0;margin-left:4px;}
.app-demo-lane .lane-plain{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:8px;
  padding:9px 0;
  font-size:14px;font-weight:600;letter-spacing:-.015em;color:var(--fg-1);
}
.app-demo-lane .lane-note{
  margin-top:auto;
  font-size:11.5px;color:var(--fg-2);
  display:flex;align-items:center;gap:6px;
}
.app-demo-lane .lane-note::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--btn);flex-shrink:0;
}
.app-demo-speak-idle .app-demo-actions{margin-top:2px;}

/* —— Speak running (LiveLane cards — equal height, fill space) —— */
.app-demo-speak-run{
  justify-content:flex-start;gap:16px;padding-top:0;
}
.app-demo-lanes-live{
  flex:1;
  min-height:0;
  align-items:stretch;
}
.app-demo-live-lane{
  min-height:0;height:100%;
  padding:16px 16px 12px;
  border-radius:var(--r-card);
  background:var(--surface);
  border:1px solid var(--border-strong);
  display:flex;flex-direction:column;gap:10px;
}
.app-demo-live-lane .live-top{
  display:flex;align-items:center;gap:10px;
  flex:0 0 auto;
}
.app-demo-live-lane .live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--live);flex-shrink:0;
  box-shadow:0 0 0 0 rgba(53,94,75,.4);
  animation:lis-pulse-live 2s ease-out infinite;
}
.app-demo-live-lane .live-title{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;
}
.app-demo-live-lane .live-flags{
  margin-left:auto;display:flex;align-items:center;gap:4px;font-size:14px;
}
.app-demo-live-lane .live-sub{
  font-size:12px;color:var(--fg-3);margin-top:-4px;flex:0 0 auto;
}
.app-demo-live-pane{
  flex:1;min-height:120px;
  display:flex;align-items:flex-start;gap:12px;
  padding:14px;
  border-radius:10px;
  background:var(--sidebar);
  overflow:hidden;
}
.app-demo-live-pane .live-text{
  flex:1;min-width:0;
  font-size:14px;font-style:italic;line-height:1.45;color:var(--fg-1);
  overflow:auto;
}
.app-demo-live-pane .live-text.is-empty{color:var(--fg-3);}
.app-demo-live-status{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:11.5px;color:var(--fg-3);flex:0 0 auto;
  min-height:18px;
}
.app-demo-speak-run .app-demo-actions{
  margin-top:0;
  flex-wrap:nowrap;
  gap:10px;
}
.app-demo-speak-run .app-demo-actions .spacer{flex:1;min-width:8px;}
.app-demo-speak-run .app-demo-stop,
.app-demo-speak-run .app-demo-ghost{
  height:36px;padding:0 14px;font-size:12.5px;white-space:nowrap;
}
.app-demo-speak-run .app-demo-kbd{font-size:12px;flex-shrink:0;}

/* —— Transcripts —— */
.app-demo-transcripts{
  justify-content:flex-start;gap:12px;padding-top:0;
}
.app-demo-transcripts .tx-head{
  display:flex;align-items:center;justify-content:flex-end;
  flex:0 0 auto;
}
.app-demo-transcripts .tx-count{
  font-size:12px;font-weight:500;color:var(--fg-3);
}
.app-demo-tx-list{
  flex:1;min-height:0;overflow:auto;
  display:flex;flex-direction:column;gap:12px;
  padding-right:4px;
  scrollbar-width:thin;
  scrollbar-color:var(--pad-strong) transparent;
}
.app-demo-tx-card{
  padding:16px;
  border-radius:var(--r-card);
  background:var(--surface);
  border:1px solid var(--border-strong);
  text-align:left;
  flex:0 0 auto;
}
.app-demo-tx-card .tx-top{
  display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;
}
.app-demo-tx-card .tx-title{
  flex:1;font-size:15px;font-weight:600;color:var(--fg-1);
  letter-spacing:-.01em;line-height:1.25;min-width:0;
}
.app-demo-tx-card .tx-when{
  font-size:11.5px;font-weight:500;color:var(--fg-3);flex-shrink:0;
}
.app-demo-tx-card .tx-open{
  flex-shrink:0;
  font-size:12px;font-weight:600;color:var(--fg-2);
  border:1px solid var(--border-strong);
  border-radius:var(--r-button);
  padding:4px 10px;
  background:var(--surface);
}
.app-demo-tx-card .tx-meta{
  font-size:12px;color:var(--fg-3);margin-bottom:10px;
}
.app-demo-tx-card .tx-block{margin-top:10px;}
.app-demo-tx-card .tx-block-label{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--fg-3);font-weight:600;margin-bottom:4px;
}
.app-demo-tx-card .tx-block-text{
  font-size:13px;line-height:1.45;color:var(--fg-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* Wave / caret */
.app-demo .wave{display:flex;align-items:flex-end;gap:2.5px;height:22px;flex-shrink:0;}
.app-demo .wave i{
  width:3px;height:100%;background:var(--live);border-radius:2px;
  transform-origin:bottom;transform:scaleY(.3);
  animation:lis-wave-bar 1s ease-in-out infinite;
}
.app-demo .caret{
  display:inline-block;width:2px;height:.9em;background:var(--btn);
  margin-left:2px;vertical-align:-2px;animation:lis-caret 1s steps(1) infinite;
}

/* —— Responsive —— */
/* Keep full 1:1 size on ultrawide + large desktop; only scale when the
   product column genuinely can't fit the window. */
@media (max-width:1540px){
  .app-demo{--demo-w:1040px;--demo-h:670px;--side-w:216px;}
}
@media (max-width:1380px){
  /* base already uses min(1760px,94vw); at ≤1380 that is always 94vw — no wrap override needed */
  .app-demo{--demo-w:960px;--demo-h:640px;--side-w:210px;}
  .hero-grid{gap:clamp(32px,3.5vw,48px);}
}
@media (max-width:1240px){
  .app-demo{--demo-w:900px;--demo-h:600px;--side-w:200px;}
  .hero-grid{gap:clamp(28px,3vw,40px);}
  .hero .h1{font-size:clamp(38px,4.2vw,52px);}
  .app-demo-main{padding:14px 24px 14px 18px;}
  .app-demo-token .val{max-width:140px;}
}
@media (max-width:1120px){
  .hero-grid{grid-template-columns:minmax(240px,0.75fr) minmax(0,1.35fr);gap:28px;}
  .hero-copy{max-width:22rem;}
  .hero .h1{max-width:12ch;font-size:clamp(36px,4vw,46px);}
  .hero .lede{font-size:16px;max-width:32ch;}
  .app-demo{--demo-w:820px;--demo-h:560px;--side-w:190px;}
  .app-demo-prompt{font-size:26px;}
  .app-demo-token .val{max-width:120px;}
  .app-demo-token > button{height:54px;padding:0 10px 0 10px;gap:8px;}
  .app-demo-head-meta .muted:last-of-type,
  .app-demo-head-meta .cost{display:none;}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-copy{
    max-width:36rem;
    margin:0 auto;
    align-items:center;
    text-align:center;
    padding-block:0;
  }
  .hero .eyebrow{
    justify-content:center;
    max-width:none;
    margin-bottom:18px;
  }
  .hero .h1{
    margin:0 auto;
    max-width:16ch;
    text-align:center;
  }
  .hero .lede{
    margin-left:auto;margin-right:auto;
    text-align:center;
    max-width:42ch;
  }
  .hero .cta-row{justify-content:center;}
  .hero .cta-note{text-align:center;}
  .hero .trust{justify-content:center;}
  .hero-demo-wrap{align-items:center;padding:10px 0 36px;}
  .hero-demo-wrap::before{left:10%;right:10%;}
  .hero-demo-wrap::after{left:18%;right:18%;}
  .app-demo{margin:0 auto;--demo-w:min(100%,900px);--demo-h:600px;}
  .app-demo-badge{max-width:100%;}
}
@media (max-width:760px){
  .hero{padding:40px 0 68px;}
  .hero .h1{font-size:clamp(34px,9vw,40px);max-width:14ch;line-height:1.08;}
  .hero .lede{font-size:16px;max-width:36ch;}
  .hero .cta-row .btn{min-height:46px;width:auto;}
  .hero .trust .t{font-size:12px;padding:7px 10px;}
  .app-demo{
    --demo-w:100%;
    --demo-h:auto;
    height:auto;
    min-height:540px;
  }
  .app-demo-body{grid-template-columns:1fr;min-height:500px;}
  .app-demo-side{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    padding:10px 12px;gap:4px;
  }
  .app-demo-brand{
    flex:1 1 100%;padding:2px 2px 8px;border-right:0;margin:0 0 6px;
    border-bottom:1px solid var(--divider);
  }
  .app-demo-brand .brand-lockup{height:26px;}
  /* Scroll safety net across the whole mobile band: translated labels
     (e.g. de "Zuhören + Sprechen") can exceed the row, and the frame is
     overflow:hidden. */
  .app-demo-nav{flex-direction:row;flex-wrap:nowrap;flex:1 1 100%;min-width:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .app-demo-nav::-webkit-scrollbar{display:none;}
  .app-demo-nav button{flex:1 0 auto;justify-content:center;width:auto;padding:7px 6px;font-size:12.5px;white-space:nowrap;}
  .app-demo-nav button svg{display:none;}
  .app-demo-side-foot{display:none;}
  .app-demo-main{min-height:440px;padding:12px 14px 14px;}
  .app-demo-main > [data-panel]{min-height:400px;}
  /* In-flow screens on mobile: the absolute overlay lets centered content
     overflow upward across the head row when it outgrows the panel. */
  .app-demo-screen{position:static;}
  .app-demo-tokens{flex-wrap:wrap;justify-content:center;}
  .app-demo-lanes{grid-template-columns:1fr;gap:10px;}
  .app-demo-live-pane{min-height:88px;}
  .app-demo-head-meta .muted{display:none;}
  .app-demo-tx-card .tx-open{display:none;}
}
@media (max-width:420px){
  .app-demo-nav button{flex:0 0 auto;font-size:11.5px;padding:6px 7px;gap:4px;}
  .app-demo-tokens{flex-direction:column;align-items:stretch;}
  .app-demo-token > button{width:100%;}
  .app-demo-arrow{display:none;}
  .app-demo-idle .app-demo-actions{flex-direction:column;width:100%;}
  .app-demo-start{width:100%;justify-content:center;}
  .app-demo-test{border:0;padding:0;}
  .app-demo-meeting{flex-direction:column;align-items:stretch;gap:8px;}
}
@media (prefers-reduced-motion:reduce){
  .app-demo-ready .pip,
  .app-demo-live-lane .live-dot,
  .app-demo .wave i,
  .app-demo .caret,
  .app-demo[data-phase="running"] .level-meter i{animation:none;}
}