* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  background: var(--black);
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: var(--black);
}

#hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Mobile-only stand-in for the frame-scrub hero: below 768px
   hero-scrub-aqua.js never initializes (see its own mobile guard), so the
   scrubbable .hero-scrub-frame <img> is swapped for a plain looping
   <video> instead — hidden on desktop, shown by the mobile media query
   below .hero-scrub-frame's own hide rule. */
.hero-mobile-video {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background: none;
  z-index: 1;
}

/* index.html only -- hero-aurora.mp4 has no deliberately-darkened top
   zone the way the old frame-scrub/static-image heroes did, so pin a
   subtle top-weighted scrim behind the nav/heading to keep them legible
   against whatever brightness the sky/aurora band happens to be at any
   given frame. Fades out by the middle of the frame so it doesn't
   flatten the footage lower down where the dashboard widget/floating
   cards already provide their own contrast. */
.hero-scrim-aurora {
  background: linear-gradient(to bottom, rgba(21, 58, 80, 0.45), rgba(21, 58, 80, 0.2) 30%, transparent 50%);
}

/* Cursor-following brighten spotlight, shared across every hero with a
   background image/video. Same technique as landing-hero-bot.css's
   .hero-bot-spotlight: sits at z-index:0, painting above the media (also
   z-index:0 but earlier in DOM) and below .hero-scrim (z-index:1), so the
   scrim's darkening still suppresses it behind text. --x/--y set in px by
   js/hero-cursor-spotlight.js. */
.hero-cursor-spotlight {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(circle 250px at var(--x, 50%) var(--y, 50%), rgba(170, 208, 226, 0.25), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.hero-cursor-spotlight.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-cursor-spotlight {
    display: none;
  }
}

.hero-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 0 var(--space-3);
}

#nav {
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: var(--space-3) var(--space-5);
}

.nav-logo {
  display: flex;
  align-items: center;
  justify-self: start;
}

.nav-logo img {
  display: block;
  height: 28px;
  width: auto;
}

.nav-glass-bar {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.nav-menu-wrap {
  position: relative;
}

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px 10px 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Inter', sans-serif;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: rgba(15, 12, 9, 0.96);
  background-blend-mode: luminosity;
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.12), 0 24px 48px rgba(0, 0, 0, 0.4);
  border-radius: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  overflow: visible;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, width 0.3s var(--ease);
  z-index: 50;
}

/* Widen the popover itself only while the Products mega-panel inside it
   is open, so the 2-column grid has room -- everything else in the menu
   (Home, About, Integrations, Automations as flat links, etc.) keeps the
   normal compact 200px width. */
.nav-menu-dropdown:has(.nav-submenu-wrap:hover),
.nav-menu-dropdown:has(.nav-submenu-wrap.open) {
  width: min(560px, calc(100vw - 48px));
}

.nav-menu-dropdown::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    rgba(255, 255, 255, 0) 55%,
    rgba(255, 255, 255, 0.15) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.nav-menu-wrap.open .nav-menu-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-menu-dropdown a {
  position: relative;
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.82);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-menu-dropdown a:hover,
.nav-menu-dropdown a:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.nav-menu-dropdown a.active {
  color: var(--accent-amber);
  background: rgba(170, 208, 226, 0.14);
}

.nav-menu-dropdown a.active:hover {
  background: rgba(170, 208, 226, 0.22);
}

.nav-submenu-wrap {
  position: relative;
}

.nav-submenu-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.82);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-submenu-toggle:hover,
.nav-submenu-toggle:focus-visible,
.nav-submenu-wrap.open .nav-submenu-toggle {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.nav-submenu-chevron {
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}

.nav-submenu-wrap:hover .nav-submenu-chevron,
.nav-submenu-wrap.open .nav-submenu-chevron {
  transform: rotate(180deg);
}

.nav-submenu-panel {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  padding-left: 10px;
  transition: max-height 0.3s var(--ease), opacity 0.2s ease, transform 0.2s ease;
}

.nav-submenu-wrap:hover .nav-submenu-panel,
.nav-submenu-wrap.open .nav-submenu-panel {
  max-height: 120px;
  opacity: 1;
  transform: translateY(0);
}

.nav-submenu-panel a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.65);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

.nav-submenu-panel a:hover,
.nav-submenu-panel a:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  color: var(--accent-amber);
}

/* ----- Products mega-menu: the only dropdown with this treatment --
   Integrations/Automations stay flat top-level links (see #nav above).
   Same .nav-submenu-panel show/hide (max-height/opacity/transform on
   hover or .open) governs this too; these rules only add the wider
   glass surface and the icon+label+desc grid on top of it. Grid instead
   of a fixed 2-column flex row so a future 3rd/4th product wraps into a
   new row instead of forcing everything into one cramped line. -----
   */

.nav-mega-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 32px;
  padding: 16px;
  padding-left: 16px;
  margin-top: 4px;
  border-radius: 14px;
  background: rgba(21, 58, 80, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.nav-submenu-wrap:hover .nav-mega-panel,
.nav-submenu-wrap.open .nav-mega-panel {
  max-height: 220px;
}

.nav-mega-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: background 0.25s var(--ease);
}

.nav-mega-item:hover,
.nav-mega-item:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

.nav-mega-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(170, 208, 226, 0.16);
  color: var(--accent-amber);
}

.nav-mega-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
}

.nav-mega-desc {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.nav-menu-close {
  display: none;
}

@media (max-width: 768px) {
  /* Full-screen mobile menu: the small floating dropdown (200px, centered
     under the toggle) is unusable for thumb-reach on a phone. Below 768px
     it becomes a fixed full-viewport overlay instead — same open/close
     JS and the same opacity/transform transition, just a different box. */

  /* .nav-menu-dropdown is nested inside .nav-glass-bar, and
     backdrop-filter on an ancestor establishes a containing block for
     `position: fixed` descendants (same rule as transform/filter) — so
     without this, the "full-screen" dropdown below would actually be
     boxed to .nav-glass-bar's own small pill instead of the viewport,
     even while closed (it's `position: fixed` at all times on mobile,
     only its transform/opacity change on open — a still-boxed-wrong
     closed dropdown was overflowing the page horizontally even while
     invisible, since visibility:hidden still occupies its laid-out box).
     Drop the blur unconditionally on mobile and use a plain solid fill
     instead — cosmetic downgrade of the pill's glass look, but only
     below 768px. */
  .nav-glass-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(15, 12, 9, 0.7);
  }

  .nav-menu-dropdown {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100svh;
    min-width: 0;
    border-radius: 0;
    padding: 88px var(--space-3) var(--space-4);
    gap: 4px;
    transform: translateY(12px);
    overflow-y: auto;
  }

  .nav-menu-wrap.open .nav-menu-dropdown {
    transform: translateY(0);
  }

  .nav-menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 0.5px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    cursor: pointer;
  }

  .nav-menu-dropdown a,
  .nav-submenu-toggle {
    min-height: 56px;
    padding: 10px 14px;
    font-size: 18px;
  }

  .nav-submenu-panel a {
    min-height: 48px;
    font-size: 16px;
  }
}

.nav-demo-btn {
  display: inline-flex;
  align-items: center;
  background: #f2ede4;
  color: #111;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  border: none;
  text-decoration: none;
}

/* ----- Right-hand nav group: language switcher + "Talk to Sales",
   lives in #nav's own right-hand grid slot (justify-self: end) in
   place of the old "Find out more"/"Back to home" pill. Reused
   verbatim on every page in both /nl/ and the English root -- only the
   language switcher's two <a> hrefs/active flag differ per page. ----- */

.nav-right-group {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill);
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}

/* Secondary/ghost CTA -- deliberately not a solid fill like
   .nav-demo-btn, so the two don't visually compete for attention. */
.nav-sales-btn {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--text-on-dark);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}

.nav-sales-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Flag alone doesn't reliably read as "this switches the language" (a
   flag names a country, not a language -- the US flag isn't obviously
   "English" to a UK/AU visitor, same problem the other way for NL), so
   each flag carries its own EN/NL text label rather than standing alone. */
