/* ===================== Tokens ===================== */
:root {
  --page: #ffffff;

  /* RGB channels: also used by the Tailwind config in landing.html */
  --green-rgb: 67 99 46;
  --ink-rgb: 30 42 20;
  --muted-rgb: 87 99 81;

  --green: rgb(var(--green-rgb));
  --green-dark: #2d4520;
  --ink: rgb(var(--ink-rgb));
  --muted: rgb(var(--muted-rgb));

  --serif: "PT Serif", Georgia, serif;
  --sans: "Figtree", system-ui, sans-serif;
  --mono: "JetBrains Mono", monospace;
}

/* ===================== Base ===================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem; /* keeps anchor targets clear of the floating bar */
}
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--page);
  color: var(--ink);
  overflow-x: hidden; /* safety net. Comment this out while testing to see real overflow */
}

/* Content container that mirrors the floating navbar's footprint exactly */
.align-nav {
  width: calc(100% - 1.5rem);
  max-width: 1400px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .align-nav {
    width: 71%;
  }
}
/* Nudge the hero + showcase text columns and the testimonial block a touch right */
.hero .align-nav > :first-child,
#modules-showcase .align-nav > :first-child,
.t-head,
.t-stage {
  transform: translateX(8px);
}
/* ...and take the width back so the shifted track still ends flush with the navbar */
.t-stage {
  margin-right: 8px;
}

