/* ============================================================
   OFFERINGS PAGE
   WhatsApp Conversational AI Service
   ============================================================ */

/* ---- Hero ---- */
.offerings-hero {
  padding: 160px 0 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.offerings-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(37,211,102,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.offerings-hero .section-overline {
  margin-bottom: 20px;
}

.offerings-hero .section-title {
  max-width: 780px;
  margin: 0 auto 20px;
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -1.5px;
}

.offerings-hero .doodle-word {
  position: relative;
  display: inline-block;
}

.offerings-hero .doodle-text {
  font-family: 'Caveat', cursive;
  font-weight: 600;
  font-size: 1.15em;
  color: var(--text-primary);
  position: relative;
  z-index: 1;
}

.offerings-hero .doodle-underline {
  position: absolute;
  bottom: 2px;
  left: -4%;
  width: 108%;
  height: 12px;
  color: var(--tag-border);
  z-index: 0;
}

.offerings-hero .doodle-underline path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
}

.offerings-hero .section-title.visible .doodle-underline path {
  animation: doodleDraw 0.8s ease forwards 0.6s;
}

.offerings-hero .section-subtitle {
  max-width: 520px;
  margin: 0 auto 40px;
}

.offerings-hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- Problem Section ---- */
.problem-section {
  padding: 100px 0;
  border-top: 1px solid var(--border);
}

.problem-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0;
  max-width: 820px;
  margin: 0 auto 60px;
}

/* Comparison panels */
.problem-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
}

.problem-panel.bad {
  border-color: rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.015);
}

.problem-panel.good {
  border-color: rgba(37, 211, 102, 0.22);
  background: rgba(37, 211, 102, 0.015);
}

.panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.panel-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.panel-label.bad  { color: #ef4444; }
.panel-label.bad::before  { background: #ef4444; }
.panel-label.good { color: #16a34a; }
.panel-label.good::before { background: #25D366; }

/* Timeline */
.problem-timeline {
  display: flex;
  flex-direction: column;
}

.tl-event {
  padding-left: 22px;
  padding-bottom: 20px;
  position: relative;
}

.tl-event:last-child { padding-bottom: 0; }

/* Dot */
.tl-event::after {
  content: '';
  position: absolute;
  left: 0;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--border);
  box-sizing: border-box;
}

.problem-panel.bad  .tl-event.final::after { background: #ef4444; }
.problem-panel.good .tl-event.final::after { background: #25D366; }

/* Vertical line */
.tl-event:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.tl-time {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.tl-msg {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.45;
  font-style: italic;
  margin-bottom: 5px;
}

.tl-msg.ai {
  font-style: normal;
  color: var(--text-primary);
  font-weight: 500;
}

.tl-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.tl-badge.missed,
.tl-badge.seen,
.tl-badge.lost {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.15);
}

.tl-badge.instant,
.tl-badge.qualified,
.tl-badge.booked {
  background: rgba(37, 211, 102, 0.1);
  color: #16a34a;
  border: 1px solid rgba(37, 211, 102, 0.2);
}

/* Panel footer */
.panel-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.panel-footer.bad  { color: #ef4444; }
.panel-footer.good { color: #16a34a; }

/* VS divider */
.problem-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 52px 24px 0;
}

.divider-vs {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg-page);
}

.divider-line {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* Headline */
.problem-headline {
  text-align: center;
}

.problem-headline h2 {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.15;
}

.problem-headline p {
  font-size: 16px;
  color: var(--text-secondary);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ---- WhatsApp Demo Section ---- */
.demo-section {
  padding: 100px 0;
  background: var(--bg-page);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.demo-section .section-header {
  text-align: center;
  margin-bottom: 72px;
}

.demo-layout {
  display: grid;
  grid-template-columns: 1fr 400px 1fr;
  gap: 32px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

/* Phone Mockup — iPhone 17 Pro Max / Black Titanium */
.phone-mockup {
  width: 330px;
  height: 668px;
  background: linear-gradient(162deg, #1C1C1E 0%, #0A0A0A 35%, #161616 65%, #0D0D0D 100%);
  border-radius: 54px;
  padding: 11px;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 32px 72px rgba(0,0,0,0.28),
    0 8px 20px rgba(0,0,0,0.16);
  position: relative;
  margin: 0 auto;
  flex-shrink: 0;
  transform: perspective(1400px) rotateX(3deg);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Left buttons: mute toggle + volume up + volume down */
.phone-mockup::before {
  content: '';
  position: absolute;
  left: -2.5px;
  top: 96px;
  width: 2.5px;
  height: 22px;
  background: linear-gradient(90deg, #1A1A1A 0%, #2E2E2E 100%);
  border-radius: 2px 0 0 2px;
  box-shadow:
    0 34px 0 #242424,
    0 66px 0 2.5px #242424;
}

/* Right button: power / side button */
.phone-mockup::after {
  content: '';
  position: absolute;
  right: -2.5px;
  top: 128px;
  width: 2.5px;
  height: 58px;
  background: linear-gradient(90deg, #2E2E2E 0%, #1A1A1A 100%);
  border-radius: 0 2px 2px 0;
}

/* Dynamic Island */
.phone-island {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 26px;
  background: #000;
  border-radius: 20px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 9px;
}

.phone-island::after {
  content: '';
  width: 9px;
  height: 9px;
  background: #0d0d0d;
  border-radius: 50%;
  border: 1.5px solid #1a1a1a;
}

.phone-screen {
  width: 100%;
  height: 100%;
  background: var(--bg-page);
  border-radius: 44px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    inset 0 0 0 0.5px rgba(255,255,255,0.05),
    inset 0 2px 10px rgba(0,0,0,0.35);
}

/* Status Bar */
.wa-status-bar {
  background: #075E54;
  padding: 16px 16px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  height: 44px;
}

.wa-status-time {
  font-size: 10.5px;
  font-weight: 700;
  color: white;
  letter-spacing: 0.2px;
}

.wa-status-icons {
  display: flex;
  align-items: center;
  gap: 5px;
  color: white;
}

/* WhatsApp Header */
.wa-header {
  background: linear-gradient(135deg, #075E54 0%, #054d44 100%);
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.25), 0 3px 10px rgba(0,0,0,0.18);
}

.wa-back {
  color: white;
  opacity: 0.9;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.wa-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #1d6b52;
  border: 2px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.35);
}

.wa-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fallback when no image */
.wa-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1a7a4a 0%, #0d5c38 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.9);
}

.wa-contact-info {
  flex: 1;
  min-width: 0;
}

.wa-contact-name {
  font-size: 13.5px;
  font-weight: 700;
  color: white;
  line-height: 1.2;
  letter-spacing: 0.1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  background: #4FC3F7;
  border-radius: 50%;
  flex-shrink: 0;
}

.wa-contact-status {
  font-size: 10px;
  color: rgba(255,255,255,0.65);
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-online-dot {
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.8);
  animation: online-pulse 2s ease-in-out infinite;
}

@keyframes online-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(74, 222, 128, 0.8); }
  50%       { box-shadow: 0 0 8px rgba(74, 222, 128, 1); }
}

.wa-header-actions {
  display: flex;
  gap: 14px;
  color: rgba(255,255,255,0.85);
  flex-shrink: 0;
}

/* Chat Area */
.wa-chat {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: none;
  background: var(--bg-page);
}

.wa-chat::-webkit-scrollbar { display: none; }

.wa-msg {
  max-width: 82%;
  padding: 7px 10px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.45;
  position: relative;
  word-wrap: break-word;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.wa-msg.visible {
  opacity: 1;
  transform: translateY(0);
}

.wa-msg.received {
  background: #fff;
  align-self: flex-start;
  border-top-left-radius: 2px;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.wa-msg.sent {
  background: #DCF8C6;
  align-self: flex-end;
  border-top-right-radius: 2px;
  color: #1a1a1a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.wa-msg-time {
  position: absolute;
  bottom: 4px;
  right: 8px;
  font-size: 9px;
  color: #999;
  display: flex;
  align-items: center;
  gap: 3px;
}

.wa-msg.sent .wa-msg-time {
  color: #4fc3f7;
}

.wa-msg-check {
  display: inline-flex;
  color: #4fc3f7;
}

/* Typing indicator */
.wa-typing {
  background: #fff;
  border-radius: 12px;
  border-top-left-radius: 2px;
  padding: 10px 14px;
  align-self: flex-start;
  max-width: 60px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  display: none;
}

.wa-typing.active {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wa-typing-dot {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: waTypingBounce 1.2s infinite;
}

.wa-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.wa-typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes waTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* WhatsApp Input Bar */
.wa-input-bar {
  background: #F0F0F0;
  padding: 6px 14px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.wa-input-field {
  flex: 1;
  background: white;
  border-radius: 100px;
  padding: 6px 12px;
  font-size: 11px;
  color: #666;
  border: none;
  outline: none;
}

.wa-send-btn {
  width: 32px;
  height: 32px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}

/* Demo Annotations */
.demo-annotations {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-annotations.left {
  align-items: flex-end;
  text-align: right;
}

.demo-annotations.right {
  align-items: flex-start;
  text-align: left;
}

.annotation {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.annotation.left-ann {
  flex-direction: row-reverse;
  transform: translateX(-16px);
}

.annotation.visible {
  opacity: 1;
  transform: translateX(0);
}

.ann-line {
  width: 32px;
  height: 1px;
  background: var(--border);
  flex-shrink: 0;
}

.ann-dot {
  width: 8px;
  height: 8px;
  background: #25D366;
  border-radius: 50%;
  flex-shrink: 0;
}

.ann-content {}

.ann-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: 2px;
  text-transform: uppercase;
}

.ann-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ---- Capabilities Grid ---- */
.capabilities-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}

.capabilities-section .section-header {
  text-align: center;
  margin-bottom: 60px;
}

.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.capability-card {
  background: var(--bg-page);
  padding: 32px 28px;
  transition: background 0.25s ease;
}

.capability-card:hover {
  background: var(--bg-card);
}

.cap-icon {
  width: 40px;
  height: 40px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--text-secondary);
  transition: all 0.25s ease;
}

.capability-card:hover .cap-icon {
  background: #25D366;
  border-color: #25D366;
  color: white;
}

.cap-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.cap-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ---- Stats Strip ---- */
.stats-section {
  padding: 80px 0;
  border-bottom: 1px solid var(--border);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-item {
  background: var(--bg-page);
  padding: 40px 32px;
  text-align: center;
}

.stat-value {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
  margin-bottom: 8px;
}

.stat-value span {
  color: #25D366;
}

.stat-label {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.stat-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ---- Process Section ---- */
.process-section {
  padding: 100px 0;
  border-bottom: 1px solid var(--border);
}

.process-section .section-header {
  text-align: center;
  margin-bottom: 72px;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}

.process-step {
  position: relative;
  padding-top: 16px;
}

.process-step::before {
  content: '';
  position: absolute;
  top: 28px;
  left: calc(50% + 32px);
  right: -50%;
  height: 1px;
  background: var(--border);
}

.process-step:last-child::before { display: none; }

.step-number {
  width: 48px;
  height: 48px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 20px;
  color: var(--text-primary);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.step-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.step-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
}

.step-tag {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---- CTA Section ----
   Centered card with a layered warm pattern (dot grid + soft glow halos)
   sitting behind the content. No more chat bubble / ARIA branding. */
.offerings-cta-section {
  position: relative;
  padding: 140px 0 130px;
  background: var(--bg-page);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}

/* Decorative pattern: a fine dot grid plus two warm radial halos.
   Pure CSS — no asset to load. */
.cta-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(139, 115, 85, 0.16) 1.4px, transparent 1.6px),
    radial-gradient(ellipse 60% 60% at 50% 0%, rgba(232, 201, 136, 0.32), transparent 70%),
    radial-gradient(circle at 85% 90%, rgba(196, 158, 95, 0.22), transparent 55%),
    radial-gradient(circle at 15% 85%, rgba(196, 158, 95, 0.18), transparent 55%);
  background-size: 22px 22px, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, #000 60%, transparent 100%);
}

.offerings-cta-section .container {
  position: relative;
  z-index: 1;
}

.cta-card {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-headline {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--text-primary);
  margin: 0 0 18px;
  text-wrap: balance;
}

.cta-subhead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 auto 32px;
  max-width: 560px;
}

.cta-button {
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .offerings-cta-section {
    padding: 96px 20px 96px;
  }
  .cta-headline {
    font-size: clamp(24px, 7vw, 32px);
    letter-spacing: -0.4px;
  }
  .cta-subhead {
    font-size: 15px;
  }
  .cta-pattern {
    background-size: 18px 18px, 100% 100%, 100% 100%, 100% 100%;
  }
}

/* Chat-style CTA */
.cta-chat {
  max-width: 460px;
  margin: 0 auto 36px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Incoming bubble (AI message) */
.cta-bubble.incoming {
  text-align: left;
}

.cta-bubble-body {
  background: transparent;
  border-left: 2px solid rgba(37, 211, 102, 0.5);
  padding: 4px 0 4px 20px;
}

.cta-bubble-name {
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Pulsing dots — typing indicator before the answer */
.aria-pulse {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.ap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  position: relative;
  animation: ap-bounce 1s ease-in-out infinite alternate;
}

.ap-dot:nth-child(2) { animation-delay: 0.18s; }
.ap-dot:nth-child(3) { animation-delay: 0.36s; }

.ap-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(37, 211, 102, 0.35);
  animation: ap-ring 1s ease-in-out infinite alternate;
}

.ap-dot:nth-child(2)::after { animation-delay: 0.18s; }
.ap-dot:nth-child(3)::after { animation-delay: 0.36s; }

@keyframes ap-bounce {
  from { transform: scale(0.65); opacity: 0.45; }
  to   { transform: scale(1.1);  opacity: 1; }
}

@keyframes ap-ring {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1.5); opacity: 0.6; }
}

.cta-bubble-text {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  color: var(--text-primary);
  animation: aria-text-in 0.9s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.cta-bubble-text em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 0.88em;
}

@keyframes aria-text-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Trust signals */
.cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.trust-item {
  font-size: 12px;
  color: var(--text-muted);
}

.trust-dot {
  color: var(--border);
  font-size: 14px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .problem-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .problem-divider {
    flex-direction: row;
    padding: 16px 0;
  }

  .divider-line {
    width: 40px;
    height: 1px;
  }

  .demo-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .phone-mockup {
    transform: none;
  }

  .demo-annotations.left,
  .demo-annotations.right {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 16px;
  }

  .annotation,
  .annotation.left-ann {
    flex-direction: column;
    align-items: center;
    transform: translateY(16px);
    max-width: 140px;
  }

  .ann-line { display: none; }

  .capabilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-steps {
    grid-template-columns: 1fr;
    max-width: 480px;
  }

  .process-step::before { display: none; }
}

@media (max-width: 600px) {
  .offerings-hero {
    padding: 120px 0 80px;
  }

  .demo-section {
    padding: 72px 0;
  }

  .capabilities-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .phone-mockup {
    width: 270px;
    height: 546px;
    border-radius: 50px;
  }

  .phone-screen {
    border-radius: 41px;
  }
}

/* ---- Industry Switcher Tabs ---- */
.industry-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 52px;
  flex-wrap: wrap;
}

.ind-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: white;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  white-space: nowrap;
  outline: none;
}

.ind-tab svg {
  flex-shrink: 0;
  opacity: 0.5;
  transition: opacity 0.2s;
}

.ind-tab:hover {
  border-color: rgba(0, 0, 0, 0.15);
  color: var(--text-primary);
}

.ind-tab:hover svg {
  opacity: 0.85;
}

.ind-tab.active {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: white;
}

.ind-tab.active svg {
  opacity: 1;
}

/* Problem section fade on industry switch */
.problem-inner {
  transition: opacity 0.25s ease;
}

.problem-inner.fading {
  opacity: 0;
}

@media (max-width: 640px) {
  .industry-tabs {
    gap: 6px;
    margin-bottom: 36px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 4px;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .industry-tabs::-webkit-scrollbar { display: none; }

  .ind-tab {
    font-size: 12.5px;
    padding: 8px 14px;
    gap: 5px;
  }
}


/* ============================================================
   INDUSTRY PAGE — hero variant (no CTAs, reduced bottom padding)
   ============================================================ */

.offerings-hero--industry {
  padding-bottom: 40px;
}

.offerings-hero--industry .section-subtitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 560px;
}

/* Demo section flush below hero on industry pages */
.demo-section--hero {
  padding-top: 0;
  border-top: none;
}

.demo-section--hero .section-header {
  display: none;
}

/* ---- Floating Back CTA ---- */
.floating-back-btn {
  position: fixed;
  bottom: 32px;
  left: 32px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 100px;
  padding: 10px 18px 10px 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s ease;
  z-index: 90;
  text-decoration: none;
}

.floating-back-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.96);
}

.floating-back-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.floating-back-btn:hover svg {
  transform: translateX(-2px);
}

@media (max-width: 600px) {
  .floating-back-btn {
    bottom: 20px;
    left: 16px;
    font-size: 12px;
    padding: 9px 15px 9px 11px;
  }
}


/* ============================================================
   INDUSTRY SELECTION PAGE (offerings.html)
   ============================================================ */

.industry-select-section {
  padding: 0 0 120px;
}

.industry-select-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 860px;
  margin: 0 auto;
}

.industry-select-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 28px 28px 24px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg-page);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, background 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.industry-select-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 0% 0%, rgba(37,211,102,0.04) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.industry-select-card:hover {
  border-color: rgba(37, 211, 102, 0.35);
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.08), 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-2px);
  background: var(--bg-surface, #fafafa);
}

.industry-select-card:hover::before {
  opacity: 1;
}

.isc-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a9c4e;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.industry-select-card:hover .isc-icon {
  background: rgba(37, 211, 102, 0.13);
  border-color: rgba(37, 211, 102, 0.25);
}

.isc-content {
  flex: 1;
  min-width: 0;
}

.isc-title {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--text-primary);
  margin-bottom: 6px;
  letter-spacing: -0.2px;
}

.isc-desc {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 12px;
}

.isc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.isc-tags span {
  font-size: 11px;
  font-weight: 500;
  color: #1a9c4e;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.18);
  border-radius: 100px;
  padding: 3px 10px;
  letter-spacing: 0.1px;
}

.isc-arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-muted, #aaa);
  transition: color 0.25s ease, transform 0.25s ease;
}

.industry-select-card:hover .isc-arrow {
  color: #25D366;
  transform: translateX(3px);
}

@media (max-width: 680px) {
  .industry-select-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .industry-select-card {
    padding: 22px 20px;
    gap: 16px;
  }

  .isc-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .isc-title {
    font-size: 18px;
  }
}


/* CTA back link (bottom of page) */
.cta-back {
  margin-top: 28px;
  text-align: center;
}

.cta-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted, #999);
  transition: color 0.2s ease;
}

.cta-back-link:hover {
  color: var(--text-primary);
}


/* ============================================================
   OFFERINGS PAGE — INTRO HERO (page-level h1)
   ============================================================ */

/* Viewport-height hero — fills the screen on first paint. Two-column layout:
   text on the left, illustration on the right that bleeds to the viewport
   edge so the image can be as large as possible (stacks on mobile). */
.offerings-page-hero {
  min-height: 100vh;
  min-height: 100dvh; /* dynamic viewport on mobile to dodge the URL-bar jump */
  padding: 120px 0 80px 0; /* no horizontal padding — left is on the container */
  display: flex;
  align-items: center;
}

.offerings-page-hero .container {
  width: 100%;
  max-width: 1440px;   /* contain on big monitors so the image doesn't get absurdly large */
  margin: 0 auto;
  /* Symmetric horizontal padding so content always keeps a gutter on
     both sides — at 1280x800 the container is full-width and a 0 right
     pad left content flush against the viewport edge. */
  padding-left: clamp(40px, 6vw, 96px);
  padding-right: clamp(40px, 6vw, 96px);
}

/* Two-column split — text left (capped width), visual right (fills remaining).
   Image column has its own max so the image stops growing past a comfortable
   size; gap absorbs any remaining horizontal space on very wide screens. */
.offerings-hero-split {
  display: grid;
  /* Image column flexes to fill remaining width so its right edge
     reaches the container right edge — image inside has its own
     max-width so it never grows past a comfortable size, and the
     flex-end justify on .offerings-hero-visual right-aligns it. */
  grid-template-columns: minmax(360px, 520px) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.offerings-hero-text {
  text-align: left;
}

.offerings-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  /* Push the hero image to the right edge of its column so its right
     side aligns with the stats grid's right edge (container right). */
  justify-content: flex-end;
}

.offerings-hero-image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 20px;
  /* No auto margins — .offerings-hero-visual uses flex-end to
     right-align the image with the container right edge, which
     in turn lines up with the stats grid's right edge. */
  margin: 0;
  box-shadow: 0 12px 32px rgba(20, 16, 8, 0.08);
}

