/* ===== Engine pages (Text-to-Text / Speech-to-Speech) ===== */
/* Shares style.css's black/amber design language — these rules only add
   the page-specific components that don't already exist site-wide. */

/* ----- CTA band -> Footer seam -----
   Used to add padding-bottom here to avoid a hard cut against the
   footer card -- that padding rendered as a solid black band (this
   section's own background is var(--black)), which was actually worse
   than the hard cut it was meant to soften, and became fully redundant
   once .cta-video-wrap::after (style-aqua.css) started fading the
   video's own bottom edge into var(--dark-bg) directly. Removed. */

/* ----- Speech-to-Speech hero bottom fade (engine-speech-to-speech-aqua.html
   only) -- same eased-gradient technique as landing-hero-bot.html's
   .hero-bot-bottom-fade (multiple close-packed stops so it ramps in
   gently and is already near-opaque well before 100%, rather than a
   flat 2-stop transparent->color that visibly "becomes solid"
   partway down). Target color is var(--light-bg) (#F5F6FA), matching
   this page's actual next section (.statement-mesh-sticky's base
   background) -- NOT copying landing-hero-bot's own #EEEEF2, which is
   flagged in that file's own comment as a color that doesn't actually
   match ITS next section either. Same z-index tier as .hero-scrim
   (above the hero image, below .hero-content's nav/text at z-index:2). */
.sts-hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(245, 246, 250, 0.18) 35%,
    rgba(245, 246, 250, 0.5) 60%,
    rgba(245, 246, 250, 0.82) 82%,
    #F5F6FA 100%
  );
}

/* Text-to-Text hero bottom fade -- same technique/target color as
   .sts-hero-bottom-fade above (confirmed identical next-section
   background, .statement-mesh-sticky -> var(--light-bg) -> #F5F6FA).
   Separate class since it's a different hero (photo image, not
   #hero-video), but otherwise identical. */
.ttt-hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(245, 246, 250, 0.18) 35%,
    rgba(245, 246, 250, 0.5) 60%,
    rgba(245, 246, 250, 0.82) 82%,
    #F5F6FA 100%
  );
}

/* .cta-video-wrap::after (the CTA video -> footer/faq blend) now lives
   in the shared css/style-aqua.css instead of just here, so every page
   sharing this same CTA band gets it, not just these two engine
   pages. Left this comment as a pointer since the rule used to live at
   this exact spot. */

/* ----- Compact hero (content-sized now that the widget lives inside it) ----- */

.hero-compact {
  height: auto;
  min-height: 100vh;
  overflow: visible;
  padding-bottom: var(--space-6);
}

/* .hero-content is normally position:absolute+height:100%, sized to a
   fixed 100vh video hero — since it never contributes height to its
   parent, .hero-compact's "auto" height was collapsing to exactly
   min-height (100vh) no matter how tall the content got, clipping the
   demo widget once it made the hero taller than one viewport. Switching
   it to a normal-flow relative box here lets it actually push .hero
   taller when the widget needs more room. */
.hero-compact .hero-content {
  position: relative;
  height: auto;
  min-height: 100vh;
}

/* Safety net for this hero's own image background (sibling combinator,
   so this never reaches speech-to-speech's hero, which has no
   .engine-hero-image sibling to match): text-shadow inherits down to
   every white-text descendant automatically, covering the stats row,
   corner badges/tags/cards and trust line without editing each one --
   those sit lowest in this very tall hero, over whatever part of the
   photo happens to be lightest there. */
.engine-hero-image ~ .hero-content {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* The CTA button, the demo panel (.engine-card-outer), and the chat
   bubbles all sit on their own opaque light fills with dark text (not
   white text directly on the image), so they never needed the
   inherited shadow above -- it showed as a harsh dark smudge instead
   of the intended subtle lift. Scoped narrowly to those, NOT the whole
   .engine-widget-wrap: the surrounding floating badges/stats/hub-cards
   inside it are white text on translucent glass and still want the
   shadow for contrast against the photo. */
.engine-hero-image ~ .hero-content .btn-cta,
.engine-hero-image ~ .hero-content .engine-card-outer,
.engine-hero-image ~ .hero-content .engine-float-bubble {
  text-shadow: none;
}

/* ----- Hero image (engine-text-to-text-aqua.html only -- speech-to-
   speech has its own separate #hero-video image). Replaces the former
   static diagonal-wash mesh gradient. Plain cover-fit background
   image, same positioning recipe as #hero-video elsewhere on the
   site. ----- */

.engine-hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* ----- Floating chat-bubble widgets flanking the main demo widget -----
   Anchored directly to .engines-widget's own edges (not percentages of
   the hero), so they stay correctly placed beside it regardless of how
   tall .hero-compact grows. Hidden below 1400px: below that width
   .engines-widget's min(960px, 92vw) cap leaves too little side margin
   for a 180px card plus a real gap without overlapping the widget --
   see the media query at the bottom of this block for the math. */
