/* ==========================================================================
   Bheard.ai — light minimal enterprise
   ========================================================================== */

:root {
  --ink: #10262e;          /* near-black teal-navy — headings */
  --body: #3d5158;         /* body text */
  --muted: #6b7d84;        /* secondary text */
  --accent: #177a6c;       /* brand teal — links, CTAs */
  --accent-dark: #0f5f54;
  --accent-tint: #eaf6f3;  /* pale teal wash */
  --line: #e3e9ea;         /* hairline borders */
  --bg: #ffffff;
  --bg-soft: #f7fafa;      /* alternating section background */
  --chat-ai: #eef4fb;      /* AI bubble */
  --chat-worker: #ffffff;  /* worker bubble */
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 38, 46, 0.05);
  --shadow-md: 0 10px 30px -12px rgba(16, 38, 46, 0.16);
  --container: 1120px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  font-family: inherit;
  position: relative;
  overflow: hidden;
}

/* Sheen sweep on hover */
.btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn:hover::before { left: 130%; }

.btn-primary {
  background: var(--ink);
  color: #fff;
}
.btn-primary:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover { background: var(--accent-dark); color: #fff; transform: translateY(-1px); }

.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 76px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.logo:hover { color: var(--ink); }
.logo .tld { color: var(--accent); font-weight: 700; }
.logo-mark { flex: none; }

.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--body);
}
.main-nav a:hover { color: var(--ink); background: var(--bg-soft); }
.main-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.main-nav .nav-cta-mobile { display: none; }

.header-cta { flex: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 600;
  flex: none;
}
.lang-switch a {
  color: var(--muted);
  padding: 5px 8px;
  border-radius: 7px;
}
.lang-switch a:hover { color: var(--ink); background: var(--bg-soft); }
.lang-switch a[aria-current] { color: var(--ink); background: var(--bg-soft); }
.lang-switch .ls-sep { color: var(--line); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */

.hero { padding: 88px 0 72px; overflow: hidden; position: relative; }

/* Drifting aurora wash behind the hero */
.hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -20%;
  width: 90%;
  height: 150%;
  background:
    radial-gradient(ellipse 46% 38% at 62% 38%, rgba(43, 179, 201, 0.16), transparent 68%),
    radial-gradient(ellipse 40% 34% at 30% 72%, rgba(23, 122, 108, 0.13), transparent 68%);
  animation: aurora-drift 16s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes aurora-drift {
  to { transform: translate3d(-7%, 5%, 0) scale(1.1) rotate(2deg); }
}

.hero-grid { position: relative; z-index: 1; }

/* Flowing waveform along the hero base */
.hero-wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  width: 100%;
  height: 90px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
}
.hero-wave .wv {
  fill: none;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  animation: wave-move 9s linear infinite;
}
.hero-wave .wv1 { stroke: rgba(23, 122, 108, 0.5); }
.hero-wave .wv2 { stroke: rgba(43, 179, 201, 0.38); animation-duration: 13s; animation-direction: reverse; }
@keyframes wave-move {
  to { transform: translateX(-720px); }
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 9fr);
  gap: 64px;
  align-items: center;
}

.eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4rem);
  font-weight: 800;
  margin-bottom: 24px;
}

/* Word-by-word headline reveal */
.split-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.5em);
  animation: word-in 0.65s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: calc(var(--i) * 90ms + 120ms);
}
@keyframes word-in {
  to { opacity: 1; transform: none; }
}

/* Animated gradient text (headline + CTA accents) */
.grad-text {
  background: linear-gradient(90deg, var(--accent), #2bb3c9, #4cb87a, var(--accent));
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-slide 7s linear infinite;
}
.grad-text-light {
  background: linear-gradient(90deg, #ffffff, #7fd6c4, #9ad9ec, #ffffff);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: grad-slide 7s linear infinite;
}
@keyframes grad-slide {
  to { background-position: 250% center; }
}

/* Live pulse dot on the hero eyebrow */
.eyebrow .live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 1px;
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(23, 122, 108, 0.35); }
  70%  { box-shadow: 0 0 0 9px rgba(23, 122, 108, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 122, 108, 0); }
}

.hero-lede {
  font-size: 1.1875rem;
  max-width: 34em;
  margin-bottom: 36px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 44px; }

.hero-proof {
  border-top: 1px solid var(--line);
  padding-top: 22px;
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 36em;
}
.hero-proof strong { color: var(--ink); font-weight: 600; }

/* Chat mockup */

.chat-card {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  box-shadow: var(--shadow-md);
}

.chat-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.chat-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-tint);
}
.chat-card-head .status { margin-left: auto; font-weight: 500; color: var(--muted); }

