/* ============================================================
   Go4whatsup — shared site styles
   One stylesheet powers every page. Edit tokens below to retheme.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --brand: #25D366;         /* Primary brand, for decorative accents (dots, borders, icons) */
  --brand-dark: #15803D;    /* WCAG AA compliant — white on this = 5.28:1; this on white = 5.28:1. Use for text on light, or bg with white text */
  --brand-press: #15803D;   /* Primary CTA button background — alias of brand-dark */
  --brand-pressH: #166534;  /* Hover state (darker green-800) */
  --brand-teal: #128C7E;    /* WhatsApp secondary brand teal — white text = 4.67:1 */
  --brand-soft: #E5F8EC;
  --brand-tint: #F0FBF4;

  --ink-strong: #020617;
  --ink: #0B1420;
  --ink-2: #1F2937;
  --ink-muted: #4B5563;
  --ink-soft: #6B7280;

  --surface: #FFFFFF;
  --cream: #FDF8F2;
  --cream-2: #FAF1E2;
  --border: #EADFCB;
  --border-soft: #F0E8D8;

  --accent: #0F3C5C;
  --warn: #DC2626;

  --shadow-sm: 0 1px 2px rgba(11,20,32,.04), 0 1px 1px rgba(11,20,32,.03);
  --shadow-md: 0 10px 30px -12px rgba(11,20,32,.12);
  --shadow-lg: 0 24px 60px -20px rgba(11,20,32,.18);

  --radius-sm: .5rem;
  --radius-md: .875rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --container: 1200px;
  --container-pad: 1.25rem;

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   RESET + BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
h1,h2,h3,h4{margin:0 0 .5em;font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.15}
h1{font-size:clamp(2rem,4.2vw,3.5rem);letter-spacing:-.02em}
h2{font-size:clamp(1.6rem,2.8vw,2.35rem);letter-spacing:-.015em}
h3{font-size:1.2rem}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--container-pad)}
.eyebrow{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark)}
.muted{color:var(--ink-muted)}
.section{padding:clamp(3.5rem,7vw,6rem) 0}
.section--cream{background:var(--cream-2)}
.section--white{background:var(--surface)}
.section--dark{background:var(--ink);color:#E5E7EB}
.section--dark h2, .section--dark h3{color:#FFF}
.section-head{max-width:720px;margin:0 auto 2.5rem;text-align:center}
.section-head p{color:var(--ink-muted);font-size:1.05rem}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.5rem;border-radius:var(--radius-pill);
  font-weight:600;font-size:.95rem;
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--brand-press);color:#fff;font-weight:700;box-shadow:0 6px 18px -8px rgba(21,128,61,.55)}
.btn--primary:hover{background:var(--brand-pressH)}
.btn--outline{background:transparent;color:var(--brand-dark);border:1.5px solid var(--brand)}
.btn--outline:hover{background:var(--brand-soft)}
.btn--ghost{background:transparent;color:var(--ink);padding:.6rem 1rem}
.btn--ghost:hover{color:var(--brand-dark)}
.btn--lg{padding:1rem 1.75rem;font-size:1rem}

.cta-group{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(253,248,242,.85);
  backdrop-filter:saturate(180%) blur(10px);
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, background .2s ease;
}
.header.is-scrolled{background:rgba(255,255,255,.9);border-bottom-color:var(--border-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:1.2rem;letter-spacing:-.015em;color:var(--ink)}
.logo-mark{
  width:36px;height:36px;flex:0 0 36px;
  background:url("/assets/images/logo/go4whatsup-mark.svg") center/contain no-repeat;
  font-size:0;line-height:0;color:transparent;
  filter:drop-shadow(0 6px 14px rgba(37,211,102,.28));
  transition:filter .18s ease, transform .18s ease;
}
.logo:hover .logo-mark{
  filter:drop-shadow(0 8px 18px rgba(37,211,102,.4));
  transform:translateY(-1px);
}
.logo-text{display:inline-flex;align-items:baseline;letter-spacing:-.015em}
.logo-text b{color:var(--brand);font-weight:900;font-style:normal;padding:0 .02em}
.logo-text span{color:var(--ink);font-weight:800}

.nav-list{display:none;gap:.25rem;align-items:center}
.nav-list > li > a, .nav-list > li > button{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.55rem .8rem;border-radius:var(--radius-sm);
  font-size:.92rem;font-weight:500;color:var(--ink-2);
  transition:color .15s ease, background .15s ease;
}
.nav-list > li > a:hover, .nav-list > li > button:hover{color:var(--brand-dark);background:rgba(37,211,102,.08)}
.nav-list .chev{width:10px;height:10px;opacity:.6}

.nav-ctas{display:flex;align-items:center;gap:.5rem}

.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;border:1px solid var(--border);background:var(--surface)}
.nav-toggle svg{width:20px;height:20px}

@media (min-width: 1024px){
  .nav-list{display:flex}
  .nav-toggle{display:none}
}

/* Mobile menu */
.mobile-menu{
  display:none;
  padding:1rem 0 1.25rem;
  border-top:1px solid var(--border-soft);
}
.mobile-menu.is-open{display:block}
.mobile-menu ul{display:flex;flex-direction:column;gap:.25rem}
.mobile-menu a{display:block;padding:.75rem .5rem;font-weight:500;border-radius:8px}
.mobile-menu a:hover{background:var(--brand-soft);color:var(--brand-dark)}
.mobile-menu .cta-group{justify-content:flex-start;margin-top:1rem}
@media (min-width:1024px){.mobile-menu{display:none !important}}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,5vw,4.5rem);
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(37,211,102,.12), transparent 60%),
    radial-gradient(ellipse 40% 30% at 100% 100%, rgba(37,211,102,.08), transparent 70%);
}
.hero-inner{position:relative;z-index:1;text-align:center;max-width:900px;margin:0 auto}
.hero-badges{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.5rem}
.badge{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.4rem .85rem;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border-soft);
  font-size:.82rem;font-weight:500;color:var(--ink-2);
  box-shadow:var(--shadow-sm);
}
.badge-dot{width:7px;height:7px;border-radius:50%;background:var(--brand)}
.badge svg{width:14px;height:14px}

.hero h1 .hl{background:linear-gradient(180deg,transparent 60%,rgba(37,211,102,.28) 60%);padding:0 .15em}
.hero-sub{
  max-width:680px;margin:1rem auto 1.75rem;
  color:var(--ink-muted);font-size:clamp(1rem,1.25vw,1.15rem);
}
.hero-sub b{color:var(--ink-2);font-weight:600}
.hero-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:center;margin-top:1.25rem;color:var(--ink-muted);font-size:.88rem}
.hero-meta span{display:inline-flex;align-items:center;gap:.4rem}
.hero-meta svg{width:16px;height:16px;color:var(--brand-dark)}

/* Feature pills floating beside hero on desktop */
.hero-pills{
  display:none;
  position:absolute;inset:0;
  pointer-events:none;
}
.hero-pill{
  position:absolute;
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.65rem 1rem;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-md);
  font-size:.85rem;font-weight:500;color:var(--ink-2);
  pointer-events:auto;
}
.hero-pill svg{width:16px;height:16px;color:var(--brand-dark)}
.pill-1{top:8%;left:4%}
.pill-2{top:34%;left:1%}
.pill-3{top:62%;left:6%}
.pill-4{top:8%;right:4%}
.pill-5{top:34%;right:1%}
.pill-6{top:62%;right:6%}
@media (min-width:1100px){.hero-pills{display:block}}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trust{padding:2rem 0;background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.trust-label{text-align:center;color:var(--ink-soft);font-size:.85rem;margin-bottom:1.25rem;font-weight:500}
.trust-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem 2rem;align-items:center}
@media (min-width:700px){.trust-row{grid-template-columns:repeat(6,1fr)}}
.trust-logo{
  display:flex;align-items:center;justify-content:center;
  height:36px;font-weight:700;color:var(--ink-muted);
  letter-spacing:-.01em;
  font-size:1.1rem;
}
.trust-logo--pill{
  height:40px;padding:0 1rem;border:1.5px dashed var(--border);
  border-radius:10px;background:var(--cream);font-size:.92rem;
}

/* ============================================================
   PRODUCT OVERVIEW
   ============================================================ */
.intro-grid{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.intro-grid{grid-template-columns:1.1fr 1fr;gap:4rem}}
.intro-def{font-size:1.08rem;color:var(--ink-muted)}
.intro-def b{color:var(--ink-2);font-weight:600}
.pillars{display:grid;gap:1rem}
.pillar{
  display:flex;gap:1rem;align-items:flex-start;
  padding:1.25rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
}
.pillar-icon{
  flex-shrink:0;width:40px;height:40px;border-radius:10px;
  background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
}
.pillar-icon svg{width:22px;height:22px}
.pillar h3{font-size:1rem;margin:0 0 .25rem}
.pillar p{margin:0;color:var(--ink-muted);font-size:.92rem;line-height:1.5}

/* ============================================================
   FEATURE GRID (tiles)
   ============================================================ */
.grid-3{display:grid;gap:1.1rem;grid-template-columns:repeat(1,1fr)}
@media (min-width:700px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
.tile{
  padding:1.5rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--brand-soft)}
.tile-icon{
  width:44px;height:44px;border-radius:12px;
  background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;margin-bottom:.95rem;
}
.tile-icon svg{width:24px;height:24px}
.tile h3{font-size:1.05rem;margin:0 0 .4rem}
.tile p{margin:0;color:var(--ink-muted);font-size:.92rem;line-height:1.55}
.tile .tile-link{
  display:inline-flex;align-items:center;gap:.3rem;margin-top:.9rem;
  color:var(--brand-dark);font-weight:600;font-size:.88rem;
}
.tile .tile-link:hover{gap:.5rem}

.section-foot{text-align:center;margin-top:2rem}
.section-foot a{color:var(--brand-dark);font-weight:600}

/* ============================================================
   SOLUTIONS — larger cards
   ============================================================ */
.solution-card{
  padding:1.75rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .2s ease, box-shadow .2s ease;
  display:flex;flex-direction:column;height:100%;
}
.solution-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.solution-card .tile-icon{margin-bottom:1.1rem}
.solution-card h3{font-size:1.15rem}
.solution-card p{flex:1}

/* ============================================================
   INDUSTRIES STRIP
   ============================================================ */
.industry-grid{
  display:grid;gap:.85rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:700px){.industry-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1100px){.industry-grid{grid-template-columns:repeat(7,1fr)}}
.industry{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.2rem .75rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .2s ease, border-color .2s ease;
}
.industry:hover{transform:translateY(-2px);border-color:var(--brand)}
.industry-icon{
  width:44px;height:44px;border-radius:12px;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
}
.industry-icon svg{width:22px;height:22px}
.industry-name{font-weight:600;font-size:.88rem;color:var(--ink-2)}
.industry-tag{font-size:.78rem;color:var(--ink-soft)}

/* ============================================================
   INTEGRATIONS
   ============================================================ */
.integrations{
  display:grid;gap:1rem;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:800px){.integrations{grid-template-columns:repeat(4,1fr)}}
.int-card{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;
  padding:1.5rem 1.25rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.int-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.int-logo{
  width:54px;height:54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cream);border:1px solid var(--border-soft);
  padding:10px;flex-shrink:0;
}
.int-logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Brand-coloured backgrounds remain available if ever needed */
.int-gs{background:#E8F5E9;border-color:#C8E6C9}
.int-zoho{background:#FDECEC;border-color:#F8C9C9}
.int-odoo{background:#F2EBF0;border-color:#D9C8D2}
.int-shopify{background:#EEF5DC;border-color:#D6E5B5}
.int-card h3{font-size:1rem;margin:0 .25rem}
.int-card p{font-size:.85rem;color:var(--ink-muted);margin:0}

/* ============================================================
   CASE STUDIES
   ============================================================ */
.case-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:800px){.case-grid{grid-template-columns:repeat(3,1fr)}}
.case-card{
  padding:1.5rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;gap:.75rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.case-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.case-meta{display:flex;align-items:center;gap:.5rem;font-size:.82rem}
.case-tag{padding:.2rem .65rem;border-radius:var(--radius-pill);background:var(--brand-soft);color:var(--brand-dark);font-weight:600}
.case-logo{
  width:56px;height:56px;border-radius:10px;background:var(--cream-2);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;color:var(--accent);font-size:.95rem;letter-spacing:.02em;
}
.case-metric{font-size:1.6rem;font-weight:800;color:var(--brand-dark);letter-spacing:-.01em}
.case-card h3{font-size:1.05rem;margin:0}
.case-card p{font-size:.92rem;color:var(--ink-muted);margin:0;flex:1}
.case-card a{color:var(--brand-dark);font-weight:600;font-size:.9rem;display:inline-flex;align-items:center;gap:.3rem}

.testimonial{
  margin-top:3rem;padding:2rem;border-radius:var(--radius-lg);
  background:var(--cream);border:1px solid var(--border-soft);
  text-align:center;max-width:780px;margin-left:auto;margin-right:auto;
}
.testimonial blockquote{
  margin:0 0 1rem;font-size:1.2rem;line-height:1.55;font-weight:500;color:var(--ink);
}
.testimonial-author{display:inline-flex;align-items:center;gap:.75rem;font-size:.9rem;color:var(--ink-muted)}
.testimonial-avatar{
  width:44px;height:44px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-weight:700;
}
.testimonial-author b{color:var(--ink)}

/* ============================================================
   SECURITY CALLOUT
   ============================================================ */
.security{
  display:grid;gap:1.5rem;align-items:center;
  padding:2rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--cream) 0%,var(--cream-2) 100%);
  border:1px solid var(--border-soft);
}
@media (min-width:800px){.security{grid-template-columns:1.4fr 1fr;padding:2.5rem 3rem}}
.security h3{font-size:1.4rem;margin-bottom:.5rem}
.security p{color:var(--ink-muted);margin:0 0 1rem}
.security-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.sec-badge{
  padding:.45rem .85rem;border-radius:var(--radius-pill);
  background:var(--surface);border:1px solid var(--border);
  font-size:.82rem;font-weight:600;color:var(--ink-2);
}
.security-link{margin-top:1rem;display:inline-flex;align-items:center;gap:.3rem;color:var(--brand-dark);font-weight:600}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:800px;margin:0 auto}
.faq-item{
  border:1px solid var(--border-soft);
  border-radius:var(--radius-md);
  background:var(--surface);
  margin-bottom:.75rem;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.faq-item:hover{border-color:var(--border)}
.faq-item[open]{border-color:var(--brand);box-shadow:var(--shadow-sm)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem 1.25rem;cursor:pointer;
  font-weight:600;font-size:1rem;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{
  flex-shrink:0;width:24px;height:24px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
  transition:transform .2s ease, background .2s ease;
  font-size:1.1rem;line-height:1;font-weight:700;
}
.faq-item[open] .faq-icon{transform:rotate(45deg);background:var(--brand);color:#fff}
.faq-body{padding:0 1.25rem 1.25rem;color:var(--ink-muted);line-height:1.65}

/* ============================================================
   PRE-FOOTER CTA BAND
   ============================================================ */
.cta-band{
  position:relative;
  padding:clamp(3rem,6vw,4.5rem) 2rem;
  border-radius:var(--radius-xl);
  background:linear-gradient(135deg,#0B3A2A 0%,#114C38 60%,#0B3A2A 100%);
  color:#fff;text-align:center;
  overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 0% 0%, rgba(37,211,102,.3), transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 100%, rgba(37,211,102,.2), transparent 60%);
}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;margin-bottom:.75rem}
.cta-band p{color:rgba(255,255,255,.85);max-width:560px;margin:0 auto 1.75rem;font-size:1.05rem}
.cta-band .btn--outline{border-color:rgba(255,255,255,.4);color:#fff}
.cta-band .btn--outline:hover{background:rgba(255,255,255,.1)}
.cta-reassure{margin-top:1rem;color:rgba(255,255,255,.65);font-size:.85rem}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:#C7CDD4;padding:3.5rem 0 1.5rem}
.footer a{color:#C7CDD4;transition:color .15s ease}
.footer a:hover{color:var(--brand)}
.footer-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:700px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.footer-grid{grid-template-columns:1.5fr repeat(4,1fr)}}
.footer-brand .logo-text{color:#fff}
.footer-brand p{font-size:.9rem;color:#9CA3AF;margin:1rem 0;max-width:300px}
.footer h3,.footer h4{color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}
.footer ul{display:flex;flex-direction:column;gap:.55rem;font-size:.92rem}

.footer-contact{
  padding-top:2rem;margin-top:2.5rem;border-top:1px solid rgba(255,255,255,.1);
  display:grid;gap:1.5rem;font-size:.88rem;color:#9CA3AF;
}
@media (min-width:800px){.footer-contact{grid-template-columns:1fr 1fr 1fr}}
.footer-contact h4,.footer-contact h5{color:#fff;font-size:.85rem;margin:0 0 .4rem;font-weight:700}
.footer-contact p{margin:.2rem 0}

.footer-bottom{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.08);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-size:.82rem;color:#94A3B8;
}
.footer-socials{display:flex;gap:.5rem}
.footer-socials a{
  width:34px;height:34px;border-radius:8px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;
}
.footer-socials a:hover{background:var(--brand);color:#fff}
.footer-socials svg{width:16px;height:16px}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
/* ============================================================
   ACCESSIBILITY HELPERS
   ============================================================ */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;top:-40px;left:1rem;z-index:100;
  padding:.5rem 1rem;background:var(--ink);color:#fff;border-radius:6px;
  transition:top .2s;
}
.skip:focus{top:1rem}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ============================================================
   PAGE-SPECIFIC LAYOUTS — added for Pricing, Contact, Demo
   ============================================================ */

/* --- Asymmetric split hero (left-aligned + visual block right) --- */
.hero--split{
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,5vw,4rem);
  overflow:hidden;position:relative;
}
.hero--split::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 40% at 90% 20%, rgba(37,211,102,.12), transparent 60%);
}
.hero--split .hero-split-grid{
  display:grid;gap:2.5rem;align-items:center;position:relative;z-index:1;
}
@media (min-width:960px){.hero--split .hero-split-grid{grid-template-columns:1.1fr 1fr;gap:4rem}}

/* Solutions pages use .hero--split directly as the grid (no .hero-split-grid child).
   Give it explicit columns so the hero text + visual sit side-by-side instead of stacking. */
@media (min-width:960px){
  .hero--split{grid-template-columns:1.1fr 1fr;gap:3rem !important}
}
/* Keep the hero visual from ballooning vertically (inline aspect-ratio:1/1 can render huge) */
.sol-page .hero .feat-visual{max-height:440px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sol-page .hero .feat-visual > *{width:100%;max-width:480px;margin:auto}
.hero--split h1{font-size:clamp(1.9rem,3.6vw,3.1rem);margin:0 0 1rem}
.hero--split .hero-lead{color:var(--ink-muted);font-size:clamp(1rem,1.15vw,1.1rem);margin:0 0 1.5rem;max-width:540px}
.hero--split .cta-group{justify-content:flex-start}

/* --- Compact banner hero (for contact, legal) --- */
.hero--compact{
  padding:clamp(2.5rem,4vw,3.5rem) 0 clamp(2rem,3vw,2.5rem);
  background:linear-gradient(180deg,var(--cream) 0%,var(--surface) 100%);
  border-bottom:1px solid var(--border-soft);
  position:relative;
  overflow:hidden;
}
.hero--compact::after{
  content:"";position:absolute;right:-5%;top:-30%;width:60%;height:150%;
  background:radial-gradient(circle at center, rgba(37,211,102,.08), transparent 60%);
  pointer-events:none;
}
.hero--compact .hero-inner-c{position:relative;z-index:1;max-width:720px}
.hero--compact h1{font-size:clamp(1.8rem,3.2vw,2.6rem);margin:0 0 .75rem}
.hero--compact p{color:var(--ink-muted);font-size:1.05rem;margin:0;max-width:600px}

/* --- Volume calculator widget (pricing hero) --- */
.calc{
  padding:1.75rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft);box-shadow:var(--shadow-md);
}
.calc h3{font-size:1rem;margin:0 0 .15rem;color:var(--ink-2)}
.calc .calc-hint{font-size:.85rem;color:var(--ink-muted);margin:0 0 1.25rem}
.calc input[type="range"]{
  -webkit-appearance:none;width:100%;height:6px;background:var(--border-soft);
  border-radius:999px;outline:none;margin:.5rem 0 .75rem;
}
.calc input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--brand);border:3px solid #fff;box-shadow:0 2px 8px rgba(37,211,102,.4);
  cursor:pointer;
}
.calc input[type="range"]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--brand);border:3px solid #fff;
  box-shadow:0 2px 8px rgba(37,211,102,.4);cursor:pointer;border-width:3px;
}
.calc-row{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-soft)}
.calc-result{
  margin-top:1rem;padding:1rem 1.25rem;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--brand-soft),var(--brand-tint));
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.calc-result .amt{font-size:1.6rem;font-weight:800;color:var(--brand-dark);letter-spacing:-.01em}
.calc-result .amt-label{font-size:.82rem;color:var(--ink-muted);font-weight:500}