/* ====================================================================
   Hero illustration — built in HTML/CSS, no image asset required.
   Mirrors the abandoned-cart / instant-payment marketing comp.
   ==================================================================== */

.hero-mock {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 5;
  margin: 0 auto;
}

/* Warm orange backdrop card on the right */
.hero-mock-backdrop {
  position: absolute;
  top: 6%;
  right: 0;
  width: 70%;
  height: 86%;
  background: linear-gradient(180deg, #F5A039 0%, #E5862A 100%);
  border-radius: 18px;
  box-shadow: 0 30px 60px rgba(229, 134, 42, 0.32),
              0 8px 20px rgba(229, 134, 42, 0.18);
}

/* Floating money-bag bubble on the top-right of the backdrop */
.hero-mock-bag {
  position: absolute;
  top: -22px;
  right: -22px;
  width: 70px;
  height: 70px;
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 12px 24px rgba(20, 16, 8, 0.14),
              0 2px 6px rgba(20, 16, 8, 0.08);
}

/* "Abandoned Cart Flow" pill — sits top-left, overlapping the backdrop */
.hero-mock-flow-pill {
  position: absolute;
  top: 16%;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  background: #ffffff;
  border-radius: 100px;
  box-shadow: 0 14px 30px rgba(20, 16, 8, 0.10),
              0 2px 6px rgba(20, 16, 8, 0.06);
  z-index: 2;
}

.hero-mock-flow-emoji {
  font-size: 24px;
  line-height: 1;
}

.hero-mock-flow-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.1px;
}

/* Main notification card */
.hero-mock-card {
  position: absolute;
  top: 30%;
  left: 4%;
  width: 75%;
  background: #ffffff;
  border-radius: 18px;
  padding: 22px 24px 0;
  box-shadow: 0 20px 44px rgba(20, 16, 8, 0.12),
              0 4px 12px rgba(20, 16, 8, 0.06);
  z-index: 2;
}

.hero-mock-greeting {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}

.hero-mock-body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: #1a1a1a;
  margin: 0 0 14px;
}

.hero-mock-emoji {
  display: inline;
  vertical-align: -2px;
}

.hero-mock-time {
  font-size: 12px;
  color: #999;
  text-align: right;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.hero-mock-actions {
  display: flex;
  flex-direction: column;
}

.hero-mock-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #1aa4d6; /* iOS-style action-link blue */
  cursor: pointer;
}

.hero-mock-action:last-child {
  border-bottom: none;
}

.hero-mock-action svg {
  flex-shrink: 0;
}

/* Floating "Paid" confirmation pill — bottom-left */
.hero-mock-paid {
  position: absolute;
  left: 8%;
  bottom: 4%;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 14px;
  background: #ffffff;
  border-radius: 100px;
  box-shadow: 0 14px 30px rgba(20, 16, 8, 0.10),
              0 2px 6px rgba(20, 16, 8, 0.06);
  z-index: 3;
}

.hero-mock-paid-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(26, 164, 90, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-mock-paid-amount {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.2px;
}

.hero-mock-paid-meta {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  color: #999;
  margin-top: -1px;
}

/* Responsive — shrink the mock on smaller viewports so it doesn't overflow */
@media (max-width: 1024px) {
  .hero-mock {
    max-width: 440px;
  }
  .hero-mock-greeting { font-size: 16px; }
  .hero-mock-body { font-size: 14px; }
  .hero-mock-action { font-size: 14px; padding: 12px 0; }
  .hero-mock-flow-label { font-size: 13px; }
  .hero-mock-paid-amount { font-size: 14px; }
}

@media (max-width: 768px) {
  .hero-mock {
    max-width: 360px;
    aspect-ratio: 5 / 6;
  }
  .hero-mock-bag {
    width: 56px;
    height: 56px;
    font-size: 26px;
    top: -18px;
    right: -14px;
  }
}

.offerings-page-hero .section-overline {
  margin-bottom: 16px;
}

.offerings-page-hero-title {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 700; /* bold */
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--text-primary);
  margin: 0 0 22px;
  text-wrap: balance;
}

