/* =========================================================================
   CRM+ — ChatBot service page

   Self-contained styling for chatbot.html. Tokens flip with the site's own
   theme switch (`html.dark` / `body.dark-mode`), so this page follows the
   header toggle like every other page rather than hard-coding one palette.
   ========================================================================= */

.cb-page {
  --cb-lime: #D4FB0A;
  --cb-lime-soft: #E2FF38;
  --cb-ink: #06090E;

  --cb-bg: #FBFCF7;
  --cb-surface: #FFFFFF;
  --cb-surface-2: #F4F6F0;
  --cb-border: #E6E9DF;
  --cb-border-strong: #D6DBCA;
  --cb-text: #0F172A;
  --cb-text-soft: #64748B;
  --cb-text-faint: #94A3B8;
  --cb-bot-bubble: #F4F6F0;
  --cb-shadow: 0 18px 40px -28px rgba(15, 23, 42, 0.45);

  background: var(--cb-bg);
  color: var(--cb-text);
}

html.dark .cb-page,
body.dark-mode .cb-page {
  --cb-bg: #06090E;
  --cb-surface: #0E121A;
  --cb-surface-2: #121722;
  --cb-border: #1E2635;
  --cb-border-strong: #2C3648;
  --cb-text: #F1F5F9;
  --cb-text-soft: #94A3B8;
  --cb-text-faint: #64748B;
  --cb-bot-bubble: #161C28;
  --cb-shadow: 0 18px 44px -26px rgba(0, 0, 0, 0.9);
}

.cb-shell {
  width: 100%;
  max-width: 78rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) { .cb-shell { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .cb-shell { padding-inline: 2rem; } }

/* ---------------------------------------------------------------- hero -- */

.cb-hero {
  position: relative;
  padding-block: 7.5rem 2.5rem;
  text-align: center;
  overflow: hidden;
}

/* Two soft brand washes instead of a flat block, echoing the mock. */
.cb-hero::before,
.cb-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.cb-hero::before {
  width: 34rem; height: 34rem;
  top: -17rem; inset-inline-start: -12rem;
  background: radial-gradient(circle, rgba(212, 251, 10, 0.22), transparent 68%);
}

.cb-hero::after {
  width: 30rem; height: 30rem;
  top: -6rem; inset-inline-end: -14rem;
  background: radial-gradient(circle, rgba(212, 251, 10, 0.14), transparent 70%);
}

.cb-hero > * { position: relative; z-index: 1; }

.cb-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--cb-lime);
  color: var(--cb-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(212, 251, 10, 0.9);
}

.cb-badge svg { width: 0.9rem; height: 0.9rem; }

.cb-hero h1 {
  margin-top: 1.15rem;
  font-size: clamp(2rem, 5.4vw, 3.75rem);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.cb-hero h1 .cb-hl { color: var(--cb-lime); }

/* The lime word needs a dark anchor on the pale hero background. */
html:not(.dark) body:not(.dark-mode) .cb-hero h1 .cb-hl {
  display: inline-block;
  padding: 0.02em 0.2em 0.08em;
  border-radius: 0.2em;
  background: var(--cb-ink);
  color: var(--cb-lime);
  box-shadow: 0 0.12em 0.35em rgba(6, 9, 14, 0.16);
}



.cb-hero p {
  margin-top: 0.9rem;
  color: var(--cb-text-soft);
  font-size: clamp(0.875rem, 1.6vw, 1.05rem);
  max-width: 44rem;
  margin-inline: auto;
  line-height: 1.85;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- tabs -- */

.cb-tabs {
  margin-top: 1.75rem;
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.4rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 999px;
  box-shadow: var(--cb-shadow);
}

.cb-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--cb-text-soft);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background-color 0.22s ease, color 0.22s ease;
}

.cb-tab svg { width: 1rem; height: 1rem; }
.cb-tab:hover { color: var(--cb-text); }

.cb-tab[aria-selected="true"] {
  background: var(--cb-ink);
  color: #FFFFFF;
}