.engine-float-card {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 190px;
  opacity: 0;
}

.engine-float-card-left {
  left: 0;
  transform: translate(calc(-100% - 28px), -50%);
  animation: heroFloatInLeft 0.7s ease-out forwards, engineFloatBobLeft 3s ease-in-out infinite;
  animation-delay: 1.2s, 1.9s;
}

.engine-float-card-right {
  right: 0;
  justify-content: flex-end;
  transform: translate(calc(100% + 28px), -50%);
  animation: heroFloatInRight 0.7s ease-out forwards, engineFloatBobRight 3.2s ease-in-out infinite;
  animation-delay: 1.6s, 2.4s;
}

.engine-float-avatar-ring {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  padding: 2px;
}

.engine-float-avatar-ring-user {
  background: var(--accent-steel);
}

.engine-float-avatar-ring-bot {
  background: var(--accent-amber);
  color: var(--dark-bg);
}

.engine-float-avatar {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.engine-float-bubble {
  padding: 10px 14px;
  border-radius: var(--radius-card);
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-primary);
}

.engine-float-bubble-ai {
  background: var(--accent-amber);
  color: var(--dark-bg);
}

/* ----- Typing indicator -> reply crossfade (right card only) -----
   Both stacked absolutely in the same box so one loop can hand off to
   the other without a layout jump, looping alongside the card's own
   idle bob rather than a one-shot reveal. */
.engine-float-bubble-stack {
  position: relative;
  flex: 1;
  min-height: 34px;
}

.engine-float-typing,
.engine-float-bubble-ai {
  position: absolute;
  top: 0;
  right: 0;
}

.engine-float-typing {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: var(--accent-amber);
  animation: engineTypingCycle 6s ease-in-out infinite;
}

.engine-float-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dark-bg);
  opacity: 0.35;
  animation: engineTypingDot 1.2s ease-in-out infinite;
}

.engine-float-typing-dot:nth-child(2) { animation-delay: 0.13s; }
.engine-float-typing-dot:nth-child(3) { animation-delay: 0.26s; }

.engine-float-bubble-ai {
  animation: engineReplyCycle 6s ease-in-out infinite;
}

@keyframes engineTypingCycle {
  0%, 20% { opacity: 1; }
  28%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes engineReplyCycle {
  0%, 20% { opacity: 0; }
  28%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes engineTypingDot {
  0%, 60%, 100% { opacity: 0.35; transform: scale(1); }
  30% { opacity: 1; transform: scale(1.3); }
}

/* ----- Trust-signal line, sits below the widget in normal flow so it
   never competes for space with the floating cards beside it. ----- */
.engine-trust-line {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: var(--space-3);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-on-dark);
  opacity: 0.55;
}

.engine-trust-line svg {
  flex-shrink: 0;
}

@keyframes engineFloatBobLeft {
  0%, 100% { transform: translate(calc(-100% - 28px), -50%); }
  50% { transform: translate(calc(-100% - 28px), calc(-50% - 5px)); }
}

@keyframes engineFloatBobRight {
  0%, 100% { transform: translate(calc(100% + 28px), -50%); }
  50% { transform: translate(calc(100% + 28px), calc(-50% - 5px)); }
}

@media (prefers-reduced-motion: reduce) {
  .engine-float-card-left,
  .engine-float-card-right {
    animation: none;
    opacity: 1;
  }
  .engine-float-card-left { transform: translate(calc(-100% - 28px), -50%); }
  .engine-float-card-right { transform: translate(calc(100% + 28px), -50%); }

  .engine-float-typing,
  .engine-float-typing-dot,
  .engine-float-bubble-ai {
    animation: none;
  }
  .engine-float-typing { opacity: 0; }
  .engine-float-bubble-ai { opacity: 1; }
}

/* Below 1400px, .engines-widget's side margin ((100vw - 960px) / 2)
   drops under this card's own width (190px) plus its 28px gap, which
   would force it to overlap the widget instead of sitting cleanly
   beside it -- hide rather than let that happen. */
@media (max-width: 1399px) {
  .engine-float-card {
    display: none;
  }
}

/* ----- Hero visual placeholder (video removed for now) ----- */

.hero-image-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, #17130e 0%, #0a0806 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image-placeholder i {
  width: 64px;
  height: 64px;
  color: rgba(255, 255, 255, 0.08);
}