/* Word-by-word reveal — same cinematic rise + unblur as the homepage hero.
   Each word starts hidden, blurred and pushed down; .visible is added by
   offerings-hero.js on a 90ms stagger. */
.offerings-page-hero-title .word {
  display: inline-block;
  opacity: 0;
  filter: blur(14px);
  transform: translateY(50px) scale(0.96);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.34, 1.4, 0.64, 1);
  will-change: transform, filter, opacity;
}

.offerings-page-hero-title .word.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0) scale(1);
}

.offerings-page-hero .section-subtitle {
  max-width: 540px;
  margin: 0;
  color: var(--text-secondary);
  font-size: 17px;
  line-height: 1.6;
}

/* Hero subhead — held back until the headline's word-by-word reveal finishes,
   then unblurs/rises in. Driven by offerings-hero.js, which adds the
   `.is-revealed` class after the last word lands. */
.offerings-hero-sub {
  opacity: 0;
  filter: blur(8px);
  transform: translateY(8px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, filter, transform;
}

.offerings-hero-sub.is-revealed {
  opacity: 1;
  filter: blur(0);
  transform: none;
}

/* Tablet: tighter gap, slightly narrower text column */
@media (max-width: 1024px) {
  .offerings-hero-split {
    gap: 40px;
    grid-template-columns: minmax(300px, 440px) 1fr;
  }
}

/* Mobile: stack — text first, then image */
@media (max-width: 768px) {
  .offerings-page-hero {
    padding: 100px 0 60px 0;
    min-height: auto;
  }
  .offerings-page-hero .container {
    padding-left: 20px;
    padding-right: 20px;
  }
  .offerings-hero-split {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .offerings-hero-text {
    text-align: center;
  }
  .offerings-hero-text .section-subtitle {
    margin: 0 auto;
  }
  .offerings-page-hero-title {
    font-size: clamp(30px, 8vw, 42px);
    letter-spacing: -0.5px;
  }
  .offerings-page-hero .section-subtitle {
    font-size: 15px;
  }
  .offerings-hero-image {
    max-width: 100%;
    margin: 0 auto;
  }
}

/* ============================================================
   OFFERINGS PAGE — SPLIT HERO (Real Estate)
   ============================================================ */

.offerings-split-hero {
  padding: 40px 0 60px;
}

.split-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  align-items: center;
}

.split-hero-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.split-hero-text .section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wa-green, #25d366);
}

.split-hero-text h1 {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.15;
  color: var(--text-primary);
  margin: 0;
}

.split-hero-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 480px;
}

.split-hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.btn-primary-green {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  background: var(--wa-green, #25d366);
  color: #fff;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.btn-primary-green:hover {
  opacity: 0.88;
}

.btn-outline-subtle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-outline-subtle:hover {
  border-color: var(--wa-green, #25d366);
  color: var(--wa-green, #25d366);
}

.split-hero-phone {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Inline phone — used inside `.industry-showcase-block` so the Real Estate
   live demo sits alongside text at a height comparable to the other industry
   visual cards (which use a 4:3 aspect ratio). */
.phone-mockup.phone-mockup--inline {
  width: 286px;
  height: 580px;
  border-radius: 48px;
}

.phone-mockup.phone-mockup--inline .phone-screen {
  border-radius: 40px;
}


/* ============================================================
   STATS STRIP — sits at the bottom of the hero, below the split.
   Heading + subhead, then a 4-up grid of metric cards.
   ============================================================ */

.offerings-stats {
  margin-top: 64px;
  text-align: left;
}

.offerings-stats-header {
  margin: 0 0 24px;
}

.offerings-stats-title {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin: 0 0 10px;
  text-wrap: balance;
}

.offerings-stats-sub {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 auto;
  max-width: 540px;
}

.offerings-stats-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: #ffffff;
  border: 1px solid rgba(20, 16, 8, 0.08);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(20, 16, 8, 0.04);
}

.offerings-stat {
  padding: 26px 22px;
  border-right: 1px solid rgba(20, 16, 8, 0.06);
}

.offerings-stat:last-child {
  border-right: none;
}

.offerings-stat-value {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.offerings-stat-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
}

/* Bring the bottom of the hero in a bit so the stats sit closer to the
   industry blocks below */
.offerings-page-hero {
  padding-bottom: 56px !important;
}

@media (max-width: 768px) {
  .offerings-stats {
    margin-top: 40px;
  }
  .offerings-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .offerings-stat {
    padding: 22px 16px;
    border-bottom: 1px solid rgba(20, 16, 8, 0.06);
  }
  .offerings-stat:nth-child(2) { border-right: none; }
  .offerings-stat:nth-child(3),
  .offerings-stat:nth-child(4) { border-bottom: none; }
}


/* ============================================================
   INDUSTRY SHOWCASE BLOCKS (Healthcare, Hospitality, Insurance)
   ============================================================ */

.industry-showcase-block {
  padding: 96px 0;
}

/* Offering pages — every section below the hero shares the hero's
   horizontal alignment: left edge sits at the same x as the hero
   headline / stats left, right edge at the container right (which is
   where the hero image / stats right reach). Desktop-only override —
   mobile keeps its own 20/16px gutters via the cascade. */
@media (min-width: 769px) {
  .industry-showcase-block > .container,
  #how-we-build > .container,
  .offerings-cta-section > .container {
    max-width: 1440px;
    margin: 0 auto;
    /* Symmetric padding so the right edge always keeps a gutter — was
       0 to bleed the hero image, but caused content to hug the viewport
       edge on viewports narrower than the 1440 cap. */
    padding-left: clamp(40px, 6vw, 96px);
    padding-right: clamp(40px, 6vw, 96px);
  }
  /* Let the cards grid fill the now-aligned section container so its
     left/right edges match the hero stats. */
  .rag-uses-grid {
    max-width: none;
    padding: 0;
    margin: 0;
  }
}

/* Alternating section backgrounds — odd-indexed industries match the page,
   even-indexed get a slightly warmer cream so the rhythm is visible without
   needing dividers between sections. */
#realestate,
#clinic,
#hospitality,
#immigration {
  background: var(--bg-page, #FBF9EF);
}

#auto,
#healthcare,
#insurance {
  background: #F0E6D0;
}

.showcase-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.showcase-inner--alt {
  direction: rtl;
}

.showcase-inner--alt > * {
  direction: ltr;
}

.showcase-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Top overline pill above each industry H2 — e.g. "Real Estate WhatsApp agent" */
.industry-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 14px 6px 12px;
  background: rgba(37, 211, 102, 0.10);
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 100px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0e7c44;
  margin: 0 0 -4px;
}

.industry-chip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #25D366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.18);
  flex-shrink: 0;
}


.showcase-text .section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--wa-green, #25d366);
}

.showcase-text h2 {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--text-primary);
  margin: 0;
  font-weight: 500;
}

/* Outcome subheading — matches the homepage's .section-subtitle styling
   (DM Sans body font, 16px, generous line-height) so the WhatsApp Agents
   page reads consistently with the rest of the site. */
.showcase-subhead {
  font-family: inherit; /* body font — DM Sans */
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--text-secondary);
  font-weight: 400;
  margin: 12px 0 0;
  max-width: 44ch;
}

.showcase-desc {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

.showcase-features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.showcase-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.feat-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--wa-green, #25d366);
}

/* Keep all CTAs content-width only */
.split-hero-text .btn-primary,
.split-hero-text .btn-secondary,
.showcase-text .btn-primary,
.showcase-text .btn-secondary {
  align-self: flex-start;
  width: fit-content;
}

/* CTA bubble action button (global CTA section) */
.cta-bubble-action {
  align-self: flex-end;
  width: fit-content;
  margin-top: 8px;
}

.showcase-demo {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}


/* ============================================================
   INDUSTRIES BANNER — divider band between demo and other industries
   ============================================================ */

.industries-banner {
  padding: 96px 0 24px;
  text-align: center;
}

.industries-banner h2 {
  font-family: 'Utendo', 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin: 12px 0 14px;
  text-wrap: balance;
}