.cb-tab[aria-selected="true"] svg { color: var(--cb-lime); }

html.dark .cb-tab[aria-selected="true"],
body.dark-mode .cb-tab[aria-selected="true"] {
  background: var(--cb-lime);
  color: var(--cb-ink);
}

html.dark .cb-tab[aria-selected="true"] svg,
body.dark-mode .cb-tab[aria-selected="true"] svg { color: var(--cb-ink); }

.cb-panel[hidden] { display: none; }

/* -------------------------------------------------------------- layout -- */

.cb-layout {
  display: grid;
  gap: 1.25rem;
  /* minmax(0,…) instead of a bare 1fr: a grid item's automatic minimum size is
     its min-content width, and the chat card's header demanded ~365px inside a
     343px column, which pushed 6px of the card off the left edge on a 375px
     screen. */
  grid-template-columns: minmax(0, 1fr);
  padding-block: 2rem 1rem;
}

@media (min-width: 1024px) {
  /* No align-items here on purpose: grid items stretch by default, so both
     cards take the full row height and their bottom edges line up. */
  .cb-layout { grid-template-columns: 20rem 1fr; }
}

.cb-card {
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 1.25rem;
  box-shadow: var(--cb-shadow);
}

/* ------------------------------------------------------------ scenarios -- */

.cb-side { padding: 1.35rem; display: flex; flex-direction: column; }

.cb-side h2 {
  font-size: 0.9375rem;
  font-weight: 800;
  text-align: center;
}

.cb-side > p {
  margin-top: 0.35rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  color: var(--cb-text-soft);
  text-align: center;
  line-height: 1.7;
}

.cb-scenarios { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }

.cb-scenario {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  border-radius: 0.9rem;
  cursor: pointer;
  text-align: start;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.cb-scenario:hover { border-color: var(--cb-border-strong); transform: translateY(-1px); }

.cb-scenario-icon {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  flex: none;
  color: var(--cb-text);
}

.cb-scenario-icon svg { width: 1.25rem; height: 1.25rem; }

.cb-scenario-body { flex: 1; min-width: 0; }

/* These live inside <button>, so they are spans rather than divs — a button
   may not legally contain block-level content. Spans are inline by default,
   which ran the title and the description together on one line. */
.cb-scenario-title,
.cb-scenario-desc,
.cb-step-title,
.cb-step-desc,
.cb-chat-name,
.cb-chat-sub { display: block; }

.cb-step > span:last-child { flex: 1; min-width: 0; }

.cb-scenario-title { font-size: 0.8125rem; font-weight: 800; }

.cb-scenario-desc {
  margin-top: 0.15rem;
  font-size: 0.6875rem;
  color: var(--cb-text-soft);
  line-height: 1.5;
}

.cb-scenario-mark {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 999px;
  background: var(--cb-ink);
  color: var(--cb-lime);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.cb-scenario-mark svg { width: 0.8rem; height: 0.8rem; }

.cb-scenario[aria-pressed="true"] {
  background: var(--cb-lime);
  border-color: var(--cb-lime);
  color: var(--cb-ink);
}

.cb-scenario[aria-pressed="true"] .cb-scenario-icon,
.cb-scenario[aria-pressed="true"] .cb-scenario-desc { color: var(--cb-ink); }
.cb-scenario[aria-pressed="true"] .cb-scenario-desc { opacity: 0.72; }
.cb-scenario[aria-pressed="true"] .cb-scenario-mark { opacity: 1; transform: scale(1); }

/* ------------------------------------------------------------- perks -- */

.cb-perks {
  /* auto keeps this pinned to the bottom of the stretched column; the gap
     above it is guaranteed by the scenarios' margin-bottom. */
  margin-top: auto;
  padding: 1.1rem;
  border: 1px solid var(--cb-border);
  border-radius: 1rem;
  background: var(--cb-surface-2);
}

.cb-perks h3 { font-size: 0.8125rem; font-weight: 800; text-align: center; }

.cb-perks ul {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cb-perks li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: var(--cb-text-soft);
}

.cb-perks li svg { width: 0.95rem; height: 0.95rem; color: #16A34A; flex: none; }

/* --------------------------------------------------------------- chat -- */

.cb-chat-col { display: flex; }
.cb-chat { display: flex; flex-direction: column; overflow: hidden; min-height: 34rem; flex: 1; }

@media (min-width: 1024px) {
  /* The wrapper is the grid item and the only thing that stretches; the card
     fills it absolutely so a long conversation can never grow the row. Without
     this the stream's content drove the height and both cards ballooned
     instead of the message list scrolling. */
  .cb-chat-col { position: relative; display: block; }
  .cb-chat { position: absolute; inset: 0; min-height: 0; }
}

.cb-chat-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cb-border);
}

.cb-avatar {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 0.85rem;
  background: var(--cb-lime);
  color: var(--cb-ink);
}

.cb-avatar svg { width: 1.35rem; height: 1.35rem; }

.cb-chat-id { flex: 1; min-width: 0; }
.cb-chat-name { font-size: 0.875rem; font-weight: 800; }
.cb-chat-sub { font-size: 0.6875rem; color: var(--cb-text-soft); margin-top: 0.1rem; }

.cb-online {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--cb-text-soft);
  flex: none;
}