.fluid-h1 {
  font-size: clamp(2.1rem, 1rem + 2.6vw + 0.5vh, 3.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
}
.fluid-body {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
h1.font-display,
h2.font-display {
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* ===================== Animations ===================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.fade-up {
  animation: fadeUp 0.7s ease both;
}
.fade-up.d1 {
  animation-delay: 0.1s;
}
.fade-up.d2 {
  animation-delay: 0.2s;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .fade-up {
    animation: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .agent-card {
    transition: none;
  }
}

/* ===================== Floating pill navbar ===================== */
#siteNav {
  top: 14px;
  width: calc(100% - 1.5rem); /* phones: almost full width */
  max-width: 1400px;
  margin-inline: auto; /* centers the fixed bar */
}
@media (min-width: 1024px) {
  #siteNav {
    width: 71%;
  }
}

.nav-bar {
  height: 64px;
  padding: 0 1.25rem 0 1.5rem;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
@media (min-width: 768px) {
  .nav-bar {
    height: 72px;
    padding: 0 1.5rem 0 2rem;
  }
}
/* Very small phones: give the logo, menu and sign-in room */
@media (max-width: 400px) {
  .nav-bar {
    height: 58px;
    padding: 0 0.5rem 0 1rem;
  }
  .nav-bar > a img {
    height: 26px;
  }
}

/* After scrolling (landing.js adds .is-scrolled): glass */
.is-scrolled .nav-bar {
  background: rgb(255 255 255 / 0.75);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-color: rgb(255 255 255 / 0.7);
  box-shadow: 0 10px 30px -12px rgb(var(--ink-rgb) / 0.25);
}

/* ===================== Menu button (three bars) ===================== */
.menu-btn {
  display: flex;
  align-items: center;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #000;
  cursor: pointer;
}
.menu-btn:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.menu-icon {
  width: 24px;
  height: 30px; /* bars sit close together */
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.menu-icon .bar {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.3s ease,
    opacity 0.2s ease;
}
/* Bars sit 12 units apart in the viewBox, so the X needs a 12px travel */
.is-menu-open .bar-1 {
  transform: translateY(12px) rotate(45deg);
}
.is-menu-open .bar-2 {
  opacity: 0;
}
.is-menu-open .bar-3 {
  transform: translateY(-12px) rotate(-45deg);
}

/* ===================== Sign In button (image) ===================== */
.nav-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-signin img {
  height: 38.5px; /* matches the menu button (30px icon + 8px padding on each side) */
  width: auto;
  display: block;
  object-fit: contain;
}
@media (max-width: 400px) {
  .nav-signin img {
    height: 34px;
  }
}

.menu-search svg,
.chev {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ===================== Menu dropdown panel ===================== */
.menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(300px, 100%);
  max-height: calc(100svh - 110px);
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  color: #000;
  border-radius: 18px;
  box-shadow: 0 20px 40px -18px rgb(0 0 0 / 0.45);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    visibility 0s linear 0.25s;
}
.is-menu-open .menu-panel {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

.menu-search {
  display: flex;
  margin-bottom: 6px;
  border: 2px solid #000;
  background: #fff;
}
.menu-search:focus-within {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.menu-search input {
  flex: 1;
  min-width: 0;
  padding: 1.15rem 1.25rem;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 1.2rem;
}
.menu-search button {
  width: 64px;
  border: 0;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-search button svg {
  width: 27px;
  height: 27px;
}

.menu-list,
.menu-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu-list > li {
  position: relative;
  border-bottom: 1px solid #e2e2e2;
}

.menu-list a,
.menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  font-size: 1rem;
  font-weight: 700 !important;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.menu-list a:hover,
.menu-row:hover,
.menu-list a:focus-visible,
.menu-row:focus-visible {
  background: #f3f3f3;
}

.menu-list > li.is-current::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 7px;
  background: #000;
}

.chev {
  width: 22px;
  height: 22px;
  transition: transform 0.25s ease;
}
.has-sub.open .chev {
  transform: rotate(180deg);
}
.menu-sub {
  display: none;
  padding-bottom: 0.5rem;
}
.has-sub.open .menu-sub {
  display: block;
}
.menu-sub a {
  padding: 0.7rem 1rem 0.7rem 2rem;
  font-size: 1rem;
  font-weight: 400 !important;
}

/* ===================== Pop-up cards (menu links) ===================== */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgb(15 23 18 / 0.4);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s;
}
.popup-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.popup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: min(80svh, 600px);
  background: #fff;
  color: #000;
  border-radius: 18px;
  padding: 1.75rem 1.75rem 2rem;
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.5);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s ease;
}
@media (max-width: 480px) {
  .popup-card {
    padding: 1.4rem 1.15rem 1.6rem;
  }
  .doc-lock-form {
    flex-direction: column;
  }
  .doc-lock-form button {
    width: 100%;
  }
}
.popup-overlay.is-open .popup-card {
  transform: none;
}

.popup-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: #f1f1ee;
  color: #000;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.popup-close:hover {
  background: #000;
  color: #fff;
}

.popup-title {
  margin: 0 0 1rem;
  font-family: var(--font-display, "PT Serif", Georgia, serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  padding-right: 2.5rem;
}

.popup-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
  scrollbar-width: thin; /* Firefox: visible scrollbar */
  scrollbar-color: #c4c4bf transparent;
  scrollbar-gutter: stable;
}
.popup-body::-webkit-scrollbar {
  display: block; /* override the global hidden scrollbar */
  width: 8px;
}
.popup-body::-webkit-scrollbar-track {
  background: transparent;
}
.popup-body::-webkit-scrollbar-thumb {
  background: #c4c4bf;
  border-radius: 999px;
}
.popup-body a {
  color: #1a5bdb; /* make links blue and look like links */
  text-decoration: underline;
  text-underline-offset: 2px;
}
.popup-body a:hover {
  color: #0b3bb0;
}
.popup-contact {
  margin-top: 1.25rem;
}
.cookie-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.cookie-btn {
  flex: 1;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  border: 1.5px solid #000;
  background: #fff;
  font: inherit;
  font-weight: 700;
  color: #000;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.cookie-btn.accept {
  background: #000;
  color: #fff;
}
.cookie-btn:hover {
  opacity: 0.85;
}
.popup-body p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: #333;
}
.popup-body p:last-child {
  margin-bottom: 0;
}
.popup-body strong {
  font-weight: 700;
  color: #000;
}

/* Data-room document list + password gate */
.doc-list {
  display: grid;
  gap: 0.6rem;
}
.doc-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgb(var(--ink-rgb) / 0.12);
  border-radius: 12px;
  background: #fafaf8;
  color: #000;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.doc-item:hover {
  background: #f1f1ee;
}
.doc-pdf {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: center;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #2f5d6b;
  color: #fff;
}
.doc-name {
  font-size: 1rem;
  font-weight: 600;
}