/* ----- Hero badge (load-triggered, staggers before .hero-headline) ----- */

.engine-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: var(--space-3);
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
}

.engine-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
}

/* ----- Hero stats row (below the demo widget) -- same easeOutCubic
   count-up technique as js/pricing-counter.js (IntersectionObserver-
   gated, staggered), see js/engine-hero-stats.js. Two stats only,
   lighter than the homepage stats footer. ----- */
.engine-hero-stats {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.engine-hero-stat {
  display: flex;
  align-items: center;
  gap: 10px;
}

.engine-hero-stat-icon {
  flex-shrink: 0;
  color: var(--accent-amber);
}

.engine-hero-stat-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

.engine-hero-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1.2;
}

.engine-hero-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-on-dark);
  opacity: 0.6;
}

/* ----- Workflow badges scattered in the hero's remaining empty side
   margins -- icon "lights up" via the same expanding-ring-pulse
   technique as .doc-center-icon/docRingPulse (style-aqua.css), just
   scaled down for a small pill instead of the docs illustration's
   large center icon. Anchored to .hero-content (percentage `top`),
   same approximation homepage's own .hero-float-card uses on a
   fixed-height hero -- acceptable here too since .hero-compact's
   rendered height is stable across the >=1400px range these are shown
   in (.engines-widget stops growing once it hits its 960px cap). */
.engine-workflow-badge {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-dark);
  opacity: 0;
  /* Opacity-only, deliberately not heroTextEntrance: that keyframe
     also animates `transform` (a translateY slide), and a CSS
     animation's own transform value always wins over a separately
     declared static `transform` for as long as it's running/filling
     -- it would silently discard this element's positioning
     transform (see .engine-workflow-badge-tl/-br) the moment the
     entrance plays. */
  animation: engineHubFadeIn 0.6s ease-out forwards;
}

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

/* HOW FAR A BADGE MAY HANG OUTSIDE THE WIDGET. The clearance arithmetic below was done for
   the 145px .engine-hub-card, but the Speech-to-Speech corners are icon+label pills 201px
   wide: 201 + 45 = 246px of reach against a 240px margin at 1440px, so the right-hand badge
   ran 6px off the screen (26px at 1400) and the page scrolled sideways, while the left one
   was cut off. Each badge now shifts by its designed amount OR by the space actually left
   between the widget and the viewport minus 24px, whichever is smaller; with room to spare
   nothing changes. 100vw includes a classic scrollbar, which the 24px absorbs. */
.engine-workflow-badge {
  --engine-badge-reach-right: calc((100vw - min(960px, 92vw)) / 2 - 24px);
  --engine-badge-reach-left: calc((100vw - min(960px, 92vw)) / -2 + 24px);
}

/* Spoke geometry (shared by connectors, tags, end cards): each spoke
   is anchored to .engines-widget's own top/left/right/bottom edges at
   8% down from the top or up from the bottom -- clear of the two
   chat cards, which sit at the widget's vertical center (50%). The
   145px end-card + 45px visible connector gap = 190px total reach
   outward from the widget edge, checked against .engines-widget's
   960px cap at both 1440px (960px-cap side margin 240px, 50px
   clearance) and the 1400px show/hide threshold itself (220px margin,
   30px clearance) -- both stay positive. */
.engine-workflow-badge-tl {
  left: 0;
  top: 40px;
  transform: translate(max(calc(-100% - 45px), var(--engine-badge-reach-left)), -50%);
  animation-delay: 1.8s;
}

