/* A close Cue portrait rises out of the launch control; there is no separate avatar coin. */
#cueDock .cue-dock-btn{width:184px;height:66px;border-radius:20px;background:linear-gradient(145deg,rgba(255,255,255,.97),#EAF4FA);border:1px solid rgba(214,231,241,.9);box-shadow:0 10px 30px rgba(29,66,90,.12),inset 0 1px 0 #fff;overflow:visible}
#cueDock .cue-dock-btn:hover{box-shadow:0 14px 34px rgba(29,66,90,.17)}
#cueDock .cue-dock-head{position:absolute;right:-2px;top:-25px;width:94px;height:96px;border-radius:0;background:none;overflow:hidden;-webkit-mask-image:linear-gradient(#000 0%,#000 72%,transparent 98%);mask-image:linear-gradient(#000 0%,#000 72%,transparent 98%)}
#cueDock .cue-dock-head .cue{position:absolute;left:-17px;top:0;width:128px;height:128px}
#cueDock .cue-dock-head .cue-auras,#cueDock .cue-dock-head .cue-audio-meter{display:none}
/* Pixel-matched fallback: same portrait and contour before the deferred renderer arrives. */
#cueDock:not(.has-face) .cue-dock-head::before{content:"";position:absolute;width:117.333px;height:117.333px;left:-11.667px;top:0;background:url("/cue/cue-avatar.webp") center/contain no-repeat;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M.5%20.057%20C.332%20.056%20.226%20.121%20.174%20.282%20C.156%20.283%20.140%20.334%20.140%20.394%20C.140%20.435%20.153%20.477%20.175%20.490%20C.201%20.564%20.270%20.604%20.367%20.630%20C.327%20.638%20.297%20.658%20.290%20.677%20C.240%20.669%20.172%20.737%20.124%20.891%20L.126%20.897%20C.108%20.899%20.093%20.986%20.093%201%20L.907%201%20C.899%20.965%20.886%20.902%20.876%20.899%20L.876%20.891%20C.839%20.741%20.765%20.669%20.709%20.677%20C.702%20.657%20.667%20.638%20.630%20.630%20C.740%20.603%20.800%20.562%20.825%20.490%20C.849%20.480%20.858%20.435%20.858%20.394%20C.858%20.334%20.843%20.283%20.828%20.282%20C.775%20.121%20.668%20.056%20.5%20.057%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201%201%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M.5%20.057%20C.332%20.056%20.226%20.121%20.174%20.282%20C.156%20.283%20.140%20.334%20.140%20.394%20C.140%20.435%20.153%20.477%20.175%20.490%20C.201%20.564%20.270%20.604%20.367%20.630%20C.327%20.638%20.297%20.658%20.290%20.677%20C.240%20.669%20.172%20.737%20.124%20.891%20L.126%20.897%20C.108%20.899%20.093%20.986%20.093%201%20L.907%201%20C.899%20.965%20.886%20.902%20.876%20.899%20L.876%20.891%20C.839%20.741%20.765%20.669%20.709%20.677%20C.702%20.657%20.667%20.638%20.630%20.630%20C.740%20.603%20.800%20.562%20.825%20.490%20C.849%20.480%20.858%20.435%20.858%20.394%20C.858%20.334%20.843%20.283%20.828%20.282%20C.775%20.121%20.668%20.056%20.5%20.057%20Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%}
#cueDock .cue-dock-pill{left:15px;right:auto;top:50%;width:66px;white-space:normal;transform:translateY(-50%);background:transparent;color:#234456;padding:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;font-size:12px;line-height:1.65;font-weight:600;text-align:left;letter-spacing:-.01em}
#cueDock .cue-dock-pill::after{display:none}
#cueDock .cue-dock-recovery{position:absolute;right:0;bottom:calc(100% + 22px);width:min(250px,calc(100vw - 32px));padding:16px 18px;border:1px solid #D6E7F1;border-radius:16px;background:#F8FBFD;box-shadow:0 10px 30px rgba(29,66,90,.12);color:#234456;font:13px/1.5 "DM Sans",sans-serif}
#cueDock .cue-dock-recovery p{margin:0 0 7px;font-weight:600}
#cueDock .cue-dock-recovery a{display:inline-block;padding:4px 0;color:#087EAF;text-decoration:underline;text-underline-offset:3px}
#cueDock .cue-dock-recovery a:focus-visible{outline:3px solid rgba(21,155,215,.45);outline-offset:4px;border-radius:3px}
@media(max-width:639px){#cueDock .cue-dock-btn{width:174px;height:62px}#cueDock .cue-dock-pill{left:13px;width:66px;font-size:12px}}
.lh {
  --lh-line: #dde7ee;
  --lh-line2: #edf2f6;
  --lh-muted: #5d6c7c;
  padding: 72px 0 48px;
  background: linear-gradient(180deg, #fff 0%, #f9fbfd 72%, #fff 100%);
}
.lh .lh-wrap { max-width: 1408px; padding: 0 48px; }
.lh .lh-grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.28fr); gap: 64px; }
.lh .lh-copy { padding-bottom: 36px; }
.lh .lh-glow {
  right: 0;
  top: 10%;
  width: min(780px, 58vw);
  height: 540px;
  background: radial-gradient(closest-side, rgba(21, 155, 215, .09), transparent 78%);
  filter: blur(28px);
}
.lh .lh-glow2 { display: none; }
.lh .lh-pill {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--lh-deep);
  letter-spacing: .12em;
  gap: 11px;
}
.lh .lh-pill i { animation: none; width: 6px; height: 6px; box-shadow: 0 0 0 4px #e5f4fb; }
.lh .lh-h1 {
  margin-top: 25px;
  font-size: clamp(42px, 4.05vw, 60px);
  font-weight: 600;
  line-height: 1.085;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.lh .lh-sub { margin-top: 24px; font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.lh .lh-ctas { margin-top: 28px; gap: 10px 5px; }
.lh .lh-btn {
  padding: 15px 20px;
  font-weight: 600;
  border-radius: 10px;
  box-shadow: 0 5px 14px rgba(14, 127, 179, .15), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.lh .lh-btn:hover { box-shadow: 0 8px 20px rgba(14, 127, 179, .2); }
.lh .lh-btn:active { transform: translateY(1px); }
.lh .lh-btn2 { font-size: 13px; padding-left: 7px; padding-right: 0; }
.lh .lh-fine { font-size: 12px; line-height: 1.5; margin-top: 16px; }

.lh .lh-demo { perspective: 1500px; perspective-origin: 50% 46%; }
.lh .lh-app {
  min-height: 590px;
  border-color: #dbe5ed;
  border-radius: 20px;
  transform: rotateY(-8deg);
  transform-origin: 50% 50%;
  transition: transform .65s cubic-bezier(.2, .7, .2, 1), box-shadow .65s ease;
  box-shadow: 0 28px 48px -22px rgba(35, 64, 87, .26), 0 10px 20px -12px rgba(35, 64, 87, .14), 2px 0 0 #d4e2ed, 0 1px 0 #fff inset;
}
.lh .lh-app:focus-within { transform: rotateY(0); }
.lh .lh-call { padding: 23px 22px 22px; }
.lh .lh-side { padding: 14px 19px 20px; background: #fbfdfe; }
.lh .lh-name { font-size: 16px; }
.lh .lh-role { font-size: 9px; letter-spacing: .11em; line-height: 1.5; }
.lh .lh-who { margin-top: 21px; gap: 12px; }
.lh .lh-bubble { font-size: 13.5px; line-height: 1.6; padding: 13px 14px; }
.lh .lh-rec {
  border-color: #d2e8df;
  background: #edf8f2;
  border-radius: 11px;
  box-shadow: 0 9px 17px -12px rgba(30, 98, 75, .35), 0 1px 0 #fff inset;
}
.lh .lh-rec p { font-size: 13px; line-height: 1.6; }
.lh .lh-tab { font-size: 12px; padding: 12px 9px; }
.lh .lh-crit li { font-size: 12.5px; }
.lh .lh-opp p { font-size: 12.5px; line-height: 1.55; }
.lh .lh-opp div { border-radius: 11px; background: #f0f7fb; border-color: #dcebf3; }
.lh .lh-mic { width: 57px; height: 57px; box-shadow: 0 0 0 7px #e9f5fb, 0 6px 16px rgba(21, 155, 215, .18); }
.lh .lh-controls { gap: 18px; }
.lh .lh-ctl { font-size: 11.5px; min-width: 59px; padding: 9px 12px; }
.lh .lh-coach .lh-t { font-size: 12.5px; line-height: 1.55; }
.lh .lh-crow .lh-cl { font-size: 12px; }
.lh .lh-sdot { width: 8px; height: 8px; }
.lh .lh-crow { gap: 7px; }
.lh .lh-proof { margin-top: 64px; padding-top: 27px; border-top: 1px solid var(--lh-line2); }
.lh .lh-proof-l { font-size: 9px; letter-spacing: .16em; color: #758492; }
.lh .lh-marquee { margin-top: 21px; }
.lh .lh-lg { opacity: .74; }

/* An open product progression gives the interface room to be the main surface. */
.lh .lh-cards { margin-top: 30px; gap: 0; border-top: 1px solid var(--lh-line2); }
.lh .lh-card {
  position: relative;
  border: 0;
  border-radius: 0;
  padding: 26px 28px 10px 0;
  background: transparent;
  box-shadow: none;
  gap: 14px;
}
.lh .lh-card + .lh-card { padding-left: 28px; }
.lh .lh-card + .lh-card::before { content: ''; position: absolute; left: 0; top: 28px; bottom: 12px; width: 1px; background: var(--lh-line); }
.lh .lh-card:hover { transform: none; border-color: transparent; box-shadow: none; }
.lh .lh-ico { background: transparent; color: var(--lh-deep); width: 28px; height: 30px; border-radius: 0; }
.lh .lh-card h3 { font-size: 14px; font-weight: 600; margin: 2px 0 7px; }
.lh .lh-card p { font-size: 12.5px; line-height: 1.6; max-width: 30ch; text-wrap: pretty; }
.lh button { font-family: inherit; }
.lh button:focus-visible, .lh a:focus-visible { outline: 3px solid #80c5e4; outline-offset: 4px; }
.lh .lh-transcript { scrollbar-width: thin; scrollbar-color: #cbdde8 transparent; }
.lh .lh-transcript-line { font-size: 12.5px; line-height: 1.6; }
.lh .lh-evidence { border-radius: 10px; }

.lh .lh-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; color: var(--lh-muted); font-size: 11px; line-height: 1.5; }
.lh .lh-demo-head b { color: var(--lh-ink2); font-weight: 600; }
.lh .lh-sample-label { color: var(--lh-muted); font-size: 10px; font-weight: 500; letter-spacing: .015em; line-height: 1.5; }
.lh .lh-scenarios { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.lh .lh-scenario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--lh-line);
  border-radius: 7px;
  background: #fff;
  color: var(--lh-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s, color .18s, background .18s;
}
.lh .lh-scenario:hover { border-color: #b6d4e5; color: var(--lh-deep); background: #f7fbfd; }
.lh .lh-scenario[aria-pressed="true"] { color: #0877a9; border-color: #bddff0; background: #eaf6fc; }
.lh .lh-playback { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 25px; padding: 0 2px; }
.lh .lh-playback-actions { display: flex; align-items: center; gap: 5px; }
.lh .lh-playback-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 36px; padding: 8px 10px; border: 1px solid var(--lh-line); border-radius: 6px; background: #fff; color: var(--lh-muted); font-size: 11px; font-weight: 500; cursor: pointer; }
.lh .lh-playback-actions button:hover { background: #edf5fa; color: var(--lh-deep); }
.lh .lh-playback-actions button:disabled { opacity: .5; cursor: default; }
.lh .lh-tour-status { margin: 10px 2px 0; font-size: 11px; line-height: 1.5; color: var(--lh-muted); }
.lh .lh-progress { display: flex; flex: 1 1 230px; gap: 12px; min-width: 0; }
.lh .lh-step { position: relative; flex: 1; min-height: 36px; padding: 10px 0 6px; border: 0; border-top: 2px solid #dce6ed; border-radius: 0; background: transparent; text-align: left; font-size: 10px; font-weight: 500; color: var(--lh-muted); cursor: pointer; }
.lh .lh-step.on, .lh .lh-step[aria-pressed="true"], .lh .lh-step[aria-current="step"] { border-color: var(--lh-blue); color: var(--lh-deep); }
.lh .lh-tab { appearance: none; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.lh .lh-transcript { margin-top: 15px; min-width: 0; }
.lh .lh-transcript-note { font-size: 11px; line-height: 1.55; color: var(--lh-muted); margin: 0 0 14px; }
.lh .lh-transcript-line { padding: 10px 12px; border-radius: 9px; margin: 0 0 9px; background: #f3f7fa; }
.lh .lh-transcript-line.is-highlighted { background: #e8f5fc; box-shadow: inset 3px 0 0 var(--lh-blue); }
.lh .lh-transcript-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lh .lh-transcript-meta b { color: var(--lh-ink2); font-size: 11px; font-weight: 600; }
.lh .lh-transcript-meta time { color: var(--lh-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.lh .lh-evidence { padding: 12px; margin-bottom: 14px; border: 1px solid #cce4f1; background: #f0f8fc; color: var(--lh-ink2); font-size: 12px; line-height: 1.6; }
.lh .lh-evidence:not([hidden]) { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lh .lh-evidence button { border: 1px solid #cce4f1; border-radius: 5px; padding: 6px 8px; background: #fff; color: var(--lh-deep); font-size: 10px; line-height: 1.4; cursor: pointer; }
.lh .lh-evidence button:hover { background: #e3f2fa; }
.lh button.lh-crow { width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--lh-line2); border-radius: 5px; background: transparent; padding: 7px 4px; cursor: pointer; }
.lh button.lh-crow:hover { background: #eaf5fb; }
.lh .lh-crows { gap: 3px; }
.lh .lh-app[data-playback="paused"] .lh-wave i,
.lh .lh-app[data-playback="paused"] .lh-timer i,
.lh .lh-app[data-playback="complete"] .lh-wave i { animation-play-state: paused; }

@media (min-width: 1024px) {
  .lh .lh-rec { transform: translateX(-3px); }
  .lh .lh-app:hover { transform: rotateY(-4deg); }
  .lh .lh-app:focus-within:hover { transform: rotateY(0); }
}
@media (min-width: 1600px) {
  .lh { padding-top: 84px; }
  .lh .lh-grid { gap: 76px; }
}
@media (max-width: 1199px) and (min-width: 1024px) {
  .lh .lh-wrap { padding: 0 32px; }
  .lh .lh-grid { grid-template-columns: minmax(0, .78fr) minmax(0, 1.25fr); gap: 35px; }
  .lh .lh-call { padding: 20px 16px; }
  .lh .lh-side { padding-left: 14px; padding-right: 14px; }
  .lh .lh-tab { padding-inline: 6px; font-size: 11.5px; }
  .lh .lh-h1 { font-size: 44px; }
  .lh .lh-sub { font-size: 16px; }
}
@media (max-width: 1023px) {
  .lh { padding-top: 48px; }
  .lh .lh-wrap { max-width: 800px; padding: 0 32px; }
  .lh .lh-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .lh .lh-copy { max-width: 600px; padding-bottom: 0; }
  .lh .lh-h1 { font-size: clamp(42px, 7vw, 58px); max-width: 600px; }
  .lh .lh-sub { max-width: 520px; }
  .lh .lh-demo { perspective: none; }
  .lh .lh-app, .lh .lh-app:hover, .lh .lh-app:focus-within { transform: none; }
  .lh .lh-proof { margin-top: 38px; }
  .lh .lh-cards { grid-template-columns: 1fr; }
  .lh .lh-card, .lh .lh-card + .lh-card { padding: 20px 0; border-bottom: 1px solid var(--lh-line2); }
  .lh .lh-card + .lh-card::before { display: none; }
  .lh .lh-card p { max-width: 52ch; }
}
@media (max-width: 639px) {
  .lh { padding-top: 36px; padding-bottom: 24px; }
  .lh .lh-wrap { padding: 0 22px; }
  .lh .lh-h1 { font-size: clamp(36px, 9.5vw, 48px); line-height: 1.1; }
  .lh .lh-sub { font-size: 16px; margin-top: 20px; }
  .lh .lh-ctas { align-items: stretch; gap: 5px; margin-top: 23px; }
  .lh .lh-btn2 { padding: 12px; }
  .lh .lh-fine { text-align: center; }
  .lh .lh-app { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .lh .lh-call { padding: 20px; min-height: 552px; }
  .lh .lh-side { padding: 10px 20px 20px; min-height: 520px; }
  .lh .lh-demo-head { align-items: flex-start; margin-bottom: 12px; }
  .lh .lh-scenarios { gap: 6px; margin-bottom: 16px; }
  .lh .lh-scenario { min-height: 40px; padding: 8px 10px; font-size: 10px; flex: 1 1 auto; }
  .lh .lh-playback { gap: 8px; margin-top: 18px; }
  .lh .lh-progress { flex-basis: 100%; }
  .lh .lh-playback-actions button { min-height: 40px; }
  .lh .lh-tab { font-size: 13px; padding-inline: 13px; }
  .lh .lh-bubble { font-size: 14px; }
  .lh .lh-rec p { font-size: 13.5px; }
  .lh .lh-crow .lh-cl { font-size: 12.5px; }
  .lh .lh-proof-l { font-size: 8px; line-height: 1.7; }
}
@media (prefers-reduced-motion: reduce) {
  .lh .lh-demo { perspective: none; }
  .lh .lh-app, .lh .lh-app:hover, .lh .lh-app:focus-within, .lh .lh-rec { transform: none; }
  .lh *, .lh *::before, .lh *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* The business progression shares a desktop baseline while stacked cards size to content. */
#difference .difference-card,
#difference .difference-content { min-width: 0; }
@media (min-width: 1024px) {
  #difference .difference-flow { align-items: stretch; }
  #difference .difference-intro { min-block-size: 4.875em; }
}

/* Scenario portraits retain the original avatar footprint as the image library evolves. */
#scenarios .scenario-portrait {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  object-fit: cover;
  object-position: center;
}

/* Keep scenario labels readable when the cards narrow on phones and tablets. */
#scenarios .scenario-meta { flex-wrap: wrap; }
#scenarios .scenario-meta > span { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1199px) {
  #scenarios .scenario-meta > span:last-child { flex-basis: 100%; margin-left: 0; }
}