.industries-banner .section-subtitle {
  max-width: 640px;
  margin: 0 auto;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1.55;
}


/* ============================================================
   SHOWCASE IMAGE CARD — visual side of each non-demo industry
   ============================================================ */

.showcase-image {
  position: relative;
  width: 100%;
  max-width: 540px;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 60px rgba(139, 115, 85, 0.18),
              0 4px 12px rgba(139, 115, 85, 0.08);
  isolation: isolate;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.showcase-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.18), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

.showcase-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.22) 100%);
  z-index: 1;
  pointer-events: none;
}

.showcase-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 72px rgba(139, 115, 85, 0.24),
              0 6px 16px rgba(139, 115, 85, 0.1);
}

.showcase-image-overline {
  position: absolute;
  top: 24px;
  left: 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  z-index: 2;
}

.showcase-image-icon {
  position: relative;
  z-index: 2;
  width: clamp(80px, 12vw, 128px);
  height: auto;
  color: rgba(255, 255, 255, 0.95);
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
}

/* WhatsApp-style chat card — replaces gradient image cards on industry sections.
   Mirrors the live Real Estate phone demo (without the device frame), sized to
   fit the visual cell and tell a 4-message conversation per industry. */
.wa-card {
  width: 100%;
  max-width: 540px;
  aspect-ratio: 6 / 5; /* a touch taller than 4:3 to fit larger bubbles */
  background: var(--bg-page, #FBF9EF);
  border-radius: 14px; /* subtler corners */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(139, 115, 85, 0.18),
              0 4px 12px rgba(139, 115, 85, 0.08);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.wa-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 72px rgba(139, 115, 85, 0.24),
              0 6px 16px rgba(139, 115, 85, 0.1);
}

.wa-card .wa-header {
  padding: 12px 14px 13px;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.16);
}

/* Avatar removed from card header — keep the markup but hide it */
.wa-card .wa-avatar { display: none; }

.wa-chat--static {
  flex: 1;
  min-height: 0;          /* allow flex child to actually shrink/scroll */
  overflow-y: auto;        /* scroll when conversation overflows */
  padding: 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scroll-behavior: smooth;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(255,255,255,0.3), transparent 55%),
    var(--bg-page, #FBF9EF);
}

/* Hide scrollbars completely — auto-scroll still works programmatically */
.wa-chat--static::-webkit-scrollbar { display: none; width: 0; height: 0; }
.wa-chat--static {
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* legacy Edge / IE */
}

.wa-card .wa-msg {
  font-size: 14px;
  line-height: 1.45;
  padding: 9px 13px 10px;
  border-radius: 14px;
  /* Sequential reveal — driven by .reveal.visible on the parent .wa-card */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When the card scrolls into view, stagger the bubbles in conversation order */
.wa-card.visible .wa-msg {
  opacity: 1;
  transform: none;
}

/* Pacing: card finishes its 0.9s reveal at ~1s, then bubbles arrive with a
   ~0.7s gap each (mimics typing/reading pause). Total: ~3.4s for 4 messages. */
.wa-card.visible .wa-msg:nth-child(1)  { transition-delay: 1.00s; }
.wa-card.visible .wa-msg:nth-child(2)  { transition-delay: 1.70s; }
.wa-card.visible .wa-msg:nth-child(3)  { transition-delay: 2.40s; }
.wa-card.visible .wa-msg:nth-child(4)  { transition-delay: 3.10s; }
.wa-card.visible .wa-msg:nth-child(5)  { transition-delay: 3.80s; }
.wa-card.visible .wa-msg:nth-child(6)  { transition-delay: 4.50s; }

/* Long-form card (Real Estate) — uses tighter pacing and consecutive AI
   messages arrive almost back-to-back, like a real WhatsApp burst. */
.wa-card.wa-card--long.visible .wa-msg:nth-child(1)  { transition-delay: 1.00s; }
.wa-card.wa-card--long.visible .wa-msg:nth-child(2)  { transition-delay: 1.70s; }
.wa-card.wa-card--long.visible .wa-msg:nth-child(3)  { transition-delay: 2.20s; }
.wa-card.wa-card--long.visible .wa-msg:nth-child(4)  { transition-delay: 2.55s; } /* attachment */
.wa-card.wa-card--long.visible .wa-msg:nth-child(5)  { transition-delay: 2.85s; } /* consecutive AI */
.wa-card.wa-card--long.visible .wa-msg:nth-child(6)  { transition-delay: 3.40s; }
.wa-card.wa-card--long.visible .wa-msg:nth-child(7)  { transition-delay: 4.05s; }
.wa-card.wa-card--long.visible .wa-msg:nth-child(8)  { transition-delay: 4.40s; } /* listings strip */
.wa-card.wa-card--long.visible .wa-msg:nth-child(9)  { transition-delay: 5.00s; }
.wa-card.wa-card--long.visible .wa-msg:nth-child(10) { transition-delay: 5.65s; }

/* Long variant: keep the same aspect-ratio as the standard card so visual
   rhythm is consistent — the chat area scrolls internally as new bubbles
   arrive. (Override removed: was `aspect-ratio: auto; height: auto;`.) */

/* Media attachment bubble — preview-style with a small icon */
.wa-msg--media {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  background: rgba(220, 248, 198, 0.65) !important;
  border: 1px dashed rgba(0, 0, 0, 0.12);
}

.wa-attach-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.65);
  color: #075E54;
  flex-shrink: 0;
}

/* Listing chips strip — three property cards on one bubble */
.wa-msg--listings {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px !important;
}

.wa-listing {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 100px;
  font-size: 12.5px;
  font-weight: 500;
  color: #1a1a1a;
}

/* Restore the received-bubble's tail corner that the global radius wipes out */
.wa-card .wa-msg.received { border-top-left-radius: 4px; }
.wa-card .wa-msg.sent     { border-top-right-radius: 4px; }

/* Inline typing indicator — same dots as the phone-mockup version, styled to
   look like a received bubble (left-aligned, white) so the AI "is typing".
   Inserted by JS before each AI reply, removed once the message arrives. */