.engine-workflow-badge-br {
  right: 0;
  bottom: 40px;
  /* +50%, not -50%: an element anchored via `bottom` (not `top`) has
     its bottom edge sitting on the anchor line, extending upward from
     there -- centering it on that line means shifting DOWN by half
     its own height. */
  transform: translate(min(calc(100% + 45px), var(--engine-badge-reach-right)), 50%);
  animation-delay: 2.1s;
}

/* -tr/-bl: added for engine-speech-to-speech-aqua.html, which has no
   pre-existing badges to reposition (unlike Text-to-Text's Ticket
   Created/CRM Synced) -- all four of its corners use this same simple
   icon+label pill instead of splitting two into .engine-hub-card's
   testimonial/stat layout, since it has no testimonial or reused stat
   to show there. Mirrors -tl/-br exactly, opposite side. */
.engine-workflow-badge-tr {
  right: 0;
  top: 40px;
  transform: translate(min(calc(100% + 45px), var(--engine-badge-reach-right)), -50%);
  animation-delay: 1.8s;
}

.engine-workflow-badge-bl {
  left: 0;
  bottom: 40px;
  transform: translate(max(calc(-100% - 45px), var(--engine-badge-reach-left)), 50%);
  animation-delay: 2.1s;
}

.engine-workflow-badge-icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-amber);
  color: var(--dark-bg);
}

.engine-workflow-badge-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-amber);
  opacity: 0;
  animation: docRingPulse 2.2s ease-out infinite;
}

.engine-workflow-badge-br .engine-workflow-badge-icon::before,
.engine-workflow-badge-bl .engine-workflow-badge-icon::before {
  animation-delay: 1.1s;
}

/* ----- Hub-and-spoke: concentric rings + curved connectors reading
   the widget as the hub, the four end cards (two existing badges, one
   testimonial, one stat) as its spokes. ----- */

/* .engine-card-outer has no `position` of its own (see style-aqua.css),
   so despite this ring sitting at z-index:0, it would still paint on
   top of the card -- a positioned element always paints above static
   in-flow content regardless of z-index. Promoting the card here
   (scoped to this widget only, not the shared global rule) fixes it. */
.engines-widget .engine-card-outer {
  position: relative;
  z-index: 1;
}

.engine-hub-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Capped at 780px, not larger: at 900px the outer ring's radius came
     within ~13px of .engine-float-card-left's edge at 1440px viewport
     width (worked out from .engines-widget's 960px cap + the float
     card's own 190px width + 28px gap) -- too tight a margin to trust
     without live rendering. 780px keeps a real ~80px clearance at
     1440px and grows safer from there as viewport widens. */
  width: min(780px, 125%);
  height: auto;
  aspect-ratio: 1 / 1;
  z-index: 0;
  pointer-events: none;
}

/* Speech-to-Speech page only (marked directly with .engine-hub-rings-sts,
   since the EN and NL versions of this page don't share a common marker
   element) -- the generic 780px cap above was sized for Text-to-Text's
   wider float-card layout and reads as too large/loose behind the
   narrower STS demo card, leaving it looking disconnected from the
   widget it's meant to sit behind. Scaled down so the rings hug the
   card instead. */
.engine-hub-rings-sts {
  width: min(560px, 100%);
}

/* ----- Connector lines: one small SVG per spoke, sized to just the
   65px gap zone between .engines-widget's edge and its end card (45px
   visible + 20px extending back UNDER the card, hidden there since
   z-index:0 is lower than .engines-widget .engine-card-outer's z-index
   1 -- this is what makes the line look like it emerges from
   underneath the widget instead of stopping dead at its edge).
   Positioned directly off .engines-widget's own edges, same anchor
   technique as .engine-float-card-left/right -- NOT sized to
   .hero-content, which is what caused the previous version to bleed
   past the hero's bottom edge into the next section (that version's
   viewBox spanned the full hero height via `inset:0`; this one has an
   explicit small width/height, so it cannot exceed its own box). ----- */
