/* ============================================================
   Demos page: the "Try it" window and its seven widgets.

   One system, seven demos. The window is a near-black glass panel
   (the same family as the site's footer panel and dark hero
   pictures) with hairline borders, a faint dot grid and a soft top
   glow. Everything inside uses shared tokens, so the seven demos
   read as one product.

   Rules this file keeps (docs/design-system.md):
   - Switzer for text, Instrument Serif italic for one accent word,
     JetBrains Mono for small labels
   - ease-out motion, nothing repetitive, reduced motion respected

   2026-10-15, on Nicky's explicit instruction: the demos got a signal-green
   accent (--t-accent) and a coral one (--t-warn), used only for state that
   is genuinely "live" or "selected" (status dots, selected chips, toggles,
   completed steps, stat numbers, priority tags). This is scoped to .try-it
   only - the rest of the site (docs/design-system.md) is still black/white/
   grey and that rule stands everywhere else.

   Structure: 4 spacing on the detail page, 1 the frame, 2 shared
   primitives (labels, buttons, chips, inputs, surfaces), 3 one block
   per widget (rcp, iq, apb, lcp, crm, kba, wfa).
   ============================================================ */

/* ───────── 4. Spacing on the detail page ─────────
   The reserved space on a demo page has a fixed height meant for an
   empty gap. Once a demo lives in it, it must size to the demo and
   keep clear air above (below "How it works") and below (above the
   closing "Let's build something" card). */
.dv .dv-space[data-try-it] {
  height: auto;
  min-height: 0;
  margin-top: clamp(88px, 9vw, 144px);
  margin-bottom: clamp(112px, 12vw, 184px);
}
.try-it-wrap { max-width: 1192px; margin: 0 auto; }
.try-it-kicker { margin: 0 0 18px; }

/* ───────── 1. The frame ───────── */
.try-it {
  --t-panel: #0B0B0C;
  --t-text: #F4F3EF;
  --t-muted: rgba(244, 243, 239, 0.58);
  --t-faint: rgba(244, 243, 239, 0.34);
  --t-surface: rgba(255, 255, 255, 0.045);
  --t-surface-2: rgba(255, 255, 255, 0.085);
  --t-line: rgba(255, 255, 255, 0.1);
  --t-line-strong: rgba(255, 255, 255, 0.26);
  --t-on: #F4F3EF;
  --t-on-ink: #0B0B0C;
  --t-accent: #6EEFA8;
  --t-accent-ink: #07190F;
  --t-accent-soft: rgba(110, 239, 168, 0.14);
  --t-warn: #FF8F66;
  --t-warn-ink: #230D05;
  --t-warn-soft: rgba(255, 143, 102, 0.14);
  --t-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --t-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --t-sans: var(--font-body, 'Switzer', -apple-system, system-ui, sans-serif);

  position: relative;
  isolation: isolate;
  max-width: 1192px;
  margin: 0 auto;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--t-panel);
  color: var(--t-text);
  font-family: var(--t-sans);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -0.005em;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 48px 100px -48px rgba(11, 11, 12, 0.6),
    0 16px 36px -20px rgba(11, 11, 12, 0.4);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--t-ease), transform 620ms var(--t-ease);
}
.try-it.is-ready { opacity: 1; transform: none; }

/* a faint dot grid that fades out toward the bottom, and a soft glow on the top edge */
.try-it::before {
  content: "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.09) 1px, transparent 0);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 78%);
}
.try-it::after {
  content: "";
  position: absolute; left: 10%; right: 10%; top: 0; height: 160px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(110, 239, 168, 0.16), transparent 72%);
}

.try-it * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
.try-it :is(button, input, textarea) { font-family: inherit; color: inherit; }

