/* ===== Automations page (automations-aqua.html) ===== */
/* Shares style-aqua.css's design language — these rules only add the
   page-specific components that don't already exist site-wide. */

/* ----- Compact hero (content-sized now that the flow diagram lives
   inside it) -- this page doesn't load engines-page-aqua.css, so this
   is its own copy of the identical .hero-compact technique already
   proven on the engine pages, not a shared class. See that file's
   comment for the full explanation: .hero-content is normally
   position:absolute+height:100% (sized to a fixed 100vh hero), which
   never contributes height to its parent, so plain "auto" height on
   .hero would collapse to exactly 100vh regardless of content and
   clip anything taller. Switching .hero-content to a normal-flow
   relative box here lets it actually push .hero taller instead. ----- */

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

.hero-compact .hero-content {
  position: relative;
  height: auto;
  min-height: 100vh;
}

/* ----- Hero image, full 100vh, no scrim (per brief, .hero-scrim div
   intentionally omitted in the HTML) -- replaces the page's former
   static diagonal-wash mesh gradient (which itself had replaced an
   even earlier real video, videos/automation.mp4). Plain cover-fit
   background image, same positioning recipe as #hero-video elsewhere
   on the site. This hero has no floating cards of its own to reskin
   (the automation mockup cards live in the separate
   .statement-mesh-sticky section further down the page, out of scope
   here) other than the flow diagram built directly into it. ----- */

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

/* Bottom fade, same technique/target color as the engine pages'
   .sts-hero-bottom-fade / .ttt-hero-bottom-fade -- confirmed this
   page's next section (.statement-mesh-sticky) resolves to the same
   var(--light-bg) / #F5F6FA. .hero-compact sets overflow:visible
   (see above), so nothing clips this even though it's sized to sit
   flush at the hero's own bottom edge. */
.auto-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-shadow safety net, same reasoning as the Text-to-Text hero:
   this hero is a plain fixed 100vh box (not the tall, content-driven
   .hero-compact) with no scrim, so the headline/badge/flow-diagram
   text sit directly on whatever part of the photo is behind them. */
.auto-hero-image ~ .hero-content {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* The CTA button sits on its own opaque light button fill (not
   directly on the image), so it never needed the shadow above --
   inherited, it showed as a harsh dark smudge under dark text on a
   light button instead of the intended subtle lift on white text
   over the image. Same issue and fix for the flow diagram's live card
   and Connect/Sync labels, which are dark text on a light
   glassmorphism background (see .auto-live-card/.auto-flow-label). */
.auto-hero-image ~ .hero-content .btn-cta,
.auto-hero-image ~ .hero-content .auto-live-card,
.auto-hero-image ~ .hero-content .auto-flow-label {
  text-shadow: none;
}

.auto-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);
  color: var(--text-on-dark);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  /* Load-triggered fade-up, same as .int-hero-badge / .wl-hero-badge /
     .engine-hero-badge — this is the FIRST element in the hero's
     stagger sequence (no delay), followed by .hero-headline (0.1s),
     .hero-subtext (0.25s), .btn-cta (0.4s), all defined unconditionally
     in style-aqua.css so they already apply with no extra wiring. */
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
}

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

/* ----- Section 2: pinned scroll-cycling automations list — reuses the
   .usecases-* scaffold from style-aqua.css exactly (same architecture as
   whitelabel-aqua.html's #wlConfigScrollWrapper and index.html's Use
   Cases). Only the wrapper height differs per brief (5 items x 80vh). ----- */

.usecases-scroll-wrapper.auto-scroll-wrapper {
  height: 400vh;
}

/* ----- Automation mockup windows (right column, 1 per item) — same
   "browser chrome" scaffold as .int-mock-window / .wl-mock-window,
   duplicated here per this codebase's one-stylesheet-per-page
   convention rather than cross-linking integrations-page-aqua.css. ----- */

.auto-mock-window {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui);
  overflow: hidden;
  background: #ffffff;
}

.auto-mock-chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  background: var(--surface-alt);
  border-bottom: 0.5px solid var(--border);
}

.auto-mock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
}

.auto-mock-tab {
  margin-left: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}

.auto-mock-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: var(--space-3);
}

