/* ==========================================================================
   WaSarthi — Design System
   ========================================================================== */

:root{
  /* Brand colors */
  --green-900:#06261C;
  --green-800:#0A3A2A;
  --green-700:#0E5239;
  --green-600:#116B49;
  --green-500:#159463;   /* primary */
  --green-400:#1FAE76;   /* emerald accent */
  --green-300:#4FC896;
  --green-200:#A9E8CB;
  --green-100:#DFF5EA;
  --green-50:#F2FBF6;

  --ink-900:#0A0E0D;     /* near-black */
  --ink-800:#121815;
  --ink-700:#1B2420;
  --ink-600:#33403A;
  --ink-500:#54615A;
  --ink-400:#7A8880;
  --ink-300:#A7B2AB;
  --ink-200:#D2D9D5;
  --ink-100:#E9EDEB;
  --ink-50:#F5F7F6;

  --white:#FFFFFF;
  --amber-500:#E2A73B;
  --saffron-700:#B35F00;
  --saffron-600:#D97706;
  --saffron-500:#FF9933;
  --saffron-400:#FFA84D;
  /* The logo's orange: hotter than --saffron-500, used for the wordmark and mark. */
  --logo-orange:#FF6A13;
  --saffron-300:#FFC27A;
  --saffron-100:#FFEBD2;
  --red-500:#D9534F;
  --blue-500:#3B82C4;

  /* Semantic */
  --bg:#FFFFFF;
  --bg-soft:var(--ink-50);
  --bg-dark:var(--ink-900);
  --bg-dark-soft:#111815;
  --text:var(--ink-900);
  --text-muted:var(--ink-500);
  --text-on-dark:#F2F5F3;
  --text-on-dark-muted:#9AA7A0;
  --border:var(--ink-100);
  --border-dark:#243029;
  --accent:var(--green-500);
  --accent-strong:var(--green-600);
  --accent-soft:var(--green-100);

  /* Typography */
  --font-sans:'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radii */
  --r-sm:8px;
  --r-md:12px;
  --r-lg:18px;
  --r-xl:26px;
  --r-full:999px;

  /* Shadow */
  --shadow-sm:0 1px 2px rgba(10,14,13,.06), 0 1px 1px rgba(10,14,13,.04);
  --shadow-md:0 8px 24px rgba(10,14,13,.08);
  --shadow-lg:0 24px 64px rgba(10,14,13,.14);
  --shadow-glow:0 0 0 1px rgba(21,148,99,.15), 0 20px 60px rgba(21,148,99,.18);

  /* Layout */
  --container:1240px;
  --header-h:76px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.5;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}
h1,h2,h3,h4,h5{margin:0;line-height:1.15;letter-spacing:-0.02em;font-weight:700;}
p{margin:0;}
section{position:relative;}

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

/* ---------- Typography scale ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-strong);
  background:var(--accent-soft);
  padding:7px 14px;border-radius:var(--r-full);
}
.eyebrow.on-dark{
  color:var(--green-300);
  background:rgba(31,174,118,.12);
  border:1px solid rgba(31,174,118,.25);
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--green-500);}

h1.display{font-size:clamp(34px,4.6vw,58px);}
h2.h2{font-size:clamp(28px,3.4vw,42px);}
h3.h3{font-size:clamp(20px,2vw,26px);}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--text-muted);line-height:1.65;font-weight:450;}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
.section-head.left{margin:0 0 44px;text-align:left;}
.section-head .eyebrow{margin-bottom:16px;}
.section-head h2{margin-bottom:16px;}
.kicker{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--r-full);
  font-weight:700;font-size:15px;border:1px solid transparent;
  cursor:pointer;transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{
  background:linear-gradient(180deg,var(--green-500),var(--green-600));
  color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 10px 24px -8px rgba(14,82,57,.55);
}
.btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 14px 30px -8px rgba(14,82,57,.65);transform:translateY(-1px);}
.btn-secondary{
  background:var(--white);
  color:var(--ink-900);
  border-color:var(--ink-200);
}
.btn-secondary:hover{border-color:var(--ink-400);transform:translateY(-1px);}
/* Book a Demo — the saffron CTA. Dark ink on saffron rather than white: white on
   this orange lands near 3:1, which fails on button-sized text, while ink gives ~9:1
   and keeps the colour properly saffron instead of a dark burnt orange. */
.btn-demo{
  background:linear-gradient(180deg,var(--saffron-400,#FFA84D),var(--saffron-500));
  color:var(--ink-900);
  border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -8px rgba(179,95,0,.5);
}
.btn-demo:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -8px rgba(179,95,0,.62);
  transform:translateY(-1px);
}
.btn-demo:focus-visible{outline:3px solid var(--saffron-700);outline-offset:2px;}
/* On dark sections the saffron already separates from the background; only the
   shadow needs to lift. */
.section.dark .btn-demo,.final-cta .btn-demo{box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 12px 30px -8px rgba(0,0,0,.55);}

.btn-ghost{background:transparent;color:var(--text);border-color:transparent;}
.btn-ghost:hover{background:var(--ink-50);}
.btn-on-dark{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18);}
.btn-on-dark:hover{background:rgba(255,255,255,.12);}
.btn-whatsapp{
  background:#fff;color:var(--green-700);border-color:var(--ink-200);
}
.btn-lg{padding:16px 30px;font-size:16px;}
.btn-sm{padding:9px 16px;font-size:13.5px;}
.btn-block{width:100%;}
.btn svg{width:18px;height:18px;flex:none;}

/* ---------- Button motion ----------
   Two effects only, both restrained enough for a B2B page:
   1. a light sweep across the two conversion buttons on hover
   2. a slow halo on every Book a Demo button, staggered so they do not pulse
      in unison. */
.btn-primary,.btn-demo{position:relative;overflow:hidden;isolation:isolate;}
.btn-primary>*,.btn-demo>*{position:relative;z-index:1;}
.btn-primary::after,.btn-demo::after{
  content:'';position:absolute;z-index:0;top:0;bottom:0;left:-75%;width:45%;
  transform:skewX(-18deg);pointer-events:none;opacity:0;
}
.btn-primary::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);}
.btn-demo::after{background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);}
.btn-primary:hover::after,.btn-demo:hover::after{opacity:1;animation:btnSweep .7s ease-out;}
@keyframes btnSweep{from{left:-75%;}to{left:135%;}}

/* Every Book a Demo button carries the halo. The delays are staggered so buttons
   that share a screen do not throb in unison, which reads as a glitch. */
.btn-demo{animation:demoHalo 3.4s ease-out infinite;}
.btn-demo:nth-of-type(2){animation-delay:.55s;}
.btn-demo:nth-of-type(3){animation-delay:1.1s;}
.sticky-cta .btn-demo{animation-delay:1.6s;}
.site-header .btn-demo{animation-delay:.85s;}
@keyframes demoHalo{
  0%{box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -8px rgba(179,95,0,.5), 0 0 0 0 rgba(255,153,51,.55);}
  70%{box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -8px rgba(179,95,0,.5), 0 0 0 14px rgba(255,153,51,0);}
  100%{box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -8px rgba(179,95,0,.5), 0 0 0 0 rgba(255,153,51,0);}
}
/* The halo would fight the hover shadow, so hovering hands control back. */
.btn-demo:hover{animation:none;}

@media (prefers-reduced-motion: reduce){
  .btn-primary::after,.btn-demo::after{display:none;}
  .btn-demo{animation:none;}
  .btn-primary:hover,.btn-demo:hover,.btn-secondary:hover{transform:none;}
}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.trust-line{
  margin-top:22px;font-size:13.5px;color:var(--text-muted);
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
}
.trust-line span{display:inline-flex;align-items:center;gap:8px;}
.trust-line .sep{color:var(--ink-200);}

/* ---------- Header ---------- */
/* Reserves the header's height in normal flow so the fixed header never overlaps content. */
.site-header-wrap{height:var(--header-h);}
.site-header{
  /* fixed, not sticky: sticky can only travel inside its parent, and in a CMS the header
     often sits in a wrapper only as tall as itself, which kills it on scroll. */
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled{
  background:rgba(255,255,255,.92);
  border-bottom-color:var(--border);
  box-shadow:0 4px 24px rgba(10,14,13,.05);
}
/* width:100% is required because .site-header is itself a flex container, so this
   .container would otherwise shrink-wrap and fall out of line with the page below. */
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink-900);flex:none;}
/* min-width + flex:none so a host theme's img rules cannot collapse the mark. */
.logo .mark-img{height:34px;width:auto;min-width:53px;flex:none;display:block;}
.logo b{font-weight:800;}
/* ---------- Brand wordmark ----------
   Wa green, Sarthi orange, identical in every place the name is split: header,
   footer, hero tagline and the popup heading. --green-500 is the one green that
   stays legible on both the white header and the near-black footer, so the pair
   never has to change per context. */
.tag-wa{color:var(--green-500);}
.tag{color:var(--logo-orange);}
/* Lighter saffron on the dark footer: the logo orange goes muddy against near-black. */
@media(max-width:430px){.logo .mark-img{height:30px;min-width:47px;}}

.nav-main{display:flex;align-items:center;gap:2px;}
.nav-main>li{position:relative;}
.nav-link{
  display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:var(--r-full);
  font-size:14.5px;font-weight:600;color:var(--ink-700);cursor:pointer;
  transition:background .15s ease,color .15s ease;
  background:transparent;border:none;font-family:inherit;
}
.nav-link:hover{background:var(--ink-50);color:var(--ink-900);}
.nav-link svg{width:13px;height:13px;opacity:.6;transition:transform .18s ease;pointer-events:none;}
.nav-main>li:hover .nav-link svg,.nav-main>li.open .nav-link svg{transform:rotate(180deg);}
.nav-main>li.open .nav-link{background:var(--ink-50);color:var(--ink-900);}

/* .mega is the full hoverable hit-area, flush against the trigger (no gap) so the
   cursor never leaves a hoverable element while moving from the link into the menu.
   The visible card is the inner element, offset down purely with a transform. */
.mega{
  position:absolute;top:100%;left:50%;
  /* --mega-shift is set by JS to nudge the panel back inside the viewport */
  transform:translateX(calc(-50% + var(--mega-shift, 0px)));
  width:min(560px, calc(100vw - 32px));padding-top:10px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease, visibility .18s ease;
  z-index:50;
}
.nav-main>li:hover .mega,.nav-main>li.open .mega{opacity:1;visibility:visible;pointer-events:auto;}
.mega-inner{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:4px;
  transform:translateY(6px);transition:transform .18s ease;
}
.nav-main>li:hover .mega-inner,.nav-main>li.open .mega-inner{transform:translateY(0);}
.mega a{
  display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:var(--r-md);
}
.mega a:hover{background:var(--ink-50);}
.mega .ic{
  width:34px;height:34px;border-radius:9px;background:var(--green-50);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.mega .ic svg{width:17px;height:17px;}
.mega a>span:last-child{display:flex;flex-direction:column;min-width:0;}
.mega .t{display:block;font-size:14px;font-weight:700;color:var(--ink-900);line-height:1.3;}
.mega .d{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.35;}

.header-right{display:flex;align-items:center;gap:10px;flex:none;}
/* Account actions (Login / Sign Up) stay in the header at every width. Only the
   marketing CTAs collapse into the menu, so a customer never has to hunt for the
   way into their workspace. */
.header-right .btn-account{display:inline-flex;}
@media(max-width:900px){
  .header-right{gap:8px;}
  .header-right .btn-account{padding:9px 14px;font-size:13.5px;}
}
@media(max-width:430px){
  .header-right{gap:6px;}
  .header-right .btn-account{padding:8px 10px;font-size:12.5px;}
}
.mob-cta .mob-login{border-color:var(--ink-200);color:var(--ink-700);}
.mob-cta .mob-login:hover{border-color:var(--ink-400);background:var(--ink-50);}

.hamburger{display:none;width:40px;height:40px;border-radius:var(--r-sm);border:1px solid var(--border);background:#fff;align-items:center;justify-content:center;color:var(--ink-700);cursor:pointer;}
/* min-width + flex:none because a host theme's button/svg rules can otherwise
   collapse these icons to zero width; stroke is pinned so they never inherit white. */
.hamburger svg,.mobile-panel .mclose svg{
  width:19px;height:19px;min-width:19px;flex:none;stroke:currentColor;
}
.mobile-panel .mclose{color:var(--ink-700);cursor:pointer;background:#fff;}

/* The full nav + Login + both CTAs need ~1154px to sit on one line.
   Below that, collapse to the hamburger rather than letting the header overflow. */
@media(max-width:1160px){
  .nav-main{display:none;}
  /* Marketing CTAs collapse into the menu and the sticky bar, which already carries
     Book Demo on small screens; only the account buttons stay in the header. */
  .header-right .btn-primary:not(.btn-account),
  .header-right .btn-secondary:not(.btn-account),
  .header-right .btn-demo:not(.btn-account){display:none;}
  .hamburger{display:flex;}
}

.mobile-menu{
  position:fixed;inset:0;z-index:200;background:rgba(10,14,13,.4);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  overflow:hidden;
}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-panel{
  position:absolute;top:0;right:0;height:100%;width:min(340px,88%);background:#fff;
  padding:20px;overflow-y:auto;transform:translateX(20px);transition:transform .25s ease;
  display:flex;flex-direction:column;gap:4px;
}
.mobile-menu.open .mobile-panel{transform:translateX(0);}
.mobile-panel .mclose{align-self:flex-end;width:38px;height:38px;border-radius:var(--r-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:10px;}
.mobile-panel details{border-bottom:1px solid var(--border);}
.mobile-panel summary{padding:14px 4px;font-weight:700;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;}
.mobile-panel summary::-webkit-details-marker{display:none;}
.mobile-panel a.plain{display:block;padding:14px 4px;font-weight:700;font-size:15px;border-bottom:1px solid var(--border);}
.mobile-panel .sub-links{padding:0 4px 14px;display:flex;flex-direction:column;gap:2px;}
.mobile-panel .sub-links a{padding:8px 8px;border-radius:var(--r-sm);font-size:14px;color:var(--text-muted);font-weight:600;}
.mobile-panel .mob-cta{margin-top:16px;display:flex;flex-direction:column;gap:10px;}

.sticky-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--border);padding:10px 14px;
  gap:10px;box-shadow:0 -8px 24px rgba(10,14,13,.08);
}
/* Matches the nav collapse above: once the header CTAs are hidden, the sticky bar carries them. */
@media(max-width:1160px){.sticky-cta{display:flex;}body{padding-bottom:70px;}}
.sticky-cta .btn{flex:1;}

/* ---------- Brand meaning strip ---------- */
.brand-strip{
  padding:38px 0 4px;text-align:center;position:relative;
  background:radial-gradient(480px 160px at 50% 0%, var(--green-50), transparent 70%);
  animation:brandFadeIn .85s cubic-bezier(.16,1,.3,1) both;
}
@keyframes brandFadeIn{
  from{opacity:0;transform:translateY(-14px);}
  to{opacity:1;transform:translateY(0);}
}
.brand-meaning{
  display:inline-flex;gap:0;align-items:center;flex-wrap:wrap;justify-content:center;
  font-size:13px;font-weight:700;color:var(--ink-600);
  background:#fff;border:1px solid var(--green-100);
  padding:8px 10px 8px 8px;border-radius:var(--r-full);margin-bottom:22px;
  box-shadow:var(--shadow-glow);
}
.brand-meaning .chip{
  display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;
  opacity:0;animation:chipIn .6s ease both;
}
.brand-meaning .chip:nth-child(1){animation-delay:.15s;}
.brand-meaning .chip:nth-child(3){animation-delay:.32s;}
@keyframes chipIn{
  from{opacity:0;transform:translateY(-6px) scale(.9);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
.brand-meaning .chip .ic{
  width:26px;height:26px;border-radius:50%;flex:none;
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:11.5px;font-weight:800;font-family:var(--font-sans);
}
.brand-meaning .chip .ic svg{width:14px;height:14px;}
.brand-meaning .chip .ic.ic-green{
  background:linear-gradient(155deg,var(--green-400),var(--green-700));
  animation:pulseGreen 2.4s ease-in-out infinite;
}
.brand-meaning .chip .ic.ic-saffron{
  background:linear-gradient(155deg,var(--saffron-300),var(--saffron-700));
  animation:pulseSaffron 2.4s ease-in-out .3s infinite;
}
@keyframes pulseGreen{
  0%,100%{box-shadow:0 4px 10px -3px rgba(14,82,57,.55),0 0 0 0 rgba(21,148,99,.45);}
  50%{box-shadow:0 4px 10px -3px rgba(14,82,57,.55),0 0 0 6px rgba(21,148,99,0);}
}
@keyframes pulseSaffron{
  0%,100%{box-shadow:0 4px 10px -3px rgba(179,95,0,.5),0 0 0 0 rgba(255,153,51,.45);}
  50%{box-shadow:0 4px 10px -3px rgba(179,95,0,.5),0 0 0 6px rgba(255,153,51,0);}
}
.brand-meaning .c-green{color:var(--green-600);font-weight:800;}
.brand-meaning .c-saffron{color:var(--saffron-600);font-weight:800;}
.brand-meaning .sep{width:1px;align-self:stretch;background:var(--green-100);margin:0 2px;}
.brand-tagline{
  font-family:var(--font-sans);
  font-size:clamp(19px,2.6vw,29px);font-weight:800;letter-spacing:-.015em;
  color:var(--ink-900);
  position:relative;display:inline-block;padding-bottom:20px;
}
/* The tagline used to run a shimmering gradient on "Sarthi"; it now takes the same
   flat orange as every other instance so the wordmark reads identically site-wide. */
@media (prefers-reduced-motion: reduce){
  .brand-strip,.brand-meaning .chip,.brand-meaning .chip .ic{animation:none;opacity:1;}
}
.brand-tagline::after{
  content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:64px;height:3px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--green-500),var(--green-300));
}

/* On a phone the two definitions cannot sit side by side without wrapping badly,
   so stack them into a tidy card with a horizontal rule between. */
@media(max-width:700px){
  .brand-strip{padding:24px 0 0;}
  .brand-meaning{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;gap:0;
    border-radius:var(--r-lg);
    padding:6px 8px;margin-bottom:18px;
    text-align:left;
  }
  .brand-meaning .chip{
    padding:9px 6px;gap:10px;font-size:13px;line-height:1.35;
    align-items:flex-start;
  }
  .brand-meaning .chip .ic{width:28px;height:28px;margin-top:1px;}
  /* equal label column so both "=" definitions line up */
  .brand-meaning .chip b{display:inline-block;min-width:48px;}
  .brand-meaning .sep{
    width:auto;height:1px;align-self:stretch;margin:0 6px;
    background:var(--green-100);
  }
  .brand-tagline{font-size:19px;padding-bottom:16px;}
  .brand-tagline::after{width:52px;}
}

/* ---------- Hero ---------- */
.hero{
  padding:56px 0 90px;
  background:
    radial-gradient(700px 380px at 85% -10%, var(--green-100), transparent 60%),
    linear-gradient(180deg,#fff, #fff);
  overflow:hidden;
}
.hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;}
@media(max-width:980px){.hero .container{grid-template-columns:1fr;gap:44px;}}
.hero h1{margin:18px 0 20px;color:var(--ink-900);}
.hero h1 .accent{
  background:linear-gradient(100deg,var(--green-600),var(--green-400));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{max-width:520px;margin-bottom:30px;}

/* Dashboard mockup */
.mock-wrap{position:relative;}
.mock-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.mock-topbar{
  display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border);
  background:var(--ink-50);
}
.mock-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-200);}
.mock-topbar .title{margin-left:8px;font-size:12.5px;font-weight:700;color:var(--text-muted);}
.mock-body{display:grid;grid-template-columns:190px 1fr;min-height:360px;}
@media(max-width:520px){.mock-body{grid-template-columns:1fr;}.mock-sidebar{display:none;}}
.mock-sidebar{border-right:1px solid var(--border);padding:14px 10px;background:#fbfcfb;}
.mock-side-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  font-size:12.5px;font-weight:700;color:var(--ink-600);margin-bottom:2px;
}
.mock-side-item .dot{width:7px;height:7px;border-radius:50%;background:var(--ink-200);}
.mock-side-item.active{background:var(--green-50);color:var(--green-700);}
.mock-side-item.active .dot{background:var(--green-500);}
.mock-main{padding:16px;}
.mock-chat{display:flex;flex-direction:column;gap:10px;}
.bubble{
  max-width:78%;padding:10px 13px;border-radius:14px;font-size:13px;line-height:1.45;
}
.bubble.in{background:var(--ink-50);border:1px solid var(--border);border-bottom-left-radius:4px;align-self:flex-start;}
.bubble.out{background:var(--green-500);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;}
.bubble .time{display:block;margin-top:4px;font-size:10px;opacity:.6;}