/* Voice equalizer — bars imitating live listening */
.eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 2.5px;
  height: 15px;
  color: var(--accent);
}
.eq i {
  width: 3px;
  border-radius: 2px;
  background: currentColor;
  height: 100%;
  transform: scaleY(0.3);
  transform-origin: bottom;
  animation: eq-bounce 1.05s ease-in-out infinite;
}
.eq i:nth-child(1) { animation-delay: -0.9s; animation-duration: 1.15s; }
.eq i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.85s; }
.eq i:nth-child(3) { animation-delay: -0.6s; animation-duration: 1.3s;  }
.eq i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.95s; }
.eq i:nth-child(5) { animation-delay: -0.7s; animation-duration: 1.2s;  }
@keyframes eq-bounce {
  0%, 100% { transform: scaleY(0.25); }
  50%      { transform: scaleY(1); }
}

.chat-stream { display: flex; flex-direction: column; gap: 12px; position: relative; }

/* Scripted hero conversation */
.js [data-chat] .bubble {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.js [data-chat] .bubble.shown { opacity: 1; transform: none; }

.typing-bubble {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  gap: 5px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  background: var(--chat-ai);
  border: 1px solid #dde8f4;
}
.js .typing-bubble.shown { display: inline-flex; opacity: 1; transform: none; }
.typing-bubble i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #90a7c0;
  animation: dot-bounce 1s ease-in-out infinite;
}
.typing-bubble i:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

/* Worker bubble "speaking" state shows white voice bars */
.bubble-worker .eq { display: none; color: #fff; margin-top: 7px; }
.bubble-worker.speaking .eq { display: inline-flex; }

.bubble {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: var(--shadow-sm);
}
.bubble .tag {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 4px;
}
.bubble-ai {
  align-self: flex-start;
  background: var(--chat-ai);
  border: 1px solid #dde8f4;
  border-bottom-left-radius: 4px;
  color: var(--ink);
}
.bubble-worker {
  align-self: flex-end;
  background: var(--accent);
  border-bottom-right-radius: 4px;
  color: #fff;
  font-weight: 500;
}
.bubble-worker .tag { color: rgba(255, 255, 255, 0.75); }

/* --- Sections ----------------------------------------------------------- */

.section { padding: 96px 0; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 16px; }
.section-head p { font-size: 1.125rem; }

/* Feature cards */

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

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { border-color: #c9d6d4; box-shadow: var(--shadow-md); transform: translateY(-3px); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
  margin-bottom: 20px;
}
.card h3 { font-size: 1.1875rem; margin-bottom: 10px; }
.card p { font-size: 0.9844rem; }

/* Reporting habit — barrier-to-report (4-up) / retention (3-up) feature lists */

.barrier-block + .barrier-block { margin-top: 56px; }
.barrier-intro { max-width: 640px; margin: 10px 0 28px; font-size: 1.0625rem; }
.barrier-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.barrier-block .card { padding: 26px 24px; }
.barrier-block .card h3 { font-size: 1.0625rem; }

/* Stats band */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  text-align: center;
}
/* The .stats wrapper is a flow-layout Group, so WordPress adds
   `margin-block-start` to every child except the first; in a grid that
   pushes stats 2+ down out of line with the first. */
.stats > .stat { margin-block-start: 0; }
.stat { padding: 12px 0; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-value {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1.05;
}
.stat-value .unit { font-size: 0.5em; font-weight: 700; color: var(--accent); }
.stat-label { margin-top: 8px; font-size: 0.9375rem; color: var(--muted); }

/* How it works — numbered steps */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; }

.step {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px 32px;
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 22px;
}
.step-kicker {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.step h3 { font-size: 1.25rem; margin-bottom: 10px; }
.step p { font-size: 0.9844rem; }

/* Use cases */

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 48px; }
.chip {
  padding: 8px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  font-size: 0.9063rem;
  font-weight: 500;
  color: var(--ink);
}

/* Comparison animation — "usual way vs Bheard" */

/* Section dressing: technical dot grid + soft colour washes */
.section-compare { position: relative; overflow: hidden; }
.section-compare::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(16, 38, 46, 0.07) 1px, transparent 1.5px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 25%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 75% at 50% 45%, #000 25%, transparent 75%);
  pointer-events: none;
}
.section-compare::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 35% at 12% 18%, rgba(43, 179, 201, 0.10), transparent 70%),
    radial-gradient(ellipse 45% 40% at 88% 85%, rgba(23, 122, 108, 0.10), transparent 70%);
  pointer-events: none;
}
.section-compare .container { position: relative; z-index: 1; }

.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
  position: relative;
}

/* VS badge on the seam between the two panels */
.vs-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85), 0 12px 28px -8px rgba(16, 38, 46, 0.4);
}