.cb-online::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: #22C55E;
  animation: cbPulse 2s ease-in-out infinite;
}

@keyframes cbPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.cb-stream {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  overflow-y: auto;
  min-height: 12rem;
  scroll-behavior: smooth;
}

.cb-stream::-webkit-scrollbar { width: 6px; }
.cb-stream::-webkit-scrollbar-thumb { background: var(--cb-border-strong); border-radius: 999px; }

/* The site's own inbox mock puts the visitor on the RTL start edge and the
   assistant on the end edge (main.js does the same). Matching it keeps the
   two demos reading the same way. */
.cb-row { display: flex; flex-direction: column; max-width: 82%; }
.cb-row--bot { align-self: flex-end; align-items: flex-end; }
.cb-row--user { align-self: flex-start; align-items: flex-start; }

.cb-bubble {
  padding: 0.8rem 1rem;
  border-radius: 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.85;
  white-space: pre-line;
  animation: cbPop 0.28s ease-out both;
}

@keyframes cbPop {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.cb-row--bot .cb-bubble {
  background: var(--cb-bot-bubble);
  color: var(--cb-text);
  border-end-end-radius: 0.3rem;
}

.cb-row--user .cb-bubble {
  background: var(--cb-lime);
  color: var(--cb-ink);
  font-weight: 700;
  border-end-start-radius: 0.3rem;
}

.cb-meta {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.3rem;
  padding-inline: 0.35rem;
  font-size: 0.625rem;
  color: var(--cb-text-faint);
}

.cb-meta svg { width: 0.85rem; height: 0.85rem; }
.cb-row--user .cb-meta .cb-ticks { color: #3B82F6; }

/* Rich cards the bot sends (booking summary, order status, ticket). */
.cb-info {
  margin-top: 0.15rem;
  padding: 0.9rem 1rem;
  border-radius: 1.1rem;
  border: 1px solid var(--cb-border);
  background: var(--cb-surface-2);
  font-size: 0.75rem;
  animation: cbPop 0.28s ease-out both;
  min-width: 15rem;
}

.cb-info-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 800;
  font-size: 0.8125rem;
  margin-bottom: 0.6rem;
  color: var(--cb-text);
}

.cb-info-title svg { width: 1rem; height: 1rem; color: #16A34A; }

.cb-info dl { display: flex; flex-direction: column; gap: 0.4rem; }

.cb-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.cb-info-row dt { color: var(--cb-text-soft); }
.cb-info-row dd { font-weight: 700; color: var(--cb-text); }

.cb-info-foot {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--cb-border-strong);
  color: var(--cb-text-soft);
  font-size: 0.6875rem;
  line-height: 1.6;
}

/* typing indicator */
.cb-typing {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.85rem 1rem;
  background: var(--cb-bot-bubble);
  border-radius: 1.1rem;
  border-end-end-radius: 0.3rem;
}

.cb-typing span {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 999px;
  background: var(--cb-text-faint);
  animation: cbDot 1.2s ease-in-out infinite;
}

.cb-typing span:nth-child(2) { animation-delay: 0.15s; }
.cb-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes cbDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --------------------------------------------------------------- chips -- */

.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0 1.25rem 0.5rem;
}

