/* ────────────────────────────────────────────────────────────────────────
   Agentforce Services — landing page styles
   Cadence design language: light cool surfaces, red actions, warm-charcoal
   text, square corners. Ported from the Cadence canonical stylesheet.
   ──────────────────────────────────────────────────────────────────────── */

:root {
  --dl-black: #1d1c19;
  --dl-dark: #1a1a1a;
  --dl-green: #0f766e;
  --dl-teal: #2c7a83;
  --dl-cyan: #6e78a8;
  --ink: #1d1c19;
  --ink-soft: #5a5750;
  /* Soft grey edges give bands and boxes a clear, quiet separation. */
  --line: #d9dee3;
  /* Solid-fill scheme: light page, slightly darker grey cards.
     --white is the box/card fill, --surface the page/inner surfaces. */
  --surface: #f5f7f9;
  --white: #e9edf1;
  --shadow-sm: 0 1px 2px rgba(50, 44, 28, 0.05), 0 4px 12px rgba(50, 44, 28, 0.04);
  --shadow-md: 0 12px 28px rgba(50, 44, 28, 0.1);
  --shadow-lg: 0 20px 48px rgba(50, 44, 28, 0.15);
  --radius: 0px;
  --maxw: 1240px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  /* Override the chatbot stylesheet, which pins html/body to 100vh with
     overflow hidden. The services page needs to scroll normally. */
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: "Avenir Next", Avenir, "Segoe UI", Verdana, Geneva, sans-serif;
  color: var(--ink);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--dl-green);
  color: #fff;
}

a {
  color: var(--dl-green);
  text-decoration: none;
}

/* ── Global header ─────────────────────────────────────────────────────── */
.site-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  color: var(--ink);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 30;
  border-bottom: 1px solid var(--line);
}

/* Offset for the fixed header so page content is not hidden behind it. */
body {
  padding-top: 64px;
}

.header-submit {
  margin-left: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dl-green);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s;
}

.header-submit:hover {
  background: #03502b;
}

.site-header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-logo {
  display: flex;
  align-items: center;
}

.site-logo img {
  height: 32px;
  display: block;
  border-radius: var(--radius);
}

/* Text wordmark (default when no logo URL is configured in Settings). */
.site-wordmark {
  font-family: var(--font-heading, "Open Sans", "Segoe UI", sans-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #0f766e;
  white-space: nowrap;
}
.site-wordmark b {
  font-weight: 700;
  color: var(--text, #1d1c19);
}

.site-nav {
  display: flex;
  gap: 26px;
  margin-left: 8px;
}

/* Long/short nav labels: full text on desktop, compact on small screens. */
.site-nav-link .nav-short {
  display: none;
}

/* Icon + label inside header/footer action buttons. */
.header-submit-label {
  white-space: nowrap;
}

.btn-ico {
  flex: 0 0 auto;
  display: block;
}

.site-nav-link {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.site-nav-link:hover {
  color: var(--ink);
}

.site-nav-link.is-active {
  color: var(--ink);
  border-bottom-color: var(--dl-green);
}

.site-nav-link.is-disabled {
  color: #b8bdc7;
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.6;
}

.site-nav-link.is-disabled:hover {
  color: #b8bdc7;
}

.site-header-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-search-toggle,
.header-lang {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  padding: 6px;
  border-radius: var(--radius);
}

.header-search-toggle:hover,
.header-lang:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.header-connect {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dl-green);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.header-connect:hover {
  background: #1f5a61;
}

.header-connect .conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.25);
}

.header-connect.is-connected {
  background: rgba(255, 255, 255, 0.12);
}

.header-connect.is-connected:hover {
  background: rgba(255, 255, 255, 0.2);
}

.header-connect.is-connected .conn-dot {
  background: #33d17a;
  box-shadow: 0 0 0 3px rgba(51, 209, 122, 0.25);
}

/* ── Page hero (always fixed below header) ─────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--dl-black) 0%, var(--dl-dark) 60%, #24407f 100%);
  color: var(--white);
  position: sticky;
  top: 64px;
  z-index: 20;
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(44, 122, 131, 0.35);
  box-shadow: 0 0 0 40px rgba(44, 122, 131, 0.06),
    0 0 0 90px rgba(44, 122, 131, 0.04);
}

.page-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px 24px;
  position: relative;
  z-index: 1;
}

.page-hero-title {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 6px;
}

.page-hero-lead {
  max-width: 640px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
}

/* ── Results toolbar (fixed when scrolled past) ───────────────────────── */
.results-toolbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(150%) blur(16px);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
  border-bottom: 1px solid var(--line);
  z-index: 19;
}

.results-toolbar.is-stuck {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
}

.toolbar-spacer {
  display: none;
}

.toolbar-spacer.is-active {
  display: block;
}

.results-toolbar-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-field {
  flex: 1;
  max-width: 520px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--ink-soft);
}

.search-field:focus-within {
  border-color: var(--dl-teal);
  box-shadow: 0 0 0 3px rgba(44, 122, 131, 0.15);
}

.search-field input {
  border: none;
  outline: none;
  width: 100%;
  font-size: 15px;
  color: var(--ink);
  background: transparent;
}

.result-count {
  margin-left: auto;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.toolbar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sort-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--dl-green);
  cursor: pointer;
}

.sort-select .caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--dl-green);
  border-bottom: 2px solid var(--dl-green);
  transform: rotate(45deg);
  margin-top: -3px;
}

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.view-btn {
  background: var(--white);
  border: none;
  padding: 8px 10px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.view-btn + .view-btn {
  border-left: 1px solid var(--line);
}

.view-btn.is-active {
  background: var(--dl-green);
  color: var(--white);
}

/* ── Catalogue layout ──────────────────────────────────────────────────── */
.catalogue {
  background: var(--surface);
}

.catalogue-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 32px 24px 72px;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start;
}

/* ── Filter rail ───────────────────────────────────────────────────────── */
/* The left rail sits flat on the page: no box, no border, no fill. */
.filter-rail {
  position: sticky;
  top: 10px;
  background: transparent;
  border: none;
}

/* Drawer chrome (head, foot, overlay, toggle) is mobile-only. */
.filter-drawer-head,
.filter-drawer-foot,
.filter-overlay,
.filter-toggle {
  display: none;
}

.filter-count-badge {
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius);
  background: var(--dl-green);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  padding: 0 5px;
}

.filter-group {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.filter-group:first-child {
  padding-top: 4px;
}

.filter-group-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--dl-black);
}

.filter-group-body {
  padding: 0;
}