.compare-panel {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 28px;
  position: relative;
}
.compare-old { background: linear-gradient(180deg, #fbfcfc 0%, #f1f4f5 100%); }
.compare-new {
  border-color: transparent;
  background: linear-gradient(180deg, #ffffff 0%, var(--accent-tint) 160%);
  box-shadow: 0 24px 55px -20px rgba(23, 122, 108, 0.35);
}
/* Animated gradient ring around the Bheard panel */
.compare-new::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1.5px;
  background: linear-gradient(120deg, #2bb3c9, var(--accent), #4cb87a, #2bb3c9);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: grad-border 7s linear infinite;
  pointer-events: none;
}
@keyframes grad-border {
  to { background-position: 300% 50%; }
}

.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.compare-head h3 { font-size: 1.0625rem; }
.compare-old .compare-head h3 { color: var(--muted); }

.compare-timer {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.9375rem;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
}
.compare-new .compare-timer {
  background: linear-gradient(100deg, var(--accent), #2bb3c9);
  border-color: transparent;
  color: #fff;
}

/* Mock legacy form (left) */
.mock-form { display: flex; flex-direction: column; gap: 12px; }
.mock-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.mock-input {
  display: block;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft);
  font-size: 0.875rem;
  color: var(--body);
  min-height: 38px;
}
.mock-input.empty { color: #b3bfc4; font-style: italic; }

.compare-result {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: 12px;
  font-size: 0.9375rem;
  font-weight: 600;
}
.compare-panel .compare-result { margin-top: 20px; }
.compare-result.bad { background: #fdf0ee; color: #a4392b; }
.compare-result.good { background: #d9f0ea; color: var(--accent-dark); }

/* Sequenced reveal driven by js/main.js */
.js .compare-grid .seq { opacity: 0; transform: translateY(8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.js .compare-grid .seq.on { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .compare-grid .seq { opacity: 1; transform: none; transition: none; }
}

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

/* Platform animation — kanban pipeline + live dashboard
   (scripted recreation of the Bheard platform screenshots) */

/* Dark showcase band: the product UI pops on an ink backdrop */
.section-platform {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0d2129 0%, #10262e 55%, #143039 100%);
}
.section-platform::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 35% 30% at 22% 25%, rgba(43, 179, 201, 0.16), transparent 70%),
    radial-gradient(ellipse 40% 34% at 80% 78%, rgba(23, 122, 108, 0.20), transparent 70%);
  animation: aurora-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.section-platform::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 80% at 50% 40%, #000 20%, transparent 78%);
  pointer-events: none;
}
.section-platform .container { position: relative; z-index: 1; }
.section-platform .section-head h2 { color: #fff; }
.section-platform .section-head p { color: #9fb5bc; }
.section-platform .platform-note { color: #7f959c; }
.section-platform .platform-panel {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 65px -25px rgba(0, 0, 0, 0.55);
}
/* Gradient keyline across each panel's top edge */
.section-platform .platform-panel::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #2bb3c9, #4cb87a);
}

.platform-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: stretch;
}

.platform-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}

.platform-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.platform-head h3 { font-size: 1rem; }
.platform-head .hint { font-size: 0.8125rem; color: var(--muted); white-space: nowrap; }

/* Kanban board */
.kanban-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kanban-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.kanban-col { border-radius: 12px; padding: 10px; min-height: 280px; }
.k-submitted { background: #eaf0fb; }
.k-review    { background: #fdf6dd; }
.k-approved  { background: #e3f2e7; }
.k-resolved  { background: #f0ecfa; }

.kanban-col h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.kanban-col h4 .count {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--muted);
}

.kanban-slot { height: 122px; }

.kanban-ghost {
  background: rgba(255, 255, 255, 0.75);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 8px;
}
.ghost-line { height: 7px; border-radius: 4px; background: #d7e0e4; margin-bottom: 7px; }
.ghost-line:last-child { margin-bottom: 0; }
.ghost-line.w60 { width: 60%; }
.ghost-line.w80 { width: 80%; }

/* The travelling report card */
.kanban-card {
  position: absolute;
  top: 42px;
  width: calc((100% - 30px) / 4 - 20px);
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-md);
  padding: 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease, opacity 0.4s ease;
  z-index: 2;
}
.kanban-card.at-0 { left: calc(0 * ((100% - 30px) / 4 + 10px) + 10px); }
.kanban-card.at-1 { left: calc(1 * ((100% - 30px) / 4 + 10px) + 10px); }
.kanban-card.at-2 { left: calc(2 * ((100% - 30px) / 4 + 10px) + 10px); }
.kanban-card.at-3 { left: calc(3 * ((100% - 30px) / 4 + 10px) + 10px); }
.js .kanban-card { opacity: 0; }
.js .kanban-card.on { opacity: 1; }

.kanban-card .kc-title { font-weight: 700; color: var(--ink); }
.kc-pill {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  padding: 0 7px;
  border-radius: 999px;
  background: #fdf0d5;
  color: #96690f;
}
.kanban-card .kc-meta { color: var(--muted); margin-top: 5px; }
.kanban-card .kc-check { display: none; margin-top: 6px; font-weight: 700; color: #1d9d61; }
.kanban-card.done { border-color: #2fb673; }
.kanban-card.done .kc-check { display: block; }

/* Mini dashboard */
.dash-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.dash-tile { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.dash-tile .label { font-size: 0.6875rem; color: var(--muted); margin-bottom: 2px; }
.dash-tile .val { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dash-tile .val.blue { color: #2563c4; }
.dash-tile .val.green { color: #1d9d61; }
.val.pop { animation: tile-pop 0.5s ease; }
@keyframes tile-pop {
  40% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

.dash-chart-label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 150px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0;
}
.dash-bar { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; }
.dash-bar span { display: block; width: 100%; height: var(--h); }
.dash-bar span:last-child { border-radius: 3px 3px 0 0; }
.js .dash-bar span { height: 0; transition: height 0.7s ease; }
.js .chart-on .dash-bar span { height: var(--h); }
.dash-bar:nth-child(2) span { transition-delay: 0.07s; }
.dash-bar:nth-child(3) span { transition-delay: 0.14s; }
.dash-bar:nth-child(4) span { transition-delay: 0.21s; }
.dash-bar:nth-child(5) span { transition-delay: 0.28s; }
.dash-bar:nth-child(6) span { transition-delay: 0.35s; }
.dash-bar:nth-child(7) span { transition-delay: 0.42s; }
.dash-bar:nth-child(8) span { transition-delay: 0.49s; }

.c-gray   { background: #d5dfe2; }
.c-teal   { background: #2bb3c9; }
.c-purple { background: #8b74d8; }
.c-orange { background: #f08a3c; }
.c-green  { background: #4cb87a; }

.dash-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 0.6875rem; color: var(--muted); }
.dash-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dash-legend i { width: 9px; height: 9px; border-radius: 3px; }

.platform-note { margin-top: 20px; font-size: 0.875rem; color: var(--muted); text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .js .kanban-card { opacity: 1; transition: none; }
  .js .dash-bar span { height: var(--h); transition: none; }
  .val.pop { animation: none; }
}

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

@media (max-width: 640px) {
  .kanban-board { min-width: 540px; }
  .kanban-col { min-height: 250px; }
}

/* Incident map — pins ↔ heatmap flip */

.map-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.map-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.map-toolbar .map-title { font-size: 0.9375rem; font-weight: 700; color: var(--ink); }

.map-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
}
.map-mode {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.map-mode.active { background: var(--ink); color: #fff; box-shadow: var(--shadow-sm); }

.map-stage {
  position: relative;
  aspect-ratio: 900 / 420;
  min-height: 260px;
  overflow: hidden;
  background: #cfe6ee;
}
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; }

.map-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  font-weight: 600;
  color: #5a6c73;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  pointer-events: none;
}
.map-label.big { font-size: 0.9375rem; color: #3d5158; letter-spacing: 0.02em; }

/* Pins */
.map-pins, .map-heat { position: absolute; inset: 0; pointer-events: none; }
.pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(16, 38, 46, 0.35);
  transform: translate(-50%, -50%);
}
.p-green  { background: #2fb673; }
.p-yellow { background: #f2b41f; }
.p-orange { background: #f08a3c; }
.p-red    { background: #e5484d; }

.js [data-map] .pin {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.3);
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d, 0s);
}
.js [data-map].pins-in .pin { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* Heat layer */
.heat {
  position: absolute;
  width: var(--s);
  height: var(--s);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 222, 89, 0.85) 0%,
    rgba(154, 205, 80, 0.55) 35%,
    rgba(76, 184, 122, 0.35) 55%,
    rgba(43, 179, 201, 0.18) 72%,
    transparent 80%);
  filter: blur(12px);
  opacity: var(--o, 1);
}
.map-heat { opacity: 0; transition: opacity 0.7s ease; }

/* Mode switch */
.map-stage.mode-heat .map-heat { opacity: 1; }
.map-stage.mode-heat .pin,
.js [data-map] .map-stage.mode-heat .pin {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.35);
  transition-delay: 0s;
}

/* Real map (Leaflet + OSM). The SVG + overlays above stay as a no-network fallback. */
.leaflet-host { position: absolute; inset: 0; display: none; }
.map-stage.has-leaflet .leaflet-host { display: block; }
.map-stage.has-leaflet .map-bg,
.map-stage.has-leaflet .map-pins,
.map-stage.has-leaflet .map-heat,
.map-stage.has-leaflet .map-label { display: none; }
.pin-anchor { background: transparent; border: none; }
.map-stage .leaflet-heatmap-layer { opacity: 0 !important; transition: opacity 0.7s ease; }
.map-stage.mode-heat .leaflet-heatmap-layer { opacity: 1 !important; }

.map-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  color: var(--muted);
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend i {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(16, 38, 46, 0.3);
}

/* AI insights — reports → agent → typed analysis */

.insights-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 24px auto 24px minmax(0, 7fr);
  gap: 0;
  align-items: center;
}

.insight-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.feed-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  animation: feed-pulse 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
.feed-item .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.d-yellow { background: #f2b41f; }
.d-orange { background: #f08a3c; }
.d-red    { background: #e5484d; }
@keyframes feed-pulse {
  0%, 18%, 100% { border-color: var(--line); box-shadow: none; }
  8% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint), var(--shadow-md); }
}

/* Animated flow connectors */
.flow-line {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 6px, transparent 6px 14px);
  animation: dash-move 0.9s linear infinite;
  opacity: 0.7;
}
@keyframes dash-move {
  to { background-position: 14px 0; }
}

/* Agent node */
.insight-agent { text-align: center; padding: 0 14px; }
.agent-ring {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.agent-ring::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 40%, var(--accent) 55%, #2bb3c9 70%, transparent 85%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: agent-spin 2.6s linear infinite;
}
@keyframes agent-spin {
  to { transform: rotate(360deg); }
}
.agent-label { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.agent-status { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* Generated document */
.insight-doc {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.doc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 10px 0;
  border-bottom: 1px solid var(--line);
}
.doc-tab {
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}
.doc-tab.active { color: var(--accent-dark); box-shadow: inset 0 -2px 0 var(--accent); }
.doc-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 18px;
  font-size: 0.75rem;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}
.doc-out { padding: 18px; min-height: 190px; }
.doc-out h4 { font-size: 1rem; color: var(--ink); margin-bottom: 12px; }
.doc-out .doc-b {
  position: relative;
  font-size: 0.9063rem;
  color: var(--body);
  padding-left: 18px;
  margin-bottom: 9px;
  line-height: 1.55;
}
.doc-out .doc-b::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.58em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.doc-out .typing-line::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: -2px;
  animation: caret-blink 0.9s steps(1) infinite;
}
@keyframes caret-blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-map] .pin { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  .map-heat { transition: none; }
  .feed-item { animation: none; }
  .flow-line { animation: none; }
  .agent-ring::before { animation: none; }
  .doc-out .typing-line::after { animation: none; display: none; }
}

@media (max-width: 980px) {
  .insights-grid { grid-template-columns: 1fr; gap: 22px; }
  .flow-line {
    width: 2px;
    height: 26px;
    margin: 0 auto;
    background: repeating-linear-gradient(180deg, var(--accent) 0 6px, transparent 6px 14px);
    animation-name: dash-move-y;
  }
  @keyframes dash-move-y {
    to { background-position: 0 14px; }
  }
}

@media (max-width: 640px) {
  .map-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .map-stage { min-height: 240px; }
  .map-label { font-size: 0.6563rem; }
  .map-label.big { font-size: 0.8125rem; }
  .heat { filter: blur(9px); }
  .doc-out { min-height: 230px; }
}

/* Testimonials */

.quote-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.quote-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quote-card blockquote {
  font-size: 1.0313rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote-card blockquote p + p { margin-top: 10px; }
.quote-attr { margin-top: auto; font-size: 0.875rem; color: var(--muted); }
.quote-attr strong { display: block; color: var(--ink); font-weight: 600; }
.quote-mark { color: var(--accent); flex: none; }

/* FAQ */

.faq { max-width: 780px; margin: 0 auto; }

.faq details {
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type { border-top: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-dark); }
.faq summary .faq-icon {
  flex: none;
  width: 22px; height: 22px;
  position: relative;
  color: var(--accent);
}
.faq summary .faq-icon::before,
.faq summary .faq-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease;
}
.faq summary .faq-icon::before { width: 14px; height: 2px; }
.faq summary .faq-icon::after { width: 2px; height: 14px; }
.faq details[open] summary .faq-icon::after { transform: rotate(90deg); }
.faq details p { padding: 0 40px 24px 4px; font-size: 1rem; }

/* CTA band */

.cta-band {
  background: var(--ink);
  border-radius: 24px;
  padding: clamp(48px, 7vw, 80px);
  text-align: center;
  color: #b8c8cd;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(circle at 25% 30%, rgba(43, 179, 201, 0.22), transparent 42%),
    radial-gradient(circle at 75% 75%, rgba(23, 122, 108, 0.28), transparent 45%);
  animation: aurora-drift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 {
  color: #fff;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  margin-bottom: 16px;
  max-width: 18em;
  margin-left: auto;
  margin-right: auto;
}
.cta-band p { max-width: 36em; margin: 0 auto 32px; font-size: 1.0938rem; }

/* --- Page hero (inner pages) -------------------------------------------- */

.page-hero { padding: 88px 0 64px; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); font-weight: 800; margin-bottom: 22px; max-width: 16em; }
.page-hero .lede { font-size: 1.1875rem; max-width: 40em; }

/* Two-column prose blocks */

.split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.split .card h3 { font-size: 1.3125rem; }

.prose-note {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 24px 28px;
  font-size: 1.0313rem;
  color: var(--ink);
}

/* Team */

.team-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  max-width: 720px;
}
.avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1.3125rem; }
.team-card .role { font-size: 0.9375rem; font-weight: 600; color: var(--accent); margin: 2px 0 12px; }
.team-card p { font-size: 0.9844rem; }
.team-card .team-link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.9375rem; }
.team-card .founder-note { margin-bottom: 18px; }
.team-card .founder-note-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 10px;
}
.team-card .founder-note blockquote {
  margin: 0;
  border: none;
  padding: 0;
  font-size: 0.9844rem;
  font-style: italic;
}
.team-card .founder-note blockquote p + p { margin-top: 10px; }

/* --- Contact ------------------------------------------------------------ */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 64px;
  align-items: start;
}

.contact-info h2 { font-size: 1.5rem; margin-bottom: 12px; }
.contact-info .block { padding: 24px 0; border-bottom: 1px solid var(--line); }
.contact-info .block:first-child { padding-top: 0; }
.contact-info .block h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.contact-info .block p { color: var(--ink); font-weight: 500; }
.contact-info .block .sub { color: var(--muted); font-weight: 400; font-size: 0.9375rem; }

.form-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 40px;
  box-shadow: var(--shadow-md);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

.form-notice {
  display: none;
  margin-top: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--accent-tint);
  color: var(--accent-dark);
  font-size: 0.9375rem;
  font-weight: 500;
}
.form-notice.visible { display: block; }

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 72px 0 40px;
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand p { margin-top: 16px; max-width: 26em; color: var(--muted); }

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li + li { margin-top: 10px; }
.footer-col a { color: var(--body); font-weight: 500; }
.footer-col a:hover { color: var(--accent-dark); }

/* `.footer-col .wpcf7-form` is a structural fallback alongside
   `.newsletter-form` — it matches the CF7 form purely by its position in
   the footer markup, so this layout still works even if the
   `bheard/shortcode-card` block's "Form CSS class" attribute (which is
   what adds the `.newsletter-form` class itself, see inc/blocks.php
   bheard3_render_shortcode_card()) never made it onto the saved page
   content, or if a stale cached copy of this file is what's actually
   loading. `.footer-col` only ever wraps this one form (the other footer
   column is a Navigation block), so this is safe to key off directly.

   IMPORTANT: `display:flex` here targets `.newsletter-form`/`.wpcf7-form`
   itself, but CF7 auto-wraps a form-tag template with no blank lines
   between tags in a single <p> — so the label/input/button are actually
   grandchildren of the form, not direct children, and flexbox only lays
   out direct children. That's why the flex rules are duplicated onto
   `… p` immediately below: that <p> is CF7's real, actual flex container,
   regardless of exactly how the Form tab's template happens to be
   formatted. The `br` a CF7 also inserts between tags in that same <p>
   become empty flex items otherwise, adding stray gaps — hidden below. */
.newsletter-form,
.footer-col .wpcf7-form,
.newsletter-form p,
.footer-col .wpcf7-form p {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 4px;
}
.newsletter-form p br,
.footer-col .wpcf7-form p br { display: none; }
.newsletter-form .form-notice { flex-basis: 100%; margin-top: 4px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* `:not(.btn)` matters: a CF7 [submit] tag is a real <input> too, so
   without this exclusion this rule's `background: var(--bg)` (white) —
   meant only for the actual text/email <input> — also matches the submit
   button, and because "input" adds an extra element-selector, it's more
   specific than `.btn-primary { background: var(--ink) }` and silently
   wins, leaving a white background behind white button text. */
.newsletter-form input:not(.btn),
.footer-col .wpcf7-form input:not(.btn) {
  flex: 1;
  min-width: 0;
  font-family: inherit;
  font-size: 0.9375rem;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
}
.newsletter-form input:not(.btn):focus,
.footer-col .wpcf7-form input:not(.btn):focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.newsletter-form .btn,
.footer-col .wpcf7-form .btn { padding: 11px 20px; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}
.footer-bottom .legal { display: flex; gap: 20px; }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--accent-dark); }

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--body);
}

/* --- Reveal animation (progressive enhancement) -------------------------- */

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .step { transition: none; }
  .hero::before, .cta-band::before, .hero-wave .wv,
  .grad-text, .grad-text-light, .eyebrow .live-dot,
  .section-platform::before, .compare-new::before,
  .eq i, .typing-bubble i { animation: none; }
  .split-words .w { animation: none; opacity: 1; transform: none; }
  .eq i { transform: scaleY(0.6); }
  .btn::before { display: none; }
  .js [data-chat] .bubble { opacity: 1; transform: none; transition: none; }
  .typing-bubble { display: none !important; }
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 980px) {
  .section { padding: 72px 0; }

  .hero { padding: 64px 0 56px; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .chat-card { max-width: 560px; }

  .card-grid, .steps, .usecase-grid, .barrier-grid { grid-template-columns: 1fr 1fr; }

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

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }

  .main-nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav-open .main-nav { display: flex; }
  .main-nav a { padding: 12px 14px; font-size: 1rem; }

  .header-cta { display: none; }
  .main-nav .nav-cta-mobile {
    display: inline-flex;
    justify-content: center;
    margin-top: 12px;
    background: var(--ink);
    color: #fff;
    border-radius: 999px;
    font-weight: 600;
  }
  .main-nav .nav-cta-mobile:hover { background: var(--accent-dark); color: #fff; }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }

  .card-grid, .steps, .usecase-grid, .quote-grid, .split, .barrier-grid { grid-template-columns: 1fr; }

  .stats { grid-template-columns: 1fr; gap: 0; }
  .stat { padding: 20px 0; }
  .stat + .stat { border-left: none; border-top: 1px solid var(--line); }

  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 28px 22px; }

  .team-card { grid-template-columns: 1fr; padding: 28px 24px; }

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

  .faq details p { padding-right: 4px; }

  /* `.newsletter-form` alone no longer reaches the row that actually
     matters: CF7 wraps the label/input/button in its own inner <p>, so
     that's the real flex container now (see the `.newsletter-form p` rule
     above) and it needs its own mobile override — otherwise it just wraps
     mid-row with `align-items:center` shrinking each item to its natural
     width instead of a clean full-width stack. */
  .newsletter-form,
  .newsletter-form p,
  .footer-col .wpcf7-form p {
    flex-direction: column;
    align-items: stretch;
  }
  .newsletter-form .btn,
  .footer-col .wpcf7-form .btn { width: 100%; justify-content: center; }
}

/* -------------------------------------------------------------------------
 * Contact Form 7 integration
 * -------------------------------------------------------------------------
 * The Contact page ships its "Form" tab markup already wrapped in our own
 * .form-card / .form-row / .field structure (see HOWTO.md §"Contact form —
 * Contact Form 7"), so labels/inputs/textarea/select already pick up all
 * the .field rules above with zero extra work. This block only needs to:
 *  1) make CF7's own <span> wrappers not fight that layout,
 *  2) restyle CF7's default validation/response boxes to match the site's
 *     teal/ink palette instead of the plugin's default red/grey, and
 *  3) give the CF7 submit button the same "arrow" hover affordance as every
 *     other .btn on the site (a real <span class="arrow"> can't be nested
 *     inside a CF7 [submit] tag's label, so it's added via ::after here),
 *     and
 *  4) reset native browser button chrome on CF7's submit tag — see the
 *     .btn[type="submit"] rule immediately below for why.
 */

/* CF7's [submit] form-tag renders a real <input type="submit">, not a
   <button> — every other .btn on this site (in the original static HTML)
   was always a <button> or <a>, so this combination never existed before
   CF7 was added. Browsers apply native OS "appearance" chrome to
   input[type=submit] by default, and that native rendering can override
   (or simply not honour) an author-specified `background`/`border` unless
   `appearance` is explicitly reset first — without this, .btn-primary's
   dark background is dropped and you're left with a plain native white/
   grey system button showing white text on top of it (i.e. white-on-white
   or close to it). Resetting `appearance` here restores the normal CSS
   cascade so .btn / .btn-primary / .btn-accent / .btn-ghost render exactly
   the same whether they end up on a <button>, an <a>, or an <input>. */
.btn[type="submit"],
.btn[type="button"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.wpcf7-form-control-wrap { display: block; width: 100%; }

.wpcf7-form .field .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #c2483f;
}
.wpcf7-form .field input.wpcf7-not-valid,
.wpcf7-form .field select.wpcf7-not-valid,
.wpcf7-form .field textarea.wpcf7-not-valid {
  border-color: #c2483f;
}

/* Arrow only on the Contact page's card form (matches its original button,
   which had a real <span class="arrow">) — the footer newsletter's CF7
   submit button never had one, so it's deliberately scoped to .form-card
   rather than added to every .wpcf7-form on the site. */
.form-card .wpcf7-form .btn.wpcf7-submit { position: relative; }
.form-card .wpcf7-form .btn.wpcf7-submit::after { content: "→"; transition: transform 0.18s ease; }
.form-card .wpcf7-form .btn.wpcf7-submit:hover::after { transform: translateX(3px); }

/* Footer newsletter form: CF7 wraps each field in its own
   <span class="wpcf7-form-control-wrap">, which — unlike the original
   bare <input> — isn't a flex item by default (the general
   `.wpcf7-form-control-wrap { display:block; width:100% }` rule near the
   top of this section forces it to fill the entire row on its own,
   pushing the submit button onto its own line below). These rules restore
   the original "input grows, button stays its natural width, both on one
   line" behaviour by making the wrap span itself the flex item instead —
   scoped to both `.newsletter-form` (the class this theme's own
   bheard/shortcode-card block injects onto the CF7 <form> tag when its
   "Form CSS class" attribute is set — see HOWTO.md §4b) and, as a
   structural fallback that doesn't depend on that attribute/class having
   been set at all, `.footer-col .wpcf7-form` (matches by position in the
   footer markup — `.footer-col` never wraps any other CF7 form). */
.newsletter-form .wpcf7-form-control-wrap,
.footer-col .wpcf7-form .wpcf7-form-control-wrap {
  display: block;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.newsletter-form .wpcf7-form-control-wrap input,
.footer-col .wpcf7-form .wpcf7-form-control-wrap input { width: 100%; }
.newsletter-form .wpcf7-not-valid-tip,
.newsletter-form .wpcf7-response-output,
.footer-col .wpcf7-form .wpcf7-not-valid-tip,
.footer-col .wpcf7-form .wpcf7-response-output { flex-basis: 100%; }

/* Submission states. CF7 keeps exactly one status class on the <form>
   (mirrored in data-status): init → submitting → invalid | unaccepted |
   spam | aborted | failed | payment-required | sent. After a successful
   send it passes through `resetting` while it clears the fields, then
   lands on `sent` again — so `resetting` counts as still busy here.
   Everything is prefixed with `.wpcf7` to outrank the plugin's own
   styles.css (`.wpcf7 form .wpcf7-response-output` and friends), which
   otherwise wins with its 2px coloured border and 2em margins. */

.wpcf7 .wpcf7-form .wpcf7-response-output {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 0;
  padding: 14px 18px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
}
.wpcf7 .wpcf7-form .wpcf7-response-output::before {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
  background: var(--accent-tint);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  color: var(--accent-dark);
}
.wpcf7 .wpcf7-form.sent .wpcf7-response-output::before { content: "✓"; background: var(--accent); }

.wpcf7 .wpcf7-form:is(.invalid, .unaccepted, .spam, .aborted, .failed, .payment-required) .wpcf7-response-output {
  background: #fbeceb;
  border-color: rgba(194, 72, 63, 0.25);
  color: #c2483f;
}
.wpcf7 .wpcf7-form:is(.invalid, .unaccepted, .spam, .aborted, .failed, .payment-required) .wpcf7-response-output::before {
  content: "!";
  background: #c2483f;
}

.wpcf7 .wpcf7-form input.wpcf7-not-valid,
.wpcf7 .wpcf7-form select.wpcf7-not-valid,
.wpcf7 .wpcf7-form textarea.wpcf7-not-valid { border-color: #c2483f; }
.wpcf7 .wpcf7-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #c2483f;
}

/* Sent: the confirmation replaces the form. */
.wpcf7 .wpcf7-form.sent > :not(.wpcf7-response-output) { display: none; }
.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
  margin: 0;
  animation: cf7-sent-in 0.35s ease both;
}
.form-card .wpcf7 .wpcf7-form.sent .wpcf7-response-output {
  padding: 22px 24px;
  font-size: 1rem;
}
.footer-col .wpcf7 .wpcf7-form .wpcf7-response-output {
  margin-top: 0;
  padding: 10px 14px;
  font-size: 0.875rem;
}
@keyframes cf7-sent-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Busy (submitting / resetting): main.js makes the form `inert`; here the
   whole card dims under a moving striped overlay. CF7's own spinner and
   its `[inert] { opacity: .5 }` rule are replaced by this. */
.bheard-shortcode-card { position: relative; }
.bheard-shortcode-card .wpcf7-spinner { display: none; }
.wpcf7 .wpcf7-form[inert] { opacity: 1; }
.wpcf7 .wpcf7-form:is(.submitting, .resetting) > * {
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.bheard-shortcode-card:has(.wpcf7-form.submitting, .wpcf7-form.resetting)::after {
  --stripe: color-mix(in srgb, var(--accent) 16%, transparent);
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  cursor: progress;
  background: linear-gradient(135deg, var(--stripe) 25%, transparent 25%, transparent 50%, var(--stripe) 50%, var(--stripe) 75%, transparent 75%) 0 0 / 28px 28px;
  animation: cf7-stripes 0.7s linear infinite;
}
.bheard-shortcode-card:not(.form-card):has(.wpcf7-form.submitting, .wpcf7-form.resetting)::after {
  inset: -6px;
  border-radius: 14px;
}
@keyframes cf7-stripes {
  to { background-position: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bheard-shortcode-card:has(.wpcf7-form.submitting, .wpcf7-form.resetting)::after,
  .wpcf7 .wpcf7-form.sent .wpcf7-response-output { animation: none; }
}

/* CF7's screen-reader live-region status text — keep it out of the flow
   (it's announced to assistive tech, not meant to be seen) rather than
   letting it render as a stray blank line under the button. */
.wpcf7-form [role="status"].screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }