/* =========================================================================
   Enterprise AI Platform — interactive tour styles (Phase A)
   ------------------------------------------------------------------------
   Sections:
   - Theme tokens (per-industry accent shifts)
   - 4-step wizard (industry → sub → dept → role) + breadcrumb
   - Three feature sections (Insight / Analysis / Action) — 2-column,
     alternating, viewport-tall, with internal chat scroll
   - Chat player blocks (text, kpi_grid, table, chart, callout, suggestions,
     artifact, sources)
   - Mobile fallbacks
   ========================================================================= */

/* ---------- Theme tokens ----------
 * Default (no industry) = CCTech blue + orange.
 * Each industry pick swaps the primary, accent, soft backgrounds, AND
 * adds a page-level ambient tint that shifts the whole feel.
 */
:root {
  /* primary */
  --eai-brand-blue: #1F73B7;
  --eai-brand-blue-deep: #155487;
  --eai-brand-orange: #F08C2A;
  --eai-brand-orange-deep: #B85A05;

  /* role-based tokens (re-bound per industry below) */
  --eai-primary: var(--eai-brand-blue);
  --eai-primary-deep: var(--eai-brand-blue-deep);
  --eai-accent: var(--eai-brand-orange);
  --eai-accent-bg: #FFF7EB;
  --eai-soft-bg: #F6F9FC;
  --eai-soft-bg-2: #E9F1F8;
  --eai-card-border: #DCE7F1;

  /* page ambient (subtle full-page tint behind sections) */
  --eai-page-tint: transparent;
  --eai-hero-tint-overlay: transparent;

  /* neutral text — stays consistent */
  --eai-text: #1F2D3D;
  --eai-text-muted: #6C7B8A;
  --eai-card-bg: #FFFFFF;
}

/* Smooth transitions on theme variable changes — feels intentional. */
html { transition: background-color 0.5s ease; }
.eai-wizard,
.eai-feature,
.eai-feature--alt,
.eai-chat,
.eai-chat__topbar,
.eai-chat__messages,
.eai-feature__title,
.eai-feature__eyebrow,
.eai-msg--user .eai-msg__bubble,
.eai-tile,
.eai-wizard__crumb {
  transition: background 0.45s ease, color 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
}

/* =====================
 * MFG — warm industrial
 * Terracotta primary + amber accent + warm cream backgrounds
 * ===================== */
html[data-active-industry="mfg"] {
  --eai-primary:       #C0410A;
  --eai-primary-deep:  #7E2A06;
  --eai-accent:        #F08C2A;
  --eai-accent-bg:     #FFEDD8;
  --eai-soft-bg:       #FFF6EC;
  --eai-soft-bg-2:     #FBE7CF;
  --eai-card-border:   #F0D9BD;
  --eai-page-tint:     #FFF8F0;
}

/* =====================
 * EPC — deep construction
 * Navy primary + teal accent + cool slate backgrounds
 * ===================== */
html[data-active-industry="epc"] {
  --eai-primary:       #0E3A5F;
  --eai-primary-deep:  #07223A;
  --eai-accent:        #2BA38A;
  --eai-accent-bg:     #E1F2EC;
  --eai-soft-bg:       #EEF3F8;
  --eai-soft-bg-2:     #D7E0EA;
  --eai-card-border:   #C7D2DE;
  --eai-page-tint:     #F2F6FA;
}

/* =====================
 * AEC — refined slate
 * Charcoal primary + sienna accent + warm paper backgrounds
 * ===================== */
html[data-active-industry="aec"] {
  --eai-primary:       #2C3E50;
  --eai-primary-deep:  #1A2733;
  --eai-accent:        #B95F3E;
  --eai-accent-bg:     #F6E9E0;
  --eai-soft-bg:       #F5F2EC;
  --eai-soft-bg-2:     #E7E1D2;
  --eai-card-border:   #DCD5C5;
  --eai-page-tint:     #F8F5EE;
}

/* Re-bind selectors that previously hardcoded --eai-brand-blue to use
 * --eai-primary so they pick up the industry theme automatically. */
html[data-active-industry] {
  --eai-brand-blue: var(--eai-primary);
  --eai-brand-blue-deep: var(--eai-primary-deep);
}

/* Body-level ambient tint */
body { transition: background-color 0.5s ease; }
html[data-active-industry] body { background-color: var(--eai-page-tint); }

/* Hero subhead variants — only one visible at a time, swaps with industry. */
.eai-hero-subhead { display: none; transition: opacity 0.3s ease; }
html:not([data-active-industry])  .eai-hero-subhead[data-variant="default"],
html[data-active-industry=""]     .eai-hero-subhead[data-variant="default"],
html[data-active-industry="mfg"]  .eai-hero-subhead[data-variant="mfg"],
html[data-active-industry="epc"]  .eai-hero-subhead[data-variant="epc"],
html[data-active-industry="aec"]  .eai-hero-subhead[data-variant="aec"] {
  display: block;
}

/* "In production at enterprise scale" proof-point section — center align */
.eai-proof-center {
  text-align: center;
  margin-left: auto !important;
  margin-right: auto !important;
}
.eai-proof-center .ui.header,
.eai-proof-center h3 {
  text-align: center;
}
.eai-proof-center .metrics {
  display: flex !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: 48px;
}
.eai-proof-center .metric {
  text-align: center;
}

/* Final CTA section picks up the active industry palette
 * (Override the Jekyll shbg-blue-pallet inline gradient). */