.engine-hub-connector {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.engine-hub-connector path {
  fill: none;
  stroke: #7198AF;
  stroke-opacity: 0.06;
  stroke-width: 1;
}

.engine-hub-connector-tl {
  left: 0;
  top: 40px;
  transform: translate(-100%, -50%);
}

.engine-hub-connector-tr {
  right: 0;
  top: 40px;
  transform: translate(100%, -50%);
}

.engine-hub-connector-bl {
  left: 0;
  bottom: 40px;
  transform: translate(-100%, 50%);
}

.engine-hub-connector-br {
  right: 0;
  bottom: 40px;
  transform: translate(100%, 50%);
}

/* .engine-hub-connector-tl/tr/bl/br sit flush against the widget edge
   (0/-100%), but their own SVG box needs to shift 20px further out so
   the 20px "under the card" portion of the path (drawn at the
   widget-facing end of each path's 65-unit width) actually reaches
   back far enough to tuck under the card instead of stopping short of
   it. */
.engine-hub-connector-tl,
.engine-hub-connector-bl {
  margin-left: 20px;
}

.engine-hub-connector-tr,
.engine-hub-connector-br {
  margin-right: 20px;
}

.engine-hub-tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 0.5px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-on-dark);
  opacity: 0;
  animation: engineHubFadeIn 0.6s ease-out forwards;
  animation-delay: 2s;
}

.engine-hub-tag svg {
  flex-shrink: 0;
  color: var(--accent-amber);
}

/* Stacked directly above/below their paired end card (same X-transform
   as .engine-workflow-badge-tl/-br and .engine-hub-card-tr/-bl, extra Y
   push beyond it) rather than centered in the 45px connector gap --
   the gap is far narrower than a "Multi-Channel"-length pill needs, so
   fitting the tag inline there was overlapping both the widget and the
   card it's meant to sit beside. Stacking uses vertical room instead,
   which isn't constrained the same way. */
.engine-hub-tag-tl {
  left: 0;
  top: 40px;
  transform: translate(calc(-100% - 45px), calc(-50% - 45px));
}

.engine-hub-tag-tr {
  right: 0;
  top: 40px;
  transform: translate(calc(100% + 45px), calc(-50% - 45px));
}

.engine-hub-tag-bl {
  left: 0;
  bottom: 40px;
  transform: translate(calc(-100% - 45px), calc(50% + 45px));
}

.engine-hub-tag-br {
  right: 0;
  bottom: 40px;
  transform: translate(calc(100% + 45px), calc(50% + 45px));
}

/* ----- New end cards: testimonial + stat, same glass-pill visual
   family as .engine-workflow-badge (white-on-dark, blurred), sized to
   the same 145px reach used by the repositioned workflow badges so
   the four corners read as one consistent system. ----- */
.engine-hub-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 145px;
  padding: 8px 10px;
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  animation: engineHubFadeIn 0.6s ease-out forwards;
}

.engine-hub-card-tr {
  right: 0;
  top: 40px;
  transform: translate(calc(100% + 45px), -50%);
  animation-delay: 2.4s;
}

.engine-hub-card-bl {
  left: 0;
  bottom: 40px;
  transform: translate(calc(-100% - 45px), 50%);
  animation-delay: 2.7s;
}

.engine-hub-testimonial-avatar {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--accent-amber);
}

.engine-hub-testimonial-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.engine-hub-testimonial-name {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-on-dark);
}

.engine-hub-testimonial-outcome {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-on-dark);
  opacity: 0.65;
  line-height: 1.3;
}

.engine-hub-stat-sparkline {
  flex-shrink: 0;
  color: var(--accent-amber);
}

.engine-hub-stat-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.engine-hub-stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1.2;
}

.engine-hub-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px;
  font-weight: 500;
  color: var(--text-on-dark);
  opacity: 0.6;
}

/* ----- Mobile/tablet fallback: simple stacked list, no rings or
   connectors (a hub-and-spoke composition doesn't reduce gracefully
   to a small screen -- collapse to plain content instead of trying to
   shrink the geometry). Hidden on desktop where the real spoke layout
   shows. ----- */
.engine-hub-mobile-list {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .engine-workflow-badge,
  .engine-hub-tag,
  .engine-hub-card {
    animation: none;
    opacity: 1;
  }
  .engine-workflow-badge-icon::before {
    animation: none;
  }
}