.doc-lock {
  text-align: center;
  padding: 1rem 0;
}
.doc-lock-icon {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.doc-lock-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #000;
  margin: 0 0 0.35rem;
}
.doc-lock-note {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.doc-lock-form {
  display: flex;
  gap: 0.5rem;
}
.doc-lock-form input {
  flex: 1;
  min-width: 0;
  padding: 0.7rem 0.85rem;
  border: 2px solid #000;
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  outline: 0;
}
.doc-lock-form input:focus {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}
.doc-lock-form button {
  padding: 0.7rem 1.2rem;
  border: 0;
  border-radius: 10px;
  background: #000;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.doc-lock-err {
  margin: 0.75rem 0 0;
  color: #b00020;
  font-size: 0.95rem;
}

/* ===================== Hero ===================== */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9rem 0 4rem;
  overflow-x: clip; /* devices bleed past the columns */
}
@media (min-width: 768px) {
  .hero {
    padding: 9rem 0 5rem;
  }
}
@media (max-width: 640px) {
  .hero {
    min-height: auto;
    padding: 7rem 0 3rem;
  }
  .hero-img {
    max-width: min(460px, 86vw);
  }
}
.hero-img {
  width: 100%;
  max-width: 460px;
  height: auto;
  display: block;
  object-fit: contain;
}
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 460px;
}
/* The picture now lives in the showcase column, so center it there */
#modules-showcase .hero-visual {
  margin-inline: auto;
  transform: none; /* small screens: centered, no shift */
}
@media (min-width: 1024px) {
  #modules-showcase .hero-visual {
    /* 0px at 1024px wide, grows to your original 95px by ~1400px */
    transform: translateX(clamp(0px, calc((100vw - 1024px) * 0.25), 95px));
  }
}
/* Sized in % so the smoke stays on the cup at every image size */
.coffee-smoke {
  position: absolute;
  left: 7%;
  bottom: 22%;
  width: 13%;
  aspect-ratio: 96 / 120;
  z-index: 2;
  pointer-events: none;
}
.smoke-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 3px rgba(176, 124, 74, 0.4));
}
.wisp {
  opacity: 0;
  animation: wisp-rise 3.4s cubic-bezier(0.33, 0.6, 0.5, 1) infinite;
}
.w2 {
  animation-delay: -1.15s;
}
.w3 {
  animation-delay: -2.3s;
}
.wisp-path {
  stroke: rgba(176, 124, 74, 0.6);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 30 70;
  animation: wisp-flow 1.8s linear infinite;
}
@keyframes wisp-rise {
  0% {
    transform: translateY(26px);
    opacity: 0;
  }
  15% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-34px);
    opacity: 0;
  }
}
@keyframes wisp-flow {
  from {
    stroke-dashoffset: 40;
  }
  to {
    stroke-dashoffset: -60;
  }
}

/* ===================== Device showcase ===================== */
/* .device-stage is the wrapper div in the hero. It is a named container
   ("devices"), so the layout switches on the space the devices really have,
   not on the viewport. .device-group is its own container for the cqw units. */
#modules-showcase {
  overflow-x: clip;
}
.device-stage {
  container: devices / inline-size;
  width: 100%;
  min-width: 0;
}

.device-group {
  --dg-s: 1; /* scale, set by JS */
  --dg-h: 0px; /* unscaled height, set by JS */

  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;

  flex: none; /* never let flexbox squeeze it */
  align-self: flex-start;
  width: 640px; /* the fixed design size */
  max-width: none;
  padding: 2rem 1rem;
  container-type: inline-size;

  /* scale the whole desk as one picture */
  transform-origin: top left;
  transform: scale(var(--dg-s));

  /* negative margins shrink the layout footprint to the scaled size */
  margin: 0;
  margin-right: calc(640px * (var(--dg-s) - 1));
  margin-bottom: calc(var(--dg-h) * (var(--dg-s) - 1));
}

.device-laptop {
  position: relative;
  width: 130%;
  z-index: 1;
  transform: translateY(4.5cqw) scale(1.15); /* was translateY(24px) */
  transform-origin: bottom left;
}