.float-card{
  position:absolute;background:#fff;border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-md);padding:11px 14px;display:flex;align-items:center;gap:10px;
  font-size:12.5px;font-weight:700;color:var(--ink-800);animation:float 5s ease-in-out infinite;
}
.float-card .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none;}
.float-card .ic svg{width:14px;height:14px;}
.float-card small{display:block;font-weight:600;color:var(--text-muted);font-size:10.5px;margin-top:1px;}
.fc-1{top:-6%;left:-10%;animation-delay:.2s;}
.fc-2{bottom:10%;left:-12%;animation-delay:1.1s;}
.fc-3{top:34%;right:-11%;animation-delay:.6s;}
@media(max-width:640px){.float-card{display:none;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}

/* ---------- Trust bar ---------- */
.trustbar{padding:40px 0 70px;border-top:1px solid var(--border);}
.trustbar .container>p{text-align:center;font-weight:700;font-size:14px;color:var(--text-muted);margin-bottom:26px;}
.trust-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
@media(max-width:980px){.trust-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
.trust-item{
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:18px 8px;border:1px solid var(--border);border-radius:var(--r-md);background:#fff;
}
.trust-item .ic{width:36px;height:36px;border-radius:10px;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center;}
.trust-item .ic svg{width:18px;height:18px;}
.trust-item span{font-size:12.5px;font-weight:700;color:var(--ink-700);}

/* ---------- Generic section paddings ---------- */
.section{padding:96px 0;}
.section.tight{padding:72px 0;}
.section.soft{background:var(--bg-soft);}
.section.dark{background:var(--bg-dark);color:var(--text-on-dark);}
.section.dark .text-muted,.section.dark .lede{color:var(--text-on-dark-muted);}
.section.dark h2,.section.dark h3{color:#fff;}

/* ---------- Problem section ---------- */
.problem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px;}
@media(max-width:980px){.problem-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.problem-grid{grid-template-columns:1fr;}}
.problem-card{
  padding:26px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;
  transition:transform .2s ease, box-shadow .2s ease;
}
.problem-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.problem-card .ic{width:42px;height:42px;border-radius:11px;background:#FDEEEC;color:var(--red-500);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.problem-card .ic svg{width:20px;height:20px;}
.problem-card h4{font-size:16.5px;margin-bottom:8px;}
.problem-card p{font-size:14px;color:var(--text-muted);line-height:1.6;}

.transform{
  display:grid;grid-template-columns:1fr auto 1fr;gap:26px;align-items:center;
  border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;background:#fff;
}
@media(max-width:760px){.transform{grid-template-columns:1fr;}.transform .arrow{transform:rotate(90deg);margin:0 auto;}}
.transform .col h5{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;margin-bottom:14px;}
.transform .before h5{color:var(--red-500);}
.transform .after h5{color:var(--green-600);}
.transform li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14.5px;font-weight:600;color:var(--ink-700);border-bottom:1px dashed var(--border);}
.transform li:last-child{border-bottom:none;}
.transform li svg{width:16px;height:16px;flex:none;}
.transform .before li svg{color:var(--red-500);}
.transform .after li svg{color:var(--green-500);}
.transform .arrow{width:40px;height:40px;border-radius:50%;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center;}
.transform .arrow svg{width:20px;height:20px;}

/* ---------- Journey ---------- */
.journey{display:flex;flex-wrap:wrap;gap:0;justify-content:center;align-items:stretch;}
.journey .step{
  display:flex;flex-direction:column;align-items:center;text-align:center;width:150px;padding:10px;
}
.journey .step .n{
  width:52px;height:52px;border-radius:50%;background:var(--ink-900);color:#fff;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-shadow:var(--shadow-md);
}
.journey .step .n svg{width:22px;height:22px;}
.journey .step.hi .n{background:linear-gradient(155deg,var(--green-400),var(--green-700));}
.journey .step b{font-size:13px;}
.journey .step small{font-size:11.5px;color:var(--text-muted);margin-top:3px;}
.journey .connector{width:34px;align-self:center;height:2px;background:repeating-linear-gradient(90deg,var(--ink-200) 0 6px, transparent 6px 10px);margin-top:-42px;}
@media(max-width:900px){.journey{flex-direction:column;}.journey .connector{display:none;}.journey .step{width:100%;flex-direction:row;text-align:left;gap:14px;}.journey .step .n{margin-bottom:0;flex:none;}}

/* ---------- Feature (alternating) ---------- */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.feature-row + .feature-row{margin-top:110px;}
@media(max-width:980px){.feature-row{grid-template-columns:1fr;gap:36px;}.feature-row.rev .visual{order:-1;}}
.feature-row.rev{direction:rtl;}
.feature-row.rev>*{direction:ltr;}
ul.checklist{margin-top:22px;display:flex;flex-direction:column;gap:12px;}
ul.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;font-weight:600;color:var(--ink-700);}
ul.checklist svg{width:19px;height:19px;flex:none;color:var(--green-500);margin-top:1px;}
/* On a dark section the list would otherwise inherit the light-theme ink and
   render near-black on near-black. */
.section.dark .feature-copy ul.checklist li{color:var(--text-on-dark);}
.feature-copy h2{margin:14px 0 14px;}
.visual{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow-lg);background:#fff;
}

/* Inbox mock */
.inbox-mock{display:grid;grid-template-columns:180px 1fr 210px;min-height:360px;}
@media(max-width:640px){.inbox-mock{grid-template-columns:1fr;}.inbox-list,.inbox-profile{display:none;}}
.inbox-list{border-right:1px solid var(--border);background:#fbfcfb;}
.inbox-list .li{display:flex;gap:9px;padding:11px 12px;border-bottom:1px solid var(--border);align-items:center;}
.inbox-list .av{width:30px;height:30px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none;}
.inbox-list .li.active{background:var(--green-50);}
.inbox-list .t{font-size:12px;font-weight:700;}
.inbox-list .s{font-size:11px;color:var(--text-muted);}
.inbox-thread{padding:14px;display:flex;flex-direction:column;gap:10px;}
.inbox-thread .head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:4px;}
.inbox-thread .head b{font-size:13px;}
.tag-pill{font-size:10.5px;font-weight:800;padding:4px 9px;border-radius:var(--r-full);background:var(--green-50);color:var(--green-700);}
.inbox-profile{border-left:1px solid var(--border);padding:14px;background:#fbfcfb;}
.inbox-profile .row{display:flex;justify-content:space-between;font-size:11.5px;padding:7px 0;border-bottom:1px solid var(--border);color:var(--ink-600);}
.inbox-profile .row b{color:var(--ink-900);}

/* Broadcast mock */
.bcast-mock{padding:18px;}
.bcast-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.bcast-stat{border:1px solid var(--border);border-radius:var(--r-md);padding:12px;}
.bcast-stat b{font-size:19px;display:block;}
.bcast-stat span{font-size:11px;color:var(--text-muted);font-weight:700;}
.bcast-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.bcast-bar-row .lbl{width:80px;font-size:11.5px;font-weight:700;color:var(--ink-600);flex:none;}
.bcast-bar{flex:1;height:9px;border-radius:var(--r-full);background:var(--ink-100);overflow:hidden;}
.bcast-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--green-400),var(--green-600));border-radius:var(--r-full);}
.bcast-bar-row .pct{width:36px;text-align:right;font-size:11.5px;font-weight:800;flex:none;}

/* AI mock */
.ai-mock{background:#0E1512;border:1px solid #1F2B25;}
.ai-mock .mock-topbar{background:#111815;border-color:#1F2B25;}
.ai-mock .mock-topbar .title{color:#8FA69C;}
.ai-mock .mock-main{padding:18px;}
.ai-mock .bubble.in{background:#1B2420;border-color:#243029;color:#E9EDEB;}
.ai-flow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.ai-flow span{font-size:11px;font-weight:800;padding:7px 12px;border-radius:var(--r-full);background:rgba(31,174,118,.12);color:var(--green-300);border:1px solid rgba(31,174,118,.25);}
.ai-flow svg{width:12px;height:12px;vertical-align:middle;margin:0 2px;}

/* Automation builder */
.flow-mock{padding:22px;display:flex;flex-direction:column;align-items:center;gap:0;background:#fbfcfb;}
.flow-node{
  padding:12px 18px;border-radius:var(--r-md);border:1px solid var(--border);background:#fff;
  font-size:12.5px;font-weight:700;box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:8px;
  min-width:180px;justify-content:center;text-align:center;
}
.flow-node.start{background:var(--ink-900);color:#fff;border-color:var(--ink-900);}
.flow-node.decision{border-radius:var(--r-full);background:#FFF7E6;border-color:#F0DCA6;color:#8A6A15;}
.flow-line{width:2px;height:22px;background:var(--ink-200);}
.flow-branch{display:flex;gap:40px;margin-top:0;}
.flow-branch .b{display:flex;flex-direction:column;align-items:center;}
.flow-tag{font-size:10.5px;font-weight:800;color:var(--text-muted);margin:6px 0;}

/* CRM mock */
.crm-mock{padding:16px;}
.crm-pipeline{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;}
@media(max-width:640px){.crm-pipeline{grid-template-columns:repeat(3,1fr);}}
.crm-col{background:#fbfcfb;border:1px solid var(--border);border-radius:var(--r-md);padding:8px;}
.crm-col h6{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:8px;padding:0 4px;}
.crm-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:8px 9px;margin-bottom:7px;font-size:11px;font-weight:700;box-shadow:var(--shadow-sm);}
.crm-card .m{font-size:10px;color:var(--text-muted);font-weight:600;margin-top:3px;}

/* ---------- Integrations ---------- */
.integ-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
@media(max-width:900px){.integ-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.integ-grid{grid-template-columns:repeat(2,1fr);}}
.integ-item{
  border:1px solid var(--border);border-radius:var(--r-md);padding:20px 12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;transition:box-shadow .2s ease, transform .2s ease;
}
.integ-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.integ-item .ic{width:38px;height:38px;border-radius:10px;background:var(--ink-50);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:var(--ink-700);}
.integ-item span{font-size:12px;font-weight:700;color:var(--ink-700);}
.integ-cat{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin:34px 0 14px;}
.integ-cat:first-child{margin-top:0;}

/* ---------- Industries ---------- */
.industry-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:36px;}
.industry-tab{
  padding:10px 18px;border-radius:var(--r-full);border:1px solid var(--border);font-weight:700;font-size:13.5px;
  cursor:pointer;background:#fff;color:var(--ink-600);transition:all .15s ease;
}
.industry-tab.active{background:var(--ink-900);color:#fff;border-color:var(--ink-900);}
.industry-panel{display:none;border:1px solid var(--border);border-radius:var(--r-xl);padding:40px;background:#fff;}
.industry-panel.active{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;}
@media(max-width:760px){.industry-panel.active{grid-template-columns:1fr;padding:26px;}}
.industry-panel h3{margin-bottom:14px;}
.industry-panel ul{display:flex;flex-direction:column;gap:11px;}
.industry-panel ul li{display:flex;gap:10px;font-size:14px;font-weight:600;color:var(--ink-700);}
.industry-panel ul li svg{width:17px;height:17px;color:var(--green-500);flex:none;margin-top:2px;}
.industry-visual{border-radius:var(--r-lg);background:var(--green-50);padding:26px;display:flex;flex-direction:column;gap:10px;}

/* ---------- Why WaSarthi ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.pillars{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.pillars{grid-template-columns:1fr;}}
.pillar{padding:26px;border-radius:var(--r-lg);border:1px solid var(--border);background:#fff;}
.pillar .ic{width:42px;height:42px;border-radius:11px;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.pillar .ic svg{width:21px;height:21px;}
.pillar h4{font-size:16.5px;margin-bottom:8px;}
.pillar p{font-size:13.5px;color:var(--text-muted);line-height:1.6;}

/* ---------- Product demo tabs ---------- */
.demo-tabs{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:30px;}
.demo-tab{
  padding:10px 16px;border-radius:var(--r-full);font-weight:700;font-size:13.5px;cursor:pointer;
  color:var(--text-on-dark-muted);border:1px solid rgba(255,255,255,.14);
}
.demo-tab.active{background:#fff;color:var(--ink-900);border-color:#fff;}
.demo-panel{display:none;}
.demo-panel.active{display:block;}

/* ---------- Analytics ---------- */
.analytics-grid{display:grid;grid-template-columns:2fr 1fr;gap:18px;}
@media(max-width:900px){.analytics-grid{grid-template-columns:1fr;}}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px;}
@media(max-width:640px){.stat-row{grid-template-columns:1fr 1fr;}}
.stat-card{border:1px solid var(--border);border-radius:var(--r-md);padding:18px;background:#fff;}
.stat-card b{font-size:24px;display:block;}
.stat-card span{font-size:12px;color:var(--text-muted);font-weight:700;}
.demo-badge{display:inline-block;margin-bottom:14px;font-size:11px;font-weight:800;padding:5px 11px;border-radius:var(--r-full);background:#FFF7E6;color:#8A6A15;}
.chart-mock{height:170px;border:1px solid var(--border);border-radius:var(--r-md);padding:16px;display:flex;align-items:flex-end;gap:8px;background:#fff;}
.chart-mock i{display:block;flex:1;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--green-400),var(--green-600));}
.leaderboard{border:1px solid var(--border);border-radius:var(--r-md);padding:16px;background:#fff;}
.leaderboard .row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:700;}
.leaderboard .row:last-child{border:none;}

/* ---------- Security ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.sec-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.sec-grid{grid-template-columns:1fr;}}
.sec-item{padding:22px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);}
.sec-item .ic{width:38px;height:38px;border-radius:10px;background:rgba(31,174,118,.14);color:var(--green-300);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.sec-item .ic svg{width:19px;height:19px;}
.sec-item h4{font-size:14.5px;color:#fff;margin-bottom:6px;}
.sec-item p{font-size:12.5px;color:var(--text-on-dark-muted);line-height:1.55;}

/* ---------- Pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
@media(max-width:980px){.pricing-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  border:1px solid var(--border);border-radius:var(--r-xl);padding:28px 24px;background:#fff;
  display:flex;flex-direction:column;
}
.price-card.hi{border-color:var(--green-500);box-shadow:var(--shadow-glow);position:relative;}
.price-card .badge-pop{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--green-500);color:#fff;font-size:11px;font-weight:800;padding:5px 14px;border-radius:var(--r-full);
}
.price-card h4{font-size:17px;margin-bottom:6px;}
.price-card .desc{font-size:13px;color:var(--text-muted);margin-bottom:18px;}
.price-card .amount{font-size:34px;font-weight:800;letter-spacing:-.02em;}
.price-card .amount small{font-size:13px;font-weight:700;color:var(--text-muted);}
.price-card .period{font-size:12px;color:var(--text-muted);margin-bottom:20px;}
.price-card ul{display:flex;flex-direction:column;gap:10px;margin:20px 0 24px;flex:1;}
.price-card ul li{display:flex;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink-700);}
.price-card ul li svg{width:16px;height:16px;color:var(--green-500);flex:none;margin-top:2px;}
.pricing-note{
  margin-top:36px;padding:18px 20px;border-radius:var(--r-md);background:var(--ink-50);
  font-size:13px;color:var(--text-muted);display:flex;gap:12px;align-items:flex-start;
}
.pricing-note svg{width:18px;height:18px;flex:none;color:var(--ink-500);margin-top:1px;}

/* ---------- Billing toggle ---------- */
.billing-toggle{
  display:flex;justify-content:center;gap:4px;margin-bottom:32px;
  background:var(--ink-50);border:1px solid var(--border);border-radius:var(--r-full);
  padding:5px;width:fit-content;margin-left:auto;margin-right:auto;
}
.billing-toggle button{
  border:none;background:transparent;padding:9px 18px;border-radius:var(--r-full);
  font-size:13.5px;font-weight:700;color:var(--ink-600);cursor:pointer;font-family:inherit;
  display:flex;align-items:center;gap:7px;transition:background .15s ease,color .15s ease;
}
.billing-toggle button.active{background:#fff;color:var(--ink-900);box-shadow:var(--shadow-sm);}
.billing-toggle .save-tag{
  font-size:10px;font-weight:800;background:var(--green-100);color:var(--green-700);
  padding:2px 7px;border-radius:var(--r-full);
}
/* Three labelled options do not fit on a narrow phone, so let them share the row. */
@media(max-width:560px){
  .billing-toggle{width:100%;max-width:100%;flex-wrap:wrap;}
  .billing-toggle button{flex:1 1 0;min-width:0;justify-content:center;padding:9px 8px;font-size:12.5px;gap:4px;}
  .billing-toggle .save-tag{font-size:9px;padding:2px 5px;}
}
.pricing-model-note{
  max-width:700px;margin:28px auto 0;text-align:center;font-size:13.5px;color:var(--text-muted);line-height:1.65;
}

/* ---------- Savings calculator ---------- */
.savings-calc{max-width:760px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;background:#fff;}
.savings-slider-row label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-600);margin-bottom:14px;text-align:center;}
.savings-slider-row input[type="range"]{
  width:100%;height:6px;border-radius:var(--r-full);background:var(--ink-100);
  appearance:none;-webkit-appearance:none;outline:none;cursor:pointer;
}
.savings-slider-row input[type="range"]::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--green-500);border:3px solid #fff;box-shadow:0 2px 8px rgba(14,82,57,.4);cursor:pointer;
}
.savings-slider-row input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--green-500);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(14,82,57,.4);cursor:pointer;
}
.savings-slider-marks{display:flex;justify-content:space-between;font-size:11.5px;color:var(--text-muted);font-weight:700;margin-top:8px;}
.savings-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
@media(max-width:600px){.savings-result-grid{grid-template-columns:1fr;}}
.savings-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;text-align:center;}
.savings-card.hi{border-color:var(--green-400);background:var(--green-50);box-shadow:var(--shadow-glow);}
.savings-card b{display:block;font-size:26px;font-weight:800;color:var(--ink-900);margin-bottom:8px;}
.savings-card p{font-size:12px;color:var(--text-muted);line-height:1.5;margin-bottom:16px;}
.savings-callout{
  margin-top:22px;text-align:center;padding:18px;border-radius:var(--r-md);
  background:var(--ink-900);color:#fff;
}
.savings-callout b{display:block;font-size:17px;margin-bottom:5px;}
.savings-callout span{font-size:12.5px;color:var(--text-on-dark-muted);}

/* ---------- Message category breakdown ---------- */
.msg-cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
@media(max-width:820px){.msg-cat-grid{grid-template-columns:1fr;}}
.msg-cat-card{
  border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;background:#fff;
  display:flex;flex-direction:column;
}
.msg-cat-card .cat-head{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.msg-cat-card .cat-ic{
  width:38px;height:38px;flex:none;border-radius:var(--r-md);
  background:var(--green-50);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;
}
.msg-cat-card .cat-ic svg{width:19px;height:19px;}
.msg-cat-card .cat-head h4{font-size:17px;font-weight:800;letter-spacing:-.01em;}
.msg-cat-card>p{font-size:13.5px;color:var(--text-muted);line-height:1.6;margin-bottom:20px;flex:1;}

.cat-breakdown{border:1px solid var(--border);border-radius:var(--r-md);padding:4px 16px;background:#fbfcfb;}
.cat-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--border);
}
.cat-row:last-child{border-bottom:none;}
.cat-row span{font-size:13px;color:var(--text-muted);font-weight:600;}
.cat-row b{font-size:14px;font-weight:700;color:var(--ink-800);}
.cat-row b.is-free{color:var(--green-600);}
.cat-row.is-total span{color:var(--ink-900);font-weight:700;}
.cat-row.is-total b{font-size:20px;font-weight:800;color:var(--ink-900);}

.msg-cat-card .cat-example{
  margin-top:16px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--green-50);border:1px solid var(--green-100);
  font-size:12.5px;font-style:italic;color:var(--ink-600);line-height:1.5;
}
.msg-cat-card .cat-example span{
  display:block;font-style:normal;font-weight:800;font-size:10.5px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--green-700);margin-bottom:4px;
}

.model-explainer{
  margin-top:24px;padding:30px;border-radius:var(--r-lg);
  background:var(--green-50);border:1px solid var(--green-100);
}
.model-explainer h3{font-size:18px;font-weight:800;margin-bottom:12px;color:var(--ink-900);}
.model-explainer p{font-size:14px;color:var(--ink-600);line-height:1.7;margin-bottom:12px;}
.model-explainer p b{color:var(--green-700);font-weight:800;}
.meta-rates-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:8px;
  padding:11px 20px;border-radius:var(--r-full);
  background:#fff;border:1px solid var(--ink-200);
  font-size:13.5px;font-weight:700;color:var(--ink-800);
  transition:border-color .18s ease, transform .18s ease;
}
.meta-rates-link:hover{border-color:var(--green-400);transform:translateY(-1px);}
.meta-rates-link svg{width:16px;height:16px;color:var(--green-600);flex:none;}
.meta-rates-link svg.ext{width:13px;height:13px;color:var(--ink-400);}

/* ---------- Features bundle grid ---------- */
.bundle-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:900px){.bundle-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.bundle-grid{grid-template-columns:1fr 1fr;}}
.bundle-item{
  display:flex;align-items:center;gap:10px;padding:16px;border:1px solid var(--border);border-radius:var(--r-md);
  background:#fff;font-size:13px;font-weight:700;color:var(--ink-700);
}
.bundle-item svg{width:19px;height:19px;flex:none;color:var(--green-500);}