.try-it-head {
  padding: clamp(22px, 2.4vw, 34px) clamp(22px, 2.6vw, 38px) 0;
  display: flex; flex-direction: column; gap: 14px;
}
.try-it-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--t-mono);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-muted);
}
.try-it-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--t-accent);
  animation: tiw-pulse 2.2s ease-in-out infinite;
}
@keyframes tiw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 239, 168, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(110, 239, 168, 0); }
}
.try-it-title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.try-it-title {
  margin: 0;
  font-family: var(--font-display, var(--t-sans));
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--t-text);
}
.try-it-accent {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400;
  font-size: 1.08em; letter-spacing: -0.01em;
}
.try-it-chips {
  padding: 20px clamp(22px, 2.6vw, 38px) 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.try-it-chips:empty { display: none; }
.try-it-body {
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.6vw, 38px) clamp(24px, 2.6vw, 38px);
  min-height: 320px;
}
.try-it-body:empty::before {
  content: 'Loading the demo...';
  display: block; padding: 48px 0; text-align: center;
  color: var(--t-muted); font-size: 14px;
}
.try-it-fail { margin: 0; padding: 48px 0; text-align: center; color: var(--t-muted); }

/* ───────── 2. Shared primitives ───────── */

/* small mono labels */
.try-it :is(.rcp-side-eyebrow, .iq-card-eyebrow, .apb-eyebrow, .lcp-eyebrow, .crm-eyebrow, .kba-eyebrow, .wfa-eyebrow,
            .apb-sms-when, .lcp-channel, .crm-kind) {
  margin: 0;
  font-family: var(--t-mono);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--t-muted);
  font-weight: 400;
}

/* surfaces */
.try-it :is(.rcp-chat, .rcp-side, .iq-card, .iq-note, .apb-side, .lcp-side, .lcp-item, .crm-block, .crm-answer,
            .kba-doc, .kba-thread, .wfa-incoming, .wfa-step, .wfa-result, .crm-cust, .iq-input-row) {
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 18px;
}

/* primary pill buttons: white on black */
.try-it :is(.iq-go, .iq-book, .apb-confirm, .wfa-go, .lcp-send, .crm-btn, .kba-send, .rcp-send) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  background: var(--t-on); color: var(--t-on-ink);
  border: 0; border-radius: 999px;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
  cursor: pointer;
  transition: transform 180ms var(--t-ease), background-color 200ms ease, opacity 200ms ease;
}
.try-it :is(.iq-go, .iq-book, .apb-confirm, .wfa-go, .lcp-send, .crm-btn, .kba-send, .rcp-send):active { transform: scale(0.97); }
.try-it :is(.iq-go, .iq-book, .apb-confirm, .wfa-go, .lcp-send, .crm-btn, .kba-send, .rcp-send):disabled { opacity: 0.35; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) {
  .try-it :is(.iq-go, .iq-book, .apb-confirm, .wfa-go, .lcp-send, .crm-btn, .kba-send, .rcp-send):not(:disabled):hover {
    background: #fff; transform: translateY(-1px);
  }
}

/* quiet chips and pills */
.try-it :is(.try-it-chip, .try-it-reset, .apb-pill, .lcp-chan, .crm-type, .crm-chip, .kba-cite) {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 999px;
  color: var(--t-text);
  font-size: 13px; letter-spacing: -0.005em;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 180ms var(--t-ease);
}
.try-it :is(.try-it-chip, .try-it-reset, .apb-pill, .lcp-chan, .crm-type, .crm-chip, .kba-cite):active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .try-it :is(.try-it-chip, .try-it-reset, .apb-pill, .lcp-chan, .crm-type, .crm-chip, .kba-cite):not(:disabled):hover {
    background: var(--t-surface-2); border-color: var(--t-line-strong);
  }
}
.try-it :is(.apb-pill, .lcp-chan, .crm-type).is-on {
  background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-accent);
}
.try-it-reset svg { width: 14px; height: 14px; }

/* inputs */
.try-it :is(.rcp-input, .iq-input, .lcp-input, .crm-input, .crm-text, .kba-input) {
  min-width: 0;
  padding: 12px 16px;
  background: var(--t-surface);
  border: 1px solid var(--t-line);
  border-radius: 14px;
  color: var(--t-text);
  font-size: 14px; letter-spacing: -0.005em;
  outline: none;
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
}
.try-it :is(.rcp-input, .iq-input, .lcp-input, .crm-input, .crm-text, .kba-input)::placeholder { color: var(--t-faint); }
.try-it :is(.rcp-input, .iq-input, .lcp-input, .crm-input, .crm-text, .kba-input):focus {
  border-color: var(--t-line-strong); background: var(--t-surface-2);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}