.device-mouse {
  position: absolute;
  left: 1%; /* was -1%, which poked outside the box */
  bottom: 8.5cqw;
  width: clamp(48px, 14cqw, 126px);
  z-index: 4;
  transform: rotate(-8deg);
  transform-origin: bottom center;
  filter: drop-shadow(0 8px 10px rgb(0 0 0 / 0.25));
  pointer-events: none;
}
.device-mouse img {
  display: block;
  width: 100%;
  height: auto;
}

.laptop-pic {
  display: block;
  width: 100%;
  height: auto;
}
.laptop-screen {
  position: absolute;
  top: 17%;
  left: 6.5%;
  right: 6.5%;
  bottom: 33%;
  border-radius: 1px;
  overflow: hidden;
  background: #fff;
}
.laptop-inner {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
}
.laptop-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill; /* whole video, no crop, no bars */
}

.device-phone {
  position: relative;
  width: 17%;
  z-index: 3;
  margin-left: -10%;
  margin-right: -8%;
  margin-bottom: 6cqw;
  top: -42%;
  transform: translateX(-13.5cqw) scale(1.15);
  transform-origin: bottom center;
}
.phone-frame {
  background: var(--ink);
  border-radius: 7px;
  padding: 6px 5px;
}
.phone-inner {
  background: #000;
  border-radius: 5.5px;
  aspect-ratio: 9 / 18;
  overflow: hidden;
  position: relative;
  display: flex;
}
.phone-inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.phone-notch {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 7px;
  background: var(--ink);
  border-radius: 6px;
  z-index: 5;
}
.device-tablet {
  position: relative;
  width: 70%;
  z-index: 2;
  margin-left: -2%;
  margin-bottom: -8.5cqw;
  left: -1.8cqw; /* was -10px */
  top: -16cqw; /* was -88px */
  transform: scale(1.15);
  transform-origin: bottom right;
}
.tablet-cam {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #3a4535;
  z-index: 2;
}
.tablet-frame {
  background: var(--ink);
  border-radius: 14px;
  padding: 8px 8px 10px;
}
.tablet-inner {
  background: #fff;
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  display: flex;
}
.mini-sidebar {
  width: 42px;
  background: #fff;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  flex-shrink: 0;
}
.mini-sidebar-sm {
  width: 30px;
}
.mini-logo {
  width: 16px;
  height: 16px;
  margin-bottom: 2px;
  border-radius: 4px;
  background: var(--ink);
  color: #fff;
  font-size: 5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-logo-sm {
  width: 13px;
  height: 13px;
  font-size: 4px;
}
.mini-nav-dot {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mini-nav-active {
  background: #e3ead9;
}

/* ===================== Device entrance ===================== */
.device-group:not(.in) .device-laptop,
.device-group:not(.in) .device-tablet,
.device-group:not(.in) .device-phone {
  opacity: 0;
}
.device-group:not(.in) .device-mouse {
  opacity: 0;
}

/* Glow behind the devices (removed per request) */
.device-group::before {
  content: none;
}
.device-group.in::before {
  animation:
    glow-in 1.6s ease 0.1s both,
    glow-pulse 6s ease-in-out 1.7s infinite;
}

.device-group.in .device-laptop {
  --d: 0s;
  animation:
    device-in-left 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) var(--d) both,
    float-a 7s ease-in-out calc(var(--d) + 1.2s) infinite;
}
.device-group.in .device-mouse {
  --d: 0.15s;
  animation:
    device-in-left 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) var(--d) both,
    float-a 7s ease-in-out calc(var(--d) + 1.2s) infinite;
}
.device-group.in .device-tablet {
  --d: 0.25s;
  animation:
    device-in-right 1.1s cubic-bezier(0.22, 0.8, 0.3, 1) var(--d) both,
    float-b 6s ease-in-out calc(var(--d) + 1.2s) infinite;
}
.device-group.in .device-phone {
  --d: 0.5s;
  animation:
    device-in-up 1.2s cubic-bezier(0.22, 0.8, 0.3, 1) var(--d) both,
    float-c 8s ease-in-out calc(var(--d) + 1.3s) infinite;
}

.laptop-inner,
.tablet-inner {
  position: relative;
}
.laptop-inner::after,
.tablet-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgb(255 255 255 / 0.55) 50%,
    transparent 60%
  );
  translate: -120% 0;
  pointer-events: none;
}
.device-group.in .laptop-inner::after {
  animation: sheen 8s ease-in-out 1.4s infinite;
}
.device-group.in .tablet-inner::after {
  animation: sheen 8s ease-in-out 3.2s infinite;
}

@keyframes device-in-left {
  from {
    opacity: 0;
    translate: -140px 60px;
    rotate: -5deg;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    filter: blur(0);
  }
}
@keyframes device-in-right {
  from {
    opacity: 0;
    translate: 140px 60px;
    rotate: 5deg;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    filter: blur(0);
  }
}
@keyframes device-in-up {
  from {
    opacity: 0;
    translate: 0 140px;
    scale: 0.85;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    filter: blur(0);
  }
}

@keyframes float-a {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -10px;
  }
}
@keyframes float-b {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}
@keyframes float-c {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes glow-in {
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes glow-pulse {
  0%,
  100% {
    scale: 1;
    opacity: 1;
  }
  50% {
    scale: 1.08;
    opacity: 0.7;
  }
}

@keyframes sheen {
  0% {
    translate: -120% 0;
  }
  25%,
  100% {
    translate: 120% 0;
  }
}

/* ---- Responsive devices (must stay AFTER the animation rules above) ---- */

/* Mouse: shown at every size except the stacked layout below */

@media (max-width: 480px) {
  #modules-showcase h2 {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .device-group:not(.in) .device-laptop,
  .device-group:not(.in) .device-tablet,
  .device-group:not(.in) .device-phone {
    opacity: 1;
  }
  .device-group::before {
    opacity: 1;
    scale: 1;
  }
  .device-group *,
  .device-group::before,
  .device-group *::after {
    animation: none !important;
  }
}

/* ===================== AI agents ===================== */
.agents {
  padding: 4rem 1.25rem 7rem;
}

/* Card stack.
   All cards share ONE grid cell, so the stage is as tall as the tallest
   card and nothing is clipped. No fixed heights, no scale() hack. */
.agent-stage {
  --step: 50px;
  position: relative;
  display: grid;
  width: 100%;
  margin: 9rem auto;
  container-type: inline-size; /* the layout switches on the stage's own width */
  transform: scale(0.88); /* the 7 colored cards, a little smaller */
  transform-origin: top center;
}
.agent-card {
  --o: 0;
  position: relative;
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  margin-left: 20%; /* leaves room on the left for the illustration */
  width: calc(80% - var(--step) * 3);
  min-height: 400px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 1.5rem;
  padding: 20px;
  background: var(--bg);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 18px 40px -20px rgb(var(--ink-rgb) / 0.35);
  transform-origin: bottom left;
  transform: translateX(calc(var(--o) * var(--step)))
    translateY(calc(var(--o) * -10px)) rotate(calc(var(--o) * 1.8deg))
    scale(calc(1 - var(--o) * 0.03));
  z-index: calc(10 - var(--o));
  transition:
    transform 0.7s cubic-bezier(0.22, 0.8, 0.3, 1),
    opacity 0.5s ease;
  cursor: pointer;
}
.agent-card.is-active {
  cursor: default;
}
.agent-card.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* The front card slides left, then goes to the back of the stack */
.agent-card.is-exiting {
  transform: translateX(-130%) rotate(-3deg);
  opacity: 0;
  z-index: 20;
  pointer-events: none;
  transition:
    transform 0.6s cubic-bezier(0.5, 0, 0.75, 0),
    opacity 0.35s ease-in 0.25s;
}
.agent-card:not(.is-active) > * {
  pointer-events: none;
}
.agent-card:not(.is-active) .card-left,
.agent-card:not(.is-active) .demo {
  opacity: 0;
}

/* The man: his right edge is anchored just left of the card (which starts at
   20% of the stage). landing.js sets his width to the room that is available,
   or hides him completely when there is not enough. */
.stage-illustration-wrap {
  position: absolute;
  right: calc(80% + 8px);
  bottom: 140px;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.stage-illustration {
  display: block;
  width: 320px; /* JS overrides this */
  max-width: none; /* Tailwind's preflight sets img max-width:100% */
  height: auto;
}

.card-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 1rem 0 1rem 1.5rem;
  transition: opacity 0.35s ease;
}
.card-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--fg);
}
.card-title {
  margin-top: 0.85rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.card-desc {
  margin-top: 0.9rem;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg);
  opacity: 0.8;
}
.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.card-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.95rem 1.6rem;
  border: 1.5px solid var(--fg);
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}
.card-btn:hover {
  transform: translateY(-1px);
}
.card-btn-solid {
  background: var(--fg);
  color: var(--bg);
}
.card-btn-outline {
  background: transparent;
  color: var(--fg);
}