/* Same 1400px threshold as the chat float-cards -- these badges sit in
   the same side margins, so the same math applies (no room once
   .engines-widget's side margin shrinks below what a badge needs).
   Rings/connectors go with them (a hub with no visible spokes reads as
   a stray decoration), replaced by the plain mobile list. */
@media (max-width: 1399px) {
  .engine-workflow-badge,
  .engine-hub-rings,
  .engine-hub-connector,
  .engine-hub-tag,
  .engine-hub-card {
    display: none;
  }

  .engine-hub-mobile-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-3);
  }

  .engine-hub-mobile-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.2);
    color: var(--text-on-dark);
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
  }

  .engine-hub-mobile-item svg {
    flex-shrink: 0;
    color: var(--accent-amber);
  }

  .engine-hub-mobile-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
  }
}

/* ----- Demo widget — now part of the hero, not its own section ----- */

.engine-widget-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-top: var(--space-5);
  text-align: left;
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
  animation-delay: 0.55s;
}

.engine-widget-wrap .engines-widget {
  width: min(960px, 92vw);
}

.engine-widget-wrap .engine-card {
  min-height: 460px;
  background: rgba(255, 255, 255, 0.92);
}

.engine-widget-wrap .engine-sample-text {
  font-size: 19px;
}

/* ----- How It Works (section 3) ----- */

.how-it-works-section {
  background: var(--light-bg);
  padding: var(--space-6) var(--space-3) var(--space-5);
}

.how-it-works-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.how-it-works-heading {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.how-it-works-heading-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.how-it-works-heading-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}

.how-it-works-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text-secondary);
}

.how-it-works-intro {
  max-width: 620px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.how-it-works-row {
  display: flex;
  align-items: stretch;
  gap: var(--space-2);
  max-width: 1200px;
  margin: 0 auto;
}

.how-it-works-card {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
}

.how-it-works-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin-top: 66px;
  color: var(--border);
}

.how-it-works-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cream-lightest);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.how-it-works-icon svg,
.how-it-works-icon i {
  width: 20px;
  height: 20px;
}

.how-it-works-number {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.how-it-works-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.how-it-works-desc {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* ----- Where It's Used (section 5) ----- */

.where-used-section {
  background: var(--light-bg);
  padding: var(--space-6) var(--space-3) var(--space-6);
}

.where-used-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.where-used-heading {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.where-used-heading-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.where-used-heading-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
}

.where-used-intro {
  max-width: 560px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.where-used-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto;
}

.where-used-card {
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.where-used-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(17, 17, 17, 0.08);
}

.where-used-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cream-lightest);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.where-used-icon svg,
.where-used-icon i {
  width: 20px;
  height: 20px;
}

.where-used-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.where-used-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.where-used-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: gap 0.3s var(--ease), color 0.3s var(--ease);
}

.where-used-link:hover {
  gap: 10px;
  color: #7198AF;
}

/* ----- Integrations strip (section 6) ----- */

.integrations-strip-section {
  background: var(--light-bg);
  padding: var(--space-5) var(--space-3) var(--space-7);
  text-align: center;
}

.integrations-strip-label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.integrations-strip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin: 0 auto;
}

.integrations-strip-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  border: 0.5px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
}

.integrations-strip-pill svg,
.integrations-strip-pill i {
  width: 16px;
  height: 16px;
  color: var(--accent-amber);
  flex-shrink: 0;
}

/* ----- Section 7 pinned scroll: collapsed icon + number row ----- */

.cap-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cap-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--cream-lightest);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.4s var(--ease);
}

.cap-card-icon svg,
.cap-card-icon i {
  width: 16px;
  height: 16px;
}

.cap-card.active .cap-card-icon {
  background: rgba(170, 208, 226, 0.16);
  color: #ffffff;
}

@media (max-width: 900px) {
  .how-it-works-row {
    flex-direction: column;
  }

  .how-it-works-arrow {
    display: none;
  }

  .where-used-grid {
    grid-template-columns: 1fr;
  }

  .engine-widget-wrap .engine-card {
    min-height: 400px;
  }

  /* Two items at var(--space-5) (64px) gap is wider than it looks once
     each item's own icon+text is counted -- let it wrap into two
     centered rows instead of overflowing/cramping on narrow phones. */
  .engine-hero-stats {
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}