html[data-active-industry] .eai-final-cta-section {
  background: linear-gradient(135deg, var(--eai-soft-bg) 0%, var(--eai-soft-bg-2) 100%) !important;
  transition: background 0.5s ease;
}
html[data-active-industry] .eai-final-cta-section .ui.large.header { color: var(--eai-primary); }
html[data-active-industry] .eai-final-cta-section .ui.small.header { color: var(--eai-text); }
/* Button on the final CTA picks up the theme too */
html[data-active-industry] .eai-final-cta-section .svg-button-background {
  fill: var(--eai-primary);
}
html[data-active-industry] .eai-final-cta-section .svg-button-icon-background {
  fill: var(--eai-primary-deep);
}
html[data-active-industry] .eai-final-cta-section .svg-button:hover .svg-button-background {
  fill: var(--eai-primary-deep);
}

/* ============================================================
 * WIZARD
 * ============================================================ */

.eai-wizard {
  background: linear-gradient(180deg, var(--eai-soft-bg) 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--eai-card-border);
  padding: 36px 24px 44px;
}

.eai-wizard__inner {
  max-width: 1080px;
  margin: 0 auto;
}

/* progress dots */
.eai-wizard__progress {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}
.eai-wizard-dot {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #DCE7F1;
  transition: background 0.2s ease;
}
.eai-wizard-dot.is-active { background: var(--eai-brand-blue); }
.eai-wizard-dot.is-done   { background: var(--eai-accent); }

/* step container */
.eai-wizard__steps {
  position: relative;
}
.eai-wizard-step {
  display: none;
}
.eai-wizard-step.is-active {
  display: block;
  animation: eai-fade-in 0.28s ease both;
}
@keyframes eai-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* picks-so-far breadcrumb (inside the active wizard step) */
.eai-wizard__picked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--eai-card-border);
}
.eai-wizard__crumb {
  background: #FFFFFF;
  border: 1.5px solid var(--eai-card-border);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--eai-brand-blue);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.eai-wizard__crumb::after {
  content: "✎";
  color: var(--eai-text-muted);
  font-size: 11px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.eai-wizard__crumb:hover {
  background: var(--eai-accent-bg);
  border-color: var(--eai-accent);
  color: var(--eai-brand-blue-deep);
}
.eai-wizard__crumb:hover::after { opacity: 1; }
.eai-wizard__crumb:focus-visible {
  outline: 2px solid var(--eai-brand-blue);
  outline-offset: 2px;
}
.eai-wizard__crumb-sep {
  color: var(--eai-text-muted);
  font-size: 14px;
  font-weight: 400;
}
.eai-wizard__crumb-next {
  color: var(--eai-text-muted);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;
  margin-left: 4px;
}
.eai-wizard-step__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--eai-brand-blue);
  margin: 0 0 6px;
  line-height: 1.2;
}
.eai-wizard-step__subtitle {
  font-size: 15px;
  color: var(--eai-text-muted);
  margin: 0 0 24px;
}

/* tile grid */
.eai-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.eai-tile {
  position: relative;
  background: #FFFFFF;
  border: 1.5px solid var(--eai-card-border);
  border-radius: 12px;
  padding: 18px 18px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eai-tile:hover {
  border-color: var(--eai-brand-blue);
  background: var(--eai-soft-bg);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(31, 115, 183, 0.08);
}
.eai-tile:focus-visible {
  outline: 3px solid var(--eai-brand-blue);
  outline-offset: 2px;
}
.eai-tile__short {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--eai-accent);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.eai-tile__name {
  font-size: 17px;
  font-weight: 700;
  color: var(--eai-text);
  line-height: 1.2;
}
.eai-tile__tagline {
  font-size: 12px;
  color: var(--eai-text-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.eai-tile__status-pill {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 7px;
  border-radius: 999px;
  text-transform: uppercase;
}
.eai-tile__status-pill--beta {
  background: #FFF7EB;
  color: var(--eai-brand-orange-deep);
  border: 1px solid #F5C886;
}
.eai-tile__status-pill--coming {
  background: #EEF1F4;
  color: var(--eai-text-muted);
  border: 1px solid #D7DDE3;
}
.eai-tile.is-coming-soon {
  opacity: 0.7;
}
.eai-tile.is-coming-soon .eai-tile__name {
  color: var(--eai-text-muted);
}

/* Step 1 — industry tiles preview the theme they'll trigger */
.eai-tile[data-action="pick-industry"] {
  border-left-width: 5px;
}
.eai-tile[data-action="pick-industry"][data-value="mfg"] {
  border-left-color: #C0410A;
}
.eai-tile[data-action="pick-industry"][data-value="mfg"] .eai-tile__short {
  color: #C0410A;
}
.eai-tile[data-action="pick-industry"][data-value="mfg"]:hover {
  border-color: #C0410A;
  background: #FFF6EC;
  box-shadow: 0 8px 24px rgba(192, 65, 10, 0.12);
}
.eai-tile[data-action="pick-industry"][data-value="epc"] {
  border-left-color: #0E3A5F;
}
.eai-tile[data-action="pick-industry"][data-value="epc"] .eai-tile__short {
  color: #0E3A5F;
}
.eai-tile[data-action="pick-industry"][data-value="epc"]:hover {
  border-color: #0E3A5F;
  background: #EEF3F8;
  box-shadow: 0 8px 24px rgba(14, 58, 95, 0.12);
}
.eai-tile[data-action="pick-industry"][data-value="aec"] {
  border-left-color: #2C3E50;
}
.eai-tile[data-action="pick-industry"][data-value="aec"] .eai-tile__short {
  color: #2C3E50;
}
.eai-tile[data-action="pick-industry"][data-value="aec"]:hover {
  border-color: #2C3E50;
  background: #F5F2EC;
  box-shadow: 0 8px 24px rgba(44, 62, 80, 0.12);
}

/* skip link */
.eai-wizard-step__skip {
  display: block;
  text-align: center;
  margin-top: 22px;
  font-size: 13px;
  color: var(--eai-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  padding: 6px;
}
.eai-wizard-step__skip strong {
  color: var(--eai-brand-blue);
  text-decoration: underline;
}
.eai-wizard-step__skip:hover strong { color: var(--eai-brand-blue-deep); }

/* ---------- breadcrumb (after completion) ---------- */
.eai-breadcrumb {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--eai-card-border);
  padding: 12px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  box-shadow: 0 1px 6px rgba(31, 115, 183, 0.04);
}
.eai-breadcrumb__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--eai-text-muted);
  text-transform: uppercase;
  margin-right: 4px;
}
.eai-breadcrumb__segments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.eai-breadcrumb__segment {
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 600;
  color: var(--eai-brand-blue);
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.eai-breadcrumb__segment:hover {
  background: var(--eai-accent-bg);
}
.eai-breadcrumb__sep {
  color: var(--eai-text-muted);
  font-size: 12px;
  margin: 0 -2px;
}
.eai-breadcrumb__actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.eai-breadcrumb__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid var(--eai-card-border);
  background: #FFFFFF;
  color: var(--eai-text-muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.eai-breadcrumb__btn:hover {
  border-color: var(--eai-brand-blue);
  color: var(--eai-brand-blue);
}

/* placeholder hint when status is coming_soon / beta */
.eai-breadcrumb__note {
  font-size: 12px;
  color: var(--eai-text-muted);
  font-style: italic;
}

/* ============================================================
 * FEATURE SECTIONS — 2-column alternating, viewport-tall
 * ============================================================ */

.eai-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 32px;
  min-height: 100vh;
  padding: 56px 32px;
  align-items: stretch;
  position: relative;
}
.eai-feature--alt {
  background: var(--eai-soft-bg);
}

/* alternation: description sits on left by default, on right when data-side="right" */
.eai-feature[data-side="right"] .eai-feature__desc { order: 2; }
.eai-feature[data-side="right"] .eai-feature__chat-col { order: 1; }

.eai-feature__desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 480px;
  padding: 24px 8px;
}
.eai-feature__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--eai-accent);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.eai-feature__title {
  font-size: 38px;
  font-weight: 700;
  color: var(--eai-brand-blue);
  margin: 0 0 14px;
  line-height: 1.15;
}
.eai-feature__lead {
  font-size: 16px;
  color: #3D5A75;
  margin: 0 0 20px;
  line-height: 1.55;
}
.eai-feature__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.eai-feature__bullets li {
  position: relative;
  padding: 10px 0 10px 22px;
  font-size: 14px;
  color: #3D5A75;
  line-height: 1.5;
  border-bottom: 1px solid var(--eai-card-border);
}
.eai-feature__bullets li:last-child { border-bottom: none; }
.eai-feature__bullets li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 10px;
  height: 2px;
  background: var(--eai-accent);
  border-radius: 1px;
}
.eai-feature__bullets li strong {
  color: var(--eai-brand-blue);
  display: block;
  margin-bottom: 2px;
}