.nav-lang-flag {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  border-radius: var(--radius-pill);
  opacity: 0.45;
  transition: opacity 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.nav-lang-flag-icon {
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.nav-lang-flag-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.nav-lang-flag-text {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #ffffff;
}

.nav-lang-flag:hover {
  opacity: 0.75;
}

.nav-lang-flag.nav-lang-active {
  opacity: 1;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
}

/* Breadcrumb-style pages (pricing/pricing-custom-plan) have no #nav grid
   to sit inside -- the switcher there sits inline in the light topbar
   instead, so it drops the dark-nav border/pill treatment above. */
.breadcrumb .nav-lang-switch {
  justify-self: auto;
  display: inline-flex;
  border: none;
  padding: 0;
  vertical-align: middle;
}

.breadcrumb .nav-lang-flag-text {
  color: var(--text-secondary);
}

.breadcrumb .nav-lang-flag {
  opacity: 0.5;
}

.breadcrumb .nav-lang-flag:hover {
  opacity: 0.8;
}

.breadcrumb .nav-lang-flag.nav-lang-active {
  opacity: 1;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35);
}

.breadcrumb .nav-lang-flag.nav-lang-active .nav-lang-flag-text {
  color: var(--text-primary);
}

.pill-outline {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  color: var(--text-on-dark);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

@media (max-width: 640px) {
  #nav {
    grid-template-columns: auto 1fr;
    padding: var(--space-2) var(--space-3);
  }

  .pill-outline {
    display: none;
  }

  .nav-glass-bar {
    justify-self: end;
  }

  /* The language switch wraps to row two here, and auto-placed it landed in column 1,
     so that column took ITS width (117px) instead of the logo's (~103px) and row one ran
     out of room: the Dutch "Demo aanvragen" button was cut off, or pushed the page
     sideways, at 320px. Spanning the row gives column 1 back to the logo. */
  .nav-right-group {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .nav-menu-item span {
    display: none;
  }

  .nav-menu-item {
    padding: 10px 12px;
    min-height: 44px;
  }

  .nav-demo-btn {
    padding: 10px 16px;
    font-size: 13px;
    white-space: nowrap;
    min-height: 44px;
  }

  /* Talk to Sales ghost button is dropped at mobile width -- the
     language toggle keeps its existing (pre-existing, unchanged)
     behavior of staying visible, but adding a second full-width text
     CTA here would crowd/overflow next to the demo button. "Contact
     us" already exists in the mobile menu dropdown and routes to the
     same page, so the CTA stays reachable on mobile via that link. */
  .nav-sales-btn {
    display: none;
  }
}


/* 380px and below (360px is still a common Android width): the menu pill and the demo
   button no longer fit beside the logo. The Dutch "Demo aanvragen" pushed every /nl/ page
   11px sideways at 360px, and the English nav 2px on the blog posts. The site's 16px phone
   gutter, a tighter button and a smaller logo make room. Kept identical in style-aqua.css and
   site-nav.css, like the rest of the nav. */
@media (max-width: 380px) {
  #nav {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .nav-demo-btn {
    padding: 10px 12px;
  }

}

/* 340px and below: the Dutch nav fits at 320px with 2px to spare after the fixes above,
   which is too close to trust across font renderers. The 28px logo (~103px wide) at
   22px (~81px) buys a real margin. */
@media (max-width: 340px) {
  .nav-logo img {
    height: 22px;
  }
}

.hero-headline-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  padding-top: 4vh;
}

@keyframes heroTextEntrance {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroSubtextEntrance {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 0.65;
    transform: translateY(0);
  }
}

.hero-headline {
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.08;
  color: var(--text-on-dark);
  margin-bottom: var(--space-2);
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
  animation-delay: 0.1s;
}

.headline-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

.headline-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
}

.hero-subtext {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-on-dark);
  max-width: 500px;
  margin-bottom: var(--space-4);
  opacity: 0;
  animation: heroSubtextEntrance 0.6s ease-out forwards;
  animation-delay: 0.25s;
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-button-asym);
  background: var(--accent-amber);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
  animation-delay: 0.4s;
}

.dashboard-panel-crop {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.dashboard-panel {
  position: relative;
  width: min(1180px, 94vw);
  flex-shrink: 0;
  margin: 0 auto;
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  display: flex;
  align-items: stretch;
  opacity: 0;
  transform: scale(0.96);
  animation: panelEntrance 1.4s ease-out forwards;
  animation-delay: 0.8s;
}

.dashboard-panel-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 60%,
    rgba(255, 255, 255, 0.3) 80%,
    #ffffff 100%
  );
  pointer-events: none;
  z-index: 5;
}

@keyframes panelEntrance {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ===== Hero floating story cards — sit in the empty space either side
   of the dashboard widget, same visual group/z-index tier, telling one
   customer's pain -> resolved story. Absolutely positioned against
   .dashboard-panel-crop (already position:relative). ===== */

.hero-float-card {
  position: absolute;
  top: 16%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px 16px 14px 14px;
  width: 216px;
  background: #ffffff;
  border-radius: var(--radius-card);
  border-left: 3px solid transparent;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
  opacity: 0;
}

.hero-float-card-left {
  left: 1.5%;
  top: calc(16% - 50px);
  border-left-color: var(--error-fg);
  animation: heroFloatInLeft 0.7s ease-out forwards, heroFloatBob 3s ease-in-out infinite;
  animation-delay: 1.2s, 1.9s;
}

.hero-float-card-right {
  right: 1.5%;
  top: 32%;
  border-left-color: var(--success-fg);
  animation: heroFloatInRight 0.7s ease-out forwards, heroFloatBob 3s ease-in-out infinite;
  animation-delay: 1.6s, 2.3s;
}

.hero-float-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-float-avatar-ring {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-amber);
  padding: 3px;
}

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

.hero-float-card-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  text-align: left;
}

.hero-float-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.hero-float-card-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

.hero-float-card-divider {
  height: 0;
  border-top: 0.5px solid var(--border);
}

.hero-float-card-detail {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-muted);
}

.hero-float-card-pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
}

.hero-float-card-pill-warn {
  background: var(--error-bg);
  color: var(--error-fg);
}

.hero-float-card-pill-ok {
  background: var(--success-bg);
  color: var(--success-fg);
}

@keyframes heroFloatInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heroFloatInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes heroFloatBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-float-card-left,
  .hero-float-card-right {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* Below ~1100px the dashboard widget itself (94vw) leaves no real side
   space left to float a card in without overlapping it, well above the
   768px mobile crop breakpoint -- hide there rather than force an
   overlap. */
@media (max-width: 1099px) {
  .hero-float-card {
    display: none;
  }
}

.dashboard-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid var(--border);
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-1);
  margin-bottom: var(--space-3);
}

.sidebar-logo {
  display: block;
  height: 20px;
  width: auto;
}

.sidebar-close {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 10px var(--space-1);
  border-radius: var(--radius-ui);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  text-align: left;
}

.sidebar-nav-item span {
  text-align: left;
}

.sidebar-nav-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.sidebar-nav-item.active {
  background: #AAD0E2;
  color: #000000;
  font-weight: 600;
}

.dashboard-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.dashboard-topbar {
  display: flex;
  justify-content: flex-end;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.topbar-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-secondary);
  cursor: pointer;
}

.topbar-icon-btn svg {
  width: 16px;
  height: 16px;
}

.topbar-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.topbar-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.topbar-logout svg {
  width: 14px;
  height: 14px;
}

.dashboard-content {
  padding: var(--space-3);
}

.quick-action-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: var(--space-3);
}

.quick-action-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--light-bg);
  border-radius: var(--radius-card);
  padding: var(--space-2);
}

.quick-action-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: var(--radius-ui);
  object-fit: cover;
  background: var(--surface-alt);
}

.quick-action-info {
  flex: 1;
  min-width: 0;
}

.quick-action-info h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
  text-align: left;
}

.quick-action-info p {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: left;
}

.quick-action-arrow {
  flex-shrink: 0;
  color: var(--text-primary);
}

.bot-details-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
  text-align: left;
}

.bot-details-header p {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 20px;
  text-align: left;
}

.bot-stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.bot-stat-card {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-ui);
  padding: 14px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}

.bot-stat-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bot-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.bot-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.bot-stat-thumb {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  background: var(--surface-alt);
}

.featured-voices {
  margin-top: var(--space-3);
}

.featured-voices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.featured-voices-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: left;
}

.featured-voices-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.view-all-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.voice-nav-arrows {
  display: flex;
  gap: 6px;
}

