/* ============================================================
   Serviti.ai — Marketing site stylesheet
   Clean & light. One blue accent. Cool-neutral slate scale.
   Built on the Serviti design tokens (Inter, blue-600, gentle radii).
   ============================================================ */

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

/* ---------- TOKENS ---------- */
:root {
  --ink:      #0f172a;   /* primary text / headings */
  --ink-2:    #334155;   /* strong body */
  --text:     #475569;   /* body */
  --muted:    #64748b;   /* meta */
  --faint:    #94a3b8;   /* placeholders */

  --bg:       #ffffff;
  --bg-soft:  #f8fafc;   /* section tint */
  --bg-line:  #f1f5f9;
  --line:     #e2e8f0;   /* borders */
  --line-2:   #cbd5e1;

  --brand:      #2563eb;
  --brand-700:  #1d4ed8;
  --brand-600:  #2563eb;
  --brand-50:   #eff6ff;
  --brand-100:  #dbeafe;

  --green:    #16a34a;
  --green-50: #f0fdf4;
  --green-100:#dcfce7;
  --amber:    #f59e0b;
  --amber-50: #fffbeb;
  --red:      #ef4444;
  --red-50:   #fef2f2;
  --wa:       #25d366;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --pill: 999px;

  --sh-sm: 0 1px 2px rgba(15,23,42,.06);
  --sh:    0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 10px 24px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.05);
  --sh-lg: 0 24px 50px -16px rgba(15,23,42,.22), 0 8px 16px -8px rgba(15,23,42,.08);

  --container: 1200px;
  --nav-h: 72px;
  --ease: cubic-bezier(.4,0,.2,1); /* @kind other */
}

/* ---------- BASE ---------- */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

/* ---------- SECTION SCAFFOLDING ---------- */
section { position: relative; }
.section {
  padding: 96px 0;
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}
.section--tight { padding: 72px 0; }
.section--soft { background: var(--bg-soft); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--pill {
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 6px 12px; border-radius: var(--pill);
  letter-spacing: 0.06em;
}

.section-head { max-width: 680px; margin: 0 0 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  margin: 16px 0 0;
}
.section-head p {
  font-size: 18px; color: var(--text);
  margin-top: 14px; max-width: 620px;
  text-wrap: pretty;
}
.section-head.center p { margin-left: auto; margin-right: auto; }
.text-brand { color: var(--brand); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(37,99,235,.3); }
.btn-primary:hover { background: var(--brand-700); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn-outline { background: #fff; color: var(--brand-700); border-color: var(--brand-100); }
.btn-outline:hover { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #1ea954; transform: translateY(-1px); box-shadow: var(--sh-md); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- NAV ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.nav.scrolled { border-color: var(--line); box-shadow: 0 1px 0 rgba(15,23,42,.02); }
.nav-row {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo img { height: 38px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 9px 14px; border-radius: var(--r-sm);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.nav-links > li > a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-links > li > a.active { color: var(--brand); }
.nav-links .chev { width: 13px; height: 13px; opacity: .6; transition: transform .2s var(--ease); }

/* dropdown */
.nav-dd { position: relative; }
.nav-dd-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 320px;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-lg);
  padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: all .2s var(--ease);
}
.nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd:hover .chev { transform: rotate(180deg); }
.nav-dd-menu a {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 12px; border-radius: var(--r); background: none;
}
.nav-dd-menu a:hover { background: var(--bg-soft); }
.nav-dd-ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 10px; background: var(--brand-50); color: var(--brand);
  display: flex; align-items: center; justify-content: center;
}
.nav-dd-ic svg { width: 19px; height: 19px; }
.nav-dd-menu .t { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; }
.nav-dd-menu .d { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.nav-dd-use-cases { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 5px; }

.nav-cta { display: flex; align-items: center; gap: 10px; margin-left: 8px; }
.nav-login { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 9px 14px; }
.nav-login:hover { color: var(--brand); }
#serviti-login-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s var(--ease), visibility .16s var(--ease);
}
#serviti-login-loading.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.serviti-login-loading-card {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 230px;
  padding: 16px 20px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
  font-size: 15px;
  font-weight: 700;
}
.serviti-login-spinner {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid rgba(37, 99, 235, .18);
  border-top-color: var(--brand);
  animation: servitiLoginSpin .72s linear infinite;
}
@keyframes servitiLoginSpin {
  to { transform: rotate(360deg); }
}
.nav-links .nav-cta > a.btn-primary {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 52%, #06b6d4 100%);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 8px 22px -10px rgba(37,99,235,.85), 0 0 0 1px rgba(37,99,235,.12);
  font-weight: 700;
}
.nav-links .nav-cta > a.btn-primary::after {
  content: "";
  position: absolute;
  inset: -1px auto -1px -55%;
  width: 46%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.48), transparent);
  transform: skewX(-20deg);
  transition: left .55s var(--ease);
  pointer-events: none;
}
.nav-links .nav-cta > a.btn-primary:hover {
  color: #fff;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 48%, #0891b2 100%);
  box-shadow: 0 14px 30px -12px rgba(37,99,235,.95), 0 0 0 3px rgba(37,99,235,.14);
}
.nav-links .nav-cta > a.btn-primary:hover::after { left: 115%; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 8px; cursor: pointer; }
.hamburger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s var(--ease); }

/* ---------- HERO ---------- */
/* overflow must stay visible. `hidden` was here to contain the old floating
   channel tiles (--x:-2% etc.), which no longer exist. The player now expands to
   960px on hover -- growing left over the copy and downward past the hero edge --
   and any clipping cuts that expansion off mid-animation. Verified nothing else
   in the hero overflows, so there is nothing left for a clip to contain. */