/* scroll-for-next hint */
.eai-feature__hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: var(--eai-text-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.7;
  animation: eai-bounce 2.2s ease-in-out infinite;
}
@keyframes eai-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

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

.eai-feature__chat-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.eai-chat {
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--eai-card-border);
  border-radius: 18px;
  box-shadow: 0 10px 40px rgba(31, 115, 183, 0.08);
  overflow: hidden;
  height: 100%;
  max-height: calc(100vh - 88px);
  min-height: 520px;
}
.eai-chat__topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--eai-soft-bg) 100%);
  border-bottom: 1px solid var(--eai-card-border);
  flex-shrink: 0;
}
.eai-chat__topbar-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #34C759;
  flex-shrink: 0;
}
.eai-chat__topbar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--eai-brand-blue);
}
.eai-chat__topbar-context {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--eai-text-muted);
  letter-spacing: 0.5px;
  text-align: right;
}

.eai-chat__messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--eai-soft-bg);
  scroll-behavior: smooth;
}

.eai-chat__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--eai-card-border);
  background: #FFFFFF;
  flex-shrink: 0;
}
.eai-chat__progress {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--eai-card-border);
  overflow: hidden;
}
.eai-chat__progress-bar {
  height: 100%;
  width: 0%;
  background: var(--eai-accent);
  transition: width 0.3s ease;
}
.eai-control-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--eai-card-border);
  background: #FFFFFF;
  color: var(--eai-brand-blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.eai-control-btn:hover {
  border-color: var(--eai-brand-blue);
  background: var(--eai-soft-bg);
}
.eai-catchup {
  position: absolute;
  bottom: 60px;
  right: 16px;
  background: var(--eai-brand-blue);
  color: #FFFFFF;
  border: none;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(31, 115, 183, 0.3);
  font-family: inherit;
}

/* ---------- messages + bubbles ---------- */

.eai-msg {
  display: flex;
  flex-direction: column;
  max-width: 88%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.eai-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.eai-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}
.eai-msg--assistant {
  align-self: flex-start;
  align-items: flex-start;
}
.eai-msg__bubble {
  padding: 11px 16px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
}
.eai-msg--user .eai-msg__bubble {
  background: var(--eai-brand-blue);
  color: #FFFFFF;
  border-bottom-right-radius: 4px;
}
.eai-msg--assistant .eai-msg__bubble {
  background: #FFFFFF;
  color: var(--eai-text);
  border: 1px solid var(--eai-card-border);
  border-bottom-left-radius: 4px;
}

/* typing dots */
.eai-typing {
  display: inline-flex;
  gap: 5px;
  padding: 13px 16px;
  background: #FFFFFF;
  border: 1px solid var(--eai-card-border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.eai-typing__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--eai-brand-blue);
  opacity: 0.4;
  animation: eai-typing 1.2s infinite;
}
.eai-typing__dot:nth-child(2) { animation-delay: 0.15s; }
.eai-typing__dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes eai-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ---------- blocks inside assistant messages ---------- */

.eai-block {
  background: #FFFFFF;
  border: 1px solid var(--eai-card-border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-top: 8px;
  width: 100%;
  max-width: 100%;
}
.eai-block__caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: var(--eai-text-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* KPI grid */
.eai-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}
.eai-kpi {
  background: var(--eai-soft-bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.eai-kpi__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--eai-text-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.eai-kpi__value {
  font-size: 22px;
  font-weight: 700;
  color: var(--eai-brand-blue);
  line-height: 1.1;
}
.eai-kpi__unit {
  font-size: 13px;
  font-weight: 600;
  color: var(--eai-text-muted);
  margin-left: 2px;
}
.eai-kpi__delta {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
}
.eai-kpi__delta--bad  { color: #D63B25; }
.eai-kpi__delta--good { color: #2A9D5F; }

/* table */
.eai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.eai-table th {
  text-align: left;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--eai-text-muted);
  text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 2px solid var(--eai-card-border);
}
.eai-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #EEF1F4;
}
.eai-table tbody tr:last-child td { border-bottom: none; }
.eai-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--eai-brand-blue);
}

/* chart */
.eai-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* callout */
.eai-callout {
  border-left: 3px solid var(--eai-accent);
  background: var(--eai-accent-bg);
  padding: 10px 14px;
  margin-top: 8px;
  border-radius: 6px;
  font-size: 13px;
  color: #3D5A75;
  line-height: 1.5;
}
.eai-callout__title {
  font-weight: 700;
  color: var(--eai-brand-blue);
  margin-bottom: 4px;
  font-size: 13px;
}

/* suggestions */
.eai-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.eai-suggestion {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid var(--eai-accent);
  color: var(--eai-accent);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.eai-suggestion:hover {
  background: var(--eai-accent);
  color: #FFFFFF;
}

/* artifact card (action feature) */
.eai-artifact {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--eai-soft-bg) 100%);
  border: 1.5px solid var(--eai-card-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 8px;
}
.eai-artifact__icon {
  width: 44px;
  height: 44px;
  background: var(--eai-brand-blue);
  color: #FFFFFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.eai-artifact__info {
  flex: 1;
  min-width: 0;
}
.eai-artifact__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--eai-text);
  margin: 0 0 2px;
  line-height: 1.3;
}
.eai-artifact__subtitle {
  font-size: 11px;
  color: var(--eai-text-muted);
  margin: 0;
}
.eai-artifact__actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.eai-artifact__action {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--eai-card-border);
  background: #FFFFFF;
  color: var(--eai-brand-blue);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.eai-artifact__action:hover {
  background: var(--eai-brand-blue);
  color: #FFFFFF;
  border-color: var(--eai-brand-blue);
}