.voice-nav-arrows button {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.featured-voices-subtext {
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: var(--space-2);
  text-align: left;
}

.voice-card-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.voice-card {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-ui);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.voice-card img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.voice-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.voice-card p {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.voice-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--radius-ui);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 767px) {
  .hero {
    /* 100vh reads as excessively tall on mobile, and on iOS Safari the
       address-bar show/hide makes a fixed 100vh jump/resize under your
       thumb. svh ("small viewport height") is the visual-viewport-safe
       unit — locked to the shortest the chrome ever leaves you, so it
       never jumps. Plain vh stays first as a fallback for browsers that
       don't support svh (an unsupported unit invalidates the whole
       declaration, so it's simply skipped, not zeroed). */
    height: 90vh;
    height: 90svh;
  }

  .hero-scrub-frame {
    display: none;
  }

  .hero-mobile-video {
    display: block;
  }

  /* Dashboard widget: the full app-mockup (sidebar nav, topbar, quick
     actions, featured voices) is desktop-oriented chrome that can't be
     meaningfully shrunk into a phone width. Crop it down to just the
     stat row, the one piece of real content it exists to show off. */
  .dashboard-panel {
    width: min(420px, 92vw);
  }

  .dashboard-sidebar,
  .dashboard-topbar,
  .quick-action-row,
  .bot-details-header,
  .featured-voices,
  .dashboard-panel-bottom-fade {
    display: none;
  }

  .dashboard-content {
    padding: var(--space-3) var(--space-2);
  }

  .bot-stat-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .bot-stat-card {
    padding: 12px;
  }

  .bot-stat-value {
    font-size: 18px;
  }
}

.next-section {
  position: relative;
  overflow: hidden;
  background: var(--light-bg);
  min-height: 60vh;
  padding: var(--space-5) var(--space-3) var(--space-4);
}

.engines-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.engines-glow-1 {
  width: 400px;
  height: 400px;
  background: var(--accent-amber);
  opacity: 0.22;
  top: 5%;
  left: -120px;
}

.engines-glow-2 {
  width: 380px;
  height: 380px;
  background: var(--cream-lightest);
  opacity: 0.4;
  top: 55%;
  right: -100px;
}

.engines-glow-3 {
  width: 320px;
  height: 320px;
  background: var(--accent-amber);
  opacity: 0.18;
  bottom: 4%;
  right: 12%;
}

.engines-header {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.engines-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);
}

.engines-heading {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.engines-heading-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
}

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

.engines-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.engines-widget {
  position: relative;
  z-index: 1;
  width: min(900px, 92vw);
  margin: 0 auto;
}

.engine-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.engine-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text-secondary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
}

.engine-tab.active {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: var(--text-primary);
  opacity: 1;
}

.engine-card-outer {
  padding: 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(170, 208, 226, 0.3);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.engine-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.engine-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}

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

.engine-info-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}

.engine-sample-text {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-primary);
  max-width: 640px;
}

.engine-progress-track {
  position: relative;
  height: 1px;
  background: var(--border);
  margin-top: auto;
  margin-bottom: var(--space-2);
  overflow: hidden;
}

.engine-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--accent-amber);
}

.engine-progress-fill.playing {
  transition: width 3.5s linear;
  width: 100%;
}

.engine-helper-text {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.engine-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.engine-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
}

.engine-input::placeholder {
  color: var(--text-secondary);
}

.engine-char-count {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.engine-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--accent-amber);
  color: var(--text-primary);
  cursor: pointer;
}

.watch-intro-widget {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 8px;
  padding-right: var(--space-2);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s var(--ease);
}

.watch-intro-widget:hover {
  transform: scale(1.03);
}

.watch-intro-thumb {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-ui);
  background: var(--surface-alt);
  flex-shrink: 0;
}

.watch-intro-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.4);
}

.watch-intro-label {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-primary);
}

@media (max-width: 768px) {
  /* "Watch Intro" pill overlaps the demo card in a way that only really
     works with the room a desktop viewport gives it. */
  .watch-intro-widget {
    display: none;
  }
}

/* ===== Features section: "One Platform, Every Client." ===== */

.features-section {
  background: var(--light-bg);
  padding: var(--space-5) var(--space-3) var(--space-4);
}

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

.features-heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

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

/* Grid, not flex, for the row: each .feature-card has 4 direct children
   in the same order (box, title, desc, button) — subgrid lets those
   same-index rows share height ACROSS the two sibling cards, so
   whichever card's box/title/desc is naturally taller sets the row
   height for both. flex:1 on the box (the previous approach) only gave
   each card its OWN leftover space after its OWN text, which produced
   different box heights whenever the two cards' description lengths
   differed — exactly the bug this replaces. */

.features-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: var(--space-3);
  max-width: 1100px;
  margin: 0 auto var(--space-5);
}

.feature-card {
  min-width: 0;
  border-radius: 24px;
  padding: var(--space-4);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: 1 / 5;
}

/* Recolored to the site's aqua palette only (--voxion-dark #153A50,
   --voxion-mid #7198AF, --voxion-light #AAD0E2, as rgba washes over the
   same #fdfcfb base) -- each card varies which tone dominates, at what
   opacity, AND from which corner/edge the blobs originate, so the 6
   cards stay visually distinguishable from each other rather than all
   reading identically. */

.feature-card-mesh-1 {
  background:
    radial-gradient(at 15% 20%, rgba(170, 208, 226, 0.55) 0%, transparent 55%),
    radial-gradient(at 85% 15%, rgba(113, 152, 175, 0.35) 0%, transparent 55%),
    radial-gradient(at 50% 90%, rgba(170, 208, 226, 0.25) 0%, transparent 55%),
    #fdfcfb;
}

.feature-card-mesh-2 {
  background:
    radial-gradient(at 88% 22%, rgba(113, 152, 175, 0.5) 0%, transparent 55%),
    radial-gradient(at 12% 82%, rgba(21, 58, 80, 0.3) 0%, transparent 55%),
    radial-gradient(at 50% 8%, rgba(170, 208, 226, 0.3) 0%, transparent 55%),
    #fdfcfb;
}

.feature-card-mesh-3 {
  background:
    radial-gradient(at 20% 85%, rgba(21, 58, 80, 0.28) 0%, transparent 55%),
    radial-gradient(at 82% 80%, rgba(170, 208, 226, 0.5) 0%, transparent 55%),
    radial-gradient(at 55% 12%, rgba(113, 152, 175, 0.25) 0%, transparent 55%),
    #fdfcfb;
}

.feature-card-mesh-4 {
  background:
    radial-gradient(at 8% 45%, rgba(113, 152, 175, 0.45) 0%, transparent 55%),
    radial-gradient(at 92% 25%, rgba(21, 58, 80, 0.35) 0%, transparent 55%),
    radial-gradient(at 62% 92%, rgba(113, 152, 175, 0.2) 0%, transparent 55%),
    #fdfcfb;
}

.feature-card-mesh-5 {
  background:
    radial-gradient(at 90% 10%, rgba(21, 58, 80, 0.4) 0%, transparent 55%),
    radial-gradient(at 10% 55%, rgba(113, 152, 175, 0.3) 0%, transparent 55%),
    radial-gradient(at 68% 95%, rgba(21, 58, 80, 0.15) 0%, transparent 55%),
    #fdfcfb;
}

.feature-visual {
  position: relative;
  background: #ffffff;
  border-radius: var(--radius-ui);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  padding: var(--space-3);
  margin-bottom: var(--space-3);
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.feature-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.feature-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  max-width: 480px;
}

.feature-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius-ui);
  border: none;
  background: var(--dark-bg);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.feature-card-mesh-6 {
  background:
    radial-gradient(at 25% 8%, rgba(170, 208, 226, 0.6) 0%, transparent 55%),
    radial-gradient(at 90% 65%, rgba(170, 208, 226, 0.35) 0%, transparent 55%),
    radial-gradient(at 8% 92%, rgba(113, 152, 175, 0.2) 0%, transparent 55%),
    #fdfcfb;
}

/* Workflow Automation's icon badge — smaller floating snippet rather
   than the bespoke full-size .feature-visual widgets the other 5 cards
   in this section each have, since the brief specifically asked for a
   "floating white icon snippet" (matching the simpler pattern already
   established on whitelabel-aqua.html / integrations-aqua.html) rather
   than a new custom animated diagram. */

.feature-icon-snippet {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-3);
  background: #ffffff;
  border-radius: var(--radius-ui);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  color: var(--dark-bg);
}

/* Workflow Automation's "automation chain" — 3 icons + 2 connecting
   lines in a row, so the snippet widens to a full-width strip instead
   of staying a square badge for just this one card. */

.feature-icon-snippet.automation-chain {
  width: 100%;
  height: auto;
  min-height: 190px;
  justify-content: center;
  gap: 8px;
  padding: 0 var(--space-3);
}