.card-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  padding: 1.5rem;
  border-radius: 22px;
  background: var(--panel);
  overflow: hidden;
}
.demo {
  width: 100%;
  max-width: 420px;
  padding: 1.1rem 1.2rem 1.3rem;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px -14px rgb(var(--ink-rgb) / 0.3);
  transition: opacity 0.35s ease;
}
.demo-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.demo-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.demo-row {
  margin-top: 0.5rem;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: #f5f4f0;
  font-size: 0.85rem;
  color: var(--muted);
}
.demo-chip {
  display: inline-block;
  margin-top: 0.9rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: rgb(var(--green-rgb) / 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--green);
}

/* Step sizes shrink with the screen (a container can't set its own variable) */
@media (max-width: 1279px) {
  .agent-stage {
    --step: 40px;
  }
}
@media (max-width: 860px) {
  .agent-stage {
    --step: 22px;
    margin: 5rem auto;
  }
}
@media (max-width: 480px) {
  .agent-stage {
    --step: 14px;
  }
}

/* Stacked card layout: triggered by the STAGE's width, not the screen's */
@container (max-width: 780px) {
  .agent-card {
    margin-left: 0;
    width: calc(100% - var(--step) * 3);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0.5rem;
    border-radius: 26px;
  }
  .card-left {
    padding: 1rem 0.75rem 0;
  }
  .card-panel {
    padding: 1rem;
  }
  .stage-illustration-wrap {
    display: none;
  }
}
@container (max-width: 420px) {
  .card-btn {
    padding: 0.75rem 1.2rem;
    font-size: 0.95rem;
  }
  .card-title {
    font-size: 1.4rem;
  }
}

/* ===================== Testimonials ===================== */
.testimonials {
  --card-w: 380px; /* fallback; landing.js sizes cards to exactly fit 3 */
  --t-gutter: 0;
  position: relative;
  width: calc(100% - 1.5rem);
  max-width: 1400px;
  margin-inline: auto;
  padding: 4rem 0 6rem;
}
@media (min-width: 1024px) {
  .testimonials {
    width: 71%;
  }
}