/* Collapsed: show only the first COLLAPSE_LIMIT (8) rows. */
.filter-group-body.is-collapsed .filter-option:nth-child(n + 9) {
  display: none;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 15px;
  color: var(--ink);
  cursor: pointer;
}

.filter-option input {
  width: 17px;
  height: 17px;
  accent-color: var(--dl-green);
  cursor: pointer;
  flex: 0 0 auto;
}

.opt-label {
  flex: 0 1 auto;
  white-space: nowrap;
}

.filter-option .count {
  color: var(--dl-green);
  font-size: 15px;
  font-weight: 400;
}

.opt-caret {
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg);
  margin-top: -2px;
  flex: 0 0 auto;
}

.filter-option.is-disabled {
  color: #9aa1b2;
  cursor: not-allowed;
}

.filter-option.is-disabled .count {
  color: #b4bac7;
}

.filter-option.is-disabled input {
  cursor: not-allowed;
}

.show-all {
  margin-top: 10px;
  background: none;
  border: none;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dl-green);
  text-decoration: underline;
  cursor: pointer;
}

.show-all:hover {
  color: #1f5a61;
}

.clear-filters {
  width: 100%;
  background: var(--white);
  border: none;
  padding: 16px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--dl-green);
  cursor: pointer;
  text-align: left;
}

.clear-filters:hover {
  text-decoration: underline;
}

/* ── Card grid ─────────────────────────────────────────────────────────── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.uc-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
  text-align: left;
}

.uc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.uc-card-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dl-green);
  margin: 0 0 10px;
}

.uc-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  overflow: hidden;
}

.uc-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(15, 32, 75, 0.82);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius);
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uc-card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
  display: block;
  background: #ffffff;
  transition: transform 0.3s ease;
}

.uc-card:hover .uc-card-media img {
  transform: scale(1.04);
}

.uc-card-body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.uc-card-kicker {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.uc-card-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.3;
}

.uc-card-desc {
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  flex: 1;
}

/* List view */
.card-grid.is-list {
  grid-template-columns: 1fr;
}

.card-grid.is-list .uc-card {
  flex-direction: row;
}

.card-grid.is-list .uc-card-media {
  width: 280px;
  flex: 0 0 280px;
  aspect-ratio: auto;
}

.card-grid.is-list .uc-card-body {
  padding: 18px 22px;
}

.grid-empty {
  grid-column: 1 / -1;
  padding: 60px 20px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--dl-black);
  color: rgba(255, 255, 255, 0.7);
}

.site-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 40px 24px;
}

.footer-tagline {
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 10px;
}

.footer-legal {
  font-size: 12px;
  margin: 0;
  max-width: 720px;
}

/* ── Detail modal ──────────────────────────────────────────────────────── */
.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(23, 35, 38, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 60;
  animation: fade 0.15s ease;
}

/* The [hidden] attribute must win over display:flex above. */
.detail-backdrop[hidden] {
  display: none;
}

.detail-modal {
  position: relative;
  background: rgba(252, 251, 247, 0.92);
  backdrop-filter: saturate(160%) blur(24px);
  -webkit-backdrop-filter: saturate(160%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  width: min(960px, 96vw);
  min-height: 82vh;
  max-height: 96vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: pop 0.18s ease;
}

.detail-close {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: none;
  font-size: 28px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  z-index: 2;
}

.detail-close:hover {
  color: var(--ink);
}

.detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 0 8px;
}

/* Shared tag pill styles (used by the detail modal + chat panel header). */
.tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--radius);
}

.tag-sector {
  background: rgba(44, 122, 131, 0.12);
  color: var(--dl-green);
}

.tag-type {
  background: var(--surface);
  color: var(--ink-soft);
}

.detail-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  padding: 24px 36px 0;
}

.detail-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  color: var(--dl-black);
  margin: 0 0 10px;
  line-height: 1.25;
  padding: 0 36px;
}

.detail-summary {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 20px;
  padding: 0 36px;
}

.detail-section {
  margin-bottom: 18px;
  padding: 0 36px;
}

.detail-section h3 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dl-green);
  margin: 0 0 7px;
}

.detail-section p,
.detail-section li {
  font-size: 13.5px;
  color: var(--ink);
  margin: 0 0 5px;
  line-height: 1.5;
}

.detail-section ul {
  margin: 0;
  padding-left: 20px;
}

.detail-prompt {
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--ink-soft);
}

.detail-foot {
  border-top: 1px solid var(--line);
  padding: 16px 36px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-deploy-lg {
  background: var(--dl-green);
  color: #ffffff;
  border: 1px solid var(--dl-green);
  border-radius: var(--radius);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, color 0.15s;
}

.btn-deploy-lg:hover {
  background: var(--dl-green);
  color: #fff;
}

.btn-customize {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}

.btn-customize:hover {
  background: #eaeef5;
  border-color: var(--dl-teal);
}

.btn-customize.is-active {
  background: rgba(0, 118, 168, 0.1);
  border-color: var(--dl-teal);
  color: var(--dl-teal);
}

.btn-video {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}

.btn-video:hover {
  background: #eaeef5;
  border-color: var(--dl-red, #e60000);
}

/* ── Video overview overlay ────────────────────────────────────────────── */
.video-panel {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--white);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.video-head {
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.video-head h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--dl-black);
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
}

.video-close {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
}

.video-frame-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #000;
}

.video-frame-wrap iframe {
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius);
}

.btn-chat {
  background: var(--dl-green);
  color: #ffffff;
  border: none;
  border-radius: var(--radius);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

/* ── Customise use case inline chat (full-modal overlay) ────────────────── */
.customize-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--white);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.customize-head {
  padding: 20px 28px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.customize-head-text {
  min-width: 0;
}

.customize-head h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--dl-black);
  margin: 0 0 4px;
  text-transform: none;
  letter-spacing: 0;
}

.customize-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}

.customize-close {
  background: transparent;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0 4px;
}

.customize-close:hover {
  color: var(--ink);
}