.automation-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  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);
}

.automation-icon.active {
  background: var(--accent-amber);
  color: var(--dark-bg);
  box-shadow: 0 0 0 4px rgba(170, 208, 226, 0.35);
}

.automation-icon.spin svg {
  animation: automationGearSpin 0.5s linear;
}

.automation-icon.pop {
  animation: automationCheckPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

@keyframes automationCheckPop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.automation-line {
  flex: 1;
  max-width: 30px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.automation-line-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--accent-amber);
  transition: width 0.4s linear;
}

.automation-line.filled .automation-line-fill {
  width: 100%;
}

/* Card 1 — node diagram */

.node-diagram {
  position: relative;
  width: 100%;
  max-width: 260px;
  height: 150px;
}

.node-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.node-lines path {
  fill: none;
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
  animation: nodeFlow 1.4s linear infinite;
  transition: stroke 0.4s var(--ease), stroke-width 0.4s var(--ease);
}

@keyframes nodeFlow {
  to {
    stroke-dashoffset: -22;
  }
}

.node-lines path.pulse {
  stroke: var(--accent-amber);
  stroke-width: 2;
}

.node-main {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  animation: nodeBreathe 2.6s ease-in-out infinite;
}

@keyframes nodeBreathe {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.06); }
}

.node-children {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
}

.node-child {
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 5px 10px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: var(--text-secondary);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
  white-space: nowrap;
  animation: nodeFloat 2.8s ease-in-out infinite;
}

.node-child:nth-child(2) {
  animation-delay: 0.3s;
}

.node-child:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.node-child.pulse {
  color: var(--accent-amber);
  border-color: var(--accent-amber);
}

/* Card 2 — stat counter + sparkline */

.stat-counter-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.stat-counter-value {
  font-family: 'Inter', sans-serif;
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: inline-block;
  transition: transform 0.25s var(--ease), color 0.25s var(--ease);
}

.stat-counter-value.pop {
  transform: scale(1.12);
  color: var(--accent-amber);
}

.stat-counter-label {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.stat-sparkline {
  width: 100%;
  max-width: 200px;
  height: 40px;
}

.stat-sparkline polyline {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 260;
  stroke-dashoffset: 0;
}

.stat-sparkline polyline.draw {
  animation: sparklineDraw 0.9s ease-out;
}

@keyframes sparklineDraw {
  from {
    stroke-dashoffset: 260;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* Knowledge Bot Centre — document learning diagram */

.doc-learn-diagram {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 220px;
}

.doc-chip {
  position: absolute;
  background: var(--light-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-ui);
  padding: 6px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
}

.doc-chip-1 {
  top: 12%;
  left: 8%;
}

.doc-chip-2 {
  top: 12%;
  right: 8%;
}

.doc-chip-3 {
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
}

.doc-chip {
  animation: docChipFloat 2.4s ease-in-out infinite;
}

.doc-chip-2 {
  animation-delay: 0.3s;
}

.doc-chip-3 {
  animation-delay: 0.6s;
}

@keyframes docChipFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.doc-chip-3.doc-chip {
  animation-name: docChipFloatCentered;
}

@keyframes docChipFloatCentered {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-3px); }
}

.doc-center-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--light-bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  z-index: 1;
  animation: docIconPulse 2.2s ease-in-out infinite;
}

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

.doc-center-icon::after {
  animation-delay: 1.1s;
}

@keyframes docIconPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.08); }
}

@keyframes docRingPulse {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.9); opacity: 0; }
}

.doc-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  top: 50%;
  left: 50%;
  opacity: 0;
}

.doc-particle-1 {
  animation: travelToCenter1 2.2s ease-in-out infinite;
}

.doc-particle-2 {
  animation: travelToCenter2 2.2s ease-in-out infinite;
  animation-delay: 0.7s;
}

.doc-particle-3 {
  animation: travelToCenter3 2.2s ease-in-out infinite;
  animation-delay: 1.4s;
}

@keyframes travelToCenter1 {
  0% { transform: translate(-155%, -280%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, -50%); opacity: 0; }
}

@keyframes travelToCenter2 {
  0% { transform: translate(155%, -280%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, -50%); opacity: 0; }
}

@keyframes travelToCenter3 {
  0% { transform: translate(0%, 260%); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(-50%, -50%); opacity: 0; }
}

/* Card 3 — morphing brand shape */

.morph-shape {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-amber);
  transition: background 1s var(--ease);
  margin-bottom: var(--space-2);
  animation: morphFloat 2.4s ease-in-out infinite;
}

@keyframes morphFloat {
  0%, 100% { transform: rotate(0deg) scale(1); border-radius: 16px; }
  50% { transform: rotate(8deg) scale(1.08); border-radius: 22px; }
}

.morph-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: opacity 0.3s var(--ease);
}

/* Card 4 — shield pulse + checklist */

.shield-pulse {
  position: relative;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--accent-amber);
  opacity: 0;
  animation: shieldPulse 2.4s ease-out infinite;
}

.pulse-ring-2 {
  animation-delay: 0.8s;
}

.pulse-ring-3 {
  animation-delay: 1.6s;
}

@keyframes shieldPulse {
  0% { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.6); opacity: 0; }
}

.shield-icon {
  position: relative;
  z-index: 1;
  animation: shieldBreathe 2.4s ease-in-out infinite;
}

@keyframes shieldBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.compliance-checklist {
  list-style: none;
}

.check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: var(--border);
  padding: 2px 0;
  transform: translateX(0);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.check-item.active {
  transform: translateX(4px);
}

.check-item .check-mark {
  display: inline-block;
  color: var(--border);
  transform: scale(1);
  transition: color 0.4s var(--ease), transform 0.4s var(--ease);
}

.check-item.active,
.check-item.active .check-mark {
  color: var(--text-primary);
}

.check-item.active .check-mark {
  color: var(--accent-amber);
  transform: scale(1.3);
}

@media (max-width: 767px) {
  .features-row {
    grid-template-columns: 1fr;
    /* Still had 4 explicit row tracks from the desktop subgrid setup.
       Each card only occupies 1 auto-placed row now (grid-row:auto,
       below), so the other 3 explicit tracks sat empty at the end of
       the grid — 0 height each, but row-gap still applied between them,
       adding 2 extra 24px gaps (48px) of invisible space after the
       second card, inside the row's own box. */
    grid-template-rows: auto;
    /* Each pair of cards lives in its own .features-row grid (see the
       HTML — there are 3, not one shared grid), so the 24px `gap`
       between the pair and this row's own 64px margin-bottom (meant to
       separate one desktop *pair* from the next) were always two
       different values. Invisible on desktop, since the pair sits side
       by side and the eye never compares them directly — but once this
       collapses to one column, all 6 cards read as a single vertical
       list, and it alternates a tight 24px gap then a much bigger 64px
       gap, over and over. Match them so mobile gets one uniform gap. */
    margin-bottom: var(--space-3);
  }

  /* Single column now, so cards must stop sharing the parent's row
     tracks (subgrid + a fixed grid-row would otherwise stack both
     cards into the same 4 rows and overlap) — fall back to each card
     auto-placing its own rows. */
  .feature-card {
    grid-template-rows: auto;
    grid-row: auto;
  }
}

/* ===== Scroll-reveal system (site-wide standard, see NOTES.md) ===== */

.reveal-up {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Statement section — mesh-gradient, pinned, line-by-line
   bidirectional scroll-reveal explainer directly under a hero, naming
   the actual product components (Aircall-style pattern). White-base
   variant: soft steel-blue/pale-aqua color washes over --light-bg
   instead of the dark navy treatment, centered text ghosting from a
   faint --text-primary tint up to full contrast. Shared across
   index.html, engine-text-to-text-aqua.html,
   engine-speech-to-speech-aqua.html, integrations-aqua.html,
   automations-aqua.html -- see js/statement-mesh-reveal.js. Same
   proven wrapper/sticky/getBoundingClientRect progress architecture as
   .usecases-scroll-wrapper/.usecases-sticky, except progress is read
   continuously with no "settled" memory, so scrolling back up dims
   lines back down instead of a one-way reveal. Neither style-aqua.css
   nor tokens-aqua.css sets overflow-x/overflow-y on html/body
   (checked), so there's no unpaired overflow-x:hidden to fix here. ===== */

.statement-mesh-wrapper {
  position: relative;
  height: 220vh;
}

.statement-mesh-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  background: var(--light-bg);
}