.cb-chips:empty { display: none; }

.cb-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--cb-text);
  background: var(--cb-surface);
  border: 1px solid var(--cb-border-strong);
  border-radius: 0.7rem;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
  animation: cbPop 0.25s ease-out both;
}

.cb-chip svg { width: 0.9rem; height: 0.9rem; color: var(--cb-text-soft); }

.cb-chip:hover {
  background: var(--cb-lime);
  border-color: var(--cb-lime);
  color: var(--cb-ink);
  transform: translateY(-1px);
}

.cb-chip:hover svg { color: var(--cb-ink); }

.cb-chip--primary { border-color: var(--cb-lime); }

/* ------------------------------------------------------------ composer -- */

.cb-composer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.35rem 1.25rem 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  background: var(--cb-surface-2);
  border: 1px solid var(--cb-border);
  border-radius: 1rem;
}

.cb-composer input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--cb-text);
  font-size: 0.8125rem;
  font-family: inherit;
  padding-inline: 0.6rem;
}

.cb-composer input:focus { outline: none; }
.cb-composer input::placeholder { color: var(--cb-text-faint); }

.cb-send {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border: 0;
  border-radius: 0.8rem;
  background: var(--cb-lime);
  color: var(--cb-ink);
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.cb-send:hover { background: var(--cb-lime-soft); transform: scale(1.05); }
.cb-send:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.cb-send svg { width: 1.05rem; height: 1.05rem; }

/* Mirror the paper-plane so it points the way the text flows. */
html[dir="rtl"] .cb-send svg { transform: scaleX(-1); }

.cb-tool {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: none;
  border: 0;
  background: transparent;
  color: var(--cb-text-faint);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.cb-tool:hover { color: var(--cb-text); background: var(--cb-border); }
.cb-tool svg { width: 1rem; height: 1rem; }

.cb-disclaimer {
  padding: 0 1.25rem 1rem;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--cb-text-faint);
}

/* Small reset control in the chat header. */
.cb-reset {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--cb-text-soft);
  background: transparent;
  border: 1px solid var(--cb-border);
  border-radius: 0.6rem;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.cb-reset:hover { color: var(--cb-text); border-color: var(--cb-border-strong); }
.cb-reset svg { width: 0.85rem; height: 0.85rem; }

/* ---------------------------------------------------------------- flow -- */

.cb-flow { margin-top: 1.25rem; padding: 1.5rem; }

.cb-flow-grid {
  display: grid;
  column-gap: 2.25rem;
  row-gap: 1.5rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) { .cb-flow-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cb-flow-grid { grid-template-columns: repeat(4, 1fr); } }

.cb-step { display: flex; align-items: flex-start; gap: 0.85rem; position: relative; }

.cb-step-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--cb-border-strong);
  background: var(--cb-surface-2);
  color: var(--cb-text);
}

.cb-step-icon svg { width: 1.25rem; height: 1.25rem; }
.cb-step-title { font-size: 0.8125rem; font-weight: 800; }

.cb-step-desc {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: var(--cb-text-soft);
  line-height: 1.7;
}

/* Connector arrow, centred in the column gap and level with the icon.

   The arrow only makes sense on a step that actually follows another one on
   the SAME row. At two columns that is every second item; at four columns it
   is everything but the first. A step that starts a row must not show one, or
   it points back at empty space. */