/* ---------- Industry mini grid ---------- */
.industry-mini-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;}
@media(max-width:900px){.industry-mini-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.industry-mini-grid{grid-template-columns:1fr 1fr;}}
.industry-mini-grid a{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:20px 10px;border:1px solid var(--border);border-radius:var(--r-md);
  font-size:12.5px;font-weight:700;color:var(--ink-700);background:#fff;
  transition:transform .18s ease,box-shadow .18s ease;
}
.industry-mini-grid a:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.industry-mini-grid svg{width:22px;height:22px;color:var(--green-600);}

.no-markup-banner{
  display:flex;gap:16px;align-items:flex-start;margin-top:36px;padding:22px 24px;
  border-radius:var(--r-lg);background:var(--green-50);border:1px solid var(--green-100);
}
.no-markup-banner .ic{
  width:36px;height:36px;border-radius:50%;flex:none;background:var(--green-500);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:0 6px 14px -4px rgba(14,82,57,.5);
}
.no-markup-banner .ic svg{width:18px;height:18px;}
.no-markup-banner b{font-size:15px;color:var(--green-700);display:block;margin-bottom:5px;}
.no-markup-banner p{font-size:13.5px;color:var(--ink-600);line-height:1.6;}

.ai-custom-card{
  margin-top:36px;border-radius:var(--r-xl);background:var(--ink-900);overflow:hidden;
  display:grid;grid-template-columns:1.6fr 1fr;gap:0;position:relative;
}
.ai-custom-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(400px 220px at 90% 10%, rgba(31,174,118,.22), transparent 65%);
}
.ai-custom-copy,.ai-custom-price{position:relative;z-index:1;padding:36px;}
.ai-custom-price{
  background:rgba(255,255,255,.04);border-left:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
}
.ai-custom-price span{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--text-on-dark-muted);text-transform:uppercase;}
.ai-custom-price b{font-size:26px;color:#fff;font-weight:800;}
.ai-custom-price small{font-size:12.5px;color:var(--text-on-dark-muted);margin-bottom:14px;}
@media(max-width:760px){
  .ai-custom-card{grid-template-columns:1fr;}
  .ai-custom-price{border-left:none;border-top:1px solid rgba(255,255,255,.08);align-items:stretch;}
}

.calc-box{border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;background:var(--bg-soft);margin-top:60px;}
.calc-grid{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:20px;align-items:end;}
@media(max-width:860px){.calc-grid{grid-template-columns:1fr 1fr;}}
.field label{display:block;font-size:12.5px;font-weight:700;color:var(--ink-600);margin-bottom:8px;}
.field input{
  width:100%;padding:11px 13px;border:1px solid var(--ink-200);border-radius:var(--r-sm);font-size:14px;font-weight:700;
  font-family:inherit;
}
.calc-result{
  background:var(--ink-900);color:#fff;border-radius:var(--r-md);padding:16px 18px;text-align:center;min-width:150px;
}
.calc-result b{font-size:22px;display:block;}
.calc-result span{font-size:11px;color:var(--text-on-dark-muted);font-weight:700;}

/* ---------- Comparison table ---------- */
.compare-highlights{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:22px;
}
.compare-highlights span{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--green-700);
  background:var(--green-50);border:1px solid var(--green-100);padding:8px 14px;border-radius:var(--r-full);
}
.compare-highlights svg{width:15px;height:15px;flex:none;}
.compare-footnote{text-align:center;font-size:12px;color:var(--text-muted);margin-top:16px;}
.compare-wrap{overflow-x:auto;overflow-y:visible;border:1px solid var(--border);border-radius:var(--r-lg);padding-top:16px;background:#fff;}
table.compare{width:100%;border-collapse:separate;border-spacing:0;min-width:640px;}
table.compare th,table.compare td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border);font-size:13.5px;}
table.compare th{background:var(--ink-50);font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;}
table.compare tr:last-child td{border-bottom:none;}
table.compare svg.yes{width:17px;height:17px;color:var(--green-500);}
table.compare svg.no{width:17px;height:17px;color:var(--ink-300);}
table.compare .varies-pill{display:inline-block;font-size:11px;font-weight:700;color:var(--ink-500);background:var(--ink-50);padding:3px 10px;border-radius:var(--r-full);}

/* Highlighted "recommended" WaSarthi column */
table.compare th.brand,table.compare td.brand{
  background:linear-gradient(180deg,var(--green-50),#fff 60%);
  border-left:2px solid var(--green-400);border-right:2px solid var(--green-400);
  text-align:center;position:relative;
}
table.compare thead th.brand{
  border-top:2px solid var(--green-400);border-radius:14px 14px 0 0;padding-top:26px;position:relative;overflow:visible;
}
table.compare tbody tr:last-child td.brand{border-bottom:2px solid var(--green-400);border-radius:0 0 14px 14px;}
.compare-crown{
  position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  background:linear-gradient(135deg,var(--green-500),var(--green-700));color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  padding:6px 14px;border-radius:var(--r-full);box-shadow:0 8px 18px -5px rgba(14,82,57,.55);
}
.compare-crown svg{width:12px;height:12px;}
.compare-brand-name{display:flex;align-items:center;justify-content:center;gap:6px;font-size:14.5px;font-weight:800;color:var(--green-700);}
.compare-brand-name svg{width:15px;height:15px;}
table.compare td.brand{font-weight:700;}
table.compare td.brand svg.yes{
  background:var(--green-500);color:#fff;border-radius:50%;padding:4px;
  width:22px;height:22px;box-sizing:border-box;box-shadow:0 4px 10px -3px rgba(14,82,57,.5);
}
table.compare thead th:not(.brand){text-align:left;}

/* ---------- Testimonials ---------- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{border:1px dashed var(--ink-200);border-radius:var(--r-lg);padding:30px;text-align:center;color:var(--text-muted);background:#fbfcfb;}
.testi-card .ic{width:40px;height:40px;border-radius:50%;background:var(--ink-100);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;}
.testi-card .ic svg{width:19px;height:19px;color:var(--ink-400);}
.testi-card p{font-size:13.5px;font-weight:600;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq-item{border:1px solid var(--border);border-radius:var(--r-md);background:#fff;overflow:hidden;}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 20px;cursor:pointer;
  font-weight:700;font-size:15px;
}
.faq-q svg{width:18px;height:18px;flex:none;color:var(--ink-400);transition:transform .2s ease;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;}
.faq-item.open .faq-a{max-height:260px;}
.faq-a-in{padding:0 20px 18px;font-size:14px;color:var(--text-muted);line-height:1.6;}

/* ---------- Automation flow ----------
   The path a single enquiry takes: which platform it lands from, what the platform
   does with it automatically, and where it ends up. Laid out vertically so the order
   reads the same on a phone as on a desktop. */
.autoflow{max-width:940px;margin:0 auto;display:flex;flex-direction:column;align-items:stretch;}
.af-label{
  display:block;text-align:center;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-300);margin-bottom:16px;
}

/* Stage 1 — where leads come from */
.af-sources{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.af-src{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  font-size:13px;font-weight:600;color:var(--text-on-dark);
}
.af-src .ic{
  width:30px;height:30px;flex:none;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(31,174,118,.16);color:var(--green-300);
}
.af-src .ic svg{width:16px;height:16px;min-width:16px;flex:none;stroke:currentColor;}

/* Connector, in the same language as the workflow canvas on the automation page:
   a marching dashed line with a packet running down it, so the flow reads as
   executing rather than drawn. */
.af-link{position:relative;height:44px;flex:none;}
.af-link::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  /* One dash period per tile, so repeat-y joins it seamlessly at any height. */
  background-image:linear-gradient(180deg,var(--green-400) 0 7px,transparent 7px 16px);
  background-size:2px 16px;background-repeat:repeat-y;
  opacity:.6;animation:afMarch 1.1s linear infinite;
}
@keyframes afMarch{from{background-position:0 0;}to{background-position:0 16px;}}
.af-link::after{
  content:'';position:absolute;left:50%;top:-7px;width:7px;height:7px;margin-left:-3.5px;
  border-radius:50%;background:var(--green-300);
  box-shadow:0 0 10px rgba(79,200,150,.75);
  animation:afPacket 2.6s linear infinite;
}
/* Animating top, not transform, so one keyframe set covers both connector heights. */
@keyframes afPacket{
  0%{top:-7px;opacity:0;}
  14%{opacity:1;}
  86%{opacity:1;}
  100%{top:100%;opacity:0;}
}
.af-link.af-d1::before{animation-delay:.4s;}
.af-link.af-d2::before{animation-delay:.8s;}
.af-link.af-d1::after{animation-delay:.65s;}
.af-link.af-d2::after{animation-delay:1.3s;}

.af-hub{
  position:relative;text-align:center;padding:22px 24px;border-radius:var(--r-lg);
  background:linear-gradient(160deg,rgba(31,174,118,.18),rgba(255,255,255,.03));
  border:1px solid rgba(31,174,118,.4);
}
.af-hub img{height:30px;width:auto;display:block;margin:0 auto 10px;}
.af-hub b{display:block;font-size:17px;color:#fff;margin-bottom:4px;}
.af-hub span{font-size:13px;color:var(--text-on-dark-muted);}
.af-hub::after{
  content:'';position:absolute;inset:-5px;border-radius:calc(var(--r-lg) + 5px);
  pointer-events:none;border:1px solid rgba(31,174,118,.45);
  animation:afRing 2.8s ease-in-out infinite;
}
@keyframes afRing{
  0%,100%{opacity:.25;transform:scale(1);}
  50%{opacity:.75;transform:scale(1.02);}
}

/* Stage 3 — what the platform does, in order */
.af-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.af-step-card{
  position:relative;padding:18px 16px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
}
.af-step-card .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--green-600);color:#fff;font-size:12.5px;font-weight:800;margin-bottom:11px;
}
.af-step-card b{display:block;font-size:14.5px;color:#fff;margin-bottom:5px;line-height:1.35;}
.af-step-card p{font-size:12.5px;color:var(--text-on-dark-muted);line-height:1.55;}
/* Arrow between the steps, drawn only where there is a next card to point at. */
.af-steps .af-step-card:not(:last-child)::after{
  content:'';position:absolute;top:50%;right:-11px;width:8px;height:8px;
  border-top:2px solid rgba(255,255,255,.28);border-right:2px solid rgba(255,255,255,.28);
  transform:translateY(-50%) rotate(45deg);
}

/* Drip campaign — what happens to the leads that do not close on the first pass.
   Saffron rather than green: this is the "not yet" path, and it loops back. */
.af-drip{
  padding:22px 24px;border-radius:var(--r-lg);
  background:rgba(255,153,51,.1);border:1px solid rgba(255,153,51,.34);
}
.af-drip-head{display:flex;align-items:center;gap:11px;margin-bottom:16px;}
.af-drip-head .ic{
  width:34px;height:34px;flex:none;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,153,51,.18);color:var(--saffron-300);
}
.af-drip-head .ic svg{width:17px;height:17px;min-width:17px;flex:none;stroke:currentColor;}
.af-drip-head b{display:block;font-size:15.5px;color:#fff;}
.af-drip-head span{display:block;font-size:12.5px;color:var(--text-on-dark-muted);margin-top:2px;}

.af-timeline{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px;}
.af-day{
  flex:1 1 0;min-width:126px;
  padding:12px 13px;border-radius:var(--r-md);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,153,51,.26);
  /* Each stop lights up in turn, so the row reads as a schedule rather than a list. */
  animation:afDrip 6s ease-in-out infinite;
}
.af-day:nth-child(2){animation-delay:.6s;}
.af-day:nth-child(3){animation-delay:1.2s;}
.af-day:nth-child(4){animation-delay:1.8s;}
.af-day:nth-child(5){animation-delay:2.4s;}
.af-day em{
  display:block;font-style:normal;font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--saffron-300);margin-bottom:5px;
}
.af-day span{display:block;font-size:12.5px;color:var(--text-on-dark);line-height:1.45;}
.af-day.is-festival{background:rgba(255,153,51,.16);border-color:rgba(255,153,51,.5);}
@keyframes afDrip{
  0%,18%,100%{border-color:rgba(255,153,51,.26);box-shadow:0 0 0 0 rgba(255,153,51,0);}
  8%{border-color:rgba(255,153,51,.75);box-shadow:0 0 0 4px rgba(255,153,51,.12);}
}
.af-drip-loop{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:12.5px;font-weight:700;color:var(--saffron-300);
}
.af-drip-loop svg{width:15px;height:15px;min-width:15px;flex:none;stroke:currentColor;}

/* Stage 4 — the outcome */
.af-win{
  position:relative;overflow:hidden;text-align:center;
  padding:34px 28px;border-radius:var(--r-xl);
  background:linear-gradient(160deg,rgba(255,153,51,.16),rgba(31,174,118,.1) 70%,rgba(255,255,255,.03));
  border:1px solid rgba(255,153,51,.4);
}
.af-trophy{position:relative;display:inline-block;margin-bottom:14px;}
.af-trophy svg{width:64px;height:64px;display:block;animation:afFloat 3.6s ease-in-out infinite;}
/* Halo behind the cup, so the trophy reads as a moment rather than an icon. */
.af-trophy::before{
  content:'';position:absolute;left:50%;top:50%;width:96px;height:96px;margin:-48px 0 0 -48px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,153,51,.4),transparent 68%);
  animation:afGlow 3.6s ease-in-out infinite;
}
@keyframes afFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}
@keyframes afGlow{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:.9;transform:scale(1.12);}
}
.af-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--saffron-300);opacity:0;}
.af-spark.s1{left:-14px;top:6px;animation:afSpark 3.6s ease-in-out infinite;}
.af-spark.s2{right:-12px;top:18px;animation:afSpark 3.6s ease-in-out infinite .7s;}
.af-spark.s3{left:2px;top:-12px;animation:afSpark 3.6s ease-in-out infinite 1.4s;}
@keyframes afSpark{
  0%,70%,100%{opacity:0;transform:scale(.4);}
  20%{opacity:1;transform:scale(1);}
  45%{opacity:0;transform:scale(.5);}
}
.af-win b{display:block;font-size:clamp(20px,2.2vw,26px);font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.01em;}
.af-win .af-win-sub{font-size:14px;color:var(--text-on-dark-muted);line-height:1.6;max-width:520px;margin:0 auto;}

.af-foot{
  margin-top:26px;text-align:center;font-size:13px;color:var(--text-on-dark-muted);
  padding-top:20px;border-top:1px solid rgba(255,255,255,.1);
}

/* ---------- Flow execution ----------
   One 9s pass down the whole flow: each block takes its turn in the order a real
   lead moves through it, so the sequence is watched rather than read. */
.af-src,.af-hub,.af-step-card{animation:afRun 9s ease-in-out infinite;}
.af-src:nth-child(2){animation-delay:.12s;}
.af-src:nth-child(3){animation-delay:.24s;}
.af-src:nth-child(4){animation-delay:.36s;}
.af-src:nth-child(5){animation-delay:.48s;}
.af-src:nth-child(6){animation-delay:.6s;}
.af-hub{animation-delay:1.3s;}
.af-step-card:nth-child(1){animation-delay:2.3s;}
.af-step-card:nth-child(2){animation-delay:2.9s;}
.af-step-card:nth-child(3){animation-delay:3.5s;}
.af-step-card:nth-child(4){animation-delay:4.1s;}
.af-win{animation:afRunWarm 9s ease-in-out infinite 5.8s;}
@keyframes afRun{
  0%,9%,100%{box-shadow:0 0 0 0 rgba(31,174,118,0);}
  3%{box-shadow:0 0 0 3px rgba(31,174,118,.3);}
}
@keyframes afRunWarm{
  0%,9%,100%{box-shadow:0 0 0 0 rgba(255,153,51,0);}
  3%{box-shadow:0 0 0 3px rgba(255,153,51,.34);}
}
/* Each arrow lights just after its own card, so the hand-off is visible. */
.af-steps .af-step-card:not(:last-child)::after{animation:afArrow 9s ease-in-out infinite;}
.af-steps .af-step-card:nth-child(1)::after{animation-delay:2.6s;}
.af-steps .af-step-card:nth-child(2)::after{animation-delay:3.2s;}
.af-steps .af-step-card:nth-child(3)::after{animation-delay:3.8s;}
@keyframes afArrow{
  0%,10%,100%{border-top-color:rgba(255,255,255,.28);border-right-color:rgba(255,255,255,.28);}
  4%{border-top-color:var(--green-400);border-right-color:var(--green-400);}
}

@media(max-width:900px){
  .af-steps{grid-template-columns:1fr 1fr;}
  .af-steps .af-step-card:not(:last-child)::after{display:none;}
}
@media(max-width:640px){
  .af-sources{grid-template-columns:1fr 1fr;gap:10px;}
  .af-src{font-size:12px;padding:11px 12px;gap:8px;}
  .af-src .ic{width:26px;height:26px;}
  .af-steps{grid-template-columns:1fr;}
  .af-link{height:34px;}
  .af-trophy svg{width:54px;height:54px;}
  .af-drip{padding:18px 16px;}
  .af-timeline{gap:8px;}
  .af-day{flex:1 1 calc(50% - 4px);min-width:0;padding:10px 11px;}
}
@media (prefers-reduced-motion: reduce){
  .af-link::after{animation:none;opacity:0;}
  .af-link::before,.af-hub::after{animation:none;}
  .af-src,.af-hub,.af-step-card,.af-win{animation:none;}
  .af-steps .af-step-card:not(:last-child)::after{animation:none;}
  .af-trophy svg,.af-trophy::before,.af-spark,.af-day{animation:none;}
  .af-spark{opacity:0;}
}

/* ---------- Demo band ----------
   Repeatable Book-a-Demo prompt dropped into pages that otherwise end without one.
   Saffron-tinted so it reads as the demo CTA wherever it appears. */
.demo-band{
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:30px 34px;border-radius:var(--r-xl);
  background:linear-gradient(120deg,var(--saffron-100),#fff 62%);
  border:1px solid var(--saffron-300);
}
.demo-band h3{margin-bottom:6px;}
.demo-band p{font-size:14px;color:var(--text-muted);max-width:540px;line-height:1.6;}
.demo-band .cta-row{flex:none;}
.section.dark .demo-band{
  background:linear-gradient(120deg,rgba(255,153,51,.14),rgba(255,255,255,.04) 62%);
  border-color:rgba(255,153,51,.32);
}
.section.dark .demo-band h3{color:#fff;}
.section.dark .demo-band p{color:var(--text-on-dark-muted);}
@media(max-width:820px){
  .demo-band{padding:24px;flex-direction:column;align-items:flex-start;gap:20px;}
  .demo-band .cta-row{width:100%;}
  .demo-band .cta-row .btn{flex:1 1 auto;justify-content:center;}
}

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;border-radius:var(--r-xl);overflow:hidden;background:var(--ink-900);
  padding:76px 40px;text-align:center;
}
.final-cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(500px 260px at 20% 0%, rgba(31,174,118,.25), transparent 60%),
             radial-gradient(500px 260px at 80% 100%, rgba(31,174,118,.18), transparent 60%);
}
.final-cta>*{position:relative;z-index:1;}
.final-cta h2{color:#fff;margin-bottom:14px;}
.final-cta .lede{color:var(--text-on-dark-muted);max-width:560px;margin:0 auto 32px;}
.final-cta .cta-row{justify-content:center;}
.mini-bubbles{display:flex;justify-content:center;gap:10px;margin-top:34px;flex-wrap:wrap;}
.mini-bubbles span{
  font-size:11.5px;font-weight:700;padding:8px 14px;border-radius:var(--r-full);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:#fff;
  animation:float 4.5s ease-in-out infinite;
}

/* ---------- Elementor native-widget compatibility ---------- */
/* The design system styles real elements (h2.h2, .lede, .eyebrow). Elementor's own
   widgets wrap their output, so a widget's custom class lands on the wrapper, not
   the element. These rules re-point the same styles at Elementor's markup, which is
   what lets section copy be edited visually in the builder instead of inside an
   HTML widget. Values are mirrored from the Typography scale above — keep in sync. */
.elementor-widget-heading.is-eyebrow .elementor-heading-title{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-strong);background:var(--accent-soft);
  padding:7px 14px;border-radius:var(--r-full);
}
.elementor-widget-heading.is-eyebrow .elementor-heading-title::before{
  content:'';width:6px;height:6px;border-radius:50%;background:var(--green-500);flex:none;
}
.section.dark .elementor-widget-heading.is-eyebrow .elementor-heading-title,
.is-on-dark .elementor-widget-heading.is-eyebrow .elementor-heading-title{
  color:var(--green-300);background:rgba(31,174,118,.12);border:1px solid rgba(31,174,118,.25);
}
.elementor-widget-heading.is-h2 .elementor-heading-title{
  font-size:clamp(28px,3.4vw,42px);font-weight:800;letter-spacing:-.02em;
  line-height:1.15;color:var(--ink-900);
}
.elementor-widget-heading.is-h1 .elementor-heading-title{
  font-size:clamp(34px,4.6vw,58px);font-weight:800;letter-spacing:-.025em;
  line-height:1.08;color:var(--ink-900);
}
.section.dark .elementor-widget-heading .elementor-heading-title{color:#fff;}
.elementor-widget-text-editor.is-lede,
.elementor-widget-text-editor.is-lede p{
  font-size:clamp(16px,1.6vw,19px);color:var(--text-muted);line-height:1.65;font-weight:450;
}
.section.dark .elementor-widget-text-editor.is-lede,
.section.dark .elementor-widget-text-editor.is-lede p{color:var(--text-on-dark-muted);}
/* Elementor's button widget ships its own skin; these reset it onto the design
   system's button, so a button stays editable in the builder and still looks right. */
.elementor-widget-button[class*="is-btn-"] .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 30px;border-radius:var(--r-full);
  font-weight:700;font-size:16px;border:1px solid transparent;
  background-image:none;text-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.elementor-widget-button[class*="is-btn-"] .elementor-button:active{transform:translateY(1px);}
.elementor-widget-button.is-btn-primary .elementor-button{
  background:linear-gradient(180deg,var(--green-500),var(--green-600));color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 10px 24px -8px rgba(14,82,57,.55);
}
.elementor-widget-button.is-btn-primary .elementor-button:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 14px 30px -8px rgba(14,82,57,.65);transform:translateY(-1px);
}
.elementor-widget-button.is-btn-secondary .elementor-button{
  background:var(--white);color:var(--ink-900);border-color:var(--ink-200);
}
.elementor-widget-button.is-btn-secondary .elementor-button:hover{border-color:var(--ink-400);transform:translateY(-1px);}
.elementor-widget-button.is-btn-on-dark .elementor-button{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.18);
}
.elementor-widget-button.is-btn-on-dark .elementor-button:hover{background:rgba(255,255,255,.12);}
.elementor-widget-button.is-btn-demo .elementor-button{
  background:linear-gradient(180deg,var(--saffron-400),var(--saffron-500));color:var(--ink-900);
  border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 24px -8px rgba(179,95,0,.5);
}
.elementor-widget-button.is-btn-demo .elementor-button:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 14px 30px -8px rgba(179,95,0,.62);transform:translateY(-1px);
}
.elementor-widget-button.is-btn-demo .elementor-button{animation:demoHalo 3.4s ease-out infinite;}
/* Staggered by position in the section, same reason as the static buttons. */
.e-con>.elementor-widget-button.is-btn-demo:nth-child(2) .elementor-button{animation-delay:.55s;}
.e-con>.elementor-widget-button.is-btn-demo:nth-child(3) .elementor-button{animation-delay:1.1s;}
.demo-band .elementor-widget-button.is-btn-demo .elementor-button{animation-delay:1.6s;}
.elementor-widget-button.is-btn-demo .elementor-button:hover{animation:none;}
@media (prefers-reduced-motion: reduce){
  .elementor-widget-button.is-btn-demo .elementor-button{animation:none;}
  .elementor-widget-button[class*="is-btn-"] .elementor-button:hover{transform:none;}
}

/* Elementor widgets carry their own bottom spacing; the design system spaces the
   section head as a block, so the individual gaps are reset and re-applied here. */
/* .e-con carries Elementor's own text-align, so the selector has to outrank it. */
.e-con.is-section-head,.is-section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
.is-section-head .elementor-widget{margin-bottom:0;}
.is-section-head .elementor-widget-heading.is-eyebrow{margin-bottom:16px;}
.is-section-head .elementor-widget-heading.is-h2{margin-bottom:16px;}

/* Elementor zeroes the margin on .elementor-heading-title, which outranks the design's
   own `.problem-card h4` style rules. Restate those margins at Elementor's specificity
   so converted cards keep the original vertical rhythm. */
.problem-card .elementor-widget-heading .elementor-heading-title,
.pillar .elementor-widget-heading .elementor-heading-title{margin-bottom:8px;}
.sec-item .elementor-widget-heading .elementor-heading-title{margin-bottom:6px;}
.feature-copy .elementor-widget-heading.is-h2 .elementor-heading-title{margin:14px 0;}
.e-con.cta-row.mt-8{margin-top:8px;}

/* Grids and cards rebuilt as Elementor containers. Elementor's stylesheet loads after
   this one and sets display:flex plus its own gap/padding on .e-con, so the design's
   layout values have to be restated at .e-con specificity. Descendant rules
   (.problem-card h4, .pillar .ic, ...) keep matching and are not repeated here. */
.e-con.trust-grid,.e-con.problem-grid,.e-con.pillars,.e-con.sec-grid,
.e-con.testi-grid,.e-con.feature-row{display:grid;}
.e-con.trust-grid{grid-template-columns:repeat(6,1fr);gap:10px;}
.e-con.problem-grid{grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px;}
.e-con.pillars{grid-template-columns:repeat(3,1fr);gap:20px;}
.e-con.sec-grid{grid-template-columns:repeat(4,1fr);gap:16px;}
.e-con.testi-grid{grid-template-columns:repeat(3,1fr);gap:20px;}
.e-con.feature-row{grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
.e-con.feature-row+.e-con.feature-row{margin-top:110px;}
/* Cards space their parts with margins, so the container gap must be zero. */
.e-con.problem-card{padding:26px 22px;gap:0;}
.e-con.pillar{padding:26px;gap:0;}
.e-con.sec-item{padding:22px;gap:0;}
.e-con.testi-card{padding:30px;gap:0;}
.e-con.trust-item{display:flex;padding:18px 8px;gap:9px;}
.e-con.feature-copy{padding:0;gap:0;}
/* Demo band rebuilt as Elementor containers: .e-con owns display/gap/padding, so the
   band's own layout has to be restated here, and Elementor zeroes heading margins. */
/* As an Elementor image widget the band loses its bottom margin, so it ends up flush
   against whatever follows. Restated above Elementor's widget-margin reset. */
.elementor .e-con>.elementor-widget.photo-band{margin-bottom:52px;}
.elementor .e-con>.elementor-widget.photo-band.band-below{margin:52px 0 0;}
@media(max-width:900px){
  .elementor .e-con>.elementor-widget.photo-band{margin-bottom:40px;}
  .elementor .e-con>.elementor-widget.photo-band.band-below{margin:40px 0 0;}
}

.e-con.demo-band{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:28px;padding:30px 34px;
}
/* Elementor gives container children flex-shrink:0, so the two columns refuse to
   shrink and wrap onto separate rows. Outrank it: copy takes the slack, buttons
   size to their content. */
.elementor .e-con.demo-band>.e-con{flex:1 1 auto;width:auto;min-width:0;}
.elementor .e-con.demo-band>.e-con.cta-row{flex:0 0 auto;width:auto;}
/* The native heading carries no .h3 class, so the Astra theme's global h1-h6 colour
   and size win. Restate the design's h3 here. */
.demo-band .elementor-widget-heading .elementor-heading-title{
  margin-bottom:6px;
  font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.015em;
  line-height:1.25;color:var(--ink-900);
}
.e-con.demo-band .e-con.cta-row{display:flex;flex-direction:row;gap:14px;flex-wrap:wrap;padding:0;}
@media(max-width:820px){
  .e-con.demo-band{flex-direction:column;align-items:flex-start;gap:20px;padding:24px;}
  .elementor .e-con.demo-band>.e-con,
  .elementor .e-con.demo-band>.e-con.cta-row{width:100%;flex:0 0 auto;}
}
.e-con.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.e-con.info-card{padding:22px;gap:0;}
.info-card .elementor-widget-heading .elementor-heading-title{margin-bottom:7px;}
/* The inner-page hero centres and caps its lede. .e-con sets its own text-align and
   stretches children, so both have to be restated at .e-con specificity. */
.e-con.page-hero{text-align:center;align-items:center;}
.e-con.page-hero>.e-con{align-items:center;}
/* Outranks Elementor's own `.elementor.elementor .e-con > .elementor-widget{max-width:100%}`. */
.elementor .e-con.page-hero .elementor-widget.is-lede{max-width:620px;margin-left:auto;margin-right:auto;}
@media(max-width:900px){.e-con.info-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.e-con.info-grid{grid-template-columns:1fr;}}
@media(max-width:980px){
  .e-con.trust-grid{grid-template-columns:repeat(3,1fr);}
  .e-con.problem-grid{grid-template-columns:1fr 1fr;}
  .e-con.feature-row{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:900px){
  .e-con.pillars{grid-template-columns:1fr 1fr;}
  .e-con.sec-grid{grid-template-columns:1fr 1fr;}
  .e-con.testi-grid{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .e-con.trust-grid{grid-template-columns:repeat(2,1fr);}
  .e-con.problem-grid{grid-template-columns:1fr;}
  .e-con.pillars{grid-template-columns:1fr;}
}
@media(max-width:520px){.e-con.sec-grid{grid-template-columns:1fr;}}

/* ---------- Photography ---------- */
/* Wide photo band: breaks up long icon-and-card sections without displacing any
   product UI, which stays the stronger proof on this site. */
.photo-band{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  margin:0 0 52px;background:var(--bg-soft);box-shadow:var(--shadow-md);
}
.photo-band img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/6;}
/* Brand-tinted scrim so photography never fights the palette. */
.photo-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg, rgba(10,14,13,.34), rgba(10,14,13,0) 48%);
}
.photo-band.band-below{margin:52px 0 0;}
/* An infographic is read, not cropped: no fixed ratio and no scrim over the artwork.
   Sits on the page as a framed figure instead of a bleed image. */
/* Full container width: the artwork carries a lot of small type and needs the room. */
.photo-band.is-figure{background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.photo-band.is-figure img{aspect-ratio:auto;height:auto;object-fit:contain;}
.photo-band.is-figure::after{content:none;}
/* Dense artwork stops being readable on a phone; the lightbox is the way in. */
.photo-band.is-figure .elementor-widget-container a,
.photo-band.is-figure a{display:block;cursor:zoom-in;}
/* Per-image framing: keeps the subject in frame as the crop gets shorter. */
.photo-band.pos-left img{object-position:34% 50%;}
.photo-band.pos-right img{object-position:66% 50%;}
@media(max-width:900px){
  .photo-band{margin-bottom:40px;}
  .photo-band.band-below{margin-top:40px;}
  .photo-band img{aspect-ratio:16/8;}
}
@media(max-width:560px){.photo-band img{aspect-ratio:16/10;}}

/* Full-bleed photographic background for a dark section. */
.section.has-photo{position:relative;overflow:hidden;}
.section.has-photo>.container{position:relative;z-index:1;}
.sec-photo{position:absolute;inset:0;z-index:0;}
.sec-photo img{display:block;width:100%;height:100%;object-fit:cover;}
.sec-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, var(--bg-dark) 14%, rgba(10,14,13,.84) 54%, rgba(10,14,13,.62));
}
/* Stacked on small screens the copy sits over the middle of the photo, so the
   scrim has to darken top-to-bottom instead of left-to-right. */
@media(max-width:900px){
  .sec-photo::after{background:linear-gradient(180deg, rgba(10,14,13,.88), rgba(10,14,13,.94));}
}