.statement-mesh-sticky::before {
  content: '';
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(circle at 16% 22%, rgba(170, 208, 226, 0.4), transparent 45%),
    radial-gradient(circle at 84% 74%, rgba(113, 152, 175, 0.32), transparent 50%),
    radial-gradient(circle at 58% 8%, rgba(170, 208, 226, 0.28), transparent 42%),
    radial-gradient(circle at 6% 82%, rgba(113, 152, 175, 0.22), transparent 40%);
  filter: blur(80px);
}

/* Progress-driven white->dark background crossfade (see
   js/statement-mesh-reveal.js) reuses the SAME .usecases-sticky-style
   color-switch-point technique already proven elsewhere on the site --
   background-color itself is set inline by JS each frame, and this
   .is-dark class (toggled by that same JS once the crossfade passes
   its midpoint) swaps the blob/grain layers to alpha values tuned for
   a dark base instead of white, so they read as a glow rather than a
   washed-out pale wash once the section goes dark. */
.statement-mesh-sticky.is-dark::before {
  background:
    radial-gradient(circle at 16% 22%, rgba(170, 208, 226, 0.55), transparent 45%),
    radial-gradient(circle at 84% 74%, rgba(113, 152, 175, 0.6), transparent 50%),
    radial-gradient(circle at 58% 8%, rgba(170, 208, 226, 0.3), transparent 42%),
    radial-gradient(circle at 6% 82%, rgba(113, 152, 175, 0.4), transparent 40%);
}

.statement-mesh-sticky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}

.statement-mesh-sticky.is-dark::after {
  mix-blend-mode: overlay;
}

.statement-mesh-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  text-align: center;
}

.statement-mesh-line {
  display: block;
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.5;
  color: var(--text-muted);
}

.statement-mesh-em {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
}

.statement-mesh-line-nowrap {
  white-space: nowrap;
}

.statement-mesh-italic {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 1.05em;
}

@media (max-width: 768px) {
  /* Scroll-locked pin never fits a narrow viewport (CIPHER-OS
     MOBILE-FIRST RULES) -- release it back to normal flow and let
     js/statement-mesh-reveal.js's own isPinned() check show every
     line fully revealed instead of stuck mid-fade. */
  .statement-mesh-wrapper {
    height: auto;
  }

  /* RELATIVE, NOT STATIC. Relative is still normal flow and still fails
     isPinned() (which tests for 'sticky'), but it stays the containing block
     of the ::before glow (inset: -10%). Static handed that job to the
     wrapper, which clips nothing, so the glow's 120% width escapes this
     element's overflow:hidden and made every page carrying this section
     scroll sideways on a phone: 429px wide at 390, 845px at 768. */
  .statement-mesh-sticky {
    position: relative;
    height: auto;
    padding: var(--space-6) var(--space-3);
  }
}

/* ----- Agent avatar frames (index.html only) — 3 left / 2 right,
   sitting in the side margins around the centered text, tied to the
   same scroll progress as the line reveal (see
   js/statement-mesh-reveal.js). PLACEHOLDER content — see NOTES.md. ----- */

.statement-avatars-col {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 260px;
  pointer-events: none;
}

/* Anchored off the text block's own half-width (.statement-mesh-inner
   is max-width: 860px, i.e. 430px each side of center) rather than a
   fixed viewport-edge offset, so the 40px gap to the text stays
   constant at any viewport width instead of drifting wider on large
   screens or risking overlap on narrower ones. Left column is
   positioned via its RIGHT edge (nearest the text); right column via
   its LEFT edge -- each item's own offset (0-60px, set inline) is then
   read from that near edge, so proximity-to-text is independent of any
   individual item's width. */
.statement-avatars-left {
  right: calc(50% + 470px);
}

.statement-avatars-right {
  left: calc(50% + 470px);
}

/* Each item carries its OWN top + right/left offset (set inline per
   element in the markup) so the 8 pieces genuinely scatter across the
   margin instead of stacking on one shared axis -- .statement-avatars-
   col is only an anchor/containing block now, not a layout container.
   Base rotation comes from each element's data-tilt attribute; js/
   statement-mesh-reveal.js reads it once and folds it into the same
   transform string as the scroll-driven scale, so rotation, scale and
   the reveal/lighting-up animation all keep working together. */

.statement-side-item {
  position: absolute;
}

.statement-avatar-frame {
  width: 72px;
  height: 72px;
  padding: 5px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
  opacity: 0;
}

.statement-avatar-icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 13px;
  object-fit: cover;
}

/* Workflow widget badges interspersed with the avatars -- reuses
   .automation-icon/.automation-icon.active verbatim (the exact
   lighting-up technique already built for the homepage's Workflow
   Automation feature card: muted circle -> accent-amber glow, see
   features-demo.js/automationChat etc.), just scroll-triggered here
   instead of on an interval. */

.statement-widget-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border-radius: var(--radius-ui);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  opacity: 0;
  white-space: nowrap;
}

.statement-widget-label {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Mini live-preview widgets (engine-text-to-text/speech-to-speech
   explanatory-sentence sections) -- the same .statement-side-item
   scatter/rotate/reveal treatment as the badge cards above, just a
   larger card that also contains its own internally-staged content
   (chat bubbles reusing .chat-bubble/.bubble-enter-active verbatim,
   or a status crossfade), driven via the generic data-reveal-at
   sub-item logic in js/statement-mesh-reveal.js. */

.statement-mini-widget {
  width: 232px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
  white-space: normal;
}

.statement-mini-widget .chat-thread {
  gap: 8px;
}

.statement-mini-widget .chat-bubble {
  max-width: 92%;
  padding: 9px 12px;
  font-size: 12.5px;
}

.statement-call-status {
  position: relative;
  min-height: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
}

.statement-call-status .status-progress {
  display: block;
  color: var(--text-secondary);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.statement-call-status .status-booked {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--dark-bg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.statement-call-status.is-active .status-progress {
  opacity: 0;
}

.statement-call-status.is-active .status-booked {
  opacity: 1;
}

/* Automations page mini-widget: chat -> gear -> check chain, same
   visual language as the homepage's Workflow Automation bento card
   (.automation-icon/.automation-line there), rebuilt here as a
   self-looping CSS animation (no JS timer) since this card auto-plays
   continuously once scrolled into view, independent of the one-shot
   reveal driving the card's own opacity/scale/rotation. */

.statement-chain-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-2) 0;
}

.statement-chain-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-muted);
  animation: statementChainLight 3.6s ease-in-out infinite;
}

.statement-chain-icon-1 { animation-delay: 0s; }
.statement-chain-icon-2 { animation-delay: 0.9s; }
.statement-chain-icon-3 { animation-delay: 1.8s; }

.statement-chain-icon-2 svg {
  animation: statementChainSpin 3.6s ease-in-out infinite;
  animation-delay: 0.9s;
}

.statement-chain-icon-3 svg {
  animation: statementChainPop 3.6s ease-in-out infinite;
  animation-delay: 1.8s;
}

.statement-chain-line {
  flex: 1;
  max-width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--border);
  position: relative;
  overflow: hidden;
}

.statement-chain-line::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 0%;
  background: var(--accent-amber);
  animation: statementChainFill 3.6s ease-in-out infinite;
}

.statement-chain-line-1::after { animation-delay: 0.35s; }
.statement-chain-line-2::after { animation-delay: 1.25s; }

.statement-chain-caption {
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

@keyframes statementChainLight {
  0%, 8% { background: var(--surface-alt); color: var(--text-muted); box-shadow: none; }
  14%, 22% { background: var(--accent-amber); color: var(--dark-bg); box-shadow: 0 0 0 4px rgba(170, 208, 226, 0.35); }
  30%, 100% { background: var(--surface-alt); color: var(--text-muted); box-shadow: none; }
}

@keyframes statementChainSpin {
  0%, 13% { transform: rotate(0deg); }
  22% { transform: rotate(180deg); }
  30%, 100% { transform: rotate(180deg); }
}

@keyframes statementChainPop {
  0%, 13% { transform: scale(1); }
  18% { transform: scale(1.3); }
  24%, 100% { transform: scale(1); }
}

@keyframes statementChainFill {
  0%, 100% { width: 0%; }
  30% { width: 100%; }
  70% { width: 100%; }
  90% { width: 0%; }
}

@media (prefers-reduced-motion: reduce) {
  .statement-chain-icon,
  .statement-chain-icon-2 svg,
  .statement-chain-icon-3 svg,
  .statement-chain-line::after {
    animation: none;
  }
}

@media (max-width: 1099px) {
  /* No real side margin left once the centered text block approaches
     the viewport width -- hide rather than overlap it. */
  .statement-avatars-col {
    display: none;
  }
}

/* ===== Capabilities section ===== */

.capabilities-section {
  background: var(--light-bg);
  padding: var(--space-5) 0 0;
}

.capabilities-intro {
  max-width: 600px;
  margin: 0 auto var(--space-3);
  padding: 0 var(--space-3);
  text-align: center;
}

.capabilities-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);
}