.customize-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cz-msg {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.cz-msg-user {
  align-self: flex-end;
  align-items: flex-end;
}

.cz-msg-assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.cz-bubble {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.cz-msg-user .cz-bubble {
  background: var(--dl-green);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.cz-msg-assistant .cz-bubble {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 3px;
}

/* Markdown formatting inside assistant bubbles */
.cz-msg-assistant .cz-bubble h1,
.cz-msg-assistant .cz-bubble h2,
.cz-msg-assistant .cz-bubble h3,
.cz-msg-assistant .cz-bubble h4,
.cz-msg-assistant .cz-bubble h5,
.cz-msg-assistant .cz-bubble h6 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dl-black);
  margin: 10px 0 5px;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.cz-msg-assistant .cz-bubble h1:first-child,
.cz-msg-assistant .cz-bubble h2:first-child,
.cz-msg-assistant .cz-bubble h3:first-child,
.cz-msg-assistant .cz-bubble h4:first-child {
  margin-top: 0;
}

.cz-msg-assistant .cz-bubble p {
  margin: 0 0 8px;
}

.cz-msg-assistant .cz-bubble p:last-child {
  margin-bottom: 0;
}

.cz-msg-assistant .cz-bubble ul,
.cz-msg-assistant .cz-bubble ol {
  margin: 4px 0 8px;
  padding-left: 20px;
}

.cz-msg-assistant .cz-bubble li {
  margin: 0 0 3px;
}

.cz-msg-assistant .cz-bubble strong {
  font-weight: 700;
  color: var(--dl-black);
}

.cz-msg-assistant .cz-bubble code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-family: "Cascadia Code", "Fira Code", monospace;
}

.cz-typing {
  font-size: 13px;
  color: var(--ink-soft);
  font-style: italic;
}

.customize-form {
  display: flex;
  gap: 8px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: var(--white);
}

.customize-input {
  flex: 1;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.customize-input:focus {
  border-color: var(--dl-green);
}

.customize-send {
  background: var(--dl-green);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.customize-send:hover {
  background: var(--dl-green-dark, #03502b);
}

.customize-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.customize-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.btn-reset {
  background: none;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.btn-reset:hover {
  border-color: #d9534f;
  color: #d9534f;
}

.btn-apply {
  background: var(--dl-green);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-apply:hover {
  background: var(--dl-green-dark, #03502b);
}

.btn-apply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-chat:hover {
  background: #1f5a61;
}

/* ── Chat slide-in panel (70% width) ───────────────────────────────────── */
.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 32, 75, 0.45);
  z-index: 70;
  animation: fade 0.2s ease;
}

.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 50vw;
  max-width: 900px;
  min-width: 460px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
  z-index: 80;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.chat-panel.open {
  transform: translateX(0);
}

.chat-panel-head {
  height: 56px;
  background: var(--dl-black);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  flex: 0 0 auto;
}

.chat-panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 600;
  min-width: 0;
}

.chat-panel-title .tag {
  flex: 0 0 auto;
}

#chatPanelName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-panel-title .tag {
  background: rgba(44, 122, 131, 0.25);
  color: #cdeafd;
}

.chat-panel-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-panel-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
}

.chat-panel-close:hover {
  color: var(--white);
  background: rgba(255, 255, 255, 0.12);
}

/* ── Inlined chatbot inside the panel ──────────────────────────────────── */
.chat-panel-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

/* The inlined chat keeps its own sidebar + top bar in the DOM (app.js needs
   them) but they are hidden so the chat reads as part of this app. */
.embedded-chat .sidebar,
.embedded-chat .topbar {
  display: none !important;
}

.embedded-chat .app,
.embedded-chat .workspace {
  height: 100% !important;
}

.embedded-chat .app {
  width: 100%;
}

/* Re-skin the inlined chatbot to the site theme. The chat's own stylesheet
   drives everything off these CSS variables, so remapping them here recolours
   the whole chat (buttons, focus rings, links, borders). We also align the
   shapes (crisp 4px cards), borders, spacing and typography to the site. */
.embedded-chat {
  --accent: var(--dl-green);
  --accent-hover: #1f5a61;
  --link: var(--dl-green);
  --brand: var(--dl-black);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --muted: #8a90a2;
  --border: var(--line);
  --border-soft: var(--line);
  --user-bg: var(--surface);
  --bg: var(--white);
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--white);
}

.embedded-chat textarea,
.embedded-chat input,
.embedded-chat button,
.embedded-chat .greeting h1,
.embedded-chat .greeting-sub,
.embedded-chat .suggestion,
.embedded-chat .chat {
  font-family: inherit;
}

/* Greeting typography to match the site headings (Open Sans, weight 700). */
.embedded-chat .greeting h1 {
  font-family: "Open Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color: var(--dl-black);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.25;
}

.embedded-chat .greeting-sub {
  color: var(--ink-soft);
}

/* Suggestion cards mirror the catalogue cards: crisp corners, thin line,
   accent hover. */
.embedded-chat .suggestion {
  border-radius: var(--radius);
  border-color: var(--line);
  background: var(--white);
}

.embedded-chat .suggestion:hover {
  border-color: var(--dl-teal);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

.embedded-chat .suggestion-title {
  color: var(--dl-black);
}

/* Composer styled like a site input: 4px corners, sky focus ring. */
.embedded-chat .composer-inner {
  border-radius: var(--radius);
  border-color: var(--line);
  box-shadow: none;
}

.embedded-chat .composer-inner:focus-within {
  border-color: var(--dl-teal);
  box-shadow: 0 0 0 3px rgba(44, 122, 131, 0.15);
}

/* Send button as a clean accent circle. */
.embedded-chat .send-btn {
  background: var(--dl-green);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.embedded-chat .send-btn:hover {
  background: #1f5a61;
}

/* Message bubbles: crisper corners, site surface for the user bubble. */
.embedded-chat .msg {
  border-radius: var(--radius);
}

.embedded-chat .msg.user {
  background: var(--surface);
  border-color: var(--line);
}

.embedded-chat .msg.assistant {
  border-radius: var(--radius);
}

/* Ask / Agent segmented control adopts the site accent. */
.embedded-chat .mode-chips {
  background: var(--surface);
  border: 1px solid var(--line);
}

.embedded-chat .mode-chip {
  color: var(--ink-soft);
  font-weight: 600;
}

.embedded-chat .mode-chip.active {
  background: var(--dl-green);
  color: var(--white);
  box-shadow: none;
}

.embedded-chat .greeting .suggestions {
  display: none;
}

/* Use-case demo prompts (demo-prompts.js) opt back in as starter pills. */
.embedded-chat .greeting .suggestions.demo-pills {
  display: grid;
}

/* ── MCP connection + tools bar ────────────────────────────────────────── */
.mcp-bar {
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.mcp-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
}

.mcp-conn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.mcp-conn .conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.22);
}

.mcp-conn .conn-dot.is-on {
  background: #33d17a;
  box-shadow: 0 0 0 3px rgba(51, 209, 122, 0.22);
}

.mcp-btn {
  border: 1px solid var(--dl-green);
  background: var(--dl-green);
  color: var(--white);
  border-radius: var(--radius);
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.mcp-btn:hover {
  background: #1f5a61;
}

.mcp-btn.is-disconnect {
  background: var(--white);
  color: #c0392b;
  border-color: #e2c4c0;
}

.mcp-btn.is-disconnect:hover {
  background: #fdf2f1;
}

.mcp-btn-ghost {
  margin-left: auto;
  background: var(--white);
  color: var(--dl-green);
  border-color: var(--line);
}

.mcp-btn-ghost:hover {
  background: var(--white);
  border-color: var(--dl-green);
}

.mcp-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform 0.2s;
}

.mcp-btn-ghost[aria-expanded="true"] .mcp-caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.mcp-detail {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 18px 16px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
}

.mcp-empty {
  font-size: 13px;
  color: var(--ink-soft);
  padding: 10px 0;
}

.mcp-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: 14px 16px;
}