.t-head {
  margin: 0 0 2.5rem;
}
.t-eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--green);
}
.t-title {
  margin-top: 0.5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* Wraps the track + arrow so the arrow centers on the CARDS, not the section */
.t-stage {
  position: relative;
}
.t-wrap {
  position: relative;
  overflow: hidden;
}
.t-track {
  --t-card-max: 400px; /* adjustable: cap on a single card's width */
  display: flex;
  width: max-content;
  margin-inline: auto; /* keeps the row the same width as the navbar */
  gap: clamp(16px, calc(var(--card-w) * 0.054), 30px);
  padding: 0.5rem 0 1.5rem;
  will-change: transform;
}
.t-card {
  position: relative;
  flex: 0 0 var(--card-w);
  aspect-ratio: 555 / 445;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--card-w) * 0.055);
  background: #f7f7f7;
  border-radius: clamp(22px, calc(var(--card-w) * 0.058), 32px);
  box-shadow: 0 14px 34px -22px rgb(var(--ink-rgb) / 0.35);
  overflow: hidden;
}
.t-quote {
  position: relative;
  z-index: 1;
  max-width: 55%;
  font-family: var(--serif);
  font-size: clamp(0.95rem, calc(var(--card-w) * 0.046), 1.6rem);
  line-height: 1.3;
  color: var(--ink);
}
.t-tags {
  display: none;
  position: relative;
  z-index: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--card-w) * 0.02);
}
.t-tag {
  padding: 0.55em 0.85em;
  border-radius: 10px;
  background: rgb(var(--green-rgb) / 0.1);
  color: var(--green);
  font-size: clamp(0.58rem, calc(var(--card-w) * 0.0215), 0.78rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.t-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 62%;
  width: auto;
  max-width: 55%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  user-select: none;
}

/* Next arrow: centered on the cards (track has 0.5rem top / 1.5rem bottom padding) */
.t-arrow {
  --size: clamp(44px, calc(var(--card-w) * 0.112), 62px);
  position: absolute;
  top: calc(50% - 0.5rem);
  right: calc(var(--size) * -1 - 1.1rem);
  z-index: 5;
  width: var(--size);
  height: var(--size);
  margin-top: calc(var(--size) / -2);
  border: 0;
  border-radius: 50%;
  background: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px -8px rgb(var(--ink-rgb) / 0.5);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}
.t-arrow:hover {
  background: var(--green-dark);
  transform: scale(1.06);
}
.t-arrow:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.t-arrow svg {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: #fff;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 1023px) {
  .t-arrow {
    right: 0.75rem; /* below desktop there is no side margin, so overlap the last card */
  }
}

@media (max-width: 640px) {
  .t-card {
    aspect-ratio: 1 / 1.05;
  }
  .t-quote {
    font-size: 1.05rem;
  }
  .t-tag {
    font-size: 0.62rem;
  }
}

/* ===================== Footer ===================== */
.site-footer {
  --f-text: #000000;
  --f-dim: rgb(0 0 0 / 0.68);
  --f-line: rgba(2, 2, 2, 0.12);
  --f-accent: #30451e;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 1.25rem 2.25rem;
  background: var(--page);
  color: var(--f-text);
}

.footer-inner {
  width: calc(100% - 1.5rem);
  max-width: 1400px;
  margin-inline: auto;
  padding: 0;
}
@media (min-width: 1024px) {
  .footer-inner {
    width: 71%;
  }
}

/* The nudge scales with the screen instead of a fixed 84px / 48px */
.footer-banner {
  --pull: clamp(24px, 6vw, 84px);
  position: relative;
  width: 100%;
  max-width: 100%;
  left: 0;
  top: var(--pull);
  margin-bottom: calc(var(--pull) * -1);
}
.footer-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.footer-bottom {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  padding-top: 1.75rem;
}

/* Logo and socials share a row while they fit. When they don't, the socials
   wrap onto their own line (flex-wrap). No forced column layout. */
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  width: calc(100% - 1.5rem);
  max-width: 1400px;
  margin-inline: auto;
}
@media (min-width: 1024px) {
  .footer-bottom-inner {
    width: 71%;
  }
}

.footer-mark {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
  flex-shrink: 0; /* never squeeze the logo */
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(242 240 234 / 0.08);
  color: var(--f-text);
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}
.footer-social-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
.footer-social-icon--outline svg {
  fill: none;
}
.footer-social-icon:hover,
.footer-social-icon:focus-visible {
  background: rgb(242 240 234 / 0.18);
  transform: translateY(-2px);
}
.footer-social-icon:focus-visible {
  outline: 2px solid var(--f-accent);
  outline-offset: 4px;
}

@media (max-width: 860px) {
  .site-footer {
    padding-top: 3.5rem;
  }
}

/* Hide scrollbar for Chrome, Safari, and Opera */
::-webkit-scrollbar {
  display: none;
}
html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.ital-a {
  font-style: italic;
}

/* Make the whole page use the same look as the main heading */
:root {
  --sans: "PT Serif", Georgia, serif;
  --mono: "PT Serif", Georgia, serif;
}
body {
  font-family: "PT Serif", Georgia, serif;
  letter-spacing: -0.02em;
}

/* Regular weight everywhere, like the heading.
   !important is needed because Tailwind's CDN styles load after yours. */
body *,
button {
  font-family: inherit;
  font-weight: 400 !important;
}