/* ConversaAI shared landing/marketing UI components.
   Built on top of the theme's dark system (accent #67BD45).
   Used by index.php and about.php. */

.ca-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.ca-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  line-height: 1.4;
}
.ca-chip svg {
  flex: 0 0 auto;
  color: #67bd45;
}
.ca-step {
  height: 100%;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #11192c;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.ca-step:hover {
  border-color: rgba(103, 189, 69, 0.45);
  transform: translateY(-3px);
}
.ca-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 24px;
  border-radius: 50%;
  background: rgba(103, 189, 69, 0.12);
  border: 1px solid rgba(103, 189, 69, 0.4);
  color: #67bd45;
  font-weight: 600;
}
.ca-step h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.ca-metric {
  height: 100%;
  padding: 28px 24px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.ca-metric strong {
  display: block;
  font-size: 34px;
  line-height: 1.2;
  color: #fff;
  font-weight: 600;
}
.ca-metric span {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
}
.ca-usecase {
  height: 100%;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0c0d25;
}
.ca-icon-sm {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.ca-usecase span.ca-usecase-tag {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(103, 189, 69, 0.12);
  color: #67bd45;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ca-usecase h3 {
  font-size: 20px;
  margin-bottom: 12px;
}
.ca-usecase ul {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.ca-usecase ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
}
.ca-usecase ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #67bd45;
}
@media (max-width: 767.98px) {
  .ca-step,
  .ca-usecase {
    padding: 24px;
  }
  .ca-metric strong {
    font-size: 28px;
  }
}
.ca-journey {
  width: 100%;
  max-width: 1000px;
  height: auto;
}
.ca-caption {
  max-width: 620px;
  margin: 24px auto 0;
  font-size: 15px;
}
.ca-plan {
  position: relative;
  height: 100%;
  padding: 36px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #11192c;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.ca-plan-featured {
  border-color: rgba(103, 189, 69, 0.45);
  box-shadow: 0 0 0 1px rgba(103, 189, 69, 0.15),
    0 24px 60px rgba(0, 0, 0, 0.4);
}
.ca-plan-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #67bd45;
  color: #02021a;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ca-plan h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.ca-plan-price {
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 14px;
}
.ca-plan-price em {
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
}
.ca-plan .common-btn {
  margin-top: auto;
}
.ca-device {
  width: 100%;
  max-width: 290px;
  height: auto;
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55),
    0 0 0 8px rgba(255, 255, 255, 0.02);
}
.ca-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(103, 189, 69, 0.12);
  border: 1px solid rgba(103, 189, 69, 0.25);
  color: #67bd45;
}
/* Scroll reveal — progressive enhancement, only armed by JS */
.ca-reveal-on .ca-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.ca-reveal-on .ca-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .ca-step:hover {
    transform: none;
  }
  .ca-reveal-on .ca-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Landing page (index.php) ---------- */

/* Inline industry picker — replaces the blocking modal on arrival */
.ca-industry {
  margin-top: 32px;
}
.ca-industry-label {
  display: block;
  margin-bottom: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}
.ca-industry-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.ca-industry-list button {
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.82);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ca-industry-list button:hover,
.ca-industry-list button:focus-visible {
  border-color: rgba(103, 189, 69, 0.6);
  background: rgba(103, 189, 69, 0.12);
  color: #fff;
}
.ca-industry-list button[aria-pressed="true"] {
  border-color: #67bd45;
  background: rgba(103, 189, 69, 0.18);
  color: #fff;
}
.ca-industry-list button.ca-industry-more {
  border-style: dashed;
}

/* Before / after comparison */
.ca-compare {
  height: 100%;
  padding: 36px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.ca-compare-good {
  border-color: rgba(103, 189, 69, 0.35);
  background: linear-gradient(
    180deg,
    rgba(103, 189, 69, 0.08),
    rgba(103, 189, 69, 0)
  );
}
.ca-compare h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  margin-bottom: 22px;
}
.ca-compare ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-compare ul li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 16px;
  line-height: 1.6;
}
.ca-compare ul li:last-child {
  margin-bottom: 0;
}
.ca-compare ul li::before {
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  content: "\00d7";
  background: rgba(255, 92, 92, 0.14);
  color: #ff7a7a;
}
.ca-compare-good ul li::before {
  content: "\2713";
  background: rgba(103, 189, 69, 0.16);
  color: #67bd45;
}
.ca-compare-tag {
  display: inline-block;
  margin-bottom: 18px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
}
.ca-compare-good .ca-compare-tag {
  background: rgba(103, 189, 69, 0.16);
  color: #67bd45;
}