.cb-step::after {
  content: '';
  position: absolute;
  /* half the 2.25rem gap, minus half the arrow's own width */
  inset-inline-start: -1.575rem;
  /* icon is 2.75rem tall, so its centre is 1.375rem down */
  top: 0.925rem;
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
  color: var(--cb-text-faint);
  opacity: 0;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* two columns: rows are (1,2) and (3,4) — only the even item follows another */
@media (min-width: 768px) {
  .cb-flow-grid > .cb-step:nth-child(even)::after { opacity: 1; }
}

/* four columns: one row, so every step after the first follows another */
@media (min-width: 1024px) {
  .cb-flow-grid > .cb-step:not(:first-child)::after { opacity: 1; }
}

/* ----------------------------------------------------------- how we work -- */

.cb-how { padding-block: 2rem 1rem; display: flex; flex-direction: column; gap: 1.25rem; }

.cb-how-head { text-align: center; max-width: 46rem; margin-inline: auto; }

.cb-how-head h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.35;
}

.cb-how-hl { color: var(--cb-lime); }

/* pure lime on the near-white page smears; this is the darker shade the light
   theme already uses for lime-on-white text elsewhere on the page */
html:not(.dark) body:not(.dark-mode) .cb-how-hl { color: #A9C90A; }

.cb-how-mark {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 999px;
  border: 2px solid var(--cb-lime);
  background: var(--cb-surface);
  color: var(--cb-text);
}

.cb-how-mark svg { width: 1.5rem; height: 1.5rem; }

.cb-how-head p { margin-top: 0.75rem; color: var(--cb-text-soft); font-size: 0.875rem; line-height: 1.9; }

/* ----------------------------------------------------------- the stepper -- */

.cb-hs {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .cb-hs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* five steps over two columns leaves a lone card; spanning the row reads as
     deliberate rather than broken */
  .cb-hs > .cb-hs-item:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
  .cb-hs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; }
  .cb-hs > .cb-hs-item:last-child { grid-column: auto; }
}

.cb-hs-item { display: flex; flex-direction: column; }

/* --- the numbered rail above the cards --- */

.cb-hs-rail {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.cb-hs-line { display: none; }

.cb-hs-num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 999px;
  border: 2px solid var(--cb-lime);
  background: var(--cb-surface);
  color: var(--cb-text);
  font-size: 0.9375rem;
  font-weight: 900;
  line-height: 1;
}

.cb-hs-mark { display: none; }

/* The rail is only a rail once the five steps sit side by side. Stacked, the
   dashes would trail off toward nothing. */
@media (min-width: 1024px) {
  .cb-hs-line {
    display: block;
    flex: 1;
    height: 0;
    border-top: 2px dashed var(--cb-border-strong);
  }

  /* the outer stubs stay in the flow — that is what keeps every number centred
     over its own card — but stop drawing past the first and last step. In RTL
     `--head` is the right-hand stub, so it is step 1 that loses it. */
  .cb-hs-item:first-child .cb-hs-line--head,
  .cb-hs-item:last-child .cb-hs-line--tail { visibility: hidden; }

  .cb-hs-mark {
    position: absolute;
    top: 50%;
    /* half the grid gap plus half the marker, so it lands in the seam between
       two cards instead of floating inside one of them */
    inset-inline-start: calc(-0.425rem - 0.625rem);
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    border-radius: 999px;
    border: 1px solid var(--cb-border-strong);
    background: var(--cb-surface);
    color: var(--cb-text-faint);
  }

  .cb-hs-mark svg { width: 0.7rem; height: 0.7rem; }

  /* nothing flows into step 1 */
  .cb-hs-item:first-child .cb-hs-mark { display: none; }
}

/* --- the step card --- */

.cb-hs-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.1rem 1.1rem;
  text-align: center;
}

.cb-hs-icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-inline: auto;
  border-radius: 999px;
  background: var(--cb-surface-2);
  color: var(--cb-text);
}

.cb-hs-icon svg { width: 1.5rem; height: 1.5rem; }

.cb-hs-card h3 { margin-top: 0.9rem; font-size: 0.9375rem; font-weight: 800; }