.capabilities-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);
}

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

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

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

.cap-scroll-wrapper {
  position: relative;
  width: 100%;
  height: 280vh;
}

.cap-sticky {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  background: var(--light-bg);
}

.cap-stack {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cap-card {
  position: relative;
  z-index: 1;
  background: var(--cap-card-bg, #ffffff);
  border: 0.5px solid var(--cap-card-border, var(--border));
  border-radius: var(--radius-card);
  border-left: 3px solid transparent;
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  box-shadow: none;
  transition: min-height 0.4s var(--ease), border-left-color 0.4s var(--ease), box-shadow 0.4s var(--ease), transform 0.4s var(--ease);
}

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

.cap-card-name {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cap-collapsed-text, var(--text-secondary));
  transition: color 0.4s var(--ease);
}

.cap-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  color: var(--cap-desc-text, var(--text-secondary));
  max-width: 640px;
  margin-top: var(--space-2);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s var(--ease), max-height 0.4s var(--ease), margin-top 0.4s var(--ease);
}

.cap-card.active {
  z-index: 2;
  min-height: 190px;
  border-left-color: var(--accent-amber);
  transform: translateY(-2px);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(170, 208, 226, 0.14);
}

.cap-card.active .cap-card-name {
  color: var(--cap-active-text, var(--text-primary));
}

.cap-card.active .cap-card-desc {
  opacity: 1;
  max-height: 100px;
}

@media (max-width: 768px) {
  /* Pin can't fit a phone viewport (CIPHER-OS MOBILE-FIRST RULES). Below
     768px this section is replaced by the .mobile-carousel built by
     capabilities-scroll.js (swipeable cards + dot indicators, fixed dark
     state) — see js/mobile-carousel.js. */
  .cap-scroll-wrapper {
    height: auto !important;
  }

  .cap-sticky {
    position: static !important;
    height: auto !important;
    padding: 0;
    background: #000000 !important;
  }

  .cap-stack {
    display: none;
  }
}

/* ===== Integrations strip (homepage teaser for integrations-aqua.html)
   ===== A quiet, light-touch bridge section, not a full feature block —
   sits between Capabilities and the CTA band. Link color/hover mechanic
   matches this page's own existing .usecases-cta convention (accent-
   amber text, underline the label span on hover) rather than the
   accent-steel used on the newer standalone pages, since this section
   lives on index.html itself and should match ITS established pattern. */

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

.integrations-strip-container {
  max-width: 780px;
  margin: 0 auto;
  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-2);
}

.integrations-strip-heading {
  font-size: clamp(32px, 4.5vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

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

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

.integrations-strip-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: var(--space-4);
}

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

.integrations-strip-pill svg,
.integrations-strip-pill i {
  width: 18px;
  height: 18px;
  color: var(--accent-steel);
}

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

.integrations-strip-link:hover {
  gap: 11px;
}

.integrations-strip-link:hover span {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .integrations-strip-pills {
    gap: 8px;
  }

  .integrations-strip-pill {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* ===== Site-wide liquid-fill button (see NOTES.md) ===== */

.btn-liquid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.4s ease;
}

.btn-liquid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--dark-bg);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s ease;
  z-index: -1;
}

.btn-liquid:hover {
  color: #ffffff;
}

.btn-liquid-white-fill::before {
  background: #ffffff;
}

.btn-liquid-white-fill:hover {
  color: var(--text-primary);
}

.btn-liquid-amber-fill::before {
  background: var(--accent-amber);
}

.btn-liquid-amber-fill:hover {
  color: var(--text-primary);
}

.btn-liquid:hover::before {
  transform: scaleY(1);
}

/* ===== CTA band section ===== */

.cta-band-section {
  background: var(--black);
  padding: 0;
}

.cta-band {
  width: 100%;
}

.cta-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 9;
  min-height: 380px;
  overflow: hidden;
  background: var(--black);
}

/* Blends the CTA video's own bottom edge into whatever section follows
   it, so the cut reads as a continuous transition instead of a hard
   seam -- the video itself is a plain color (medium steel-blue
   waveform), not guaranteed to match either target color at the exact
   pixel row where it meets the next section.
   Default targets var(--dark-bg): confirmed the section immediately
   after .cta-band-section is either .footer-section or .faq-section
   on every page EXCEPT index.html/landing-hero-bot.html/
   landing-hero-blob.html, and both of those resolve to the same
   var(--dark-bg) -- so one default rule covers the majority correctly.
   Originally only existed in engines-page-aqua.css (Text-to-Text/
   Speech-to-Speech); moved here so every page sharing this same CTA
   band picks it up instead of needing it re-added per page. */
.cta-video-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--dark-bg));
  z-index: 1;
  pointer-events: none;
}

/* The 3 exceptions: CTA -> Pricing (var(--light-bg)), not CTA ->
   Footer/FAQ -- fading to dark right before a light section would be
   wrong, so these get the light-target override instead of the
   default above. */
.cta-video-wrap-to-light::after {
  background: linear-gradient(to bottom, transparent, var(--light-bg));
}

.cta-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The waveform clip's content sits low in its 16:9 frame; cropping
     it into this section's wider 21:9 box with a plain center
     object-position would cut into the bars. Anchoring toward the
     bottom keeps them in view instead. */
  object-position: center 85%;
  z-index: 0;
}

.cta-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-6) var(--space-3) 0;
  text-align: center;
}

.cta-heading {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.cta-heading-sans {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  color: #ffffff;
}

.cta-heading-serif {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: #ffffff;
}

.cta-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #ffffff;
  opacity: 0.65;
  max-width: 480px;
  margin-bottom: var(--space-4);
}

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

@media (max-width: 767px) {
  .cta-video-wrap {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* ===== Pricing section ===== */

.pricing-section {
  background: var(--light-bg);
  padding: var(--space-5) var(--space-3) var(--space-4);
}

.pricing-intro {
  max-width: 680px;
  margin: 0 auto var(--space-5);
  text-align: center;
}

.pricing-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);
}

.pricing-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);
}

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

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

.pricing-subtext {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.pricing-arch-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.5;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  max-width: 1280px;
  margin: 0 auto;
  align-items: stretch;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--space-3);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.pricing-card-featured {
  transform: scale(1.05);
  border: 2px solid var(--accent-amber);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.pricing-card-featured:hover {
  transform: scale(1.05) translateY(-4px);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.16);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent-amber);
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.pricing-tag {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.pricing-name {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}

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

.pricing-price {
  font-family: 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.pricing-price-dash {
  letter-spacing: 0.05em;
}

.pricing-price-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
}

.pricing-billing-sub {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.pricing-included-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}

.pricing-bullets {
  list-style: none;
  flex: 1;
  margin-bottom: var(--space-3);
}

.pricing-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-primary);
  padding: 4px 0;
}

.pricing-bullets li svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-amber);
}

.pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: var(--radius-ui);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  margin-top: auto;
}

.pricing-btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-primary);
}

.pricing-btn-solid {
  background: var(--dark-bg);
  color: #ffffff;
  border: 1px solid var(--dark-bg);
}

.pricing-full-link-wrap {
  text-align: center;
  margin-top: var(--space-4);
}

.pricing-full-link {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
}

.pricing-full-link:hover {
  text-decoration: underline;
}

@media (max-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pricing-card-featured {
    transform: none;
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .pricing-card-featured {
    grid-column: span 1;
  }
}

/* ===== Use Cases section ===== */

.usecases-section {
  background: var(--light-bg);
}

.usecases-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-2);
  text-align: center;
}

.usecases-label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-2);
}

.usecases-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.usecases-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);
}

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

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

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

.usecases-scroll-wrapper {
  position: relative;
  height: 450vh;
}

/* Optional single-line closer directly under a pinned usecases section
   (currently only automations-aqua.html's "Always-On" section uses it) --
   sits on the section's own light background since the pin has already
   released back to normal flow by the time this renders. */