@media (max-width: 767.98px) {
  .ca-compare {
    padding: 26px;
  }
}

/* ---------- Industry showcase: one concrete job per industry ---------- */

.ca-ind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0;
  margin: 0 0 48px;
  list-style: none;
}
.ca-ind-tabs button {
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.78);
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.ca-ind-tabs button:hover,
.ca-ind-tabs button:focus-visible {
  border-color: rgba(103, 189, 69, 0.55);
  color: #fff;
}
.ca-ind-tabs button[aria-selected="true"] {
  border-color: #67bd45;
  background: rgba(103, 189, 69, 0.16);
  color: #fff;
  font-weight: 500;
}

.ca-ind-panel[hidden] {
  display: none;
}
.ca-ind-job {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(103, 189, 69, 0.14);
  color: #67bd45;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ca-ind-headline {
  font-size: 34px;
  line-height: 1.25;
  margin-bottom: 16px;
}
@media (max-width: 991.98px) {
  .ca-ind-headline {
    font-size: 26px;
  }
}

/* Chat transcript mock */
.ca-chat {
  padding: 26px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: #0b1120;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.45);
}
.ca-chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}
.ca-chat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #67bd45;
  box-shadow: 0 0 0 4px rgba(103, 189, 69, 0.18);
}
.ca-bubble {
  max-width: 88%;
  margin-bottom: 14px;
  padding: 13px 17px;
  font-size: 15px;
  line-height: 1.55;
}
.ca-bubble-user {
  margin-left: auto;
  border-radius: 16px 16px 4px 16px;
  background: rgba(103, 189, 69, 0.16);
  border: 1px solid rgba(103, 189, 69, 0.28);
  color: #eaf6e4;
}
.ca-bubble-ai {
  margin-right: auto;
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}
.ca-chat-action {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}
.ca-chat-action svg {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #67bd45;
}

/* The record that lands in the customer's inbox */
.ca-confirm {
  border-radius: 16px;
  border: 1px solid rgba(103, 189, 69, 0.4);
  background: linear-gradient(
    180deg,
    rgba(103, 189, 69, 0.12),
    rgba(103, 189, 69, 0.02)
  );
  padding: 18px 20px;
}
.ca-confirm-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.ca-confirm-title svg {
  color: #67bd45;
}
.ca-confirm dl {
  display: grid;
  grid-template-columns: minmax(90px, auto) 1fr;
  gap: 8px 18px;
  margin: 0;
  font-size: 14.5px;
}
.ca-confirm dt {
  color: rgba(255, 255, 255, 0.55);
  font-weight: 400;
}
.ca-confirm dd {
  margin: 0;
  color: #fff;
}

/* "Works for any industry" strip */
.ca-any {
  margin-top: 60px;
  padding: 36px;
  border-radius: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.02);
  text-align: center;
}
.ca-any h3 {
  font-size: 22px;
  margin-bottom: 10px;
}
.ca-any-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 0;
  margin: 24px 0 0;
  list-style: none;
}
.ca-any-list li {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.66);
  font-size: 13.5px;
}

@media (max-width: 767.98px) {
  .ca-chat,
  .ca-any {
    padding: 20px;
  }
  .ca-bubble {
    max-width: 95%;
  }
  .ca-confirm dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .ca-confirm dd {
    margin-bottom: 10px;
  }
}

/* Outcome bullets used inside the industry panels */
.ca-compare-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ca-compare-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-size: 15.5px;
  line-height: 1.6;
}
.ca-compare-list li:last-child {
  margin-bottom: 0;
}
.ca-compare-list li::before {
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  content: "\2713";
  font-size: 12px;
  font-weight: 700;
  background: rgba(103, 189, 69, 0.16);
  color: #67bd45;
}

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

.ca-hero-visual {
  position: relative;
  max-width: 520px;
  margin-left: auto;
}
@media (max-width: 991.98px) {
  /* Stacks below the headline and CTAs on small screens. */
  .ca-hero-visual {
    margin: 48px auto 0;
  }
}
.ca-chat-hero {
  background: linear-gradient(180deg, #0d1526 0%, #0a1020 100%);
  border-color: rgba(103, 189, 69, 0.18);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(103, 189, 69, 0.06);
}
.ca-hero-note {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.5);
}
/* The theme reserves the right half of the hero for a background image; with
   the product card in a real column that reservation is no longer needed. */
.hero-area-cs .hero-info-cs {
  max-width: none;
}

/* ---------- Mobile header repair ----------
   assets/css/style.css (old theme) ships
     .mean-container .mean-bar .meanmenu-reveal { display: none !important; }
     .mean-container .mean-bar .mean-nav > ul   { display: block !important; }
   with no media query, which beats the mobile rules in
   assets/css/new-css-v2/style.css. Result on every page under 992px: the
   hamburger is invisible and the nav renders permanently expanded as raw
   links over the hero. This file loads last, so it restores the intended
   behaviour without touching either theme stylesheet. */

@media only screen and (max-width: 991.98px) {
  .mean-container .mean-bar .meanmenu-reveal {
    display: inline-grid !important;
  }
  /* Closed by default; meanmenu adds .meanclose to the toggle when open. */
  .mean-container .mean-bar .mean-nav > ul {
    display: none !important;
  }
  .mean-container .mean-bar .meanmenu-reveal.meanclose ~ .mean-nav > ul {
    display: block !important;
  }
  /* The logo has no cap on small screens and renders full-bleed. */
  .menu-logo-wrap img {
    max-width: 168px;
    height: auto;
  }
}

/* ---------- Vertical rhythm ----------
   The theme spaces every section with pt-120/pb-120 (240px between sections)
   plus pt-60 inside them. Across a dozen sections that is thousands of pixels
   of empty screen. These pages opt into a tighter scale. */

/* The hero needs its large top padding to clear the fixed header —
   never collapse that one. */
.ca-tight .pt-120:not(.hero-area-cs) { padding-top: 72px !important; }
.ca-tight .pb-120 { padding-bottom: 72px !important; }
.ca-tight .pt-60  { padding-top: 40px !important; }
.ca-tight .section-padding-top-bottom { padding: 72px 0 !important; }
.ca-tight .row-padding-top { padding-top: 40px !important; }

.ca-tight .section-title .title,
.ca-tight .section-title h2 { margin-bottom: 12px; }
.ca-tight .section-title .desc { margin-bottom: 0; }
.ca-tight .ca-ind-tabs { margin-bottom: 36px; }
.ca-tight .ca-any { margin-top: 40px; padding: 28px; }
.ca-tight .ca-step { padding: 26px; }
.ca-tight .ca-compare { padding: 28px; }
.ca-tight .subscribe-wrap { padding-top: 56px; padding-bottom: 56px; }

@media (max-width: 991.98px) {
  .ca-tight .pt-120:not(.hero-area-cs) { padding-top: 52px !important; }
  .ca-tight .pb-120 { padding-bottom: 52px !important; }
  .ca-tight .section-padding-top-bottom { padding: 52px 0 !important; }
  .ca-tight .pt-60 { padding-top: 28px !important; }
  .ca-tight .row-padding-top { padding-top: 28px !important; }
}

/* ---------- Hero: type scale and rhythm ----------
   The theme hero was built for a headline sitting over a background photo, so
   its type is oversized and its spacing arbitrary. With the product card in a
   real column the hero needs a tighter scale and one consistent rhythm. */

.ca-eyebrow {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  margin-bottom: 24px;
  border-radius: 999px;
  border: 1px solid rgba(103, 189, 69, 0.35);
  background: rgba(103, 189, 69, 0.1);
  color: #8fd06f;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

.hero-area-cs .hero-info-cs h1 {
  font-size: clamp(34px, 3.3vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 18ch;
  margin-bottom: 20px;
}
.hero-area-cs .hero-info-cs .hero-text {
  max-width: 52ch;
  margin-bottom: 28px;
  font-size: 16.5px;
  line-height: 1.65;
}
.hero-area-cs .hero-info-cs .two-btn-wrap {
  gap: 12px;
  margin-bottom: 20px;
}

/* One tight row of proof chips instead of a ragged two-line block. */
.hero-area-cs .ca-chip-row {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 0 !important;
}
.hero-area-cs .ca-chip {
  padding: 6px 13px;
  font-size: 13px;
}
.hero-area-cs .ca-industry {
  margin-top: 26px;
}

/* The card is the hero's proof — let it sit forward of the background. */
.ca-chat-hero {
  position: relative;
}
.ca-chat-hero::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    rgba(103, 189, 69, 0.14),
    rgba(103, 189, 69, 0) 70%
  );
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .hero-area-cs .hero-info-cs h1 { max-width: none; }
  .hero-area-cs .hero-info-cs .hero-text { max-width: none; }
}