.mcp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.mcp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--dl-black);
}

.mcp-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--radius);
}

.mcp-pill-on {
  background: rgba(51, 209, 122, 0.15);
  color: #1e8e4e;
}

.mcp-pill-off {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}

.mcp-desc {
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.mcp-endpoint {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: #7a8194;
  background: var(--surface);
  padding: 4px 8px;
  border-radius: var(--radius);
  margin-bottom: 12px;
  word-break: break-all;
}

.mcp-tools-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dl-green);
  margin-bottom: 6px;
}

.mcp-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mcp-tool {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 13px;
}

.mcp-tool-name {
  font-weight: 600;
  color: var(--ink);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

.mcp-tool-class {
  justify-self: start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--radius);
}

.mcp-tool-read {
  background: rgba(0, 104, 200, 0.12);
  color: var(--dl-green);
}

.mcp-tool-write {
  background: rgba(230, 126, 34, 0.16);
  color: #b9660f;
}

.mcp-tool-desc {
  grid-column: 1 / -1;
  color: var(--ink-soft);
  font-size: 12px;
}

.mcp-tool-empty {
  display: block;
  color: var(--ink-soft);
  font-style: italic;
}

/* Notice shown over the chat when the use case has no MCP mapped. */
.mcp-block-notice {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(244, 246, 250, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 40px;
}

.mcp-block-notice strong {
  font-size: 18px;
  color: var(--dl-black);
}

.mcp-block-notice span {
  max-width: 460px;
  font-size: 14px;
  color: var(--ink-soft);
}


@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Hero submit button ────────────────────────────────────────────────── */
.page-hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.page-hero-text {
  min-width: 0;
}

.hero-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--dl-teal);
  color: var(--dl-black);
  border: none;
  border-radius: var(--radius);
  padding: 16px 26px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform 0.15s, background 0.15s;
}

.hero-submit:hover {
  background: #33b4e6;
  transform: translateY(-2px);
}

.hero-submit-plus {
  font-size: 22px;
  line-height: 1;
}

body.hero-shrink .hero-submit {
  padding: 10px 18px;
  font-size: 14px;
}

/* ── Sort control ──────────────────────────────────────────────────────── */
.sort-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-soft);
}

.sort-label {
  font-weight: 600;
}

#sortSelect {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--dl-green);
  background: var(--white);
  cursor: pointer;
}

/* ── Card footer: votes + feedback ─────────────────────────────────────── */
.uc-card-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px 16px;
}

.vote {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.vote-btn:hover {
  border-color: var(--dl-teal);
}

.vote-up.is-on {
  background: rgba(51, 209, 122, 0.15);
  color: #1e8e4e;
  border-color: rgba(51, 209, 122, 0.4);
}

.vote-down.is-on {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.35);
}

.vote-ico {
  width: 15px;
  height: 15px;
  display: block;
}

.vote-down .vote-ico {
  position: relative;
  top: 1px;
}

.fb-count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.fb-count:hover {
  color: var(--dl-green);
}

/* Deploy button on cards */
.btn-deploy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--dl-green);
  color: var(--dl-green-dark, #03502b);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-left: 8px;
}

.btn-deploy:hover {
  background: var(--dl-green);
  color: #fff;
}

.deploy-ico {
  font-size: 12px;
}

/* ── Idea badge on submitted cards ─────────────────────────────────────── */
.uc-idea-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  background: var(--dl-teal);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: var(--radius);
}

/* ── Capability map cards (capability + features inside) ─────────────── */
.uc-client-badge {
  background: var(--dl-black);
  color: var(--white);
}

.uc-card-features {
  list-style: none;
  margin: 10px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.uc-card-features li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-soft, #53565a);
}

.uc-card-features li::before {
  content: "";
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  background: var(--dl-green);
}

.feature-ai-chip {
  flex: 0 0 auto;
  background: var(--dl-teal);
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 1px 6px;
  border-radius: var(--radius);
}

.feature-oos-chip {
  flex: 0 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-soft, #53565a);
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius);
}

.detail-features {
  list-style: none;
  padding-left: 0;
}

.detail-features li {
  padding: 10px 14px;
  background: var(--surface);
  margin: 0 0 10px;
}

.detail-features .feat-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-features .feat-name {
  font-weight: 700;
}

.detail-features .feat-desc {
  margin: 4px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft, #53565a);
}

/* Story sections: the as-is pain and the to-be outcome. */
.detail-story {
  border-radius: var(--radius);
  padding: 14px 16px;
}

.detail-story-asis {
  background: rgba(244, 233, 213, 0.8);
}

.detail-story-tobe {
  background: rgba(228, 238, 228, 0.85);
}

.detail-story h3 {
  margin-top: 0;
}

/* ── Detail: title row, vote, meta, attachments, feedback ──────────────── */
.detail-title-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 36px;
}

.detail-title-row .detail-title {
  padding: 0;
  flex: 1;
}

.detail-vote {
  flex: 0 0 auto;
  margin-top: 4px;
}

.detail-meta {
  padding: 0 36px;
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dl-green);
}

.att-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.att-item {
  display: inline-flex;
  align-items: center;
}

.att-img img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.att-file {
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  color: var(--ink);
}

.detail-feedback {
  border-top: 1px solid var(--line);
  padding-top: 22px;
}

.fb-count-label {
  color: var(--ink-soft);
  font-weight: 600;
}