/* Photographic backdrop for the closing CTA card. */
.final-cta .cta-photo{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;}
.final-cta .cta-photo img{display:block;width:100%;height:100%;object-fit:cover;}
/* Carries the brand glow itself, since it paints over .final-cta::before. */
.final-cta .cta-photo::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(500px 260px at 20% 0%, rgba(31,174,118,.30), transparent 60%),
             radial-gradient(500px 260px at 80% 100%, rgba(31,174,118,.22), transparent 60%),
             linear-gradient(180deg, rgba(10,14,13,.86), rgba(10,14,13,.93));
}

/* ---------- Footer ---------- */
.site-footer{
  position:relative;isolation:isolate;overflow:hidden;
  background-color:#05100C;
  color:var(--text-on-dark-muted);padding:70px 0 30px;
}
.site-footer .container{position:relative;z-index:1;}

/* --- deep-space backdrop --- */
.footer-cosmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.footer-cosmos .nebula{
  position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;
  will-change:transform;
}
.footer-cosmos .nebula-a{
  width:640px;height:480px;left:-140px;top:-160px;
  background:radial-gradient(ellipse at center, rgba(21,148,99,.55), rgba(21,148,99,0) 70%);
  animation:cosmosDriftA 26s ease-in-out infinite;
}
.footer-cosmos .nebula-b{
  width:560px;height:420px;right:-120px;bottom:-180px;
  background:radial-gradient(ellipse at center, rgba(31,174,118,.35), rgba(10,14,13,0) 70%);
  animation:cosmosDriftB 34s ease-in-out infinite;
}
@keyframes cosmosDriftA{
  0%,100%{transform:translate3d(0,0,0) scale(1);}
  50%{transform:translate3d(60px,40px,0) scale(1.12);}
}
@keyframes cosmosDriftB{
  0%,100%{transform:translate3d(0,0,0) scale(1.05);}
  50%{transform:translate3d(-70px,-30px,0) scale(1);}
}

/* Tiled dots make the stars; each layer drifts at its own speed for parallax. */
.footer-cosmos .starfield{
  position:absolute;left:0;top:0;width:100%;height:200%;
  background-repeat:repeat;will-change:transform;
}
.footer-cosmos .starfield-1{
  background-image:radial-gradient(1.6px 1.6px at 20px 30px, rgba(255,255,255,.85), transparent),
                   radial-gradient(1.4px 1.4px at 130px 90px, rgba(255,255,255,.6), transparent),
                   radial-gradient(1.2px 1.2px at 220px 40px, rgba(169,232,203,.75), transparent);
  background-size:280px 200px;
  animation:starDrift 90s linear infinite;opacity:.85;
}
.footer-cosmos .starfield-2{
  background-image:radial-gradient(1.2px 1.2px at 60px 120px, rgba(255,255,255,.5), transparent),
                   radial-gradient(1px 1px at 190px 20px, rgba(255,255,255,.45), transparent);
  background-size:220px 260px;
  animation:starDrift 140s linear infinite;opacity:.6;
}
.footer-cosmos .starfield-3{
  background-image:radial-gradient(2px 2px at 100px 70px, rgba(79,200,150,.7), transparent);
  background-size:340px 300px;
  animation:starDrift 200s linear infinite, starTwinkle 6s ease-in-out infinite;opacity:.5;
}
@keyframes starDrift{ from{transform:translate3d(0,0,0);} to{transform:translate3d(0,-50%,0);} }
@keyframes starTwinkle{ 0%,100%{opacity:.5;} 50%{opacity:.22;} }

.footer-cosmos .comet{
  position:absolute;top:12%;left:-12%;
  width:150px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.85));
  filter:blur(.4px);opacity:0;
  animation:cometFly 14s ease-in-out infinite;
}
@keyframes cometFly{
  0%,72%{opacity:0;transform:translate3d(0,0,0) rotate(18deg);}
  76%{opacity:.9;}
  92%,100%{opacity:0;transform:translate3d(115vw,42vh,0) rotate(18deg);}
}

@media (prefers-reduced-motion: reduce){
  .footer-cosmos .nebula,
  .footer-cosmos .starfield,
  .footer-cosmos .comet{animation:none;}
  .footer-cosmos .comet{opacity:0;}
}