/* Keep the hero's industry picker on one line beside the copy column. */
.hero-area-cs .ca-industry-list {
  gap: 8px;
}
.hero-area-cs .ca-industry-list button {
  padding: 8px 14px;
  font-size: 13.5px;
}

/* ---------- Single-page anchor navigation ----------
   .menu-area gains .sticky on scroll, so anchor jumps must clear it or the
   section heading lands underneath the nav bar. */

#industries,
#features,
#how-it-works,
#why,
#about,
#pricing,
#faq {
  scroll-margin-top: 108px;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.ca-nav-cta {
  margin-left: 24px;
  flex: 0 0 auto;
}
@media (max-width: 1199.98px) {
  .ca-nav-cta {
    margin-left: 12px;
  }
}

/* ---------- Sticky nav ----------
   main.js adds .sticky to .menu-area past 150px of scroll, but the theme ships
   no CSS for it, so the nav simply scrolled away. On a single page with anchor
   navigation the nav has to stay reachable. */

.menu-area.sticky {
  position: fixed;
  top: 0;
  padding: 10px 0;
  background: rgba(10, 14, 25, 0.88);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: 999;
}
/* desktop-dark.png is 1672x640 but the artwork only occupies the box
   (160,151)-(1545,475) — roughly a quarter of the height is transparent above
   and below it. Capping the height alone therefore shrank the visible mark to
   half the size being asked for: max-height:40px rendered a 20px logo. Size the
   padded box to what the artwork should measure and pull the dead bands back in
   vertically, so the mark grows without the bar growing with it.

   Only the vertical bands are cancelled. Doing the same on the left would drag
   the artwork 29px inward of where it sits at full size, turning a scroll into
   a visible sideways jump; leaving it alone keeps that shift to 13px, which is
   just the image scaling and reads as the logo shrinking in place. */
.menu-area.sticky .menu-logo-wrap img {
  height: 64px;
  max-height: none;
  width: auto;
  margin: -15px 0 -16px;
}

@media only screen and (max-width: 991.98px) {
  /* The mobile drawer lives inside .menu-area, so once the bar is fixed the
     open drawer must be able to scroll rather than overflow the viewport. */
  .menu-area.sticky {
    max-height: 100vh;
    overflow-y: auto;
    padding: 6px 0;
  }
  .menu-area.sticky .menu-logo-wrap img {
    height: 52px;
    margin: -12px 0 -13px;
  }
}

/* ==========================================================================
   Premium layer
   Depth and material, applied only on the landing page (.ca-tight). Kept to a
   few deliberate devices: an aurora field for depth, a grain overlay so the
   flat dark surfaces stop looking like flat dark surfaces, a light top edge on
   cards so they read as lifted, and layered shadows instead of one heavy drop.
   ========================================================================== */

/* Gradient accent on the second half of the headline. */
.ca-grad {
  background: linear-gradient(100deg, #8fe06a 0%, #67bd45 45%, #3ea6c9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Aurora field behind the hero. */
.ca-tight .hero-area-cs::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 130%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 18% 22%, rgba(103, 189, 69, 0.16), transparent 70%),
    radial-gradient(34% 40% at 82% 30%, rgba(62, 118, 201, 0.16), transparent 72%),
    radial-gradient(46% 38% at 50% 96%, rgba(103, 189, 69, 0.08), transparent 74%);
}

/* Grain. Breaks up the large flat fills without reading as texture. */
.ca-tight .hero-area-cs::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image: url(../images/new-images-v2/shapes/noise.png);
  background-size: 220px;
  mix-blend-mode: soft-light;
}

/* Material: a light top edge plus layered shadow reads as a lifted surface. */
.ca-tight .ca-step,
.ca-tight .ca-usecase,
.ca-tight .ca-plan,
.ca-tight .ca-compare,
.ca-tight .ca-metric,
.ca-tight .cs-choose-card-body {
  position: relative;
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 18px 40px -24px rgba(0, 0, 0, 0.9);
}
.ca-tight .ca-step::after,
.ca-tight .ca-usecase::after,
.ca-tight .ca-plan::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
}