.try-it .rcp-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* focus ring for keyboard users */
.try-it :is(button, input, textarea):focus-visible { outline: 2px solid var(--t-on); outline-offset: 2px; }

/* Per-widget refinements. They repeat the .try-it prefix on purpose so they
   out-rank the shared primitives above. */
.try-it .rcp-mic, .try-it .rcp-send { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.try-it .rcp-input { border-radius: 999px; }
.try-it .iq-input { font-size: 15px; background: transparent; border-color: transparent; }
.try-it .iq-input:focus { background: var(--t-surface); border-color: var(--t-line-strong); }
.try-it .lcp-send, .try-it .kba-send, .try-it .crm-btn { padding: 0 20px; border-radius: 14px; }
.try-it .crm-log .crm-btn { padding: 11px 20px; border-radius: 999px; }
.try-it .crm-chip, .try-it .kba-cite { padding: 6px 12px; font-size: 12px; }
.try-it .apb-day { padding: 9px 14px; border-radius: 16px; }
.try-it .crm-cust { border-radius: 14px; }

/* ───────── 3a. 01 AI Receptionist ───────── */
.rcp { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 18px; min-height: 520px; }
.rcp-chat { display: flex; flex-direction: column; overflow: hidden; }
.rcp-call-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  background: var(--t-surface);
  border-bottom: 1px solid var(--t-line);
}
.rcp-call-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rcp-call-avatar {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--t-line-strong);
  font-family: var(--t-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--t-text);
}
.rcp-call-biz { margin: 0; font-size: 15px; font-weight: 500; letter-spacing: -0.015em; }
.rcp-call-status {
  margin: 2px 0 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--t-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--t-muted);
}
.rcp-call-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t-accent); animation: tiw-pulse 2.2s ease-in-out infinite; }
.rcp-hangup {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--t-text);
  border: 1px solid var(--t-line-strong);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 200ms var(--t-ease);
}
.rcp-hangup svg { width: 16px; height: 16px; transition: transform 240ms var(--t-ease); }
.rcp-hangup:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) {
  .rcp-hangup:hover { background: var(--t-on); color: var(--t-on-ink); }
  .rcp-hangup:hover svg { transform: rotate(135deg); }
}

.rcp-messages {
  flex: 1; min-height: 340px; max-height: 420px;
  padding: 20px 18px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.28);
  scroll-behavior: smooth;
}
.rcp-msg {
  max-width: 78%;
  padding: 10px 15px;
  border-radius: 18px;
  font-size: 14px; line-height: 1.5;
  animation: tiw-rise 420ms var(--t-ease) both;
}
@keyframes tiw-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rcp-msg-them { align-self: flex-start; background: var(--t-surface-2); border: 1px solid var(--t-line); border-top-left-radius: 6px; }
.rcp-msg-me { align-self: flex-end; background: var(--t-on); color: var(--t-on-ink); border-top-right-radius: 6px; }
.rcp-msg-note { align-self: center; background: transparent; color: var(--t-muted); font-size: 12px; text-align: center; padding: 4px 10px; }
.rcp-typing {
  align-self: flex-start;
  display: inline-flex; gap: 4px;
  padding: 13px 15px;
  background: var(--t-surface-2); border: 1px solid var(--t-line);
  border-radius: 18px; border-top-left-radius: 6px;
}
.rcp-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--t-muted); animation: tiw-blink 1.1s ease-in-out infinite; }
.rcp-typing span:nth-child(2) { animation-delay: 0.15s; }
.rcp-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes tiw-blink { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-2px); opacity: 1; } }