/* --- Plan cards, anchor treatment --- */
.plan-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:760px){.plan-grid{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.plan{
  position:relative;padding:2rem 1.5rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.plan:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.plan--anchor{
  background:linear-gradient(180deg,#0E3B2A 0%, #0B2E22 100%);color:#DFEAE3;
  border:0;box-shadow:0 30px 60px -30px rgba(11,20,32,.45);
  transform:translateY(-8px);
}
@media (min-width:760px){.plan--anchor{transform:translateY(-16px)}}
.plan--anchor h3,.plan--anchor .plan-price,.plan--anchor .plan-feat b{color:#fff}
.plan--anchor .plan-price-unit,.plan--anchor .plan-sub{color:rgba(255,255,255,.7)}
.plan--anchor .plan-feat{color:rgba(255,255,255,.85)}
.plan--anchor .plan-feat svg{color:var(--brand)}
.plan--anchor .plan-badge{background:var(--brand-press);color:#fff}
.plan--anchor .btn--outline{border-color:rgba(255,255,255,.35);color:#fff}
.plan--anchor .btn--outline:hover{background:rgba(255,255,255,.1)}
.plan-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  padding:.3rem .85rem;border-radius:999px;background:var(--accent);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.plan-name{font-size:.85rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-dark);margin:0}
.plan--anchor .plan-name{color:var(--brand)}
.plan h3{font-size:1.4rem;margin:.35rem 0 .35rem}
.plan-sub{font-size:.88rem;color:var(--ink-muted);margin:0 0 1.25rem}
.plan-price{font-size:2.4rem;font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1}
.plan-price-unit{font-size:.9rem;font-weight:500;color:var(--ink-muted);margin-left:.25rem}
.plan-feats{list-style:none;padding:0;margin:1.5rem 0;display:flex;flex-direction:column;gap:.7rem}
.plan-feat{display:flex;gap:.6rem;align-items:flex-start;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.plan-feat svg{flex-shrink:0;width:18px;height:18px;color:var(--brand-dark);margin-top:.15rem}
.plan .btn{margin-top:auto}

/* --- Comparison table --- */
.compare{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border-radius:var(--radius-md);
  overflow:hidden;border:1px solid var(--border-soft);
  font-size:.94rem;
}
.compare thead th{
  padding:1.1rem 1rem;font-weight:700;font-size:.88rem;letter-spacing:.04em;
  text-align:left;color:var(--ink);background:var(--cream);
  border-bottom:1px solid var(--border);
}
.compare thead th:first-child{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:600}
.compare thead th.is-anchor{background:var(--ink);color:#fff;position:relative}
.compare thead th.is-anchor::after{content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--brand)}
.compare tbody td,.compare tbody th{padding:.95rem 1rem;border-bottom:1px solid var(--border-soft);vertical-align:top}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare tbody th{text-align:left;font-weight:500;color:var(--ink-2)}
.compare tbody td{text-align:center;color:var(--ink-2)}
.compare tbody td.is-anchor{background:var(--brand-tint)}
.compare .group-head th{
  background:var(--cream-2);color:var(--ink);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;padding:.7rem 1rem;
}
.compare .yes{color:var(--brand-dark);font-weight:700;font-size:1.05rem}
.compare .no{color:var(--ink-soft);opacity:.5}
.compare-wrap{overflow-x:auto;border-radius:var(--radius-md)}

/* --- Meta rate table (compact) --- */
.rates{display:grid;gap:.5rem;margin:1.5rem 0}
.rate-row{
  display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;
  padding:.85rem 1.1rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
}
.rate-dot{width:10px;height:10px;border-radius:50%}
.rate-dot--mkt{background:#DC2626}
.rate-dot--util{background:#F59E0B}
.rate-dot--auth{background:#3B82F6}
.rate-dot--svc{background:var(--brand)}
.rate-name{font-weight:600;color:var(--ink-2)}
.rate-desc{color:var(--ink-muted);font-size:.88rem;margin:.1rem 0 0}
.rate-cost{font-weight:700;color:var(--ink);font-size:.95rem;white-space:nowrap}

/* --- Offices / Map block (contact) --- */
.office-map{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  background:linear-gradient(135deg,#F5EDD9 0%, #EADFCB 100%);
  border:1px solid var(--border);
  min-height:380px;
  display:grid;
}
@media (min-width:800px){.office-map{grid-template-columns:1fr 1fr}}
.office-card{
  padding:2rem;display:flex;flex-direction:column;gap:.5rem;position:relative;
  background:var(--surface);
}
.office-card + .office-card{border-top:1px solid var(--border-soft)}
@media (min-width:800px){.office-card + .office-card{border-top:0;border-left:1px solid var(--border-soft)}}
.office-flag{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .8rem;background:var(--brand-soft);color:var(--brand-dark);
  border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  width:fit-content;
}
.office-card h3{font-size:1.25rem;margin:.3rem 0 .2rem}
.office-card .addr{color:var(--ink-muted);font-size:.95rem;margin:.15rem 0}
.office-contact-row{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.85rem;
}
.office-link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.55rem .9rem;border-radius:999px;
  background:var(--cream);color:var(--ink-2);border:1px solid var(--border-soft);
  font-size:.85rem;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.office-link:hover{background:var(--brand-soft);color:var(--brand-dark)}
.office-link svg{width:14px;height:14px;color:var(--brand-dark)}

/* --- Chat-themed contact form --- */
.chat-form-wrap{
  position:relative;padding:1.75rem;border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(37,211,102,.03), transparent 40%),
    repeating-linear-gradient(45deg, rgba(37,211,102,.02) 0 14px, transparent 14px 28px),
    var(--surface);
  border:1px solid var(--border-soft);box-shadow:var(--shadow-md);
}
.chat-bubble-in{
  display:inline-block;padding:.75rem 1rem;border-radius:16px 16px 16px 2px;
  background:#fff;border:1px solid var(--border-soft);
  font-size:.92rem;color:var(--ink-2);box-shadow:var(--shadow-sm);
  max-width:85%;
}
.chat-bubble-in small{display:block;font-size:.72rem;color:var(--ink-soft);margin-top:.2rem}
.chat-form-wrap form{margin-top:1.25rem;display:grid;gap:.75rem}
.chat-field{
  display:grid;gap:.3rem;
}
.chat-field label{font-size:.82rem;font-weight:600;color:var(--ink-2)}
.chat-field input,.chat-field textarea,.chat-field select{
  padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px;
  font-family:inherit;font-size:.95rem;background:var(--cream);color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.chat-field input:focus,.chat-field textarea:focus,.chat-field select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,211,102,.15);
}
.chat-2col{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:560px){.chat-2col{grid-template-columns:1fr 1fr}}
.chat-send{
  display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.5rem;
  background:var(--brand);color:#fff;border-radius:999px;
  font-weight:700;font-size:.95rem;justify-self:start;
  box-shadow:0 8px 24px -10px rgba(37,211,102,.6);
}
.chat-send:hover{background:var(--brand-dark)}
.chat-send svg{width:18px;height:18px}
.chat-send[disabled]{opacity:.65;cursor:wait}

/* --- Form validation states --- */
.chat-field.has-error input,
.chat-field.has-error textarea,
.chat-field.has-error select{
  border-color:#d44a4a;box-shadow:0 0 0 3px rgba(212,74,74,.12);background:#fff6f6;
}
.chat-field .field-error{
  display:block;color:#b62929;font-size:.78rem;font-weight:600;margin-top:.15rem;
}

/* --- Form success card (after WhatsApp redirect) --- */
.form-success{
  margin-top:1.25rem;padding:1.5rem 1.25rem;border-radius:14px;
  background:linear-gradient(180deg,#e8fbef 0%,#f5fff9 100%);
  border:1px solid rgba(37,211,102,.35);
  text-align:center;
}
.form-success__icon{
  width:54px;height:54px;margin:0 auto .6rem;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(37,211,102,.55);
}
.form-success__icon svg{width:28px;height:28px}
.form-success h3{margin:.25rem 0 .4rem;font-size:1.15rem;color:var(--ink)}
.form-success p{margin:0 auto .9rem;color:var(--ink-muted);font-size:.93rem;line-height:1.55;max-width:34ch}
.form-success__actions{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.form-success__actions .chat-send{justify-self:center;min-height:44px}
.form-success__alt{
  font-size:.85rem;color:var(--brand-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px;
}

/* --- Timeline (demo page) --- */
.timeline{list-style:none;padding:0;margin:0;position:relative}
.timeline::before{
  content:"";position:absolute;left:18px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--brand) 0%,var(--border-soft) 100%);
}
.timeline li{position:relative;padding:0 0 1.25rem 3rem;margin:0}
.timeline li:last-child{padding-bottom:0}
.timeline .step-dot{
  position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;box-shadow:0 6px 16px -6px rgba(37,211,102,.5);
}
.timeline li.is-muted .step-dot{background:var(--border);color:var(--ink-muted);box-shadow:none}
.timeline h3{font-size:1.05rem;margin:.25rem 0 .25rem}
.timeline p{margin:0;color:var(--ink-muted);font-size:.93rem;line-height:1.55}
.timeline .step-meta{font-size:.78rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.08em}

/* --- Stat strip (demo page social proof) --- */
.stat-strip{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
  padding:1.25rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  margin:1.5rem 0;
}
@media (min-width:700px){.stat-strip{grid-template-columns:repeat(4,1fr)}}
.stat-cell{text-align:center}
.stat-num{font-size:1.5rem;font-weight:800;color:var(--brand-dark);letter-spacing:-.01em;line-height:1}
.stat-lbl{font-size:.78rem;color:var(--ink-muted);margin-top:.35rem}

/* --- Sticky form card (demo) --- */
@media (min-width:960px){
  .sticky-form{position:sticky;top:92px}
}

/* --- Logo strip --- */
.logo-strip{
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:center;
  padding:1rem 0;color:var(--ink-soft);
}
.logo-strip-label{font-size:.78rem;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em}
.logo-strip span.logo-name{font-weight:700;font-size:1rem;opacity:.65;letter-spacing:-.01em}

/* --- Pull quote / testimonial (compact) --- */
.quote-card{
  padding:1.5rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,#F0FBF4 0%,#E5F8EC 100%);
  border:1px solid var(--brand-soft);
  position:relative;
}
.quote-card::before{
  content:"“";position:absolute;top:-8px;left:16px;font-size:4rem;line-height:1;
  color:var(--brand);font-family:Georgia,serif;opacity:.5;
}
.quote-card blockquote{margin:0 0 1rem;font-size:1.05rem;line-height:1.55;color:var(--ink);font-weight:500}
.quote-author{display:flex;align-items:center;gap:.75rem;font-size:.88rem;color:var(--ink-muted)}
.quote-avatar{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.quote-author b{color:var(--ink);display:block;font-size:.92rem}
.quote-author small{color:var(--ink-soft);font-size:.78rem}

/* ============================================================
   BATCH 2 — Features, About, Why, FAQ, Security, Compliance
   ============================================================ */

/* --- Alternating feature rows (Features page) --- */
.feat-row{
  display:grid;gap:2rem;align-items:center;padding:clamp(2rem,4vw,3.5rem) 0;
  border-bottom:1px dashed var(--border-soft);
}
.feat-row:last-child{border-bottom:0}
@media (min-width:900px){.feat-row{grid-template-columns:1fr 1fr;gap:4rem}}
.feat-row.reverse .feat-copy{order:2}
@media (max-width:899px){.feat-row.reverse .feat-copy{order:initial}}
.feat-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-dark);
  font-weight:800;font-size:.88rem;margin-bottom:.75rem;
}
.feat-copy h2{font-size:clamp(1.4rem,2vw,1.8rem);margin:0 0 .5rem}
.feat-copy p{color:var(--ink-muted);font-size:1rem}
.feat-copy ul{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem}
.feat-copy ul li{display:flex;gap:.5rem;align-items:flex-start;font-size:.93rem;color:var(--ink-2)}
.feat-copy ul li::before{content:"✓";color:var(--brand-dark);font-weight:700;flex-shrink:0}
.feat-visual{
  position:relative;aspect-ratio:5/4;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--cream) 0%,var(--cream-2) 100%);
  border:1px solid var(--border-soft);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.feat-visual::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 30%,rgba(37,211,102,.18),transparent 50%),
    radial-gradient(circle at 70% 70%,rgba(37,211,102,.08),transparent 50%);
}
.feat-visual-card{
  position:relative;padding:1.5rem;border-radius:var(--radius-md);
  background:var(--surface);box-shadow:var(--shadow-md);
  border:1px solid var(--border-soft);max-width:80%;
}
.feat-visual-card .chat-bubble-in{display:block;max-width:100%;margin-bottom:.5rem}
.feat-visual .big-icon{
  width:96px;height:96px;border-radius:24px;
  background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 20px 40px -10px rgba(37,211,102,.5);
}
.feat-visual .big-icon svg{width:48px;height:48px}

/* --- Editorial prose (About) --- */
.editorial{max-width:720px;margin:0 auto}
.editorial p{font-size:1.08rem;line-height:1.75;color:var(--ink-2);margin:0 0 1.25rem}
.editorial p:first-of-type::first-letter{
  font-size:3.5rem;font-weight:800;float:left;line-height:.9;
  padding:.15rem .5rem 0 0;color:var(--brand-dark);font-family:Georgia,serif;
}
.editorial h2{font-size:1.6rem;margin:2.5rem 0 1rem}
.editorial blockquote{
  margin:2rem 0;padding:1.5rem 2rem;border-left:4px solid var(--brand);
  background:var(--brand-tint);font-size:1.15rem;line-height:1.6;font-style:italic;color:var(--ink)
}
.editorial cite{display:block;font-style:normal;font-size:.9rem;color:var(--ink-muted);margin-top:.5rem}

.story-hero{
  padding:clamp(3rem,6vw,5rem) 0 clamp(2rem,4vw,3rem);
  text-align:center;position:relative;overflow:hidden;
}
.story-hero::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 50% 40% at 50% 0%, rgba(37,211,102,.1), transparent 60%);
  pointer-events:none;
}
.story-hero h1{font-size:clamp(2rem,4vw,3rem);margin:0 0 1rem;position:relative}
.story-hero p{font-size:1.15rem;color:var(--ink-muted);max-width:600px;margin:0 auto;position:relative}

.story-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;
  max-width:900px;margin:2.5rem auto;
}
@media (min-width:700px){.story-stats{grid-template-columns:repeat(4,1fr)}}
.story-stat{
  text-align:center;padding:1.5rem 1rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
}
.story-stat .num{font-size:2rem;font-weight:800;color:var(--brand-dark);letter-spacing:-.02em;line-height:1}
.story-stat .lbl{font-size:.82rem;color:var(--ink-muted);margin-top:.4rem}

/* --- Why page: vs-comparison + reasons grid --- */
/* Light European-style hero — compare + why-go4whatsup pages */
.vs-hero{
  padding:clamp(3rem,5vw,4rem) 0;
  background:linear-gradient(180deg,#ECFDF5 0%, #FFFFFF 100%);
  color:#0B1B14;text-align:center;position:relative;overflow:hidden;
  border-bottom:1px solid #D1FAE5;
}
.vs-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(16,185,129,.10), transparent 70%),
    radial-gradient(ellipse 30% 40% at 8% 100%, rgba(37,211,102,.06), transparent 75%);
}
.vs-hero > .container{position:relative}
.vs-hero h1{color:#0B1B14;font-size:clamp(2rem,4vw,3rem);margin:0 0 1rem;font-weight:800;letter-spacing:-.02em}
.vs-hero p{color:#334155;max-width:680px;margin:0 auto;font-size:1.1rem;line-height:1.55}

.vs-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border-radius:var(--radius-lg);
  border:1px solid var(--border-soft);overflow:hidden;font-size:.94rem;
}
.vs-table thead th{
  padding:1.2rem 1rem;font-size:.95rem;font-weight:700;text-align:center;
  background:var(--cream);border-bottom:2px solid var(--border);
}
.vs-table thead th:first-child{text-align:left;color:var(--ink-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.vs-table thead th.vs-us{background:var(--brand);color:#fff;position:relative}
.vs-table thead th.vs-us::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--brand-dark)}
.vs-table tbody th{padding:1rem;font-weight:500;color:var(--ink-2);text-align:left;border-bottom:1px solid var(--border-soft)}
.vs-table tbody td{padding:1rem;text-align:center;border-bottom:1px solid var(--border-soft);color:var(--ink-2)}
.vs-table tbody tr:last-child td, .vs-table tbody tr:last-child th{border-bottom:0}
.vs-table td.vs-us{background:var(--brand-tint);font-weight:600;color:var(--brand-dark)}
.vs-table td.vs-check{font-size:1.2rem;color:var(--brand-dark);font-weight:700}
.vs-table td.vs-miss{font-size:1.2rem;color:#DC2626;font-weight:700}

.reasons-grid{display:grid;gap:1.25rem;grid-template-columns:repeat(1,1fr)}
@media (min-width:700px){.reasons-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.reasons-grid{grid-template-columns:repeat(3,1fr)}}
.reason{
  position:relative;padding:1.75rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .2s ease, box-shadow .2s ease;
}
.reason:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.reason-num{
  font-size:3rem;font-weight:800;line-height:1;color:var(--brand);
  letter-spacing:-.04em;opacity:.3;position:absolute;top:1rem;right:1.25rem;
}
.reason h3{font-size:1.1rem;margin:0 0 .5rem}
.reason p{margin:0;color:var(--ink-muted);font-size:.92rem;line-height:1.55}

/* --- FAQ page: tabs + filtered accordion --- */
.faq-tabs{
  display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:2rem;
}
.faq-tab{
  padding:.55rem 1.15rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.88rem;font-weight:600;color:var(--ink-2);cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.faq-tab:hover{background:var(--brand-soft);color:var(--brand-dark)}
.faq-tab.is-active{background:var(--brand);color:#fff;border-color:var(--brand)}
.faq-search{
  display:block;max-width:520px;margin:0 auto 2rem;
  padding:.85rem 1.25rem;border:1px solid var(--border);border-radius:999px;
  font-family:inherit;font-size:.95rem;background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.faq-search:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,211,102,.15)}
.faq-item.is-hidden{display:none}
.faq-empty{text-align:center;color:var(--ink-muted);padding:2rem;display:none}
.faq-empty.is-visible{display:block}

/* --- Security: cert badge wall + themed sections --- */
.cert-wall{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:760px;margin:0 auto;
}
@media (min-width:700px){.cert-wall{grid-template-columns:repeat(4,1fr)}}
.cert{
  aspect-ratio:1/1;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  padding:1rem;text-align:center;transition:transform .2s ease;
}
.cert:hover{transform:translateY(-2px)}
.cert-icon{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
}
.cert-icon svg{width:24px;height:24px}
.cert b{font-size:.9rem;color:var(--ink);letter-spacing:-.01em}
.cert small{font-size:.72rem;color:var(--ink-soft)}

.sec-section{
  display:grid;gap:1.75rem;align-items:start;padding:2rem 0;
  border-bottom:1px solid var(--border-soft);
}
.sec-section:last-of-type{border-bottom:0}
@media (min-width:800px){.sec-section{grid-template-columns:200px 1fr;gap:3rem}}
.sec-section-label{
  font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-dark);
}
.sec-section-label b{display:block;font-size:1.3rem;color:var(--ink);letter-spacing:-.01em;margin-top:.5rem;text-transform:none;font-weight:800}
.sec-section-body h3{font-size:1.05rem;margin:0 0 .4rem}
.sec-section-body p{color:var(--ink-muted);margin:0 0 1rem}
.sec-controls{display:grid;gap:.75rem}
.sec-control{
  padding:.85rem 1.1rem;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border-soft);
  display:flex;gap:.85rem;align-items:flex-start;
}
.sec-control svg{flex-shrink:0;width:18px;height:18px;color:var(--brand-dark);margin-top:.15rem}
.sec-control b{display:block;font-size:.93rem;color:var(--ink);margin-bottom:.15rem}
.sec-control span{font-size:.85rem;color:var(--ink-muted);display:block}

.doc-list{display:grid;gap:.75rem;margin:1.5rem 0}
.doc-link{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.25rem;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:border-color .15s ease, background .15s ease;
}
.doc-link:hover{border-color:var(--brand);background:var(--brand-tint)}
.doc-icon{
  flex-shrink:0;width:36px;height:36px;border-radius:8px;
  background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
}
.doc-icon svg{width:18px;height:18px}
.doc-link b{display:block;font-size:.92rem;color:var(--ink);margin:0}
.doc-link small{font-size:.8rem;color:var(--ink-muted)}
.doc-link .arrow{margin-left:auto;color:var(--ink-soft)}

/* --- Compliance: regulation cards + matrix --- */
.reg-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:700px){.reg-grid{grid-template-columns:repeat(2,1fr)}}
.reg{
  position:relative;padding:1.75rem;border-radius:var(--radius-lg);
  background:linear-gradient(135deg,var(--surface) 0%,var(--brand-tint) 100%);
  border:1px solid var(--border-soft);overflow:hidden;
}
.reg::before{
  content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;
  border-radius:50%;background:rgba(37,211,102,.08);
}
.reg-flag{
  display:inline-block;padding:.3rem .75rem;background:var(--brand);color:#fff;
  border-radius:999px;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:.75rem;position:relative;
}
.reg h3{font-size:1.25rem;margin:.15rem 0 .5rem;position:relative}
.reg .reg-what{font-size:.92rem;color:var(--ink-muted);position:relative;margin:0 0 1rem}
.reg .reg-you{padding:.85rem 1rem;border-radius:var(--radius-sm);background:var(--surface);border:1px solid var(--border-soft);position:relative}
.reg .reg-you b{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--brand-dark);font-weight:700;margin-bottom:.25rem}
.reg .reg-you span{font-size:.92rem;color:var(--ink-2)}

.matrix{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);
  overflow:hidden;font-size:.93rem;
}
.matrix thead th{
  padding:1rem;font-weight:700;font-size:.85rem;text-align:center;
  background:var(--cream);border-bottom:1px solid var(--border);color:var(--ink);
}
.matrix thead th:first-child{text-align:left;color:var(--ink-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.matrix tbody th{padding:.85rem 1rem;text-align:left;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--border-soft)}
.matrix tbody td{padding:.85rem 1rem;text-align:center;border-bottom:1px solid var(--border-soft);color:var(--ink-2)}
.matrix tbody tr:last-child td, .matrix tbody tr:last-child th{border-bottom:0}
.matrix .status-yes{color:var(--brand-dark);font-weight:700}
.matrix .status-partial{color:#F59E0B;font-weight:600}
.matrix .status-none{color:var(--ink-soft)}

/* ============================================================
   FEATURES PAGE — split hero + index strip + flow / cert mocks
   ============================================================ */
.feat-hero{
  padding:clamp(3rem,5vw,4.5rem) 0 clamp(1.5rem,3vw,2.5rem);
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream-2) 100%);
  border-bottom:1px solid var(--border-soft);
}
.feat-hero-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:960px){.feat-hero-grid{grid-template-columns:1.05fr 1fr;gap:3.5rem}}
.feat-hero h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;letter-spacing:-.02em;margin:.5rem 0 1rem}
.feat-hero p.lead{font-size:1.1rem;color:var(--ink-muted);max-width:560px;margin:0 0 1.5rem}
.feat-stack{
  position:relative;display:flex;flex-direction:column;gap:.75rem;
  padding:1rem;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
}
.feat-stack-tile{
  display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:var(--surface);transition:transform .2s ease, box-shadow .2s ease;
}
.feat-stack-tile:hover{transform:translateX(4px);box-shadow:var(--shadow-sm)}
.feat-stack-tile .ico{
  width:40px;height:40px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-soft);color:var(--brand-dark);
}
.feat-stack-tile .ico svg{width:22px;height:22px}
.feat-stack-tile h4{margin:0;font-size:.95rem;color:var(--ink);font-weight:700}
.feat-stack-tile p{margin:.1rem 0 0;font-size:.8rem;color:var(--ink-soft);line-height:1.35}
.feat-stack-tile.is-accent{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.feat-stack-tile.is-accent .ico{background:rgba(255,255,255,.15);color:#fff}
.feat-stack-tile.is-accent h4{color:#fff}
.feat-stack-tile.is-accent p{color:rgba(255,255,255,.78)}

/* Feature index strip — small cards just below hero, anchor links */
.feat-index{
  display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);
  padding:1.5rem 0;
}
@media (min-width:720px){.feat-index{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.feat-index{grid-template-columns:repeat(6,1fr)}}
.feat-index a{
  display:block;padding:.85rem .9rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
  text-decoration:none;color:var(--ink);font-size:.85rem;font-weight:600;
  transition:border-color .2s ease, transform .2s ease;
}
.feat-index a:hover{border-color:var(--brand);transform:translateY(-2px)}
.feat-index a span{display:block;font-size:.7rem;color:var(--brand-dark);font-weight:800;margin-bottom:.15rem;letter-spacing:.04em}

/* Flow-builder mock (row 02) */
.flow-mock{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:90%;
  align-items:center;
}
.flow-node{
  padding:.6rem .5rem;border-radius:10px;background:var(--surface);
  border:1px solid var(--border);text-align:center;font-size:.72rem;
  color:var(--ink-2);font-weight:600;box-shadow:var(--shadow-sm);position:relative;
}
.flow-node.is-trigger{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.flow-node.is-action{background:var(--brand-soft);color:var(--brand-dark);border-color:var(--brand)}
.flow-node.is-decision{background:#FEF3C7;color:#92400E;border-color:#F59E0B}
.flow-arrow{
  height:2px;background:var(--border);position:relative;
}
.flow-arrow::after{
  content:"";position:absolute;right:-2px;top:-3px;
  width:0;height:0;border-left:6px solid var(--border);
  border-top:4px solid transparent;border-bottom:4px solid transparent;
}
.flow-mock .flow-row{display:contents}
.flow-mock .flow-spacer{height:.25rem}

/* Compliance trust card (row 06) */
.trust-mock{
  max-width:90%;padding:1.25rem;background:var(--surface);
  border-radius:var(--radius-md);border:1px solid var(--border-soft);
  box-shadow:var(--shadow-md);
}
.trust-mock .trust-head{
  display:flex;align-items:center;gap:.6rem;margin-bottom:.85rem;
  padding-bottom:.85rem;border-bottom:1px solid var(--border-soft);
}
.trust-mock .trust-head .ico{
  width:36px;height:36px;border-radius:10px;background:var(--brand);
  color:#fff;display:flex;align-items:center;justify-content:center;
}
.trust-mock .trust-head .ico svg{width:20px;height:20px}
.trust-mock .trust-head b{font-size:.95rem;color:var(--ink)}
.trust-mock .trust-head small{display:block;font-size:.72rem;color:var(--ink-soft)}
.trust-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.trust-badge{
  padding:.55rem .7rem;border-radius:8px;background:var(--cream);
  font-size:.73rem;color:var(--ink-2);font-weight:600;text-align:center;
  border:1px solid var(--border-soft);
}
.trust-badge b{display:block;font-size:.78rem;color:var(--brand-dark);font-weight:800;margin-bottom:.1rem}

/* ============================================================
   BATCH 3 — Solutions hub + 6 solution pages
   ============================================================ */

/* Bento grid for Solutions hub */
.bento{display:grid;gap:1rem;grid-template-columns:repeat(1,1fr)}
@media (min-width:720px){.bento{grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto)}}
.bento-card{
  position:relative;display:block;text-decoration:none;color:var(--ink);
  padding:1.5rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow:hidden;grid-column:span 6;min-height:180px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.bento-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--brand)}
@media (min-width:720px){
  .bento-card.lg{grid-column:span 4;grid-row:span 2}
  .bento-card.md{grid-column:span 3}
  .bento-card.sm{grid-column:span 2}
  .bento-card.tall{grid-column:span 2;grid-row:span 2}
}
.bento-card .eyebrow{color:var(--brand-dark);font-size:.72rem}
.bento-card h3{font-size:clamp(1.15rem,1.6vw,1.5rem);margin:.5rem 0;line-height:1.2}
.bento-card p{color:var(--ink-muted);font-size:.9rem;margin:0}
.bento-card .arrow{color:var(--brand-dark);font-weight:700;font-size:1.1rem;margin-top:1rem}
.bento-card.is-accent{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.bento-card.is-accent .eyebrow{color:var(--brand)}
.bento-card.is-accent p{color:rgba(255,255,255,.82)}
.bento-card.is-accent .arrow{color:#fff}
.bento-card.is-cream{background:var(--cream);border-color:var(--border-soft)}
.bento-card .bento-viz{margin-top:1rem;opacity:.85}

/* Large bento card content: feature list + mini stats */
.bento-lg-list{
  list-style:none;padding:0;margin:1.25rem 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem
}
.bento-lg-list li{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:.92rem;line-height:1.45;color:rgba(255,255,255,.92)
}
.bl-check{
  flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  background:var(--brand);color:var(--brand-dark);font-weight:900;font-size:.75rem;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px
}
.bento-lg-stats{
  display:flex;gap:1.1rem;margin-top:1.25rem;padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.15);flex-wrap:wrap
}
.bento-lg-stat{display:flex;flex-direction:column;line-height:1.1;min-width:90px}
.bento-lg-stat b{font-size:1.1rem;color:#fff;letter-spacing:-.01em}
.bento-lg-stat small{font-size:.72rem;color:rgba(255,255,255,.72);letter-spacing:.04em;text-transform:uppercase;margin-top:.2rem}
@media (max-width:720px){
  .bento-lg-list{grid-template-columns:1fr}
  .bento-lg-stats{gap:.9rem}
}

/* API code snippet mock */
.code-mock{
  background:#0B1420;color:#E5E7EB;padding:1.25rem 1.5rem;border-radius:var(--radius-md);
  font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.82rem;line-height:1.6;
  box-shadow:var(--shadow-md);max-width:95%;overflow:auto;
}
.code-mock .code-head{
  display:flex;gap:.4rem;margin:-.5rem 0 1rem -.5rem;
}
.code-mock .code-head span{width:10px;height:10px;border-radius:50%;background:#FCA5A5}
.code-mock .code-head span:nth-child(2){background:#FCD34D}
.code-mock .code-head span:nth-child(3){background:var(--brand)}
.code-mock .kw{color:#7DD3FC}
.code-mock .str{color:var(--brand)}
.code-mock .key{color:#FBBF24}
.code-mock .cm{color:#64748B;font-style:italic}

/* Use-case triple column */
.uc-grid{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:800px){.uc-grid{grid-template-columns:repeat(3,1fr)}}
.uc-card{
  padding:1.5rem;border-radius:var(--radius-md);background:var(--surface);
  border:1px solid var(--border-soft);position:relative;
}
.uc-card .uc-tag{
  display:inline-block;padding:.25rem .6rem;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-dark);font-size:.72rem;
  font-weight:700;letter-spacing:.04em;margin-bottom:.75rem;text-transform:uppercase;
}
.uc-card h3{font-size:1.1rem;margin:0 0 .5rem}
.uc-card p{color:var(--ink-muted);font-size:.9rem;margin:0 0 .75rem}
.uc-card ul{font-size:.85rem;color:var(--ink-2);display:flex;flex-direction:column;gap:.35rem}
.uc-card ul li::before{content:"→";color:var(--brand-dark);margin-right:.5rem;font-weight:700}

/* Simple 3-step diagram (business → Meta → customer) */
.api-diagram{
  display:grid;gap:1rem;grid-template-columns:1fr;margin:2rem 0;
}
@media (min-width:800px){.api-diagram{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center}}
.api-node{
  padding:1.25rem;border-radius:var(--radius-md);background:var(--surface);
  border:1px solid var(--border-soft);text-align:center;box-shadow:var(--shadow-sm);
}
.api-node .ico{
  width:48px;height:48px;margin:0 auto .5rem;border-radius:12px;
  background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
}
.api-node .ico svg{width:26px;height:26px}
.api-node.is-meta{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.api-node.is-meta .ico{background:rgba(255,255,255,.15);color:#fff}
.api-node h4{margin:0 0 .2rem;font-size:.95rem}
.api-node p{margin:0;font-size:.78rem;color:var(--ink-soft)}
.api-node.is-meta p{color:rgba(255,255,255,.78)}
.api-arr{
  color:var(--brand-dark);font-weight:700;font-size:1.5rem;text-align:center;
}
@media (max-width:799px){.api-arr{transform:rotate(90deg)}}

/* Spec list */
.spec-list{
  display:grid;gap:0;grid-template-columns:1fr;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;
}
@media (min-width:720px){.spec-list{grid-template-columns:repeat(2,1fr)}}
.spec-list > div{
  padding:1rem 1.25rem;border-bottom:1px solid var(--border-soft);border-right:1px solid var(--border-soft);
}
@media (min-width:720px){
  .spec-list > div:nth-child(2n){border-right:0}
  .spec-list > div:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:719px){.spec-list > div{border-right:0}.spec-list > div:last-child{border-bottom:0}}
.spec-list b{display:block;font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.25rem;font-weight:600}
.spec-list span{font-size:1.05rem;color:var(--ink);font-weight:700}

/* Dashboard mock (campaigns/support pages) */
.dash-mock{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:1.25rem;overflow:hidden;
}
.dash-mock .dash-top{
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:.85rem;border-bottom:1px solid var(--border-soft);margin-bottom:1rem;
}
.dash-mock .dash-top b{font-size:.9rem}
.dash-mock .dash-top .pill{
  font-size:.7rem;padding:.2rem .55rem;border-radius:999px;
  background:var(--brand-soft);color:var(--brand-dark);font-weight:700;
}
.dash-metrics{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1rem;
}
.dash-metric{padding:.75rem;border:1px solid var(--border-soft);border-radius:8px;background:var(--cream)}
.dash-metric b{display:block;font-size:1.25rem;color:var(--brand-dark);line-height:1;letter-spacing:-.02em}
.dash-metric small{font-size:.68rem;color:var(--ink-soft);display:block;margin-top:.2rem}
.dash-bars{display:flex;align-items:flex-end;gap:.35rem;height:80px}
.dash-bars .bar{flex:1;background:var(--brand-soft);border-radius:4px 4px 0 0;position:relative}
.dash-bars .bar.is-peak{background:var(--brand)}
.dash-bars .bar::after{content:"";position:absolute;inset:0;border-radius:4px 4px 0 0}

/* Template gallery */
.tpl-grid{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:720px){.tpl-grid{grid-template-columns:repeat(3,1fr)}}
.tpl-card{
  padding:1rem;border:1px solid var(--border-soft);border-radius:var(--radius-md);
  background:linear-gradient(180deg,var(--cream) 0%,var(--surface) 100%);
}
.tpl-card .tpl-tag{
  display:inline-block;font-size:.65rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;padding:.15rem .5rem;border-radius:999px;margin-bottom:.75rem;
}
.tpl-card .tpl-tag.mkt{background:#ECFCCB;color:#3F6212}
.tpl-card .tpl-tag.util{background:#DBEAFE;color:#1E40AF}
.tpl-card .tpl-tag.auth{background:#FEE2E2;color:#991B1B}
.tpl-card .chat-bubble-in{font-size:.85rem;margin-top:.25rem}

/* 4-stage funnel for marketing platform */
.funnel{
  display:grid;gap:.5rem;grid-template-columns:1fr;margin:2rem 0;
}
.funnel-stage{
  padding:1.25rem 1.5rem;border-radius:var(--radius-md);background:var(--cream);
  border:1px solid var(--border-soft);position:relative;display:flex;
  align-items:center;gap:1rem;
}
.funnel-stage:nth-child(1){width:100%;background:#DCFCE7;border-color:#BBF7D0}
.funnel-stage:nth-child(2){width:88%;margin-left:6%;background:#D1FAE5;border-color:#A7F3D0}
.funnel-stage:nth-child(3){width:74%;margin-left:13%;background:#A7F3D0;border-color:#6EE7B7}
.funnel-stage:nth-child(4){width:56%;margin-left:22%;background:var(--brand-soft);border-color:var(--brand)}
.funnel-stage .stage-num{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  background:var(--surface);color:var(--brand-dark);font-weight:800;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--brand-dark);
}
.funnel-stage b{display:block;font-size:1rem;color:var(--ink);margin-bottom:.15rem}
.funnel-stage span{font-size:.8rem;color:var(--ink-muted)}
@media (max-width:600px){.funnel-stage{width:100% !important;margin-left:0 !important}}

/* CRM logo wall */
.logo-wall{
  display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr);
  padding:1.5rem;border-radius:var(--radius-lg);background:var(--cream);border:1px solid var(--border-soft);
}
@media (min-width:720px){.logo-wall{grid-template-columns:repeat(3,1fr)}}
.logo-wall .lw-item{
  display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);
}
.logo-wall .lw-item img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.logo-wall .lw-item span{font-size:.85rem;color:var(--ink);font-weight:600}

/* Before/After split */
.ba-split{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:800px){.ba-split{grid-template-columns:1fr 1fr}}
.ba-card{
  padding:1.5rem;border-radius:var(--radius-md);border:1px solid var(--border-soft);
  background:var(--surface);
}
.ba-card.ba-before{background:#FEF2F2;border-color:#FEE2E2}
.ba-card.ba-after{background:#ECFDF5;border-color:#D1FAE5}
.ba-card .ba-label{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;margin-bottom:.75rem;
}
.ba-card.ba-before .ba-label{background:#FECACA;color:#991B1B}
.ba-card.ba-after .ba-label{background:var(--brand-soft);color:var(--brand-dark)}
.ba-card h3{font-size:1.1rem;margin:0 0 .75rem}
.ba-card ul{display:flex;flex-direction:column;gap:.4rem;font-size:.88rem}
.ba-card.ba-before ul li::before{content:"✗";color:#DC2626;margin-right:.5rem;font-weight:700}
.ba-card.ba-after ul li::before{content:"✓";color:var(--brand-dark);margin-right:.5rem;font-weight:700}

/* Inbox mock (support) */
.inbox-mock{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);overflow:hidden;
  display:grid;grid-template-columns:1fr;max-width:95%;
}
@media (min-width:600px){.inbox-mock{grid-template-columns:260px 1fr}}
.inbox-side{background:var(--cream);padding:1rem;border-right:1px solid var(--border-soft)}
.inbox-side b{font-size:.7rem;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
.inbox-thread{padding:.6rem .7rem;border-radius:8px;margin-top:.5rem;cursor:pointer}
.inbox-thread.is-active{background:var(--surface);border:1px solid var(--brand);box-shadow:var(--shadow-sm)}
.inbox-thread b.t-name{font-size:.85rem;color:var(--ink);display:block}
.inbox-thread small{font-size:.72rem;color:var(--ink-soft);display:block;margin-top:.1rem}
.inbox-thread .unread{display:inline-block;width:6px;height:6px;background:var(--brand);border-radius:50%;margin-left:.3rem;vertical-align:middle}
.inbox-main{padding:1rem;min-height:280px;display:flex;flex-direction:column;gap:.5rem}
.inbox-main .chat-bubble-in{max-width:80%;align-self:flex-start}
.inbox-main .chat-bubble-out{
  background:var(--brand-soft);color:var(--ink);padding:.6rem .85rem;
  border-radius:16px 16px 4px 16px;font-size:.88rem;max-width:80%;align-self:flex-end;
}

/* ============================================================
   X-FACTOR — trust strip, logo wall, testimonials, outcomes
   ============================================================ */

/* Trust strip — directly under hero on every page */
.trust-strip{
  padding:1.1rem 0;background:var(--ink);color:#fff;
  border-top:1px solid var(--border-soft);
}
.trust-strip-row{
  display:flex;flex-wrap:wrap;gap:.65rem 2.4rem;justify-content:center;align-items:center;
  font-size:.82rem;
}
.trust-strip-row > div{display:flex;align-items:center;gap:.45rem;color:rgba(255,255,255,.85)}
.trust-strip-row > div b{color:#fff;font-weight:700}
.trust-strip-row > div .star{color:#FBBF24;margin-right:.15rem}
.trust-strip-row .sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.25)}

/* Outcome pills inside hero — punchy 3-up of stats */
.outcome-pills{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.25rem 0 .5rem}
.outcome-pill{
  padding:.55rem 1rem;border-radius:14px;background:var(--brand-soft);
  border:1px solid var(--brand);display:flex;flex-direction:column;
}
.outcome-pill b{color:var(--brand-dark);font-size:1.15rem;font-weight:800;letter-spacing:-.02em;line-height:1}
.outcome-pill span{font-size:.7rem;color:var(--ink-muted);margin-top:.15rem;font-weight:600}

/* Customer logo wall */
.cust-logos-section{padding:2.5rem 0;text-align:center;background:var(--surface);border-top:1px solid var(--border-soft);border-bottom:1px solid var(--border-soft)}
.lead-small{
  font-size:.78rem;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;margin:0 0 1.5rem;
}
.cust-logos{display:grid;gap:.85rem;grid-template-columns:repeat(2,1fr);max-width:1080px;margin:0 auto}
@media (min-width:680px){.cust-logos{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.cust-logos{grid-template-columns:repeat(6,1fr)}}
.cust-logo{
  display:flex;align-items:center;justify-content:center;
  padding:.85rem .75rem;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);min-height:54px;
  font-size:.9rem;font-weight:700;color:var(--ink-muted);
  letter-spacing:-.01em;text-align:center;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.cust-logo:hover{color:var(--ink);border-color:var(--brand);transform:translateY(-2px)}
.cust-logo.c-serif{font-family:Georgia,'Times New Roman',serif;font-style:italic}
.cust-logo.c-mono{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:.78rem;letter-spacing:0}
.cust-logo.c-cap{text-transform:uppercase;letter-spacing:.1em;font-size:.74rem}
.cust-logo .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--brand);margin-right:.4rem}
.cust-logo .sq{display:inline-block;width:8px;height:8px;background:var(--brand-dark);margin-right:.4rem;transform:rotate(45deg)}

/* Testimonial card */
.testimonial{
  max-width:720px;margin:0 auto;padding:2rem 2rem 1.75rem;
  background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);position:relative;
}
.testimonial::before{
  content:"\201C";position:absolute;top:-1.4rem;left:1.25rem;
  font-size:5rem;color:var(--brand);font-family:Georgia,serif;line-height:1;
  font-weight:800;
}
.testimonial blockquote{
  font-size:1.1rem;line-height:1.55;color:var(--ink);margin:0 0 1.25rem;font-weight:500;
}
.testimonial-who{display:flex;align-items:center;gap:.85rem}
.testimonial-avatar{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;
  font-size:.95rem;letter-spacing:-.02em;
}
.testimonial-avatar.av-orange{background:linear-gradient(135deg,#EA580C,#F97316)}
.testimonial-avatar.av-blue{background:linear-gradient(135deg,#1E40AF,#3B82F6)}
.testimonial-avatar.av-purple{background:linear-gradient(135deg,#7C3AED,#A78BFA)}
.testimonial-who b{display:block;font-size:.95rem;color:var(--ink)}
.testimonial-who small{display:block;font-size:.78rem;color:var(--ink-soft)}
.testimonial-stat{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;
  color:var(--brand-dark);font-weight:700;background:var(--brand-soft);
  padding:.25rem .6rem;border-radius:999px;margin-bottom:.85rem;
}
.testimonial-pair{display:grid;gap:1.25rem;grid-template-columns:1fr;max-width:1080px;margin:0 auto}
@media (min-width:840px){.testimonial-pair{grid-template-columns:1fr 1fr}}
.testimonial-pair .testimonial{max-width:none}

/* Risk-reversal pill — sits under CTAs */
.risk-pill{
  display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .9rem;
  background:var(--brand-soft);color:var(--brand-dark);font-size:.82rem;
  border-radius:999px;font-weight:600;margin-top:1rem;border:1px solid var(--brand);
}
.risk-pill::before{content:"✓";font-weight:800;color:var(--brand-dark)}

/* "Your first 30 days" 4-step timeline */
.first-30{display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.75rem}
@media (min-width:760px){.first-30{grid-template-columns:repeat(4,1fr)}}
.first-30 .step{
  padding:1.5rem;background:var(--surface);border-radius:var(--radius-md);
  border:1px solid var(--border-soft);position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
}
.first-30 .step:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.first-30 .step .day{
  display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.05em;
  padding:.25rem .65rem;border-radius:999px;background:var(--cream);
  color:var(--brand-dark);text-transform:uppercase;margin-bottom:.65rem;
  border:1px solid var(--brand);
}
.first-30 .step h3{font-size:1rem;margin:0 0 .35rem;color:var(--ink)}
.first-30 .step p{font-size:.85rem;color:var(--ink-muted);margin:0;line-height:1.5}
.first-30 .step.is-highlight{
  background:linear-gradient(160deg,var(--brand-dark) 0%,#0E5C3F 100%);
  color:#fff;border-color:var(--brand-dark);
}
.first-30 .step.is-highlight .day{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)}
.first-30 .step.is-highlight h3{color:#fff}
.first-30 .step.is-highlight p{color:rgba(255,255,255,.85)}

/* Competitor comparison wrapper */
.compete-wrap{margin-top:1.5rem;overflow-x:auto;border-radius:var(--radius-md)}
.compete-wrap .matrix{min-width:680px}
.compete-wrap .matrix thead th:nth-child(2){
  background:var(--brand-dark);color:#fff;
  position:relative;
}
.compete-wrap .matrix thead th:nth-child(2)::after{
  content:"You";position:absolute;top:-9px;right:8px;font-size:.6rem;
  background:var(--brand);color:#fff;padding:.1rem .4rem;border-radius:999px;
  font-weight:800;letter-spacing:.04em;
}
.compete-wrap .matrix tbody td:nth-child(2){background:var(--brand-soft);color:var(--brand-dark);font-weight:700}

/* Mini outcome cards for ROI summary */
.roi-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);margin-top:1.5rem}
@media (min-width:760px){.roi-grid{grid-template-columns:repeat(4,1fr)}}
.roi-card{
  padding:1.25rem;background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);text-align:center;
}
.roi-card b{display:block;font-size:1.6rem;color:var(--brand-dark);font-weight:800;letter-spacing:-.02em;line-height:1}
.roi-card span{display:block;font-size:.78rem;color:var(--ink-muted);margin-top:.4rem;line-height:1.4}

/* ============================================================
   SOLUTION-PAGE VARIETY — tighter spacing + per-page accent palette
   Applied via wrapping <div class="sol-page sol-xxx"> on solution pages.
   Brand green stays for CTAs; accent tints trust strip, pills, chips, etc.
   ============================================================ */

/* Tighter vertical rhythm on solutions pages */
.sol-page .section{padding:clamp(2.25rem,4.5vw,3.75rem) 0}
.sol-page .section-head{margin-bottom:1.5rem;max-width:680px}
.sol-page .hero{padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(.75rem,2vw,1.25rem) !important}
.sol-page .cta-band{padding:clamp(1.75rem,3.5vw,2.75rem) 1.5rem}
.sol-page .cta-band h2{margin-bottom:.5rem}
.sol-page .cta-band p{margin:0 0 1rem}
.sol-page .cust-logos-section{padding:1.75rem 0}
.sol-page .cust-logos-section .lead-small{margin:0 0 1rem}
.sol-page .trust-strip{padding:.85rem 0}
.sol-page .outcome-pills{margin:1rem 0 .25rem}
.sol-page .testimonial{padding:1.5rem 1.75rem 1.35rem}
.sol-page .testimonial blockquote{font-size:1rem;margin:0 0 .85rem}
.sol-page .testimonial::before{top:-1rem;font-size:3.75rem}
.sol-page .first-30{margin-top:1rem}
.sol-page .first-30 .step{padding:1.15rem 1.25rem}

/* Per-page accent palette — hue-shifted, keeping Go4whatsup green for CTAs */
.sol-hub       {--accent:#25D366;--accent-dark:#0F9850;--accent-soft:#E8FAE9}
.sol-api       {--accent:#3B82F6;--accent-dark:#1E40AF;--accent-soft:#DBEAFE}
.sol-automation{--accent:#A78BFA;--accent-dark:#6D28D9;--accent-soft:#EDE9FE}
.sol-campaign  {--accent:#FB923C;--accent-dark:#C2410C;--accent-soft:#FFEDD5}
.sol-crm       {--accent:#2DD4BF;--accent-dark:#0F766E;--accent-soft:#CCFBF1}
.sol-support   {--accent:#F59E0B;--accent-dark:#B45309;--accent-soft:#FEF3C7}
.sol-marketing {--accent:#0891B2;--accent-dark:#155E75;--accent-soft:#CFFAFE}

/* Apply the accent to X-factor elements */
.sol-page .hero{
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--cream-2) 55%,var(--cream-2) 100%);
  border-bottom:1px solid var(--border-soft);
}
.sol-page .hero .eyebrow,
.sol-page .section-head .eyebrow{
  background:var(--accent-soft);color:var(--accent-dark);
}
.sol-page .trust-strip{background:var(--accent-dark)}
.sol-page .trust-strip-row > div .star{color:#FDE68A}
.sol-page .outcome-pill{background:var(--accent-soft);border-color:var(--accent)}
.sol-page .outcome-pill b{color:var(--accent-dark)}
.sol-page .testimonial-stat{background:var(--accent-soft);color:var(--accent-dark)}
.sol-page .testimonial::before{color:var(--accent)}
.sol-page .testimonial-avatar{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
.sol-page .first-30 .step .day{background:var(--accent-soft);color:var(--accent-dark);border-color:var(--accent)}
.sol-page .first-30 .step.is-highlight{
  background:linear-gradient(160deg,var(--accent-dark) 0%,var(--accent) 120%);
  border-color:var(--accent-dark);color:#fff;
}
.sol-page .first-30 .step.is-highlight .day{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.35)}
.sol-page .first-30 .step.is-highlight h3{color:#fff}
.sol-page .first-30 .step.is-highlight p{color:rgba(255,255,255,.88)}

/* Accent hue for CTA-band gradient background (still uses brand green button for CTA) */
.sol-page .cta-band{background:linear-gradient(135deg,var(--accent-soft) 0%,var(--cream) 60%,var(--cream-2) 100%);border:1px solid var(--accent)}
.sol-page .cta-band::before{display:none}
.sol-page .cta-band h2{color:var(--ink-strong)}
.sol-page .cta-band p{color:var(--ink)}
.sol-page .cta-band .btn--outline{border-color:var(--accent-dark);color:var(--accent-dark)}
.sol-page .cta-band .btn--outline:hover{background:var(--accent-soft)}
.sol-page .risk-pill{background:rgba(255,255,255,.8);color:var(--accent-dark);border-color:var(--accent)}
.sol-page .risk-pill::before{color:var(--accent-dark)}

/* Section backgrounds alternate warmer tones */
.sol-page .section--cream{background:var(--accent-soft)}
.sol-page .section--cream .section-head .eyebrow{background:#fff}

/* ==========================================================
   AUTOMATION PAGE — dense mid-section utilities
   ========================================================== */

/* Tight section — used to pull consecutive sections closer together */
.section--tight{padding:clamp(1.75rem,3.5vw,2.75rem) 0}
.sol-page .section--tight{padding:clamp(1.5rem,3vw,2.25rem) 0}
.sol-page .section--tight .section-head{margin-bottom:1.1rem}

/* Trio of flow cards */
.flow-trio{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:780px){.flow-trio{grid-template-columns:repeat(3,1fr);gap:1.1rem}}
.flow-card{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:1.15rem 1.15rem 1.25rem;box-shadow:0 1px 0 rgba(0,0,0,.02),0 6px 22px -14px rgba(10,30,60,.15);
  display:flex;flex-direction:column;gap:.65rem
}
.flow-card h3{font-size:1.05rem;margin:0;letter-spacing:-.01em}
.flow-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.flow-tag{
  display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.25rem .55rem;border-radius:999px;background:var(--accent-soft,#E8FAE9);color:var(--accent-dark,#0F9850);
  border:1px solid var(--accent,#25D366)
}
.flow-metric{font-size:.8rem;color:var(--accent-dark,#0F9850);font-weight:800;letter-spacing:-.01em}

/* Mini vertical flow inside each card */
.flow-mini{display:flex;flex-direction:column;align-items:stretch;gap:.3rem;margin-top:.15rem}
.mini-step{
  font-size:.82rem;font-weight:600;color:var(--ink);
  padding:.5rem .65rem;border-radius:10px;border:1px solid var(--border-soft);background:#fff;
  text-align:center;letter-spacing:-.005em
}
.mini-trigger{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.mini-decision{background:#FEF3C7;border-color:#FCD34D;color:#92400E;font-weight:700}
.mini-action{background:#EEF2FF;border-color:#C7D2FE;color:#3730A3}
.mini-line{
  align-self:center;width:2px;height:.9rem;background:linear-gradient(180deg,var(--border-soft) 0%,transparent 100%);
  position:relative
}
.mini-line::after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--border-soft)}
.mini-fork{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.15rem}
.mini-fork .mini-step{font-size:.76rem;padding:.45rem .5rem}

/* Triggers / Actions split */
.ta-split{display:grid;gap:1.25rem;grid-template-columns:1fr}
@media (min-width:780px){.ta-split{grid-template-columns:1fr 1fr;gap:1.5rem}}
.ta-col{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:1.1rem 1.15rem 1.25rem
}
.ta-head{
  display:flex;align-items:center;gap:.55rem;font-size:.95rem;margin:0 0 .75rem;
  font-weight:700;letter-spacing:-.01em;color:var(--ink)
}
.ta-head .dot{width:.55rem;height:.55rem;border-radius:50%;display:inline-block}
.ta-head .dot-trigger{background:#10B981}
.ta-head .dot-action{background:#6366F1}
.chip-wrap{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{
  font-size:.78rem;font-weight:500;color:var(--ink);
  padding:.35rem .65rem;border-radius:999px;
  background:var(--cream-2);border:1px solid var(--border-soft);
  white-space:nowrap
}
.sol-automation .ta-head .dot-trigger{background:var(--accent-dark)}
.sol-automation .ta-head .dot-action{background:var(--accent)}
.sol-automation .chip:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark)}

/* Integration row */
.integ-row-head{text-align:center;max-width:640px;margin:0 auto 1.1rem}
.integ-row-head .eyebrow{display:inline-block}
.integ-row-head h2{margin:.35rem 0 .4rem;font-size:clamp(1.35rem,2.6vw,1.75rem)}
.integ-row-head p{margin:0}
.integ-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .6rem;
  max-width:900px;margin:0 auto
}
.integ-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;
  padding:.5rem .85rem;border-radius:999px;background:#fff;border:1px solid var(--border-soft);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease
}
.integ-chip img{display:block}
.integ-chip:hover{transform:translateY(-1px);border-color:var(--accent,#25D366);box-shadow:0 6px 14px -10px rgba(10,30,60,.2)}

/* ==========================================================
   INDUSTRIES — hub + 7 industry pages
   ========================================================== */

/* Hub grid visual — 7 interactive industry tiles */
.ind-visual-label{
  display:flex;align-items:center;gap:.5rem;
  padding:.35rem .9rem;margin:0 .6rem .5rem;
  font-size:.78rem;font-weight:700;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:.06em
}
.ivl-dot{
  width:8px;height:8px;border-radius:50%;background:var(--brand,#25D366);
  box-shadow:0 0 0 3px rgba(37,211,102,.22);
  animation:ivlPulse 1.6s ease-out infinite
}
@keyframes ivlPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(37,211,102,.22)}
  50%{box-shadow:0 0 0 6px rgba(37,211,102,.05)}
}
.ind-grid-mini{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;padding:.5rem .6rem 1rem}
@media (min-width:540px){.ind-grid-mini{grid-template-columns:repeat(3,1fr)}}
.ind-tile{
  position:relative;overflow:hidden;
  padding:1.05rem .95rem;border-radius:14px;
  font-weight:700;font-size:.92rem;text-decoration:none;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.35rem;
  min-height:86px;
  border:1px solid rgba(11,20,32,.06);
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 8px 18px -14px rgba(10,30,60,.2);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor:pointer
}
.ind-tile .it-emo{font-size:1.35rem;line-height:1}
.ind-tile .it-lbl{font-size:.92rem;font-weight:800;letter-spacing:-.01em}
.ind-tile .it-arr{
  position:absolute;top:.65rem;right:.8rem;
  font-size:1rem;font-weight:800;opacity:.35;
  transition:transform .18s ease, opacity .18s ease
}
.ind-tile::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%);
  transform:translateX(-100%);transition:transform .55s ease;
  pointer-events:none
}
.ind-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 28px -14px rgba(10,30,60,.28), 0 2px 0 rgba(0,0,0,.04);
  border-color:rgba(11,20,32,.14)
}
.ind-tile:hover::before{transform:translateX(100%)}
.ind-tile:hover .it-arr{opacity:1;transform:translateX(3px)}
.ind-tile:focus-visible{outline:2px solid var(--brand,#25D366);outline-offset:2px}

/* "LIVE" pulse pill on the busiest industry */
.ind-tile--live .it-pulse{
  position:absolute;bottom:.55rem;right:.7rem;
  font-size:.62rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:#EF4444;color:#fff;padding:.15rem .42rem;border-radius:999px;
  box-shadow:0 0 0 3px rgba(239,68,68,.22);
  animation:tilePulse 1.8s ease-out infinite
}
@keyframes tilePulse{
  0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.22)}
  50%{box-shadow:0 0 0 7px rgba(239,68,68,.04)}
}
@media (max-width: 640px){
  .ind-grid-mini{grid-template-columns:repeat(2,1fr);gap:.5rem}
  .ind-tile{min-height:62px;padding:.7rem .7rem .7rem .75rem}
  .ind-tile .it-emo{font-size:1.05rem}
  .ind-tile .it-lbl{font-size:.78rem;line-height:1.1;white-space:normal;word-wrap:break-word}
  .ind-tile .it-arr{display:none}
  .ind-tile--live .it-pulse{font-size:.54rem;padding:.1rem .35rem;bottom:.4rem;right:.5rem}
  .ind-visual-label{font-size:.68rem;padding:.2rem .5rem;margin:0 .2rem .45rem}
}

/* === Industries photo-mosaic hero visual (real photos) === */
.ind-photo-visual{
  width:100% !important;max-width:520px;margin:0 auto;
  flex:1 1 100%;align-self:stretch;
  aspect-ratio:auto !important;background:transparent !important;
  border:0 !important;overflow:visible !important;
  display:flex !important;flex-direction:column;gap:.4rem;
  padding:1rem .6rem
}
.ind-photogrid{
  display:grid;width:100%;
  grid-template-columns:repeat(3, 1fr);
  grid-template-rows:minmax(140px, 1.4fr) minmax(100px, 1fr) minmax(100px, 1fr);
  gap:.55rem;
  padding:.2rem
}
.ind-photo{
  position:relative;display:block;
  border-radius:14px;overflow:hidden;text-decoration:none;
  background:#0B1420;aspect-ratio:1/1;
  box-shadow:0 10px 24px -16px rgba(10,30,60,.35), 0 2px 0 rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease
}
.ind-photo img, .ind-photo .ind-art{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease, filter .3s ease;
  filter:saturate(.98) contrast(1.02)
}
.ind-photo .ind-art{position:absolute;inset:0}
.ind-photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(11,20,32,0) 30%, rgba(11,20,32,.82) 100%)
}
.ind-photo-body{
  position:absolute;left:.6rem;right:.6rem;bottom:.55rem;z-index:2;
  display:flex;flex-direction:column;gap:.05rem;color:#fff
}
.ind-photo-name{
  font-size:.92rem;font-weight:800;letter-spacing:-.01em;line-height:1.1;
  text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.ind-photo-stat{
  font-size:.68rem;font-weight:700;color:rgba(255,255,255,.86);
  text-shadow:0 1px 2px rgba(0,0,0,.4)
}
.ind-photo:hover{transform:translateY(-3px);box-shadow:0 18px 34px -16px rgba(10,30,60,.45)}
.ind-photo:hover img{transform:scale(1.08);filter:saturate(1.08) contrast(1.05)}

/* Featured (large) tile spans 2 cols × 2 rows — hero spot */
.ind-photo--lg{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.ind-photo--lg .ind-photo-name{font-size:1.4rem;font-weight:800}
.ind-photo--lg .ind-photo-stat{font-size:.82rem}

/* Live pulse on the featured tile */
.ind-photo-pulse{
  position:absolute;top:.7rem;left:.7rem;z-index:3;
  font-size:.66rem;font-weight:800;letter-spacing:.1em;
  background:#EF4444;color:#fff;padding:.28rem .6rem;border-radius:999px;
  box-shadow:0 0 0 3px rgba(239,68,68,.28);
  animation:indPhotoPulse 1.8s ease-out infinite
}
@keyframes indPhotoPulse{
  0%,100%{box-shadow:0 0 0 3px rgba(239,68,68,.28)}
  50%{box-shadow:0 0 0 8px rgba(239,68,68,.05)}
}

/* Tablet: 2 cols with big card taking a row */
@media (max-width: 900px){
  .ind-photogrid{
    grid-template-columns:repeat(2, 1fr);
    grid-template-rows:auto
  }
  .ind-photo--lg{grid-column:span 2;grid-row:span 1;aspect-ratio:2/1}
  .ind-photo{aspect-ratio:1/1}
}
/* Mobile: 2 cols, featured banner on top */
@media (max-width: 640px){
  .ind-photogrid{gap:.4rem}
  .ind-photo--lg{aspect-ratio:1.9/1}
  .ind-photo--lg .ind-photo-name{font-size:1.15rem}
  .ind-photo--lg .ind-photo-stat{font-size:.72rem}
  .ind-photo-name{font-size:.78rem}
  .ind-photo-stat{font-size:.6rem}
  .ind-photo-body{left:.45rem;right:.45rem;bottom:.4rem}
  .ind-photo-pulse{font-size:.58rem;padding:.22rem .5rem;top:.55rem;left:.55rem}
}

/* Hub card grid */
.ind-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:720px){.ind-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}}
@media (min-width:1040px){.ind-grid{grid-template-columns:repeat(3,1fr)}}
.ind-card{
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.25rem 1.25rem 1.35rem;border-radius:16px;
  background:#fff;border:1px solid var(--border-soft);text-decoration:none;color:var(--ink);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  position:relative;overflow:hidden
}
.ind-card::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg,var(--c) 0%,var(--cd) 100%);opacity:.9
}
.ind-card:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 12px 30px -18px rgba(10,30,60,.25)}
.ind-tag{
  align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;background:var(--cs);color:var(--cd);border:1px solid var(--c)
}
.ind-card h3{margin:.15rem 0 .1rem;font-size:1.15rem;letter-spacing:-.01em}
.ind-card p{margin:0;color:var(--ink-muted);font-size:.95rem;line-height:1.55}
.ind-more{margin-top:.4rem;font-weight:700;color:var(--cd);font-size:.9rem}

/* Industry page — per-page accent palette on .ind-page + slug class */
.ind-real-estate         {--accent:#0EA5E9;--accent-dark:#0369A1;--accent-soft:#E0F2FE}
.ind-restaurants         {--accent:#EA580C;--accent-dark:#9A3412;--accent-soft:#FFEDD5}
.ind-healthcare          {--accent:#14B8A6;--accent-dark:#115E59;--accent-soft:#CCFBF1}
.ind-schools             {--accent:#8B5CF6;--accent-dark:#5B21B6;--accent-soft:#EDE9FE}
.ind-retail              {--accent:#F59E0B;--accent-dark:#B45309;--accent-soft:#FEF3C7}
.ind-travel              {--accent:#4F46E5;--accent-dark:#3730A3;--accent-soft:#E0E7FF}
.ind-services            {--accent:#10B981;--accent-dark:#065F46;--accent-soft:#D1FAE5}

/* Apply accent across the industry page (same pattern as .sol-page) */
.ind-page .section{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.ind-page .section--tight{padding:clamp(1.5rem,3vw,2.25rem) 0}
.ind-page .section-head{margin-bottom:1.35rem;max-width:720px}
.ind-page .hero{padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(.75rem,2vw,1.25rem) !important;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--cream-2) 55%,var(--cream-2) 100%);
  border-bottom:1px solid var(--border-soft)}
.ind-page .eyebrow{background:var(--accent-soft);color:var(--accent-dark)}
.ind-page .trust-strip{background:var(--accent-dark);padding:.85rem 0}
.ind-page .outcome-pill{background:var(--accent-soft);border-color:var(--accent)}
.ind-page .outcome-pill b{color:var(--accent-dark)}
.ind-page .testimonial-stat{background:var(--accent-soft);color:var(--accent-dark)}
.ind-page .testimonial::before{color:var(--accent)}
.ind-page .testimonial-avatar{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
.ind-page .uc-tag{background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--accent)}

/* Composed hero: industry photo + chat mock overlapping below */
.ind-hero-stack{
  position:relative;display:flex;flex-direction:column;align-items:center;
  max-width:500px;margin:0 auto;
}
.ind-hero-photo{
  width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:20px;
  box-shadow:0 22px 48px -12px rgba(0,0,0,.25),0 8px 18px -6px rgba(0,0,0,.12);
  border:5px solid #fff;
  display:block;
}
.ind-hero-stack .chat-mock{
  margin:-3rem 0 0;width:min(88%,360px);position:relative;z-index:2;
  box-shadow:0 18px 40px -10px rgba(0,0,0,.22)
}
.ind-hero-photo-caption{
  position:absolute;top:1rem;left:1rem;z-index:3;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  color:var(--accent-dark);font-weight:700;font-size:.78rem;letter-spacing:.02em;
  padding:.35rem .75rem;border-radius:999px;
  border:1px solid var(--accent-soft);
  text-transform:uppercase
}
@media (max-width:720px){
  .ind-hero-stack{max-width:420px}
  .ind-hero-stack .chat-mock{margin-top:-2rem;width:min(92%,320px)}
}
.ind-page .cta-band{
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--cream) 60%,var(--cream-2) 100%);
  border:1px solid var(--accent)
}
.ind-page .cta-band::before{display:none}
.ind-page .cta-band h2{color:var(--ink-strong)}
.ind-page .cta-band p{color:var(--ink)}
.ind-page .cta-band .btn--outline{border-color:var(--accent-dark);color:var(--accent-dark)}
.ind-page .cta-band .btn--outline:hover{background:var(--accent-soft)}
.ind-page .section--cream{background:var(--accent-soft)}
.ind-page .risk-pill{background:rgba(255,255,255,.85);color:var(--accent-dark);border-color:var(--accent)}

.hero-outcome-line{
  margin:1rem 0 0;font-size:.88rem;font-weight:700;color:var(--accent-dark);
  letter-spacing:-.005em
}

/* Chat mock visual — used on all industry pages */
.chat-visual{display:flex;align-items:center;justify-content:center;max-height:440px}
.chat-mock{
  width:100%;max-width:340px;background:#E4DBD2;border-radius:22px;
  padding:.75rem .75rem 1rem;box-shadow:0 10px 40px -16px rgba(10,30,60,.25),0 2px 0 rgba(0,0,0,.03);
  font-family:-apple-system,"Segoe UI",Inter,sans-serif
}
.chat-head{
  display:flex;align-items:center;gap:.55rem;background:#075E54;color:#fff;
  padding:.65rem .85rem;border-radius:14px 14px 4px 4px;margin:-.25rem -.25rem .6rem
}
.chat-avatar{
  width:34px;height:34px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem
}
.chat-head b{font-size:.9rem;line-height:1.1;display:block}
.chat-head small{font-size:.7rem;opacity:.85}
.chat-body{display:flex;flex-direction:column;gap:.4rem;padding:.1rem .1rem .5rem}
.chat-bubble{
  max-width:82%;padding:.5rem .65rem;border-radius:10px;font-size:.8rem;line-height:1.35;
  box-shadow:0 1px 0 rgba(0,0,0,.05)
}
.chat-in{background:#fff;color:var(--ink);align-self:flex-start;border-bottom-left-radius:2px}
.chat-out{background:#DCF8C6;color:#0B1F2A;align-self:flex-end;border-bottom-right-radius:2px}
.chat-footer{
  background:#fff;border-radius:999px;padding:.5rem .85rem;font-size:.8rem;color:#9AA3AB;
  box-shadow:0 1px 0 rgba(0,0,0,.05)
}

/* Hub-only visual frame to echo the rest of the hero */
.ind-visual{
  background:#fff;border-radius:16px;border:1px solid var(--border-soft);
  box-shadow:0 10px 40px -16px rgba(10,30,60,.15);padding:.5rem
}
.ind-hub .hero{background:linear-gradient(180deg,#F5F8FA 0%,var(--cream-2) 55%,var(--cream-2) 100%)}
.ind-hub .section{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.ind-hub .section--tight{padding:clamp(1.5rem,3vw,2.25rem) 0}

/* ==========================================================
   INTEGRATIONS — hub + 4 integration pages
   ========================================================== */

/* Hub orbit visual */
.integ-hub-visual{
  position:relative;width:100%;aspect-ratio:1/1;max-width:440px;margin:0 auto;
  display:flex;align-items:center;justify-content:center
}
.integ-hub-center{
  position:relative;
  width:96px;height:96px;border-radius:28px;background:linear-gradient(135deg,#25D366,#0F9850);
  color:#fff;font-size:1.4rem;font-weight:800;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 16px 40px -14px rgba(37,211,102,.6),0 2px 0 rgba(0,0,0,.05);z-index:2
}
.integ-hub-center .ihc-ring{
  position:absolute;inset:-30px;border-radius:50%;
  border:1.5px dashed rgba(37,211,102,.45);
  animation:ihcRing 4s linear infinite;pointer-events:none
}
.integ-hub-center .ihc-ring--2{
  inset:-70px;border-color:rgba(37,211,102,.22);
  animation:ihcRing 7s linear infinite reverse
}
@keyframes ihcRing{to{transform:rotate(360deg)}}

/* Real-brand-logo tiles on integrations hub constellation */
.integ-logo-tile{
  position:absolute;width:82px;padding:.65rem .5rem .55rem;border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  background:#fff;
  border:1px solid var(--border-soft, rgba(11,20,32,.08));
  text-decoration:none;color:var(--ink, #0B1420);
  box-shadow:0 12px 28px -16px rgba(10,30,60,.25), 0 2px 0 rgba(0,0,0,.03);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  z-index:3
}
.integ-logo-tile svg{flex:0 0 auto;filter:drop-shadow(0 1px 0 rgba(0,0,0,.05))}
.integ-logo-tile b{font-size:.7rem;font-weight:800;letter-spacing:-.005em;color:var(--ink, #0B1420);text-align:center;line-height:1.1}
.integ-logo-tile:hover{
  transform:translateY(-4px) scale(1.06);
  box-shadow:0 20px 36px -16px rgba(10,30,60,.38);
  border-color:rgba(11,20,32,.2)
}
.integ-logo-tile:focus-visible{outline:2px solid var(--brand,#25D366);outline-offset:3px}
.integ-logo-tile:nth-child(2){top:4%;left:8%}
.integ-logo-tile:nth-child(3){top:4%;right:8%}
.integ-logo-tile:nth-child(4){top:42%;left:-2%}
.integ-logo-tile:nth-child(5){top:42%;right:-2%}
.integ-logo-tile:nth-child(6){bottom:6%;left:16%}
.integ-logo-tile:nth-child(7){bottom:6%;right:16%}

/* Animated dashed connection lines from center to each tile (pure CSS) */
.integ-hub-visual::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 58px, rgba(37,211,102,.15) 58px, rgba(37,211,102,.15) 60px, transparent 61px),
    radial-gradient(circle at 50% 50%, transparent 110px, rgba(37,211,102,.08) 110px, rgba(37,211,102,.08) 112px, transparent 113px)
}

@media (max-width:640px){
  .integ-hub-visual{max-width:340px}
  .integ-logo-tile{width:68px;padding:.5rem .4rem .45rem;border-radius:11px}
  .integ-logo-tile svg{width:26px;height:26px}
  .integ-logo-tile b{font-size:.6rem}
  .integ-hub-center{width:82px;height:82px;border-radius:22px}
  .integ-hub-center svg{width:30px;height:30px}
  .integ-hub-center .ihc-ring{inset:-22px}
  .integ-hub-center .ihc-ring--2{inset:-50px}
  .integ-logo-tile:nth-child(2){top:2%;left:4%}
  .integ-logo-tile:nth-child(3){top:2%;right:4%}
  .integ-logo-tile:nth-child(4){top:44%;left:-4%}
  .integ-logo-tile:nth-child(5){top:44%;right:-4%}
  .integ-logo-tile:nth-child(6){bottom:4%;left:12%}
  .integ-logo-tile:nth-child(7){bottom:4%;right:12%}
}
.integ-orbit{
  position:absolute;width:52px;height:52px;padding:.5rem;background:#fff;border-radius:14px;
  border:1px solid var(--border-soft);box-shadow:0 10px 24px -14px rgba(10,30,60,.25);
  display:flex;align-items:center;justify-content:center
}
.integ-orbit img,.integ-orbit{object-fit:contain}
.i-1{top:10%;left:14%}
.i-2{top:10%;right:14%}
.i-3{top:48%;left:4%}
.i-4{top:48%;right:4%}
.i-5{bottom:12%;left:22%}
.i-6{bottom:12%;right:22%}

/* Featured integration cards on hub */
.integ-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:760px){.integ-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}}
.integ-card{
  display:flex;flex-direction:column;gap:.45rem;
  padding:1.1rem 1.2rem 1.3rem;border-radius:16px;
  background:#fff;border:1px solid var(--border-soft);text-decoration:none;color:var(--ink);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  position:relative;overflow:hidden
}
.integ-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c);opacity:.85
}
.integ-card:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 12px 30px -18px rgba(10,30,60,.25)}
.integ-card-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.15rem}
.integ-card-head img{display:block}
.integ-card-name{font-weight:800;font-size:.95rem;display:block;letter-spacing:-.01em}
.integ-card-badge{
  display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:.22rem .5rem;border-radius:999px;background:var(--cs);color:var(--cd);margin-top:.15rem
}
.integ-card h3{margin:.1rem 0 .05rem;font-size:1.12rem;letter-spacing:-.01em}
.integ-card p{margin:0;color:var(--ink-muted);font-size:.95rem;line-height:1.55}
.integ-more{margin-top:.35rem;font-weight:700;color:var(--cd);font-size:.88rem}

/* Integration page — per-page accent */
.integ-sheets   {--accent:#34A853;--accent-dark:#1E8E3E;--accent-soft:#D9FBE8}
.integ-zoho     {--accent:#2D6BA3;--accent-dark:#154678;--accent-soft:#E6F2FD}
.integ-odoo     {--accent:#714B67;--accent-dark:#4C2E43;--accent-soft:#F3E8FF}
.integ-shopify  {--accent:#7AB55C;--accent-dark:#3E7D2E;--accent-soft:#D1FAE5}
.integ-translate{--accent:#0EA5A4;--accent-dark:#0B5F5E;--accent-soft:#CCFBF1}

/* Language pill grid — dense list of supported languages */
.lang-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.5rem;margin:1.5rem 0 0}
.lang-grid .lang-pill{display:flex;align-items:center;gap:.5rem;padding:.6rem .85rem;background:#fff;border:1px solid #e5e7eb;border-radius:10px;font-size:.9rem;color:#1f2937;font-weight:500}
.lang-grid .lang-pill .flag{font-size:1rem}
.lang-grid .lang-pill .native{color:#6b7280;font-size:.82rem;margin-left:.25rem}
.lang-more{text-align:center;margin-top:1.5rem;color:var(--accent-dark,#0B5F5E);font-weight:700;font-size:1.05rem}

/* Comparison table — "Go4whatsup vs the rest" */
.cmp-table{margin:1.5rem 0 0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;box-shadow:0 6px 24px -14px rgba(10,30,60,.12)}
.cmp-table table{width:100%;border-collapse:collapse;font-size:.95rem}
.cmp-table th,.cmp-table td{padding:.9rem 1rem;text-align:left;border-bottom:1px solid #f1f5f9;vertical-align:top}
.cmp-table thead th{background:var(--accent-soft,#CCFBF1);color:var(--accent-dark,#0B5F5E);font-weight:800;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;border-bottom:2px solid var(--accent,#0EA5A4)}
.cmp-table tbody th{font-weight:600;color:#1f2937;min-width:200px}
.cmp-table tbody tr:hover{background:#fafbfc}
.cmp-table .yes{color:var(--accent-dark,#0B5F5E);font-weight:700}
.cmp-table .no{color:#9ca3af;font-weight:500}
.cmp-table .yes::before{content:"✓ ";color:var(--accent,#0EA5A4);font-weight:800}
.cmp-table .no::before{content:"— ";color:#cbd5e1}
.cmp-table .cmp-own{background:#f0fdfa}
.cmp-note{margin-top:.75rem;font-size:.82rem;color:#6b7280;text-align:center;font-style:italic}
@media (max-width:700px){
  .cmp-table{border-radius:10px}
  .cmp-table table{font-size:.86rem}
  .cmp-table th,.cmp-table td{padding:.65rem .6rem}
  .cmp-table tbody th{min-width:140px}
}

/* Bidirectional translate flow — visual in hero */
.translate-flow{display:grid;grid-template-columns:1fr;gap:1rem;max-width:560px;margin:1rem auto 0}
.tf-bubble{background:#fff;border-radius:16px;padding:1rem 1.1rem;border:1px solid #e5e7eb;box-shadow:0 6px 20px -10px rgba(10,30,60,.15);position:relative}
.tf-bubble.tf-agent{border-left:4px solid var(--accent,#0EA5A4)}
.tf-bubble.tf-customer{border-left:4px solid #25D366;background:#f0fdf4}
.tf-bubble .tf-who{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark,#0B5F5E);margin-bottom:.35rem}
.tf-bubble.tf-customer .tf-who{color:#128C7E}
.tf-bubble .tf-text{font-size:.98rem;color:#1f2937;line-height:1.45}
.tf-bubble .tf-meta{margin-top:.45rem;font-size:.78rem;color:#6b7280}
.tf-arrow{text-align:center;color:var(--accent,#0EA5A4);font-size:1.4rem;line-height:1}

.integ-page .section{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.integ-page .section--tight{padding:clamp(1.5rem,3vw,2.25rem) 0}
.integ-page .section-head{margin-bottom:1.35rem;max-width:720px}
.integ-page .hero{
  padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(.75rem,2vw,1.25rem) !important;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--cream-2) 55%,var(--cream-2) 100%);
  border-bottom:1px solid var(--border-soft)
}
.integ-page .eyebrow{background:var(--accent-soft);color:var(--accent-dark)}

/* ============================================================
   INTEGRATION PAGES — Auto-translation teaser strip
   Drop-in banner on each /integrations/* page. Picks up the
   page's accent via .integ-page context.
   ============================================================ */
.at-teaser-section{padding:clamp(1.5rem,3vw,2.5rem) 0;background:#FFFBF2}
.at-teaser{
  display:grid;grid-template-columns:1fr;gap:1.25rem;align-items:center;
  background:linear-gradient(135deg,#F0FDFA 0%,#CCFBF1 100%);
  border:1px solid #5EEAD4;border-radius:20px;
  padding:1.5rem 1.4rem;
  box-shadow:0 10px 30px -20px rgba(14,165,164,.3);
  position:relative;overflow:hidden;
}
.at-teaser::before{
  content:"";position:absolute;top:-40px;right:-40px;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(14,165,164,.18),transparent 65%);
  pointer-events:none;
}
@media (min-width:860px){
  .at-teaser{grid-template-columns:1fr auto;gap:2rem;padding:1.75rem 2rem}
}
.at-teaser-copy{position:relative;z-index:1}
.at-teaser-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:#0EA5A4;color:#fff;
  font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:999px;margin-bottom:.7rem;
}
.at-teaser-badge::before{content:"★";font-size:.7rem;letter-spacing:0}
.at-teaser h3{
  margin:0 0 .4rem;font-size:clamp(1.1rem,1.8vw,1.45rem);
  letter-spacing:-.01em;line-height:1.25;color:#0B1F3A;
}
.at-teaser h3 b{color:#0EA5A4;font-weight:800}
.at-teaser p{
  margin:0;color:#374151;font-size:.92rem;line-height:1.5;
}
.at-teaser-link{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  background:#0EA5A4;color:#fff;font-weight:700;font-size:.95rem;
  padding:.8rem 1.2rem;border-radius:999px;
  text-decoration:none;white-space:nowrap;
  box-shadow:0 6px 20px -8px rgba(14,165,164,.5);
  transition:transform .15s ease, box-shadow .15s ease;
  position:relative;z-index:1;
}
.at-teaser-link:hover{
  background:#0B5F5E;transform:translateY(-1px);
  box-shadow:0 10px 28px -10px rgba(14,165,164,.6);
}

/* ============================================================
   HOMEPAGE — Auto-translation unique differentiator band
   ============================================================ */
.section--translate-cta{
  background:linear-gradient(180deg,#F0FDFA 0%,#CCFBF1 100%);
  padding:clamp(2.5rem,5vw,4rem) 0;
  border-top:1px solid #A7F3D0;
  border-bottom:1px solid #A7F3D0;
  position:relative;overflow:hidden;
}
.section--translate-cta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 40% 30% at 90% 10%, rgba(14,165,164,.18), transparent 60%),
    radial-gradient(ellipse 30% 25% at 10% 90%, rgba(14,165,164,.14), transparent 60%);
}
.tcta-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;
  position:relative;z-index:1;
}
@media (min-width:960px){.tcta-grid{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.tcta-copy h2{
  font-size:clamp(1.65rem,3.5vw,2.5rem);letter-spacing:-.02em;line-height:1.15;
  margin:.8rem 0 1rem;color:#0B1F3A;
}
.tcta-accent{color:#0EA5A4}
.tcta-eyebrow{
  display:inline-block;background:#0EA5A4;color:#fff;
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.35rem .7rem;border-radius:999px;
}
.tcta-lead{
  color:#374151;font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.6;
  max-width:560px;margin:0 0 1.25rem;
}
.tcta-lead b{color:#0B5F5E}
.tcta-not-listed{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;
  margin:0 0 1.5rem;padding:.7rem .9rem;
  background:#fff;border:1px dashed #0EA5A4;border-radius:12px;
  max-width:520px;
}
.tcta-not-listed-label{
  font-size:.82rem;font-weight:800;color:#0B5F5E;
  text-transform:uppercase;letter-spacing:.08em;margin-right:.15rem;
}
.tcta-vendor{
  font-size:.85rem;color:#6b7280;
  text-decoration:line-through;text-decoration-color:#dc2626;text-decoration-thickness:1.5px;
  padding:.1rem .25rem;
}
.tcta-ctas{display:flex;flex-wrap:wrap;gap:.7rem}
.tcta-outline{border-color:#0EA5A4;color:#0B5F5E}
.tcta-outline:hover{background:#CCFBF1}

/* Visual: mini translate flow */
.tcta-visual{position:relative}
.tcta-flow{display:grid;gap:.9rem;max-width:460px;margin-left:auto}
.tcta-bubble{
  background:#fff;border-radius:16px;padding:.9rem 1rem;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 30px -15px rgba(10,30,60,.25);
}
.tcta-bubble--agent{border-left:4px solid #0EA5A4}
.tcta-bubble--customer{border-left:4px solid #25D366;background:#F0FDF4}
.tcta-who{
  font-size:.68rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#0B5F5E;margin-bottom:.3rem;
}
.tcta-bubble--customer .tcta-who{color:#128C7E}
.tcta-text{color:#111827;font-size:.98rem;line-height:1.45}
.tcta-meta{font-size:.72rem;color:#6b7280;margin-top:.4rem}
.tcta-arrow{
  font-size:.78rem;font-weight:700;color:#0B5F5E;
  text-align:center;letter-spacing:.02em;
}
@media (max-width:600px){
  .tcta-flow{margin:0 auto}
  .tcta-bubble{padding:.8rem .9rem}
  .tcta-text{font-size:.92rem}
}
.integ-page .trust-strip{background:var(--accent-dark);padding:.85rem 0}
.integ-page .outcome-pill{background:var(--accent-soft);border-color:var(--accent)}
.integ-page .outcome-pill b{color:var(--accent-dark)}
.integ-page .testimonial-stat{background:var(--accent-soft);color:var(--accent-dark)}
.integ-page .testimonial::before{color:var(--accent)}
.integ-page .testimonial-avatar{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
.integ-page .cta-band{
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--cream) 60%,var(--cream-2) 100%);
  border:1px solid var(--accent)
}
.integ-page .cta-band::before{display:none}
.integ-page .cta-band h2{color:var(--ink-strong)}
.integ-page .cta-band p{color:var(--ink)}
.integ-page .cta-band .btn--outline{border-color:var(--accent-dark);color:var(--accent-dark)}
.integ-page .cta-band .btn--outline:hover{background:var(--accent-soft)}
.integ-page .section--cream{background:var(--accent-soft)}
.integ-page .risk-pill{background:rgba(255,255,255,.85);color:var(--accent-dark);border-color:var(--accent)}

/* Native partner-brand feel — tint new sections to integration accent color
   instead of Go4whatsup's WhatsApp green. The WhatsApp phone mockup inside
   the hero stays authentic green (that's WhatsApp's identity). */
.integ-page .hero-accent{color:var(--accent-dark)}
.integ-page .pain-card .pain-icon{background:var(--accent-soft);color:var(--accent-dark)}
.integ-page .cap-card .cap-badge{background:var(--accent-soft);color:var(--accent-dark)}
.integ-page .cap-card ul li::before{
  /* Tick mark tinted to accent via CSS mask so colour can come from accent var. */
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.integ-page .module-pill::before{background:var(--accent)}
.integ-page .playbook-card .pb-emoji{background:linear-gradient(135deg, var(--accent-soft), #ffffff)}
.integ-page .playbook-card ul li::before{color:var(--accent-dark)}
.integ-page .playbook-card .pb-impact b{color:var(--accent-dark)}
.integ-page .why-row .why-tick{background:var(--accent)}
.integ-page .rev-card blockquote::before{color:var(--accent)}
.integ-page .rev-card .rev-avatar{background:linear-gradient(135deg, var(--accent-dark), var(--accent))}

/* Reusable video section — embed YouTube demos on any page
   Privacy-enhanced (youtube-nocookie), responsive 16:9, lazy-loaded.
   Tints to each integration's accent when placed inside .integ-page. */
.video-section{padding:4rem 0;background:linear-gradient(180deg,#ffffff,#f0fdf4)}
.integ-page .video-section{background:linear-gradient(180deg,#ffffff,var(--accent-soft))}
.video-section .v-head{text-align:center;max-width:680px;margin:0 auto 2rem;padding:0 1rem}
.video-section .v-head .eyebrow{display:inline-block;background:var(--accent-soft,#d1fae5);color:var(--accent-dark,#14532d);font-weight:700;letter-spacing:.08em;font-size:.78rem;padding:.35rem .7rem;border-radius:999px;text-transform:uppercase}
.video-section .v-head h2{font-size:2rem;line-height:1.2;font-weight:800;margin:.6rem 0 .6rem;color:var(--brand-ink,#0f172a)}
.video-section .v-sub{color:#4b5563;font-size:1.05rem;margin:0}
.video-section .v-wrap{max-width:960px;margin:0 auto;background:#ffffff;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;box-shadow:0 12px 40px -16px rgba(10,30,60,.18)}
.video-section .v-frame{position:relative;width:100%;padding-top:56.25%;background:#0b0f14;overflow:hidden}
.video-section .v-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-section .v-facade{cursor:pointer;display:block}
.video-section .v-facade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.video-section .v-facade:hover img,.video-section .v-facade:focus-visible img{transform:scale(1.03)}
.video-section .v-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:0;background:transparent;padding:0;cursor:pointer;
  width:68px;height:48px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.35));
  transition:transform .2s ease
}
.video-section .v-play svg{display:block;width:100%;height:100%}
.video-section .v-facade:hover .v-play,.video-section .v-facade:focus-visible .v-play{transform:translate(-50%,-50%) scale(1.08)}
.video-section .v-facade:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media (max-width:600px){
  .video-section .v-play{width:56px;height:40px}
}
.video-section .v-meta{padding:1.1rem 1.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;border-top:1px solid #f1f5f9}
.video-section .v-title{font-weight:700;color:var(--brand-ink,#0f172a);flex:1 1 300px;font-size:.98rem}
.video-section .v-info{color:#6b7280;font-size:.88rem}
.video-section .v-link{color:var(--accent-dark,#14532d);font-weight:700;text-decoration:none;font-size:.92rem}
.video-section .v-link:hover{text-decoration:underline}
@media (max-width:600px){
  .video-section{padding:2.75rem 0}
  .video-section .v-head h2{font-size:1.45rem;line-height:1.25}
  .video-section .v-sub{font-size:.98rem}
  .video-section .v-wrap{margin:0 1rem;border-radius:14px}
  .video-section .v-meta{padding:.95rem 1rem;gap:.5rem}
  .video-section .v-title{flex:1 1 100%;font-size:.95rem}
}

.integ-head-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.8rem}
.integ-head-row img{display:block}

/* Bridge visual in hero */
.integ-bridge{
  display:flex;align-items:center;justify-content:center;gap:.9rem;flex-wrap:wrap;
  background:#fff;border-radius:18px;border:1px solid var(--border-soft);
  padding:1.5rem 1.25rem;box-shadow:0 14px 36px -20px rgba(10,30,60,.18);
  max-width:460px;margin:0 auto
}
.bridge-node{
  min-width:130px;padding:.85rem .9rem;border-radius:12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.15rem
}
.bridge-node img{margin-bottom:.2rem}
.bridge-node b{font-size:.95rem;letter-spacing:-.005em}
.bridge-node small{font-size:.75rem;color:var(--ink-muted)}
.bridge-wa{background:#E8FAE9;border:1px solid #25D366;color:#0F9850}
.bridge-wa b{color:#065F46}
.bridge-other{background:var(--accent-soft);border:1px solid var(--accent);color:var(--accent-dark)}
.bridge-other b{color:var(--accent-dark)}
.bridge-arrow{display:flex;align-items:center;gap:.25rem}
.bridge-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.35;
  animation:bridge-pulse 1.2s infinite
}
.bridge-dot:nth-child(2){animation-delay:.2s}
.bridge-dot:nth-child(3){animation-delay:.4s}
@keyframes bridge-pulse{
  0%,100%{opacity:.3;transform:scale(.9)}
  50%{opacity:1;transform:scale(1.15)}
}

/* Sync matrix (two lists side by side) */
.sync-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:780px){.sync-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
.sync-col{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:1.1rem 1.2rem 1.25rem
}
.sync-head{
  margin:0 0 .75rem;font-size:.95rem;font-weight:700;color:var(--accent-dark);letter-spacing:-.01em;
  padding-bottom:.5rem;border-bottom:1px solid var(--border-soft)
}
.sync-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem}
.sync-list li{
  position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--ink);line-height:1.55
}
.sync-list li::before{
  content:"→";position:absolute;left:0;top:-1px;color:var(--accent);font-weight:800
}

/* Setup steps */
.setup-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:680px){.setup-grid{grid-template-columns:repeat(2,1fr);gap:1.15rem}}
@media (min-width:1040px){.setup-grid{grid-template-columns:repeat(4,1fr)}}
.setup-step{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:1.1rem 1.15rem 1.25rem;position:relative
}
.setup-num{
  display:inline-block;font-size:.85rem;font-weight:800;letter-spacing:.02em;
  color:var(--accent-dark);background:var(--accent-soft);
  padding:.3rem .55rem;border-radius:8px;margin-bottom:.55rem;border:1px solid var(--accent)
}
.setup-step h4{margin:0 0 .3rem;font-size:1rem;letter-spacing:-.005em}
.setup-step p{margin:0;font-size:.9rem;color:var(--ink-muted);line-height:1.55}

/* FAQ accordion */
.faq-list{display:flex;flex-direction:column;gap:.6rem}
.faq-item{
  background:#fff;border:1px solid var(--border-soft);border-radius:12px;
  padding:.85rem 1rem;transition:border-color .15s ease
}
.faq-item[open]{border-color:var(--accent)}
.faq-item p{margin:.55rem 0 0;font-size:.92rem;color:var(--ink-muted);line-height:1.6}

/* ==========================================================
   CASE STUDIES — hub + 3 case pages
   ========================================================== */

/* Hub */
.case-hero-stack{display:flex;flex-direction:column;gap:.7rem;max-width:380px;margin:0 auto}
.case-hero-kpi{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:1rem 1.15rem;box-shadow:0 10px 30px -18px rgba(10,30,60,.18);
  display:flex;flex-direction:column;gap:.1rem
}
.case-hero-kpi b{font-size:1.4rem;letter-spacing:-.02em;color:var(--brand-dark)}
.case-hero-kpi span{font-size:.88rem;color:var(--ink-muted)}

.case-grid{display:grid;grid-template-columns:1fr;gap:1.15rem}
@media (min-width:780px){.case-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.case-card{
  display:flex;flex-direction:column;gap:.45rem;
  padding:1.15rem 1.2rem 1.3rem;border-radius:16px;
  background:#fff;border:1px solid var(--border-soft);text-decoration:none;color:var(--ink);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  position:relative;overflow:hidden
}
.case-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--c);opacity:.9
}
.case-card:hover{transform:translateY(-2px);border-color:var(--c);box-shadow:0 12px 30px -18px rgba(10,30,60,.25)}
.case-industry{
  align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px;background:var(--cs);color:var(--cd);border:1px solid var(--c)
}
.case-card h3{margin:.2rem 0 .1rem;font-size:1.12rem;letter-spacing:-.01em}
.case-headline{margin:0 0 .45rem;font-weight:800;color:var(--cd);font-size:1.05rem;letter-spacing:-.01em}
.case-kpis{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:auto}
.case-kpi{
  background:var(--cs);border:1px solid var(--c);border-radius:10px;padding:.4rem .6rem;
  display:inline-flex;flex-direction:column;line-height:1.15
}
.case-kpi b{font-size:.95rem;color:var(--cd);letter-spacing:-.01em}
.case-kpi small{font-size:.7rem;color:var(--ink-muted)}
.case-more{margin-top:.6rem;font-weight:700;color:var(--cd);font-size:.9rem}

.case-hub .hero{background:linear-gradient(180deg,#F5F8FA 0%,var(--cream-2) 55%,var(--cream-2) 100%)}
.case-hub .section{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.case-hub .section--tight{padding:clamp(1.5rem,3vw,2.25rem) 0}

/* Individual case page — per-page accent */
.case-retail    {--accent:#F59E0B;--accent-dark:#B45309;--accent-soft:#FEF3C7}
.case-uae       {--accent:#475569;--accent-dark:#1E293B;--accent-soft:#E2E8F0}
.case-schools   {--accent:#8B5CF6;--accent-dark:#5B21B6;--accent-soft:#EDE9FE}

.case-page .section{padding:clamp(2.25rem,4.5vw,3.5rem) 0}
.case-page .section--tight{padding:clamp(1.5rem,3vw,2.25rem) 0}
.case-page .section-head{margin-bottom:1.35rem;max-width:720px}
.case-page .hero{
  padding:clamp(2.25rem,4.5vw,3.5rem) 0 clamp(.75rem,2vw,1.25rem) !important;
  background:linear-gradient(180deg,var(--accent-soft) 0%,var(--cream-2) 55%,var(--cream-2) 100%);
  border-bottom:1px solid var(--border-soft)
}
.case-page .eyebrow{background:var(--accent-soft);color:var(--accent-dark)}
.case-page .trust-strip{background:var(--accent-dark);padding:.85rem 0}
.case-page .testimonial-stat{background:var(--accent-soft);color:var(--accent-dark)}
.case-page .testimonial::before{color:var(--accent)}
.case-page .testimonial-avatar{background:linear-gradient(135deg,var(--accent-dark),var(--accent))}
.case-page .cta-band{
  background:linear-gradient(135deg,var(--accent-soft) 0%,var(--cream) 60%,var(--cream-2) 100%);
  border:1px solid var(--accent)
}
.case-page .cta-band::before{display:none}
.case-page .cta-band h2{color:var(--ink-strong)}
.case-page .cta-band p{color:var(--ink)}
.case-page .cta-band .btn--outline{border-color:var(--accent-dark);color:var(--accent-dark)}
.case-page .cta-band .btn--outline:hover{background:var(--accent-soft)}
.case-page .section--cream{background:var(--accent-soft)}
.case-page .risk-pill{background:rgba(255,255,255,.85);color:var(--accent-dark);border-color:var(--accent)}

.case-tagline{
  margin:.5rem 0 1rem;font-size:.88rem;font-weight:700;color:var(--accent-dark);
  letter-spacing:-.005em
}

/* Big KPI grid in hero */
.big-kpi-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;max-width:420px;margin:0 auto
}
.big-kpi{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:1rem 1.15rem;box-shadow:0 10px 28px -18px rgba(10,30,60,.18);
  display:flex;flex-direction:column;gap:.1rem;text-align:center
}
.big-kpi b{font-size:1.5rem;letter-spacing:-.02em;color:var(--accent-dark)}
.big-kpi span{font-size:.78rem;color:var(--ink-muted);font-weight:600}

/* Challenge / Solution / Results grid */
.case-body-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:880px){.case-body-grid{grid-template-columns:repeat(3,1fr);gap:1.15rem}}
.case-body-col{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;padding:1.15rem 1.2rem 1.3rem
}
.case-h3{
  margin:0 0 .75rem;font-size:1.05rem;letter-spacing:-.01em;font-weight:800;
  padding-bottom:.5rem;border-bottom:1px solid var(--border-soft)
}
.case-challenge .case-h3{color:#DC2626}
.case-solution .case-h3{color:#1E40AF}
.case-results .case-h3{color:var(--accent-dark)}
.case-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.case-list li{
  position:relative;padding-left:1.35rem;font-size:.92rem;color:var(--ink);line-height:1.55
}
.case-challenge .case-list li::before{content:"✗";position:absolute;left:0;color:#DC2626;font-weight:800}
.case-solution  .case-list li::before{content:"◆";position:absolute;left:0;color:#1E40AF}
.case-results   .case-list li::before{content:"✓";position:absolute;left:0;color:var(--accent-dark);font-weight:800}

/* Timeline — reuse .first-30 .case-step */
.case-page .first-30{grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.case-page .first-30{grid-template-columns:repeat(4,1fr)}}
.case-page .case-step{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:1.1rem 1.15rem;display:flex;flex-direction:column;gap:.35rem
}
.case-page .case-step .day{
  align-self:flex-start;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .55rem;border-radius:8px;background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--accent)
}
.case-page .case-step p{margin:0;font-size:.9rem;color:var(--ink);line-height:1.55}

/* Stack chips */
.stack-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.45rem;margin-top:.85rem}
.stack-chip{
  font-size:.85rem;font-weight:600;color:var(--accent-dark);
  padding:.4rem .75rem;border-radius:999px;background:var(--accent-soft);border:1px solid var(--accent)
}

/* ==========================================================
   LEGAL PAGES — privacy, terms, refund, compliance
   ========================================================== */

.legal .effective-date{margin-top:.75rem;font-size:.9rem;color:var(--ink-muted)}
.legal-layout{
  display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:1080px;margin:0 auto
}
@media (min-width:920px){.legal-layout{grid-template-columns:240px 1fr;gap:2.5rem}}
.legal-toc{
  position:sticky;top:calc(var(--header-h,64px) + 1rem);
  align-self:flex-start;
  background:#fff;border:1px solid var(--border-soft);border-radius:12px;
  padding:1rem 1.1rem;font-size:.9rem
}
.legal-toc b{display:block;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:.7rem}
.legal-toc nav{display:flex;flex-direction:column;gap:.45rem}
.legal-toc nav a{
  color:var(--ink);text-decoration:none;font-weight:500;line-height:1.4;
  padding:.15rem 0;border-left:2px solid transparent;padding-left:.6rem;margin-left:-.6rem;
  transition:color .15s ease,border-color .15s ease
}
.legal-toc nav a:hover{color:var(--brand-dark);border-left-color:var(--brand)}
.legal-body{display:flex;flex-direction:column;gap:1.5rem;min-width:0}
.legal-section{
  background:#fff;border:1px solid var(--border-soft);border-radius:14px;
  padding:1.5rem 1.75rem 1.65rem;scroll-margin-top:calc(var(--header-h,64px) + 1rem)
}
.legal-section h2{
  font-size:1.25rem;letter-spacing:-.01em;margin:0 0 .75rem;color:var(--ink);
  padding-bottom:.5rem;border-bottom:1px solid var(--border-soft)
}
.legal-section h3{font-size:1rem;margin:1.1rem 0 .3rem;letter-spacing:-.005em}
.legal-section p{margin:0 0 .7rem;font-size:.95rem;line-height:1.7;color:var(--ink)}
.legal-section p:last-child{margin-bottom:0}
.legal-section ul{margin:0 0 .7rem;padding-left:1.25rem;font-size:.95rem;line-height:1.7;color:var(--ink)}
.legal-section ul li{margin-bottom:.3rem}
.legal-section a{color:var(--brand-dark);font-weight:600}
.legal-section a:hover{text-decoration:underline}
.legal-contact{
  background:var(--cream-2);border:1px dashed var(--border-soft);border-radius:14px;
  padding:1.25rem 1.5rem
}
.legal-contact h3{margin:0 0 .3rem;font-size:1.05rem}
.legal-contact p{margin:0;font-size:.95rem;color:var(--ink);line-height:1.6}

/* =========================================================
   CTA urgency — scarcity strip, why-now 3-point, inline WA link
   ========================================================= */
.urgency-strip{
  display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(255,255,255,.14);color:#fff;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:.45rem 1rem;
  font-size:.92rem;font-weight:500;letter-spacing:.005em;
  margin:1rem auto 0
}
.urgency-strip b{font-weight:700}
.urgency-dot{
  width:9px;height:9px;border-radius:50%;
  background:#FDE68A;box-shadow:0 0 0 0 rgba(253,230,138,.65);
  animation:urg-pulse 1.8s ease-out infinite;flex-shrink:0
}
@keyframes urg-pulse{
  0%{box-shadow:0 0 0 0 rgba(253,230,138,.75)}
  70%{box-shadow:0 0 0 10px rgba(253,230,138,0)}
  100%{box-shadow:0 0 0 0 rgba(253,230,138,0)}
}
.urgency-why{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;
  max-width:920px;margin:1.25rem auto 0;text-align:left
}
.urgency-why .uw-point{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:.85rem 1rem;
  color:rgba(255,255,255,.92);font-size:.9rem;line-height:1.5
}
.urgency-why .uw-point b{color:#fff;font-weight:700}
.urgency-why .uw-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.18);color:#fff;
  font-size:.95rem;font-weight:700;margin-right:.5rem;vertical-align:middle
}
@media (max-width:780px){
  .urgency-why{grid-template-columns:1fr;gap:.6rem;max-width:460px}
}
.inline-wa{margin:1rem 0 0;text-align:center;font-size:.92rem}
.inline-wa a{
  color:rgba(255,255,255,.92);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4);
  font-weight:500
}
.inline-wa a:hover{color:#fff;text-decoration-color:#fff}

/* Pages with light CTA-band backgrounds (solutions, industries, integrations,
   case studies, legal) need dark urgency text so it's legible. */
.sol-page .urgency-strip,
.ind-page .urgency-strip,
.integ-page .urgency-strip,
.case-page .urgency-strip,
.legal-page .urgency-strip{
  background:var(--accent-soft);color:var(--accent-dark);
  border-color:rgba(0,0,0,.08)
}
.sol-page .urgency-dot,
.ind-page .urgency-dot,
.integ-page .urgency-dot,
.case-page .urgency-dot,
.legal-page .urgency-dot{
  background:var(--accent-dark);
  animation:urg-pulse-dark 1.8s ease-out infinite
}
@keyframes urg-pulse-dark{
  0%{box-shadow:0 0 0 0 rgba(0,0,0,.25)}
  70%{box-shadow:0 0 0 10px rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}
.sol-page .urgency-why .uw-point,
.ind-page .urgency-why .uw-point,
.integ-page .urgency-why .uw-point,
.case-page .urgency-why .uw-point,
.legal-page .urgency-why .uw-point{
  background:#fff;border-color:var(--border-soft);color:var(--ink)
}
.sol-page .urgency-why .uw-point b,
.ind-page .urgency-why .uw-point b,
.integ-page .urgency-why .uw-point b,
.case-page .urgency-why .uw-point b,
.legal-page .urgency-why .uw-point b{color:var(--ink-strong)}
.sol-page .urgency-why .uw-icon,
.ind-page .urgency-why .uw-icon,
.integ-page .urgency-why .uw-icon,
.case-page .urgency-why .uw-icon,
.legal-page .urgency-why .uw-icon{
  background:var(--accent-soft);color:var(--accent-dark)
}
.sol-page .inline-wa a,
.ind-page .inline-wa a,
.integ-page .inline-wa a,
.case-page .inline-wa a,
.legal-page .inline-wa a{
  color:var(--accent-dark);text-decoration-color:rgba(0,0,0,.2)
}
.sol-page .inline-wa a:hover,
.ind-page .inline-wa a:hover,
.integ-page .inline-wa a:hover,
.case-page .inline-wa a:hover,
.legal-page .inline-wa a:hover{color:var(--accent-dark);text-decoration-color:var(--accent-dark)}

/* =========================================================
   HOMEPAGE VARIANT A — WhatsApp-first
   ========================================================= */
.variant-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#FEF3C7;color:#92400E;font-size:.72rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:999px;
  border:1px solid #FCD34D;margin-bottom:1rem
}
.variant-b-badge{background:#DBEAFE;color:#1E40AF;border-color:#93C5FD}

.hero--wa{
  background:linear-gradient(180deg,#E8FAE9 0%,#F8FCF9 55%,var(--cream-2) 100%);
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)
}
.hero-wa-grid{
  display:grid;grid-template-columns:1fr;gap:2.5rem;align-items:center
}
@media (min-width:960px){
  .hero-wa-grid{grid-template-columns:1.05fr .95fr;gap:3rem}
}
.hero-wa-left h1{
  font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;
  margin:.75rem 0 1rem
}
.hero-wa-left h1 .hl{
  color:var(--brand-dark);
  background:linear-gradient(180deg,transparent 60%,#BBF3C6 60%)
}
.hero-wa-sub{
  color:var(--ink-muted);font-size:1.1rem;line-height:1.55;
  max-width:560px;margin:0 0 1.5rem
}

/* Live-online indicator */
.live-online{
  display:inline-flex;align-items:center;gap:.55rem;
  background:#fff;border:1px solid var(--border-soft);
  padding:.45rem .85rem;border-radius:999px;
  font-size:.88rem;color:var(--ink);margin-bottom:1rem;
  box-shadow:0 2px 8px rgba(0,0,0,.04)
}
.live-online .live-dot{
  width:8px;height:8px;border-radius:50%;
  background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:live-pulse 1.6s ease-out infinite
}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}
  70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.live-online b{color:var(--brand-dark);font-weight:700}

/* Primary WhatsApp button (chunky) */
.btn--wa{
  background:#25D366;color:#fff;border:none;
  padding:1.05rem 1.75rem;border-radius:14px;
  font-size:1.08rem;font-weight:700;
  display:inline-flex;align-items:center;gap:.7rem;
  box-shadow:0 10px 30px -10px rgba(37,211,102,.6);
  transition:all .2s ease;text-decoration:none
}
.btn--wa:hover{background:#1FBA59;transform:translateY(-1px);box-shadow:0 14px 34px -10px rgba(37,211,102,.7)}
.btn--wa svg{width:22px;height:22px;flex-shrink:0}

/* Type-to-chat input */
.type-to-chat{
  margin-top:1.25rem;background:#fff;border:1px solid var(--border-soft);
  border-radius:16px;padding:.5rem .5rem .5rem 1.1rem;
  display:flex;align-items:center;gap:.5rem;
  box-shadow:0 4px 14px rgba(0,0,0,.04);max-width:500px
}
.type-to-chat input{
  flex:1;border:none;outline:none;background:transparent;
  font-size:1rem;color:var(--ink);font-family:inherit;padding:.65rem 0
}
.type-to-chat input::placeholder{color:var(--ink-muted)}
.type-to-chat button{
  background:#25D366;color:#fff;border:none;
  padding:.7rem 1rem;border-radius:10px;
  font-weight:700;font-size:.92rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;transition:all .2s
}
.type-to-chat button:hover{background:#1FBA59}
.type-to-chat-hint{font-size:.82rem;color:var(--ink-muted);margin:.55rem 0 0}

/* QR panel on the right */
.hero-wa-right{
  position:relative;display:flex;flex-direction:column;gap:1rem;
  align-items:center
}
.wa-chat-phone{
  background:#E5DDD5;border-radius:24px;padding:.6rem;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.25),0 10px 30px -10px rgba(0,0,0,.15);
  width:min(100%,360px);
  position:relative
}
.wa-chat-phone::before{
  content:"";position:absolute;top:.6rem;left:50%;transform:translateX(-50%);
  width:60px;height:4px;border-radius:2px;background:rgba(0,0,0,.15)
}
.wa-phone-head{
  background:#075E54;color:#fff;border-radius:18px 18px 0 0;
  padding:1rem;display:flex;align-items:center;gap:.65rem;margin-top:.75rem
}
.wa-phone-head .wp-avatar{
  width:38px;height:38px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:1rem
}
.wa-phone-head b{display:block;font-size:.95rem;font-weight:600}
.wa-phone-head small{display:block;font-size:.78rem;color:rgba(255,255,255,.75);margin-top:2px}
.wa-phone-body{
  background:#ECE5DD;padding:1rem .75rem;min-height:260px;
  display:flex;flex-direction:column;gap:.5rem;
  background-image:
    radial-gradient(circle at 15% 25%,rgba(255,255,255,.35) 0%,transparent 5%),
    radial-gradient(circle at 75% 60%,rgba(255,255,255,.25) 0%,transparent 5%),
    radial-gradient(circle at 40% 85%,rgba(255,255,255,.3) 0%,transparent 5%)
}
.wa-bubble{
  max-width:78%;padding:.6rem .85rem;border-radius:10px;
  font-size:.92rem;line-height:1.35;
  box-shadow:0 1px 0 rgba(0,0,0,.05)
}
.wa-bubble-in{background:#fff;color:#111;align-self:flex-start;border-top-left-radius:2px}
.wa-bubble-out{background:#DCF8C6;color:#111;align-self:flex-end;border-top-right-radius:2px}
.wa-bubble-time{font-size:.7rem;color:#667781;margin-top:3px;display:block;text-align:right}
.wa-phone-foot{
  background:#F0F0F0;border-radius:0 0 18px 18px;
  padding:.7rem .8rem;display:flex;align-items:center;gap:.5rem
}
.wa-input-mock{
  flex:1;background:#fff;border-radius:20px;padding:.55rem .9rem;
  color:#667781;font-size:.85rem
}
.wa-send-btn{
  width:36px;height:36px;border-radius:50%;background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center
}
.wa-typing{
  display:inline-flex;gap:3px;padding:.55rem .8rem;background:#fff;
  border-radius:10px;align-self:flex-start;border-top-left-radius:2px
}
.wa-typing span{
  width:6px;height:6px;border-radius:50%;background:#667781;
  animation:typing-dot 1.2s ease-in-out infinite
}
.wa-typing span:nth-child(2){animation-delay:.15s}
.wa-typing span:nth-child(3){animation-delay:.3s}
@keyframes typing-dot{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-4px);opacity:1}
}

.qr-panel{
  background:#fff;border-radius:18px;padding:1rem 1.25rem;
  display:flex;align-items:center;gap:1rem;
  border:1px solid var(--border-soft);box-shadow:0 8px 24px -8px rgba(0,0,0,.08);
  max-width:360px
}
.qr-panel .qr-img{
  width:78px;height:78px;flex-shrink:0;padding:6px;
  background:#fff;border:1px solid var(--border-soft);border-radius:8px
}
.qr-panel-text b{display:block;font-weight:700;color:var(--ink-strong);font-size:.95rem;margin-bottom:2px}
.qr-panel-text p{margin:0;font-size:.82rem;color:var(--ink-muted);line-height:1.4}

/* Trust micro-row below hero (variant A) */
.hero-wa-trust{
  margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:1.1rem;
  color:var(--ink-muted);font-size:.88rem
}
.hero-wa-trust span{display:inline-flex;align-items:center;gap:.35rem}
.hero-wa-trust svg{width:16px;height:16px;color:#25D366}

/* Legacy standalone WhatsApp FAB — RETIRED 2026-04-22.
   The unified help-rail (assets/js/help-rail.js) now owns WhatsApp + SalesIQ + AI
   in one vertical stack on the bottom-right. Forcing display:none here is a
   belt-and-braces guard so any stale cached HTML that still contains
   <a class="wa-float-fab"> can never render a rogue button on top of the rail. */
.wa-float-fab{display:none !important;}
.wa-float-fab__retired-legacy-ignore{
  position:fixed;bottom:1.5rem;left:1.5rem;right:auto;z-index:999;
  background:#25D366;color:#fff;border-radius:999px;
  padding:.85rem 1.25rem .85rem 1rem;
  display:inline-flex;align-items:center;gap:.6rem;
  box-shadow:0 14px 30px -8px rgba(37,211,102,.55);
  text-decoration:none;font-weight:700;font-size:.95rem;
  transition:all .25s ease
}
.wa-float-fab:hover{transform:translateY(-2px);box-shadow:0 18px 34px -8px rgba(37,211,102,.7)}
.wa-float-fab svg{width:22px;height:22px}
.wa-float-fab .fab-pulse{
  position:absolute;top:.6rem;right:.6rem;
  width:10px;height:10px;border-radius:50%;background:#FDE68A;
  box-shadow:0 0 0 0 rgba(253,230,138,.8);
  animation:live-pulse 1.6s ease-out infinite
}

/* =========================================================
   HOMEPAGE VARIANT B — Live sandbox
   ========================================================= */
.hero--sandbox{
  background:linear-gradient(180deg,#EFF6FF 0%,#F8FAFC 55%,var(--cream-2) 100%);
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(2rem,4vw,3rem)
}
.sandbox-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;align-items:start
}
@media (min-width:960px){
  .sandbox-grid{grid-template-columns:1.1fr .9fr;gap:3rem}
}
.sandbox-left h1{
  font-size:clamp(2.1rem,4.6vw,3.4rem);line-height:1.08;letter-spacing:-.02em;
  margin:.75rem 0 1rem
}
.sandbox-left h1 .hl{
  background:linear-gradient(180deg,transparent 60%,#FDE68A 60%);color:var(--ink-strong)
}
.sandbox-sub{
  color:var(--ink-muted);font-size:1.1rem;line-height:1.55;
  max-width:560px;margin:0 0 1.25rem
}

/* The actual sandbox card — main event */
.sandbox-card{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:20px;padding:1.5rem;
  box-shadow:0 22px 48px -14px rgba(30,58,138,.18),0 8px 18px -6px rgba(30,58,138,.08)
}
.sandbox-eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#DBEAFE;color:#1E40AF;font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.05em;
  padding:.3rem .75rem;border-radius:999px;margin-bottom:.9rem
}
.sandbox-card h3{
  margin:0 0 .4rem;font-size:1.25rem;color:var(--ink-strong);letter-spacing:-.01em
}
.sandbox-card p{margin:0 0 1.2rem;color:var(--ink-muted);font-size:.95rem;line-height:1.55}
.sandbox-form{display:flex;gap:.5rem;margin-bottom:.8rem}
.sandbox-form select,.sandbox-form input{
  border:1px solid var(--border-soft);border-radius:10px;
  padding:.8rem .9rem;font-size:.98rem;font-family:inherit;
  background:#fff;outline:none;transition:border-color .15s
}
.sandbox-form select{width:110px;background:#F9FAFB}
.sandbox-form input{flex:1;min-width:0}
.sandbox-form input:focus,.sandbox-form select:focus{border-color:var(--brand)}
.sandbox-form button{
  background:var(--brand);color:#fff;border:none;
  padding:.8rem 1.25rem;border-radius:10px;
  font-weight:700;font-size:.98rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.4rem;
  white-space:nowrap;transition:all .2s
}
.sandbox-form button:hover{background:var(--brand-dark)}
.sandbox-disclaimer{font-size:.78rem;color:var(--ink-muted);margin:0}
.sandbox-disclaimer b{color:var(--ink)}

/* Success state after submission */
.sandbox-success{
  display:none;padding:1.25rem;background:#F0FDF4;
  border:1px solid #86EFAC;border-radius:12px;
  color:#14532D;font-size:.95rem;line-height:1.5;margin-top:.8rem
}
.sandbox-success.is-visible{display:block;animation:fade-in-up .4s ease}
@keyframes fade-in-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sandbox-success b{color:#14532D}
.sandbox-success .check-circle{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:#22C55E;color:#fff;
  font-size:.85rem;margin-right:.5rem;vertical-align:middle
}

/* Callback widget */
.callback-card{
  margin-top:1rem;background:#FFFBEB;border:1px solid #FCD34D;
  border-radius:14px;padding:1rem 1.2rem;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap
}
.callback-card .cb-icon{
  width:40px;height:40px;border-radius:50%;background:#F59E0B;color:#fff;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0
}
.callback-card .cb-text{flex:1;min-width:200px}
.callback-card .cb-text b{color:var(--ink-strong);display:block;font-size:.95rem;margin-bottom:2px}
.callback-card .cb-text small{color:var(--ink-muted);font-size:.82rem}
.callback-card .cb-btn{
  background:#F59E0B;color:#fff;border:none;padding:.6rem 1rem;border-radius:8px;
  font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:none;white-space:nowrap
}
.callback-card .cb-btn:hover{background:#D97706}

/* Today's slots strip */
.slots-strip{
  margin-top:1.5rem;background:#fff;border:1px solid var(--border-soft);
  border-radius:14px;padding:1rem 1.2rem
}
.slots-strip-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}
.slots-strip-head b{color:var(--ink-strong);font-size:.95rem}
.slots-strip-head .slots-live{color:#15803D;font-size:.78rem;font-weight:600}
.slots-row{display:flex;flex-wrap:wrap;gap:.4rem}
.slot-chip{
  padding:.45rem .85rem;background:#F8FAFC;border:1px solid var(--border-soft);
  border-radius:8px;font-size:.88rem;font-weight:600;color:var(--ink);
  cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block
}
.slot-chip:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-dark)}
.slot-chip.slot-taken{background:#F3F4F6;color:#9CA3AF;text-decoration:line-through;cursor:not-allowed;pointer-events:none}
.slot-chip.slot-hot{background:#FEF3C7;border-color:#F59E0B;color:#92400E}

/* Metrics mini-dashboard (right column of variant B) */
.sandbox-right{display:flex;flex-direction:column;gap:1rem}
.live-metrics{
  background:#0F172A;color:#F8FAFC;border-radius:20px;padding:1.5rem;
  position:relative;overflow:hidden
}
.live-metrics::before{
  content:"";position:absolute;inset:0;background:
    radial-gradient(ellipse 60% 70% at 100% 0%,rgba(59,130,246,.25),transparent 60%),
    radial-gradient(ellipse 60% 70% at 0% 100%,rgba(37,211,102,.18),transparent 60%)
}
.live-metrics-head{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.live-metrics-head b{font-size:.88rem;font-weight:600;color:rgba(248,250,252,.9)}
.live-metrics-head .lm-live{
  display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;
  background:rgba(34,197,94,.2);color:#86EFAC;padding:.25rem .6rem;border-radius:999px
}
.live-metrics-head .lm-live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#22C55E;
  animation:live-pulse 1.6s ease-out infinite
}
.lm-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}
.lm-kpi{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:.8rem}
.lm-kpi b{display:block;font-size:1.5rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.lm-kpi small{color:rgba(248,250,252,.65);font-size:.78rem}
.lm-kpi .lm-delta{color:#4ADE80;font-size:.75rem;margin-left:.3rem;font-weight:600}
.lm-bar{position:relative;height:60px;display:flex;align-items:flex-end;gap:4px}
.lm-bar .bar-col{flex:1;background:linear-gradient(180deg,#4ADE80,#22C55E);border-radius:3px 3px 0 0;transition:height .3s}
.lm-footer{position:relative;margin-top:1rem;font-size:.78rem;color:rgba(248,250,252,.6)}

/* Video peek card */
.video-peek{
  background:#fff;border:1px solid var(--border-soft);
  border-radius:16px;padding:1rem;display:flex;align-items:center;gap:1rem
}
.video-peek .vp-thumb{
  width:100px;height:64px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#1E3A8A,#3B82F6);
  display:flex;align-items:center;justify-content:center;color:#fff;
  position:relative
}
.video-peek .vp-thumb svg{width:28px;height:28px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.video-peek b{display:block;font-size:.95rem;color:var(--ink-strong)}
.video-peek small{font-size:.8rem;color:var(--ink-muted)}
.video-peek .vp-cta{color:var(--brand-dark);font-weight:600;font-size:.88rem;margin-top:.2rem;display:inline-block}
.video-peek .vp-cta b{color:var(--ink-strong);font-size:.98rem;margin-bottom:.1rem}
.video-peek .vp-cta span{display:block;color:var(--ink-muted);font-size:.82rem;font-weight:500}
.video-peek .vp-play{font-size:1.4rem;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}

/* ---- Variant B patch: align HTML class names with CSS ---- */
.lm-head{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}
.lm-head .lm-live{
  display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;font-weight:600;
  background:rgba(34,197,94,.2);color:#86EFAC;padding:.3rem .7rem;border-radius:999px;letter-spacing:.04em
}
.lm-live-dot{
  width:7px;height:7px;border-radius:50%;background:#22C55E;
  animation:live-pulse 1.6s ease-out infinite;flex-shrink:0
}
.lm-kpi .lm-num{display:block;font-size:1.45rem;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1.1}
.lm-kpi .lm-lbl{display:block;color:rgba(248,250,252,.62);font-size:.74rem;margin-top:.15rem}
.lm-kpi .lm-delta{display:inline-block;color:#4ADE80;font-size:.72rem;margin-top:.35rem;font-weight:600}
.lm-kpi .lm-delta-down{color:#60A5FA}
.lm-bar span{flex:1;background:linear-gradient(180deg,#4ADE80,#22C55E);border-radius:3px 3px 0 0;display:block;transition:height .3s}
.lm-bar span:nth-child(odd){background:linear-gradient(180deg,#86EFAC,#22C55E)}
.lm-foot{position:relative;margin-top:.8rem;font-size:.72rem;color:rgba(248,250,252,.55);letter-spacing:.02em}

/* Sandbox form polish */
.sb-label{display:block;margin-bottom:.9rem}
.sb-label > span{display:block;font-size:.78rem;font-weight:600;color:var(--ink-muted);margin-bottom:.4rem;letter-spacing:.02em;text-transform:uppercase}
.sb-label select,.sb-label input{
  width:100%;padding:.75rem .9rem;border:1.5px solid var(--border-soft);border-radius:10px;
  font-family:inherit;font-size:.95rem;color:var(--ink-strong);background:#fff;
  transition:border-color .15s
}
.sb-label select:focus,.sb-label input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.sb-phone{display:flex;gap:.5rem}
.sb-phone .sb-cc{flex:0 0 96px}
.sb-phone input{flex:1}
.sb-submit{width:100%;margin-top:.4rem}
.sb-fine{margin:.7rem 0 0;font-size:.75rem;color:var(--ink-muted);text-align:center}

/* Sandbox success state — shown only after form submit */
.sandbox-success{display:none;text-align:center;padding:.8rem 0}
.sandbox-card.is-sent .sandbox-form{display:none}
.sandbox-card.is-sent .sandbox-success{display:block;animation:fade-in-up .5s ease-out}

/* Sandbox eyebrow decoration */
.sandbox-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;font-size:.72rem;font-weight:600;
  color:var(--brand-dark);margin-bottom:1rem;letter-spacing:.04em;text-transform:uppercase
}
.sandbox-eyebrow-dot{
  width:7px;height:7px;border-radius:50%;background:var(--brand);flex-shrink:0;
  animation:live-pulse 1.6s ease-out infinite
}

/* Slot strip label */
.slots-label{font-size:.8rem;color:var(--ink-muted);font-weight:600;margin-right:.3rem}

/* Callback card inner parts */
.callback-card .cb-icon{font-size:1.6rem;flex-shrink:0}
.callback-card .cb-text{flex:1}
.callback-card .cb-text b{display:block;color:var(--ink-strong);font-size:1rem}
.callback-card .cb-text span{display:block;color:var(--ink-muted);font-size:.82rem;margin-top:.1rem}
.callback-card .cb-btn{
  flex-shrink:0;padding:.55rem 1rem;background:var(--brand-soft);color:var(--brand-dark);
  border-radius:999px;font-size:.85rem;font-weight:600;text-decoration:none;white-space:nowrap;
  transition:background .15s
}
.callback-card .cb-btn:hover{background:var(--brand);color:#fff}

/* Variant B badge dot */
.vb-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:live-pulse 1.6s ease-out infinite}

/* FAB label (shown on hover on desktop) — appears to the RIGHT of the FAB now
   because the FAB itself moved to bottom-left. */
.fab-label{
  position:absolute;left:calc(100% + 12px);right:auto;top:50%;transform:translateY(-50%);
  background:#0B141A;color:#fff;padding:.5rem .9rem;border-radius:10px;font-size:.82rem;
  font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s
}
.wa-float-fab:hover .fab-label{opacity:1;transform:translateY(-50%) translateX(4px)}
@media (max-width:640px){.fab-label{display:none}}

/* Type-to-chat extras */
.type-to-chat .ttc-icon{font-size:1.1rem;margin-right:.2rem}
.type-to-chat{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#fff;border:1.5px solid var(--border-soft);border-radius:999px;margin:1.2rem 0 .8rem;box-shadow:0 4px 14px -4px rgba(0,0,0,.08)}
.type-to-chat input{flex:1;border:0;outline:0;padding:.5rem .8rem;font-family:inherit;font-size:.92rem;background:transparent;color:var(--ink-strong)}
.type-to-chat input::placeholder{color:var(--ink-muted)}
.type-to-chat button{padding:.55rem 1rem;font-size:.85rem;white-space:nowrap;border-radius:999px}

/* hero-wa-trust row */
.hero-wa-trust{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:.6rem;font-size:.85rem;color:var(--ink-muted);font-weight:500}

/* ============================================================
   TOP URGENCY RIBBON (Meta pricing migration)
   ============================================================ */
.top-ribbon{
  background:linear-gradient(90deg,#0B141A 0%,#1F3A2E 50%,#0B141A 100%);
  color:#fff;padding:.55rem 0;font-size:.85rem;border-bottom:1px solid rgba(37,211,102,.25);
  position:relative;overflow:hidden
}
.top-ribbon::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(37,211,102,.08),transparent);
  animation:ribbon-shimmer 6s linear infinite
}
@keyframes ribbon-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.top-ribbon-inner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;position:relative}
.tr-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;flex-shrink:0;animation:live-pulse 1.6s ease-out infinite}
.tr-text{flex:1;min-width:240px;line-height:1.4}
.tr-text b{color:#fff;font-weight:700}
.tr-cta{
  color:#86EFAC;font-weight:600;text-decoration:none;white-space:nowrap;
  padding:.25rem .75rem;border:1px solid rgba(134,239,172,.35);border-radius:999px;
  transition:background .15s,color .15s
}
.tr-cta:hover{background:#22C55E;color:#0B141A;border-color:#22C55E}
@media (max-width:640px){
  .top-ribbon{font-size:.78rem;padding:.5rem 0}
  .tr-cta{font-size:.78rem;padding:.2rem .6rem}
}

/* ============================================================
   LIVE ACTIVITY TICKER (no competitor does this)
   ============================================================ */
.activity-ticker{
  background:#F0FDF4;border-top:1px solid rgba(34,197,94,.15);border-bottom:1px solid rgba(34,197,94,.15);
  padding:.85rem 0;overflow:hidden
}
.activity-ticker-inner{display:flex;align-items:center;gap:1rem}
.at-label{
  flex-shrink:0;display:inline-flex;align-items:center;gap:.45rem;
  font-size:.7rem;font-weight:700;letter-spacing:.08em;color:#166534;
  background:#fff;padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(34,197,94,.3)
}
.at-pulse{
  width:7px;height:7px;border-radius:50%;background:#22C55E;
  animation:live-pulse 1.6s ease-out infinite;flex-shrink:0
}
.at-track{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.at-marquee{display:flex;gap:3rem;width:max-content;animation:at-scroll 55s linear infinite}
.at-marquee:hover{animation-play-state:paused}
.at-item{white-space:nowrap;font-size:.88rem;color:#1F2937;font-weight:500}
.at-item b{color:#065F46;font-weight:700}
.at-item .at-ago{color:#6B7280;font-size:.8rem;font-weight:500}
@keyframes at-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (max-width:640px){
  .activity-ticker{padding:.7rem 0}
  .at-label{font-size:.65rem;padding:.3rem .6rem}
  .at-item{font-size:.8rem}
}

/* ============================================================
   TRANSPARENT PRICE-CHECK WIDGET (competitor killer)
   ============================================================ */
.price-check{
  background:#fff;border-radius:16px;padding:1.3rem;border:1px solid var(--border-soft);
  box-shadow:0 10px 26px -12px rgba(0,0,0,.08)
}
.pc-head{margin-bottom:.9rem;padding-bottom:.9rem;border-bottom:1px dashed var(--border-soft)}
.pc-eyebrow{display:block;font-size:.72rem;font-weight:700;color:var(--brand-dark);letter-spacing:.04em;text-transform:uppercase;margin-bottom:.2rem}
.pc-sub{font-size:.82rem;color:var(--ink-muted)}
.pc-row{
  display:grid;grid-template-columns:1.1fr .9fr auto;align-items:center;gap:.6rem;
  padding:.55rem 0;border-bottom:1px solid rgba(0,0,0,.04)
}
.pc-row:last-of-type{border-bottom:0}
.pc-logo{font-weight:600;color:var(--ink-strong);font-size:.92rem}
.pc-price{font-weight:700;color:var(--ink-strong);font-size:1.05rem;letter-spacing:-.01em;text-align:right}
.pc-price small{font-size:.72rem;color:var(--ink-muted);font-weight:500;margin-left:2px}
.pc-tag{font-size:.7rem;color:var(--ink-muted);padding:.2rem .55rem;border-radius:999px;background:#F3F4F6;white-space:nowrap}
.pc-tag-up{color:#991B1B;background:#FEE2E2}
.pc-tag-win{color:#065F46;background:#D1FAE5;font-weight:600}
.pc-row-us{
  background:linear-gradient(90deg,#D1FAE5,#F0FDF4);
  margin:.55rem -.3rem 0;padding:.8rem .3rem;border-radius:10px;
  border:1.5px solid #22C55E;border-bottom:1.5px solid #22C55E
}
.pc-logo-us{color:var(--brand-dark);font-weight:800}
.pc-price-us{color:var(--brand-dark);font-size:1.15rem}
.pc-fine{margin:.9rem 0 0;font-size:.78rem;color:var(--ink-muted);text-align:center;line-height:1.5}
.pc-fine b{color:var(--brand-dark);font-weight:700}
.pc-fine a{color:var(--brand-dark);font-weight:600;text-decoration:none;border-bottom:1px dashed}
.pc-fine a:hover{color:var(--brand)}

/* ============================================================
   BREATHING-ROOM OVERRIDES — v2 homepage
   Kill cramped layouts, tone down font sizes, add vertical space
   ============================================================ */

/* Fix the big one: old rule set .sandbox-form to display:flex.
   We need block so sb-label children stack vertically. */
.sandbox-form{display:block;margin-bottom:0}

/* Reset old .sandbox-form descendant rules that were styling .sb-phone innards */
.sandbox-form select,.sandbox-form input{
  border:0;border-radius:0;padding:0;font-size:inherit;background:transparent;
  font-family:inherit
}
/* Re-apply sb-label field styling cleanly */
.sb-label select,.sb-label input{
  width:100%;padding:.8rem 1rem;border:1.5px solid var(--border-soft);border-radius:12px;
  font-family:inherit;font-size:.98rem;color:var(--ink-strong);background:#fff;
  transition:border-color .15s,box-shadow .15s
}
.sb-label select:focus,.sb-label input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.sb-phone{display:flex;gap:.6rem;align-items:stretch}
.sb-phone .sb-cc{flex:0 0 110px;padding-left:.75rem;padding-right:.5rem}
.sb-phone input{flex:1;min-width:0}

/* Submit button — make it calmer, not chunky */
.sandbox-form button.sb-submit,.sb-submit{
  display:block;width:100%;margin-top:1.1rem;
  padding:.85rem 1.2rem;border-radius:12px;
  font-size:.98rem;font-weight:700;
  background:var(--brand);color:#fff;border:0;cursor:pointer;
  transition:background .15s,transform .1s
}
.sb-submit:hover{background:var(--brand-dark)}
.sb-submit:active{transform:translateY(1px)}

/* Space between form fields */
.sb-label{display:block;margin-bottom:1.1rem}
.sb-label > span{
  display:block;font-size:.72rem;font-weight:600;color:var(--ink-muted);
  margin-bottom:.5rem;letter-spacing:.06em;text-transform:uppercase
}

/* Fine-print under submit, centered, with breathing room above */
.sb-fine{
  margin:1rem 0 0;font-size:.78rem;color:var(--ink-muted);
  text-align:center;line-height:1.55
}

/* === Hero headline: dial back the size drama === */
.sandbox-left h1{
  font-size:clamp(1.85rem,3.2vw,2.55rem);
  line-height:1.15;letter-spacing:-.015em;
  margin:1rem 0 1.1rem;
  max-width:560px
}
.sandbox-left .hero-sub{
  font-size:1.02rem;line-height:1.65;color:var(--ink-muted);
  max-width:540px;margin:0 0 1.5rem
}

/* Hero padding — give the whole section room top and bottom */
.hero--sandbox{
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2.5rem,5vw,4rem)
}

/* Sandbox card — slightly more internal padding */
.sandbox-card{
  padding:1.75rem;
  box-shadow:0 20px 44px -14px rgba(15,23,42,.12),0 6px 14px -4px rgba(15,23,42,.06)
}
.sandbox-eyebrow{
  font-size:.7rem;letter-spacing:.08em;
  padding:.35rem .8rem;margin-bottom:1.2rem
}

/* === Variant badge — calmer === */
.variant-b-badge{
  font-size:.7rem;letter-spacing:.08em;padding:.35rem .8rem
}

/* === Live-metrics KPIs: shrink slightly so dashboard isn't shouty === */
.lm-kpi .lm-num{font-size:1.25rem;letter-spacing:-.015em}
.lm-kpi .lm-lbl{font-size:.72rem;line-height:1.4}
.lm-kpi .lm-delta{font-size:.68rem}
.live-metrics{padding:1.3rem}
.lm-grid{gap:.7rem;margin-bottom:.85rem}
.lm-head .lm-live{font-size:.66rem;letter-spacing:.08em;padding:.3rem .65rem}
.lm-foot{font-size:.68rem}

/* === Price-check widget — lighten visuals === */
.price-check{padding:1.2rem 1.3rem}
.pc-eyebrow{font-size:.68rem}
.pc-sub{font-size:.78rem}
.pc-logo{font-size:.88rem}
.pc-price{font-size:.98rem}
.pc-price small{font-size:.68rem}
.pc-price-us{font-size:1.08rem}
.pc-tag{font-size:.66rem;padding:.18rem .5rem}
.pc-row{padding:.48rem 0}
.pc-fine{font-size:.74rem;margin-top:.85rem;line-height:1.55}

/* === Callback card — a touch smaller === */
.callback-card{padding:.9rem 1.1rem;gap:.85rem}
.callback-card .cb-icon{width:36px;height:36px;font-size:1rem}
.callback-card .cb-text b{font-size:.92rem}
.callback-card .cb-text span,.callback-card .cb-text small{font-size:.78rem}
.callback-card .cb-btn{padding:.5rem .9rem;font-size:.82rem}

/* === Slot strip — lighter === */
.slots-strip{padding:.85rem 1.1rem;margin-top:1.3rem}
.slot-chip{padding:.4rem .75rem;font-size:.82rem}
.slots-label{font-size:.78rem}

/* === Sandbox-right gap for breathing === */
.sandbox-right{gap:1.1rem}

/* === Activity ticker — lighter feel === */
.activity-ticker{padding:.75rem 0}
.at-label{font-size:.65rem;padding:.35rem .7rem}
.at-item{font-size:.82rem;color:#374151}
.at-item b{color:#065F46}

/* === Top ribbon — lighter === */
.top-ribbon{padding:.5rem 0;font-size:.8rem}
.tr-cta{font-size:.78rem;padding:.22rem .7rem}

/* === Sandbox success state — readable === */
.sandbox-success{padding:.5rem 0}
.sandbox-card.is-sent .sandbox-success{display:block;padding:.5rem 0}
.sandbox-success h3{font-size:1.1rem;margin:.8rem 0 .5rem;color:var(--ink-strong)}
.sandbox-success p{font-size:.92rem;line-height:1.6;color:var(--ink-muted);margin:0 auto 1.2rem;max-width:420px}
.sandbox-success .check-circle{
  width:52px;height:52px;border-radius:50%;background:#22C55E;
  display:flex;align-items:center;justify-content:center;margin:.2rem auto .5rem
}
.sandbox-success .check-circle svg{width:26px;height:26px}

/* === Mobile tweaks === */
@media (max-width:720px){
  .sandbox-left h1{font-size:1.75rem;line-height:1.2}
  .sandbox-left .hero-sub{font-size:.95rem}
  .sandbox-card{padding:1.3rem}
  .sb-label{margin-bottom:.9rem}
  .live-metrics{padding:1.1rem}
  .lm-kpi .lm-num{font-size:1.1rem}
  .price-check{padding:1rem 1.1rem}
}

/* === Cross-link strips: buyer-lens next steps === */
.related-block{
  padding:1.5rem 1.6rem;border-radius:18px;
  background:linear-gradient(180deg,#F8FAFC 0%,#FFFFFF 100%);
  border:1px solid var(--border-soft);margin:1rem 0
}
.related-block-eyebrow{
  font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-dark);margin-bottom:.3rem
}
.related-block-title{
  font-size:1.15rem;font-weight:700;color:var(--ink);margin:0 0 1rem;letter-spacing:-.01em
}
.related-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem
}
.related-item{
  display:block;padding:1rem 1.1rem;border-radius:12px;
  background:#fff;border:1px solid var(--border-soft);text-decoration:none;color:var(--ink);
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease
}
.related-item:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.related-item b{display:block;font-size:.97rem;margin-bottom:.2rem;letter-spacing:-.01em}
.related-item small{color:var(--ink-muted);font-size:.84rem;line-height:1.4;display:block}
.related-item .arrow{color:var(--brand-dark);font-weight:700;margin-top:.5rem;font-size:.82rem;display:inline-flex;align-items:center;gap:.25rem}

/* === Free-trial banner (pricing page) === */
.trial-banner{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.2rem;border-radius:14px;
  background:linear-gradient(90deg,#E8FBF0 0%,#F0FDF4 100%);
  border:1px solid var(--brand);margin:0 auto 1.5rem;max-width:720px
}
.trial-banner-text{display:flex;align-items:center;gap:.7rem;font-size:.96rem;color:var(--ink)}
.trial-banner-text b{color:var(--brand-dark);font-weight:800}
.trial-banner-dot{
  width:9px;height:9px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 3px rgba(37,211,102,.18);flex:0 0 auto
}
.trial-banner a{color:var(--brand-dark);font-weight:700;font-size:.9rem;white-space:nowrap}

/* === Brand mark badges (replaces external CDN icons) === */
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:color-mix(in srgb, var(--bc, #0B1420) 12%, #fff);
  color:var(--bc, #0B1420);
  border:1px solid color-mix(in srgb, var(--bc, #0B1420) 24%, #fff);
  font-weight:800;font-size:.95rem;flex:0 0 auto;
  line-height:1;letter-spacing:-.01em
}
.brand-mark.sm{width:28px;height:28px;font-size:.82rem;border-radius:7px}
.brand-mark.lg{width:44px;height:44px;font-size:1.15rem;border-radius:10px}

/* === Mobile-first refinements (98% of traffic is mobile) === */
@media (max-width: 640px){
  /* Hero text scales down aggressively */
  .hero h1, .page-hero h1, .section-head h2{
    font-size:clamp(1.55rem, 6.2vw, 2.1rem) !important;
    line-height:1.18 !important;letter-spacing:-.018em
  }
  .hero p, .page-hero p, .section-head p{
    font-size:clamp(.95rem, 3.6vw, 1.05rem) !important;line-height:1.55
  }
  /* Stack hero columns and remove empty right-column gaps */
  .hero-grid, .page-hero-grid, .grid-2, .two-col, .split-grid{
    grid-template-columns:1fr !important;gap:1.25rem !important
  }
  /* Hero visual sits below copy on mobile, capped height */
  .hero-visual, .hero-media, .page-hero-visual{
    max-width:100%;margin-top:.5rem
  }
  .hero-visual img, .hero-media img{max-width:100%;height:auto}

  /* CTAs stack and become full-width tap targets */
  .hero-cta, .cta-row, .btn-row, .button-row{
    display:flex;flex-direction:column;gap:.6rem;width:100%
  }
  .hero-cta .btn, .cta-row .btn, .btn-row .btn, .button-row .btn{
    width:100%;justify-content:center;min-height:48px;padding:.85rem 1.1rem;
    font-size:1rem
  }

  /* Section padding compresses */
  section, .section{padding-top:2.25rem !important;padding-bottom:2.25rem !important}
  .container{padding-left:1.1rem;padding-right:1.1rem}

  /* Bento + cards collapse to single column */
  .bento-grid, .bento, .feature-grid, .grid-3, .grid-4, .card-grid{
    grid-template-columns:1fr !important;gap:.85rem !important
  }
  .bento-card.lg{grid-column:auto !important;grid-row:auto !important}

  /* Related-block goes single-column */
  .related-grid{grid-template-columns:1fr !important}
  .related-block{padding:1.15rem 1.1rem;border-radius:14px}

  /* Trial banner stacks */
  .trial-banner{flex-direction:column;align-items:flex-start;text-align:left;padding:.85rem 1rem}
  .trial-banner a{align-self:stretch;text-align:center;padding:.7rem;border-radius:10px;
    background:rgba(37,211,102,.12);min-height:44px;display:flex;align-items:center;justify-content:center}

  /* Tables / pricing grids stack */
  .pricing-grid, .plans-grid, .compare-grid{grid-template-columns:1fr !important;gap:1rem !important}

  /* Brand mark badges scale */
  .brand-mark{width:30px;height:30px;font-size:.88rem;border-radius:7px}

  /* Avoid tiny tap targets in nav and inline links */
  a.btn, .btn{min-height:44px}

  /* Cancel any inline desktop image side-pane heights that leave whitespace */
  .hero-side, .hero-aside, .hero-empty{display:none !important}

  /* Anything explicitly hidden on mobile stays hidden */
  .hide-on-mobile{display:none !important}

  /* Force-hide stray empty desktop columns */
  .hero > div:empty, .page-hero > div:empty,
  .hero-grid > div:empty, .page-hero-grid > div:empty{display:none !important}
}

/* Even tighter at very small phones */
@media (max-width: 380px){
  .hero h1, .page-hero h1{font-size:1.45rem !important}
  .container{padding-left:.95rem;padding-right:.95rem}
}

/* Prevent horizontal overflow site-wide */
html, body{overflow-x:hidden;max-width:100vw}
img, video, iframe{max-width:100%;height:auto}

/* === Hero split layout (copy + visual) === */
.hero-split{
  display:grid;grid-template-columns:1.15fr .95fr;gap:clamp(1.5rem,3vw,3rem);
  align-items:center
}
.hero-split-copy{min-width:0}
.hero-split-visual{min-width:0;display:flex;justify-content:center;align-items:center}

/* === WhatsApp phone mockup (hero visual, proof in context) === */
.phone-mock{
  width:100%;max-width:380px;
  background:linear-gradient(180deg,#ECE5DD 0%,#E7E0D6 100%);
  border:1px solid rgba(0,0,0,.08);
  border-radius:26px;padding:.9rem .8rem 1rem;
  box-shadow:0 24px 60px -30px rgba(11,20,32,.35), 0 8px 20px -10px rgba(11,20,32,.18);
  position:relative
}
.phone-mock::before{
  content:"";position:absolute;top:.5rem;left:50%;transform:translateX(-50%);
  width:64px;height:5px;border-radius:3px;background:rgba(11,20,32,.18)
}
.phone-top{
  display:flex;align-items:center;gap:.55rem;
  padding:.85rem .75rem .75rem;margin:.4rem -.1rem .5rem;
  background:var(--brand-dark,#128C7E);color:#fff;
  border-radius:14px;font-size:.9rem
}
.phone-top b{font-weight:700;flex:1}
.phone-dot{width:9px;height:9px;border-radius:50%;background:#25D366;box-shadow:0 0 0 3px rgba(37,211,102,.35)}
.phone-meta{font-size:.7rem;font-weight:600;background:rgba(255,255,255,.18);padding:.18rem .48rem;border-radius:20px}
.phone-msgs{display:flex;flex-direction:column;gap:.45rem;padding:.15rem .15rem .4rem}
.pm{
  max-width:82%;padding:.55rem .75rem;font-size:.86rem;line-height:1.4;
  border-radius:12px;color:#0B1420;box-shadow:0 1px 2px rgba(11,20,32,.06);
  word-wrap:break-word
}
.pm b{display:block;font-size:.72rem;color:var(--brand-dark,#128C7E);font-weight:700;margin-bottom:.1rem}
.pm-in{align-self:flex-start;background:#fff;border-top-left-radius:4px}
.pm-out{align-self:flex-end;background:#DCF8C6;border-top-right-radius:4px;color:#0B1420}
.pm-card{background:#fff;padding:.7rem .8rem}
.pm-card small{display:block;color:var(--ink-muted,#64748B);font-size:.72rem;margin:.1rem 0 .4rem}
.pm-btn{
  display:inline-block;background:var(--brand,#25D366);color:#fff;
  font-size:.78rem;font-weight:700;padding:.35rem .7rem;border-radius:8px
}
.phone-bar{
  display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.7rem;padding:.4rem .3rem 0;
  border-top:1px dashed rgba(11,20,32,.12)
}
.phone-pill{
  font-size:.7rem;font-weight:700;color:var(--brand-dark,#128C7E);
  background:rgba(37,211,102,.14);padding:.2rem .55rem;border-radius:20px
}

@media (max-width: 900px){
  .hero-split{grid-template-columns:1fr;gap:1.5rem}
  .hero-split-visual{order:2}
  .phone-mock{max-width:340px}
}
@media (max-width: 640px){
  .phone-mock{max-width:100%;padding:.7rem .6rem .8rem}
  .pm{font-size:.82rem;padding:.5rem .65rem}
}

/* ===========================================================
   COMPARE / VS-COMPETITOR PAGES
   =========================================================== */

/* Hero tweaks for comparison pages */
.cmp-hero{padding:clamp(3rem,6vw,5rem) 0 clamp(2.5rem,4vw,3.5rem)}
.cmp-hero .eyebrow{
  display:inline-block;color:#065F46;background:#FFFFFF;border:1px solid #A7F3D0;
  padding:.35rem .9rem;border-radius:999px;font-size:.78rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem
}
.cmp-hero h1{color:#0B1B14;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.15;margin:0 auto 1rem;max-width:860px;font-weight:800;letter-spacing:-.02em}
.cmp-hero h1 em{font-style:normal;color:#0B5F5E;background:linear-gradient(180deg, transparent 55%, rgba(16,185,129,.22) 55%);padding:0 .1em}
.cmp-hero p.cmp-sub{color:#334155;max-width:720px;margin:0 auto 1.6rem;font-size:clamp(1rem,1.6vw,1.12rem);line-height:1.6}
.cmp-hero .cta-group{justify-content:center;display:flex;flex-wrap:wrap;gap:.8rem}
.cmp-hero .cmp-ctas-note{color:#64748B;font-size:.82rem;margin-top:1rem}

/* 3-up differentiator strip sitting over the hero/white section boundary */
.cmp-strip{margin-top:-2.5rem;position:relative;z-index:2}
.cmp-strip-grid{
  display:grid;gap:1rem;grid-template-columns:1fr;
  background:#fff;border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);padding:1.25rem;
  box-shadow:var(--shadow-md)
}
@media (min-width:720px){.cmp-strip-grid{grid-template-columns:repeat(3,1fr);padding:1.5rem}}
.cmp-strip-item{display:flex;gap:.9rem;align-items:flex-start;padding:.25rem .35rem}
.cmp-strip-item + .cmp-strip-item{border-top:1px solid var(--border-soft);padding-top:1rem}
@media (min-width:720px){
  .cmp-strip-item + .cmp-strip-item{border-top:0;border-left:1px solid var(--border-soft);padding-top:.25rem;padding-left:1.25rem}
}
.cmp-strip-icon{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;
  background:rgba(37,211,102,.12);color:#128C7E;
  display:inline-flex;align-items:center;justify-content:center
}
.cmp-strip-icon svg{width:22px;height:22px}
.cmp-strip-text h3{font-size:1rem;margin:0 0 .2rem;color:var(--ink)}
.cmp-strip-text p{margin:0;font-size:.88rem;color:var(--ink-muted);line-height:1.5}

/* Verdict: honest "when to pick them / when to pick us" block */
.cmp-verdict{
  display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:1.5rem
}
@media (min-width:780px){.cmp-verdict{grid-template-columns:1fr 1fr}}
.cmp-verdict-card{
  padding:1.5rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft)
}
.cmp-verdict-card.cmp-verdict--us{
  background:linear-gradient(180deg, rgba(37,211,102,.08), rgba(37,211,102,.02));
  border-color:rgba(37,211,102,.35)
}
.cmp-verdict-card h3{font-size:1.1rem;margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem}
.cmp-verdict-card h3 .dot{width:10px;height:10px;border-radius:50%;background:var(--ink-muted)}
.cmp-verdict-card.cmp-verdict--us h3 .dot{background:#25D366}
.cmp-verdict-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.65rem}
.cmp-verdict-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.cmp-verdict-list li svg{flex:0 0 auto;width:18px;height:18px;margin-top:.22rem;color:var(--brand-dark)}
.cmp-verdict-card:not(.cmp-verdict--us) .cmp-verdict-list li svg{color:var(--ink-muted)}

/* Migration callout */
.cmp-migration{
  display:grid;gap:1.5rem;grid-template-columns:1fr;
  padding:clamp(1.5rem,3vw,2.25rem);border-radius:var(--radius-lg);
  background:var(--ink);color:#fff;
  background-image:
    radial-gradient(ellipse at top right, rgba(37,211,102,.18), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(37,211,102,.1), transparent 60%)
}
@media (min-width:820px){.cmp-migration{grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center}}
.cmp-migration h3{color:#fff;font-size:clamp(1.3rem,2.4vw,1.7rem);margin:0 0 .75rem}
.cmp-migration p{color:rgba(255,255,255,.82);margin:0 0 1.25rem;line-height:1.55}
.cmp-migration .cta-group{gap:.7rem}
.cmp-migration .btn--outline{border-color:rgba(255,255,255,.35);color:#fff}
.cmp-migration .btn--outline:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
.cmp-migration-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.8rem}
.cmp-migration-list li{
  display:flex;gap:.75rem;align-items:flex-start;color:rgba(255,255,255,.9);font-size:.95rem;line-height:1.45
}
.cmp-migration-list li svg{
  flex:0 0 auto;width:20px;height:20px;margin-top:.2rem;
  color:#25D366;background:rgba(37,211,102,.15);border-radius:50%;padding:3px
}
.cmp-migration-list li b{color:#fff}

/* Hub grid (compare/index.html) */
.cmp-hub-grid{
  display:grid;gap:1.25rem;grid-template-columns:1fr;margin-top:2rem
}
@media (min-width:760px){.cmp-hub-grid{grid-template-columns:repeat(3,1fr)}}
.cmp-hub-card{
  display:flex;flex-direction:column;padding:1.6rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft);
  color:inherit;text-decoration:none;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  position:relative;overflow:hidden
}
.cmp-hub-card::before{
  content:"";position:absolute;inset:auto 0 0 0;height:3px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--brand) 50%, var(--ink-muted) 50%, var(--ink-muted) 100%);
  opacity:.25;transition:opacity .2s ease
}
.cmp-hub-card:hover{transform:translateY(-3px);border-color:rgba(37,211,102,.4);box-shadow:var(--shadow-md)}
.cmp-hub-card:hover::before{opacity:.9}
.cmp-hub-vs{
  display:flex;align-items:center;gap:.55rem;margin-bottom:1rem;flex-wrap:wrap
}
.cmp-hub-logo{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:10px;font-weight:800;
  background:var(--cream);border:1px solid var(--border-soft);font-size:.95rem;color:var(--ink)
}
.cmp-hub-logo.cmp-hub-logo--us{background:var(--brand);color:#fff;border-color:var(--brand)}
.cmp-hub-vs-x{font-weight:800;color:var(--ink-muted);font-size:.9rem}
.cmp-hub-card h3{margin:0 0 .4rem;font-size:1.15rem}
.cmp-hub-card p{margin:0 0 1.2rem;color:var(--ink-muted);font-size:.92rem;line-height:1.5;flex:1}
.cmp-hub-card .cmp-hub-link{
  display:inline-flex;align-items:center;gap:.35rem;
  color:var(--brand-dark);font-weight:700;font-size:.92rem
}
.cmp-hub-card .cmp-hub-link::after{content:"→";transition:transform .2s ease}
.cmp-hub-card:hover .cmp-hub-link::after{transform:translateX(3px)}

/* Compare: pricing mini-table */
.cmp-price-grid{
  display:grid;gap:1rem;grid-template-columns:1fr;margin-top:1.5rem
}
@media (min-width:780px){.cmp-price-grid{grid-template-columns:1fr 1fr}}
.cmp-price-card{
  padding:1.4rem;border-radius:var(--radius-lg);
  background:var(--surface);border:1px solid var(--border-soft)
}
.cmp-price-card.cmp-price--us{
  background:linear-gradient(180deg, rgba(37,211,102,.06), transparent 60%);
  border-color:rgba(37,211,102,.4)
}
.cmp-price-card h3{margin:0 0 .25rem;font-size:1.05rem}
.cmp-price-card .cmp-price-big{font-size:2.1rem;font-weight:800;color:var(--ink);line-height:1.1;margin:.4rem 0}
.cmp-price-card.cmp-price--us .cmp-price-big{color:var(--brand-dark)}
.cmp-price-card .cmp-price-unit{color:var(--ink-muted);font-size:.85rem;font-weight:500}
.cmp-price-list{list-style:none;padding:0;margin:.9rem 0 0;display:flex;flex-direction:column;gap:.45rem}
.cmp-price-list li{font-size:.88rem;color:var(--ink-2);display:flex;gap:.45rem;align-items:flex-start}
.cmp-price-list li::before{content:"•";color:var(--brand-dark);font-weight:800}
.cmp-price-card.cmp-price--us .cmp-price-list li::before{color:var(--brand)}

/* Mobile tightening for compare */
@media (max-width: 640px){
  .cmp-hero .cta-group .btn{width:100%;min-height:48px}
  .vs-table{font-size:.82rem}
  .vs-table thead th, .vs-table tbody th, .vs-table tbody td{padding:.7rem .55rem}
  .cmp-strip{margin-top:-1.5rem}
  .cmp-hub-card{padding:1.25rem}
  .cmp-price-card{padding:1.1rem}
  .cmp-migration{padding:1.3rem}
}

/* --- Pricing page: billing toggle + 5-plan grid + AED layout --- */
.billing-toggle{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:999px;padding:.35rem;margin:1rem 0 1.5rem;
  box-shadow:var(--shadow-sm);
}
.billing-toggle button{
  border:0;background:transparent;cursor:pointer;
  padding:.55rem 1.1rem;border-radius:999px;
  font-size:.92rem;font-weight:600;color:var(--ink-muted);
  display:inline-flex;align-items:center;gap:.4rem;
  transition:all .18s ease;min-height:40px;
}
.billing-toggle button.is-active{background:var(--ink);color:#fff}
.billing-toggle .save-pill{
  background:var(--brand);color:#fff;font-size:.7rem;font-weight:700;
  padding:.15rem .45rem;border-radius:999px;letter-spacing:.02em;
}
.billing-toggle button.is-active .save-pill{background:rgba(255,255,255,.2)}

.plan-grid--5{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:560px){.plan-grid--5{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.plan-grid--5{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.plan-grid--5{grid-template-columns:repeat(5,1fr);gap:.85rem}}

.plan-grid--5 .plan{padding:1.5rem 1.15rem}
.plan-grid--5 .plan h3{font-size:1.15rem}
.plan-grid--5 .plan-price{font-size:1.9rem}
.plan-grid--5 .plan-feat{font-size:.86rem}
.plan-grid--5 .plan--anchor{transform:none}
@media (min-width:1180px){.plan-grid--5 .plan--anchor{transform:translateY(-10px)}}

.plan-price-currency{font-size:.85rem;font-weight:600;color:var(--ink-muted);letter-spacing:.05em;margin-right:.25rem}
.plan--anchor .plan-price-currency{color:rgba(255,255,255,.7)}
.plan-yearly-note{font-size:.78rem;color:var(--ink-muted);margin-top:.3rem;display:block}
.plan--anchor .plan-yearly-note{color:rgba(255,255,255,.65)}
.plan-meta-chip{
  display:inline-block;background:var(--brand-tint);color:var(--brand-dark);
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:999px;margin-bottom:.6rem;
}
.plan--anchor .plan-meta-chip{background:rgba(37,211,102,.18);color:var(--brand)}

/* Compact feature strip below prices */
.pricing-note{
  margin:1rem 0 0;padding:1rem 1.15rem;border-radius:var(--radius-md);
  background:var(--cream);border:1px solid var(--border-soft);
  font-size:.88rem;color:var(--ink-2);line-height:1.55;
}
.pricing-note b{color:var(--ink)}

@media (max-width:640px){
  .billing-toggle{width:100%;justify-content:stretch}
  .billing-toggle button{flex:1;justify-content:center}
  .plan-grid--5 .plan{padding:1.4rem 1.1rem}
}

/* =========================================================
   ODOO integration page — richer building blocks
   Reusable across other integration pages (Shopify, Zoho, etc.)
   ========================================================= */

/* Pain-point grid: why Odoo teams need WhatsApp automation */
.pain-grid{display:grid;grid-template-columns:1fr;gap:.9rem;margin-top:1.2rem}
.pain-card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:1.1rem 1.15rem;
  display:flex;gap:.85rem;align-items:flex-start;
}
.pain-card .pain-icon{
  flex:0 0 32px;width:32px;height:32px;border-radius:8px;
  background:#FEF3F2;color:#DC2626;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.95rem;
}
.pain-card b{display:block;font-size:.98rem;color:var(--ink);letter-spacing:-.005em;margin-bottom:.15rem}
.pain-card span{font-size:.88rem;color:var(--ink-muted);line-height:1.55}
@media (min-width:720px){.pain-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.pain-grid{grid-template-columns:1fr 1fr 1fr}}

/* Capability / feature-group grid */
.cap-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.2rem}
.cap-card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:1.3rem 1.25rem;
}
.cap-card .cap-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.5rem}
.cap-card .cap-badge{
  width:28px;height:28px;border-radius:7px;
  background:var(--brand-soft);color:var(--brand-dark);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:800;
}
.cap-card h4{margin:0;font-size:1.02rem;letter-spacing:-.005em;color:var(--ink)}
.cap-card p.cap-sub{margin:.1rem 0 .7rem;color:var(--ink-muted);font-size:.88rem;line-height:1.5}
.cap-card ul{list-style:none;padding:0;margin:0;display:grid;gap:.45rem}
.cap-card ul li{position:relative;padding-left:1.4rem;font-size:.9rem;color:var(--ink-2);line-height:1.5}
.cap-card ul li::before{
  content:"";position:absolute;left:0;top:.45rem;width:14px;height:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%231FAE55'%3E%3Cpath d='M16.7 5.3a1 1 0 0 1 0 1.4l-8 8a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.4L8 12.6l7.3-7.3a1 1 0 0 1 1.4 0z'/%3E%3C/svg%3E") center/contain no-repeat;
}
@media (min-width:720px){.cap-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.cap-grid{grid-template-columns:1fr 1fr 1fr}}

/* Module pill cloud — "works with every Odoo module" */
.module-cloud{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem;justify-content:center;
}
.module-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.5rem .9rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--border);
  font-size:.88rem;font-weight:600;color:var(--ink-2);
}
.module-pill::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);
}

/* Playbook (industry) grid — 8 real-world flows */
.playbook-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.2rem}
.playbook-card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:1.3rem 1.25rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.playbook-card .pb-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.15rem}
.playbook-card .pb-emoji{
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg, var(--brand-soft), var(--brand-tint));
  display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;
}
.playbook-card h4{margin:0;font-size:1rem;letter-spacing:-.005em;color:var(--ink)}
.playbook-card ul{list-style:none;padding:0;margin:.25rem 0 0;display:grid;gap:.38rem}
.playbook-card ul li{position:relative;padding-left:1.15rem;font-size:.88rem;color:var(--ink-2);line-height:1.5}
.playbook-card ul li::before{content:"→";position:absolute;left:0;top:0;color:var(--brand-dark);font-weight:800}
.playbook-card .pb-impact{
  margin-top:.8rem;padding-top:.8rem;border-top:1px dashed var(--border);
  font-size:.85rem;color:var(--ink);
}
.playbook-card .pb-impact b{color:var(--brand-dark)}
@media (min-width:720px){.playbook-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.playbook-grid{grid-template-columns:1fr 1fr 1fr 1fr}}
/* 3-column variant for pages with 6 playbook cards (avoids empty slots in 4-col grid) */
@media (min-width:960px){.playbook-grid.playbook-grid--3col{grid-template-columns:1fr 1fr 1fr !important}}

/* Why #1 differentiator list */
.why-list{display:grid;grid-template-columns:1fr;gap:.65rem;margin-top:1.2rem}
.why-row{
  display:flex;gap:.7rem;align-items:flex-start;
  padding:.95rem 1.05rem;border-radius:var(--radius-md);
  background:var(--surface);border:1px solid var(--border-soft);
}
.why-row .why-tick{
  flex:0 0 28px;width:28px;height:28px;border-radius:50%;
  background:var(--brand);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.85rem;
}
.why-row b{display:block;font-size:.95rem;color:var(--ink);margin-bottom:.1rem;letter-spacing:-.005em}
.why-row span{font-size:.86rem;color:var(--ink-muted);line-height:1.5}
@media (min-width:900px){.why-list{grid-template-columns:1fr 1fr}}

/* Testimonial mini-grid (real Google reviews) */
.rev-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1.2rem}
.rev-card{
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius-md);padding:1.2rem 1.15rem;
  display:flex;flex-direction:column;gap:.55rem;
}
.rev-card .rev-stars{color:#F5A524;letter-spacing:.12em;font-size:.95rem}
.rev-card blockquote{
  margin:0;font-size:.93rem;line-height:1.55;color:var(--ink-2);
}
.rev-card blockquote::before{content:"\201C";color:var(--brand);font-size:1.4rem;line-height:0;margin-right:.1em}
.rev-card .rev-who{display:flex;align-items:center;gap:.6rem;margin-top:.35rem}
.rev-card .rev-avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff;font-size:.78rem;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
}
.rev-card .rev-who b{font-size:.86rem;color:var(--ink);display:block;letter-spacing:-.005em}
.rev-card .rev-who small{font-size:.75rem;color:var(--ink-soft)}
@media (min-width:720px){.rev-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.rev-grid{grid-template-columns:1fr 1fr 1fr}}

/* Section sub-header for dense Odoo page */
.sh-center{text-align:center;max-width:720px;margin:0 auto}

/* Brand mark for Odoo (reuse elsewhere with --bc) */
.brand-mark{
  width:34px;height:34px;border-radius:9px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bc,#111);color:#fff;font-weight:800;font-size:.95rem;
  letter-spacing:-.02em;flex:0 0 34px;
}

/* =========================================================
   PHONE MOCKUP — WhatsApp notification visualizer
   Used on Odoo page hero + "See it in action" section.
   ========================================================= */
.phone{
  width:100%;max-width:280px;margin:0 auto;
  background:#111;border-radius:34px;padding:10px;
  box-shadow:0 30px 70px -25px rgba(11,20,32,.35), 0 0 0 1px rgba(255,255,255,.05) inset;
  position:relative;
}
.phone::before{
  content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:96px;height:18px;background:#111;border-radius:12px;z-index:3;
}
.phone-screen{
  background:#E5DDD5;
  border-radius:26px;overflow:hidden;
  display:flex;flex-direction:column;
  min-height:430px;
}
.phone-head{
  background:#075E54;color:#fff;
  padding:2.3rem .75rem .55rem;
  display:flex;align-items:center;gap:.55rem;
}
.phone-head .phone-avatar{
  width:32px;height:32px;border-radius:50%;
  background:#25D366;color:#fff;font-weight:800;font-size:.8rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.phone-head .phone-name{font-size:.85rem;font-weight:700;line-height:1.1}
.phone-head .phone-status{font-size:.68rem;opacity:.85;margin-top:.1rem}
.phone-head .phone-icons{margin-left:auto;display:flex;gap:.5rem;opacity:.9}
.phone-head .phone-icons svg{width:14px;height:14px}
.phone-body{
  flex:1;padding:.75rem .6rem;display:flex;flex-direction:column;gap:.45rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(37,211,102,.04), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(7,94,84,.05), transparent 60%),
    #E5DDD5;
  font-size:.78rem;line-height:1.4;color:#0B1420;
}
.bubble{
  max-width:88%;background:#fff;border-radius:10px;
  padding:.5rem .65rem .35rem;position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.06);
}
.bubble.--in{align-self:flex-start;background:#fff}
.bubble.--out{align-self:flex-end;background:#DCF8C6}
.bubble .bhead{font-size:.7rem;font-weight:700;color:#0F9850;margin-bottom:.15rem}
.bubble .btime{display:block;font-size:.62rem;color:#667085;text-align:right;margin-top:.2rem}
.bubble.--out .btime::after{content:" ✓✓";color:#34B7F1;letter-spacing:.04em}
.bubble b{color:#0B1420;font-weight:700}
.bubble .b-amt{color:#0F9850;font-weight:800}

/* Attachment card for invoice PDF */
.bubble .attach{
  display:flex;gap:.5rem;align-items:center;
  background:#F7F5F0;border-radius:8px;
  padding:.4rem .5rem;margin:.3rem 0 .25rem;
  border:1px solid rgba(0,0,0,.04);
}
.bubble .attach .pdf{
  width:26px;height:30px;border-radius:4px;background:#DC2626;color:#fff;
  font-size:.55rem;font-weight:800;letter-spacing:.04em;
  display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 26px;
}
.bubble .attach .apdf-meta b{display:block;font-size:.72rem}
.bubble .attach .apdf-meta small{font-size:.62rem;color:#667085}

/* Hero phone wrapper overrides — stack phone + caption vertically,
   override .feat-visual aspect-ratio/overflow so the tall phone isn't clipped. */
.feat-visual.feat-phone{
  aspect-ratio:auto;overflow:visible;
  background:transparent;border:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.9rem;padding:1.25rem .5rem;min-width:0;
  border-radius:var(--radius-lg);
}
.feat-visual.feat-phone::before{display:none}
.feat-visual.feat-phone .phone{max-width:300px;width:100%}
.feat-visual.feat-phone > p{
  max-width:300px;text-align:center;font-size:.82rem;
  color:var(--ink-soft);margin:0;line-height:1.5;
}

/* See-it-in-action gallery */
.action-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem;justify-items:center}
.action-card{display:flex;flex-direction:column;align-items:center;gap:.65rem;max-width:300px;width:100%}
.action-card .phone{max-width:230px}
.action-card .action-title{
  font-weight:700;font-size:.95rem;color:var(--ink);letter-spacing:-.005em;text-align:center;
}
.action-card .action-trigger{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.78rem;color:var(--ink-muted);
  padding:.3rem .65rem;border-radius:999px;
  background:var(--brand-tint);border:1px solid var(--brand-soft);
}
.action-card .action-trigger::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--brand);
}
@media (min-width:720px){.action-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.action-grid{grid-template-columns:1fr 1fr 1fr 1fr}}

/* ============================================================
   HOMEPAGE PROOF-LED HERO (Version 2 — AI + auto-translate)
   ============================================================ */
.hero--proof{position:relative;padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(2.5rem,5vw,4rem);background:linear-gradient(180deg,#FFFFFF 0%,#F4FAF7 100%);overflow:hidden}
.hero--proof::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 500px at 10% -10%,rgba(18,140,126,0.08),transparent 60%);pointer-events:none}
.proof-grid{display:grid;gap:2.25rem;align-items:center;position:relative}
@media (min-width:960px){.proof-grid{grid-template-columns:1.1fr 1fr;gap:3.5rem}}
.proof-badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.25rem}
.proof-badge{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid #E5EEE9;padding:.4rem .75rem;border-radius:999px;font-size:.78rem;font-weight:600;color:#0B1B14;box-shadow:0 2px 6px -2px rgba(11,27,20,.05)}
.proof-badge-stars{color:#F59E0B;letter-spacing:.05em}
.proof-badge-meta{background:#ECFDF5;border-color:#A7F3D0;color:#065F46}
.proof-h1{font-size:clamp(1.95rem,4.8vw,3.3rem);line-height:1.1;font-weight:800;letter-spacing:-.02em;margin:0 0 1rem;color:#0B1B14}
.proof-h1 .hl{color:#128C7E}
.proof-sub{font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.55;color:#4B5B53;margin:0 0 1.5rem;max-width:52ch}
.proof-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.5rem}
.proof-ctas .btn--primary{padding:.95rem 1.4rem;font-size:1rem;font-weight:600;box-shadow:0 8px 20px rgba(37,211,102,.28)}
.proof-ctas .btn--outline{padding:.95rem 1.4rem;font-size:1rem;border:1.5px solid #0B5F5E;color:#0B5F5E;background:#fff}
.proof-testimonial{background:#fff;border-left:4px solid #128C7E;padding:1rem 1.25rem;border-radius:0 12px 12px 0;box-shadow:0 8px 24px -12px rgba(11,27,20,.08);max-width:52ch}
.proof-testimonial-text{font-size:.95rem;line-height:1.5;color:#0B1B14;font-style:italic;margin:0 0 .6rem}
.proof-testimonial-who{display:flex;align-items:center;gap:.6rem;font-size:.82rem;color:#4B5B53}
.proof-testimonial-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#128C7E,#25D366);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem}
.proof-testimonial-who b{color:#0B1B14}
.proof-visual{position:relative;max-width:440px;margin:0 auto}
.proof-stat-card{background:#fff;border-radius:20px;padding:1.5rem;box-shadow:0 20px 40px -15px rgba(11,27,20,.15);border:1px solid #E5EEE9}
.proof-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.proof-stat{padding:.85rem;background:#F4FAF7;border-radius:12px;border:1px solid #E5EEE9}
.proof-stat-num{font-size:1.55rem;font-weight:800;color:#128C7E;letter-spacing:-.02em;line-height:1}
.proof-stat-lbl{font-size:.72rem;color:#4B5B53;margin-top:.3rem;font-weight:500}
.proof-stat-delta{font-size:.68rem;color:#10B981;font-weight:700;margin-top:.2rem}
.proof-logos-head{font-size:.72rem;color:#6B7B73;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.6rem;font-weight:600}
.proof-logos{display:flex;flex-wrap:wrap;gap:.5rem}
.proof-logo{background:#F4FAF7;color:#4B5B53;padding:.35rem .65rem;border-radius:8px;font-size:.75rem;font-weight:600;border:1px solid #E5EEE9}
.proof-quote-card{background:linear-gradient(135deg,#0B5F5E 0%,#128C7E 100%);color:#fff;padding:1.15rem 1.25rem;border-radius:16px;margin-top:-1.5rem;margin-left:2rem;box-shadow:0 15px 30px -10px rgba(11,95,94,.4);position:relative;max-width:340px}
.proof-quote-text{font-size:.9rem;line-height:1.5;margin:0 0 .5rem;font-weight:500}
.proof-quote-who{font-size:.72rem;opacity:.9}
.proof-quote-who b{opacity:1}
.top-compact{background:#0B1B14;color:#DCFCE7;font-size:.78rem;text-align:center;padding:.55rem 1rem;font-weight:500}
.top-compact b{color:#fff}
.top-compact a{color:#A7F3D0;text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.proof-quote-card{margin-left:0;margin-top:1rem;max-width:100%}.proof-stat-card{padding:1.1rem}}

/* ============================================================
   HOMEPAGE AI CAPABILITIES SECTION
   Four AI helpers: auto-reply, drafted replies, campaign copy,
   language detection — each with a mini mockup + outcome line.
   ============================================================ */
.section--ai{position:relative;background:linear-gradient(180deg,#F8FDFB 0%,#F0F9F5 100%);padding:clamp(3rem,6vw,5rem) 0;overflow:hidden}
.section--ai::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 500px at 80% 10%,rgba(37,211,102,.06),transparent 60%);pointer-events:none}
.ai-head{text-align:center;max-width:680px;margin:0 auto 2.5rem;position:relative}
.ai-eyebrow{display:inline-flex;align-items:center;gap:.45rem;background:linear-gradient(135deg,#0B5F5E,#128C7E);color:#fff;font-size:.72rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:1rem;box-shadow:0 6px 16px -4px rgba(11,95,94,.35)}
.ai-eyebrow::before{content:"✨"}
.ai-head h2{font-size:clamp(1.75rem,3.8vw,2.6rem);line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 .75rem;color:#0B1B14}
.ai-head h2 .hl{color:#128C7E}
.ai-head p{font-size:clamp(.98rem,1.3vw,1.1rem);line-height:1.5;color:#4B5B53;margin:0}
.ai-grid{display:grid;gap:1.25rem;position:relative}
@media (min-width:760px){.ai-grid{grid-template-columns:1fr 1fr;gap:1.5rem}}
@media (min-width:1200px){.ai-grid{gap:1.75rem}}
.ai-card{background:#fff;border:1px solid #E5EEE9;border-radius:18px;padding:1.5rem;box-shadow:0 8px 20px -12px rgba(11,27,20,.08);display:flex;flex-direction:column;gap:1rem;transition:transform .2s ease,box-shadow .2s ease}
.ai-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(11,27,20,.12)}
.ai-card-head{display:flex;align-items:center;gap:.75rem}
.ai-card-icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#CCFBF1,#A7F3D0);color:#0B5F5E;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:1.1rem}
.ai-card-title{font-size:1.05rem;font-weight:700;color:#0B1B14;line-height:1.2;margin:0}
.ai-card-desc{font-size:.92rem;line-height:1.5;color:#4B5B53;margin:0}
.ai-card-outcome{display:inline-flex;align-items:center;gap:.45rem;background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;padding:.4rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;align-self:flex-start;margin-top:auto}
.ai-card-outcome::before{content:"✓";font-weight:700;color:#10B981}
/* Mini mockup shared */
.ai-mock{background:#F4FAF7;border:1px solid #E5EEE9;border-radius:12px;padding:.85rem;font-size:.82rem;line-height:1.4;position:relative}
/* Mockup 1 — Auto-reply chat */
.ai-mock-chat{display:flex;flex-direction:column;gap:.4rem}
.ai-bubble{padding:.5rem .7rem;border-radius:10px;max-width:85%;box-shadow:0 1px 0 rgba(0,0,0,.06)}
.ai-bubble--in{background:#fff;align-self:flex-start;border-top-left-radius:2px}
.ai-bubble--out{background:#DCF8C6;align-self:flex-end;border-top-right-radius:2px}
.ai-tag{display:inline-flex;align-items:center;gap:.25rem;background:#0B5F5E;color:#fff;font-size:.65rem;font-weight:700;padding:.15rem .4rem;border-radius:4px;letter-spacing:.03em;margin-right:.3rem}
/* Mockup 2 — Agent inbox */
.ai-mock-inbox .ai-inbox-in{background:#fff;padding:.55rem .7rem;border-radius:10px;font-size:.82rem;color:#0B1B14;margin-bottom:.5rem;border:1px solid #E5EEE9}
.ai-mock-inbox .ai-suggest{background:#F0FDF4;border:1px dashed #0B5F5E;border-radius:10px;padding:.55rem .7rem;display:flex;flex-direction:column;gap:.4rem}
.ai-mock-inbox .ai-suggest-head{font-size:.7rem;font-weight:700;color:#065F46;letter-spacing:.04em;display:flex;align-items:center;gap:.25rem}
.ai-mock-inbox .ai-suggest-head::before{content:"✨"}
.ai-mock-inbox .ai-suggest-text{font-size:.82rem;color:#0B1B14;line-height:1.35}
.ai-mock-inbox .ai-suggest-actions{display:flex;gap:.35rem}
.ai-mock-inbox .ai-btn{font-size:.7rem;font-weight:600;padding:.3rem .55rem;border-radius:6px;border:none;cursor:default}
.ai-mock-inbox .ai-btn--send{background:#25D366;color:#0B1B14}
.ai-mock-inbox .ai-btn--edit{background:#fff;color:#0B5F5E;border:1px solid #A7F3D0}
/* Mockup 3 — Campaign composer */
.ai-mock-compose .ai-prompt{background:#fff;border:1px solid #E5EEE9;border-radius:10px;padding:.55rem .7rem;font-size:.78rem;color:#6B7B73;margin-bottom:.45rem;display:flex;align-items:center;gap:.45rem}
.ai-mock-compose .ai-prompt::before{content:"💬";font-size:.9rem}
.ai-mock-compose .ai-arrow{text-align:center;color:#128C7E;font-weight:700;font-size:.8rem;margin:.15rem 0}
.ai-mock-compose .ai-output{background:#DCF8C6;border-radius:10px;padding:.55rem .7rem;font-size:.82rem;color:#0B1B14;line-height:1.35}
.ai-mock-compose .ai-output b{color:#0B5F5E}
/* Mockup 4 — Language detection */
.ai-mock-lang .ai-incoming{background:#fff;border:1px solid #E5EEE9;border-radius:10px;padding:.55rem .7rem;font-size:.85rem;text-align:right;direction:rtl;color:#0B1B14;margin-bottom:.45rem}
.ai-mock-lang .ai-detect{display:inline-flex;align-items:center;gap:.3rem;background:#0B5F5E;color:#fff;font-size:.68rem;font-weight:700;padding:.2rem .55rem;border-radius:999px;margin-bottom:.5rem;letter-spacing:.02em}
.ai-mock-lang .ai-detect::before{content:"🔍";font-size:.8rem}
.ai-mock-lang .ai-translated{background:#CCFBF1;border:1px solid #5EEAD4;border-radius:10px;padding:.55rem .7rem;font-size:.82rem;color:#0B1B14;line-height:1.35}
.ai-mock-lang .ai-translated .ai-lbl{font-size:.65rem;font-weight:700;color:#065F46;letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:.2rem}
/* Footer CTA */
.ai-foot{text-align:center;margin-top:2.5rem}
.ai-foot p{font-size:.95rem;color:#4B5B53;margin:0 0 1rem}
.ai-foot .btn--outline{border:1.5px solid #0B5F5E;color:#0B5F5E;padding:.85rem 1.4rem;font-weight:600}
@media (max-width:640px){.ai-card{padding:1.25rem}.ai-head{margin-bottom:2rem}}

/* ============================================================
   CASE STUDIES PAGE — Featured story + Filter chips + Expanded grid
   ============================================================ */
/* Featured case study card */
.featured-case{background:linear-gradient(135deg,#0B5F5E 0%,#128C7E 100%);color:#fff;border-radius:24px;padding:clamp(1.5rem,3vw,2.25rem);margin-bottom:2.5rem;position:relative;overflow:hidden;box-shadow:0 25px 50px -20px rgba(11,95,94,.4)}
.featured-case::before{content:"";position:absolute;inset:0;background:radial-gradient(500px 400px at 90% 10%,rgba(37,211,102,.2),transparent 60%);pointer-events:none}
.fc-grid{display:grid;gap:1.75rem;align-items:center;position:relative}
@media (min-width:960px){.fc-grid{grid-template-columns:1.3fr 1fr;gap:2.5rem}}
.fc-badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(37,211,102,.25);color:#A7F3D0;border:1px solid rgba(167,243,208,.3);font-size:.72rem;font-weight:700;padding:.35rem .75rem;border-radius:999px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.9rem}
.fc-badge::before{content:"★"}
.fc-industry{display:inline-block;font-size:.78rem;color:#A7F3D0;font-weight:600;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.06em}
.fc-headline{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;font-weight:800;letter-spacing:-.02em;margin:0 0 1rem;color:#fff}
.fc-quote{font-size:1rem;line-height:1.55;color:#DCFCE7;margin:0 0 1.25rem;font-style:italic;border-left:3px solid #25D366;padding-left:1rem}
.fc-who{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem}
.fc-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#25D366,#A7F3D0);color:#0B1B14;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem}
.fc-who-text{font-size:.88rem;color:#DCFCE7}
.fc-who-text b{color:#fff;display:block;margin-bottom:2px}
.fc-cta{display:inline-flex;align-items:center;gap:.4rem;background:#25D366;color:#0B1B14;padding:.75rem 1.2rem;border-radius:10px;text-decoration:none;font-weight:700;font-size:.92rem;transition:transform .15s ease}
.fc-cta:hover{transform:translateX(3px)}
.fc-kpis{background:rgba(11,27,20,.4);border:1px solid rgba(167,243,208,.15);border-radius:18px;padding:1.25rem;backdrop-filter:blur(6px)}
.fc-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.fc-kpi{padding:.75rem;background:rgba(255,255,255,.08);border-radius:12px;border:1px solid rgba(167,243,208,.1)}
.fc-kpi-num{font-size:1.5rem;font-weight:800;color:#25D366;letter-spacing:-.02em;line-height:1}
.fc-kpi-lbl{font-size:.68rem;color:#DCFCE7;margin-top:.3rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.2}
.fc-meta{font-size:.75rem;color:#A7F3D0;margin-top:1rem;text-align:center;opacity:.9}
/* Filter chips */
.case-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1.75rem;padding:0;list-style:none;align-items:center}
.case-filters-label{font-size:.78rem;color:#4B5B53;font-weight:600;margin-right:.35rem}
.case-chip{background:#fff;border:1.5px solid #E5EEE9;color:#4B5B53;font-size:.82rem;font-weight:600;padding:.5rem .95rem;border-radius:999px;cursor:pointer;transition:all .15s ease;display:inline-flex;align-items:center;gap:.35rem}
.case-chip:hover{border-color:#128C7E;color:#128C7E}
.case-chip[aria-pressed="true"]{background:#0B5F5E;color:#fff;border-color:#0B5F5E}
.case-chip-count{font-size:.72rem;opacity:.7;font-weight:500}
.case-chip[aria-pressed="true"] .case-chip-count{opacity:.9}
/* Expanded case grid */
@media (min-width:760px){.case-grid{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.case-grid{grid-template-columns:1fr 1fr 1fr}}
.case-card{display:flex;flex-direction:column}
.case-card[hidden]{display:none}
.case-card-rating{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:#F59E0B;margin-top:.5rem;font-weight:700}
.case-card-rating .stars{letter-spacing:.05em}
.case-card-rating .count{color:#6B7B73;font-weight:500;font-size:.72rem}
.case-quote{font-size:.9rem;color:#4B5B53;line-height:1.45;font-style:italic;margin:.5rem 0 .75rem;padding-left:.65rem;border-left:2px solid var(--c,#128C7E)}

/* ===== Case study detail — pull-quote block ===== */
.pull-quote{background:linear-gradient(135deg,#F0FDF4 0%,#DCFCE7 100%);border-left:5px solid #25D366;border-radius:18px;padding:clamp(1.5rem,3vw,2.25rem);position:relative}
.pull-quote::before{content:"“";position:absolute;top:-.5rem;left:1.2rem;font-size:6rem;color:#25D366;opacity:.25;font-family:Georgia,serif;line-height:1}
.pull-quote blockquote{font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.55;color:#0B1B14;font-weight:500;margin:0 0 1.25rem;font-style:italic;position:relative;z-index:1}
.pq-who{display:flex;align-items:center;gap:.85rem}
.pq-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#0B5F5E,#128C7E);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex-shrink:0}
.pq-who b{display:block;color:#0B1B14;font-size:.95rem}
.pq-who small{color:#4B5B53;font-size:.82rem}

/* ===== Case study detail — mockup cards ===== */
.case-mocks{display:grid;gap:1.5rem;margin-top:2rem}
@media (min-width:760px){.case-mocks{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.case-mocks{grid-template-columns:1fr 1fr 1fr}}
.case-mock{background:#fff;border:1px solid #E5EEE9;border-radius:18px;padding:1.25rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 8px 24px -10px rgba(11,27,20,.08)}
.case-mock-head{display:flex;flex-direction:column;gap:.2rem;padding-bottom:.6rem;border-bottom:1px dashed #E5EEE9}
.case-mock-label{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#0B5F5E}
.case-mock-meta{font-size:.78rem;color:#6B7B73}
.case-mock-caption{font-size:.82rem;color:#4B5B53;line-height:1.4;margin:0;padding-top:.3rem}

/* Chat mockup (Hindi AI auto-reply) */
.case-mock-chat{background:#ECE5DD;border-radius:12px;padding:.85rem;display:flex;flex-direction:column;gap:.5rem;min-height:260px}
.cmc-bubble{max-width:85%;padding:.6rem .8rem;border-radius:14px;font-size:.82rem;line-height:1.4;position:relative}
.cmc-in{background:#fff;align-self:flex-start;border-top-left-radius:4px}
.cmc-out{background:#DCF8C6;align-self:flex-end;border-top-right-radius:4px}
.cmc-lang{display:inline-block;font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;background:#0B5F5E;color:#fff;margin-right:.4rem;vertical-align:middle;letter-spacing:.04em}
.cmc-ai{display:inline-block;font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;background:linear-gradient(135deg,#8B5CF6,#25D366);color:#fff;margin-bottom:.35rem;letter-spacing:.04em}
.cmc-btn-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.cmc-btn{background:#fff;border:1px solid #B5E2B0;color:#0B5F5E;font-size:.72rem;font-weight:600;padding:.3rem .55rem;border-radius:6px;display:inline-block}

/* Inbox mockup (agent translate view) */
.case-mock-inbox{background:#F8FAF9;border-radius:12px;padding:.9rem;display:flex;flex-direction:column;gap:.65rem;border:1px solid #E5EEE9;min-height:260px}
.cmi-row{background:#fff;border:1px solid #E5EEE9;border-radius:10px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.35rem}
.cmi-row-agent{background:#F0FDF4;border-color:#B5E2B0}
.cmi-tag{font-size:.62rem;font-weight:700;color:#6B7B73;text-transform:uppercase;letter-spacing:.06em}
.cmi-tag-agent{color:#0B5F5E}
.cmi-orig{font-size:.8rem;color:#0B1B14;line-height:1.4}
.cmi-translated{font-size:.75rem;color:#4B5B53;padding-left:.6rem;border-left:2px solid #25D366;font-style:italic}
.cmi-flag{display:inline-block;font-size:.6rem;font-weight:800;color:#0B5F5E;letter-spacing:.06em;margin-right:.3rem}
.cmi-footnote{font-size:.72rem;color:#6B7B73;font-style:italic;text-align:center;padding-top:.3rem;border-top:1px dashed #E5EEE9}

/* Broadcast mockup (AI-written campaign) */
.case-mock-broadcast{display:flex;flex-direction:column;gap:.75rem;min-height:260px}
.cmb-prompt{background:#F8FAF9;border:1px dashed #CBD5D0;border-radius:10px;padding:.7rem .8rem;display:flex;flex-direction:column;gap:.25rem}
.cmb-prompt-label{font-size:.65rem;font-weight:700;color:#6B7B73;text-transform:uppercase;letter-spacing:.06em}
.cmb-prompt-text{font-size:.82rem;color:#0B1B14;font-style:italic}
.cmb-arrow{text-align:center;font-size:.72rem;color:#8B5CF6;font-weight:700}
.cmb-bubble{background:#DCF8C6;border-radius:14px;padding:.75rem .9rem;font-size:.82rem;line-height:1.45;color:#0B1B14}
.cmb-variant{font-size:.72rem;color:#0B5F5E;background:#F0FDF4;border:1px solid #B5E2B0;padding:.45rem .6rem;border-radius:8px;font-weight:600}

/* ============================================================
   Sticky "Book a demo" bar — appears on long content pages
   after ~30% scroll. Dismissible per session. See assets/js/sticky-cta.js.
   Z-index 998 sits below the FAB (999). When the bar is visible,
   body gets .sticky-cta-shown which nudges the FAB up.
   ============================================================ */
.sticky-cta-bar{
  position:fixed;left:0;right:0;bottom:-96px;z-index:998;
  background:linear-gradient(180deg,#0B5F5E 0%,#074746 100%);color:#fff;
  padding:12px 14px;display:flex;align-items:center;gap:10px;
  transition:bottom .28s cubic-bezier(.2,.7,.3,1);
  box-shadow:0 -10px 28px -12px rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.06);
  font:600 .9rem/1.3 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;
}
.sticky-cta-bar.shown{bottom:0}
.sticky-cta-bar .sc-label{flex:1;min-width:0;color:rgba(255,255,255,.88)}
.sticky-cta-bar .sc-label b{color:#8cf3c2;font-weight:700}
.sticky-cta-bar .sc-label-desk{display:none}
.sticky-cta-bar .sc-label-mobile{display:inline}
.sticky-cta-bar .sc-cta{
  background:#25d366;color:#fff;font-weight:700;
  padding:10px 14px;border-radius:8px;text-decoration:none;
  white-space:nowrap;font-size:.85rem;
  box-shadow:0 6px 14px -4px rgba(37,211,102,.55);
}
.sticky-cta-bar .sc-cta:hover{background:#1cb956;color:#fff}
.sticky-cta-bar .sc-close{
  background:transparent;color:rgba(255,255,255,.7);border:0;
  font-size:22px;line-height:1;padding:4px 8px;cursor:pointer;
  margin-left:2px;
}
.sticky-cta-bar .sc-close:hover{color:#fff}
body.sticky-cta-shown .wa-float-fab{bottom:84px;transition:bottom .28s ease}

@media (min-width:640px){
  .sticky-cta-bar{padding:14px 20px;font-size:.95rem;gap:16px}
  .sticky-cta-bar .sc-label-mobile{display:none}
  .sticky-cta-bar .sc-label-desk{display:inline}
  .sticky-cta-bar .sc-cta{padding:11px 18px;font-size:.9rem}
}
@media (max-width:380px){
  .sticky-cta-bar{font-size:.78rem;padding:10px 10px;gap:8px}
  .sticky-cta-bar .sc-cta{padding:8px 12px;font-size:.78rem}
  .sticky-cta-bar .sc-close{font-size:20px;padding:4px 6px}
}



/* =========================================================
   HEADER → FIRST-SECTION SPACING TIGHTENER (2026-04-21)
   Fixes stacked-padding gap between site header and hero
   on ~28 pages that open with breadcrumb-only container +
   separate hero section, plus legal/case-study wrappers.
   Mobile-first; gently expands on wider screens.
   ========================================================= */

/* Case 1: <main> opens with <div class="container"> (breadcrumb only) */
main > .container:first-child{
  padding-top:.65rem;
  padding-bottom:.1rem;
}
main > .container:first-child .hub-breadcrumb,
main > .container:first-child .breadcrumb,
main > .container:first-child nav[aria-label="Breadcrumb" i]{
  margin:0;
}

/* Case 2: first hero directly inside <main> — tighten its own top-pad */
main > .hero:first-child,
main > .hub-hero:first-child,
main > section.hero:first-child,
main > section.hub-hero:first-child,
main > section.hero--compact:first-child,
main > section.hero--proof:first-child,
main > section.lc-hero:first-child,
main > section.vs-hero:first-child,
main > section.feat-hero:first-child,
main > section.sa-hero:first-child,
main > section.de-hero:first-child,
main > section.ty-hero:first-child,
main > section[class*="-hero"]:first-child{
  padding-top:clamp(1.6rem,3.2vw,2.6rem) !important;
}

/* Case 3: breadcrumb-only container followed by a hero — tighten hero top */
main > .container:first-child + .hub-hero,
main > .container:first-child + section.hub-hero,
main > .container:first-child + section.hero,
main > .container:first-child + section[class*="-hero"],
main > .container:first-child + section.section{
  padding-top:clamp(.9rem,2.5vw,1.8rem) !important;
}

/* Case 4: legal / case / industry / solution / integration page wrappers
   that double-wrap: hero → wrapper → .section. Pull the inner section up. */
main > .legal > section.section:first-child,
main > .case-page > section.hero:first-child,
main > .case-page > section:first-of-type,
main > .ind-page > section:first-of-type,
main > .sol-page > section:first-of-type,
main > .integ-page > section:first-of-type,
main > .ind-hub   > section:first-of-type,
main > .sol-page.sol-hub > section:first-of-type,
main > .integ-hub > section:first-of-type,
main > .case-hub  > section:first-of-type,
main > .feat-hub  > section:first-of-type{
  padding-top:clamp(1rem,2.5vw,2rem) !important;
}

/* Case 5: squeeze the <body>/<main> top if any default margin sneaks in */
body{margin:0}
main{padding-top:0}

/* ============================================================
   ZOHO INTEGRATION PAGE — brand-accurate chips + app tiles
   (scoped to /integrations/zoho-crm/) 2026-04-21
   ============================================================ */

/* Wordmark holder — tames the SVG height inside the head row */
.zoho-wordmark{
  display:inline-flex;align-items:center;line-height:0;
}
.zoho-wordmark svg{display:block;max-width:160px;height:auto}

/* App-row chips under the wordmark */
.zoho-app-row{
  display:flex;flex-wrap:wrap;gap:.45rem;
  margin:.25rem 0 1.25rem;
}
.zh-chip{
  display:inline-flex;align-items:center;
  padding:.32rem .7rem;
  font-size:.78rem;font-weight:600;letter-spacing:.01em;
  border-radius:999px;
  color:#fff;
  background:#777;
  box-shadow:0 1px 0 rgba(0,0,0,.04);
  white-space:nowrap;
}
.zh-chip.zh-crm       {background:#E42527}
.zh-chip.zh-bigin     {background:#F47B20}
.zh-chip.zh-desk      {background:#F7B51E;color:#2a2a2a}
.zh-chip.zh-books     {background:#1A9C60}
.zh-chip.zh-salesiq   {background:#EF4135}
.zh-chip.zh-campaigns {background:#0891B2}

/* App-tile grid — mobile-first: 1 column, then 2, then 3 */
.zoho-app-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  margin-top:1.5rem;
}
@media (min-width:560px){
  .zoho-app-grid{grid-template-columns:repeat(2,1fr);gap:1.1rem}
}
@media (min-width:900px){
  .zoho-app-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem}
}

/* Base tile — card with top accent line */
.zh-tile{
  position:relative;
  background:#fff;
  border:1px solid #e7e7ea;
  border-radius:14px;
  padding:1.25rem 1.1rem 1.1rem;
  box-shadow:0 1px 2px rgba(18,20,30,.04);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.zh-tile::before{
  content:"";
  position:absolute;top:0;left:0;right:0;height:4px;
  background:#ddd;
  border-top-left-radius:14px;border-top-right-radius:14px;
}
.zh-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(18,20,30,.07);
  border-color:#d9dbe0;
}
.zh-tile h4{
  margin:.2rem 0 .35rem;
  font-size:1.02rem;
  letter-spacing:-.01em;
  color:#18181b;
}
.zh-tile p{
  margin:0;
  font-size:.92rem;line-height:1.5;
  color:var(--ink-muted,#5a5a66);
}

/* Circular icon wrapper — tinted background per product */
.zh-tile-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;
  border-radius:12px;
  margin-bottom:.85rem;
  background:#f5f5f7;
}

/* Per-product accent + icon tint */
.zh-tile--crm::before       {background:#E42527}
.zh-tile--crm .zh-tile-icon {background:rgba(228,37,39,.08)}

.zh-tile--bigin::before       {background:#F47B20}
.zh-tile--bigin .zh-tile-icon {background:rgba(244,123,32,.1)}

.zh-tile--desk::before       {background:#F7B51E}
.zh-tile--desk .zh-tile-icon {background:rgba(247,181,30,.13)}

.zh-tile--books::before       {background:#1A9C60}
.zh-tile--books .zh-tile-icon {background:rgba(26,156,96,.1)}

.zh-tile--salesiq::before       {background:#EF4135}
.zh-tile--salesiq .zh-tile-icon {background:rgba(239,65,53,.09)}

.zh-tile--campaigns::before       {background:#0891B2}
.zh-tile--campaigns .zh-tile-icon {background:rgba(8,145,178,.1)}