.hero { padding: 72px 0 88px; overflow: visible; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.hero-eyebrow { margin-bottom: 22px; }
.hero h1 {
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.03; letter-spacing: -0.035em;
}
.hero h1 .text-brand { display: inline; }
.hero-grid--solo { grid-template-columns: 1fr; }
.hero-grid--solo .hero-sub { max-width: 720px; }
.hero-sub--accent { color: var(--ink); font-weight: 500; }

/* ---------- HERO with collage visual ---------- */
/* Top-aligned so the visual starts level with the H1 instead of being pushed
   down by centring against the much taller text column. */
.hero-grid--visual { grid-template-columns: minmax(0, 1.06fr) minmax(360px, 0.94fr); align-items: start; gap: 48px; }
.hero-grid--visual > * { min-width: 0; }
.hero-visual { position: relative; width: 100%; height: 460px; }
.hero-visual .hv-blob { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; z-index: 0; }
.hv-blob-1 { width: 230px; height: 230px; background: #bfdbfe; top: 4%; right: 6%; }
.hv-blob-2 { width: 200px; height: 200px; background: #fbcfe8; bottom: 6%; left: 2%; }
.hv-blob-3 { width: 180px; height: 180px; background: #bbf7d0; bottom: 18%; right: 18%; }

/* center live card */
.hv-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 250px; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px 17px; box-shadow: 0 26px 50px -22px rgba(15,23,42,.34); }
.hv-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.hv-spark { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #fff;
  background: linear-gradient(135deg,#2563eb,#7c3aed,#ec4899); flex: none; }
.hv-card-top b { display: block; font-size: 15px; font-weight: 800; color: var(--ink); }
.hv-card-top span { font-size: 12px; color: var(--muted); }
.hv-bubble { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; padding: 11px 13px; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.hv-lead { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.hv-check { width: 22px; height: 22px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.hv-check svg { width: 12px; height: 12px; }
.hv-hot { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; color: #b91c1c; background: #fee2e2; padding: 3px 9px; border-radius: 999px; }

/* floating channel tiles */
.hv-tile { position: absolute; left: var(--x); top: var(--y); width: 60px; height: 60px; border-radius: 17px; z-index: 2;
  display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 16px 28px -14px rgba(15,23,42,.5); }
.hv-tile svg { width: 28px; height: 28px; }
.t-wa { background: linear-gradient(135deg,#25d366,#15a34a); }
.t-ig { background: linear-gradient(135deg,#f9ce34,#ee2a7b 45%,#6228d7); }
.t-fb { background: linear-gradient(135deg,#3b82f6,#1877f2); }
.t-em { background: linear-gradient(135deg,#a78bfa,#7c3aed); }
.t-ad { background: linear-gradient(135deg,#fb923c,#ea580c); }
.t-qr { background: linear-gradient(135deg,#334155,#0f172a); }
.t-we { background: linear-gradient(135deg,#22d3ee,#0891b2); }

.hv-spark-float { position: absolute; color: #f59e0b; font-size: 22px; z-index: 2; }
.hv-spark-float.s1 { top: 30%; right: 2%; color: #2563eb; }
.hv-spark-float.s2 { bottom: 30%; left: 16%; color: #ec4899; }

@keyframes hvFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hvFloatCard { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,calc(-50% - 9px)); } }
@media (prefers-reduced-motion: no-preference) {
  .hv-float-a { animation: hvFloat 4.6s ease-in-out infinite; }
  .hv-float-b { animation: hvFloat 5.4s ease-in-out infinite .4s; }
  .hv-float-c { animation: hvFloat 5s ease-in-out infinite .8s; }
  .hv-card.hv-float-a { animation: hvFloatCard 5.2s ease-in-out infinite; }
  .hv-spark-float.s1 { animation: hvFloat 4s ease-in-out infinite .2s; }
  .hv-spark-float.s2 { animation: hvFloat 4.4s ease-in-out infinite .6s; }
}
@media (max-width: 980px) {
  .hero-grid--visual { grid-template-columns: 1fr; gap: 24px; }
  .hero-visual { height: 360px; width: 100%; max-width: 440px; margin: 0 auto; }
}
.hero-actions-band { padding-top: 28px; padding-bottom: 24px; }
.hero-actions-band + .proof-section { padding-top: 28px; }
.hero-actions-moved { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-actions-moved .hero-actions { justify-content: center; margin-top: 0; }
.hero-actions-moved .hero-trust { justify-content: center; margin-top: 0; }
.hero-sub {
  font-size: 19px; line-height: 1.55; color: var(--text);
  margin-top: 22px; max-width: 540px; text-wrap: pretty;
}
.hero-setup-highlight {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 12px 0 22px;
  padding: 2px 9px;
  border: 1px solid #0f172a;
  border-radius: var(--pill);
  background: #0f172a;
  color: #4ade80;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-save {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 24px; padding: 12px 20px;
  background: linear-gradient(100deg, var(--green-50), var(--green-100));
  color: #15803d; border: 1.5px solid #86efac;
  border-radius: 999px; font-size: 15.5px; font-weight: 700; line-height: 1.15;
  box-shadow: 0 10px 24px -12px rgba(22,163,74,.55);
}
.hero-save svg { width: 20px; height: 20px; flex: none; }
.hero-save strong { font-weight: 900; font-size: 21px; letter-spacing: -0.01em; color: var(--green); }

/* ---------- DOGFOOD / TRY IT ---------- */
.dogfood { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; }
.dogfood-copy h2 { margin: 14px 0 16px; }
.dogfood-copy > p { color: var(--muted); font-size: 17px; max-width: 480px; text-wrap: pretty; }
.dogfood-tags { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 4px; }
.df-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; background: #fff; border: 1px solid var(--line-2);
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink);
}
.df-tag svg { width: 15px; height: 15px; color: var(--green); flex: none; }
.dogfood-lead { margin-top: 22px; font-weight: 700; color: var(--ink); font-size: 17px; }
.dogfood-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px;
  padding: 30px; box-shadow: var(--sh-md); text-align: center;
}
.dfc-qr {
  width: 210px; height: 210px; margin: 0 auto 20px; padding: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
}
.dfc-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dfc-text strong { display: block; font-size: 18px; font-weight: 700; color: var(--ink); }
.dfc-text span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--muted); max-width: 320px; margin-left: auto; margin-right: auto; }
.dfc-or { display: flex; align-items: center; gap: 12px; margin: 22px 0 18px; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.dfc-or::before, .dfc-or::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }
.dfc-chat {
  display: inline-flex; align-items: flex-start; gap: 9px; text-align: left;
  font-size: 14.5px; color: var(--ink-2, var(--ink)); max-width: 340px; line-height: 1.5;
}
.dfc-chat svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 1px; }
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px;
  margin-top: 30px; font-size: 14px; color: var(--muted);
}
.hero-trust .ti { display: inline-flex; align-items: center; gap: 8px; }
.hero-trust .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-100); }
.hero-trust svg { width: 16px; height: 16px; color: var(--brand); }

/* ---------- HERO 3-PILLAR VISUAL ---------- */
.hero-pillars { display: flex; flex-direction: column; gap: 14px; }
.hp { display: flex; gap: 15px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-sm); transition: box-shadow .15s var(--ease), transform .15s var(--ease); }
.hp:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.hp-ic { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.hp-ic svg { width: 23px; height: 23px; }
.hp-ic.c-blue { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 9px 18px -8px rgba(37,99,235,.55); }
.hp-ic.c-indigo { background: linear-gradient(135deg,#6366f1,#4f46e5); box-shadow: 0 9px 18px -8px rgba(79,70,229,.55); }
.hp-ic.c-green { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 9px 18px -8px rgba(22,163,74,.55); }
.hp-body h3 { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.hp-body p { font-size: 14px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.hp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.hp-lab { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--brand); background: var(--brand-50); border-radius: 5px; padding: 3px 7px; }
.hp-chip { font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--pill); padding: 4px 11px 4px 5px; display: inline-flex; align-items: center; gap: 7px; }
.hp-chip .ci { width: 19px; height: 19px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.hp-chip .ci svg { width: 12px; height: 12px; }
.hp-chip .ci.wa { background: var(--green-100); color: var(--green); }
.hp-chip .ci.em { background: #faf5ff; color: #9333ea; }
.hp-chip .ci.ad { background: var(--amber-50); color: var(--amber); }
.hp-chip .ci.qr { background: var(--brand-50); color: var(--brand); }
.hp-chip .ci.ln { background: #ecfeff; color: #0891b2; }
.hp-chip .ci.fl { background: #fff7ed; color: #ea580c; }
.hp-chip .ci.we { background: var(--brand-50); color: var(--brand); }
.hp-chip .ci.fb { background: #e7f0fe; color: #1877f2; }
.hp-chip .ci.ig { background: #fdeef4; color: #e1306c; }

/* ---------- SEE IT WORK (relocated proof) ---------- */
.proof-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.proof-head h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 14px; }
.proof-section .proof { max-width: 820px; margin: 0 auto; }
.cov-pillars { max-width: 880px; margin: 0 auto; }

/* ---------- PRODUCT PROOF (chat + dashboard) ---------- */
.proof {
  position: relative;
  background: linear-gradient(180deg, #fbfcfe 0%, #f1f5fb 100%);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  padding: 16px;
}
.proof-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px 12px;
}
.proof-bar .dots { display: flex; gap: 6px; }
.proof-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line-2); }
.proof-bar .url {
  margin-left: 6px; font-size: 12.5px; color: var(--muted);
  background: #fff; border: 1px solid var(--line);
  padding: 4px 12px; border-radius: var(--pill);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.proof-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--green); }
.proof-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-100); animation: pulse 2s var(--ease) infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--green-100); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.12); } }

.proof-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-demo-card { max-width: 560px; margin: 0 auto; }
#agent > .container.split { align-items: start; }
.product-demo-card .proof-body { grid-template-columns: minmax(0, 1fr); }
.product-demo-card .dash { box-shadow: none; }
.product-demo-card .chat-head,
.product-demo-card .bubble,
.product-demo-card .chat-captured,
.product-demo-card .lead-alert-preview {
  opacity: 0;
  transform: translateY(8px);
  animation-duration: 8s;
  animation-timing-function: var(--ease);
  animation-iteration-count: infinite;
}
.product-demo-card .chat-head { animation-name: demoShowHead; }
.product-demo-card .bubble:nth-of-type(1) { animation-name: demoShowMsg1; }
.product-demo-card .bubble:nth-of-type(2) { animation-name: demoShowMsg2; }
.product-demo-card .bubble:nth-of-type(3) { animation-name: demoShowMsg3; }
.product-demo-card .bubble:nth-of-type(4) { animation-name: demoShowMsg4; }
.product-demo-card .chat-captured {
  animation-name: demoShowCaptured;
  transform: translateY(8px) scale(.96);
}
.product-demo-card .lead-alert-preview { animation-name: demoShowAlert; }
.product-demo-card .chat-captured svg { animation: demoCheckPulse 2s var(--ease) infinite; }
.lead-alert-preview { gap: 10px; }
.lead-alert-card {
  position: relative;
  padding: 12px;
  border: 1px solid var(--bg-line);
  border-radius: 12px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.lead-alert-title { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.lead-alert-card p { margin: 5px 0 10px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.lead-alert-card dl { display: grid; gap: 7px; margin: 0; }
.lead-alert-card dl div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lead-alert-card dt { font-size: 11px; color: var(--muted); }
.lead-alert-card dd { margin: 0; font-size: 12px; font-weight: 700; color: var(--ink); text-align: right; }
.lead-alert-time { display: block; margin-top: 10px; font-size: 11px; color: var(--muted); }
.email-alert { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; background: var(--brand-50); }
.email-alert .mail-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; }
.email-alert .mail-ic svg { width: 16px; height: 16px; }
.email-alert strong { display: block; font-size: 12.5px; color: var(--ink); }
.email-alert span { display: block; font-size: 11px; color: var(--muted); }
@keyframes demoShowHead {
  0%, 4%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
  8%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoShowMsg1 {
  0%, 10%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
  14%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoShowMsg2 {
  0%, 18%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
  22%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoShowMsg3 {
  0%, 26%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
  30%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoShowMsg4 {
  0%, 34%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
  38%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoShowCaptured {
  0%, 44%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.96); }
  49%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoShowAlert {
  0%, 54%, 88%, 100% { opacity: 0; transform: translateY(8px) scale(.98); }
  60%, 82% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes demoCheckPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.22); }
}
@media (prefers-reduced-motion: reduce) {
  .product-demo-card .chat-head,
  .product-demo-card .bubble,
  .product-demo-card .chat-captured,
  .product-demo-card .lead-alert-preview {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .product-demo-card .chat-captured svg { animation: none; }
}

/* chat panel */
.chat {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 9px;
}
.chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bg-line); margin-bottom: 2px; }
.chat-av { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.chat-head .who strong { display: block; font-size: 13.5px; color: var(--ink); }
.chat-head .who span { display: block; font-size: 11.5px; color: var(--green); font-weight: 500; }
.bubble { font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 12px; max-width: 88%; }
.bubble.bot { background: var(--bg-soft); color: var(--ink-2); border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.user { background: var(--brand); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-captured {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--green);
  background: var(--green-50); border: 1px solid var(--green-100);
  padding: 6px 11px; border-radius: var(--pill);
}
.chat-captured svg { width: 14px; height: 14px; }

/* dashboard panel */
.dash {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 9px;
}
.dash-title { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.dash-title span.n { color: var(--muted); font-weight: 500; }
.lead { display: flex; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--bg-line); border-radius: 10px; }
.lead b { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; background: var(--bg-soft); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700; }
.lead .meta { flex: 1; min-width: 0; }
.lead .meta strong { display: block; font-size: 13px; color: var(--ink); }
.lead .meta span { display: block; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: var(--pill); display: inline-flex; align-items: center; gap: 5px; }
.tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.tag.hot { background: var(--red-50); color: #b91c1c; } .tag.hot::before { background: var(--red); }
.tag.qual { background: var(--green-50); color: #15803d; } .tag.qual::before { background: var(--green); }
.tag.new { background: var(--brand-50); color: var(--brand-700); } .tag.new::before { background: var(--brand); }
.tag.warm { background: #fef3c7; color: #b45309; } .tag.warm::before { background: #f59e0b; }
.tag.contacted { background: #fef9c3; color: #a16207; } .tag.contacted::before { background: #eab308; }
.df-table td.narrow { white-space: nowrap; }
@media (max-width: 720px) { .df-table th:nth-child(2), .df-table td:nth-child(2) { display: none; } }
.dash-alert { display: flex; align-items: center; gap: 9px; margin-top: 2px; padding: 9px 10px; border-radius: 10px; background: var(--green-50); }
.dash-alert .wa-ic { width: 28px; height: 28px; border-radius: 7px; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; }
.dash-alert .wa-ic svg { width: 16px; height: 16px; }
.dash-alert strong { display: block; font-size: 12.5px; color: var(--ink); }
.dash-alert span { display: block; font-size: 11px; color: var(--muted); }

/* ---------- LOGO / CHANNEL STRIP ---------- */
.strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.strip-inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 14px; padding: 26px 0; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line);
  padding: 9px 16px; border-radius: var(--pill);
}
.chip svg { width: 16px; height: 16px; color: var(--brand); }

/* ---------- FLOW (capture / qualify / convert) ---------- */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.flow-step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; position: relative; transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.flow-step:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.flow-num { font-size: 13px; font-weight: 700; color: var(--brand); letter-spacing: 0.1em; }
.flow-ic { width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 10px 20px -7px rgba(37,99,235,.5); color: #fff; display: flex; align-items: center; justify-content: center; margin: 14px 0 16px; }
.flow-ic svg { width: 26px; height: 26px; color: #fff; }
.flow-step.c2 .flow-ic { background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow: 0 10px 20px -7px rgba(245,158,11,.5); }
.flow-step.c3 .flow-ic { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 10px 20px -7px rgba(22,163,74,.5); }
.flow-step h3 { font-size: 20px; margin-bottom: 8px; }
.flow-step p { font-size: 15px; }

/* ---------- PRODUCT CARDS ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 30px; transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.card:hover { box-shadow: var(--sh-md); transform: translateY(-3px); border-color: var(--line-2); }
.card.featured { border-color: var(--brand-100); box-shadow: 0 0 0 1px var(--brand-100), var(--sh); }
.card-ic { width: 54px; height: 54px; border-radius: 15px; background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 10px 20px -7px rgba(37,99,235,.5); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.card-ic svg { width: 26px; height: 26px; color: #fff; }
.card.c2 .card-ic { background: linear-gradient(135deg,#6366f1,#4f46e5); box-shadow: 0 10px 20px -7px rgba(79,70,229,.5); }
.card.c3 .card-ic { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 10px 20px -7px rgba(22,163,74,.5); }
.card h3 { font-size: 21px; margin-bottom: 4px; }
.card .tagline { font-size: 13px; font-weight: 600; color: var(--brand); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px; }
.card > p { font-size: 15px; margin-bottom: 18px; }
.card-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.card-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.card-list svg { width: 18px; height: 18px; color: var(--green); flex-shrink: 0; margin-top: 1px; }
.card-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 15px; color: var(--brand); }
.card-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.card:hover .card-link svg { transform: translateX(3px); }

/* ---------- CHANNELS ---------- */
.channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.channel { text-align: center; padding: 28px 18px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.channel:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.channel-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.channel-ic svg { width: 27px; height: 27px; }
.channel.c-print .channel-ic { background: #fff7ed; color: #ea580c; }
.channel.c-wa .channel-ic { background: var(--green-100); color: var(--green); }
.channel.c-web .channel-ic { background: var(--brand-50); color: var(--brand); }
.channel.c-ad .channel-ic { background: #faf5ff; color: #9333ea; }
.channel h3 { font-size: 16px; margin-bottom: 6px; }
.channel p { font-size: 14px; }

/* ---------- FEATURE / WHY GRID ---------- */
.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.why-card { padding: 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); }
.why-ic { width: 50px; height: 50px; border-radius: 14px; background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 10px 20px -7px rgba(37,99,235,.5); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.why-ic svg { width: 24px; height: 24px; color: #fff; }
.why-card:nth-child(2) .why-ic { background: linear-gradient(135deg,#fb923c,#ea580c); box-shadow: 0 10px 20px -7px rgba(234,88,12,.5); }
.why-card:nth-child(3) .why-ic { background: linear-gradient(135deg,#6366f1,#4f46e5); box-shadow: 0 10px 20px -7px rgba(79,70,229,.5); }
.why-card:nth-child(4) .why-ic { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 10px 20px -7px rgba(22,163,74,.5); }
.why-card:nth-child(5) .why-ic { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow: 0 10px 20px -7px rgba(124,58,237,.5); }
.why-card:nth-child(6) .why-ic { background: linear-gradient(135deg,#fbbf24,#f59e0b); box-shadow: 0 10px 20px -7px rgba(245,158,11,.5); }
.why-card h3 { font-size: 18px; margin-bottom: 8px; }
.why-card p { font-size: 15px; }

/* ---------- SPLIT (image/mock + copy) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-copy h2 { font-size: clamp(26px, 3vw, 36px); margin: 14px 0 0; }
.split-copy p { font-size: 17px; margin-top: 14px; }
.split-list { margin-top: 22px; display: flex; flex-direction: column; gap: 13px; }
.split-list li { display: flex; align-items: flex-start; gap: 11px; font-size: 15.5px; color: var(--ink-2); }
.split-list svg { width: 20px; height: 20px; color: var(--green); flex-shrink: 0; margin-top: 1px; }

/* ---------- BIG DASHBOARD MOCK ---------- */
.dashboard-frame {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); overflow: hidden;
}
.df-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.df-bar .dots { display: flex; gap: 6px; }
.df-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.df-bar .url { margin-left: 6px; font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.df-bar .live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--green); }
.df-bar .live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
.df-stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); }
.df-stat { padding: 20px 22px; border-right: 1px solid rgba(255,255,255,.07); }
.df-stat:last-child { border-right: 0; }
.df-stat .num { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; color: #fff; }
.df-stat .num.blue { color: #93c5fd; } .df-stat .num.green { color: #4ade80; } .df-stat .num.amber { color: #fcd34d; } .df-stat .num.purple { color: #c4b5fd; }
.df-stat .lbl { font-size: 12px; color: #94a3b8; margin-top: 7px; }
.df-table { width: 100%; border-collapse: collapse; }
.df-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.df-table td { padding: 14px 22px; border-bottom: 1px solid var(--bg-line); font-size: 14px; vertical-align: middle; }
.df-table tr:last-child td { border-bottom: 0; }
.df-table .nm { font-weight: 600; color: var(--ink); }
.df-table .ph { font-size: 12px; color: var(--muted); margin-top: 2px; }
.df-table .q { color: var(--ink-2); }

/* ---------- CTA BAND ---------- */
.cta-band {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
  border-radius: var(--r-xl);
  padding: 56px; color: #fff; position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events: none;
}
.cta-band-grid { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; gap: 32px; align-items: center; }
.cta-band h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); }
.cta-band p { color: #dbeafe; font-size: 18px; margin-top: 12px; }
.cta-band-actions { display: flex; flex-direction: column; gap: 12px; }
.cta-band .btn-primary { background: #fff; color: var(--brand-700); box-shadow: none; }
.cta-band .btn-primary:hover { background: #f1f5f9; }
.cta-band .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.38); }
.cta-band .btn-outline:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); box-shadow: none; }
.cta-band .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.cta-band .btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }

/* compact inline CTA */
.cta-inline { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 36px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-inline .t { font-size: 20px; font-weight: 700; color: var(--ink); }

/* ---------- PAGE HEADER (inner pages) ---------- */
.page-header { padding: 64px 0 56px; text-align: center; background: var(--bg-soft); border-bottom: 1px solid var(--line); }
.page-header h1 { font-size: clamp(34px, 4.4vw, 52px); margin: 18px 0 0; }
.page-header p { font-size: 19px; max-width: 640px; margin: 16px auto 0; text-wrap: pretty; }

/* ---------- CONTACT ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.trial-flow { display: grid; gap: 24px; max-width: 860px; }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-md); padding: 36px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
.req { color: #dc2626; font-weight: 800; margin-left: 2px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: #fff; font-size: 15px; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.field textarea { resize: vertical; min-height: 110px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bot-check { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--muted); margin-top: 14px; text-align: center; }
.trial-form h2 { margin: 10px 0 10px; font-size: clamp(25px, 3vw, 34px); letter-spacing: 0; }
.trial-form-intro { color: var(--muted); font-size: 15px; line-height: 1.65; margin-bottom: 22px; }
.trial-form-note { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.trial-consent {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 2px 0 18px; color: var(--ink-2); font-size: 13.5px; line-height: 1.55;
}
.trial-consent input { margin-top: 4px; flex: none; }
.trial-consent a { color: var(--brand); font-weight: 600; }
/* Submit result dialog — centered card inside the shared .trial-modal shell.
   Success = green check; API-unreachable fallback = amber alert + WhatsApp. */
.trial-modal-panel.trial-result {
  width: min(440px, 100%); max-width: 440px; padding: 30px 28px 26px;
  display: grid; justify-items: center; gap: 10px; text-align: center;
}
.trial-result-icon {
  width: 60px; height: 60px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 4px;
  background: var(--green-50); color: var(--green);
}
.trial-result-icon svg { width: 30px; height: 30px; }
.trial-result-icon .tm-ic-err { display: none; }
.trial-modal.is-error .trial-result-icon { background: var(--amber-50); color: var(--amber); }
.trial-modal.is-error .trial-result-icon .tm-ic-ok { display: none; }
.trial-modal.is-error .trial-result-icon .tm-ic-err { display: block; }
.trial-result strong { font-size: 19px; color: var(--ink); letter-spacing: -0.01em; }
.trial-result span { font-size: 14px; line-height: 1.55; color: var(--text); }
.trial-result a {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--pill);
  background: var(--green); color: #fff; font-weight: 700; font-size: 14.5px;
}
.trial-result a:hover { background: #128c4a; }
.trial-result a[hidden] { display: none; }
.trial-form.is-submitted .field-row,
.trial-form.is-submitted .field,
.trial-form.is-submitted .trial-consent,
.trial-form.is-submitted button[type="submit"],
.trial-form.is-submitted .trial-form-note {
  display: none;
}
/* Submitted state — the confirmation must read as a distinct panel, not as
   more body copy. Before this existed, .trial-success was unstyled text on
   white and people could not tell the form had gone through. */
.trial-form.is-submitted details { display: none; }
.trial-success {
  display: block;
  margin: 4px 0 0;
  padding: 26px 24px 24px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: var(--r-lg);
  text-align: center;
}
.trial-success[hidden] { display: none; }
.trial-success::before {
  content: "";
  display: block;
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--green) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/26px 26px no-repeat;
}
.trial-success strong {
  display: block;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.trial-success span {
  display: block;
  max-width: 46ch;
  margin: 0 auto;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
}
.trial-success a {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 12px 22px;
  background: #25d366; color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  border-radius: 999px;
}
.trial-success a:hover { background: #128c4a; }
.trial-success a[hidden] { display: none; }
.trial-form.is-submitted h2 { text-align: center; }
.trial-form.is-submitted .trial-form-intro { text-align: center; max-width: 52ch; margin-left: auto; margin-right: auto; }
@media (max-width: 520px) {
  .trial-success { padding: 22px 16px; }
  .trial-success strong { font-size: 19px; }
}
.trial-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.trial-modal.open { display: flex; }
.trial-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.58); backdrop-filter: blur(5px); }
.trial-modal-panel {
  position: relative; width: min(760px, 100%); max-height: min(90vh, 920px); overflow: auto;
  background: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: var(--r-xl);
  box-shadow: 0 28px 70px -26px rgba(15,23,42,.55); padding: 32px;
}
.trial-modal-close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink);
  font-size: 24px; line-height: 1; cursor: pointer;
}
.trial-modal-close:hover { border-color: var(--brand); color: var(--brand); }
body.trial-modal-open { overflow: hidden; }
body.trial-modal-open #serviti-chat-widget,
body.trial-modal-open #serviti-widget,
body.trial-modal-open #serviti-chat-container,
body.trial-modal-open .serviti-chat-widget { z-index: 1 !important; }

@media (min-width: 769px) {
  .serviti-widget-container .serviti-chat-window.open:not(.is-maximized) {
    height: min(640px, calc(100dvh - var(--nav-h) - 110px)) !important;
    max-height: calc(100dvh - var(--nav-h) - 110px) !important;
  }
  .serviti-widget-container .serviti-chat-window.is-maximized {
    height: calc(100dvh - var(--nav-h) - 32px) !important;
    max-height: calc(100dvh - var(--nav-h) - 32px) !important;
    bottom: 16px !important;
  }
}

.contact-side { display: flex; flex-direction: column; gap: 16px; }
.contact-item { display: flex; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }
.contact-item .ci { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.contact-item .ci svg { width: 22px; height: 22px; }
.contact-item.wa .ci { background: var(--green-100); color: var(--green); }
.contact-item.ph .ci { background: var(--brand-50); color: var(--brand); }
.contact-item.em .ci { background: #faf5ff; color: #9333ea; }
.contact-item.lo .ci { background: var(--amber-50); color: var(--amber); }
.contact-item .ct strong { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.contact-item .ct a, .contact-item .ct span { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 3px; }
.contact-item .ct a:hover { color: var(--brand); }
.contact-item .ct p { font-size: 14px; color: var(--text); margin-top: 3px; }

.qr-card { background: var(--ink); border-radius: var(--r-lg); padding: 24px; display: flex; align-items: center; gap: 20px; color: #fff; }
.qr-card img { width: 104px; height: 104px; border-radius: 10px; background: #fff; padding: 7px; }
.qr-card .qt strong { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #93c5fd; }
.qr-card .qt h4 { color: #fff; font-size: 18px; margin: 6px 0 4px; }
.qr-card .qt p { font-size: 13.5px; color: #cbd5e1; }

/* ---------- FOOTER ---------- */
.footer { background: var(--ink); color: #cbd5e1; padding: 56px 0 32px; }
.footer-top { display: grid; grid-template-columns: 1.25fr repeat(4, 1fr); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand img { height: 34px; margin-bottom: 16px; }
.footer-brand p { font-size: 14.5px; color: #94a3b8; max-width: 280px; }
.footer-col h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 16px; }
/* Second labelled group inside one footer column. Industries answer "who is
   this for", channels answer "where does it work" — listing them together read
   as a category error (WhatsApp is not a business type). Kept in one column
   because index.html already fills all four grid slots. */
.footer-col .footer-col-subhead { margin-top: 26px; }

.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14.5px; color: #94a3b8; transition: color .15s var(--ease); }
.footer-col a:hover { color: #fff; }
.footer-bot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 28px; }
.footer-bot span { font-size: 13px; color: #94a3b8; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 9px; border: 1px solid rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; color: #94a3b8; transition: .15s var(--ease); }
.footer-social a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }
.footer-social svg { width: 17px; height: 17px; }

/* ---------- SCROLL REVEAL ---------- */
/* Only hide when JS is active (html.js-reveal). No JS = always visible. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js-reveal [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
  .proof-bar .live i, .df-bar .live i { animation: none; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 52px 0 64px; }
  .split, .contact-grid, .cta-band-grid { grid-template-columns: 1fr; gap: 36px; }
  .dogfood { grid-template-columns: 1fr; gap: 36px; }
  .dogfood-copy > p { max-width: none; }
  .split.reverse .split-media { order: 0; }
  .flow, .cards, .why { grid-template-columns: 1fr 1fr; }
  .channels { grid-template-columns: 1fr 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .trial-flow { gap: 18px; }
  /* The embedded widget deliberately sits above ordinary page content. While
     the mobile menu is open, suspend it so Sign in and Create Free AI Agent
     remain visible and tappable. Visibility preserves an open conversation. */
  body.mobile-nav-open .serviti-widget-container,
  body.mobile-nav-open #serviti-chat-widget,
  body.mobile-nav-open #serviti-widget,
  body.mobile-nav-open #serviti-chat-container,
  body.mobile-nav-open .serviti-chat-widget {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .section { padding: 64px 0; }
  .nav-links { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: #fff; flex-direction: column; align-items: stretch; padding: 12px; border-bottom: 1px solid var(--line); box-shadow: var(--sh-md); gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links > li > a { padding: 12px 14px; }
  .nav-dd-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .nav-cta { margin: 8px 0 0; }
  .hamburger { display: flex; }
  .flow, .cards, .why, .channels { grid-template-columns: 1fr; }
  .cta-band, .form-card { padding: 32px 24px; }
  .cta-inline { flex-direction: column; align-items: flex-start; }
  .df-stats { grid-template-columns: 1fr 1fr; }
  .df-stat { border-bottom: 1px solid rgba(255,255,255,.07); }
  .proof-body { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .trial-modal { padding: 10px; align-items: stretch; }
  .trial-modal-panel { max-height: calc(100vh - 20px); padding: 28px 20px; border-radius: 16px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .footer-top { grid-template-columns: 1fr; }
}

/* ---------- LEGAL PAGES ---------- */
.legal { padding: 56px 0 80px; }
.legal-wrap { max-width: 800px; margin: 0 auto; }
.legal h1 { font-size: clamp(30px, 4vw, 42px); letter-spacing: -0.02em; }
.legal .updated { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.legal h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 40px 0 12px; }
.legal h3 { font-size: 17px; font-weight: 700; margin: 24px 0 8px; }
.legal p, .legal li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--brand-700); font-weight: 600; }
.legal .legal-note { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; margin: 20px 0; }
.legal .legal-note p:last-child { margin-bottom: 0; }
.legal strong { color: var(--ink); font-weight: 700; }
.footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { opacity: 1; color: #fff; }

/* ============================================================
   PRODUCTS / CONTACT EXTRAS
   ============================================================ */

/* horizontal flow strip */
.flow-strip { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.flow-strip .fs { flex: 1 1 200px; padding: 24px; border-right: 1px solid var(--line); }
.flow-strip .fs:last-child { border-right: 0; }
.flow-strip .fs.primary { background: var(--brand-50); }
.flow-strip .fs-ic { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: #fff; }
.flow-strip .fs-ic svg { width: 27px; height: 27px; color: #fff; }
.flow-strip .fs.c1 .fs-ic { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 10px 20px -7px rgba(37,99,235,.55); }
.flow-strip .fs.c2 .fs-ic { background: linear-gradient(135deg,#6366f1,#4f46e5); box-shadow: 0 10px 20px -7px rgba(79,70,229,.55); }
.flow-strip .fs.c3 .fs-ic { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 10px 20px -7px rgba(22,163,74,.55); }
.flow-strip .fs.c4 .fs-ic { background: linear-gradient(135deg,#fb923c,#ea580c); box-shadow: 0 10px 20px -7px rgba(234,88,12,.55); }
.flow-strip .fs strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.flow-strip .fs span { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
@media (max-width: 760px) { .flow-strip .fs { border-right: 0; border-bottom: 1px solid var(--line); } .flow-strip .fs:last-child { border-bottom: 0; } }

/* process timeline */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.process-step { position: relative; padding-top: 8px; }
.process-step .pn { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 1px solid var(--line); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 17px; margin-bottom: 16px; box-shadow: var(--sh-sm); }
.process-step h3 { font-size: 18px; margin-bottom: 7px; }
.process-step p { font-size: 14.5px; }
.process-step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 56px; right: -12px; height: 1px; background: var(--line); }
@media (max-width: 980px) { .process { grid-template-columns: 1fr 1fr; } .process-step::after { display: none; } }
@media (max-width: 520px) { .process { grid-template-columns: 1fr; } }

/* homepage self-serve setup */
.self-serve-section {
  overflow: hidden;
  border-block: 1px solid #dbeafe;
  background:
    radial-gradient(circle at 5% 10%, rgba(56, 189, 248, .16), transparent 25%),
    radial-gradient(circle at 94% 88%, rgba(249, 115, 22, .12), transparent 24%),
    linear-gradient(180deg, #eff7ff 0%, #f8fbff 54%, #fff 100%);
}
.self-serve-section .container { position: relative; z-index: 1; }
.self-serve-section .section-head { max-width: 790px; margin-bottom: 42px; }
.self-serve-section .section-head h2 { margin-top: 17px; font-size: clamp(34px, 4.4vw, 54px); letter-spacing: -.045em; }
.self-serve-section .section-head p { max-width: 660px; color: #475569; font-size: 17px; }
.self-serve-heading-labels { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.self-serve-heading-labels .eyebrow {
  padding: 7px 12px;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  border-radius: var(--pill);
  background: rgba(255, 255, 255, .78);
}
.self-serve-time {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  color: #fff;
  border-radius: var(--pill);
  background: #ea580c;
  box-shadow: 0 8px 20px rgba(234, 88, 12, .2);
  font-size: 12.5px;
  font-weight: 850;
}
.self-serve-time b { font-size: 15px; line-height: 1; }
.self-serve-process { grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 0; }
.self-serve-process .process-step {
  --step-accent: #2563eb;
  position: relative;
  overflow: hidden;
  min-height: 238px;
  padding: 29px 27px 27px;
  border: 1px solid #dbe4f0;
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .08);
}
.self-serve-process .process-step:nth-child(2) { --step-accent: #ea580c; }
.self-serve-process .process-step:nth-child(3) { --step-accent: #16a34a; }
.self-serve-process .process-step::before {
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: var(--step-accent);
  content: "";
}
.self-serve-process .process-step::after { display: none; }
.self-serve-process .process-step .pn {
  width: 52px;
  height: 52px;
  margin-bottom: 23px;
  color: #fff;
  border: 0;
  background: var(--step-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--step-accent) 24%, transparent);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.self-serve-process .process-step h3 { margin-bottom: 9px; color: #0f172a; font-size: 21px; }
.self-serve-process .process-step p { color: #475569; font-size: 14px; line-height: 1.65; }
.self-serve-ready { margin-top: 22px; padding: 30px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: center; border: 1px solid #fed7aa; border-radius: 20px; background: #fff7ed; box-shadow: 0 12px 30px rgba(154, 52, 18, .07); }
.self-serve-ready-copy h3 { margin: 9px 0 8px; font-size: 21px; }
.self-serve-ready-copy p { font-size: 14.5px; }
.self-serve-deliverables { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.self-serve-deliverables li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.self-serve-deliverables li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--green); font-weight: 900; }
.self-serve-actions { margin-top: 28px; display: flex; align-items: center; justify-content: center; gap: 20px; }
.self-serve-actions > a:not(.btn) { color: var(--brand); font-size: 14px; font-weight: 700; text-decoration: none; }
.self-serve-actions > a:not(.btn):hover { text-decoration: underline; }
@media (max-width: 760px) {
  .self-serve-section { padding: 72px 0; }
  .self-serve-section .section-head { margin-bottom: 30px; text-align: left; }
  .self-serve-section .section-head h2 { font-size: clamp(32px, 10vw, 43px); }
  .self-serve-section .section-head p { margin-left: 0; }
  .self-serve-heading-labels { justify-content: flex-start; }
  .self-serve-process { grid-template-columns: 1fr; }
  .self-serve-process .process-step { min-height: 0; }
  .self-serve-ready { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .self-serve-actions { align-items: stretch; flex-direction: column; text-align: center; }
}
@media (min-width: 761px) and (max-width: 980px) {
  .self-serve-process { grid-template-columns: 1fr 1fr; }
  .self-serve-process .process-step:last-child { grid-column: 1 / -1; min-height: 0; }
}
@media (min-width: 761px) and (max-width: 1040px) { .nav-get-started { display: none; } }
@media (max-width: 520px) {
  .self-serve-process .process-step { padding: 20px; }
  .self-serve-deliverables { grid-template-columns: 1fr; }
}

/* homepage pricing preview */
.home-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.home-price-card { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; box-shadow: var(--sh-sm); }
.home-price-card.featured { border: 2px solid var(--brand); box-shadow: 0 20px 44px -30px rgba(37,99,235,.55); }
.home-price-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: var(--pill); background: var(--brand); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.home-price-name { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.home-price-card h3 { margin-top: 8px; font-size: 20px; }
.home-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin-top: 20px; color: var(--muted); font-size: 12px; }
.home-price strong { color: var(--ink); font-size: 31px; letter-spacing: -.03em; }
.home-price-card > p { min-height: 66px; margin-top: 12px; font-size: 14px; }
.home-price-card ul { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 24px; }
.home-price-card li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.home-price-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.home-price-card .btn { margin-top: auto; }
.home-pricing-more, .home-faq-more { margin-top: 24px; text-align: center; }
.home-pricing-more a, .home-faq-more a { color: var(--brand); font-size: 14px; font-weight: 700; text-decoration: none; }
.home-pricing-more a:hover, .home-faq-more a:hover { text-decoration: underline; }
.home-faq-section .product-faq { max-width: 900px; margin: 0 auto; }
@media (max-width: 900px) {
  .home-pricing-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .home-price-card > p { min-height: 0; }
}

/* alert mock cards */
.alert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.alert-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.alert-card .ah { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--bg-line); }
.alert-card .ah .ic { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.alert-card.wa .ah .ic { background: var(--green-100); color: var(--green); }
.alert-card.em .ah .ic { background: var(--brand-50); color: var(--brand); }
.alert-card .ah .ic svg { width: 20px; height: 20px; }
.alert-card .ah strong { display: block; font-size: 15px; color: var(--ink); }
.alert-card .ah span { display: block; font-size: 13px; color: var(--muted); }
/* whatsapp body */
.wa-body { background: #e7 ; background: #efeae2; padding: 18px; }
.wa-bubble { background: #d9fdd3; border-radius: 10px; border-top-left-radius: 3px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5; color: var(--ink); box-shadow: 0 1px 1px rgba(0,0,0,.05); }
.wa-bubble .wt { display: inline-block; background: rgba(255,255,255,.7); color: #075e54; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-bottom: 8px; letter-spacing: .02em; }
.wa-bubble ul { margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.wa-bubble li { display: flex; justify-content: space-between; font-size: 12.5px; }
.wa-bubble li span { color: #5b6b63; } .wa-bubble li strong { color: var(--ink); }
.wa-bubble .time { display: block; text-align: right; font-size: 10.5px; color: #667781; margin-top: 6px; }
/* email body */
.em-body { padding: 18px 20px; }
.em-body .es { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 12px; }
.em-body .er { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--bg-line); font-size: 13.5px; }
.em-body .er:last-child { border-bottom: 0; } .em-body .er span { color: var(--muted); } .em-body .er strong { color: var(--ink); }
@media (max-width: 760px) { .alert-grid { grid-template-columns: 1fr; } }

/* phone chat mock */
.phone { max-width: 320px; margin: 0 auto; background: var(--ink); border-radius: 28px; padding: 10px; box-shadow: var(--sh-lg); }
.phone-inner { background: #fff; border-radius: 20px; overflow: hidden; }
.phone-bar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--brand); color: #fff; }
.phone-bar .pa { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.phone-bar strong { display: block; font-size: 14px; }
.phone-bar span { display: block; font-size: 11.5px; opacity: .85; }
.phone-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); min-height: 300px; }
.phone-foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line); background: #fff; color: var(--faint); font-size: 13.5px; }
.phone-foot svg { width: 18px; height: 18px; color: var(--brand); }

/* includes panel */
.includes { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 40px; align-items: center; }
.includes-aside { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg); padding: 28px; }
.includes-aside .lab { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); }
.includes-aside h3 { font-size: 22px; margin: 10px 0; }
.includes-aside p { font-size: 14.5px; }
.includes-aside .btn { margin-top: 18px; }
@media (max-width: 760px) { .includes { grid-template-columns: 1fr; padding: 28px; } }

/* plan note */
.plan-note { background: var(--bg-soft); border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 32px; text-align: center; max-width: 760px; margin: 0 auto; }
.plan-pills { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.plan-pills .pp { font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--line); padding: 8px 18px; border-radius: var(--pill); }
.plan-pills .pp.mid { border-color: var(--brand); color: var(--brand); }

/* ============================================================
   PRICING PAGE
   ============================================================ */
.pricing-hero .eyebrow--pill { margin-bottom: 4px; }

/* coverage band */
.coverage-section { padding: 72px 0; }
.coverage-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.coverage-head h2 { font-size: clamp(26px, 3vw, 36px); margin-top: 14px; }
.coverage-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: stretch; }
.coverage-card.wide { grid-column: 1 / -1; }
.coverage-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); padding: 28px; box-shadow: var(--sh-sm); display: flex; flex-direction: column; }
.cov-top { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-start; margin-bottom: 20px; }
.cov-ic { width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.cov-ic svg { width: 26px; height: 26px; }
.cov-ic.c-blue { background: linear-gradient(135deg,#3b82f6,#2563eb); box-shadow: 0 10px 20px -8px rgba(37,99,235,.55); }
.cov-ic.c-indigo { background: linear-gradient(135deg,#6366f1,#4f46e5); box-shadow: 0 10px 20px -8px rgba(79,70,229,.55); }
.cov-ic.c-green { background: linear-gradient(135deg,#22c55e,#16a34a); box-shadow: 0 10px 20px -8px rgba(22,163,74,.55); }
.cov-top h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.cov-top p { font-size: 14px; color: var(--muted); margin-top: 5px; line-height: 1.4; }
.cov-stat { width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 4px;
  font-size: 13px; font-weight: 700; text-align: center; color: var(--ink-2); border-radius: 12px; padding: 11px 15px; }
.cov-stat b { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; line-height: 1; text-align: center; }
.cov-stat small { display: inline; font-size: 11.5px; font-weight: 600; color: var(--muted); width: auto; margin-top: 0; text-align: center; line-height: 1.25; }
.cov-stat.s-blue { background: var(--brand-50); color: var(--brand-700); } .cov-stat.s-blue b { color: var(--brand); }
.cov-stat.s-indigo { background: #eef2ff; color: #4338ca; } .cov-stat.s-indigo b { color: #4f46e5; }
.cov-stat.s-green { background: var(--green-100); color: #15803d; } .cov-stat.s-green b { color: var(--green); }
/* Hero-pillar colours: orange = Insights, violet = Support */
.cov-ic.c-orange { background: linear-gradient(135deg,#fb923c,#ea580c); box-shadow: 0 10px 20px -8px rgba(234,88,12,.55); }
.cov-ic.c-violet { background: linear-gradient(135deg,#a78bfa,#7c3aed); box-shadow: 0 10px 20px -8px rgba(124,58,237,.55); }
.cov-stat.s-orange { background: rgba(234,88,12,.10); color: #c2410c; } .cov-stat.s-orange b { color: #ea580c; }
.cov-stat.s-violet { background: #f5f3ff; color: #6d28d9; } .cov-stat.s-violet b { color: #7c3aed; }
/* Role tag echoing the hero's "-> Insights / Engagement / ..." labels */
.cov-role { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }

.cov-split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: auto; }
.cov-col { display: flex; flex-direction: column; gap: 11px; }
.cov-lab { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--brand); }
.cov-chips { display: flex; flex-direction: column; gap: 9px; }
.cov-chip { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); }
.cov-chip .ci { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.cov-chip .ci svg { width: 16px; height: 16px; }
.cov-chip .ci.wa { background: var(--green-100); color: var(--green); }
.cov-chip .ci.em { background: #faf5ff; color: #9333ea; }
.cov-chip .ci.ad { background: var(--amber-50); color: var(--amber); }
.cov-chip .ci.qr { background: var(--brand-50); color: var(--brand); }
.cov-chip .ci.ln { background: #ecfeff; color: #0891b2; }
.cov-chip .ci.fl { background: #fff7ed; color: #ea580c; }
.cov-chip .ci.we { background: var(--brand-50); color: var(--brand); }

/* ---- Product sections: each gets its own tint + accent rule so it is obvious
   where one product ends and the next begins (they used to be white/white and
   grey/grey, so adjacent products ran together). Tint matches the product's
   accent colour used by its card icon and stat pill. ---------------------- */
.product-section { position: relative; background: var(--p-tint, #fff); }
.product-section::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--p-accent, var(--line)); }
.product-section > .container { position: relative; z-index: 1; }

.product-section--blue   { --p-tint: #f4f8ff; --p-accent: var(--brand); }
.product-section--green  { --p-tint: #f3fbf6; --p-accent: var(--green); }
.product-section--orange { --p-tint: #fff8f2; --p-accent: #ea580c; }
.product-section--violet { --p-tint: #f8f6ff; --p-accent: #7c3aed; }
.product-section--violet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(124, 58, 237, .18);
}

/* One-line "how the channels are used" note under the Outbound/Inbound chips —
   carries the detail the old Channels section held, without repeating the list. */
.tflow-cap-note { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* Capability facts merged into each product section (stat pill + bullets).
   Reuses the .cov-* styling but sized for a full section rather than a card. */
.cap-facts { margin: 22px auto 0; max-width: 640px; }
.cap-facts .cov-stat { width: auto; display: inline-flex; }
.cap-facts .cov-list { margin-top: 16px; }

.cov-list { display: flex; flex-direction: column; gap: 11px; margin-top: auto; }
.cov-list li { position: relative; padding-left: 26px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.cov-list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
@media (max-width: 900px) {
  .coverage-grid { grid-template-columns: 1fr; max-width: 480px; margin: 0 auto; }
  .cov-split { grid-template-columns: 1fr 1fr; }
}
.pricing-section { padding-top: 56px; }
.pricing-shell { display: flex; flex-direction: column; gap: 28px; }

/* trial ribbon */
.pricing-ribbon {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: #fff; border-radius: var(--pill);
  padding: 14px 26px; font-size: 15px; font-weight: 500; text-align: center;
}
.pricing-ribbon strong { font-weight: 800; }
.pricing-ribbon span { color: #94a3b8; font-weight: 500; }

/* plan grid */
.pricing-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.pricing-plan {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 30px 26px; box-shadow: var(--sh-sm); height: 100%;
}
.pricing-plan.featured {
  border: 1.6px solid var(--brand); box-shadow: 0 24px 50px -20px rgba(37,99,235,.4);
  position: relative;
}
.pricing-plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 16px; min-height: 52px; }
.pricing-plan-head h3 { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; }
.pricing-plan-title { min-width: 0; }
.pricing-plan-title > span { display: block; margin-top: 4px; color: var(--brand-700); font-size: 12px; line-height: 1.35; font-weight: 750; }
.pricing-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 5px 11px; border-radius: var(--pill); white-space: nowrap; }
.pricing-tag.dark { background: var(--ink); color: #fff; }
.pricing-tag.pop { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-100); }
.pricing-tag--hot {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .045em;
  padding: 6px 13px;
  border-radius: var(--pill);
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(249, 115, 22, 0.55);
  white-space: nowrap;
  animation: serviti-pulse-hot 2.4s ease-in-out infinite;
}
@keyframes serviti-pulse-hot {
  0%, 100% { box-shadow: 0 6px 18px -8px rgba(249, 115, 22, 0.55); }
  50% { box-shadow: 0 10px 26px -8px rgba(249, 115, 22, 0.75); }
}

.pricing-price { min-height: 58px; }
.pricing-amount { font-size: 38px; font-weight: 800; letter-spacing: -0.025em; line-height: 1; }
.pricing-plan.featured .pricing-amount { color: var(--brand-700); }
.pricing-period { font-size: 16px; color: var(--muted); font-weight: 600; }
.pricing-price p { font-size: 13.5px; color: var(--muted); margin-top: 7px; font-weight: 500; }
.pricing-price p s { color: var(--faint); }

/* annual-hero price layout */
.pricing-price.pa { min-height: 108px; }
.pa-annual { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.pa-annual .pa-billed { font-size: 13px; font-weight: 700; color: var(--green); }
.pa-monthly { font-size: 14px; color: var(--muted); margin-top: 6px; font-weight: 500; }
.pa-monthly strong { color: var(--ink); font-weight: 700; }
.pa-monthly s { color: var(--faint); }
.pa-desc { font-size: 13.5px; color: var(--muted); margin-top: 6px; font-weight: 500; }
.pa-save { display: inline-block; font-size: 12.5px; font-weight: 800; color: var(--green); background: var(--green-100); border-radius: 999px; padding: 4px 11px; margin-top: 10px; }
.pa-trial { font-size: 12.5px; font-weight: 700; color: var(--brand-700); margin-top: 8px; }
.pa-save--hot,
.pa-save--hot > span {
  color: #111827 !important; /* override any cascaded .pa-save color */
}
.pa-save--hot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #fbbf24; /* solid amber-400 — yellow + black is max-contrast */
  border: 2px solid #b45309; /* dark amber border for extra punch */
  border-radius: 999px;
  padding: 10px 16px;
  margin-top: 14px;
  box-shadow: 0 10px 24px -8px rgba(180, 83, 9, 0.6), 0 0 0 4px rgba(251, 191, 36, 0.22);
  animation: serviti-pulse-attention 1.9s ease-in-out infinite;
}
.pa-save--hot svg { flex: none; color: #111827; }
@keyframes serviti-pulse-attention {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 24px -8px rgba(180, 83, 9, 0.6), 0 0 0 4px rgba(251, 191, 36, 0.22);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 14px 32px -8px rgba(180, 83, 9, 0.8), 0 0 0 6px rgba(251, 191, 36, 0.3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pa-save--hot { animation: none; }
}

/* Stack-compare (4 tools today vs 1 Serviti) — sits above the pricing tiers */
.pricing-stack-section { padding-top: 32px; padding-bottom: 16px; }
.pricing-stack-intro { text-align: center; max-width: 720px; margin: 0 auto 28px; }
.pricing-stack-intro h2 { margin: 10px 0 10px; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; }
.pricing-stack-intro p { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

.pricing-stack-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
}
.pricing-stack {
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  padding: 22px;
  border: 1px solid var(--line);
}
.pricing-stack--before {
  background: #f8fafc;
  border-style: dashed;
  border-color: #cbd5e1;
}
.pricing-stack--after {
  background: linear-gradient(140deg, #eff6ff 0%, #ffffff 80%);
  border-color: var(--brand-100);
  box-shadow: 0 16px 40px -22px rgba(37, 99, 235, 0.35);
}
.pricing-stack-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.pricing-stack--after .pricing-stack-label { color: var(--brand-700); }

.pricing-stack-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pricing-stack-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stack-icon {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: #e2e8f0;
  color: var(--muted);
}
.stack-icon svg { width: 18px; height: 18px; }
.stack-cat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stack-cat strong { font-size: 14px; color: var(--ink); }
.stack-cat span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.pricing-stack-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.pricing-stack-arrow svg { width: 32px; height: 32px; }

.pricing-stack-serviti {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid var(--brand-100);
  margin-bottom: 14px;
}
.serviti-badge {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.serviti-badge span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid var(--brand-100);
}
.pricing-stack-serviti p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
}

.pricing-stack-total {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.55;
  margin-top: auto;
}
.pricing-stack-total--good {
  color: var(--ink);
  font-size: 13.5px;
}
.pricing-stack-total--good strong {
  font-weight: 900;
  color: var(--brand-700);
}

@media (max-width: 900px) {
  .pricing-stack-compare {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pricing-stack-arrow {
    transform: rotate(90deg);
    padding: 4px 0;
  }
}

/* Enterprise — Custom (4th tier, horizontal banner below the 3 main plans) */
.pricing-enterprise {
  margin-top: 28px;
  padding: 28px;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #e5e7eb;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  gap: 32px;
  align-items: start;
}
.pricing-enterprise-copy .pricing-tag.pop {
  background: rgba(99, 102, 241, 0.18);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.4);
}
.pricing-enterprise-copy h3 {
  margin: 12px 0 8px;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.15;
  color: #fff;
}
.pricing-enterprise-copy > p {
  color: #cbd5e1;
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 16px;
}
.pricing-enterprise-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 24px;
}
.pricing-enterprise-list li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: #e5e7eb;
  line-height: 1.5;
}
.pricing-enterprise-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23c7d2fe' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.pricing-enterprise-cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 22px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.pricing-enterprise-price {
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  text-align: center;
}
.pricing-enterprise-cta .btn { width: 100%; }
.pricing-enterprise-note {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  line-height: 1.5;
}
@media (max-width: 900px) {
  .pricing-enterprise { grid-template-columns: 1fr; gap: 20px; padding: 22px; }
  .pricing-enterprise-list { grid-template-columns: 1fr; }
}

.pricing-annual { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.pricing-annual strong { font-size: 14px; font-weight: 800; color: var(--green); }
.pricing-annual span { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.pricing-metrics { display: flex; flex-direction: column; gap: 0; margin: 18px 0; min-height: 253px; }
.pricing-metrics li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--bg-line); }
.pricing-metrics li:last-child { border-bottom: 0; }
.pricing-metrics li span { color: var(--muted); }
.pricing-metrics li strong { color: var(--ink); font-weight: 700; text-align: right; white-space: nowrap; }
.pricing-plan.featured .pricing-metrics li:first-child strong { color: var(--brand-700); }

.pricing-feature-intro { margin: 18px 0 -4px; padding-top: 18px; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2); }
.pricing-feature-intro strong { color: var(--ink-1); }
.pricing-feature-intro + .pricing-features { margin-top: 10px; padding-top: 0; border-top: none; }
.pricing-features { display: flex; flex-direction: column; gap: 9px; padding: 18px 0 0; border-top: 1px dashed var(--line-2); margin-top: 18px; }
.pricing-features li { position: relative; padding-left: 26px; font-size: 14px; font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.pricing-features li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: var(--green-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.pricing-features li.muted { color: var(--faint); font-weight: 500; }
.pricing-features li.muted::before {
  background: var(--bg-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}
.pricing-plan .btn { width: 100%; }
.pricing-card-cta { margin: 2px 0 0; }
@media (max-width: 980px) { .pricing-plan-head, .pricing-price.pa, .pricing-metrics { min-height: 0; } }

/* notes + addons */
.pricing-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pricing-notes > div { background: var(--brand-50); border: 1px solid var(--brand-100); border-radius: var(--r-lg); padding: 20px 24px; }
.pricing-notes strong { display: block; font-size: 15px; font-weight: 800; color: var(--brand-700); margin-bottom: 5px; }
.pricing-notes p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

.pricing-addons { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; }
.pricing-addons h3 { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 16px; }
.pricing-addons-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pricing-addon { display: flex; align-items: center; gap: 13px; }
.pricing-addon .addon-icon { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.pricing-addon .addon-icon svg { width: 21px; height: 21px; }
.pricing-addon .addon-icon.blue { background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 8px 16px -8px rgba(37,99,235,.6); }
.pricing-addon .addon-icon.green { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 8px 16px -8px rgba(22,163,74,.6); }
.pricing-addon .addon-icon.orange { background: linear-gradient(135deg, #fb923c, #ea580c); box-shadow: 0 8px 16px -8px rgba(234,88,12,.6); }
.pricing-addon span:last-child { font-size: 14px; color: var(--muted); line-height: 1.3; }
.pricing-addon span:last-child strong { display: block; font-size: 15px; color: var(--ink); font-weight: 800; }

.pricing-helpdesk-addon { margin: 38px 0 6px; padding: 28px 32px; border: 1px solid #c7d2fe; border-radius: var(--r-lg); background: linear-gradient(135deg, #eff6ff, #faf5ff); display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.pricing-helpdesk-addon .eyebrow { margin-bottom: 9px; }
.pricing-helpdesk-addon h2 { font-size: 24px; letter-spacing: -0.025em; margin-bottom: 8px; }
.pricing-helpdesk-list { list-style: none; margin-top: 14px; max-width: 720px; border-top: 1px solid rgba(99, 102, 241, .18); }
.pricing-helpdesk-list li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(99, 102, 241, .14); color: var(--ink-2); font-size: 14px; font-weight: 600; }
.pricing-helpdesk-list li::before { content: "✓"; color: var(--brand); font-weight: 900; }
.pricing-helpdesk-price { flex: none; text-align: right; }
.pricing-helpdesk-price strong { display: block; color: var(--brand); font-size: 24px; font-weight: 900; letter-spacing: -0.03em; }
.pricing-helpdesk-price span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; font-weight: 700; }

@media (max-width: 900px) {
  .pricing-plans { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  .pricing-notes { grid-template-columns: 1fr; }
  .pricing-addons-row { grid-template-columns: 1fr; gap: 16px; }
  .pricing-helpdesk-addon { align-items: flex-start; flex-direction: column; }
  .pricing-helpdesk-price { text-align: left; }
  .pricing-price { min-height: 0; }
}

/* Product FAQ */
.product-faq-section { background: #fff; }
.product-faq {
  /*
    Stacked layout: intro on top, question list full-width below. The
    earlier two-column grid (intro on the left, list on the right) left a
    big empty column under the intro whenever the intro copy was short,
    which is basically always. Stacking uses the whole card width for the
    part visitors actually scan.
  */
  display: block;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, #fff 0%, var(--brand-50) 100%);
}
.product-faq-intro { margin-bottom: 24px; }
.product-faq-intro h2 { margin: 12px 0 12px; font-size: clamp(28px, 3vw, 40px); line-height: 1.08; letter-spacing: 0; }
.product-faq-intro p { color: var(--muted); line-height: 1.7; max-width: 640px; }
.product-faq-list {
  /*
    Single-column stack. The earlier two-column masonry looked balanced at
    a glance but forced a zig-zag reading order (item 1 top-left, item 2
    top-right, item 3 below item 1…), which is disorienting for FAQs where
    each answer can be any height. One column keeps the sequence obvious
    and matches the standard FAQ pattern people already scan quickly.
  */
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-content: start;
}
.product-faq-item {
  padding: 0;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 10px 24px -22px rgba(15, 23, 42, .35);
  align-self: start;
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.product-faq-item[open] {
  box-shadow: 0 18px 38px -24px rgba(15, 23, 42, .32);
  border-color: rgba(79, 70, 229, .35);
}
.product-faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 44px 14px 16px;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  position: relative;
  user-select: none;
  outline: none;
}
.product-faq-item > summary::-webkit-details-marker { display: none; }
.product-faq-item > summary::marker { display: none; }
.product-faq-item > summary:hover { background: rgba(79, 70, 229, .04); }
.product-faq-item > summary:focus-visible { box-shadow: inset 0 0 0 2px rgba(79, 70, 229, .35); }
.product-faq-item > summary::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid #6b7280;
  border-bottom: 2px solid #6b7280;
  transform: translateY(-75%) rotate(45deg);
  transition: transform .2s ease;
}
.product-faq-item[open] > summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.product-faq-item > p {
  margin: 0;
  padding: 0 16px 16px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}
@media (max-width: 900px) {
  /*
    Container is already a single-column block now; keep the tighter
    padding for smaller screens and let the intro paragraph flow full width
    without the 640px cap.
  */
  .product-faq { padding: 24px; }
  .product-faq-intro p { max-width: none; }
}
@media (max-width: 640px) {
  /* grid-template-columns: 1fr is now the default (see .product-faq-list above) — the mobile override became redundant */
  .product-faq-item > summary { padding: 12px 40px 12px 14px; font-size: 14px; }
  .product-faq-item > p { padding: 0 14px 14px; }
}
/* AI Lead Intelligence preview */
.ai-brief-preview {
  max-width: 1040px;
  margin: 30px auto 0;
}
.ai-brief-card {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px -42px rgba(15, 23, 42, .42);
  padding: 24px;
}
.ai-brief-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.ai-brief-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ai-brief-top h3 {
  margin: 0;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: 0;
}
.ai-brief-chip {
  flex-shrink: 0;
  padding: 8px 12px;
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 800;
}
.ai-brief-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}
.ai-brief-metrics div {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-soft);
}
.ai-brief-metrics span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.ai-brief-metrics strong {
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}
.ai-brief-metrics small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.ai-brief-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.ai-brief-body section {
  padding: 16px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
}
.ai-brief-body h4 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 800;
}
.ai-brief-body p,
.ai-brief-body li {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.65;
}
.ai-brief-actions ol {
  margin: 0;
  padding-left: 18px;
}
@media (max-width: 760px) {
  .ai-brief-card { padding: 18px; }
  .ai-brief-top { flex-direction: column; }
  .ai-brief-metrics,
  .ai-brief-body { grid-template-columns: 1fr; }
}
/* Product capability panels */
.product-feature-panel {
  margin-top: 48px;
}
.product-feature-panel--tight {
  margin-top: 34px;
}
.product-feature-head {
  max-width: 720px;
  margin: 0 auto 22px;
  text-align: center;
}
.product-feature-head h3 {
  margin-top: 8px;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.15;
  letter-spacing: 0;
}
.product-feature-head p {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.65;
}
.product-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.product-feature-card {
  min-height: 174px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, .09);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 16px 38px -32px rgba(15, 23, 42, .45);
}
.product-feature-card span {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.product-feature-card h4 {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.25;
}
.product-feature-card p {
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.6;
}
.product-feature-link {
  display: table;
  margin: 18px auto 0;
  color: var(--brand-700);
  font-size: 14px;
  font-weight: 800;
}
@media (max-width: 980px) {
  .product-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .product-feature-grid { grid-template-columns: 1fr; }
  .product-feature-card { min-height: 0; }
}
/* Pricing feature rows */
.pricing-features {
  gap: 8px;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  min-height: 40px;
  padding: 10px 12px 10px 38px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-radius: 12px;
  background: var(--bg-soft);
}
.pricing-features li::before {
  left: 12px;
  top: 11px;
}
.pricing-features li.muted {
  background: #fff;
  border-style: dashed;
}
.pricing-features li strong {
  color: var(--ink);
}

/* Product flow sequence arrows */
@media (min-width: 761px) {
  .flow-strip .fs {
    position: relative;
    padding-right: 34px;
  }
  .flow-strip .fs:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -14px;
    top: 50%;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-top: 1px solid var(--line);
    border-right: 1px solid var(--line);
    background: #fff;
    transform: translateY(-50%) rotate(45deg);
  }
}
/* Pricing feature split lines */
.pricing-features li {
  display: block;
}
.pricing-features li strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}
.pricing-features li > span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}


/* ==================== 60-SECOND PRODUCT TOUR ====================
 * Styles for the tour section only — extracted from the designer's
 * stylesheet; shared site classes keep their committed definitions. */

.hero-visual--tour { height: 100%; max-width: 480px; margin: 0 auto; }


/* ============================================================
   PRODUCT TOUR
   ============================================================ */
.tour-head { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.tour-head .tour-title-single { white-space: nowrap; }

.tour-head p { color: var(--muted); font-size: 17px; line-height: 1.55; margin: 16px 0 26px; }
/* Single supporting line under the H2 — darker/heavier than default body copy
   since it now carries the section on its own. */
.tour-head p.tour-lead {
  display: inline-block;
  max-width: 860px;
  padding: 13px 18px;
  border: 1px solid #fed7aa;
  border-radius: 999px;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 72%);
  box-shadow: 0 18px 36px -30px rgba(234,88,12,.75);
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  margin: 16px 0 26px;
}
.tour-head p.tour-lead em { font-style: normal; color: #ea580c; font-weight: 900; }
.tour-head p.tour-lead b { color: #ea580c; font-weight: 900; }

.tour-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

.website-video {
  max-width: 960px;
  margin: 0 auto 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: #0f172a;
  box-shadow: var(--sh-lg);
}
.website-video iframe,
.website-video video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #0f172a;
  object-fit: contain;
}
.website-video p {
  margin: 0;
  padding: 10px 16px;
  background: #fff;
  text-align: center;
}
.website-video a { color: var(--brand); font-size: 13px; font-weight: 700; text-decoration: none; }
.website-video a:hover { text-decoration: underline; }

/* The real product walkthrough now replaces the decorative collage in the
   homepage hero. Keep the shared website-video treatment for the player, but
   size and align this instance to its hero grid column. */
.hero-product-video {
  align-self: start;
  width: 100%;
  max-width: none;
  margin: 6px 0 0;
  border-color: rgba(37, 99, 235, .22);
  box-shadow: 0 28px 60px -30px rgba(15, 23, 42, .55);
}

/* Hover expands the player to the 960px it used to have in the "Self-serve
   setup" section, growing LEFT over the hero copy so its right edge stays put --
   that is what keeps it feeling like the same object in the same place rather
   than a new panel appearing.

   width + margin-left, not transform: scale(). Scale would blur the caption text
   and could not land on an exact 960px from a fluid grid column. The percentage
   in margin-left resolves against the grid area, so `100% - 960px` is precisely
   the negative shift that pins the right edge while the width grows.

   Track sizes are minmax(0, ...fr), so widening the item overflows its column
   instead of resizing the track: the copy beside it never moves.

   z-index puts it above that copy while expanded. */
.hero-product-video {
  position: relative;
  z-index: 3;
  transition:
    width .45s var(--ease),
    margin-left .45s var(--ease),
    box-shadow .45s var(--ease);
}
.hero-product-video:hover,
.hero-product-video:focus-within {
  width: min(960px, calc(100vw - 48px));
  margin-left: calc(100% - min(960px, calc(100vw - 48px)));
  box-shadow: 0 48px 90px -28px rgba(15, 23, 42, .66);
}

/* Single column: 960px is wider than the viewport, so the desktop expansion is
   off. The scroll-triggered equivalent instead breaks the player out of the
   container's 24px side padding and goes edge to edge -- about 14% on a phone,
   which is all the room that exists. .is-inview is set by the
   IntersectionObserver in site.js, since touch has no :hover.

   Squaring the corners and dropping the side borders is what makes it read as
   full-bleed rather than a card that grew slightly. */
@media (max-width: 980px) {
  .hero-product-video:hover,
  .hero-product-video:focus-within {
    width: 100%;
    margin-left: 0;
    box-shadow: 0 28px 60px -30px rgba(15, 23, 42, .55);
  }
  .hero-product-video {
    transition:
      width .45s var(--ease),
      margin .45s var(--ease),
      border-radius .45s var(--ease),
      box-shadow .45s var(--ease);
  }
  .hero-product-video.is-inview {
    /* +48px is exactly the container's two 24px paddings, so the player reaches
       the viewport edges and no further -- it cannot cause a horizontal
       scrollbar. max-width must be cleared or the 720px cap above clamps it. */
    width: calc(100% + 48px);
    max-width: none;
    margin-left: -24px;
    margin-right: -24px;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    box-shadow: 0 34px 70px -30px rgba(15, 23, 42, .6);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* The class may still be applied by an older cached script; make sure it
     cannot animate for someone who asked for no motion. */
  .hero-product-video.is-inview { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-video { transition: none; }
}

.hero-product-video__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  /* Caption sits BELOW the player, so the divider is on top. */
  border-top: 1px solid var(--line);
  background: #fff;
  color: #0f172a;
}
.hero-product-video__copy { flex: 1; }
.hero-product-video__label span {
  color: var(--brand);
  font-size: 18px;
}
.hero-product-video__label strong,
.hero-product-video__label small { display: block; }
.hero-product-video__label strong {
  font-size: 16px;
  font-weight: 800;
}
.hero-product-video__label small {
  margin-top: 2px;
  color: #475569;
  font-size: 13px;
  line-height: 1.4;
}
.hero-product-video__external {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--brand);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  /* Icon-only now: pad out to a usable touch target without changing the
     row's height or alignment. */
  padding: 8px;
  margin: -8px;
}
.hero-product-video__external:hover { text-decoration: underline; }
.hero-product-video__external svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 980px) {
  .hero-product-video {
    max-width: 720px;
    margin: 0 auto;
  }
}
@media (max-width: 560px) {
  .hero-product-video__label { align-items: flex-start; }
}

.tour-player { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--sh-lg); padding: 14px; }

.tour-stage { position: relative; height: 420px; border-radius: var(--r-lg); background: var(--bg-soft); overflow: hidden; }

.tour-scene { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.96) translateY(8px); transition: opacity .3s ease, transform .3s var(--ease); pointer-events: none; }

.tour-scene.is-active { opacity: 1; transform: none; pointer-events: auto; z-index: 2; }


/* Scene caption (data-title) sits dead-centre of the stage, both axes. */
.tour-caption-overlay { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; pointer-events: none; max-width: 90%; text-align: center; }

/* Wraps instead of overflowing so long titles stay centred on narrow screens. */
.tour-type { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; gap: 3px; margin: 0; padding: 10px 20px; background: rgba(15,23,42,.86); backdrop-filter: blur(6px); border-radius: var(--pill); color: #fff; font-size: 16px; font-weight: 700; letter-spacing: -0.005em; white-space: normal; }

.tour-cursor { width: 2px; height: 16px; background: #7eaaff; display: inline-block; animation: tourBlink .9s step-end infinite; }

/* ---- Tour scene 1: channel flow (sources -> Serviti AI -> outcomes) ----
   Fills the stage on both axes; each node carries its own accent via --c/--cbg. */
.tflow { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 72px auto 72px minmax(0,1fr);
  align-items: stretch; width: 100%; height: 100%; max-width: 1000px; padding: 24px 22px; }
.tflow-group-label {
  position: absolute;
  top: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.86);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: var(--sh-sm);
}
.tflow-group-label-in { left: 22px; }
.tflow-group-label-out { right: 22px; }
.tflow-col { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); align-items: center; gap: 14px; min-width: 0; }

.tflow-node { position: relative; display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--line); border-left: 3px solid var(--c, var(--line-2)); border-radius: 13px;
  padding: 10px 13px; font-size: 14px; font-weight: 650; color: var(--ink); box-shadow: var(--sh-sm); white-space: nowrap; }
.tflow-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--cbg, var(--bg-soft)); color: var(--c, var(--brand)); flex-shrink: 0; }
.tflow-ico svg { width: 18px; height: 18px; }

.tflow-rails { position: relative; z-index: 1; display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); align-items: center; gap: 14px; pointer-events: none; }
.tflow-rails::before { content: ""; position: absolute; top: 8%; bottom: 8%; width: 2px; border-radius: 999px; opacity: .6; }
.tflow-rails::after { content: ""; position: absolute; top: 50%; height: 2px; border-radius: 999px; transform: translateY(-50%); background-size: 180% 100%; animation: tflowRail 1.8s linear infinite; }
.tflow-rails span { position: relative; height: 2px; border-radius: 999px; opacity: .52; }
.tflow-rails-in::before { right: 20px; background: linear-gradient(180deg, rgba(37,99,235,.18), rgba(37,99,235,.7)); }
.tflow-rails-in::after { left: calc(100% - 20px); right: 0; background: linear-gradient(90deg, rgba(37,99,235,.25), rgba(37,99,235,.78)); }
.tflow-rails-in span { margin-right: 20px; background: linear-gradient(90deg, rgba(37,99,235,.14), rgba(37,99,235,.5)); }
.tflow-rails-in::after {
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%);
}
.tflow-rails-out::before { left: 20px; background: linear-gradient(180deg, rgba(22,163,74,.18), rgba(22,163,74,.7)); }
.tflow-rails-out::after { left: 0; right: calc(100% - 20px); background: linear-gradient(90deg, rgba(22,163,74,.25), rgba(22,163,74,.78)); }
.tflow-rails-out span { margin-left: 20px; background: linear-gradient(90deg, rgba(22,163,74,.5), rgba(22,163,74,.14)); }
.tflow-rails-out span::after { content: ""; position: absolute; right: -1px; top: 50%; width: 0; height: 0; transform: translateY(-50%); border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; border-left: 6px solid #16a34a; }

.tflow-hub { position: relative; z-index: 1; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center; width: 172px; padding: 24px 16px; border-radius: var(--r-xl);
  background: linear-gradient(160deg, var(--brand-50), #fff 62%); border: 2px solid var(--brand-100); box-shadow: var(--sh-lg); }
.tflow-hub-spark { font-size: 22px; color: var(--brand); line-height: 1; }
.tflow-hub strong { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; }
.tflow-hub small { font-size: 11px; color: var(--muted); font-weight: 600; }

@media (max-width: 900px) {
  .tour-head .tour-title-single { white-space: normal; }
  .tflow { grid-template-columns: minmax(0,1fr) 34px auto 34px minmax(0,1fr); padding: 14px 10px; }
  .tflow-group-label { top: -2px; height: 20px; padding: 0 7px; font-size: 8.5px; letter-spacing: .05em; }
  .tflow-group-label-in { left: 10px; }
  .tflow-group-label-out { right: 10px; }
  .tflow-node { font-size: 11.5px; padding: 7px 9px; gap: 7px; border-radius: 10px; }
  .tflow-ico { width: 25px; height: 25px; border-radius: 8px; }
  .tflow-ico svg { width: 14px; height: 14px; }
  .tflow-hub { width: 118px; padding: 15px 10px; }
  .tflow-hub strong { font-size: 13.5px; }
  .tflow-hub-spark { font-size: 17px; }
  .tflow-hub small { display: none; }
  .tflow-rails-in::before { right: 10px; }
  .tflow-rails-in::after { left: calc(100% - 10px); }
  .tflow-rails-in span { margin-right: 10px; }
  .tflow-rails-out::before { left: 10px; }
  .tflow-rails-out::after { right: calc(100% - 10px); }
  .tflow-rails-out span { margin-left: 10px; }
}

@keyframes tourBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tflowRail { 0% { background-position: 100% 0; } 100% { background-position: -80% 0; } }


/* scene 2 — flyer/hoarding + hand scanning */
.tscene-scan { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Warm ambient wash so the offline props sit on colour, not flat grey.
   Amber = the "offline / QR" family used in scene 1. */
.tscene-scan::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(46% 52% at 16% 26%, rgba(245,158,11,.20), transparent 70%),
    radial-gradient(46% 54% at 84% 30%, rgba(37,99,235,.18), transparent 70%),
    radial-gradient(40% 44% at 52% 92%, rgba(74,222,128,.16), transparent 72%); }

.tscan-board { position: relative; width: 340px; height: 380px; }

.tscan-flyer { position: absolute; left: 0; top: 26px; width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--sh-lg); z-index: 1; }

.tscan-flyer-head { background: linear-gradient(120deg,#2563eb,#7c3aed); color: #fff; border-bottom: 3px solid #f59e0b; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; text-align: center; padding: 13px; }

.tscan-flyer-body { padding: 22px 18px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.tscan-flyer-qr { width: 128px; height: 128px; object-fit: contain; }

.tscan-flyer-body span { font-size: 13.5px; font-weight: 700; color: var(--ink); text-align: center; }

.tscan-handphone { position: absolute; right: 6px; bottom: 6px; display: flex; flex-direction: column; align-items: center; z-index: 2; }

.tscan-phone { position: relative; width: 100px; height: 198px; background: linear-gradient(160deg,#334155,#0f172a); border-radius: 20px; padding: 8px; z-index: 2; box-shadow: var(--sh-lg); transform: rotate(-8deg); }

.tscan-viewfinder { position: relative; width: 100%; height: 100%; background: #0b1220; border-radius: 14px; overflow: hidden; }

.tscan-viewfinder .c { position: absolute; width: 18px; height: 18px; border: 3px solid #4ade80; }

.tscan-viewfinder .tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }

.tscan-viewfinder .tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }

.tscan-viewfinder .bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }

.tscan-viewfinder .br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.tscan-line { position: absolute; left: 10px; right: 10px; top: 10px; height: 2.5px; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: tourScan2 1.8s ease-in-out infinite; }

@keyframes tourScan2 { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(160px); opacity: 1; } }

.tscan-hand-simple { position: relative; width: 92px; height: 46px; background: var(--ink-2); border-radius: 50% 50% 26px 26px / 70% 70% 30% 30%; margin-top: -20px; transform: rotate(-8deg); z-index: 1; box-shadow: inset 0 5px 8px rgba(0,0,0,.18); }

.tscan-hand-simple i { position: absolute; top: -11px; width: 19px; height: 26px; background: var(--ink-2); border-radius: 10px; }

.tscan-hand-simple i:nth-child(1) { left: 18px; transform: rotate(-6deg); }

.tscan-hand-simple i:nth-child(2) { left: 46px; transform: rotate(6deg); }

.tour-scene .alert-grid { transform: scale(.92); transform-origin: center; width: 100%; max-width: 840px; }

.tour-scene.is-active .tchat-msg:nth-child(1) { animation-delay: .1s; }

.tour-scene.is-active .tchat-msg:nth-child(2) { animation-delay: .55s; }

.tour-scene.is-active .tchat-msg:nth-child(3) { animation-delay: 1.05s; }
@media (max-width: 980px) {

  .tour-stage { height: 460px; }
}
@media (max-width: 560px) {

  .tour-stage { height: 400px; }

  .tour-type { font-size: 14px; padding: 8px 16px; }
}


/* ---- Serviti widget replica (.sw-*) — faithful mock of the real embed.
 * Mirrors serviti-chat-widget.js: aurora header gradient (hard-coded across
 * tenants as the "this is AI" product signal), pulsing green online dot,
 * #0066FF default-primary user bubbles with the 4px tail corner, bordered
 * white assistant bubbles on the #f3f4f6 messages surface, "Type your
 * message..." input + primary send, and the "Powered by Serviti AI" footer.
 * Keep in sync with the real widget if its chrome ever changes. ---- */
.sw-panel {
  width: min(330px, 100%);
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 22px 55px -22px rgba(15,23,42,.45);
  text-align: left;
}

.sw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  background: linear-gradient(135deg, #5E5CE6 0%, #E84CC1 50%, #FF9F0A 100%);
  color: #fff;
}

.sw-head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }

.sw-logo { height: 13px; display: block; flex-shrink: 0; }

.sw-title-row { display: flex; align-items: center; gap: 6px; }

.sw-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  flex-shrink: 0;
  animation: swPulse 2s ease-out infinite;
}

@keyframes swPulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70% { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.sw-title { font-size: 14px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sw-sub { margin: 1px 0 0; font-size: 11px; opacity: .85; line-height: 1.2; }

.sw-actions { display: flex; align-items: center; gap: 10px; opacity: .9; flex-shrink: 0; }

.sw-actions svg { display: block; }

.sw-body { display: flex; flex-direction: column; gap: 9px; padding: 13px; background: #f3f4f6; }

.sw-msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; box-shadow: 0 1px 2px rgba(15,23,42,.05); }

.sw-msg.user { align-self: flex-end; background: #0066FF; color: #fff; border-bottom-right-radius: 4px; }

.sw-msg.ai { align-self: flex-start; background: #fff; color: #111827; border: 1px solid #e5e7eb; border-bottom-left-radius: 4px; }

.sw-body .chat-captured { align-self: center; }

.sw-input { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #e5e7eb; background: #fff; }

.sw-input > span:first-child { flex: 1; font-size: 13px; color: #9ca3af; }

.sw-send { width: 30px; height: 30px; border-radius: 8px; background: #0066FF; display: grid; place-items: center; flex-shrink: 0; }

.sw-send svg { width: 15px; height: 15px; fill: #fff; }

.sw-foot { padding: 6px 10px 8px; background: #fff; text-align: center; font-size: 10.5px; color: #9ca3af; }

.sw-foot a { color: #0066FF; text-decoration: none; font-weight: 600; }
@media (max-width: 720px) {

  .sw-panel { width: min(300px, 100%); }

  .sw-body { padding: 10px; gap: 8px; }
}


/* ---- AI Morning Digest replica (tour scene) — mirrors the real digest
 * email from notification_service.send_morning_digest_email: subject line,
 * greeting, numbered lead cards, tier pills (hot #dc2626 / warm #d97706 on
 * a 10% tint), rationale, and the phone/campaign/asked-about meta line. */
.digest-mock {
  width: min(430px, 92%);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-md);
  padding: 16px 18px;
  text-align: left;
}

.digest-subject { font-size: 14.5px; font-weight: 800; color: #111827; line-height: 1.35; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.digest-subject b { color: #4f46e5; }

.digest-chip { flex-shrink: 0; font-size: 10.5px; font-weight: 800; padding: 3px 8px; border-radius: var(--pill); background: #eef2ff; color: #4f46e5; }

.digest-greet { margin: 8px 0 10px; font-size: 12.5px; color: #6b7280; }

.digest-card { border: 1px solid #e5e7eb; border-radius: 8px; padding: 11px 13px; background: #fff; }

.digest-card + .digest-card { margin-top: 8px; }

.digest-card.dim { opacity: .78; }

.digest-card p { margin: 6px 0 0; font-size: 12.5px; color: #374151; line-height: 1.45; }

.digest-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.digest-name { font-size: 14px; font-weight: 700; color: #111827; }

.digest-pill { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--pill); white-space: nowrap; }

.digest-pill.hot { background: rgba(220,38,38,.10); color: #dc2626; }

.digest-pill.warm { background: rgba(217,119,6,.10); color: #d97706; }

.digest-meta { display: block; margin-top: 6px; font-size: 11.5px; color: #6b7280; }

.digest-meta strong { color: #374151; }

.wa-followup { display: block; margin-top: 8px; font-size: 11.5px; font-style: italic; color: #128c4a; }


/* ---- Scene 2 offline campaign props: hoarding + brochure carrying the same
 * agent QR as the flyer. Background elements (z 0) flanking the scan board. */
.tscan-prop { position: absolute; z-index: 0; }

.tscan-tag {
  position: absolute;
  left: 50%;
  bottom: -30px;
  transform: translateX(-50%);
  background: linear-gradient(120deg, #f59e0b, #d97706);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  padding: 3px 11px;
  border-radius: var(--pill);
  white-space: nowrap;
}

/* Roadside hoarding on legs, top-left */
.tscan-hoarding { left: 5%; top: 9%; width: 216px; transform: rotate(-3deg); }

.th-board {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* A hoarding is an advert — make it read as one, not as grey furniture. */
  background: linear-gradient(125deg, #1d4ed8 0%, #4f46e5 52%, #7c3aed 100%);
  border: 4px solid #f59e0b;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 12px 26px -10px rgba(29,78,216,.55), var(--sh-md);
}

.th-copy { color: #fff; font-size: 11px; line-height: 1.35; font-weight: 600; opacity: .92; }

.th-copy b { display: block; font-size: 13.5px; font-weight: 900; letter-spacing: .02em; margin-bottom: 2px; }

.th-board img { width: 46px; height: 46px; background: #fff; padding: 3px; border-radius: 6px; margin-left: auto; flex-shrink: 0; }

.th-leg { position: absolute; top: 100%; width: 7px; height: 24px; background: #b45309; border-radius: 0 0 3px 3px; }

.th-leg.l { left: 22%; }

.th-leg.r { right: 22%; }

.tscan-hoarding .tscan-tag { bottom: -50px; }

/* Tri-fold brochure, right side */
.tscan-brochure { right: 6%; top: 20%; display: flex; align-items: stretch; transform: rotate(4deg); }

.tb-panel { background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-md); }

.tb-panel.back {
  width: 64px;
  border-radius: 10px 4px 4px 10px;
  background: linear-gradient(90deg, #fde68a, #fef3c7);
  margin-right: -2px;
  transform: perspective(320px) rotateY(26deg);
  transform-origin: right center;
}

.tb-panel.front {
  width: 104px;
  border-radius: 4px 10px 10px 4px;
  border-top: 3px solid #f59e0b;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.tb-panel.front b { font-size: 11px; font-weight: 900; color: var(--ink); letter-spacing: .02em; }

.tb-panel.front img { width: 52px; height: 52px; object-fit: contain; }

.tb-panel.front span { font-size: 9.5px; font-weight: 700; color: #b45309; line-height: 1.3; }


/* ---- Tour scene: Leads Management replica wrapper ---- */
.ld-wrap { width: min(430px, 92%); }

.ld-wrap .dash { box-shadow: var(--sh-md); }

.ld-wrap .dash-title b { color: #4f46e5; }

.ld-note {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px dashed var(--bg-line);
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}


/* ---- Widget action pills — exact replica of the real widget's quick-action
 * buttons (.serviti-callback-btn variants): Request Callback (green #f0fdf4/
 * #15803d), Helpdesk ticket (amber #fef3c7/#92400e), WhatsApp handoff
 * (#dcfce7/#166534). This is what Scale users see under the conversation. */
.sw-btns { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 2px; background: #fff; }

.sw-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 600;
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  white-space: nowrap;
}

.sw-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.sw-btn.ticket { background: #fef3c7; color: #92400e; border-color: #fde68a; }

.sw-btn.wa { background: #dcfce7; color: #166534; border-color: #86efac; }

.sw-btn.glow { animation: swBtnGlow 1.6s ease-out infinite; }

@keyframes swBtnGlow {
  0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); }
  70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ---- Tour: use the full stage width. Widget scenes become two-up (widget +
 * outcome card); single-card scenes widen. Side cards hide under 920px. ---- */
.tour-duo { display: flex; align-items: center; justify-content: center; gap: 34px; width: 100%; padding: 0 24px; }
.tour-duo .sw-panel { margin: 0; flex-shrink: 0; }
.tour-side { width: min(340px, 100%); }
.tour-side-label { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 8px; }
@media (max-width: 920px) { .tour-side { display: none; } }

/* Helpdesk ticket details — compact side-card build of the original mock */
.tscene-help { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--sh-md); }
.thelp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.thelp-head strong { font-size: 15px; color: var(--ink); }
.thelp-pill { font-size: 11px; font-weight: 700; color: var(--amber); background: var(--amber-50); padding: 4px 11px; border-radius: var(--pill); }
.tlead-row { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; padding: 8px 0; border-bottom: 1px solid var(--bg-line); }
.tlead-row:last-of-type { border-bottom: 0; }
.tlead-row span { color: var(--muted); }
.tlead-row strong { color: var(--ink); font-weight: 700; text-align: right; }
.thelp-note { margin-top: 8px; padding: 9px 11px; background: var(--bg-soft); border-radius: 10px; font-size: 12px; color: var(--ink-2); font-style: italic; line-height: 1.4; }

/* WhatsApp handoff team card — compact */
.tscene-handoff { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 18px; text-align: center; box-shadow: var(--sh-md); display: flex; flex-direction: column; align-items: center; gap: 9px; }
.thand-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; color: var(--green); background: var(--green-50); border: 1px solid var(--green-100); padding: 5px 12px; border-radius: var(--pill); }
.thand-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-100); }
.thand-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; }
.thand-ic svg { width: 27px; height: 27px; }
.tscene-handoff strong { font-size: 15px; color: var(--ink); }
.tscene-handoff span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.thand-avatars { display: flex; margin-top: 2px; }
.thand-avatars i { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; margin-left: -10px; }
.thand-avatars i:first-child { margin-left: 0; }
.thand-avatars i.more { background: var(--bg-line); color: var(--muted); }

/* Knowledge sources card — chat scene companion */
.src-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--sh-md); }
.src-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--bg-line); font-size: 12.5px; color: var(--ink); font-weight: 600; }
.src-row:last-of-type { border-bottom: 0; }
.src-row svg { width: 15px; height: 15px; color: var(--brand); flex-shrink: 0; }
.src-row span { flex: 1; min-width: 0; }
.src-row small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 500; }
.src-row i { font-style: normal; color: var(--green); font-weight: 800; }
.src-note { margin-top: 8px; padding: 9px 11px; background: var(--bg-soft); border-radius: 10px; font-size: 11.5px; color: var(--ink-2); line-height: 1.45; }

/* Widen single-card scenes to use the stage */
.hero-visual--tour { max-width: 760px; }
.tour-scene .alert-grid { transform: none; max-width: 920px; }
.ld-wrap { width: min(560px, 94%); }
.digest-mock { width: min(540px, 94%); }

/* ---- Hero consolidation band — the only dark element in the hero. The
 * equation row (4 tool chips -> One Serviti platform) shows the message
 * before the copy says it. Aurora edge ties to the widget's AI signal. ---- */
.hero-unify {
  margin-top: 24px;
  padding: 18px 20px;
  background: #0f172a;
  border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(15,23,42,.55);
  position: relative;
  overflow: hidden;
}
.hero-unify::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #5E5CE6, #E84CC1, #FF9F0A);
}
.hu-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 11px; }
.hu-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.hu-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.hu-chip.chat svg { color: #7eaaff; }
.hu-chip.crm svg { color: #4ade80; }
.hu-chip.help svg { color: #c4b5fd; }
.hu-chip.ana svg { color: #fdba74; }
.hu-eq > i { color: #64748b; font-style: normal; font-weight: 800; font-size: 13px; }
.hu-arrow { color: #7eaaff; font-weight: 900; font-size: 16px; margin: 0 2px; }
.hu-one {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(120deg, #2563eb, #7c3aed);
  box-shadow: 0 8px 18px -8px rgba(37,99,235,.8);
  white-space: nowrap;
}
.hero-unify p { margin: 0; color: #94a3b8; font-size: 13.5px; line-height: 1.55; }
/* Standalone campaign-truth section: intentionally separated from the serious hero. */
.campaign-truth-section { padding-top: 48px; }
.campaign-truth-card {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 50px);
  border: 1px solid #fed7aa;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, #fff7ed 0%, #fff 56%, #fef2f2 100%);
  box-shadow: 0 24px 54px -42px rgba(154,52,18,.5);
}
.campaign-truth-copy { display: grid; gap: 0; max-width: 820px; margin: 22px 0 0; }
.campaign-truth-copy strong { display: block; color: #0f172a; font-size: clamp(23px, 2.7vw, 34px); line-height: 1.22; font-weight: 950; letter-spacing: -0.025em; text-wrap: balance; }
.campaign-truth-copy .loss-highlight { display: inline; color: #b91c1c; font-weight: 950; background: #fee2e2; border-radius: 5px; padding: 1px 6px; }
.campaign-truth-copy > span { display: block; margin: 22px 0 18px; color: #334155; font-size: clamp(15px, 1.35vw, 17px); line-height: 1.62; font-weight: 700; }
.campaign-truth-copy small { display: block; margin: 8px 0 0; color: #b91c1c; font-size: 14px; line-height: 1.45; font-weight: 850; }
/* Pay-off line under the hero product list (light background, so it uses ink +
   an orange accent rather than the amber gradient used on the dark card). */
.hero-platform-note {
  display: inline-flex;
  max-width: 560px;
  margin: 0 0 26px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(15,23,42,.96), rgba(30,41,59,.94)) padding-box,
    linear-gradient(120deg, #5E5CE6, #E84CC1, #FF9F0A) border-box;
  box-shadow: 0 24px 48px -28px rgba(15,23,42,.78);
  font-size: 15px;
  line-height: 1.5;
  color: #dbeafe;
  font-weight: 750;
}
.hero-platform-note strong { color: #fff; font-weight: 900; }
.hero-platform-note .hpn-hl {
  color: #fbbf24;
  font-weight: 900;
  text-shadow: 0 0 18px rgba(251,191,36,.24);
}

/* Lead-in hook: brighter + heavier than the supporting line beneath it. */
.hero-unify p.hu-lead { color: #f8fafc; font-size: 15px; font-weight: 800; letter-spacing: -0.012em; line-height: 1.45; margin-bottom: 8px; }
.hero-unify p.hu-lead em { font-style: normal; color: #fbbf24; font-weight: 900; }
.hero-unify p strong { display: block; color: #fff; font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 3px; }
/* Second line matches the first but a touch smaller to hold hierarchy. */
.hero-unify p strong + strong { font-size: 14.5px; font-weight: 700; margin-bottom: 0; }
/* 'a fraction of the cost' — warm gradient highlight (savings) on dark. */
.hu-hl { background: linear-gradient(90deg, #fbbf24, #fb923c); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }

/* ---- Tour pause/play control (bottom-right of the stage). Hover-pause was
 * removed — an invisible freeze on mouseover read as lag. ---- */
.tour-pause {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 4;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(15,23,42,.12);
  background: rgba(255,255,255,.92);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: var(--sh-md);
  transition: background .15s ease, transform .15s ease;
}
.tour-pause:hover { background: #fff; transform: scale(1.06); }
.tour-pause svg { width: 16px; height: 16px; }
.tour-pause .tp-play { display: none; }
.tour-player.is-paused .tour-pause .tp-pause { display: none; }
.tour-player.is-paused .tour-pause .tp-play { display: block; margin-left: 2px; }
.tour-player:not(.is-running) .tour-scene *,
.tour-player:not(.is-running) .tour-scene *::before,
.tour-player:not(.is-running) .tour-scene *::after,
.tour-player.is-paused .tour-scene *,
.tour-player.is-paused .tour-scene *::before,
.tour-player.is-paused .tour-scene *::after { animation-play-state: paused !important; }

/* Product tour polish: keep the caption/control chrome out of the demo content
   and let each scene use the available stage instead of fighting a 420px box. */
.tour-head { max-width: 1040px; }
.tour-player {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  border-color: rgba(37,99,235,.12);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, rgba(37,99,235,.24), rgba(124,58,237,.18), rgba(249,115,22,.2)) border-box;
}
.tour-stage {
  height: clamp(560px, 58vw, 690px);
  background:
    radial-gradient(70% 68% at 50% 12%, rgba(37,99,235,.08), transparent 62%),
    linear-gradient(180deg, #f8fafc 0%, #eef4fb 100%);
}
.tour-scene {
  box-sizing: border-box;
  padding: 72px 30px 34px;
}
.tour-scene > * {
  max-height: 100%;
}
.tour-caption-overlay {
  top: 18px;
  bottom: auto;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 96px));
}
.tour-type {
  display: inline-flex;
  max-width: 100%;
  min-height: 38px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(15,23,42,.82);
  box-shadow: 0 12px 26px -18px rgba(15,23,42,.55);
  font-size: 14.5px;
}
.tour-pause {
  top: 16px;
  right: 16px;
  bottom: auto;
  width: 38px;
  height: 38px;
}
.tflow {
  grid-template-columns: minmax(0,1fr) 72px auto 72px minmax(0,1fr);
  height: 100%;
  width: min(1060px, 100%);
  max-width: none;
  padding: 0;
}
.tour-duo {
  width: min(1060px, 100%);
  max-width: none;
  margin: 0 auto;
  padding: 0;
  gap: clamp(28px, 4vw, 52px);
}
.tour-duo .sw-panel {
  width: min(360px, 38vw);
}
.tour-side {
  width: min(430px, 42vw);
}
.tour-scene .alert-grid {
  align-items: stretch;
  width: min(1020px, 100%);
}
.tour-scene .alert-card {
  min-height: 360px;
}
.tour-dashboard-frame {
  align-self: center;
  width: min(980px, 100%);
  margin: 0 auto;
}
.tour-dashboard-frame .df-table td,
.tour-dashboard-frame .df-table th {
  padding-left: 18px;
  padding-right: 18px;
}
.tour-scene .ai-brief-preview {
  width: min(1020px, 100%);
}
.tour-scene .ai-brief-card {
  max-height: 100%;
  overflow: hidden;
}
.tscene-scan {
  width: min(1060px, 100%);
  margin: 0 auto;
}
.tscan-board {
  width: min(460px, 54vw);
  height: min(430px, 100%);
}
.digest-mock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: min(960px, 100%);
  padding: 22px 24px;
}
.digest-mock .digest-subject,
.digest-mock .digest-greet {
  grid-column: 1 / -1;
}
.digest-mock .digest-subject {
  font-size: 16.5px;
}
.digest-mock .digest-greet {
  margin: -2px 0 2px;
}
.digest-mock .digest-card + .digest-card {
  margin-top: 0;
}
.digest-mock .digest-card {
  min-height: 132px;
  display: flex;
  flex-direction: column;
}
.digest-mock .digest-meta {
  margin-top: auto;
}
.ld-wrap,
.digest-mock {
  align-self: center;
}
@media (max-width: 980px) {
  .tour-stage { height: 600px; }
  .tour-scene { padding: 70px 18px 34px; }
  .tour-caption-overlay { width: min(680px, calc(100% - 86px)); }
  .tour-duo .sw-panel { width: min(330px, 48vw); }
  .tour-side { width: min(360px, 42vw); }
  .tour-scene .alert-card { min-height: 0; }
}
@media (max-width: 720px) {
  .tour-player { padding: 10px; border-radius: 18px; }
  .tour-stage { height: 600px; }
  .tour-scene { padding: 66px 10px 30px; }
  .tour-caption-overlay { top: 12px; width: calc(100% - 70px); text-align: left; }
  .tour-type { justify-content: flex-start; font-size: 12.5px; padding: 7px 12px; }
  .tour-pause { top: 11px; right: 10px; width: 34px; height: 34px; }
  .tflow {
    grid-template-columns: minmax(0,1fr) 26px 98px 26px minmax(0,1fr);
    padding-top: 0;
  }
  .tflow-node { white-space: normal; }
  .tour-duo { padding: 0; }
  .tour-duo .sw-panel { width: min(310px, 100%); }
  .tour-dashboard-frame .df-table td,
  .tour-dashboard-frame .df-table th {
    padding-left: 12px;
    padding-right: 12px;
  }
  .tour-dashboard-frame .df-table th:nth-child(2),
  .tour-dashboard-frame .df-table td:nth-child(2) {
    display: none;
  }
  .digest-mock {
    grid-template-columns: 1fr;
    width: min(420px, 100%);
    padding: 16px;
  }
  .digest-mock .digest-subject {
    font-size: 14px;
  }
  .tscan-board {
    width: min(360px, 100%);
  }
}

/* ---------- SEO landing pages ---------- */
.seo-link-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.seo-link-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.seo-link-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-100);
  box-shadow: var(--sh-md);
}
.seo-link-card small {
  color: var(--brand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.seo-link-card strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}
.seo-link-card span {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.55;
}
.landing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
}
.landing-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: var(--sh);
}
.landing-card h3 { font-size: 20px; margin-bottom: 10px; }
.landing-card h3 a {
  color: var(--brand-700);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.landing-card h3 a:hover { color: var(--brand); }
.landing-card h3 a:focus-visible { outline: 3px solid var(--brand-100); outline-offset: 4px; }
.landing-card p { font-size: 15.5px; color: var(--text); }
.landing-card-more {
  display: inline-flex;
  margin-top: 16px;
  color: var(--brand-700);
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.landing-card-more:hover { color: var(--brand); }
.landing-card-more:focus-visible { outline: 3px solid var(--brand-100); outline-offset: 4px; }
.landing-list {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.landing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink-2);
  font-size: 15.5px;
}
.landing-list li::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 9px;
  border-radius: 50%;
  background: var(--brand);
  flex-shrink: 0;
}
.landing-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 28px;
}
.landing-step {
  padding: 18px;
  border-radius: var(--r);
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.landing-step b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  margin-bottom: 10px;
}
.landing-step strong {
  display: block;
  color: var(--ink);
  font-size: 15.5px;
  margin-bottom: 4px;
}
.landing-step span {
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

/* ---- Hero pipeline --------------------------------------------------------
   The one-line mechanism, between the promise and the channel list. An <ol>
   because the order IS the meaning -- it still reads as five ordered steps
   with CSS off. Arrows are drawn with ::before so a screen reader announces
   the steps, not "right arrow" five times. */
.hero-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  font-weight: 700;
  color: #334155;
  line-height: 1.9;
}
.hero-pipeline li { display: inline-flex; align-items: center; }
.hero-pipeline li + li::before {
  content: "→";
  margin: 0 10px;
  color: var(--brand);
  font-weight: 800;
}
@media (max-width: 560px) {
  .hero-pipeline { font-size: 13.5px; }
  .hero-pipeline li + li::before { margin: 0 7px; }
}

/* Step one is the existing channel icons rather than a second list of the same
   names in text. They wrap as a group so the arrow to step two stays attached
   to the group, not to whichever icon happens to land last on a line. */
.hero-pipeline-channels {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  color: #475569;
  font-weight: 600;
}
.hero-pipeline > li:first-child { align-items: flex-start; }
@media (max-width: 720px) {
  /* Below this the row cannot hold the group plus four steps, so the arrows
     read better stacked than trailing at odd line ends. */
  .hero-pipeline { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero-pipeline li + li::before { margin-left: 0; }
}

/* The setup pill links to the player. It is an <a>, so it needs the link
   affordances the <strong> never had: no underline, a pointer, and a visible
   focus ring for keyboard users. */
.hero-setup-highlight {
  text-decoration: none;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.hero-setup-highlight:hover,
.hero-setup-highlight:focus-visible {
  background: #1e293b;
  border-color: #4ade80;
}
.hero-setup-highlight:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 2px;
}
.hero-setup-highlight__cue {
  margin-left: 7px;
  font-weight: 800;
}
/* Announced, never shown. No .sr-only existed in this stylesheet. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hero-setup-highlight { transition: none; }
}

/* ---- Capabilities ---------------------------------------------------------
   A flat list of what the product does, grouped by the job rather than by
   plan. Tier detail lives on /pricing only, so this cannot drift from the
   gates in code. */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.cap-card {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
}
.cap-card h3 {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
}
.cap-card ul { margin: 0; padding: 0; list-style: none; }
.cap-card li {
  position: relative;
  padding: 5px 0 5px 22px;
  color: #475569;
  font-size: 14.5px;
  line-height: 1.5;
}
.cap-card li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4ade80;
}
.cap-note { margin-top: 22px; text-align: center; font-weight: 700; }
.cap-note a { color: var(--brand); text-decoration: none; }
.cap-note a:hover { text-decoration: underline; }
.section-action { margin: 22px 0 0; text-align: center; }
.section-action a.btn-primary,
.section-action a.btn-primary:visited,
.section-action a.btn-primary:hover { color: #fff; text-decoration: none; }

/* ---- What Serviti reduces -------------------------------------------------
   Sits above the capability cards: what goes away, then what you get. Struck
   through because the point is removal, with the line drawn in CSS so screen
   readers still read plain items rather than "deleted" five times. */
.reduce-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 26px;
  max-width: 860px;
}
.reduce-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.reduce-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reduce-list li {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--pill);
  background: #fff;
  color: #64748b;
  font-size: 13.5px;
  font-weight: 600;
}

.cap-lead { margin-top: 10px; font-weight: 700; color: #0f172a; }

/* ---- Worked flow examples -------------------------------------------------
   The generic steps above, shown as two named journeys. <ol> so the sequence
   survives CSS being off; arrows drawn with ::before so they are not read out. */
.flow-examples { margin-top: 34px; }
.flow-examples__lead {
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #64748b;
}
.flow-example {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.flow-example__tag {
  flex: 0 0 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}
.flow-example ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}
.flow-example li { display: inline-flex; align-items: center; white-space: nowrap; }
.flow-example li + li::before {
  content: "→";
  margin: 0 9px;
  color: var(--brand);
  font-weight: 800;
}
.flow-example li:last-child { color: #0f172a; font-weight: 800; }

/* ---- Fit checklist --------------------------------------------------------
   Ticks are drawn in CSS, not typed into the markup, so a screen reader reads
   eight statements rather than "check mark" eight times. Not form checkboxes:
   nothing here is interactive. */
.fit-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px 26px;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.fit-check li {
  position: relative;
  padding: 9px 0 9px 32px;
  color: #334155;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
}
.fit-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #4ade80;
}
.fit-check li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 15px;
  width: 5px;
  height: 9px;
  border: solid #0f172a;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* ---- Realtime notifications: previews of the alerts Serviti actually sends.
       Mirrors notification_service._build_single_lead_html (email) and the
       lead_notification WhatsApp template's five body parameters. ---- */
.nt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.nt-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.nt-tag { display: flex; align-items: center; gap: 7px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg-soft); border-bottom: 1px solid var(--bg-line); }
.nt-tag svg { width: 15px; height: 15px; flex-shrink: 0; }

/* Email: the real template's gradient header and label/value rows. */
.nt-mail-head { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #fff; padding: 14px 16px; text-align: center; font-size: 15px; font-weight: 800; }
.nt-mail-body { padding: 12px 16px 14px; }
.nt-sub { font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 8px 0 4px; }
.nt-row { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--bg-line); font-size: 12.5px; }
.nt-row:last-child { border-bottom: 0; }
.nt-row b { flex: 0 0 92px; color: var(--muted); font-weight: 600; }
.nt-row span { flex: 1; min-width: 0; color: var(--ink); font-weight: 600; word-break: break-word; }
.nt-pill { display: inline-block; background: #f0ebff; color: #764ba2; padding: 2px 9px; border-radius: 11px; font-size: 11.5px; font-weight: 700; }
.nt-tip { margin-top: 10px; padding: 9px 11px; background: #e8f4fd; border-left: 3px solid #667eea; border-radius: 7px; font-size: 11.5px; color: #0066cc; font-weight: 700; }

/* WhatsApp: a template message as it lands on a phone. */
.nt-wa-body { padding: 14px 16px 16px; background: #e6ded4; }
.nt-bubble { background: #fff; border-radius: 9px; padding: 10px 12px; box-shadow: 0 1px 1px rgba(0,0,0,.12); font-size: 12.5px; line-height: 1.55; color: #111b21; }
.nt-bubble strong { display: block; margin-bottom: 5px; font-size: 13px; }
.nt-bubble em { font-style: normal; color: #667781; font-weight: 600; }
.nt-time { display: block; margin-top: 6px; text-align: right; font-size: 10.5px; color: #667781; font-weight: 600; }
.nt-note { margin-top: 14px; font-size: 13px; color: var(--ink-2); text-align: center; }
@media (max-width: 520px) { .nt-row b { flex-basis: 78px; } }

/* ---- Human handoff + HelpDesk: faithful static previews of the two live
       product surfaces. The handoff mirrors the widget's context-carrying
       WhatsApp flow; the ticket workspace mirrors SupportPage's metrics,
       status filters and ticket-list columns. ---- */
.handoff-support { overflow: hidden; }
.hs-stack { display: grid; gap: 28px; margin-top: 34px; }
.hs-feature { display: grid; grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 5vw, 62px); align-items: center; padding: clamp(22px, 4vw, 42px); border: 1px solid var(--line); border-radius: calc(var(--r-lg) + 4px); background: #fff; box-shadow: var(--sh-md); }
.hs-feature--support { grid-template-columns: minmax(0, 1.18fr) minmax(250px, .82fr); background: linear-gradient(140deg, #fffdf7 0%, #fff 54%); }
.hs-copy h3 { margin: 13px 0 10px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.035em; color: var(--ink); }
.hs-copy > p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.7; }
.hs-feature-tag { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.hs-feature-tag svg { width: 17px; height: 17px; }
.hs-feature-tag span { margin-left: 2px; padding: 3px 8px; border-radius: var(--pill); font-size: 10px; letter-spacing: .04em; }
.hs-feature-tag--green { color: #15803d; }
.hs-feature-tag--green span { color: #166534; background: #dcfce7; }
.hs-feature-tag--amber { color: #b45309; }
.hs-feature-tag--amber span { color: #92400e; background: #fef3c7; }
.hs-list { display: grid; gap: 10px; margin: 19px 0 0; padding: 0; list-style: none; }
.hs-list li { position: relative; padding-left: 27px; color: var(--ink-2); font-size: 13.5px; font-weight: 650; line-height: 1.45; }
.hs-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #dcfce7; }
.hs-list li::after { content: ""; position: absolute; left: 5px; top: 5px; width: 4px; height: 7px; border: solid #15803d; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.hs-appbar { display: flex; align-items: center; gap: 9px; min-height: 54px; padding: 10px 13px; color: #fff; }
.hs-appbar strong, .hs-appbar small { display: block; }
.hs-appbar strong { font-size: 12.5px; letter-spacing: -.01em; }
.hs-appbar small { margin-top: 1px; font-size: 10px; font-weight: 600; opacity: .8; }

/* Handoff preview: a team member receives visitor context, then continues in
   WhatsApp. It is intentionally a conversation, not a claimed BSP inbox. */
.hs-wa-preview { overflow: hidden; border: 1px solid #cfe5d5; border-radius: 18px; background: #e7ddd2; box-shadow: 0 18px 38px rgba(16, 70, 37, .13); transform: rotate(1deg); }
.hs-appbar--wa { background: #128c7e; }
.hs-avatar { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; color: #128c7e; background: #d8f5ec; font-size: 12px; font-weight: 900; }
.hs-appbar--wa > svg { width: 18px; height: 18px; margin-left: auto; opacity: .9; }
.hs-wa-body { min-height: 258px; padding: 15px; background-color: #e7ddd2; background-image: radial-gradient(rgba(50, 90, 65, .10) .8px, transparent .8px); background-size: 16px 16px; }
.hs-context-card { margin: 0 auto 13px; padding: 9px 11px; max-width: 310px; border-left: 3px solid #25d366; border-radius: 7px; background: #f0fdf4; box-shadow: 0 1px 1px rgba(0,0,0,.08); color: #14532d; }
.hs-context-kicker { display: block; margin-bottom: 3px; color: #15803d; font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hs-context-card strong { display: block; font-size: 11.5px; }
.hs-context-card p { margin: 3px 0 0; font-size: 10.5px; line-height: 1.35; }
.hs-wa-bubble { clear: both; width: fit-content; max-width: 83%; margin-bottom: 8px; padding: 8px 10px; border-radius: 8px; box-shadow: 0 1px 1px rgba(0,0,0,.1); color: #111b21; font-size: 11.5px; line-height: 1.45; }
.hs-wa-bubble--them { background: #fff; border-top-left-radius: 2px; }
.hs-wa-bubble--me { float: right; background: #d9fdd3; border-top-right-radius: 2px; }
.hs-wa-compose { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #f0f2f5; color: #667781; font-size: 11.5px; }
.hs-wa-compose span { flex: 1; padding: 7px 10px; border-radius: 15px; background: #fff; }
.hs-wa-compose svg { width: 17px; height: 17px; color: #128c7e; }

/* Support preview: same hierarchy as the platform's SupportPage — title,
   operational metrics, status filters and an assignable ticket list. */
.hs-support-preview { min-width: 0; overflow: hidden; border: 1px solid #e4e7eb; border-radius: 16px; background: #fff; box-shadow: 0 18px 38px rgba(15, 23, 42, .1); transform: rotate(-.65deg); }
.hs-appbar--support { color: #1f2937; background: #fff; border-bottom: 1px solid #e5e7eb; }
.hs-lifebuoy { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; color: #b45309; background: #fffbeb; }
.hs-lifebuoy svg { width: 20px; height: 20px; }
.hs-appbar--support small { color: #6b7280; opacity: 1; }
.hs-live { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: #15803d; font-size: 10px; font-weight: 800; }
.hs-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.hs-ticket-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; padding: 10px; background: #f8fafc; border-bottom: 1px solid #eef0f3; }
.hs-ticket-metrics > div { min-width: 0; padding: 8px; border: 1px solid #e9edf1; border-radius: 8px; background: #fff; }
.hs-ticket-metrics span { display: block; overflow: hidden; color: #6b7280; font-size: 8.5px; font-weight: 700; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.hs-ticket-metrics strong { display: block; margin-top: 4px; color: #111827; font-size: 18px; letter-spacing: -.04em; }
.hs-amber { color: #d97706 !important; }.hs-green { color: #16a34a !important; }.hs-blue { color: #2563eb !important; }.hs-purple { color: #7c3aed !important; }
.hs-ticket-filters { display: flex; align-items: center; gap: 5px; padding: 9px 10px; overflow-x: auto; color: #6b7280; font-size: 9.5px; font-weight: 700; white-space: nowrap; }
.hs-ticket-filters > span { padding: 5px 7px; border-radius: 5px; }
.hs-ticket-filters .is-active { color: #fff; background: #d97706; }
.hs-filter-select { margin-left: auto; border: 1px solid #e5e7eb; background: #fff; }
.hs-ticket-table-wrap { overflow-x: auto; border-top: 1px solid #eef0f3; }
.hs-ticket-table { width: 100%; min-width: 570px; border-collapse: collapse; color: #374151; font-size: 10px; }
.hs-ticket-table th { padding: 8px 10px; color: #6b7280; background: #f9fafb; font-size: 8px; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.hs-ticket-table td { padding: 9px 10px; border-top: 1px solid #f0f1f3; vertical-align: top; }
.hs-ticket-table td > b, .hs-ticket-table td > small { display: block; }
.hs-ticket-table td > b { color: #1f2937; font-size: 10px; }
.hs-ticket-table td > small { margin-top: 2px; color: #9ca3af; font-size: 8.5px; white-space: nowrap; }
.hs-priority, .hs-status { display: inline-block; padding: 3px 6px; border-radius: 10px; font-size: 8.5px; font-weight: 800; white-space: nowrap; }
.hs-priority--urgent { color: #b91c1c; background: #fee2e2; }.hs-priority--normal { color: #475569; background: #e2e8f0; }
.hs-status--progress { color: #1d4ed8; background: #dbeafe; }.hs-status--open { color: #b45309; background: #fef3c7; }
.hs-note { margin: 24px 0 0; color: var(--ink-2); font-size: 13.5px; font-weight: 650; text-align: center; }
@media (max-width: 840px) { .hs-feature, .hs-feature--support { grid-template-columns: 1fr; } .hs-feature--support .hs-support-preview { order: 2; } .hs-feature { gap: 28px; } }
@media (max-width: 520px) { .hs-feature { margin-inline: -4px; padding: 20px 15px; } .hs-copy h3 { font-size: 25px; } .hs-wa-preview, .hs-support-preview { transform: none; } .hs-ticket-metrics { grid-template-columns: repeat(2, 1fr); } .hs-wa-body { min-height: 250px; } }

/* ---- Daily brief + AI Lead Intelligence: mirrors the digest delivered to
       Growth+ teams and the Scale intelligence workspace's theme / action
       hierarchy. These are examples of the product surfaces, not customer
       performance claims. ---- */
.intelligence-hub { overflow: hidden; }
.ih-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-top: 34px; }
.ih-card { display: grid; grid-template-rows: auto 1fr; gap: 23px; padding: clamp(20px, 3.2vw, 34px); border: 1px solid var(--line); border-radius: calc(var(--r-lg) + 3px); background: #fff; box-shadow: var(--sh-md); }
.ih-card--intelligence { background: linear-gradient(140deg, #f8fbff 0%, #fff 58%); }
.ih-copy h3 { margin: 12px 0 9px; color: var(--ink); font-size: clamp(22px, 2.45vw, 30px); letter-spacing: -.035em; }
.ih-copy p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.65; }
.ih-kicker { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 11px; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; }
.ih-kicker svg { width: 16px; height: 16px; }.ih-kicker span { padding: 3px 8px; border-radius: var(--pill); font-size: 9.5px; }
.ih-kicker--violet { color: #6d28d9; }.ih-kicker--violet span { color: #5b21b6; background: #ede9fe; }
.ih-kicker--blue { color: #1d4ed8; }.ih-kicker--blue span { color: #1e40af; background: #dbeafe; }

/* The AI Morning Digest is an email-like priority list, matching the current
   daily digest delivered by the platform rather than a generic chart. */
.ih-digest { align-self: end; overflow: hidden; border: 1px solid #e4e7ec; border-radius: 13px; background: #fff; box-shadow: 0 15px 28px rgba(79, 70, 229, .12); }
.ih-digest-head { display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; align-items: center; padding: 12px 13px; color: #fff; background: linear-gradient(135deg, #5b43b8, #635bca); }
.ih-digest-head strong { font-size: 12.5px; }.ih-digest-head small { grid-column: 2; color: rgba(255,255,255,.78); font-size: 9.5px; font-weight: 600; }
.ih-clock { grid-row: 1 / span 2; padding: 4px 6px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; font-size: 9px; font-weight: 800; }
.ih-greeting { margin: 0; padding: 11px 13px 7px; color: #475569; font-size: 10.5px; font-weight: 650; }
.ih-lead { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin: 0 10px 7px; padding: 9px 10px; border: 1px solid #e9eaf2; border-radius: 8px; background: #fff; }
.ih-lead--hot { border-color: #fecaca; background: #fffafa; }.ih-lead b, .ih-lead span { display: block; }.ih-lead b { color: #1e293b; font-size: 10.5px; }.ih-lead span { margin-top: 3px; color: #64748b; font-size: 9.5px; line-height: 1.35; }.ih-lead em { flex: 0 0 auto; padding: 3px 5px; border-radius: 8px; color: #a16207; background: #fef3c7; font-size: 8px; font-style: normal; font-weight: 850; white-space: nowrap; }.ih-lead--hot em { color: #b91c1c; background: #fee2e2; }
.ih-digest-foot { margin: 5px 0 0; padding: 9px 13px; color: #94a3b8; border-top: 1px solid #edf0f4; font-size: 9px; font-weight: 650; }.ih-digest-foot span { color: #4f46e5; font-weight: 800; }

/* AI Lead Intelligence: compact application surface derived from the live
   page's summary cards, intent-theme rows and action-oriented reading. */
.ih-intel { align-self: end; overflow: hidden; border: 1px solid #dfe7f3; border-radius: 13px; background: #fff; box-shadow: 0 15px 28px rgba(37, 99, 235, .11); }
.ih-intel-bar { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #e9eef5; }.ih-intel-bar strong, .ih-intel-bar small { display: block; }.ih-intel-bar strong { color: #172554; font-size: 11.5px; }.ih-intel-bar small { margin-top: 2px; color: #64748b; font-size: 8.5px; font-weight: 600; }.ih-spark { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: #4f46e5; background: #eef2ff; font-size: 17px; }.ih-range { margin-left: auto; padding: 5px 6px; color: #475569; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 8px; font-weight: 750; white-space: nowrap; }
.ih-mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 9px; background: #f8fafc; }.ih-mini-metrics > div { padding: 7px; border: 1px solid #e8edf4; border-radius: 7px; background: #fff; }.ih-mini-metrics span { display: block; overflow: hidden; color: #64748b; font-size: 7.5px; font-weight: 750; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.ih-mini-metrics strong { display: block; margin-top: 3px; color: #172554; font-size: 17px; letter-spacing: -.04em; }
.ih-intel-body { padding: 11px; }.ih-workspace-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }.ih-workspace-head strong { color: #1e293b; font-size: 10.5px; }.ih-workspace-head span { color: #4f46e5; font-size: 8.5px; font-weight: 800; }
.ih-theme-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid #edf1f5; }.ih-theme-row div { min-width: 0; flex: 1; }.ih-theme-row b, .ih-theme-row small { display: block; }.ih-theme-row b { color: #334155; font-size: 9.5px; }.ih-theme-row small { overflow: hidden; margin-top: 2px; color: #94a3b8; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }.ih-theme-row > span { display: grid; place-items: center; min-width: 21px; height: 21px; color: #3730a3; border-radius: 50%; background: #eef2ff; font-size: 8.5px; font-weight: 850; }
.ih-action { display: grid; gap: 2px; margin-top: 8px; padding: 8px 9px; border-left: 3px solid #6366f1; border-radius: 6px; background: #f5f3ff; }.ih-action b { color: #4338ca; font-size: 8.5px; text-transform: uppercase; }.ih-action span { color: #4c4a67; font-size: 9px; font-weight: 650; line-height: 1.35; }
.ih-note { margin: 22px 0 0; color: var(--ink-2); font-size: 13px; font-weight: 650; text-align: center; }
@media (max-width: 860px) { .ih-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ih-card { margin-inline: -4px; padding: 19px 15px; } .ih-copy h3 { font-size: 24px; } }

/* ---- Full transcript + AI insights. Fields mirror
       conversation_insights_service (outcome / drop-off / sentiment / summary)
       and lead_scoring_service (1-100 score, hot>=70 warm>=40 cold, signals). ---- */
.tr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }
.tr-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.tr-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; font-size: 12px; font-weight: 700; color: var(--ink-2); background: var(--bg-soft); border-bottom: 1px solid var(--bg-line); }
.tr-head em { font-style: normal; font-weight: 600; color: var(--muted); font-size: 11px; }
.tr-log { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.tr-msg { max-width: 86%; padding: 8px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.5; font-weight: 600; }
.tr-msg--them { align-self: flex-start; background: var(--bg-soft); color: var(--ink); border-bottom-left-radius: 4px; }
.tr-msg--ai { align-self: flex-end; background: #eef2ff; color: #3730a3; border-bottom-right-radius: 4px; }
.tr-anon { margin: 2px 16px 14px; font-size: 11.5px; color: var(--muted); font-weight: 600; }

.tr-ins { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.tr-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; }
.tr-line > b { flex: 0 0 74px; color: var(--muted); font-weight: 600; }
.tr-badge { display: inline-block; padding: 3px 10px; border-radius: 11px; font-size: 11.5px; font-weight: 800; }
.tr-badge--won { background: #dcfce7; color: #15803d; }
.tr-badge--hot { background: #fee2e2; color: #b91c1c; }
.tr-badge--pos { background: #e0f2fe; color: #0369a1; }
.tr-sum { font-size: 12.5px; line-height: 1.55; color: var(--ink); font-weight: 600; }
.tr-score { display: flex; align-items: baseline; gap: 6px; }
.tr-score b { font-size: 26px; font-weight: 900; color: var(--ink); }
.tr-score i { font-style: normal; font-size: 12px; color: var(--muted); font-weight: 700; }
.tr-sig { display: flex; flex-wrap: wrap; gap: 6px; }
.tr-sig span { background: var(--bg-soft); border: 1px solid var(--bg-line); border-radius: 20px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.tr-why { font-size: 11.5px; color: var(--muted); font-weight: 600; line-height: 1.5; }

.tr-themes { margin-top: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--sh-md); }
.tr-themes h3 { margin: 0 0 4px; font-size: 16px; }
.tr-themes p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }
.tr-theme-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tr-theme-list li { display: flex; align-items: center; gap: 7px; background: var(--bg-soft); border: 1px solid var(--bg-line); border-radius: 20px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.tr-theme-list li b { color: var(--brand); font-weight: 900; }
@media (max-width: 520px) { .tr-line > b { flex-basis: 100%; } }

/* The homepage puts the calculator decision directly under the problem-led
   headline, without turning the hero into another full form. */
.hero-loss-calculator {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  max-width: 590px;
  margin: 15px 0 22px;
  padding: 12px 14px;
  color: #172554;
  border: 1px solid #bfdbfe;
  border-radius: 15px;
  background: linear-gradient(105deg, #eff6ff, #fff7ed);
  box-shadow: 0 8px 24px rgba(37, 99, 235, .1);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.hero-loss-calculator:hover {
  border-color: #60a5fa;
  box-shadow: 0 12px 30px rgba(37, 99, 235, .16);
  transform: translateY(-2px);
}
.hero-loss-calculator:focus-visible { outline: 3px solid rgba(37, 99, 235, .28); outline-offset: 3px; }
.hero-loss-calculator__icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  font-size: 18px;
  font-weight: 900;
}
.hero-loss-calculator strong,
.hero-loss-calculator small { display: block; }
.hero-loss-calculator strong { color: #0f172a; font-size: 13.5px; line-height: 1.35; }
.hero-loss-calculator small { margin-top: 2px; color: #64748b; font-size: 11.5px; font-weight: 650; line-height: 1.4; }
.hero-loss-calculator__arrow { color: #2563eb; font-size: 20px; font-weight: 900; }

/* ---- Missed enquiry and revenue calculator. The calculator deliberately
       shows the assumptions and formula beside the result: it is a planning
       estimate, not a promise that Serviti recovers every exposed sale. ---- */
.lead-loss-section {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(37, 99, 235, .1), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(234, 88, 12, .1), transparent 28%),
    linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%);
}
.lead-loss-section .section-head { max-width: 760px; }
.lead-loss-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  max-width: 1120px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 26px 70px rgba(15, 23, 42, .14);
}
.lead-loss-form,
.lead-loss-results { min-width: 0; padding: clamp(24px, 4vw, 42px); }
.lead-loss-form { background: rgba(255, 255, 255, .96); }
.lead-loss-form__head,
.lead-loss-results__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.lead-loss-step {
  display: inline-block;
  margin-bottom: 7px;
  color: #2563eb;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lead-loss-form h3,
.lead-loss-results h3,
.lead-loss-form h2,
.lead-loss-results h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(20px, 2vw, 25px);
  letter-spacing: -.03em;
}
.calculator-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(62px, 8vw, 104px) 0 clamp(54px, 7vw, 90px);
  color: #0f172a;
  border-bottom: 1px solid #dbeafe;
  background: linear-gradient(180deg, #f8fbff 0%, #eef6ff 100%);
}
.calculator-hero::before,
.calculator-hero::after {
  position: absolute;
  border-radius: 999px;
  content: "";
  pointer-events: none;
}
.calculator-hero::before {
  top: -260px;
  right: -120px;
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(96, 165, 250, .16), transparent 66%);
}
.calculator-hero::after {
  bottom: -260px;
  left: 18%;
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(251, 146, 60, .12), transparent 68%);
}
.calculator-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  align-items: center;
  gap: clamp(42px, 7vw, 88px);
}
.calculator-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.calculator-kicker i { width: 7px; height: 7px; border-radius: 50%; background: #f97316; box-shadow: 0 0 0 5px rgba(249, 115, 22, .1); }
.calculator-hero h1 {
  max-width: 720px;
  margin: 20px 0 0;
  color: #0f172a;
  font-size: clamp(44px, 6vw, 72px);
  letter-spacing: -.055em;
  line-height: .98;
}
.calculator-hero h1 span { color: #ea580c; }
.calculator-hero__copy > p {
  max-width: 650px;
  margin: 24px 0 0;
  color: #475569;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.65;
}
.calculator-trust { display: flex; flex-wrap: wrap; gap: 11px 22px; margin-top: 27px; }
.calculator-trust span { display: inline-flex; align-items: center; gap: 7px; color: #334155; font-size: 12px; font-weight: 750; }
.calculator-trust b { display: grid; width: 18px; height: 18px; place-items: center; color: #15803d; border: 1px solid #bbf7d0; border-radius: 50%; background: #f0fdf4; font-size: 10px; }
.calculator-hero__example {
  padding: clamp(24px, 3.5vw, 36px);
  color: #0f172a;
  border: 1px solid #dbe4f0;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(37, 99, 235, .12);
}
.calculator-example-label { color: #1d4ed8; font-size: 10.5px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.calculator-example-flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 15px; margin-top: 22px; }
.calculator-example-flow > span { color: #2563eb; font-size: 24px; }
.calculator-example-flow div { min-width: 0; }
.calculator-example-flow small,
.calculator-example-flow strong,
.calculator-example-flow em { display: block; }
.calculator-example-flow small { color: #64748b; font-size: 10px; font-weight: 750; }
.calculator-example-flow strong { margin-top: 4px; color: #0f172a; font-size: 34px; font-weight: 900; letter-spacing: -.05em; }
.calculator-example-flow em { color: #64748b; font-size: 10.5px; font-style: normal; font-weight: 650; }
.calculator-example-total { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 17px 18px; border: 1px solid #fed7aa; border-radius: 14px; background: #fff7ed; }
.calculator-example-total span { max-width: 120px; color: #9a3412; font-size: 11.5px; font-weight: 750; line-height: 1.4; }
.calculator-example-total strong { color: #ea580c; font-size: clamp(28px, 3vw, 38px); font-weight: 900; letter-spacing: -.045em; }
.calculator-example-note { display: block; margin-top: 14px; color: #64748b; font-size: 9.5px; line-height: 1.55; }
.lead-loss-section--page {
  padding-top: clamp(48px, 6vw, 72px);
  background: #f8fafc;
}
.lead-loss-section--page .lead-loss-shell { border-color: #dbe4f0; border-radius: 22px; box-shadow: 0 22px 55px rgba(15, 23, 42, .1); }
.lead-loss-section--page .lead-loss-form { background: #fff; }
.lead-loss-section--page .lead-loss-results {
  color: #0f172a;
  border-left: 1px solid #dbe4f0;
  background: #f1f5f9;
}
.lead-loss-section--page .lead-loss-fields > label,
.lead-loss-section--page .lead-loss-value-row > label {
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
}
.lead-loss-section--page .lead-loss-fields > label:nth-child(1),
.lead-loss-section--page .lead-loss-fields > label:nth-child(2),
.lead-loss-section--page .lead-loss-fields > label:nth-child(3),
.lead-loss-section--page .lead-loss-value-row > label:first-child,
.lead-loss-section--page .lead-loss-value-row > label:last-child { border-color: #e2e8f0; background: #f8fafc; }
.lead-loss-section--page .lead-loss-field input,
.lead-loss-section--page .lead-loss-field select { border-color: rgba(100, 116, 139, .32); box-shadow: 0 2px 7px rgba(15, 23, 42, .05); }
.lead-loss-section--page .lead-loss-primary-result { border-color: #bfdbfe; background: #eff6ff; }
.lead-loss-section--page .lead-loss-primary-result output { color: #1d4ed8; }
.lead-loss-section--page .lead-loss-result-grid > div:nth-child(1),
.lead-loss-section--page .lead-loss-result-grid > div:nth-child(2),
.lead-loss-section--page .lead-loss-result-grid > div:nth-child(3) { background: #fff; }
.calculator-explainer { background: #fff; }
.calculator-explainer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }
.calculator-explainer-grid article { display: grid; grid-template-columns: auto 1fr; gap: 17px; min-height: 100%; padding: 27px 24px; border: 1px solid #e2e8f0; border-radius: 17px; background: #f8fafc; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); }
.calculator-explainer-grid article:nth-child(2),
.calculator-explainer-grid article:nth-child(3) { border-color: #e2e8f0; background: #f8fafc; box-shadow: 0 8px 20px rgba(15, 23, 42, .05); }
.calculator-explainer-grid article + article { border-left-width: 1px; }
.calculator-explainer-grid article > span { color: #2563eb; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.calculator-explainer-grid h3 { margin: 0; color: #0f172a; font-size: 16px; }
.calculator-explainer-grid p { margin: 8px 0 0; color: #64748b; font-size: 13px; line-height: 1.65; }
.calculator-next-step {
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid #dbe4f0;
  border-radius: 26px;
  background: #f8fafc;
  box-shadow: 0 16px 42px rgba(15, 23, 42, .08);
}
.calculator-next-step h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.5vw, 42px); }
.calculator-next-step p { color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.calculator-next-step__list { display: grid; gap: 12px; }
.calculator-next-step__list > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border: 1px solid #dbe4f0;
  border-radius: 15px;
  background: rgba(255, 255, 255, .9);
}
.calculator-next-step__list strong {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #fff;
  border-radius: 11px;
  background: #2563eb;
}
.calculator-next-step__list span { color: #475569; font-size: 14px; line-height: 1.55; }
.calculator-next-step__list b { color: #0f172a; }
.lead-loss-reset {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: #475569;
  border: 1px solid #dbe3ed;
  border-radius: 9px;
  background: #f8fafc;
  font: inherit;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
}
.lead-loss-reset:hover { color: #1d4ed8; border-color: #bfdbfe; background: #eff6ff; }
.lead-loss-reset:focus-visible,
.lead-loss-field input:focus-visible,
.lead-loss-field select:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 2px;
}
.lead-loss-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.lead-loss-field { display: grid; gap: 6px; min-width: 0; color: var(--ink); }
.lead-loss-field > span:first-child {
  font-size: 13px;
  font-weight: 850;
  letter-spacing: -.01em;
}
.lead-loss-field small {
  min-height: 32px;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}
.lead-loss-field input,
.lead-loss-field select {
  width: 100%;
  min-height: 49px;
  padding: 11px 13px;
  color: #0f172a;
  border: 1px solid #cfd9e6;
  border-radius: 11px;
  background: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 750;
}
.lead-loss-field input:hover,
.lead-loss-field select:hover { border-color: #94a3b8; }
.lead-loss-input-suffix { position: relative; display: block; }
.lead-loss-input-suffix input { padding-right: 42px; }
.lead-loss-input-suffix b {
  position: absolute;
  top: 50%;
  right: 14px;
  color: #64748b;
  font-size: 14px;
  transform: translateY(-50%);
  pointer-events: none;
}
.lead-loss-value-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.55fr) minmax(120px, .75fr);
  gap: 18px;
}
.lead-loss-method {
  margin: 20px 0 0;
  padding-top: 16px;
  color: #64748b;
  border-top: 1px dashed #d8e0ea;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
}
.lead-loss-results {
  position: relative;
  color: #fff;
  background:
    radial-gradient(circle at 84% 6%, rgba(96, 165, 250, .24), transparent 30%),
    linear-gradient(145deg, #0f172a 0%, #172554 58%, #1e3a8a 130%);
}
.lead-loss-results::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, #f97316, #fbbf24);
  content: "";
}
.lead-loss-results .lead-loss-step { color: #93c5fd; }
.lead-loss-results h3,
.lead-loss-results h2 { color: #fff; }
.lead-loss-primary-result {
  margin-bottom: 18px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 17px;
  background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.lead-loss-primary-result span {
  display: block;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 750;
}
.lead-loss-primary-result output {
  display: block;
  margin-top: 6px;
  color: #fff;
  font-size: clamp(36px, 5vw, 54px);
  font-weight: 900;
  letter-spacing: -.055em;
  line-height: 1;
}
.lead-loss-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lead-loss-result-grid > div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 13px;
  background: rgba(15, 23, 42, .28);
}
.lead-loss-result-grid span,
.lead-loss-result-grid small { display: block; color: #bfdbfe; font-size: 10.5px; font-weight: 700; line-height: 1.35; }
.lead-loss-result-grid output {
  display: block;
  overflow-wrap: anywhere;
  margin: 7px 0 4px;
  color: #fff;
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.05;
}
.lead-loss-result-grid small { color: #94a3b8; font-size: 9.5px; }
.lead-loss-summary {
  margin: 18px 0 0;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}
.lead-loss-caveat {
  margin: 8px 0 0;
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
}
.lead-loss-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 22px; }
.lead-loss-actions .btn-primary { background: #f97316; box-shadow: 0 8px 22px rgba(249, 115, 22, .24); }
.lead-loss-actions .btn-primary:hover { background: #ea580c; }
.lead-loss-pricing { color: #bfdbfe; font-size: 13px; font-weight: 800; text-decoration: none; }
.lead-loss-pricing:hover { color: #fff; text-decoration: underline; }
.lead-loss-section--page .lead-loss-results::before { background: #2563eb; }
.lead-loss-section--page .lead-loss-results .lead-loss-step { color: #1d4ed8; }
.lead-loss-section--page .lead-loss-results h3,
.lead-loss-section--page .lead-loss-results h2 { color: #0f172a; }
.lead-loss-section--page .lead-loss-primary-result span { color: #475569; }
.lead-loss-section--page .lead-loss-result-grid > div {
  border-color: #dbe4f0;
  background: #fff;
}
.lead-loss-section--page .lead-loss-result-grid span,
.lead-loss-section--page .lead-loss-result-grid small { color: #475569; }
.lead-loss-section--page .lead-loss-result-grid output { color: #0f172a; }
.lead-loss-section--page .lead-loss-result-grid small { color: #64748b; }
.lead-loss-section--page .lead-loss-summary { color: #334155; }
.lead-loss-section--page .lead-loss-caveat { color: #64748b; }
.lead-loss-section--page .lead-loss-actions .btn-primary {
  background: #2563eb;
  box-shadow: 0 8px 22px rgba(37, 99, 235, .18);
}
.lead-loss-section--page .lead-loss-actions .btn-primary:hover { background: #1d4ed8; }
.lead-loss-section--page .lead-loss-pricing { color: #1d4ed8; }
.lead-loss-section--page .lead-loss-pricing:hover { color: #1e40af; }
@media (max-width: 900px) {
  .calculator-hero__grid { grid-template-columns: 1fr; gap: 38px; }
  .calculator-hero__copy { max-width: 760px; }
  .calculator-hero__example { width: 100%; max-width: 620px; }
  .lead-loss-shell { grid-template-columns: 1fr; max-width: 720px; }
  .lead-loss-results::before { inset: 0 0 auto; width: auto; height: 4px; }
  .lead-loss-section--page .lead-loss-results { border-top: 1px solid #dbe4f0; border-left: 0; }
  .calculator-explainer-grid { grid-template-columns: 1fr; }
  .calculator-explainer-grid article + article { border-top-width: 1px; border-left-width: 1px; }
}
@media (max-width: 560px) {
  .hero-loss-calculator { margin-top: 12px; padding: 11px 12px; }
  .hero-loss-calculator__icon { width: 34px; height: 34px; }
  .hero-loss-calculator strong { font-size: 12.5px; }
  .hero-loss-calculator small { font-size: 10.5px; }
  .calculator-hero { padding: 52px 0 46px; }
  .calculator-hero h1 { font-size: clamp(40px, 13vw, 54px); }
  .calculator-hero__copy > p { margin-top: 19px; font-size: 16px; }
  .calculator-trust { gap: 10px 16px; margin-top: 22px; }
  .calculator-hero__example { padding: 22px 18px; border-radius: 17px; }
  .calculator-example-flow { gap: 10px; }
  .calculator-example-flow strong { font-size: 29px; }
  .calculator-example-total { align-items: flex-start; flex-direction: column; gap: 6px; }
  .calculator-example-total span { max-width: none; }
  .lead-loss-section { padding-inline: 0; }
  .lead-loss-shell { margin-inline: -3px; border-radius: 20px; }
  .lead-loss-form, .lead-loss-results { padding: 24px 18px; }
  .lead-loss-fields { grid-template-columns: 1fr; }
  .lead-loss-value-row { grid-template-columns: 1fr; }
  .lead-loss-field small { min-height: 0; }
  .lead-loss-result-grid { grid-template-columns: 1fr 1fr; }
  .lead-loss-result-grid > div:last-child { grid-column: 1 / -1; }
  .lead-loss-primary-result output { font-size: 39px; }
  .calculator-explainer-grid { margin-top: 30px; }
  .calculator-explainer-grid article { padding: 23px 8px; }
  .calculator-next-step { padding: 26px 20px; border-radius: 20px; }
}

/* ---- Conversations list: the real browse screen. Columns match the
       conversations route, minus Outcome -- that column is populated by the
       nightly insight job for Scale-entitled tenants only, so it reads "-" for
       most accounts and must not be shown as if it always fills. ---- */
.tr-list { margin-bottom: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); }
.tr-list-head { padding: 12px 16px; border-bottom: 1px solid var(--bg-line); background: var(--bg-soft); }
.tr-list-head strong { display: block; font-size: 13.5px; color: var(--ink); }
.tr-list-head span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.tr-tbl-wrap { overflow-x: auto; }
.tr-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 460px; }
.tr-tbl th { text-align: left; padding: 8px 16px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 800; border-bottom: 1px solid var(--bg-line); }
.tr-tbl td { padding: 10px 16px; border-bottom: 1px solid var(--bg-line); color: var(--ink); font-weight: 600; vertical-align: top; }
.tr-tbl tr:last-child td { border-bottom: 0; }
.tr-tbl tr.is-open td { background: #eef2ff; }
.tr-who { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); font-weight: 700; }
.tr-when, .tr-msgs { white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.tr-view { color: var(--brand); font-weight: 800; white-space: nowrap; }
.tr-open-cue { padding: 10px 16px; font-size: 11.5px; color: var(--muted); font-weight: 700; background: var(--bg-soft); }

.tr-deeper { margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--bg-line); display: flex; flex-direction: column; gap: 10px; }
.tr-deeper-tag { margin: 0; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 800; }

/* ---- Value / stack replacement. Deliberately carries NO price: index.html
       has no INR/USD switcher (that lives in pricing.html), so an absolute
       figure here would show rupees to a US visitor. The numbers stay one
       click away on the page that handles currency properly. ---- */
.val-swap { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; }
.val-col { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--sh-md); }
.val-col--now { background: var(--bg-soft); box-shadow: none; }
.val-col h3 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 800; }
.val-item { padding: 9px 0; border-bottom: 1px solid var(--bg-line); }
.val-item:last-of-type { border-bottom: 0; }
.val-item b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 700; }
.val-item span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.val-foot { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--bg-line); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.val-col--now .val-foot { color: #b91c1c; }
.val-col--serviti .val-foot { color: #15803d; }
.val-arrow { font-size: 26px; color: var(--muted); font-weight: 300; }
.val-one { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--bg-line); font-size: 13.5px; font-weight: 700; color: var(--ink); }
.val-one:last-of-type { border-bottom: 0; }
.val-one svg { width: 16px; height: 16px; color: var(--green); flex-shrink: 0; }
.val-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 26px; }
.val-point { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.val-point h4 { margin: 0 0 5px; font-size: 14.5px; color: var(--ink); }
.val-point p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 860px) {
  .val-swap { grid-template-columns: 1fr; }
  .val-arrow { transform: rotate(90deg); justify-self: center; }
}

/* Homepage feedback lives in the footer flow. Only its opened dialog floats. */
.site-feedback { position: relative; color: #cbd5e1; background: var(--ink); border-bottom: 1px solid rgba(255,255,255,.1); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-feedback__footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 28px; padding-bottom: 28px; }
.site-feedback__footer-copy { min-width: 0; }
.site-feedback__footer-copy>span { display: block; margin-bottom: .38rem; color: #fb923c; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.site-feedback__footer-copy>strong { display: block; color: #fff; font-size: clamp(1.05rem,2vw,1.3rem); line-height: 1.25; }
.site-feedback__footer-copy>p { margin: .38rem 0 0; color: #94a3b8; font-size: .88rem; line-height: 1.5; }
.site-feedback__launcher { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .55rem; min-height: 46px; padding: .76rem 1rem; color: #fff; background: rgba(255,255,255,.07); border: 1px solid rgba(251,146,60,.72); border-radius: 12px; box-shadow: 0 10px 28px rgba(0,0,0,.18); font-family: inherit; font-size: .83rem; font-weight: 750; line-height: 1; letter-spacing: .02em; cursor: pointer; transition: transform .2s ease,background .2s ease,border-color .2s ease; }
.site-feedback__launcher:hover,.site-feedback__launcher:focus-visible { transform: translateY(-2px); background: rgba(249,115,22,.16); border-color: #fb923c; }
.site-feedback__launcher:focus-visible,.site-feedback__close:focus-visible,.site-feedback__submit:focus-visible,.site-feedback__thanks button:focus-visible { outline: 3px solid #fdba74; outline-offset: 3px; }
.site-feedback__launcher svg { width: 19px; height: 19px; flex: 0 0 auto; }
.site-feedback__backdrop { display: none; position: fixed; z-index: 940; inset: 0; width: 100vw; height: 100vh; padding: 0; background: rgba(15,23,42,.38); border: 0; backdrop-filter: blur(2px); cursor: default; }
body.site-feedback-open .site-feedback__backdrop { display: block; }
body.site-feedback-open .site-feedback__launcher { visibility: hidden; }
.site-feedback__panel { position: fixed; z-index: 941; left: 20px; top: 50%; width: min(430px,calc(100vw - 40px)); max-height: min(760px,calc(100vh - 40px)); overflow: auto; transform: translateY(-50%); color: #172033; background: #fff; border: 1px solid rgba(148,163,184,.34); border-radius: 24px; box-shadow: 0 32px 80px rgba(15,23,42,.28),0 4px 18px rgba(15,23,42,.12); overscroll-behavior: contain; }
.site-feedback__panel[hidden] { display: none; }
.site-feedback__head { position: relative; padding: 1.45rem 3.6rem 1.25rem 1.5rem; color: #fff; background: radial-gradient(circle at 88% -10%,rgba(251,146,60,.95),transparent 40%),linear-gradient(135deg,#111827 0%,#1e3a8a 68%,#2563eb 100%); }
.site-feedback__eyebrow { display: block; margin-bottom: .4rem; color: #fed7aa; font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.site-feedback__head h2 { margin: 0; color: #fff; font-size: 1.45rem; line-height: 1.2; }
.site-feedback__head p { margin: .4rem 0 0; color: #dbeafe; font-size: .9rem; }
.site-feedback__close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); border-radius: 50%; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.site-feedback__form { display: grid; gap: 1.15rem; padding: 1.4rem 1.5rem 1.5rem; }
.site-feedback__instruction { margin: 0; color: #64748b; font-size: .82rem; }
.site-feedback__form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.site-feedback__form legend,.site-feedback__field>span { margin-bottom: .65rem; color: #172033; font-size: .9rem; font-weight: 750; }
.site-feedback__field>span { display: block; }
.site-feedback__field small { color: #94a3b8; font-size: .72rem; font-weight: 600; }
.site-feedback__choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.site-feedback__choices label { cursor: pointer; }
.site-feedback__choices input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.site-feedback__choices span { display: inline-flex; min-height: 38px; align-items: center; padding: .52rem .75rem; color: #334155; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 999px; font-size: .78rem; font-weight: 700; transition: border-color .15s ease,color .15s ease,background .15s ease; }
.site-feedback__choices input:checked+span { color: #1d4ed8; background: #eff6ff; border-color: #60a5fa; box-shadow: inset 0 0 0 1px #60a5fa; }
.site-feedback__choices input:focus-visible+span { outline: 3px solid rgba(249,115,22,.32); outline-offset: 2px; }
.site-feedback__choices--compact span { min-width: 70px; justify-content: center; }
.site-feedback__field textarea,.site-feedback__field input { box-sizing: border-box; width: 100%; padding: .78rem .85rem; color: #172033; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; font-family: inherit; font-size: .88rem; font-weight: 400; line-height: 1.5; resize: vertical; }
.site-feedback__field textarea:focus,.site-feedback__field input:focus { border-color: #3b82f6; outline: 3px solid rgba(59,130,246,.14); }
.site-feedback__followup { display: flex; align-items: flex-start; gap: .7rem; color: #334155; font-size: .86rem; font-weight: 650; cursor: pointer; }
.site-feedback__followup input { width: 17px; height: 17px; margin-top: 1px; accent-color: #2563eb; }
.site-feedback__honeypot { position: absolute!important; left: -10000px!important; width: 1px!important; height: 1px!important; overflow: hidden!important; }
.site-feedback__message { padding: .72rem .82rem; color: #991b1b; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; font-size: .82rem; }
.site-feedback__message[hidden] { display: none; }
.site-feedback__submit,.site-feedback__thanks button { min-height: 45px; padding: .75rem 1rem; color: #fff; background: linear-gradient(135deg,#ea580c,#f97316); border: 0; border-radius: 12px; box-shadow: 0 8px 20px rgba(234,88,12,.22); font-family: inherit; font-size: .9rem; font-weight: 750; line-height: 1; cursor: pointer; }
.site-feedback__submit:disabled { cursor: wait; opacity: .65; }
.site-feedback__privacy { margin: -.35rem 0 0; color: #94a3b8; font-size: .7rem; line-height: 1.45; text-align: center; }
.site-feedback__thanks { padding: 2.6rem 1.7rem 2.2rem; text-align: center; }
.site-feedback__thanks[hidden] { display: none; }
.site-feedback__thanks>span { display: grid; width: 58px; height: 58px; margin: 0 auto 1rem; place-items: center; color: #fff; background: #16a34a; border-radius: 50%; font-size: 1.7rem; box-shadow: 0 10px 28px rgba(22,163,74,.26); }
.site-feedback__thanks h3 { margin: 0; color: #172033; font-size: 1.25rem; }
.site-feedback__thanks p { margin: .55rem auto 1.25rem; max-width: 30ch; color: #64748b; font-size: .88rem; line-height: 1.55; }
.site-feedback__thanks button { min-width: 110px; }
body.site-feedback-open { overflow: hidden; }
@media (max-width:767px) {
  .site-feedback__footer-inner { align-items: stretch; flex-direction: column; gap: 1rem; padding-top: 24px; padding-bottom: 24px; }
  .site-feedback__launcher { width: 100%; min-height: 46px; }
  .site-feedback__panel { left: 0; top: auto; bottom: 0; width: 100%; max-height: min(86vh,760px); transform: none; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 24px 24px 0 0; }
  .site-feedback__head { padding: 1.2rem 3.4rem 1rem 1.2rem; }
  .site-feedback__form { padding: 1.15rem 1.2rem max(1.3rem,env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion:reduce) { .site-feedback__launcher { transition: none; } }