.cb-hs-card > p {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--cb-text-soft);
  line-height: 1.8;
}

/* --- the mock-up panel inside each card --- */

/* Every .cb-mock is a picture, not a UI: role="img" on the container makes its
   children presentational, so the fake fields and buttons are never announced
   as controls and nothing inside is focusable. */
.cb-mock {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.7rem;
  border: 1px solid var(--cb-border);
  border-radius: 0.9rem;
  background: var(--cb-surface-2);
  text-align: start;
}

.cb-mock-head {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  text-align: center;
  color: var(--cb-text);
  margin-bottom: 0.15rem;
}

.cb-mock-btn {
  display: block;
  margin-top: auto;
  padding: 0.5rem;
  border-radius: 0.55rem;
  background: var(--cb-lime);
  color: var(--cb-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  text-align: center;
}

/* step 1 — request form */

.cb-fld { display: block; }

.cb-fld-label {
  display: block;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--cb-text-soft);
  margin-bottom: 0.25rem;
}

.cb-fld-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  min-height: 1.9rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--cb-border);
  border-radius: 0.5rem;
  background: var(--cb-surface);
  font-size: 0.625rem;
  color: var(--cb-text-faint);
}

.cb-fld-box--select svg { width: 0.7rem; height: 0.7rem; flex: none; }

/* step 2 — flow diagram */

.cb-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--cb-border);
  border-radius: 0.5rem;
  background: var(--cb-surface);
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--cb-text);
  text-align: center;
  line-height: 1.4;
}

.cb-node svg { width: 0.75rem; height: 0.75rem; flex: none; color: var(--cb-text-soft); }

.cb-node--start {
  border-color: var(--cb-lime);
  background: var(--cb-surface);
  background: color-mix(in srgb, var(--cb-lime) 18%, var(--cb-surface));
}

.cb-node--sm { flex: 1; padding: 0.35rem 0.3rem; font-size: 0.5625rem; }
.cb-node--sm svg { width: 0.65rem; height: 0.65rem; }

.cb-wire {
  display: block;
  width: 0;
  height: 0.6rem;
  margin-inline: auto;
  border-inline-start: 1px solid var(--cb-border-strong);
}

/* the split feeds two children, so it needs a stem down to a shoulder and a
   drop at each end of that shoulder — a single vertical line would point at
   the gap between the two nodes instead of at either of them */
.cb-wire--split {
  position: relative;
  width: 100%;
  height: 1.1rem;
  border-inline-start: 0;
  margin-inline: 0;
}

.cb-wire--split::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 50%;
  height: 0.55rem;
  border-inline-start: 1px solid var(--cb-border-strong);
}

.cb-wire--split::before {
  content: '';
  position: absolute;
  top: 0.55rem;
  inset-inline: 25%;
  height: 0.55rem;
  border-top: 1px solid var(--cb-border-strong);
  border-inline-start: 1px solid var(--cb-border-strong);
  border-inline-end: 1px solid var(--cb-border-strong);
}

.cb-branch { display: flex; gap: 0.35rem; }

/* step 3 — chat preview */

/* bot on the left, customer on the right — the same side convention the live
   demo above uses, so the preview does not contradict it */
.cb-mrow {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  align-self: flex-end;
  gap: 0.35rem;
  max-width: 100%;
}

/* the bot bubble takes the whole row so its text is not squeezed into five
   lines inside a 180px card; the customer's stays a short right-hand pill */
.cb-mrow .cb-mbubble { flex: 1; min-width: 0; }

.cb-mrow--user { align-self: flex-start; max-width: 90%; }
.cb-mrow--user .cb-mbubble { flex: none; }

.cb-mavatar {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border-radius: 999px;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  font-size: 0.6875rem;
}

.cb-mavatar--bot { background: var(--cb-lime); border-color: var(--cb-lime); color: var(--cb-ink); }
.cb-mavatar svg { width: 0.7rem; height: 0.7rem; }