/* --- footer layout --- */
.footer-top{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:28px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.08);}
@media(max-width:1080px){.footer-top{grid-template-columns:1fr 1fr 1fr;}.footer-brand{grid-column:1/-1;}}
@media(max-width:640px){.footer-top{grid-template-columns:1fr 1fr;gap:24px;}}
@media(max-width:359px){.footer-top{grid-template-columns:1fr;}}
.footer-brand .logo{color:#fff;}
.footer-brand p{font-size:13px;line-height:1.7;margin:14px 0 16px;max-width:340px;}

.footer-meaning{display:flex;flex-direction:column;gap:12px;margin-bottom:20px;max-width:360px;}
.footer-meaning li{display:flex;gap:11px;align-items:flex-start;font-size:12.5px;line-height:1.6;}
.footer-meaning b{color:#fff;font-weight:800;}
.footer-meaning .fm-ic{
  width:28px;height:28px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.footer-meaning .fm-ic svg{width:15px;height:15px;min-width:15px;flex:none;stroke:currentColor;}
.footer-meaning .fm-wa{background:rgba(21,148,99,.16);color:var(--green-300);}
.footer-meaning .fm-sarthi{background:rgba(255,153,51,.14);color:var(--saffron-500);}

.footer-col h6{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:16px;}
.footer-col ul{display:flex;flex-direction:column;gap:11px;}
.footer-col a{font-size:13.5px;transition:color .15s ease;}
.footer-col a:hover{color:#fff;}

/* --- contact strip --- */
.footer-contact{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:26px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
@media(max-width:980px){.footer-contact{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.footer-contact{grid-template-columns:1fr;}}
.fc-item{
  display:flex;gap:12px;align-items:flex-start;
  padding:14px;border-radius:var(--r-md);
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.fc-item:hover{background:rgba(21,148,99,.12);border-color:rgba(31,174,118,.35);transform:translateY(-2px);}
.fc-ic{
  width:34px;height:34px;flex:none;border-radius:var(--r-sm);
  background:rgba(31,174,118,.14);color:var(--green-300);
  display:flex;align-items:center;justify-content:center;
}
.fc-ic svg{width:17px;height:17px;min-width:17px;flex:none;stroke:currentColor;}
.fc-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.fc-label{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--green-300);}
.fc-value{font-size:13px;font-weight:700;color:#fff;line-height:1.45;overflow-wrap:anywhere;}
.fc-hint{font-size:11px;color:var(--text-on-dark-muted);}

.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:22px;font-size:12.5px;}
.made-in-india{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff;}
.made-in-india .heart{color:#E7443F;font-size:14px;line-height:1;animation:heartBeat 2.4s ease-in-out infinite;}
@keyframes heartBeat{0%,100%{transform:scale(1);}14%{transform:scale(1.22);}28%{transform:scale(1);}42%{transform:scale(1.16);}}
@media (prefers-reduced-motion: reduce){.made-in-india .heart{animation:none;}}
@media(max-width:640px){.footer-bottom{justify-content:center;text-align:center;}}

.social-row{display:flex;gap:10px;}
.social-row a{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.06);
  color:#fff;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,transform .18s ease;
}
.social-row a:hover{background:var(--green-600);transform:translateY(-2px);}
.social-row svg{width:15px;height:15px;min-width:15px;flex:none;stroke:currentColor;}

/* ---------- Misc utility ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
.badge-soft{display:inline-block;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:var(--r-full);background:var(--ink-100);color:var(--ink-600);}
.center{text-align:center;}
.mt-8{margin-top:8px;}
.mt-56{margin-top:56px;}
.grad-text{background:linear-gradient(100deg,var(--green-600),var(--green-400));-webkit-background-clip:text;background-clip:text;color:transparent;}
.page-hero{padding:64px 0 40px;text-align:center;}
.page-hero .lede{max-width:620px;margin:0 auto;}
.breadcrumb{font-size:12.5px;color:var(--text-muted);margin-bottom:18px;}
.breadcrumb a{font-weight:700;color:var(--ink-600);}

/* Simple contact/form styles */
.form-card{border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;background:#fff;box-shadow:var(--shadow-md);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:600px){.form-grid{grid-template-columns:1fr;}}
.form-grid .full{grid-column:1/-1;}
.field-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--ink-600);margin-bottom:7px;}
.field-in{width:100%;padding:12px 14px;border:1px solid var(--ink-200);border-radius:var(--r-sm);font-size:14px;font-family:inherit;}
textarea.field-in{resize:vertical;min-height:110px;}
.form-note{font-size:12px;color:var(--text-muted);margin-top:14px;}

.contact-info{display:flex;flex-direction:column;gap:20px;}
.contact-info .row{display:flex;gap:14px;align-items:flex-start;}
.contact-info .ic{width:40px;height:40px;border-radius:11px;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center;flex:none;}
.contact-info .ic svg{width:19px;height:19px;}
.contact-info b{font-size:14.5px;display:block;margin-bottom:2px;}
.contact-info span{font-size:13.5px;color:var(--text-muted);}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:760px){.value-grid{grid-template-columns:1fr;}}

/* ---------- Blog ---------- */
.blog-filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:36px;}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media(max-width:900px){.blog-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.blog-grid{grid-template-columns:1fr;}}
.blog-card{border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.blog-card .thumb{height:150px;background:linear-gradient(135deg,var(--green-100),var(--green-50));display:flex;align-items:center;justify-content:center;color:var(--green-500);}
.blog-card .thumb svg{width:36px;height:36px;}
.blog-card .body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.blog-card .cat{font-size:11px;font-weight:800;color:var(--green-600);text-transform:uppercase;letter-spacing:.05em;}
.blog-card h4{font-size:15.5px;line-height:1.4;}
.blog-card p{font-size:13px;color:var(--text-muted);line-height:1.6;flex:1;}
.blog-card .meta{font-size:11.5px;color:var(--ink-400);font-weight:700;display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:12px;}

/* ---------- Docs ---------- */
.docs-layout{display:grid;grid-template-columns:230px 1fr;gap:44px;align-items:start;}
@media(max-width:860px){.docs-layout{grid-template-columns:1fr;}}
.docs-nav{position:sticky;top:calc(var(--header-h) + 24px);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;background:#fff;}
.docs-nav h6{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-weight:800;margin:16px 0 8px;}
.docs-nav h6:first-child{margin-top:0;}
.docs-nav a{display:block;padding:7px 9px;border-radius:var(--r-sm);font-size:13.5px;font-weight:600;color:var(--ink-600);}
.docs-nav a:hover{background:var(--ink-50);color:var(--ink-900);}
.docs-content{border:1px solid var(--border);border-radius:var(--r-lg);padding:36px;background:#fff;}
.docs-content h2{margin:36px 0 14px;}
.docs-content h2:first-child{margin-top:0;}
.docs-content h3{font-size:17px;margin:26px 0 10px;}
.docs-content p{color:var(--text-muted);font-size:14.5px;line-height:1.7;margin-bottom:12px;}
.docs-content ul{margin:0 0 16px 0;display:flex;flex-direction:column;gap:8px;}
.docs-content ul li{font-size:14px;color:var(--ink-700);padding-left:18px;position:relative;}
.docs-content ul li::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--green-500);}
.code-block{background:var(--ink-900);color:#D6E7DE;border-radius:var(--r-md);padding:18px 20px;font-family:'SFMono-Regular',Consolas,monospace;font-size:12.5px;line-height:1.7;overflow-x:auto;margin:14px 0 20px;}
.code-block .k{color:var(--green-300);}
.code-block .s{color:#E2A73B;}

/* ---------- Legal ---------- */
.legal-content{max-width:820px;margin:0 auto;}
.legal-content h2{font-size:19px;margin:34px 0 12px;}
.legal-content h2:first-child{margin-top:0;}
.legal-content p{color:var(--text-muted);font-size:14.5px;line-height:1.75;margin-bottom:14px;}
.legal-content ul{margin:0 0 16px 22px;display:flex;flex-direction:column;gap:8px;}
.legal-content ul li{font-size:14.5px;color:var(--text-muted);line-height:1.6;}
.legal-updated{font-size:12.5px;color:var(--text-muted);font-weight:700;margin-bottom:6px;}

/* ---------- Blog post ---------- */
.blog-post-meta{display:flex;gap:10px;align-items:center;justify-content:center;font-size:12.5px;color:var(--text-muted);font-weight:700;margin-top:16px;flex-wrap:wrap;}
.blog-post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--ink-300);}
.blog-post-cta{
  margin-top:40px;padding:24px;border-radius:var(--r-lg);background:var(--green-50);border:1px solid var(--green-100);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.blog-post-cta p{margin:0;font-weight:700;color:var(--ink-900);font-size:14.5px;}
.blog-related{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.blog-related a{font-size:13px;font-weight:700;color:var(--green-600);padding:8px 14px;border:1px solid var(--green-100);border-radius:var(--r-full);background:var(--green-50);}
.read-more{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;color:var(--green-600);margin-top:2px;}
.read-more svg{width:13px;height:13px;transition:transform .15s ease;}
.blog-card:hover .read-more svg{transform:translateX(3px);}
.blog-card{cursor:pointer;}
.blog-card .body{position:relative;}

/* ---------- Case studies ---------- */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media(max-width:900px){.case-grid{grid-template-columns:1fr;}}
.case-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;background:#fff;}
.case-card .tag-pill{margin-bottom:14px;}
.case-card h4{font-size:16px;margin-bottom:14px;}
.case-card .blk{margin-bottom:12px;}
.case-card .blk b{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--green-600);display:block;margin-bottom:4px;}
.case-card .blk p{font-size:13px;color:var(--text-muted);line-height:1.6;}

/* ---------- Simple info grid (used on feature pages) ---------- */
.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:860px){.info-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.info-grid{grid-template-columns:1fr;}}
.info-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;background:#fff;}
.info-card .ic{width:38px;height:38px;border-radius:10px;background:var(--green-50);color:var(--green-600);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.info-card .ic svg{width:19px;height:19px;}
.info-card h4{font-size:15px;margin-bottom:7px;}
.info-card p{font-size:13px;color:var(--text-muted);line-height:1.6;}

/* ---------- Lead capture modal ---------- */
.lead-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
.lead-modal[hidden]{display:none;}
.lead-modal-backdrop{
  position:absolute;inset:0;background:rgba(10,14,13,.55);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease;
}
.lead-modal.is-open .lead-modal-backdrop{opacity:1;}

.lead-modal-card{
  position:relative;z-index:1;
  width:min(980px,100%);max-height:calc(100vh - 48px);overflow:auto;
  background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
  display:grid;grid-template-columns:1.05fr .95fr;
  opacity:0;transform:translateY(14px) scale(.985);
  transition:opacity .28s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1);
}
.lead-modal.is-open .lead-modal-card{opacity:1;transform:translateY(0) scale(1);}

.lead-modal-close{
  position:absolute;top:14px;right:14px;z-index:3;
  /* padding:0 because a host theme's button padding turns the circle into an oval */
  width:38px;height:38px;min-width:38px;padding:0;border-radius:50%;
  /* Solid red, same on every screen: the button sits over the dark visual panel and
     has to be unmistakable there and on white alike. */
  background:var(--red-500);border:1px solid var(--red-500);
  color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 3px 12px rgba(10,14,13,.28);
  transition:background .15s ease,color .15s ease,transform .15s ease;
}
.lead-modal-close:hover{background:#B93B37;border-color:#B93B37;color:#fff;transform:scale(1.06);}
.lead-modal-close:focus-visible{outline:3px solid #fff;outline-offset:2px;}
/* min-width + flex:none: a host theme's button/svg rules can otherwise collapse this to 0. */
.lead-modal-close svg{width:18px;height:18px;min-width:18px;flex:none;stroke:currentColor;}

.lead-modal-copy{padding:38px 36px;}
.lead-modal-eyebrow{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-700);background:var(--green-50);border:1px solid var(--green-100);
  padding:6px 14px;border-radius:var(--r-full);margin-bottom:18px;
}
.lead-modal-copy h2{font-size:clamp(24px,2.6vw,32px);font-weight:800;letter-spacing:-.02em;margin-bottom:10px;}
.lead-modal-sub{font-size:14px;color:var(--text-muted);line-height:1.6;margin-bottom:20px;}

.lead-checklist{display:flex;flex-direction:column;gap:9px;margin-bottom:24px;}
.lead-checklist li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;font-weight:600;color:var(--ink-700);line-height:1.45;}
.lead-checklist svg{width:16px;height:16px;flex:none;color:var(--green-500);margin-top:2px;}

.lead-form{display:flex;flex-direction:column;gap:12px;}
.lead-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lead-field label{display:block;font-size:12px;font-weight:700;color:var(--ink-600);margin-bottom:6px;}
.lead-field input{
  width:100%;padding:11px 13px;font-family:inherit;font-size:14px;
  border:1px solid var(--ink-200);border-radius:var(--r-sm);background:#fff;color:var(--ink-900);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.lead-field input::placeholder{color:var(--ink-300);}
.lead-field input:focus{outline:none;border-color:var(--green-400);box-shadow:0 0 0 3px var(--green-100);}
.lead-field input.has-error{border-color:var(--red-500);}
.lead-form .btn{margin-top:4px;}
.lead-secondary{
  display:block;text-align:center;font-size:13px;font-weight:700;color:var(--green-700);
  text-decoration:underline;text-underline-offset:3px;
}
.lead-secondary:hover{color:var(--green-500);}

.lead-form-success[hidden],.lead-form[hidden]{display:none;}
.lead-form-success{
  display:flex;gap:10px;align-items:flex-start;
  padding:16px 18px;border-radius:var(--r-md);
  background:var(--green-50);border:1px solid var(--green-100);
  font-size:13.5px;font-weight:600;color:var(--green-700);line-height:1.55;
}
.lead-form-success svg{width:18px;height:18px;flex:none;margin-top:1px;}

.lead-trust{
  margin-top:16px;font-size:12px;color:var(--text-muted);font-weight:600;text-align:center;
}
.lead-trust i{font-style:normal;color:var(--ink-300);margin:0 6px;}

/* Visual side */
.lead-modal-visual{
  position:relative;padding:34px 30px;
  /* solid colour first so the panel is never white if the gradient is dropped */
  background-color:#0A0E0D;
  background-image:radial-gradient(ellipse 520px 300px at 70% 0%, #16302A, #0A0E0D 70%);
  border-radius:0 var(--r-xl) var(--r-xl) 0;
  display:flex;flex-direction:column;justify-content:center;gap:18px;
}
.lead-visual-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--green-300);
  background:rgba(31,174,118,.12);border:1px solid rgba(31,174,118,.28);
  padding:7px 14px;border-radius:var(--r-full);
}
.lead-visual-badge svg{width:14px;height:14px;}

.lead-chat{display:flex;flex-direction:column;gap:9px;}
.lead-bubble{
  max-width:86%;padding:11px 14px;border-radius:14px;font-size:12.5px;line-height:1.5;
}
.lead-bubble .t{display:block;margin-top:5px;font-size:10px;opacity:.62;}
.lead-bubble.in{align-self:flex-start;background:#1B2420;border:1px solid var(--border-dark);color:#E9EDEB;border-bottom-left-radius:4px;}
.lead-bubble.out{align-self:flex-end;background:var(--green-600);color:#fff;border-bottom-right-radius:4px;}

.lead-visual-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding-top:16px;border-top:1px solid rgba(255,255,255,.1);
}
.lead-visual-stats b{display:block;font-size:17px;font-weight:800;color:#fff;}
.lead-visual-stats span{font-size:10.5px;font-weight:600;color:var(--text-on-dark-muted);}
.lead-visual-note{font-size:10.5px;color:var(--text-on-dark-muted);opacity:.8;}

/* Tablet: one column, still a floating card with room to breathe. */
@media(max-width:900px){
  .lead-modal{padding:20px;}
  .lead-modal-card{
    grid-template-columns:1fr;
    max-height:calc(100vh - 40px);
    max-height:calc(100dvh - 40px);
  }
  .lead-modal-visual{
    order:-1;border-radius:var(--r-xl) var(--r-xl) 0 0;
    padding:22px 22px 20px;gap:12px;
  }
  .lead-chat .lead-bubble:nth-child(n+3){display:none;}
  .lead-modal-copy{padding:26px 22px 30px;}
  .lead-checklist li:nth-child(n+5){display:none;}
}

/* Phone: a compact card that floats over the page. It deliberately does not fill the
   screen - the page showing down both sides and above/below is what tells the visitor
   this is a popup they can dismiss, rather than a new screen they navigated to. */
@media(max-width:620px){
  .lead-modal{padding:0 18px;align-items:center;justify-content:center;}
  /* The card itself never scrolls - only the form column does - so the close button,
     which is anchored to the card, stays on screen the whole time. */
  .lead-modal-card{
    width:100%;max-width:none;border-radius:var(--r-xl);
    height:auto;
    max-height:82vh;max-height:82dvh;
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
  }
  .lead-modal-copy{overflow-y:auto;-webkit-overflow-scrolling:touch;}
  /* Trimmed hard: on a short card the form has to stay the visible part. */
  .lead-modal-visual{border-radius:var(--r-xl) var(--r-xl) 0 0;padding:14px 16px 12px;gap:8px;}
  .lead-chat,.lead-visual-note{display:none;}
  .lead-visual-stats{padding-top:0;border-top:0;gap:8px;}
  .lead-visual-stats b{font-size:14px;}
  .lead-visual-stats span{font-size:9.5px;}
  .lead-modal-copy{padding:18px 16px 24px;}
  .lead-modal-eyebrow{margin-bottom:10px;padding:5px 11px;font-size:10.5px;}
  .lead-modal-copy h2{font-size:21px;margin-bottom:8px;}
  .lead-modal-sub{font-size:13px;margin-bottom:14px;}
  .lead-checklist li:nth-child(n+4){display:none;}
  /* 44px keeps the touch target legal even though the card is smaller. */
  .lead-modal-close{
    top:8px;right:8px;
    width:44px;height:44px;min-width:44px;
    box-shadow:0 4px 16px rgba(10,14,13,.4);
  }
  .lead-modal-close svg{width:20px;height:20px;min-width:20px;stroke-width:2.6;}
}
@media(max-width:520px){
  .lead-field-row{grid-template-columns:1fr;}
  .lead-visual-stats{grid-template-columns:repeat(3,1fr);gap:6px;}
}
@media (prefers-reduced-motion: reduce){
  .lead-modal-card,.lead-modal-backdrop{transition:none;}
}

/* ---------- Workflow canvas ----------
   A node graph the way an automation builder actually looks: trigger on the left,
   the AI agent in the middle with the sources it can reach, a decision, and two
   outcomes. The execution animates so the sequence is read rather than explained.
   Fixed pixel canvas inside a scroller - scaling nodes and their type together
   breaks down badly on small screens, and a workflow that pans is familiar. */
.wf-wrap{position:relative;}
.wf-wrap::after{
  content:'';position:absolute;top:0;right:0;bottom:38px;width:46px;
  pointer-events:none;border-radius:0 var(--r-xl) var(--r-xl) 0;
  background:linear-gradient(90deg,rgba(8,15,12,0),rgba(8,15,12,.85));
}
@media(min-width:1101px){.wf-wrap::after{display:none;}}
.wf-canvas{
  overflow-x:auto;overflow-y:hidden;border-radius:var(--r-xl);
  background-color:#080F0C;
  border:1px solid rgba(255,255,255,.1);
  -webkit-overflow-scrolling:touch;
}
.wf-stage{
  position:relative;width:1040px;height:600px;margin:0 auto;
  background-image:radial-gradient(rgba(255,255,255,.15) 1.2px, transparent 1.2px);
  background-size:22px 22px;
}
.wf-edges{position:absolute;inset:0;width:1040px;height:600px;pointer-events:none;}
.wf-edges path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:2;}
/* The dash march is what makes the graph feel like it is executing. */
.wf-edges path.live{
  stroke:var(--green-400);stroke-dasharray:7 9;
  animation:wfDash 1.1s linear infinite;
}
@keyframes wfDash{to{stroke-dashoffset:-32;}}
.wf-edges .pkt{fill:var(--green-300);}

.wf-node{
  position:absolute;box-sizing:border-box;
  background:#111A16;border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:11px 13px;
  box-shadow:0 10px 24px -14px rgba(0,0,0,.9);
}
.wf-node .wf-top{display:flex;align-items:center;gap:9px;}
.wf-node .ic{
  width:28px;height:28px;flex:none;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(31,174,118,.16);color:var(--green-300);
}
.wf-node .ic svg{width:15px;height:15px;min-width:15px;flex:none;stroke:currentColor;}
.wf-node b{display:block;font-size:13px;font-weight:700;color:#fff;line-height:1.25;}
.wf-node em{
  display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-on-dark-muted);margin-bottom:3px;
}
.wf-node p{font-size:11.5px;color:var(--text-on-dark-muted);line-height:1.45;margin-top:7px;}
/* Ports, so the edges look like they plug in rather than just touch. */
.wf-node::before,.wf-node::after{
  content:'';position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;
  border-radius:50%;background:#1E2A24;border:2px solid rgba(255,255,255,.3);
}
.wf-node::before{left:-5px;}
.wf-node::after{right:-5px;}
.wf-node.no-in::before{display:none;}
.wf-node.no-out::after{display:none;}

.wf-node.is-trigger{border-color:rgba(31,174,118,.5);background:linear-gradient(160deg,rgba(31,174,118,.16),#111A16);}
.wf-node.is-agent{border-color:rgba(31,174,118,.55);background:linear-gradient(160deg,rgba(31,174,118,.2),#111A16);}
.wf-node.is-decision{border-color:rgba(255,153,51,.5);}
.wf-node.is-decision .ic{background:rgba(255,153,51,.18);color:var(--saffron-300);}
.wf-node.is-win{border-color:rgba(31,174,118,.5);}
.wf-node.is-drip{border-color:rgba(255,153,51,.45);}
.wf-node.is-drip .ic{background:rgba(255,153,51,.16);color:var(--saffron-300);}
.wf-node.is-tool{padding:9px 11px;}
.wf-node.is-tool .ic{width:24px;height:24px;}
.wf-node.is-tool b{font-size:11.5px;}

/* Execution highlight: each node takes its turn, on a loop. */
.wf-node.step{animation:wfRun 9s ease-in-out infinite;}
.wf-node.s1{animation-delay:0s;}
.wf-node.s2{animation-delay:1.1s;}
.wf-node.s3{animation-delay:2.2s;}
.wf-node.s4{animation-delay:3.3s;}
.wf-node.s5{animation-delay:4.4s;}
@keyframes wfRun{
  0%,8%,100%{box-shadow:0 10px 24px -14px rgba(0,0,0,.9);}
  3%{box-shadow:0 10px 24px -14px rgba(0,0,0,.9), 0 0 0 3px rgba(31,174,118,.35);}
}
.wf-node.is-agent .wf-ring{
  position:absolute;inset:-5px;border-radius:16px;pointer-events:none;
  border:1px solid rgba(31,174,118,.45);animation:wfRing 2.8s ease-in-out infinite;
}
@keyframes wfRing{
  0%,100%{opacity:.25;transform:scale(1);}
  50%{opacity:.75;transform:scale(1.02);}
}

.wf-badge{
  position:absolute;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:var(--r-full);
}
.wf-badge.yes{background:rgba(31,174,118,.2);color:var(--green-300);border:1px solid rgba(31,174,118,.4);}
.wf-badge.no{background:rgba(255,153,51,.18);color:var(--saffron-300);border:1px solid rgba(255,153,51,.4);}

.wf-hint{
  display:none;margin-top:12px;text-align:center;
  font-size:12px;color:var(--text-on-dark-muted);
}
@media(max-width:1100px){
  .wf-hint{display:block;}
}
@media (prefers-reduced-motion: reduce){
  .wf-edges path.live{animation:none;}
  .wf-node.step,.wf-node.is-agent .wf-ring{animation:none;}
  .wf-edges .pkt{display:none;}
}
/* Sits on the return line, with the canvas colour behind it so the line breaks
   around the text rather than running through it. */
.wf-loop-label{
  position:absolute;left:398px;top:554px;
  padding:0 9px;background:#080F0C;
  font-size:11px;font-weight:700;letter-spacing:.04em;
  color:var(--saffron-300);
}
/* Elementor's frontend stylesheet loads after this one and its `.elementor img`
   reset matches the mark at the same specificity, so height has to be restated
   above it or the logo renders at its natural size. */
.elementor .af-hub img{height:30px;width:auto;}

/* ---------- The switch ----------
   Replaces the before/after infographic. The same enquiry runs down both sides at
   once: on the left it sits unanswered until the customer gives up, on the right it
   is answered, recorded and booked. Showing the conversation is more convincing than
   listing adjectives about it. It plays once when the block scrolls into view and
   holds the finished threads, so a visitor who arrives late still reads the whole
   comparison instead of catching a half-built loop. */
.switch{
  display:grid;grid-template-columns:1fr auto 1fr;gap:22px;align-items:stretch;
  margin:0 0 52px;
}
.sw-side{
  display:flex;flex-direction:column;
  padding:22px;border-radius:var(--r-xl);border:1px solid var(--border);background:#fff;
}
/* Held to a phone width and centred: a chat thread stretched across half a
   section stops reading as a phone, which is the whole point of the mock. */
.sw-side>*{width:100%;max-width:360px;margin-left:auto;margin-right:auto;}
.sw-side.is-before{background:#FFF8F7;border-color:#F5D9D4;}
.sw-side.is-after{background:#F4FBF7;border-color:#CDEBDB;}
.sw-head{margin-bottom:14px;}
.sw-tag{
  display:inline-block;padding:4px 11px;border-radius:var(--r-full);
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
}
.sw-tag.is-bad{background:#FDEEEC;color:var(--red-500);}
.sw-tag.is-good{background:var(--green-50);color:var(--green-700);}
.sw-head b{display:block;margin-top:9px;font-size:16px;color:var(--ink-900);}

/* Phone. Deliberately generic - the site's own green, no third-party chrome.
   Both phones grow to the taller of the two, so the two verdicts line up. */
.sw-phone{display:flex;flex-direction:column;flex:1;border-radius:16px;overflow:hidden;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);}
.sw-bar{display:flex;align-items:center;gap:9px;padding:9px 12px;background:var(--green-700);color:#fff;}
.sw-av{
  width:34px;height:34px;flex:none;border-radius:50%;background:rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.28);
}
.sw-av svg{width:17px;height:17px;min-width:17px;flex:none;stroke:currentColor;fill:none;}
.sw-who{min-width:0;}
.sw-bar b{display:block;font-size:13.5px;line-height:1.2;letter-spacing:.01em;}
.sw-bar span{display:block;margin-top:2px;font-size:10.5px;opacity:.78;}
/* The subtitle doubles as the presence line; the player swaps it to "typing..." */
.sw-bar .sw-status{transition:opacity .2s ease;}
.sw-thread{
  display:flex;flex-direction:column;gap:8px;padding:14px 12px;
  flex:1;min-height:300px;background:#FAFBFA;
}
/* The agent side is a real scroller: thirty bubbles cannot be cued from CSS
   because the scroll offset after each one is not knowable in advance, so the
   feed is played from main.js and this just gives it a window to run in. */
.sw-thread.is-feed{display:block;flex:none;height:430px;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sw-thread.is-feed::-webkit-scrollbar{width:5px;}
.sw-thread.is-feed::-webkit-scrollbar-thumb{background:rgba(10,14,13,.16);border-radius:3px;}
.sw-feed{display:flex;flex-direction:column;gap:8px;}
.sw-feed>*{display:none;}
/* .sw-note and .sw-typing carry their own display, which ties with the rule above
   and wins on order, so hiding them needs the extra weight of the class. */
.sw-feed>.sw-note,.sw-feed>.sw-typing{display:none;}
.sw-feed>.is-on{display:block;animation:swPop .3s ease-out both;}
.sw-feed>.sw-note.is-on,.sw-feed>.sw-typing.is-on{display:flex;}
@keyframes swPop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* Attachment and payment rows, so the agent is doing things and not only talking. */
.sw-attach{display:flex;align-items:center;gap:8px;margin-top:2px;padding-top:7px;border-top:1px solid var(--border);font-weight:700;}
.sw-msg.out .sw-attach{border-top-color:rgba(255,255,255,.28);}
.sw-attach svg{width:14px;height:14px;min-width:14px;flex:none;stroke:currentColor;}

.sw-caption{margin:-34px 0 52px;text-align:center;font-size:12px;color:var(--text-muted);}

.sw-msg{max-width:84%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;}
.sw-msg p{margin:0;}
.sw-msg .t{display:block;margin-top:4px;font-size:10px;opacity:.6;}
.sw-msg.in{background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;align-self:flex-start;color:var(--ink-800);}
.sw-msg.out{background:var(--green-500);color:#fff;border-bottom-right-radius:4px;align-self:flex-end;}
.sw-note{
  align-self:center;display:flex;align-items:center;gap:7px;max-width:96%;
  margin:4px 0;padding:6px 12px;border-radius:var(--r-full);
  background:var(--green-50);border:1px dashed #A8DCC2;color:var(--green-700);
  font-size:10.5px;font-weight:700;text-align:center;
}
.sw-note svg{width:12px;height:12px;min-width:12px;flex:none;stroke:currentColor;fill:none;}
.sw-wait{
  align-self:center;display:flex;align-items:center;gap:7px;margin-top:2px;
  padding:7px 11px;border-radius:10px;background:#FDEEEC;border:1px solid #F5D9D4;
  color:var(--red-500);font-size:11.5px;font-weight:700;
}
.sw-wait svg{width:13px;height:13px;min-width:13px;flex:none;stroke:currentColor;}
/* The three readings cross-fade in place, so the wait visibly gets worse. */
/* All three readings are absolutely positioned, so the box needs an invisible
   sizer or it collapses to zero height and the text sits off the baseline. */
.sw-count{position:relative;display:inline-block;}
.sw-count::before{content:'18 hours';visibility:hidden;}
.sw-count i{position:absolute;left:0;top:0;font-style:normal;white-space:nowrap;opacity:0;}
.switch.in .sw-count i:nth-child(1){animation:swN1 9s linear 1 forwards;}
.switch.in .sw-count i:nth-child(2){animation:swN2 9s linear 1 forwards;}
.switch.in .sw-count i:nth-child(3){animation:swN3 9s linear 1 forwards;}
@keyframes swN1{0%,9%{opacity:0;}11%,32%{opacity:1;}34%,100%{opacity:0;}}
@keyframes swN2{0%,32%{opacity:0;}34%,64%{opacity:1;}66%,100%{opacity:0;}}
@keyframes swN3{0%,64%{opacity:0;}66%,100%{opacity:1;}}

.sw-typing{
  align-self:flex-start;display:flex;gap:4px;padding:11px 13px;border-radius:14px;
  border-bottom-left-radius:4px;background:#fff;border:1px solid var(--border);opacity:0;
}
.switch.in .sw-side.is-before .sw-typing{animation:swType 9s linear 1 forwards;}
.sw-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-400,#9AA7A0);animation:swDot .9s ease-in-out infinite;}
.sw-typing i:nth-child(2){animation-delay:.15s;}
.sw-typing i:nth-child(3){animation-delay:.3s;}
@keyframes swType{0%,7%{opacity:0;}9%,13%{opacity:1;}15%,100%{opacity:0;}}
@keyframes swDot{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(-3px);opacity:1;}}

/* Delivery ticks, drawn from CSS so thirty bubbles do not each carry an icon.
   Two read ticks where the builder answered; on the left, one faint delivered
   tick that never turns into two - which is the whole story of that side. */
.sw-msg.out .t::after{
  content:'';display:inline-block;width:15px;height:10px;margin-left:5px;vertical-align:-1px;
  background:no-repeat center/15px 10px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23BFF0D8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.6 4.6 10.2 11 2.2'/%3E%3Cpath d='M7.2 6.6 10.8 10.2 17.2 2.2'/%3E%3C/svg%3E");
}
.sw-side.is-before .sw-msg.out .t::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12' fill='none' stroke='%23ffffff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.6 7.6 10.2 14 2.2'/%3E%3C/svg%3E");opacity:.5;
}

.sw-verdict{
  display:flex;align-items:center;gap:9px;margin-top:auto;padding-top:14px;
  font-size:13px;font-weight:700;line-height:1.4;
}
.sw-verdict svg{width:22px;height:22px;min-width:22px;flex:none;}
.sw-verdict.is-bad{color:var(--red-500);}
.sw-verdict.is-good{color:var(--green-700);}
/* The agent-side verdict is held back by the player until the chat has finished. */
.sw-verdict.sw-cue.is-on{opacity:1;transition:opacity .45s ease;}

.sw-arrow{
  align-self:center;width:44px;height:44px;flex:none;border-radius:50%;
  background:var(--green-50);color:var(--green-600);
  display:flex;align-items:center;justify-content:center;
  animation:swArrow 2.4s ease-in-out infinite;
}
.sw-arrow svg{width:21px;height:21px;stroke:currentColor;}
@keyframes swArrow{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

/* Cues. One 9s timeline shared by both sides; only the entry point differs, so the
   left thread is still crawling while the right one has already finished. */
.sw-cue{opacity:0;}
.switch.in .sw-c1{animation:swC1 9s linear 1 forwards;}
.switch.in .sw-c2{animation:swC2 9s linear 1 forwards;}
.switch.in .sw-c3{animation:swC3 9s linear 1 forwards;}
.switch.in .sw-c4{animation:swC4 9s linear 1 forwards;}
.switch.in .sw-c5{animation:swC5 9s linear 1 forwards;}
.switch.in .sw-c6{animation:swC6 9s linear 1 forwards;}
.switch.in .sw-c7{animation:swC7 9s linear 1 forwards;}
@keyframes swC1{0%,2%{opacity:0;transform:translateY(9px);}5%,100%{opacity:1;transform:none;}}
@keyframes swC2{0%,7%{opacity:0;transform:translateY(9px);}10%,100%{opacity:1;transform:none;}}
@keyframes swC3{0%,13%{opacity:0;transform:translateY(9px);}16%,100%{opacity:1;transform:none;}}
@keyframes swC4{0%,19%{opacity:0;transform:translateY(9px);}22%,100%{opacity:1;transform:none;}}
@keyframes swC5{0%,29%{opacity:0;transform:translateY(9px);}32%,100%{opacity:1;transform:none;}}
@keyframes swC6{0%,37%{opacity:0;transform:translateY(9px);}40%,100%{opacity:1;transform:none;}}
@keyframes swC7{0%,45%{opacity:0;transform:translateY(9px);}48%,100%{opacity:1;transform:none;}}
/* The left side runs on its own, slower cues - that gap is the whole point. */
.switch.in .sw-s2{animation:swS2 9s linear 1 forwards;}
.switch.in .sw-s3{animation:swS3 9s linear 1 forwards;}
.switch.in .sw-s4{animation:swS4 9s linear 1 forwards;}
@keyframes swS2{0%,32%{opacity:0;transform:translateY(9px);}35%,100%{opacity:1;transform:none;}}
@keyframes swS3{0%,64%{opacity:0;transform:translateY(9px);}67%,100%{opacity:1;transform:none;}}
@keyframes swS4{0%,74%{opacity:0;transform:translateY(9px);}77%,100%{opacity:1;transform:none;}}

@media(max-width:860px){
  .switch{grid-template-columns:1fr;gap:16px;}
  .sw-arrow{margin:0 auto;transform:rotate(90deg);animation:none;}
  .sw-thread{min-height:0;}
  .sw-thread.is-feed{height:380px;}
  .sw-caption{margin:-8px 0 40px;}
}
@media (prefers-reduced-motion: reduce){
  /* Everything settles on the finished conversation, which reads on its own. */
  .sw-cue,.sw-count i,.sw-typing{animation:none;}
  .sw-cue{opacity:1;transform:none;}
  .sw-count i:last-child{opacity:1;}
  .sw-typing{display:none;}
  .sw-arrow{animation:none;}
  /* The player checks this too and drops the whole conversation in at once. */
  .sw-feed>*{animation:none;}
}

/* ---------- Brand tagline ----------
   The strip fades in and the two chips follow; the tagline then lands word by
   word and the rule draws itself underneath. Appended here rather than edited in
   place so these rules sit after the base .brand-tagline block and win outright.
   Deliberately no shimmer on the words: the wordmark colours are fixed site-wide
   and a moving gradient on "Sarthi" was removed once already. */
.brand-tagline .w{display:inline-block;opacity:0;animation:tagWordIn .55s cubic-bezier(.16,1,.3,1) both;}
.brand-tagline .w:nth-child(1){animation-delay:.50s;}
.brand-tagline .w:nth-child(2){animation-delay:.56s;}
.brand-tagline .w:nth-child(3){animation-delay:.62s;}
.brand-tagline .w:nth-child(4){animation-delay:.68s;}
.brand-tagline .w:nth-child(5){animation-delay:.74s;}
.brand-tagline .w:nth-child(6){animation-delay:.80s;}
.brand-tagline .w:nth-child(7){animation-delay:.86s;}
.brand-tagline .w:nth-child(8){animation-delay:.92s;}
.brand-tagline .w:nth-child(9){animation-delay:.98s;}
@keyframes tagWordIn{
  from{opacity:0;transform:translateY(14px);}
  to{opacity:1;transform:translateY(0);}
}

/* The rule draws out from the middle once the last word has landed, then keeps a
   slow highlight travelling along it. translateX(-50%) has to be repeated in every
   keyframe or the bar jumps out of centre the moment the animation takes over. */
.brand-tagline::after{
  animation:tagRule .55s cubic-bezier(.16,1,.3,1) 1.06s both;
  background:linear-gradient(90deg,var(--green-500),var(--green-300),var(--green-500));
  background-size:200% 100%;
}
@keyframes tagRule{
  from{transform:translateX(-50%) scaleX(0);opacity:0;}
  to{transform:translateX(-50%) scaleX(1);opacity:1;}
}
.brand-tagline::before{
  content:'';position:absolute;left:50%;bottom:0;margin-left:-32px;
  width:64px;height:3px;border-radius:var(--r-full);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  background-size:40% 100%;background-repeat:no-repeat;
  opacity:0;animation:tagShine 3.6s ease-in-out 1.7s infinite;
}
@keyframes tagShine{
  0%{background-position:-40% 0;opacity:0;}
  12%{opacity:1;}
  38%{background-position:140% 0;opacity:0;}
  100%{background-position:140% 0;opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .brand-tagline .w{animation:none;opacity:1;transform:none;}
  .brand-tagline::after{animation:none;transform:translateX(-50%);opacity:1;}
  .brand-tagline::before{display:none;}
}

/* ---------- Popup: WhatsApp route ----------
   Sits under Start Free as the quieter option: same size, outlined rather than
   filled, so it is clearly the alternative and not a second primary action. */
.lead-form .lead-whatsapp{
  margin-top:10px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  color:var(--green-600);border-color:var(--green-200,#BFE3D2);background:var(--green-50);
}
.lead-form .lead-whatsapp:hover{border-color:var(--green-500);background:#fff;color:var(--green-700);transform:translateY(-1px);}
.lead-form .lead-whatsapp svg{width:18px;height:18px;min-width:18px;flex:none;}
/* On a phone the WhatsApp button landed just under the card's fold, which defeats
   the point of it. The stat row and the third checklist line buy the space back. */
@media(max-width:620px){
  .lead-visual-stats{display:none;}
  .lead-checklist li:nth-child(n+3){display:none;}
}

/* ---------- Why WaSarthi: feature tour ----------
   Replaces the "why choose us" infographic. Six reasons on the left, and for
   each one a small scene on the right that shows the thing happening rather than
   asserting it: the setup ticking through, the tools docking into one window,
   the AI answering at 2 AM, the team on one number, a webhook firing, the
   workspace growing. It auto-advances, pauses on hover, and any reason can be
   clicked. The six reasons are the six pillar cards that already sit below, so
   nothing new is being claimed here - it is the same copy, demonstrated. */
.why{
  display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:22px;align-items:stretch;
  margin:0 0 52px;
}
.why-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.why-item{
  position:relative;display:grid;grid-template-columns:30px 1fr;gap:4px 12px;align-items:start;
  padding:13px 16px 15px;border-radius:var(--r-md);cursor:pointer;
  border:1px solid transparent;background:transparent;overflow:hidden;
  transition:background .25s ease,border-color .25s ease;
}
.why-item:hover{background:#fff;border-color:var(--border);}
.why-item.is-active{background:#fff;border-color:var(--green-100);box-shadow:var(--shadow-sm);}
.why-item .n{
  grid-row:1 / span 2;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink-50);color:var(--ink-600);font-size:12.5px;font-weight:800;
  transition:background .25s ease,color .25s ease;
}
.why-item.is-active .n{background:var(--green-500);color:#fff;}
.why-item b{font-size:15px;color:var(--ink-900);line-height:1.3;}
.why-item p{font-size:13px;color:var(--text-muted);line-height:1.5;margin:0;
  max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease;}
.why-item.is-active p{max-height:60px;opacity:1;}
/* The bar under the active reason is the timer made visible. */
.why-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--green-500),var(--green-300));
  transform:scaleX(0);transform-origin:left;}
.why-item.is-active .why-bar{animation:whyBar var(--why-step,4.4s) linear forwards;}
@keyframes whyBar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.why.is-paused .why-item.is-active .why-bar{animation-play-state:paused;}

.why-stage{
  position:relative;min-height:360px;border-radius:var(--r-xl);
  background:#fff;border:1px solid var(--border);box-shadow:var(--shadow-md);overflow:hidden;
  background-image:radial-gradient(rgba(10,14,13,.07) 1px,transparent 1px);background-size:20px 20px;
}
.why-scene{display:none;position:absolute;inset:0;padding:30px 32px;}
.why-scene.is-active{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;}
.ws-cap{font-size:13px;font-weight:700;color:var(--ink-700);text-align:center;margin:0;
  opacity:0;animation:whyIn .5s ease 2.6s both;}
@keyframes whyIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
/* Generic entry for pieces that fly in from a direction of their own. */
@keyframes whyFly{from{opacity:0;transform:var(--from,translateY(14px));}to{opacity:1;transform:none;}}

/* Scene 1 - set up in minutes */
.ws-steps{width:100%;max-width:360px;}
.ws-step{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:700;color:var(--ink-800);opacity:.45;}
.ws-dot{width:22px;height:22px;flex:none;border-radius:50%;border:2px solid var(--ink-200);background:#fff;position:relative;}
.ws-dot::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--green-500);transform:scale(0);}
.ws-line{width:2px;height:26px;margin:4px 0 4px 10px;background:var(--ink-100);position:relative;overflow:hidden;}
.ws-line::after{content:'';position:absolute;inset:0;background:var(--green-500);transform:scaleY(0);transform-origin:top;}
.why-scene.is-active .ws-step.s1{animation:wsOn .3s ease .2s forwards;}
.why-scene.is-active .ws-step.s1 .ws-dot::after{animation:wsTick .3s ease .3s forwards;}
.why-scene.is-active .ws-line.l1::after{animation:wsGrow .6s ease .6s forwards;}
.why-scene.is-active .ws-step.s2{animation:wsOn .3s ease 1.2s forwards;}
.why-scene.is-active .ws-step.s2 .ws-dot::after{animation:wsTick .3s ease 1.3s forwards;}
.why-scene.is-active .ws-line.l2::after{animation:wsGrow .6s ease 1.6s forwards;}
.why-scene.is-active .ws-step.s3{animation:wsOn .3s ease 2.2s forwards;}
.why-scene.is-active .ws-step.s3 .ws-dot::after{animation:wsTick .3s ease 2.3s forwards;}
@keyframes wsOn{to{opacity:1;}}
@keyframes wsTick{to{transform:scale(1);}}
@keyframes wsGrow{to{transform:scaleY(1);}}
.ws-live{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-full);
  background:var(--green-50);border:1px solid var(--green-100);color:var(--green-700);font-size:12px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;opacity:0;}
.ws-live i{width:8px;height:8px;border-radius:50%;background:var(--green-500);}
.why-scene.is-active .ws-live{animation:whyIn .4s ease 2.7s both;}
.why-scene.is-active .ws-live i{animation:wsPulse 1.4s ease-in-out 3s infinite;}
@keyframes wsPulse{0%,100%{box-shadow:0 0 0 0 rgba(21,148,99,.45);}50%{box-shadow:0 0 0 6px rgba(21,148,99,0);}}

/* Scene 2 - one platform */
.ws-frame{width:100%;max-width:420px;border-radius:14px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden;}
.ws-frame-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:12.5px;font-weight:800;color:var(--ink-800);}
.ws-frame-bar img{height:18px;width:auto;display:block;}
.ws-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:12px;}
.ws-tile{display:flex;align-items:center;gap:7px;padding:10px 11px;border-radius:10px;
  background:var(--green-50);border:1px solid var(--green-100);color:var(--green-700);font-size:12.5px;font-weight:700;opacity:0;}
.ws-tile svg{width:14px;height:14px;min-width:14px;flex:none;stroke:currentColor;fill:none;}
.why-scene.is-active .ws-tile{animation:whyFly .55s cubic-bezier(.16,1,.3,1) both;}
.why-scene.is-active .ws-tile.t1{--from:translate(-120px,-60px);animation-delay:.2s;}
.why-scene.is-active .ws-tile.t2{--from:translate(0,-90px);animation-delay:.45s;}
.why-scene.is-active .ws-tile.t3{--from:translate(120px,-60px);animation-delay:.7s;}
.why-scene.is-active .ws-tile.t4{--from:translate(-120px,60px);animation-delay:.95s;}
.why-scene.is-active .ws-tile.t5{--from:translate(0,90px);animation-delay:1.2s;}
.why-scene.is-active .ws-tile.t6{--from:translate(120px,60px);animation-delay:1.45s;}

/* Scene 3 - AI at 2 AM */
.ws-clock{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:var(--r-full);
  background:var(--ink-900);color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;opacity:0;}
.ws-clock svg{width:13px;height:13px;stroke:currentColor;fill:none;}
.why-scene.is-active .ws-clock{animation:whyIn .4s ease .1s both;}
.ws-chat{width:100%;max-width:340px;display:flex;flex-direction:column;gap:8px;}
.ws-b{max-width:86%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.45;opacity:0;}
.ws-b.in{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--ink-800);}
.ws-b.out{align-self:flex-end;background:var(--green-500);color:#fff;border-bottom-right-radius:4px;}
.ws-b em{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:var(--r-full);background:rgba(255,255,255,.22);font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;}
.ws-typing{align-self:flex-end;display:flex;gap:4px;padding:10px 12px;border-radius:14px;border-bottom-right-radius:4px;background:var(--green-500);opacity:0;}
.ws-typing i{width:5px;height:5px;border-radius:50%;background:#fff;animation:swDot .9s ease-in-out infinite;}
.ws-typing i:nth-child(2){animation-delay:.15s;}.ws-typing i:nth-child(3){animation-delay:.3s;}
.why-scene.is-active .ws-b.in{animation:whyIn .4s ease .5s both;}
.why-scene.is-active .ws-typing{animation:wsWindow 3s linear .9s both;}
.why-scene.is-active .ws-b.out{animation:whyIn .4s ease 2s both;}
@keyframes wsWindow{0%{opacity:0;}8%{opacity:1;}34%{opacity:1;}36%{opacity:0;position:absolute;}100%{opacity:0;position:absolute;}}

/* Scene 4 - the whole team on one number */
.ws-number{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--r-full);
  background:var(--ink-900);color:#fff;font-size:13px;font-weight:800;opacity:0;}
.ws-number svg{width:14px;height:14px;stroke:currentColor;fill:none;}
.why-scene.is-active .ws-number{animation:whyIn .4s ease .1s both;}
.ws-team{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:440px;}
.ws-member{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;border-radius:12px;
  background:#fff;border:1px solid var(--border);opacity:0;text-align:center;}
.ws-member .av{width:34px;height:34px;border-radius:50%;background:var(--green-100);color:var(--green-700);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;}
.ws-member b{font-size:12.5px;color:var(--ink-900);}
.ws-member i{font-style:normal;font-size:11px;color:var(--text-muted);}
.ws-member.m1 i,.ws-member.m3 i{color:var(--green-600);font-weight:700;}
.why-scene.is-active .ws-member{animation:whyIn .45s cubic-bezier(.16,1,.3,1) both;}
.why-scene.is-active .ws-member.m1{animation-delay:.5s;}
.why-scene.is-active .ws-member.m2{animation-delay:.8s;}
.why-scene.is-active .ws-member.m3{animation-delay:1.1s;}
.why-scene.is-active .ws-member.m4{animation-delay:1.4s;}

/* Scene 5 - developer ready */
.ws-code{width:100%;max-width:380px;margin:0;padding:16px 18px;border-radius:12px;
  background:var(--ink-900);color:#DCE5E0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.7;overflow:hidden;box-shadow:var(--shadow-md);}
.ws-code > span{display:block;opacity:0;white-space:pre;}
.ws-code .k{color:var(--saffron-300);}
.ws-code .v{color:var(--green-300);}
.why-scene.is-active .ws-code > span{animation:wsLine .25s linear both;}
.why-scene.is-active .ws-code > span:nth-child(1){animation-delay:.2s;}
.why-scene.is-active .ws-code > span:nth-child(2){animation-delay:.5s;}
.why-scene.is-active .ws-code > span:nth-child(3){animation-delay:.8s;}
.why-scene.is-active .ws-code > span:nth-child(4){animation-delay:1.1s;}
.why-scene.is-active .ws-code > span:nth-child(5){animation-delay:1.4s;}
.why-scene.is-active .ws-code > span:nth-child(6){animation-delay:1.7s;}
.why-scene.is-active .ws-code > span:nth-child(7){animation-delay:2s;}
@keyframes wsLine{from{opacity:0;}to{opacity:1;}}
.ws-arrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--green-700);opacity:0;}
.ws-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;}
.why-scene.is-active .ws-arrow{animation:whyIn .4s ease 2.5s both;}

/* Scene 6 - grows with you */
.ws-grow{width:100%;max-width:420px;display:flex;flex-direction:column;gap:10px;}
.ws-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:11px 14px;
  border-radius:12px;background:#fff;border:1px solid var(--border);opacity:0;}
.ws-row .lbl{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-600);}
.ws-row .avs{display:flex;}
.ws-row .avs i{width:22px;height:22px;border-radius:50%;background:var(--green-100);border:2px solid #fff;margin-left:-6px;}
.ws-row .avs i:first-child{margin-left:0;}
.ws-row .chips{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end;}
.ws-row .chips b{padding:3px 9px;border-radius:var(--r-full);background:var(--green-50);border:1px solid var(--green-100);color:var(--green-700);font-size:11px;font-weight:700;}
.ws-row.r3{border-color:var(--green-100);background:var(--green-50);}
.why-scene.is-active .ws-row{animation:whyIn .45s cubic-bezier(.16,1,.3,1) both;}
.why-scene.is-active .ws-row.r1{animation-delay:.3s;}
.why-scene.is-active .ws-row.r2{animation-delay:1s;}
.why-scene.is-active .ws-row.r3{animation-delay:1.7s;}

@media(max-width:900px){
  .why{grid-template-columns:1fr;gap:14px;}
  /* Reasons become a scrolling strip of pills under the stage on a phone. */
  .why-list{order:2;flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .why-list::-webkit-scrollbar{display:none;}
  .why-item{flex:0 0 auto;grid-template-columns:24px 1fr;gap:0 8px;padding:9px 12px 11px;border-color:var(--border);background:#fff;}
  .why-item .n{width:24px;height:24px;border-radius:7px;font-size:11.5px;grid-row:1;}
  .why-item b{font-size:13.5px;white-space:nowrap;}
  .why-item p{display:none;}
  .why-stage{order:1;min-height:320px;}
  .why-scene{padding:22px 18px;}
  .ws-team{grid-template-columns:repeat(2,1fr);}
  .ws-tiles{grid-template-columns:repeat(2,1fr);}
}
@media (prefers-reduced-motion: reduce){
  .why-scene.is-active *{animation:none !important;opacity:1 !important;transform:none !important;}
  .why-scene.is-active .ws-typing{display:none;}
  .why-scene.is-active .ws-dot::after{transform:scale(1);}
  .why-scene.is-active .ws-line::after{transform:scaleY(1);}
  .why-item.is-active .why-bar{animation:none;transform:scaleX(1);}
}

/* ---------- Industries: one phone, every kind of business ----------
   Replaces the industries infographic. Eight industry chips around one phone;
   the active chip lights its connector and the phone plays that industry's
   conversation: the customer's question, the reply, and the thing that got done.
   The point is made by the frame staying the same while the business changes.
   Each scene is a short scrolling feed played from main.js, six messages and a
   result, so it reads as a real exchange and not a caption. Chips are real
   links to the solution pages, so the block is navigation too. */
.ind{
  display:grid;grid-template-columns:1fr 272px 1fr;gap:26px;align-items:center;
  margin:0 0 14px;
}
.ind-side{display:flex;flex-direction:column;gap:10px;}
.ind-chip{
  position:relative;display:flex;align-items:center;gap:11px;padding:11px 14px;
  border-radius:var(--r-md);background:#fff;border:1px solid var(--border);
  color:var(--ink-800);text-decoration:none;font-size:14px;font-weight:700;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.ind-chip:hover{border-color:var(--green-200,#A9E8CB);transform:translateY(-1px);}
.ind-chip .ic{
  width:34px;height:34px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:var(--ink-50);color:var(--ink-600);transition:background .25s ease,color .25s ease;
}
.ind-chip .ic svg{width:17px;height:17px;min-width:17px;flex:none;stroke:currentColor;fill:none;}
.ind-chip.is-active{border-color:var(--green-300);box-shadow:0 0 0 3px rgba(21,148,99,.12),var(--shadow-sm);}
.ind-chip.is-active .ic{background:var(--green-500);color:#fff;}
/* Connector stub toward the phone, lit while the chip is active. */
.ind-chip::after{
  content:'';position:absolute;top:50%;width:22px;height:2px;margin-top:-1px;
  background:var(--ink-100);transition:background .25s ease;
}
.ind-left .ind-chip::after{right:-24px;}
.ind-right .ind-chip::after{left:-24px;}
.ind-chip.is-active::after{background:var(--green-500);}
.ind-right .ind-chip{flex-direction:row-reverse;text-align:right;}
/* The bar under the active chip is the timer made visible. */
.ind-chip .ind-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;
  background:linear-gradient(90deg,var(--green-500),var(--green-300));
  transform:scaleX(0);transform-origin:left;border-radius:0 0 var(--r-md) var(--r-md);}
.ind-chip.is-active .ind-bar{animation:whyBar var(--ind-step,3.8s) linear forwards;}
.ind.is-paused .ind-chip.is-active .ind-bar{animation-play-state:paused;}

.ind-phone{
  border-radius:22px;border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-md);overflow:hidden;
}
.ind-top{display:flex;align-items:center;gap:9px;padding:10px 13px;background:var(--green-700);color:#fff;}
.ind-av{width:32px;height:32px;flex:none;border-radius:50%;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;}
.ind-av svg{width:16px;height:16px;min-width:16px;flex:none;stroke:currentColor;fill:none;}
.ind-top b{display:block;font-size:13.5px;line-height:1.2;}
.ind-top span{display:block;margin-top:2px;font-size:10.5px;opacity:.78;}
.ind-thread{position:relative;}
.ind-thread{position:relative;height:312px;background:#FAFBFA;}
.ind-scene{display:none;position:absolute;inset:0;padding:14px 12px;flex-direction:column;gap:8px;
  overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.ind-scene::-webkit-scrollbar{display:none;}
.ind-scene.is-active{display:flex;}
/* Bubbles wait for the player; .is-on brings them in one at a time. */
.ind-scene > *{display:none;}
/* .ind-typing and .ind-result set their own display and would tie with the line
   above on specificity, so they need the extra weight of the class to stay hidden. */
.ind-scene > .ind-typing,.ind-scene > .ind-result{display:none;}
.ind-scene > .is-on{display:block;animation:swPop .3s ease-out both;}
.ind-scene > .ind-typing.is-on{display:flex;}
.ind-scene > .ind-result.is-on{display:inline-flex;}
.ind-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:12.5px;line-height:1.45;}
.ind-msg.out{align-self:flex-end;background:var(--green-500);color:#fff;border-bottom-right-radius:4px;}
.ind-msg.in{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--ink-800);}
.ind-msg.in em{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-full);background:var(--green-50);color:var(--green-700);font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.06em;}
.ind-typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;border-radius:14px;border-bottom-left-radius:4px;
  background:#fff;border:1px solid var(--border);}
.ind-typing i{width:5px;height:5px;border-radius:50%;background:var(--ink-400);animation:swDot .9s ease-in-out infinite;}
.ind-typing i:nth-child(2){animation-delay:.15s;}.ind-typing i:nth-child(3){animation-delay:.3s;}
.ind-result{
  align-self:center;margin-top:4px;flex:none;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-full);
  background:var(--green-50);border:1px solid var(--green-100);color:var(--green-700);font-size:12px;font-weight:800;
}
.ind-msg{flex:none;}
.ind-result svg{width:13px;height:13px;min-width:13px;flex:none;stroke:currentColor;fill:none;}
/* Link under the phone follows the active industry. */
.ind-more{display:flex;align-items:center;justify-content:center;gap:7px;padding:11px 12px;border-top:1px solid var(--border);
  font-size:12.5px;font-weight:800;color:var(--green-700);text-decoration:none;}
.ind-more svg{width:14px;height:14px;min-width:14px;flex:none;stroke:currentColor;fill:none;transition:transform .2s ease;}
.ind-more:hover svg{transform:translateX(3px);}

@media(max-width:960px){
  .ind{grid-template-columns:1fr;gap:16px;}
  .ind-phone{order:1;max-width:320px;margin:0 auto;width:100%;}
  /* Both chip columns fold into one scrolling strip under the phone. */
  .ind-side{order:2;flex-direction:row;overflow-x:auto;gap:8px;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .ind-side::-webkit-scrollbar{display:none;}
  .ind-right{order:3;margin-top:-8px;}
  .ind-chip{flex:0 0 auto;padding:8px 12px;font-size:13px;}
  .ind-right .ind-chip{flex-direction:row;text-align:left;}
  .ind-chip .ic{width:28px;height:28px;}
  .ind-chip::after{display:none;}
  .ind-thread{height:290px;}
}
@media (prefers-reduced-motion: reduce){
  /* The player drops the whole conversation in at once when this is set. */
  .ind-scene > *{animation:none !important;}
  .ind-chip.is-active .ind-bar{animation:none;transform:scaleX(1);}
}

/* ---------- Integrations: live sync board ----------
   The tile grid stays, and becomes a status board: a single enquiry arrives on
   WhatsApp (the pill above the grid) and each tool lights up in turn with the
   thing it would do with it - contact created, row added, payment link sent.
   The labels describe what the integration does, not any result. */
.integ-src{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:8px 14px 8px 12px;
  border-radius:var(--r-full);background:#fff;border:1px solid var(--green-100);box-shadow:var(--shadow-sm);
  font-size:13px;font-weight:700;color:var(--ink-800);max-width:100%;
}
.integ-src .dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--green-500);animation:wsPulse 1.6s ease-in-out infinite;}
.integ-src b{color:var(--green-700);font-weight:800;white-space:nowrap;}
.integ-item{position:relative;overflow:hidden;padding-top:26px;}
/* The action slides down over the top edge while the tile is live. */
.integ-act{
  position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:center;gap:5px;
  padding:4px 6px;font-size:10.5px;font-weight:800;font-style:normal;letter-spacing:.02em;
  color:#fff;background:var(--green-500);transform:translateY(-100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.integ-act svg{width:11px;height:11px;min-width:11px;flex:none;stroke:currentColor;fill:none;}
.integ-item.is-live{border-color:var(--green-300);box-shadow:0 0 0 3px rgba(21,148,99,.12),var(--shadow-md);transform:translateY(-3px);}
.integ-item.is-live .ic{background:var(--green-500);color:#fff;}
.integ-item.is-live .integ-act{transform:translateY(0);}
/* Tiles rise in one after another when the block first scrolls in; --i is set
   by the driver so the stagger runs across all four groups, not per group. */
.reveal.in .integ-item{animation:whyIn .5s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 55ms);}
@media (prefers-reduced-motion: reduce){
  .reveal.in .integ-item{animation:none;}
  .integ-src .dot{animation:none;}
  .integ-act{transition:none;}
}

/* ---------- Workflow canvas: two layouts, one graph ----------
   The nodes are the same on every screen; only their coordinates and the edge
   drawing change. Wide screens use the 1040x600 canvas, phones and small
   tablets a 360x800 one laid out top to bottom, each with its own SVG of edges
   and travelling packets. main.js scales whichever canvas is active to the
   width it has, so the graph is always whole on screen and never scrolls. */
.wf-canvas{overflow:hidden;}
.wf-stage{
  position:relative;left:50%;transform-origin:top center;
  width:1040px;height:600px;margin:0 0 0 -520px;
}
.wf-edges{width:100%;height:100%;}
.wf-edges.is-mobile{display:none;}
.wf-hint{display:none !important;}
.wf-wrap::after{display:none !important;}

/* Desktop coordinates (formerly inline) */
.n-t1{left:16px;top:48px;width:184px;}
.n-t2{left:16px;top:240px;width:184px;}
.n-t3{left:16px;top:432px;width:184px;}
.n-merge{left:240px;top:240px;width:150px;}
.n-agent{left:430px;top:196px;width:210px;}
.n-tool1{left:381px;top:470px;width:96px;}
.n-tool2{left:487px;top:470px;width:96px;}
.n-tool3{left:593px;top:470px;width:96px;}
.n-decision{left:680px;top:240px;width:140px;}
.wf-badge.yes{left:812px;top:196px;}
.wf-badge.no{left:806px;top:340px;}
.n-win{left:858px;top:96px;width:166px;}
.n-drip{left:858px;top:372px;width:166px;}
.wf-loop-label{left:398px;top:554px;}

/* Phone / small tablet: the vertical canvas */
@media(max-width:900px){
  .wf-stage{width:360px;height:800px;margin-left:-180px;}
  .wf-edges.is-desktop{display:none;}
  .wf-edges.is-mobile{display:block;}
  /* Fixed heights here, because the edges start from node bottoms. */
  .n-t1,.n-t2,.n-t3{top:14px;width:104px;height:70px;padding:9px 9px;}
  .n-t1{left:12px;} .n-t2{left:128px;} .n-t3{left:244px;}
  .n-t1 .wf-top,.n-t2 .wf-top,.n-t3 .wf-top{flex-direction:column;align-items:flex-start;gap:5px;}
  .n-t1 b,.n-t2 b,.n-t3 b{font-size:11.5px;}
  .n-t1 em,.n-t2 em,.n-t3 em{display:none;}
  .n-merge{left:80px;top:124px;width:200px;height:58px;}
  .n-agent{left:16px;top:224px;width:200px;height:190px;}
  .n-agent p{font-size:11px;line-height:1.4;}
  .n-tool1,.n-tool2,.n-tool3{left:228px;width:112px;height:56px;padding:7px 9px;}
  .n-tool1{top:224px;} .n-tool2{top:291px;} .n-tool3{top:358px;}
  .n-tool1 .wf-top,.n-tool2 .wf-top,.n-tool3 .wf-top{display:none;}
  .n-tool1 b,.n-tool2 b,.n-tool3 b{margin-top:0 !important;font-size:11px;line-height:1.3;}
  .n-decision{left:80px;top:470px;width:200px;height:58px;}
  .wf-badge.yes{left:58px;top:553px;}
  .wf-badge.no{left:232px;top:553px;}
  .n-win{left:16px;top:600px;width:160px;height:140px;}
  .n-drip{left:184px;top:600px;width:160px;height:140px;}
  .n-win p,.n-drip p{font-size:11px;line-height:1.4;}
  .wf-loop-label{left:50%;top:764px;transform:translateX(-50%);white-space:nowrap;}
  /* Flow runs downward, so the side ports come off and vertical stubs go on. */
  .wf-node::before,.wf-node::after{left:50%;top:auto;margin:0 0 0 -3.5px;}
  .wf-node::before{top:-5px;}
  .wf-node::after{bottom:-5px;}
  .wf-node.n-tool1::before,.wf-node.n-tool2::before,.wf-node.n-tool3::before{display:block;left:-5px;top:50%;margin:-3.5px 0 0 0;}
  .n-agent .wf-ring{border-radius:16px;}
}

/* ---------- Cookie notice ----------
   Shown once, until the visitor chooses. The Meta Pixel only loads after Accept,
   which is what the privacy policy promises. Sits above the sticky CTA on phones. */
.cookie-note{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:950;max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lg,0 18px 48px rgba(10,14,13,.18));
  font-size:13px;line-height:1.5;color:var(--ink-800);
  animation:cookieIn .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cookieIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.cookie-note p{margin:0;flex:1 1 260px;}
.cookie-note a{color:var(--green-600);font-weight:700;}
.cookie-note .cookie-actions{display:flex;gap:8px;flex:none;}
.cookie-note .btn{padding:9px 14px;font-size:13px;}
@media(max-width:1160px){.cookie-note{bottom:84px;}}
@media(max-width:520px){.cookie-note{left:10px;right:10px;padding:12px 13px;}.cookie-note .cookie-actions{width:100%;}.cookie-note .btn{flex:1;}}
.legal-content code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;background:var(--ink-50);padding:1px 6px;border-radius:6px;}
.legal-content li strong{color:var(--ink-900);}

/* ---------- Pricing: plan limits table + add-ons (generated from the admin panel) ---------- */
.plan-limits{margin-top:40px;}
.plan-limits table.compare td:first-child{font-weight:600;color:var(--ink-800);}
.plan-limits table.compare th:not(:first-child),.plan-limits table.compare td:not(:first-child){text-align:center;}
.plan-limits svg.yes{width:20px;height:20px;color:var(--green-600);}
.plan-limits svg.no{width:18px;height:18px;color:var(--ink-300,#c4ccc8);}
.addons{margin:22px 0 8px;padding:18px 22px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--green-50,#f0faf5);}
.addons h4{margin:0 0 10px;font-size:15px;}
.addons ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px;}
.addons li{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-800);}
.addons li svg{width:16px;height:16px;color:var(--green-600);flex:none;}
.price-card .plan-intro{margin:10px 0 2px;font-size:12.5px;font-weight:700;color:var(--ink-600);text-transform:uppercase;letter-spacing:.04em;}
.price-card .period [data-cycle-total]{font-weight:700;color:var(--ink-800);}

/* ---------- Pricing: plan count drives the grid; Buy now; checkout dialog ---------- */
.pricing-grid.cols-3{grid-template-columns:repeat(3,1fr);max-width:1040px;margin-left:auto;margin-right:auto;}
.pricing-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.pricing-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-left:auto;margin-right:auto;}
.pricing-grid.cols-1{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto;}
@media(max-width:1100px){.pricing-grid.cols-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:980px){.pricing-grid.cols-3{grid-template-columns:repeat(2,1fr);}.pricing-grid.cols-3 .price-card:last-child:nth-child(odd){grid-column:1 / -1;max-width:calc(50% - 9px);margin:0 auto;width:100%;}}
@media(max-width:640px){.pricing-grid.cols-2,.pricing-grid.cols-3,.pricing-grid.cols-4{grid-template-columns:1fr;}.pricing-grid.cols-3 .price-card:last-child:nth-child(odd){max-width:none;}}
.price-card .btn-block + .btn-buy{margin-top:8px;}
.btn-buy{background:var(--ink-900);color:#fff;border:1px solid var(--ink-900);}
.btn-buy:hover{background:var(--green-700);border-color:var(--green-700);color:#fff;}
.price-card.hi .btn-buy{background:#fff;color:var(--ink-900);border-color:var(--ink-200);}
.price-card.hi .btn-buy:hover{background:var(--ink-900);color:#fff;border-color:var(--ink-900);}
.buy-modal{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;padding:20px;}
.buy-modal[hidden]{display:none;}
.buy-backdrop{position:absolute;inset:0;background:rgba(10,14,13,.55);opacity:0;transition:opacity .2s;}
.buy-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:20px;padding:30px 28px 24px;box-shadow:0 30px 80px rgba(0,0,0,.35);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .22s,transform .22s;}
.buy-modal.is-open .buy-backdrop{opacity:1;}
.buy-modal.is-open .buy-card{opacity:1;transform:none;}
.buy-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:50%;border:1px solid var(--ink-200);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink-600);}
.buy-close svg{width:16px;height:16px;}
.buy-card h3{font-size:22px;font-weight:800;margin:0 0 4px;letter-spacing:-.01em;}
.buy-sub{margin:0 0 18px;color:var(--ink-600);font-size:13.5px;}
.buy-card .field{margin-bottom:12px;}
.buy-err{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fdeeee;color:#d64545;font-weight:600;font-size:13px;}
.buy-fine{margin:12px 0 0;font-size:12px;color:var(--ink-400);text-align:center;line-height:1.5;}
@media(max-width:480px){.buy-card{padding:24px 18px 20px;}}

/* Pricing: the other billing cycle stays visible under the main figure */
.price-card .alt-price{display:inline-block;margin:8px 0 2px;padding:4px 10px;border-radius:999px;background:var(--green-50,#f0faf5);color:var(--green-700);font-size:12.5px;font-weight:700;}
.price-card.hi .alt-price{background:rgba(255,255,255,.14);color:#fff;}