/* Glass only where it earns the cost: the hero card and the featured plan. */
.ca-tight .ca-chat-hero,
.ca-tight .ca-plan-featured {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 40px 80px -36px rgba(0, 0, 0, 0.95),
    0 0 60px -30px rgba(103, 189, 69, 0.35);
}

/* Hairline between sections instead of a hard colour change. */
.ca-tight #features,
.ca-tight #how-it-works,
.ca-tight #why,
.ca-tight #about,
.ca-tight #pricing,
.ca-tight #faq {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}

/* Buttons: a touch of depth, and a real focus ring. */
.ca-tight .common-btn.bg-purple-style {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) inset,
    0 10px 26px -12px rgba(103, 189, 69, 0.75);
}
.ca-tight .common-btn:focus-visible,
.ca-tight .ca-industry-list button:focus-visible,
.ca-tight .ca-ind-tabs button:focus-visible {
  outline: 2px solid #8fe06a;
  outline-offset: 3px;
}

/* ---------- Pricing card alignment ----------
   conversa_render_pricing_card() places the CTA straight after the feature
   list. The three plans carry 10, 12 and 15 features, so the buttons landed at
   three different heights with dead space beneath the shorter cards. Making the
   card a flex column and pushing the CTA down pins all three to one baseline. */

.ca-tight .price-box {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ca-tight .price-box .price-info-btn-wrap {
  margin-top: auto;
  padding-top: 28px;
}

/* Equal-height header so every feature list starts on the same line. */
.ca-tight .price-box .price-value-box {
  display: flex;
  flex-direction: column;
}
.ca-tight .price-box .price-value-box > p {
  min-height: 4.6em;
  margin-bottom: 0;
}

/* The feature list should breathe, not stretch. */
.ca-tight .price-box .price-info-details {
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .ca-tight .price-box .price-value-box > p {
    min-height: 0;
  }
}

/* What the card is actually charged, under a converted price. Small, but never
   hidden -- a taka headline over a dollar charge is the one thing on this page
   a visitor must not first discover at checkout. */
.ca-billed-note {
  margin-top: -6px;
  margin-bottom: 10px;
  opacity: 0.75;
}

/* The offer on a pricing card, in the order it should be read: what the offer
   is, then the price, then what the price used to be. The first version put the
   struck figure and the chip on one cramped line jammed under the plan name,
   which read as a run-on and left a hole above the headline. */
.ca-offer-flag {
  margin: 14px 0 6px;
  line-height: 1;
}
.ca-offer-chip {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--primary-color);
  background: rgba(var(--primary-color-rgb), 0.14);
  border: 1px solid rgba(var(--primary-color-rgb), 0.32);
}

/* What it costs without the offer. Small and quiet: it exists to make the
   headline mean something, not to compete with it. */
.ca-offer-was {
  margin: 0 0 6px;
  font-size: 0.9rem;
  /* An explicit colour rather than an opacity: this <p> inherits a near-black
     from the theme, so dimming it further produced a smudge under the headline
     -- there in the DOM, invisible on screen. */
  color: rgba(var(--text-color-main-rgb), 0.62);
}
.ca-offer-was s {
  text-decoration-thickness: 1px;
}

/* Holds both lines on a card with no offer, so the four headline prices share a
   baseline instead of the free tier floating a row higher. */
.ca-offer-spacer {
  visibility: hidden;
}

/* The theme gives the headline a 28px lead, which was sized for a price sitting
   directly under the plan name. With a chip above it, that gap doubles up. */
.price-value-box .ca-offer-flag + .price,
.price-value-box .ca-offer-flag + .price + .price {
  margin-top: 10px;
}

/* Collapsible technical limits inside a pricing card. */
.ca-limits {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.ca-limits > summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 0 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.25s ease;
}
.ca-limits > summary::-webkit-details-marker {
  display: none;
}
.ca-limits > summary::after {
  content: "＋";
  margin-left: 8px;
  color: #67bd45;
  font-weight: 600;
}
.ca-limits[open] > summary::after {
  content: "－";
}
.ca-limits > summary:hover,
.ca-limits > summary:focus-visible {
  color: #fff;
}
.ca-limits .price-info-details li {
  font-size: 14px;
  opacity: 0.85;
}