.cb-mbubble {
  padding: 0.4rem 0.55rem;
  border-radius: 0.6rem;
  background: var(--cb-surface);
  border: 1px solid var(--cb-border);
  font-size: 0.625rem;
  line-height: 1.6;
  color: var(--cb-text);
}

.cb-mbubble--user { background: var(--cb-lime); border-color: var(--cb-lime); color: var(--cb-ink); font-weight: 700; }

.cb-mchips { display: flex; gap: 0.35rem; margin-top: auto; }

.cb-mchip {
  flex: 1;
  padding: 0.35rem 0.3rem;
  border: 1px solid var(--cb-border-strong);
  border-radius: 0.5rem;
  background: var(--cb-surface);
  font-size: 0.5625rem;
  font-weight: 700;
  text-align: center;
  color: var(--cb-text);
}

/* step 4 — test checklist */

.cb-test {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.625rem;
  color: var(--cb-text-soft);
}

.cb-test svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  padding: 0.2rem;
  border-radius: 999px;
  background: #16A34A;
  color: #FFFFFF;
}

.cb-pass {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: auto;
  padding: 0.45rem;
  border: 1px solid var(--cb-lime);
  border-radius: 0.55rem;
  background: var(--cb-surface);
  background: color-mix(in srgb, var(--cb-lime) 16%, var(--cb-surface));
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--cb-text);
}

.cb-pass svg { width: 0.8rem; height: 0.8rem; color: #16A34A; }

/* step 5 — launched */

.cb-mock--done { align-items: center; justify-content: center; text-align: center; gap: 0.55rem; }

.cb-done-ring {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 999px;
  background: #16A34A;
  color: #FFFFFF;
  box-shadow: 0 0 0 0.45rem rgba(22, 163, 74, 0.14);
}

.cb-done-ring svg { width: 1.5rem; height: 1.5rem; stroke-width: 3; }

.cb-done-title { font-size: 0.75rem; font-weight: 800; color: var(--cb-text); }
.cb-done-desc { font-size: 0.625rem; color: var(--cb-text-soft); line-height: 1.7; }

.cb-mock--done .cb-mock-btn { align-self: stretch; margin-top: 0.35rem; }

/* --------------------------------------------------------------- gains -- */

/* no heading here by request, so the box is padded as a plain strip — the list
   still carries an aria-label so the perks are not an unlabelled run of items */
.cb-gains { padding: 1.15rem 1.5rem; }

.cb-gains ul {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) { .cb-gains ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cb-gains ul { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; } }

.cb-gains li { display: flex; align-items: center; gap: 0.6rem; }

/* hairlines between the five perks, drawn on each item's inline-start edge so
   the first one in the row never gets a leading rule */
@media (min-width: 1024px) {
  .cb-gains li { padding-inline: 0.9rem; }
  .cb-gains li + li { border-inline-start: 1px solid var(--cb-border); }
}

.cb-gain-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  flex: none;
  border-radius: 999px;
  background: var(--cb-surface-2);
  color: var(--cb-text);
}

.cb-gain-icon svg { width: 1.1rem; height: 1.1rem; }

.cb-gain-body { min-width: 0; }
.cb-gain-title { display: block; font-size: 0.75rem; font-weight: 800; }
.cb-gain-desc { display: block; margin-top: 0.15rem; font-size: 0.625rem; color: var(--cb-text-soft); line-height: 1.6; }

/* Sector-tailoring table */
.cb-sectors { padding: 1.5rem; }
.cb-sectors h3 { font-size: 1.05rem; font-weight: 800; text-align: center; }
.cb-sectors > p { margin-top: 0.5rem; text-align: center; color: var(--cb-text-soft); font-size: 0.8125rem; line-height: 1.8; }

.cb-table-wrap { margin-top: 1.25rem; overflow-x: auto; }

.cb-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; min-width: 40rem; }

.cb-table th,
.cb-table td {
  padding: 0.8rem 0.9rem;
  text-align: start;
  border-bottom: 1px solid var(--cb-border);
  vertical-align: top;
  line-height: 1.7;
}