.detail-feedback-note {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

.feedback-form {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.feedback-name,
.feedback-text {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
}

.feedback-text {
  resize: vertical;
}

.feedback-name:focus,
.feedback-text:focus {
  outline: none;
  border-color: var(--dl-teal);
  box-shadow: 0 0 0 3px rgba(44, 122, 131, 0.15);
}

.feedback-submit {
  justify-self: start;
  background: var(--dl-green);
  color: var(--white);
  border: none;
  border-radius: var(--radius);
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.feedback-submit:hover {
  background: #1f5a61;
}

.feedback-list {
  display: grid;
  gap: 10px;
}

.fb-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--white);
}

.fb-item-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.fb-name {
  font-weight: 700;
  color: var(--dl-black);
  font-size: 14px;
}

.fb-time {
  font-size: 12px;
  color: var(--ink-soft);
}

.fb-text {
  font-size: 14px;
  color: var(--ink);
}

.fb-empty {
  font-size: 14px;
  color: var(--ink-soft);
}

/* ── Chat popup vote ───────────────────────────────────────────────────── */
.chat-panel-head-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.chat-vote .vote-btn {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: #e6f4fc;
}

.chat-vote .vote-up.is-on {
  background: rgba(51, 209, 122, 0.35);
  color: #d8ffe8;
  border-color: rgba(51, 209, 122, 0.5);
}

.chat-vote .vote-down.is-on {
  background: rgba(255, 120, 108, 0.35);
  color: #ffe1de;
  border-color: rgba(255, 120, 108, 0.5);
}

/* ── Submit idea modal ─────────────────────────────────────────────────── */
.idea-modal {
  width: min(720px, 100%);
}

.idea-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 88vh;
}

.idea-form .detail-scroll {
  padding: 32px 36px 8px;
}

.idea-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--dl-black);
  margin: 16px 0 6px;
}

.idea-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  color: var(--ink);
  background: var(--white);
}

.idea-input:focus {
  outline: none;
  border-color: var(--dl-teal);
  box-shadow: 0 0 0 3px rgba(44, 122, 131, 0.15);
}

.idea-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.rich-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rich-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.rich-toolbar button,
.rich-attach {
  min-width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  cursor: pointer;
}

.rich-toolbar button:hover,
.rich-attach:hover {
  background: var(--white);
  border-color: var(--line);
}

.rich-attach {
  margin-left: auto;
}

.rich-body {
  min-height: 130px;
  max-height: 260px;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}

.rich-body:empty::before {
  content: attr(data-placeholder);
  color: var(--muted, #8e8ea0);
}

.idea-attach-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.idea-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 6px 4px 12px;
  font-size: 13px;
  color: var(--ink);
}

.idea-chip-x {
  border: none;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.idea-chip-x:hover {
  color: #c0392b;
}

.idea-error {
  color: #c0392b;
  font-size: 13px;
  margin: 12px 0 0;
}

.idea-foot {
  gap: 10px;
}

.btn-ghost-line {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.btn-ghost-line:hover {
  border-color: var(--ink-soft);
}

/* ── Tablet / iPad (<= 1024px) ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-header-inner {
    gap: 20px;
    padding: 0 18px;
  }
  .site-nav {
    gap: 18px;
  }
  /* Compact nav labels to keep everything on one row. */
  .site-nav-link .nav-full {
    display: none;
  }
  .site-nav-link .nav-short {
    display: inline;
  }
  .catalogue-inner {
    grid-template-columns: 240px 1fr;
    gap: 24px;
  }
  .chat-panel {
    width: 72vw;
    min-width: 0;
  }
}

/* ── Small tablet / large phone (<= 860px) ─────────────────────────────── */
@media (max-width: 860px) {
  /* iOS Safari zooms the page when focusing inputs below 16px. Keep every
     text input at 16px on small screens to prevent the jarring zoom. */
  .search-field input,
  .customize-input,
  .idea-input,
  .sf-custom-input,
  .feedback-name,
  .feedback-text,
  .rich-body,
  #sortSelect {
    font-size: 16px;
  }

  .catalogue-inner {
    grid-template-columns: 1fr;
    padding: 24px 18px 56px;
  }

  /* ── Filters become an off-canvas drawer (slides in from the left) ──
     The inline rail would push the cards far down the page; a drawer keeps
     results at the top and filters one tap away. */
  .filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 11px;
    color: var(--ink-soft);
    cursor: pointer;
  }
  .filter-toggle[aria-expanded="true"],
  .filter-toggle.has-active {
    border-color: var(--dl-green);
    color: var(--dl-green);
  }
  .filter-count-badge {
    display: inline-block;
  }
  .filter-count-badge[hidden] {
    display: none;
  }

  .filter-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 32, 75, 0.45);
    z-index: 90;
    animation: fade 0.2s ease;
  }
  .filter-overlay[hidden] {
    display: none;
  }

  .filter-rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(320px, 86vw);
    max-width: none;
    z-index: 95;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
    display: flex;
    flex-direction: column;
    visibility: hidden;
  }
  .filter-rail.is-open {
    transform: translateX(0);
    visibility: visible;
  }

  .filter-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
  }
  .filter-drawer-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--dl-black);
    margin: 0;
  }
  .filter-drawer-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: var(--ink-soft);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
  }

  .filter-rail-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 18px 12px;
    -webkit-overflow-scrolling: touch;
  }

  .filter-drawer-foot {
    display: block;
    flex: 0 0 auto;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--white);
  }
  .filter-apply {
    width: 100%;
    background: var(--dl-green);
    color: var(--white);
    border: none;
    border-radius: var(--radius);
    padding: 13px 0;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
  }
  .filter-apply:hover {
    background: #6fa01e;
  }
  .chat-panel {
    width: 100vw;
    max-width: none;
  }
  .page-hero-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .idea-row {
    grid-template-columns: 1fr;
  }

  /* Header buttons collapse to icons only (dot / plus). Labels stay in the
     accessible name via title/aria-label. */
  .header-submit .header-submit-label {
    display: none;
  }
  .header-submit {
    padding: 9px 12px;
    gap: 0;
  }
  .header-actions {
    gap: 8px;
  }

  /* Search toolbar stacks cleanly. */
  .results-toolbar-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px 18px;
  }
  .search-field {
    flex: 1 1 100%;
    max-width: none;
    order: 1;
  }
  .result-count {
    order: 2;
    margin-left: 0;
    margin-right: auto;
  }
  .toolbar-controls {
    order: 3;
  }

  /* Detail modal fills the screen; footer buttons become icons. */
  .detail-backdrop {
    padding: 0;
  }
  .detail-modal {
    width: 100vw;
    min-height: 100dvh;
    max-height: 100dvh;
    border-radius: var(--radius);
  }
  .detail-tags {
    padding: 20px 20px 0;
  }
  .detail-title,
  .detail-summary,
  .detail-section,
  .detail-title-row,
  .detail-meta {
    padding-left: 20px;
    padding-right: 20px;
  }
  .detail-title-row .detail-title {
    padding: 0;
  }
  .detail-foot {
    padding: 12px 16px;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .detail-foot .btn-label {
    display: none;
  }
  .detail-foot .btn-deploy-lg,
  .detail-foot .btn-customize,
  .detail-foot .btn-video,
  .detail-foot .btn-chat,
  .detail-foot .btn-fullview {
    flex: 1 1 0;
    justify-content: center;
    padding: 12px 0;
  }
  .detail-foot .btn-ico {
    width: 20px;
    height: 20px;
  }

  /* Customise + video overlays inside the full-screen modal. */
  .customize-head,
  .customize-messages,
  .customize-form,
  .customize-foot {
    padding-left: 16px;
    padding-right: 16px;
  }
  .video-head {
    padding: 16px 16px 12px;
  }
  .video-frame-wrap {
    padding: 12px;
  }

  /* Idea modal fills the screen too. */
  .idea-modal {
    width: 100vw;
  }
  .idea-form {
    max-height: 100dvh;
    flex: 1;
  }
  .idea-form .detail-scroll {
    padding: 24px 20px 8px;
  }

  /* Embedded chat panel adjustments. */
  .chat-panel-head {
    padding: 0 12px;
    gap: 8px;
  }
  .chat-panel-title {
    font-size: 13.5px;
    gap: 8px;
  }
  .chat-panel-head-right {
    gap: 6px;
    flex: 0 0 auto;
  }
  .mcp-bar-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
  }
  .mcp-btn-ghost {
    margin-left: 0;
  }
}