.usecases-closing-line {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
  text-align: center;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--text-secondary);
}

.usecases-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  background: var(--light-bg);
  color: var(--text-primary);
}

.usecases-columns {
  display: flex;
  align-items: stretch;
  gap: var(--space-6);
  max-width: 1600px;
  width: 100%;
  height: 68vh;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.usecases-list-col {
  width: 38%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.usecases-list {
  list-style: none;
}

.usecases-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 56px;
  position: relative;
}

.usecases-item-marker {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  border-radius: 2px;
  background: var(--accent-amber);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.usecases-item.active .usecases-item-marker {
  opacity: 1;
}

.usecases-item-name {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-weight: 500;
  color: inherit;
  opacity: 0.4;
  transition: opacity 0.3s ease, font-weight 0.3s ease;
}

.usecases-item.active .usecases-item-name {
  font-weight: 700;
  opacity: 1;
}

.usecases-detail {
  position: relative;
  min-height: 140px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(128, 128, 128, 0.2);
}

.usecases-detail-desc {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(170, 208, 226, 0.85);
  max-width: 420px;
  transition: opacity 0.3s ease;
}

.usecases-detail-desc.fading {
  opacity: 0;
}

.usecases-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--space-2);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--accent-amber);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.usecases-cta:hover span {
  text-decoration: underline;
}

.usecases-cta.fading {
  opacity: 0;
}

.usecases-visual-col {
  width: 62%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  padding: var(--space-3);
  overflow: hidden;
}

.usecases-progress-bar {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-3);
  flex-shrink: 0;
}

.usecases-progress-segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}

.usecases-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent-amber);
}

.usecases-transcript-stack {
  position: relative;
  flex: 1;
}

.usecases-transcript {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--space-3);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.usecases-transcript.active {
  opacity: 1;
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.chat-bot-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--light-bg);
  color: var(--accent-amber);
  flex-shrink: 0;
}

.chat-bot-avatar i {
  width: 16px;
  height: 16px;
}

.chat-bot-name {
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.chat-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
  margin-left: auto;
}

.chat-thread {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  overflow: hidden;
}

.voice-player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  margin-bottom: var(--space-2);
  background: rgba(170, 208, 226, 0.15);
  border: 0.5px solid rgba(170, 208, 226, 0.2);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.voice-player-play {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-amber);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.voice-player-play svg {
  margin-left: 1px;
}

.voice-player-wave {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}

.voice-player-wave span {
  flex: 1;
  min-width: 2px;
  max-width: 3px;
  height: 40%;
  border-radius: 2px;
  background: var(--accent-amber);
  opacity: 0.55;
  animation: voiceWaveBounce 1.4s ease-in-out infinite;
}

.voice-player-wave span:nth-child(2n) { height: 70%; animation-delay: 0.1s; }
.voice-player-wave span:nth-child(3n) { height: 90%; animation-delay: 0.2s; }
.voice-player-wave span:nth-child(4n) { height: 55%; animation-delay: 0.3s; }
.voice-player-wave span:nth-child(5n) { height: 100%; animation-delay: 0.15s; }
.voice-player-wave span:nth-child(7n) { height: 35%; animation-delay: 0.25s; }

.voice-player-duration {
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

@keyframes voiceWaveBounce {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

.chat-bubble {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: var(--radius-ui);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.chat-bubble.bubble-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.chat-typing {
  display: flex;
  align-items: center;
}

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

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  opacity: 0.4;
  animation: typingBounce 1s ease-in-out infinite;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

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

.chat-bubble-customer {
  align-self: flex-start;
  background: var(--surface-alt);
  color: var(--text-primary);
  border-bottom-left-radius: 2px;
}

.chat-bubble-bot {
  align-self: flex-end;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface-alt);
  color: var(--text-primary);
  border-bottom-right-radius: 2px;
}

.chat-bubble-bot i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--accent-amber);
}


@media (max-width: 768px) {
  /* Pin can't fit a phone viewport (CIPHER-OS MOBILE-FIRST RULES). Below
     768px this section is replaced by a .mobile-carousel (swipeable
     cards + dot indicators, fixed dark state) built by whichever script
     owns this wrapper — usecases-scroll-aqua.js, wl-configurable-scroll.js,
     or integrations-scroll.js, all three reuse these same .usecases-*
     classes. See js/mobile-carousel.js for the shared builder. */
  .usecases-scroll-wrapper {
    height: auto !important;
  }

  .usecases-sticky {
    position: static !important;
    height: auto !important;
    padding: 0;
  }

  .usecases-columns {
    display: none;
  }
}

/* ===== Mobile carousel (shared component) =====
   Generic swipeable-card replacement for any pinned scroll-cycle section
   below 768px: Capabilities, Use Cases, Configurable (whitelabel),
   Infrastructure Boundary (whitelabel), Category Tour (integrations).
   Built at runtime by js/mobile-carousel.js + each section's own scroll
   script. Hidden entirely above 768px — desktop keeps the pinned/scroll
   version untouched. */

.mobile-carousel-wrap {
  display: none;
}

@media (max-width: 768px) {
  .mobile-carousel-wrap {
    display: block;
    background: #000000;
    padding: var(--space-5) 0 var(--space-4);
  }

  .mobile-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mobile-carousel::-webkit-scrollbar {
    display: none;
  }

  .mobile-carousel-card {
    flex: 0 0 84%;
    scroll-snap-align: center;
    background: rgba(255, 255, 255, 0.06);
    border: 0.5px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-card);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .mobile-carousel-visual {
    border-radius: var(--radius-ui);
    overflow: hidden;
  }

  .mobile-carousel-title {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: #ffffff;
  }

  .mobile-carousel-desc {
    font-family: 'Inter', sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
  }

  .mobile-carousel-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-amber);
    text-decoration: none;
  }

  .mobile-carousel-eyebrow {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 0 24px;
    margin-bottom: var(--space-3);
  }

  .mobile-carousel-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: var(--space-3);
  }

  .mobile-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .mobile-carousel-dot.active {
    background: var(--accent-amber);
    transform: scale(1.4);
  }
}

/* ===== FAQ section ===== */

.faq-section {
  position: relative;
  overflow: hidden;
  background: var(--dark-bg);
  padding: var(--space-7) var(--space-3);
  /* The usecases section above this one is a pinned/sticky scroll
     effect over a 450vh wrapper; vh doesn't always resolve to a whole
     pixel at every viewport height, so the pinned section's bottom
     edge can round short by a hairline. Overlapping up and painting
     over that row here (rather than trying to fix the rounding at
     the source) guarantees no gap shows through, regardless of which
     side the sub-pixel row would have landed on. */
  margin-top: -2px;
}

.faq-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 140px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--dark-bg) 0%, transparent 100%);
}

.faq-section::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.faq-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 90%);
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(170, 208, 226, 0.35) 0%, rgba(113, 152, 175, 0.15) 40%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.faq-card {
  position: relative;
  z-index: 1;
  max-width: 860px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  background-blend-mode: luminosity;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-card);
  padding: var(--space-6) var(--space-5) var(--space-5);
}

.faq-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.5) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.faq-card-top {
  text-align: center;
  margin-bottom: var(--space-4);
}

.faq-badge {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--dark-bg);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  margin-bottom: var(--space-2);
}

.faq-heading {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 4vw, 40px);
  letter-spacing: -0.02em;
  color: #ffffff;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  /* Solid/high-opacity on its own now, not counting on .faq-glow behind
     it to read as white -- .faq-glow's radial mask is sized off the
     .faq-section box, which can grow far taller than usual (faq-aqua.html
     stacking several .faq-cards during a multi-result search) and stop
     reaching cards away from the new vertical center. blur(20px) stays
     for the subtle glass edge/depth, but opacity alone now carries the
     white-card look everywhere, regardless of what's behind it. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 0.5px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-ui);
  overflow: hidden;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.faq-item.active {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--accent-amber);
}

.faq-item-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: 'Inter', sans-serif;
}

.faq-item-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.faq-item-question {
  flex: 1;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.faq-item-icon {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--text-primary);
  flex-shrink: 0;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease);
}

.faq-item-icon::before,
.faq-item-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: #ffffff;
}

.faq-item-icon::before {
  width: 10px;
  height: 1.5px;
  transform: translate(-50%, -50%);
}

.faq-item-icon::after {
  width: 1.5px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.faq-item.active .faq-item-icon {
  background: var(--accent-amber);
  transform: rotate(45deg);
}

.faq-item-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 var(--space-3);
  transition: max-height 0.4s var(--ease), opacity 0.3s var(--ease), padding 0.4s var(--ease);
}