.auto-mock-body-center {
  align-items: center;
  text-align: center;
}

.auto-mock-caption {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Lead card (items 1 + 5) */

.auto-mock-lead-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: var(--space-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui);
  text-align: left;
}

.auto-mock-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--cream-lightest);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.auto-mock-lead-lines {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auto-mock-lead-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.auto-mock-lead-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--text-secondary);
}

.auto-mock-score-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(170, 208, 226, 0.35);
  color: var(--dark-bg);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.auto-mock-synced-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-pill);
  background: rgba(170, 208, 226, 0.35);
  color: var(--dark-bg);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
}

.usecases-transcript.active .auto-mock-synced-badge {
  animation: autoMockPopIn 0.35s ease-out 1s forwards;
}

.auto-mock-route-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.auto-mock-route-row svg {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* Ticket row (item 2) */

.auto-mock-ticket-row {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}

.auto-mock-ticket-status {
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.auto-mock-ticket-status-open {
  background: var(--surface-alt);
  color: var(--text-secondary);
}

.auto-mock-ticket-status-assigned {
  background: var(--accent-amber);
  color: var(--text-primary);
}

/* Warm transfer chat (item 3) */

.auto-mock-chat-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}

.auto-mock-chat-thread .chat-bubble {
  opacity: 1;
  transform: none;
}

.auto-mock-transfer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 0.5px solid var(--border);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.auto-mock-agent-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-steel);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
}

/* Reminder notification (item 4) */

.auto-mock-notification {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: var(--space-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui);
  text-align: left;
}

.auto-mock-bell-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(170, 208, 226, 0.35);
  color: var(--dark-bg);
}

.auto-mock-notification-lines {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.auto-mock-notification-title {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}

.auto-mock-notification-sub {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ----- Richer per-item mock detail + lighting-up animations, all
   keyed off .usecases-transcript.active (js/automations-scroll.js
   toggles .active on/off each time an item is (re)selected, so a CSS
   animation bound under that selector restarts on every activation --
   no extra JS needed, same technique as .automation-icon's existing
   light-up treatment, just sequenced with animation-delay per element
   instead of a class swap). ----- */

@keyframes autoMockPopIn {
  0% { opacity: 0; transform: translateY(6px) scale(0.94); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Item 1 -- Lead Qualification: score badge lights up first, then the
   routing line confirms a beat later. */

.usecases-transcript .auto-mock-score-badge,
.usecases-transcript .auto-mock-route-row {
  opacity: 0;
}

.usecases-transcript.active .auto-mock-score-badge {
  animation: autoMockPopIn 0.4s ease-out 0.3s forwards;
}

.usecases-transcript.active .auto-mock-route-row {
  animation: autoMockPopIn 0.4s ease-out 0.8s forwards;
}

/* Item 2 -- Auto Ticketing: ticket ID + summary card, priority badge,
   assignee row. Ticket appears, then the priority badge lights up. */

.auto-mock-ticket-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: var(--space-2);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-ui);
  text-align: left;
}

.auto-mock-ticket-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auto-mock-ticket-id {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}

.auto-mock-priority-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-alt);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  opacity: 0;
}

.usecases-transcript.active .auto-mock-priority-badge {
  animation: autoMockPopIn 0.35s ease-out 0.6s forwards;
}

.auto-mock-priority-badge-high {
  background: rgba(170, 208, 226, 0.5);
  color: var(--dark-bg);
}

.auto-mock-ticket-summary {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.auto-mock-ticket-assignee {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 0.5px solid var(--border);
}

.auto-mock-ticket-assignee-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Item 3 -- Warm Transfer: AI avatar -> arrow -> human avatar, with a
   "Context transferred" confirmation. Arrow lights up as the handoff
   completes. */

.auto-mock-handoff-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: var(--space-2) 0;
}

.auto-mock-handoff-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
}

.auto-mock-handoff-avatar-ai {
  background: var(--dark-bg);
}

.auto-mock-handoff-avatar-human {
  background: var(--accent-steel);
}

.auto-mock-handoff-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.usecases-transcript.active .auto-mock-handoff-arrow {
  animation: autoMockHandoffLight 0.4s ease-out 0.5s forwards;
}

@keyframes autoMockHandoffLight {
  to {
    background: var(--accent-amber);
    color: var(--dark-bg);
    box-shadow: 0 0 0 4px rgba(170, 208, 226, 0.35);
  }
}

.auto-mock-handoff-label {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0;
}

.usecases-transcript.active .auto-mock-handoff-label {
  animation: autoMockPopIn 0.35s ease-out 0.95s forwards;
}

/* Item 4 -- Reminder Flows: "Sending in 24h" crossfades to a sent
   confirmation with a checkmark. */

.auto-mock-reminder-status {
  position: relative;
  min-height: 16px;
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.auto-mock-reminder-pending {
  display: block;
  color: var(--text-muted);
  opacity: 1;
}

.auto-mock-reminder-sent {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--dark-bg);
  opacity: 0;
}

.usecases-transcript.active .auto-mock-reminder-pending {
  animation: autoMockFadeOut 0.35s ease-out 1.1s forwards;
}

.usecases-transcript.active .auto-mock-reminder-sent {
  animation: autoMockPopIn 0.35s ease-out 1.1s forwards;
}

@keyframes autoMockFadeOut {
  to { opacity: 0; }
}

/* Item 5 -- CRM Sync: extra Status field, a briefly spinning sync
   icon, then a "Synced" confirmation. */

.auto-mock-sync-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
}

.usecases-transcript.active .auto-mock-sync-icon svg {
  animation: autoMockSyncSpin 0.8s linear 0.2s 1;
}

@keyframes autoMockSyncSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.auto-mock-lead-fields {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.auto-mock-lead-field {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--text-secondary);
}

.auto-mock-lead-field strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ----- Section 3: Custom Automations callout — reuses .usecases-intro /
   .usecases-label / .usecases-heading / .usecases-subtext from
   style-aqua.css verbatim (they're generic, not page-scoped), just adds
   bottom padding (the intro alone is designed to sit right above a
   pinned section, not stand alone) and the CTA button. ----- */

.auto-custom-section {
  padding-bottom: var(--space-6);
}

.auto-custom-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--space-2);
  padding: 15px 30px;
  border-radius: var(--radius-button-asym);
  background: var(--accent-amber);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
}

/* ----- Always-On section — horizontal scroll-snap card track, same
   pinned/translateX mechanism as about-aqua.html's #trust section
   (see js/about-trust-carousel.js), duplicated under an "auto-cards-"
   prefix per this codebase's one-stylesheet-per-page convention. ----- */

.auto-cards-scroll {
  position: relative;
  height: calc(var(--auto-cards-count, 5) * 45vh);
}

.auto-cards-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.auto-cards-track-viewport {
  overflow: hidden;
  max-width: 1150px;
  width: 100%;
  margin: var(--space-3) auto 0;
}

.auto-cards-track {
  display: flex;
  gap: var(--space-3);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.auto-cards-card {
  flex: 0 0 340px;
  width: 340px;
  min-height: 220px;
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  opacity: 0.6;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.auto-cards-card.is-active {
  opacity: 1;
}

.auto-cards-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-ui);
  background: rgba(170, 208, 226, 0.25);
  color: var(--dark-bg);
}

.auto-cards-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
}

.auto-cards-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.auto-cards-mock {
  margin-top: auto;
  padding-top: var(--space-2);
}

.auto-cards-steps {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 0;
}

.auto-cards-step-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.auto-cards-step-pill.is-active {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: var(--text-primary);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .auto-cards-card, .auto-cards-step-pill, .auto-cards-track { transition: none; }
}

@media (max-width: 860px) {
  .auto-cards-scroll { height: auto; }
  .auto-cards-pin { position: static; height: auto; display: block; padding: var(--space-6) 0; }
  .auto-cards-track-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: var(--space-5) 0 0;
    padding: 0 var(--space-3) var(--space-2);
    scrollbar-width: none;
  }
  .auto-cards-track-viewport::-webkit-scrollbar { display: none; }
  .auto-cards-track { transform: none !important; }
  .auto-cards-card { scroll-snap-align: center; flex-basis: 78vw; width: 78vw; }
}