/* ── Phones (<= 560px) ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .card-grid.is-list .uc-card {
    flex-direction: column;
  }
  .card-grid.is-list .uc-card-media {
    width: 100%;
    flex: none;
    aspect-ratio: 16 / 9;
  }

  .site-header-inner {
    gap: 12px;
    padding: 0 12px;
  }
  .site-logo img {
    height: 26px;
  }
  .site-wordmark {
    font-size: 17px;
  }
  /* Nav scrolls sideways instead of wrapping or overflowing the viewport. */
  .site-nav {
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav::-webkit-scrollbar {
    display: none;
  }
  .site-nav-link {
    font-size: 13.5px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .landing {
    padding: 32px 16px;
  }
  .landing-brands {
    gap: 14px;
  }
  .landing-brands .brand-wordmark,
  .landing-brands .brand-salesforce {
    height: 48px;
  }
  .landing-brands .brand-connector {
    width: 28px;
    height: 28px;
    font-size: 1.1rem;
  }
  .landing-hide {
    top: 12px;
    right: 12px;
    padding: 6px 12px;
    font-size: 12px;
  }

  .results-toolbar-inner {
    padding: 12px 14px;
  }
  .catalogue-inner {
    padding: 18px 14px 48px;
  }

  .customize-foot {
    flex-wrap: wrap;
  }
  .customize-foot .btn-reset,
  .customize-foot .btn-apply {
    flex: 1 1 auto;
  }

  .sf-modal-body {
    padding: 24px 20px;
  }
}

/* Larger tap targets on coarse pointers (touch devices). */
@media (pointer: coarse) {
  .view-btn {
    padding: 11px 13px;
  }
  .filter-option {
    padding: 10px 0;
  }
  .detail-close,
  .customize-close,
  .video-close,
  .chat-panel-close,
  .sf-modal-close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   Landing splash (full-screen hero with orb animation)
   ════════════════════════════════════════════════════════════════════════════ */
.landing {
  position: relative;
  min-height: calc(100vh - 64px);
  min-height: calc(100dvh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(120% 120% at 50% 0%, #10110f 0%, #000000 70%);
  color: #ffffff;
  padding: 40px 24px;
}

/* "Hide" button — top-right of the landing/hero, dismisses it until refresh. */
.landing-hide {
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 5;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.landing-hide:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.orbfield {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--maxw);
  padding: 0 24px;
  box-sizing: border-box;
  pointer-events: none;
}

.orb {
  position: absolute;
  width: clamp(180px, 26vw, 360px);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  will-change: transform;
  opacity: .96;
}
.orb-1 { top: 8%;  left: 6%;  animation: drift1 13s ease-in-out infinite; }
.orb-2 { bottom: 6%; right: 8%; width: clamp(200px, 30vw, 420px); animation: drift2 17s ease-in-out infinite; }
.orb-3 { top: 14%; right: 16%; width: clamp(120px, 16vw, 220px); animation: drift3 11s ease-in-out infinite; }

@keyframes drift1 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(24px,-30px) rotate(8deg); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-30px,-22px) rotate(-6deg); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(-18px,26px) rotate(10deg); } }

.landing-inner { position: relative; z-index: 2; max-width: 720px; }

.landing-eyebrow {
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--dl-green);
  margin-bottom: 20px;
}

.landing-brands {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  margin-bottom: 26px;
}
.landing-brands .brand-logo {
  width: auto;
  display: block;
  border-radius: var(--radius);
  will-change: transform;
}
.landing-brands .brand-wordmark {
  height: 78px;
  animation: brandFloat1 6s ease-in-out infinite;
}
.landing-brands .brand-salesforce {
  height: 78px;
  animation: brandFloat2 7.5s ease-in-out infinite;
}
.landing-brands .brand-connector {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border-radius: 50%;
  background: var(--dl-green);
  color: #ffffff;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  font-size: 1.56rem;
  line-height: 1;
}

@keyframes brandFloat1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes brandFloat2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.landing-title {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 22px;
  color: #ffffff;
}
.landing-title span { font-weight: 700; }

.landing-lead {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,.72);
  max-width: 560px;
  margin: 0 auto 34px;
  line-height: 1.6;
}

.btn-enter {
  background: var(--dl-green);
  color: #ffffff;
  font-weight: 700;
  padding: 15px 34px;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.btn-enter:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(134,188,37,.35); }
.btn-enter .arrow { transition: transform .2s; }
.btn-enter:hover .arrow { transform: translateY(3px); }

.scroll-hint {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,6px); } }

/* Launch transition: orbs sweep and hero lifts away */
body.launch .landing-inner { transition: opacity .5s ease, transform .5s ease; opacity: 0; transform: translateY(-24px); }
body.launch .scroll-hint { opacity: 0; }
body.launch .orb-1 { transition: transform .6s cubic-bezier(.6,0,.4,1), opacity .6s; transform: translate(60vw,-40vh) scale(.5); opacity: 0; }
body.launch .orb-2 { transition: transform .6s cubic-bezier(.6,0,.4,1), opacity .6s; transform: translate(-55vw,-46vh) scale(.5); opacity: 0; }
body.launch .orb-3 { transition: transform .6s cubic-bezier(.6,0,.4,1), opacity .6s; transform: translate(-40vw,40vh) scale(.5); opacity: 0; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .orb, .scroll-hint { animation: none !important; }
  body.launch .orb-1, body.launch .orb-2, body.launch .orb-3,
  body.launch .landing-inner { transition: none !important; }
}