.rcp-compose { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--t-line); }
.rcp-input { flex: 1; border-radius: 999px; }
.rcp-mic, .rcp-send { width: 42px; height: 42px; padding: 0; border-radius: 50%; }
.rcp-mic {
  display: grid; place-items: center;
  background: var(--t-surface); color: var(--t-text);
  border: 1px solid var(--t-line);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 180ms var(--t-ease);
}
.rcp-mic:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .rcp-mic:hover { background: var(--t-surface-2); } }
.rcp-mic.is-listening { background: var(--t-accent); color: var(--t-accent-ink); animation: tiw-mic 1.3s ease-in-out infinite; }
@keyframes tiw-mic { 0%, 100% { box-shadow: 0 0 0 0 rgba(110, 239, 168, 0.4); } 50% { box-shadow: 0 0 0 9px rgba(110, 239, 168, 0); } }
.rcp-mic svg, .rcp-send svg { width: 16px; height: 16px; }
.rcp-mic[hidden], .rcp-send[hidden] { display: none; }

.rcp-side { padding: 22px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.rcp-fields { margin: 0; padding: 0; list-style: none; }
.rcp-fields li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--t-line);
  font-size: 14px;
}
.rcp-fields li:last-child { border-bottom: 0; }
.rcp-fields li span { color: var(--t-muted); }
.rcp-fields li strong { max-width: 62%; text-align: right; font-weight: 500; border-radius: 6px; }
.rcp-fields li strong.is-empty { color: var(--t-faint); font-weight: 400; }
.rcp-fields li strong.just-filled { animation: tiw-fill 1.3s ease-out; }
@keyframes tiw-fill { 0% { background: rgba(110, 239, 168, 0.3); } 100% { background: transparent; } }
.rcp-handoff { padding: 14px 16px; background: var(--t-surface); border: 1px dashed var(--t-line-strong); border-radius: 14px; }
.rcp-handoff[hidden] { display: none; }
.rcp-handoff-note { margin: 8px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }

/* ───────── 3b. 02 Instant Quotes ───────── */
.iq { display: flex; flex-direction: column; gap: 20px; min-height: 480px; }
.iq-input-row { display: flex; gap: 10px; padding: 10px; border-radius: 20px; }
.iq-input { flex: 1; font-size: 15px; background: transparent; border-color: transparent; }
.iq-input:focus { background: var(--t-surface); }
.iq-result { min-height: 300px; }
.iq-result:empty::before {
  content: 'A quote appears here once you ask.';
  display: block; padding: 76px 0; text-align: center; color: var(--t-faint); font-size: 14px;
}
.iq-thinking { display: inline-flex; align-items: center; gap: 12px; padding: 14px 4px; color: var(--t-muted); }
.iq-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--t-line-strong); border-top-color: var(--t-on); animation: tiw-spin 0.9s linear infinite; }
@keyframes tiw-spin { to { transform: rotate(360deg); } }

.iq-card { padding: 26px 28px; max-width: 640px; animation: tiw-rise 480ms var(--t-ease) both; }
.iq-card-title {
  margin: 8px 0 2px;
  font-size: 24px; font-weight: 400; letter-spacing: -0.025em; line-height: 1.15;
}
.iq-card-car { margin: 0 0 16px; color: var(--t-muted); font-size: 13px; }
.iq-lines { margin: 0 0 6px; padding: 0; list-style: none; }
.iq-lines li { display: flex; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--t-line); }
.iq-lines li span, .iq-sub span, .iq-tax span { color: var(--t-muted); }
.iq-lines li strong, .iq-sub strong, .iq-tax strong, .iq-total strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.iq-sub, .iq-tax { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: 13px; }
.iq-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
  margin-top: 6px; padding: 16px 0 6px;
  border-top: 1px solid var(--t-line-strong);
  font-size: 26px; font-weight: 400; letter-spacing: -0.03em;
}
.iq-total strong { color: var(--t-accent); }
.iq-notes { margin: 8px 0 18px; color: var(--t-muted); font-size: 13px; line-height: 1.55; }
.iq-booked { margin-top: 16px; padding: 14px 16px; background: var(--t-surface); border: 1px dashed var(--t-line-strong); border-radius: 14px; font-size: 13px; line-height: 1.55; }
.iq-booked[hidden] { display: none; }
.iq-booked p { margin: 0 0 4px; }
.iq-booked p:last-child { margin-bottom: 0; }
.iq-note { padding: 22px 26px; max-width: 640px; animation: tiw-rise 480ms var(--t-ease) both; }
.iq-note p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; }
.iq-note p:last-child { margin-bottom: 0; }
.iq-note .iq-note-small { color: var(--t-muted); font-size: 13px; }