/* ----- Hero flow diagram: incoming triggers -> Connect -> live
   example card -> Sync -> real destinations. Anchored directly to
   .auto-live-card's own edges (fixed pixel offsets, not percentages),
   same proven technique as the Text-to-Text hub-and-spoke layout --
   .auto-live-card is given an EXPLICIT height (not auto) specifically
   so `top:50%` on its absolutely-positioned children has something
   real to resolve against (an auto-height ancestor makes percentage
   top/bottom compute as if "auto" and elements fall back to their
   static position -- the bug that broke the Text-to-Text hub cards
   the first time around). ----- */

.auto-flow-wrap {
  width: 100%;
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
}

/* engineHubFadeIn's plain opacity-only design is intentional here too
   (not a typo carried over) -- this page doesn't load
   engines-page-aqua.css, so it's redefined locally rather than
   referencing a name that would silently no-op (an unknown
   animation-name isn't an error, the element just never animates and
   stays at its base opacity:0 forever). Opacity-only, not
   heroTextEntrance's translateY slide, because several of this
   diagram's elements also carry their own static positioning
   `transform` (see .auto-flow-node/-label/-connector below) -- a
   running animation's own transform value always overrides a
   separately-declared static one, which would silently discard that
   positioning the moment the entrance played. */
@keyframes engineHubFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* True grey-white glassmorphism, not a barely-there tint: 8% white was
   translucent enough that this vivid, blurred diagonal background
   gradient still showed clearly through it (a smooth color bleed, not
   the earlier speckled noise artifact -- desaturating the grain noise
   fixed that separately, but a highly transparent glass will always
   show whatever colorful thing sits behind it, by definition). Enough
   opacity here that it reads as neutral light gray-white regardless of
   what's behind it, which also means the text needs to flip to dark
   (it was white-on-dark, appropriate for near-transparent glass over
   a dark hero; a light card needs dark text instead). */
/* Solid white, not translucent glass -- flat opaque card for a clean
   look, same reasoning as .auto-flow-node's own flat fill: no
   backdrop-filter means nothing behind it (photo, gradient, whatever
   comes next) can ever bleed or smear through it. */
.auto-live-card {
  position: relative;
  z-index: 2;
  /* min(): a fixed 340px card was wider than a 320px phone and pushed /automations/ sideways. */
  width: min(340px, 100%);
  height: 175px;
  padding: 18px 20px;
  border-radius: var(--radius-card);
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: engineHubFadeIn 0.6s ease-out forwards;
  animation-delay: 0.7s;
}

.auto-live-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.auto-live-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-steel);
  box-shadow: 0 0 0 3px rgba(113, 152, 175, 0.25);
}

/* Spinner -> checkmark crossfade, same stacked-absolute technique as
   the Text-to-Text hero's typing-indicator -> reply-bubble crossfade:
   both states occupy the same box so one loop hands off to the other
   without a layout jump. */
.auto-live-stack {
  position: relative;
  height: 34px;
}