.cb-table th {
  font-weight: 800;
  color: var(--cb-text);
  background: var(--cb-surface-2);
  white-space: nowrap;
}

.cb-table td { color: var(--cb-text-soft); }
.cb-table tbody tr:last-child th,
.cb-table tbody tr:last-child td { border-bottom: 0; }
.cb-table tbody th { background: transparent; }

.cb-table-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 800;
  color: var(--cb-text);
}

.cb-table-tag svg { width: 0.95rem; height: 0.95rem; }

/* ----------------------------------------------------------------- cta -- */

.cb-cta {
  padding-block: 2.5rem 4.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
}

.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.cb-btn svg { width: 1.1rem; height: 1.1rem; }
.cb-btn:hover { transform: translateY(-2px); }

.cb-btn--primary {
  background: var(--cb-lime);
  color: var(--cb-ink);
  box-shadow: 0 16px 34px -18px rgba(212, 251, 10, 0.95);
}

.cb-btn--primary:hover { background: var(--cb-lime-soft); }

.cb-btn--ghost {
  background: var(--cb-surface);
  color: var(--cb-text);
  border: 1px solid var(--cb-border-strong);
}

.cb-btn--ghost:hover { border-color: var(--cb-text-soft); }

/* --------------------------------------------------------------- misc -- */

.cb-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cb-bubble, .cb-chip, .cb-info { animation: none; }
  .cb-online::before, .cb-typing span { animation: none; opacity: 1; }
  .cb-stream { scroll-behavior: auto; }
}

/* ------------------------------------------- mobile: horizontal tab bar -- */

/* Below lg the sidebar stops being a card and becomes a segmented tab strip
   sitting directly above the chat. `display: contents` drops the <aside> box
   so its children become grid items of .cb-layout and can be reordered — the
   perks list has to move BELOW the chat, otherwise it would sit between the
   tabs and the simulator they control. */
.cb-scenario-short { display: none; }

@media (max-width: 1023px) {
  .cb-side { display: contents; }
  .cb-side h2 { order: 0; }
  .cb-side > p { display: none; }
  .cb-scenarios { order: 1; }
  .cb-chat-col { order: 2; }
  .cb-perks { order: 3; }

  .cb-layout { gap: 0.85rem; }
  .cb-side h2 { font-size: 0.8125rem; color: var(--cb-text-soft); }

  .cb-scenarios {
    display: flex;
    /* the desktop rule stacks them; this strip has to run across */
    flex-direction: row;
    gap: 0.5rem;
    margin-bottom: 0;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* bleed to the screen edges so the strip reads as scrollable */
    margin-inline: -0.75rem;
    padding-inline: 0.75rem;
    padding-bottom: 0.15rem;
  }

  .cb-scenarios::-webkit-scrollbar { display: none; }

  .cb-scenario {
    flex: 0 0 auto;
    width: 4.75rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.65rem 0.3rem;
    text-align: center;
    border-radius: 0.85rem;
    scroll-snap-align: center;
  }


  .cb-scenario-icon { width: 1.6rem; height: 1.6rem; }
  .cb-scenario-icon svg { width: 1.15rem; height: 1.15rem; }

  /* icon + short name only */
  .cb-scenario-body { flex: none; width: 100%; }
  .cb-scenario-title,
  .cb-scenario-desc,
  .cb-scenario-mark { display: none; }

  .cb-scenario-short {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1.2;
  }

  /* margin-top: auto only makes sense inside the stretched flex sidebar */
  .cb-perks { margin-top: 0; }
}

@media (max-width: 1023px) {
  /* the header has to fit avatar + name + reset + status in 343px; the reset
     button drops to icon-only so the bot name stays on one line. The button
     already carries an aria-label, so nothing is lost for screen readers. */
  .cb-reset-txt { display: none; }
  .cb-reset {
    padding: 0;
    width: 2.25rem;
    height: 2.25rem;
    justify-content: center;
  }
  .cb-reset svg { width: 1rem; height: 1rem; }
}