* { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #f8fafc;
      color: #1e293b;
      min-height: 100vh;
    }
    header {
      position: relative;
      z-index: 4;
      background: #1e3a5f;
      color: white;
      padding: 0 32px;
      display: flex;
      align-items: center;
      gap: 14px;
      height: 64px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    }
    header .logo {
      width: 38px; height: 38px;
      background: rgba(255,255,255,0.15);
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
    }
    header .brand { flex: 1; }
    header .brand h1 { font-size: 17px; font-weight: 700; }
    header .brand p { font-size: 12px; opacity: 0.65; margin-top: 1px; }
    header .badge {
      background: #fbbf24;
      color: #10213a;
      padding: 6px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    header .back {
      color: rgba(255,255,255,0.75);
      text-decoration: none;
      font-size: 13px;
      padding: 6px 12px;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 6px;
      margin-right: 4px;
    }
    header .back:hover { background: rgba(255,255,255,0.1); }

    .demo-context-bar {
      position: relative;
      z-index: 3;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      padding: 10px 18px;
      border-top: 1px solid rgba(251,191,36,0.32);
      border-bottom: 1px solid rgba(251,191,36,0.28);
      background: #fff7d6;
      color: #334155;
      font-size: 13px;
      line-height: 1.45;
      text-align: center;
    }
    .demo-context-bar strong {
      color: #1e3a5f;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .demo-context-bar span {
      color: #475569;
      font-weight: 650;
    }

    .store-banner {
      position: relative;
      z-index: 2;
      background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
      color: white;
      padding: 64px 24px;
      text-align: center;
    }
    .store-banner h2 { font-size: 38px; font-weight: 800; margin-bottom: 12px; }
    .store-banner h2 span { color: #fbbf24; }
    .store-banner p {
      font-size: 18px;
      opacity: 0.85;
      max-width: 520px;
      margin: 0 auto 36px;
      line-height: 1.6;
    }
    .banner-note {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      font-size: 14px;
      font-weight: 600;
    }
    .banner-note strong {
      color: #fcd34d;
    }

    .categories {
      position: relative;
      z-index: 2;
      max-width: 960px;
      margin: 48px auto;
      padding: 0 24px;
    }
    .categories h3 { font-size: 20px; font-weight: 700; margin-bottom: 20px; color: #0f172a; }
    .cat-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 12px;
    }
    .cat-item {
      background: white;
      border-radius: 10px;
      padding: 18px 12px;
      text-align: center;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      cursor: pointer;
      transition: box-shadow 0.2s, transform 0.2s;
    }
    .cat-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
    .cat-item .icon { font-size: 28px; margin-bottom: 8px; }
    .cat-item p { font-size: 12px; font-weight: 600; color: #334155; }

    .info-strip {
      position: relative;
      z-index: 2;
      background: #f1f5f9;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
      padding: 20px 24px;
      display: flex;
      justify-content: center;
      gap: 48px;
      flex-wrap: wrap;
    }
    .info-item { display: flex; align-items: center; gap: 10px; }
    .info-item .icon { font-size: 20px; }
    .info-item div p:first-child { font-size: 13px; font-weight: 700; color: #0f172a; }
    .info-item div p:last-child { font-size: 12px; color: #64748b; }

    footer {
      position: relative;
      z-index: 2;
      background: #0f172a;
      color: #64748b;
      text-align: center;
      padding: 24px;
      font-size: 13px;
      margin-top: 40px;
    }

/* Dark overlay — blocks page interaction while tour is active */
  #tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.58);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 999997;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  #tour-overlay.active { opacity: 1; pointer-events: auto; }

  /* Chat button highlight ring when tour is active */
  #bb-trigger.tour-hl {
    box-shadow: 0 0 0 3px #fff, 0 0 0 7px #6366f1 !important;
    animation: tourPulse 1.4s ease-in-out infinite;
    z-index: 999998 !important;
  }
  @keyframes tourPulse {
    0%,100% { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(99,102,241,0.95); }
    50%      { box-shadow: 0 0 0 3px #fff, 0 0 0 13px rgba(99,102,241,0.3); }
  }

  /* Modal card (steps 1 & 2 — centered, on top of overlay) */
  .tour-card {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.88);
    background: #fff;
    border-radius: 20px;
    padding: 30px 30px 24px;
    max-width: 360px;
    width: calc(100vw - 48px);
    box-shadow: 0 24px 80px rgba(0,0,0,0.28);
    z-index: 999999;
    opacity: 0;
    transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.34,1.56,0.64,1);
    pointer-events: none;
  }
  .tour-card.tour-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
  }

  /* Tip card (step 3 — floating beside the open chat, no overlay) */
  .tour-card.tour-tip {
    top: auto; left: auto;
    bottom: 200px; right: 420px;
    width: auto; max-width: 260px;
    padding: 20px 22px 18px;
    transform: scale(0.9) translateY(10px);
  }
  .tour-card.tour-tip.tour-visible {
    transform: scale(1) translateY(0);
  }
  @media (max-width: 520px) {
    .tour-card.tour-tip { right: 8px; bottom: 100px; max-width: calc(100vw - 100px); }
  }

  /* Shared card internals */
  .tour-progress { display: flex; gap: 5px; margin-bottom: 18px; }
  .tour-dot { flex: 1; max-width: 28px; height: 3px; border-radius: 2px; background: #e2e8f0; }
  .tour-dot.active { background: #6366f1; }
  .tour-lbl { font-size: 10px; font-weight: 700; color: #6366f1; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 8px; }
  .tour-title { font-size: 18px; font-weight: 700; color: #0f172a; margin-bottom: 10px; line-height: 1.25; }
  .tour-body { font-size: 13px; color: #475569; line-height: 1.65; margin-bottom: 22px; }
  .tour-body strong { color: #0f172a; }
  .tour-sample {
    display: inline-block; background: #f1f5f9; color: #1e3a5f;
    padding: 4px 10px; border-radius: 6px; font-family: monospace;
    font-size: 12px; margin-top: 6px; cursor: pointer;
    transition: background 0.15s;
    user-select: none;
  }
  .tour-sample:hover { background: #dbeafe; color: #1d4ed8; }
  .tour-actions { display: flex; align-items: center; gap: 12px; }
  .tour-btn {
    background: #1e3a5f; color: #fff; border: none;
    padding: 12px 22px; border-radius: 10px; font-size: 13px;
    font-weight: 600; cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  .tour-btn:hover { background: #162d4a; transform: translateY(-1px); }
  .tour-skip { background: none; border: none; color: #94a3b8; font-size: 12px; cursor: pointer; padding: 4px; }
  .tour-skip:hover { color: #475569; }

/* Webchat guided overlay */
#webchat-tour-overlay,
#webchat-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 16, 31, 0.68);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 999997;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}

#webchat-tour-overlay.is-active,
#webchat-info-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

body.webchat-tour-active {
  overflow: hidden;
}

body.webchat-tour-active #bb-trigger,
body.webchat-tour-active #bb-panel {
  pointer-events: none !important;
}

#bb-trigger.webchat-tour-highlight {
  z-index: 999998 !important;
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px rgba(251, 191, 36, 0.88), 0 16px 44px rgba(0, 0, 0, 0.32) !important;
  animation: webchatTourPulse 1500ms ease-in-out infinite;
}

@keyframes webchatTourPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.webchat-tour-card,
.webchat-info-modal {
  position: fixed;
  z-index: 1000001;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 26px 86px rgba(0, 0, 0, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.webchat-tour-card {
  right: 104px;
  bottom: 104px;
  width: min(390px, calc(100vw - 32px));
  padding: 24px;
  border-radius: 18px;
  transform: translateY(12px) scale(0.97);
}

.webchat-tour-card.is-visible,
.webchat-info-modal.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.webchat-tour-card[data-step="1"]::after {
  display: none;
}

.webchat-tour-card[data-step="1"]::before {
  display: none;
}

.webchat-tour-card[data-step="2"],
.webchat-tour-card[data-step="3"] {
  left: 50%;
  right: auto;
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -46%) scale(0.97);
}

.webchat-tour-card[data-step="2"].is-visible,
.webchat-tour-card[data-step="3"].is-visible {
  transform: translate(-50%, -50%) scale(1);
}

.webchat-tour-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
}

.webchat-tour-progress span {
  width: 34px;
  height: 4px;
  border-radius: 999px;
  background: #dbe3ee;
}

.webchat-tour-progress span.is-active {
  background: #1e3a5f;
}

.webchat-tour-kicker,
.webchat-info-kicker {
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.webchat-tour-card h2,
.webchat-info-modal h2 {
  margin: 0 0 10px;
  color: #0f172a;
  font-size: 22px;
  line-height: 1.12;
}

.webchat-tour-card p,
.webchat-info-modal p,
.webchat-info-modal li {
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
}

.webchat-tour-card p,
.webchat-info-modal p {
  margin: 0 0 18px;
}

.webchat-tour-actions,
.webchat-info-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.webchat-tour-btn,
.webchat-info-btn {
  border: 0;
  border-radius: 10px;
  min-height: 42px;
  padding: 0 16px;
  background: #1e3a5f;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.webchat-tour-btn:hover,
.webchat-info-btn:hover {
  background: #152c49;
}

.webchat-tour-skip,
.webchat-info-close {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.webchat-tour-examples {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}

.webchat-tour-example {
  width: 100%;
  border: 1px solid #dbe3ee;
  border-radius: 10px;
  padding: 10px 12px;
  background: #f8fafc;
  color: #1e3a5f;
  text-align: left;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.webchat-tour-example:hover {
  border-color: #93c5fd;
  background: #eff6ff;
}

.webchat-info-modal {
  left: 50%;
  top: 50%;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 30px;
  border-radius: 20px;
  transform: translate(-50%, -46%) scale(0.97);
}

.webchat-info-modal.is-visible {
  transform: translate(-50%, -50%) scale(1);
}

.webchat-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.webchat-info-grid article {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.webchat-info-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #0f172a;
  font-size: 13px;
}

.webchat-info-grid span {
  color: #64748b;
  font-size: 12px;
  line-height: 1.45;
}

.webchat-info-modal ul {
  margin: 0 0 20px;
  padding-left: 20px;
}

@media (max-width: 720px) {
  header {
    height: auto;
    padding: 14px 16px;
    flex-wrap: wrap;
  }

  header .brand {
    min-width: 0;
  }

  header .badge {
    display: inline-flex;
    margin-left: auto;
    font-size: 11px;
    padding: 5px 10px;
  }

  .demo-context-bar {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 10px 14px;
    font-size: 12px;
  }

  .store-banner {
    padding: 44px 18px;
  }

  .store-banner h2 {
    font-size: 32px;
  }

  .webchat-tour-card {
    left: 16px;
    right: 16px;
    bottom: 96px;
    width: auto;
  }

  .webchat-tour-card[data-step="1"]::after,
  .webchat-tour-card[data-step="1"]::before {
    display: none;
  }

  .webchat-tour-card[data-step="2"],
  .webchat-tour-card[data-step="3"] {
    left: 16px;
    right: 16px;
    top: 50%;
    width: auto;
    transform: translateY(-46%) scale(0.97);
  }

  .webchat-tour-card[data-step="2"].is-visible,
  .webchat-tour-card[data-step="3"].is-visible {
    transform: translateY(-50%) scale(1);
  }

  .webchat-info-grid {
    grid-template-columns: 1fr;
  }

  .webchat-info-modal {
    padding: 24px;
  }
}