@media (max-width: 680px) {
  .orb-3 { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Salesforce Connect button + modal
   ════════════════════════════════════════════════════════════════════════════ */
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-submit .sf-connect-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 0 0 2px rgba(255, 138, 61, 0.25);
  display: inline-block;
}

.header-submit.is-connected .sf-connect-dot {
  background: #33d17a;
  box-shadow: 0 0 0 2px rgba(51, 209, 122, 0.25);
}

/* ── Modal ── */
.sf-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* The [hidden] attribute must win over display:flex above, even on pages that
   don't load styles.css (e.g. licenses.html). */
.sf-modal-backdrop[hidden] {
  display: none !important;
}

.sf-modal {
  background: #fff;
  border-radius: var(--radius);
  max-width: 440px;
  width: 100%;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  animation: sfModalIn 0.2s ease-out;
}

@keyframes sfModalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sf-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  line-height: 1;
  padding: 4px;
}
.sf-modal-close:hover { color: #333; }

.sf-modal-body {
  padding: 32px;
}

.sf-modal-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
}

.sf-modal-desc {
  font-size: 14px;
  color: #666;
  margin: 0 0 24px;
  line-height: 1.5;
}

.sf-domain-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.sf-domain-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line, #e2e6ee);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.sf-domain-option:hover {
  border-color: var(--dl-green);
  background: rgba(134, 188, 37, 0.04);
}

.sf-domain-option:has(input:checked) {
  border-color: var(--dl-green);
  background: rgba(134, 188, 37, 0.08);
}

.sf-domain-option input[type="radio"] {
  accent-color: var(--dl-green);
  margin: 0;
}

.sf-domain-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a2b;
}

.sf-domain-url {
  margin-left: auto;
  font-size: 12px;
  color: #888;
}

.sf-custom-domain {
  margin-bottom: 16px;
}

.sf-custom-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line, #e2e6ee);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}

.sf-custom-input:focus {
  border-color: var(--dl-green);
}

/* "Bring your own app credentials" section in the connect modal */
.sf-own-app {
  margin: 0 0 16px;
  border: 1px solid var(--line, #e2e6ee);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
}
.sf-own-app summary {
  cursor: pointer;
  font-weight: 600;
  color: #444;
}
.sf-own-app-hint {
  margin: 10px 0;
  color: #666;
}
.sf-own-app .sf-custom-input {
  margin-bottom: 10px;
}

/* Lightweight header idea popup */
.hdr-idea-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 5px;
}
.hdr-idea-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hdr-idea-row .hdr-idea-label {
  margin-top: 0;
}
.hdr-idea-error {
  color: #d9534f;
  font-size: 12.5px;
  margin: 12px 0 0;
}
#hdrIdeaModal textarea.sf-custom-input {
  resize: vertical;
  min-height: 80px;
}
#hdrIdeaSubmit {
  margin-top: 18px;
}