.wa-typing--inline {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 4px;
  border-radius: 14px;
  padding: 11px 14px;
  max-width: 60px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  opacity: 0;
  transform: translateY(8px);
  animation: waTypingFadeIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wa-typing--inline.is-fading-out {
  animation: waTypingFadeOut 0.18s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes waTypingFadeIn {
  to { opacity: 1; transform: none; }
}

@keyframes waTypingFadeOut {
  to { opacity: 0; transform: translateY(-4px); }
}

.wa-typing--inline .wa-typing-dot {
  width: 6px;
  height: 6px;
  background: #999;
  border-radius: 50%;
  animation: waTypingBounce 1.2s infinite;
}

.wa-typing--inline .wa-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.wa-typing--inline .wa-typing-dot:nth-child(3) { animation-delay: 0.4s; }


/* Mobile: make wa-cards taller — the 6:5 desktop ratio crops the
   conversation too much on narrow viewports. Use 4:5 (portrait) so the
   chat thread has visible breathing room above and below. */
@media (max-width: 768px) {
  .wa-card {
    aspect-ratio: 4 / 5;
  }
  .wa-card.wa-card--long {
    aspect-ratio: 3 / 4; /* even more vertical room for the longer thread */
  }
}


/* Per-industry warm gradient backgrounds */
.showcase-image--car         { background: linear-gradient(135deg, #3D3027 0%, #6B4F3A 100%); }
.showcase-image--clinic      { background: linear-gradient(135deg, #6B8E7A 0%, #4A6B5B 100%); }
.showcase-image--healthcare  { background: linear-gradient(135deg, #8B6B3E 0%, #5A4524 100%); }
.showcase-image--hospitality { background: linear-gradient(135deg, #D4A664 0%, #A37840 100%); }
.showcase-image--insurance   { background: linear-gradient(135deg, #4A4D6E 0%, #2F3250 100%); }
.showcase-image--immigration { background: linear-gradient(135deg, #C97A5A 0%, #8E4A30 100%); }


/* ============================================================
   DUAL PANEL CARD
   ============================================================ */

.dual-panel-card {
  width: 100%;
  max-width: 540px;
  height: 380px;
  background: var(--bg-card, #EEECE3);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
}

.dpc-left,
.dpc-right {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  min-height: 0;
}

.dpc-divider {
  background: var(--border);
  align-self: stretch;
}

.dpc-panel-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted, #777);
  margin-bottom: 4px;
}

.dpc-panel-label svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}


/* Chat bubbles */

.dpc-messages {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  scroll-behavior: smooth;
}

/* Hide scrollbar visually, keep it functional */
.dpc-messages::-webkit-scrollbar {
  width: 3px;
}
.dpc-messages::-webkit-scrollbar-track {
  background: transparent;
}
.dpc-messages::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.dpc-bubble {
  display: flex;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dpc-bubble.visible {
  opacity: 1;
  transform: translateY(0);
}

.dpc-bubble--customer {
  justify-content: flex-start;
}

.dpc-bubble--ai {
  justify-content: flex-end;
}

.dpc-bubble-text {
  max-width: 85%;
  padding: 7px 11px;
  border-radius: 12px;
  font-size: 11.5px;
  line-height: 1.5;
}

.dpc-bubble--customer .dpc-bubble-text {
  background: var(--bg-inset, #F5F3E9);
  color: var(--text-primary);
  border-bottom-left-radius: 3px;
}

.dpc-bubble--ai .dpc-bubble-text {
  background: rgba(37, 211, 102, 0.12);
  color: var(--text-primary);
  border-bottom-right-radius: 3px;
}


/* Confirm badge */

.dpc-confirm-badge {
  margin-top: auto;
  padding: 6px 10px;
  background: rgba(37, 211, 102, 0.15);
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--wa-green, #25d366);
  text-align: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dpc-confirm-badge.visible {
  opacity: 1;
  transform: translateY(0);
}


/* Healthcare: calendar slots */

.dpc-slots {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.dpc-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--bg-inset, #F5F3E9);
  border: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-muted, #777);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.dpc-slot-time {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-secondary);
  min-width: 44px;
}

.dpc-slot-name {
  flex: 1;
  font-size: 11px;
}

.dpc-slot-check {
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.dpc-slot--filling {
  border-color: rgba(37, 211, 102, 0.4);
  animation: slot-pulse 0.8s ease infinite alternate;
}

.dpc-slot--filled {
  background: rgba(37, 211, 102, 0.1);
  border-color: rgba(37, 211, 102, 0.5);
  color: var(--text-primary);
}

.dpc-slot--filled .dpc-slot-check {
  opacity: 1;
}

.dpc-empty-label {
  color: var(--text-muted, #777);
  font-style: italic;
  font-size: 10.5px;
}

@keyframes slot-pulse {
  from { border-color: rgba(37, 211, 102, 0.2); }
  to   { border-color: rgba(37, 211, 102, 0.6); }
}


/* Hospitality: room occupancy */

.dpc-rooms {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.dpc-room-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.dpc-room-id {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 28px;
}

.dpc-room-bar {
  flex: 1;
  height: 10px;
  background: var(--bg-inset, #F5F3E9);
  border-radius: 5px;
  overflow: hidden;
}

.dpc-room-fill {
  height: 100%;
  width: 0;
  border-radius: 5px;
  background: var(--wa-green, #25d366);
  transition: width 1s ease;
}

.dpc-room-price {
  font-size: 11px;
  color: var(--wa-green, #25d366);
  font-weight: 600;
  min-width: 36px;
  text-align: right;
  transition: color 0.3s;
}

.dpc-room-avail {
  color: var(--text-muted, #777);
  font-weight: 400;
}

.dpc-revenue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  background: var(--bg-inset, #F5F3E9);
  border-radius: 8px;
  margin-top: auto;
}

.dpc-revenue-label {
  font-size: 11px;
  color: var(--text-muted, #777);
}

.dpc-revenue-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--wa-green, #25d366);
  font-variant-numeric: tabular-nums;
}


/* Insurance: CRM lead pipeline */

.dpc-leads {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.dpc-lead-card {
  padding: 9px 12px;
  background: var(--bg-inset, #F5F3E9);
  border: 1px solid var(--border);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color 0.3s, background 0.3s;
}

/* Only the "new" incoming lead starts hidden */
.dpc-lead--new {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, border-color 0.3s, background 0.3s;
}

.dpc-lead--new.visible {
  opacity: 1;
  transform: translateY(0);
}

.dpc-lead--hot {
  border-color: rgba(255, 160, 50, 0.5);
  background: rgba(255, 160, 50, 0.06);
}

.dpc-lead-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.dpc-lead-meta {
  font-size: 10.5px;
  color: var(--text-muted, #777);
}

.dpc-lead-new-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(37, 211, 102, 0.15);
  color: var(--wa-green, #25d366);
  width: fit-content;
}

.dpc-status {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
}

.dpc-status--new,
.dpc-status--qualifying {
  background: rgba(120, 120, 120, 0.15);
  color: var(--text-muted, #777);
}

.dpc-status--qualified,
.dpc-status--proposal {
  background: rgba(37, 211, 102, 0.15);
  color: var(--wa-green, #25d366);
}

.dpc-status--hot {
  background: rgba(255, 160, 50, 0.15);
  color: #ffa032;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1060px) {
  .split-hero-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .split-hero-phone {
    justify-content: flex-start;
  }

  .showcase-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .showcase-inner--alt {
    direction: ltr;
  }

  /* Mobile: text on top, animation card on bottom — regardless of which
     side the desktop layout puts them on. The DOM order is demo-first;
     `order` flips it so .showcase-text renders first on mobile. */
  .showcase-inner > .showcase-text { order: 1; }
  .showcase-inner > .showcase-demo { order: 2; }

  .dual-panel-card {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .dual-panel-card {
    height: 340px;
  }
}

/* WhatsApp service page — tight 16px gutter on mobile so the chat card
   and copy hug the viewport edges with just a hair of breathing room,
   not floating in the middle with the wide default container padding. */
@media (max-width: 768px) {
  .whatsapp-page .industry-showcase-block > .container {
    padding-left: 16px;
    padding-right: 16px;
  }
  .whatsapp-page .showcase-inner {
    padding-left: 0;
    padding-right: 0;
  }
  .whatsapp-page .wa-card {
    max-width: 100%;
  }
  .whatsapp-page .showcase-text {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 560px) {
  .offerings-split-hero {
    padding: 48px 0 40px;
  }

  .split-hero-inner {
    padding: 0 20px;
  }

  .industry-showcase-block {
    padding: 48px 0;
  }

  .showcase-inner {
    padding: 0 20px;
  }

  .dual-panel-card {
    height: 420px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1px 1fr;
  }

  .dpc-divider {
    height: 1px;
    width: auto;
    align-self: auto;
  }
}



/* ---- RAG variant of the industry chip — brand-warm instead of green ---- */
.industry-chip--rag {
  background: rgba(196, 158, 95, 0.12);
  border-color: rgba(196, 158, 95, 0.28);
  color: #8d6b3a;
}

.industry-chip--rag .industry-chip-dot {
  background: #c49e5f;
  box-shadow: 0 0 0 3px rgba(196, 158, 95, 0.18);
}

/* ---- Offering-page section backgrounds ----
   Light → warmer → light alternation so each section reads as its own
   chunk instead of melting into the next. Shared across the RAG and
   Chatbots offering pages, both of which use the same essay → use-cases
   → process pattern. */
#what-is-rag,
#three-jobs {
  background: var(--bg-page, #FBF9EF);
}

#where-rag-fits,
#where-cb-fits {
  background: #F0E6D0;
}

/* The shared .process-section default is #F0E6D0; on the RAG page we
   want this stage to read as the "lighter" section to break up the
   rhythm with the warmer "Where RAG fits" block above it. */
#how-we-build {
  background: var(--bg-page, #FBF9EF);
}

/* Override the offerings-page-specific .process-steps (3-column with
   custom ::before connectors) so the rag page reuses the homepage's
   4-step horizontal timeline layout from process.css. */
#how-we-build .process-steps {
  grid-template-columns: repeat(3, 1fr);
  gap: 96px 32px; /* row-gap col-gap — 96px between row 1 and row 2 */
  max-width: none;
  /* Extra breathing room between the heading/subheading and the timeline
     row — default is 64px, bumped to 96px for offering pages. */
  margin-top: 96px;
}

#how-we-build .process-step {
  padding-top: 0;
}

#how-we-build .process-step::before {
  display: none;
}

/* 2-row 3-col layout — the single horizontal connector line only spans
   the first row, so hide it. The numbered circles + names carry the
   sequence on their own. */
#how-we-build .process-line {
  display: none;
}

@media (max-width: 900px) {
  #how-we-build .process-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
  }
}

@media (max-width: 600px) {
  #how-we-build .process-steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ============================================================
   RAG ESSAY — long-form "What is RAG" pipeline explainer.
   Wide container with reading-column header/intro/closing, and a
   3+2 grid of stage cards in between so the five stages are
   scannable instead of stacked into one long column.
   ============================================================ */

.rag-essay-block {
  padding: 120px 0;
}

.rag-essay {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Header + body share a comfortable reading column, all content centered */
.rag-essay-header,
.rag-essay-body {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.rag-essay-header {
  margin-bottom: 36px;
}

.rag-essay-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: rgba(196, 158, 95, 0.12);
  border: 1px solid rgba(196, 158, 95, 0.28);
  border-radius: 100px;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8d6b3a;
  margin-bottom: 22px;
}

.rag-essay-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--text-primary, #141008);
  margin: 0;
}

/* Body — mirrors the homepage gap-section: narrow centered column,
   text-align: center, with a thin vertical rule between the heading
   and the first paragraph. */
.rag-essay-body {
  max-width: 820px;
  margin: 0 auto;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.85;
  color: var(--text-secondary, #555);
  letter-spacing: -0.1px;
  text-align: center;
  /* Vertical rule above the body, matching .gap-rule from gap-section */
  position: relative;
  padding-top: 100px;
}
.rag-essay-body::before {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  width: 1px;
  height: 56px;
  background: var(--border, rgba(20, 16, 8, 0.16));
  transform: translateX(-50%);
}

.rag-essay-body p {
  margin: 0 0 22px;
}

.rag-essay-body p:last-child {
  margin-bottom: 0;
}

.rag-essay-lead {
  text-align: center;
  font-size: 19px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: rgba(20, 16, 8, 0.82);
}

/* "The result" label with a warm gold underline */
.rag-essay-result {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 48px 0 24px;
  position: relative;
}
.rag-essay-result::before,
.rag-essay-result::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196, 158, 95, 0.5), transparent);
}
.rag-essay-result-label {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8d6b3a;
  padding: 0 18px;
}

/* Failure-mode chips: pill rows with an X icon, breathable spacing */
.rag-essay-failures {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.rag-essay-failures li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(20, 16, 8, 0.08);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(20, 16, 8, 0.85);
  letter-spacing: -0.1px;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.03);
}
.rag-failure-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(196, 80, 80, 0.10);
  color: #b34a4a;
}

/* Takeaway line — centered, emphasized, serif italic for editorial feel */
.rag-essay-takeaway {
  text-align: center;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.4;
  color: rgba(20, 16, 8, 0.92);
  max-width: 720px;
  margin: 0 auto !important;
  letter-spacing: 0;
  padding-top: 8px;
}

/* Requirements grid — same chip pattern as the failures grid but with
   a green check icon for positive framing. 3 columns at wide widths
   so 7 items wrap into a balanced 3/3/1 layout. */
.rag-essay-requirements {
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.rag-essay-requirements li {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid rgba(20, 16, 8, 0.08);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(20, 16, 8, 0.85);
  letter-spacing: -0.1px;
  box-shadow: 0 1px 2px rgba(20, 16, 8, 0.03);
}
.rag-req-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(80, 150, 80, 0.12);
  color: #2d8a2d;
}

/* Smaller variant of the takeaway for the mid-paragraph "Both fail
   the same way." line — same serif italic vibe but tighter. */
.rag-essay-takeaway--small {
  font-size: clamp(18px, 1.6vw, 22px) !important;
  margin: 8px auto 28px !important;
  color: rgba(20, 16, 8, 0.82) !important;
}

@media (max-width: 900px) {
  .rag-essay-requirements { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .rag-essay-failures { grid-template-columns: 1fr; }
  .rag-essay-requirements { grid-template-columns: 1fr; }
}

.rag-essay-body strong {
  color: var(--text-primary, #141008);
  font-weight: 600;
}

.rag-essay-body em {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  color: rgba(20, 16, 8, 0.95);
  font-weight: 400;
  font-size: 1.08em;
  letter-spacing: 0;
}

/* Inline stage-name tags — give the eye anchor points within the prose
   without breaking the reading flow. Highlighter-style brand-warm wash
   under bold caramel text. */
.rag-stage-tag {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-weight: 700;
  color: #8d6b3a;
  letter-spacing: -0.1px;
  background: linear-gradient(180deg, transparent 62%, rgba(196, 158, 95, 0.28) 62%);
  padding: 0 2px;
  border-radius: 2px;
}

/* Mobile */
@media (max-width: 720px) {
  .rag-essay-block { padding: 80px 0; }
  .rag-essay { padding: 0 24px; }
  .rag-essay-title { font-size: clamp(28px, 7vw, 38px); letter-spacing: -0.7px; }
  .rag-essay-body { font-size: 16.5px; line-height: 1.68; margin-top: 22px; }
  .rag-essay-body p { margin-bottom: 18px; }
}

/* ============================================================
   RAG USE-CASES GRID — "Where RAG earns its place".
   3-column card grid (3x2) of industry/use-case cards. Replaces
   the old per-industry showcase animations with a single
   scannable summary block.
   ============================================================ */

.rag-uses-block {
  padding: 100px 0 120px;
}

.rag-uses-header {
  max-width: 720px;
  margin: 0 auto 88px;
  padding: 0 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* The shared .industry-chip rule has `align-self: flex-start`, which
   overrides our flex-column centering. Force the chip to center inside
   the rag uses header. */
.rag-uses-header .industry-chip {
  align-self: center;
}

.rag-uses-title {
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  font-size: clamp(32px, 4.2vw, 48px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.9px;
  color: var(--text-primary, #141008);
  margin: 0;
}

.rag-uses-sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(20, 16, 8, 0.72);
  margin: 0;
  letter-spacing: -0.05px;
  max-width: 620px;
}

.rag-uses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  /* On desktop the grid fills its section container so its left/right
     edges align with the hero stats. On mobile/tablet the responsive
     blocks below restore narrower max-widths. */
  max-width: none;
  margin: 0;
  padding: 0;
  counter-reset: rag-card;
}

/* Editorial-style cards — no icons, number indicator top-right, warm
   gradient surface, gold hairline that deepens on hover, a subtle
   line that grows under the title to give the eye a hover target. */
.rag-use-card {
  counter-increment: rag-card;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 40px 30px 34px;
  background:
    linear-gradient(160deg, #ffffff 0%, #fbf8ee 100%);
  border: 1px solid rgba(196, 158, 95, 0.18);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(60, 40, 20, 0.04);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease;
}

/* Numeric indicator — sits in the top-right corner of each card as a
   pale serif italic accent that pulls the eye without crowding. Uses
   decimal-leading-zero so we get 01/02/.../06. */
.rag-use-card::before {
  content: counter(rag-card, decimal-leading-zero);
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 26px;
  line-height: 1;
  color: rgba(181, 138, 72, 0.55);
  letter-spacing: 0;
  transition: color 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

/* Title — slightly heavier and tighter than before to anchor each card
   visually now that there's no icon. */
.rag-use-name {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.35px;
  color: var(--text-primary, #141008);
  margin: 0;
  /* Leave room on the right so the number indicator never collides */
  padding-right: 44px;
  position: relative;
  display: inline-block;
}

/* A short gold underline grows from 0 -> 32px on hover. Sits just
   under the title and reads as a hover target without any chrome. */
.rag-use-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 0;
  height: 2px;
  background: #c49e5f;
  border-radius: 1px;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.rag-use-body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(20, 16, 8, 0.72);
  letter-spacing: -0.05px;
  margin: 14px 0 0;
}

.rag-use-card:hover {
  transform: translateY(-4px);
  border-color: rgba(196, 158, 95, 0.45);
  background:
    linear-gradient(160deg, #ffffff 0%, #f7efde 100%);
  box-shadow: 0 18px 38px rgba(60, 40, 20, 0.10),
              0 4px 12px rgba(60, 40, 20, 0.05);
}

.rag-use-card:hover::before {
  color: rgba(181, 138, 72, 0.9);
  transform: translateY(-2px);
}

.rag-use-card:hover .rag-use-name::after {
  width: 32px;
}

/* Tablet — 2 columns */
@media (max-width: 960px) {
  .rag-uses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 760px;
  }
}

/* Mobile — single column, tight 16px page gutter as requested */
@media (max-width: 720px) {
  .rag-uses-block { padding: 72px 0 80px; }
  .rag-uses-block > .container { padding-left: 16px; padding-right: 16px; }
  .rag-uses-header { margin-bottom: 40px; padding: 0; }
  .rag-uses-title { font-size: clamp(26px, 6.5vw, 36px); }
  .rag-uses-sub { font-size: 15.5px; }
  .rag-uses-grid {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
  }
  .rag-use-card { padding: 32px 22px 26px; gap: 12px; }
  .rag-use-card::before { top: 14px; right: 18px; font-size: 22px; }
  .rag-use-name { font-size: 17px; padding-right: 40px; }
  .rag-use-body { font-size: 14px; margin-top: 12px; }
}



/* ============================================================
   CHATBOT SEARCH-BOX HERO ANIMATION
   A simple rounded search input cycling through user questions
   via a typewriter effect. Each question types in, holds, then
   clears and the next one types in. 4 questions × 4s each = 16s loop.
   ============================================================ */

/* Visual card — same 1:1 frame as the RAG / WhatsApp hero image:
   560px max, square, rounded 20px, soft shadow. Subtle warm-cream
   gradient background so the white search bubble inside reads as
   a floating element. */
.cb-search-stage {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 1 / 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  background: linear-gradient(160deg, #fbf8ee 0%, #f5edd9 100%);
  border-radius: 20px;
  box-shadow: 0 12px 32px rgba(20, 16, 8, 0.08);
}

.cb-search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 22px 18px 24px;
  background: #ffffff;
  border: 1px solid rgba(20, 16, 8, 0.08);
  border-radius: 999px;
  box-shadow: 0 18px 44px rgba(20, 16, 8, 0.08),
              0 4px 14px rgba(20, 16, 8, 0.04);
}

.cb-search-icon {
  width: 20px;
  height: 20px;
  color: rgba(20, 16, 8, 0.45);
  flex-shrink: 0;
}

.cb-search-text {
  flex: 1;
  position: relative;
  height: 24px;
  overflow: hidden;
}

/* Each question is absolutely stacked at the same position.
   Typewriter effect via animating width: 0 → Nch on `overflow: hidden`,
   so each character reveals from left as the span widens.
   `text-align: left` is set explicitly because parent sections inherit
   `text-align: center` from the hero, which would otherwise cause the
   text to reveal from the center outward instead of left-to-right. */
.cb-search-q {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.1px;
  text-align: left;
  color: var(--text-primary, #141008);
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  visibility: hidden;
}

/* 7 questions × 4s each = 28s total loop. Per question slot:
     ~1.7s typewriter (slower)
     ~0.85s hold
     ~0.3s clear
     ~1.12s idle pause before the next question begins
   Width animates in `ch` units sized to the question's char count. */
.cb-search-q-1 { animation: cbSearchQ1 28s linear infinite; }
.cb-search-q-2 { animation: cbSearchQ2 28s linear infinite; }
.cb-search-q-3 { animation: cbSearchQ3 28s linear infinite; }
.cb-search-q-4 { animation: cbSearchQ4 28s linear infinite; }
.cb-search-q-5 { animation: cbSearchQ5 28s linear infinite; }
.cb-search-q-6 { animation: cbSearchQ6 28s linear infinite; }
.cb-search-q-7 { animation: cbSearchQ7 28s linear infinite; }

/* Q1: "Where's my order right now?" — 27 chars */
@keyframes cbSearchQ1 {
  0%             { width: 0;    visibility: visible; }
  6%             { width: 27ch; visibility: visible; }
  9%             { width: 27ch; visibility: visible; }
  10%            { width: 0;    visibility: visible; }
  11%, 100%      { width: 0;    visibility: hidden;  }
}

/* Q2: "Block my card right now." — 24 chars */
@keyframes cbSearchQ2 {
  0%, 13%        { width: 0;    visibility: hidden;  }
  14%            { width: 0;    visibility: visible; }
  20%            { width: 24ch; visibility: visible; }
  23%            { width: 24ch; visibility: visible; }
  24%            { width: 0;    visibility: visible; }
  25%, 100%      { width: 0;    visibility: hidden;  }
}

/* Q3: "How do I file a claim?" — 22 chars */
@keyframes cbSearchQ3 {
  0%, 27%        { width: 0;    visibility: hidden;  }
  28%            { width: 0;    visibility: visible; }
  34%            { width: 22ch; visibility: visible; }
  37%            { width: 22ch; visibility: visible; }
  38%            { width: 0;    visibility: visible; }
  39%, 100%      { width: 0;    visibility: hidden;  }
}

/* Q4: "Book me a Dentist appointment this week." — 40 chars */
@keyframes cbSearchQ4 {
  0%, 41%        { width: 0;    visibility: hidden;  }
  42%            { width: 0;    visibility: visible; }
  48%            { width: 40ch; visibility: visible; }
  51%            { width: 40ch; visibility: visible; }
  52%            { width: 0;    visibility: visible; }
  53%, 100%      { width: 0;    visibility: hidden;  }
}

/* Q5: "Is 14B King St still available?" — 31 chars */
@keyframes cbSearchQ5 {
  0%, 55%        { width: 0;    visibility: hidden;  }
  56%            { width: 0;    visibility: visible; }
  62%            { width: 31ch; visibility: visible; }
  65%            { width: 31ch; visibility: visible; }
  66%            { width: 0;    visibility: visible; }
  67%, 100%      { width: 0;    visibility: hidden;  }
}

/* Q6: "Why am I being charged twice?" — 29 chars */
@keyframes cbSearchQ6 {
  0%, 69%        { width: 0;    visibility: hidden;  }
  70%            { width: 0;    visibility: visible; }
  76%            { width: 29ch; visibility: visible; }
  79%            { width: 29ch; visibility: visible; }
  80%            { width: 0;    visibility: visible; }
  81%, 100%      { width: 0;    visibility: hidden;  }
}

/* Q7: "Cancel my booking and refund." — 29 chars */
@keyframes cbSearchQ7 {
  0%, 83%        { width: 0;    visibility: hidden;  }
  84%            { width: 0;    visibility: visible; }
  90%            { width: 29ch; visibility: visible; }
  93%            { width: 29ch; visibility: visible; }
  94%            { width: 0;    visibility: visible; }
  95%, 100%      { width: 0;    visibility: hidden;  }
}


/* Send button on the right */
.cb-search-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c49e5f 0%, #b58a48 100%);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(196, 158, 95, 0.35);
}

.cb-search-send svg {
  width: 14px;
  height: 14px;
  transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Subtle lift on hover */
.cb-search-send:hover svg {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .cb-search-q {
    animation: none;
    visibility: visible;
    width: auto;
  }
  /* Show only the first question statically */
  .cb-search-q-2,
  .cb-search-q-3,
  .cb-search-q-4,
  .cb-search-q-5,
  .cb-search-q-6,
  .cb-search-q-7 { display: none; }
}

@media (max-width: 768px) {
  .cb-search-stage { padding: 24px 0; max-width: 100%; }
  .cb-search-icon { width: 18px; height: 18px; }
  .cb-search-q { font-size: 14.5px; }
  .cb-search-text { height: 22px; }
  .cb-search-send { width: 32px; height: 32px; }
  .cb-search-send svg { width: 12px; height: 12px; }
}

/* Mobile — 2-row layout. Text area takes its own row so long questions
   like "Book me a Dentist appointment this week." don't get clipped.
   Icons stack on row 2: search-icon left, send button right-aligned. */
@media (max-width: 600px) {
  .cb-search-box {
    flex-wrap: wrap;
    border-radius: 22px;
    padding: 14px 18px;
    gap: 8px 14px;
    align-items: center;
  }

  /* Text takes the full first row */
  .cb-search-text {
    order: -1;
    flex: 1 1 100%;
    height: 24px;
  }

  /* Push the send button to the right edge of row 2 */
  .cb-search-send {
    margin-left: auto;
  }

  .cb-search-q { font-size: 14px; }
}