/* sources block */
.eai-sources {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--eai-card-border);
  font-size: 11px;
}
.eai-sources__label {
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--eai-text-muted);
  font-size: 10px;
  margin-bottom: 6px;
}
.eai-sources__list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.eai-sources__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--eai-text-muted);
  line-height: 1.4;
}
.eai-sources__item::before {
  content: "•";
  color: var(--eai-accent);
  font-weight: 700;
}
.eai-sources__name {
  font-weight: 600;
  color: var(--eai-text);
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 10.5px;
}
.eai-sources__meta {
  font-size: 10.5px;
  color: var(--eai-text-muted);
}
.eai-sources__badge {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--eai-accent-bg);
  color: var(--eai-accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* closing CTA card (after Action scenario) */
.eai-final-cta {
  background: linear-gradient(135deg, var(--eai-brand-blue) 0%, #155487 100%);
  color: #FFFFFF;
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 12px;
  text-align: center;
}
.eai-final-cta__lead {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: #FFFFFF;
}
.eai-final-cta__btn {
  display: inline-block;
  background: var(--eai-brand-orange);
  color: #FFFFFF;
  padding: 9px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.eai-final-cta__btn:hover {
  background: var(--eai-brand-orange-deep);
}

/* placeholder when no scenario available */
.eai-chat__placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
  color: var(--eai-text-muted);
  font-size: 14px;
}
.eai-chat__placeholder strong {
  color: var(--eai-brand-blue);
}

/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width: 880px) {
  .eai-feature {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 36px 16px;
    min-height: 0;
  }
  .eai-feature[data-side="right"] .eai-feature__desc { order: 0; }
  .eai-feature[data-side="right"] .eai-feature__chat-col { order: 0; }
  .eai-feature__desc { max-width: none; padding: 0; }
  .eai-feature__title { font-size: 28px; }
  .eai-chat {
    max-height: none;
    min-height: 480px;
    height: auto;
  }
  .eai-chat__messages {
    overflow-y: visible;
    max-height: none;
  }
  .eai-feature__hint { display: none; }
  .eai-wizard { padding: 24px 16px 32px; }
  .eai-wizard-step__title { font-size: 22px; }
  .eai-tile-grid { grid-template-columns: 1fr; }
  .eai-breadcrumb { padding: 10px 14px; }
  .eai-breadcrumb__actions { width: 100%; margin-left: 0; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .eai-msg,
  .eai-wizard-step,
  .eai-typing__dot,
  .eai-feature__hint,
  .eai-chat__progress-bar {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================================
   Page-section fixes — proof-point metric contrast + final-CTA image size
   ========================================================================= */

/* Proof point ("In production at enterprise scale") sits on the dark
   bossanova→blue-chill gradient. custom.css makes h1-h5/p/.ui.header white
   but doesn't cover .metric .value and .label divs — they inherit a dark
   color and become unreadable. Force white on all metric content here. */
.shbg-gradient-pallet.bossanova-to-blue-chill,
.shbg-gradient-pallet.bossanova-to-blue-chill .metrics,
.shbg-gradient-pallet.bossanova-to-blue-chill .metric,
.shbg-gradient-pallet.bossanova-to-blue-chill .metric .value,
.shbg-gradient-pallet.bossanova-to-blue-chill .metric .value .main,
.shbg-gradient-pallet.bossanova-to-blue-chill .metric .value .unit,
.shbg-gradient-pallet.bossanova-to-blue-chill .metric .label {
  color: #FFFFFF !important;
}

/* Stack the value above the label on the dark gradient for stronger hierarchy
   (the inline layout from custom.css crowds the value and label together,
   especially when the value is the word "Weeks"). */
.shbg-gradient-pallet.bossanova-to-blue-chill .metrics {
  gap: 32px 72px;
  justify-content: center;
  text-align: center;
}
.shbg-gradient-pallet.bossanova-to-blue-chill .metric {
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 160px;
}
.shbg-gradient-pallet.bossanova-to-blue-chill .metric .value {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1;
  justify-content: center;
}
.shbg-gradient-pallet.bossanova-to-blue-chill .metric .label {
  font-size: 0.95rem;
  line-height: 1.35;
  opacity: 0.95;
}

/* Final CTA section: the hero SVG is square 1000×1000; on a wide column it
   stretches to ~960px and dominates. Constrain it. */
.shbg-blue-pallet.fifty .ui.fluid.image[src*="enterprise-ai-hero"] {
  max-width: 420px;
  height: auto;
  margin: 0 auto;
  display: block;
}

/* =========================================================================
   Phase C-1 — Industry-specific hero subhead variants
   ========================================================================= */
.eai-hero-subhead { display: none; }
/* Default shows when no industry is active OR via picker fallback to 'all' */
html:not([data-active-industry]) .eai-hero-subhead[data-variant="default"],
html[data-active-industry=""] .eai-hero-subhead[data-variant="default"] { display: block; }
html[data-active-industry="mfg"] .eai-hero-subhead[data-variant="mfg"] { display: block; }
html[data-active-industry="epc"] .eai-hero-subhead[data-variant="epc"] { display: block; }
html[data-active-industry="aec"] .eai-hero-subhead[data-variant="aec"] { display: block; }

/* =========================================================================
   Phase C-3 — Feature section entrance animations
   ------------------------------------------------------------------------
   When a feature section first crosses 25% visibility, JS adds `.is-in-view`.
   This adds a subtle slide-up + fade-in. Skipped if reduce-motion is on.
   ========================================================================= */
.eai-feature {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
.eai-feature.is-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Once visible, lock the transition off so internal updates don't re-animate */
.eai-feature.is-in-view.is-settled {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .eai-feature {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* =========================================================================
   Rich follow-up blocks — 3D viewer / vision / five-why
   ========================================================================= */

/* ---- 3D Viewer ---- */
.eai-viewer3d__frame {
  position: relative;
  background: linear-gradient(180deg, #F6F9FC 0%, #E2EBF4 100%);
  border: 1px solid var(--eai-card-border);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.eai-viewer3d__chrome {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  align-items: center;
  z-index: 2;
}
.eai-viewer3d__chrome-tag {
  background: rgba(31, 45, 61, 0.85);
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 1px;
  margin-right: 6px;
}
.eai-viewer3d__chrome-tool {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--eai-card-border);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--eai-text);
  cursor: pointer;
}
.eai-viewer3d__svg {
  position: relative;
  z-index: 1;
}
.eai-viewer3d__svg svg {
  width: 100%;
  height: auto;
  display: block;
}
.eai-viewer3d__zoom {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--eai-card-border);
  border-radius: 4px;
  padding: 4px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: var(--eai-text-muted);
  z-index: 2;
}
.eai-viewer3d__zoom-bar {
  display: inline-block;
  width: 60px;
  height: 4px;
  background: var(--eai-card-border);
  border-radius: 2px;
  position: relative;
}
.eai-viewer3d__zoom-bar span {
  position: absolute;
  left: 35%;
  width: 12px;
  height: 12px;
  background: var(--eai-brand-blue);
  border-radius: 50%;
  top: -4px;
}
.eai-viewer3d__callouts {
  list-style: none;
  padding: 8px 0 0;
  margin: 8px 0 0;
  border-top: 1px solid var(--eai-card-border);
}
.eai-viewer3d__callout {
  padding: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  color: var(--eai-text);
}
.eai-viewer3d__callout-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--eai-brand-orange);
  margin-top: 6px;
}

/* ---- Vision (camera/drone/inspection/drawing) ---- */
.eai-vision__frame {
  background: #1F2D3D;
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #2A3A4A;
}
.eai-vision__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #1F2D3D;
  color: #FFFFFF;
  border-bottom: 1px solid #2A3A4A;
}
.eai-vision__chrome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E04444;
  box-shadow: 0 0 0 0 rgba(224, 68, 68, 0.6);
  animation: eai-pulse 1.6s infinite;
}
@keyframes eai-pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 68, 68, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(224, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 68, 68, 0); }
}
.eai-vision__chrome-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.eai-vision__chrome-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  margin-left: auto;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.eai-vision__image {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 360;
  overflow: hidden;
}
.eai-vision__image svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.eai-vision__box {
  position: absolute;
  border: 2px solid #FFFFFF;
  border-radius: 2px;
  pointer-events: none;
  animation: eai-vision-box-in 0.5s ease both;
}
.eai-vision__box--high { border-color: #FF4444; box-shadow: 0 0 0 1px rgba(255,68,68,0.25), inset 0 0 12px rgba(255,68,68,0.18); }
.eai-vision__box--med  { border-color: #F5A24E; box-shadow: 0 0 0 1px rgba(245,162,78,0.25), inset 0 0 12px rgba(245,162,78,0.15); }
.eai-vision__box--low  { border-color: #4A9CD9; box-shadow: 0 0 0 1px rgba(74,156,217,0.25), inset 0 0 12px rgba(74,156,217,0.12); }
@keyframes eai-vision-box-in {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.eai-vision__label {
  position: absolute;
  top: -1px;
  left: -1px;
  transform: translateY(-100%);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  color: #FFFFFF;
  border-radius: 2px 2px 0 0;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
}
.eai-vision__label--high { background: #FF4444; }
.eai-vision__label--med  { background: #F5A24E; color: #1F2D3D; }
.eai-vision__label--low  { background: #4A9CD9; }

/* ---- 5-Why diagram ---- */
.eai-fw {
  font-family: inherit;
}
.eai-fw__problem {
  background: #FFF7EB;
  border: 1px solid var(--eai-brand-orange);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.eai-fw__problem-label,
.eai-fw__root-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--eai-brand-orange-deep);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.eai-fw__problem-text,
.eai-fw__root-text {
  font-size: 14px;
  color: var(--eai-text);
  font-weight: 500;
}
.eai-fw__chain {
  padding-top: 4px;
}
.eai-fw__row {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
.eai-fw__stem {
  width: 16px;
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
}
.eai-fw__stem-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--eai-brand-blue);
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 2px var(--eai-brand-blue);
  z-index: 2;
}
.eai-fw__stem-line {
  flex: 1;
  width: 2px;
  background: var(--eai-brand-blue);
  margin-top: 2px;
}
.eai-fw__stem.is-final .eai-fw__stem-dot {
  background: var(--eai-brand-orange);
  box-shadow: 0 0 0 2px var(--eai-brand-orange);
}
.eai-fw__node {
  flex: 1;
  background: #FFFFFF;
  border: 1px solid var(--eai-card-border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 6px 0;
  animation: eai-fw-in 0.45s ease both;
}
.eai-fw__node.is-final {
  border-color: var(--eai-brand-orange);
  background: var(--eai-accent-bg);
}
@keyframes eai-fw-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.eai-fw__q {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--eai-brand-blue);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.eai-fw__num {
  display: inline-block;
  background: var(--eai-brand-blue);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  margin-left: 6px;
}
.eai-fw__node.is-final .eai-fw__q,
.eai-fw__node.is-final .eai-fw__num {
  color: var(--eai-brand-orange-deep);
}
.eai-fw__node.is-final .eai-fw__num {
  background: var(--eai-brand-orange);
  color: #FFFFFF;
}
.eai-fw__a {
  font-size: 14px;
  color: var(--eai-text);
  line-height: 1.4;
}
.eai-fw__evidence {
  font-size: 12.5px;
  color: var(--eai-text-muted);
  margin-top: 4px;
  padding-left: 4px;
}
.eai-fw__root {
  background: linear-gradient(135deg, var(--eai-brand-orange) 0%, var(--eai-brand-orange-deep) 100%);
  color: #FFFFFF;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 8px;
}
.eai-fw__root-label { color: rgba(255,255,255,0.85); }
.eai-fw__root-text { color: #FFFFFF; font-weight: 600; }

/* Real-photo overlay on top of the SVG vision mock.
   When block.image_url is set, the <img> covers the mock; if the image fails
   to load, the onerror handler hides the <img> and the SVG is revealed. */
.eai-vision__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;            /* above SVG mock, below detection boxes */
}
.eai-vision__box,
.eai-vision__label {
  z-index: 2;
}

/* =========================================================================
   Three.js canvas host — overrides the SVG-mock styles for the live viewer.
   When init3DViewer() succeeds, the SVG mock is removed and a <canvas>
   fills the host. Until then, the SVG fallback renders inside it.
   ========================================================================= */
.eai-viewer3d__canvas-host {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(180deg, #EEF3F8 0%, #D7E0EA 100%);
  overflow: hidden;
  cursor: grab;
  touch-action: none;            /* let Three.js handle pinch/pan */
}
.eai-viewer3d__canvas-host:active { cursor: grabbing; }
.eai-viewer3d__canvas-host > canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.eai-viewer3d__canvas-host .eai-viewer3d__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.eai-viewer3d__canvas-host .eai-viewer3d__svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.eai-viewer3d__chrome-hint {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
  letter-spacing: 0.5px;
  background: rgba(31, 45, 61, 0.6);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .eai-viewer3d__chrome-hint { display: none; }
}

/* =========================================================================
   Section-by-section scroll snapping
   ------------------------------------------------------------------------
   The page now snaps to each major section boundary instead of free-
   scrolling. `mandatory` enforces the snap; `proximity` would be gentler
   if visitors complain about it feeling controlling.
   ========================================================================= */
html {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

/* Major sections snap. We target body's direct shbg-* children (Jekyll
   layout sections), the wizard, and each individual feature inside the
   features wrapper. We do NOT snap the breadcrumb (too small) or the
   floating scroll-down arrow. */
body > div[class*="shbg-"],
body > section.eai-wizard,
.eai-features > .eai-feature {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* For sections that are intrinsically taller than 100vh (industry packs,
   capabilities grids, etc.), the visitor can still scroll within them —
   mandatory snap only kicks in at section boundaries. */

/* =========================================================================
   Feature sections fit viewport exactly (chat panel scrolls internally)
   ========================================================================= */
.eai-feature {
  height: 100vh !important;
  max-height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

/* The chat panel inside the feature column already has internal scrolling
   on .eai-chat__messages — just relax the safety cap so it stays inside
   the viewport-tall section. */
.eai-feature .eai-chat {
  max-height: none;
  height: 100%;
  min-height: 0;
}

/* The chat-col itself must fill the section row */
.eai-feature .eai-feature__chat-col {
  height: 100%;
  max-height: 100%;
  min-height: 0;
}

/* Description col vertically centred in the shorter feature height */
.eai-feature .eai-feature__desc {
  padding-top: 0;
  padding-bottom: 0;
  overflow: auto;       /* in the rare case description content is taller than viewport */
  max-height: 100%;
}

/* On mobile, fall back to natural flow — no snap, no height locking */
@media (max-width: 768px) {
  html { scroll-snap-type: none; }
  .eai-feature {
    height: auto !important;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }
  .eai-feature .eai-chat {
    height: auto;
    min-height: 480px;
  }
}

/* Respect reduced-motion users — they get free scroll, no snap forcing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; scroll-behavior: auto; }
}

/* =========================================================================
   Breadcrumb redesigned as a full-viewport completion section.
   Replaces the earlier sticky-bar look (which was skipped by scroll-snap).
   ========================================================================= */

/* Reset the sticky bar layout */
.eai-breadcrumb {
  position: static !important;
  background: linear-gradient(180deg, var(--eai-soft-bg) 0%, #FFFFFF 100%) !important;
  border-bottom: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;

  /* Full-viewport completion card */
  min-height: 100vh;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px !important;
  gap: 0 !important;

  /* Snap target */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.eai-breadcrumb__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--eai-text-muted);
  text-transform: uppercase;
  margin: 0 0 18px 0;
}

/* Segments row — much larger, centered */
.eai-breadcrumb__segments {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 4px;
  max-width: 920px;
  margin: 0 auto;
  flex: 0 !important;
}

.eai-breadcrumb__segment {
  background: #FFFFFF !important;
  border: 1.5px solid var(--eai-card-border) !important;
  font-size: 18px !important;
  font-weight: 600;
  color: var(--eai-brand-blue);
  padding: 10px 20px !important;
  border-radius: 999px !important;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
  position: relative;
}
.eai-breadcrumb__segment::after {
  content: " ✎";
  font-size: 12px;
  color: var(--eai-text-muted);
  opacity: 0;
  transition: opacity 0.15s ease;
  margin-left: 4px;
}
.eai-breadcrumb__segment:hover {
  background: var(--eai-accent-bg) !important;
  border-color: var(--eai-accent) !important;
  color: var(--eai-brand-blue-deep);
  transform: translateY(-1px);
}
.eai-breadcrumb__segment:hover::after { opacity: 1; }

.eai-breadcrumb__sep {
  color: var(--eai-text-muted);
  font-size: 22px;
  margin: 0 4px;
  font-weight: 300;
}

/* Note row (beta / coming soon) */
.eai-breadcrumb__note {
  display: block;
  width: 100%;
  margin-top: 14px;
  font-size: 13px;
  color: var(--eai-text-muted);
  font-style: italic;
  text-align: center;
  flex-basis: 100%;
}

/* Actions: Change + Restart, larger and centered */
.eai-breadcrumb__actions {
  display: flex;
  gap: 12px;
  margin: 28px 0 0 0 !important;
  justify-content: center;
}
.eai-breadcrumb__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--eai-brand-blue) !important;
  background: #FFFFFF !important;
  color: var(--eai-brand-blue) !important;
  font-size: 14px !important;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.eai-breadcrumb__btn:hover {
  background: var(--eai-brand-blue) !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* Helper text below the actions explaining what this section does */
.eai-breadcrumb::after {
  content: "Scroll down to walk through the demo. Click any segment above to re-tune the tour.";
  display: block;
  margin-top: 18px;
  font-size: 13px;
  color: var(--eai-text-muted);
  max-width: 520px;
  line-height: 1.45;
}

/* Mobile fallback — let it grow naturally, no min-height lock */
@media (max-width: 768px) {
  .eai-breadcrumb {
    min-height: auto !important;
    padding: 32px 16px !important;
  }
  .eai-breadcrumb__segment { font-size: 15px !important; padding: 8px 14px !important; }
}

/* =========================================================================
   Breadcrumb section — preview cards filling the empty viewport
   ========================================================================= */

/* Drop the old after-line; replaced by the preview cards block */
.eai-breadcrumb::after { content: none !important; }

.eai-breadcrumb__what-eyebrow {
  margin-top: 36px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--eai-text-muted);
  text-align: center;
}

.eai-breadcrumb__previews {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 1000px;
  width: 100%;
  margin: 16px auto 0;
  padding: 0 8px;
}

.eai-tour-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFFFF;
  border: 1.5px solid var(--eai-card-border);
  border-radius: 14px;
  padding: 18px 18px 16px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s ease;
  box-shadow: 0 2px 12px rgba(31, 115, 183, 0.04);
}
.eai-tour-preview:hover {
  border-color: var(--eai-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(240, 140, 42, 0.12);
}
.eai-tour-preview:focus-visible {
  outline: 2px solid var(--eai-brand-blue);
  outline-offset: 3px;
}

.eai-tour-preview__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--eai-accent);
  text-transform: uppercase;
}
.eai-tour-preview__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--eai-brand-blue);
  line-height: 1.3;
}
.eai-tour-preview__query {
  font-size: 13px;
  color: var(--eai-text);
  background: var(--eai-soft-bg);
  border-radius: 8px;
  padding: 8px 12px;
  font-style: italic;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.eai-tour-preview__query-mark {
  color: var(--eai-accent);
  font-style: normal;
  font-weight: 700;
  font-size: 16px;
  vertical-align: -2px;
}
.eai-tour-preview__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--eai-card-border);
}
.eai-tour-preview__pace {
  font-size: 11px;
  font-weight: 600;
  color: var(--eai-text-muted);
  letter-spacing: 1px;
}
.eai-tour-preview__cta {
  font-size: 12px;
  font-weight: 700;
  color: var(--eai-brand-blue);
}
.eai-tour-preview:hover .eai-tour-preview__cta {
  color: var(--eai-accent);
}

@media (max-width: 900px) {
  .eai-breadcrumb__previews {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .eai-breadcrumb__what-eyebrow { margin-top: 22px; }
}

/* =========================================================================
   Scroll-snap — proximity (gentle)
   ------------------------------------------------------------------------
   Free manual scrolling. When the visitor pauses near a section boundary,
   the browser slides them to the next snap point. Avoids the "fighting
   the scroll wheel" feel of `mandatory`.
   ========================================================================= */
html {
  scroll-snap-type: y proximity !important;
  scroll-behavior: smooth;
}
body > div[class*="shbg-"],
body > section.eai-wizard,
.eai-breadcrumb,
.eai-features > .eai-feature {
  scroll-snap-align: start !important;
  scroll-snap-stop: normal !important;
}

/* Mobile + reduced-motion fall back to free scroll. */
@media (max-width: 768px) {
  html { scroll-snap-type: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none !important; scroll-behavior: auto; }
}

/* =========================================================================
   Wizard brand header — shown at the top of the wizard section since
   it now sits BEFORE the hero on the page.
   ========================================================================= */
.eai-wizard__brand {
  text-align: center;
  margin-bottom: 32px;
}
.eai-wizard__brand-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--eai-text-muted);
  margin-bottom: 8px;
}
.eai-wizard__brand-title {
  font-size: 36px;
  font-weight: 700;
  color: var(--eai-brand-blue);
  line-height: 1.1;
  margin-bottom: 8px;
}
.eai-wizard__brand-sub {
  font-size: 15px;
  color: var(--eai-text-muted);
  max-width: 560px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .eai-wizard__brand-title { font-size: 28px; }
}

/* Now that the wizard is the first section, give it the full viewport
   so it feels like the page's primary entry point. */
.eai-wizard {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========================================================================
   Action card — recommended-action with pending → executed states
   ========================================================================= */
.eai-action {
  background: #FFFFFF;
  border: 2px solid var(--eai-card-border);
  border-radius: 14px;
  padding: 16px 18px 14px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.eai-action--pending {
  border-color: #E5A93B;
  background: linear-gradient(180deg, #FFFBF0 0%, #FFFFFF 50%);
}
.eai-action--executed {
  border-color: #2A9D5F;
  background: linear-gradient(180deg, #EFFAF3 0%, #FFFFFF 50%);
}

.eai-action__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.eai-action__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.eai-action--pending .eai-action__pulse {
  background: #E5A93B;
  animation: eai-pulse-amber 1.6s infinite;
}
.eai-action--executed .eai-action__pulse {
  background: #2A9D5F;
}
@keyframes eai-pulse-amber {
  0% { box-shadow: 0 0 0 0 rgba(229, 169, 59, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(229, 169, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 169, 59, 0); }
}
.eai-action__title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--eai-text);
  line-height: 1.3;
}
.eai-action__status {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.eai-action--pending .eai-action__status {
  color: #8A5A00;
  background: #FFF1D2;
}
.eai-action--executed .eai-action__status {
  color: #1E7A45;
  background: #D6F4E2;
}

.eai-action__desc {
  font-size: 13.5px;
  color: var(--eai-text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

.eai-action__target {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--eai-soft-bg);
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 12px;
  font-size: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.eai-action__target-arrow { color: var(--eai-text-muted); font-weight: 700; }
.eai-action__target-label { color: var(--eai-text-muted); }
.eai-action__target-system { color: var(--eai-brand-blue); font-weight: 700; }

.eai-action__changes {
  list-style: none;
  margin: 0 0 12px 0;
  padding: 0;
  border-top: 1px dashed var(--eai-card-border);
  border-bottom: 1px dashed var(--eai-card-border);
}
.eai-action__change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--eai-card-border);
  font-size: 13.5px;
}
.eai-action__change:last-child { border-bottom: none; }
.eai-action__change-mark {
  flex-shrink: 0;
  width: 18px;
  font-weight: 700;
}
.eai-action--executed .eai-action__change-mark { color: #2A9D5F; }
.eai-action--pending .eai-action__change-mark { color: #C9A24A; }
.eai-action__change-label {
  font-weight: 600;
  color: var(--eai-text);
}
.eai-action__change-detail {
  color: var(--eai-text-muted);
  font-size: 13px;
}

.eai-action__foot {
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.eai-action__foot--pending { color: #8A5A00; }
.eai-action__foot--executed { color: #1E7A45; font-weight: 600; }
.eai-action__pending-icon,
.eai-action__audit-icon { font-size: 14px; }

.eai-action__next {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.eai-action__next-btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid var(--eai-card-border);
  background: #FFFFFF;
  color: var(--eai-text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
}
.eai-action__next-btn:hover {
  border-color: var(--eai-brand-blue);
  background: var(--eai-soft-bg);
}
.eai-action__next-btn--primary {
  border-color: #2A9D5F;
  background: #2A9D5F;
  color: #FFFFFF;
}
.eai-action__next-btn--primary:hover {
  background: #1E7A45;
  border-color: #1E7A45;
}

/* =========================================================================
   Fixed-navbar clearance — wizard and breadcrumb sections sit at the very
   top of the page. The Jekyll site's top navbar is `position: fixed` with
   no body padding-top offset (other pages clear it with an in-section
   spacer div). Add explicit top padding here so the wizard's brand header /
   progress dots don't slide under the navbar on mobile (where total wizard
   content can exceed 100vh and break the flex-center layout).
   ========================================================================= */
.eai-wizard {
  padding-top: 100px;
}
.eai-breadcrumb {
  padding-top: 100px !important;
}

@media (max-width: 768px) {
  .eai-wizard {
    /* Mobile navbar (hamburger only) is shorter than desktop's logo+top-bar */
    padding-top: 80px;
    /* Don't force vertical centering on mobile when content > viewport */
    justify-content: flex-start;
  }
  .eai-breadcrumb {
    padding-top: 80px !important;
  }
}