/* How many sites the plan covers is the line that decides which card you are
   on. It was set in the same grey, at the same weight, as the cache TTL below
   it. */
.price-box .price-info-details li.ca-feature-lead {
  color: #fff;
  font-weight: 600;
}

/* The per-site charge. This is money the visitor will be billed, and the theme
   gave it a tick and the body grey -- so it read as one more thing included,
   with the figure wrapped onto its own line looking like a footnote. Full
   contrast, one unbreakable line, and the label above rather than beside it so
   the price never breaks mid-number on a narrow card. */
.price-box .price-info-details li.ca-feature-addon {
  align-items: flex-start;
  color: #fff;
}
.price-box .price-info-details li.ca-feature-addon svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: rgb(66, 41, 255);
}
.ca-addon-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ca-addon-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.ca-addon-price {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: #fff;
  /* The whole point of the row: "৳3,538" must never break across two lines. */
  white-space: nowrap;
}
.ca-addon-unit {
  margin-left: 4px;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

/* ---------- Hero conversation reveal ----------
   Turns land one after another, then the sequence restarts. Progressive
   enhancement: the hidden state is only applied once JS has confirmed it can
   reveal them again, so no-JS and reduced-motion visitors see the full chat. */

.ca-playing [data-ca-step] {
  opacity: 0;
  transform: translateY(10px) scale(0.985);
}
.ca-playing [data-ca-step].is-shown {
  opacity: 1;
  transform: none;
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* The record the conversation produced gets a beat of its own. */
.ca-playing [data-ca-step="confirm"].is-shown {
  animation: caConfirmPop 0.5s cubic-bezier(0.22, 1.2, 0.36, 1) both;
}
@keyframes caConfirmPop {
  0%   { opacity: 0; transform: translateY(14px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(0) scale(1.015); }
  100% { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ca-playing [data-ca-step] { opacity: 1; transform: none; }
  .ca-playing [data-ca-step="confirm"].is-shown { animation: none; }
}

/* ==========================================================================
   DESIGN SYSTEM
   Tokens first, then a typography pass, an elevation scale, and accent
   restraint. Everything below is scoped to .ca-tight so the rest of the theme
   is untouched.
   ========================================================================== */

.ca-tight {
  /* Surfaces: three levels, no more. Depth comes from light, not from stacking
     ever-darker boxes. */
  --s-0: #080b14;
  --s-1: #0d1220;
  --s-2: #131a2b;

  /* One border colour at three strengths. */
  --line-1: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.16);

  /* Text ramp. Body copy sits at 0.68 — high enough to read, low enough that
     headings carry the hierarchy on their own. */
  --ink-1: #ffffff;
  --ink-2: rgba(255, 255, 255, 0.68);
  --ink-3: rgba(255, 255, 255, 0.45);

  --accent: #67bd45;
  --accent-hi: #8fe06a;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Shadows read as one soft light source above the page. */
  --lift-1: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
            0 12px 24px -18px rgba(0, 0, 0, 0.9);
  --lift-2: 0 1px 0 0 rgba(255, 255, 255, 0.07) inset,
            0 28px 56px -32px rgba(0, 0, 0, 0.95);
}

/* ---------- Typography ----------
   The single biggest tell of a generic template is untuned type: default
   tracking on display sizes and body copy set too large and too tight. */

.ca-tight h1,
.ca-tight h2,
.ca-tight .section-title .title {
  letter-spacing: -0.028em;
  font-weight: 600;
}
.ca-tight h3 {
  letter-spacing: -0.015em;
  font-weight: 600;
}
.ca-tight .section-title .title {
  font-size: clamp(28px, 2.5vw, 42px);
  line-height: 1.14;
}
.ca-tight .section-title .desc,
.ca-tight .ca-step p,
.ca-tight .ca-usecase p,
.ca-tight .ca-compare li,
.ca-tight .accordion-body {
  color: var(--ink-2);
  line-height: 1.68;
  letter-spacing: -0.003em;
}
.ca-tight .ca-step p,
.ca-tight .ca-usecase p {
  font-size: 15.5px;
}
.ca-tight .ca-step h3,
.ca-tight .ca-usecase h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* Eyebrow: smaller, quieter, so the headline is unmistakably the loudest
   element in the block. */
.ca-tight .section-title .gradient-sub,
.ca-tight .ca-eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

/* ---------- Elevation ----------
   One surface treatment applied everywhere, instead of five near-misses. */

.ca-tight .ca-step,
.ca-tight .ca-usecase,
.ca-tight .ca-plan,
.ca-tight .ca-compare,
.ca-tight .ca-metric,
.ca-tight .cs-choose-card-body,
.ca-tight .price-box,
.ca-tight .ca-chat {
  background: var(--s-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.ca-tight .ca-chat,
.ca-tight .ca-plan-featured,
.ca-tight .price-box:hover {
  box-shadow: var(--lift-2);
}

/* ---------- Accent restraint ----------
   Green earns attention only where a decision happens: the primary CTA, the
   headline accent, active state, and the record the AI produced. Icon tiles go
   neutral so the eye is not pulled in eight directions at once. */

.ca-tight .ca-icon,
.ca-tight .ca-icon-sm {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-2);
  color: var(--ink-2);
  transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.ca-tight .ca-step:hover .ca-icon,
.ca-tight .ca-usecase:hover .ca-icon-sm {
  background: rgba(103, 189, 69, 0.12);
  border-color: rgba(103, 189, 69, 0.4);
  color: var(--accent-hi);
}
.ca-tight .ca-chip {
  border-color: var(--line-1);
  color: var(--ink-3);
}

/* ---------- Cursor spotlight ----------
   A soft highlight that tracks the pointer across a card. Driven by two custom
   properties set in JS, so the browser only repaints the gradient. */

.ca-tight .ca-step,
.ca-tight .ca-usecase,
.ca-tight .ca-plan,
.ca-tight .price-box {
  position: relative;
  overflow: hidden;
}
.ca-tight .ca-step::before,
.ca-tight .ca-usecase::before,
.ca-tight .ca-plan::before,
.ca-tight .price-box::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    380px circle at var(--mx, 50%) var(--my, 0%),
    rgba(103, 189, 69, 0.1),
    transparent 62%
  );
}
.ca-tight .ca-step:hover::before,
.ca-tight .ca-usecase:hover::before,
.ca-tight .ca-plan:hover::before,
.ca-tight .price-box:hover::before {
  opacity: 1;
}

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

.ca-tight .common-btn {
  letter-spacing: -0.005em;
  font-weight: 500;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease, background 0.25s ease;
}
.ca-tight .common-btn.bg-purple-style {
  background: linear-gradient(180deg, #79cf52 0%, var(--accent) 100%);
  border: none;
}
.ca-tight .common-btn.bg-purple-style:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 14px 30px -12px rgba(103, 189, 69, 0.8);
}
.ca-tight .common-btn.border-style {
  border-color: var(--line-3);
}
.ca-tight .common-btn.border-style:hover {
  border-color: var(--line-3);
  background: rgba(255, 255, 255, 0.04);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .ca-tight .common-btn:hover { transform: none; }
  .ca-tight .ca-step:hover { transform: none; }
}

/* ---------- Focal surface ----------
   The hero card is the one element the whole page is built around, so it sits
   a level above everything else: its own gradient, a faint accent edge, and the
   deepest lift. Declared after the elevation block because .ca-tight .ca-chat
   would otherwise flatten it to a standard card. */

.ca-tight .ca-chat-hero {
  background: linear-gradient(180deg, #101a2e 0%, #0a1020 100%);
  border-color: rgba(103, 189, 69, 0.16);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 48px 90px -40px rgba(0, 0, 0, 1),
    0 0 80px -40px rgba(103, 189, 69, 0.45);
}

/* Chat bubbles: the visitor speaks in accent, the agent in neutral. Reading
   order stays obvious without either side shouting. */
.ca-tight .ca-bubble-ai {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-1);
  color: var(--ink-2);
}
.ca-tight .ca-bubble-user {
  background: rgba(103, 189, 69, 0.13);
  border-color: rgba(103, 189, 69, 0.22);
  color: #e8f6e1;
}
.ca-tight .ca-chat-action {
  border-color: var(--line-1);
  color: var(--ink-3);
}

/* The record the conversation produced is the payoff — it keeps full accent. */
.ca-tight .ca-confirm {
  border-color: rgba(103, 189, 69, 0.34);
}

/* ---------- Phone frame ----------
   Same chat components as the hero, wrapped in a device shell. Built in markup
   so it stays on-brand, scales crisply and needs no image request. */

.ca-phone {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  padding: 10px;
  border-radius: 34px;
  background: linear-gradient(180deg, #1a2338 0%, #0b1020 100%);
  border: 1px solid var(--line-2, rgba(255, 255, 255, 0.1));
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 44px 80px -38px rgba(0, 0, 0, 1),
    0 0 70px -40px rgba(103, 189, 69, 0.4);
}
@media (min-width: 992px) {
  .ca-phone {
    margin-right: 0;
  }
}
.ca-phone-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 14px;
  font-size: 12.5px;
  color: var(--ink-3, rgba(255, 255, 255, 0.45));
}
.ca-phone-body {
  padding: 16px 14px;
  border-radius: 26px 26px 8px 8px;
  background: #070b14;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.ca-phone-body .ca-bubble {
  max-width: 92%;
  font-size: 13.5px;
  padding: 10px 13px;
  margin-bottom: 10px;
}
.ca-phone-body .ca-confirm {
  margin-top: 4px;
  padding: 13px 15px;
}
.ca-phone-body .ca-confirm-title {
  font-size: 13.5px;
  margin-bottom: 10px;
}
.ca-phone-body .ca-confirm dl {
  font-size: 13px;
  gap: 6px 14px;
}
.ca-phone-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 8px 8px 26px 26px;
  background: #070b14;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-top: 0;
  font-size: 13px;
  color: var(--ink-3, rgba(255, 255, 255, 0.45));
}
.ca-phone-input svg {
  color: var(--accent, #67bd45);
}

/* Inline code inside FAQ copy. */
.ca-code {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-1, rgba(255, 255, 255, 0.06));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  color: var(--ink-1, #fff);
}

/* Contact form feedback */
.ca-form-note {
  margin-bottom: 20px;
  padding: 13px 18px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.55;
}
.ca-form-ok {
  border: 1px solid rgba(103, 189, 69, 0.4);
  background: rgba(103, 189, 69, 0.1);
  color: #bff0a6;
}
.ca-form-bad {
  border: 1px solid rgba(255, 92, 92, 0.4);
  background: rgba(255, 92, 92, 0.09);
  color: #ffb3b3;
}
.ca-field-error {
  display: block;
  margin-top: 7px;
  font-size: 13.5px;
  color: #ffb3b3;
}

/* ============================================================
   Product tour — real app screenshots in a browser frame
   ============================================================ */
.pt-frame {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0e0e23;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.pt-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pt-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.pt-dot:nth-child(1) { background: #ef6a5a; }
.pt-dot:nth-child(2) { background: #f5bd4f; }
.pt-dot:nth-child(3) { background: #61c454; }

.pt-frame-url {
  margin-left: 12px;
  padding: 3px 14px;
  border-radius: 999px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.pt-frame-body {
  position: relative;
  aspect-ratio: 1600 / 1000;
}

.pt-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pt-shot.is-active { opacity: 1; }

.pt-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}

.pt-tab {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pt-tab:hover { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.pt-tab.is-active {
  color: #0b1016;
  background: #67bd45;
  border-color: #67bd45;
  box-shadow: 0 8px 24px rgba(103, 189, 69, 0.35);
}

@media (max-width: 767px) {
  .pt-frame-url { display: none; }
  .pt-tab { padding: 7px 14px; font-size: 12.5px; }
}

/* premium pass: glow + gradient edge on the tour frame */
.pt-stage {
  position: relative;
}

.pt-stage::before {
  content: "";
  position: absolute;
  inset: -8% -6% auto -6%;
  height: 110%;
  background:
    radial-gradient(45% 55% at 28% 30%, rgba(103, 189, 69, 0.16) 0%, transparent 70%),
    radial-gradient(40% 50% at 75% 65%, rgba(99, 102, 241, 0.14) 0%, transparent 70%);
  filter: blur(12px);
  z-index: 0;
  pointer-events: none;
}

.pt-frame {
  position: relative;
  z-index: 1;
  border: 1px solid transparent;
  background:
    linear-gradient(#0e0e23, #0e0e23) padding-box,
    linear-gradient(135deg, rgba(103, 189, 69, 0.55), rgba(255, 255, 255, 0.08) 38%, rgba(99, 102, 241, 0.45)) border-box;
}

.pt-caption {
  margin-top: 18px;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  min-height: 24px;
}

.pt-caption strong {
  color: #67bd45;
  font-weight: 600;
}