/* ───────── 3c. 04 Appointment Booking ───────── */
.apb { min-height: 460px; }
.apb-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; }
.apb-steps { display: flex; flex-direction: column; gap: 12px; }
.apb-step-title { margin: 10px 0 0; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; }
.apb-step-title span {
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--t-line-strong);
  font-family: var(--t-mono); font-size: 11px; font-weight: 400; color: var(--t-text);
}
.apb-hint { margin: 0; color: var(--t-muted); font-size: 13px; line-height: 1.55; }
.apb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.apb-pill:disabled { opacity: 0.35; cursor: not-allowed; }
.apb-day { flex-direction: column; align-items: flex-start; gap: 1px; border-radius: 16px; padding: 9px 14px; }
.apb-day strong { font-weight: 500; }
.apb-day small { font-size: 11px; opacity: 0.6; }
.apb-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 8px; }
.apb-time {
  padding: 11px 8px;
  background: var(--t-surface); color: var(--t-text);
  border: 1px solid var(--t-line); border-radius: 12px;
  font-size: 13px; font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 180ms var(--t-ease);
}
.apb-time:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .apb-time:not(:disabled):not(.is-on):hover { border-color: var(--t-line-strong); background: var(--t-surface-2); } }
.apb-time.is-on { background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-accent); }
.apb-time.is-taken, .apb-time:disabled { background: transparent; color: var(--t-faint); border-color: transparent; text-decoration: line-through; cursor: not-allowed; }

.apb-side { padding: 22px; display: flex; flex-direction: column; gap: 14px; align-self: start; }
.apb-summary { margin: 0; padding: 0; list-style: none; }
.apb-summary li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--t-line); }
.apb-summary li:last-child { border-bottom: 0; }
.apb-summary span { color: var(--t-muted); }
.apb-summary strong { max-width: 62%; text-align: right; font-weight: 500; }
.apb-summary strong.is-empty { color: var(--t-faint); font-weight: 400; }