.sf-connect-go {
  width: 100%;
  padding: 12px;
  background: var(--dl-green);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.sf-connect-go:hover {
  background: var(--dl-green-dark, #03502b);
}

.sf-modal-footer {
  font-size: 11px;
  color: #999;
  margin: 16px 0 0;
  text-align: center;
}

/* ── Custom confirm dialog ──────────────────────────────────────────────── */
.sf-confirm {
  max-width: 400px;
}

.sf-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

.sf-confirm-cancel {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.sf-confirm-cancel:hover {
  background: #eaeef5;
}

.sf-confirm-ok {
  background: #d9534f;
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.sf-confirm-ok:hover {
  background: #c9302c;
}

/* ── Agent status dot on use-case cards ─────────────────────────────────── */
.uc-card { position: relative; }
.uc-status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}
.uc-status-dot.is-on {
  background: var(--dl-green);
  box-shadow: 0 0 0 3px rgba(4, 106, 56, 0.16);
}
.uc-status-dot.is-off {
  background: #b0271f;
  box-shadow: 0 0 0 3px rgba(176, 39, 31, 0.14);
}
.uc-status-dot.is-concept {
  background: #a66a00;
  box-shadow: 0 0 0 3px rgba(166, 106, 0, 0.16);
}
.uc-card-status {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
}
#noAgentTitle .uc-status-dot { margin-right: 8px; }

/* Deployment status pill (card corner + detail modal tag) */
.uc-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #333;
  white-space: nowrap;
}
.uc-status-pill .uc-status-dot,
.tag-deploy-status .uc-status-dot {
  width: 8px;
  height: 8px;
  box-shadow: none;
}
.uc-status-pill.is-on { border-color: rgba(4, 106, 56, 0.35); color: var(--dl-green); }
.uc-status-pill.is-off { border-color: rgba(176, 39, 31, 0.3); color: #b0271f; }
.uc-status-pill.is-concept { border-color: rgba(166, 106, 0, 0.35); color: #a66a00; }
.tag-deploy-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tag-deploy-status.is-on { background: rgba(4, 106, 56, 0.09); color: var(--dl-green); }
.tag-deploy-status.is-off { background: rgba(176, 39, 31, 0.08); color: #b0271f; }
.tag-deploy-status.is-concept { background: rgba(166, 106, 0, 0.08); color: #a66a00; }

/* ── AI deploy modal (Claude-driven, streaming status) ───────────────────── */
.ai-deploy-modal {
  max-width: 620px;
  display: flex;
  flex-direction: column;
  max-height: min(80vh, 640px);
}
.ai-deploy-head {
  padding: 20px 24px 12px;
  border-bottom: 1px solid #ececec;
}
.ai-deploy-head .sf-modal-title { margin: 0 0 4px; }
.ai-deploy-sub {
  margin: 0;
  font-size: 12.5px;
  color: #666;
}
.ai-deploy-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fafafa;
  min-height: 220px;
}
.ai-deploy-msg {
  align-self: flex-start;
  max-width: 92%;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px 12px 12px 4px;
  padding: 10px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: #222;
  white-space: pre-wrap;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ai-deploy-log {
  align-self: stretch;
  margin: 0 0 0 22px;
  padding: 10px 12px;
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
}
.ai-deploy-tool {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #555;
  padding: 2px 4px;
}
.ai-deploy-tool-ico {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  display: inline-block;
}
.ai-deploy-tool.is-running .ai-deploy-tool-ico {
  border: 2px solid #c8c8c8;
  border-top-color: var(--dl-green);
  animation: aiDeploySpin 0.8s linear infinite;
}
.ai-deploy-tool.is-ok .ai-deploy-tool-ico {
  background: var(--dl-green);
  position: relative;
}
.ai-deploy-tool.is-ok .ai-deploy-tool-ico::after {
  content: "\2713";
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  position: absolute;
  inset: 0;
  text-align: center;
}
.ai-deploy-tool.is-error .ai-deploy-tool-ico {
  background: #b0271f;
  position: relative;
}
.ai-deploy-tool.is-error .ai-deploy-tool-ico::after {
  content: "\2715";
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  position: absolute;
  inset: 0;
  text-align: center;
}
.ai-deploy-tool.is-error { color: #b0271f; }
@keyframes aiDeploySpin { to { transform: rotate(360deg); } }
.ai-deploy-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid #ececec;
}
.ai-deploy-state { font-size: 12.5px; color: #666; }
.ai-deploy-state.is-ok { color: var(--dl-green); font-weight: 600; }
.ai-deploy-state.is-error { color: #b0271f; font-weight: 600; }
.ai-deploy-foot .sf-connect-go { width: auto; margin: 0; padding: 10px 18px; }

/* Dot inside the Agent Status filter options */
.filter-status-dot {
  width: 8px;
  height: 8px;
  margin-right: 7px;
  vertical-align: 1px;
}

/* Text-only wordmark shown in the landing hero next to the Salesforce logo. */
.landing-brands .brand-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-heading, "Open Sans", "Segoe UI", sans-serif);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f766e;
  line-height: 1;
}
.landing-brands .brand-wordmark b {
  font-weight: 700;
  color: var(--text, #1d1c19);
}

/* ════════════════════════════════════════════════════════════════════════════
   Burger menu, mobile menu panel, floating assistant button
   ════════════════════════════════════════════════════════════════════════════ */
.site-menu-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: none;
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--text, #1d1c19);
}
.site-menu-btn:hover { background: rgba(0, 0, 0, 0.05); }
.site-menu-bars { display: flex; flex-direction: column; gap: 5px; }
.site-menu-bars i { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 2px; }

.site-menu-backdrop {
  position: fixed; inset: 0; z-index: 240;
  background: rgba(8, 10, 8, 0.4);
}
.site-menu-backdrop[hidden] { display: none; }
.site-menu {
  position: fixed;
  top: var(--header-height, 64px);
  left: 0; right: 0;
  z-index: 250;
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #d9dee3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
}
.site-menu[hidden] { display: none; }
.site-menu-link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 12px;
  border: 0;
  background: none;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  color: var(--text, #1d1c19);
  text-decoration: none;
  cursor: pointer;
}
.site-menu-link:hover { background: rgba(0, 0, 0, 0.05); text-decoration: none; }
.site-menu-link.is-active { color: var(--primary, #046a38); font-weight: 600; }
.site-menu-sep { height: 1px; background: var(--border, #d9dee3); margin: 6px 4px; }

/* Floating AI assistant button, bottom-right, above content. Hidden on the
   chat page itself (not rendered there) and when the voice panel is open. */
.assistant-fab {
  position: fixed;
  right: 20px;
  bottom: 28px;
  z-index: 230;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary, #046a38);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.assistant-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3); text-decoration: none; }
.assistant-fab svg { width: 20px; height: 20px; }
/* Out of the way whenever a dialog or the side chat is open. */
body:has(#detailBackdrop:not([hidden])) .assistant-fab,
body:has(#ideaBackdrop:not([hidden])) .assistant-fab,
body:has(#chatOverlay:not([hidden])) .assistant-fab,
body:has(#sfConnectModal:not([hidden])) .assistant-fab,
body:has(#siteMenu:not([hidden])) .assistant-fab { display: none; }
body.has-assistant-dock .assistant-fab { display: none; }

/* Below 900px the inline nav and action buttons give way to the burger. */
@media (max-width: 899px) {
  .site-menu-btn { display: inline-flex; margin-left: auto; }
  .site-nav { display: none; }
  .header-actions .header-submit { display: none; }
  .header-actions { margin-left: 0; }
  .assistant-fab { right: 14px; bottom: 20px; width: 42px; height: 42px; }
}


/* ── Intro strip (replaces the old full-height hero) ──────────────────── */
.intro {
  background: var(--surface, #fff);
  border-bottom: 1px solid var(--border, #d9dee3);
}
.intro-inner {
  max-width: var(--maxw, 1240px);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.intro h1 { margin: 0 0 6px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.01em; }
.intro p { margin: 0; color: var(--text-secondary, #5a5750); max-width: 62ch; font-size: 15px; line-height: 1.5; }
.intro-cta {
  flex: 0 0 auto;
  background: var(--primary, #0f766e);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.intro-cta:hover { background: var(--primary-dark, #115e59); }
@media (max-width: 720px) {
  .intro-inner { flex-direction: column; align-items: stretch; padding: 20px 16px; gap: 14px; }
  .intro h1 { font-size: 1.3rem; }
}

/* Cards: title plus one line of outcome. Details live on the use-case page. */
.uc-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Phones: 16px base so iOS does not zoom form fields, and text stays legible. */
@media (max-width: 560px) {
  html { font-size: 16px; }
  input, select, textarea, button { font-size: 16px; }
}


/* ── Docked assistant (desktop): Coworker beside the page ─────────────── */
.assistant-dock {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 290;
  width: 440px; background: var(--surface, #fff);
  border-left: 1px solid var(--border, #d9dee3);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column;
}
.assistant-dock[hidden] { display: none; }
.assistant-dock-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--border, #d9dee3); font-weight: 600; }
.assistant-dock-head span { flex: 1; }
.assistant-dock-open, .assistant-dock-close { border: 0; background: none; font: inherit; font-size: 18px; line-height: 1; padding: 6px 8px; border-radius: 6px; color: var(--text, #1d1c19); cursor: pointer; text-decoration: none; }
.assistant-dock-open:hover, .assistant-dock-close:hover { background: rgba(0, 0, 0, 0.06); }
.assistant-dock iframe { flex: 1; border: 0; width: 100%; }
@media (min-width: 900px) {
  body.has-assistant-dock { padding-right: 440px !important; transition: padding-right 0.2s ease; }
  body.has-assistant-dock .site-header { right: 440px; }
}

/* Header connect control: state dot only; the label moved into the flows. */
#sfConnectBtn { padding: 8px 10px; }
#sfConnectBtn .header-submit-label { display: none; }