.auto-live-processing,
.auto-live-done {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.auto-live-spinner {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(21, 58, 80, 0.18);
  border-top-color: var(--accent-steel);
  animation: autoLiveSpin 0.8s linear infinite;
}

.auto-live-processing {
  animation: autoLiveProcessingCycle 5s ease-in-out infinite;
}

.auto-live-done {
  color: var(--accent-steel);
  animation: autoLiveDoneCycle 5s ease-in-out infinite;
}

@keyframes autoLiveSpin {
  to { transform: rotate(360deg); }
}

@keyframes autoLiveProcessingCycle {
  0%, 30% { opacity: 1; }
  38%, 92% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes autoLiveDoneCycle {
  0%, 30% { opacity: 0; }
  38%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

/* Connector lines: low-opacity aqua, no fill, same treatment as the
   Text-to-Text hub-and-spoke connectors. z-index:0 (below the card's
   own z-index:2) so they read as passing behind it. */
.auto-flow-connector {
  position: absolute;
  top: 50%;
  z-index: 0;
  pointer-events: none;
}

.auto-flow-connector path {
  fill: none;
  /* Pale accent, not #7198AF: that's also the gradient's own middle
     color stop, so a line in that exact hue was blending into its own
     backdrop by construction regardless of opacity. Pale reads with
     real contrast against every part of this diagonal wash, from the
     dark navy corner to the pale corner, unlike a mid-tone match. 35%
     opacity + a slightly thicker stroke -- 20% was still not visibly
     reading against the busy gradient once actually checked. */
  stroke: #AAD0E2;
  stroke-opacity: 0.35;
  stroke-width: 1.5;
}

.auto-flow-connector-left {
  left: 0;
  transform: translate(-330px, -50%);
}

.auto-flow-connector-right {
  right: 0;
  transform: translate(330px, -50%);
}

/* Flat solid fill, no backdrop-filter -- left over from when this hero
   had a mesh-gradient background with a colorful grain-noise overlay
   (backdrop-filter:blur() on a small circle was sampling and smearing
   that noise into visible pink/green/purple blotches); flat fill is
   also just what the reference calls for regardless: solid near-white
   circle, dark monochrome icon, plain drop shadow, no translucency. */
.auto-flow-node {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #F5F6FA;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  color: var(--dark-bg);
  opacity: 0;
  animation: engineHubFadeIn 0.5s ease-out forwards;
}

.auto-flow-node-l1 { left: 0; transform: translate(-330px, calc(-50% - 80px)); animation-delay: 1s; }
.auto-flow-node-l2 { left: 0; transform: translate(-330px, calc(-50% - 26px)); animation-delay: 1.15s; }
.auto-flow-node-l3 { left: 0; transform: translate(-330px, calc(-50% + 26px)); animation-delay: 1.3s; }
.auto-flow-node-l4 { left: 0; transform: translate(-330px, calc(-50% + 80px)); animation-delay: 1.45s; }

.auto-flow-node-r1 { right: 0; transform: translate(330px, calc(-50% - 80px)); animation-delay: 1.6s; }
.auto-flow-node-r2 { right: 0; transform: translate(330px, calc(-50% - 26px)); animation-delay: 1.75s; }
.auto-flow-node-r3 { right: 0; transform: translate(330px, calc(-50% + 26px)); animation-delay: 1.9s; }
.auto-flow-node-r4 { right: 0; transform: translate(330px, calc(-50% + 80px)); animation-delay: 2.05s; }

/* Same grey-white glassmorphism fix as .auto-live-card -- 8% white
   glass was letting the vivid background gradient bleed straight
   through, which read as "still has the gradient in it" even after
   desaturating the noise (that only fixed the speckled artifact, not
   this smooth color showing through a near-transparent tint). Text
   flips to dark to match the now-light background. */
.auto-flow-label {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: rgba(240, 242, 247, 0.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  animation: engineHubFadeIn 0.5s ease-out forwards;
  animation-delay: 2.2s;
}

.auto-flow-label-connect {
  left: 0;
  transform: translate(calc(-122px - 50%), -50%);
}

.auto-flow-label-sync {
  right: 0;
  transform: translate(calc(122px + 50%), -50%);
  animation-delay: 2.35s;
}

@media (prefers-reduced-motion: reduce) {
  .auto-live-card,
  .auto-flow-node,
  .auto-flow-label {
    animation: none;
    opacity: 1;
  }
  .auto-live-spinner { animation: none; }
  .auto-live-processing { animation: none; opacity: 0; }
  .auto-live-done { animation: none; opacity: 1; }
}

/* Below 1099px (same order-of-magnitude threshold as the homepage's
   own dashboard-driven floating cards): .auto-live-card (340px) plus
   a 330px connector+node reach on each side needs ~1045px just for
   the diagram itself, before counting the hero's own side padding --
   collapse to the plain mobile row list instead of cramming it in.
   At the 1099px threshold itself the outermost node still clears the
   viewport edge by ~26px (worked out from the card's own centered
   position, minus the 330px reach, minus the node's own half-width) --
   tight but positive; re-verify if this footprint grows further. */
@media (max-width: 1099px) {
  .auto-flow-connector,
  .auto-flow-node,
  .auto-flow-label {
    display: none;
  }

  .auto-flow-wrap {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }

  .auto-flow-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .auto-flow-mobile-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .auto-flow-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;
  }

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

@media (min-width: 1100px) {
  .auto-flow-mobile-list {
    display: none;
  }
}