.apb-done .apb-steps { gap: 16px; }
.apb-ok { display: flex; align-items: center; gap: 16px; }
.apb-ok-mark {
  width: 46px; height: 46px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--t-accent); color: var(--t-accent-ink);
  animation: tiw-pop 520ms var(--t-ease) both;
}
.apb-ok-mark svg { width: 20px; height: 20px; }
@keyframes tiw-pop { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }
.apb-ok-title { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.025em; }
.apb-ok-sub { margin: 3px 0 0; color: var(--t-muted); font-size: 13px; }
.apb-sms {
  max-width: 480px; padding: 13px 16px;
  background: var(--t-surface-2); border: 1px solid var(--t-line);
  border-radius: 18px; border-top-left-radius: 6px;
  animation: tiw-rise 480ms var(--t-ease) both;
}
.apb-sms:nth-of-type(2) { animation-delay: 120ms; }
.apb-sms p { margin: 5px 0 0; font-size: 14px; line-height: 1.5; }
.apb-actions { margin-top: 4px; }
.apb-cal { margin: 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.apb-cal li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-bottom: 1px solid var(--t-line);
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.apb-cal li em { font-style: normal; color: var(--t-muted); }
.apb-cal li.is-taken { color: var(--t-faint); }
.apb-cal li.is-mine { background: var(--t-accent); color: var(--t-accent-ink); border-radius: 10px; border-bottom-color: transparent; }
.apb-cal li.is-mine em { color: rgba(7, 25, 15, 0.6); }

/* ───────── 3d. 05 Lead Capture ───────── */
.lcp { min-height: 460px; }
.lcp-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; }
.lcp-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lcp-gap { margin-top: 10px !important; }
.lcp-chans { display: flex; flex-wrap: wrap; gap: 8px; }
.lcp-compose { display: flex; gap: 8px; }
.lcp-input { flex: 1; }
.lcp-send { padding: 0 20px; border-radius: 14px; }
.lcp-inbox { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 480px; overflow-y: auto; }
.lcp-item { padding: 14px 16px; border-radius: 16px; }
.lcp-item.is-fresh { animation: tiw-drop 480ms var(--t-ease) both; border-color: var(--t-line-strong); }
@keyframes tiw-drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lcp-item-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lcp-sorting { color: var(--t-muted); font-size: 12px; }
.lcp-name { margin: 8px 0 0; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.lcp-msg { margin: 3px 0 0; font-size: 14px; line-height: 1.5; }
.lcp-reason { margin: 10px 0 0; color: var(--t-muted); font-size: 12.5px; line-height: 1.5; }
.lcp-route { margin: 4px 0 0; color: var(--t-muted); font-size: 12.5px; }
.lcp-route strong { color: var(--t-text); font-weight: 500; }
.lcp-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; }
.lcp-dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--t-on); }
.lcp-hot { color: var(--t-warn); }
.lcp-hot .lcp-dot { background: var(--t-warn); border-color: var(--t-warn); }
.lcp-warm { color: var(--t-accent); }
.lcp-warm .lcp-dot { background: var(--t-accent); border-color: var(--t-accent); }
.lcp-cold .lcp-dot { background: transparent; }
.lcp-count strong { color: var(--t-accent); }
.lcp-side { padding: 22px; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.lcp-count { margin: 0; font-size: 15px; color: var(--t-muted); }
.lcp-count strong { margin-right: 6px; color: var(--t-text); font-size: 32px; font-weight: 400; letter-spacing: -0.035em; }
.lcp-crm { margin: 8px 0 0; padding: 0; list-style: none; max-height: 340px; overflow-y: auto; }
.lcp-crm li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--t-line); font-size: 13px;
}
.lcp-crm li:last-child { border-bottom: 0; }
.lcp-crm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcp-crm em { min-width: 48px; text-align: right; font-style: normal; color: var(--t-muted); }