.faq-item.active .faq-item-answer {
  max-height: 240px;
  opacity: 1;
  padding: 0 var(--space-3) var(--space-3);
}

.faq-item-answer p {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.faq-footer {
  text-align: center;
  margin-top: var(--space-4);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #ffffff;
}

.faq-footer a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
}

@media (max-width: 900px) {
  .faq-card {
    padding: var(--space-5) var(--space-3) var(--space-4);
  }

  .faq-item-question {
    font-size: 14px;
  }

  /* .faq-item's own background (not this breakpoint) now carries the
     white-card look at every width, so no override is needed here
     anymore -- kept only as a marker in case that ever changes again. */
}

/* ===== Footer section ===== */

.footer-section {
  background: var(--dark-bg);
  padding: var(--space-3);
}

.footer-card {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  background-image: url("../img/footer-aqua-mesh.webp");
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: var(--dark-bg);
  padding: var(--space-5) var(--space-4) 0;
  min-height: clamp(480px, 46vw, 680px);
}

/* Layered on TOP of the image above (not replacing it) -- a contained
   CSS glow, same approach as .faq-glow, centered behind the card's
   content and clipped by the card's own overflow:hidden so it never
   touches the outer section edges. */
.footer-card::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(900px, 90%);
  height: 70%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(170, 208, 226, 0.35) 0%, rgba(113, 152, 175, 0.15) 40%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}

.footer-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-nav a {
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}

.footer-nav a:hover {
  opacity: 0.7;
}

.footer-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer-nav-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #ffffff;
  text-align: left;
}

.footer-nav-chevron {
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}

.footer-nav-group.open .footer-nav-chevron {
  transform: rotate(180deg);
}

.footer-nav-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), opacity 0.2s ease;
}

.footer-nav-group.open .footer-nav-panel {
  max-height: 80px;
  opacity: 1;
}

.footer-nav a.footer-nav-sublink {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}

.footer-nav-sublink:hover {
  opacity: 0.7;
}

.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: var(--space-2);
}

.footer-social-link {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  transition: background 0.3s var(--ease);
}

.footer-social-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.15) 80%,
    rgba(255, 255, 255, 0.45) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.footer-social-link:hover {
  background: rgba(255, 255, 255, 0.08);
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
}

.footer-email {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-copyright {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: var(--space-2);
}

/* Four links since the cookie policy and Cookie Settings joined Terms and Privacy:
   on a phone they no longer fit one line, so the ROW wraps and each link does not
   (unwrapped, "Algemene Voorwaarden" broke inside itself and the last link clipped). */
.footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
  margin-top: 6px;
}

.footer-legal-row > * {
  white-space: nowrap;
}

.footer-legal-link {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.3s var(--ease);
}

.footer-legal-link:hover {
  color: rgba(255, 255, 255, 0.8);
}

.footer-wordmark-wrap {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  width: clamp(320px, 65vw, 1300px);
  text-align: center;
  transform: translate(-50%, -10%) scale(0.98);
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.footer-wordmark-logo {
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.6;
  filter: brightness(0) invert(1);
}

.footer-wordmark-wrap.is-visible {
  transform: translate(-50%, -10%) scale(1);
  opacity: 1;
}

/* Ambient glow sitting behind the bust (z:1, same tier as the wordmark
   it partially covers) -- sized well beyond the figure's own silhouette
   so it reads as soft light, not a hard shape, and blends into the
   striped mesh background around it. */
.footer-avatar-glow {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: clamp(20px, 3vw, 60px);
  width: clamp(470px, 62vw, 1020px);
  height: clamp(470px, 62vw, 1020px);
  transform: translateX(-50%);
  background: radial-gradient(circle, #7198AF 0%, #153A50 60%, transparent 80%);
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

/* Bust PNG has a genuine alpha channel (cut out from its source render)
   so no mask-image/background-color is needed here -- transparency
   handles the blending natively. Sits at z:2, in FRONT of both the glow
   and the wordmark, per the reference: oversized text behind, figure
   overlapping the middle. Anchored to the top (not vertically centered)
   so the head reaches up near the card's top edge, just clear of the
   nav row. */
.footer-avatar-img {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: clamp(70px, 8vw, 110px);
  width: clamp(360px, 46vw, 680px);
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 900px) {
  .footer-card {
    padding: var(--space-4) var(--space-3) 0;
    min-height: clamp(420px, 60vw, 560px);
  }
}

@media (max-width: 767px) {
  .footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .footer-contact {
    align-items: flex-start;
    text-align: left;
  }

  .footer-wordmark-wrap {
    width: clamp(220px, 78vw, 500px);
  }

  .footer-avatar-glow {
    width: clamp(320px, 78vw, 520px);
    height: clamp(320px, 78vw, 520px);
  }

  .footer-avatar-img {
    width: clamp(230px, 62vw, 380px);
  }
}

/* Aqua variant: partial CSS bridge over video/frame backgrounds whose
   pixels are still baked with the old amber/black palette -- see
   NOTES.md, this is not a full recolor, just a tint sitting between the
   background layer and its scrim/spotlight overlay. */
.video-tint-overlay {
  position: absolute;
  inset: 0;
  background: rgba(21, 58, 80, 0.35);
  pointer-events: none;
  z-index: 1;
}

/* ── Live engine card ────────────────────────────────────────────────────────
   #engineSampleText was a single paragraph holding one scripted sentence; it is
   now the conversation. Type scale and colour stay on the card's own tokens
   (--text-primary, --surface-alt, --accent-amber) so the glass panel is
   inherited rather than restated. */
.engine-thread {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: none;
  margin: 0 0 var(--space-2);
  padding-right: 4px;
}
.engine-msg {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: var(--radius-ui);
  max-width: 82%;
  animation: engine-msg-in 0.28s ease both;
}
.engine-msg-bot {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.engine-msg-user {
  align-self: flex-end;
  background: var(--accent-amber);
}
@keyframes engine-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The progress bar becomes the thinking indicator — it already sits between the
   thread and the composer, so nothing moves. */
.engine-progress-fill.is-thinking {
  width: 100%;
  animation: engine-thinking 1.1s ease-in-out infinite;
}
@keyframes engine-thinking { 0%,100% { opacity: 0.25; } 50% { opacity: 0.9; } }

.engine-play-btn.is-busy { opacity: 0.55; cursor: wait; }
.engine-play-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Speech-to-Speech: the card is a voice call, so the composer is just play / pause.
   The text box and its counter are hidden rather than removed — the Text-to-Text tab
   on the same card still uses them. While a call is live the progress bar shows the
   microphone level, and the button carries a slow pulse. */
.engine-card.is-voice .engine-input,
.engine-card.is-voice .engine-char-count { display: none; }
.engine-card.is-voice .engine-input-row { justify-content: center; }
.engine-card.is-voice .engine-play-btn { width: 56px; height: 56px; }
.engine-card.is-voice .engine-play-btn svg { width: 20px; height: 20px; }
.engine-card.is-voice .engine-progress-fill:not(.is-thinking) { transition: width 0.08s linear; }
.engine-play-btn.is-live { animation: engine-live-pulse 1.8s ease-out infinite; }
@keyframes engine-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(170, 208, 226, 0.75); }
  70%  { box-shadow: 0 0 0 14px rgba(170, 208, 226, 0); }
  100% { box-shadow: 0 0 0 0 rgba(170, 208, 226, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .engine-play-btn.is-live { animation: none; box-shadow: 0 0 0 3px rgba(170, 208, 226, 0.7); }
}

/* A bot message's single action: the hand-off link to a page with the form this
   text card cannot render, or Try again after a refusal. */
.engine-msg-action {
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--text-primary);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.engine-msg-action:disabled { color: var(--text-secondary); cursor: default; }

/* Engine tabs — the non-active states the component never had.
   .engine-tab.active existed; nothing distinguished the others from plain text,
   so a tab gave no sign it was pressable and keyboard focus was invisible. */
.engine-tab {
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.engine-tab:hover:not(.active) {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.85);
  color: var(--text-primary);
}
.engine-tab:active:not(.active) { transform: scale(0.98); }
.engine-tab:focus-visible {
  outline: 2px solid var(--accent-steel);
  outline-offset: 2px;
}
.engine-tab.active { cursor: default; }
.engine-tab svg { flex-shrink: 0; }