/* ───────── 3e. 03 Smart CRM ───────── */
.crm { min-height: 520px; }
.crm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 20px; }
.crm-left, .crm-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crm-gap { margin-top: 12px !important; }
.crm-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.crm-cust {
  width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 1px;
  padding: 11px 14px; border-radius: 14px;
  color: var(--t-text); cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 180ms var(--t-ease);
}
.crm-cust:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .crm-cust:not(.is-on):hover { border-color: var(--t-line-strong); background: var(--t-surface-2); } }
.crm-cust strong { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.crm-cust small { font-size: 12px; opacity: 0.6; }
.crm-cust em { margin-top: 3px; font-style: normal; font-size: 11px; opacity: 0.75; }
.crm-cust.is-on {
  background: var(--t-accent-soft); color: var(--t-text); border-color: var(--t-accent);
  box-shadow: inset 3px 0 0 var(--t-accent);
}
.crm-cust.is-on strong { color: var(--t-accent); }
.crm-ask { display: flex; gap: 8px; }
.crm-input { flex: 1; }
.crm-btn { padding: 0 18px; border-radius: 14px; }
.crm-text { width: 100%; resize: vertical; line-height: 1.5; border-radius: 14px; }
.crm-asks { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-chip { padding: 6px 11px; font-size: 12px; }
.crm-answer { padding: 14px 16px; animation: tiw-rise 420ms var(--t-ease) both; }
.crm-answer p { margin: 0; }
.crm-answer-q { color: var(--t-muted); font-size: 12px; }
.crm-answer-a { margin-top: 5px !important; font-size: 14px; line-height: 1.55; }
.crm-answer-src { margin-top: 8px !important; font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t-muted); }

.crm-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.crm-name { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
.crm-contact { margin: 4px 0 0; color: var(--t-muted); font-size: 13px; }
.crm-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.crm-tags span { padding: 4px 11px; border: 1px solid var(--t-line); border-radius: 999px; font-size: 12px; color: var(--t-muted); }
.crm-tags .tag-priority { color: var(--t-warn); border-color: var(--t-warn); background: var(--t-warn-soft); }
.crm-tags .tag-fleet, .crm-tags .tag-ev { color: var(--t-accent); border-color: var(--t-accent); background: var(--t-accent-soft); }
.crm-cust em { color: var(--t-warn); }
.crm-block { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.crm-reminder.is-set { border-color: var(--t-line-strong); background: var(--t-surface-2); }
.crm-summary { margin: 0; font-size: 14px; line-height: 1.6; }
.crm-hint { margin: 0; color: var(--t-muted); font-size: 13px; line-height: 1.55; }
.crm-log { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.crm-types { display: flex; gap: 6px; }
.crm-timeline { margin: 0; padding: 0; list-style: none; max-height: 300px; overflow-y: auto; }
.crm-timeline li {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 12px 0; border-bottom: 1px solid var(--t-line);
}
.crm-timeline li.is-fresh { animation: tiw-rise 480ms var(--t-ease) both; }
.crm-kind { padding-top: 3px; }
.crm-tl-title { margin: 0; font-size: 14px; font-weight: 500; letter-spacing: -0.01em; }
.crm-tl-note { margin: 3px 0 0; color: var(--t-muted); font-size: 13px; line-height: 1.5; }
.crm-timeline time { padding-top: 2px; color: var(--t-muted); font-size: 12px; white-space: nowrap; }

/* ───────── 3f. 06 Knowledge Assistant ───────── */
.kba { min-height: 460px; }
.kba-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 20px; }
.kba-docs { display: flex; flex-direction: column; gap: 8px; align-content: start; }
.kba-docs .kba-eyebrow { margin-bottom: 4px; }
.kba-doc { overflow: hidden; border-radius: 16px; transition: border-color 260ms ease, background-color 260ms ease; }
.kba-doc.is-open { background: var(--t-surface-2); }
.kba-doc.is-flash { border-color: var(--t-line-strong); animation: tiw-flash 1.4s ease-out; }
@keyframes tiw-flash { 0% { background: rgba(255, 255, 255, 0.2); } 100% { background: var(--t-surface-2); } }
.kba-doc-btn {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: transparent; color: var(--t-text); border: 0;
  font-size: 14px; font-weight: 500; letter-spacing: -0.01em; text-align: left;
  cursor: pointer;
}
.kba-doc-btn i { font-style: normal; font-size: 18px; line-height: 1; color: var(--t-muted); }
.kba-doc-body { margin: 0; padding: 0 16px 16px; color: var(--t-muted); font-size: 13px; line-height: 1.65; }
.kba-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kba-thread {
  min-height: 320px; max-height: 440px; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  background: rgba(0, 0, 0, 0.28);
}
.kba-hint { margin: auto; max-width: 380px; text-align: center; color: var(--t-muted); font-size: 13px; line-height: 1.6; }
.kba-q {
  align-self: flex-end; max-width: 80%;
  padding: 10px 15px;
  background: var(--t-on); color: var(--t-on-ink);
  border-radius: 18px; border-top-right-radius: 6px;
  font-size: 14px; line-height: 1.5;
}
.kba-a {
  align-self: flex-start; max-width: 90%;
  padding: 12px 16px;
  background: var(--t-surface-2); border: 1px solid var(--t-line);
  border-radius: 18px; border-top-left-radius: 6px;
  animation: tiw-rise 420ms var(--t-ease) both;
}
.kba-a p { margin: 0; font-size: 14px; line-height: 1.55; }
.kba-a.is-pending { color: var(--t-muted); font-size: 14px; }
.kba-a.is-declined { background: transparent; border-style: dashed; border-color: var(--t-line-strong); }
.kba-cites {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--t-line);
  color: var(--t-muted); font-size: 12px;
}
.kba-cite { padding: 4px 11px; font-size: 12px; color: var(--t-accent); border-color: var(--t-accent); background: var(--t-accent-soft); }
.kba-nosrc { font-family: var(--t-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.kba-form { display: flex; gap: 8px; }
.kba-input { flex: 1; }
.kba-send { padding: 0 22px; border-radius: 14px; }

/* ───────── 3g. 07 Workflow Automation ───────── */
.wfa { min-height: 460px; }
.wfa-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; }
.wfa-main { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; min-width: 0; }
.wfa-eyebrow-gap { margin-top: 18px !important; }
.wfa-incoming { width: 100%; padding: 18px 20px; }
.wfa-incoming-title { margin: 8px 0 3px; font-size: 22px; font-weight: 400; letter-spacing: -0.025em; }
.wfa-incoming-sub { margin: 0; color: var(--t-muted); font-size: 13px; line-height: 1.55; }
.wfa-steps { width: 100%; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.wfa-step {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border-radius: 16px;
  transition: border-color 260ms ease, background-color 260ms ease, opacity 260ms ease;
}
.wfa-step.is-running { border-color: var(--t-line-strong); background: var(--t-surface-2); }
.wfa-step.is-off, .wfa-step.is-skipped { opacity: 0.55; }
.wfa-num {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--t-line-strong);
  font-family: var(--t-mono); font-size: 12px; color: var(--t-text);
  transition: background-color 260ms ease, color 260ms ease, border-color 260ms ease;
}
.wfa-step.is-running .wfa-num { animation: tiw-ring 1.1s ease-in-out infinite; }
@keyframes tiw-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 243, 239, 0.35); } 50% { box-shadow: 0 0 0 7px rgba(244, 243, 239, 0); } }
.wfa-step.is-done .wfa-num { background: var(--t-accent); color: var(--t-accent-ink); border-color: var(--t-accent); }
.wfa-step.is-done { border-color: var(--t-accent); background: var(--t-accent-soft); }
.wfa-tally strong { color: var(--t-accent); }
.wfa-step-body { flex: 1; min-width: 0; }
.wfa-step-title { margin: 0; font-size: 14.5px; font-weight: 500; letter-spacing: -0.01em; }
.wfa-step-line { margin: 2px 0 0; color: var(--t-muted); font-size: 13px; line-height: 1.5; }
.wfa-switch {
  position: relative; flex: none;
  width: 44px; height: 26px; padding: 0;
  background: rgba(255, 255, 255, 0.16);
  border: 0; border-radius: 999px;
  cursor: pointer;
  transition: background-color 220ms ease;
}
.wfa-switch.is-on { background: var(--t-accent); }
.wfa-switch:disabled { opacity: 0.45; cursor: not-allowed; }
.wfa-knob {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--t-on);
  transition: transform 220ms var(--t-ease), background-color 220ms ease;
}
.wfa-switch.is-on .wfa-knob { transform: translateX(18px); background: var(--t-accent-ink); }
.wfa-result { padding: 22px; align-self: start; display: flex; flex-direction: column; gap: 8px; }
.wfa-hint { margin: 0; color: var(--t-muted); font-size: 13px; line-height: 1.6; }
.wfa-tally { margin: 0; color: var(--t-muted); font-size: 15px; }
.wfa-tally strong { margin-right: 6px; color: var(--t-text); font-size: 34px; font-weight: 400; letter-spacing: -0.035em; }
.wfa-hand { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 7px; font-size: 13px; line-height: 1.5; }

/* ───────── narrow screens (phones are not a focus yet, but nothing should break) ───────── */
@media (max-width: 820px) {
  .rcp, .apb-grid, .lcp-grid, .crm-grid, .kba-grid, .wfa-grid { grid-template-columns: 1fr; }
  .try-it-title-row { flex-wrap: wrap; }
}

/* ───────── reduced motion: keep state changes, drop movement ───────── */
@media (prefers-reduced-motion: reduce) {
  .try-it { opacity: 1; transform: none; transition: none; }
  .try-it-dot, .rcp-call-dot, .rcp-mic.is-listening, .wfa-step.is-running .wfa-num, .iq-spinner,
  .rcp-msg, .rcp-typing span, .rcp-fields li strong.just-filled, .iq-card, .iq-note, .apb-ok-mark, .apb-sms,
  .lcp-item.is-fresh, .crm-answer, .crm-timeline li.is-fresh, .kba-a, .kba-doc.is-flash { animation: none; }
}