:root {
--green-50: #ecfdf3;
--green-100: #d1fadf;
--green-200: #a6f4c5;
--green-400: #32d583;
--green-500: #12b76a;
--green-600: #039855;
--green-700: #027a48;
--amber-100: #fef0c7;
--amber-400: #fdb022;
--amber-500: #f79009;
--amber-600: #dc6803;
--ink-900: #101828;
--ink-800: #1d2939;
--ink-700: #344054;
--ink-600: #475467;
--ink-500: #667085;
--ink-400: #98a2b3;
--ink-300: #d0d5dd;
--ink-200: #eaecf0;
--ink-100: #f2f4f7;
--ink-50: #f9fafb;
--bg: #f7f8fa;
--surface: #ffffff;
--border: #eaecf0;
--font-display: "DM Sans", sans-serif;
--radius: 16px;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
--shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
--shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, 0.16);
--shadow-green: 0 16px 40px -12px rgba(3, 152, 85, 0.35);
--max: 1200px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
font-family: var(--font-display);
background: var(--bg);
color: var(--ink-800);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}

/* Policy pages need the viewport itself as the sticky scroll container;
  other pages retain the site's horizontal-bleed protection. */
html:has(main.wmkprivacyx-page),
body:has(main.wmkprivacyx-page) {
overflow: visible !important;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--green-600); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.section { padding: 84px 0; }


/* Typography helpers */
.eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--green-700);
background: var(--green-50); border: 1px solid var(--green-100);
padding: 6px 14px; border-radius: 999px;
}
.section-head { 
text-align: center; 
/* max-width: 640px;  */
margin: 0 auto 52px; 
}
.section-head h2 {
font-family: var(--font-display);
font-size: clamp(28px, 4vw, 41px);
line-height: 1.12; font-weight: 800; color: var(--ink-900);
margin: 18px 0 14px; letter-spacing: -.02em; text-wrap: balance;
}
.section-head p { color: var(--ink-500); font-size: 17px; text-wrap: pretty; }
.text-green { color: var(--green-600); }
.text-amber { color: var(--amber-500); }

/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 600; font-size: 15px; border-radius: 12px;
padding: 13px 22px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--green-600); color: #fff; box-shadow: var(--shadow-green); }
.btn-primary:hover { background: var(--green-700); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { color: var(--ink-900); }
.btn-outline { background: var(--surface); color: var(--ink-800); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.btn-outline:hover { border-color: var(--ink-300); }
.btn-lg { padding: 15px 26px; font-size: 16px; }

/* Progressive enhancement for reveal effects.
  Content is visible in the initial HTML/CSS render so crawlers, no-script
  visitors and assistive technology receive the complete page. JavaScript
  may still add the `.in` state for compatibility with existing templates. */
.reveal { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* Header CSS CODE  */

body.wmh-lock {
overflow: hidden;
}

.wmh-header,
.wmh-header *,
.wmh-mobile-drawer,
.wmh-mobile-drawer *,
.wmh-overlay {
box-sizing: border-box;
}

/* MAIN HEADER  */

.wmh-header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 2000;
padding: 17px 0 0;
pointer-events: none;
transition:
  padding 0.24s ease;
}

.wmh-header.is-scrolled {
padding-top: 8px;
}

.wmh-header > .wrap {
overflow: visible;
}

.wmh-shell {
position: relative;
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 0 10px 0 18px;
overflow: visible;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 18px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 50px -36px rgba(16, 24, 40, 0.46);
backdrop-filter: blur(18px) saturate(150%);
-webkit-backdrop-filter: blur(18px) saturate(150%);
pointer-events: auto;
transition: min-height 0.24s ease, border-color 0.24s ease, background 0.24s ease, box-shadow 0.24s ease;
}

.wmh-header.is-scrolled
.wmh-shell {
min-height: 62px;
border-color: rgba(16, 24, 40, 0.12);
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 20px 48px -32px rgba(16, 24, 40, 0.34);
}

/*   BRAND */

.wmh-brand,
.wmh-mobile-brand {
display: inline-flex;
align-items: center;
line-height: 0;
}

.wmh-brand {
width: 170px;
flex: 0 0 170px;
}

.wmh-brand img,
.wmh-mobile-brand img {
width: 100%;
height: auto;
object-fit: contain;
object-position: left center;
}

.wmh-brand img {
max-height: 43px;
transition:
  transform 0.2s ease,
  opacity 0.2s ease;
}

.wmh-brand:hover img {
opacity: 0.92;
transform: translateY(-1px);
}

/*  DESKTOP NAVIGATION */

.wmh-desktop-nav {
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}

.wmh-nav-list {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}

.wmh-nav-item {
position: relative;
flex:0 0 auto;
}

.wmh-nav-control {
min-height: 42px;
display: flex;
align-items: center;
padding-left: 2px;
border-radius: 11px;
transition: background 0.2s ease;
}

.wmh-nav-control,
.wmh-direct-link {
transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.wmh-nav-control:hover,
.wmh-nav-item.is-open > .wmh-nav-control,
.wmh-nav-item.is-current > .wmh-nav-control,
.wmh-direct-link:hover {
background: var(--ink-100);
}

.wmh-nav-item.is-current > .wmh-nav-control,
.wmh-direct-link.is-active {
background: var(--green-50);
box-shadow: inset 0 0 0 1px var(--green-200);
}

.wmh-nav-item.is-current > .wmh-nav-control .wmh-nav-link,
.wmh-direct-link.is-active {
color: var(--green-700);
}

.wmh-nav-link,
.wmh-direct-link {
position: relative;
min-height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border-radius: 10px;
color: var(--ink-700);
font-size: 12.5px;
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition: color 0.2s ease;
}

.wmh-nav-link:hover,
.wmh-direct-link:hover,
.wmh-nav-item.is-open .wmh-nav-link {
color: var(--ink-900);
}

.wmh-parent-trigger {
gap: 9px;
border: 0;
background: transparent;
cursor: pointer;
}

.wmh-parent-chevron {
display: block;
width: 7px;
height: 7px;
flex: 0 0 7px;
border-right: 1.8px solid currentColor;
border-bottom: 1.8px solid currentColor;
font-style: normal;
transform: rotate(45deg) translate(-1px, -1px);
transition: transform 0.22s ease;
}

.wmh-nav-item.is-open .wmh-parent-chevron {
transform: rotate(225deg) translate(-1px, -1px);
}

/* Active navigation */

.wmh-nav-link.is-active,
.wmh-direct-link.is-active,
.wmh-nav-item.is-current
> .wmh-nav-control
.wmh-nav-link {
color: var(--green-700);
}



/* Menu arrow button */

.wmh-menu-toggle {
position: relative;
width: 30px;
height: 36px;
flex: 0 0 30px;
display: grid;
place-items: center;
padding: 0;
border: 0;
border-radius: 9px;
background: transparent;
color: var(--ink-500);
transition: color 0.2s ease, background 0.2s ease;
}

.wmh-menu-toggle::before {
content: "";
width: 7px;
height: 7px;
border-right:
  1.8px solid
  currentColor;
border-bottom:
  1.8px solid
  currentColor;
transform:
  rotate(45deg)
  translate(-1px, -1px);
transition:
  transform 0.22s ease;
}



.wmh-nav-item.is-open
.wmh-menu-toggle::before {
transform:
  rotate(225deg)
  translate(-1px, -1px);
}

  /* DESKTOP ACTION BUTTONS  */

.wmh-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}

.wmh-login,
.wmh-register {
min-height: 43px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 0 15px;
border-radius: 11px;
font-size: 11.5px;
font-weight: 800;
white-space: nowrap;
transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.wmh-login {
border: 1px solid var(--ink-300);
background: var(--surface);
color:var(--ink-800);
box-shadow:
  var(--shadow-sm);
}

.wmh-login:hover,
.wmh-login.is-active {
border-color:
  var(--green-400);

color:
  var(--green-700);

transform:
  translateY(-2px);
}

.wmh-register {
background:
  var(--green-700);

color: #ffffff;

box-shadow:
  var(--shadow-green);
}

.wmh-register:hover,
.wmh-register.is-active {
background:
  var(--green-600);

transform:
  translateY(-2px);
}

.wmh-register span,
.wmh-mobile-register span {
transition:
  transform 0.2s ease;
}

.wmh-register:hover span,
.wmh-mobile-register:hover span {
transform:
  translateX(3px);
}

/*  DESKTOP MEGA MENUS  */

.wmh-mega-menu {
position: absolute;
top: calc(100% + 10px);
left: 50%;
z-index: 2050;
width:min(700px, calc(100vw - 32px));
max-height: calc(100vh - 100px);
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 22px;
background:rgba(255, 255, 255, 0.99);
box-shadow: 0 30px 76px -34px rgba(16, 24, 40, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 9px) scale(0.985);
transform-origin: top center;
transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Invisible hover bridge */

.wmh-mega-menu::before {
content: "";
position: absolute;
top: -12px;
right: 0;
left: 0;
height: 12px;
background: transparent;
}


/* MEGA MENU HEADER  */

.wmh-menu-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-bottom: 17px;
padding-bottom: 15px;
border-bottom: 1px solid var(--border);
}

.wmh-menu-head > div {
min-width: 0;
}

.wmh-menu-head
> div
> span,
.wmh-menu-label,
.wmh-resource-head
> span {
color: var(--ink-400);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}

.wmh-menu-head h2,
.wmh-menu-head .wmh-menu-title {
max-width: 470px;
margin: 5px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.025em;
}

.wmh-menu-head > a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 9px;
border-radius: 9px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
white-space: nowrap;
transition: transform 0.2s ease, background 0.2s ease;
}

.wmh-menu-head > a:hover {
background: var(--green-100);
transform: translateY(-2px);
}

.wmh-menu-head i,
.wmh-menu-card > i {
font-style: normal;
}

/*  SHARED MENU ICONS  */

.wmh-menu-icon,
.wmh-industry-icon,
.wmh-product-icon,
.wmh-resource-icon,
.wmh-mini-icon,
.wmh-mobile-row-icon {
display: grid;
place-items: center;

border-radius: 12px;

font-size: 9px;
font-weight: 800;

letter-spacing:
  -0.02em;
}

/* SOLUTIONS MENU  */

.wmh-solutions-grid {
display: grid;

grid-template-columns:
  minmax(0, 1.08fr)
  minmax(0, 0.92fr);

gap: 18px;
}

.wmh-menu-label {
display: block;

margin-bottom: 8px;
}

.wmh-menu-card {
display: grid;

grid-template-columns:
  40px
  minmax(0, 1fr)
  17px;

align-items: center;

gap: 10px;

min-width: 0;

padding: 9px;

border:
  1px solid
  transparent;

border-radius: 14px;

transition:
  transform 0.2s ease,
  border-color 0.2s ease,
  background 0.2s ease,
  box-shadow 0.2s ease;
}

.wmh-menu-card
+ .wmh-menu-card {
margin-top: 4px;
}

.wmh-menu-card:hover,
.wmh-menu-card.is-active {
border-color:
  var(--green-100);

background:
  linear-gradient(
    145deg,
    var(--green-50),
    var(--surface)
  );

box-shadow:
  0 16px 30px -25px
  rgba(16, 24, 40, 0.48);

transform:
  translateX(3px);
}

.wmh-menu-icon {
width: 40px;
height: 40px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.wmh-menu-icon--amber {
background:
  var(--amber-100);

color:
  var(--amber-600);
}

.wmh-menu-icon--blue {
background:
  #eff6ff;

color:
  #2563eb;
}

.wmh-menu-card
> span:nth-child(2),
.wmh-industry-grid
a
> span:last-child,
.wmh-product-grid
a
> span:last-child,
.wmh-resource-list
a
> span:last-child {
min-width: 0;
}

.wmh-menu-card b,
.wmh-menu-card small,
.wmh-industry-grid b,
.wmh-industry-grid small,
.wmh-product-grid b,
.wmh-product-grid small,
.wmh-resource-list b,
.wmh-resource-list small {
display: block;
}

.wmh-menu-card b {
color:
  var(--ink-800);

font-size: 10.5px;
font-weight: 800;
}

.wmh-menu-card small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;

line-height: 1.42;
}

.wmh-menu-card > i {
color:
  var(--ink-300);

transition:
  transform 0.2s ease,
  color 0.2s ease;
}

.wmh-menu-card:hover
> i {
color:
  var(--green-600);

transform:
  translateX(3px);
}

/* Industries */

.wmh-industry-grid {
display: grid;

gap: 4px;
}

.wmh-industry-grid a,
.wmh-product-grid a,
.wmh-resource-list a {
display: grid;
align-items: center;

gap: 10px;

border:
  1px solid
  transparent;

transition:
  transform 0.2s ease,
  border-color 0.2s ease,
  background 0.2s ease;
}

.wmh-industry-grid a {
grid-template-columns:
  38px
  minmax(0, 1fr);

padding: 8px;

border-radius: 12px;
}

.wmh-industry-grid a:hover,
.wmh-industry-grid a.is-active,
.wmh-product-grid a:hover,
.wmh-product-grid a.is-active,
.wmh-resource-list a:hover,
.wmh-resource-list a.is-active {
border-color:
  var(--border);

background:
  var(--ink-50);

transform:
  translateX(3px);
}

.wmh-industry-icon {
width: 38px;
height: 38px;

background:
  var(--ink-100);

color:
  var(--ink-600);
}

.wmh-industry-grid b {
color:
  var(--ink-800);

font-size: 10px;
font-weight: 800;
}

.wmh-industry-grid small {
margin-top: 2px;

color:
  var(--ink-400);

font-size: 9px;
}

/*  PRODUCT MENU  */

.wmh-product-grid {
display: grid;

grid-template-columns:
  repeat(
    2,
    minmax(0, 1fr)
  );

gap: 5px;

margin-top: 8px;
}

.wmh-product-grid a {
grid-template-columns:
  38px
  minmax(0, 1fr);

padding: 8px;

border-radius: 13px;
}

.wmh-product-icon {
width: 38px;
height: 38px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.wmh-product-icon--amber {
background:
  var(--amber-100);

color:
  var(--amber-600);
}

.wmh-product-icon--blue {
background:
  #eff6ff;

color:
  #2563eb;
}

.wmh-product-icon--violet {
background:
  #f5f3ff;

color:
  #7c3aed;
}

.wmh-product-icon--pink {
background:
  #fdf2f8;

color:
  #db2777;
}

.wmh-product-icon--cyan {
background:
  #ecfeff;

color:
  #0891b2;
}

.wmh-product-icon--orange {
background:
  #fff7ed;

color:
  #ea580c;
}

.wmh-product-icon--dark {
background:
  var(--ink-900);

color:
  #ffffff;
}

.wmh-product-grid b {
color:
  var(--ink-800);

font-size: 9.5px;
font-weight: 800;
}

.wmh-product-grid small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;

line-height: 1.35;
}

/* Integrations strip */

.wmh-integration-strip {
display: grid;

grid-template-columns:
  repeat(
    2,
    minmax(0, 1fr)
  );

gap: 8px;

margin-top: 14px;

padding-top: 14px;

border-top:
  1px solid
  var(--border);
}

.wmh-integration-strip a {
display: grid;

grid-template-columns:
  36px
  minmax(0, 1fr);

align-items: center;

gap: 9px;

padding: 9px;

border:
  1px solid
  var(--border);

border-radius: 13px;

background:
  var(--ink-50);

transition:
  transform 0.2s ease,
  border-color 0.2s ease,
  background 0.2s ease;
}

.wmh-integration-strip a:hover,
.wmh-integration-strip a.is-active {
border-color:
  var(--green-200);

background:
  var(--green-50);

transform:
  translateY(-2px);
}

.wmh-mini-icon {
width: 36px;
height: 36px;

background:
  var(--surface);

color:
  var(--green-700);
}

.wmh-integration-strip b,
.wmh-integration-strip small {
display: block;
}

.wmh-integration-strip b {
color:
  var(--ink-800);

font-size: 9px;
font-weight: 800;
}

.wmh-integration-strip small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

/*  RESOURCES MENU  */

.wmh-resource-head {
display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

margin-bottom: 8px;
}

.wmh-resource-head a {
color:
  var(--green-700);

font-size: 9px;
font-weight: 800;
}

.wmh-resource-list {
display: grid;

gap: 4px;
}

.wmh-resource-list a {
grid-template-columns:
  39px
  minmax(0, 1fr);

padding: 8px;

border-radius: 13px;
}

.wmh-resource-icon {
width: 39px;
height: 39px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.wmh-resource-list b {
color:
  var(--ink-800);

font-size: 10px;
font-weight: 800;
}

.wmh-resource-list small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;

line-height: 1.35;
}

/* MOBILE TOGGLE */

.wmh-mobile-toggle {
width: 43px;
height: 43px;

display: none;
place-items: center;

flex:
  0 0 43px;

padding: 0;

border:
  1px solid
  var(--border);

border-radius: 12px;

background:
  var(--surface);

box-shadow:
  var(--shadow-sm);
}

.wmh-mobile-toggle span {
display: block;

width: 18px;
height: 2px;

margin:
  2.5px auto;

border-radius: 999px;

background:
  var(--ink-800);

transition:
  transform 0.22s ease,
  opacity 0.22s ease;
}

.wmh-mobile-toggle.is-open
span:nth-child(1) {
transform:
  translateY(7px)
  rotate(45deg);
}

.wmh-mobile-toggle.is-open
span:nth-child(2) {
opacity: 0;
}

.wmh-mobile-toggle.is-open
span:nth-child(3) {
transform:
  translateY(-7px)
  rotate(-45deg);
}

/*  MOBILE OVERLAY AND DRAWER  */

.wmh-overlay {
position: fixed;

inset: 0;

z-index: 2100;

background:
  rgba(16, 24, 40, 0.5);

opacity: 0;
visibility: hidden;

pointer-events: none;

backdrop-filter:
  blur(4px);

-webkit-backdrop-filter:
  blur(4px);

transition:
  opacity 0.25s ease,
  visibility 0.25s ease;
}

.wmh-overlay.is-visible {
opacity: 1;
visibility: visible;

pointer-events: auto;
}

.wmh-mobile-drawer {
position: fixed;

top: 0;
right: 0;
bottom: 0;

z-index: 2110;

width:
  min(
    410px,
    100%
  );

display: grid;

grid-template-rows:
  auto
  minmax(0, 1fr)
  auto;

border-left:
  1px solid
  var(--border);

background:
  var(--surface);

box-shadow:
  -28px 0 70px -40px
  rgba(16, 24, 40, 0.58);

transform:
  translateX(105%);

transition:
  transform 0.34s
  cubic-bezier(
    0.22,
    1,
    0.36,
    1
  );
}

.wmh-mobile-drawer.is-open {
transform:
  translateX(0);
}

/* Drawer header */

.wmh-mobile-head {
min-height: 72px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 16px;

padding:
  12px 16px;

border-bottom:
  1px solid
  var(--border);

background:
  rgba(255, 255, 255, 0.98);
}

.wmh-mobile-brand {
width: 165px;
}

.wmh-mobile-close {
width: 42px;
height: 42px;

display: grid;
place-items: center;

padding: 0;

border:
  1px solid
  var(--border);

border-radius: 12px;

background:
  var(--ink-50);

color:
  var(--ink-700);

font-size: 26px;

line-height: 1;
}

/* Drawer content */

.wmh-mobile-body {
min-height: 0;
padding: 16px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior:
  contain;
}

.wmh-mobile-page {
display: none;
}

.wmh-mobile-page.is-active {
display: block;
animation: wmhPageIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes wmhPageIn {
from {
  opacity: 0;
  transform: translateX(18px);
}

to {
  opacity: 1;
  transform: translateX(0);
}
}

/* Mobile intro */

.wmh-mobile-intro {
margin-bottom: 14px;
padding: 15px;
border: 1px solid var(--green-100);
border-radius: 15px;
background:linear-gradient(145deg, var(--green-50), var(--surface));
}

.wmh-mobile-intro span {
color: var(--green-700);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}

.wmh-mobile-intro p {
margin: 5px 0 0;
color: var(--ink-600);
font-size: 11px;
line-height: 1.45;
}

/* Mobile rows */

.wmh-mobile-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 48px;
margin-bottom: 7px;
overflow: hidden;
border: 1px solidvar(--border);
border-radius: 14px;
background: var(--surface);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wmh-mobile-row:hover,
.wmh-mobile-row:has(
a.is-active
) {
border-color: var(--green-200);
box-shadow: 0 15px 30px -25px rgba(16, 24, 40, 0.48);
transform: translateY(-2px);
}

.wmh-mobile-row:has(.wmh-mobile-parent:focus-visible) {
border-color: var(--green-300);
box-shadow: 0 0 0 3px var(--green-100);
}

.wmh-mobile-row > .wmh-mobile-parent {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 40px minmax(0, 1fr) 28px;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
padding: 11px;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}

.wmh-mobile-row > .wmh-mobile-parent:hover {
background: var(--green-50);
}

.wmh-mobile-parent i {
color: var(--ink-500);
font-size: 25px;
font-style: normal;
text-align: center;
}

.wmh-mobile-row > a {
display: grid;

grid-template-columns:
  40px
  minmax(0, 1fr);

align-items: center;

gap: 10px;

min-width: 0;

padding: 11px;
}

.wmh-mobile-row > button {
display: grid;
padding: 0;

border: 0;
border-left:
  1px solid
  var(--border);

background:
  var(--ink-50);

color:
  var(--ink-500);

font-size: 25px;

transition:
  color 0.2s ease,
  background 0.2s ease;
}

.wmh-mobile-row > button:hover {
background:
  var(--green-50);

color:
  var(--green-700);
}

/* Mobile icons */

.wmh-mobile-row-icon {
width: 40px;
height: 40px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.wmh-mobile-row-icon--violet {
background:
  #f5f3ff;

color:
  #7c3aed;
}

.wmh-mobile-row-icon--blue {
background:
  #eff6ff;

color:
  #2563eb;
}

.wmh-mobile-row-icon--amber {
background:
  var(--amber-100);

color:
  var(--amber-600);
}

/* Mobile text */

.wmh-mobile-row b,
.wmh-mobile-row small,
.wmh-mobile-direct b,
.wmh-mobile-direct small,
.wmh-mobile-card b,
.wmh-mobile-card small,
.wmh-mobile-product-grid b,
.wmh-mobile-product-grid small {
display: block;
}

.wmh-mobile-row b,
.wmh-mobile-direct b {
color:
  var(--ink-800);

font-size: 11px;
font-weight: 800;
}

.wmh-mobile-row small,
.wmh-mobile-direct small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;

line-height: 1.35;
}

/* Direct mobile links */

.wmh-mobile-direct {
display: grid;

grid-template-columns:
  40px
  minmax(0, 1fr)
  18px;

align-items: center;

gap: 10px;

margin-bottom: 7px;

padding: 11px;

border:
  1px solid
  var(--border);

border-radius: 14px;

background:
  var(--surface);

transition:
  transform 0.2s ease,
  border-color 0.2s ease,
  box-shadow 0.2s ease;
}

.wmh-mobile-direct:hover,
.wmh-mobile-direct.is-active {
border-color:
  var(--green-200);

box-shadow:
  0 15px 30px -25px
  rgba(16, 24, 40, 0.48);

transform:
  translateY(-2px);
}

.wmh-mobile-direct > i {
color:
  var(--ink-400);

font-size: 24px;
font-style: normal;
}

/* Mobile submenu header */

.wmh-mobile-subhead {
display: grid;

grid-template-columns:
  42px
  minmax(0, 1fr)
  auto;

align-items: center;

gap: 10px;

margin-bottom: 16px;

padding-bottom: 14px;

border-bottom:
  1px solid
  var(--border);
}

.wmh-mobile-subhead
> button {
width: 42px;
height: 42px;

display: grid;
place-items: center;

padding: 0;

border:
  1px solid
  var(--border);

border-radius: 12px;

background:
  var(--ink-50);

color:
  var(--ink-700);

font-size: 20px;
}

.wmh-mobile-subhead span,
.wmh-mobile-subhead b {
display: block;
}

.wmh-mobile-subhead span {
color:
  var(--ink-400);

font-size: 9px;
font-weight: 800;

letter-spacing:
  0.08em;

text-transform:
  uppercase;
}

.wmh-mobile-subhead b {
margin-top: 3px;

color:
  var(--ink-800);

font-size: 11px;
font-weight: 800;
}

.wmh-mobile-subhead
> a {
padding:
  7px 9px;

border-radius: 9px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;
}

.wmh-mobile-label {
margin:
  15px 0 7px;

color:
  var(--ink-400);

font-size: 9px;
font-weight: 800;

letter-spacing:
  0.11em;

text-transform:
  uppercase;
}

/* Mobile submenu cards */

.wmh-mobile-card {
display: grid;

grid-template-columns:
  40px
  minmax(0, 1fr);

align-items: center;

gap: 10px;

margin-bottom: 7px;

padding: 10px;

border:
  1px solid
  var(--border);

border-radius: 13px;

background:
  var(--surface);

transition:
  transform 0.2s ease,
  border-color 0.2s ease,
  background 0.2s ease;
}

.wmh-mobile-card:hover,
.wmh-mobile-card.is-active {
border-color:
  var(--green-200);

background:
  var(--green-50);

transform:
  translateX(3px);
}

.wmh-mobile-card b {
color:
  var(--ink-800);

font-size: 10px;
font-weight: 800;
}

.wmh-mobile-card small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;

line-height: 1.35;
}

/* Mobile grids */

.wmh-mobile-grid,
.wmh-mobile-product-grid {
display: grid;

grid-template-columns:
  repeat(
    2,
    minmax(0, 1fr)
  );

gap: 7px;
}

.wmh-mobile-grid a,
.wmh-mobile-product-grid a {
padding: 10px;

border:
  1px solid
  var(--border);

border-radius: 12px;

background:
  var(--ink-50);

transition:
  transform 0.2s ease,
  border-color 0.2s ease,
  background 0.2s ease;
}

.wmh-mobile-grid a {
min-height: 46px;

display: flex;
align-items: center;

color:
  var(--ink-700);

font-size: 9px;
font-weight: 700;
}

.wmh-mobile-product-grid a:hover,
.wmh-mobile-product-grid a.is-active,
.wmh-mobile-grid a:hover,
.wmh-mobile-grid a.is-active {
border-color:
  var(--green-200);

background:
  var(--green-50);

transform:
  translateY(-2px);
}

.wmh-mobile-product-grid b {
color:
  var(--ink-800);

font-size: 9px;
font-weight: 800;
}

.wmh-mobile-product-grid small {
margin-top: 4px;

color:
  var(--ink-400);

font-size: 9px;

line-height: 1.35;
}

/* Mobile footer */

.wmh-mobile-footer {
display: grid;

grid-template-columns:
  repeat(
    2,
    minmax(0, 1fr)
  );

gap: 8px;

padding:
  12px 16px
  16px;

border-top:
  1px solid
  var(--border);

background:
  rgba(255, 255, 255, 0.98);

box-shadow:
  0 -16px 30px -28px
  rgba(16, 24, 40, 0.5);
}

.wmh-mobile-login,
.wmh-mobile-register {
min-height: 45px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

padding:
  0 12px;

border-radius: 11px;

font-size: 10px;
font-weight: 800;

text-align: center;
}

.wmh-mobile-login {
border:
  1px solid
  var(--ink-300);

background:
  var(--surface);

color:
  var(--ink-800);
}

.wmh-mobile-register {
background:
  var(--green-600);

color:
  #ffffff;

box-shadow:
  var(--shadow-green);
}

/* Header CSS CODE  END */

/*  HERO  */

.hero { position: relative; padding: 60px 0 40px; overflow: hidden; }
.hero::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
  radial-gradient(60% 55% at 78% 18%, rgba(18,183,106,.10), transparent 70%),
  radial-gradient(48% 48% at 8% 6%, rgba(253,176,34,.10), transparent 70%);
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.hero-badge {
display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600;
color: var(--ink-700); background: var(--surface); border: 1px solid var(--border);
border-radius: 999px; padding: 7px 8px 7px 16px; box-shadow: var(--shadow-sm);
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber-400); box-shadow: 0 0 0 4px rgba(253,176,34,.2); }
.hero-badge .tag { background: var(--amber-400); color: #6b3e00; font-weight: 800; font-size: 11px; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.hero h1 {
font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
font-size: clamp(40px, 6.2vw, 68px); line-height: 1.02; color: var(--ink-900); margin: 22px 0 0;
}
.hero h1 .pill {
display: inline-flex; align-items: center; gap: 12px; margin: 8px 0;
background: linear-gradient(180deg, #fff6e6, #fdecc8);
border: 1px solid #f7d98a; color: var(--amber-600);
padding: 4px 20px 8px; border-radius: 16px; box-shadow: 0 8px 24px -10px rgba(247,144,9,.5);
}
.hero h1 .pill .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--amber-400); color: #6b3e00; display: grid; place-items: center; }
.hero h1 .muted { color: var(--ink-500); }
.hero-sub { margin-top: 22px; font-size: 18px; color: var(--ink-500); max-width: 460px; text-wrap: pretty; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.chip { font-size: 13px; font-weight: 600; color: var(--ink-700); background: var(--surface); border: 1px solid var(--border); padding: 7px 14px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.hero-cta { display: flex; align-items: center; gap: 16px; margin-top: 28px; flex-wrap: wrap; }
.play { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-700); }
.play .pbtn { width: 44px; height: 44px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; transition: .2s; }
.play:hover .pbtn { transform: scale(1.06); color: var(--green-600); }
.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span {
width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
font-size: 10px; font-weight: 800; color: #fff; border: 2px solid var(--bg); margin-left: -10px;
}
.avatars span:first-child { margin-left: 0; }
.stars { color: var(--amber-400); letter-spacing: 2px; }
.hero-trust small { color: var(--ink-500); font-size: 13.5px; }
.hero-trust small b { color: var(--ink-800); }

.hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-sm); }
.stat .si { width: 40px; height: 40px; border-radius: 11px; background: var(--green-50); color: var(--green-600); display: grid; place-items: center; flex-shrink: 0; }
.stat .amber { background: var(--amber-100); color: var(--amber-600); }
.stat h3 { font-size: 22px; font-weight: 800; color: var(--ink-900); font-family: var(--font-display); line-height: 1; }
.stat p { font-size: 12.5px; color: var(--ink-500); margin-top: 3px; }

/* HERO LIVE DASHBOARD WIDGET   */

.hero-visual { position: relative; }
.hv-float {
position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink-800); box-shadow: var(--shadow-md);
animation: floaty 5s ease-in-out infinite;
}
.hv-float .ci { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; color: #fff; }
.hv-wa { top: -14px; left: 6%; }
.hv-ig { top: 30px; right: -6px; animation-delay: .8s; }
.hv-tg { bottom: -14px; left: 12%; animation-delay: 1.6s; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.dash {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.dash-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--ink-50);
}
.dash-bar .dots { display: flex; gap: 6px; }
.dash-bar .dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.dash-bar .dots i:nth-child(1){ background:#ff5f57;} .dash-bar .dots i:nth-child(2){ background:#febc2e;} .dash-bar .dots i:nth-child(3){ background:#28c840;}
.dash-bar .title { font-size: 12.5px; font-weight: 600; color: var(--ink-500); display: flex; align-items: center; gap: 7px; }
.dash-bar .title::before { content:""; width: 7px; height: 7px; border-radius: 50%; background: var(--green-500); }
.dash-body {
  display: grid;
  grid-template-columns: 1.15fr 0.95fr;
}
.inbox { border-right: 1px solid var(--border); }
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 8px; }
.inbox-head h2,
.inbox-head h4 { font-size: 14px; font-weight: 800; color: var(--ink-900); }
.live-pill { font-size: 10px; font-weight: 800; letter-spacing: .05em; color: var(--green-700); background: var(--green-50); border: 1px solid var(--green-100); padding: 3px 9px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-500); animation: blink 1.4s infinite; }
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:.25;} }
.conv { display: flex; gap: 11px; padding: 11px 16px; border-top: 1px solid var(--ink-100); transition: background .2s; }
.conv:hover { background: var(--ink-50); }
.conv.new { animation: convIn .5s ease; }
@keyframes convIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.conv .ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #fff; }
.conv .cbody { flex: 1; min-width: 0; }
.conv .crow { display: flex; justify-content: space-between; align-items: center; }
.conv .cname { font-size: 13px; font-weight: 700; color: var(--ink-900); }
.conv .ctime { font-size: 10.5px; color: var(--ink-400); }
.conv .cmsg { font-size: 12px; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv .cchan { font-size: 10.5px; color: var(--ink-400); display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; }
.conv .cchan::before { content:""; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); }
.conv .badge { width: 19px; height: 19px; border-radius: 50%; background: var(--green-600); color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; flex-shrink: 0; }

.autopanel {
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff, var(--green-50));
}
.autopanel .ah { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.autopanel .ah .ai { width: 30px; height: 30px; border-radius: 9px; background: var(--green-600); color: #fff; display: grid; place-items: center; }
.autopanel .ah b { font-size: 13.5px; color: var(--ink-900); display: block; }
.autopanel .ah span { font-size: 11px; color: var(--ink-500); }
.astep { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(3,152,85,.1); }
.astep .sic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; }
.astep .stxt { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--ink-800); }
.astep .bar { height: 5px; border-radius: 999px; background: var(--ink-200); overflow: hidden; margin-top: 5px; }
.astep .bar i { display: block; height: 100%; width: 0; background: var(--green-500); border-radius: 999px; transition: width 1s ease; }
.astep .chk { color: var(--green-600); opacity: 0; transform: scale(.6); transition: .35s; }
.astep.done .chk { opacity: 1; transform: scale(1); }
.astep.done .bar i { width: 100% !important; }
.aout { margin-top: 12px; background: var(--surface); border: 1px solid var(--green-100); border-radius: 12px; padding: 10px 12px; display: flex; align-items: center; gap: 9px; box-shadow: var(--shadow-sm); }
.aout .oi { width: 30px; height: 30px; border-radius: 8px; background: var(--green-600); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.aout b { font-size: 13px; color: var(--ink-900); display: block; } .aout span { font-size: 11px; color: var(--ink-500); }



/*   INSIGHT FEATURE LIST   */

.feat-list {
margin-top: 26px;
display: grid;
gap: 12px;
}

.feat-item {
display: flex;
gap: 14px;
padding: 15px 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--shadow-sm);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.feat-item:hover {
border-color: var(--green-200);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

.feat-item .fi {
width: 42px;
height: 42px;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--green-50);
color: var(--green-600);
}

.feat-item h4 {
color: var(--ink-900);
font-size: 15px;
font-weight: 700;
}

.feat-item p {
margin-top: 2px;
color: var(--ink-500);
font-size: 13.5px;
}

/*   FEATURE TABS   */

.feature-tabs-section {
position: relative;
overflow: hidden;
background:radial-gradient(circle at 10% 15%, rgba(18, 183, 106, 0.09), transparent 30%), radial-gradient(circle at 92% 82%, rgba(247, 144, 9, 0.07), transparent 26%);
}

.feature-tabs-section::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:radial-gradient(rgba(16, 24, 40, 0.07) 0.8px,transparent 0.8px);
background-size: 22px 22px;
opacity: 0.18;
}

.feature-tabs-section .wrap {
position: relative;
z-index: 1;
}

/* Main tab container */

.feature-tabs-shell {
display: grid;
grid-template-columns:300px minmax(0, 1fr);
min-height: 590px;
overflow: hidden;
border:1px solid rgba(16, 24, 40, 0.08);
border-radius: 28px;
background:rgba(255, 255, 255, 0.94);
box-shadow:0 28px 70px -34px rgba(16, 24, 40, 0.32);
backdrop-filter: blur(16px);
}

/* Left-side tab navigation */

.feature-tab-nav {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px;
background:linear-gradient(160deg, #0f382c 0%,#0b251e 54%,#071b16 100%);
}

.feature-tab-button {
width: 100%;
min-height: 92px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 22px;
align-items: center;
gap: 12px;
padding: 15px 14px;
border:1px solid transparent;
border-radius: 17px;
color:rgba(255, 255, 255, 0.7);
text-align: left;
transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-tab-button:hover {
color: #ffffff;
background:rgba(255, 255, 255, 0.075);
transform:translateX(3px);
}

.feature-tab-button.active {
color: var(--ink-900);
border-color: rgba(255, 255, 255, 0.75);
background: #ffffff;
box-shadow:0 18px 32px -20px rgba(0, 0, 0, 0.55);
transform: none;
}

/* Tab number */

.feature-tab-number {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border:1px solid rgba(255, 255, 255, 0.14);
border-radius: 13px;
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.9);
font-family:var(--font-display);
font-size: 13px;
font-weight: 800;
}

.feature-tab-button.active
.feature-tab-number {
border-color: var(--green-100);
background: var(--green-50);
color: var(--green-700);
}

/* Tab text */

.feature-tab-label {
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.25;
}

.feature-tab-label b {
font-size: 15px;
font-weight: 750;
}

.feature-tab-label small {
margin-top: 5px;
overflow: hidden;
color: currentColor;
font-size: 11px;
opacity: 0.68;
text-overflow: ellipsis;
white-space: nowrap;
}

.feature-tab-arrow {
display: grid;
place-items: center;
opacity: 0.35;
transition: transform 0.25s ease, opacity 0.25s ease;
}

.feature-tab-button.active
.feature-tab-arrow {
color: var(--green-600);
opacity: 1;
transform: translateX(3px);
}
/* MODERN VERTICAL AUTO-CHANGING FEATURE TABS */

.feature-tabs-shell {
--feature-tab-duration: 6200ms;
display: grid;
grid-template-columns: 275px minmax(0, 1fr);
align-items: start;
gap: 22px;
min-height: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
backdrop-filter: none;
}
.feature-tabs-shell.is-tab-hover-paused
.feature-tab-button.active.is-progressing
.feature-tab-progress i {
animation-play-state: paused;
}

/* SECTION HEADING ABOVE TABS  */

.feature-tabs-heading {
max-width: 780px;
margin: 0 auto 38px;
text-align: center;
}

.feature-tabs-heading h2 {
/* max-width: 780px; */
margin-inline: auto;
}

.feature-tabs-heading p {
max-width: 700px;
margin-inline: auto;
}

/*  LEFT-SIDE VERTICAL TAB NAVIGATION  */

.feature-tab-nav {
position: relative;
display: flex;
flex-direction: column;
gap: 9px;
width: 100%;
height: auto;
margin: 0;
padding: 11px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 21px;
background: radial-gradient(circle at 10% 5%, rgba(18, 183, 106, 0.09),transparent 34%), rgba(255, 255, 255, 0.94);
box-shadow: 0 22px 50px -36px rgba(16, 24, 40, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.95);
backdrop-filter: blur(16px);
}

/* Different accent for every tab */

.feature-tab-button:nth-child(1) {
--tab-accent: #12b76a;
--tab-accent-rgb: 18, 183, 106;
}

.feature-tab-button:nth-child(2) {
--tab-accent: #0ba88f;
--tab-accent-rgb: 11, 168, 143;
}

.feature-tab-button:nth-child(3) {
--tab-accent: #f79009;
--tab-accent-rgb: 247, 144, 9;
}

.feature-tab-button:nth-child(4) {
--tab-accent: #3b82f6;
--tab-accent-rgb: 59, 130, 246;
}

/* Individual tab */

.feature-tab-button {
position: relative;
width: 100%;
min-width: 0;
min-height: 74px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 22px;
align-items: center;
gap: 11px;
padding: 11px 12px 14px;
overflow: hidden;
border: 1px solid transparent;
border-radius: 15px;
background: transparent;
color: var(--ink-500);
text-align: left;
cursor: pointer;
transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-tab-button:hover {
color: var(--ink-800);
border-color: rgba(var(--tab-accent-rgb), 0.16);
background:rgba(var(--tab-accent-rgb), 0.045);
transform: translateX(3px);
}

.feature-tab-button.active {
color: var(--ink-900);
border-color: rgba(var(--tab-accent-rgb), 0.32);
background: linear-gradient(120deg, rgba(var(--tab-accent-rgb), 0.14), rgba(var(--tab-accent-rgb), 0.035));
box-shadow:0 15px 28px -22px rgba(var(--tab-accent-rgb), 0.95),inset 0 1px 0 rgba(255, 255, 255, 0.95);
transform: none;
}

/* Tab icon */

.feature-tab-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--ink-100);
color: var(--ink-400);
transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.feature-tab-button:hover .feature-tab-icon {
color: var(--tab-accent);
background: rgba(var(--tab-accent-rgb), 0.1);
}

.feature-tab-button.active .feature-tab-icon {
color: var(--tab-accent);
background: rgba(var(--tab-accent-rgb), 0.15);
box-shadow: 0 10px 20px -15px rgba(var(--tab-accent-rgb), 0.95);
transform: scale(1.04);
}

/* Number and label */

.feature-tab-label {
min-width: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.18;
}

.feature-tab-label small {
margin-bottom: 4px;
color: var(--ink-400);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.07em;
transition: color 0.3s ease;
}

.feature-tab-button.active .feature-tab-label small {
color: var(--tab-accent);
}

.feature-tab-label b {
max-width: 100%;
overflow: hidden;
color: currentColor;
font-size: 13px;
font-weight: 760;
text-overflow: ellipsis;
white-space: nowrap;
}

/* Arrow on right */

.feature-tab-button::after {
content: "→";
display: grid;
place-items: center;
width: 22px;
height: 22px;
color: var(--ink-300);
font-size: 16px;
font-weight: 800;
transition: color 0.3s ease, transform 0.3s ease;
}

.feature-tab-button.active::after {
color: var(--tab-accent);
transform: translateX(2px);
}

/* Bottom progress line */

.feature-tab-progress {
position: absolute;
right: 12px;
bottom: 5px;
left: 12px;
height: 3px;
overflow: hidden;
border-radius: 999px;
background: rgba(var(--tab-accent-rgb), 0.13);
opacity: 0;
transition: opacity 0.25s ease;
}

.feature-tab-button.active .feature-tab-progress {
opacity: 1;
}

.feature-tab-progress i {
display: block;
width: 100%;
height: 100%;
border-radius: inherit;
background: linear-gradient( 90deg, var(--tab-accent), rgba(var(--tab-accent-rgb), 0.55));
box-shadow: 0 0 10px rgba(var(--tab-accent-rgb), 0.4);
transform: scaleX(0);
transform-origin: left center;
}

.feature-tab-button.active.is-progressing
.feature-tab-progress i {
animation: featureTabProgress var(--feature-tab-duration) linear forwards;
}

@keyframes featureTabProgress {
from {
  transform: scaleX(0);
}

to {
  transform: scaleX(1);
}
}

/* Old unused tab elements */

.feature-tab-number,
.feature-tab-arrow {
display: none;
}

/* RIGHT-SIDE TAB CONTENT  */

.feature-tab-stage {
min-width: 0;
min-height: 0;

padding: 30px;

overflow: hidden;

border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 23px;

background:
  radial-gradient(
    circle at 94% 6%,
    rgba(18, 183, 106, 0.08),
    transparent 30%
  ),
  rgba(255, 255, 255, 0.94);

box-shadow:
  0 25px 60px -40px
  rgba(16, 24, 40, 0.46);

backdrop-filter: blur(15px);
}

.feature-panel-grid {
min-height: 0;

grid-template-columns:
  minmax(0, 1fr)
  minmax(315px, 0.88fr);

align-items: center;
gap: 30px;
}

.feature-tab-panel {
min-height: 0;
}

.feature-tab-panel[hidden] {
display: none;
}

.feature-tab-panel.tab-enter {
animation:
  featurePanelEnter
  0.48s
  cubic-bezier(0.22, 1, 0.36, 1)
  both;
}

@keyframes featurePanelEnter {
from {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(4px);
}

to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
}

/* Content adjustments to prevent unnecessary height */

.feature-panel-copy h3 {
font-size:
  clamp(28px, 3vw, 39px);
}

.feature-panel-copy > p {
margin-top: 14px;
}

.feature-point-list {
margin-top: 21px;
gap: 8px;
}

.feature-point-list li {
min-height: 48px;
padding: 10px;
}

.feature-demo {
min-height: 370px;
}

/* Right-side content */

.feature-tab-stage {
min-width: 0;

padding: 38px;
}

.feature-tab-panel[hidden] {
display: none;
}

.feature-tab-panel.tab-enter {
animation:
  featureTabIn
  0.5s
  cubic-bezier(0.22, 1, 0.36, 1)
  both;
}

@keyframes featureTabIn {
from {
  opacity: 0;

  transform:
    translateY(14px);

  filter:
    blur(4px);
}

to {
  opacity: 1;

  transform: none;

  filter:
    blur(0);
}
}

.feature-panel-grid {
display: grid;

grid-template-columns:
  minmax(0, 1fr)
  minmax(330px, 0.92fr);

align-items: center;

gap: 38px;

min-height: 510px;
}

/* Number and category */

.feature-panel-meta {
display: flex;
align-items: center;

gap: 10px;

margin-bottom: 18px;
}

.feature-panel-meta span,
.feature-panel-meta b {
min-height: 31px;

display: inline-flex;
align-items: center;
justify-content: center;

border-radius: 999px;

font-size: 12px;
font-weight: 800;

letter-spacing: 0.035em;

text-transform: uppercase;
}

.feature-panel-meta span {
min-width: 43px;

padding: 0 11px;

background:
  var(--ink-900);

color: #ffffff;
}

.feature-panel-meta b {
padding: 0 13px;

border:
  1px solid
  var(--green-100);

background:
  var(--green-50);

color:
  var(--green-700);
}

/* Main feature title */

.feature-panel-copy h3 {
max-width: 620px;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size:
  clamp(29px, 3.4vw, 42px);

font-weight: 800;

letter-spacing:
  -0.035em;

line-height: 1.08;

text-wrap: balance;
}

.feature-panel-copy > p {
max-width: 610px;

margin-top: 17px;

color:
  var(--ink-500);

font-size: 15.5px;

line-height: 1.75;

text-wrap: pretty;
}

/* Feature bullet list */

.feature-point-list {
display: grid;

grid-template-columns:
  repeat(
    2,
    minmax(0, 1fr)
  );

gap: 10px;

margin-top: 25px;
}

.feature-point-list li {
min-height: 52px;

display: flex;
align-items: flex-start;

gap: 10px;

padding: 12px;

border:
  1px solid
  var(--border);

border-radius: 13px;

background:
  var(--ink-50);
}

.feature-point-list li > span {
width: 25px;
height: 25px;

flex: 0 0 25px;

display: grid;
place-items: center;

border-radius: 8px;

background:
  var(--green-100);

color:
  var(--green-700);
}

.feature-point-list li b {
color:
  var(--ink-700);

font-size: 12.5px;
font-weight: 650;

line-height: 1.42;
}

/* Shared right-side demo */

.feature-demo {
position: relative;

min-height: 410px;

overflow: hidden;

border:
  1px solid
  rgba(18, 183, 106, 0.17);

border-radius: 23px;

background:
  radial-gradient(
    circle at 90% 10%,
    rgba(18, 183, 106, 0.16),
    transparent 30%
  ),
  linear-gradient(
    145deg,
    #f9fffc,
    #effaf5
  );

box-shadow:
  inset 0 1px 0
  rgba(255, 255, 255, 0.9),
  0 24px 48px -30px
  rgba(3, 152, 85, 0.45);
}

.feature-demo::after {
content: "";

position: absolute;

width: 210px;
height: 210px;

right: -85px;
bottom: -100px;

border-radius: 50%;

background:
  rgba(247, 144, 9, 0.09);
}

/* Demo header */

.feature-demo-head {
position: relative;
z-index: 2;

min-height: 62px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

padding: 0 18px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.07);

background:
  rgba(255, 255, 255, 0.76);

backdrop-filter:
  blur(10px);
}

.feature-demo-head >
div:not(.demo-head-icon) {
min-width: 0;

display: flex;
flex: 1;
flex-direction: column;
}

.feature-demo-head small {
color:
  var(--ink-400);

font-size: 9px;
}

.feature-demo-head b {
overflow: hidden;

color:
  var(--ink-900);

font-size: 13px;

text-overflow: ellipsis;
white-space: nowrap;
}

.demo-head-icon {
width: 34px;
height: 34px;

flex: 0 0 34px;

display: grid;
place-items: center;

border-radius: 10px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.demo-status {
padding: 5px 9px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.04em;

text-transform: uppercase;
}

/* Shared demo footer */

.demo-footer {
position: relative;
z-index: 2;

display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

margin:
  0 18px 18px;

padding: 12px 13px;

border:
  1px solid
  var(--green-100);

border-radius: 13px;

background:
  rgba(236, 253, 243, 0.9);
}

.demo-footer span {
display: flex;
align-items: center;

gap: 6px;

color:
  var(--green-700);

font-size: 10px;
font-weight: 800;
}

.demo-footer b {
color:
  var(--ink-700);

font-size: 10px;
}

.live-dot i {
width: 8px;
height: 8px;

border-radius: 50%;

background:
  var(--green-500);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.12);
}

/* Why us visual */

.workflow-list {
position: relative;
z-index: 2;

padding:
  24px 22px 17px;
}

.workflow-row {
display: grid;

grid-template-columns:
  38px
  minmax(0, 1fr)
  22px;

align-items: center;

gap: 11px;

padding: 12px;

border:
  1px solid
  var(--border);

border-radius: 14px;

background:
  rgba(255, 255, 255, 0.92);

box-shadow:
  var(--shadow-sm);
}

.workflow-row.active {
border-color:
  var(--green-200);
}

.workflow-row > span,
.flow-node > span,
.integration-grid >
div > span {
width: 38px;
height: 38px;

display: grid;
place-items: center;

border-radius: 11px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.workflow-row div,
.flow-node div {
min-width: 0;
}

.workflow-row b,
.flow-node b {
display: block;

overflow: hidden;

color:
  var(--ink-800);

font-size: 12px;

text-overflow: ellipsis;
white-space: nowrap;
}

.workflow-row small,
.flow-node small {
display: block;

margin-top: 2px;

color:
  var(--ink-400);

font-size: 10px;
}

.workflow-row > i {
width: 22px;
height: 22px;

display: grid;
place-items: center;

border-radius: 50%;

background:
  var(--green-100);

color:
  var(--green-700);
}

.workflow-list > u {
display: block;

width: 2px;
height: 15px;

margin-left: 30px;

background:
  var(--green-200);

text-decoration: none;
}

.workspace-stats {
position: relative;
z-index: 2;

display: grid;

grid-template-columns:
  repeat(3, 1fr);

gap: 8px;

padding:
  0 22px 22px;
}

.workspace-stats > div {
padding: 12px 9px;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 13px;

background:
  rgba(255, 255, 255, 0.82);

text-align: center;
}

.workspace-stats span {
width: 30px;
height: 30px;

display: grid;
place-items: center;

margin:
  0 auto 7px;

border-radius: 9px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.workspace-stats b,
.workspace-stats small {
display: block;
}

.workspace-stats b {
color:
  var(--ink-900);

font-size: 14px;
}

.workspace-stats small {
margin-top: 2px;

color:
  var(--ink-400);

font-size: 9px;
}

/* Campaign visual */

.demo-metrics {
position: relative;
z-index: 2;

display: grid;

grid-template-columns:
  repeat(3, 1fr);

gap: 8px;

padding:
  20px 18px 14px;
}

.demo-metrics > div {
padding: 12px;

border:
  1px solid
  var(--border);

border-radius: 13px;

background:
  rgba(255, 255, 255, 0.86);
}

.demo-metrics small,
.demo-metrics b,
.demo-metrics em {
display: block;
}

.demo-metrics small {
color:
  var(--ink-400);

font-size: 9px;
}

.demo-metrics b {
margin-top: 3px;

color:
  var(--ink-900);

font-size: 15px;
}

.demo-metrics em {
margin-top: 2px;

color:
  var(--green-600);

font-size: 9px;
font-style: normal;
font-weight: 800;
}

.demo-progress-list {
position: relative;
z-index: 2;

display: grid;

gap: 12px;

padding:
  7px 20px 18px;
}

.demo-progress-list >
div > span {
display: flex;
justify-content: space-between;

margin-bottom: 6px;

color:
  var(--ink-600);

font-size: 10px;
}

.demo-progress-list em {
font-style: normal;
font-weight: 800;
}

.demo-progress-list i {
display: block;

height: 8px;

overflow: hidden;

border-radius: 999px;

background:
  var(--ink-100);
}

.demo-progress-list u {
display: block;

width:
  var(--progress);

height: 100%;

border-radius: inherit;

background:
  linear-gradient(
    90deg,
    var(--green-500),
    var(--green-400)
  );

text-decoration: none;

transform-origin: left;

animation:
  demoBar
  0.8s
  ease
  both;
}

@keyframes demoBar {
from {
  transform:
    scaleX(0);
}

to {
  transform:
    scaleX(1);
}
}

/* Automation visual */

.flow-canvas {
position: relative;
z-index: 2;

min-height: 285px;

padding:
  24px 22px;
}

.flow-node {
position: relative;
z-index: 2;

width: 80%;

display: grid;

grid-template-columns:
  38px
  minmax(0, 1fr);

align-items: center;

gap: 10px;

margin: 0 auto;

padding: 11px;

border:
  1px solid
  var(--border);

border-radius: 14px;

background:
  rgba(255, 255, 255, 0.95);

box-shadow:
  var(--shadow-sm);
}

.flow-node.blue {
border-color:
  #bfdbfe;
}

.flow-node.blue > span {
background:
  #eff6ff;

color:
  #3b82f6;
}

.flow-node.amber > span {
background:
  var(--amber-100);

color:
  var(--amber-600);
}

.flow-link {
display: block;

width: 2px;
height: 25px;

margin: 0 auto;

background:
  var(--green-200);
}

.flow-link.split {
height: 35px;
}

.flow-link.split::before,
.flow-link.split::after {
content: "";

position: absolute;

width: 76px;
height: 2px;

margin-top: 33px;

background:
  var(--green-200);
}

.flow-link.split::before {
transform:
  translateX(-76px);
}

.flow-branches {
display: grid;

grid-template-columns:
  1fr 1fr;

gap: 10px;

margin-top: 4px;
}

.flow-branches .flow-node {
width: 100%;
}

/* AI and integrations visual */

.demo-chat {
position: relative;
z-index: 2;

display: grid;

gap: 10px;

padding:
  23px 19px 17px;
}

.demo-chat p {
max-width: 88%;

padding: 11px 12px;

border-radius: 14px;

font-size: 10px;

line-height: 1.5;
}

.customer-message {
justify-self: end;

border-bottom-right-radius:
  5px !important;

background:
  var(--green-600);

color: #ffffff;
}

.ai-message {
display: flex;
align-items: flex-start;

gap: 8px;

border:
  1px solid
  var(--border);

border-bottom-left-radius:
  5px !important;

background:
  rgba(255, 255, 255, 0.92);

color:
  var(--ink-600);
}

.ai-message > span {
width: 27px;
height: 27px;

flex: 0 0 27px;

display: grid;
place-items: center;

border-radius: 8px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.integration-grid {
position: relative;
z-index: 2;

display: grid;

grid-template-columns:
  repeat(2, 1fr);

gap: 9px;

padding:
  0 19px 19px;
}

.integration-grid > div {
display: grid;

grid-template-columns:
  34px
  minmax(0, 1fr);

column-gap: 9px;

align-items: center;

padding: 11px;

border:
  1px solid
  var(--border);

border-radius: 13px;

background:
  rgba(255, 255, 255, 0.88);
}

.integration-grid >
div > span {
grid-row: 1 / 3;

width: 34px;
height: 34px;

border-radius: 10px;
}

.integration-grid b,
.integration-grid small {
overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.integration-grid b {
color:
  var(--ink-800);

font-size: 10px;
}

.integration-grid small {
color:
  var(--ink-400);

font-size: 9px;
}

/*  FEATURE TABS — SCROLL JUMP PROTECTION   */

.feature-tabs-section,
.feature-tabs-shell,
.feature-tab-stage {
overflow-anchor: none;
}

.feature-tab-nav {
overscroll-behavior:
  contain;

scroll-behavior:
  smooth;
}

/*   CAMPAIGN ANALYTICS — FINAL CLEAN CANVAS VERSION  */

.ca-section {
position: relative;
isolation: isolate;
overflow: visible;

background:
  radial-gradient(
    circle at 5% 15%,
    rgba(18, 183, 106, 0.09),
    transparent 28%
  ),
  radial-gradient(
    circle at 95% 82%,
    rgba(59, 130, 246, 0.06),
    transparent 27%
  ),
  #f8faf9;
}

.ca-section::before {
content: "";

position: absolute;
inset: 0;
z-index: -1;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.06) 0.7px,
    transparent 0.7px
  );

background-size: 24px 24px;
opacity: 0.13;
}

.ca-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 1220px;
}

/*  SECTION HEADING */

.ca-heading {
max-width: 780px;
margin: 0 auto 42px;
text-align: center;
}

.ca-heading .eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
}

.ca-heading h2 {
max-width: 780px;
margin-inline: auto;
}

.ca-heading p {
max-width: 680px;
margin-inline: auto;
}

/*  MAIN LAYOUT  */

.ca-layout {
display: grid;
grid-template-columns: 310px minmax(0, 1fr);
align-items: start;
gap: 28px;
width: 100%;
}

/*  LEFT INTRO CONTENT  */

.ca-intro {
position: sticky;
top: 105px;
align-self: start;
min-width: 0;
}

.ca-intro-badge {
display: grid;
grid-template-columns:40px minmax(0, 1fr) 8px;
align-items: center;
gap: 10px;
width: 100%;
padding: 11px;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 16px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 42px -34px rgba(16, 24, 40, 0.55);
-webkit-backdrop-filter: blur(13px);
backdrop-filter: blur(13px);
}

.ca-intro-badge > span {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 12px;
background:
  linear-gradient(
    145deg,
    var(--green-50),
    var(--green-100)
  );

color:
  var(--green-700);
}

.ca-intro-badge > div {
min-width: 0;
}

.ca-intro-badge small {
display: block;

color:
  var(--ink-400);

font-size: 9px;
font-weight: 750;

letter-spacing: 0.065em;
text-transform: uppercase;
}

.ca-intro-badge b {
display: block;

overflow: hidden;

margin-top: 4px;

color:
  var(--ink-800);

font-size: 11px;
font-weight: 760;

line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}

.ca-intro-badge > i {
width: 8px;
height: 8px;

border-radius: 50%;

background:
  var(--green-500);

box-shadow:
  0 0 0 5px
  rgba(18, 183, 106, 0.12);

animation:
  caLivePulse 1.8s ease
  infinite;
}

@keyframes caLivePulse {
50% {
  box-shadow:
    0 0 0 9px
    rgba(18, 183, 106, 0);
}
}

.ca-intro > h3 {
margin: 23px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(24px, 2.5vw, 27px);
line-height: 1.08;
letter-spacing: -0.04em;
}

.ca-intro > p {
margin-top: 14px;
color: var(--ink-500);
font-size: 13.5px;
line-height: 1.7;
}

.ca-benefit-list {
display: grid;
gap: 9px;
margin-top: 23px;
}

.ca-benefit-list article {
display: grid;
grid-template-columns:  40px minmax(0, 1fr);
align-items: start;
gap: 11px;
min-width: 0;
padding: 12px;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 14px;
background: rgba(255, 255, 255, 0.84);
box-shadow: 0 15px 30px -29px rgba(16, 24, 40, 0.48);
}

.ca-benefit-list article > span {
width: 40px;
height: 40px;
display: grid;
place-items: center;
border-radius: 11px;
background: var(--green-50);
color: var(--green-700);
}

.ca-benefit-list article > span.blue {
background: #eff6ff;
color: #3b82f6;
}

.ca-benefit-list article > span.amber {
background: #fff7e8;
color: #f79009;
}

.ca-benefit-list article > div {
min-width: 0;
}

.ca-benefit-list b {
display: block;
color: var(--ink-800);
font-size: 13px;
font-weight: 750;

line-height: 1.35;
}

.ca-benefit-list p {
margin-top: 4px;
color: var(--ink-400);
font-size: 12px;
line-height: 1.5;
}

.ca-sync-note {
display: grid;

grid-template-columns:
  32px
  minmax(0, 1fr);

align-items: center;
gap: 9px;

margin-top: 17px;
padding: 10px;

border:
  1px dashed
  rgba(18, 183, 106, 0.27);

border-radius: 13px;

background:
  rgba(236, 253, 243, 0.55);
}

.ca-sync-note > span {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--green-100);
color: var(--green-700);
}

.ca-sync-note p {
color: var(--ink-500);
font-size: 11px;
line-height: 1.45;
}

/*   DASHBOARD CONTAINER */

.ca-dashboard {
min-width: 0;
width: 100%;
padding: 22px;
overflow: visible;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 26px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 36px 78px -50px rgba(16, 24, 40, 0.58);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
}

.ca-dashboard-head {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 20px;

padding-bottom: 18px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.07);
}

.ca-dashboard-head > div:first-child {
min-width: 0;
}

.ca-live-row {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 8px;
}

.ca-live-status {
display: inline-flex;
align-items: center;

gap: 6px;

min-height: 24px;
padding: 0 9px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.ca-live-status i {
width: 6px;
height: 6px;

border-radius: 50%;

background:
  var(--green-500);
}

.ca-live-row > small {
color:
  var(--ink-400);

font-size: 9px;
font-weight: 650;
}

.ca-dashboard-head h3 {
margin-top: 10px;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size: 21px;
font-weight: 800;

line-height: 1.2;
letter-spacing: -0.035em;
}

.ca-dashboard-head p {
margin-top: 4px;

color:
  var(--ink-400);

font-size: 10px;
line-height: 1.5;
}

/*  PERIOD BUTTONS  */

.ca-period-tabs {
display: inline-flex;
flex: 0 0 auto;

padding: 4px;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 12px;

background:
  var(--ink-50);
}

.ca-period-tabs button {
min-width: 44px;
height: 32px;

padding: 0 10px;

border: 0;
border-radius: 9px;

background: transparent;

color:
  var(--ink-400);

font-family: inherit;
font-size: 10px;
font-weight: 750;

cursor: pointer;

transition:
  color 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease,
  transform 0.25s ease;
}

.ca-period-tabs button:hover {
color:
  var(--ink-700);
}

.ca-period-tabs button.active {
background: #ffffff;

color:
  var(--green-700);

box-shadow:
  0 9px 20px -15px
  rgba(16, 24, 40, 0.72);
}

.ca-period-tabs button:focus-visible {
outline:
  3px solid
  rgba(18, 183, 106, 0.2);

outline-offset: 2px;
}

/*  KPI CARDS  */

.ca-kpi-grid {
display: grid;

grid-template-columns:
  repeat(4, minmax(0, 1fr));

gap: 10px;

margin-top: 17px;
}

.ca-kpi-card {
min-width: 0;
padding: 13px;

border:
  1px solid
  rgba(18, 183, 106, 0.13);

border-radius: 15px;

background:
  linear-gradient(
    145deg,
    #ffffff,
    rgba(236, 253, 243, 0.4)
  );

transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

.ca-kpi-card:hover {
transform:
  translateY(-2px);

border-color:
  rgba(18, 183, 106, 0.26);

box-shadow:
  0 17px 34px -27px
  rgba(16, 24, 40, 0.45);
}

.ca-kpi-card.blue {
border-color:
  rgba(59, 130, 246, 0.14);

background:
  linear-gradient(
    145deg,
    #ffffff,
    rgba(239, 246, 255, 0.55)
  );
}

.ca-kpi-card.amber {
border-color:
  rgba(247, 144, 9, 0.15);

background:
  linear-gradient(
    145deg,
    #ffffff,
    rgba(255, 247, 232, 0.58)
  );
}

.ca-kpi-card.purple {
border-color:
  rgba(139, 92, 246, 0.14);

background:
  linear-gradient(
    145deg,
    #ffffff,
    rgba(245, 243, 255, 0.58)
  );
}

.ca-kpi-top {
display: flex;
align-items: center;

gap: 7px;
}

.ca-kpi-top > span {
width: 28px;
height: 28px;

flex: 0 0 28px;

display: grid;
place-items: center;

border-radius: 8px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.ca-kpi-card.blue .ca-kpi-top > span {
background: #eff6ff;
color: #3b82f6;
}

.ca-kpi-card.amber .ca-kpi-top > span {
background: #fff7e8;
color: #f79009;
}

.ca-kpi-card.purple .ca-kpi-top > span {
background: #f5f3ff;
color: #8b5cf6;
}

.ca-kpi-top small {
overflow: hidden;

color:
  var(--ink-400);

font-size: 9px;
font-weight: 700;

text-overflow: ellipsis;
white-space: nowrap;
}

.ca-kpi-card strong {
display: block;

margin-top: 12px;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size: 23px;
font-weight: 800;

line-height: 1;
letter-spacing: -0.04em;
}

.ca-kpi-card em {
display: block;

margin-top: 8px;

color:
  var(--ink-400);

font-size: 9px;
font-style: normal;
line-height: 1.4;
}

.ca-kpi-card em span {
margin-right: 3px;

color:
  var(--green-700);

font-weight: 800;
}

/*  CHART + OUTCOME LAYOUT */

.ca-main-grid {
display: grid;

grid-template-columns:
  minmax(0, 1fr)
  225px;

align-items: stretch;
gap: 11px;

margin-top: 11px;
}

.ca-chart-card,
.ca-outcome-card,
.ca-recent-card {
min-width: 0;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 18px;

background:
  rgba(250, 252, 251, 0.9);
}

.ca-chart-card,
.ca-outcome-card {
padding: 16px;
}

.ca-card-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 14px;
}

.ca-card-heading > div:first-child {
min-width: 0;
}

.ca-card-heading h4 {
color:
  var(--ink-800);

font-size: 12px;
font-weight: 750;
}

.ca-card-heading p {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
line-height: 1.45;
}

/* CHART LEGEND */

.ca-chart-legend {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;

gap: 9px;
}

.ca-chart-legend span {
display: inline-flex;
align-items: center;

gap: 5px;

color:
  var(--ink-400);

font-size: 9px;
font-weight: 650;

white-space: nowrap;
}

.ca-chart-legend i,
.ca-chart-tooltip i {
width: 8px;
height: 8px;

flex: 0 0 8px;

border-radius: 3px;
}

.ca-chart-legend i.delivery,
.ca-chart-tooltip i.delivery {
background: #12b76a;
}

.ca-chart-legend i.read,
.ca-chart-tooltip i.read {
background: #3b82f6;
}

.ca-chart-legend i.reply,
.ca-chart-tooltip i.reply {
background: #f79009;
}

/*  CANVAS */

.ca-canvas-wrap {
position: relative;

width: 100%;
height: 300px;

margin-top: 10px;

overflow: visible;
}

#campaignCanvas {
display: block;

width: 100%;
height: 100%;

border: 0;

cursor: crosshair;
touch-action: pan-y;
}

/*  CHART TOOLTIP */

.ca-chart-tooltip {
position: absolute;
top: 12px;
z-index: 20;

min-width: 135px;

padding: 10px;

border:
  1px solid
  rgba(16, 24, 40, 0.09);

border-radius: 11px;

background:
  rgba(255, 255, 255, 0.97);

box-shadow:
  0 16px 34px -21px
  rgba(16, 24, 40, 0.58);

opacity: 0;
visibility: hidden;

pointer-events: none;

transform:
  translateX(-50%)
  translateY(-5px);

transition:
  opacity 0.18s ease,
  visibility 0.18s ease,
  transform 0.18s ease;
}

.ca-chart-tooltip.show {
opacity: 1;
visibility: visible;

transform:
  translateX(-50%)
  translateY(0);
}

.ca-chart-tooltip > b {
display: block;

margin-bottom: 7px;

color:
  var(--ink-800);

font-size: 10px;
font-weight: 800;
}

.ca-chart-tooltip > span {
display: grid;

grid-template-columns:
  8px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 6px;

margin-top: 5px;

color:
  var(--ink-400);

font-size: 9px;
}

.ca-chart-tooltip strong {
color:
  var(--ink-700);

font-size: 9px;
font-weight: 750;
}

/*  DONUT */

.ca-donut-wrap {
display: grid;
place-items: center;

margin-top: 20px;
}

.ca-donut {
position: relative;

width: 128px;
height: 128px;

display: grid;
place-items: center;

border-radius: 50%;

background:
  conic-gradient(
    #12b76a 0deg 140.4deg,
    #3b82f6 140.4deg 298.8deg,
    #f79009 298.8deg 360deg
  );

box-shadow:
  0 20px 38px -27px
  rgba(16, 24, 40, 0.5);

transition:
  background 0.35s ease,
  transform 0.3s ease;
}

.ca-donut:hover {
transform:
  scale(1.025);
}

.ca-donut::before {
content: "";

position: absolute;

width: 78px;
height: 78px;

border-radius: 50%;

background: #ffffff;

box-shadow:
  inset 0 0 0 1px
  rgba(16, 24, 40, 0.045);
}

.ca-donut > div {
position: relative;
z-index: 1;

display: flex;
flex-direction: column;
align-items: center;
}

.ca-donut strong {
color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size: 20px;
font-weight: 800;

line-height: 1;
}

.ca-donut small {
margin-top: 4px;

color:
  var(--ink-400);

font-size: 9px;
font-weight: 650;
}

/*  OUTCOME LIST  */

.ca-outcome-list {
display: grid;
gap: 9px;

margin-top: 19px;
}

.ca-outcome-list > div {
display: grid;

grid-template-columns:
  8px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 8px;
}

.ca-outcome-list > div > span {
width: 8px;
height: 8px;

border-radius: 3px;
}

.ca-outcome-list span.converted {
background: #12b76a;
}

.ca-outcome-list span.engaged {
background: #3b82f6;
}

.ca-outcome-list span.pending {
background: #f79009;
}

.ca-outcome-list p {
color:
  var(--ink-500);

font-size: 9px;
}

.ca-outcome-list b {
color:
  var(--ink-800);

font-size: 9px;
font-weight: 750;
}

/*  BEST TIME BOX */

.ca-best-time {
display: grid;

grid-template-columns:
  34px
  minmax(0, 1fr);

align-items: center;
gap: 9px;

margin-top: 17px;
padding: 9px;

border:
  1px solid
  rgba(247, 144, 9, 0.15);

border-radius: 12px;

background:
  rgba(255, 247, 232, 0.74);
}

.ca-best-time > span {
width: 34px;
height: 34px;

display: grid;
place-items: center;

border-radius: 10px;

background: #fff1d6;
color: #f79009;
}

.ca-best-time small {
display: block;

color:
  var(--ink-400);

font-size: 9px;
}

.ca-best-time b {
display: block;

margin-top: 3px;

color:
  var(--ink-700);

font-size: 9px;
font-weight: 750;

line-height: 1.35;
}

/*  RECENT CAMPAIGNS  */

.ca-recent-card {
margin-top: 11px;
padding: 16px;
}

.ca-recent-head {
display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

padding-bottom: 12px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.06);
}

.ca-recent-head h4 {
color:
  var(--ink-800);

font-size: 12px;
font-weight: 750;
}

.ca-recent-head p {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

.ca-recent-head a {
display: inline-flex;
align-items: center;

gap: 5px;

color:
  var(--green-700);

font-size: 9px;
font-weight: 750;

text-decoration: none;
white-space: nowrap;
}

.ca-recent-head a:hover {
color:
  var(--green-600);
}

.ca-campaign-list {
display: grid;
}

.ca-campaign-list article {
display: grid;

grid-template-columns:
  36px
  minmax(140px, 1fr)
  minmax(70px, auto)
  minmax(65px, auto)
  auto;

align-items: center;
gap: 10px;

min-width: 0;
padding: 10px 0;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.055);
}

.ca-campaign-list article:last-child {
padding-bottom: 0;
border-bottom: 0;
}

.ca-campaign-icon {
width: 36px;
height: 36px;

display: grid;
place-items: center;

border-radius: 10px;
}

.ca-campaign-icon.green {
background: var(--green-50);
color: var(--green-700);
}

.ca-campaign-icon.blue {
background: #eff6ff;
color: #3b82f6;
}

.ca-campaign-icon.amber {
background: #fff7e8;
color: #f79009;
}

.ca-campaign-name {
min-width: 0;
}

.ca-campaign-name b {
display: block;

overflow: hidden;

color:
  var(--ink-800);

font-size: 10px;
font-weight: 750;

text-overflow: ellipsis;
white-space: nowrap;
}

.ca-campaign-name small,
.ca-campaign-stat small {
display: block;

margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

.ca-campaign-stat b {
display: block;

color:
  var(--ink-700);

font-size: 9px;
font-weight: 750;
}

.ca-campaign-status {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 24px;
padding: 0 8px;

border-radius: 8px;

font-size: 9px;
font-weight: 800;

white-space: nowrap;
}

.ca-campaign-status.active {
background: var(--green-50);
color: var(--green-700);
}

.ca-campaign-status.completed {
background: #eff6ff;
color: #2563eb;
}

.ca-campaign-status.scheduled {
background: #fff7e8;
color: #d97706;
}

/* TESTIMONIALS CAROUSEL */

.testimonials-section {
position: relative;
overflow: hidden;

background:
  radial-gradient(
    circle at 8% 20%,
    rgba(18, 183, 106, 0.08),
    transparent 28%
  ),
  radial-gradient(
    circle at 92% 75%,
    rgba(59, 130, 246, 0.055),
    transparent 25%
  );
}

.testimonials-section::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.06) 0.7px,
    transparent 0.7px
  );

background-size: 23px 23px;
opacity: 0.16;
}

.testimonials-wrap {
position: relative;
z-index: 1;

max-width: 1180px;
}

/* HEADING AND CONTROLS */

.testimonials-header {
display: grid;

grid-template-columns:
  minmax(0, 1fr)
  auto;

align-items: end;
gap: 40px;

margin-bottom: 35px;
}

.testimonials-heading {
max-width: 720px;
margin: 0;

text-align: left;
}


.testimonials-heading p {
max-width: 650px;
}

.testimonials-meta {
display: flex;
flex-direction: column;
align-items: flex-end;

gap: 15px;
}

/* Customer rating */

.testimonials-rating {
display: flex;
align-items: center;

gap: 13px;

padding: 11px 14px;

border:
  1px solid
  rgba(16, 24, 40, 0.08);

border-radius: 15px;

background:
  rgba(255, 255, 255, 0.86);

box-shadow:
  0 15px 32px -26px
  rgba(16, 24, 40, 0.5);

backdrop-filter: blur(12px);
}

.testimonials-rating > strong {
color: var(--ink-900);

font-family: var(--font-display);
font-size: 29px;
font-weight: 800;

letter-spacing: -0.045em;
line-height: 1;
}

.testimonials-rating > div {
display: flex;
flex-direction: column;
}

.testimonials-rating .stars {
color: var(--amber-400);

font-size: 13px;
letter-spacing: 2px;
}

.testimonials-rating small {
margin-top: 2px;

color: var(--ink-400);

font-size: 10px;
font-weight: 600;
}

/* Navigation */

.tst-nav {
display: flex;
align-items: center;

gap: 9px;
margin: 0;
}

.tst-nav-label {
padding-inline: 5px;

color: var(--ink-400);

font-size: 11px;
font-weight: 650;
}

.tst-nav button {
width: 42px;
height: 42px;

display: grid;
place-items: center;

border:
  1px solid
  rgba(16, 24, 40, 0.1);

border-radius: 12px;

background:
  rgba(255, 255, 255, 0.9);

color: var(--ink-700);

box-shadow:
  0 12px 25px -20px
  rgba(16, 24, 40, 0.7);

cursor: pointer;

transition:
  color 0.25s ease,
  background 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease,
  transform 0.25s ease;
}

.tst-nav button:hover {
border-color: var(--green-600);

background: var(--green-600);
color: #ffffff;

box-shadow:
  0 14px 25px -18px
  rgba(3, 152, 85, 0.8);

transform: translateY(-2px);
}

.tst-nav button:active {
transform: translateY(0);
}

/* CAROUSEL CONTAINER  */

.tst-carousel-shell {
position: relative;

width: 100%;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.075);

border-radius: 25px;

background:
  rgba(255, 255, 255, 0.58);

box-shadow:
  0 26px 60px -42px
  rgba(16, 24, 40, 0.5);

backdrop-filter: blur(15px);
}

.tst-carousel-shell::before,
.tst-carousel-shell::after {
content: "";

position: absolute;
z-index: 3;

top: 0;
bottom: 0;

width: 45px;

pointer-events: none;
}

.tst-carousel-shell::before {
left: 0;

background:
  linear-gradient(
    90deg,
    rgba(247, 250, 249, 0.96),
    transparent
  );
}

.tst-carousel-shell::after {
right: 0;

background:
  linear-gradient(
    -90deg,
    rgba(247, 250, 249, 0.96),
    transparent
  );
}

.tst-viewport {
width: 100%;

overflow: hidden;

padding: 22px 24px;

cursor: grab;

-webkit-user-select: none;
user-select: none;

touch-action: pan-y;
}

.tst-viewport.dragging {
cursor: grabbing;
}

.tst-track {
display: flex;
align-items: stretch;

gap: 18px;

width: max-content;

will-change: transform;
}

/*  TESTIMONIAL CARD  */

.tst-card {
position: relative;

width: 500px;
min-height: 300px;

flex: 0 0 500px;

display: flex;
flex-direction: column;

padding: 25px;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.085);

border-radius: 19px;

background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(250, 253, 252, 0.95)
  );

box-shadow:
  0 20px 40px -32px
  rgba(16, 24, 40, 0.56);

transition:
  border-color 0.3s ease,
  box-shadow 0.3s ease,
  transform 0.3s ease;
}

.tst-card::before {
content: "";

position: absolute;

width: 145px;
height: 145px;

top: -85px;
right: -65px;

border-radius: 50%;

background:
  rgba(18, 183, 106, 0.075);

pointer-events: none;
}

.tst-card:hover {
border-color:
  rgba(18, 183, 106, 0.25);

box-shadow:
  0 25px 48px -31px
  rgba(3, 152, 85, 0.35);

transform: translateY(-3px);
}

/* Card top row */

.tst-card-top {
position: relative;
z-index: 1;

display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;
}

.tst-verified {
display: none;
align-items: center;

gap: 7px;

color: var(--green-700);

font-size: 10px;
font-weight: 750;
}

/* .tst-card-top .stars { display: none; } */

.tst-verified i {
width: 23px;
height: 23px;

display: grid;
place-items: center;

border-radius: 8px;

background: var(--green-50);
color: var(--green-700);

font-style: normal;
}

.tst-card .stars {
color: var(--amber-400);

font-size: 13px;
letter-spacing: 2px;

white-space: nowrap;
}

/* Quote */

.tst-quote-mark {
position: relative;
z-index: 1;

height: 37px;

margin-top: 22px;

color: var(--green-200);

font-family: Georgia, serif;
font-size: 65px;
font-weight: 700;

line-height: 0.82;
}

.tst-card blockquote {
position: relative;
z-index: 1;

flex: 1;

margin: 6px 0 22px;

color: var(--ink-700);

font-size: 15px;
font-weight: 500;

line-height: 1.7;

text-wrap: pretty;
}

.tst-divider {
position: relative;
z-index: 1;

width: 100%;
height: 1px;

margin-bottom: 18px;

background:
  linear-gradient(
    90deg,
    var(--border),
    transparent
  );
}

/* Customer details */

.tst-card .who {
position: relative;
z-index: 1;

display: grid;

grid-template-columns:
  46px
  minmax(0, 1fr)
  34px;

align-items: center;

gap: 12px;
}

.tst-card .who .ava {
width: 46px;
height: 46px;

display: grid;
place-items: center;

border:
  3px solid
  rgba(255, 255, 255, 0.88);

border-radius: 14px;

background:
  var(--avatar-color);

color: #ffffff;

box-shadow:
  0 11px 20px -15px
  var(--avatar-color);

font-size: 13px;
font-weight: 800;

letter-spacing: 0.02em;
}

.tst-person {
min-width: 0;
}

.tst-person b {
display: block;

overflow: hidden;

color: var(--ink-900);

font-size: 13.5px;
font-weight: 750;

text-overflow: ellipsis;
white-space: nowrap;
}

.tst-person span {
display: block;

overflow: hidden;

margin-top: 3px;

color: var(--ink-400);

font-size: 11px;

text-overflow: ellipsis;
white-space: nowrap;
}



.wmprice-component,
.wmprice-component *,
.wmprice-component *::before,
.wmprice-component *::after {
box-sizing: border-box;
}

.wmprice-component {
width: 100%;
min-width: 0;
}

.wmprice-section {
position: relative;
width: 100%;
padding: 92px 0;
overflow: hidden;

background:
  radial-gradient(
    circle at 7% 8%,
    rgba(18, 183, 106, 0.1),
    transparent 25%
  ),
  radial-gradient(
    circle at 94% 55%,
    rgba(50, 213, 131, 0.07),
    transparent 24%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    var(--ink-50) 100%
  );
}

.wmprice-section::before {
content: "";
position: absolute;
inset: 0;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.06) 0.7px,
    transparent 0.7px
  );

background-size: 22px 22px;
opacity: 0.15;
}

.wmprice-wrap {
position: relative;
z-index: 1;
}

.wmprice-section h2,
.wmprice-section h3,
.wmprice-section p,
.wmprice-section ul {
margin: 0;
}

.wmprice-section ul {
padding: 0;
list-style: none;
}

.wmprice-section a {
text-decoration: none;
}


.wmprice-radio {
position: fixed;

top: 50%;
left: 50%;

width: 1px;
height: 1px;

margin: 0;
padding: 0;

overflow: hidden;

border: 0;

opacity: 0;
pointer-events: none;

clip: rect(0, 0, 0, 0);
clip-path: inset(50%);

transform: translate(-50%, -50%);

white-space: nowrap;
}

.wmprice-yearly-only {
display: none !important;
}

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-monthly-only {
display: none !important;
}

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-yearly-only {
display: block !important;
}

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-price.wmprice-yearly-only,

.wmprice-radio--yearly:checked
~ .wmprice-wrap
a.wmprice-yearly-only,

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-cycle-message
.wmprice-yearly-only {
display: flex !important;
}

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-discount-badge.wmprice-yearly-only {
display: inline-flex !important;
}


.wmprice-feature-toggle,
.wmprice-feature-extra,
.wmprice-feature-toggle-button,
.wmprice-feature-more-text,
.wmprice-feature-less-text,
.wmprice-yearly-meta,
.wmprice-billing-note,
.wmprice-details,
.wmprice-highlights {
display: none !important;
}


.wmprice-heading {
width: 100%;
max-width: 780px;

margin: 0 auto 42px;

text-align: center;
}

.wmprice-eyebrow {
min-height: 32px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 0 13px;

border: 1px solid var(--green-100);
border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 11px;
font-weight: 800;

letter-spacing: 0.08em;
text-transform: uppercase;
}

.wmprice-eyebrow i {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.12);
}

.wmprice-heading h2 {
max-width: 760px;
margin: 8px auto !important;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(38px, 4.6vw, 41px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -0.048em;
}

.wmprice-heading h2 span {
color: var(--green-600);
}

.wmprice-heading p {
max-width: 650px;

margin: 17px auto 0;

color: var(--ink-500);

font-size: 16px;
line-height: 1.7;

text-wrap: pretty;
}

.wmprice-free {
position: relative;

display: grid;

grid-template-columns:
  minmax(300px, 0.8fr)
  minmax(0, 1.2fr);

min-width: 0;

overflow: hidden;

border: 1px solid var(--green-200);
border-radius: 26px;

background: var(--surface);

box-shadow:
  0 32px 70px -52px
  rgba(3, 152, 85, 0.68);
}

.wmprice-free-copy {
position: relative;

min-width: 0;

display: flex;
align-items: flex-start;
flex-direction: column;

padding: 32px;

overflow: hidden;

background:
  radial-gradient(
    circle at 100% 0%,
    rgba(166, 244, 197, 0.25),
    transparent 36%
  ),
  linear-gradient(
    145deg,
    var(--green-700),
    var(--green-600)
  );

color: #ffffff;
}

.wmprice-free-copy::before,
.wmprice-free-copy::after {
content: "";

position: absolute;

border:
  1px solid
  rgba(255, 255, 255, 0.14);

border-radius: 50%;

pointer-events: none;
}

.wmprice-free-copy::before {
right: -95px;
bottom: -130px;

width: 290px;
height: 290px;
}

.wmprice-free-copy::after {
right: 58px;
bottom: -110px;

width: 195px;
height: 195px;
}

.wmprice-free-copy > * {
position: relative;
z-index: 1;
}

.wmprice-free-badge {
min-height: 29px;

display: inline-flex;
align-items: center;

padding: 0 11px;

border:
  1px solid
  rgba(255, 255, 255, 0.25);

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.11);

color: #ffffff;

font-size: 10px;
font-weight: 800;

letter-spacing: 0.07em;
text-transform: uppercase;
}

.wmprice-free-title {
display: block;

width: 100%;
margin-top: 23px;
}

.wmprice-free-title > div {
width: 100%;
}

.wmprice-free-title h3 {
max-width: 400px;

color: #ffffff;

font-family: var(--font-display);
font-size: 29px;
font-weight: 800;

line-height: 1.14;
letter-spacing: -0.035em;
}

.wmprice-free-title p {
max-width: 420px;

margin-top: 8px;

color:
  rgba(255, 255, 255, 0.76);

font-size: 14px;
line-height: 1.62;
}

.wmprice-free-price {
display: flex;
align-items: baseline;

gap: 7px;

margin-top: 25px;
}

.wmprice-free-price strong {
color: #ffffff;

font-family: var(--font-display);
font-size: 49px;
font-weight: 850;

line-height: 1;
letter-spacing: -0.055em;
}

.wmprice-free-price span {
color:
  rgba(255, 255, 255, 0.68);

font-size: 13px;
}

.wmprice-free-cta {
min-height: 48px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 9px;

margin-top: 22px;
padding: 0 19px;

border-radius: 12px;

background: #ffffff;
color: var(--green-700);

font-size: 14px;
font-weight: 800;

box-shadow:
  0 20px 36px -24px
  rgba(16, 24, 40, 0.64);

transition:
  transform 0.2s ease,
  box-shadow 0.2s ease;
}

.wmprice-free-cta:hover {
color: var(--green-700);

transform: translateY(-2px);

box-shadow:
  0 24px 42px -25px
  rgba(16, 24, 40, 0.74);
}

.wmprice-free-cta span {
font-size: 16px;

transition: transform 0.2s ease;
}

.wmprice-free-cta:hover span {
transform: translateX(3px);
}

.wmprice-free-features {
min-width: 0;

padding: 30px;

background:
  radial-gradient(
    circle at 100% 100%,
    rgba(18, 183, 106, 0.06),
    transparent 36%
  ),
  var(--surface);
}

.wmprice-free-features-head {
display: flex;
align-items: flex-end;
justify-content: space-between;

gap: 16px;

padding-bottom: 16px;

border-bottom: 1px solid var(--border);
}

.wmprice-free-features-head span,
.wmprice-free-features-head strong,
.wmprice-free-features-head small {
display: block;
}

.wmprice-free-features-head span {
color: var(--green-700);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.07em;
text-transform: uppercase;
}

.wmprice-free-features-head strong {
margin-top: 4px;

color: var(--ink-900);

font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
}

.wmprice-free-features-head small {
color: var(--ink-400);

font-size: 11.5px;
}


.wmprice-paid-head {
display: flex;
align-items: flex-end;
justify-content: space-between;

gap: 26px;

margin-top: 48px;
}

.wmprice-paid-head
> div:first-child
> span {
color: var(--green-700);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.08em;
text-transform: uppercase;
}

.wmprice-paid-head h3 {
max-width: 520px;

margin-top: 7px;

color: var(--ink-900);

font-family: var(--font-display);
font-size: 30px;
font-weight: 800;

line-height: 1.18;
letter-spacing: -0.035em;
}

.wmprice-switch {
position: relative;

display: inline-flex;
align-items: center;

gap: 4px;

flex: 0 0 auto;

padding: 5px;

border: 1px solid var(--ink-200);
border-radius: 14px;

background:
  linear-gradient(
    180deg,
    var(--ink-100),
    var(--ink-50)
  );

box-shadow:
  inset 0 1px 2px
  rgba(16, 24, 40, 0.04),
  0 12px 24px -21px
  rgba(16, 24, 40, 0.5);
}

.wmprice-switch-label {
min-width: 112px;
min-height: 43px;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 0 16px;

border-radius: 10px;

color: var(--ink-500);

font-size: 14px;
font-weight: 800;

cursor: pointer;
user-select: none;

transition:
  color 0.2s ease,
  background 0.2s ease,
  box-shadow 0.2s ease,
  transform 0.2s ease;
}

.wmprice-switch-label:hover {
color: var(--ink-800);
}

.wmprice-radio--monthly:checked
~ .wmprice-wrap
.wmprice-switch-label--monthly,

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-switch-label--yearly {
background: var(--surface);
color: var(--green-700);

box-shadow:
  0 9px 19px -14px
  rgba(16, 24, 40, 0.65);

transform: translateY(-1px);
}

.wmprice-radio--monthly:focus-visible
~ .wmprice-wrap
.wmprice-switch-label--monthly,

.wmprice-radio--yearly:focus-visible
~ .wmprice-wrap
.wmprice-switch-label--yearly {
outline: 2px solid var(--green-600);
outline-offset: 2px;
}

.wmprice-cycle-message {
min-height: 35px;

margin-top: 11px;
}

.wmprice-cycle-message p {
align-items: center;

gap: 7px;

color: var(--ink-400);

font-size: 12px;
}

.wmprice-cycle-message
.wmprice-monthly-only {
display: flex;
}

.wmprice-cycle-message i {
width: 7px;
height: 7px;

flex: 0 0 7px;

border-radius: 50%;

background: var(--green-500);
}

.wmprice-grid {
display: grid;

grid-template-columns:
  repeat(3, minmax(0, 1fr));

align-items: stretch;

gap: 20px;

padding-top: 17px;
}

.wmprice-card {
position: relative;

min-width: 0;
height: 100%;

display: flex;
flex-direction: column;

padding: 25px;

overflow: visible;

border: 1px solid var(--border);
border-radius: 22px;

background: var(--surface);

box-shadow:
  0 22px 50px -40px
  rgba(16, 24, 40, 0.56);

transition:
  border-color 0.22s ease,
  box-shadow 0.22s ease,
  transform 0.22s ease;
}

.wmprice-card:hover {
border-color: var(--green-200);

box-shadow:
  0 31px 64px -43px
  rgba(3, 152, 85, 0.47);

transform: translateY(-4px);
}

.wmprice-card--featured {
border:
  2px solid
  var(--green-500);

background:
  linear-gradient(
    180deg,
    var(--green-50),
    var(--surface) 21%
  );

box-shadow:
  0 31px 66px -42px
  rgba(3, 152, 85, 0.62);
}

.wmprice-card--business {
border-color: var(--ink-800);

background:
  radial-gradient(
    circle at 100% 0%,
    rgba(50, 213, 131, 0.12),
    transparent 33%
  ),
  var(--ink-900);

color: #ffffff;
}

.wmprice-card::before,
.wmprice-card--featured::before,
.wmprice-card--business::before {
content: none !important;
display: none !important;
}

.wmprice-popular {
position: absolute;

top: -16px;
left: 50%;
z-index: 10;

min-height: 31px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 6px;

padding: 0 14px;

border: 3px solid var(--surface);
border-radius: 999px;

background: var(--green-600);
color: #ffffff;

font-size: 10px;
font-weight: 800;

letter-spacing: 0.05em;
line-height: 1;

text-transform: uppercase;
white-space: nowrap;

box-shadow:
  0 15px 28px -17px
  rgba(3, 152, 85, 0.82);

transform: translateX(-50%);
}

.wmprice-popular i {
font-style: normal;
}

.wmprice-card-head {
display: grid;

grid-template-columns:
  47px
  minmax(0, 1fr)
  auto;

align-items: center;

gap: 11px;
}

.wmprice-plan-number {
width: 47px;
height: 47px;

display: grid;
place-items: center;

border-radius: 14px;

background: var(--green-50);
color: var(--green-700);

font-family: var(--font-display);
font-size: 11px;
font-weight: 800;
}

.wmprice-card--featured
.wmprice-plan-number {
background: var(--green-600);
color: #ffffff;

box-shadow: var(--shadow-green);
}

.wmprice-card--business
.wmprice-plan-number {
border:
  1px solid
  rgba(255, 255, 255, 0.13);

background:
  rgba(255, 255, 255, 0.08);

color: var(--green-200);
}

.wmprice-plan-kicker {
display: block;

color: var(--ink-400);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.wmprice-card-head h3 {
margin-top: 4px;

color: var(--ink-900);

font-family: var(--font-display);
font-size: 24px;
font-weight: 800;

line-height: 1.15;
letter-spacing: -0.03em;
}

.wmprice-card--business
.wmprice-card-head h3 {
color: #ffffff;
}

.wmprice-card-description {
min-height: 54px;

margin-top: 16px !important;

color: var(--ink-500);

font-size: 13.5px;
line-height: 1.6;
}

.wmprice-card--business
.wmprice-card-description {
color: var(--ink-300);
}

.wmprice-discount-badge {
min-height: 29px;

align-items: center;
justify-content: center;

padding: 0 10px;

border: 1px solid var(--amber-400);
border-radius: 999px;

background: var(--amber-100);
color: var(--amber-600);

font-size: 10px;
font-weight: 800;

line-height: 1;

white-space: nowrap;

box-shadow:
  0 11px 21px -17px
  rgba(220, 104, 3, 0.72);
}

.wmprice-card--featured
.wmprice-discount-badge {
border-color: var(--green-400);

background: var(--green-100);
color: var(--green-700);

box-shadow:
  0 11px 22px -17px
  rgba(3, 152, 85, 0.72);
}

.wmprice-card--business
.wmprice-discount-badge {
border-color:
  rgba(50, 213, 131, 0.38);

background:
  rgba(50, 213, 131, 0.14);

color: var(--green-200);

box-shadow: none;
}

.wmprice-price {
min-height: 65px;

display: flex;
align-items: baseline;

margin-top: 20px;
}

.wmprice-price > span {
align-self: flex-start;

margin: 5px 3px 0 0;

color: var(--ink-700);

font-size: 17px;
font-weight: 800;
}

.wmprice-price strong {
color: var(--ink-900);

font-family: var(--font-display);
font-size: 42px;
font-weight: 850;

line-height: 1;
letter-spacing: -0.05em;
}

.wmprice-price small {
margin-left: 5px;

color: var(--ink-400);

font-size: 13px;
}

.wmprice-card--business
.wmprice-price > span,

.wmprice-card--business
.wmprice-price strong {
color: #ffffff;
}

.wmprice-monthly-note {
min-height: 39px;

display: flex;
align-items: center;

color: var(--ink-400);

font-size: 11.5px;
line-height: 1.5;
}

.wmprice-card--business
.wmprice-monthly-note {
color: var(--ink-400);
}

.wmprice-radio--yearly:checked
~ .wmprice-wrap
.wmprice-price.wmprice-yearly-only {
margin-bottom: 10px;
}

.wmprice-plan-cta {
min-height: 48px;

display: flex;
align-items: center;
justify-content: center;

gap: 8px;

margin-top: 16px;
padding: 0 15px;

border: 1px solid var(--green-600);
border-radius: 12px;

background: var(--green-600);
color: #ffffff;

font-size: 14px;
font-weight: 800;

box-shadow:
  0 17px 30px -20px
  rgba(3, 152, 85, 0.72);

transition:
  background 0.2s ease,
  transform 0.2s ease,
  box-shadow 0.2s ease;
}

.wmprice-plan-cta:hover {
background: var(--green-700);
color: #ffffff;

transform: translateY(-2px);

box-shadow:
  0 22px 38px -22px
  rgba(3, 152, 85, 0.84);
}

/* .wmprice-card--business
.wmprice-plan-cta {
border-color: var(--green-400);

background: var(--green-500);
color: var(--ink-900);
}

.wmprice-card--business
.wmprice-plan-cta:hover {
background: var(--green-400);
color: var(--ink-900);
} */

.wmprice-plan-cta span {
font-size: 16px;

transition: transform 0.2s ease;
}

.wmprice-plan-cta:hover span {
transform: translateX(3px);
}

.wmprice-card-divider {
position: relative;

margin: 30px 0 17px;

border-top: 1px solid var(--border);

text-align: center;
}

.wmprice-card-divider span {
position: relative;

top: -16px;

padding: 0 8px;

background: var(--surface);
color: var(--ink-400);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.wmprice-card--business
.wmprice-card-divider {
border-color:
  rgba(255, 255, 255, 0.12);
}

.wmprice-card--business
.wmprice-card-divider span {
background: var(--ink-900);
}

.wmprice-feature-list
> .wmprice-feature-row {
display: grid !important;
}
.wmprice-feature-collection {
width: 100%;
min-width: 0;
}

.wmprice-feature-list {
display: grid;

grid-template-columns:
  minmax(0, 1fr);

gap: 7px;

width: 100%;

margin: 0;
padding: 0;

list-style: none;
}

.wmprice-feature-list--free {
grid-template-columns:
  repeat(3, minmax(0, 1fr));

gap: 8px;

margin-top: 18px;
}

.wmprice-feature-row {
min-width: 0;
min-height: 39px;

display: grid;

grid-template-columns:
  22px
  minmax(0, 1fr)
  auto;

align-items: center;

gap: 8px;

padding: 8px 9px;

border: 1px solid transparent;
border-radius: 10px;

background: var(--ink-50);

transition:
  border-color 0.2s ease,
  background 0.2s ease;
}

.wmprice-feature-row:hover {
border-color: var(--green-100);

background: var(--green-50);
}

.wmprice-feature-check {
width: 22px;
height: 22px;

display: grid;
place-items: center;

border-radius: 7px;

background: var(--green-100);
}

.wmprice-feature-check svg {
width: 13px;
height: 13px;

fill: none;

stroke: var(--green-700);
stroke-width: 1.8;

stroke-linecap: round;
stroke-linejoin: round;
}

.wmprice-feature-name {
min-width: 0;

color: var(--ink-600);

font-size: 11.5px;
line-height: 1.35;
}

.wmprice-feature-row strong {
color: var(--ink-800);

font-size: 11.5px;
font-weight: 800;

text-align: right;

white-space: nowrap;
}

.wmprice-card--business
.wmprice-feature-row {
border-color:
  rgba(255, 255, 255, 0.04);

background:
  rgba(255, 255, 255, 0.055);
}

.wmprice-card--business
.wmprice-feature-row:hover {
border-color:
  rgba(50, 213, 131, 0.18);

background:
  rgba(50, 213, 131, 0.08);
}

.wmprice-card--business
.wmprice-feature-check {
background:
  rgba(50, 213, 131, 0.13);
}

.wmprice-card--business
.wmprice-feature-check svg {
stroke: var(--green-400);
}

.wmprice-card--business
.wmprice-feature-name {
color: var(--ink-300);
}

.wmprice-card--business
.wmprice-feature-row strong {
color: #ffffff;
}

.wmprice-assurance {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 12px 24px;

margin-top: 31px;

color: var(--ink-500);

font-size: 12px;
}

.wmprice-assurance span {
display: inline-flex;
align-items: center;

gap: 7px;
}

.wmprice-assurance svg {
width: 20px;
height: 20px;

padding: 4px;

border-radius: 7px;

background: var(--green-50);

fill: none;

stroke: var(--green-700);
stroke-width: 1.8;

stroke-linecap: round;
stroke-linejoin: round;
}

/* Pricing Plans CSS end */

/* CTA BANNER */
.cta-banner { background: linear-gradient(135deg, var(--green-700), var(--green-500)); border-radius: 24px; padding: 52px 40px; text-align: center; color: #fff; box-shadow: var(--shadow-green); position: relative; overflow: hidden; }
.cta-banner::before { content:""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 100% 0%, rgba(255,255,255,.16), transparent 60%); }
.cta-banner h2 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 41px); font-weight: 800; letter-spacing: -.02em; position: relative; }
.cta-banner p { margin: 12px auto 26px;  opacity: .92; position: relative; }
.cta-banner .btn-primary { background: #fff; color: var(--green-700); box-shadow: 0 12px 30px -8px rgba(0,0,0,.3); position: relative; }
.cta-banner .btn-primary:hover { background: var(--ink-50); }
.cta-mini {
position: relative;

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 12px 22px;

width: 100%;
margin: 0 0 22px;

font-size: 13px;
opacity: 0.94;
}
.cta-mini span { display: inline-flex; align-items: center; gap: 7px; }


/* FAQ SECTION  */

.faq-section {
position: relative;

overflow: visible;

background:
  radial-gradient(
    circle at 8% 16%,
    rgba(18, 183, 106, 0.08),
    transparent 27%
  ),
  radial-gradient(
    circle at 95% 85%,
    rgba(59, 130, 246, 0.045),
    transparent 25%
  );
}

.faq-section::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.065) 0.7px,
    transparent 0.7px
  );

background-size: 23px 23px;
opacity: 0.15;
}

.faq-wrap {
position: relative;
z-index: 1;

max-width: 1160px;
}

/* Main FAQ layout */

.faq-shell {
display: grid;

grid-template-columns:
  350px
  minmax(0, 1fr);

align-items: start;

gap: 48px;
}

/*  LEFT INTRODUCTION  */

.faq-intro {
position: sticky;
top: 105px;

align-self: start;
}

.faq-heading {
max-width: none;
margin: 0;

text-align: left;
}

.faq-heading h2 {
max-width: 350px;
margin-inline: 0;
font-size: clamp(35px, 4vw, 41px);
line-height: 1.06;
letter-spacing: -0.04em;
}

.faq-heading p {
max-width: 335px;
margin-inline: 0;
font-size: 15px;
line-height: 1.7;
}

/* Topic tags */

.faq-topics {
display: flex;
flex-wrap: wrap;

gap: 8px;

margin-top: 23px;
}

.faq-topics span {
display: inline-flex;
align-items: center;
justify-content: center;

min-height: 30px;

padding: 0 12px;

border:
  1px solid
  rgba(18, 183, 106, 0.17);

border-radius: 999px;

background:
  rgba(236, 253, 243, 0.72);

color:
  var(--green-700);

font-size: 10px;
font-weight: 750;

letter-spacing: 0.04em;
text-transform: uppercase;
}

/* Small support information card */

.faq-intro-card {
display: grid;

grid-template-columns:
  43px
  minmax(0, 1fr);

align-items: start;

gap: 13px;

margin-top: 25px;
padding: 17px;

border:
  1px solid
  rgba(16, 24, 40, 0.08);

border-radius: 17px;

background:
  rgba(255, 255, 255, 0.82);

box-shadow:
  0 20px 42px -32px
  rgba(16, 24, 40, 0.46);

backdrop-filter: blur(13px);
}

.faq-intro-icon {
width: 43px;
height: 43px;

display: grid;
place-items: center;

border-radius: 13px;

background:
  linear-gradient(
    145deg,
    var(--green-50),
    var(--green-100)
  );

color:
  var(--green-700);
}

.faq-intro-card b {
display: block;

color:
  var(--ink-900);

font-size: 13px;
font-weight: 750;
}

.faq-intro-card p {
margin-top: 4px;

color:
  var(--ink-500);

font-size: 11.5px;
line-height: 1.55;
}

/* =====================
  FAQ ACCORDION
  ===================== */

.faq-grid {
display: grid;

gap: 12px;

width: 100%;
max-width: none;

margin: 0;
}

.faq-item {
position: relative;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.085);

border-radius: 18px;

background:
  rgba(255, 255, 255, 0.93);

box-shadow:
  0 16px 36px -32px
  rgba(16, 24, 40, 0.55);

transition:
  border-color 0.3s ease,
  box-shadow 0.3s ease,
  transform 0.3s ease,
  background 0.3s ease;
}

/* Active green accent */

.faq-item::before {
content: "";

position: absolute;

top: 14px;
bottom: 14px;
left: 0;

width: 4px;

border-radius:
  0 999px 999px 0;

background:
  linear-gradient(
    180deg,
    var(--green-400),
    var(--green-700)
  );

opacity: 0;

transform:
  scaleY(0.3);

transform-origin:
  center;

transition:
  opacity 0.3s ease,
  transform 0.3s ease;
}

.faq-item:hover {
border-color:
  rgba(18, 183, 106, 0.2);

transform:
  translateY(-2px);

box-shadow:
  0 22px 42px -31px
  rgba(16, 24, 40, 0.35);
}

.faq-item.open {
border-color:
  rgba(18, 183, 106, 0.3);

background:
  linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.98),
    rgba(246, 254, 250, 0.98)
  );

box-shadow:
  0 24px 48px -32px
  rgba(3, 152, 85, 0.36);

transform: none;
}

.faq-item.open::before {
opacity: 1;

transform:
  scaleY(1);
}

/* FAQ question button */

.faq-q {
width: 100%;
min-height: 76px;

display: flex;
align-items: center;
justify-content: space-between;

gap: 18px;

padding:
  15px 17px 15px 18px;

border: 0;

background: transparent;

color:
  var(--ink-900);

text-align: left;

cursor: pointer;
}

.faq-q-main {
min-width: 0;

display: flex;
align-items: center;

gap: 14px;
}

/* FAQ number */

.faq-q .fnum {
width: 43px;
height: 43px;

flex: 0 0 43px;

display: grid;
place-items: center;

margin: 0;

border:
  1px solid
  var(--border);

border-radius: 13px;

background:
  var(--ink-50);

color:
  var(--ink-400);

font-family:
  var(--font-display);

font-size: 11px;
font-weight: 800;

letter-spacing: 0.04em;

transition:
  color 0.3s ease,
  background 0.3s ease,
  border-color 0.3s ease,
  box-shadow 0.3s ease;
}

.faq-item.open .fnum {
border-color:
  var(--green-100);

background:
  var(--green-50);

color:
  var(--green-700);

box-shadow:
  0 10px 20px -16px
  rgba(3, 152, 85, 0.8);
}

/* Question text */

.faq-q-text {
display: block;

color:
  var(--ink-800);

font-size: 15px;
font-weight: 680;

line-height: 1.45;

transition:
  color 0.3s ease;
}

.faq-item.open .faq-q-text {
color:
  var(--ink-900);
}

/* Plus icon */

.faq-q .ficon {
width: 38px;
height: 38px;

flex: 0 0 38px;

display: grid;
place-items: center;

border:
  1px solid
  rgba(18, 183, 106, 0.15);

border-radius: 12px;

background:
  var(--green-50);

color:
  var(--green-700);

box-shadow:
  0 9px 20px -17px
  rgba(3, 152, 85, 0.85);

transition:
  color 0.3s ease,
  background 0.3s ease,
  border-color 0.3s ease,
  transform 0.35s
    cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-q:hover .ficon {
border-color:
  var(--green-200);

background:
  var(--green-100);
}

.faq-item.open .faq-q .ficon {
border-color:
  var(--green-600);

background:
  var(--green-600);

color: #ffffff;

transform:
  rotate(45deg);
}

/* Answer animation */

.faq-a {
max-height: 0;

overflow: hidden;

background:
  linear-gradient(
    90deg,
    rgba(236, 253, 243, 0.48),
    transparent 78%
  );

transition:
  max-height 0.42s
  cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-answer-inner {
display: grid;

grid-template-columns:
  29px
  minmax(0, 1fr);

align-items: start;

gap: 11px;

padding:
  0 70px 22px 75px;

opacity: 0;

transform:
  translateY(-7px);

transition:
  opacity 0.3s ease,
  transform 0.35s ease;
}

.faq-item.open
.faq-answer-inner {
opacity: 1;

transform:
  translateY(0);
}

.faq-answer-icon {
width: 29px;
height: 29px;

display: grid;
place-items: center;

border-radius: 9px;

background:
  var(--green-100);

color:
  var(--green-700);
}

.faq-answer-inner p {
padding: 2px 0 0;
margin: 0;

color:
  var(--ink-500);

font-size: 14px;
line-height: 1.7;
}

/* Keyboard accessibility */

.faq-q:focus-visible {
outline:
  3px solid
  rgba(18, 183, 106, 0.2);

outline-offset: -3px;
}

  
/* FOOTER */

.webftminexc-footer{
padding:22px 0 0;
background:#fff;
}

.webftminexc-footer,
.webftminexc-footer *{
box-sizing:border-box;
}

.webftminexc-foot{
width:100%;
}

.webftminexc-shell{
width:100%;
padding:47px 39px 27px;
overflow:hidden;
border-radius:34px 34px 0 0;
background:#0b0e12;
color:#fff;
}


/* =========================================================
   TOP GRID
========================================================= */

.webftminexc-top-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
align-items:start;
gap:37px;
}

.webftminexc-column{
min-width:0;
}

.webftminexc-list{
margin:0;
padding:0;
list-style:none;
}

.webftminexc-list li{
margin:0;
padding:0;
}

.webftminexc-list li{
margin-bottom:15px;
}

.webftminexc-list a{
display:inline-block;
max-width:100%;
color:#fff;
font-size:14px;
font-weight:500;
line-height:1.5;
text-decoration:none;
overflow-wrap:anywhere;
transition:color .18s ease,transform .18s ease;
}

.webftminexc-list a:hover{
color:#00e785;
transform:translateX(2px);
}


/* Heading */

.webftminexc-heading{
margin:0 0 18px;
color:#00e785;
font-size:15px;
font-weight:800;
line-height:1.2;
}

.webftminexc-heading-space{
margin-top:30px;
}


/*   BRAND + AWARDS  */

.webftminexc-brand-awards{
display:grid;
grid-template-columns:minmax(300px,.78fr) minmax(0,1.22fr);
align-items:end;
gap:58px;
margin-top:32px;
padding-bottom:30px;
}


/* Brand */

.webftminexc-brand-side{
min-width:0;
}

.webftminexc-logo-link{
display:inline-flex;
line-height:0;
}

.webftminexc-footer-logo{
display:block;
width:145px;
height:auto;
object-fit:contain;
}

.webftminexc-tagline{
margin:24px 0 0;
color:#fff;
font-size:13px;
font-weight:500;
line-height:1.45;
}


/* Official partners */

.webftminexc-official-partners{
display:flex;
align-items:center;
gap:16px;
margin-top:24px;
}

.webftminexc-partner-logo{
display:flex;
align-items:center;
justify-content:center;
}

.webftminexc-partner-logo:first-child{
padding-right:16px;
border-right:1px solid rgba(255,255,255,.8);
}

.webftminexc-partner-logo:first-child img{
width:98px;
}

.webftminexc-partner-logo:last-child img{
width:110px;
}

.webftminexc-partner-logo img{
display:block;
height:auto;
object-fit:contain;
}


/* =========================================================
   AWARDS
========================================================= */

.webftminexc-awards-side{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:18px;
}

.webftminexc-award-row{
display:flex;
align-items:flex-end;
justify-content:flex-end;
gap:22px;
width:100%;
}

.webftminexc-award-row > img{
display:block;
width:auto;
height:83px;
object-fit:contain;
}

.webftminexc-meta-award{
display:flex;
align-items:center;
justify-content:center;
}

.webftminexc-meta-award img{
display:block;
width:auto;
height:70px;
object-fit:contain;
}


/* =========================================================
   BOTTOM
========================================================= */

.webftminexc-bottom{
display:grid;
grid-template-columns:
minmax(255px,1.15fr)
minmax(155px,.62fr)
minmax(285px,1fr)
auto;
align-items:center;
gap:28px;
min-height:91px;
padding-top:22px;
border-top:1px solid rgba(255,255,255,.13);
}


/* copyright */

.webftminexc-copyright p{
margin:0;
color:#fff;
font-size:11px;
font-weight:500;
line-height:1.4;
}


/* social */

.webftminexc-social{
display:flex;
align-items:center;
justify-content:flex-start;
gap:11px;
}

.webftminexc-social a{
display:flex;
align-items:center;
justify-content:center;
width:21px;
height:21px;
line-height:0;
transition:
opacity .18s ease,
transform .18s ease;
}

.webftminexc-social a:hover{
opacity:.75;
transform:translateY(-2px);
}

.webftminexc-social svg{
display:block;
width:18px;
height:18px;
fill:currentColor;
}


/* Legal */

.webftminexc-legal{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
}

.webftminexc-legal a{
color:#fff;
font-size:11px;
font-weight:500;
line-height:1.4;
white-space:nowrap;
text-decoration:none;
transition:color .18s ease;
}

.webftminexc-legal a:hover{
color:#00e785;
}

.webftminexc-legal i{
color:#fff;
font-size:11px;
font-style:normal;
opacity:.8;
}


/* GDPR + ISO */

.webftminexc-security{
display:flex;
align-items:center;
justify-content:flex-end;
gap:9px;
}

.webftminexc-security img{
display:block;
width:54px;
height:54px;
object-fit:contain;
}


/* =========================================================
   FOOTER END
========================================================= */


/* Extra-small screen hardening */
.mobile-nav-cta { display: none !important; }
.hero-grid > *,
.an-grid > * {
min-width: 0;
}

/* NEW DYNAMIC HERO HEADING */

.hero-copy {
--hero-accent: #12b76a;
--hero-accent-rgb: 18, 183, 106;
min-width: 0;
}

/* Hero top badge */

.hero-badge {
gap: 8px;
max-width: 100%;
padding: 6px 7px 6px 10px;

border-color:
  rgba(var(--hero-accent-rgb), 0.34);

background:
  rgba(var(--hero-accent-rgb), 0.055);

color: var(--ink-500);

font-size: 12px;
font-weight: 700;
letter-spacing: 0.035em;
white-space: nowrap;

transition:
  border-color 0.35s ease,
  background 0.35s ease,
  box-shadow 0.35s ease;
}

.hero-badge .dot {
background: var(--hero-accent);

box-shadow:
  0 0 0 4px
  rgba(var(--hero-accent-rgb), 0.14);

transition:
  background 0.35s ease,
  box-shadow 0.35s ease;
}

.hero-badge .tag {
margin-left: 2px;
padding: 4px 7px;

border-radius: 5px;

background: var(--hero-accent);
color: #ffffff;

font-size: 10px;

transition:
  background 0.35s ease;
}

/* Main heading */

.hero h1.hero-dynamic-title {
  margin-top: 18px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: initial;
  font-weight: initial;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.hero-title-top,
.hero-rotator-line {
display: block;
}

.hero-title-top {
font-size:
  clamp(52px, 5.8vw, 76px);

font-weight: 800;
}

/* Rotating heading holder */

.hero-rotator-line {
min-height: 76px;
margin: 7px 0 4px;
}

.hero-rotator {
display: inline-flex;
align-items: center;

gap: 9px;

max-width: 100%;
min-height: 62px;

padding:
  5px 15px 7px 9px;

overflow: hidden;

border:
  1px solid
  rgba(var(--hero-accent-rgb), 0.32);

border-radius: 17px;

background:
  linear-gradient(
    115deg,
    rgba(var(--hero-accent-rgb), 0.12),
    rgba(var(--hero-accent-rgb), 0.035)
  );

color: var(--hero-accent);

box-shadow:
  0 14px 30px -23px
  rgba(var(--hero-accent-rgb), 0.85);

font-size:
  clamp(34px, 4vw, 52px);

font-weight: 800;
letter-spacing: -0.045em;
line-height: 1;

transform-origin: left center;

will-change:
  transform,
  opacity,
  filter;

transition:
  color 0.35s ease,
  border-color 0.35s ease,
  background 0.35s ease,
  box-shadow 0.35s ease;
}

/* Long headings get slightly smaller */

.hero-rotator[data-size="long"] {
font-size:
  clamp(30px, 3.55vw, 47px);
}

/* Dynamic icon */

.hero-rotator-icon {
width: 42px;
height: 42px;

flex: 0 0 42px;

display: grid;
place-items: center;

border-radius: 12px;

background: var(--hero-accent);
color: #ffffff;

box-shadow:
  0 10px 20px -14px
  rgba(var(--hero-accent-rgb), 0.9);

transition:
  background 0.35s ease,
  box-shadow 0.35s ease;

will-change:
  transform,
  opacity;
}

.hero-rotator-text {
display: flex;
align-items: baseline;

min-width: 0;

white-space: nowrap;
}

.hero-letter {
display: inline-block;

will-change:
  transform,
  opacity,
  filter;
}

/* Heading entrance */

.hero-rotator.is-in {
animation:
  heroPillIn
  0.52s
  cubic-bezier(0.22, 1, 0.36, 1)
  both;
}

.hero-rotator.is-in
.hero-rotator-icon {
animation:
  heroIconIn
  0.52s
  cubic-bezier(0.22, 1, 0.36, 1)
  both;
}

.hero-rotator.is-in
.hero-letter {
animation:
  heroLetterIn
  0.44s
  cubic-bezier(0.22, 1, 0.36, 1)
  both;

animation-delay:
  calc(
    70ms +
    (var(--i) * 24ms)
  );
}

/* Current heading exit */

.hero-rotator.is-out {
animation:
  heroPillOut
  0.38s
  cubic-bezier(0.55, 0, 1, 0.45)
  both;
}

@keyframes heroPillIn {
from {
  /* Keep the heading available during the first render. The animation
      still provides motion through transform and blur without hiding SEO
      text from crawlers or no-script users. */
  opacity: 1;

  transform:
    translateY(22px)
    scale(0.97);

  filter: blur(10px);
}

to {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}
}

@keyframes heroPillOut {
from {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter: blur(0);
}

to {
  opacity: 0;

  transform:
    translateY(-20px)
    scale(0.98);

  filter: blur(9px);
}
}

@keyframes heroIconIn {
from {
  opacity: 1;
  transform: scale(0.55) rotate(-18deg);
}

to {
  opacity: 1;
  transform: scale(1) rotate(0);
}
}

@keyframes heroLetterIn {
from {
  opacity: 1;
  transform: translateY(24px);
  filter: blur(7px);
}

to {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
}

/* Growth platform line */


.hero-sub {
max-width: 500px;
margin-top: 18px;
font-size: 17px;
}

/* Hero feature chips */

.hero-chips {
gap: 7px;
margin-top: 18px;
}

.hero-chips .chip {
padding: 5px 10px;
border-color: rgba(18, 183, 106, 0.18);
background: rgba(18, 183, 106, 0.055);
font-size: 11px;
box-shadow: none;
}

/* WhatsApp and Facebook customer circles */

.channel-avatars .wa-avatar {
background: #12b76a !important;
}

.channel-avatars .ms-avatar {
background: #1877f2 !important;
}

/* Right-side floating labels */

.hv-ms {
top: 30px;
right: -6px;
animation-delay: 0.8s;
}

.hv-ai {
bottom: -14px;
left: 12%;
animation-delay: 1.6s;
}

/* Channel dot now uses actual channel color */

.conv .cchan::before {
background: var(--c, var(--green-500));
}


/*  FINAL FEATURE SECTION WIDTH + STICKY TABS FIX  */

.feature-tabs-section {
overflow: visible;
}

.feature-tabs-section > .wrap {
max-width: 1220px;
}

/* Section heading tabs ke upar centered rahegi */

.feature-tabs-heading {
/* max-width: 780px; */
margin: 0 auto 36px;
text-align: center;
}

.feature-tabs-heading h2 {
/* max-width: 780px; */
margin-inline: auto;
}

.feature-tabs-heading p {
max-width: 700px;
margin-inline: auto;
}

/* Main tabs and panel layout */

.feature-tabs-shell {
width: 100%;
max-width: 1140px;
display: grid;
grid-template-columns: 245px minmax(0, 1fr);
align-items: start;
gap: 20px;
margin-inline: auto;
overflow: visible;
}

/*  STICKY LEFT-SIDE TABS */

.feature-tab-nav {
position: sticky;
top: 92px;
align-self: start;
width: 100%;
height: max-content;
margin: 0;
overflow: hidden;
}


.feature-tab-stage {
min-width: 0;
min-height: 0;
padding: 27px 28px;
border-radius: 22px;
}

.feature-panel-grid {
min-height: 0;

display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
align-items: start;
gap: 26px;
}

.feature-tab-panel {
min-height: 0;
}

.feature-tab-panel[hidden] {
display: none;
}

/*  LONG HEADING SPACING FIX */

.feature-panel-copy {
min-width: 0;
padding-top: 3px;
}

.feature-panel-copy h3 {
width: 100%;
max-width: none;
font-size: clamp(25px, 3.4vw, 26px);
line-height: 1.1;
letter-spacing: -0.045em;
text-wrap: balance;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}

.feature-panel-copy > p {
max-width: 610px;
margin-top: 14px;
line-height: 1.65;
}

/* Bullet cards compact but readable */

.feature-point-list {
margin-top: 20px;
gap: 9px;
}

.feature-point-list li {
min-height: 49px;
padding: 10px 11px;
}

.feature-demo {
width: 100%;
min-height: 350px;
height: auto;
}

/* Why Us visual */

.workflow-list {
padding-top: 20px;
padding-bottom: 14px;
}

/* Campaigns visual */

.demo-metrics {
padding-top: 17px;
}

/* Automation visual */

.flow-canvas {
min-height: 270px;
padding-top: 20px;
padding-bottom: 20px;
}

/* AI integration visual */

.demo-chat {
padding-top: 19px;
}

/*  CLEAN BUSINESS MESSAGING HERO */

.hero-copy,
.hero-dynamic-title,
.hero-rotator-line,
.hero-rotator,
.hero-rotator-text {
overflow: visible !important;
}

/*  Top platform pill  */

.hero-platform-pill {
display: inline-grid;
grid-template-columns: 35px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
max-width: 620px;
width: 100%;
padding: 8px 9px;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 16px 36px -29px rgba(16, 24, 40, 0.48);
backdrop-filter: blur(13px);
box-sizing: border-box;
}

.hero-platform-icon {
width: 35px;
height: 35px;
display: grid;
place-items: center;
border-radius: 11px;
background: linear-gradient(145deg, var(--green-50), var(--green-100));
color: var(--green-700);
}

.hero-platform-copy {
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.15;
}

.hero-platform-copy small {
color: var(--ink-400);
font-size: 9px;
font-weight: 750;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.hero-platform-copy b {
margin-top: 3px;
color: var(--ink-700);
font-size: 11px;
font-weight: 720;
line-height: 1.3;
white-space: normal;
}

.hero-platform-tag {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 22px;
padding: 0 8px;
border: 1px solid rgba(0, 168, 107, 0.2);
border-radius: 999px;
background: rgba(0, 168, 107, 0.08);
color: var(--green-700);
font-size: 8px;
font-weight: 800;
letter-spacing: 0.06em;
line-height: 1;
text-transform: uppercase;
white-space: nowrap;
}


/* Hero Heading Final */
.hero-copy .hero-static-title {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 11px;
width: 100%;
max-width: 680px;
margin: 24px 0 0;
padding: 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(48px, 4.15vw, 60px);
font-weight: 850;
/* line-height: .96; */
/* letter-spacing: 0.01em; */
}

.hero-copy .hero-static-line {
display: flex;
align-items: center;
gap: .22em;
width: max-content;
max-width: 100%;
white-space: nowrap;
}

.hero-copy .hero-static-highlight {
display: inline-block;
padding: .02em .13em .07em;
border: 1px solid rgba(18, 183, 106, .18);
border-radius: .18em;
background: linear-gradient(135deg, rgba(18, 183, 106, .12), rgba(18, 183, 106, .045));
color: var(--green-600);
box-shadow: 0 12px 26px -23px rgba(3, 152, 85, .8);
}

/*  Content spacing  */

.hero-copy .hero-sub {
max-width: 620px;
margin-top: 20px;
line-height: 1.7;
}

.hero-copy .hero-cta {
margin-top: 26px;
}

/*  Provider card  */

.hero-provider-proof {
position: relative;
display: grid;
grid-template-columns: 41px minmax(0, 1fr) 1px auto;
align-items: center;
gap: 12px;
width: fit-content;
max-width: 620px;
margin-top: 24px;
padding: 11px 14px 11px 10px;
border: 1px solid rgba(16, 24, 40, 0.085);
border-radius: 17px;
background: linear-gradient(
  135deg,
  rgba(255, 255, 255, 0.96),
  rgba(246, 253, 249, 0.94)
);
box-shadow: 0 20px 42px -32px rgba(16, 24, 40, 0.48);
backdrop-filter: blur(14px);
box-sizing: border-box;
overflow: hidden;
}

.hero-provider-proof::before {
content: "";
position: absolute;
top: -48px;
right: 70px;
width: 120px;
height: 120px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.06);
pointer-events: none;
}

.provider-status-icon {
position: relative;
z-index: 1;
width: 41px;
height: 41px;
display: grid;
place-items: center;
border-radius: 13px;
background: linear-gradient(145deg, var(--green-50), var(--green-100));
color: var(--green-700);
}

.provider-status-copy {
position: relative;
z-index: 1;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.15;
}

.provider-status-copy small {
color: var(--ink-400);
font-size: 9px;
font-weight: 750;
letter-spacing: 0.07em;
text-transform: uppercase;
}

.provider-status-copy b {
margin-top: 4px;
color: var(--ink-800);
font-size: 11.5px;
font-weight: 760;
line-height: 1.3;
white-space: normal;
}

.provider-separator {
position: relative;
z-index: 1;
width: 1px;
height: 34px;
background: linear-gradient(
  transparent,
  rgba(16, 24, 40, 0.15),
  transparent
);
}

.provider-meta-brand {
position: relative;
z-index: 1;
display: flex;
align-items: center;
}

.provider-meta-image {
display: block;
max-width: 170px;
width: 100%;
height: auto;
object-fit: contain;
}

/*  COMPACT OMNICHANNEL WORKSPACE  */

.cx-omni-section {
position: relative;
isolation: isolate;
overflow: hidden;

padding: 96px 22px;

background: #ffffff;
}

.cx-omni-section::before {
content: "";

position: absolute;
top: 0;
left: 50%;
z-index: -1;

width: min(1180px, calc(100% - 40px));
height: 1px;

background:
  linear-gradient(
    90deg,
    transparent,
    rgba(16, 24, 40, 0.09),
    transparent
  );

transform: translateX(-50%);
}

.cx-omni-section::after {
  content: none;
}

.cx-omni-shell {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(540px, 1.1fr);
  align-items: center;
  gap: 46px;
  margin-inline: auto;
}

/*  LEFT COPY */

.cx-omni-copy {
min-width: 0;
}

.cx-omni-eyebrow {
display: inline-flex;
align-items: center;

gap: 7px;

min-height: 31px;

padding: 0 11px;

border:
  1px solid
  rgba(18, 183, 106, 0.18);

border-radius: 999px;

background:
  rgba(236, 253, 243, 0.78);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.cx-omni-copy h2 {
  max-width: 560px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display, inherit);
  font-size: clamp(31px, 3.14vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.043em;
  text-wrap: balance;
}

.cx-omni-copy h2 span {
  display: block;
  margin-top: 3px;
  color: var(--green-600, #039855);
}

.cx-omni-description {
  max-width: 555px;
  margin-top: 20px;
  color: var(--ink-600);
  font-size: 15.5px;
  line-height: 1.72;
  text-wrap: pretty;
}

.cx-omni-points {
display: grid;
gap: 12px;
margin-top: 24px;
}

.cx-omni-point {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.cx-omni-point > span {
width: 27px;
height: 27px;
display: grid;
place-items: center;
margin-top: 1px;
border-radius: 9px;
background: var(--green-50, #ecfdf3);
color: var(--green-700, #027a48);
}

.cx-omni-point b {
  display: block;
  color: var(--ink-800, #1d2939);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.35;
}

.cx-omni-point p {
  max-width: 470px;
  margin-top: 3px;
  color: var(--ink-400, #98a2b3);
  font-size: 12px;
  line-height: 1.5;
}

.cx-omni-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 14px;
margin-top: 27px;
}

.cx-omni-primary {
display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

min-height: 44px;

padding: 0 17px;

border-radius: 12px;

background:
  var(--green-600, #039855);

color: #ffffff;

box-shadow:
  0 16px 30px -21px
  rgba(3, 152, 85, 0.72);

font-size: 11px;
font-weight: 760;

text-decoration: none;

transition:
  transform 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.cx-omni-primary:hover {
background:
  var(--green-700, #027a48);

transform:
  translateY(-2px);

box-shadow:
  0 20px 35px -20px
  rgba(3, 152, 85, 0.75);
}

.cx-omni-primary svg {
transition:
  transform 0.25s ease;
}

.cx-omni-primary:hover svg {
transform:
  translateX(3px);
}

.cx-omni-security {
display: inline-flex;
align-items: center;

gap: 6px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
font-weight: 650;
}

/*  BOARD WRAPPER */

.cx-omni-visual {
min-width: 0;
}

.cx-omni-board {
position: relative;

width: 100%;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.085);

border-radius: 23px;

background:
  rgba(255, 255, 255, 0.96);

box-shadow:
  0 34px 75px -49px
  rgba(16, 24, 40, 0.58);
}

.cx-omni-board::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;

background:
  radial-gradient(
    circle at 50% 50%,
    rgba(18, 183, 106, 0.065),
    transparent 34%
  );
}

/* BOARD HEADER */

.cx-board-head {
position: relative;
z-index: 2;

display: flex;
align-items: center;
justify-content: space-between;

gap: 16px;

padding: 15px 17px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.065);

background:
  rgba(250, 252, 251, 0.78);
}

.cx-board-title {
display: flex;
align-items: center;

gap: 10px;

min-width: 0;
}

.cx-board-logo {
width: 34px;
height: 34px;

flex: 0 0 34px;

display: grid;
place-items: center;

border-radius: 10px;

background:
  var(--green-50, #ecfdf3);

color:
  var(--green-700, #027a48);
}

.cx-board-title > div {
min-width: 0;
}

.cx-board-title b {
display: block;
color: var(--ink-800, #1d2939);
font-size: 13px;
font-weight: 770;
}

.cx-board-title small {
display: block;
margin-top: 3px;
color: var(--ink-400, #98a2b3);
font-size: 11px;
}

.cx-board-live {
display: inline-flex;
align-items: center;

gap: 6px;

min-height: 25px;

padding: 0 9px;

border-radius: 999px;

background:
  var(--green-50, #ecfdf3);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.05em;
text-transform: uppercase;
}

.cx-board-live i,
.cx-hub-status i {
width: 6px;
height: 6px;

border-radius: 50%;

background:
  var(--green-500, #12b76a);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.1);
}

/*  BOARD BODY */

.cx-board-body {
position: relative;
z-index: 1;

display: grid;

grid-template-columns:
  minmax(145px, 1fr)
  155px
  minmax(145px, 1fr);

align-items: center;
gap: 15px;

min-height: 315px;

padding: 22px 18px;
}

.cx-channel-column {
display: grid;
gap: 10px;
}

.cx-channel-card {
display: grid;

grid-template-columns:
  37px
  minmax(0, 1fr)
  7px;

align-items: center;
gap: 9px;

min-width: 0;

padding: 9px;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 13px;

background:
  rgba(255, 255, 255, 0.92);

box-shadow:
  0 13px 28px -27px
  rgba(16, 24, 40, 0.55);

transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

.cx-channel-card:hover {
transform:
  translateY(-2px);

border-color:
  rgba(18, 183, 106, 0.2);

box-shadow:
  0 18px 32px -24px
  rgba(16, 24, 40, 0.48);
}

.cx-channel-icon {
width: 37px;
height: 37px;

display: grid;
place-items: center;

border-radius: 11px;
}

.cx-facebook {
background: #eff6ff;
color: #1877f2;
}

.cx-whatsapp-business {
background: var(--green-50, #ecfdf3);
color: var(--green-700, #027a48);
}

.cx-webchat {
background: #f0fdfa;
color: #0f9f85;
}

.cx-messenger {
background: #f5f3ff;
color: #7c3aed;
}

.cx-ads {
background: #fff7e8;
color: #e47b05;
}

.cx-calls {
background: var(--green-50, #ecfdf3);
color: var(--green-700, #027a48);
}

.cx-channel-card > div {
min-width: 0;
}

.cx-channel-card b {
display: block;
overflow: hidden;
color: var(--ink-700, #344054);
font-size: 10px;
font-weight: 750;
text-overflow: ellipsis;
white-space: nowrap;
}

.cx-channel-card small {
display: block;
overflow: hidden;
margin-top: 3px;
color: var(--ink-400, #98a2b3);
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}

.cx-channel-active {
width: 7px;
height: 7px;

border-radius: 50%;

background:
  var(--green-500, #12b76a);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.08);
}

/*  WHATSAPP HUB  */

.cx-hub-area {
position: relative;

min-height: 220px;

display: grid;
place-items: center;
}

.cx-hub-rings {
position: absolute;
inset: 0;

display: grid;
place-items: center;

pointer-events: none;
}

.cx-hub-rings span {
position: absolute;

border:
  1px solid
  rgba(18, 183, 106, 0.13);

border-radius: 50%;
}

.cx-hub-rings span:first-child {
width: 145px;
height: 145px;
}

.cx-hub-rings span:last-child {
width: 185px;
height: 185px;

border-style: dashed;

animation:
  cxHubRotate
  28s linear infinite;
}

.cx-whatsapp-hub {
position: relative;
z-index: 4;

width: 132px;
min-height: 154px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

padding: 15px;

border:
  1px solid
  rgba(18, 183, 106, 0.22);

border-radius: 22px;

background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.99),
    rgba(236, 253, 243, 0.92)
  );

box-shadow:
  0 24px 48px -29px
  rgba(3, 152, 85, 0.55);
}

.cx-hub-label {
color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.06em;
text-transform: uppercase;
}

.cx-whatsapp-mark {
width: 58px;
height: 58px;

display: grid;
place-items: center;

margin-top: 9px;

border-radius: 18px;

background:
  linear-gradient(
    145deg,
    #dffbea,
    #bdeed0
  );

color: #12b76a;

box-shadow:
  0 18px 30px -21px
  rgba(18, 183, 106, 0.66);

animation:
  cxHubPulse
  3s ease-in-out
  infinite;
}

.cx-whatsapp-hub > strong {
margin-top: 9px;

color:
  var(--ink-900, #101828);

font-family:
  var(--font-display, inherit);

font-size: 14px;
font-weight: 820;

letter-spacing: -0.02em;
}

.cx-whatsapp-hub > small {
margin-top: 2px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
}

.cx-hub-status {
display: inline-flex;
align-items: center;

gap: 5px;

min-height: 23px;

margin-top: 10px;
padding: 0 8px;

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.88);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 750;
}

/*  FLOW LINES  */

.cx-flow-line {
position: absolute;
top: 50%;

width: 50px;
height: 1px;

overflow: hidden;

background:
  linear-gradient(
    90deg,
    transparent,
    rgba(18, 183, 106, 0.62),
    transparent
  );
}

.cx-flow-line-left {
right: calc(50% + 65px);
}

.cx-flow-line-right {
left: calc(50% + 65px);
}

.cx-flow-line i {
position: absolute;
top: -2px;
left: 0;

width: 5px;
height: 5px;

border-radius: 50%;

background:
  var(--green-500, #12b76a);

animation:
  cxFlowMove
  2.2s linear infinite;
}

.cx-flow-line-right i {
animation-delay: -1.1s;
}

/*  BOARD FOOTER */

.cx-board-footer {
position: relative;
z-index: 2;

display: grid;

grid-template-columns:
  minmax(0, 1fr)
  auto
  auto;

align-items: center;
gap: 20px;

padding: 13px 17px;

border-top:
  1px solid
  rgba(16, 24, 40, 0.065);

background:
  rgba(250, 252, 251, 0.8);
}

.cx-footer-agents {
display: flex;
align-items: center;

min-width: 0;
}

.cx-footer-agents > span {
width: 27px;
height: 27px;

display: grid;
place-items: center;

margin-right: -7px;

border:
  2px solid
  #ffffff;

border-radius: 50%;

background:
  var(--green-100, #d1fadf);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;
}

.cx-footer-agents > span:nth-child(2) {
background: #dbeafe;
color: #2563eb;
}

.cx-footer-agents > span:nth-child(3) {
background: #fef3c7;
color: #d97706;
}

.cx-footer-agents p {
margin-left: 14px;
color: var(--ink-400, #98a2b3);
font-size: 10px;
}

.cx-footer-agents p b {
color: var(--ink-700, #344054);
font-weight: 750;
}

.cx-footer-metric {
text-align: right;
}

.cx-footer-metric small {
display: block;

color:
  var(--ink-400, #98a2b3);

font-size: 10px;
}

.cx-footer-metric b {
display: block;

margin-top: 3px;

color:
  var(--ink-800, #1d2939);

font-size: 11px;
font-weight: 800;
}

/*  NOTE BELOW BOARD */

.cx-omni-note {
display: flex;
align-items: center;
justify-content: center;

gap: 7px;

max-width: 390px;

margin: 12px auto 0;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
font-weight: 650;

text-align: center;
}

.cx-omni-note > span {
width: 22px;
height: 22px;

flex: 0 0 22px;

display: grid;
place-items: center;

border-radius: 7px;

background:
  var(--green-50, #ecfdf3);

color:
  var(--green-700, #027a48);
}

/* ANIMATIONS */

@keyframes cxHubRotate {
to {
  transform: rotate(360deg);
}
}

@keyframes cxHubPulse {
0%,
100% {
  transform: scale(1);
}

50% {
  transform: scale(1.045);
}
}

@keyframes cxFlowMove {
from {
  left: 0;
  opacity: 0;
}

20% {
  opacity: 1;
}

80% {
  opacity: 1;
}

to {
  left: 100%;
  opacity: 0;
}
}
/*  AI WORKFORCE SECTION */

.aiw-section {
position: relative;
isolation: isolate;
overflow: hidden;

padding: 96px 22px;

background:
  radial-gradient(
    circle at 12% 25%,
    rgba(190, 80, 255, 0.025),
    transparent 28%
  ),
  radial-gradient(
    circle at 88% 27%,
    rgba(59, 130, 246, 0.03),
    transparent 29%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f7faf9 100%
  );
}

.aiw-section::before {
content: "";

position: absolute;
inset: 0;
z-index: -2;

pointer-events: none;

background-image:
  linear-gradient(
    rgba(16, 24, 40, 0.025) 1px,
    transparent 1px
  ),
  linear-gradient(
    90deg,
    rgba(16, 24, 40, 0.025) 1px,
    transparent 1px
  );

background-size: 42px 42px;

opacity: 0.55;
}

.aiw-section::after {
content: "";

position: absolute;
left: 50%;
bottom: -210px;
z-index: -1;

width: 850px;
height: 320px;

border-radius: 50%;

background:
  rgba(18, 183, 106, 0.055);

filter: blur(85px);

transform: translateX(-50%);
}

.aiw-shell {
width: 100%;
max-width: 1180px;

margin-inline: auto;
}

/*  SECTION HEADING  */

.aiw-heading {
max-width: 820px;

margin: 0 auto 40px;

text-align: center;
}

.aiw-eyebrow {
display: inline-flex;
align-items: center;

gap: 7px;

min-height: 32px;

padding: 0 12px 0 7px;

border:
  1px solid
  rgba(18, 183, 106, 0.19);

border-radius: 999px;

background:
  rgba(236, 253, 243, 0.82);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.06em;
text-transform: uppercase;
}

.aiw-eyebrow-icon {
width: 24px;
height: 24px;

display: grid;
place-items: center;

border-radius: 50%;

background:
  rgba(18, 183, 106, 0.13);
}

.aiw-heading h2 {

margin: 18px auto 0;

color:
  var(--ink-900, #101828);

font-family:
  var(--font-display, inherit);

font-size:
  clamp(38px, 4.7vw, 41px);

font-weight: 840;

line-height: 1.04;
letter-spacing: -0.05em;
text-wrap-style: balance;
}

.aiw-heading h2 span {
color:
  var(--green-600, #039855);
}

.aiw-heading > p {
max-width: 700px;

margin: 17px auto 0;

color:
  var(--ink-500, #667085);

font-size: 14px;
line-height: 1.7;
}

.aiw-heading-points {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 9px;

margin-top: 19px;
}

.aiw-heading-points span {
display: inline-flex;
align-items: center;

gap: 6px;

min-height: 29px;

padding: 0 10px;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.85);

color:
  var(--ink-500, #667085);

font-size: 9px;
font-weight: 700;
}

.aiw-heading-points i {
width: 6px;
height: 6px;

border-radius: 50%;

background:
  var(--green-500, #12b76a);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.09);
}

/*  AGENT GRID */

.aiw-agent-grid {
display: grid;

grid-template-columns:
  repeat(2, minmax(0, 1fr));

align-items: stretch;
gap: 22px;
}

/*  AGENT CARD  */

.aiw-agent-card {
position: relative;

min-width: 0;

padding: 18px;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.08);

border-radius: 27px;

background:
  rgba(255, 255, 255, 0.94);

box-shadow:
  0 34px 72px -51px
  rgba(16, 24, 40, 0.65);

transition:
  transform 0.28s ease,
  border-color 0.28s ease,
  box-shadow 0.28s ease;
}

.aiw-agent-card:hover {
transform:
  translateY(-4px);

box-shadow:
  0 40px 82px -48px
  rgba(16, 24, 40, 0.62);
}

.aiw-agent-card--revenue:hover {
border-color:
  rgba(190, 80, 255, 0.24);
}

.aiw-agent-card--support:hover {
border-color:
  rgba(59, 130, 246, 0.25);
}

.aiw-card-accent {
position: absolute;
top: 0;
left: 0;
right: 0;

height: 4px;
}

.aiw-agent-card--revenue .aiw-card-accent {
background:
  linear-gradient(
    90deg,
    #c550ff,
    #f0a5ff,
    transparent
  );
}

.aiw-agent-card--support .aiw-card-accent {
background:
  linear-gradient(
    90deg,
    #36a9ff,
    #63ddff,
    transparent
  );
}

/*  CARD HEADER */

.aiw-card-header {
display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;
}

.aiw-agent-identity {
display: flex;
align-items: center;

gap: 10px;

min-width: 0;
}

.aiw-agent-icon {
width: 40px;
height: 40px;

flex: 0 0 40px;

display: grid;
place-items: center;

border-radius: 12px;
}

.aiw-agent-icon--revenue {
background:
  linear-gradient(
    145deg,
    #faefff,
    #f2d9ff
  );

color: #a938d9;
}

.aiw-agent-icon--support {
background:
  linear-gradient(
    145deg,
    #eff8ff,
    #d8f1ff
  );

color: #168bd2;
}

.aiw-agent-identity > div {
min-width: 0;
}

.aiw-agent-identity small {
display: block;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
font-weight: 750;

letter-spacing: 0.06em;
text-transform: uppercase;
}

.aiw-agent-identity b {
display: block;

overflow: hidden;

margin-top: 4px;

color:
  var(--ink-800, #1d2939);

font-size: 12px;
font-weight: 780;

text-overflow: ellipsis;
white-space: nowrap;
}

.aiw-agent-status {
display: inline-flex;
align-items: center;

gap: 6px;

min-height: 26px;

padding: 0 9px;

border:
  1px solid
  rgba(18, 183, 106, 0.14);

border-radius: 999px;

background:
  var(--green-50, #ecfdf3);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.05em;
text-transform: uppercase;
}

.aiw-agent-status i,
.aiw-processing i {
width: 6px;
height: 6px;

border-radius: 50%;

background:
  var(--green-500, #12b76a);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.09);

animation:
  aiwStatusPulse 1.8s ease infinite;
}

/*  METRIC BAND */

.aiw-metric-band {
display: grid;

grid-template-columns:
  minmax(125px, 1.08fr)
  repeat(2, minmax(0, 0.96fr));

gap: 8px;

margin-top: 16px;
padding: 9px;

border-radius: 17px;
}

.aiw-metric-band--revenue {
border:
  1px solid
  rgba(190, 80, 255, 0.16);

background:
  linear-gradient(
    135deg,
    rgba(250, 239, 255, 0.9),
    rgba(255, 255, 255, 0.9)
  );
}

.aiw-metric-band--support {
border:
  1px solid
  rgba(54, 169, 255, 0.17);

background:
  linear-gradient(
    135deg,
    rgba(239, 248, 255, 0.95),
    rgba(255, 255, 255, 0.9)
  );
}

.aiw-primary-metric,
.aiw-secondary-metric {
min-width: 0;

padding: 10px;

border-radius: 12px;

background:
  rgba(255, 255, 255, 0.72);
}

.aiw-primary-metric {
display: flex;
flex-direction: column;
justify-content: center;
}

.aiw-primary-metric strong {
display: block;
font-family: var(--font-display, inherit);
font-size: 30px;
font-weight: 850;
line-height: 0.95;
letter-spacing: -0.055em;
}

.aiw-agent-card--revenue
.aiw-primary-metric strong {
color: #bc4be3;
}

.aiw-agent-card--support
.aiw-primary-metric strong {
color: #269ee7;
}

.aiw-primary-metric span {
display: block;

margin-top: 7px;

color:
  var(--ink-500, #667085);

font-size: 9px;
font-weight: 700;

line-height: 1.35;
}

.aiw-secondary-metric {
border:
  1px solid
  rgba(16, 24, 40, 0.055);
}

.aiw-secondary-metric small {
display: block;

min-height: 22px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
font-weight: 650;

line-height: 1.4;
}

.aiw-secondary-metric b {
display: block;

margin-top: 6px;

color:
  var(--ink-900, #101828);

font-family:
  var(--font-display, inherit);

font-size: 20px;
font-weight: 820;

line-height: 1;
letter-spacing: -0.035em;
}

.aiw-secondary-metric span {
display: block;

margin-top: 5px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
}

/*  DEMO WINDOW  */

.aiw-demo-window {
margin-top: 11px;
padding: 13px;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 19px;
}

.aiw-demo-window--revenue {
background:
  linear-gradient(
    180deg,
    rgba(253, 246, 255, 0.98),
    rgba(250, 241, 255, 0.65)
  );
}

.aiw-demo-window--support {
background:
  linear-gradient(
    180deg,
    rgba(242, 250, 255, 0.98),
    rgba(232, 247, 255, 0.68)
  );
}

.aiw-demo-toolbar {
display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;

padding-bottom: 11px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.06);
}

.aiw-demo-title {
display: flex;
align-items: center;

gap: 8px;

min-width: 0;
}

.aiw-demo-app-icon {
width: 29px;
height: 29px;

flex: 0 0 29px;

display: grid;
place-items: center;

border-radius: 9px;

background:
  rgba(255, 255, 255, 0.85);

color:
  var(--green-700, #027a48);
}

.aiw-demo-title > div {
min-width: 0;
}

.aiw-demo-title b {
display: block;

overflow: hidden;

color:
  var(--ink-700, #344054);

font-size: 9px;
font-weight: 750;

text-overflow: ellipsis;
white-space: nowrap;
}

.aiw-demo-title small {
display: block;

margin-top: 3px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
}

.aiw-processing {
display: inline-flex;
align-items: center;

gap: 6px;

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 750;

white-space: nowrap;
}

/*  CHAT MESSAGES */

.aiw-chat-area {
display: grid;
gap: 9px;

margin-top: 13px;
}

.aiw-chat-row {
display: flex;
align-items: flex-end;

gap: 7px;
}

.aiw-chat-row--agent {
justify-content: flex-end;
}

.aiw-chat-avatar,
.aiw-agent-avatar {
width: 27px;
height: 27px;

flex: 0 0 27px;

display: grid;
place-items: center;

border-radius: 9px;

font-size: 9px;
font-weight: 800;
}

.aiw-chat-avatar {
background:
  #ffffff;

color:
  var(--ink-600, #475467);

box-shadow:
  0 8px 18px -14px
  rgba(16, 24, 40, 0.55);
}

.aiw-agent-avatar {
background:
  var(--green-100, #d1fadf);

color:
  var(--green-700, #027a48);
}

.aiw-message {
max-width: 81%;

padding: 9px 10px;

border-radius: 12px;

color:
  var(--ink-700, #344054);

font-size: 9px;
line-height: 1.5;

box-shadow:
  0 10px 22px -18px
  rgba(16, 24, 40, 0.55);
}

.aiw-message--customer {
border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-bottom-left-radius: 4px;

background:
  rgba(255, 255, 255, 0.94);
}

.aiw-message--agent {
border:
  1px solid
  rgba(18, 183, 106, 0.2);

border-bottom-right-radius: 4px;

background:
  rgba(223, 251, 234, 0.94);
}

/*  LEAD INTELLIGENCE CARD  */

.aiw-intelligence-card {
margin-top: 13px;
padding: 11px;

border:
  1px solid
  rgba(190, 80, 255, 0.18);

border-radius: 15px;

background:
  rgba(255, 255, 255, 0.9);

box-shadow:
  0 15px 32px -27px
  rgba(80, 24, 104, 0.42);
}

.aiw-intelligence-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}

.aiw-lead-profile {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}

.aiw-lead-avatar {
width: 35px;
height: 35px;
flex: 0 0 35px;
display: grid !important;
place-items: center;
border-radius: 11px;
background:linear-gradient(145deg, #f9e8ff, #efd0ff);
color: #a938d9;
font-size: 9px;
font-weight: 850;
}

.aiw-lead-profile > div {
min-width: 0;
}

.aiw-lead-profile b,
.aiw-lead-profile small,
.aiw-lead-profile span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.aiw-lead-profile b {
color: var(--ink-800, #1d2939);
font-size: 9px;
font-weight: 780;
}

.aiw-lead-profile small {
margin-top: 2px;
color: var(--ink-500, #667085);
font-size: 9px;
font-weight: 650;
}

.aiw-lead-profile span {
margin-top: 2px;
color: var(--ink-400, #98a2b3);
font-size: 9px;
}

.aiw-lead-score {
flex: 0 0 auto;
text-align: right;
}

.aiw-lead-score small {
display: block;
color: var(--ink-400, #98a2b3);
font-size: 9px;
}

.aiw-lead-score strong {
display: inline-block;
margin-top: 3px;
color: var(--ink-900, #101828);
font-size: 19px;
font-weight: 830;
line-height: 1;
}

.aiw-lead-score span {
display: inline-flex;
margin-left: 4px;
padding: 3px 6px;
border-radius: 999px;
background: #fff1f2;
color: #e11d48;
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}

.aiw-intelligence-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 10px;
}

.aiw-intelligence-tags span {
padding: 4px 6px;
border-radius: 999px;
background: var(--ink-900, #101828);
color: #ffffff;
font-size: 9px;
font-weight: 700;
}

.aiw-intelligence-details {
display: grid;

grid-template-columns:
  repeat(3, minmax(0, 1fr));

gap: 6px;

margin-top: 10px;
}

.aiw-intelligence-details > div {
min-width: 0;

padding: 7px;

border-radius: 9px;

background:
  rgba(248, 250, 252, 0.9);
}

.aiw-intelligence-details small,
.aiw-intelligence-details b {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.aiw-intelligence-details small {
color:
  var(--ink-400, #98a2b3);

font-size: 9px;
}

.aiw-intelligence-details b {
margin-top: 3px;

color:
  var(--ink-700, #344054);

font-size: 9px;
font-weight: 750;
}

/*  SUPPORT RESOLUTION CARD */

.aiw-resolution-card {
display: grid;

grid-template-columns:
  36px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 9px;

margin-top: 13px;
padding: 10px;

border:
  1px solid
  rgba(54, 169, 255, 0.17);

border-radius: 14px;

background:
  rgba(255, 255, 255, 0.9);

box-shadow:
  0 15px 30px -27px
  rgba(26, 104, 151, 0.42);
}

.aiw-resolution-icon {
width: 36px;
height: 36px;

display: grid;
place-items: center;

border-radius: 11px;

background:
  var(--green-50, #ecfdf3);

color:
  var(--green-700, #027a48);
}

.aiw-resolution-copy {
min-width: 0;
}

.aiw-resolution-copy small,
.aiw-resolution-copy b,
.aiw-resolution-copy span {
display: block;
}

.aiw-resolution-copy small {
color:
  var(--ink-400, #98a2b3);

font-size: 9px;
}

.aiw-resolution-copy b {
margin-top: 3px;

color:
  var(--ink-800, #1d2939);

font-size: 9px;
font-weight: 780;
}

.aiw-resolution-copy span {
overflow: hidden;

margin-top: 3px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;

text-overflow: ellipsis;
white-space: nowrap;
}

.aiw-resolution-time {
text-align: right;
}

.aiw-resolution-time small {
display: block;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
}

.aiw-resolution-time b {
display: block;

margin-top: 3px;

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;
}

/*  CARD BOTTOM COPY  */

.aiw-agent-copy {
padding: 17px 4px 3px;

text-align: center;
}

.aiw-agent-copy h3 {
max-width: 460px;

margin-inline: auto;

color:
  var(--ink-900, #101828);

font-family:
  var(--font-display, inherit);

font-size: 20px;
font-weight: 810;

line-height: 1.2;
letter-spacing: -0.035em;
}

.aiw-agent-copy > p {
max-width: 465px;

margin: 9px auto 0;

color:
  var(--ink-500, #667085);

font-size: 10px;
line-height: 1.65;
}

.aiw-capability-list {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 6px;

margin-top: 13px;
}

.aiw-capability-list span {
display: inline-flex;
align-items: center;

gap: 4px;

min-height: 25px;

padding: 0 8px;

border:
  1px solid
  rgba(16, 24, 40, 0.065);

border-radius: 999px;

background:
  rgba(248, 250, 252, 0.85);

color:
  var(--ink-500, #667085);

font-size: 9px;
font-weight: 700;
}

.aiw-capability-list svg {
color:
  var(--green-600, #039855);
}

.aiw-agent-action {
display: inline-flex;
align-items: center;
justify-content: center;

gap: 7px;

min-height: 41px;

margin-top: 15px;
padding: 0 15px;

border:
  1px solid
  rgba(16, 24, 40, 0.11);

border-radius: 11px;

background:
  var(--ink-900, #101828);

color: #ffffff;

box-shadow:
  0 15px 28px -21px
  rgba(16, 24, 40, 0.68);

font-size: 9.5px;
font-weight: 760;

text-decoration: none;

transition:
  transform 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.aiw-agent-action:hover {
transform:
  translateY(-2px);

background:
  var(--green-700, #027a48);

box-shadow:
  0 20px 34px -20px
  rgba(3, 152, 85, 0.58);
}

.aiw-agent-action svg {
transition:
  transform 0.25s ease;
}

.aiw-agent-action:hover svg {
transform:
  translateX(3px);
}

/*  SHARED CONTEXT STRIP */

.aiw-shared-context {
display: grid;

grid-template-columns:
  50px
  minmax(0, 1fr)
  minmax(280px, auto);

align-items: center;
gap: 16px;

margin-top: 22px;
padding: 17px;

border:
  1px solid
  rgba(18, 183, 106, 0.13);

border-radius: 19px;

background:
  linear-gradient(
    135deg,
    rgba(236, 253, 243, 0.8),
    rgba(255, 255, 255, 0.95)
  );

box-shadow:
  0 22px 45px -38px
  rgba(16, 24, 40, 0.55);
}

.aiw-shared-icon {
width: 50px;
height: 50px;

display: grid;
place-items: center;

border-radius: 15px;

background:
  var(--green-100, #d1fadf);

color:
  var(--green-700, #027a48);
}

.aiw-shared-copy {
min-width: 0;
}

.aiw-shared-copy small {
display: block;

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.06em;
text-transform: uppercase;
}

.aiw-shared-copy h3 {
margin-top: 4px;

color:
  var(--ink-800, #1d2939);

font-size: 13px;
font-weight: 780;

line-height: 1.35;
}

.aiw-shared-copy p {
max-width: 580px;

margin-top: 4px;

color:
  var(--ink-400, #98a2b3);

font-size: 9px;
line-height: 1.5;
}

.aiw-shared-tags {
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;

gap: 6px;
}

.aiw-shared-tags span {
min-height: 26px;

display: inline-flex;
align-items: center;

padding: 0 8px;

border:
  1px solid
  rgba(18, 183, 106, 0.13);

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.9);

color:
  var(--green-700, #027a48);

font-size: 9px;
font-weight: 750;
}

/*  ANIMATIONS */

@keyframes aiwStatusPulse {
50% {
  box-shadow:
    0 0 0 7px
    rgba(18, 183, 106, 0);
}
}

/*  MODERN MARKETING JOURNEY */

.journeyx-section,
.journeyx-section * {
box-sizing: border-box;
}

.journeyx-section {
position: relative;
isolation: isolate;
overflow: hidden;

padding: 92px 0;

background:
  radial-gradient(
    circle at 8% 20%,
    rgba(18, 183, 106, 0.08),
    transparent 28%
  ),
  radial-gradient(
    circle at 92% 78%,
    rgba(46, 144, 250, 0.08),
    transparent 28%
  ),
  var(--surface);
}

.journeyx-section::before {
content: "";

position: absolute;
inset: 0;
z-index: -1;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.06) 0.7px,
    transparent 0.7px
  );

background-size: 25px 25px;
opacity: 0.12;
}

/*  SECTION HEADING */

.journeyx-heading {
max-width: 850px;

margin: 0 auto 42px;

text-align: center;
}

.journeyx-eyebrow {
display: inline-flex;
align-items: center;

gap: 7px;

min-height: 33px;

padding: 0 12px;

border:
  1px solid
  rgba(18, 183, 106, 0.18);

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.journeyx-heading h2 {
max-width: 830px;

margin: 18px auto 0;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size:
  clamp(40px, 4.6vw, 41px);

font-weight: 800;

line-height: 1.05;
letter-spacing: -0.05em;

text-wrap: balance;
}

.journeyx-heading h2 span {
color:
  var(--green-600);
}

.journeyx-heading p {
max-width: 710px;

margin: 17px auto 0;

color:
  var(--ink-500);

font-size: 15px;
line-height: 1.7;
}

/*  MAIN FRAME */

.journeyx-frame {
position: relative;

display: grid;

grid-template-columns:
  minmax(360px, 0.78fr)
  minmax(570px, 1.22fr);

align-items: center;
gap: 40px;

padding: 38px;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.08);

border-radius: 30px;

background:
  radial-gradient(
    circle at 78% 32%,
    rgba(46, 144, 250, 0.13),
    transparent 34%
  ),
  linear-gradient(
    135deg,
    #eef8ff 0%,
    #f8fcff 48%,
    #effaf4 100%
  );

box-shadow:
  0 35px 85px -55px
  rgba(16, 24, 40, 0.65);
}

.journeyx-frame::before {
content: "";

position: absolute;

top: -180px;
right: -140px;

width: 420px;
height: 420px;

border-radius: 50%;

background:
  rgba(18, 183, 106, 0.1);

pointer-events: none;
}

.journeyx-copy,
.journeyx-dashboard {
position: relative;
z-index: 1;

min-width: 0;
}

/*  LEFT CONTENT */

.journeyx-copy-label {
display: inline-flex;
align-items: center;

min-height: 31px;

padding: 0 12px;

border:
  1px solid
  rgba(46, 144, 250, 0.18);

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.78);

color:
  #175cd3;

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.journeyx-copy h3 {
max-width: 520px;
margin: 18px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size:clamp(32px, 3.4vw, 33px);
font-weight: 800;
line-height: 1.09;
letter-spacing: -0.043em;
text-wrap: balance;
}

.journeyx-copy-description {
max-width: 520px;
margin: 16px 0 0;
color:  var(--ink-500);
font-size: 14px;
line-height: 1.7;
}

/*  BENEFITS */

.journeyx-benefits {
display: grid;
gap: 11px;
margin-top: 24px;
}

.journeyx-benefit {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 13px;
border: 1px solid rgba(16, 24, 40, 0.065);
border-radius: 15px;
background: rgba(255, 255, 255, 0.7);
box-shadow:  0 14px 28px -27px rgba(16, 24, 40, 0.5);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.journeyx-benefit:hover {
transform: translateY(-2px);
border-color: var(--green-200);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 20px 35px -27px rgba(16, 24, 40, 0.48);
}

.journeyx-benefit-icon {
width: 44px;
height: 44px;
display: grid;
place-items: center;
border-radius: 13px;
background: var(--green-50);
color: var(--green-700);
}

.journeyx-benefit-icon--blue {
background:
  #eff6ff;

color:
  #2563eb;
}

.journeyx-benefit-icon--amber {
background:
  #fff7e8;

color:
  var(--amber-600);
}

.journeyx-benefit b {
display: block;

color:
  var(--ink-800);

font-size: 13px;
font-weight: 750;

line-height: 1.4;
}

.journeyx-benefit p {
margin: 4px 0 0;

color:
  var(--ink-500);

font-size: 11px;
line-height: 1.55;
}

/*  COPY METRICS */

.journeyx-copy-metrics {
display: grid;

grid-template-columns:
  repeat(3, minmax(0, 1fr));

gap: 9px;

margin-top: 23px;
}

.journeyx-copy-metrics > div {
min-width: 0;

padding: 14px 12px;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 14px;

background:
  rgba(255, 255, 255, 0.82);

box-shadow:
  var(--shadow-sm);
}

.journeyx-copy-metrics strong {
display: block;

color:
  var(--green-700);

font-family:
  var(--font-display);

font-size: 25px;
font-weight: 800;

line-height: 1;
letter-spacing: -0.04em;
}

.journeyx-copy-metrics span {
display: block;

margin-top: 7px;

color:
  var(--ink-500);

font-size: 9px;
font-weight: 650;

line-height: 1.4;
}

/*  ACTIONS */

.journeyx-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 14px;

margin-top: 25px;
}

.journeyx-primary-button {
min-height: 46px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 0 18px;

border-radius: 12px;

background:
  var(--ink-900);

color:
  var(--surface);

box-shadow:
  var(--shadow-md);

font-size: 12px;
font-weight: 750;

text-decoration: none;

transition:
  transform 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.journeyx-primary-button:hover {
transform:
  translateY(-2px);

background:
  var(--green-700);

box-shadow:
  var(--shadow-green);
}

.journeyx-primary-button svg {
transition:
  transform 0.25s ease;
}

.journeyx-primary-button:hover svg {
transform:
  translateX(3px);
}

.journeyx-secure-note {
display: inline-flex;
align-items: center;

gap: 6px;

color:
  var(--ink-500);

font-size: 10px;
font-weight: 650;
}

.journeyx-secure-note svg {
color:
  var(--green-600);
}

/*  DASHBOARD */

.journeyx-dashboard {
overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.085);

border-radius: 24px;

background:
  rgba(255, 255, 255, 0.97);

box-shadow:
  0 34px 76px -50px
  rgba(16, 24, 40, 0.64);
}

/* Dashboard header */

.journeyx-dashboard-header {
display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

padding: 16px 17px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.065);

background:
  rgba(249, 250, 251, 0.84);
}

.journeyx-dashboard-title {
display: flex;
align-items: center;

gap: 10px;

min-width: 0;
}

.journeyx-dashboard-title > span {
width: 39px;
height: 39px;

flex: 0 0 39px;

display: grid;
place-items: center;

border-radius: 12px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.journeyx-dashboard-title > div {
min-width: 0;
}

.journeyx-dashboard-title b,
.journeyx-dashboard-title small {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.journeyx-dashboard-title b {
color:
  var(--ink-800);

font-size: 12px;
font-weight: 750;
}

.journeyx-dashboard-title small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

.journeyx-live {
display: inline-flex;
align-items: center;

gap: 6px;

min-height: 27px;

padding: 0 10px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.05em;
text-transform: uppercase;

white-space: nowrap;
}

.journeyx-live i {
width: 6px;
height: 6px;

border-radius: 50%;

background:
  var(--green-500);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.1);

animation:
  journeyxPulse
  1.8s ease infinite;
}

/* JOURNEY STAGES */

.journeyx-stages {
display: grid;

grid-template-columns:
  repeat(4, minmax(0, 1fr));

gap: 8px;

padding: 13px 15px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.055);

background:
  rgba(249, 250, 251, 0.58);
}

.journeyx-stage {
position: relative;

display: flex;
align-items: center;

gap: 8px;

min-width: 0;

padding: 8px;

border:
  1px solid
  var(--border);

border-radius: 11px;

background:
  var(--surface);
}

.journeyx-stage:not(:last-child)::after {
content: "";

position: absolute;
top: 50%;
right: -9px;
z-index: 3;

width: 9px;
height: 1px;

background:
  var(--green-400);
}

.journeyx-stage > span {
width: 29px;
height: 29px;

flex: 0 0 29px;

display: grid;
place-items: center;

border-radius: 9px;

background:
  var(--ink-100);

color:
  var(--ink-500);

font-size: 9px;
font-weight: 800;
}

.journeyx-stage.active {
border-color:
  var(--green-200);

background:
  var(--green-50);
}

.journeyx-stage.active > span {
background:
  var(--green-100);

color:
  var(--green-700);
}

.journeyx-stage > div {
min-width: 0;
}

.journeyx-stage b,
.journeyx-stage small {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.journeyx-stage b {
color:
  var(--ink-700);

font-size: 9.5px;
font-weight: 750;
}

.journeyx-stage small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

/* DASHBOARD BODY */

.journeyx-dashboard-body {
display: grid;

grid-template-columns:
  minmax(0, 0.94fr)
  minmax(0, 1.06fr);

gap: 12px;

padding: 15px;
}

.journeyx-campaign-card,
.journeyx-chat-card {
min-width: 0;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.075);

border-radius: 17px;

background:
  var(--surface);
}

/*  CAMPAIGN CARD  */

.journeyx-card-topline {
padding: 9px 11px;

border-bottom:
  1px solid
  var(--border);

background:
  var(--ink-50);

color:
  var(--ink-400);

font-size: 9px;
font-weight: 750;

letter-spacing: 0.05em;
text-transform: uppercase;
}

.journeyx-ad-header {
display: grid;

grid-template-columns:
  37px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 9px;

padding: 11px;
}

.journeyx-brand {
width: 37px;
height: 37px;

display: grid;
place-items: center;

border-radius: 50%;

background:
  var(--ink-900);

color:
  var(--surface);

font-size: 10px;
font-weight: 850;
}

.journeyx-ad-header > div {
min-width: 0;
}

.journeyx-ad-header b,
.journeyx-ad-header small {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.journeyx-ad-header b {
color:
  var(--ink-700);

font-size: 10px;
font-weight: 750;
}

.journeyx-ad-header small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

.journeyx-dots {
color:
  var(--ink-400);

font-size: 9px;
letter-spacing: 1px;
}

.journeyx-ad-creative {
position: relative;

min-height: 195px;

overflow: hidden;

padding: 20px 16px;

background:
  radial-gradient(
    circle at 82% 18%,
    rgba(255, 255, 255, 0.78),
    transparent 25%
  ),
  linear-gradient(
    145deg,
    #d6f0ff,
    #dcfae6
  );
}

.journeyx-ad-label,
.journeyx-ad-creative h4,
.journeyx-ad-creative p {
position: relative;
z-index: 2;
}

.journeyx-ad-label {
display: inline-flex;

padding: 5px 8px;

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.82);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.05em;
text-transform: uppercase;
}

.journeyx-ad-creative h4 {
/* max-width: 180px; */
margin: 12px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 20px;
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.035em;
}

.journeyx-ad-creative p {
max-width: 175px;
margin: 8px 0 0;
color: var(--ink-500);
font-size: 9px;
line-height: 1.5;
}

.journeyx-art {
position: absolute;
border-radius: 999px;
background: rgba(255, 255, 255, 0.62);
transform: rotate(-19deg);
}

.journeyx-art--one {
top: 27px;
right: 15px;
width: 95px;
height: 29px;
}

.journeyx-art--two {
top: 77px;
right: 24px;
width: 128px;
height: 40px;
}

.journeyx-art--three {
right: 5px;
bottom: 25px;
width: 90px;
height: 27px;
}

.journeyx-ad-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 11px;
}

.journeyx-ad-footer > div {
min-width: 0;
}

.journeyx-ad-footer small,
.journeyx-ad-footer b {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.journeyx-ad-footer small {
color: var(--ink-400);
font-size: 9px;
}

.journeyx-ad-footer b {
margin-top: 3px;
color: var(--ink-700);
font-size: 9px;
font-weight: 750;
}

.journeyx-message-cta {
display: inline-flex;
align-items: center;
gap: 5px;
min-height: 32px;
padding: 0 9px;
border-radius: 8px;
background: var(--green-500);
color: var(--surface);
font-size: 9px;
font-weight: 800;
white-space: nowrap;
}

.journeyx-source-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 10px 11px;
}

.journeyx-source-tags span {
padding: 5px 7px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--ink-50);
color: var(--ink-500);
font-size: 9px;
font-weight: 700;
}

/* CHAT CARD  */

.journeyx-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 9px;
padding: 11px;
border-bottom: 1px solid var(--border);
background: var(--ink-50);
}

.journeyx-chat-identity {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}

.journeyx-chat-identity > span {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--green-100);
color: var(--green-700);
}

.journeyx-chat-identity > div {
min-width: 0;
}

.journeyx-chat-identity b,
.journeyx-chat-identity small {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.journeyx-chat-identity b {
color: var(--ink-700);
font-size: 10px;
font-weight: 750;
}

.journeyx-chat-identity small {
margin-top: 3px;
color: var(--ink-400);
font-size: 9px;
}

.journeyx-ai-badge {
flex: 0 0 auto;

padding: 5px 8px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;
}

.journeyx-chat-body {
display: grid;
align-content: start;

gap: 9px;

min-height: 309px;

padding: 12px;

background:
  linear-gradient(
    180deg,
    rgba(236, 253, 243, 0.58),
    rgba(255, 255, 255, 0.96)
  );
}

.journeyx-chat-date {
color:
  var(--ink-400);

font-size: 9px;

text-align: center;
}

.journeyx-message {
max-width: 89%;

padding: 9px 10px;

border-radius: 11px;

color:
  var(--ink-700);

font-size: 9.5px;
line-height: 1.52;

overflow-wrap: anywhere;

box-shadow:
  0 10px 20px -17px
  rgba(16, 24, 40, 0.55);
}

.journeyx-message--customer {
justify-self: start;

border-bottom-left-radius: 3px;

background:
  var(--surface);
}

.journeyx-message--agent {
justify-self: end;

border:
  1px solid
  rgba(18, 183, 106, 0.16);

border-bottom-right-radius: 3px;

background:
  var(--green-100);
}

/*  RESULT CARD — NO TEXT CUTTING  */

.journeyx-result-card {
display: grid;
grid-template-columns: minmax(175px, 1fr) minmax(0, 1.15fr) minmax(105px, 118px);
gap: 12px;
align-items: center;
margin: 0 15px 15px;
padding: 15px;
border:1px solid rgba(18, 183, 106, 0.2);
border-radius: 16px;
background: linear-gradient( 135deg, var(--surface), var(--green-50));
box-shadow: var(--shadow-sm);
}

.journeyx-result-person {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
}

.journeyx-avatar {
width: 44px;
height: 44px;

flex: 0 0 44px;

display: grid;
place-items: center;

overflow: visible;

border-radius: 13px;

background:
  var(--green-100);

color:
  var(--green-700);

font-size: 10px;
font-weight: 850;
}

.journeyx-result-person > div {
min-width: 0;
}

.journeyx-result-person small,
.journeyx-result-person b,
.journeyx-result-person p {
display: block;

max-width: 100%;

overflow-wrap: anywhere;
}

.journeyx-result-person small {
color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.045em;
text-transform: uppercase;
}

.journeyx-result-person b {
margin-top: 4px;

color:
  var(--ink-800);

font-size: 11px;
font-weight: 750;

line-height: 1.35;
}

.journeyx-result-person p {
margin: 3px 0 0;
color:  var(--ink-400);
font-size: 9px;
line-height: 1.35;
}

.journeyx-result-tags {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}

.journeyx-result-tags span {
padding: 6px 8px;
border-radius: 999px;
background: var(--ink-900);
color: var(--surface);
font-size: 9px;
font-weight: 700;
white-space: nowrap;
}

.journeyx-score {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 6px;
min-width: 0;
width: 100%;
padding-left: 13px;
border-left:1px solid  var(--green-100);
}

.journeyx-score small,
.journeyx-score strong {
display: block;
}

.journeyx-score small {
color: var(--ink-400);
font-size: 9px;
}

.journeyx-score strong {
margin-top: 3px;
color: var(--green-700);
font-family: var(--font-display);
font-size: 23px;
font-weight: 800;
line-height: 1;
}

.journeyx-score > span {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
padding: 5px 8px;
border-radius: 999px;
background: var(--green-100);
color: var(--green-700);
font-size: 8px;
font-weight: 800;
line-height: 1.2;
white-space: nowrap;
}

/*  DASHBOARD FOOTER  */

.journeyx-dashboard-footer {
display: grid;

grid-template-columns:
  repeat(3, minmax(0, 1fr));

gap: 1px;

border-top:
  1px solid
  var(--border);

background:
  var(--border);
}

.journeyx-dashboard-footer > div {
min-width: 0;

padding: 15px 11px;

background:
  rgba(249, 250, 251, 0.98);

text-align: center;
}

.journeyx-dashboard-footer small,
.journeyx-dashboard-footer b,
.journeyx-dashboard-footer span {
display: block;
}

.journeyx-dashboard-footer small {
color:
  var(--ink-400);

font-size: 9px;
}

.journeyx-dashboard-footer b {
margin-top: 4px;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size: 17px;
font-weight: 800;
}

.journeyx-dashboard-footer span {
margin-top: 4px;

color:
  var(--green-700);

font-size: 9px;
font-weight: 700;
}

/* ANIMATION */

@keyframes journeyxPulse {
50% {
  box-shadow:
    0 0 0 8px
    rgba(18, 183, 106, 0);
}
}

/*  STACK BEFORE CONTENT BECOMES CRAMPED */

/* SALES ACCELERATION SECTION */

.salesx-section,
.salesx-section * {
box-sizing: border-box;
}

.salesx-section {
position: relative;
isolation: isolate;
overflow: hidden;

padding: 92px 0;

background:
  radial-gradient(
    circle at 8% 18%,
    rgba(247, 144, 9, 0.08),
    transparent 29%
  ),
  radial-gradient(
    circle at 92% 76%,
    rgba(18, 183, 106, 0.08),
    transparent 28%
  ),
  var(--surface);
}

.salesx-section::before {
content: "";

position: absolute;
inset: 0;
z-index: -1;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.06) 0.7px,
    transparent 0.7px
  );

background-size: 25px 25px;
opacity: 0.12;
}

/* SECTION HEADING */

.salesx-heading {
max-width: 850px;

margin: 0 auto 42px;

text-align: center;
}

.salesx-eyebrow {
display: inline-flex;
align-items: center;

gap: 7px;

min-height: 33px;

padding: 0 12px;

border:
  1px solid
  rgba(247, 144, 9, 0.2);

border-radius: 999px;

background:
  #fff7e8;

color:
  var(--amber-600);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.salesx-heading h2 {
max-width: 830px;

margin: 18px auto 0;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size:
  clamp(39px, 4.6vw, 41px);

font-weight: 800;

line-height: 1.05;
letter-spacing: -0.048em;

text-wrap: balance;
}

.salesx-heading h2 span {
color:
  var(--green-600);
}

.salesx-heading p {
max-width: 710px;

margin: 17px auto 0;

color:
  var(--ink-500);

font-size: 15px;
line-height: 1.7;
}

/*  MAIN SHELL */

.salesx-shell {
position: relative;

display: grid;

grid-template-columns:
  minmax(360px, 0.8fr)
  minmax(580px, 1.2fr);

align-items: center;
gap: 40px;

padding: 38px;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.08);

border-radius: 30px;

background:
  radial-gradient(
    circle at 82% 28%,
    rgba(18, 183, 106, 0.11),
    transparent 34%
  ),
  linear-gradient(
    135deg,
    #fffaf3 0%,
    #ffffff 45%,
    #effaf4 100%
  );

box-shadow:
  0 36px 84px -56px
  rgba(16, 24, 40, 0.65);
}

.salesx-shell::before {
content: "";

position: absolute;

top: -180px;
left: -150px;

width: 410px;
height: 410px;

border-radius: 50%;

background:
  rgba(247, 144, 9, 0.08);

pointer-events: none;
}

.salesx-copy,
.salesx-workspace {
position: relative;
z-index: 1;

min-width: 0;
}

/*   LEFT COPY */

.salesx-copy-label {
display: inline-flex;
align-items: center;

min-height: 31px;

padding: 0 12px;

border:
  1px solid
  rgba(18, 183, 106, 0.18);

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.82);

color:
  var(--green-700);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.salesx-copy h3 {
max-width: 530px;

margin: 18px 0 0;

color:
  var(--ink-900);

font-family:
  var(--font-display);

font-size:
  clamp(32px, 3.4vw, 35px);

font-weight: 800;

line-height: 1.09;
letter-spacing: -0.043em;

text-wrap: balance;
}

.salesx-description {
max-width: 525px;

margin: 16px 0 0;

color:
  var(--ink-500);

font-size: 14px;
line-height: 1.7;
}

/*  BENEFITS  */

.salesx-benefits {
display: grid;
gap: 10px;

margin-top: 24px;
}

.salesx-benefit {
display: grid;

grid-template-columns:
  43px
  minmax(0, 1fr);

align-items: start;
gap: 12px;

padding: 12px;

border:
  1px solid
  rgba(16, 24, 40, 0.065);

border-radius: 15px;

background:
  rgba(255, 255, 255, 0.72);

transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.salesx-benefit:hover {
transform:
  translateY(-2px);

border-color:
  var(--green-200);

background:
  rgba(255, 255, 255, 0.97);

box-shadow:
  0 18px 35px -28px
  rgba(16, 24, 40, 0.5);
}

.salesx-benefit-icon {
width: 43px;
height: 43px;

display: grid;
place-items: center;

border-radius: 13px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.salesx-benefit-icon--blue {
background:
  #eff6ff;

color:
  #2563eb;
}

.salesx-benefit-icon--amber {
background:
  #fff7e8;

color:
  var(--amber-600);
}

.salesx-benefit-icon--violet {
background:
  #f5f3ff;

color:
  #7c3aed;
}

.salesx-benefit b {
display: block;

color:
  var(--ink-800);

font-size: 13px;
font-weight: 750;

line-height: 1.4;
}

.salesx-benefit p {
margin: 4px 0 0;

color:
  var(--ink-500);

font-size: 11px;
line-height: 1.55;
}

/*   LEFT METRICS  */

.salesx-metrics {
display: grid;

grid-template-columns:
  repeat(3, minmax(0, 1fr));

gap: 9px;

margin-top: 23px;
}

.salesx-metrics > div {
min-width: 0;

padding: 14px 12px;

border:
  1px solid
  rgba(16, 24, 40, 0.07);

border-radius: 14px;

background:
  rgba(255, 255, 255, 0.82);

box-shadow:
  var(--shadow-sm);
}

.salesx-metrics strong {
display: block;

color:
  var(--green-700);

font-family:
  var(--font-display);

font-size: 25px;
font-weight: 800;

line-height: 1;
letter-spacing: -0.04em;
}

.salesx-metrics span {
display: block;

margin-top: 7px;

color:
  var(--ink-500);

font-size: 9px;
font-weight: 650;

line-height: 1.4;
}

/*  ACTIONS */

.salesx-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 14px;

margin-top: 25px;
}

.salesx-primary-button {
min-height: 46px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 0 18px;

border-radius: 12px;

background:
  var(--ink-900);

color:
  var(--surface);

box-shadow:
  var(--shadow-md);

font-size: 12px;
font-weight: 750;
text-decoration: none;
transition:
  transform 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.salesx-primary-button:hover {
transform:
  translateY(-2px);

background:
  var(--green-700);

box-shadow:
  var(--shadow-green);
}

.salesx-primary-button svg {
transition:
  transform 0.25s ease;
}

.salesx-primary-button:hover svg {
transform:
  translateX(3px);
}

.salesx-action-note {
display: inline-flex;
align-items: center;

gap: 6px;

color:
  var(--ink-500);

font-size: 10px;
font-weight: 650;
}

.salesx-action-note svg {
color:
  var(--green-600);
}

/*  SALES WORKSPACE */

.salesx-workspace {
overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.085);

border-radius: 24px;

background:
  rgba(255, 255, 255, 0.98);

box-shadow:
  0 34px 76px -50px
  rgba(16, 24, 40, 0.64);
}

/* Workspace header */

.salesx-workspace-header {
display: flex;
align-items: center;
justify-content: space-between;

gap: 14px;

padding: 16px 17px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.065);

background:
  rgba(249, 250, 251, 0.86);
}

.salesx-workspace-title {
display: flex;
align-items: center;

gap: 10px;

min-width: 0;
}

.salesx-workspace-title > span {
width: 39px;
height: 39px;

flex: 0 0 39px;

display: grid;
place-items: center;

border-radius: 12px;

background:
  var(--green-50);

color:
  var(--green-700);
}

.salesx-workspace-title > div {
min-width: 0;
}

.salesx-workspace-title b,
.salesx-workspace-title small {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.salesx-workspace-title b {
color:
  var(--ink-800);

font-size: 12px;
font-weight: 750;
}

.salesx-workspace-title small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

.salesx-live {
display: inline-flex;
align-items: center;

gap: 6px;

min-height: 27px;

padding: 0 10px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.05em;
text-transform: uppercase;

white-space: nowrap;
}

.salesx-live i {
width: 6px;
height: 6px;

border-radius: 50%;

background:
  var(--green-500);

box-shadow:
  0 0 0 4px
  rgba(18, 183, 106, 0.1);

animation:
  salesxPulse
  1.8s ease infinite;
}

/*  PIPELINE  */

.salesx-pipeline {
display: grid;

grid-template-columns:
  repeat(4, minmax(0, 1fr));

gap: 8px;

padding: 13px 15px;

border-bottom:
  1px solid
  rgba(16, 24, 40, 0.055);

background:
  rgba(249, 250, 251, 0.6);
}

.salesx-stage {
position: relative;

display: flex;
align-items: center;

gap: 8px;

min-width: 0;

padding: 8px;

border:
  1px solid
  var(--border);

border-radius: 11px;

background:
  var(--surface);
}

.salesx-stage:not(:last-child)::after {
content: "";

position: absolute;
top: 50%;
right: -9px;
z-index: 3;

width: 9px;
height: 1px;

background:
  var(--green-400);
}

.salesx-stage > span {
width: 29px;
height: 29px;

flex: 0 0 29px;

display: grid;
place-items: center;

border-radius: 9px;

background:
  var(--ink-100);

color:
  var(--ink-500);

font-size: 9px;
font-weight: 800;
}

.salesx-stage.complete {
border-color:
  var(--green-100);

background:
  var(--green-50);
}

.salesx-stage.complete > span {
background:
  var(--green-100);

color:
  var(--green-700);
}

.salesx-stage.active {
border-color:
  var(--amber-400);

background:
  #fffaf0;

box-shadow:
  0 12px 24px -20px
  rgba(247, 144, 9, 0.7);
}

.salesx-stage.active > span {
background:
  var(--amber-100);

color:
  var(--amber-600);
}

.salesx-stage > div {
min-width: 0;
}

.salesx-stage b,
.salesx-stage small {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.salesx-stage b {
color:
  var(--ink-700);

font-size: 9.5px;
font-weight: 750;
}

.salesx-stage small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

/*  WORKSPACE BODY */

.salesx-workspace-body {
display: grid;

grid-template-columns:
  minmax(0, 1.08fr)
  minmax(210px, 0.92fr);

gap: 12px;

padding: 15px;
}

/*  CHAT CARD  */

.salesx-chat-card {
min-width: 0;

overflow: hidden;

border:
  1px solid
  rgba(16, 24, 40, 0.075);

border-radius: 17px;

background:
  var(--surface);
}

.salesx-chat-header {
display: flex;
align-items: center;
justify-content: space-between;

gap: 9px;

padding: 11px;

border-bottom:
  1px solid
  var(--border);

background:
  var(--ink-50);
}

.salesx-customer {
display: flex;
align-items: center;

gap: 9px;

min-width: 0;
}

.salesx-customer-avatar {
width: 38px;
height: 38px;

flex: 0 0 38px;

display: grid;
place-items: center;

border-radius: 12px;

background:
  var(--green-100);

color:
  var(--green-700);

font-size: 9px;
font-weight: 850;
}

.salesx-customer > div {
min-width: 0;
}

.salesx-customer b,
.salesx-customer small {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.salesx-customer b {
color:
  var(--ink-700);

font-size: 10px;
font-weight: 750;
}

.salesx-customer small {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
}

.salesx-channel {
flex: 0 0 auto;

padding: 5px 8px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;
}

.salesx-chat-body {
display: grid;
align-content: start;

gap: 9px;

min-height: 315px;

padding: 12px;

background:
  linear-gradient(
    180deg,
    rgba(236, 253, 243, 0.58),
    rgba(255, 255, 255, 0.96)
  );
}

.salesx-chat-date {
color:
  var(--ink-400);

font-size: 9px;

text-align: center;
}

.salesx-message {
max-width: 89%;

padding: 9px 10px;

border-radius: 11px;

color:
  var(--ink-700);

font-size: 9.5px;
line-height: 1.52;

overflow-wrap: anywhere;

box-shadow:
  0 10px 20px -17px
  rgba(16, 24, 40, 0.55);
}

.salesx-message--customer {
justify-self: start;

border-bottom-left-radius: 3px;

background:
  var(--surface);
}

.salesx-message--assistant {
justify-self: end;

border:
  1px solid
  rgba(18, 183, 106, 0.17);

border-bottom-right-radius: 3px;

background:
  var(--green-100);
}

/* Quick actions */

.salesx-quick-actions {
display: grid;

grid-template-columns:
  repeat(2, minmax(0, 1fr));

gap: 7px;

padding: 10px;

border-top:
  1px solid
  var(--border);

background:
  var(--ink-50);
}

.salesx-quick-actions span {
min-width: 0;
min-height: 34px;

display: flex;
align-items: center;

gap: 6px;

padding: 0 9px;

border:
  1px solid
  var(--border);

border-radius: 9px;

background:
  var(--surface);

color:
  var(--ink-600);

font-size: 9px;
font-weight: 700;
}

.salesx-quick-actions svg {
flex: 0 0 auto;

color:
  var(--green-700);
}

/*  INTELLIGENCE COLUMN */

.salesx-intelligence {
display: grid;
align-content: start;

gap: 10px;

min-width: 0;
}

/* Lead score */

.salesx-score-card,
.salesx-rep-card,
.salesx-followup-card {
min-width: 0;

border:
  1px solid
  rgba(16, 24, 40, 0.075);

border-radius: 15px;

background:
  var(--surface);

box-shadow:
  var(--shadow-sm);
}

.salesx-score-card {
padding: 12px;
}

.salesx-score-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;

gap: 8px;
}

.salesx-score-heading > div {
min-width: 0;
}

.salesx-score-heading small,
.salesx-score-heading b {
display: block;
}

.salesx-score-heading small {
color:
  var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.045em;
text-transform: uppercase;
}

.salesx-score-heading b {
margin-top: 4px;

color:
  var(--ink-800);

font-size: 10px;
font-weight: 750;

line-height: 1.35;
}

.salesx-score-heading > span {
flex: 0 0 auto;

padding: 5px 7px;

border-radius: 999px;

background:
  var(--ink-900);

color:
  var(--surface);

font-size: 9px;
font-weight: 800;
}

.salesx-score-main {
display: flex;
align-items: center;

gap: 11px;

margin-top: 13px;
}

.salesx-score-main > strong {
color:
  var(--green-700);

font-family:
  var(--font-display);

font-size: 43px;
font-weight: 800;

line-height: 1;
letter-spacing: -0.05em;
}

.salesx-score-main b,
.salesx-score-main span {
display: block;
}

.salesx-score-main b {
color:
  var(--ink-800);

font-size: 10px;
font-weight: 750;
}

.salesx-score-main span {
margin-top: 3px;

color:
  var(--ink-400);

font-size: 9px;
line-height: 1.4;
}

.salesx-score-progress {
height: 7px;

margin-top: 12px;

overflow: hidden;

border-radius: 999px;

background:
  var(--ink-100);
}

.salesx-score-progress i {
display: block;

width: 91%;
height: 100%;

border-radius: inherit;

background:
  linear-gradient(
    90deg,
    var(--green-500),
    var(--green-400)
  );
}

.salesx-score-details {
display: grid;

grid-template-columns:
  repeat(2, minmax(0, 1fr));

gap: 7px;

margin-top: 12px;
}

.salesx-score-details > div {
min-width: 0;

padding: 8px;

border-radius: 9px;

background:
  var(--ink-50);
}

.salesx-score-details small,
.salesx-score-details b {
display: block;

overflow-wrap: anywhere;
}

.salesx-score-details small {
color:
  var(--ink-400);

font-size: 9px;
}

.salesx-score-details b {
margin-top: 3px;

color:
  var(--ink-700);

font-size: 9px;
font-weight: 750;
}

/* Assigned representative */

.salesx-rep-card {
display: grid;

grid-template-columns:
  39px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 9px;

padding: 11px;
}

.salesx-rep-avatar {
width: 39px;
height: 39px;

display: grid;
place-items: center;

border-radius: 12px;

background:
  #eff6ff;

color:
  #2563eb;

font-size: 9px;
font-weight: 850;
}

.salesx-rep-details {
min-width: 0;
}

.salesx-rep-details small,
.salesx-rep-details b,
.salesx-rep-details span {
display: block;

overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.salesx-rep-details small {
color:
  var(--ink-400);

font-size: 9px;
}

.salesx-rep-details b {
margin-top: 3px;

color:
  var(--ink-800);

font-size: 9px;
font-weight: 750;
}

.salesx-rep-details span {
margin-top: 2px;

color:
  var(--ink-400);

font-size: 9px;
}

.salesx-rep-status {
padding: 5px 7px;

border-radius: 999px;

background:
  var(--green-50);

color:
  var(--green-700);

font-size: 9px;
font-weight: 800;
}

/* Follow-up card */

.salesx-followup-card {
display: grid;

grid-template-columns:
  39px
  minmax(0, 1fr);

align-items: center;
gap: 9px;

padding: 11px;
}

.salesx-followup-card > span {
width: 39px;
height: 39px;

display: grid;
place-items: center;

border-radius: 12px;

background:
  #fff7e8;

color:
  var(--amber-600);
}

.salesx-followup-card small,
.salesx-followup-card b,
.salesx-followup-card p {
display: block;
}

.salesx-followup-card small {
color:
  var(--ink-400);

font-size: 9px;
}

.salesx-followup-card b {
margin-top: 3px;

color:
  var(--ink-800);

font-size: 9px;
font-weight: 750;
}

.salesx-followup-card p {
margin: 3px 0 0;

color:
  var(--green-700);

font-size: 9px;
font-weight: 700;
}

/*  WORKSPACE FOOTER  */

.salesx-workspace-footer {
display: grid;

grid-template-columns:
  minmax(0, 1fr)
  auto
  auto;

align-items: center;
gap: 20px;

padding: 13px 15px;

border-top:
  1px solid
  var(--border);

background:
  var(--ink-50);
}

.salesx-team {
display: flex;
align-items: center;

min-width: 0;
}

.salesx-team > span {
width: 29px;
height: 29px;

display: grid;
place-items: center;

margin-right: -7px;

border:
  2px solid
  var(--surface);

border-radius: 50%;

background:
  var(--green-100);

color:
  var(--green-700);

font-size: 9px;
font-weight: 850;
}

.salesx-team > span:nth-child(2) {
background:
  #dbeafe;

color:
  #2563eb;
}

.salesx-team > span:nth-child(3) {
background:
  var(--amber-100);

color:
  var(--amber-600);
}

.salesx-team p {
margin-left: 14px;

color:
  var(--ink-400);

font-size: 9px;
}

.salesx-team p b {
color:
  var(--ink-700);

font-weight: 750;
}

.salesx-footer-stat {
text-align: right;
}

.salesx-footer-stat small,
.salesx-footer-stat b {
display: block;
}

.salesx-footer-stat small {
color:
  var(--ink-400);

font-size: 9px;
}

.salesx-footer-stat b {
margin-top: 3px;

color:
  var(--ink-800);

font-size: 11px;
font-weight: 800;
}

/*  ANIMATION */

@keyframes salesxPulse {
50% {
  box-shadow:
    0 0 0 8px
    rgba(18, 183, 106, 0);
}
}

/*  STACK BEFORE CONTENT GETS CRAMPED  */





/*  WORKSPACE  FRAME  */

.salesx-pro .salesx-workspace {
position: relative;

overflow: hidden;

border:
  1px solid
  rgba(18, 183, 106, 0.16);

border-radius: 26px;

background:
  linear-gradient(
    150deg,
    var(--surface),
    var(--green-50)
  );

box-shadow:
  0 35px 78px -50px
  rgba(16, 24, 40, 0.62);
}

.salesx-pro .salesx-workspace::before {
content: "";

position: absolute;
top: -110px;
right: -100px;

width: 270px;
height: 270px;

border-radius: 50%;

background:
  rgba(18, 183, 106, 0.08);

pointer-events: none;
}

.salesx-pro .salesx-workspace-header,
.salesx-pro .salesx-pipeline,
.salesx-pro .salesx-workspace-body,
.salesx-pro .salesx-workspace-footer {
position: relative;
z-index: 1;
}

.salesx-pro .salesx-workspace-header {
padding: 17px 18px;

background:
  rgba(255, 255, 255, 0.88);

backdrop-filter:
  blur(12px);
}

.salesx-pro .salesx-workspace-title > span {
box-shadow:
  inset 0 0 0 1px
  var(--green-100),
  0 13px 24px -18px
  rgba(3, 152, 85, 0.65);
}

/*  PIPELINE */

.salesx-pro .salesx-pipeline {
gap: 9px;

padding: 15px;

background:
  rgba(249, 250, 251, 0.74);
}

.salesx-pro .salesx-stage {
min-height: 60px;

padding: 10px;

border-radius: 13px;

transition:
  opacity 0.5s ease,
  transform 0.5s ease,
  border-color 0.32s ease,
  background 0.32s ease,
  box-shadow 0.32s ease;
}

.salesx-pro.salesx-enhanced
.salesx-stage {
opacity: 0;

transform:
  translateY(11px);
}

.salesx-pro.salesx-enhanced
.salesx-stage.is-visible {
opacity: 1;

transform:
  translateY(0);
}

.salesx-pro .salesx-stage.complete {
border-color:
  var(--green-200);

background:
  linear-gradient(
    145deg,
    var(--green-50),
    var(--surface)
  );
}

.salesx-pro .salesx-stage.active {
border-color:
  var(--amber-400);

background:
  linear-gradient(
    145deg,
    #fff7e8,
    var(--surface)
  );

box-shadow:
  0 17px 32px -24px
  rgba(247, 144, 9, 0.7);
}

/*  CHAT CARD */

.salesx-pro .salesx-chat-card {
overflow: hidden;

border-radius: 18px;

background:
  var(--surface);

box-shadow:
  0 19px 40px -32px
  rgba(16, 24, 40, 0.55);
}

.salesx-pro .salesx-chat-header {
padding: 12px;

background:
  linear-gradient(
    90deg,
    var(--ink-50),
    var(--green-50)
  );
}

.salesx-pro .salesx-chat-body {
position: relative;

display: grid;
align-content: start;

gap: 12px;

min-height: 340px;

padding: 16px;


overflow: hidden;

background:
  radial-gradient(
    circle at 84% 16%,
    rgba(18, 183, 106, 0.1),
    transparent 26%
  ),
  linear-gradient(
    180deg,
    var(--green-50),
    var(--surface)
  );
}

.salesx-pro .salesx-chat-body::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(18, 183, 106, 0.1) 0.7px,
    transparent 0.7px
  );

background-size:
  22px 22px;

opacity: 0.2;
}

.salesx-pro .salesx-chat-date,
.salesx-pro .salesx-message {
position: relative;
z-index: 1;
}

.salesx-pro .salesx-chat-date {
font-size: 9px;
}

/* Shared message safety */

.salesx-pro .salesx-message {
width: fit-content;

max-width:
  min(
    88%,
    calc(100% - 20px)
  );

padding: 11px 12px;

border-radius: 14px;

font-size: 10px;
line-height: 1.55;

overflow-wrap: anywhere;
word-break: normal;

opacity: 1;

transition:
  opacity 0.58s ease,
  transform 0.58s
  cubic-bezier(
    0.22,
    1,
    0.36,
    1
  ),
  filter 0.58s ease,
  box-shadow 0.3s ease;
}


.salesx-pro.salesx-enhanced
.salesx-message--customer {
opacity: 0;

filter:
  blur(2px);

transform:
  translateX(-28px);
}

.salesx-pro.salesx-enhanced
.salesx-message--customer.is-visible {
opacity: 1;

filter:
  blur(0);

transform:
  translateX(0);
}

.salesx-pro .salesx-message--customer {
justify-self: start;

border:
  1px solid
  var(--border);

border-bottom-left-radius: 4px;

background:
  rgba(255, 255, 255, 0.98);

box-shadow:
  0 15px 28px -23px
  rgba(16, 24, 40, 0.52);
}

.salesx-pro.salesx-enhanced
.salesx-message--assistant {
opacity: 0;

filter:
  blur(2px);

transform:
  translateX(28px);
}

.salesx-pro.salesx-enhanced
.salesx-message--assistant.is-visible {
opacity: 1;

filter:
  blur(0);

transform:
  translateX(0);
}

.salesx-pro .salesx-message--assistant {
justify-self: end;

border:
  1px solid
  var(--green-200);

border-bottom-right-radius: 4px;

background:
  linear-gradient(
    145deg,
    var(--green-100),
    var(--green-50)
  );

box-shadow:
  0 16px 30px -23px
  rgba(3, 152, 85, 0.46);
}

/*  QUICK ACTIONS */

.salesx-pro .salesx-quick-actions {
gap: 8px;

padding: 11px;

background:
  rgba(249, 250, 251, 0.92);
}

.salesx-pro .salesx-quick-actions span {
min-height: 38px;

border-radius: 10px;

font-size: 9px;

transition:
  transform 0.22s ease,
  border-color 0.22s ease,
  background 0.22s ease,
  color 0.22s ease;
}

.salesx-pro .salesx-quick-actions span:hover {
transform:
  translateY(-2px);

border-color:
  var(--green-200);

background:
  var(--green-50);

color:
  var(--green-700);
}

/*  QUALIFICATION CARD */

.salesx-pro .salesx-score-card {
padding: 14px;

overflow: hidden;

border-color:
  var(--green-100);

border-radius: 17px;

background:
  radial-gradient(
    circle at 95% 5%,
    rgba(18, 183, 106, 0.1),
    transparent 34%
  ),
  var(--surface);
}

.salesx-pro .salesx-score-main {
margin-top: 15px;
}

.salesx-pro .salesx-score-main > strong {
position: relative;

color:
  var(--green-700);

font-size: 40px;

text-shadow: none;
}

.salesx-pro .salesx-score-progress {
height: 9px;

margin-top: 14px;

overflow: hidden;

border:
  1px solid
  var(--green-100);

border-radius: 999px;

background:
  var(--green-50);
}

.salesx-pro .salesx-score-progress i {
position: relative;

display: block;

width: 0;
height: 100%;

overflow: hidden;

border-radius: inherit;

background:
  linear-gradient(
    90deg,
    var(--green-700),
    var(--green-400)
  );

box-shadow:
  0 0 14px
  rgba(18, 183, 106, 0.35);

transition:
  width 1.8s
  cubic-bezier(
    0.22,
    1,
    0.36,
    1
  );
}

.salesx-pro .salesx-score-progress i::after {
content: "";

position: absolute;
top: 0;
bottom: 0;
left: -40%;

width: 35%;

background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );

transform:
  skewX(-18deg);

animation:
  salesxProgressShine
  1.4s ease 1.4s
  both;
}

.salesx-pro .salesx-score-details {
gap: 8px;

margin-top: 14px;
}

.salesx-pro .salesx-score-details > div {
padding: 10px;

border:
  1px solid
  rgba(16, 24, 40, 0.04);

background:
  linear-gradient(
    145deg,
    var(--ink-50),
    var(--surface)
  );
}

/*   METRICS  */

.salesx-pro .salesx-metrics {
gap: 10px;
}

.salesx-pro .salesx-metrics > div {
position: relative;

min-height: 92px;

display: flex;
flex-direction: column;
justify-content: center;

padding: 16px 15px;

overflow: hidden;

border:
  1px solid
  var(--border);

border-radius: 17px;

background:
  linear-gradient(
    145deg,
    var(--surface),
    var(--green-50)
  );

box-shadow:
  0 17px 35px -30px
  rgba(16, 24, 40, 0.55);
}

.salesx-pro .salesx-metrics > div::before {
content: "";

position: absolute;
top: 0;
left: 15px;
right: 15px;

height: 3px;

border-radius:
  0 0 999px 999px;

background:
  linear-gradient(
    90deg,
    var(--green-600),
    var(--green-400)
  );
}


.salesx-pro .salesx-metrics span {
margin-top: 8px;

color:
  var(--ink-600);

font-size: 10px;
font-weight: 700;
}

/*  SMALL CARDS  */

.salesx-pro .salesx-rep-card,
.salesx-pro .salesx-followup-card {
padding: 13px;

border-radius: 16px;

transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

.salesx-pro .salesx-rep-card:hover,
.salesx-pro .salesx-followup-card:hover {
transform:
  translateY(-2px);

border-color:
  var(--green-200);

box-shadow:
  0 18px 34px -27px
  rgba(16, 24, 40, 0.52);
}

/*   ANIMATION */

@keyframes salesxProgressShine {
from {
  left: -40%;
}

to {
  left: 120%;
}
}

/* SUPPORT INTELLIGENCE ECOSYSTEM */

.assistmesh-section,
.assistmesh-section * {
box-sizing: border-box;
}

.assistmesh-section {
position: relative;
isolation: isolate;
overflow: hidden;

padding: 88px 0;

background:
  radial-gradient(
    circle at 9% 20%,
    rgba(18, 183, 106, 0.07),
    transparent 28%
  ),
  radial-gradient(
    circle at 91% 80%,
    rgba(46, 144, 250, 0.07),
    transparent 28%
  ),
  var(--surface);
}

.assistmesh-section::before {
content: "";

position: absolute;
inset: 0;
z-index: -1;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.055) 0.7px,
    transparent 0.7px
  );

background-size: 25px 25px;
opacity: 0.12;
}

/* HEADING  */

.assistmesh-heading {
max-width: 830px;

margin: 0 auto 40px;

text-align: center;
}

.assistmesh-eyebrow {
display: inline-flex;
align-items: center;

gap: 7px;

min-height: 33px;

padding: 0 12px;

border: 1px solid var(--green-100);
border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.assistmesh-heading h2 {
max-width: 810px;

margin: 18px auto 0;

color: var(--ink-900);

font-family: var(--font-display);
font-size: clamp(38px, 4.4vw, 41px);
font-weight: 800;

line-height: 1.06;
letter-spacing: -0.047em;

text-wrap: balance;
}

.assistmesh-heading h2 span {
color: var(--green-600);
}

.assistmesh-heading p {
max-width: 690px;

margin: 16px auto 0;

color: var(--ink-500);

font-size: 15px;
line-height: 1.7;
}

/*  MAIN BOARD  */

.assistmesh-board {
position: relative;
overflow: hidden;

padding: 22px;

border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 28px;

background:
  radial-gradient(
    circle at 50% 44%,
    rgba(18, 183, 106, 0.1),
    transparent 31%
  ),
  linear-gradient(
    145deg,
    var(--ink-50),
    var(--surface) 50%,
    var(--green-50)
  );

box-shadow:
  0 36px 84px -57px
  rgba(16, 24, 40, 0.66);
}

/*  BENTO GRID  */

.assistmesh-grid {
display: grid;

grid-template-columns:
  repeat(12, minmax(0, 1fr));

grid-template-rows:
  auto auto;

gap: 13px;
}

.assistmesh-card,
.assistmesh-core {
position: relative;
min-width: 0;
overflow: hidden;

border: 1px solid var(--border);
border-radius: 19px;

background: rgba(255, 255, 255, 0.94);

box-shadow:
  0 22px 45px -37px
  rgba(16, 24, 40, 0.6);
}

.assistmesh-card {
padding: 17px;
}

.assistmesh-card--knowledge {
grid-column: 1 / span 3;
grid-row: 1;
}

.assistmesh-core {
grid-column: 4 / span 6;
grid-row: 1 / span 2;
}

.assistmesh-card--routing {
grid-column: 10 / span 3;
grid-row: 1;
}

.assistmesh-card--inbox {
grid-column: 1 / span 3;
grid-row: 2;
}

.assistmesh-card--handoff {
grid-column: 10 / span 3;
grid-row: 2;
}

/*  SHARED CARDS */

.assistmesh-card-head {
display: flex;
align-items: center;
justify-content: space-between;

gap: 10px;
}

.assistmesh-card-icon {
width: 41px;
height: 41px;

display: grid;
place-items: center;

border-radius: 12px;

background: var(--green-50);
color: var(--green-700);
}

.assistmesh-card-icon--amber {
background: var(--amber-100);
color: var(--amber-600);
}

.assistmesh-card-icon--blue {
background: #eff6ff;
color: #2563eb;
}

.assistmesh-card-icon--violet {
background: #f5f3ff;
color: #7c3aed;
}

.assistmesh-card-status {
padding: 6px 8px;

border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-weight: 800;

white-space: nowrap;
}

.assistmesh-card-status--amber {
background: var(--amber-100);
color: var(--amber-600);
}

.assistmesh-card-status--blue {
background: #eff6ff;
color: #2563eb;
}

.assistmesh-card-status--violet {
background: #f5f3ff;
color: #7c3aed;
}

.assistmesh-card > h3 {
margin: 15px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 18px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.025em;
}

.assistmesh-card > p {
margin: 8px 0 0;
color: var(--ink-500);
font-size: 10px;
line-height: 1.55;
}

/*  KNOWLEDGE SOURCES  */

.assistmesh-source-list {
display: grid;
gap: 7px;
margin-top: 15px;
}

.assistmesh-source-list > div {
display: grid;
grid-template-columns: 27px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 8px;
border-radius: 10px;
background: var(--ink-50);
}

.assistmesh-source-list > div > span {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 8px;
background: var(--surface);
color: var(--ink-500);
font-size: 9px;
font-weight: 800;
}

.assistmesh-source-list p {
min-width: 0;
color: var(--ink-400);
font-size: 9px;
line-height: 1.35;
}

.assistmesh-source-list p b {
display: block;
margin-bottom: 2px;
color: var(--ink-700);
font-size: 9px;
font-weight: 750;
}

.assistmesh-source-list i {
padding: 4px 6px;
border-radius: 999px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-style: normal;
font-weight: 800;
}

/*  CENTRAL AI CORE  */

.assistmesh-core {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 550px;
padding: 24px;
border-color: rgba(18, 183, 106, 0.18);
background:
  radial-gradient(
    circle at 50% 42%,
    rgba(18, 183, 106, 0.18),
    transparent 31%
  ),
  linear-gradient(
    155deg,
    var(--surface),
    var(--green-50)
  );
}

.assistmesh-core-background {
position: absolute;
inset: 0;
pointer-events: none;
}

.assistmesh-core-background span {
position: absolute;
border: 1px solid rgba(18, 183, 106, 0.12);
border-radius: 50%;
}

.assistmesh-core-background span:nth-child(1) {
top: 50%;
left: 50%;
width: 330px;
height: 330px;
transform: translate(-50%, -50%);
}

.assistmesh-core-background span:nth-child(2) {
top: 50%;
left: 50%;
width: 245px;
height: 245px;
transform: translate(-50%, -50%);
}

.assistmesh-core-background span:nth-child(3) {
top: 50%;
left: 50%;
width: 160px;
height: 160px;
transform: translate(-50%, -50%);
}

.assistmesh-core-top,
.assistmesh-core-center,
.assistmesh-core-copy,
.assistmesh-core-result {
position: relative;
z-index: 1;
}

.assistmesh-core-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

.assistmesh-core-label {
padding: 7px 10px;
border-radius: 999px;
background: var(--ink-900);
color: var(--surface);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.045em;
text-transform: uppercase;
}

.assistmesh-core-live {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border: 1px solid var(--green-100);
border-radius: 999px;
background: var(--surface);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
text-transform: uppercase;
}

.assistmesh-core-live i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.11);
animation: assistmeshPulse 1.8s ease infinite;
}

.assistmesh-core-center {
width: 188px;
height: 188px;
display: grid;
place-items: center;
margin: 20px auto;
}

.assistmesh-core-orbit {
position: absolute;
inset: 0;
border: 1px dashed var(--green-200);
border-radius: 50%;
animation: assistmeshRotate 18s linear infinite;
}

.assistmesh-orbit-dot {
position: absolute;
width: 12px;
height: 12px;
border: 3px solid var(--surface);
border-radius: 50%;
background: var(--green-500);
box-shadow: var(--shadow-sm);
}

.assistmesh-orbit-dot--one {
top: 5px;
left: 50%;
}

.assistmesh-orbit-dot--two {
right: 8px;
bottom: 28px;
}

.assistmesh-orbit-dot--three {
left: 3px;
bottom: 45px;
background: var(--amber-500);
}

.assistmesh-core-icon {
width: 98px;
height: 98px;
display: grid;
place-items: center;
border: 1px solid var(--green-200);
border-radius: 30px;
background: var(--surface);
color: var(--green-700);
box-shadow: 0 24px 45px -30px rgba(3, 152, 85, 0.6);
}

.assistmesh-core-copy {
max-width: 480px;
margin-inline: auto;
text-align: center;
}

.assistmesh-core-copy h3 {
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(25px, 2.5vw, 31px);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.035em;
}

.assistmesh-core-copy p {
max-width: 430px;
margin: 10px auto 0;
color: var(--ink-500);
font-size: 11px;
line-height: 1.6;
}

.assistmesh-core-result {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 20px;
}

.assistmesh-core-result > div {
min-width: 0;
padding: 12px;
border: 1px solid var(--green-100);
border-radius: 13px;
background: rgba(255, 255, 255, 0.82);
text-align: center;
}

.assistmesh-core-result small,
.assistmesh-core-result strong {
display: block;
}

.assistmesh-core-result small {
color: var(--ink-400);
font-size: 9px;
}

.assistmesh-core-result strong {
margin-top: 5px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 17px;
font-weight: 800;
}

/*  ROUTING MAP */

.assistmesh-routing-map {
display: grid;
gap: 8px;

margin-top: 15px;
}

.assistmesh-routing-request {
display: grid;

grid-template-columns:
  34px
  minmax(0, 1fr);

align-items: center;
gap: 8px;

padding: 9px;

border: 1px solid var(--border);
border-radius: 11px;

background: var(--ink-50);
}

.assistmesh-routing-request > span {
width: 34px;
height: 34px;

display: grid;
place-items: center;

border-radius: 10px;

background: var(--surface);
color: var(--amber-600);
}

.assistmesh-routing-request p {
color: var(--ink-400);

font-size: 9px;
}

.assistmesh-routing-request p b {
display: block;

margin-bottom: 3px;

color: var(--ink-700);

font-size: 9px;
}

.assistmesh-routing-line {
position: relative;

width: 2px;
height: 19px;

margin-inline: auto;

background: var(--amber-400);
}

.assistmesh-routing-line i {
position: absolute;
bottom: -2px;
left: 50%;

width: 7px;
height: 7px;

border-radius: 50%;

background: var(--amber-500);

transform: translateX(-50%);
}

.assistmesh-routing-results {
display: grid;

grid-template-columns:
  repeat(2, minmax(0, 1fr));

gap: 7px;
}

.assistmesh-routing-results > div {
display: grid;

grid-template-columns:
  30px
  minmax(0, 1fr);

align-items: center;
gap: 7px;

padding: 8px;

border: 1px solid var(--border);
border-radius: 10px;

background: var(--surface);
}

.assistmesh-routing-results > div > span {
width: 30px;
height: 30px;

display: grid;
place-items: center;

border-radius: 9px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-weight: 850;
}

.assistmesh-routing-results > div:last-child > span {
background: var(--amber-100);
color: var(--amber-600);
}

.assistmesh-routing-results p {
color: var(--ink-400);

font-size: 9px;
line-height: 1.35;
}

.assistmesh-routing-results p b {
display: block;

margin-bottom: 2px;

color: var(--ink-700);

font-size: 9px;
}

/*  TICKET LIST  */

.assistmesh-ticket-list {
display: grid;
gap: 7px;

margin-top: 15px;
}

.assistmesh-ticket {
display: grid;

grid-template-columns:
  32px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 8px;

padding: 8px;

border: 1px solid var(--border);
border-radius: 10px;

background: var(--ink-50);
}

.assistmesh-ticket--urgent {
border-color: rgba(247, 144, 9, 0.3);
background: #fffaf0;
}

.assistmesh-ticket-avatar {
width: 32px;
height: 32px;

display: grid;
place-items: center;

border-radius: 10px;

background: var(--green-100);
color: var(--green-700);

font-size: 9px;
font-weight: 850;
}

.assistmesh-ticket-avatar--blue {
background: #dbeafe;
color: #2563eb;
}

.assistmesh-ticket-avatar--amber {
background: var(--amber-100);
color: var(--amber-600);
}

.assistmesh-ticket p {
color: var(--ink-400);

font-size: 9px;
}

.assistmesh-ticket p b {
display: block;

margin-bottom: 2px;

color: var(--ink-700);

font-size: 9px;
}

.assistmesh-ticket > strong {
color: var(--ink-400);

font-size: 9px;
}

/*  HUMAN HANDOFF */

.assistmesh-agent {
display: grid;

grid-template-columns:
  42px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 9px;

margin-top: 15px;
padding: 10px;

border: 1px solid var(--border);
border-radius: 12px;

background: var(--ink-50);
}

.assistmesh-agent-avatar {
width: 42px;
height: 42px;

display: grid;
place-items: center;

border-radius: 12px;

background: #f5f3ff;
color: #7c3aed;

font-size: 9px;
font-weight: 850;
}

.assistmesh-agent small,
.assistmesh-agent b,
.assistmesh-agent p {
display: block;
}

.assistmesh-agent small {
color: var(--ink-400);

font-size: 9px;
}

.assistmesh-agent b {
margin-top: 3px;

color: var(--ink-800);

font-size: 9px;
}

.assistmesh-agent p {
margin: 2px 0 0;

color: var(--ink-400);

font-size: 9px;
}

.assistmesh-agent-state {
padding: 5px 7px;

border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-weight: 800;
}

.assistmesh-context-list {
display: grid;
gap: 6px;

margin-top: 10px;
}

.assistmesh-context-list span {
position: relative;

padding: 7px 8px 7px 26px;

border-radius: 9px;

background: var(--ink-50);
color: var(--ink-600);

font-size: 9px;
font-weight: 700;
}

.assistmesh-context-list span::before {
content: "✓";

position: absolute;
top: 50%;
left: 9px;

color: var(--green-600);

transform: translateY(-50%);
}

/*  FOOTER */

.assistmesh-footer {
display: grid;

grid-template-columns:
  minmax(0, 1fr)
  auto
  auto;

align-items: center;
gap: 20px;

margin-top: 13px;
padding: 16px;

border: 1px solid var(--border);
border-radius: 17px;

background: rgba(255, 255, 255, 0.88);
}

.assistmesh-metrics {
display: grid;

grid-template-columns:
  repeat(3, minmax(0, 1fr));

gap: 8px;

min-width: 0;
}

.assistmesh-metrics > div {
min-width: 0;

padding-right: 14px;

border-right: 1px solid var(--border);
}

.assistmesh-metrics > div:last-child {
border-right: 0;
}

.assistmesh-metrics strong,
.assistmesh-metrics span {
display: block;
}

.assistmesh-metrics strong {
color: var(--green-700);

font-family: var(--font-display);
font-size: 24px;
font-weight: 800;

line-height: 1;
}

.assistmesh-metrics span {
margin-top: 6px;

color: var(--ink-500);

font-size: 9px;
font-weight: 700;
}

.assistmesh-capabilities {
display: flex;
flex-wrap: wrap;

gap: 6px;

max-width: 255px;
}

.assistmesh-capabilities span {
padding: 6px 8px;

border: 1px solid var(--green-100);
border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-weight: 800;

text-transform: uppercase;
}

.assistmesh-button {
min-height: 44px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 0 16px;

border-radius: 12px;

background: var(--ink-900);
color: var(--surface);

box-shadow: var(--shadow-md);

font-size: 11px;
font-weight: 750;
text-decoration: none;

white-space: nowrap;

transition:
  transform 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.assistmesh-button:hover {
transform: translateY(-2px);

background: var(--green-700);
box-shadow: var(--shadow-green);
}

.assistmesh-button svg {
transition: transform 0.25s ease;
}

.assistmesh-button:hover svg {
transform: translateX(3px);
}

/*  ANIMATIONS */

@keyframes assistmeshPulse {
50% {
  box-shadow:
    0 0 0 10px
    rgba(18, 183, 106, 0);
}
}

@keyframes assistmeshRotate {
to {
  transform: rotate(360deg);
}
}

/* Integration network */

.wmstack-section,
.wmstack-section * {
box-sizing: border-box;
}

.wmstack-section {
position: relative;
isolation: isolate;
overflow: hidden;

padding: 88px 0;

background:
  radial-gradient(
    circle at 8% 18%,
    rgba(18, 183, 106, 0.07),
    transparent 28%
  ),
  radial-gradient(
    circle at 92% 82%,
    rgba(79, 70, 229, 0.08),
    transparent 28%
  ),
  var(--surface);
}

.wmstack-section::before {
content: "";

position: absolute;
inset: 0;
z-index: -1;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.055) 0.7px,
    transparent 0.7px
  );

background-size: 25px 25px;
opacity: 0.12;
}

/* HEADING */

.wmstack-heading {

margin: 0 auto 42px;

text-align: center;
}

.wmstack-eyebrow {
display: inline-flex;
align-items: center;

gap: 7px;

min-height: 33px;

padding: 0 12px;

border: 1px solid rgba(79, 70, 229, 0.16);
border-radius: 999px;

background: #f5f3ff;
color: #4f46e5;

font-size: 10px;
font-weight: 800;

letter-spacing: 0.055em;
text-transform: uppercase;
}

.wmstack-heading h2 {

margin: 18px auto 0;

color: var(--ink-900);

font-family: var(--font-display);
font-size: clamp(38px, 4.5vw, 41px);
font-weight: 800;

line-height: 1.06;
letter-spacing: -0.048em;

text-wrap: balance;
}

.wmstack-heading h2 span {
color: var(--green-600);
}

.wmstack-heading p {
max-width: 710px;

margin: 16px auto 0;

color: var(--ink-500);

font-size: 15px;
line-height: 1.7;
}

/*  NETWORK CONTAINER */

.wmstack-network {
position: relative;

display: grid;

grid-template-columns:
  minmax(230px, 1fr)
  minmax(310px, 370px)
  minmax(230px, 1fr);

align-items: center;
gap: 72px;

padding: 34px;

overflow: hidden;

border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 30px;

background:
  radial-gradient(
    circle at 50% 50%,
    rgba(79, 70, 229, 0.09),
    transparent 28%
  ),
  linear-gradient(
    145deg,
    var(--ink-50),
    var(--surface) 50%,
    var(--green-50)
  );

box-shadow:
  0 37px 85px -58px
  rgba(16, 24, 40, 0.67);
}

.wmstack-network::before {
content: "";

position: absolute;
inset: 0;

pointer-events: none;

background-image:
  linear-gradient(
    rgba(16, 24, 40, 0.03) 1px,
    transparent 1px
  ),
  linear-gradient(
    90deg,
    rgba(16, 24, 40, 0.03) 1px,
    transparent 1px
  );

background-size: 31px 31px;
}

/*  INTEGRATION SIDES */

.wmstack-side {
position: relative;
z-index: 2;

display: grid;
gap: 13px;

min-width: 0;
}

.wmstack-side--left .wmstack-app:nth-child(1),
.wmstack-side--left .wmstack-app:nth-child(6) {
margin-left: 44px;
}

.wmstack-side--left .wmstack-app:nth-child(2),
.wmstack-side--left .wmstack-app:nth-child(5) {
margin-left: 22px;
}

.wmstack-side--right .wmstack-app:nth-child(1),
.wmstack-side--right .wmstack-app:nth-child(6) {
margin-right: 44px;
}

.wmstack-side--right .wmstack-app:nth-child(2),
.wmstack-side--right .wmstack-app:nth-child(5) {
margin-right: 22px;
}

/*  INTEGRATION APP CARDS */

.wmstack-app {
position: relative;

display: grid;

grid-template-columns:
  42px
  minmax(0, 1fr)
  auto;

align-items: center;
gap: 10px;

min-width: 0;
min-height: 68px;

padding: 12px 13px;

border: 1px solid var(--border);
border-radius: 16px;

background: rgba(255, 255, 255, 0.94);

box-shadow:
  0 17px 35px -30px
  rgba(16, 24, 40, 0.58);

transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.wmstack-app:hover {
transform: translateY(-3px);

border-color: var(--green-200);
background: var(--surface);

box-shadow:
  0 22px 42px -30px
  rgba(16, 24, 40, 0.58);
}

.wmstack-side--left .wmstack-app::after,
.wmstack-side--right .wmstack-app::before {
content: "";

position: absolute;
top: 50%;

width: 72px;
height: 2px;

transform: translateY(-50%);

pointer-events: none;
}

.wmstack-side--left .wmstack-app::after {
left: 100%;

background:
  linear-gradient(
    90deg,
    rgba(18, 183, 106, 0.28),
    rgba(79, 70, 229, 0.72)
  );
}

.wmstack-side--right .wmstack-app::before {
right: 100%;

background:
  linear-gradient(
    90deg,
    rgba(79, 70, 229, 0.72),
    rgba(18, 183, 106, 0.28)
  );
}

/* Signal dot */

.wmstack-app-pulse {
position: absolute;
top: 50%;
z-index: 3;
width: 8px;
height: 8px;
border: 2px solid var(--surface);
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.09);
pointer-events: none;
}

.wmstack-side--left .wmstack-app-pulse {
left: calc(100% + 2px);

animation:
  wmstackSignalRight
  2.8s linear infinite;
}

.wmstack-side--right .wmstack-app-pulse {
right: calc(100% + 2px);

animation:
  wmstackSignalLeft
  2.8s linear infinite;
}

.wmstack-app:nth-child(2) .wmstack-app-pulse {
animation-delay: -0.45s;
}

.wmstack-app:nth-child(3) .wmstack-app-pulse {
animation-delay: -0.9s;
}

.wmstack-app:nth-child(4) .wmstack-app-pulse {
animation-delay: -1.35s;
}

.wmstack-app:nth-child(5) .wmstack-app-pulse {
animation-delay: -1.8s;
}

.wmstack-app:nth-child(6) .wmstack-app-pulse {
animation-delay: -2.25s;
}

/*  APP ICONS  */

.wmstack-app-icon {
width: 42px;
height: 42px;

display: grid;
place-items: center;

border-radius: 13px;

font-size: 9px;
font-weight: 800;

letter-spacing: -0.02em;
}

.wmstack-app-icon--salesforce {
background: #eaf8ff;
color: #0284c7;
}

.wmstack-app-icon--hubspot {
background: #fff2e8;
color: #ea580c;
}

.wmstack-app-icon--zoho {
background: #fff7e8;
color: var(--amber-600);
}

.wmstack-app-icon--leadsquared {
background: #eff6ff;
color: #2563eb;
}

.wmstack-app-icon--paytabs {
background: #eaf8ff;
color: #0369a1;
}

.wmstack-app-icon--twilio {
background: #fff1f3;
color: #e11d48;
}

.wmstack-app-icon--shopify {
background: var(--green-50);
color: var(--green-700);
}

.wmstack-app-icon--woocommerce {
background: #f5f3ff;
color: #7c3aed;
}

.wmstack-app-icon--zapier {
background: #fff4ed;
color: #f97316;
}

.wmstack-app-icon--make {
background: #f5f3ff;
color: #6d28d9;
}

.wmstack-app-icon--klaviyo {
background: var(--amber-100);
color: var(--ink-900);
}

.wmstack-app-icon--google {
background: #eff6ff;
color: #2563eb;
}

/*  APP TEXT  */

.wmstack-app-copy {
min-width: 0;
}

.wmstack-app-copy b,
.wmstack-app-copy small {
display: block;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.wmstack-app-copy b {
color: var(--ink-800);

font-size: 11px;
font-weight: 700;
}

.wmstack-app-copy small {
margin-top: 4px;

color: var(--ink-400);
font-size: 9px;
}

.wmstack-app-state {
padding: 5px 7px;

border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-weight: 800;

text-transform: uppercase;
white-space: nowrap;
}

/*  CENTRAL HUB  */

.wmstack-hub {
position: relative;
z-index: 3;

min-width: 0;
min-height: 475px;

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

padding: 31px 27px;

overflow: hidden;

border: 1px solid rgba(79, 70, 229, 0.18);
border-radius: 35px;

background:
  radial-gradient(
    circle at 50% 32%,
    rgba(79, 70, 229, 0.12),
    transparent 35%
  ),
  linear-gradient(
    155deg,
    var(--surface),
    #f8f7ff 54%,
    var(--green-50)
  );

box-shadow:
  0 35px 70px -44px
  rgba(49, 46, 129, 0.48);

text-align: center;
}

.wmstack-hub-glow {
position: absolute;
top: 36%;
left: 50%;

width: 250px;
height: 250px;

border-radius: 50%;

background:
  radial-gradient(
    circle,
    rgba(79, 70, 229, 0.14),
    rgba(18, 183, 106, 0.06) 50%,
    transparent 70%
  );

transform: translate(-50%, -50%);

pointer-events: none;
}

/* Orbit */

.wmstack-orbit {
position: absolute;
top: 37%;
left: 50%;

width: 278px;
height: 278px;

transform: translate(-50%, -50%);

pointer-events: none;
}

.wmstack-orbit-ring {
position: absolute;
top: 50%;
left: 50%;

border-radius: 50%;

transform: translate(-50%, -50%);
}

.wmstack-orbit-ring--outer {
width: 278px;
height: 278px;

border: 1px dashed rgba(79, 70, 229, 0.18);

animation:
  wmstackOrbit
  24s linear infinite;
}

.wmstack-orbit-ring--inner {
width: 210px;
height: 210px;

border: 1px solid rgba(18, 183, 106, 0.12);
}

.wmstack-orbit-dot {
position: absolute;

width: 11px;
height: 11px;

border: 3px solid var(--surface);
border-radius: 50%;

background: var(--green-500);

box-shadow: var(--shadow-sm);
}

.wmstack-orbit-dot--one {
top: 1px;
left: 50%;
}

.wmstack-orbit-dot--two {
right: 14px;
bottom: 43px;

background: #4f46e5;
}

.wmstack-orbit-dot--three {
left: 12px;
bottom: 55px;

background: var(--amber-500);
}

/* Hub content */

.wmstack-hub-status {
position: relative;
z-index: 2;

display: inline-flex;
align-items: center;

gap: 7px;

padding: 7px 10px;

border: 1px solid var(--green-100);
border-radius: 999px;

background: rgba(255, 255, 255, 0.86);
color: var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.04em;
text-transform: uppercase;
}

.wmstack-hub-status i {
width: 7px;
height: 7px;

border-radius: 50%;

background: var(--green-500);

box-shadow:
  0 0 0 5px
  rgba(18, 183, 106, 0.1);

animation:
  wmstackStatusPulse
  1.8s ease infinite;
}

.wmstack-logo-frame {
position: relative;
z-index: 2;

width: 100%;
max-width: 260px;
min-height: 100px;

display: flex;
align-items: center;
justify-content: center;

margin-top: 47px;
padding: 18px;

border: 1px solid rgba(79, 70, 229, 0.15);
border-radius: 24px;

background: rgba(255, 255, 255, 0.94);

box-shadow:
  0 24px 48px -34px
  rgba(49, 46, 129, 0.56);
}

.wmstack-logo-frame img {
display: block;

width: 100%;
height: auto;
max-height: 58px;

object-fit: contain;
}

.wmstack-hub h3 {
position: relative;
z-index: 2;
max-width: 315px;
margin: 35px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 22px;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.035em;
}

.wmstack-hub > p {
position: relative;
z-index: 2;

max-width: 310px;

margin: 11px 0 0;

color: var(--ink-500);

font-size: 10px;
line-height: 1.6;
}

.wmstack-hub-features {
position: relative;
z-index: 2;

display: flex;
justify-content: center;
flex-wrap: wrap;

gap: 7px;

margin-top: 17px;
}

.wmstack-hub-features span {
display: inline-flex;
align-items: center;

gap: 5px;

padding: 7px 8px;

border: 1px solid var(--border);
border-radius: 999px;

background: rgba(255, 255, 255, 0.86);
color: var(--ink-600);

font-size: 9px;
font-weight: 700;
}

.wmstack-hub-features svg {
color: var(--green-600);
}

/* Button */

.wmstack-button {
position: relative;
z-index: 2;

min-height: 44px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

margin-top: 18px;
padding: 0 16px;

border-radius: 12px;

background: var(--ink-900);
color: var(--surface);

box-shadow: var(--shadow-md);

font-size: 11px;
font-weight: 700;
text-decoration: none;

transition:
  transform 0.25s ease,
  background 0.25s ease,
  box-shadow 0.25s ease;
}

.wmstack-button:hover {
transform: translateY(-2px);

background: var(--green-700);
box-shadow: var(--shadow-green);
}

.wmstack-button svg {
transition: transform 0.25s ease;
}

.wmstack-button:hover svg {
transform: translateX(3px);
}

/*  FOOTER  */

.wmstack-footer {
display: flex;
align-items: center;
justify-content: space-between;

gap: 24px;

margin-top: 14px;
padding: 15px 17px;

border: 1px solid var(--border);
border-radius: 17px;

background:
  linear-gradient(
    145deg,
    var(--surface),
    var(--ink-50)
  );

box-shadow: var(--shadow-sm);
}

.wmstack-footer-copy {
display: flex;
align-items: center;

gap: 11px;

min-width: 0;
}

.wmstack-footer-icon {
width: 42px;
height: 42px;

flex: 0 0 42px;

display: grid;
place-items: center;

border-radius: 13px;

background: #f5f3ff;
color: #4f46e5;
}

.wmstack-footer-copy p {
max-width: 420px;

color: var(--ink-500);

font-size: 9px;
line-height: 1.45;
}

.wmstack-footer-copy p b {
display: block;

margin-bottom: 3px;

color: var(--ink-800);

font-size: 10px;
font-weight: 700;
}

.wmstack-categories {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;

gap: 6px;
}

.wmstack-categories span {
padding: 6px 8px;

border: 1px solid var(--green-100);
border-radius: 999px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-weight: 800;

letter-spacing: 0.035em;
text-transform: uppercase;
}

/* ANIMATIONS  */

@keyframes wmstackSignalRight {
from {
  transform:
    translateY(-50%)
    translateX(0);
}

to {
  transform:
    translateY(-50%)
    translateX(66px);
}
}

@keyframes wmstackSignalLeft {
from {
  transform:
    translateY(-50%)
    translateX(0);
}

to {
  transform:
    translateY(-50%)
    translateX(-66px);
}
}

@keyframes wmstackStatusPulse {
50% {
  box-shadow:
    0 0 0 10px
    rgba(18, 183, 106, 0);
}
}

@keyframes wmstackOrbit {
to {
  transform:
    translate(-50%, -50%)
    rotate(360deg);
}
}


@keyframes wmstackSignalRightLaptop {
from {
  transform:
    translateY(-50%)
    translateX(0);
}

to {
  transform:
    translateY(-50%)
    translateX(42px);
}
}

@keyframes wmstackSignalLeftLaptop {
from {
  transform:
    translateY(-50%)
    translateX(0);
}

to {
  transform:
    translateY(-50%)
    translateX(-42px);
}
}

html,
body {
width: 100%;
max-width: 100%;
}

main {
width: 100%;
min-width: 0;
overflow: clip;
}

main > section,
main > section > .wrap,
.hero-grid > *,
.feature-tabs-shell > *,
.ca-layout > *,
.journeyx-frame > *,
.salesx-shell > *,
.assistmesh-grid > *,
.wmstack-network > * {
min-width: 0;
}


.pp-final-card > small { position: relative; display: block; margin-top: 17px; color: var(--ink-400); font-size: 11px !important; font-weight: 650; }


body.pricing-page {
background: var(--surface);
}

.pricing-page .pp-main,
.pricing-page .pp-main *,
.pricing-page .pp-main *::before,
.pricing-page .pp-main *::after {
box-sizing: border-box;
}

.pricing-page .pp-main {
width: 100%;
min-width: 0;
overflow: visible;
background: var(--surface);
}

main.pricing-page { overflow: visible; }

.pricing-page .pp-main > section,
.pricing-page .pp-main > section > .wrap,
.pricing-page .pp-hero-copy,
.pricing-page .pp-hero-visual,
.pricing-page .pp-value-copy,
.pricing-page .pp-value-grid {
min-width: 0;
}

.pricing-page .pp-main h1,
.pricing-page .pp-main h2,
.pricing-page .pp-main h3,
.pricing-page .pp-main p,
.pricing-page .pp-main ul {
margin-top: 0;
}

.pricing-page .pp-main ul {
margin-top: 15px;
padding: 0;
list-style: none;
}

.pricing-page .pp-main a {
text-decoration: none;
}

.pricing-page #plans,
.pricing-page #compare,
.pricing-page #faq {
scroll-margin-top: 100px;
}


/*  HERO SECTION  */

.pricing-page .pp-hero {
position: relative;
padding: 34px 0 35px;
overflow: hidden;

background:
  radial-gradient(
    circle at 8% 14%,
    rgba(18, 183, 106, 0.12),
    transparent 27%
  ),
  radial-gradient(
    circle at 94% 75%,
    rgba(50, 213, 131, 0.08),
    transparent 25%
  ),
  linear-gradient(
    180deg,
    var(--green-50) 0%,
    var(--surface) 82%
  );
}

.pricing-page .pp-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.065) 0.7px,
    transparent 0.7px
  );

background-size: 23px 23px;
opacity: 0.15;
}

.pricing-page .pp-hero > .wrap {
position: relative;
z-index: 1;
}
/* .pp-hero-shell{
margin-top:30px;
} */

.pricing-page .pp-hero-shell {
position: relative;
width: 100%;
min-width: 0;
/* padding: 48px;
overflow: hidden;
border: 1px solid rgba(18, 183, 106, 0.16);
border-radius: 31px;
background:
  radial-gradient(
    circle at 100% 0%,
    rgba(166, 244, 197, 0.2),
    transparent 34%
  ),
  rgba(255, 255, 255, 0.93);
box-shadow:
  0 38px 86px -60px
  rgba(3, 152, 85, 0.58);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px); */
}

.pricing-page .pp-hero-shell::before {
content: "";
position: absolute;
top: -170px;
left: -120px;
width: 360px;
height: 360px;
border:
  1px solid
  rgba(18, 183, 106, 0.1);
border-radius: 50%;
pointer-events: none;
}

.pricing-page .pp-hero-shell::after {
content: "";
position: absolute;
right: -110px;
bottom: -190px;
width: 350px;
height: 350px;
border:
  1px dashed
  rgba(18, 183, 106, 0.12);
border-radius: 50%;
pointer-events: none;
}

.pricing-page .pp-hero-grid {
position: relative;
z-index: 1;

display: grid;

grid-template-columns:
  minmax(0, 1.05fr)
  minmax(390px, 0.95fr);

align-items: center;
gap: 52px;

width: 100%;
min-width: 0;
}


/*
* Agar HTML mein shell nahi hai aur grid direct wrap ke andar hai,
* tab ye styling outer card provide karegi.
*/

.pricing-page
.pp-hero
> .wrap
> .pp-hero-grid {
padding: 48px;

border:
  1px solid
  rgba(18, 183, 106, 0.16);

border-radius: 31px;

background:
  rgba(255, 255, 255, 0.93);

box-shadow:
  0 38px 86px -60px
  rgba(3, 152, 85, 0.58);
}



.wmhome-billing-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.wmhome-billing-inner h2 { margin: 8px 0 8px; color: var(--ink-900); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.wmhome-billing-inner p { max-width: 650px; margin: 0; color: var(--ink-500); font-size: 15px; line-height: 1.6; }
.wmhome-billing-link { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 13px 18px; border: 1px solid rgba(3,152,85,.3); border-radius: 12px; background: #fff; color: var(--green-700); font-size: 13px; font-weight: 800; text-decoration: none; transition: .2s ease; }
.wmhome-billing-link:hover { border-color: var(--green-500); background: var(--green-50); transform: translateY(-1px); }

/* =========================================================
  HERO CONTENT
  ========================================================= */

.pricing-page .pp-hero-copy {
position: relative;
z-index: 2;

width: 100%;
max-width: 700px;
}

.pricing-page .pp-hero-kicker {
min-height: 34px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 9px;
padding: 0 14px;

border:
  1px solid
  var(--green-100);

border-radius: 999px;

background:
  linear-gradient(
    180deg,
    var(--green-50),
    rgba(236, 253, 243, 0.74)
  );

color: var(--green-700);

font-size: 10px;
font-weight: 800;

letter-spacing: 0.08em;
line-height: 1;

text-transform: uppercase;
}

.pricing-page .pp-hero-copy h1,
.pricing-page .pp-hero-title {
width: 100%;
max-width: 720px;

margin: 20px 0 0;

color: var(--ink-900);

font-family: var(--font-display);

font-size:clamp(42px, 5vw, 48px);

font-weight: 800;

line-height: 1.02;
letter-spacing: -0.052em;

overflow-wrap: normal;
word-break: normal;

text-wrap: balance;
}

.pricing-page .pp-hero-copy h1 span,
.pricing-page .pp-hero-title span {
color: var(--green-600);
}

.pricing-page .pp-hero-copy > p,
.pricing-page .pp-hero-text {
width: 100%;
max-width: 620px;

margin: 20px 0 0;

color: var(--ink-500);

font-size: 16px;
line-height: 1.72;

overflow-wrap: normal;
word-break: normal;
}


/* =========================================================
  HERO BUTTONS
  ========================================================= */

.pricing-page .pp-hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 13px;

margin-top: 28px;
}

.pricing-page .pp-hero-actions .btn,
.pricing-page .pp-btn {
min-height: 52px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 9px;

padding: 0 22px;

border-radius: 13px;

font-size: 14px;
font-weight: 800;

transition:
  color 0.2s ease,
  background 0.2s ease,
  border-color 0.2s ease,
  box-shadow 0.2s ease,
  transform 0.2s ease;
}

.pricing-page .pp-btn--primary,
.pricing-page
.pp-hero-actions
.btn-primary {
border:
  1px solid
  var(--green-600);

background:
  linear-gradient(
    135deg,
    var(--green-600),
    var(--green-500)
  );

color: #ffffff;

box-shadow:
  0 20px 36px -22px
  rgba(3, 152, 85, 0.75);
}

.pricing-page .pp-btn--primary:hover,
.pricing-page
.pp-hero-actions
.btn-primary:hover {
background:
  linear-gradient(
    135deg,
    var(--green-700),
    var(--green-600)
  );

color: #ffffff;

transform: translateY(-2px);
}

.pricing-page .pp-btn--secondary {
min-height: 52px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

padding: 0 19px;

border:
  1px solid
  var(--border);

border-radius: 13px;

background: var(--surface);
color: var(--ink-700);

font-size: 14px;
font-weight: 750;

box-shadow:
  0 15px 28px -25px
  rgba(16, 24, 40, 0.6);

transition:
  color 0.2s ease,
  border-color 0.2s ease,
  box-shadow 0.2s ease,
  transform 0.2s ease;
}

.pricing-page .pp-btn--secondary:hover {
border-color: var(--green-200);
color: var(--green-700);

transform: translateY(-2px);

box-shadow:
  0 20px 34px -24px
  rgba(3, 152, 85, 0.55);
}


/*  HERO TRUST POINTS */

.pricing-page .pp-hero-points {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 11px 18px;

margin: 23px 0 0;
}

.pricing-page .pp-hero-points li {
position: relative;

display: inline-flex;
align-items: center;

gap: 7px;

color: var(--ink-500);

font-size: 11.5px;
font-weight: 650;
}

.pricing-page .pp-hero-points li {
padding-left: 14px;
}

.pricing-page .pp-hero-points li::before {
content: "";

position: absolute;

left: 0;
top: 50%;

width: 6px;
height: 6px;

border-radius: 50%;

background: var(--green-500);

transform: translateY(-50%);
}


/*   HERO VISUAL  */

.pricing-page .pp-hero-visual {
position: relative;
z-index: 2;

width: 100%;
min-height: 480px;

display: grid;
place-items: center;
}

/*  PRICING COMPONENT SPACING  */

.pricing-page .wmprice-section {
padding-top: 88px;
padding-bottom: 88px;
}


/*  VALUE SECTION  */

.pricing-page .pp-value-section {
padding: 28px 0 100px;

background: var(--surface);
}

.pricing-page .pp-value-shell {
position: relative;

display: grid;

grid-template-columns:
  minmax(0, 0.84fr)
  minmax(0, 1.16fr);

align-items: center;
gap: 48px;

padding: 47px;

overflow: hidden;

border-radius: 28px;

background:
  radial-gradient(
    circle at 8% 12%,
    rgba(50, 213, 131, 0.16),
    transparent 30%
  ),
  radial-gradient(
    circle at 94% 90%,
    rgba(18, 183, 106, 0.12),
    transparent 30%
  ),
  var(--ink-900);

box-shadow:
  0 42px 90px -55px
  rgba(16, 24, 40, 0.82);
}

.pricing-page .pp-value-copy,
.pricing-page .pp-value-grid {
position: relative;
z-index: 1;
}

.pricing-page .pp-dark-eyebrow {
min-height: 31px;
display: inline-flex;
align-items: center;
padding: 0 12px;
border:1px solid rgba(255, 255, 255, 0.13);
border-radius: 999px;
background: rgba(255, 255, 255, 0.07);
color: var(--green-200);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.pricing-page .pp-value-copy h2 {
max-width: 520px;
margin: 18px 0 0;
color: #ffffff;
font-family: var(--font-display);
font-size: clamp(33px, 4vw, 36px);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.043em;
text-wrap: balance;
}

.pricing-page .pp-value-copy h2 span {
color: var(--green-400);
}

.pricing-page .pp-value-copy > p {
max-width: 500px;

margin: 18px 0 0;

color: var(--ink-300);

font-size: 14px;
line-height: 1.74;
}

.pricing-page .pp-dark-link {
min-height: 45px;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 23px;
padding: 0 15px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 11px;
background: rgba(255, 255, 255, 0.07);
color: #ffffff;
font-size: 11px;
font-weight: 800;
}

.pricing-page .pp-value-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.pricing-page .pp-value-grid article {
min-width: 0;
/* min-height: 145px; */
display: grid;
grid-template-columns: 43px minmax(0, 1fr);
align-items: start;
gap: 12px;
padding: 18px;
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: 17px;
background: rgba(255, 255, 255, 0.055);
}

.pricing-page .pp-value-icon {
min-width: 43px;
height: 43px;
display: grid;
place-items: center;
padding: 0 7px;
border-radius: 13px;
background: rgba(50, 213, 131, 0.12);
color: var(--green-200);
font-size: 9px;
font-weight: 850;
}

.pricing-page .pp-value-grid b {
display: block;
color: #ffffff;
font-size: 12px;
font-weight: 800;
}

.pricing-page .pp-value-grid p {
margin: 7px 0 0;
color: var(--ink-400);
font-size: 10px;
line-height: 1.6;
}


/*  SHARED SECTION HEADING */

.pricing-page .pp-section-head {
max-width: 760px;
margin: 0 auto 40px;
text-align: center;
}

.pricing-page .pp-section-tag {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 13px;
border: 1px solid var(--green-100);
border-radius: 999px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.pricing-page .pp-section-head h2 {
margin: 15px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size:clamp( 35px, 4.4vw, 41px);
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.045em;
text-wrap: balance;
}

.pricing-page .pp-section-head h2 span {
color: var(--green-600);
}

.pricing-page .pp-section-head > p {
max-width: 640px;

margin: 15px auto 0;

color: var(--ink-500);

font-size: 14px;
line-height: 1.7;
}


/*   COMPARISON SECTION  */

.pricing-page .pp-compare-section {
padding: 96px 0;

background:
  radial-gradient(
    circle at 90% 15%,
    rgba(18, 183, 106, 0.07),
    transparent 26%
  ),
  linear-gradient(
    180deg,
    var(--ink-50),
    var(--surface)
  );
}

.pricing-page .pp-compare-sticky {
position: fixed;
top: 0;
left: 0;
z-index: 2100;
width: 100%;
padding: 12px max(24px, calc((100% - 1160px) / 2));
background: linear-gradient(110deg, #090d15 0%, #111a27 58%, #0b1719 100%);
border-bottom: 1px solid rgba(107,232,171,.28);
box-shadow: 0 12px 28px -18px rgba(15,23,42,.8);
overflow-x: auto;
scrollbar-width: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-110%);
transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.pricing-page .pp-compare-sticky::-webkit-scrollbar { display: none; }
.pricing-page .pp-compare-sticky.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }

.pricing-page .pp-compare-sticky-inner {
display: grid;
grid-template-columns: minmax(230px, 1.35fr) repeat(4, minmax(150px, 1fr));
align-items: center;
gap: 14px;
min-width: 1000px;
text-align: center;
}

.pricing-page .pp-compare-sticky-title,
.pricing-page .pp-compare-plan {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 2px 0;
border: 1px solid rgba(255,255,255,.1);
border-radius: 10px;
background: rgba(255,255,255,.035);
}

.pricing-page .pp-compare-sticky-title { align-items: flex-start; text-align: left; gap: 7px; padding: 7px 12px; border-left: 3px solid var(--green-500); background: rgba(18,183,106,.08); }
.pricing-page .pp-compare-sticky-title > div:first-child { display: flex; align-items: center; gap: 14px; }
.pricing-page .pp-compare-sticky-title > small { color: rgba(255,255,255,.52); font-size: 9px; font-weight: 650; }
.pricing-page .pp-compare-sticky-title strong {
color: #fff;
font-family: var(--font-display);
font-size: 18px;
line-height: 1.1;
}

.pricing-page .pp-compare-billing { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; background: rgba(0,0,0,.18); }
.pricing-page .pp-compare-billing button { border: 0; border-radius: 6px; padding: 6px 9px; color: rgba(255,255,255,.62); background: transparent; font: 750 10px/1 var(--font-body); cursor: pointer; transition: background .18s ease, color .18s ease; }
.pricing-page .pp-compare-billing button[aria-pressed="true"] { color: var(--ink-900); background: #fff; }
.pricing-page .pp-compare-billing button:focus-visible { outline: 2px solid var(--green-300); outline-offset: 2px; }

.pricing-page .pp-compare-plan > span { color: rgba(255,255,255,.9); font-size: 12px; font-weight: 800; }
.pricing-page .pp-compare-plan > span + small { color: rgba(255,255,255,.48); font-size: 8px; font-weight: 650; }
.pricing-page .pp-compare-plan > strong { color: #fff; font-family: var(--font-display); font-size: 15px; line-height: 1; }
.pricing-page .pp-compare-plan > strong small { color: rgba(255,255,255,.55); font-family: var(--font-body); font-size: 9px; font-weight: 650; }
.pricing-page .pp-compare-plan > a {
min-height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 10px;
border: 1px solid rgba(255,255,255,.28);
border-radius: 8px;
background: rgba(255,255,255,.08);
color: #fff;
font-size: 10px;
font-weight: 800;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.pricing-page .pp-compare-plan.is-highlighted { border: 1px solid var(--green-400); border-radius: 10px; background: rgba(18,183,106,.16); padding: 7px 10px; }

.pricing-page .pp-compare-plan > a:hover,
.pricing-page .pp-compare-plan > a:focus-visible { border-color: var(--green-400); background: var(--green-600); transform: translateY(-1px); }

.pricing-page .pp-compare-table tbody th.has-tooltip { cursor: help; text-decoration: underline dotted var(--ink-400) 1px; text-underline-offset: 5px; }
.pricing-page .pp-compare-table tbody tr:not(.pp-table-group):hover th,
.pricing-page .pp-compare-table tbody tr:not(.pp-table-group):hover td { background: rgba(236,253,243,.68); }
.pricing-page .pp-feature-tooltip {
position: fixed;
z-index: 2300;
width: min(310px, calc(100vw - 28px));
padding: 11px 13px;
border: 1px solid var(--green-200);
border-radius: 9px;
background: var(--surface);
color: var(--ink-800);
box-shadow: 0 16px 34px -18px rgba(15,23,42,.38);
font-size: 11px;
font-weight: 650;
line-height: 1.45;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(4px);
transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.pricing-page .pp-feature-tooltip.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.pricing-page .pp-compare-note {
display: flex;
align-items: center;
justify-content: space-between;

gap: 15px;

margin-bottom: 13px;
}

.pricing-page .pp-compare-note > span,
.pricing-page .pp-compare-note > a {
display: inline-flex;
align-items: center;

gap: 7px;

font-size: 10px;
font-weight: 750;
}

.pricing-page .pp-compare-note > span {
color: var(--ink-400);
}

.pricing-page .pp-compare-note > a {
color: var(--green-700);
}

.pricing-page .pp-compare-shell {
width: 100%;
max-width: 100%;

overflow-x: auto;
overflow-y: hidden;

border:
  1px solid
  var(--border);

border-radius: 18px;

background: var(--surface);

box-shadow: 0 26px 54px -42px rgba(16,24,40,.5);

overscroll-behavior-inline: contain;

scrollbar-color:
  var(--green-400)
  transparent;
}

.pricing-page
.pp-compare-shell::-webkit-scrollbar {
height: 8px;
}

.pricing-page
.pp-compare-shell::-webkit-scrollbar-thumb {
border-radius: 999px;

background: var(--green-200);
}

.pricing-page .pp-compare-table {
width: 100%;
min-width: 930px;

border-collapse: separate;
border-spacing: 0;
}

.pricing-page .pp-compare-table th,
.pricing-page .pp-compare-table td {
min-width: 145px;

padding: 17px 18px;

border-bottom:
  1px solid
  var(--border);

color: var(--ink-600);

font-size: 11.5px;
line-height: 1.4;

text-align: center;
vertical-align: middle;
}

.pricing-page
.pp-compare-table
th:first-child {
min-width: 245px;

text-align: left;
}

.pricing-page
.pp-compare-table
thead
th {
position: sticky;
top: 0;
z-index: 3;

padding-top: 18px;
padding-bottom: 18px;

background: var(--surface);
color: var(--ink-900);

font-family: var(--font-display);
font-size: 14px;
font-weight: 800;
}

.pricing-page
.pp-compare-table
thead
th:first-child {
left: 0;
z-index: 5;
}

.pricing-page
.pp-compare-table
tbody
th {
position: sticky;
left: 0;
z-index: 2;

background: var(--surface);
color: var(--ink-700);

font-weight: 750;
}

.pricing-page
.pp-compare-table
.is-highlighted {
background:
  rgba(236, 253, 243, 0.74);
}

.pricing-page
.pp-compare-table
.pp-table-group
th {
position: static;

padding: 12px 17px;

background: var(--ink-900);
color: rgba(255,255,255,.75);

font-size: 9px;
font-weight: 850;

letter-spacing: 0.09em;
text-transform: uppercase;
}

.pricing-page .pp-check {
width: 23px;
height: 23px;

display: inline-grid;
place-items: center;

border-radius: 8px;

background: var(--green-100);
color: var(--green-700);

font-size: 10px;
font-weight: 900;
}


/*  FINAL CTA */

.pricing-page .pp-final-section {
padding: 18px 0 96px;

background: var(--surface);
}

.pricing-page .pp-final-card {
position: relative;

width: 100%;
max-width: 100%;

padding: 60px 32px;

overflow: hidden;

border:
  1px solid
  var(--green-100);

border-radius: 29px;

background:
  radial-gradient(
    circle at 50% 0%,
    rgba(50, 213, 131, 0.18),
    transparent 40%
  ),
  linear-gradient(
    135deg,
    var(--green-50),
    var(--surface) 52%,
    var(--ink-50)
  );

text-align: center;

box-shadow:
  0 36px 82px -59px
  rgba(3, 152, 85, 0.62);
}

.pricing-page .pp-final-pattern {
position: absolute;
inset: 0;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(3, 152, 85, 0.1) 0.7px,
    transparent 0.7px
  );

background-size: 22px 22px;
opacity: 0.2;
}

.pricing-page .pp-final-kicker,
.pricing-page .pp-final-card h2,
.pricing-page .pp-final-card > p,
.pricing-page .pp-final-actions,
.pricing-page .pp-final-card > small {
position: relative;
z-index: 1;
}

.pricing-page .pp-final-kicker {
min-height: 31px;

display: inline-flex;
align-items: center;
justify-content: center;

padding: 0 12px;

border:
  1px solid
  var(--green-100);

border-radius: 999px;

background:
  rgba(255, 255, 255, 0.78);

color: var(--green-700);

font-size: 9px;
font-weight: 850;

letter-spacing: 0.09em;
text-transform: uppercase;
}

.pricing-page .pp-final-card h2 {
width: 100%;
max-width: 800px;

margin: 16px auto 0;

color: var(--ink-900);

font-family: var(--font-display);

font-size:
  clamp(
    36px,
    4.4vw,
    41px
  );

font-weight: 800;

line-height: 1.05;
letter-spacing: -0.047em;

overflow-wrap: normal;
word-break: normal;

text-wrap: balance;
}

.pricing-page .pp-final-card h2 span {
color: var(--green-600);
}

.pricing-page .pp-final-card > p {
max-width: 630px;
margin: 18px auto 0;
color: var(--ink-500);
font-size: 15px;
line-height: 1.7;
}

.pricing-page .pp-final-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;

gap: 12px;

margin-top: 27px;
}

.pricing-page
.pp-final-actions
.btn {
min-height: 52px;

padding-inline: 23px;

border-radius: 13px;

font-size: 14px;
font-weight: 800;
}

.pricing-page
.pp-final-card
> small {
display: block;

margin-top: 17px;

color: var(--ink-400);

font-size: 9px;
font-weight: 650;
}

/* .pricing-page .pp-hero-shell {
background:
  radial-gradient(circle at 86% 28%, rgba(50, 213, 131, 0.15), transparent 31%),
  radial-gradient(circle at 18% 100%, rgba(46, 144, 250, 0.07), transparent 30%),
  linear-gradient(135deg, #ffffff 0%, #f4fbf7 100%);
} */

.pricing-page .pp-hero-grid {
grid-template-columns: minmax(0, 1.03fr) minmax(430px, 0.97fr);
gap: 64px;
}

.pricing-page .pp-hero-title {
max-width: 690px;
font-size: clamp(51px, 5.2vw, 72px);
line-height: 0.98;
}

.pricing-page .pp-hero-text {
max-width: 640px;
font-size: 16px;
}

.pricing-page .pp-hero-actions {
margin-top: 29px;
}

.pricing-page .pp-hero-actions .pp-btn--secondary {
border-color: transparent;
background: transparent;
box-shadow: none;
}

.pricing-page .pp-hero-actions .pp-btn--secondary:hover {
border-color: var(--green-100);
background: rgba(255, 255, 255, 0.78);
}

.pricing-page .pp-hero-visual {
position: relative;
min-height: 500px;
display: grid;
place-items: center;
isolation: isolate;
}

.pricing-page .pp-growth-orbit {
position: absolute;
width: 430px;
height: 430px;
border: 1px solid rgba(18, 183, 106, 0.22);
border-radius: 50%;
background: radial-gradient(circle, rgba(236, 253, 243, 0.84), rgba(255, 255, 255, 0) 68%);
box-shadow: 0 0 0 48px rgba(18, 183, 106, 0.025);
}

.pricing-page .pp-growth-card {
position: relative;
z-index: 2;
width: min(100%, 410px);
min-height: 390px;
padding: 29px;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 27px;
background: rgba(255, 255, 255, 0.93);
box-shadow: 0 35px 70px -42px rgba(16, 24, 40, 0.56);
backdrop-filter: blur(14px);
transform: rotate(-2deg);
}

.pricing-page .pp-growth-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
}

.pricing-page .pp-growth-head span,
.pricing-page .pp-growth-head small,
.pricing-page .pp-growth-value small,
.pricing-page .pp-growth-value strong,
.pricing-page .pp-growth-value p,
.pricing-page .pp-growth-float strong,
.pricing-page .pp-growth-float small {
display: block;
}

.pricing-page .pp-growth-head span {
color: var(--ink-800);
font-size: 14px;
font-weight: 850;
}

.pricing-page .pp-growth-head small {
margin-top: 4px;
color: var(--ink-400);
font-size: 9px;
font-weight: 650;
}

.pricing-page .pp-growth-head em {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 9px;
border-radius: 999px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-style: normal;
font-weight: 850;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.pricing-page .pp-growth-head em i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.1);
}

.pricing-page .pp-growth-value {
margin-top: 30px;
}

.pricing-page .pp-growth-value > small {
color: var(--ink-400);
font-size: 9px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.pricing-page .pp-growth-value strong {
margin-top: 3px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 68px;
line-height: 1;
letter-spacing: -0.06em;
}

.pricing-page .pp-growth-value strong span {
color: var(--green-600);
font-size: 38px;
}

.pricing-page .pp-growth-value p {
margin: 8px 0 0;
color: var(--ink-500);
font-size: 11px;
font-weight: 650;
}

.pricing-page .pp-growth-chart {
height: 126px;
display: flex;
align-items: end;
gap: 10px;
margin-top: 23px;
padding: 17px 16px 0;
border-radius: 17px 17px 8px 8px;
background: linear-gradient(180deg, rgba(236, 253, 243, 0.28), rgba(236, 253, 243, 0.92));
box-shadow: inset 0 -1px rgba(18, 183, 106, 0.1);
}

.pricing-page .pp-growth-chart i {
width: 25%;
height: var(--bar);
border-radius: 9px 9px 2px 2px;
background: linear-gradient(180deg, var(--green-400), var(--green-600));
box-shadow: 0 12px 25px -16px rgba(3, 152, 85, 0.9);
transform-origin: bottom;
animation: ppGrowthBar 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pricing-page .pp-growth-chart i:nth-child(2) { animation-delay: 0.08s; }
.pricing-page .pp-growth-chart i:nth-child(3) { animation-delay: 0.16s; }
.pricing-page .pp-growth-chart i:nth-child(4) { animation-delay: 0.24s; }

@keyframes ppGrowthBar {
from { transform: scaleY(0); opacity: 0; }
to { transform: scaleY(1); opacity: 1; }
}

.pricing-page .pp-growth-legend {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 13px;
color: var(--ink-400);
font-size: 9px;
font-weight: 750;
}

.pricing-page .pp-growth-legend span {
display: inline-flex;
align-items: center;
gap: 5px;
}

.pricing-page .pp-growth-legend i {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green-500);
}

.pricing-page .pp-growth-legend span:nth-child(2) i { background: #6172f3; }
.pricing-page .pp-growth-legend span:nth-child(3) i { background: #f79009; }

.pricing-page .pp-growth-float {
position: absolute;
z-index: 3;
display: flex;
align-items: center;
gap: 11px;
padding: 13px 16px;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 17px;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 23px 45px -32px rgba(16, 24, 40, 0.7);
backdrop-filter: blur(12px);
}

.pricing-page .pp-growth-float > i {
width: 39px;
height: 39px;
display: grid;
place-items: center;
border-radius: 12px;
background: var(--green-50);
color: var(--green-700);
font-size: 11px;
font-style: normal;
font-weight: 850;
}

.pricing-page .pp-growth-float strong {
color: var(--ink-800);
font-size: 12px;
font-weight: 850;
}

.pricing-page .pp-growth-float small {
margin-top: 3px;
color: var(--ink-400);
font-size: 9px;
}

.pricing-page .pp-growth-float--rate {
top: 73px;
right: -22px;
}

.pricing-page .pp-growth-float--ai {
bottom: 44px;
left: -28px;
}

.pricing-page .pp-growth-float--ai > i {
background: #eef2ff;
color: #4f46e5;
}

/* Pricing FAQ reuses the homepage accordion design. */

.pricing-page .pp-faq-section {
padding: 104px 0;
}

.pricing-page .pp-faq-section .faq-intro-card a {
display: inline-flex;
margin-top: 8px;
color: var(--green-700);
font-size: 11px;
font-weight: 850;
}

/* =========================================================
   PRICING CALCULATOR LINKS
========================================================= */

.pricing-page .ppcalcnav-section{
position:relative;
padding:72px 0 78px;
overflow:hidden;
background:#fff;
}

.pricing-page .ppcalcnav-section::before{
content:"";
position:absolute;
top:-170px;
left:50%;
width:620px;
height:320px;
border-radius:50%;
background:rgba(18,183,106,.07);
filter:blur(85px);
transform:translateX(-50%);
pointer-events:none;
}

.pricing-page .ppcalcnav-section > .wrap{
position:relative;
z-index:1;
}

.pricing-page .ppcalcnav-head{
max-width:730px;
margin:0 auto 38px;
text-align:center;
}

.pricing-page .ppcalcnav-kicker{
min-height:32px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:0 13px;
border:1px solid var(--green-100);
border-radius:999px;
background:var(--green-50);
color:var(--green-700);
font-size:10px;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
}

.pricing-page .ppcalcnav-head h2{
margin:15px 0 0;
color:var(--ink-900);
font-family:var(--font-display);
font-size:clamp(35px,4.4vw,43px);
font-weight:800;
line-height:1.06;
letter-spacing:-.045em;
text-wrap:balance;
}

.pricing-page .ppcalcnav-head h2 span{
color:var(--green-600);
}

.pricing-page .ppcalcnav-head p{
max-width:620px;
margin:15px auto 0;
color:var(--ink-500);
font-size:14px;
line-height:1.7;
}

.pricing-page .ppcalcnav-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:18px;
max-width:1020px;
margin:0 auto;
}

.pricing-page .ppcalcnav-card{
position:relative;
min-width:0;
/* min-height:310px; */
display:flex;
flex-direction:column;
padding:26px;
overflow:hidden;
border:1px solid rgba(16,24,40,.09);
border-radius:24px;
background:
radial-gradient(circle at 100% 0%,rgba(18,183,106,.10),transparent 35%),
#fff;
box-shadow:0 22px 55px -42px rgba(16,24,40,.48);
transition:
transform .25s ease,
border-color .25s ease,
box-shadow .25s ease;
}

.pricing-page .ppcalcnav-card::before{
content:"";
position:absolute;
right:-46px;
bottom:-64px;
width:170px;
height:170px;
border:1px solid rgba(18,183,106,.11);
border-radius:50%;
pointer-events:none;
}

.pricing-page .ppcalcnav-card--calling{
background:
radial-gradient(circle at 100% 0%,rgba(247,144,9,.10),transparent 35%),
#fff;
}

.pricing-page .ppcalcnav-card--calling::before{
border-color:rgba(247,144,9,.14);
}

.pricing-page .ppcalcnav-card:hover{
border-color:var(--green-200);
box-shadow:0 28px 62px -38px rgba(3,152,85,.32);
transform:translateY(-5px);
}

.pricing-page .ppcalcnav-card-top{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}

.pricing-page .ppcalcnav-icon{
width:52px;
height:52px;
flex:0 0 52px;
display:grid;
place-items:center;
border:1px solid var(--green-100);
border-radius:15px;
background:var(--green-50);
color:var(--green-700);
}

.pricing-page .ppcalcnav-card--calling .ppcalcnav-icon{
border-color:#fde6b3;
background:#fff7e7;
color:var(--amber-600);
}

.pricing-page .ppcalcnav-icon svg{
width:25px;
height:25px;
}

.pricing-page .ppcalcnav-type{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:29px;
padding:0 11px;
border:1px solid var(--ink-200);
border-radius:999px;
background:rgba(255,255,255,.82);
color:var(--ink-500);
font-size:9px;
font-weight:800;
letter-spacing:.04em;
text-transform:uppercase;
}

.pricing-page .ppcalcnav-card-copy{
position:relative;
z-index:1;
margin-top:27px;
}

.pricing-page .ppcalcnav-card-copy h3{
max-width:390px;
margin:0;
color:var(--ink-900);
font-family:var(--font-display);
font-size:23px;
font-weight:800;
line-height:1.17;
letter-spacing:-.025em;
}

.pricing-page .ppcalcnav-card-copy p{
/* max-width:410px; */
margin: 20px 0 ;
color:var(--ink-500);
font-size:13px;
line-height:1.65;
}

.pricing-page .ppcalcnav-card-bottom{
position:relative;
z-index:1;
width:fit-content;
/* min-height:44px; */
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
margin-top:auto;
padding:8px 9px 8px 15px;
border:1px solid var(--green-200);
border-radius:12px;
background:var(--green-50);
color:var(--green-700);
font-size:12px;
font-weight:800;
line-height:1;
box-shadow:0 8px 20px -16px rgba(3,152,85,.7);
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
transform .2s ease,
box-shadow .2s ease;
}

.pricing-page .ppcalcnav-card--calling .ppcalcnav-card-bottom{
border-color:#fbd59a;
background:#fff7e7;
color:var(--amber-600);
box-shadow:0 8px 20px -16px rgba(247,144,9,.65);
}
.pricing-page .ppcalcnav-card-bottom i{
width:28px;
height:28px;
display:grid;
place-items:center;
border-radius:9px;
background:var(--green-600);
color:#fff;
font-size:15px;
font-style:normal;
line-height:1;
transition:transform .2s ease,background .2s ease;
}

.pricing-page .ppcalcnav-card:hover .ppcalcnav-card-bottom{
border-color:var(--green-400);
background:var(--green-100);
box-shadow:0 12px 24px -17px rgba(3,152,85,.85);
transform:translateY(-2px);
}

.pricing-page .ppcalcnav-card--calling:hover .ppcalcnav-card-bottom{
border-color:#f9bd59;
background:#fff1d3;
box-shadow:0 12px 24px -17px rgba(247,144,9,.8);
}

.pricing-page .ppcalcnav-card:hover .ppcalcnav-card-bottom i{
background:var(--green-700);
transform:translateX(2px);
}

.pricing-page .ppcalcnav-card--calling .ppcalcnav-card-bottom i{
background:var(--amber-500);
color:#fff;
}

.pricing-page .ppcalcnav-card--calling:hover .ppcalcnav-card-bottom i{
background:var(--amber-600);
transform:translateX(2px);
}
/* Pricing page styles end */

/* GLOBAL HEADER POLISH */

.wmh-shell {
isolation: isolate;
border-color: rgba(16, 24, 40, 0.1);
background: rgba(255, 255, 255, 0.965);
box-shadow: 0 20px 48px -37px rgba(16, 24, 40, 0.5);
}

.wmh-shell::after {
content: "";
position: absolute;
right: 18px;
bottom: -1px;
left: 18px;
z-index: 3;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, transparent 0%, var(--green-400) 23%, #6172f3 50%, var(--green-500) 77%, transparent 100%);
background-size: 220% 100%;
opacity: 0.72;
pointer-events: none;
animation: wmhBorderFlow 7s linear infinite;
}

@keyframes wmhBorderFlow {
from { background-position: 200% 0; }
to { background-position: -20% 0; }
}

.wmh-nav-link,
.wmh-direct-link {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}


.wmh-menu-head > div > span,
.wmh-menu-label,
.wmh-resource-head > span {
font-size: 9.5px;
}

.wmh-menu-head h2,
.wmh-menu-head .wmh-menu-title {
margin-top: 7px;
font-size: 21px;
}

.wmh-solutions-grid {
gap: 25px;
}


.wmh-industry-grid {
gap: 7px;
}

.wmh-industry-grid a,
.wmh-product-grid a,
.wmh-resource-list a {
gap: 12px;
padding: 10px;
}



.wmh-product-grid {
gap: 8px;
}

.wmh-product-grid a {
grid-template-columns: 43px minmax(0, 1fr);
min-height: 63px;
}

.wmh-resource-list {
gap: 7px;
}

.wmh-resource-list a {
grid-template-columns: 44px minmax(0, 1fr);
min-height: 64px;
}

/* Replace header abbreviations with relevant vector icons. */

.wmh-menu-icon,
.wmh-industry-icon,
.wmh-product-icon,
.wmh-resource-icon,
.wmh-mini-icon,
.wmh-mobile-row-icon {
position: relative;
overflow: hidden;
font-size: 0;
}

.wmh-header,
.wmh-mobile-drawer {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.6 4.4L18 9l-4.4 1.6L12 15l-1.6-4.4L6 9l4.4-1.6L12 3Z'/%3E%3Cpath d='m19 15 .9 2.1L22 18l-2.1.9L19 21l-.9-2.1L16 18l2.1-.9L19 15Z'/%3E%3C/svg%3E");
}

.wmh-menu-icon::before,
.wmh-industry-icon::before,
.wmh-product-icon::before,
.wmh-resource-icon::before,
.wmh-mini-icon::before,
.wmh-mobile-row-icon::before {
content: "";
width: 21px;
height: 21px;
background: currentColor;
-webkit-mask: var(--wmh-icon) center / contain no-repeat;
mask: var(--wmh-icon) center / contain no-repeat;
}

.wmh-resource-icon--native::before {
content: none;
}

.wmh-resource-icon--native svg {
display: block;
width: 22px;
height: 22px;
}

a[href*="support.php"],
a[href*="shared-team-inbox.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14a2 2 0 0 1 2-2h1v6H6a2 2 0 0 1-2-2v-2ZM20 14a2 2 0 0 0-2-2h-1v6h1a2 2 0 0 0 2-2v-2ZM17 19c-1 1-2.5 2-5 2'/%3E%3C/svg%3E");
}

a[href*="sales.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19V5M4 19h16'/%3E%3Cpath d='m7 15 4-4 3 3 5-7'/%3E%3Cpath d='M16 7h3v3'/%3E%3C/svg%3E");
}

a[href*="education.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-5 9 5-9 5-9-5Z'/%3E%3Cpath d='M7 12v5c3 2 7 2 10 0v-5M21 10v6'/%3E%3C/svg%3E");
}

a[href*="ecommerce.php"],
a[href*="shopify"],
a[href*="woocommerce"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8h12l1 13H5L6 8Z'/%3E%3Cpath d='M9 9V6a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E");
}

a[href*="marketing-agencies"],
a[href*="whatsapp-broadcast.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 15-6v14L3 13v-2Z'/%3E%3Cpath d='M7 14v5a2 2 0 0 0 2 2h2l-1-6M21 9v6'/%3E%3C/svg%3E");
}

a[href*="healthcare.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1.1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 21l8.8-8.6a5.5 5.5 0 0 0 0-7.8Z'/%3E%3Cpath d='M7 12h3l1-3 2 6 1-3h3'/%3E%3C/svg%3E");
}

a[href*="no-code-chatbots"],
a[href*="chatbot-library"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='4'/%3E%3Cpath d='M8 10h.01M16 10h.01M8 15h8M12 2v3'/%3E%3C/svg%3E");
}

a[href*="whatsapp-business-api"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5A8 8 0 0 1 8.2 18.6L4 20l1.4-4.1A8 8 0 1 1 20 11.5Z'/%3E%3Cpath d='M9 8c.5 3 2 4.5 5 5'/%3E%3C/svg%3E");
}

a[href*="whatsapp-calling"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.8 2.1Z'/%3E%3C/svg%3E");
}

a[href*="click-to-whatsapp-ads"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 14 9-7 2-3 7L5 3Z'/%3E%3Cpath d='m13 14 5 5'/%3E%3C/svg%3E");
}

a[href*="mme-flow-ai"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.7 4.3L18 9l-4.3 1.7L12 15l-1.7-4.3L6 9l4.3-1.7L12 3Z'/%3E%3Cpath d='m19 15 1 2 2 1-2 1-1 2-1-2-2-1 2-1 1-2Z'/%3E%3C/svg%3E");
}

a[href="case-studies.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8ZM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8'/%3E%3C/svg%3E");
}

a[href="blog.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E");
}

a[href*="ebooks.php"] {
--wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a3 3 0 0 1 3-2h5v18H7a3 3 0 0 0-3 2V5ZM20 5a3 3 0 0 0-3-2h-5v18h5a3 3 0 0 1 3 2V5Z'/%3E%3C/svg%3E");
}

[data-wmh-open="solutions"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='m10 10 4 4M16 5h3v3M8 19H5v-3'/%3E%3C/svg%3E"); }
[data-wmh-open="product"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5-9 5-9-5 9-5Z'/%3E%3Cpath d='m3 12 9 5 9-5M3 17l9 5 9-5'/%3E%3C/svg%3E"); }
[data-wmh-open="resources"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16v16H4zM8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.wmh-mobile-direct[href*="pricing"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12V4H4v16h8M8 8h8M8 12h4M8 16h2M17 15v6M14 18h6'/%3E%3C/svg%3E"); }
.wmh-mobile-direct[href*="#features"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 1.7 4.3L18 9l-4.3 1.7L12 15l-1.7-4.3L6 9l4.3-1.7L12 3Z'/%3E%3C/svg%3E"); }



/* Keep the floating header visually inside the first hero on every page. */

#home .wrap{
padding-top:60px !important;
}
body > main > section:first-child > .wrap {
padding-top: 30px;
}

.wmh-header::before {
display: none;
}

.wmh-header.is-scrolled::before {
display: none;
}



.wmh-menu-card[href*="support.php"] .wmh-menu-icon,
.wmh-mobile-card[href*="support.php"] .wmh-mobile-row-icon {
border: 1px solid #fedf89;
background: #fff3d6;
color: #dc6803;
}

.wmh-menu-card[href*="sales.php"] .wmh-menu-icon,
.wmh-mobile-card[href*="sales.php"] .wmh-mobile-row-icon {
border: 1px solid #d1e9ff;
background: #eff8ff;
color: #1570ef;
}

.wmh-industry-grid a[href*="elearning"] .wmh-industry-icon {
border: 1px solid #e0e7ff;
background: #eef2ff;
color: #4f46e5;
}

.wmh-industry-grid a[href*="ecommerce"] .wmh-industry-icon {
border: 1px solid #bbf7d0;
background: #ecfdf3;
color: #039855;
}

.wmh-industry-grid a[href*="marketing-agencies"] .wmh-industry-icon {
border: 1px solid #fed7aa;
background: #fff7ed;
color: #ea580c;
}

.wmh-industry-grid a[href*="healthcare"] .wmh-industry-icon {
border: 1px solid #fecdd3;
background: #fff1f3;
color: #e11d48;
}

.wmh-menu-icon::before,
.wmh-industry-icon::before,
.wmh-product-icon::before,
.wmh-resource-icon::before,
.wmh-mini-icon::before,
.wmh-mobile-row-icon::before {
width: 22px;
height: 22px;
}

/* =========================================================
   HEADER + MEGA MENUS — FINAL SINGLE DESIGN SYSTEM
========================================================= */

.wmh-shell,
.wmh-header.is-scrolled .wmh-shell {
    border: 1px solid transparent;
    border-radius: 21px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.975),
            rgba(255, 255, 255, 0.975)
        ) padding-box,
        linear-gradient(
            105deg,
            #d0d5dd 0%,
            #6ce9a6 28%,
            #a4bcfd 54%,
            #6ce9a6 78%,
            #d0d5dd 100%
        ) border-box;

    background-size: 100% 100%, 230% 100%;

    box-shadow:
        0 20px 48px -36px rgba(16, 24, 40, 0.5);

    animation:
        wmhShellBorder 9s linear infinite;
}

.wmh-shell::after {
    display: none;
}

@keyframes wmhShellBorder {
    from {
        background-position: 0 0, 210% 0;
    }

    to {
        background-position: 0 0, -20% 0;
    }
}


/* =========================
   MAIN NAVIGATION
========================= */

.wmh-nav-link,
.wmh-direct-link {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================
   SHARED MEGA MENU SHELL
========================= */

.wmh-mega-menu--solutions,
.wmh-mega-menu--product,
.wmh-mega-menu--integrations,
.wmh-mega-menu--resources {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(86vh - 100px);

    padding: 22px;

    overflow-x: hidden;
    overflow-y: auto;

    border: 1px solid rgba(152, 162, 179, 0.34);
    border-radius: 22px;

    background: #ffffff;

    -webkit-backdrop-filter: none;
    backdrop-filter: none;

    isolation: isolate;

    box-shadow:
        0 32px 64px -28px rgba(16, 24, 40, 0.42),
        0 12px 24px -18px rgba(3, 152, 85, 0.20);
}


/* Professional mega-menu scrollbar */

.wmh-mega-menu--solutions::-webkit-scrollbar,
.wmh-mega-menu--product::-webkit-scrollbar,
.wmh-mega-menu--integrations::-webkit-scrollbar,
.wmh-mega-menu--resources::-webkit-scrollbar {
    width: 7px;
}

.wmh-mega-menu--solutions::-webkit-scrollbar-track,
.wmh-mega-menu--product::-webkit-scrollbar-track,
.wmh-mega-menu--integrations::-webkit-scrollbar-track,
.wmh-mega-menu--resources::-webkit-scrollbar-track {
    margin-block: 14px;
    background: transparent;
}

.wmh-mega-menu--solutions::-webkit-scrollbar-thumb,
.wmh-mega-menu--product::-webkit-scrollbar-thumb,
.wmh-mega-menu--integrations::-webkit-scrollbar-thumb,
.wmh-mega-menu--resources::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--green-400),
            var(--green-600)
        )
        padding-box;
}

.wmh-mega-menu--solutions::-webkit-scrollbar-thumb:hover,
.wmh-mega-menu--product::-webkit-scrollbar-thumb:hover,
.wmh-mega-menu--integrations::-webkit-scrollbar-thumb:hover,
.wmh-mega-menu--resources::-webkit-scrollbar-thumb:hover {
    background:
        var(--green-700)
        padding-box;
}
/* Same top accent */
.wmh-mega-menu--solutions::after,
.wmh-mega-menu--product::after,
.wmh-mega-menu--integrations::after,
.wmh-mega-menu--resources::after {
    content: "";

    position: absolute;
    top: -1px;
    left: 50%;

    width: 112px;
    height: 3px;

    border-radius: 0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #6172f3,
            #12b76a,
            #36bffa
        );

    transform: translateX(-50%);
}

/*   DESKTOP MEGA MENUS — FINAL POSITION + SAME WIDTH  */

/* DESKTOP MEGA MENUS — FINAL POSITION + SAME WIDTH */
@media (min-width:1081px) {
.wmh-header .wmh-mega-menu {
position:fixed !important;
top:88px !important;
left:50% !important;
right:auto !important;
width:min(90%,calc(100vw - 32px)) !important;
max-width:none !important;
transform:translate(-50%,9px) scale(.985) !important;
transform-origin:top center !important;
}

.wmh-header .wmh-nav-item.is-open > .wmh-mega-menu {
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(-50%,0) scale(1) !important;
}

.wmh-header.is-scrolled .wmh-mega-menu {
top:73px !important;
}
}

/* =========================
   SAME MENU HEADER
========================= */

.wmh-mega-menu .wmh-menu-head {
    position: relative;

    margin-bottom: 16px;
    padding: 0 0 14px 14px;

    border-bottom:
        1px solid var(--border);
}

.wmh-mega-menu .wmh-menu-head::before {
    content: "";

    position: absolute;

    top: 2px;
    bottom: 14px;
    left: 0;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--green-500),
            #6172f3
        );
}

.wmh-menu-head > div > span,
.wmh-menu-label {
    color: var(--ink-400);

    font-size: 10.5px;
    font-weight: 800;

    line-height: 1.25;

    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.wmh-menu-head .wmh-menu-title {
    max-width: 600px;

    margin-top: 6px;

    color: var(--ink-900);

    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 800;

    line-height: 1.25;
    letter-spacing: -0.025em;
}


/* =========================
   SHARED CARD DESIGN
========================= */

.wmh-menu-card,
.wmh-industry-grid a,
.wmh-product-grid a,
.wmh-integration-grid > a,
.wmh-integration-all,
.wmh-resource-list a {
    min-width: 0;
    min-height: 72px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid rgba(208, 213, 221, 0.72);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 20px -20px rgba(16, 24, 40, 0.56);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.wmh-menu-card:hover,
.wmh-industry-grid a:hover,
.wmh-product-grid a:hover,
.wmh-integration-grid > a:hover,
.wmh-integration-all:hover,
.wmh-resource-list a:hover {
border-color: var(--green-200);
background: var(--green-50);
box-shadow: 0 14px 28px -20px rgba(3,152,85,.42);
transform: translateY(-2px);
}

.wmh-menu-card.is-active,
.wmh-industry-grid a.is-active,
.wmh-product-grid a.is-active,
.wmh-integration-grid > a.is-active,
.wmh-integration-all.is-active,
.wmh-resource-list a.is-active {
border-color: var(--green-400);
background: linear-gradient(145deg,var(--green-50),#fff);
box-shadow: 0 0 0 1px rgba(18,183,106,.08),0 14px 28px -20px rgba(3,152,85,.5);
}


/* =========================
   SAME ICON SIZE
========================= */

.wmh-menu-icon,
.wmh-industry-icon,
.wmh-product-icon,
.wmh-resource-icon,
.wmh-integration-icon,
.wmh-mini-icon {
    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    display: grid;
    place-items: center;

    border-radius: 12px;
}


/* =========================
   SAME TYPOGRAPHY
========================= */

.wmh-menu-card b,
.wmh-industry-grid b,
.wmh-product-grid b,
.wmh-integration-grid b,
.wmh-integration-all b,
.wmh-resource-list b {
    display: block;
    color: var(--ink-800);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.wmh-menu-card small,
.wmh-industry-grid small,
.wmh-product-grid small,
.wmh-integration-grid small,
.wmh-integration-all small,
.wmh-resource-list small {
    display: block;
    margin-top: 4px;
    color: var(--ink-500);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.48;
}


/* =========================
   SOLUTIONS
========================= */

.wmh-solutions-grid {
    grid-template-columns:
        minmax(0, 1.06fr)
        minmax(0, 0.94fr);

    align-items: stretch;

    gap: 12px;
}

.wmh-solutions-grid > div {
    min-width: 0;

    padding: 12px;

    border:
        1px solid rgba(208, 213, 221, 0.72);

    border-radius: 17px;

    background:
        rgba(248, 250, 252, 0.76);
}

.wmh-solutions-grid > div:first-child {
    background:
        linear-gradient(
            145deg,
            rgba(236, 253, 243, 0.78),
            rgba(255, 255, 255, 0.9)
        );
}

.wmh-menu-card {
    grid-template-columns:
        44px
        minmax(0, 1fr)
        18px;

    gap: 12px;
}

.wmh-menu-card + .wmh-menu-card {
    margin-top: 6px;
}

.wmh-industry-grid {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;
}

.wmh-industry-grid a {
    grid-template-columns:
        44px
        minmax(0, 1fr);

    gap: 11px;
}


/* =========================
   PRODUCT
========================= */

.wmh-product-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;

    margin-top: 8px;
}

.wmh-product-grid a {
    grid-template-columns:
        44px
        minmax(0, 1fr);

    gap: 11px;
}


/* =========================
   INTEGRATIONS
========================= */



.wmh-integration-grid > a,
.wmh-integration-all {
    display: grid;

    grid-template-columns:
        44px
        minmax(0, 1fr)
        18px;

    gap: 11px;
}

.wmh-integration-grid > a > span:nth-child(2),
.wmh-integration-all > span:nth-child(2) {
    min-width: 0;
}

.wmh-integration-actions {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;

    margin-top: 8px;
}

.wmh-integration-grid > a > i,
.wmh-integration-all > i {
    color: var(--green-600);

    font-size: 16px;
    font-style: normal;

    transition:
        transform 0.2s ease;
}

.wmh-integration-grid > a:hover > i,
.wmh-integration-all:hover > i {
    transform:
        translateX(3px);
}


/* =========================
   TOOLS
========================= */

.wmh-tools-menu .wmh-resource-list {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.wmh-tools-menu .wmh-resource-list a {
    grid-template-columns:
        44px
        minmax(0, 1fr);

    gap: 11px;
}

.wmh-tools-menu
.wmh-resource-icon--calling {
    border-color:
        rgba(37, 99, 235, 0.14);

    background: #eff6ff;
    color: #2563eb;
}


/* =========================
   SMALL LABEL SPACING
========================= */

.wmh-menu-label {
    margin: 0 4px 8px;
}

/* merketing page css  */

#marketing-hero,
#marketing-hero *,
#marketing-hero *::before,
#marketing-hero *::after {
box-sizing: border-box;
}

#marketing-hero {
position: relative;
isolation: isolate;
width: 100%;
padding: 120px 0 80px 0 !important;
overflow: hidden;
background:
  radial-gradient(
    circle at 4% 10%,
    rgba(18, 183, 106, 0.13),
    transparent 28%
  ),
  radial-gradient(
    circle at 92% 20%,
    rgba(250, 204, 21, 0.12),
    transparent 27%
  ),
  linear-gradient(
    180deg,
    #f7fffb 0%,
    #ffffff 72%
  );
}

#marketing-hero::before {
content: "";

position: absolute;
inset: 0;
z-index: -2;

pointer-events: none;

background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.065) 0.75px,
    transparent 0.75px
  );

background-size: 25px 25px;
opacity: 0.13;
}

#marketing-hero::after {
content: "";

position: absolute;
z-index: -1;

right: -180px;
bottom: -220px;

width: 520px;
height: 520px;

border-radius: 50%;

background:
  rgba(18, 183, 106, 0.09);

filter: blur(70px);
pointer-events: none;
}


/* =========================
  MAIN LAYOUT
  ========================= */

#marketing-hero .wmkhero-grid {
position: relative;
z-index: 2;

display: grid;

grid-template-columns:
  minmax(0, 0.91fr)
  minmax(520px, 1.09fr);

align-items: center;
gap: 56px;

width: 100%;
min-width: 0;
}

#marketing-hero .wmkhero-copy,
#marketing-hero .wmkhero-visual {
min-width: 0;
}


/* =========================
  LEFT CONTENT
  ========================= */

#marketing-hero .wmkhero-copy {
position: relative;
z-index: 4;

width: 100%;
max-width: 615px;
}


#marketing-hero .wmkhero-copy h1 {
width: 100%;
max-width: 660px;
text-transform: capitalize;
margin: 23px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(45px, 4.9vw, 47px);
font-weight: 800;
line-height: 1.025;
letter-spacing: -0.052em;
overflow-wrap: normal;
word-break: normal;
text-wrap: balance;
}

#marketing-hero .wmkhero-copy h1 span {
display: block;

margin-top: 6px;

color: var(--green-600);
}

#marketing-hero .wmkhero-description {
width: 100%;
max-width: 590px;

margin: 21px 0 0;

color: var(--ink-500);

font-size: 15.5px;
line-height: 1.72;

text-wrap: pretty;
}


/* =========================
  BUTTONS
  ========================= */

#marketing-hero .wmkhero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 13px;

margin-top: 29px;
}

#marketing-hero .wmkhero-button {
min-height: 52px;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 9px;

padding: 0 22px;

border-radius: 12px;

font-size: 13px;
font-weight: 800;

white-space: nowrap;

transition:
  color 0.22s ease,
  background 0.22s ease,
  border-color 0.22s ease,
  box-shadow 0.22s ease,
  transform 0.22s ease;
}

#marketing-hero .wmkhero-button svg {
width: 18px;
height: 18px;

fill: none;
stroke: currentColor;

stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;

transition:
  transform 0.22s ease;
}

#marketing-hero .wmkhero-button--primary {
border:
  1px solid
  var(--green-600);

background:
  linear-gradient(
    135deg,
    var(--green-600),
    var(--green-500)
  );

color: #ffffff;

box-shadow:
  0 21px 39px -22px
  rgba(3, 152, 85, 0.78);
}

#marketing-hero
.wmkhero-button--primary:hover {
background:
  linear-gradient(
    135deg,
    var(--green-700),
    var(--green-600)
  );

color: #ffffff;

transform: translateY(-2px);

box-shadow:
  0 26px 44px -23px
  rgba(3, 152, 85, 0.82);
}

#marketing-hero
.wmkhero-button--primary:hover
svg {
transform: translateX(3px);
}

#marketing-hero .wmkhero-button--secondary {
border:
  1px solid
  var(--ink-300);

background:
  rgba(255, 255, 255, 0.95);

color: var(--ink-800);

box-shadow:
  0 16px 31px -28px
  rgba(16, 24, 40, 0.6);
}

#marketing-hero
.wmkhero-button--secondary:hover {
border-color:
  var(--green-200);

color: var(--green-700);

transform: translateY(-2px);
}


/*  BENEFITS */

#marketing-hero .wmkhero-benefits {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 11px 17px;

margin: 24px 0 0;
padding: 0;

list-style: none;
}

#marketing-hero .wmkhero-benefits li {
display: inline-flex;
align-items: center;

gap: 7px;

color: var(--ink-500);

font-size: 10.5px;
font-weight: 700;
}

#marketing-hero
.wmkhero-benefits
li
> span {
width: 21px;
height: 21px;

flex: 0 0 21px;

display: grid;
place-items: center;

border:
  1px solid
  var(--green-100);

border-radius: 7px;

background: var(--green-50);
color: var(--green-700);
}

#marketing-hero
.wmkhero-benefits
svg {
width: 12px;
height: 12px;

fill: none;
stroke: currentColor;

stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}


/*  TRUST  */

#marketing-hero .wmkhero-trust {
display: flex;
align-items: center;

gap: 13px;

margin-top: 28px;
}

#marketing-hero .wmkhero-trust-avatars {
display: flex;
align-items: center;
}

#marketing-hero
.wmkhero-trust-avatars
span {
width: 34px;
height: 34px;

display: grid;
place-items: center;

margin-left: -8px;

border:
  3px solid
  #ffffff;

border-radius: 50%;

background:
  linear-gradient(
    145deg,
    var(--green-600),
    var(--green-400)
  );

color: #ffffff;

font-size: 9px;
font-weight: 850;

box-shadow:
  0 9px 20px -15px
  rgba(16, 24, 40, 0.7);
}

#marketing-hero
.wmkhero-trust-avatars
span:first-child {
margin-left: 0;
}

#marketing-hero
.wmkhero-trust-avatars
span:nth-child(2) {
background:
  linear-gradient(
    145deg,
    #6172f3,
    #8098f9
  );
}

#marketing-hero
.wmkhero-trust-avatars
span:nth-child(3) {
background:
  linear-gradient(
    145deg,
    var(--amber-500),
    var(--amber-400)
  );
}

#marketing-hero
.wmkhero-trust-avatars
span:last-child {
background: var(--ink-900);

font-size: 9px;
}

#marketing-hero .wmkhero-trust-copy div {
display: flex;
align-items: center;

gap: 8px;
}

#marketing-hero .wmkhero-trust-copy b {
color: var(--amber-500);

font-size: 11px;
letter-spacing: 0.08em;
}

#marketing-hero .wmkhero-trust-copy strong {
color: var(--ink-800);

font-size: 10px;
font-weight: 800;
}

#marketing-hero .wmkhero-trust-copy small {
display: block;

margin-top: 3px;

color: var(--ink-400);

font-size: 9px;
}


/*  RIGHT VISUAL  */

#marketing-hero .wmkhero-visual {
position: relative;
z-index: 3;

width: 100%;
}

#marketing-hero .wmkhero-stage {
position: relative;

width: 100%;
min-height: 600px;

overflow: visible;
}

#marketing-hero .wmkhero-halo {
position: absolute;

right: 7px;
bottom: 68px;
z-index: 1;

width: 390px;
height: 390px;

border-radius:
  48% 52% 44% 56% /
  49% 44% 56% 51%;

background:
  radial-gradient(
    circle at 38% 30%,
    rgba(255, 255, 255, 0.85),
    transparent 24%
  ),
  linear-gradient(
    145deg,
    #fff2a8,
    #fde68a 48%,
    #facc15
  );

box-shadow:
  0 36px 70px -43px
  rgba(202, 138, 4, 0.55);

animation:
  wmkheroHaloFloat
  7s ease-in-out
  infinite;
}

#marketing-hero .wmkhero-orbit {
position: absolute;
z-index: 1;

border:
  1px solid
  rgba(3, 152, 85, 0.11);

border-radius: 50%;

pointer-events: none;
}

#marketing-hero .wmkhero-orbit--one {
right: -5px;
bottom: 42px;

width: 430px;
height: 430px;
}

#marketing-hero .wmkhero-orbit--two {
right: 48px;
bottom: 95px;

width: 325px;
height: 325px;

border-style: dashed;
}


/*   CONNECTOR LINES  */

#marketing-hero .wmkhero-connector {
position: absolute;
z-index: 1;

display: block;

border-color:
  rgba(16, 24, 40, 0.72);

pointer-events: none;
}

#marketing-hero .wmkhero-connector--one {
top: 89px;
left: 151px;

width: 188px;
height: 195px;

border-right:
  3px solid
  rgba(16, 24, 40, 0.78);

border-bottom:
  3px solid
  rgba(16, 24, 40, 0.78);

border-radius:
  0 0 22px 0;
}

#marketing-hero .wmkhero-connector--two {
top: 89px;
right: 103px;

width: 122px;
height: 139px;

border-left:
  3px solid
  rgba(16, 24, 40, 0.78);

border-bottom:
  3px solid
  rgba(16, 24, 40, 0.78);

border-radius:
  0 0 0 22px;
}

#marketing-hero .wmkhero-connector--three {
top: 222px;
left: 226px;

width: 112px;
height: 129px;

border-left:
  3px solid
  rgba(16, 24, 40, 0.78);
}


/*   FLOATING METRIC CARDS  */

#marketing-hero .wmkhero-float-card {
position: absolute;
z-index: 5;

width: 200px;

padding: 13px;

border:
  1px solid
  rgba(16, 24, 40, 0.1);

border-radius: 16px;

background:
  rgba(255, 255, 255, 0.97);

box-shadow:
  0 24px 47px -30px
  rgba(16, 24, 40, 0.48),
  inset 0 1px 0
  rgba(255, 255, 255, 0.95);

backdrop-filter: blur(13px);
-webkit-backdrop-filter: blur(13px);

animation:
  wmkheroCardFloat
  5.5s ease-in-out
  infinite;
}

#marketing-hero
.wmkhero-float-card
> div:first-child {
display: grid;

grid-template-columns:
  31px minmax(0, 1fr) auto;

align-items: center;
gap: 8px;
}

#marketing-hero .wmkhero-metric-icon {
width: 31px;
height: 31px;

display: grid;
place-items: center;

border-radius: 9px;

background: #eff8ff;
color: #0ba5ec;
}

#marketing-hero
.wmkhero-float-card--leads
.wmkhero-metric-icon {
background: #fdf4ff;
color: #c026d3;
}

#marketing-hero
.wmkhero-float-card--roi
.wmkhero-metric-icon {
background: var(--green-50);
color: var(--green-700);
}

#marketing-hero .wmkhero-metric-icon svg {
width: 17px;
height: 17px;

fill: none;
stroke: currentColor;

stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

#marketing-hero
.wmkhero-float-card
small,
#marketing-hero
.wmkhero-float-card
strong {
display: block;
}

#marketing-hero
.wmkhero-float-card
small {
color: var(--ink-400);

font-size: 9px;
}

#marketing-hero
.wmkhero-float-card
strong {
margin-top: 2px;

color: var(--ink-900);

font-size: 13px;
font-weight: 800;
}

#marketing-hero
.wmkhero-float-card
em {
min-height: 24px;

display: inline-flex;
align-items: center;

padding: 0 7px;

border-radius: 7px;

background: var(--green-50);
color: var(--green-700);

font-size: 9px;
font-style: normal;
font-weight: 850;
}

#marketing-hero .wmkhero-mini-chart {
width: 100%;
height: 58px;

margin-top: 8px;

overflow: visible;
}

#marketing-hero .wmkhero-chart-area--cost {
fill: url("#wmkheroCostFill");
}

#marketing-hero .wmkhero-chart-area--leads {
fill: url("#wmkheroLeadFill");
}

#marketing-hero .wmkhero-chart-area--roi {
fill: url("#wmkheroRoiFill");
}

#marketing-hero .wmkhero-chart-line {
fill: none;

stroke-width: 2.4;
stroke-linecap: round;

stroke-dasharray: 290;
stroke-dashoffset: 290;

animation:
  wmkheroChartDraw
  1.5s
  0.45s
  cubic-bezier(0.22, 1, 0.36, 1)
  forwards;
}

#marketing-hero .wmkhero-chart-line--cost {
stroke: #0ba5ec;
}

#marketing-hero .wmkhero-chart-line--leads {
stroke: #d946ef;
}

#marketing-hero .wmkhero-chart-line--roi {
stroke: var(--green-500);
}

#marketing-hero
.wmkhero-mini-chart
circle {
fill: #ffffff;
stroke: var(--green-600);

stroke-width: 2.5;
}

#marketing-hero .wmkhero-float-card--cost {
top: 22px;
left: 8px;
}

#marketing-hero .wmkhero-float-card--leads {
top: 41px;
right: 5px;

animation-delay: 0.8s;
}

#marketing-hero .wmkhero-float-card--roi {
top: 166px;
left: 153px;

width: 210px;

animation-delay: 1.4s;
}

#marketing-hero .wmkhero-person {
position: absolute;

right: 13px;
bottom: 65px;
z-index: 3;

width: 330px;
height: 440px;
}

#marketing-hero .wmkhero-person > img {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center bottom;
filter:
  drop-shadow(
    0 26px 26px
    rgba(16, 24, 40, 0.16)
  );
}
/* AI FOLLOW-UP BADGE */
#marketing-hero .wmkhero-person-badge {
position: absolute;
top: 83px;
right: 4px;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 7px;
width: max-content;
min-height: 34px;
padding: 5px 11px 5px 5px;
border: 1px solid rgba(37, 211, 102, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
line-height: 1;
white-space: nowrap;
box-shadow: 0 15px 30px -19px rgba(16, 24, 40, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}

#marketing-hero .wmkhero-badge-whatsapp {
width: 24px;
height: 24px;
flex: 0 0 24px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 50%;
background: #fff;
}

#marketing-hero .wmkhero-badge-whatsapp img {
position: static !important;
display: block !important;
width: 22px !important;
height: 22px !important;
max-width: 22px !important;
object-fit: contain !important;
filter: none !important;
transform: none !important;
user-select: none;
pointer-events: none;
}

#marketing-hero .wmkhero-person-badge-text {
display: block;
line-height: 1;
white-space: nowrap;
}

#marketing-hero .wmkhero-channel {
width: 53px;
height: 53px;

display: grid;
place-items: center;

border:
  1px solid
  rgba(16, 24, 40, 0.1);

border-radius: 15px;

background: #ffffff;

box-shadow:
  0 18px 35px -23px
  rgba(16, 24, 40, 0.5);

animation:
  wmkheroChannelFloat
  4.5s ease-in-out
  infinite;
}

#marketing-hero
.wmkhero-channel:nth-child(2) {
width: 62px;
height: 62px;

animation-delay: 0.8s;
}

#marketing-hero
.wmkhero-channel:nth-child(3) {
animation-delay: 1.4s;
}

#marketing-hero
.wmkhero-channel--whatsapp {
color: #12b76a;
}

#marketing-hero
.wmkhero-channel-logo
img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center;
border: 0;
transform: translateZ(0);
user-select: none;
pointer-events: none;
}

#marketing-hero
.wmkhero-channel--whatsapp
.wmkhero-channel-logo {
width: 40px;
height: 40px;
}

#marketing-hero
.wmkhero-channel--google
.wmkhero-channel-logo {
width: 39px;
height: 39px;
}

#marketing-hero
.wmkhero-channel:hover
.wmkhero-channel-logo {
transform:
  scale(1.08)
  translateZ(0);
}

#marketing-hero .wmkhero-channel-stack {
position: absolute;
left: 61px;
bottom: 102px;
z-index: 8;
display: flex;
align-items: flex-end;
gap: 10px;
}

#marketing-hero .wmkhero-channel {
position: relative;
width: 55px;
height: 55px;
flex: 0 0 55px;
display: grid;
place-items: center;
border:
  1px solid
  rgba(16, 24, 40, 0.1);
border-radius: 16px;
background:
  rgba(255, 255, 255, 0.98);
box-shadow:
  0 20px 39px -24px
  rgba(16, 24, 40, 0.52),
  inset 0 1px 0
  rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
animation:
  wmkheroChannelFloat
  4.5s ease-in-out
  infinite;
}

#marketing-hero
.wmkhero-channel:nth-child(2) {
width: 64px;
height: 64px;
flex-basis: 64px;
border-radius: 18px;
animation-delay: 0.8s;
}

#marketing-hero
.wmkhero-channel:nth-child(3) {
animation-delay: 1.4s;
}

#marketing-hero .wmkhero-channel-logo {
width: 39px;
height: 39px;

display: grid;
place-items: center;
transition:
  transform 0.25s
  cubic-bezier(0.22, 1, 0.36, 1);
}

#marketing-hero
.wmkhero-channel:nth-child(2)
.wmkhero-channel-logo {
width: 44px;
height: 44px;
}

#marketing-hero
.wmkhero-channel:hover
.wmkhero-channel-logo {
transform:
  scale(1.1)
  rotate(-2deg);
}

#marketing-hero
.wmkhero-channel--whatsapp {
border-color:
  rgba(37, 211, 102, 0.2);
background:
  linear-gradient(
    145deg,
    #ffffff,
    #f1fff6
);
}

#marketing-hero
.wmkhero-channel--business {
border-color:
  rgba(37, 211, 102, 0.2);
background:
  linear-gradient(
    145deg,
    #ffffff,
    #f1fff6
  );
}

#marketing-hero
.wmkhero-channel--google {
border-color:
  rgba(66, 133, 244, 0.18);
background:
  linear-gradient(
    145deg,
    #ffffff,
    #f5f9ff
  );
}


/* Tooltip */

#marketing-hero .wmkhero-channel::before {
content: attr(data-label);
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
min-height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 9px;
border:
  1px solid
  rgba(16, 24, 40, 0.09);
border-radius: 8px;
background:
  rgba(16, 24, 40, 0.94);
color: #ffffff;
font-size: 9px;
font-weight: 750;
line-height: 1;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transform:
  translateX(-50%)
  translateY(5px);
transition:
  opacity 0.2s ease,
  transform 0.2s ease;
}

#marketing-hero .wmkhero-channel::after {
content: "";
position: absolute;
bottom: calc(100% + 5px);
left: 50%;
width: 8px;
height: 8px;
background:
  rgba(16, 24, 40, 0.94);
opacity: 0;
pointer-events: none;
transform:
  translateX(-50%)
  rotate(45deg);
transition:
  opacity 0.2s ease;
}

#marketing-hero
.wmkhero-channel:hover::before {
opacity: 1;

transform:
  translateX(-50%)
  translateY(0);
}

#marketing-hero
.wmkhero-channel:hover::after {
opacity: 1;
}


#marketing-hero .wmkhero-results {
position: absolute;
right: 5px;
bottom: 0;
left: 5px;
z-index: 7;
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
overflow: hidden;
border:
  1px solid
  rgba(16, 24, 40, 0.1);
border-radius: 18px;
background:
  rgba(255, 255, 255, 0.96);
box-shadow:
  0 28px 55px -35px
  rgba(16, 24, 40, 0.5);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}

#marketing-hero
.wmkhero-results::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 4px;
background:
  linear-gradient(
    90deg,
    var(--green-400),
    #36bffa,
    #d946ef,
    var(--amber-400)
  );
}

#marketing-hero .wmkhero-results article {
position: relative;
min-width: 0;
min-height: 84px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px 17px;
text-align: center;
}

#marketing-hero
.wmkhero-results
article:not(:last-child)::after {
content: "";
position: absolute;
top: 18px;
right: 0;
bottom: 18px;
width: 1px;
background: var(--border);
}

#marketing-hero
.wmkhero-results
strong,
#marketing-hero
.wmkhero-results
span {
display: block;
}

#marketing-hero
.wmkhero-results
strong {
color: var(--green-700);
font-family: var(--font-display);
font-size: 24px;
font-weight: 850;
line-height: 1;
letter-spacing: -0.04em;
font-variant-numeric:
  tabular-nums;
}

#marketing-hero
.wmkhero-results
article:nth-child(2)
strong {
color: #2563eb;
}

#marketing-hero
.wmkhero-results
article:nth-child(3)
strong {
color: var(--amber-600);
}

#marketing-hero
.wmkhero-results
span {
margin-top: 7px;
overflow: hidden;
color: var(--ink-500);
font-size: 9px;
font-weight: 700;
text-overflow: ellipsis;
white-space: nowrap;
}

#marketing-hero.wmktg-counted
.wmkhero-results {
animation:
  wmkheroResultsSettle
  0.55s
  cubic-bezier(0.22, 1, 0.36, 1)
  both;
}

@keyframes wmkheroPulse {
50% {
  box-shadow:
    0 0 0 9px
    rgba(18, 183, 106, 0);
}
}

@keyframes wmkheroChartDraw {
to {
  stroke-dashoffset: 0;
}
}

@keyframes wmkheroCardFloat {
0%,
100% {
  transform: translateY(0);
}
50% {
  transform: translateY(-7px);
}
}

@keyframes wmkheroHaloFloat {
0%,
100% {
  transform:
    translateY(0)
    rotate(0);
}
50% {
  transform:
    translateY(-10px)
    rotate(2deg);
}
}

@keyframes wmkheroChannelFloat {
0%,
100% {
  transform:
    translateY(0)
    rotate(0);
}
50% {
  transform:
    translateY(-7px)
    rotate(2deg);
}
}

@keyframes wmkheroResultsSettle {
from {
  opacity: 0.55;

  transform:
    translateY(12px)
    scale(0.985);
}
to {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}
}

#marketing-hero .wmkhero-badge-whatsapp {
width: 24px;
height: 24px;
flex: 0 0 24px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 50%;
background: #ffffff;
}

#marketing-hero
.wmkhero-badge-whatsapp
img {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
object-fit: contain;
object-position: center;
border: 0;
user-select: none;
pointer-events: none;
}

#marketing-hero
.wmkhero-person-badge-text {
display: block;
line-height: 1;
white-space: nowrap;
}

/* sceond section css  */

#marketing-trusted,
#marketing-trusted *,
#marketing-trusted *::before,
#marketing-trusted *::after {
box-sizing: border-box;
}

#marketing-trusted {
position: relative;
isolation: isolate;
padding: 88px 0 94px;
overflow: hidden;
background:
  radial-gradient(circle at 8% 20%, rgba(18, 183, 106, 0.1), transparent 27%),
  radial-gradient(circle at 92% 75%, rgba(217, 70, 239, 0.08), transparent 25%),
  linear-gradient(180deg, #ffffff 0%, #fff8ff 100%);
}

#marketing-trusted::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(rgba(16, 24, 40, 0.06) 0.7px, transparent 0.7px);
background-size: 24px 24px;
opacity: 0.12;
pointer-events: none;
}

#marketing-trusted .wmktrust-heading {
margin: 0 auto 40px;
text-align: center;
}

#marketing-trusted .wmktrust-eyebrow {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 14px;
border: 1px solid rgba(18, 183, 106, 0.17);
border-radius: 999px;
background: rgba(236, 253, 243, 0.84);
color: var(--green-700);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#marketing-trusted .wmktrust-eyebrow i {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.12);
}

#marketing-trusted .wmktrust-heading h2 {
max-width: 800px;
margin: 17px auto 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(34px, 4.1vw, 41px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.043em;
}

#marketing-trusted .wmktrust-heading h2 span {
color: var(--green-600);
/* display:block; */
}

#marketing-trusted .wmktrust-heading p {
max-width: 800px;
margin: 16px auto 0;
color: var(--ink-500);
font-size: 15px;
line-height: 1.7;
}

#marketing-trusted .wmktrust-shell {
position: relative;
padding: 23px 0;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 28px;
background:
  radial-gradient(circle at 0% 0%, rgba(18, 183, 106, 0.08), transparent 27%),
  radial-gradient(circle at 100% 100%, rgba(217, 70, 239, 0.06), transparent 25%),
  rgba(255, 255, 255, 0.86);
box-shadow: 0 30px 65px -46px rgba(16, 24, 40, 0.32);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}

#marketing-trusted .wmktrust-shell::before,
#marketing-trusted .wmktrust-shell::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
z-index: 4;
width: 105px;
pointer-events: none;
}

#marketing-trusted .wmktrust-shell::before {
left: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0));
}

#marketing-trusted .wmktrust-shell::after {
right: 0;
background: linear-gradient(-90deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0));
}

#marketing-trusted .wmktrust-viewport {
width: 100%;
overflow: hidden;
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}

#marketing-trusted .wmktrust-viewport.is-dragging {
cursor: grabbing;
}

#marketing-trusted .wmktrust-track {
display: flex;
align-items: stretch;
gap: 18px;
width: max-content;
padding: 2px 0;
will-change: transform;
}

#marketing-trusted .wmktrust-group {
display: flex;
align-items: stretch;
gap: 18px;
flex: 0 0 auto;
}

#marketing-trusted .wmktrust-logo-card {
width: 190px;
min-width: 190px;
height: 94px;
display: flex;
align-items: center;
justify-content: center;
padding: 17px 19px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 18px;
background:
  linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(249, 250, 251, 0.94));
box-shadow:
  0 17px 34px -29px rgba(16, 24, 40, 0.42),
  inset 0 1px 0 rgba(255, 255, 255, 0.95);
transition:
  border-color 0.25s ease,
  box-shadow 0.25s ease,
  transform 0.25s ease;
}

#marketing-trusted .wmktrust-logo-card:hover {
border-color: rgba(18, 183, 106, 0.24);
box-shadow: 0 22px 40px -29px rgba(3, 152, 85, 0.3);
transform: translateY(-3px);
}

#marketing-trusted .wmktrust-logo-card img {
display: block;
width: auto;
height: auto;
max-width: 152px;
max-height: 48px;
object-fit: contain;
object-position: center;
pointer-events: none;
user-select: none;
-webkit-user-drag: none;
}

#marketing-trusted .wmktrust-track {
display: flex;
align-items: stretch;
width: max-content;
gap: 0;
will-change: transform;
}

#marketing-trusted .wmktrust-group {
display: flex;
align-items: stretch;
flex: 0 0 auto;
gap: 18px;
}

#marketing-trusted .wmktrust-logo-card {
flex: 0 0 auto;
width: auto;
min-width: 0;
}
/* end second section  */

/* third section css  */

/* Marketing touchpoints */

#marketing-touchpoints,
#marketing-touchpoints *,
#marketing-touchpoints *::before,
#marketing-touchpoints *::after {
box-sizing: border-box;
}

#marketing-touchpoints {
position: relative;
isolation: isolate;
padding: 68px 0;
overflow: hidden;
background:
  radial-gradient(circle at 8% 15%, rgba(18, 183, 106, 0.1), transparent 28%),
  radial-gradient(circle at 93% 82%, rgba(59, 130, 246, 0.07), transparent 26%),
  linear-gradient(180deg, #ffffff 0%, #f6fbf9 100%);
}

#marketing-touchpoints::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(rgba(16, 24, 40, 0.055) 0.7px, transparent 0.7px);
background-size: 24px 24px;
opacity: 0.14;
pointer-events: none;
}

#marketing-touchpoints .wmtouch-heading {
margin: 0 auto 30px;
text-align: center;
}

#marketing-touchpoints .wmtouch-eyebrow {
min-height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 0 14px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: rgba(236, 253, 243, 0.9);
color: var(--green-700);
font-size: 10px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#marketing-touchpoints .wmtouch-eyebrow i {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.12);
}

#marketing-touchpoints .wmtouch-heading h2 {
margin: 18px auto 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(36px, 4.6vw, 41px);
font-weight: 800;
line-height: 1.07;
letter-spacing: -0.045em;
text-wrap: balance;
}

#marketing-touchpoints .wmtouch-heading h2 span {
display: block;
margin-top: 5px;
color: var(--green-600);
}

#marketing-touchpoints .wmtouch-heading p {
max-width: 770px;
margin: 17px auto 0;
color: var(--ink-500);
font-size: 15.5px;
line-height: 1.7;
text-wrap: pretty;
}

#marketing-touchpoints .wmtouch-visual-shell {
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 15px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.09);
border-radius: 30px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
  0 38px 85px -52px rgba(16, 24, 40, 0.52),
  0 24px 55px -46px rgba(3, 152, 85, 0.34);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

#marketing-touchpoints .wmtouch-visual-shell::before {
content: "";
position: absolute;
top: -140px;
right: -120px;
width: 330px;
height: 330px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.08);
pointer-events: none;
}

#marketing-touchpoints .wmtouch-visual-topbar {
position: relative;
z-index: 2;
min-height: 67px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 0 7px 15px;
}

#marketing-touchpoints .wmtouch-visual-label {
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
}

#marketing-touchpoints .wmtouch-visual-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: linear-gradient(145deg, var(--green-600), var(--green-500));
color: #fff;
box-shadow: 0 16px 30px -20px rgba(3, 152, 85, 0.7);
}

#marketing-touchpoints .wmtouch-visual-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

#marketing-touchpoints .wmtouch-visual-label small,
#marketing-touchpoints .wmtouch-visual-label strong {
display: block;
}

#marketing-touchpoints .wmtouch-visual-label small {
color: var(--ink-400);
font-size: 9px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}

#marketing-touchpoints .wmtouch-visual-label strong {
margin-top: 3px;
color: var(--ink-800);
font-size: 12px;
font-weight: 800;
}

#marketing-touchpoints .wmtouch-live {
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 11px;
border: 1px solid var(--green-100);
border-radius: 999px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}

#marketing-touchpoints .wmtouch-live i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
}

#marketing-touchpoints .wmtouch-figure {
position: relative;
z-index: 2;
margin: 0;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.1);
border-radius: 23px;
background: #0d2422;
box-shadow: 0 27px 60px -39px rgba(16, 24, 40, 0.65);
}



#marketing-touchpoints .wmtouch-footer {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 9px;
padding-top: 14px;
}

#marketing-touchpoints .wmtouch-footer span {
min-height: 47px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 12px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 13px;
background: var(--ink-50);
color: var(--ink-600);
font-size: 9px;
font-weight: 750;
text-align: center;
}

#marketing-touchpoints .wmtouch-footer i {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: var(--green-500);
}
/* third section css end  */

/* fourth section css start  */

#marketing-performance,
#marketing-performance *,
#marketing-performance *::before,
#marketing-performance *::after {
box-sizing: border-box;
}

#marketing-performance {
position: relative;
isolation: isolate;
padding: 60px 0;
overflow: hidden;
background:
  radial-gradient(circle at 7% 20%, rgba(18, 183, 106, 0.09), transparent 25%),
  radial-gradient(circle at 92% 85%, rgba(247, 144, 9, 0.08), transparent 24%),
  linear-gradient(180deg, #fff 0%, #f8fcfa 100%);
}

#marketing-performance::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-image: radial-gradient(rgba(16, 24, 40, 0.055) 0.7px, transparent 0.7px);
background-size: 24px 24px;
opacity: 0.11;
pointer-events: none;
}

#marketing-performance .wmgrowth-shell {
display: grid;
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.18fr);
align-items: stretch;
gap: 16px;
padding: 16px;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 24px;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 34px 75px -52px rgba(16, 24, 40, 0.4);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}

#marketing-performance .wmgrowth-intro {
position: relative;
min-width: 0;
padding: 28px 28px;
overflow: hidden;
border: 1px solid rgba(18, 183, 106, 0.12);
border-radius: 19px;
background:
  radial-gradient(circle at 0% 0%, rgba(50, 213, 131, 0.16), transparent 35%),
  linear-gradient(145deg, #ecfdf3, #f8fffb);
}

#marketing-performance .wmgrowth-intro::after {
content: "";
position: absolute;
right: -90px;
bottom: -115px;
width: 230px;
height: 230px;
border: 1px dashed rgba(18, 183, 106, 0.14);
border-radius: 50%;
}

#marketing-performance .wmgrowth-eyebrow {
position: relative;
z-index: 1;
min-height: 32px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 12px;
border: 1px solid var(--green-100);
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#marketing-performance .wmgrowth-eyebrow i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
}

#marketing-performance .wmgrowth-intro h2 {
position: relative;
z-index: 1;
max-width: 420px;
margin: 15px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(30px, 3vw, 30px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -0.042em;
text-wrap: balance;
}

#marketing-performance .wmgrowth-intro h2 span {
display: block;
margin-top: 4px;
color: var(--green-600);
}

#marketing-performance .wmgrowth-intro > p {
position: relative;
z-index: 1;
max-width: 430px;
margin: 13px 0 0;
color: var(--ink-500);
font-size: 12.5px;
line-height: 1.65;
}

#marketing-performance .wmgrowth-proof {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
color: var(--ink-700);
font-size: 9px;
font-weight: 750;
}

#marketing-performance .wmgrowth-proof span {
width: 27px;
height: 27px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--green-600);
color: #fff;
font-size: 11px;
font-weight: 900;
}

#marketing-performance .wmgrowth-metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}

#marketing-performance .wmgrowth-card {
position: relative;
min-width: 0;
min-height: 225px;
padding: 20px 19px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 18px;
background: #fff;
box-shadow: 0 20px 42px -34px rgba(16, 24, 40, 0.42);
transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

#marketing-performance .wmgrowth-card::before {
content: "";
position: absolute;
top: 0;
right: 20px;
left: 20px;
height: 4px;
border-radius: 0 0 999px 999px;
background: var(--green-500);
}

#marketing-performance .wmgrowth-card--roi::before {
background: #6172f3;
}

#marketing-performance .wmgrowth-card--cost::before {
background: var(--amber-500);
}

#marketing-performance .wmgrowth-card:hover {
border-color: rgba(18, 183, 106, 0.2);
box-shadow: 0 26px 48px -33px rgba(16, 24, 40, 0.48);
transform: translateY(-3px);
}

#marketing-performance .wmgrowth-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}

#marketing-performance .wmgrowth-card-top > span {
color: var(--ink-500);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.07em;
text-transform: uppercase;
}

#marketing-performance .wmgrowth-card-top i {
width: 28px;
height: 28px;
display: grid;
place-items: center;
border: 1px solid var(--border);
border-radius: 9px;
background: var(--ink-50);
color: var(--ink-400);
font-size: 9px;
font-style: normal;
font-weight: 800;
}

#marketing-performance .wmgrowth-value {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 10px;
margin-top: 22px;
}

#marketing-performance .wmgrowth-value strong {
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(40px, 44px, 54px);
font-weight: 850;
line-height: 0.95;
letter-spacing: -0.06em;
font-variant-numeric: tabular-nums;
}

#marketing-performance .wmgrowth-value > span {
min-height: 25px;
display: inline-flex;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
}

#marketing-performance .wmgrowth-card--roi .wmgrowth-value > span {
background: #eef4ff;
color: #3538cd;
}

#marketing-performance .wmgrowth-card--cost .wmgrowth-value > span {
background: var(--amber-50);
color: var(--amber-600);
}

#marketing-performance .wmgrowth-card > p {
min-height: 43px;
margin: 12px 0 0;
color: var(--ink-500);
font-size: 9px;
line-height: 1.55;
}

#marketing-performance .wmgrowth-meter {
height: 8px;
margin-top: 17px;
overflow: hidden;
border-radius: 999px;
background: var(--green-100);
}

#marketing-performance .wmgrowth-meter span {
display: block;
width: var(--wmgrowth-width);
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--green-600), var(--green-400));
}

#marketing-performance .wmgrowth-bars {
height: 42px;
display: flex;
align-items: flex-end;
gap: 6px;
margin-top: 14px;
}

#marketing-performance .wmgrowth-bars i {
flex: 1;
border-radius: 5px 5px 2px 2px;
background: linear-gradient(180deg, #8098f9, #6172f3);
}

#marketing-performance .wmgrowth-bars i:nth-child(1) { height: 32%; }
#marketing-performance .wmgrowth-bars i:nth-child(2) { height: 47%; }
#marketing-performance .wmgrowth-bars i:nth-child(3) { height: 43%; }
#marketing-performance .wmgrowth-bars i:nth-child(4) { height: 69%; }
#marketing-performance .wmgrowth-bars i:nth-child(5) { height: 100%; }

#marketing-performance .wmgrowth-cost-track {
position: relative;
height: 42px;
margin-top: 14px;
}

#marketing-performance .wmgrowth-cost-track::before {
content: "";
position: absolute;
top: 19px;
right: 0;
left: 0;
height: 7px;
border-radius: 999px;
background: var(--amber-100);
}

#marketing-performance .wmgrowth-cost-track span {
position: absolute;
top: 19px;
right: 24%;
left: 0;
height: 7px;
border-radius: 999px;
background: linear-gradient(90deg, var(--amber-500), var(--amber-400));
}

#marketing-performance .wmgrowth-cost-track i {
position: absolute;
top: 12px;
right: 21%;
width: 21px;
height: 21px;
border: 4px solid #fff;
border-radius: 50%;
background: var(--amber-500);
box-shadow: 0 7px 15px -8px rgba(247, 144, 9, 0.8);
}
/* fourth section css end  */

/*   COMPACT META MESSAGING PARTNER SECTION  */

#connected-messaging-channels,
#connected-messaging-channels *,
#connected-messaging-channels *::before,
#connected-messaging-channels *::after {
box-sizing: border-box;
}

#connected-messaging-channels {
position: relative;
padding: 42px 0;
overflow: hidden;
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
  );
}

#connected-messaging-channels .mchannel-card {
position: relative;
display: grid;
grid-template-columns: minmax(290px, 0.82fr) minmax(0, 1.18fr);
align-items: center;
gap: 38px;
max-width: 1160px;
margin: 0 auto;
padding: 25px 20px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 26px;
background:
  radial-gradient(
    circle at 3% 5%,
    rgba(37, 211, 102, 0.11),
    transparent 34%
  ),
  radial-gradient(
    circle at 96% 90%,
    rgba(0, 132, 255, 0.1),
    transparent 35%
  ),
  linear-gradient(
    135deg,
    #f1fff7,
    #eef7ff
  );
box-shadow:
  0 30px 70px -52px rgba(16, 24, 40, 0.52);
}

#connected-messaging-channels .mchannel-card::before {
content: "";
position: absolute;
top: -85px;
right: -75px;
width: 220px;
height: 220px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.38);
pointer-events: none;
}

#connected-messaging-channels .mchannel-brand-side,
#connected-messaging-channels .mchannel-content {
position: relative;
z-index: 2;
min-width: 0;
}

#connected-messaging-channels .mchannel-brand-side {
padding: 20px;
border: 1px solid rgba(16, 24, 40, 0.06);
border-radius: 19px;
background: rgba(255, 255, 255, 0.68);
}

#connected-messaging-channels .mchannel-provider-badge {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 20px;
}

#connected-messaging-channels .mchannel-provider-badge img {
display: block;
width: 56px;
height: 28px;
object-fit: contain;
}

#connected-messaging-channels .mchannel-provider-badge span {
color: #0866ff;
font-size: 10px;
font-weight: 850;
line-height: 1.35;
letter-spacing: 0.045em;
text-transform: uppercase;
}

#connected-messaging-channels .mchannel-logo-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}

#connected-messaging-channels .mchannel-logo-box {
width: 82px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}

#connected-messaging-channels .mchannel-logo-box img {
display: block;
width: 58px;
height: 58px;
padding: 10px;
object-fit: contain;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 17px;
background: #ffffff;
box-shadow:
  0 14px 28px -22px rgba(16, 24, 40, 0.4);
transition:
  transform 0.25s ease,
  box-shadow 0.25s ease;
}

#connected-messaging-channels .mchannel-logo-box:hover img {
transform: translateY(-4px);
box-shadow:
  0 20px 36px -24px rgba(16, 24, 40, 0.46);
}

#connected-messaging-channels .mchannel-logo-box small {
color: #475467;
font-size: 9px;
font-weight: 800;
}

#connected-messaging-channels .mchannel-connector {
width: 18px;
height: 1px;
flex: 0 0 18px;
background:
  linear-gradient(
    90deg,
    rgba(37, 211, 102, 0.55),
    rgba(8, 102, 255, 0.55)
  );
}

#connected-messaging-channels .mchannel-eyebrow {
display: inline-block;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.085em;
text-transform: uppercase;
}

#connected-messaging-channels .mchannel-content h2 {
max-width: 620px;
margin: 10px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(28px, 3.5vw, 35px);
font-weight: 850;
line-height: 1.08;
letter-spacing: -0.045em;
text-wrap: balance;
}

#connected-messaging-channels .mchannel-content h2 span {
color: #079455;
}

#connected-messaging-channels .mchannel-content > p {
max-width: 650px;
margin: 14px 0 0;
color: #667085;
font-size: 14px;
line-height: 1.7;
}

#connected-messaging-channels .mchannel-benefits {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 19px;
}

#connected-messaging-channels .mchannel-benefits > span {
min-height: 36px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 12px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
color: #344054;
font-size: 10px;
font-weight: 750;
}

#connected-messaging-channels .mchannel-benefits i {
width: 18px;
height: 18px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-style: normal;
font-weight: 900;
}

/*   WHATSAPP COMMERCE FEATURES */

#whatsapp-commerce-features,
#whatsapp-commerce-features *,
#whatsapp-commerce-features *::before,
#whatsapp-commerce-features *::after {
box-sizing: border-box;
}

#whatsapp-commerce-features {
position: relative;
isolation: isolate;
padding: 92px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 7% 14%,
    rgba(18, 183, 106, 0.08),
    transparent 28%
  ),
  radial-gradient(
    circle at 93% 86%,
    rgba(54, 191, 250, 0.08),
    transparent 28%
  ),
  linear-gradient(
    180deg,
    #f8fffb 0%,
    #f0fbf5 100%
  );
}

#whatsapp-commerce-features::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: 0.13;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(18, 183, 106, 0.12) 0.8px,
    transparent 0.8px
  );
background-size: 26px 26px;
}

#whatsapp-commerce-features .commercex-heading {
max-width: 760px;
margin: 0 auto 46px;
text-align: center;
}

#whatsapp-commerce-features .commercex-eyebrow {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 31px;
padding: 7px 13px;
border: 1px solid rgba(18, 183, 106, 0.2);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    rgba(236, 253, 243, 0.95),
    rgba(239, 246, 255, 0.95)
  );
color: #08783e;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#whatsapp-commerce-features .commercex-heading h2 {
margin: 14px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(38px, 5vw, 41px);
font-weight: 850;
line-height: 1.04;
letter-spacing: -0.05em;
text-wrap: balance;
}

#whatsapp-commerce-features .commercex-heading p {
max-width: 680px;
margin: 18px auto 0;
color: #667085;
font-size: 16px;
line-height: 1.75;
}

#whatsapp-commerce-features .commercex-grid {
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
gap: 20px;
align-items: stretch;
}

#whatsapp-commerce-features .commercex-card {
position: relative;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 27px;
background: #ffffff;
box-shadow:
  0 28px 65px -48px rgba(16, 24, 40, 0.48);
transition:
  transform 0.3s ease,
  box-shadow 0.3s ease,
  border-color 0.3s ease;
}

#whatsapp-commerce-features .commercex-card:hover {
transform: translateY(-8px);
border-color: rgba(18, 183, 106, 0.22);
box-shadow:
  0 38px 75px -48px rgba(16, 24, 40, 0.54);
}

#whatsapp-commerce-features .commercex-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 19px 20px 13px;
}

#whatsapp-commerce-features .commercex-number {
width: 35px;
height: 35px;
flex: 0 0 35px;
display: grid;
place-items: center;
border-radius: 11px;
background:
  linear-gradient(
    145deg,
    #dcfae9,
    #eaf4ff
  );
color: #08783e;
font-size: 10px;
font-weight: 900;
}

#whatsapp-commerce-features .commercex-label {
min-height: 29px;
display: inline-flex;
align-items: center;
padding: 6px 10px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 999px;
background: #f9fafb;
color: #667085;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}

#whatsapp-commerce-features .commercex-image-wrap {
position: relative;
min-height: 315px;
display: grid;
place-items: center;
margin: 0 15px;
padding: 20px;
overflow: hidden;
border-radius: 21px;
background:
  linear-gradient(
    145deg,
    #f3fcf7,
    #eef8ff
  );
}

#whatsapp-commerce-features .commercex-image-wrap img {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 330px;
height: 275px;
object-fit: contain;
filter:
  drop-shadow(
    0 22px 26px rgba(16, 24, 40, 0.12)
  );
transition:
  transform 0.35s ease;
}

#whatsapp-commerce-features .commercex-card:hover
.commercex-image-wrap img {
transform: translateY(-5px) scale(1.02);
}

#whatsapp-commerce-features .commercex-shape {
position: absolute;
border-radius: 50%;
pointer-events: none;
}

#whatsapp-commerce-features .commercex-shape-one {
top: 31px;
right: 19px;
width: 120px;
height: 120px;
background: rgba(18, 183, 106, 0.13);
}

#whatsapp-commerce-features .commercex-shape-two {
left: 18px;
bottom: 25px;
width: 135px;
height: 135px;
background: rgba(84, 182, 255, 0.14);
}

#whatsapp-commerce-features .commercex-shape-three {
top: 45px;
left: 24px;
width: 105px;
height: 105px;
background: rgba(54, 191, 250, 0.11);
}

#whatsapp-commerce-features .commercex-card-content {
display: flex;
flex: 1;
flex-direction: column;
padding: 25px 22px 23px;
}

#whatsapp-commerce-features .commercex-card-content h3 {
margin: 0;
color: #101828;
font-family: var(--font-display);
font-size: 23px;
font-weight: 820;
line-height: 1.18;
letter-spacing: -0.035em;
}

#whatsapp-commerce-features .commercex-card-content > p {
margin: 14px 0;
color: #667085;
font-size: 13px;
line-height: 1.68;
}

#whatsapp-commerce-features .commercex-result {
min-height: 54px;
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 12px;
border: 1px solid rgba(18, 183, 106, 0.14);
border-radius: 14px;
background:
  linear-gradient(
    135deg,
    #effcf5,
    #f2f8ff
  );
color: #475467;
font-size: 10px;
font-weight: 750;
line-height: 1.45;
}

#whatsapp-commerce-features .commercex-check {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 9px;
background: #ffffff;
color: #08783e;
font-size: 10px;
font-weight: 900;
box-shadow:
  0 10px 20px -16px rgba(16, 24, 40, 0.35);
}


#customer-retention-journey,
#customer-retention-journey *,
#customer-retention-journey *::before,
#customer-retention-journey *::after {
box-sizing: border-box;
}

#customer-retention-journey {
position: relative;
isolation: isolate;
padding: 96px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 7% 8%,
    rgba(18, 183, 106, 0.09),
    transparent 26%
  ),
  radial-gradient(
    circle at 94% 88%,
    rgba(54, 191, 250, 0.08),
    transparent 25%
  ),
  linear-gradient(
    180deg,
    #f7fffb 0%,
    #effcf6 100%
  );
}

#customer-retention-journey::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
opacity: 0.18;
background-image:
  radial-gradient(
    rgba(18, 183, 106, 0.12) 0.75px,
    transparent 0.75px
  );
background-size: 28px 28px;
}

#customer-retention-journey .retentionx-heading {
max-width: 760px;
margin: 0 auto 68px;
text-align: center;
}

#customer-retention-journey .retentionx-eyebrow {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 13px;
border: 1px solid rgba(18, 183, 106, 0.16);
border-radius: 999px;
background: rgba(236, 253, 243, 0.94);
color: #08783e;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.09em;
text-transform: uppercase;
}

#customer-retention-journey .retentionx-heading h2 {
margin: 15px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(40px, 5.3vw, 41px);
font-weight: 850;
line-height: 1.03;
letter-spacing: -0.052em;
text-wrap: balance;
}

#customer-retention-journey .retentionx-heading h2 span {
color: #079455;
}

#customer-retention-journey .retentionx-heading p {
max-width: 690px;
margin: 19px auto 0;
color: #667085;
font-size: 16px;
line-height: 1.74;
}

#customer-retention-journey .retentionx-journey {
position: relative;
display: grid;
gap: 30px;
}

#customer-retention-journey .retentionx-rail {
position: absolute;
top: 40px;
bottom: 40px;
left: 50%;
width: 2px;
transform: translateX(-50%);
background:
  linear-gradient(
    180deg,
    transparent 0%,
    rgba(18, 183, 106, 0.22) 7%,
    rgba(18, 183, 106, 0.48) 50%,
    rgba(54, 191, 250, 0.25) 93%,
    transparent 100%
  );
}

#customer-retention-journey .retentionx-rail span {
position: absolute;
top: 0;
left: 50%;
width: 8px;
height: 92px;
border-radius: 999px;
transform: translateX(-50%);
background:
  linear-gradient(
    180deg,
    rgba(18, 183, 106, 0),
    #12b76a,
    rgba(18, 183, 106, 0)
  );
filter: blur(1px);
animation:
  retentionxRailMove 5s linear infinite;
}

@keyframes retentionxRailMove {
from {
  top: 0;
}

to {
  top: calc(100% - 92px);
}
}

#customer-retention-journey .retentionx-item {
position: relative;
display: grid;
grid-template-columns:
  repeat(2, minmax(0, 1fr));
align-items: center;
min-height: 430px;
padding: 26px;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 30px;
background: rgba(255, 255, 255, 0.78);
box-shadow:
  0 32px 72px -54px rgba(16, 24, 40, 0.52);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}

#customer-retention-journey .retentionx-item::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
  linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.72),
    transparent 35%,
    transparent 68%,
    rgba(18, 183, 106, 0.045)
  );
}

#customer-retention-journey .retentionx-item-right
.retentionx-content {
grid-column: 2;
grid-row: 1;
}

#customer-retention-journey .retentionx-item-right
.retentionx-visual {
grid-column: 1;
grid-row: 1;
}

#customer-retention-journey .retentionx-content,
#customer-retention-journey .retentionx-visual {
position: relative;
z-index: 2;
min-width: 0;
}

#customer-retention-journey .retentionx-content {
padding: 24px 30px;
}

#customer-retention-journey .retentionx-meta {
display: flex;
align-items: center;
gap: 10px;
}

#customer-retention-journey .retentionx-meta > span {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border-radius: 11px;
background:
  linear-gradient(
    145deg,
    #d1fadf,
    #e0f2fe
  );
color: #08783e;
font-size: 10px;
font-weight: 900;
}

#customer-retention-journey .retentionx-meta small {
color: #079455;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#customer-retention-journey .retentionx-content h3 {
margin: 17px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(29px, 32px, 41px);
font-weight: 840;
line-height: 1.08;
letter-spacing: -0.043em;
}

#customer-retention-journey .retentionx-content > p {
margin: 15px 0 0;
color: #667085;
font-size: 14px;
line-height: 1.72;
}

#customer-retention-journey .retentionx-content ul {
display: grid;
gap: 9px;
margin: 21px 0 0;
padding: 0;
list-style: none;
}

#customer-retention-journey .retentionx-content li {
display: flex;
align-items: center;
gap: 10px;
color: #344054;
font-size: 12px;
font-weight: 700;
}

#customer-retention-journey .retentionx-content li > span {
width: 24px;
height: 24px;
flex: 0 0 24px;
display: grid;
place-items: center;
border-radius: 8px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 900;
}

#customer-retention-journey .retentionx-result {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px 8px;
margin-top: 23px;
padding: 13px 15px;
border: 1px solid rgba(18, 183, 106, 0.13);
border-radius: 14px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #f0f9ff
  );
}

#customer-retention-journey .retentionx-result strong {
color: #08783e;
font-size: 11px;
font-weight: 850;
}

#customer-retention-journey .retentionx-result span {
color: #667085;
font-size: 10px;
}

#customer-retention-journey .retentionx-visual {
padding: 8px;
}

#customer-retention-journey .retentionx-image-frame {
position: relative;
min-height: 355px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 24px;
background:
  radial-gradient(
    circle at 18% 18%,
    rgba(18, 183, 106, 0.11),
    transparent 34%
  ),
  linear-gradient(
    145deg,
    #f6fffa,
    #f4faff
  );
}

#customer-retention-journey .retentionx-image-frame::before,
#customer-retention-journey .retentionx-image-frame::after {
content: "";
position: absolute;
border-radius: 50%;
pointer-events: none;
}

#customer-retention-journey .retentionx-image-frame::before {
top: 25px;
right: 25px;
width: 115px;
height: 115px;
background: rgba(54, 191, 250, 0.11);
}

#customer-retention-journey .retentionx-image-frame::after {
left: 22px;
bottom: 22px;
width: 145px;
height: 145px;
background: rgba(18, 183, 106, 0.1);
}

#customer-retention-journey .retentionx-image-frame img {
position: relative;
z-index: 2;
display: block;
width: 100%;
max-width: 390px;
height: 330px;
object-fit: contain;
filter:
  drop-shadow(
    0 25px 28px rgba(16, 24, 40, 0.12)
  );
transition:
  transform 0.35s ease;
}

#customer-retention-journey .retentionx-item:hover
.retentionx-image-frame img {
transform: translateY(-6px) scale(1.025);
}

#customer-retention-journey .retentionx-floating-badge {
position: absolute;
right: -2px;
bottom: 25px;
z-index: 3;
min-width: 135px;
padding: 11px 13px;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 13px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
  0 20px 35px -25px rgba(16, 24, 40, 0.5);
}

#customer-retention-journey .retentionx-floating-badge span,
#customer-retention-journey .retentionx-floating-badge strong {
display: block;
}

#customer-retention-journey .retentionx-floating-badge span {
color: #98a2b3;
font-size: 9px;
}

#customer-retention-journey .retentionx-floating-badge strong {
margin-top: 4px;
color: #08783e;
font-size: 10px;
font-weight: 850;
}

#marketing-business-use-cases,
#marketing-business-use-cases *,
#marketing-business-use-cases *::before,
#marketing-business-use-cases *::after {
box-sizing: border-box;
}

#marketing-business-use-cases {
position: relative;
isolation: isolate;
padding: 110px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 5% 8%,
    rgba(18, 183, 106, 0.11),
    transparent 29%
  ),
  radial-gradient(
    circle at 95% 88%,
    rgba(59, 130, 246, 0.12),
    transparent 29%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 50%,
    #f9fffc 100%
  );
}

#marketing-business-use-cases::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
pointer-events: none;
opacity: 0.18;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.11) 0.7px,
    transparent 0.7px
  );
background-size: 27px 27px;
}

#marketing-business-use-cases::after {
content: "";
position: absolute;
top: 70px;
right: -150px;
z-index: -2;
width: 420px;
height: 420px;
border: 1px dashed rgba(59, 130, 246, 0.14);
border-radius: 50%;
box-shadow:
  0 0 0 65px rgba(59, 130, 246, 0.025),
  0 0 0 130px rgba(18, 183, 106, 0.018);
pointer-events: none;
}

#marketing-business-use-cases .marketcase-heading {
position: relative;
max-width: 900px;
margin: 0 auto 58px;
text-align: center;
}

#marketing-business-use-cases .marketcase-heading::before {
content: "";
position: absolute;
top: 45px;
left: 50%;
z-index: -1;
width: 430px;
height: 150px;
transform: translateX(-50%);
border-radius: 50%;
background:
  linear-gradient(
    90deg,
    rgba(18, 183, 106, 0.11),
    rgba(59, 130, 246, 0.09)
  );
filter: blur(60px);
pointer-events: none;
}

#marketing-business-use-cases .marketcase-eyebrow {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 9px 17px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    rgba(236, 253, 243, 0.96),
    rgba(239, 246, 255, 0.92)
  );
color: #08783e;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.09em;
text-transform: uppercase;
box-shadow:
  0 14px 30px -24px rgba(18, 183, 106, 0.5);
}

#marketing-business-use-cases .marketcase-eyebrow::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.12);
}

#marketing-business-use-cases .marketcase-heading h2 {
margin: 19px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(41px, 5.5vw, 41px);
font-weight: 880;
line-height: 1.02;
letter-spacing: -0.056em;
text-wrap: balance;
}

#marketing-business-use-cases .marketcase-heading p {
max-width: 720px;
margin: 20px auto 0;
color: #667085;
font-size: 17px;
line-height: 1.72;
}


#marketing-business-use-cases .marketcase-layout {
display: grid;
gap: 30px;
}

#marketing-business-use-cases .marketcase-industry {
position: relative;
padding: 18px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 34px;
box-shadow:
  0 42px 90px -65px rgba(16, 24, 40, 0.52);
}

#marketing-business-use-cases .marketcase-industry::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background:
  linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.75),
    transparent 34%,
    transparent 70%,
    rgba(255, 255, 255, 0.28)
  );
}

#marketing-business-use-cases .marketcase-learning {
background:
  radial-gradient(
    circle at 7% 8%,
    rgba(18, 183, 106, 0.16),
    transparent 31%
  ),
  linear-gradient(
    145deg,
    #ebfff5,
    #f8fffb
  );
}

#marketing-business-use-cases .marketcase-commerce {
background:
  radial-gradient(
    circle at 94% 8%,
    rgba(59, 130, 246, 0.16),
    transparent 31%
  ),
  linear-gradient(
    145deg,
    #edf5ff,
    #fbfdff
  );
}

#marketing-business-use-cases .marketcase-industry-header {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 18px;
min-height: 128px;
margin-bottom: 16px;
padding: 25px 27px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 23px;
background: rgba(255, 255, 255, 0.78);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}

#marketing-business-use-cases .marketcase-industry-header::after {
content: "";
position: absolute;
top: -70px;
right: -60px;
width: 190px;
height: 190px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.07);
pointer-events: none;
}

#marketing-business-use-cases .marketcase-commerce
.marketcase-industry-header::after {
background: rgba(59, 130, 246, 0.08);
}

#marketing-business-use-cases .marketcase-industry-icon {
position: relative;
z-index: 2;
width: 72px;
height: 72px;
flex: 0 0 72px;
display: grid;
place-items: center;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 21px;
background:
  linear-gradient(
    145deg,
    #ffffff,
    #f8fafc
  );
box-shadow:
  0 22px 40px -29px rgba(16, 24, 40, 0.45);
}

#marketing-business-use-cases .marketcase-industry-header > div:last-child {
position: relative;
z-index: 2;
max-width: 670px;
}

#marketing-business-use-cases .marketcase-category {
color: #079455;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.09em;
text-transform: uppercase;
}

#marketing-business-use-cases .marketcase-commerce
.marketcase-category {
color: #2563eb;
}

#marketing-business-use-cases .marketcase-industry-header h3 {
margin: 6px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: 30px;
font-weight: 870;
line-height: 1.06;
letter-spacing: -0.045em;
}

#marketing-business-use-cases .marketcase-industry-header p {
margin: 8px 0 0;
color: #667085;
font-size: 15px;
line-height: 1.6;
}


#marketing-business-use-cases .marketcase-card-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
gap: 15px;
}

#marketing-business-use-cases .marketcase-card {
position: relative;
min-width: 0;
min-height: 235px;
display: flex;
flex-direction: column;
padding: 25px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 22px;
background:
  linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.98),
    rgba(255, 255, 255, 0.83)
  );
box-shadow:
  0 25px 50px -40px rgba(16, 24, 40, 0.5);
transition:
  transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1),
  border-color 0.32s ease,
  box-shadow 0.32s ease;
}

#marketing-business-use-cases .marketcase-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background:
  linear-gradient(
    90deg,
    #12b76a,
    #34d399
  );
transform: scaleX(0.32);
transform-origin: left;
transition: transform 0.32s ease;
}

#marketing-business-use-cases .marketcase-commerce
.marketcase-card::before {
background:
  linear-gradient(
    90deg,
    #2563eb,
    #60a5fa
  );
}

#marketing-business-use-cases .marketcase-card::after {
content: "";
position: absolute;
top: -55px;
right: -55px;
width: 135px;
height: 135px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.055);
transition:
  transform 0.32s ease,
  background 0.32s ease;
pointer-events: none;
}

#marketing-business-use-cases .marketcase-commerce
.marketcase-card::after {
background: rgba(59, 130, 246, 0.06);
}

#marketing-business-use-cases .marketcase-card:hover {
transform: translateY(-9px);
border-color: rgba(18, 183, 106, 0.22);
box-shadow:
  0 38px 70px -43px rgba(16, 24, 40, 0.56);
}

#marketing-business-use-cases .marketcase-commerce
.marketcase-card:hover {
border-color: rgba(59, 130, 246, 0.23);
}

#marketing-business-use-cases .marketcase-card:hover::before {
transform: scaleX(1);
}

#marketing-business-use-cases .marketcase-card:hover::after {
transform: scale(1.2);
}

#marketing-business-use-cases .marketcase-card-number {
position: absolute;
top: 20px;
right: 20px;
min-width: 34px;
min-height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 9px;
border-radius: 999px;
background: #f2f4f7;
color: #667085;
font-size: 12px;
font-weight: 850;
}

#marketing-business-use-cases .marketcase-card-icon {
position: relative;
z-index: 2;
width: 58px;
height: 58px;
display: grid;
place-items: center;
border-radius: 17px;
background:
  linear-gradient(
    145deg,
    #d1fadf,
    #ecfdf3
  );
box-shadow:
  0 17px 30px -23px rgba(18, 183, 106, 0.45);
}

#marketing-business-use-cases .marketcase-commerce
.marketcase-card-icon {
background:
  linear-gradient(
    145deg,
    #dbeafe,
    #eff6ff
  );
box-shadow:
  0 17px 30px -23px rgba(59, 130, 246, 0.48);
}

#marketing-business-use-cases .marketcase-card h4 {
position: relative;
z-index: 2;
margin: 23px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: 24px;
font-weight: 850;
line-height: 1.16;
letter-spacing: -0.035em;
}

#marketing-business-use-cases .marketcase-card p {
position: relative;
z-index: 2;
margin: 13px 0 0;
color: #667085;
font-size: 15px;
line-height: 1.65;
}

#marketing-business-use-cases .marketcase-action {
position: relative;
display: flex;
justify-content: center;
margin-top: 40px;
}

#marketing-business-use-cases .marketcase-main-button {
position: relative;
min-height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 14px 28px;
overflow: hidden;
border: 1px solid rgba(7, 148, 85, 0.65);
border-radius: 17px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
font-size: 16px;
font-weight: 820;
text-decoration: none;
box-shadow:
  0 22px 38px -22px rgba(7, 148, 85, 0.78);
transition:
  transform 0.28s ease,
  box-shadow 0.28s ease;
}

#marketing-business-use-cases .marketcase-main-button::before {
content: "";
position: absolute;
top: -40%;
left: -45%;
width: 40%;
height: 180%;
transform: rotate(24deg);
background:
  linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
transition: left 0.6s ease;
}

#marketing-business-use-cases .marketcase-main-button:hover {
transform: translateY(-4px);
box-shadow:
  0 30px 46px -22px rgba(7, 148, 85, 0.8);
}

#marketing-business-use-cases .marketcase-main-button:hover::before {
left: 115%;
}

#marketing-business-use-cases .marketcase-main-button span {
font-size: 22px;
line-height: 1;
}

#marketing-business-use-cases .marketcase-learning-icon {
position: relative;
width: 36px;
height: 24px;
border-radius: 5px;
background:
  linear-gradient(
    145deg,
    #34d399,
    #079455
  );
transform: rotate(30deg) skewX(-18deg);
}

#marketing-business-use-cases .marketcase-learning-icon::after {
content: "";
position: absolute;
right: -6px;
top: 9px;
width: 3px;
height: 20px;
border-radius: 999px;
background: #08783e;
}

#marketing-business-use-cases .marketcase-commerce-icon {
position: relative;
width: 33px;
height: 33px;
border-radius: 8px;
background:
  linear-gradient(
    145deg,
    #60a5fa,
    #2563eb
  );
}

#marketing-business-use-cases .marketcase-commerce-icon::before {
content: "";
position: absolute;
top: -10px;
left: 7px;
width: 18px;
height: 13px;
border: 3px solid #2563eb;
border-bottom: 0;
border-radius: 10px 10px 0 0;
}

#marketing-business-use-cases .marketcase-person-icon {
position: relative;
width: 16px;
height: 16px;
border-radius: 50%;
background: #12b76a;
}

#marketing-business-use-cases .marketcase-person-icon::after {
content: "";
position: absolute;
left: -7px;
top: 20px;
width: 30px;
height: 15px;
border-radius: 15px 15px 5px 5px;
background: #08783e;
}

#marketing-business-use-cases .marketcase-calendar-icon {
position: relative;
width: 31px;
height: 29px;
border: 3px solid #12b76a;
border-radius: 7px;
}

#marketing-business-use-cases .marketcase-calendar-icon::before {
content: "";
position: absolute;
left: -3px;
top: 6px;
width: 31px;
border-top: 3px solid #12b76a;
}

#marketing-business-use-cases .marketcase-calendar-icon::after {
content: "✓";
position: absolute;
inset: 8px 0 0;
color: #08783e;
font-size: 14px;
font-weight: 900;
text-align: center;
}

#marketing-business-use-cases .marketcase-checklist-icon {
position: relative;
width: 30px;
height: 34px;
border: 3px solid #12b76a;
border-radius: 7px;
}

#marketing-business-use-cases .marketcase-checklist-icon::before {
content: "✓";
position: absolute;
left: 5px;
top: 2px;
color: #08783e;
font-size: 17px;
font-weight: 900;
}

#marketing-business-use-cases .marketcase-search-icon {
position: relative;
width: 22px;
height: 22px;
border: 4px solid #3b82f6;
border-radius: 50%;
}

#marketing-business-use-cases .marketcase-search-icon::after {
content: "";
position: absolute;
right: -10px;
bottom: -7px;
width: 13px;
height: 4px;
border-radius: 999px;
background: #2563eb;
transform: rotate(45deg);
}

#marketing-business-use-cases .marketcase-cart-icon {
position: relative;
width: 31px;
height: 22px;
border: 4px solid #3b82f6;
border-top: 0;
transform: skewX(-7deg);
}

#marketing-business-use-cases .marketcase-cart-icon::before,
#marketing-business-use-cases .marketcase-cart-icon::after {
content: "";
position: absolute;
bottom: -11px;
width: 7px;
height: 7px;
border-radius: 50%;
background: #2563eb;
}

#marketing-business-use-cases .marketcase-cart-icon::before {
left: 2px;
}

#marketing-business-use-cases .marketcase-cart-icon::after {
right: 2px;
}

#marketing-business-use-cases .marketcase-repeat-icon {
position: relative;
width: 32px;
height: 32px;
border: 4px solid #3b82f6;
border-left-color: transparent;
border-radius: 50%;
}

#marketing-business-use-cases .marketcase-repeat-icon::after {
content: "";
position: absolute;
left: -6px;
top: -5px;
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 10px solid #2563eb;
}


/*  MARKETING INTEGRATIONS SECTION  */

#mkintegrateTitle,
#integrations,
#integrations *,
#integrations *::before,
#integrations *::after {
box-sizing: border-box;
}

#integrations {
position: relative;
isolation: isolate;
padding: 105px 0 100px;
overflow: hidden;
background:
  radial-gradient(
    circle at 5% 16%,
    rgba(18, 183, 106, 0.08),
    transparent 25%
  ),
  radial-gradient(
    circle at 95% 82%,
    rgba(59, 130, 246, 0.08),
    transparent 26%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #fbfdfc 100%
  );
}

#integrations::before {
content: "";
position: absolute;
top: 40%;
left: -130px;
z-index: -2;
width: 340px;
height: 340px;
border: 1px dashed rgba(18, 183, 106, 0.12);
border-radius: 50%;
pointer-events: none;
}

#integrations::after {
content: "";
position: absolute;
right: -150px;
bottom: 10%;
z-index: -2;
width: 390px;
height: 390px;
border: 1px dashed rgba(59, 130, 246, 0.11);
border-radius: 50%;
pointer-events: none;
}

/*  SECTION HEADING */

#integrations .mkintegrate-header {
position: relative;
max-width: 900px;
margin: 0 auto 50px;
text-align: center;
}

#integrations .mkintegrate-header::before {
content: "";
position: absolute;
top: 45px;
left: 50%;
z-index: -1;
width: 500px;
height: 160px;
transform: translateX(-50%);
border-radius: 50%;
background:
  linear-gradient(
    90deg,
    rgba(18, 183, 106, 0.1),
    rgba(59, 130, 246, 0.08)
  );
filter: blur(70px);
pointer-events: none;
}

#integrations .mkintegrate-eyebrow {
min-height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 9px 17px;
border: 1px solid rgba(18, 183, 106, 0.17);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.09em;
text-transform: uppercase;
box-shadow:
  0 15px 30px -25px rgba(18, 183, 106, 0.55);
}

#integrations .mkintegrate-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.13);
}

#integrations .mkintegrate-header h2 {
margin: 19px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(41px, 5.4vw, 41px);
font-weight: 880;
line-height: 1.03;
letter-spacing: -0.055em;
text-wrap: balance;
}

#integrations .mkintegrate-header h2 span {
color: #079455;
}

#integrations .mkintegrate-header p {
max-width: 750px;
margin: 20px auto 0;
color: #667085;
font-size: 17px;
line-height: 1.72;
}

/*   IMAGE VISUAL */

#integrations .mkintegrate-visual {
position: relative;
max-width: 1220px;
margin: 0 auto;
padding: 20px;
}

#integrations .mkintegrate-glow {
position: absolute;
z-index: -1;
border-radius: 50%;
filter: blur(75px);
pointer-events: none;
}

#integrations .mkintegrate-glow-left {
top: 18%;
left: 2%;
width: 300px;
height: 300px;
background: rgba(18, 183, 106, 0.14);
}

#integrations .mkintegrate-glow-right {
right: 1%;
bottom: 5%;
width: 320px;
height: 320px;
background: rgba(59, 130, 246, 0.12);
}

#integrations .mkintegrate-image-frame {
position: relative;
overflow: hidden;
padding: 18px;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 34px;
background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 250, 252, 0.94)
  );
box-shadow:
  0 48px 95px -68px rgba(16, 24, 40, 0.62),
  inset 0 1px 0 rgba(255, 255, 255, 0.95);
transition:
  transform 0.35s ease,
  box-shadow 0.35s ease;
}

#integrations .mkintegrate-image-frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
pointer-events: none;
background:
  linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.45),
    transparent 24%,
    transparent 75%,
    rgba(255, 255, 255, 0.18)
  );
}

#integrations .mkintegrate-image-frame::after {
content: "";
position: absolute;
inset: 18px;
z-index: 2;
border: 1px solid rgba(16, 24, 40, 0.045);
border-radius: 24px;
pointer-events: none;
}

#integrations .mkintegrate-image-frame:hover {
transform: translateY(-7px);
box-shadow:
  0 60px 110px -70px rgba(16, 24, 40, 0.68),
  inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

#integrations .mkintegrate-image {
position: relative;
z-index: 1;
width: 100%;
height: auto;
display: block;
border-radius: 24px;
object-fit: contain;
object-position: center;
background: #ffffff;
}

#marketing-performance,
#marketing-performance *,
#marketing-performance *::before,
#marketing-performance *::after {
box-sizing: border-box;
}

#marketing-performance {
position: relative;
padding: 96px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 5% 5%,
    rgba(18, 183, 106, 0.07),
    transparent 25%
  ),
  radial-gradient(
    circle at 95% 95%,
    rgba(59, 130, 246, 0.07),
    transparent 25%
  ),
  #ffffff;
}

#marketing-performance .marketflow-heading {
max-width: 820px;
margin: 0 auto 48px;
text-align: center;
}

#marketing-performance .marketflow-eyebrow {
display: inline-flex;
align-items: center;
min-height: 36px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.15);
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#marketing-performance .marketflow-heading h2 {
margin: 17px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(40px, 5vw, 41px);
font-weight: 860;
line-height: 1.05;
letter-spacing: -0.05em;
text-wrap: balance;
}

#marketing-performance .marketflow-heading h2 span {
color: #079455;
}

#marketing-performance .marketflow-heading p {
max-width: 690px;
margin: 18px auto 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}

#marketing-performance .marketflow-grid {
display: grid;
grid-template-columns:
  minmax(0, 1.35fr)
  minmax(340px, 0.65fr);
gap: 20px;
}

#marketing-performance .marketflow-main-card,
#marketing-performance .marketflow-feature-card {
border: 1px solid rgba(16, 24, 40, 0.08);
box-shadow:
  0 30px 65px -48px rgba(16, 24, 40, 0.5);
}

#marketing-performance .marketflow-main-card {
min-height: 610px;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 34px 34px 34px 34px;
border-radius: 28px;
background:
  linear-gradient(
    145deg,
    #effff7,
    #f9fffc
  );
}

#marketing-performance .marketflow-main-content {
max-width: 650px;
}

#marketing-performance .marketflow-label {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 7px 11px;
border-radius: 999px;
background: rgba(18, 183, 106, 0.11);
color: #08783e;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
}

#marketing-performance .marketflow-main-content h3 {
margin: 15px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(28px, 2.6vw, 36px);
font-weight: 800;
line-height: 1.14;
letter-spacing: -0.035em;
text-wrap: balance;
}

#marketing-performance .marketflow-main-content p {
max-width: 590px;
margin: 14px 0 0;
color: #667085;
font-size: 15px;
line-height: 1.65;
}

#marketing-performance .marketflow-checks {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 21px;
}

#marketing-performance .marketflow-checks span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 11px;
border: 1px solid rgba(18, 183, 106, 0.12);
border-radius: 10px;
background: rgba(255, 255, 255, 0.75);
color: #475467;
font-size: 12px;
font-weight: 700;
}

#marketing-performance .marketflow-checks i {
width: 19px;
height: 19px;
display: grid;
place-items: center;
border-radius: 6px;
background: #d1fadf;
color: #08783e;
font-size: 9px;
font-style: normal;
font-weight: 900;
}

#marketing-performance .marketflow-main-visual {
flex: 1;
display: flex;
align-items: flex-end;
justify-content: center;
min-height: 310px;
margin-top: 25px;
}

#marketing-performance .marketflow-main-visual img {
display: block;
object-position: center bottom;
filter:
  drop-shadow(
    0 27px 30px rgba(16, 24, 40, 0.12)
  );
}

#marketing-performance .marketflow-side {
display: grid;
gap: 20px;
}

#marketing-performance .marketflow-feature-card {
overflow: hidden;
padding: 25px;
border-radius: 24px;
background:
  linear-gradient(
    145deg,
    #f2f7ff,
    #fbfdff
  );
}

#marketing-performance .marketflow-delivery-card {
grid-template-columns: minmax(0, 1fr);
background:
  linear-gradient(
    145deg,
    #f1fff8,
    #fbfffd
  );
}

#marketing-performance .marketflow-feature-copy {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}

#marketing-performance .marketflow-feature-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #dbeafe;
color: #2563eb;
font-size: 18px;
font-weight: 900;
}

#marketing-performance .marketflow-delivery-card
.marketflow-feature-icon {
background: #d1fadf;
color: #08783e;
}

#marketing-performance .marketflow-feature-copy h3 {
/* max-width: 280px; */
margin: 14px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(20px, 1.8vw, 22px);
font-weight: 780;
line-height: 1.22;
letter-spacing: -0.025em;
text-wrap: balance;
}

#marketing-performance .marketflow-feature-copy p {
max-width: 320px;
margin: 10px 0 0;
color: #667085;
font-size: 14px;
line-height: 1.58;
}

#marketing-performance .marketflow-feature-image {
display: flex;
align-items: flex-end;
justify-content: center;
}

#marketing-performance .marketflow-feature-image img {
width: 100%;
max-width: 175px;
height: auto;
max-height: 220px;
display: block;
object-fit: contain;
object-position: center bottom;
filter:
  drop-shadow(
    0 22px 25px rgba(16, 24, 40, 0.11)
  );
}

#marketing-performance .marketflow-delivery-metrics {
display: grid;
grid-template-columns:
  repeat(2, minmax(0, 1fr));
gap: 11px;
margin-top: 22px;
}

#marketing-performance .marketflow-delivery-metrics > div {
padding: 16px;
border: 1px solid rgba(18, 183, 106, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.8);
}

#marketing-performance .marketflow-delivery-metrics small,
#marketing-performance .marketflow-delivery-metrics strong {
display: block;
}

#marketing-performance .marketflow-delivery-metrics small {
color: #667085;
font-size: 10px;
font-weight: 700;
}

#marketing-performance .marketflow-delivery-metrics strong {
margin-top: 6px;
color: #101828;
font-size: 18px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.05em;
}

#marketing-performance .marketflow-stats {
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
gap: 15px;
margin-top: 20px;
}

#marketing-performance .marketflow-stats article {
min-height: 115px;
padding: 23px;
border: 1px solid rgba(18, 183, 106, 0.13);
border-radius: 19px;
background:
  linear-gradient(
    145deg,
    #d1fadf,
    #ecfdf3
  );
}

#marketing-performance .marketflow-stats strong,
#marketing-performance .marketflow-stats span {
display: block;
}

#marketing-performance .marketflow-stats strong {
color: #101828;
font-size: clamp(27px, 4vw, 28px);
font-weight: 900;
line-height: 1;
letter-spacing: -0.055em;
}

#marketing-performance .marketflow-stats span {
margin-top: 9px;
color: #475467;
font-size: 13px;
font-weight: 700;
}


#marketing-performance .marketflow-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 20px;
padding: 32px 35px;
border: 1px solid rgba(59, 130, 246, 0.13);
border-radius: 24px;
background:
  linear-gradient(
    135deg,
    #edf6ff,
    #f5fbff
  );
}

#marketing-performance .marketflow-cta > div:first-child {
max-width: 700px;
}

#marketing-performance .marketflow-cta > div:first-child > span {
color: #2563eb;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.07em;
text-transform: uppercase;
}

#marketing-performance .marketflow-cta h3 {
margin: 9px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 36px);
font-weight: 850;
line-height: 1.12;
letter-spacing: -0.04em;
}

#marketing-performance .marketflow-actions {
display: flex;
flex: 0 0 auto;
gap: 10px;
}

#marketing-performance .marketflow-btn {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 12px 19px;
border-radius: 13px;
font-size: 14px;
font-weight: 800;
text-decoration: none;
transition:
  transform 0.24s ease,
  box-shadow 0.24s ease;
}

#marketing-performance .marketflow-btn-primary {
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
box-shadow:
  0 18px 30px -20px rgba(7, 148, 85, 0.7);
}

#marketing-performance .marketflow-btn-secondary {
border: 1px solid rgba(16, 24, 40, 0.14);
background: #ffffff;
color: #344054;
}

#marketing-performance .marketflow-btn:hover {
transform: translateY(-3px);
}


#brand-recognition,
#brand-recognition *,
#brand-recognition *::before,
#brand-recognition *::after {
box-sizing: border-box;
}

#brand-recognition {
position: relative;
isolation: isolate;
padding: 92px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 7% 14%,
    rgba(18, 183, 106, 0.08),
    transparent 27%
  ),
  radial-gradient(
    circle at 94% 84%,
    rgba(59, 130, 246, 0.07),
    transparent 28%
  ),
  #ffffff;
}

#brand-recognition::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
opacity: 0.12;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.1) 0.7px,
    transparent 0.7px
  );
background-size: 30px 30px;
}


#brand-recognition .brandproof-layout {
display: grid;
grid-template-columns:
  minmax(340px, 0.88fr)
  minmax(520px, 1.12fr);
align-items: center;
gap: 46px;
}

#brand-recognition .brandproof-content {
max-width: 540px;
}

#brand-recognition .brandproof-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#brand-recognition .brandproof-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.12);
}

#brand-recognition .brandproof-content h2 {
margin: 19px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(35px, 4.6vw, 35px);
font-weight: 870;
line-height: 1.04;
letter-spacing: -0.052em;
text-wrap: balance;
}

#brand-recognition .brandproof-content h2 span {
color: #079455;
}

#brand-recognition .brandproof-content > p {
max-width: 510px;
margin: 19px 0 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}

#brand-recognition .brandproof-highlights {
display: grid;
gap: 11px;
margin-top: 27px;
}

#brand-recognition .brandproof-highlight {
min-height: 73px;
display: flex;
align-items: center;
gap: 13px;
padding: 13px 15px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 15px;
background: rgba(255, 255, 255, 0.9);
box-shadow:
  0 18px 36px -31px rgba(16, 24, 40, 0.4);
}

#brand-recognition .brandproof-highlight-icon {
width: 32px;
height: 32px;
flex: 0 0 32px;
display: grid;
place-items: center;
border-radius: 9px;
background: #d1fadf;
color: #08783e;
font-size: 13px;
font-weight: 900;
}

#brand-recognition .brandproof-highlight strong,
#brand-recognition .brandproof-highlight small {
display: block;
}

#brand-recognition .brandproof-highlight strong {
color: #344054;
font-size: 14px;
font-weight: 820;
line-height: 1.35;
}

#brand-recognition .brandproof-highlight small {
margin-top: 4px;
color: #98a2b3;
font-size: 12px;
line-height: 1.45;
}


#brand-recognition .brandproof-summary {
min-height: 78px;
display: flex;
align-items: center;
gap: 13px;
margin-top: 18px;
padding: 13px 15px;
border: 1px solid rgba(59, 130, 246, 0.14);
border-radius: 16px;
background:
  linear-gradient(
    135deg,
    #eff6ff,
    #f8fbff
  );
}

#brand-recognition .brandproof-summary-icon {
width: 46px;
height: 46px;
flex: 0 0 46px;
display: grid;
place-items: center;
border: 1px solid rgba(18, 183, 106, 0.13);
border-radius: 13px;
background:
  linear-gradient(
    145deg,
    #ffffff,
    #ecfdf3
  );
color: #079455;
box-shadow:
  0 15px 28px -22px rgba(7, 148, 85, 0.48);
}

#brand-recognition .brandproof-summary-icon svg {
width: 23px;
height: 23px;
display: block;
}

#brand-recognition .brandproof-summary strong,
#brand-recognition .brandproof-summary div > span {
display: block;
}

#brand-recognition .brandproof-summary strong {
color: #344054;
font-size: 14px;
font-weight: 830;
}

#brand-recognition .brandproof-summary div > span {
margin-top: 4px;
color: #667085;
font-size: 12px;
line-height: 1.45;
}


#brand-recognition .brandproof-awards {
position: relative;
padding: 16px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 28px;
background:
  radial-gradient(
    circle at 10% 8%,
    rgba(18, 183, 106, 0.08),
    transparent 30%
  ),
  radial-gradient(
    circle at 92% 90%,
    rgba(59, 130, 246, 0.07),
    transparent 30%
  ),
  linear-gradient(
    145deg,
    #ffffff,
    #f7fafc
  );
box-shadow:
  0 32px 70px -52px rgba(16, 24, 40, 0.48);
}

#brand-recognition .brandproof-awards::before {
content: "";
position: absolute;
inset: 10px;
border: 1px dashed rgba(16, 24, 40, 0.045);
border-radius: 21px;
pointer-events: none;
}

#brand-recognition .brandproof-decoration {
position: absolute;
border-radius: 50%;
filter: blur(45px);
pointer-events: none;
}

#brand-recognition .brandproof-decoration-one {
top: 55px;
left: 30px;
width: 150px;
height: 150px;
background: rgba(18, 183, 106, 0.07);
}

#brand-recognition .brandproof-decoration-two {
right: 28px;
bottom: 28px;
width: 160px;
height: 160px;
background: rgba(59, 130, 246, 0.06);
}


#brand-recognition .brandproof-award-header {
position: relative;
z-index: 2;
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 13px 15px;
border: 1px solid rgba(16, 24, 40, 0.065);
border-radius: 16px;
background: rgba(255, 255, 255, 0.92);
}

#brand-recognition .brandproof-award-header > div > span {
display: block;
color: #98a2b3;
font-size: 10px;
font-weight: 700;
}

#brand-recognition .brandproof-award-header strong {
display: block;
margin-top: 4px;
color: #101828;
font-size: 17px;
font-weight: 850;
line-height: 1.25;
max-width: 400px;
}

#brand-recognition .brandproof-award-status {
min-height: 30px;
display: inline-flex !important;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px !important;
font-weight: 850 !important;
letter-spacing: 0.04em;
text-transform: uppercase;
}

#brand-recognition .brandproof-award-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
  repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}


#brand-recognition .brandproof-award-card {
position: relative;
min-width: 0;
min-height: 205px;
display: grid;
grid-template-rows:
  1fr auto;
align-items: center;
padding: 18px 14px 12px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 18px;
background:
  linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.98),
    rgba(250, 252, 253, 0.94)
  );
box-shadow:
  0 20px 40px -34px rgba(16, 24, 40, 0.4);
transition:
  transform 0.26s ease,
  border-color 0.26s ease,
  box-shadow 0.26s ease;
}

#brand-recognition .brandproof-award-card::before {
content: "";
position: absolute;
top: -45px;
right: -40px;
width: 105px;
height: 105px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.05);
pointer-events: none;
}

#brand-recognition
.brandproof-award-card:nth-child(even)::before {
background: rgba(59, 130, 246, 0.055);
}

#brand-recognition .brandproof-award-card:hover {
transform: translateY(-5px);
border-color: rgba(18, 183, 106, 0.2);
box-shadow:
  0 28px 50px -34px rgba(16, 24, 40, 0.48);
}

#brand-recognition .brandproof-award-number {
position: absolute;
top: 12px;
right: 12px;
min-width: 28px;
min-height: 24px;
display: grid;
place-items: center;
padding: 4px 7px;
border: 1px solid rgba(16, 24, 40, 0.045);
border-radius: 999px;
background: rgba(242, 244, 247, 0.9);
color: #667085;
font-size: 9px;
font-weight: 850;
}

#brand-recognition .brandproof-award-image {
width: 110px;
height: 125px;
display: grid;
place-items: center;
justify-self: center;
margin: 0 auto;
}

#brand-recognition .brandproof-award-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
filter:
  drop-shadow(
    0 12px 14px rgba(16, 24, 40, 0.1)
  );
transition: transform 0.26s ease;
}

#brand-recognition
.brandproof-award-card:hover
.brandproof-award-image img {
transform: scale(1.035);
}

#brand-recognition .brandproof-award-label {
position: relative;
z-index: 2;
width: 100%;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 4px;
padding: 7px 9px;
border: 1px solid rgba(16, 24, 40, 0.055);
border-radius: 10px;
background: #f8fafc;
color: #475467;
font-size: 11px;
font-weight: 780;
line-height: 1.25;
text-align: center;
}

#brand-recognition
.brandproof-award-card:nth-child(1)
.brandproof-award-label {
background: #f3fff8;
color: #08783e;
}

#brand-recognition
.brandproof-award-card:nth-child(2)
.brandproof-award-label {
background: #f4f8ff;
color: #2563eb;
}

#brand-recognition
.brandproof-award-card:nth-child(3)
.brandproof-award-label {
background: #f3fffc;
color: #087f6d;
}

#brand-recognition
.brandproof-award-card:nth-child(4)
.brandproof-award-label {
background: #fff9ed;
color: #b54708;
}

#brand-recognition .brandproof-platforms {
display: grid;
grid-template-columns:
  minmax(205px, 0.3fr)
  minmax(0, 1fr);
align-items: center;
gap: 22px;
margin-top: 27px;
padding: 17px 19px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 20px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
  0 25px 48px -41px rgba(16, 24, 40, 0.45);
}

#brand-recognition .brandproof-platform-heading span,
#brand-recognition .brandproof-platform-heading strong {
display: block;
}

#brand-recognition .brandproof-platform-heading span {
color: #98a2b3;
font-size: 10px;
font-weight: 700;
}

#brand-recognition .brandproof-platform-heading strong {
margin-top: 5px;
color: #344054;
font-size: 14px;
font-weight: 830;
}

#brand-recognition .brandproof-platform-list {
display: grid;
grid-template-columns:
  repeat(5, minmax(0, 1fr));
align-items: center;
gap: 9px;
}

#brand-recognition .brandproof-platform-item {
height: 64px;
display: grid;
place-items: center;
padding: 11px 13px;
border: 1px solid rgba(16, 24, 40, 0.06);
border-radius: 13px;
background: #f9fafb;
transition:
  transform 0.24s ease,
  border-color 0.24s ease,
  background 0.24s ease;
}

#brand-recognition .brandproof-platform-item:hover {
transform: translateY(-3px);
border-color: rgba(18, 183, 106, 0.17);
background: #ffffff;
}

#brand-recognition .brandproof-platform-item img {
width: 100%;
max-width: 135px;
height: 34px;
display: block;
object-fit: contain;
object-position: center;
}

/* Support hero */

#support-page-hero,
#support-page-hero *,
#support-page-hero *::before,
#support-page-hero *::after {
box-sizing: border-box;
}

#support-page-hero {
position: relative;
isolation: isolate;
min-height: 760px;
display: flex;
align-items: center;
padding: 120px 0 100px !important;
overflow: hidden;
background:
  radial-gradient(
    circle at 5% 13%,
    rgba(18, 183, 106, 0.1),
    transparent 28%
  ),
  radial-gradient(
    circle at 95% 82%,
    rgba(59, 130, 246, 0.1),
    transparent 29%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
  );
}

#support-page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: 0.13;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.1) 0.7px,
    transparent 0.7px
  );
background-size: 30px 30px;
}

#support-page-hero::after {
content: "";
position: absolute;
top: 10%;
right: -210px;
z-index: -2;
width: 650px;
height: 650px;
border: 1px dashed rgba(59, 130, 246, 0.11);
border-radius: 50%;
box-shadow:
  0 0 0 90px rgba(18, 183, 106, 0.018),
  0 0 0 180px rgba(59, 130, 246, 0.014);
pointer-events: none;
}

#support-page-hero .supporthero-layout {
display: grid;
grid-template-columns:
  minmax(500px, 1.12fr)
  minmax(430px, 0.88fr);
gap: 52px;
}

#support-page-hero .supporthero-content {
position: relative;
z-index: 3;
width: 100%;
max-width: 700px;
}

.supporthero-kicker {
min-height: 42px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px 8px 10px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
box-shadow:
  0 15px 30px -25px rgba(18, 183, 106, 0.55);
}

.supporthero-kicker-icon {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 8px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
}

.supporthero-kicker-icon svg {
width: 15px;
height: 15px;
}

#support-page-hero .supporthero-content h1 {
margin: 23px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(44px, 5.2vw, 44px);
font-weight: 800;
/* line-height: 1.2; */
letter-spacing: -0.04em;
text-wrap: balance;
}

#support-page-hero .supporthero-content h1 span {
/* display: block; */
color: #079455;
}

#support-page-hero .supporthero-description {
max-width: 595px;
margin: 23px 0 0;
color: #667085;
font-size: 17px;
line-height: 1.72;
}

#support-page-hero .supporthero-benefits {
display: grid;
gap: 12px;
margin: 28px 0 0;
padding: 0;
list-style: none;
}

#support-page-hero .supporthero-benefits li {
display: flex;
align-items: center;
gap: 11px;
color: #344054;
font-size: 14px;
font-weight: 740;
line-height: 1.45;
}

#support-page-hero .supporthero-benefits li > span {
width: 26px;
height: 26px;
flex: 0 0 26px;
display: grid;
place-items: center;
border-radius: 8px;
background: #d1fadf;
color: #08783e;
}

#support-page-hero .supporthero-benefits svg {
width: 15px;
height: 15px;
}

/*   ACTION BUTTONS  */

#support-page-hero .supporthero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}

#support-page-hero .supporthero-button {
min-height: 55px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 11px;
padding: 13px 22px;
border-radius: 15px;
font-size: 15px;
font-weight: 820;
text-decoration: none;
transition:
  transform 0.25s ease,
  box-shadow 0.25s ease,
  border-color 0.25s ease;
}

#support-page-hero .supporthero-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}

#support-page-hero .supporthero-button-primary {
border: 1px solid #079455;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
box-shadow:
  0 20px 35px -22px rgba(7, 148, 85, 0.72);
}

#support-page-hero .supporthero-button-secondary {
border: 1px solid rgba(16, 24, 40, 0.14);
background: #ffffff;
color: #344054;
box-shadow:
  0 17px 30px -27px rgba(16, 24, 40, 0.44);
}

#support-page-hero .supporthero-button:hover {
transform: translateY(-3px);
}

#support-page-hero .supporthero-button-primary:hover {
box-shadow:
  0 28px 43px -22px rgba(7, 148, 85, 0.8);
}

/*  TRUST NOTE */

#support-page-hero .supporthero-trust {
max-width: 485px;
display: flex;
align-items: center;
gap: 13px;
margin-top: 27px;
padding: 13px 15px;
border: 1px solid rgba(59, 130, 246, 0.12);
border-radius: 15px;
background:
  linear-gradient(
    135deg,
    #eff6ff,
    #f8fbff
  );
}

#support-page-hero .supporthero-trust-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #ffffff;
color: #079455;
box-shadow:
  0 14px 25px -21px rgba(16, 24, 40, 0.4);
}

#support-page-hero .supporthero-trust strong,
#support-page-hero .supporthero-trust span {
display: block;
}

#support-page-hero .supporthero-trust strong {
color: #344054;
font-size: 13px;
font-weight: 830;
}

#support-page-hero .supporthero-trust div > span {
margin-top: 4px;
color: #667085;
font-size: 11px;
line-height: 1.45;
}

#support-page-hero .supporthero-visual {
position: relative;
min-width: 0;
min-height: 470px;
display: flex;
justify-content: flex-end;
}

#support-page-hero .supporthero-visual-glow {
position: absolute;
border-radius: 50%;
filter: blur(68px);
pointer-events: none;
}

#support-page-hero .supporthero-visual-glow-green {
top: 13%;
left: 3%;
width: 270px;
height: 270px;
background: rgba(18, 183, 106, 0.16);
}

#support-page-hero .supporthero-visual-glow-blue {
right: 1%;
bottom: 9%;
width: 290px;
height: 290px;
background: rgba(59, 130, 246, 0.14);
}

#support-page-hero .supporthero-image-frame {
position: relative;
z-index: 2;
width: 100%;
max-width: 560px;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 30px;
background:
  radial-gradient(
    circle at 45% 40%,
    rgba(18, 183, 106, 0.12),
    transparent 37%
  ),
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(239, 246, 255, 0.93)
  );
box-shadow:
  0 42px 80px -58px rgba(16, 24, 40, 0.58);
}



#support-page-hero .supporthero-image {
position: relative;
z-index: 2;
width: 100%;
max-width: 510px;
height: auto;
/* max-height: 450px; */
display: block;
object-fit: contain;
object-position: center;
/* transform: translateY(12px); */
filter:
  drop-shadow(
    0 24px 30px rgba(16, 24, 40, 0.13)
  );
}

#support-page-hero .supporthero-image-badge {
position: absolute;
top: 18px;
left: 18px;
z-index: 4;
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
border: 1px solid rgba(18, 183, 106, 0.13);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #08783e;
font-size: 9px;
font-weight: 830;
}

#support-page-hero .supporthero-image-badge > span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.12);
}

/*  SUPPORT AI FLOW SECTION  */

.wmsupportflow-section {
position: relative;
padding: 90px 0;
background: linear-gradient(180deg, #f8fbfa 0%, #ffffff 100%);
overflow: hidden;
}

.wmsupportflow-section .wrap {
width: min(1200px, calc(100% - 32px));
margin: 0 auto;
}

.wmsupportflow-top-card {
position: relative;
padding: 42px 34px 34px;
border: 1px solid #c6e7de;
border-radius: 30px;
background: linear-gradient(135deg, #eaf8f3 0%, #eef7ff 100%);
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
margin-bottom: 34px;
}

.wmsupportflow-top-head {
max-width: 930px;
margin: 0 auto 28px;
text-align: center;
}

.wmsupportflow-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 0 18px;
border: 1px solid #b9e5d8;
border-radius: 999px;
background: rgba(255, 255, 255, 0.72);
color: #0a8f57;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}

.wmsupportflow-eyebrow--light {
background: #f5fffb;
}

.wmsupportflow-eyebrow-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.12);
flex: 0 0 10px;
}

.wmsupportflow-title {
margin: 20px 0 14px;
color: #0f172a;
font-size: clamp(28px, 4vw, 41px);
line-height: 1.08;
font-weight: 900;
letter-spacing: -0.03em;
}

.wmsupportflow-desc {
margin: 0 auto;
max-width: 920px;
color: #475569;
font-size: clamp(17px, 1.8vw, 17px);
line-height: 1.65;
font-weight: 500;
}

.wmsupportflow-visual-shell {
position: relative;
padding: 18px;
border-radius: 26px;
background: rgba(255, 255, 255, 0.56);
border: 1px solid rgba(140, 197, 180, 0.42);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.wmsupportflow-main-image {
display: block;
width: 100%;
max-width: 100%;
border-radius: 20px;
object-fit: contain;
background: #ffffff;
}

.wmsupportflow-balance-card {
position: relative;
padding: 42px 34px;
border: 1px solid #d9e7e1;
border-radius: 30px;
background: #ffffff;
box-shadow: 0 16px 45px rgba(15, 23, 42, 0.06);
}

.wmsupportflow-balance-head {
text-align: center;
max-width: 860px;
margin: 0 auto 34px;
}

.wmsupportflow-balance-title {
margin: 18px 0 12px;
color: #0f172a;
font-size: clamp(27px, 41px, 28px);
line-height: 1.12;
font-weight: 900;
letter-spacing: -0.02em;
}

.wmsupportflow-balance-subtitle {
margin: 0 auto;
max-width: 800px;
color: #526074;
font-size: 18px;
line-height: 1.7;
}

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

.wmsupportflow-info-card {
height: 100%;
padding: 28px 26px;
border: 1px solid #e2efe9;
border-radius: 24px;
background: linear-gradient(180deg, #fcfffe 0%, #f5fbf8 100%);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.wmsupportflow-info-card h4 {
margin: 0 0 14px;
color: #162033;
font-size: 22px;
line-height: 1.25;
font-weight: 700;
letter-spacing: -0.02em;
}

.wmsupportflow-info-card p {
margin: 0;
color: #526074;
font-size: 17px;
line-height: 1.8;
}

.wmsupportflow-list {
list-style: none;
padding: 0;
margin: 0;
}

.wmsupportflow-list li {
position: relative;
padding-left: 28px;
color: #253244;
font-size: 17px;
line-height: 1.75;
}

.wmsupportflow-list li + li {
margin-top: 12px;
}

.wmsupportflow-list li::before {
content: "";
position: absolute;
top: 10px;
left: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, #14b86e 0%, #0ea95c 100%);
box-shadow: 0 0 0 5px rgba(20, 184, 110, 0.13);
}

.wmsupportflow-cta-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 30px;
}

.wmsupportflow-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 26px;
border-radius: 16px;
font-size: 16px;
font-weight: 800;
text-decoration: none;
transition: 0.25s ease;
}

.wmsupportflow-btn--primary {
background: linear-gradient(135deg, #0ca85f 0%, #10b981 100%);
color: #ffffff;
box-shadow: 0 12px 25px rgba(16, 185, 129, 0.22);
}

.wmsupportflow-btn--primary:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(16, 185, 129, 0.28);
}

.wmsupportflow-btn--secondary {
border: 1px solid #c9d8d2;
background: #ffffff;
color: #152234;
}

.wmsupportflow-btn--secondary:hover {
transform: translateY(-2px);
border-color: #a7beb5;
}

/*  AI + AUTOMATION SUPPORT SECTION */

#ai-support-automation,
#ai-support-automation *,
#ai-support-automation *::before,
#ai-support-automation *::after {
box-sizing: border-box;
}

#ai-support-automation {
position: relative;
isolation: isolate;
padding: 96px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 7% 14%,
    rgba(18, 183, 106, 0.08),
    transparent 27%
  ),
  radial-gradient(
    circle at 94% 85%,
    rgba(59, 130, 246, 0.08),
    transparent 28%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
  );
}

#ai-support-automation::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: 0.12;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.1) 0.7px,
    transparent 0.7px
  );
background-size: 30px 30px;
}

#ai-support-automation::after {
content: "";
position: absolute;
top: 160px;
left: 50%;
z-index: -2;
width: 760px;
height: 330px;
transform: translateX(-50%);
border-radius: 50%;
background:
  linear-gradient(
    90deg,
    rgba(18, 183, 106, 0.11),
    rgba(59, 130, 246, 0.09)
  );
filter: blur(110px);
pointer-events: none;
}


#ai-support-automation .dualassist-shell {
position: relative;
max-width: 1220px;
margin: 0 auto;
}

#ai-support-automation .dualassist-header {
max-width: 880px;
margin: 0 auto 46px;
text-align: center;
}

#ai-support-automation .dualassist-eyebrow {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 16px 7px 8px;
border: 1px solid rgba(18, 183, 106, 0.17);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.075em;
text-transform: uppercase;
}

#ai-support-automation .dualassist-eyebrow-icon {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 8px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
}

#ai-support-automation .dualassist-eyebrow-icon svg {
width: 15px;
height: 15px;
}

#ai-support-automation .dualassist-header h2 {
margin: 19px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(40px, 5.1vw, 41px);
font-weight: 880;
line-height: 1.04;
letter-spacing: -0.054em;
text-wrap: balance;
}

#ai-support-automation .dualassist-header h2 span {
color: #079455;
}

#ai-support-automation .dualassist-header p {
max-width: 730px;
margin: 19px auto 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}

#ai-support-automation .dualassist-visual {
position: relative;
padding: 18px;
}

#ai-support-automation .dualassist-glow {
position: absolute;
z-index: -1;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
}

#ai-support-automation .dualassist-glow-left {
top: 18%;
left: 2%;
width: 280px;
height: 280px;
background: rgba(18, 183, 106, 0.13);
}

#ai-support-automation .dualassist-glow-right {
right: 2%;
bottom: 9%;
width: 300px;
height: 300px;
background: rgba(59, 130, 246, 0.12);
}

#ai-support-automation .dualassist-image-frame {
position: relative;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 31px;
background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 250, 252, 0.95)
  );
box-shadow:
  0 46px 90px -65px rgba(16, 24, 40, 0.58),
  inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

#ai-support-automation .dualassist-image-frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
pointer-events: none;
background:
  linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.42),
    transparent 24%,
    transparent 76%,
    rgba(255, 255, 255, 0.18)
  );
}

#ai-support-automation .dualassist-frame-top {
position: relative;
z-index: 4;
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 20px;
border-bottom: 1px solid rgba(16, 24, 40, 0.065);
background: rgba(255, 255, 255, 0.9);
}

#ai-support-automation .dualassist-frame-label {
display: flex;
align-items: center;
gap: 12px;
}

#ai-support-automation .dualassist-live-dot {
width: 12px;
height: 12px;
flex: 0 0 12px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 7px rgba(18, 183, 106, 0.12);
}

#ai-support-automation .dualassist-frame-label small,
#ai-support-automation .dualassist-frame-label strong {
display: block;
}

#ai-support-automation .dualassist-frame-label small {
color: #98a2b3;
font-size: 10px;
font-weight: 700;
}

#ai-support-automation .dualassist-frame-label strong {
margin-top: 4px;
color: #101828;
font-size: 16px;
font-weight: 850;
}

#ai-support-automation .dualassist-frame-status {
min-height: 33px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}

#ai-support-automation .dualassist-image-area {
position: relative;
min-height: 570px;
display: grid;
place-items: center;
overflow: hidden;
padding: 24px;
background:
  radial-gradient(
    circle at center,
    rgba(18, 183, 106, 0.08),
    transparent 31%
  ),
  linear-gradient(
    180deg,
    #fbfefd,
    #f7fafc
  );
}

#ai-support-automation .dualassist-image-area::before {
content: "";
position: absolute;
inset: 20px;
border: 1px dashed rgba(16, 24, 40, 0.055);
border-radius: 23px;
pointer-events: none;
}

#ai-support-automation .dualassist-image {
position: relative;
z-index: 2;
width: 100%;
height: auto;
max-height: 525px;
display: block;
object-fit: contain;
object-position: center;
filter:
  drop-shadow(
    0 28px 32px rgba(16, 24, 40, 0.11)
  );
}

#ai-support-automation .dualassist-frame-bottom {
position: relative;
z-index: 4;
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(16, 24, 40, 0.065);
background: rgba(255, 255, 255, 0.92);
}

#ai-support-automation .dualassist-capability {
min-height: 88px;
display: flex;
align-items: center;
gap: 11px;
padding: 16px 18px;
}

#ai-support-automation
.dualassist-capability
+ .dualassist-capability {
border-left: 1px solid rgba(16, 24, 40, 0.065);
}

#ai-support-automation .dualassist-capability > span {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: grid;
place-items: center;
border-radius: 11px;
background: #ecfdf3;
color: #08783e;
}

#ai-support-automation
.dualassist-capability:nth-child(2)
> span {
background: #eff6ff;
color: #2563eb;
}

#ai-support-automation
.dualassist-capability:nth-child(3)
> span {
background: #f4f3ff;
color: #6938ef;
}

#ai-support-automation .dualassist-capability svg {
width: 19px;
height: 19px;
}

#ai-support-automation .dualassist-capability strong,
#ai-support-automation .dualassist-capability small {
display: block;
}

#ai-support-automation .dualassist-capability strong {
color: #344054;
font-size: 13px;
font-weight: 820;
}

#ai-support-automation .dualassist-capability small {
margin-top: 4px;
color: #98a2b3;
font-size: 10px;
line-height: 1.4;
}


/* =========================================================
  UNIFIED SUPPORT INBOX SECTION
  Unique namespace: omnichat-*
  ========================================================= */

#unified-support-inbox,
#unified-support-inbox *,
#unified-support-inbox *::before,
#unified-support-inbox *::after {
box-sizing: border-box;
}

#unified-support-inbox {
position: relative;
isolation: isolate;
padding: 96px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 5% 12%,
    rgba(18, 183, 106, 0.08),
    transparent 28%
  ),
  radial-gradient(
    circle at 95% 88%,
    rgba(59, 130, 246, 0.08),
    transparent 29%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
  );
}

#unified-support-inbox::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: 0.12;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.1) 0.7px,
    transparent 0.7px
  );
background-size: 30px 30px;
}

#unified-support-inbox::after {
content: "";
position: absolute;
top: 16%;
right: -180px;
z-index: -2;
width: 560px;
height: 560px;
border: 1px dashed rgba(59, 130, 246, 0.1);
border-radius: 50%;
box-shadow:
  0 0 0 80px rgba(18, 183, 106, 0.018),
  0 0 0 160px rgba(59, 130, 246, 0.014);
pointer-events: none;
}

/* =========================================================
  MAIN SHELL
  ========================================================= */

#unified-support-inbox .omnichat-shell {
display: grid;
grid-template-columns:
  minmax(480px, 1.05fr)
  minmax(430px, 0.95fr);
align-items: center;
gap: 58px;
}

/* =========================================================
  LEFT CONTENT
  ========================================================= */

#unified-support-inbox .omnichat-content {
max-width: 660px;
}

#unified-support-inbox .omnichat-eyebrow {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 15px 7px 8px;
border: 1px solid rgba(18, 183, 106, 0.17);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.075em;
text-transform: uppercase;
}

#unified-support-inbox .omnichat-eyebrow-icon {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 8px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
}

#unified-support-inbox .omnichat-eyebrow-icon svg {
width: 15px;
height: 15px;
}

#unified-support-inbox .omnichat-content h2 {
margin: 20px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(40px, 4.9vw, 41px);
font-weight: 880;
line-height: 1.04;
letter-spacing: -0.054em;
text-wrap: balance;
}

#unified-support-inbox .omnichat-content h2 span {
display: block;
color: #079455;
}

#unified-support-inbox .omnichat-description {
max-width: 620px;
margin: 20px 0 0;
color: #667085;
font-size: 16px;
line-height: 1.72;
}

/* =========================================================
  BENEFITS
  ========================================================= */

#unified-support-inbox .omnichat-benefit-list {
display: grid;
gap: 12px;
margin-top: 28px;
}

#unified-support-inbox .omnichat-benefit {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 17px;
background: rgba(255, 255, 255, 0.88);
box-shadow:
  0 20px 38px -33px rgba(16, 24, 40, 0.42);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

#unified-support-inbox .omnichat-benefit:hover {
transform: translateX(5px);
border-color: rgba(18, 183, 106, 0.18);
box-shadow:
  0 26px 44px -34px rgba(16, 24, 40, 0.48);
}

#unified-support-inbox .omnichat-benefit-icon {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 12px;
background: #ecfdf3;
color: #08783e;
}

#unified-support-inbox
.omnichat-benefit:nth-child(2)
.omnichat-benefit-icon {
background: #eff6ff;
color: #2563eb;
}

#unified-support-inbox
.omnichat-benefit:nth-child(3)
.omnichat-benefit-icon {
background: #f4f3ff;
color: #6938ef;
}

#unified-support-inbox .omnichat-benefit-icon svg {
width: 20px;
height: 20px;
}

#unified-support-inbox .omnichat-benefit h3 {
margin: 0;
color: #344054;
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.015em;
}

#unified-support-inbox .omnichat-benefit p {
margin: 6px 0 0;
color: #667085;
font-size: 13px;
line-height: 1.58;
}

/* =========================================================
  CHANNEL STRIP
  ========================================================= */

#unified-support-inbox .omnichat-channel-strip {
margin-top: 22px;
padding: 15px 16px;
border: 1px solid rgba(59, 130, 246, 0.11);
border-radius: 16px;
background:
  linear-gradient(
    135deg,
    #eff6ff,
    #f8fbff
  );
}

#unified-support-inbox .omnichat-channel-label {
display: block;
color: #667085;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.065em;
text-transform: uppercase;
}

#unified-support-inbox .omnichat-channels {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin-top: 10px;
}

#unified-support-inbox .omnichat-channel {
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 10px;
border: 1px solid rgba(16, 24, 40, 0.065);
border-radius: 999px;
background: #ffffff;
color: #344054;
font-size: 11px;
font-weight: 760;
}

#unified-support-inbox .omnichat-channel-dot {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
}

#unified-support-inbox .omnichat-channel-dot-green {
background: #12b76a;
}

#unified-support-inbox .omnichat-channel-dot-dark {
background: #08783e;
}

#unified-support-inbox .omnichat-channel-dot-blue {
background: #3b82f6;
}

/* =========================================================
  RIGHT VISUAL
  ========================================================= */

#unified-support-inbox .omnichat-visual {
position: relative;
min-width: 0;
}

#unified-support-inbox .omnichat-glow {
position: absolute;
border-radius: 50%;
filter: blur(65px);
pointer-events: none;
}

#unified-support-inbox .omnichat-glow-green {
top: 10%;
left: 2%;
width: 240px;
height: 240px;
background: rgba(18, 183, 106, 0.14);
}

#unified-support-inbox .omnichat-glow-blue {
right: 2%;
bottom: 8%;
width: 260px;
height: 260px;
background: rgba(59, 130, 246, 0.13);
}

/* =========================================================
  IMAGE CARD
  ========================================================= */

#unified-support-inbox .omnichat-image-card {
position: relative;
z-index: 2;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 29px;
background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(247, 250, 252, 0.94)
  );
box-shadow:
  0 42px 85px -61px rgba(16, 24, 40, 0.58);
}

#unified-support-inbox .omnichat-image-card::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: inherit;
pointer-events: none;
background:
  linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.42),
    transparent 25%,
    transparent 76%,
    rgba(255, 255, 255, 0.18)
  );
}

/* =========================================================
  IMAGE CARD HEADER
  ========================================================= */

#unified-support-inbox .omnichat-image-card-top {
position: relative;
z-index: 4;
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 15px 18px;
border-bottom: 1px solid rgba(16, 24, 40, 0.065);
background: rgba(255, 255, 255, 0.9);
}

#unified-support-inbox .omnichat-image-title {
display: flex;
align-items: center;
gap: 11px;
}

#unified-support-inbox .omnichat-live-dot {
width: 11px;
height: 11px;
flex: 0 0 11px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 6px rgba(18, 183, 106, 0.12);
}

#unified-support-inbox .omnichat-image-title small,
#unified-support-inbox .omnichat-image-title strong {
display: block;
}

#unified-support-inbox .omnichat-image-title small {
color: #98a2b3;
font-size: 9px;
font-weight: 700;
}

#unified-support-inbox .omnichat-image-title strong {
margin-top: 4px;
color: #101828;
font-size: 15px;
font-weight: 850;
}

#unified-support-inbox .omnichat-status {
min-height: 31px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 10px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}



#unified-support-inbox .omnichat-image-area {
position: relative;
min-height: 500px;
display: grid;
place-items: center;
overflow: hidden;
padding: 22px;
background:
  radial-gradient(
    circle at center,
    rgba(18, 183, 106, 0.08),
    transparent 31%
  ),
  linear-gradient(
    180deg,
    #fbfefd,
    #f7fafc
  );
}

#unified-support-inbox .omnichat-image-area::before {
content: "";
position: absolute;
inset: 18px;
border: 1px dashed rgba(16, 24, 40, 0.055);
border-radius: 22px;
pointer-events: none;
}

#unified-support-inbox .omnichat-image {
position: relative;
z-index: 2;
width: 100%;
height: auto;
max-height: 460px;
display: block;
object-fit: contain;
object-position: center;
filter:
  drop-shadow(
    0 26px 30px rgba(16, 24, 40, 0.11)
  );
}



#unified-support-inbox .omnichat-image-footer {
position: relative;
z-index: 4;
display: grid;
grid-template-columns:
  repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(16, 24, 40, 0.065);
background: rgba(255, 255, 255, 0.92);
}

#unified-support-inbox .omnichat-image-stat {
min-height: 82px;
display: flex;
align-items: center;
gap: 11px;
padding: 15px 17px;
}

#unified-support-inbox
.omnichat-image-stat
+ .omnichat-image-stat {
border-left: 1px solid rgba(16, 24, 40, 0.065);
}

#unified-support-inbox .omnichat-image-stat > span {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 11px;
background: #ecfdf3;
color: #08783e;
}

#unified-support-inbox
.omnichat-image-stat:nth-child(2)
> span {
background: #eff6ff;
color: #2563eb;
}

#unified-support-inbox .omnichat-image-stat svg {
width: 18px;
height: 18px;
}

#unified-support-inbox .omnichat-image-stat strong,
#unified-support-inbox .omnichat-image-stat small {
display: block;
}

#unified-support-inbox .omnichat-image-stat strong {
color: #344054;
font-size: 12px;
font-weight: 820;
}

#unified-support-inbox .omnichat-image-stat small {
margin-top: 4px;
color: #98a2b3;
font-size: 9px;
line-height: 1.4;
}

/*  SUPPORT FINAL CTA SECTION */

.wmksupportcta-section {
padding: 28px 0 80px;
background-color: var(--surface);
}

.wmksupportcta-box {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: 36px;
padding: 42px 44px;
border: 1px solid #bfe7d3;
border-radius: 28px;
background: linear-gradient(135deg, #eef8f2 0%, #f7fbf9 45%, #edf7ff 100%);
box-shadow: 0 20px 50px rgba(16, 24, 40, 0.08);
overflow: hidden;
}

.wmksupportcta-content {
position: relative;
z-index: 2;
max-width: 760px;
}

.wmksupportcta-tag {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 8px 16px;
margin-bottom: 18px;
border: 1px solid #b8e7cd;
border-radius: 999px;
background: rgba(255, 255, 255, 0.75);
color: #0f9f5a;
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0.03em;
text-transform: uppercase;
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
}

.wmksupportcta-title {
margin: 0 0 14px;
color: #0f172a;
font-size: clamp(31px, 4vw, 33px);
font-weight: 800;
line-height: 1.12;
letter-spacing: -0.035em;
}

.wmksupportcta-text {
margin: 0;
max-width: 670px;
color: #667085;
font-size: 16px;
font-weight: 500;
line-height: 1.75;
}

.wmksupportcta-points {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}

.wmksupportcta-points span {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 8px 14px;
border: 1px solid #d7ede0;
border-radius: 999px;
background: #ffffff;
color: #1f2937;
font-size: 14px;
font-weight: 700;
line-height: 1;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.wmksupportcta-action {
position: relative;
z-index: 2;
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: flex-end;
}

.wmksupportcta-btn-primary,
.wmksupportcta-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
min-height: 58px;
padding: 14px 24px;
border-radius: 18px;
font-size: 16px;
font-weight: 800;
line-height: 1;
text-decoration: none;
transition: all 0.25s ease;
}

.wmksupportcta-btn-primary {
border: 1px solid #12b76a;
background: linear-gradient(180deg, #12b76a 0%, #0ea95d 100%);
color: #ffffff;
box-shadow: 0 14px 26px rgba(18, 183, 106, 0.22);
}

.wmksupportcta-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 18px 28px rgba(18, 183, 106, 0.28);
}

.wmksupportcta-btn-secondary {
border: 1px solid #d5e8dc;
background: rgba(255, 255, 255, 0.88);
color: #0f172a;
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.05);
}

.wmksupportcta-btn-secondary:hover {
transform: translateY(-2px);
border-color: #b8e7cd;
}

.wmksupportcta-glow {
position: absolute;
border-radius: 999px;
pointer-events: none;
z-index: 1;
}

.wmksupportcta-glow-one {
top: -70px;
right: -60px;
width: 220px;
height: 220px;
background: radial-gradient(circle, rgba(18, 183, 106, 0.18) 0%, rgba(18, 183, 106, 0) 72%);
}

.wmksupportcta-glow-two {
bottom: -80px;
left: 42%;
width: 260px;
height: 260px;
background: radial-gradient(circle, rgba(66, 133, 244, 0.12) 0%, rgba(66, 133, 244, 0) 74%);
}

/* Sales page  */
/*  SALES HERO SECTION  */

#sales-page-hero,
#sales-page-hero *,
#sales-page-hero *::before,
#sales-page-hero *::after {
box-sizing: border-box;
}

#sales-page-hero {
position: relative;
isolation: isolate;
padding: 120px 0 50px !important;
overflow: hidden;
background:
  radial-gradient(
    circle at 4% 15%,
    rgba(18, 183, 106, 0.09),
    transparent 27%
  ),
  radial-gradient(
    circle at 96% 82%,
    rgba(59, 130, 246, 0.08),
    transparent 28%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fbff 100%
  );
}

#sales-page-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -3;
opacity: 0.11;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.1) 0.7px,
    transparent 0.7px
  );
background-size: 30px 30px;
}

/* Main container layout */

#sales-page-hero .saleshero-layout {
display: grid;
grid-template-columns:
  minmax(480px, 1.08fr)
  minmax(430px, 0.92fr);
align-items: center;
gap: 52px;
}


#sales-page-hero .saleshero-content {
width: 100%;
max-width: 680px;
}

#sales-page-hero .saleshero-eyebrow {
min-height: 42px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.07em;
text-transform: uppercase;
}

#sales-page-hero .saleshero-eyebrow > span {
width: 9px;
height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.13);
}

#sales-page-hero .saleshero-content h1 {
margin: 22px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(41px, 5.2vw, 42px);
font-weight: 890;
line-height: 1.1;
letter-spacing: -0.028em;
text-wrap: balance;
}

#sales-page-hero .saleshero-content h1 span {
color: #079455;
}

#sales-page-hero .saleshero-description {
max-width: 620px;
margin: 22px 0 0;
color: #667085;
font-size: 17px;
line-height: 1.72;
}

/* Benefits */

#sales-page-hero .saleshero-benefits {
display: flex;
flex-wrap: wrap;
gap: 11px;
margin: 27px 0 0;
padding: 0;
list-style: none;
}

#sales-page-hero .saleshero-benefits li {
min-height: 47px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 9px 14px 9px 10px;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 999px;
background: #ffffff;
color: #344054;
font-size: 13px;
font-weight: 760;
box-shadow:
  0 17px 30px -26px rgba(16, 24, 40, 0.42);
}

#sales-page-hero .saleshero-benefits li > span {
width: 26px;
height: 26px;
flex: 0 0 26px;
display: grid;
place-items: center;
border-radius: 8px;
background: #d1fadf;
color: #08783e;
font-size: 10px;
font-weight: 900;
}

/* Buttons */

#sales-page-hero .saleshero-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 31px;
}

#sales-page-hero .saleshero-btn {
min-height: 55px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 13px 22px;
border-radius: 15px;
font-size: 15px;
font-weight: 820;
text-decoration: none;
transition:
  transform 0.25s ease,
  box-shadow 0.25s ease,
  border-color 0.25s ease;
}

#sales-page-hero .saleshero-btn-primary {
border: 1px solid #079455;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
box-shadow:
  0 20px 35px -22px rgba(7, 148, 85, 0.72);
}

#sales-page-hero .saleshero-btn-secondary {
border: 1px solid rgba(16, 24, 40, 0.14);
background: #ffffff;
color: #344054;
box-shadow:
  0 17px 30px -27px rgba(16, 24, 40, 0.44);
}

#sales-page-hero .saleshero-btn:hover {
transform: translateY(-3px);
}


#sales-page-hero .saleshero-visual {
position: relative;
min-width: 0;
min-height: 495px;
}

#sales-page-hero .saleshero-glow {
position: absolute;
border-radius: 50%;
filter: blur(65px);
pointer-events: none;
}

#sales-page-hero .saleshero-glow-green {
top: 13%;
left: 3%;
width: 230px;
height: 230px;
background: rgba(18, 183, 106, 0.14);
}

#sales-page-hero .saleshero-glow-blue {
right: 1%;
bottom: 8%;
width: 250px;
height: 250px;
background: rgba(59, 130, 246, 0.12);
}

#sales-page-hero .saleshero-image-frame {
position: relative;
z-index: 2;
width: 100%;
max-width: 570px;
height: fit-content;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 32px;
background:
  radial-gradient(
    circle at 44% 42%,
    rgba(18, 183, 106, 0.1),
    transparent 34%
  ),
  linear-gradient(
    145deg,
    #ffffff,
    #f5faf8 52%,
    #f5f8ff
  );
box-shadow:
  0 40px 82px -58px rgba(16, 24, 40, 0.58);
}

#sales-page-hero .saleshero-image-frame::before {
content: "";
position: absolute;
inset: 14px;
border: 1px dashed rgba(16, 24, 40, 0.055);
border-radius: 24px;
pointer-events: none;
}

#sales-page-hero .saleshero-image-badge {
position: absolute;
top: 18px;
left: 18px;
z-index: 4;
min-height: 34px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
border: 1px solid rgba(18, 183, 106, 0.14);
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #08783e;
font-size: 9px;
font-weight: 830;
box-shadow:
  0 16px 28px -23px rgba(16, 24, 40, 0.42);
}

#sales-page-hero .saleshero-image-badge > span {
width: 8px;
height: 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.12);
}

#sales-page-hero .saleshero-image {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
filter:
  drop-shadow(
    0 23px 28px rgba(16, 24, 40, 0.11)
  );
}

/*  SALES CAPABILITIES SECTION  */

#sales-capabilities,
#sales-capabilities *,
#sales-capabilities *::before,
#sales-capabilities *::after {
box-sizing: border-box;
}

#sales-capabilities {
position: relative;
isolation: isolate;
padding: 100px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 6% 12%,
    rgba(18, 183, 106, 0.07),
    transparent 27%
  ),
  radial-gradient(
    circle at 95% 88%,
    rgba(59, 130, 246, 0.07),
    transparent 28%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f9fcfb 50%,
    #ffffff 100%
  );
}

#sales-capabilities::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
opacity: 0.11;
pointer-events: none;
background-image:
  radial-gradient(
    rgba(16, 24, 40, 0.1) 0.7px,
    transparent 0.7px
  );
background-size: 30px 30px;
}

#sales-capabilities .salesedge-heading {
max-width: 880px;
margin: 0 auto 64px;
text-align: center;
}

#sales-capabilities .salesedge-eyebrow {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 16px;
border: 1px solid rgba(18, 183, 106, 0.17);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.075em;
text-transform: uppercase;
}

#sales-capabilities .salesedge-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.12);
}

#sales-capabilities .salesedge-heading h2 {
margin: 19px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(34px, 4.1vw, 41px);
font-weight: 880;
line-height: 1.04;
letter-spacing: -0.054em;
text-wrap: balance;
}

#sales-capabilities .salesedge-heading h2 span {
color: #079455;
}

#sales-capabilities .salesedge-heading p {
max-width: 730px;
margin: 19px auto 0;
color: #667085;
font-size: 16px;
line-height: 1.7;
}

#sales-capabilities .salesedge-feature {
position: relative;
display: grid;
grid-template-columns:
  repeat(2, minmax(0, 1fr));
align-items: center;
gap: 58px;
padding: 48px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 34px;
background: rgba(255, 255, 255, 0.88);
box-shadow:
  0 38px 80px -62px rgba(16, 24, 40, 0.54);
}

#sales-capabilities .salesedge-feature + .salesedge-feature {
margin-top: 28px;
}

#sales-capabilities .salesedge-feature-primary {
background:
  radial-gradient(
    circle at 90% 15%,
    rgba(18, 183, 106, 0.1),
    transparent 31%
  ),
  linear-gradient(
    145deg,
    #ffffff,
    #f7fcf9
  );
}

#sales-capabilities .salesedge-feature-secondary {
background:
  radial-gradient(
    circle at 10% 85%,
    rgba(59, 130, 246, 0.1),
    transparent 31%
  ),
  linear-gradient(
    145deg,
    #f8fbff,
    #ffffff
  );
}


#sales-capabilities .salesedge-feature-content {
position: relative;
z-index: 3;
max-width: 570px;
}

#sales-capabilities .salesedge-feature-number {
min-width: 38px;
min-height: 31px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 10px;
font-weight: 850;
}

#sales-capabilities
.salesedge-feature-secondary
.salesedge-feature-number {
background: #eff6ff;
color: #2563eb;
}

#sales-capabilities .salesedge-feature-label {
display: block;
margin-top: 17px;
color: #079455;
font-size: 11px;
font-weight: 850;
letter-spacing: 0.075em;
text-transform: uppercase;
}

#sales-capabilities
.salesedge-feature-secondary
.salesedge-feature-label {
color: #2563eb;
}

#sales-capabilities .salesedge-feature-content h3 {
margin: 12px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(31px, 3.5vw, 32px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.047em;
text-wrap: balance;
}

#sales-capabilities .salesedge-feature-content > p {
margin: 17px 0 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}

#sales-capabilities .salesedge-benefits {
display: grid;
gap: 11px;
margin: 25px 0 0;
padding: 0;
list-style: none;
}

#sales-capabilities .salesedge-benefits li {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 13px 14px;
border: 1px solid rgba(16, 24, 40, 0.065);
border-radius: 14px;
background: rgba(255, 255, 255, 0.8);
}

#sales-capabilities .salesedge-benefits li > span {
width: 28px;
height: 28px;
flex: 0 0 28px;
display: grid;
place-items: center;
border-radius: 8px;
background: #d1fadf;
color: #08783e;
font-size: 10px;
font-weight: 900;
}

#sales-capabilities
.salesedge-feature-secondary
.salesedge-benefits
li > span {
background: #dbeafe;
color: #2563eb;
}

#sales-capabilities .salesedge-benefits strong,
#sales-capabilities .salesedge-benefits small {
display: block;
}

#sales-capabilities .salesedge-benefits strong {
color: #344054;
font-size: 13px;
font-weight: 700;
line-height: 1.35;
}

#sales-capabilities .salesedge-benefits small {
margin-top: 4px;
color: #98a2b3;
font-size: 11px;
line-height: 1.45;
}

#sales-capabilities .salesedge-feature-visual {
position: relative;
min-width: 0;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}

#sales-capabilities .salesedge-visual-glow {
position: absolute;
border-radius: 50%;
filter: blur(65px);
pointer-events: none;
}

#sales-capabilities .salesedge-visual-glow-green {
width: 250px;
height: 250px;
background: rgba(18, 183, 106, 0.14);
}

#sales-capabilities .salesedge-visual-glow-blue {
width: 270px;
height: 270px;
background: rgba(59, 130, 246, 0.13);
}

#sales-capabilities .salesedge-image-frame {
position: relative;
z-index: 2;
width: 100%;
max-width: 590px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 27px;
background:
  linear-gradient(
    145deg,
    #ffffff,
    #f7fafc
  );
box-shadow:
  0 34px 67px -51px rgba(16, 24, 40, 0.5);
}

#sales-capabilities .salesedge-image-topbar {
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 13px 16px;
border-bottom: 1px solid rgba(16, 24, 40, 0.065);
background: rgba(255, 255, 255, 0.92);
}

#sales-capabilities .salesedge-image-topbar > div {
display: flex;
align-items: center;
gap: 11px;
}

#sales-capabilities .salesedge-image-topbar > div > span {
width: 11px;
height: 11px;
flex: 0 0 11px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 6px rgba(18, 183, 106, 0.12);
}

#sales-capabilities
.salesedge-feature-secondary
.salesedge-image-topbar
> div
> span {
background: #3b82f6;
box-shadow:
  0 0 0 6px rgba(59, 130, 246, 0.12);
}

#sales-capabilities .salesedge-image-topbar small,
#sales-capabilities .salesedge-image-topbar strong {
display: block;
}

#sales-capabilities .salesedge-image-topbar small {
color: #98a2b3;
font-size: 9px;
font-weight: 700;
}

#sales-capabilities .salesedge-image-topbar strong {
margin-top: 4px;
color: #344054;
font-size: 14px;
font-weight: 840;
}

#sales-capabilities .salesedge-status {
min-height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 850;
text-transform: uppercase;
}

#sales-capabilities .salesedge-status-blue {
background: #eff6ff;
color: #2563eb;
}

#sales-capabilities .salesedge-image-area {
position: relative;
min-height: 340px;
display: grid;
place-items: center;
padding: 20px;
overflow: hidden;
background:
  radial-gradient(
    circle at center,
    rgba(18, 183, 106, 0.07),
    transparent 33%
  ),
  #f9fbfc;
}

#sales-capabilities
.salesedge-feature-secondary
.salesedge-image-area {
background:
  radial-gradient(
    circle at center,
    rgba(59, 130, 246, 0.07),
    transparent 33%
  ),
  #f9fbfc;
}

#sales-capabilities .salesedge-image-area::before {
content: "";
position: absolute;
inset: 14px;
border: 1px dashed rgba(16, 24, 40, 0.055);
border-radius: 18px;
pointer-events: none;
}

#sales-capabilities .salesedge-image {
position: relative;
z-index: 2;
width: 100%;
height: auto;
/* max-height: 310px; */
display: block;
border-radius:18px;
object-fit: contain;
object-position: center;
filter:
  drop-shadow(
    0 22px 27px rgba(16, 24, 40, 0.11)
  );
}

#sales-capabilities .salesedge-image-footer {
display: grid;
grid-template-columns:
  repeat(2, minmax(0, 1fr));
border-top: 1px solid rgba(16, 24, 40, 0.065);
background: #ffffff;
}

#sales-capabilities .salesedge-image-footer span {
min-height: 55px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #475467;
font-size: 11px;
font-weight: 760;
}

#sales-capabilities
.salesedge-image-footer
span + span {
border-left: 1px solid rgba(16, 24, 40, 0.065);
}

#sales-capabilities .salesedge-image-footer i {
color: #079455;
font-style: normal;
font-weight: 900;
}

#sales-capabilities
.salesedge-feature-secondary
.salesedge-image-footer
i {
color: #2563eb;
}



/*  SALES AUTOMATION PATH SECTION */

#sales-automation-path,
#sales-automation-path *,
#sales-automation-path *::before,
#sales-automation-path *::after {
box-sizing: border-box;
}

#sales-automation-path {
position: relative;
padding: 86px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 7% 14%,
    rgba(18, 183, 106, 0.06),
    transparent 28%
  ),
  radial-gradient(
    circle at 94% 86%,
    rgba(59, 130, 246, 0.06),
    transparent 27%
  ),
  #ffffff;
}

#sales-automation-path .salespath-shell {
position: relative;
padding: 42px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 30px;
background:
  linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(248, 252, 250, 0.96)
  );
box-shadow:
  0 34px 75px -58px rgba(16, 24, 40, 0.48);
}

#sales-automation-path .salespath-shell::before {
content: "";
position: absolute;
top: -115px;
right: -95px;
width: 300px;
height: 300px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.055);
pointer-events: none;
}

#sales-automation-path .salespath-shell::after {
content: "";
position: absolute;
bottom: -135px;
left: -90px;
width: 290px;
height: 290px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.045);
pointer-events: none;
}


#sales-automation-path .salespath-header {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto 40px;
text-align: center;
}

#sales-automation-path .salespath-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.17);
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#sales-automation-path .salespath-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.12);
}

#sales-automation-path .salespath-header h2 {
margin: 18px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(34px, 4.2vw, 41px);
font-weight: 860;
line-height: 1.08;
letter-spacing: -0.045em;
text-wrap: balance;
}

#sales-automation-path .salespath-header h2 span {
color: #079455;
}

#sales-automation-path .salespath-header p {
max-width: 650px;
margin: 16px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}

#sales-automation-path .salespath-layout {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
  minmax(360px, 0.9fr)
  minmax(470px, 1.1fr);
align-items: center;
gap: 34px;
}

#sales-automation-path .salespath-benefits {
display: grid;
gap: 13px;
}

#sales-automation-path .salespath-benefit {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 18px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 18px;
background: rgba(255, 255, 255, 0.92);
box-shadow:
  0 18px 35px -31px rgba(16, 24, 40, 0.44);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

#sales-automation-path .salespath-benefit:hover {
transform: translateY(-3px);
border-color: rgba(18, 183, 106, 0.18);
box-shadow:
  0 25px 41px -31px rgba(16, 24, 40, 0.48);
}

#sales-automation-path .salespath-benefit-number {
width: 43px;
height: 43px;
flex: 0 0 43px;
display: grid;
place-items: center;
border-radius: 13px;
background: #d1fadf;
color: #08783e;
font-size: 12px;
font-weight: 850;
}

#sales-automation-path
.salespath-benefit:nth-child(2)
.salespath-benefit-number {
background: #dbeafe;
color: #2563eb;
}

#sales-automation-path
.salespath-benefit:nth-child(3)
.salespath-benefit-number {
background: #f4f3ff;
color: #6938ef;
}

#sales-automation-path .salespath-benefit h3 {
margin: 0;
color: #344054;
font-family: var(--font-display);
font-size: 18px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.015em;
}

#sales-automation-path .salespath-benefit p {
margin: 6px 0 0;
color: #667085;
font-size: 13px;
line-height: 1.55;
}

#sales-automation-path .salespath-workflow {
position: relative;
padding: 18px;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.075);
border-radius: 24px;
background:
  radial-gradient(
    circle at 50% 0,
    rgba(18, 183, 106, 0.07),
    transparent 28%
  ),
  linear-gradient(
    180deg,
    #ffffff,
    #f8fafc
  );
}

#sales-automation-path .salespath-workflow::before {
content: "";
position: absolute;
inset: 10px;
border: 1px dashed rgba(16, 24, 40, 0.05);
border-radius: 18px;
pointer-events: none;
}

#sales-automation-path .salespath-workflow-head {
position: relative;
z-index: 2;
min-height: 63px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 12px 14px;
border: 1px solid rgba(16, 24, 40, 0.06);
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
}

#sales-automation-path .salespath-workflow-head > div {
display: flex;
align-items: center;
gap: 11px;
}

#sales-automation-path .salespath-live-dot {
width: 10px;
height: 10px;
flex: 0 0 10px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 6px rgba(18, 183, 106, 0.12);
}

#sales-automation-path .salespath-workflow-head small,
#sales-automation-path .salespath-workflow-head strong {
display: block;
}

#sales-automation-path .salespath-workflow-head small {
color: #98a2b3;
font-size: 9px;
font-weight: 700;
}

#sales-automation-path .salespath-workflow-head strong {
margin-top: 3px;
color: #344054;
font-size: 14px;
font-weight: 840;
}

#sales-automation-path .salespath-status {
min-height: 29px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 9px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.04em;
text-transform: uppercase;
}


#sales-automation-path .salespath-flow {
position: relative;
z-index: 2;
display: grid;
gap: 0;
padding: 15px 2px;
}

#sales-automation-path .salespath-flow-step {
display: grid;
grid-template-columns:
  39px
  minmax(0, 1fr)
  auto;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid rgba(16, 24, 40, 0.065);
border-radius: 15px;
background: rgba(255, 255, 255, 0.94);
box-shadow:
  0 15px 28px -25px rgba(16, 24, 40, 0.42);
}

#sales-automation-path .salespath-flow-icon {
width: 39px;
height: 39px;
display: grid;
place-items: center;
border-radius: 11px;
font-size: 11px;
font-weight: 850;
}

#sales-automation-path .salespath-flow-step-green .salespath-flow-icon {
background: #d1fadf;
color: #08783e;
}

#sales-automation-path .salespath-flow-step-blue .salespath-flow-icon {
background: #dbeafe;
color: #2563eb;
}

#sales-automation-path .salespath-flow-step-purple .salespath-flow-icon {
background: #f4f3ff;
color: #6938ef;
}

#sales-automation-path .salespath-flow-step small {
display: block;
color: #98a2b3;
font-size: 9px;
font-weight: 700;
}

#sales-automation-path .salespath-flow-step h3 {
margin: 3px 0 0;
color: #344054;
font-size: 14px;
font-weight: 700;
line-height: 1.3;
}

#sales-automation-path .salespath-flow-step p {
margin: 4px 0 0;
color: #667085;
font-size: 10px;
line-height: 1.45;
}

#sales-automation-path .salespath-flow-state {
min-height: 27px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px 8px;
border-radius: 999px;
background: #f2f4f7;
color: #667085;
font-size: 9px;
font-weight: 800;
}

#sales-automation-path .salespath-flow-line {
width: 2px;
height: 17px;
margin: 4px 0 4px 32px;
border-radius: 999px;
background:
  linear-gradient(
    180deg,
    #12b76a,
    #60a5fa
  );
opacity: 0.55;
}

#sales-automation-path .salespath-result {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 12px;
padding: 14px;
border: 1px solid rgba(18, 183, 106, 0.14);
border-radius: 15px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #f5fffa
  );
}

#sales-automation-path .salespath-result-icon {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: grid;
place-items: center;
border-radius: 11px;
background: #12b76a;
color: #ffffff;
font-size: 13px;
font-weight: 900;
}

#sales-automation-path .salespath-result strong {
display: block;
color: #08783e;
font-size: 13px;
font-weight: 840;
}

#sales-automation-path .salespath-result p {
margin: 4px 0 0;
color: #667085;
font-size: 10px;
line-height: 1.4;
}


/* SALES INSIGHTS SECTION*/

#sales-insights-preview,
#sales-insights-preview *,
#sales-insights-preview *::before,
#sales-insights-preview *::after {
box-sizing: border-box;
}

#sales-insights-preview {
position: relative;
padding: 88px 0;
overflow: hidden;
background: #ffffff;
}


#sales-insights-preview .salesinsight-header {
max-width: 740px;
margin: 0 auto 42px;
text-align: center;
}

#sales-insights-preview .salesinsight-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: #f5fcf8;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#sales-insights-preview .salesinsight-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
}

#sales-insights-preview .salesinsight-header h2 {
max-width: 690px;
margin: 17px auto 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 41px);
font-weight: 860;
line-height: 1.09;
letter-spacing: -0.045em;
text-wrap: balance;
}

#sales-insights-preview .salesinsight-header h2 span {
color: #079455;
}

#sales-insights-preview .salesinsight-header p {
max-width: 620px;
margin: 15px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}


#sales-insights-preview .salesinsight-grid {
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}

#sales-insights-preview .salesinsight-card {
position: relative;
min-width: 0;
min-height: 368px;
display: grid;
grid-template-rows:
  auto
  auto
  1fr
  auto;
padding: 23px;
overflow: hidden;
border: 1px solid #e4e7ec;
border-radius: 22px;
background: #ffffff;
box-shadow:
  0 22px 52px -42px rgba(16, 24, 40, 0.43);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

#sales-insights-preview .salesinsight-card-green {
border-top: 4px solid #12b76a;
}

#sales-insights-preview .salesinsight-card-blue {
border-top: 4px solid #3b82f6;
}

#sales-insights-preview .salesinsight-card-purple {
border-top: 4px solid #7f56d9;
}

#sales-insights-preview .salesinsight-card:hover {
transform: translateY(-5px);
border-color: #d0d5dd;
box-shadow:
  0 30px 62px -43px rgba(16, 24, 40, 0.5);
}

#sales-insights-preview .salesinsight-card-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

#sales-insights-preview .salesinsight-card-icon {
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 14px;
}

#sales-insights-preview
.salesinsight-card-green
.salesinsight-card-icon {
background: #ecfdf3;
color: #08783e;
}

#sales-insights-preview
.salesinsight-card-blue
.salesinsight-card-icon {
background: #eff6ff;
color: #2563eb;
}

#sales-insights-preview
.salesinsight-card-purple
.salesinsight-card-icon {
background: #f4f3ff;
color: #6938ef;
}

#sales-insights-preview .salesinsight-card-icon svg {
width: 21px;
height: 21px;
}

#sales-insights-preview .salesinsight-card-number {
min-width: 34px;
min-height: 28px;
display: grid;
place-items: center;
padding: 5px 9px;
border-radius: 8px;
background: #f2f4f7;
color: #667085;
font-size: 9px;
font-weight: 850;
}

#sales-insights-preview .salesinsight-card-copy {
min-height: 112px;
margin-top: 20px;
}

#sales-insights-preview .salesinsight-card-copy h3 {
margin: 0;
color: #101828;
font-family: var(--font-display);
font-size: 20px;
font-weight: 830;
line-height: 1.28;
letter-spacing: -0.02em;
}

#sales-insights-preview .salesinsight-card-copy p {
margin: 9px 0 0;
color: #667085;
font-size: 13px;
line-height: 1.58;
}


#sales-insights-preview .salesinsight-compact-preview {
align-self: start;
display: grid;
gap: 11px;
margin-top: 6px;
padding: 15px;
border: 1px solid #eaecf0;
border-radius: 15px;
background: #fafafa;
}

#sales-insights-preview .salesinsight-preview-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}

#sales-insights-preview .salesinsight-preview-row span {
color: #667085;
font-size: 11px;
}

#sales-insights-preview .salesinsight-preview-row strong {
color: #101828;
font-size: 13px;
font-weight: 700;
}

#sales-insights-preview .salesinsight-progress {
width: 100%;
height: 8px;
overflow: hidden;
border-radius: 999px;
background: #e9f7ef;
}

#sales-insights-preview .salesinsight-progress > span {
width: var(--salesinsight-progress);
height: 100%;
display: block;
border-radius: inherit;
background: #12b76a;
}

#sales-insights-preview .salesinsight-progress-blue {
background: #eaf2ff;
}

#sales-insights-preview
.salesinsight-progress-blue
> span {
background: #3b82f6;
}

#sales-insights-preview .salesinsight-progress-purple {
background: #f0ecff;
}

#sales-insights-preview
.salesinsight-progress-purple
> span {
background: #7f56d9;
}

#sales-insights-preview .salesinsight-coming-soon {
min-height: auto;
display: inline-flex;
align-items: center;
align-self: end;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #eaecf0;
color: #667085;
font-size: 10px;
font-weight: 820;
letter-spacing: 0.06em;
text-transform: uppercase;
}

#sales-insights-preview .salesinsight-coming-soon::before {
content: "";
width: 7px;
height: 7px;
flex: 0 0 7px;
margin-right: 8px;
border-radius: 50%;
background: #12b76a;
}

#sales-insights-preview
.salesinsight-card-blue
.salesinsight-coming-soon::before {
background: #3b82f6;
}

#sales-insights-preview
.salesinsight-card-purple
.salesinsight-coming-soon::before {
background: #7f56d9;
}

#sales-insights-preview .salesinsight-note {
max-width: 680px;
display: flex;
align-items: center;
justify-content: center;
gap: 13px;
margin: 34px auto 0;
padding: 22px 0 0;
border-top: 1px solid #e4e7ec;
}

#sales-insights-preview .salesinsight-note-icon {
width: 36px;
height: 36px;
flex: 0 0 36px;
display: grid;
place-items: center;
border-radius: 50%;
background: #ecfdf3;
color: #08783e;
font-size: 12px;
font-weight: 900;
}

#sales-insights-preview .salesinsight-note strong {
display: block;
color: #344054;
font-size: 13px;
font-weight: 840;
}

#sales-insights-preview .salesinsight-note p {
margin: 3px 0 0;
color: #667085;
font-size: 11px;
line-height: 1.45;
}

/* SALES CRM INTEGRATIONS SECTION */

#sales-crm-integrations,
#sales-crm-integrations *,
#sales-crm-integrations *::before,
#sales-crm-integrations *::after {
box-sizing: border-box;
}

#sales-crm-integrations {
position: relative;
padding: 90px 0;
overflow: hidden;
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f9fcfb 100%
  );
}

#sales-crm-integrations .salescrm-content {
position: relative;
}

#sales-crm-integrations .salescrm-header {
max-width: 820px;
margin: 0 auto 42px;
text-align: center;
}

#sales-crm-integrations .salescrm-eyebrow {
min-height: 40px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 16px 7px 8px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background:
  linear-gradient(
    135deg,
    #ecfdf3,
    #eff6ff
  );
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#sales-crm-integrations .salescrm-eyebrow-icon {
width: 27px;
height: 27px;
flex: 0 0 27px;
display: grid;
place-items: center;
border-radius: 8px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
}

#sales-crm-integrations .salescrm-eyebrow-icon svg {
width: 15px;
height: 15px;
}

#sales-crm-integrations .salescrm-header h2 {
margin: 18px auto 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(35px, 4.4vw, 41px);
font-weight: 860;
line-height: 1.08;
letter-spacing: -0.047em;
text-wrap: balance;
}

#sales-crm-integrations .salescrm-header h2 span {
color: #079455;
}

#sales-crm-integrations .salescrm-header p {
max-width: 660px;
margin: 16px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}

#sales-crm-integrations .salescrm-showcase {
position: relative;
max-width: 1120px;
margin: 0 auto;
}

#sales-crm-integrations .salescrm-glow {
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
}

#sales-crm-integrations .salescrm-glow-green {
top: 14%;
left: 1%;
width: 260px;
height: 260px;
background: rgba(18, 183, 106, 0.12);
}

#sales-crm-integrations .salescrm-glow-blue {
right: 1%;
bottom: 8%;
width: 280px;
height: 280px;
background: rgba(59, 130, 246, 0.1);
}

#sales-crm-integrations .salescrm-image-frame {
position: relative;
z-index: 2;
overflow: hidden;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 30px;
background: #ffffff;
box-shadow:
  0 38px 80px -60px rgba(16, 24, 40, 0.48);
}

#sales-crm-integrations .salescrm-frame-header {
min-height: 74px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 15px 19px;
border-bottom: 1px solid rgba(16, 24, 40, 0.065);
background: rgba(255, 255, 255, 0.95);
}

#sales-crm-integrations .salescrm-frame-title {
display: flex;
align-items: center;
gap: 12px;
}

#sales-crm-integrations .salescrm-live-dot {
width: 11px;
height: 11px;
flex: 0 0 11px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 6px rgba(18, 183, 106, 0.12);
}

#sales-crm-integrations .salescrm-frame-title small,
#sales-crm-integrations .salescrm-frame-title strong {
display: block;
}

#sales-crm-integrations .salescrm-frame-title small {
color: #98a2b3;
font-size: 9px;
font-weight: 700;
}

#sales-crm-integrations .salescrm-frame-title strong {
margin-top: 4px;
color: #344054;
font-size: 15px;
font-weight: 840;
}

#sales-crm-integrations .salescrm-frame-status {
min-height: 31px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 11px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.05em;
text-transform: uppercase;
}

#sales-crm-integrations .salescrm-image-area {
position: relative;
min-height: 560px;
display: grid;
place-items: center;
overflow: hidden;
padding: 26px;
background:
  radial-gradient(
    circle at center,
    rgba(18, 183, 106, 0.075),
    transparent 31%
  ),
  linear-gradient(
    180deg,
    #fcfefd,
    #f8fafc
  );
}

#sales-crm-integrations .salescrm-image-area::before {
content: "";
position: absolute;
inset: 18px;
border: 1px dashed rgba(16, 24, 40, 0.055);
border-radius: 22px;
pointer-events: none;
}

#sales-crm-integrations .salescrm-image {
position: relative;
z-index: 2;
width: 100%;
height: auto;
max-height: 515px;
display: block;
object-fit: contain;
object-position: center;
filter:
  drop-shadow(
    0 26px 30px rgba(16, 24, 40, 0.1)
  );
}

#sales-crm-integrations .salescrm-frame-footer {
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(16, 24, 40, 0.065);
background: #ffffff;
}

#sales-crm-integrations .salescrm-footer-item {
min-height: 83px;
display: flex;
align-items: center;
gap: 11px;
padding: 15px 18px;
}

#sales-crm-integrations
.salescrm-footer-item
+ .salescrm-footer-item {
border-left: 1px solid rgba(16, 24, 40, 0.065);
}

#sales-crm-integrations .salescrm-footer-item > span {
width: 39px;
height: 39px;
flex: 0 0 39px;
display: grid;
place-items: center;
border-radius: 11px;
background: #ecfdf3;
color: #08783e;
}

#sales-crm-integrations
.salescrm-footer-item:nth-child(2)
> span {
background: #eff6ff;
color: #2563eb;
}

#sales-crm-integrations
.salescrm-footer-item:nth-child(3)
> span {
background: #f4f3ff;
color: #6938ef;
}

#sales-crm-integrations .salescrm-footer-item svg {
width: 18px;
height: 18px;
}

#sales-crm-integrations .salescrm-footer-item strong,
#sales-crm-integrations .salescrm-footer-item small {
display: block;
}

#sales-crm-integrations .salescrm-footer-item strong {
color: #344054;
font-size: 12px;
font-weight: 820;
}

#sales-crm-integrations .salescrm-footer-item small {
margin-top: 4px;
color: #98a2b3;
font-size: 9px;
line-height: 1.4;
}

/* SALES FLEXIBILITY SECTION */

#sales-flexibility,
#sales-flexibility *,
#sales-flexibility *::before,
#sales-flexibility *::after {
box-sizing: border-box;
}

#sales-flexibility {
position: relative;
padding: 88px 0;
overflow: hidden;
background:
  linear-gradient(
    180deg,
    #f8fcfa 0%,
    #ffffff 100%
  );
}


#sales-flexibility .salesflex-header {
max-width: 760px;
margin: 0 auto 42px;
text-align: center;
}

#sales-flexibility .salesflex-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: #f4fcf7;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#sales-flexibility .salesflex-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.11);
}

#sales-flexibility .salesflex-header h2 {
max-width: 700px;
margin: 17px auto 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(34px, 4.2vw, 41px);
font-weight: 860;
line-height: 1.08;
letter-spacing: -0.045em;
text-wrap: balance;
}

#sales-flexibility .salesflex-header h2 span {
color: #079455;
}

#sales-flexibility .salesflex-header p {
max-width: 640px;
margin: 16px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}

#sales-flexibility .salesflex-grid {
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}

#sales-flexibility .salesflex-card {
position: relative;
min-width: 0;
min-height: 330px;
display: flex;
flex-direction: column;
padding: 24px;
overflow: hidden;
border: 1px solid #e4e7ec;
border-radius: 22px;
background: #ffffff;
box-shadow:
  0 22px 50px -42px rgba(16, 24, 40, 0.46);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

#sales-flexibility .salesflex-card-green {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f5fcf8 100%
  );
}

#sales-flexibility .salesflex-card-blue {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f5f9ff 100%
  );
}

#sales-flexibility .salesflex-card-purple {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8f6ff 100%
  );
}

#sales-flexibility .salesflex-card:hover {
transform: translateY(-5px);
border-color: #d0d5dd;
box-shadow:
  0 30px 62px -44px rgba(16, 24, 40, 0.52);
}

#sales-flexibility .salesflex-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

#sales-flexibility .salesflex-card-icon {
width: 47px;
height: 47px;
flex: 0 0 47px;
display: grid;
place-items: center;
border-radius: 14px;
}

#sales-flexibility .salesflex-card-green .salesflex-card-icon {
background: #d1fadf;
color: #08783e;
}

#sales-flexibility .salesflex-card-blue .salesflex-card-icon {
background: #dbeafe;
color: #2563eb;
}

#sales-flexibility .salesflex-card-purple .salesflex-card-icon {
background: #f4f3ff;
color: #6938ef;
}

#sales-flexibility .salesflex-card-icon svg {
width: 21px;
height: 21px;
}

#sales-flexibility .salesflex-card-number {
min-width: 34px;
min-height: 28px;
display: grid;
place-items: center;
padding: 5px 9px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.82);
color: #667085;
font-size: 9px;
font-weight: 850;
border: 1px solid rgba(16, 24, 40, 0.06);
}

#sales-flexibility .salesflex-card h3 {
margin: 25px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: 21px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.025em;
}

#sales-flexibility .salesflex-card p {
margin: 11px 0 0;
color: #667085;
font-size: 13px;
line-height: 1.65;
}

#sales-flexibility .salesflex-card-note {
min-height: 39px;
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding: 9px 12px;
border-radius: 11px;
font-size: 10px;
font-weight: 820;
}

#sales-flexibility .salesflex-card-green .salesflex-card-note {
background: #ecfdf3;
color: #08783e;
}

#sales-flexibility .salesflex-card-blue .salesflex-card-note {
background: #eff6ff;
color: #2563eb;
}

#sales-flexibility .salesflex-card-purple .salesflex-card-note {
background: #f4f3ff;
color: #6938ef;
}

/* SALES IMPACT SECTION */

#sales-engagement-impact,
#sales-engagement-impact *,
#sales-engagement-impact *::before,
#sales-engagement-impact *::after {
box-sizing: border-box;
}

#sales-engagement-impact {
position: relative;
padding: 90px 0;
overflow: hidden;
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fcfa 100%
  );
}

#sales-engagement-impact .salesimpact-header {
max-width: 780px;
margin: 0 auto 46px;
text-align: center;
}

#sales-engagement-impact .salesimpact-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: #f4fcf7;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#sales-engagement-impact .salesimpact-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.11);
}

#sales-engagement-impact .salesimpact-header h2 {
max-width: 720px;
margin: 17px auto 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(34px, 4.2vw, 41px);
font-weight: 860;
line-height: 1.08;
letter-spacing: -0.045em;
text-wrap: balance;
}

#sales-engagement-impact .salesimpact-header h2 span {
display: block;
color: #079455;
}

#sales-engagement-impact .salesimpact-header p {
max-width: 640px;
margin: 16px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}

#sales-engagement-impact .salesimpact-layout {
display: grid;
grid-template-columns:
  minmax(0, 0.86fr)
  minmax(320px, 1.08fr)
  minmax(0, 0.86fr);
align-items: center;
gap: 18px;
}

#sales-engagement-impact .salesimpact-column {
display: grid;
gap: 14px;
}

#sales-engagement-impact .salesimpact-card {
display: flex;
align-items: flex-start;
gap: 13px;
padding: 18px;
border: 1px solid #e4e7ec;
border-radius: 18px;
background: #ffffff;
box-shadow:
  0 18px 38px -32px rgba(16, 24, 40, 0.42);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

#sales-engagement-impact .salesimpact-card:hover {
transform: translateY(-4px);
border-color: rgba(18, 183, 106, 0.2);
box-shadow:
  0 26px 46px -33px rgba(16, 24, 40, 0.48);
}

#sales-engagement-impact .salesimpact-card-icon {
width: 43px;
height: 43px;
flex: 0 0 43px;
display: grid;
place-items: center;
border-radius: 13px;
}

#sales-engagement-impact
.salesimpact-card-green
.salesimpact-card-icon {
background: #d1fadf;
color: #08783e;
}

#sales-engagement-impact
.salesimpact-card-blue
.salesimpact-card-icon {
background: #dbeafe;
color: #2563eb;
}

#sales-engagement-impact
.salesimpact-card-purple
.salesimpact-card-icon {
background: #f4f3ff;
color: #6938ef;
}

#sales-engagement-impact .salesimpact-card-icon svg {
width: 19px;
height: 19px;
}

#sales-engagement-impact .salesimpact-card h3 {
margin: 0;
color: #344054;
font-family: var(--font-display);
font-size: 16px;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.015em;
}

#sales-engagement-impact .salesimpact-card p {
margin: 6px 0 0;
color: #667085;
font-size: 12px;
line-height: 1.55;
}

#sales-engagement-impact .salesimpact-result {
position: relative;
min-height: 430px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 34px;
overflow: hidden;
border: 1px solid rgba(18, 183, 106, 0.16);
border-radius: 28px;
background:
  radial-gradient(
    circle at 50% 18%,
    rgba(18, 183, 106, 0.13),
    transparent 32%
  ),
  linear-gradient(
    155deg,
    #f6fdf9,
    #f4f8ff
  );
text-align: center;
box-shadow:
  0 32px 68px -50px rgba(16, 24, 40, 0.45);
}

#sales-engagement-impact .salesimpact-result-label {
min-height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 12px;
border: 1px solid rgba(18, 183, 106, 0.16);
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: #08783e;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.06em;
text-transform: uppercase;
}

#sales-engagement-impact .salesimpact-result-icon {
width: 72px;
height: 72px;
display: grid;
place-items: center;
margin-top: 22px;
border-radius: 22px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
box-shadow:
  0 18px 34px -20px rgba(7, 148, 85, 0.7);
}

#sales-engagement-impact .salesimpact-result-icon svg {
width: 31px;
height: 31px;
}

#sales-engagement-impact .salesimpact-result h3 {
max-width: 380px;
margin: 22px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: 22px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.035em;
}

#sales-engagement-impact .salesimpact-result > p {
max-width: 390px;
margin: 13px 0 0;
color: #667085;
font-size: 13px;
line-height: 1.65;
}

#sales-engagement-impact .salesimpact-result-stats {
width: 100%;
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 24px;
}

#sales-engagement-impact .salesimpact-result-stats > div {
padding: 12px 8px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 13px;
background: rgba(255, 255, 255, 0.76);
}

#sales-engagement-impact .salesimpact-result-stats strong,
#sales-engagement-impact .salesimpact-result-stats span {
display: block;
}

#sales-engagement-impact .salesimpact-result-stats strong {
color: #079455;
font-size: 13px;
font-weight: 850;
}

#sales-engagement-impact .salesimpact-result-stats span {
margin-top: 4px;
color: #667085;
font-size: 9px;
line-height: 1.35;
}

/* education page css  */
/* EDUCATION SOLUTIONS SECTION */

#education-communication-solutions,
#education-communication-solutions *,
#education-communication-solutions *::before,
#education-communication-solutions *::after {
box-sizing: border-box;
}

#education-communication-solutions {
position: relative;
padding: 88px 0;
overflow: hidden;
background:
  radial-gradient(
    circle at 7% 12%,
    rgba(18, 183, 106, 0.06),
    transparent 27%
  ),
  radial-gradient(
    circle at 94% 88%,
    rgba(59, 130, 246, 0.06),
    transparent 27%
  ),
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8fcfa 100%
  );
}

#education-communication-solutions .eduflow-header {
max-width: 780px;
margin: 0 auto 42px;
text-align: center;
}

#education-communication-solutions .eduflow-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: #f4fcf7;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#education-communication-solutions .eduflow-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow:
  0 0 0 5px rgba(18, 183, 106, 0.11);
}

#education-communication-solutions .eduflow-header h2 {
/* max-width: 700px; */
margin: 17px auto 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(34px, 4.2vw, 41px);
font-weight: 860;
line-height: 1.3;
letter-spacing: -0.045em;
text-wrap: balance;
}

#education-communication-solutions .eduflow-header h2 span {
color: #079455;
}

#education-communication-solutions .eduflow-header p {
max-width: 640px;
margin: 16px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}


#education-communication-solutions .eduflow-grid {
display: grid;
grid-template-columns:
  repeat(3, minmax(0, 1fr));
align-items: stretch;
gap: 18px;
}


#education-communication-solutions .eduflow-card {
position: relative;
min-width: 0;
min-height: 300px;
display: flex;
flex-direction: column;
padding: 24px;
overflow: hidden;
border: 1px solid #e4e7ec;
border-radius: 22px;
background: #ffffff;
box-shadow:
  0 22px 48px -40px rgba(16, 24, 40, 0.45);
transition:
  transform 0.25s ease,
  border-color 0.25s ease,
  box-shadow 0.25s ease;
}

#education-communication-solutions .eduflow-card:hover {
transform: translateY(-5px);
border-color: rgba(18, 183, 106, 0.22);
box-shadow:
  0 30px 58px -42px rgba(16, 24, 40, 0.52);
}

#education-communication-solutions .eduflow-card-green {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f4fcf7 100%
  );
}

#education-communication-solutions .eduflow-card-blue {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f5f9ff 100%
  );
}

#education-communication-solutions .eduflow-card-purple {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f8f6ff 100%
  );
}

#education-communication-solutions .eduflow-card-cyan {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #f3fbfc 100%
  );
}

#education-communication-solutions .eduflow-card-orange {
background:
  linear-gradient(
    180deg,
    #ffffff 0%,
    #fffaf3 100%
  );
}

#education-communication-solutions .eduflow-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
}

#education-communication-solutions .eduflow-card-icon {
width: 48px;
height: 48px;
flex: 0 0 48px;
display: grid;
place-items: center;
border-radius: 15px;
}

#education-communication-solutions
.eduflow-card-green
.eduflow-card-icon {
background: #d1fadf;
color: #08783e;
}

#education-communication-solutions
.eduflow-card-blue
.eduflow-card-icon {
background: #dbeafe;
color: #2563eb;
}

#education-communication-solutions
.eduflow-card-purple
.eduflow-card-icon {
background: #f4f3ff;
color: #6938ef;
}

#education-communication-solutions
.eduflow-card-cyan
.eduflow-card-icon {
background: #e6f9fb;
color: #0891b2;
}

#education-communication-solutions
.eduflow-card-orange
.eduflow-card-icon {
background: #fff0d5;
color: #d97706;
}

#education-communication-solutions .eduflow-card-icon svg {
width: 21px;
height: 21px;
}

#education-communication-solutions .eduflow-card-number {
min-width: 34px;
min-height: 28px;
display: grid;
place-items: center;
padding: 5px 9px;
border: 1px solid rgba(16, 24, 40, 0.06);
border-radius: 8px;
background: rgba(255, 255, 255, 0.85);
color: #667085;
font-size: 9px;
font-weight: 850;
}

#education-communication-solutions .eduflow-card h3 {
margin: 24px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: 20px;
font-weight: 830;
line-height: 1.3;
letter-spacing: -0.025em;
}

#education-communication-solutions .eduflow-card p {
margin: 10px 0 0;
color: #667085;
font-size: 13px;
line-height: 1.65;
}

#education-communication-solutions .eduflow-card-label {
min-height: 38px;
display: inline-flex;
align-items: center;
align-self: flex-start;
margin-top: auto;
padding: 9px 12px;
border-radius: 11px;
font-size: 10px;
font-weight: 820;
}

#education-communication-solutions
.eduflow-card-green
.eduflow-card-label {
background: #ecfdf3;
color: #08783e;
}

#education-communication-solutions
.eduflow-card-blue
.eduflow-card-label {
background: #eff6ff;
color: #2563eb;
}

#education-communication-solutions
.eduflow-card-purple
.eduflow-card-label {
background: #f4f3ff;
color: #6938ef;
}

#education-communication-solutions
.eduflow-card-cyan
.eduflow-card-label {
background: #ecfeff;
color: #0e7490;
}

#education-communication-solutions
.eduflow-card-orange
.eduflow-card-label {
background: #fff7ed;
color: #c2410c;
}

/* EDUCATION COMMUNICATION MESSAGE SECTION */

#education-communication-message,
#education-communication-message *,
#education-communication-message *::before,
#education-communication-message *::after {
box-sizing: border-box;
}

#education-communication-message {
padding: 34px 0 42px;
background: #ffffff;
}

#education-communication-message .edumessage-panel {
display: grid;
grid-template-columns:auto minmax(0, 1fr);
align-items: center;
gap: 26px;
padding: 30px 32px;
border: 1px solid #dbece4;
border-radius: 24px;
background:
  linear-gradient(
    135deg,
    #f4fcf7 0%,
    #f4f9ff 100%
  );
box-shadow:
  0 24px 55px -45px rgba(16, 24, 40, 0.38);
}

#education-communication-message .edumessage-icon {
width: 66px;
height: 66px;
flex: 0 0 66px;
display: grid;
place-items: center;
border-radius: 20px;
background:
  linear-gradient(
    145deg,
    #12b76a,
    #079455
  );
color: #ffffff;
box-shadow:
  0 18px 32px -22px rgba(7, 148, 85, 0.65);
}

#education-communication-message .edumessage-icon svg {
width: 28px;
height: 28px;
}

#education-communication-message .edumessage-content {
min-width: 0;
}

#education-communication-message .edumessage-label {
display: inline-flex;
align-items: center;
min-height: 31px;
padding: 7px 11px;
border-radius: 999px;
background: #ecfdf3;
color: #08783e;
font-size: 9px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#education-communication-message .edumessage-content h2 {
max-width: 650px;
margin: 13px 0 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(27px, 3.1vw, 35px);
font-weight: 850;
line-height: 1.12;
letter-spacing: -0.04em;
text-wrap: balance;
}

#education-communication-message .edumessage-content h2 span {
color: #079455;
}

#education-communication-message .edumessage-content p {
max-width: 620px;
margin: 12px 0 0;
color: #667085;
font-size: 14px;
line-height: 1.65;
}

#education-communication-message .edumessage-highlights {
display: grid;
gap: 11px;
}

#education-communication-message .edumessage-highlight {
display: flex;
align-items: flex-start;
gap: 11px;
padding: 13px;
border: 1px solid rgba(16, 24, 40, 0.065);
border-radius: 15px;
background: rgba(255, 255, 255, 0.78);
}

#education-communication-message .edumessage-highlight > span {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
border-radius: 10px;
background: #d1fadf;
color: #08783e;
font-size: 11px;
font-weight: 900;
}

#education-communication-message .edumessage-highlight strong,
#education-communication-message .edumessage-highlight small {
display: block;
}

#education-communication-message .edumessage-highlight strong {
color: #344054;
font-size: 12px;
font-weight: 830;
}

#education-communication-message .edumessage-highlight small {
margin-top: 4px;
color: #667085;
font-size: 10px;
line-height: 1.45;
}

/*  EDUCATION GROWTH JOURNEY */

#education-growth-journey,
#education-growth-journey *,
#education-growth-journey *::before,
#education-growth-journey *::after {
box-sizing: border-box;
}

#education-growth-journey {
position: relative;
padding: 92px 0;
overflow: hidden;
background: #ffffff;
}

#education-growth-journey .edugrowth-header {
margin: 0 auto 52px;
text-align: center;
}

#education-growth-journey .edugrowth-eyebrow {
min-height: 38px;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 15px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: #f4fcf7;
color: #08783e;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#education-growth-journey .edugrowth-eyebrow > span {
width: 8px;
height: 8px;
flex: 0 0 8px;
border-radius: 50%;
background: #12b76a;
box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.11);
}

#education-growth-journey .edugrowth-header h2 {
margin: 18px auto 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(35px, 4.2vw, 41px);
font-weight: 860;
line-height: 1.08;
letter-spacing: -0.045em;
text-wrap: balance;
}

#education-growth-journey .edugrowth-header h2 span {
color: #079455;
}

#education-growth-journey .edugrowth-header p {
max-width: 700px;
margin: 16px auto 0;
color: #667085;
font-size: 15px;
line-height: 1.7;
}


#education-growth-journey .edugrowth-list {
position: relative;
display: grid;
gap: 28px;
}

#education-growth-journey .edugrowth-item {
display: grid;
grid-template-columns:
  minmax(0, 0.92fr)
  minmax(440px, 1.08fr);
align-items: center;
gap: 42px;
padding: 34px;
border: 1px solid #e3ece8;
border-radius: 30px;
background:
  linear-gradient(
    145deg,
    #ffffff 0%,
    #f8fcfa 100%
  );
box-shadow:
  0 34px 72px -58px rgba(16, 24, 40, 0.48);
}

#education-growth-journey .edugrowth-item-two {
grid-template-columns:
  minmax(440px, 1.08fr)
  minmax(0, 0.92fr);
background:
  linear-gradient(
    145deg,
    #f7fbff 0%,
    #ffffff 100%
  );
}

#education-growth-journey .edugrowth-item-two .edugrowth-content {
grid-column: 2;
grid-row: 1;
}

#education-growth-journey .edugrowth-item-two .edugrowth-visual {
grid-column: 1;
grid-row: 1;
}

#education-growth-journey .edugrowth-item-three {
background:
  linear-gradient(
    145deg,
    #ffffff 0%,
    #faf8ff 100%
  );
}

#education-growth-journey .edugrowth-content {
min-width: 0;
}

#education-growth-journey .edugrowth-number {
width: 42px;
height: 42px;
display: grid;
place-items: center;
margin-bottom: 17px;
border-radius: 13px;
background: #d1fadf;
color: #08783e;
font-size: 11px;
font-weight: 850;
}

#education-growth-journey
.edugrowth-item-two
.edugrowth-number {
background: #dbeafe;
color: #2563eb;
}

#education-growth-journey
.edugrowth-item-three
.edugrowth-number {
background: #f4f3ff;
color: #6938ef;
}

#education-growth-journey .edugrowth-label {
display: block;
margin-bottom: 10px;
color: #079455;
font-size: 10px;
font-weight: 850;
letter-spacing: 0.08em;
text-transform: uppercase;
}

#education-growth-journey
.edugrowth-item-two
.edugrowth-label {
color: #2563eb;
}

#education-growth-journey
.edugrowth-item-three
.edugrowth-label {
color: #6938ef;
}

#education-growth-journey .edugrowth-content h3 {
max-width: 570px;
margin: 0;
color: #101828;
font-family: var(--font-display);
font-size: clamp(25px, 3vw, 28px);
font-weight: 850;
line-height: 1.13;
letter-spacing: -0.04em;
text-wrap: balance;
}

#education-growth-journey .edugrowth-content > p {
max-width: 580px;
margin: 15px 0 0;
color: #667085;
font-size: 14px;
line-height: 1.75;
}

#education-growth-journey .edugrowth-points {
display: grid;
gap: 11px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}

#education-growth-journey .edugrowth-points li {
display: flex;
align-items: flex-start;
gap: 10px;
color: #344054;
font-size: 13px;
font-weight: 720;
line-height: 1.55;
}

#education-growth-journey .edugrowth-points li > span {
width: 25px;
height: 25px;
flex: 0 0 25px;
display: grid;
place-items: center;
border-radius: 8px;
background: #d1fadf;
color: #08783e;
font-size: 9px;
font-weight: 900;
}

#education-growth-journey
.edugrowth-item-two
.edugrowth-points
li
> span {
background: #dbeafe;
color: #2563eb;
}

#education-growth-journey
.edugrowth-item-three
.edugrowth-points
li
> span {
background: #f4f3ff;
color: #6938ef;
}

#education-growth-journey .edugrowth-visual {
min-width: 0;
}

#education-growth-journey .edugrowth-image-card {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid #dfe9e4;
border-radius: 26px;
background:
  radial-gradient(
    circle at 50% 45%,
    rgba(18, 183, 106, 0.10),
    transparent 34%
  ),
  #ffffff;
box-shadow:
  0 26px 52px -42px rgba(16, 24, 40, 0.43);
}

#education-growth-journey
.edugrowth-item-two
.edugrowth-image-card {
background:
  radial-gradient(
    circle at 50% 45%,
    rgba(59, 130, 246, 0.10),
    transparent 34%
  ),
  #ffffff;
}

#education-growth-journey
.edugrowth-item-three
.edugrowth-image-card {
background:
  radial-gradient(
    circle at 50% 45%,
    rgba(127, 86, 217, 0.09),
    transparent 34%
  ),
  #ffffff;
}

#education-growth-journey .edugrowth-image-card img {
width: 100%;
height: 340px;
display: block;
object-fit: cover;
object-position: center;
}

#education-growth-journey .edugrowth-image-status {
position: absolute;
top: 17px;
left: 17px;
z-index: 2;
min-height: 31px;
display: inline-flex;
align-items: center;
padding: 7px 11px;
border: 1px solid rgba(18, 183, 106, 0.15);
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
color: #08783e;
font-size: 9px;
font-weight: 850;
box-shadow:
  0 15px 24px -21px rgba(16, 24, 40, 0.4);
}

#education-growth-journey
.edugrowth-item-two
.edugrowth-image-status {
border-color: rgba(59, 130, 246, 0.16);
color: #2563eb;
}

#education-growth-journey
.edugrowth-item-three
.edugrowth-image-status {
border-color: rgba(127, 86, 217, 0.16);
color: #6938ef;
}

#education-growth-journey .edugrowth-image-note {
position: absolute;
right: 17px;
bottom: 17px;
z-index: 2;
min-width: 190px;
padding: 12px 14px;
border: 1px solid rgba(16, 24, 40, 0.07);
border-radius: 14px;
background: rgba(255, 255, 255, 0.94);
box-shadow:
  0 20px 35px -27px rgba(16, 24, 40, 0.42);
}

#education-growth-journey .edugrowth-image-note strong,
#education-growth-journey .edugrowth-image-note span {
display: block;
}

#education-growth-journey .edugrowth-image-note strong {
color: #344054;
font-size: 11px;
font-weight: 840;
}

#education-growth-journey .edugrowth-image-note span {
margin-top: 4px;
color: #98a2b3;
font-size: 9px;
}

/* Ecommerce Page CSS  */
/* Ecommerce Benefits Section */

.wmecom-benefits {
  position: relative;
  padding: 82px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbf9 100%);
}

.wmecom-benefits::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -170px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(18, 183, 106, 0.07);
  filter: blur(70px);
  pointer-events: none;
}

.wmecom-benefits::after {
  content: "";
  position: absolute;
  right: -190px;
  bottom: -200px;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: rgba(247, 144, 9, 0.055);
  filter: blur(80px);
  pointer-events: none;
}

.wmecom-benefits .wrap {
  position: relative;
  z-index: 1;
}

.wmecom-benefits-head {
  margin: 0 auto 40px;
  text-align: center;
}

.wmecom-benefits-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 31px;
  padding: 0 12px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.wmecom-benefits-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.11);
}

.wmecom-benefits-head h2 {
  margin: 17px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 41px);
  font-weight: 820;
  line-height: 1.06;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.wmecom-benefits-head h2 span {
  color: var(--green-600);
}

.wmecom-benefits-head p {
  max-width: 650px;
  margin: 15px auto 0;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.7;
  text-wrap: pretty;
}

.wmecom-benefits-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 18px;
  border: 1px solid rgba(18, 183, 106, 0.12);
  border-radius: 27px;
  background: radial-gradient(circle at 10% 10%, rgba(18, 183, 106, 0.07), transparent 28%), linear-gradient(145deg, rgba(236, 253, 243, 0.7), rgba(249, 250, 251, 0.94));
  box-shadow: 0 28px 65px -48px rgba(16, 24, 40, 0.5);
}

.wmecom-benefit-card {
  --benefit-accent: var(--green-600);
  --benefit-rgb: 3, 152, 85;
  position: relative;
  min-width: 0;
  min-height: 178px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 22px 54px 22px 20px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.075);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 35px -30px rgba(16, 24, 40, 0.48);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.wmecom-benefit-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  border-radius: 0 0 0 100%;
  background: rgba(var(--benefit-rgb), 0.055);
  pointer-events: none;
}

.wmecom-benefit-card::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--benefit-accent);
  opacity: 0;
  transform: scaleY(0.4);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.wmecom-benefit-card:hover {
  border-color: rgba(var(--benefit-rgb), 0.24);
  box-shadow: 0 25px 45px -32px rgba(var(--benefit-rgb), 0.42);
  transform: translateY(-4px);
}

.wmecom-benefit-card:hover::after {
  opacity: 1;
  transform: scaleY(1);
}

.wmecom-benefit-icon {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(var(--benefit-rgb), 0.1);
  color: var(--benefit-accent);
  transition: transform 0.25s ease, background 0.25s ease;
}

.wmecom-benefit-card:hover .wmecom-benefit-icon {
  background: rgba(var(--benefit-rgb), 0.15);
  transform: scale(1.05);
}

.wmecom-benefit-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wmecom-benefit-copy {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.wmecom-benefit-label {
  display: block;
  margin-bottom: 5px;
  color: var(--benefit-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.wmecom-benefit-copy h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 780;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.wmecom-benefit-copy p {
  max-width: 470px;
  margin: 8px 0 0;
  color: var(--ink-500);
  font-size: 12.5px;
  line-height: 1.62;
}

.wmecom-benefit-number {
  position: absolute;
  top: 16px;
  right: 17px;
  z-index: 1;
  color: rgba(var(--benefit-rgb), 0.33);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.wmecom-benefit-green {
  --benefit-accent: #039855;
  --benefit-rgb: 3, 152, 85;
}

.wmecom-benefit-blue {
  --benefit-accent: #3b82f6;
  --benefit-rgb: 59, 130, 246;
}

.wmecom-benefit-teal {
  --benefit-accent: #0f9f85;
  --benefit-rgb: 15, 159, 133;
}

.wmecom-benefit-violet {
  --benefit-accent: #7c3aed;
  --benefit-rgb: 124, 58, 237;
}

.wmecom-benefit-amber {
  --benefit-accent: #d97706;
  --benefit-rgb: 217, 119, 6;
}

.wmecom-benefit-orange {
  --benefit-accent: #ea580c;
  --benefit-rgb: 234, 88, 12;
}


/* Whatsapp ChatBot Page CSS  */

/* Chatbot Automation Section */

.wmcb-flow-section,
.wmcb-flow-section * {
  box-sizing: border-box;
}

.wmcb-flow-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 10% 15%, rgba(18, 183, 106, .08), transparent 25%),
      radial-gradient(circle at 90% 80%, rgba(59, 130, 246, .06), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.wmcb-flow-head {
  max-width: 720px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmcb-flow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmcb-flow-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .11);
}

.wmcb-flow-head h2 {
  margin: 17px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px, 4.5vw, 41px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmcb-flow-head h2 span {
  color: var(--green-600);
}

.wmcb-flow-head p {
  max-width: 590px;
  margin: 15px auto 0;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.65;
}

.wmcb-flow-shell {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 34px 28px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 28px;
  background:
      linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(248, 251, 250, .9));
  box-shadow:
      0 30px 65px -48px rgba(16, 24, 40, .52),
      inset 0 1px 0 rgba(255, 255, 255, .9);
}

.wmcb-flow-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
      radial-gradient(rgba(16, 24, 40, .05) .7px, transparent .7px);
  background-size: 22px 22px;
  opacity: .16;
}

.wmcb-flow-track {
  position: absolute;
  top: 70px;
  left: 17%;
  right: 17%;
  height: 2px;
  background:
      linear-gradient(
          90deg,
          rgba(18, 183, 106, .1),
          rgba(18, 183, 106, .45),
          rgba(59, 130, 246, .4),
          rgba(124, 58, 237, .35),
          rgba(124, 58, 237, .08)
      );
}

.wmcb-flow-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 22px 20px 20px;
  border: 1px solid rgba(18, 183, 106, .13);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 18px 38px -32px rgba(16, 24, 40, .5);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.wmcb-flow-item:hover {
  transform: translateY(-5px);
  border-color: rgba(18, 183, 106, .3);
  box-shadow: 0 26px 45px -32px rgba(3, 152, 85, .3);
}

.wmcb-flow-item-blue {
  border-color: rgba(59, 130, 246, .14);
}

.wmcb-flow-item-blue:hover {
  border-color: rgba(59, 130, 246, .3);
  box-shadow: 0 26px 45px -32px rgba(59, 130, 246, .28);
}

.wmcb-flow-item-violet {
  border-color: rgba(124, 58, 237, .13);
}

.wmcb-flow-item-violet:hover {
  border-color: rgba(124, 58, 237, .27);
  box-shadow: 0 26px 45px -32px rgba(124, 58, 237, .25);
}

.wmcb-flow-icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 8px solid #ffffff;
  border-radius: 20px;
  background: linear-gradient(145deg, var(--green-50), var(--green-100));
  color: var(--green-700);
  box-shadow: 0 13px 28px -20px rgba(3, 152, 85, .65);
}

.wmcb-flow-item-blue .wmcb-flow-icon {
  background: linear-gradient(145deg, #f4f8ff, #dbeafe);
  color: #2563eb;
}

.wmcb-flow-item-violet .wmcb-flow-icon {
  background: linear-gradient(145deg, #faf8ff, #ede9fe);
  color: #7c3aed;
}

.wmcb-flow-icon svg {
  width: 27px;
  height: 27px;
}

.wmcb-flow-number {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 8px;
  background: var(--ink-50);
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
}

.wmcb-flow-item h3 {
  margin-top: 13px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.wmcb-flow-item p {
  margin-top: 8px;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.6;
}

.wmcb-flow-tag {
  display: inline-flex;
  align-items: center;
  margin-top: 17px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.wmcb-flow-item-blue .wmcb-flow-tag {
  background: #eff6ff;
  color: #2563eb;
}

.wmcb-flow-item-violet .wmcb-flow-tag {
  background: #f5f3ff;
  color: #7c3aed;
}


/* Chatbot Customer Journey Section */

.wmcj-section,
.wmcj-section * {
  box-sizing: border-box;
}

.wmcj-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 8% 15%, rgba(18, 183, 106, .07), transparent 25%),
      radial-gradient(circle at 93% 82%, rgba(124, 58, 237, .055), transparent 25%),
      #ffffff;
}

.wmcj-head {
  max-width: 760px;
  margin: 0 auto 44px;
  text-align: center;
}

.wmcj-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmcj-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .11);
}

.wmcj-head h2 {
  margin: 18px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 41px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmcj-head h2 span {
  color: var(--green-600);
}

.wmcj-head p {
  max-width: 640px;
  margin: 16px auto 0;
  color: var(--ink-500);
  font-size: 15.5px;
  line-height: 1.7;
}

.wmcj-shell {
  position: relative;
  display: grid;
  gap: 13px;
  max-width: 990px;
  margin: 0 auto;
  padding: 22px;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 28px;
  background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(248, 251, 250, .92));
  box-shadow: 0 32px 68px -50px rgba(16, 24, 40, .5);
}

.wmcj-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: radial-gradient(rgba(16, 24, 40, .05) .7px, transparent .7px);
  background-size: 22px 22px;
  opacity: .13;
}

.wmcj-progress-line {
  position: absolute;
  z-index: 0;
  top: 56px;
  bottom: 56px;
  left: 61px;
  width: 2px;
  background: linear-gradient(
      180deg,
      var(--green-400),
      #3b82f6,
      #f79009,
      #7c3aed
  );
  opacity: .5;
}

.wmcj-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 48px 62px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
  padding: 19px 21px;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 19px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 15px 32px -29px rgba(16, 24, 40, .5);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wmcj-stage:hover {
  transform: translateX(4px);
  box-shadow: 0 21px 40px -30px rgba(16, 24, 40, .4);
}

.wmcj-stage-green:hover {
  border-color: rgba(18, 183, 106, .28);
}

.wmcj-stage-blue:hover {
  border-color: rgba(59, 130, 246, .26);
}

.wmcj-stage-amber:hover {
  border-color: rgba(247, 144, 9, .27);
}

.wmcj-stage-violet:hover {
  border-color: rgba(124, 58, 237, .24);
}

.wmcj-stage-marker {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 6px solid #ffffff;
  border-radius: 50%;
  background: var(--green-600);
  color: #ffffff;
  box-shadow: 0 9px 20px -13px rgba(3, 152, 85, .75);
}

.wmcj-stage-blue .wmcj-stage-marker {
  background: #3b82f6;
}

.wmcj-stage-amber .wmcj-stage-marker {
  background: #f79009;
}

.wmcj-stage-violet .wmcj-stage-marker {
  background: #7c3aed;
}

.wmcj-stage-marker span {
  font-size: 9px;
  font-weight: 800;
}

.wmcj-stage-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmcj-stage-blue .wmcj-stage-icon {
  background: #eff6ff;
  color: #2563eb;
}

.wmcj-stage-amber .wmcj-stage-icon {
  background: #fff7e8;
  color: #d97706;
}

.wmcj-stage-violet .wmcj-stage-icon {
  background: #f5f3ff;
  color: #7c3aed;
}

.wmcj-stage-icon svg {
  width: 27px;
  height: 27px;
}

.wmcj-stage-copy {
  min-width: 0;
}

.wmcj-stage-label {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmcj-stage-blue .wmcj-stage-label {
  color: #2563eb;
}

.wmcj-stage-amber .wmcj-stage-label {
  color: #d97706;
}

.wmcj-stage-violet .wmcj-stage-label {
  color: #7c3aed;
}

.wmcj-stage-copy h3 {
  margin-top: 5px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.wmcj-stage-copy p {
  margin-top: 6px;
  color: var(--ink-500);
  font-size: 12.5px;
  line-height: 1.6;
}

.wmcj-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.wmcj-tags span {
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--ink-50);
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 700;
}

.wmcj-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 990px;
  margin: 16px auto 0;
}

.wmcj-bottom-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 32px -28px rgba(16, 24, 40, .48);
}

.wmcj-bottom-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmcj-bottom-icon svg {
  width: 23px;
  height: 23px;
}

.wmcj-bottom-card span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmcj-bottom-card h3 {
  margin-top: 5px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.wmcj-bottom-card p {
  margin-top: 5px;
  color: var(--ink-500);
  font-size: 11px;
  line-height: 1.55;
}



/* Chatbot Comparison Section */

.wmcompare-section,
.wmcompare-section * {
  box-sizing: border-box;
}

.wmcompare-section {
  position: relative;
  padding: 84px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 8% 18%, rgba(18, 183, 106, .07), transparent 25%),
      radial-gradient(circle at 92% 80%, rgba(59, 130, 246, .055), transparent 24%),
      #ffffff;
}

.wmcompare-head {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.wmcompare-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmcompare-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .11);
}

.wmcompare-head h2 {
  margin: 16px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 41px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmcompare-head h2 span {
  color: var(--green-600);
}

.wmcompare-head p {
  max-width: 600px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.65;
}

.wmcompare-shell {
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 28px;
  background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 251, 249, .95));
  box-shadow: 0 30px 64px -48px rgba(16, 24, 40, .5);
}

.wmcompare-labels {
  display: grid;
  grid-template-columns: 1.35fr .8fr .9fr;
  gap: 12px;
  padding: 0 14px 12px;
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmcompare-brand-label {
  color: var(--green-700);
}

.wmcompare-row {
  display: grid;
  grid-template-columns: 1.35fr .8fr .9fr;
  gap: 12px;
  align-items: stretch;
  margin-top: 10px;
}

.wmcompare-feature,
.wmcompare-basic,
.wmcompare-mark {
  min-width: 0;
  border-radius: 17px;
}

.wmcompare-feature {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  padding: 15px;
  border: 1px solid rgba(16, 24, 40, .07);
  background: rgba(255, 255, 255, .94);
}

.wmcompare-feature-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmcompare-feature-icon svg {
  width: 22px;
  height: 22px;
}

.wmcompare-feature strong,
.wmcompare-feature span,
.wmcompare-basic strong,
.wmcompare-basic small,
.wmcompare-mark strong,
.wmcompare-mark small {
  display: block;
}

.wmcompare-feature strong {
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 800;
}

.wmcompare-feature span {
  margin-top: 3px;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.45;
}

.wmcompare-basic,
.wmcompare-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
}

.wmcompare-basic {
  border: 1px solid rgba(244, 63, 94, .10);
  background: rgba(255, 247, 247, .78);
}

.wmcompare-mark {
  border: 1px solid rgba(18, 183, 106, .15);
  background: linear-gradient(145deg, rgba(236, 253, 243, .95), rgba(248, 255, 251, .98));
  box-shadow: inset 3px 0 0 var(--green-500);
}

.wmcompare-status {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 900;
}

.wmcompare-status-no {
  background: #fff1f2;
  color: #e11d48;
}

.wmcompare-status-yes {
  background: var(--green-100);
  color: var(--green-700);
}

.wmcompare-basic strong,
.wmcompare-mark strong {
  color: var(--ink-800);
  font-size: 11.5px;
  font-weight: 800;
}

.wmcompare-basic small,
.wmcompare-mark small {
  margin-top: 2px;
  color: var(--ink-400);
  font-size: 9px;
  line-height: 1.4;
}

.wmcompare-row:hover .wmcompare-feature {
  border-color: rgba(18, 183, 106, .17);
}

.wmcompare-row:hover .wmcompare-mark {
  border-color: rgba(18, 183, 106, .3);
  box-shadow:
      inset 3px 0 0 var(--green-500),
      0 14px 30px -26px rgba(3, 152, 85, .35);
}


/* Whatsapp Business API CSS */

/* WhatsApp Business API Intro Section */

.wmapi-intro-section,
.wmapi-intro-section * {
  box-sizing: border-box;
}

.wmapi-intro-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 8% 12%, rgba(18, 183, 106, .07), transparent 24%),
      radial-gradient(circle at 94% 85%, rgba(59, 130, 246, .055), transparent 25%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.wmapi-intro-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmapi-intro-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmapi-intro-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .11);
}

.wmapi-intro-head h2 {
  margin: 17px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px, 4.5vw, 41px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.045em;
}

.wmapi-intro-head h2 span {
  color: var(--green-600);
}

.wmapi-intro-head p {
  max-width: 640px;
  margin: 15px auto 0;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.65;
}

.wmapi-intro-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 46px;
  align-items: center;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 28px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 32px 68px -50px rgba(16, 24, 40, .5);
}

.wmapi-intro-visual {
  position: relative;
  min-height: 390px;
  overflow: hidden;
  border: 1px solid rgba(18, 183, 106, .12);
  border-radius: 22px;
  background: #edf8f3;
}

.wmapi-intro-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(16, 24, 40, .14));
}

.wmapi-intro-visual img {
  width: 100%;
  height: 100%;
  min-height: 390px;
  display: block;
  object-fit: cover;
}

.wmapi-intro-status {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(18, 183, 106, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  backdrop-filter: blur(8px);
}

.wmapi-intro-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .11);
}

.wmapi-intro-float {
  position: absolute;
  z-index: 2;
  right: 16px;
  bottom: 16px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  max-width: 255px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 14px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px -24px rgba(16, 24, 40, .5);
  backdrop-filter: blur(10px);
}

.wmapi-intro-float-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmapi-intro-float-icon svg {
  width: 20px;
  height: 20px;
}

.wmapi-intro-float strong,
.wmapi-intro-float span {
  display: block;
}

.wmapi-intro-float strong {
  color: var(--ink-900);
  font-size: 10.5px;
  font-weight: 800;
}

.wmapi-intro-float span {
  margin-top: 2px;
  color: var(--ink-400);
  font-size: 9px;
  line-height: 1.4;
}

.wmapi-intro-content {
  min-width: 0;
  padding-right: 10px;
}

.wmapi-intro-label {
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmapi-intro-content h3 {
  max-width: 510px;
  margin-top: 10px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.wmapi-intro-content > p {
  max-width: 530px;
  margin-top: 15px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.7;
}

.wmapi-intro-points {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.wmapi-intro-point {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 11px 12px;
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 13px;
  background: #ffffff;
}

.wmapi-intro-point > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 900;
}

.wmapi-intro-point strong,
.wmapi-intro-point small {
  display: block;
}

.wmapi-intro-point strong {
  color: var(--ink-800);
  font-size: 11.5px;
  font-weight: 800;
}

.wmapi-intro-point small {
  margin-top: 3px;
  color: var(--ink-400);
  font-size: 9.5px;
  line-height: 1.45;
}

/* WhatsApp API Teams Section */

.wmapiroles-section,
.wmapiroles-section * {
  box-sizing: border-box;
}

.wmapiroles-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 5% 5%, rgba(18, 183, 106, .07), transparent 24%),
      radial-gradient(circle at 95% 95%, rgba(59, 130, 246, .055), transparent 24%),
      #ffffff;
}

.wmapiroles-heading {
  /* max-width: 720px; */
  margin: 0 auto 40px;
  text-align: center;
}

.wmapiroles-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmapiroles-kicker i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmapiroles-heading h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap-style: balance;
}

.wmapiroles-heading h2 span {
  color: var(--green-600);
}

.wmapiroles-heading p {
  max-width: 600px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.65;
}

.wmapiroles-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 30px 65px -48px rgba(16, 24, 40, .48);
}

.wmapiroles-item {
  position: relative;
  min-width: 0;
  min-height: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  transition: background .25s ease;
}

.wmapiroles-item + .wmapiroles-item {
  border-left: 1px solid rgba(16, 24, 40, .075);
}

.wmapiroles-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 28px;
  right: 28px;
  height: 3px;
  border-radius: 0 0 3px 3px;
}

.wmapiroles-support::before {
  background: var(--green-500);
}

.wmapiroles-sales::before {
  background: #3b82f6;
}

.wmapiroles-marketing::before {
  background: #7c3aed;
}

.wmapiroles-support:hover {
  background: linear-gradient(180deg, rgba(236, 253, 243, .46), #ffffff 50%);
}

.wmapiroles-sales:hover {
  background: linear-gradient(180deg, rgba(239, 246, 255, .7), #ffffff 50%);
}

.wmapiroles-marketing:hover {
  background: linear-gradient(180deg, rgba(245, 243, 255, .7), #ffffff 50%);
}

.wmapiroles-item-head {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.wmapiroles-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmapiroles-sales .wmapiroles-icon {
  background: #eff6ff;
  color: #2563eb;
}

.wmapiroles-marketing .wmapiroles-icon {
  background: #f5f3ff;
  color: #7c3aed;
}

.wmapiroles-icon svg {
  width: 24px;
  height: 24px;
}

.wmapiroles-label {
  display: block;
  margin-bottom: 3px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmapiroles-sales .wmapiroles-label {
  color: #2563eb;
}

.wmapiroles-marketing .wmapiroles-label {
  color: #7c3aed;
}

.wmapiroles-item h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.wmapiroles-text {
  min-height: 64px;
  margin: 19px 0 0;
  color: var(--ink-500);
  font-size: 12.5px;
  line-height: 1.65;
}

.wmapiroles-features {
  display: grid;
  gap: 10px;
  margin-top: 21px;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 24, 40, .07);
}

.wmapiroles-features span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 650;
}

.wmapiroles-features i {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.wmapiroles-sales .wmapiroles-features i {
  background: #eff6ff;
  color: #2563eb;
}

.wmapiroles-marketing .wmapiroles-features i {
  background: #f5f3ff;
  color: #7c3aed;
}

/* Equal Button Alignment */

.wmapiroles-action {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 12px 18px;
  border: 1px solid var(--green-600);
  border-radius: 12px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 20px -14px rgba(18, 183, 106, .55);
  transition:
      transform .2s ease,
      box-shadow .2s ease,
      background .2s ease,
      border-color .2s ease;
}

.wmapiroles-features + .wmapiroles-action {
  margin-top: 24px;
}

.wmapiroles-action:hover {
  transform: translateY(-2px);
  background: var(--green-700);
  border-color: var(--green-700);
  box-shadow: 0 16px 28px -16px rgba(18, 183, 106, .6);
}

.wmapiroles-sales .wmapiroles-action {
  background: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 10px 20px -14px rgba(37, 99, 235, .55);
}

.wmapiroles-sales .wmapiroles-action:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 16px 28px -16px rgba(37, 99, 235, .6);
}

.wmapiroles-marketing .wmapiroles-action {
  background: #7c3aed;
  border-color: #7c3aed;
  box-shadow: 0 10px 20px -14px rgba(124, 58, 237, .5);
}

.wmapiroles-marketing .wmapiroles-action:hover {
  background: #6d28d9;
  border-color: #6d28d9;
  box-shadow: 0 16px 28px -16px rgba(124, 58, 237, .58);
}

.wmapiroles-action span {
  font-size: 14px;
  line-height: 1;
}


/* API metrics section */

.wmapimetrics-section,
.wmapimetrics-section * {
  box-sizing: border-box;
}

.wmapimetrics-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 8% 12%, rgba(18, 183, 106, .07), transparent 24%),
      radial-gradient(circle at 92% 88%, rgba(18, 183, 106, .045), transparent 25%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.wmapimetrics-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 34px;
  align-items: stretch;
  padding: 28px;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 28px;
  background:
      linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 252, 249, .96));
  box-shadow: 0 30px 70px -52px rgba(16, 24, 40, .5);
}

.wmapimetrics-copy {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 18px 12px 18px 6px;
}

.wmapimetrics-eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmapimetrics-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmapimetrics-copy h2 {
  max-width: 500px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(31px, 3.7vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.wmapimetrics-copy h2 span {
  color: var(--green-600);
}

.wmapimetrics-copy p {
  max-width: 470px;
  margin: 15px 0 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.68;
}

.wmapimetrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.wmapimetrics-card {
  position: relative;
  min-width: 0;
  min-height: 185px;
  padding: 19px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 18px;
  background: #ffffff;
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmapimetrics-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  top: -60px;
  right: -54px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .055);
  pointer-events: none;
}

.wmapimetrics-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 183, 106, .2);
  box-shadow: 0 24px 40px -32px rgba(16, 24, 40, .4);
}

.wmapimetrics-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmapimetrics-icon svg {
  width: 19px;
  height: 19px;
}

.wmapimetrics-value {
  margin-top: 18px;
  color: var(--green-700);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.035em;
}

.wmapimetrics-card h3 {
  margin: 8px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.wmapimetrics-card p {
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.55;
}



/* API comparison section */

.wmbapdiff-section,
.wmbapdiff-section * {
  box-sizing: border-box;
}

.wmbapdiff-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 7% 10%, rgba(18, 183, 106, .08), transparent 25%),
      radial-gradient(circle at 93% 90%, rgba(18, 183, 106, .04), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
}

.wmbapdiff-head {
  margin: 0 auto 40px;
  text-align: center;
}

.wmbapdiff-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmbapdiff-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .11);
}

.wmbapdiff-head h2 {
  max-width: 630px;
  margin: 16px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.3vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmbapdiff-head h2 span {
  color: var(--green-600);
}

.wmbapdiff-head p {
  max-width: 630px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.68;
}


/* Main Showcase */

.wmbapdiff-showcase {
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
      0 35px 75px -52px rgba(16, 24, 40, .48),
      0 12px 28px -26px rgba(16, 24, 40, .22);
}


/* Main Header */

.wmbapdiff-top {
  display: grid;
  grid-template-columns: .8fr 1.1fr 1.1fr;
  border-bottom: 1px solid rgba(16, 24, 40, .075);
}

.wmbapdiff-top-intro {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 23px;
  background: #f8faf9;
}

.wmbapdiff-top-intro span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmbapdiff-top-intro strong {
  max-width: 190px;
  margin-top: 7px;
  color: var(--ink-800);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}


/* Product Header */

.wmbapdiff-plan {
  position: relative;
  min-height: 158px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.wmbapdiff-plan + .wmbapdiff-plan {
  border-left: 1px solid rgba(16, 24, 40, .075);
}

.wmbapdiff-plan-primary {
  background:
      radial-gradient(circle at 90% 8%, rgba(18, 183, 106, .16), transparent 30%),
      linear-gradient(145deg, #ecfcf3 0%, #f8fffb 100%);
}

.wmbapdiff-plan-basic {
  background:
      radial-gradient(circle at 90% 8%, rgba(100, 116, 139, .08), transparent 30%),
      linear-gradient(145deg, #f8fafc 0%, #ffffff 100%);
}

.wmbapdiff-plan-top {
  position: absolute;
  top: 18px;
  left: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wmbapdiff-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 999px;
  background: rgba(255, 255, 255, .76);
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.wmbapdiff-plan-primary .wmbapdiff-plan-badge {
  border-color: rgba(18, 183, 106, .14);
  color: var(--green-700);
}

.wmbapdiff-plan-badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmbapdiff-plan-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 183, 106, .12);
  border-radius: 11px;
  background: rgba(255, 255, 255, .9);
  color: var(--green-700);
}

.wmbapdiff-plan-basic .wmbapdiff-plan-icon {
  border-color: rgba(16, 24, 40, .08);
  color: var(--ink-500);
}

.wmbapdiff-plan-icon svg {
  width: 18px;
  height: 18px;
}

.wmbapdiff-plan h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.wmbapdiff-plan p {
  margin: 5px 0 0;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.5;
}


/* Comparison Rows */

.wmbapdiff-line {
  display: grid;
  grid-template-columns: .8fr 1.1fr 1.1fr;
  min-height: 104px;
  border-bottom: 1px solid rgba(16, 24, 40, .065);
}

.wmbapdiff-feature {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 18px 22px;
  background: #fafcfb;
}

.wmbapdiff-feature-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 183, 106, .13);
  border-radius: 11px;
  background: #ffffff;
  color: var(--green-700);
  box-shadow: 0 10px 20px -18px rgba(16, 24, 40, .32);
}

.wmbapdiff-feature-icon svg {
  width: 18px;
  height: 18px;
}

.wmbapdiff-feature strong,
.wmbapdiff-feature span {
  display: block;
}

.wmbapdiff-feature strong {
  color: var(--ink-800);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
}

.wmbapdiff-feature span {
  margin-top: 3px;
  color: var(--ink-400);
  font-size: 9px;
  line-height: 1.4;
}


/* Result Cells */

.wmbapdiff-result {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 18px 22px;
  border-left: 1px solid rgba(16, 24, 40, .065);
}

.wmbapdiff-result-primary {
  background:
      linear-gradient(90deg, rgba(237, 252, 244, .72), rgba(255, 255, 255, .95));
}

.wmbapdiff-result-basic {
  background: #ffffff;
}

.wmbapdiff-result-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 11px;
  font-weight: 900;
}

.wmbapdiff-result-basic .wmbapdiff-result-icon {
  background: var(--ink-50);
  color: var(--ink-400);
}

.wmbapdiff-result strong,
.wmbapdiff-result p {
  display: block;
}

.wmbapdiff-result strong {
  color: var(--ink-800);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.4;
}

.wmbapdiff-result p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9.5px;
  line-height: 1.48;
}


/* Hover */

.wmbapdiff-line {
  transition: background .22s ease;
}

.wmbapdiff-line:hover {
  background: rgba(248, 251, 249, .85);
}

.wmbapdiff-line:hover .wmbapdiff-result-primary {
  background:
      linear-gradient(90deg, rgba(229, 249, 238, .9), rgba(250, 255, 252, .96));
}


/* Bottom CTA */

.wmbapdiff-bottom {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background:
      radial-gradient(circle at 5% 50%, rgba(18, 183, 106, .12), transparent 23%),
      linear-gradient(90deg, #eefbf4 0%, #f9fdfb 60%, #ffffff 100%);
}

.wmbapdiff-bottom-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18, 183, 106, .14);
  border-radius: 13px;
  background: #ffffff;
  color: var(--green-700);
  box-shadow: 0 12px 22px -18px rgba(16, 24, 40, .35);
}

.wmbapdiff-bottom-icon svg {
  width: 21px;
  height: 21px;
}

.wmbapdiff-bottom-copy span,
.wmbapdiff-bottom-copy strong {
  display: block;
}

.wmbapdiff-bottom-copy span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmbapdiff-bottom-copy strong {
  margin-top: 4px;
  color: var(--ink-900);
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.4;
}


/* CTA Button */

.wmbapdiff-button {
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid var(--green-600);
  border-radius: 11px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 13px 24px -17px rgba(18, 183, 106, .7);
  transition:
      transform .2s ease,
      background .2s ease,
      box-shadow .2s ease;
}

.wmbapdiff-button:hover {
  transform: translateY(-2px);
  background: var(--green-700);
  box-shadow: 0 18px 28px -17px rgba(18, 183, 106, .72);
}

.wmbapdiff-button > span {
  font-size: 14px;
}




/* API getting started section */

.wmstartflow-section,
.wmstartflow-section * {
  box-sizing: border-box;
}

.wmstartflow-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 9% 12%, rgba(18, 183, 106, .07), transparent 24%),
      radial-gradient(circle at 92% 88%, rgba(59, 130, 246, .045), transparent 23%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}

.wmstartflow-head {
  max-width: 750px;
  margin: 0 auto 44px;
  text-align: center;
}

.wmstartflow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmstartflow-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmstartflow-head h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.3vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmstartflow-head h2 span {
  color: var(--green-600);
}

.wmstartflow-head p {
  max-width: 620px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.68;
}

.wmstartflow-wrap {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
}

.wmstartflow-track {
  position: absolute;
  top: 35px;
  left: 15%;
  right: 15%;
  height: 2px;
  z-index: 0;
  background: rgba(18, 183, 106, .11);
}

.wmstartflow-track-fill {
  display: block;
  width: 100%;
  height: 100%;
  background:
      linear-gradient(90deg, var(--green-400), var(--green-600));
}

.wmstartflow-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 100%;
  padding: 22px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 26px 50px -42px rgba(16, 24, 40, .48);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmstartflow-step::after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  top: -72px;
  right: -62px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .06);
  pointer-events: none;
}

.wmstartflow-step-two::after {
  background: rgba(59, 130, 246, .055);
}

.wmstartflow-step-three::after {
  background: rgba(124, 58, 237, .05);
}

.wmstartflow-step:hover {
  transform: translateY(-5px);
  border-color: rgba(18, 183, 106, .2);
  box-shadow: 0 32px 60px -43px rgba(16, 24, 40, .44);
}

.wmstartflow-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wmstartflow-number {
  min-width: 44px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
}

.wmstartflow-step-two .wmstartflow-number {
  border-color: #dbeafe;
  background: #eff6ff;
  color: #2563eb;
}

.wmstartflow-step-three .wmstartflow-number {
  border-color: #ede9fe;
  background: #f5f3ff;
  color: #7c3aed;
}

.wmstartflow-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmstartflow-step-two .wmstartflow-icon {
  background: #eff6ff;
  color: #2563eb;
}

.wmstartflow-step-three .wmstartflow-icon {
  background: #f5f3ff;
  color: #7c3aed;
}

.wmstartflow-icon svg {
  width: 22px;
  height: 22px;
}

.wmstartflow-label {
  display: block;
  margin-top: 22px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmstartflow-step-two .wmstartflow-label {
  color: #2563eb;
}

.wmstartflow-step-three .wmstartflow-label {
  color: #7c3aed;
}

.wmstartflow-step h3 {
  margin: 7px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.wmstartflow-step > p {
  min-height: 62px;
  margin: 10px 0 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.62;
}

.wmstartflow-meta {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 24, 40, .065);
}

.wmstartflow-meta span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 650;
}

.wmstartflow-meta i {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}

.wmstartflow-step-two .wmstartflow-meta i {
  background: #eff6ff;
  color: #2563eb;
}

.wmstartflow-step-three .wmstartflow-meta i {
  background: #f5f3ff;
  color: #7c3aed;
}

.wmstartflow-bottom {
  max-width: 1160px;
  margin: 18px auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid rgba(18, 183, 106, .13);
  border-radius: 17px;
  background:
      radial-gradient(circle at 8% 50%, rgba(18, 183, 106, .09), transparent 23%),
      linear-gradient(90deg, #f1fcf6 0%, #ffffff 100%);
}

.wmstartflow-bottom-copy span,
.wmstartflow-bottom-copy strong {
  display: block;
}

.wmstartflow-bottom-copy span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmstartflow-bottom-copy strong {
  margin-top: 4px;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.wmstartflow-btn {
  flex: 0 0 auto;
  min-height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 17px;
  border: 1px solid var(--green-600);
  border-radius: 11px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 13px 24px -17px rgba(18, 183, 106, .7);
  transition:
      transform .2s ease,
      background .2s ease,
      box-shadow .2s ease;
}

.wmstartflow-btn:hover {
  transform: translateY(-2px);
  background: var(--green-700);
  box-shadow: 0 18px 28px -17px rgba(18, 183, 106, .72);
}

.wmstartflow-btn span {
  font-size: 14px;
}

/* API features showcase */

.wmjourney-section,
.wmjourney-section * {
  box-sizing: border-box;
}

.wmjourney-section {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 6% 7%, rgba(18, 183, 106, .07), transparent 23%),
      radial-gradient(circle at 95% 93%, rgba(59, 130, 246, .045), transparent 23%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}


/* Heading */

.wmjourney-head {
  max-width: 770px;
  margin: 0 auto 46px;
  text-align: center;
}

.wmjourney-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmjourney-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmjourney-head h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px, 4.4vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.044em;
  text-wrap: balance;
}

.wmjourney-head h2 span {
  color: var(--green-600);
}

.wmjourney-head p {
  max-width: 640px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.68;
}


/* Feature Stack */

.wmjourney-stack {
  display: grid;
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
}


/* Feature Panel */

.wmjourney-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  align-items: stretch;
  min-height: 365px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 26px;
  background: #ffffff;
  box-shadow:
      0 28px 60px -48px rgba(16, 24, 40, .45),
      0 10px 24px -22px rgba(16, 24, 40, .16);
  transition:
      transform .28s ease,
      border-color .28s ease,
      box-shadow .28s ease;
}

.wmjourney-feature:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 183, 106, .18);
  box-shadow:
      0 36px 68px -48px rgba(16, 24, 40, .42),
      0 15px 30px -25px rgba(16, 24, 40, .2);
}

.wmjourney-feature-reverse {
  grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
}

.wmjourney-feature-reverse .wmjourney-visual {
  order: 2;
}

.wmjourney-feature-reverse .wmjourney-content {
  order: 1;
}


/* Visual Area */

.wmjourney-visual {
  position: relative;
  min-width: 0;
  min-height: 365px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  background:
      radial-gradient(circle at 50% 40%, rgba(18, 183, 106, .11), transparent 36%),
      linear-gradient(145deg, #eefbf4 0%, #f8fdfb 100%);
}

.wmjourney-feature-broadcast .wmjourney-visual {
  background:
      radial-gradient(circle at 45% 35%, rgba(59, 130, 246, .09), transparent 36%),
      linear-gradient(145deg, #f2f8ff 0%, #fbfdff 100%);
}

.wmjourney-feature-flows .wmjourney-visual {
  background:
      radial-gradient(circle at 50% 38%, rgba(124, 58, 237, .075), transparent 36%),
      linear-gradient(145deg, #f7f5ff 0%, #fdfcff 100%);
}

.wmjourney-feature-catalog .wmjourney-visual {
  background:
      radial-gradient(circle at 48% 36%, rgba(18, 183, 106, .09), transparent 36%),
      linear-gradient(145deg, #effbf5 0%, #fbfefc 100%);
}

.wmjourney-feature-chatbot .wmjourney-visual {
  background:
      radial-gradient(circle at 45% 35%, rgba(18, 183, 106, .1), transparent 36%),
      linear-gradient(145deg, #f0fbf5 0%, #f8fcfa 100%);
}


/* Image Frame */

.wmjourney-image-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 295px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 20px;
  background:
      linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(250, 252, 251, .94));
  box-shadow:
      0 24px 45px -35px rgba(16, 24, 40, .42);
}

.wmjourney-image-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
      linear-gradient(90deg, rgba(18, 183, 106, .035), transparent 35%);
}

.wmjourney-image-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 295px;
  display: block;
  object-fit: contain;
  object-position: center;
}


/* Feature Number */

.wmjourney-index {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 3;
  min-width: 42px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  border: 1px solid rgba(18, 183, 106, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  box-shadow: 0 10px 20px -16px rgba(16, 24, 40, .32);
  backdrop-filter: blur(7px);
}

.wmjourney-feature-reverse .wmjourney-index {
  left: auto;
  right: 20px;
}


/* Content Side */

.wmjourney-content {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px 44px;
  background:
      radial-gradient(circle at 100% 0%, rgba(18, 183, 106, .055), transparent 30%),
      #ffffff;
}

.wmjourney-feature-reverse .wmjourney-content {
  background:
      radial-gradient(circle at 0% 0%, rgba(18, 183, 106, .05), transparent 30%),
      #ffffff;
}


/* Label */

.wmjourney-label {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.wmjourney-label i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
}


/* Feature Title */

.wmjourney-content h3 {
  margin: 15px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(24px, 2.7vw, 31px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.032em;
}


/* Description */

.wmjourney-content > p {
  max-width: 480px;
  margin: 12px 0 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.68;
}


/* Feature Points */

.wmjourney-points {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 19px;
  border-top: 1px solid rgba(16, 24, 40, .07);
}

.wmjourney-points span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.wmjourney-points i {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 9px;
  font-style: normal;
  font-weight: 900;
}


/* Slight Accent Variation */

.wmjourney-feature-broadcast .wmjourney-label {
  background: #eff6ff;
  color: #2563eb;
}

.wmjourney-feature-broadcast .wmjourney-label i {
  background: #3b82f6;
}

.wmjourney-feature-broadcast .wmjourney-points i {
  background: #dbeafe;
  color: #2563eb;
}

.wmjourney-feature-flows .wmjourney-label {
  background: #f5f3ff;
  color: #7c3aed;
}

.wmjourney-feature-flows .wmjourney-label i {
  background: #7c3aed;
}

.wmjourney-feature-flows .wmjourney-points i {
  background: #ede9fe;
  color: #7c3aed;
}




/* Integrations section */

.wmintegrate-section,
.wmintegrate-section * {
  box-sizing: border-box;
}

.wmintegrate-section {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 7% 10%, rgba(18, 183, 106, .07), transparent 24%),
      radial-gradient(circle at 94% 88%, rgba(59, 130, 246, .045), transparent 24%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}


/* Heading */

.wmintegrate-head {
  max-width: 760px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmintegrate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmintegrate-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmintegrate-head h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px, 4.4vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.044em;
  text-wrap: balance;
}

.wmintegrate-head h2 span {
  color: var(--green-600);
}

.wmintegrate-head p {
  max-width: 640px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.68;
}


/* Main Showcase */

.wmintegrate-showcase {
  max-width: 1160px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 28px;
  background: #ffffff;
  box-shadow:
      0 34px 70px -52px rgba(16, 24, 40, .48),
      0 12px 26px -24px rgba(16, 24, 40, .16);
}


/* Showcase Top */

.wmintegrate-showcase-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(16, 24, 40, .065);
  background:
      linear-gradient(90deg, #f2fcf7 0%, #ffffff 70%);
}

.wmintegrate-showcase-copy span,
.wmintegrate-showcase-copy strong {
  display: block;
}

.wmintegrate-showcase-copy span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmintegrate-showcase-copy strong {
  margin-top: 4px;
  color: var(--ink-900);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
}

.wmintegrate-status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: #ffffff;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.wmintegrate-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .1);
}


/* Image Area */

.wmintegrate-image-wrap {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 34px;
  background:
      radial-gradient(circle at 50% 48%, rgba(18, 183, 106, .075), transparent 33%),
      linear-gradient(180deg, #fbfefc 0%, #f5fbf8 100%);
}

.wmintegrate-image-wrap::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px dashed rgba(18, 183, 106, .08);
  border-radius: 24px;
  pointer-events: none;
}

.wmintegrate-image-wrap img {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 940px;
  max-height: 450px;
  display: block;
  object-fit: contain;
  object-position: center;
}


/* Decorative Glow */

.wmintegrate-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}

.wmintegrate-glow-one {
  width: 260px;
  height: 260px;
  top: -100px;
  left: -70px;
  background: rgba(18, 183, 106, .07);
}

.wmintegrate-glow-two {
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: -90px;
  background: rgba(59, 130, 246, .045);
}


/* Bottom Benefits */

.wmintegrate-bottom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(16, 24, 40, .065);
  background: #ffffff;
}

.wmintegrate-point {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 18px 20px;
}

.wmintegrate-point + .wmintegrate-point {
  border-left: 1px solid rgba(16, 24, 40, .065);
}

.wmintegrate-point-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmintegrate-point-icon svg {
  width: 18px;
  height: 18px;
}

.wmintegrate-point strong,
.wmintegrate-point div > span {
  display: block;
}

.wmintegrate-point strong {
  color: var(--ink-800);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.35;
}

.wmintegrate-point div > span {
  margin-top: 3px;
  color: var(--ink-400);
  font-size: 9px;
  line-height: 1.4;
}



/* Customer success section */

.wmcaseflow-section,
.wmcaseflow-section * {
  box-sizing: border-box;
}

.wmcaseflow-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 7% 8%, rgba(18, 183, 106, .06), transparent 23%),
      radial-gradient(circle at 94% 92%, rgba(59, 130, 246, .035), transparent 22%),
      linear-gradient(180deg, #ffffff 0%, #f8fbfa 100%);
}


/* Heading */

.wmcaseflow-head {
  max-width: 740px;
  margin: 0 auto 40px;
  text-align: center;
}

.wmcaseflow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmcaseflow-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmcaseflow-head h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmcaseflow-head h2 span {
  color: var(--green-600);
}

.wmcaseflow-head p {
  max-width: 610px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.66;
}


/* Grid */

.wmcaseflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 1160px;
  margin: 0 auto;
  align-items: stretch;
}


/* Card */

.wmcaseflow-card {
  position: relative;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
      0 24px 54px -44px rgba(16, 24, 40, .42);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmcaseflow-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 56px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background:
      linear-gradient(90deg, var(--green-400), var(--green-600));
}

.wmcaseflow-card:hover {
  transform: translateY(-4px);
  border-color: rgba(18, 183, 106, .18);
  box-shadow:
      0 32px 62px -45px rgba(16, 24, 40, .42);
}


/* Brand Row */

.wmcaseflow-brand {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.wmcaseflow-logo {
  width: 155px;
  height: 54px;
  flex: 0 0 155px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.wmcaseflow-logo img {
  width: 100%;
  max-width: 150px;
  height: 48px;
  display: block;
  object-fit: contain;
  object-position: left center;
}

.wmcaseflow-type {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(18, 183, 106, .11);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}


/* Content */

.wmcaseflow-content {
  min-width: 0;
  padding-top: 18px;
}

.wmcaseflow-content h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.26;
  letter-spacing: -.022em;
}

.wmcaseflow-content p {
  margin: 9px 0 0;
  color: var(--ink-500);
  font-size: 11.5px;
  line-height: 1.62;
}


/* Equal Result Area */

.wmcaseflow-outcomes {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(16, 24, 40, .065);
}

.wmcaseflow-result {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 15px;
  border: 1px solid rgba(18, 183, 106, .09);
  border-radius: 14px;
  background:
      linear-gradient(145deg, #f2fcf6 0%, #fbfefc 100%);
}

.wmcaseflow-result > span,
.wmcaseflow-result strong,
.wmcaseflow-result small {
  display: block;
}

.wmcaseflow-result > span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.wmcaseflow-result strong {
  margin-top: 7px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -.037em;
}

.wmcaseflow-result small {
  margin-top: 6px;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.35;
}


/* Proper CTA Button */

.wmcaseflow-btn {
  align-self: end;
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
  padding: 11px 13px 11px 16px;
  border: 1px solid var(--green-600);
  border-radius: 11px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  box-shadow:
      0 12px 22px -17px rgba(18, 183, 106, .68);
  transition:
      transform .2s ease,
      background .2s ease,
      box-shadow .2s ease;
}

.wmcaseflow-btn i {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, .15);
  color: #ffffff;
  font-size: 13px;
  font-style: normal;
  transition: transform .2s ease;
}

.wmcaseflow-btn:hover {
  transform: translateY(-2px);
  background: var(--green-700);
  box-shadow:
      0 17px 27px -17px rgba(18, 183, 106, .72);
}

.wmcaseflow-btn:hover i {
  transform: translateX(2px);
}


/* Facebook Messenger Automation Page CSS  */

.wmmessengerflow-section,
.wmmessengerflow-section * {
  box-sizing: border-box;
}

.wmmessengerflow-section {
  padding: 88px 0;
  background: #ffffff;
}

.wmmessengerflow-shell {
  position: relative;
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 22px;
  padding: 26px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 30px;
  background:
      radial-gradient(circle at 8% 12%, rgba(18, 183, 106, .07), transparent 24%),
      linear-gradient(180deg, #fbfefc 0%, #f8fbf9 100%);
  box-shadow: 0 32px 70px -54px rgba(16, 24, 40, .42);
}

.wmmessengerflow-shell::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -100px;
  bottom: -120px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .045);
  pointer-events: none;
}

.wmmessengerflow-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 34px 30px;
}

.wmmessengerflow-copy h2 {
  max-width: 520px;
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 36px);
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.043em;
}

.wmmessengerflow-copy > p {
  max-width: 560px;
  margin: 16px 0 0;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.72;
}

.wmmessengerflow-summary {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--green-100);
  border-radius: 16px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 16px 32px -28px rgba(16, 24, 40, .28);
}

.wmmessengerflow-summary-icon {
  width: 48px;
  height: 48px;
  display: grid !important;
  place-items: center;
  border-radius: 13px;
  background: var(--green-600);
  color: #ffffff;
  box-shadow: 0 12px 20px -14px rgba(18, 183, 106, .65);
}

.wmmessengerflow-summary-icon svg {
  width: 21px;
  height: 21px;
}

.wmmessengerflow-summary strong,
.wmmessengerflow-summary span {
  display: block;
}

.wmmessengerflow-summary strong {
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.wmmessengerflow-summary div > span {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}

.wmmessengerflow-steps {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.wmmessengerflow-step {
  position: relative;
  min-width: 0;
  min-height: 100%;
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .07);
  border-radius: 20px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 20px 42px -36px rgba(16, 24, 40, .34);
  transition:
      transform .22s ease,
      border-color .22s ease,
      box-shadow .22s ease;
}

.wmmessengerflow-step::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  width: 48px;
  height: 3px;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(90deg, var(--green-400), var(--green-600));
}

.wmmessengerflow-step:hover {
  transform: translateY(-3px);
  border-color: rgba(18, 183, 106, .18);
  box-shadow: 0 28px 50px -38px rgba(16, 24, 40, .4);
}

.wmmessengerflow-step-top {
  position: relative;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
}

.wmmessengerflow-step-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 16px;
  background: var(--green-50);
  color: var(--green-700);
  transition:
      transform .22s ease,
      background .22s ease;
}

.wmmessengerflow-step:hover .wmmessengerflow-step-icon {
  transform: scale(1.04);
  background: var(--green-100);
}

.wmmessengerflow-step-icon svg {
  width: 23px;
  height: 23px;
}

.wmmessengerflow-step-number {
  position: absolute;
  top: 0;
  right: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--green-600);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px -8px rgba(18, 183, 106, .6);
}

.wmmessengerflow-step-copy {
  min-width: 0;
}

.wmmessengerflow-step-copy strong {
  display: block;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.018em;
}

.wmmessengerflow-step-copy p {
  max-width: 470px;
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.58;
}


/* Third Section */
.wmfbai-section,.wmfbai-section *{box-sizing:border-box}
.wmfbai-section{background:#fff;}
.wmfbai-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:34px;align-items:center;padding:34px;border:1px solid rgba(16,24,40,.07);border-radius:30px;background:radial-gradient(circle at 5% 5%,rgba(18,183,106,.06),transparent 24%),linear-gradient(180deg,#fcfefd 0%,#f8fbf9 100%);box-shadow:0 30px 64px -50px rgba(16,24,40,.36)}
.wmfbai-copy{padding:10px}
.wmfbai-tag,.wmfbteam-tag,.wmfbmulti-tag,.wmfbwelcome-tag{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border:1px solid var(--green-100);border-radius:999px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
.wmfbai-tag i{width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.wmfbai-copy h2,.wmfbteam-head h2,.wmfbmulti-copy h2,.wmfbwelcome-copy h2{margin:15px 0 0;color:var(--ink-900);font-family:var(--font-display);font-size:clamp(28px,3.6vw,33px);font-weight:850;line-height:1.08;letter-spacing:-.04em}
.wmfbai-copy>p,.wmfbmulti-copy>p,.wmfbwelcome-copy>p{margin:14px 0 0;color:var(--ink-500);font-size:13px;line-height:1.7}
.wmfbai-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px;margin-top:24px}
.wmfbai-feature{display:grid;grid-template-columns:42px minmax(0,1fr);gap:11px;padding:14px;border:1px solid rgba(16,24,40,.065);border-radius:15px;background:#fff;transition:.2s ease}
.wmfbai-feature:hover{transform:translateY(-3px);border-color:rgba(18,183,106,.16);box-shadow:0 20px 36px -32px rgba(16,24,40,.28)}
.wmfbai-feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--green-50);color:var(--green-700)}
.wmfbai-feature-icon svg{width:19px;height:19px}
.wmfbai-feature strong{display:block;color:var(--ink-900);font-size:10px;font-weight:800}
.wmfbai-feature div>span{display:block;margin-top:3px;color:var(--ink-400);font-size: 9px;line-height:1.45}
.wmfbai-image-wrap{position:relative;border:1px solid rgba(18,183,106,.1);border-radius:23px;background:#fff}
.wmfbai-image{width:100%;display:block;border-radius:17px}
.wmfbai-status{position:absolute;top:14px;left:14px;z-index:2;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--green-100);border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink-700);font-size: 9px;font-weight:800}
.wmfbai-status span{width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.wmfbai-card{position:absolute;display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px 12px;border:1px solid rgba(16,24,40,.07);border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 16px 28px -22px rgba(16,24,40,.28)}
.wmfbai-card>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:900}
.wmfbai-card strong,.wmfbai-card small{display:block}
.wmfbai-card strong{color:var(--ink-800);font-size: 9px}
.wmfbai-card small{margin-top:2px;color:var(--ink-400);font-size: 9px}
.wmfbai-card-one{left:12px;bottom:18px}
.wmfbai-card-two{right:12px;bottom:18px}


/* Fourth Section */
.wmfbteam-section,.wmfbteam-section *{box-sizing:border-box}
.wmfbteam-section{padding:86px 0;background:#fff}
.wmfbteam-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.55fr);gap:40px;align-items:end;max-width:1160px;margin:0 auto 28px}
.wmfbteam-head p{margin:0;color:var(--ink-500);font-size:13px;line-height:1.7}
.wmfbteam-dashboard{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:18px;max-width:1160px;margin:0 auto;padding:22px;border:1px solid rgba(16,24,40,.07);border-radius:28px;background:linear-gradient(180deg,#fbfefc,#f7fbf8)}
.wmfbteam-image-shell{padding:14px;border:1px solid rgba(18,183,106,.09);border-radius:20px;background:#fff}
.wmfbteam-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--ink-500);font-size: 9px}
.wmfbteam-topline span{display:flex;align-items:center;gap:6px}
.wmfbteam-topline i{width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.wmfbteam-topline strong{color:var(--green-700)}
.wmfbteam-image{width:100%;display:block;border-radius:14px}
.wmfbteam-tools{display:flex; flex-direction: column; gap:20px}
.wmfbteam-tool{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:13px;padding:18px;border:1px solid rgba(16,24,40,.065);border-radius:17px;background:#fff}
.wmfbteam-tool-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:14px;background:var(--green-50);color:var(--green-700)}
.wmfbteam-tool-icon svg{width:20px;height:20px}
.wmfbteam-tool strong{display:block;color:var(--ink-900);font-size:11px;font-weight:800}
.wmfbteam-tool p{margin:4px 0 0;color:var(--ink-400);font-size: 9px;line-height:1.45}


/* Fifth Section */
.wmfbmulti-section,.wmfbmulti-section *{box-sizing:border-box}
.wmfbmulti-section{padding:86px 0;background:#fff}
.wmfbmulti-box{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:32px;align-items:center;padding:34px;border:1px solid rgba(16,24,40,.07);border-radius:28px;background:radial-gradient(circle at 90% 10%,rgba(18,183,106,.06),transparent 24%),#fbfefc}
.wmfbmulti-copy{padding:8px}
.wmfbmulti-benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.wmfbmulti-benefits>div{padding:14px;border:1px solid rgba(16,24,40,.065);border-radius:14px;background:#fff}
.wmfbmulti-benefits>div>span{display:grid;place-items:center;width:30px;height:30px;margin-bottom:9px;border-radius:9px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:900}
.wmfbmulti-benefits strong{display:block;color:var(--ink-800);font-size:12px}
.wmfbmulti-benefits p{margin:3px 0 0;color:var(--ink-400);font-size: 10px;line-height:1.45}
.wmfbmulti-window{position:relative;padding:14px;border:1px solid rgba(18,183,106,.09);border-radius:21px;background:#fff}
.wmfbmulti-window-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:var(--ink-700);font-size: 9px;font-weight:800}
.wmfbmulti-window-head div{display:flex;gap:4px}
.wmfbmulti-window-head i{width:6px;height:6px;border-radius:50%;background:var(--green-100)}
.wmfbmulti-image{width:100%;display:block;border-radius:14px}
.wmfbmulti-page-chip{position:absolute;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;padding:9px 11px;border:1px solid rgba(16,24,40,.07);border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 14px 26px -20px rgba(16,24,40,.3)}
.wmfbmulti-page-chip>span{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:900}
.wmfbmulti-page-chip strong,.wmfbmulti-page-chip small{display:block}
.wmfbmulti-page-chip strong{font-size: 9px;color:var(--ink-800)}
.wmfbmulti-page-chip small{margin-top:2px;font-size: 9px;color:var(--ink-400)}
.wmfbmulti-chip-one{left:8px;bottom:14px}
.wmfbmulti-chip-two{right:8px;bottom:14px}
.wmfbmulti-flow{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;align-items:center;gap:6px;margin-top:14px;padding:16px;border:1px solid rgba(16,24,40,.065);border-radius:16px;background:#fff}
.wmfbmulti-flow-item{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px}
.wmfbmulti-flow-item>span{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:900}
.wmfbmulti-flow-item strong{display:block;color:var(--ink-800);font-size:11px}
.wmfbmulti-flow-item p{margin:2px 0 0;color:var(--ink-400);font-size: 10px}
.wmfbmulti-flow-line{height:1px;background:var(--green-100)}


/* Sixth Section */
.wmfbwelcome-section,.wmfbwelcome-section *{box-sizing:border-box}
.wmfbwelcome-section{background:#fff;}
.wmfbwelcome-box{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:36px;
  align-items:center;
  padding:34px;
  border:1px solid rgba(16,24,40,.07);
  border-radius:28px;
  background:linear-gradient(145deg,#f7fbf8 0%,#fff 62%);
}
.wmfbwelcome-preview{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wmfbwelcome-phone{
  position:relative;
  width:100%;
  max-width:none;
  min-height:430px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px;
  overflow:hidden;
  border:1px solid rgba(18,183,106,.09);
  border-radius:22px;
  background:#fff;
}
.wmfbwelcome-image{
  width:100%;
  height:100%;
  min-height:400px;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
}
.wmfbwelcome-live{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid var(--green-100);border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink-700);font-size: 9px;font-weight:800}
.wmfbwelcome-live span{width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.wmfbwelcome-copy{
  width:100%;
  min-width:0;
  padding:8px;
}
.wmfbwelcome-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
.wmfbwelcome-rules article{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:14px;border:1px solid rgba(16,24,40,.065);border-radius:14px;background:#fff}
.wmfbwelcome-rule-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:900}
.wmfbwelcome-rules strong{display:block;color:var(--ink-800);font-size:12px}
.wmfbwelcome-rules p{margin:3px 0 0;color:var(--ink-400);font-size: 11px;line-height:1.45}

/* Seventh Section */
.wmfbsetup-section,.wmfbsetup-section *{box-sizing:border-box}
.wmfbsetup-section{padding:88px 0;background:#fff}
.wmfbsetup-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.55fr);align-items:end;gap:46px;max-width:1160px;margin:0 auto 34px}
.wmfbsetup-tag,.wmfbconnect-tag,.wmfbcases-tag{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid var(--green-100);border-radius:999px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:800;letter-spacing:.065em;text-transform:uppercase}
.wmfbsetup-tag i{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px rgba(18,183,106,.1)}
.wmfbsetup-head h2,.wmfbconnect-content h2,.wmfbcases-head h2{margin:15px 0 0;color:var(--ink-900);font-family:var(--font-display);font-size:clamp(32px,3.8vw,35px);font-weight:850;line-height:1.08;letter-spacing:-.042em}
.wmfbsetup-head>p{margin:0;color:var(--ink-500);font-size:13px;line-height:1.7}
.wmfbsetup-track{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 42px 1fr 42px 1fr 42px 1fr;align-items:center;padding:22px;border:1px solid rgba(16,24,40,.07);border-radius:26px;background:linear-gradient(180deg,#fbfefc 0%,#f6fbf8 100%);box-shadow:0 26px 56px -46px rgba(16,24,40,.3)}
.wmfbsetup-step{min-height:240px;display:flex;flex-direction:column;padding:20px;border:1px solid rgba(16,24,40,.065);border-radius:18px;background:#fff;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.wmfbsetup-step:hover{transform:translateY(-4px);border-color:rgba(18,183,106,.17);box-shadow:0 24px 44px -36px rgba(16,24,40,.32)}
.wmfbsetup-step-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wmfbsetup-number{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--green-600);color:#fff;font-size: 9px;font-weight:900}
.wmfbsetup-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--green-50);color:var(--green-700)}
.wmfbsetup-icon svg{width:18px;height:18px}
.wmfbsetup-step h3{margin:22px 0 0;color:var(--ink-900);font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.28}
.wmfbsetup-step p{margin:8px 0 0;color:var(--ink-500);font-size:10px;line-height:1.6}
.wmfbsetup-status{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;margin-top:auto;padding:7px 9px;border-radius:999px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:800}
.wmfbsetup-status i{width:6px;height:6px;border-radius:50%;background:var(--green-500)}
.wmfbsetup-connector{display:flex;align-items:center;justify-content:center}
.wmfbsetup-connector span{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--green-600);font-size:15px;font-weight:900;box-shadow:0 10px 20px -15px rgba(16,24,40,.35)}
.wmfbsetup-note{max-width:1160px;margin:14px auto 0;display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:11px;padding:13px 15px;border:1px solid var(--green-100);border-radius:14px;background:var(--green-50)}
.wmfbsetup-note-icon{width:36px;height:36px;display:grid !important;place-items:center;border-radius:10px;background:var(--green-600);color:#fff;font-size:11px;font-weight:900}
.wmfbsetup-note strong,.wmfbsetup-note span{display:block}
.wmfbsetup-note strong{color:var(--ink-800);font-size:9.5px;font-weight:800}
.wmfbsetup-note div>span{margin-top:3px;color:var(--ink-500);font-size: 9px}


/* Eighth Section */
.wmfbconnect-section,.wmfbconnect-section *{box-sizing:border-box}
.wmfbconnect-section{padding-bottom:88px;background:#fff}
.wmfbconnect-box{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:34px;align-items:center;padding:34px;border:1px solid rgba(16,24,40,.07);border-radius:28px;background:radial-gradient(circle at 92% 8%,rgba(18,183,106,.065),transparent 25%),#fbfefc}
.wmfbconnect-content{padding:8px}
.wmfbconnect-content>p{margin:14px 0 0;color:var(--ink-500);font-size:13px;line-height:1.7}
.wmfbconnect-list{display:grid;gap:10px;margin-top:22px}
.wmfbconnect-list article{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px;padding:14px;border:1px solid rgba(16,24,40,.065);border-radius:15px;background:#fff}
.wmfbconnect-list-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--green-50);color:var(--green-700)}
.wmfbconnect-list-icon svg{width:19px;height:19px}
.wmfbconnect-list strong{display:block;color:var(--ink-900);font-size:12px;font-weight:800}
.wmfbconnect-list p{margin:4px 0 0;color:var(--ink-400);font-size: 9px;line-height:1.45}
.wmfbconnect-window{position:relative;padding:15px;border:1px solid rgba(18,183,106,.09);border-radius:22px;background:#fff;box-shadow:0 24px 50px -42px rgba(16,24,40,.3)}
.wmfbconnect-window-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--ink-500);font-size: 9px}
.wmfbconnect-window-top span{display:flex;align-items:center;gap:6px}
.wmfbconnect-window-top i{width:7px;height:7px;border-radius:50%;background:var(--green-500)}
.wmfbconnect-window-top strong{color:var(--green-700)}
.wmfbconnect-image{width:100%;display:block;border-radius:15px}
.wmfbconnect-floating{position:absolute;display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;padding:10px 12px;border:1px solid rgba(16,24,40,.07);border-radius:13px;background:rgba(255,255,255,.96);box-shadow:0 16px 28px -22px rgba(16,24,40,.3)}
.wmfbconnect-floating>span{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:900}
.wmfbconnect-floating strong,.wmfbconnect-floating small{display:block}
.wmfbconnect-floating strong{color:var(--ink-800);font-size: 9px}
.wmfbconnect-floating small{margin-top:2px;color:var(--ink-400);font-size: 9px}
.wmfbconnect-floating-one{left:10px;bottom:14px}
.wmfbconnect-floating-two{right:10px;bottom:14px}
.wmfbconnect-footer{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr;align-items:center;gap:8px;margin-top:14px;padding:16px;border:1px solid rgba(16,24,40,.065);border-radius:16px;background:#fff}
.wmfbconnect-footer>div{text-align:center}
.wmfbconnect-footer strong,.wmfbconnect-footer span{display:block}
.wmfbconnect-footer strong{color:var(--ink-800);font-size:11px;font-weight:800}
.wmfbconnect-footer div>span{margin-top:3px;color:var(--ink-400);font-size: 9px}
.wmfbconnect-footer-arrow{color:var(--green-500);font-size:16px;font-weight:900}


/* Ninth Section */
.wmfbcases-section,.wmfbcases-section *{box-sizing:border-box}
.wmfbcases-section{padding:0 0 50px 0;background:linear-gradient(180deg,#fff 0%,#f9fcfa 100%)}
.wmfbcases-head{max-width:790px;margin:0 auto 34px;text-align:center}
.wmfbcases-head>p{max-width:660px;margin:13px auto 0;color:var(--ink-500);font-size:13px;line-height:1.7}
.wmfbcases-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:1160px;margin:0 auto}
.wmfbcases-card{position:relative;min-width:0;display:flex;flex-direction:column;padding:21px;border:1px solid rgba(16,24,40,.07);border-radius:20px;background:#fff;box-shadow:0 20px 42px -38px rgba(16,24,40,.28);transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease}
.wmfbcases-card:hover{transform:translateY(-4px);border-color:rgba(18,183,106,.17);box-shadow:0 27px 50px -39px rgba(16,24,40,.32)}
.wmfbcases-card-featured{background:linear-gradient(145deg,var(--green-50) 0%,#fff 70%);border-color:var(--green-100)}
.wmfbcases-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wmfbcases-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:var(--green-50);color:var(--green-700)}
.wmfbcases-icon svg{width:20px;height:20px}
.wmfbcases-no{color:var(--ink-400);font-size: 9px;font-weight:900}
.wmfbcases-card h3{margin:20px 0 0;color:var(--green-700);font-size:9px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.wmfbcases-card>strong{display:block;margin-top:7px;color:var(--ink-900);font-family:var(--font-display);font-size:17px;font-weight:800;line-height:1.28;letter-spacing:-.018em}
.wmfbcases-card p{margin:9px 0 0;color:var(--ink-500);font-size:10px;line-height:1.58}
.wmfbcases-use{display:inline-flex;align-self:flex-start;margin-top:auto;padding-top:18px;color:var(--green-700);font-size: 9px;font-weight:800}


/* Click-to-WhatsApp Ads Page CSS  */

/* Third Section Start */
.wmadvisual-section{
  position:relative;
  padding:92px 0;
  overflow:hidden;
  background:#fff;
}
.wmadvisual-head{
  max-width:820px;
  margin:0 auto 38px;
  text-align:center;
}
.wmadvisual-eyebrow{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:15px;
  padding:8px 15px;
  border:1px solid var(--green-200);
  border-radius:999px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmadvisual-head h2{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(35px,4.2vw,41px);
  line-height:1.04;
  letter-spacing:-.045em;
  font-weight:800;
}
.wmadvisual-head h2 span{
  color:var(--green-600);
}
.wmadvisual-head p{
  max-width:700px;
  margin:16px auto 0;
  color:var(--ink-500);
  font-size:15px;
  line-height:1.7;
}
.wmadvisual-image-wrap{
  width:100%;
  overflow:hidden;
  border:1px solid rgba(18,183,106,.14);
  border-radius:28px;
  background:var(--green-50);
  box-shadow:0 20px 55px rgba(16,24,40,.07);
}
.wmadvisual-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
/* Third Section End */



/* Fourth Section Start */
.wmctafinal-section{
  background:#fff;
}

.wmctafinal-box{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:center;
  overflow:hidden;
  padding:34px 38px;
  border:1px solid rgba(18,183,106,.16);
  border-radius:26px;
  background:linear-gradient(120deg,var(--ink-900) 0%,var(--ink-800) 62%,var(--green-700) 100%);
  box-shadow:0 20px 48px rgba(16,24,40,.12);
}

.wmctafinal-box::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.025) 50%,transparent 100%);
  pointer-events:none;
}

.wmctafinal-content{
  position:relative;
  z-index:1;
  max-width:720px;
}

.wmctafinal-tag{
  display:inline-flex;
  margin-bottom:10px;
  color:var(--green-400);
  font-size:9px;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.wmctafinal-content h2{
  margin:0;
  color:#fff;
  font-family:var(--font-display);
  font-size:clamp(28px,3.5vw,35px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.wmctafinal-content p{
  margin:10px 0 0;
  color:rgba(255,255,255,.65);
  font-size:13px;
  line-height:1.6;
}

.wmctafinal-actions{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.wmctafinal-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:0 21px;
  border-radius:12px;
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
}

.wmctafinal-btn-primary{
  border:1px solid var(--green-500);
  background:var(--green-500);
  color:#fff;
  box-shadow:0 12px 24px rgba(18,183,106,.2);
}

.wmctafinal-btn-primary:hover{
  transform:translateY(-2px);
  background:var(--green-600);
  border-color:var(--green-600);
  box-shadow:0 15px 28px rgba(18,183,106,.24);
}

.wmctafinal-btn-primary span{
  font-size:15px;
  line-height:1;
}

.wmctafinal-btn-secondary{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
}

.wmctafinal-btn-secondary:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.1);
}

/* Fourth Section End */


/* Fifth Section Start */
.wmadslead-section{
  padding:94px 0;
  background:#fff;
}
.wmadslead-head{
  max-width:780px;
  margin:0 auto 54px;
  text-align:center;
}
.wmadslead-eyebrow{
  display:inline-flex;
  margin-bottom:14px;
  padding:8px 14px;
  border:1px solid var(--green-200);
  border-radius:999px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmadslead-head h2{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,41px);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight: 800;
}
.wmadslead-head h2 span{
  color:var(--green-600);
}
.wmadslead-head p{
  max-width:680px;
  margin:15px auto 0;
  color:var(--ink-500);
  font-size:14px;
  line-height:1.7;
}
.wmadslead-layout{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:58px;
  align-items:center;
}
.wmadslead-content{
  min-width:0;
}
.wmadslead-tag{
  display:inline-flex;
  margin-bottom:12px;
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmadslead-content h3{
  max-width:560px;
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(26px,3.2vw,36px);
  line-height:1.08;
  letter-spacing:-.035em;
}
.wmadslead-content>p{
  max-width:560px;
  margin:14px 0 0;
  color:var(--ink-500);
  font-size:13px;
  line-height:1.7;
}
.wmadslead-points{
  display:grid;
  gap:10px;
  margin-top:24px;
}
.wmadslead-point{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:13px 0;
  border-bottom:1px solid var(--border);
}
.wmadslead-point:last-child{
  border-bottom:0;
}
.wmadslead-point-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--green-100);
  color:var(--green-700);
}
.wmadslead-point-icon svg{
  width:19px;
  height:19px;
}
.wmadslead-point strong{
  display:block;
  color:var(--ink-900);
  font-size:12px;
}
.wmadslead-point p{
  margin:4px 0 0;
  color:var(--ink-500);
  font-size:9px;
  line-height:1.5;
}
.wmadslead-visual{
  min-width:0;
}
.wmadslead-image-frame{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(18,183,106,.14);
  border-radius:26px;
  background:var(--green-50);
}
.wmadslead-image-label{
  position:absolute;
  top:24px;
  left:24px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border:1px solid rgba(18,183,106,.15);
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
}
.wmadslead-image-label i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green-500);
}
.wmadslead-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
}
/* Fifth Section End */

/* Sixth Section Start */
.wmadsremarket-section{
  padding:94px 0;
  background:linear-gradient(180deg,var(--green-50) 0%,#fff 100%);
}
.wmadsremarket-layout{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:60px;
  align-items:center;
}
.wmadsremarket-visual{
  min-width:0;
}
.wmadsremarket-image-frame{
  overflow:hidden;
  padding:12px;
  border:1px solid rgba(18,183,106,.14);
  border-radius:26px;
  background:#fff;
  box-shadow:0 20px 50px rgba(16,24,40,.06);
}
.wmadsremarket-image-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:8px 5px 14px;
}
.wmadsremarket-image-top span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
}
.wmadsremarket-image-top span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green-500);
}
.wmadsremarket-image-top strong{
  color:var(--ink-500);
  font-size: 9px;
}
.wmadsremarket-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:17px;
}
.wmadsremarket-content{
  min-width:0;
}
.wmadsremarket-tag{
  display:inline-flex;
  margin-bottom:12px;
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmadsremarket-content h2{
  max-width:560px;
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(30px,3.5vw,36px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.wmadsremarket-content>p{
  max-width:560px;
  margin:14px 0 0;
  color:var(--ink-500);
  font-size:13px;
  line-height:1.7;
}
.wmadsremarket-points{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.wmadsremarket-point{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:12px;
  align-items:start;
}
.wmadsremarket-point>span{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:var(--green-100);
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
}
.wmadsremarket-point strong{
  display:block;
  color:var(--ink-900);
  font-size:12px;
}
.wmadsremarket-point p{
  margin:4px 0 0;
  color:var(--ink-500);
  font-size:9px;
  line-height:1.5;
}
/* Sixth Section End */

/* Seventh Section Start */
.wmadsmeasure-section{
  padding:94px 0;
  background:#fff;
}
.wmadsmeasure-layout{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:58px;
  align-items:center;
}
.wmadsmeasure-content{
  min-width:0;
}
.wmadsmeasure-tag{
  display:inline-flex;
  margin-bottom:12px;
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmadsmeasure-content h2{
  max-width:560px;
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(30px,3.5vw,36px);
  line-height:1.08;
  letter-spacing:-.04em;
}
.wmadsmeasure-content>p{
  max-width:560px;
  margin:14px 0 0;
  color:var(--ink-500);
  font-size:13px;
  line-height:1.7;
}
.wmadsmeasure-features{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.wmadsmeasure-feature{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid rgba(18,183,106,.11);
  border-radius:15px;
  background:var(--green-50);
}
.wmadsmeasure-feature-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#fff;
  color:var(--green-700);
}
.wmadsmeasure-feature-icon svg{
  width:20px;
  height:20px;
}
.wmadsmeasure-feature strong{
  display:block;
  color:var(--ink-900);
  font-size:11px;
}
.wmadsmeasure-feature p{
  margin:4px 0 0;
  color:var(--ink-500);
  font-size: 9px;
  line-height:1.5;
}
.wmadsmeasure-dashboard{
  padding:20px;
  border:1px solid rgba(18,183,106,.14);
  border-radius:25px;
  background:linear-gradient(145deg,#fff 0%,var(--green-50) 100%);
  box-shadow:0 20px 50px rgba(16,24,40,.07);
}
.wmadsmeasure-dashboard-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:16px;
  border-bottom:1px solid rgba(18,183,106,.12);
}
.wmadsmeasure-dashboard-head span{
  display:block;
  color:var(--ink-400);
  font-size: 9px;
  font-weight:800;
  text-transform:uppercase;
}
.wmadsmeasure-dashboard-head strong{
  display:block;
  margin-top:3px;
  color:var(--ink-900);
  font-size:13px;
}
.wmadsmeasure-live{
  display:flex!important;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--green-100);
  color:var(--green-700)!important;
}
.wmadsmeasure-live i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green-500);
}
.wmadsmeasure-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:16px;
}
.wmadsmeasure-metrics>div{
  padding:15px;
  border:1px solid rgba(18,183,106,.11);
  border-radius:14px;
  background:#fff;
}
.wmadsmeasure-metrics span{
  display:block;
  color:var(--ink-400);
  font-size: 9px;
}
.wmadsmeasure-metrics strong{
  display:block;
  margin-top:5px;
  color:var(--green-700);
  font-family:var(--font-display);
  font-size:18px;
  font-weight: 800;
}
.wmadsmeasure-funnel{
  display:grid;
  gap:15px;
  margin-top:20px;
  padding:18px;
  border-radius:17px;
  background:#fff;
}
.wmadsmeasure-funnel-row{
  display:grid;
  grid-template-columns:145px minmax(0,1fr) 34px;
  gap:12px;
  align-items:center;
}
.wmadsmeasure-funnel-row>span{
  color:var(--ink-700);
  font-size:9px;
  font-weight:700;
}
.wmadsmeasure-funnel-row>div{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:var(--green-50);
}
.wmadsmeasure-funnel-row i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--green-500);
}
.wmadsmeasure-funnel-row strong{
  color:var(--green-700);
  font-size:9px;
}
/* Seventh Section End */



/* Eighth Section Start */
.wmadcase2-section{
  padding:92px 0;
  background:#fff;
}
.wmadcase2-head{
  max-width:790px;
  margin:0 auto 42px;
  text-align:center;
}
.wmadcase2-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px 14px;
  border:1px solid var(--green-200);
  border-radius:999px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmadcase2-eyebrow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 5px rgba(18,183,106,.1);
}
.wmadcase2-head h2{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(33px,4vw,41px);
  line-height:1.06;
  letter-spacing:-.04em;
}
.wmadcase2-head h2 span{
  color:var(--green-600);
}
.wmadcase2-head p{
  max-width:680px;
  margin:15px auto 0;
  color:var(--ink-500);
  font-size:14px;
  line-height:1.7;
}
.wmadcase2-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.wmadcase2-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:28px;
  border:1px solid rgba(18,183,106,.14);
  border-radius:24px;
  background:#fff;
  box-shadow:0 16px 42px rgba(16,24,40,.055);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.wmadcase2-card:hover{
  transform:translateY(-4px);
  border-color:rgba(18,183,106,.28);
  box-shadow:0 22px 48px rgba(16,24,40,.08);
}
.wmadcase2-card-featured{
  background:linear-gradient(145deg,var(--green-50) 0%,#fff 72%);
}
.wmadcase2-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:64px;
  margin-bottom:24px;
}
.wmadcase2-category{
  display:inline-flex;
  padding:7px 11px;
  border:1px solid var(--green-100);
  border-radius:999px;
  background:var(--green-50);
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.wmadcase2-logo{
  display:block;
  width:auto;
  max-width:140px;
  max-height:52px;
  object-fit:contain;
}
.wmadcase2-card blockquote{
  flex:1;
  margin:0;
  color:var(--ink-800);
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.65;
  letter-spacing:-.015em;
}
.wmadcase2-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:28px;
  padding-top:20px;
  border-top:1px solid var(--border);
}
.wmadcase2-person{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:12px;
  align-items:center;
}
.wmadcase2-avatar{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--green-100);
  color:var(--green-700);
  font-family:var(--font-display);
  font-size:13px;
  font-weight:900;
}
.wmadcase2-person strong{
  display:block;
  color:var(--ink-900);
  font-size:12px;
}
.wmadcase2-person div>span{
  display:block;
  margin-top:3px;
  color:var(--ink-500);
  font-size:9px;
}
.wmadcase2-card-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:43px;
  padding:0 16px;
  border:1px solid var(--green-600);
  border-radius:11px;
  background:var(--green-600);
  color:#fff;
  font-size:10px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 9px 20px rgba(18,183,106,.15);
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.wmadcase2-card-btn:hover{
  transform:translateY(-2px);
  background:var(--green-700);
  border-color:var(--green-700);
  box-shadow:0 13px 24px rgba(18,183,106,.2);
}
.wmadcase2-card-btn span{
  font-size:14px;
  line-height:1;
}
.wmadcase2-all{
  display:flex;
  justify-content:center;
  margin-top:28px;
}
.wmadcase2-all-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--green-600);
  border-radius:12px;
  background:#fff;
  color:var(--green-700);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease;
}
.wmadcase2-all-btn:hover{
  transform:translateY(-2px);
  background:var(--green-600);
  color:#fff;
  box-shadow:0 12px 26px rgba(18,183,106,.16);
}
.wmadcase2-all-btn span{
  font-size:15px;
}
/* Eighth Section End */


/* Ninth Section Start */
.wmctwawork-section{
  position:relative;
  padding:96px 0;
  overflow:hidden;
  background:#fff;
}
.wmctwawork-head{
  /* max-width:820px; */
  margin:0 auto 56px;
  text-align:center;
}
.wmctwawork-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px 14px;
  border:1px solid var(--green-200);
  border-radius:999px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmctwawork-eyebrow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 5px rgba(18,183,106,.1);
}
.wmctwawork-head h2{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,41px);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight: 800;
}
.wmctwawork-head h2 span{
  color:var(--green-600);
}
.wmctwawork-head p{
  max-width:700px;
  margin:15px auto 0;
  color:var(--ink-500);
  font-size:14px;
  line-height:1.7;
}
.wmctwawork-list{
  display:grid;
  gap:22px;
}
.wmctwawork-row{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:48px;
  align-items:center;
  padding:32px;
  border:1px solid rgba(18,183,106,.11);
  border-radius:26px;
  background:linear-gradient(135deg,#fff 0%,var(--green-50) 100%);
}
.wmctwawork-row-reverse .wmctwawork-content{
  order:2;
}
.wmctwawork-row-reverse .wmctwawork-visual{
  order:1;
}
.wmctwawork-content{
  min-width:0;
}
.wmctwawork-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  margin-bottom:14px;
  border-radius:11px;
  background:var(--green-100);
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
}
.wmctwawork-tag{
  display:block;
  margin-bottom:8px;
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmctwawork-content h3{
  max-width:560px;
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(26px,3vw,31px);
  line-height:1.1;
  letter-spacing:-.035em;
}
.wmctwawork-content>p{
  max-width:570px;
  margin:13px 0 0;
  color:var(--ink-500);
  font-size:12.5px;
  line-height:1.7;
}
.wmctwawork-points{
  display:grid;
  gap:9px;
  margin-top:20px;
}
.wmctwawork-points span{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--ink-700);
  font-size:10px;
  font-weight:700;
}
.wmctwawork-points i{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 4px rgba(18,183,106,.08);
}
.wmctwawork-visual{
  min-width:0;
}
.wmctwawork-image-frame{
  overflow:hidden;
  border:1px solid rgba(18,183,106,.14);
  border-radius:21px;
  background:#fff;
  box-shadow:0 17px 38px rgba(16,24,40,.055);
}
.wmctwawork-image{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
  border-radius:14px;
}
/* Ninth Section End */



/* Integrations Overview Page CSS  */

/* Third Section Start */
.wmintegratehub-section{
  padding:94px 0;
  background:linear-gradient(180deg,var(--green-50) 0%,#fff 100%);
}

.wmintegratehub-head{
  max-width:820px;
  margin:0 auto 42px;
  text-align:center;
}

.wmintegratehub-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:8px 14px;
  border:1px solid var(--green-200);
  border-radius:999px;
  background:#fff;
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wmintegratehub-eyebrow i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 5px rgba(18,183,106,.1);
}

.wmintegratehub-head h2{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(34px,4vw,41px);
  line-height:1.06;
  letter-spacing:-.04em;
  font-weight: 800;
}

.wmintegratehub-head h2 span{
  color:var(--green-600);
}

.wmintegratehub-head p{
  max-width:700px;
  margin:15px auto 0;
  color:var(--ink-500);
  font-size:14px;
  line-height:1.7;
}

.wmintegratehub-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.wmintegratehub-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:300px;
  padding:22px;
  overflow:hidden;
  border:1px solid rgba(18,183,106,.13);
  border-radius:22px;
  background:#fff;
  box-shadow:0 14px 36px rgba(16,24,40,.045);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.wmintegratehub-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
  opacity:0;
  transition:opacity .25s ease;
}

.wmintegratehub-card:hover{
  transform:translateY(-5px);
  border-color:rgba(18,183,106,.3);
  box-shadow:0 22px 48px rgba(16,24,40,.075);
}

.wmintegratehub-card:hover::before{
  opacity:1;
}

.wmintegratehub-card-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:17px;
}

.wmintegratehub-icon{
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:14px;
  background:var(--green-100);
  color:var(--green-700);
}

.wmintegratehub-icon svg{
  width:21px;
  height:21px;
}

.wmintegratehub-category{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 10px;
  border:1px solid var(--green-100);
  border-radius:999px;
  background:var(--green-50);
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.wmintegratehub-card h3{
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.22;
  letter-spacing:-.025em;
}

.wmintegratehub-card>p{
  margin:9px 0 0;
  color:var(--ink-500);
  font-size:15px;
  line-height:1.6;
}

.wmintegratehub-logo-row{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:62px;
  margin-top:auto;
  padding-top:20px;
}

.wmintegratehub-logo{
  min-width:84px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
}

.wmintegratehub-logo img{
  display:block;
  width:auto;
  max-width:82px;
  max-height:26px;
  object-fit:contain;
}

.wmintegratehub-link{
  width:max-content;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:16px;
  padding:9px 13px;
  border:1px solid var(--green-200);
  border-radius:10px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:9px;
  font-weight:800;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(18,183,106,.04);
  transition:transform .22s ease,background .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease;
}

.wmintegratehub-link span{
  width:20px;
  height:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:6px;
  background:#fff;
  color:var(--green-700);
  font-size:12px;
  line-height:1;
  transition:transform .22s ease,background .22s ease;
}

.wmintegratehub-link:hover{
  transform:translateY(-2px);
  border-color:var(--green-500);
  background:var(--green-600);
  color:#fff;
  box-shadow:0 10px 20px rgba(18,183,106,.14);
}

.wmintegratehub-link:hover span{
  transform:translateX(2px);
  background:rgba(255,255,255,.14);
  color:#fff;
}




.wmintegratehub-action{
    display:flex;
    justify-content:center;
    margin-top:28px;
}

.wmintegratehub-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:12px 22px;
    border:1px solid var(--green-600);
    border-radius:11px;
    background:var(--green-600);
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    box-shadow:0 8px 22px rgba(3,152,85,.16);
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.wmintegratehub-btn::after{
    content:"→";
    font-size:17px;
    line-height:1;
    transition:transform .2s ease;
}

.wmintegratehub-btn:hover{
    border-color:var(--green-700);
    background:var(--green-700);
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 10px 24px rgba(3,152,85,.22);
}

.wmintegratehub-btn:hover::after{
    transform:translateX(3px);
}

.wmintegratehub-btn:focus-visible{
    outline:3px solid var(--green-200);
    outline-offset:3px;
}

@media (max-width:640px){
    .wmintegratehub-action{
        margin-top:24px;
    }

    .wmintegratehub-btn{
        width:100%;
        max-width:320px;
    }
}

.wmintegratehub-all{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:0 22px;
  border:1px solid var(--green-600);
  border-radius:12px;
  background:var(--green-600);
  color:#fff;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 12px 25px rgba(18,183,106,.16);
  transition:transform .25s ease,background .25s ease,border-color .25s ease,box-shadow .25s ease;
}

.wmintegratehub-all:hover{
  transform:translateY(-2px);
  background:var(--green-700);
  border-color:var(--green-700);
  box-shadow:0 16px 30px rgba(18,183,106,.2);
}

.wmintegratehub-all span{
  font-size:15px;
}

/* Third Section End */

/* Shared integration rows */
.wmintegratecontext-section,
.wmintegrateauto-section,
.wmintegrateapi-section,
.wmintegratepersonal-section,
.wmintegratesync-section,
.wmintegratechannels-section{
  padding:34px 0;
  background:#fff;
}
.wmintegratecontext-row,
.wmintegrateauto-row,
.wmintegrateapi-row,
.wmintegratepersonal-row,
.wmintegratesync-row,
.wmintegratechannels-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:48px;
  align-items:center;
  padding:32px;
  border:1px solid rgba(18,183,106,.11);
  border-radius:26px;
  background:linear-gradient(135deg,#fff 0%,var(--green-50) 100%);
}
.wmintegratecontext-content,
.wmintegrateauto-content,
.wmintegrateapi-content,
.wmintegratepersonal-content,
.wmintegratesync-content,
.wmintegratechannels-content{
  min-width:0;
}
.wmintegratecontext-number,
.wmintegrateauto-number,
.wmintegrateapi-number,
.wmintegratepersonal-number,
.wmintegratesync-number,
.wmintegratechannels-number{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:13px;
  border-radius:11px;
  background:var(--green-100);
  color:var(--green-700);
  font-size:9px;
  font-weight:900;
}
.wmintegratecontext-tag,
.wmintegrateauto-tag,
.wmintegrateapi-tag,
.wmintegratepersonal-tag,
.wmintegratesync-tag,
.wmintegratechannels-tag{
  display:block;
  margin-bottom:8px;
  color:var(--green-700);
  font-size: 9px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.wmintegratecontext-content h2,
.wmintegrateauto-content h2,
.wmintegrateapi-content h2,
.wmintegratepersonal-content h2,
.wmintegratesync-content h2,
.wmintegratechannels-content h2{
  max-width:570px;
  margin:0;
  color:var(--ink-900);
  font-family:var(--font-display);
  font-size:clamp(28px,3.2vw,35px);
  line-height:1.08;
  letter-spacing:-.035em;
  font-weight: 800;
}
.wmintegratecontext-content h2 span,
.wmintegrateauto-content h2 span,
.wmintegrateapi-content h2 span,
.wmintegratepersonal-content h2 span,
.wmintegratesync-content h2 span,
.wmintegratechannels-content h2 span{
  color:var(--green-600);
}
.wmintegratecontext-content>p,
.wmintegrateauto-content>p,
.wmintegrateapi-content>p,
.wmintegratepersonal-content>p,
.wmintegratesync-content>p,
.wmintegratechannels-content>p{
  max-width:570px;
  margin:13px 0 0;
  color:var(--ink-500);
  font-size:16px;
  line-height:1.7;
}
.wmintegratecontext-points,
.wmintegrateauto-points,
.wmintegrateapi-points,
.wmintegratepersonal-points,
.wmintegratesync-points,
.wmintegratechannels-points{
  display:grid;
  gap:9px;
  margin-top:20px;
}
.wmintegratecontext-points span,
.wmintegrateauto-points span,
.wmintegrateapi-points span,
.wmintegratepersonal-points span,
.wmintegratesync-points span,
.wmintegratechannels-points span{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--ink-700);
  font-size:13px;
  font-weight:700;
}
.wmintegratecontext-points i,
.wmintegrateauto-points i,
.wmintegrateapi-points i,
.wmintegratepersonal-points i,
.wmintegratesync-points i,
.wmintegratechannels-points i{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--green-500);
  box-shadow:0 0 0 4px rgba(18,183,106,.08);
}
.wmintegratecontext-image-frame,
.wmintegrateauto-image-frame,
.wmintegrateapi-image-frame,
.wmintegratepersonal-image-frame,
.wmintegratesync-image-frame,
.wmintegratechannels-image-frame{
  overflow:hidden;
  /* padding:10px; */
  border:1px solid rgba(18,183,106,.13);
  border-radius:20px;
  background:#fff;
  box-shadow:0 16px 38px rgba(16,24,40,.055);
}
.wmintegratecontext-image,
.wmintegrateauto-image,
.wmintegrateapi-image,
.wmintegratepersonal-image,
.wmintegratesync-image,
.wmintegratechannels-image{
  display:block;
  width:100%;
  height:auto;
  /* aspect-ratio:4/3; */
  object-fit:cover;
  border-radius:13px;
}

/* Slight visual variation */
.wmintegrateauto-row,
.wmintegratepersonal-row,
.wmintegratechannels-row{
  background:linear-gradient(135deg,var(--green-50) 0%,#fff 100%);
}


/* Request integration */

.wmreqint-section,
.wmreqint-section *,
.wmreqint-section *::before,
.wmreqint-section *::after {
box-sizing: border-box;
}

.wmreqint-section {
position: relative;
padding: 72px 0;
overflow: hidden;
background:
  radial-gradient(circle at 7% 12%, rgba(18, 183, 106, 0.07), transparent 27%),
  radial-gradient(circle at 94% 88%, rgba(247, 144, 9, 0.05), transparent 24%),
  var(--bg);
}

.wmreqint-section > .wrap {
position: relative;
z-index: 2;
}


/* Main shell */

.wmreqint-shell {
position: relative;
isolation: isolate;
overflow: hidden;
padding: 44px 48px 39px;
border: 1px solid rgba(16, 24, 40, 0.08);
border-radius: 26px;
background:
  radial-gradient(circle at 100% 0%, rgba(18, 183, 106, 0.11), transparent 31%),
  radial-gradient(circle at 100% 100%, rgba(18, 183, 106, 0.07), transparent 24%),
  linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(249, 250, 251, 0.97));
box-shadow: 0 30px 65px -48px rgba(16, 24, 40, 0.48);
}

.wmreqint-shell::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, var(--green-400), var(--green-600), var(--amber-400));
pointer-events: none;
}

.wmreqint-shell::after {
content: "";
position: absolute;
right: -130px;
bottom: -185px;
z-index: -1;
width: 290px;
height: 290px;
border-radius: 50%;
background: rgba(18, 183, 106, 0.07);
pointer-events: none;
}


/* Content */

.wmreqint-copy {
width: 100%;
}

.wmreqint-eyebrow {
min-height: 30px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 13px;
border: 1px solid var(--green-100);
border-radius: 999px;
background: var(--green-50);
color: var(--green-700);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.wmreqint-eyebrow i {
width: 7px;
height: 7px;
flex: 0 0 7px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 5px rgba(18, 183, 106, 0.12);
}

.wmreqint-copy h2 {
width: 100%;
max-width: 1030px;
margin: 16px 0 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(32px, 4.2vw, 46px);
font-weight: 800;
line-height: 1.07;
letter-spacing: -0.045em;
text-wrap: balance;
}

.wmreqint-copy h2 span {
display: block;
margin-top: 3px;
color: var(--green-600);
}

.wmreqint-copy p {
width: 100%;
max-width: 900px;
margin: 15px 0 0;
color: var(--ink-500);
font-size: 14.5px;
line-height: 1.68;
text-wrap: pretty;
}


/* Form */

.wmreqint-form {
width: 100%;
margin-top: 27px;
}

.wmreqint-fields {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}

.wmreqint-field {
min-width: 0;
}

.wmreqint-field label {
display: block;
margin-bottom: 7px;
color: var(--ink-700);
font-size: 10.5px;
font-weight: 700;
}

.wmreqint-field label > span {
color: var(--amber-600);
}


/* Inputs */

.wmreqint-input-wrap {
position: relative;
display: flex;
align-items: center;
}

.wmreqint-input-icon {
position: absolute;
left: 13px;
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: 10px;
background: var(--green-50);
color: var(--green-700);
pointer-events: none;
transition: background 0.2s ease, color 0.2s ease;
}

.wmreqint-input-icon svg {
width: 17px;
height: 17px;
}

.wmreqint-input-wrap input {
width: 100%;
min-height: 53px;
padding: 0 16px 0 58px;
border: 1px solid var(--ink-200);
border-radius: 13px;
outline: none;
background: var(--surface);
color: var(--ink-800);
font-family: var(--font-display);
font-size: 13px;
box-shadow: 0 10px 22px -20px rgba(16, 24, 40, 0.48);
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wmreqint-input-wrap input::placeholder {
color: var(--ink-400);
}

.wmreqint-input-wrap input:hover {
border-color: var(--ink-300);
}

.wmreqint-input-wrap input:focus {
border-color: var(--green-500);
background: #ffffff;
box-shadow:
  0 0 0 4px rgba(18, 183, 106, 0.10),
  0 13px 25px -20px rgba(3, 152, 85, 0.42);
}

.wmreqint-input-wrap:focus-within .wmreqint-input-icon {
background: var(--green-100);
}


/* Footer */

.wmreqint-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 18px;
}

.wmreqint-note {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}

.wmreqint-note > span {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
border-radius: 9px;
background: var(--ink-100);
color: var(--ink-500);
}

.wmreqint-note svg {
width: 15px;
height: 15px;
}

.wmreqint-note p {
max-width: 560px;
margin: 0;
color: var(--ink-400);
font-size: 9.5px;
line-height: 1.45;
}


/* Button */

.wmreqint-submit {
min-height: 47px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
flex: 0 0 auto;
padding: 0 21px;
border: 1px solid var(--green-600);
border-radius: 12px;
background: var(--green-600);
color: #ffffff;
font-family: var(--font-display);
font-size: 11.5px;
font-weight: 800;
cursor: pointer;
box-shadow: 0 17px 30px -20px rgba(3, 152, 85, 0.78);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.wmreqint-submit:hover {
border-color: var(--green-700);
background: var(--green-700);
transform: translateY(-2px);
box-shadow: 0 21px 35px -20px rgba(3, 152, 85, 0.82);
}

.wmreqint-submit:active {
transform: translateY(0);
}

.wmreqint-submit > span {
font-size: 16px;
transition: transform 0.2s ease;
}

.wmreqint-submit:hover > span {
transform: translateX(3px);
}



/* Whatsapp Broadcast Page CSS  */


/* =========================================================
  THIRD SECTION - BROADCAST VALUE
  ========================================================= */

.wmbcastvalue-section,
.wmbcastvalue-section *,
.wmbcastreach-section,
.wmbcastreach-section *,
.wmbcasttemplate-section,
.wmbcasttemplate-section *,
.wmbcastanalytics-section,
.wmbcastanalytics-section *,
.wmbcastretarget-section,
.wmbcastretarget-section * {
  box-sizing: border-box;
}

.wmbcastvalue-section {
  position: relative;
  padding: 86px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmbcastvalue-shell {
  position: relative;
  overflow: hidden;
  padding: 52px;
  border: 1px solid var(--green-100);
  border-radius: 28px;
  background:
      radial-gradient(circle at 0% 0%, rgba(18, 183, 106, 0.11), transparent 27%),
      radial-gradient(circle at 100% 100%, rgba(50, 213, 131, 0.07), transparent 25%),
      linear-gradient(145deg, #f8fffb, var(--surface));
  box-shadow: 0 30px 70px -50px rgba(16, 24, 40, 0.4);
}

.wmbcastvalue-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 38px;
  left: 38px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, transparent, var(--green-200), var(--green-400), var(--green-600), var(--green-400), transparent);
}

.wmbcastvalue-heading {
  max-width: 760px;
  margin: 0 auto 37px;
  text-align: center;
}

.wmbcastvalue-eyebrow,
.wmbcastreach-tag,
.wmbcasttemplate-tag,
.wmbcastanalytics-tag,
.wmbcastretarget-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wmbcastvalue-eyebrow i,
.wmbcastreach-tag::before,
.wmbcasttemplate-tag::before,
.wmbcastanalytics-tag::before,
.wmbcastretarget-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
}

.wmbcastvalue-heading h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.wmbcastvalue-heading h2 span {
  color: var(--green-600);
}

.wmbcastvalue-heading p {
  max-width: 650px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14.5px;
  line-height: 1.7;
}

.wmbcastvalue-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 17px;
}

.wmbcastvalue-card {
  position: relative;
  min-width: 0;
  padding: 25px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 36px -31px rgba(16, 24, 40, 0.5);
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.wmbcastvalue-card:hover {
  border-color: var(--green-200);
  box-shadow: 0 25px 46px -31px rgba(3, 152, 85, 0.34);
  transform: translateY(-4px);
}

.wmbcastvalue-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmbcastvalue-icon svg {
  width: 21px;
  height: 21px;
}

.wmbcastvalue-card strong {
  display: block;
  margin-top: 18px;
  color: var(--ink-900);
  font-size: 15px;
  font-weight: 800;
}

.wmbcastvalue-card p {
  margin-top: 7px;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.65;
}


/*   SHARED FEATURE SECTIONS  */

.wmbcastreach-section,
.wmbcasttemplate-section,
.wmbcastanalytics-section,
.wmbcastretarget-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

.wmbcastreach-section,
.wmbcastanalytics-section {
  background: var(--bg);
}

.wmbcasttemplate-section,
.wmbcastretarget-section {
  background: var(--surface);
}

.wmbcastreach-row,
.wmbcasttemplate-row,
.wmbcastanalytics-row,
.wmbcastretarget-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 68px;
}

.wmbcastreach-content,
.wmbcasttemplate-content,
.wmbcastanalytics-content,
.wmbcastretarget-content {
  min-width: 0;
}

.wmbcastreach-content h2,
.wmbcasttemplate-content h2,
.wmbcastanalytics-content h2,
.wmbcastretarget-content h2 {
  max-width: 550px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(31px, 3.7vw, 35px);
  font-weight: 800;
  line-height: 1.09;
  letter-spacing: -0.043em;
  text-wrap: balance;
}

.wmbcastreach-content h2 span,
.wmbcasttemplate-content h2 span,
.wmbcastanalytics-content h2 span,
.wmbcastretarget-content h2 span {
  color: var(--green-600);
}

.wmbcastreach-content > p,
.wmbcasttemplate-content > p,
.wmbcastanalytics-content > p,
.wmbcastretarget-content > p {
  max-width: 540px;
  margin-top: 16px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.72;
}

.wmbcastreach-points,
.wmbcasttemplate-points,
.wmbcastanalytics-points,
.wmbcastretarget-points {
  display: grid;
  gap: 9px;
  margin-top: 23px;
}

.wmbcastreach-points span,
.wmbcasttemplate-points span,
.wmbcastanalytics-points span,
.wmbcastretarget-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 650;
}

.wmbcastreach-points i,
.wmbcasttemplate-points i,
.wmbcastanalytics-points i,
.wmbcastretarget-points i {
  position: relative;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 8px;
  background: var(--green-100);
}

.wmbcastreach-points i::after,
.wmbcasttemplate-points i::after,
.wmbcastanalytics-points i::after,
.wmbcastretarget-points i::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(45deg);
}


/* =========================================================
  FEATURE VISUALS
  ========================================================= */

.wmbcastreach-visual,
.wmbcasttemplate-visual,
.wmbcastanalytics-visual,
.wmbcastretarget-visual {
  position: relative;
  min-width: 0;
}

.wmbcastreach-glow,
.wmbcasttemplate-glow,
.wmbcastanalytics-glow,
.wmbcastretarget-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  background: rgba(18, 183, 106, 0.13);
  filter: blur(45px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wmbcasttemplate-glow {
  background: rgba(59, 130, 246, 0.11);
}

.wmbcastanalytics-glow {
  background: rgba(18, 183, 106, 0.12);
}

.wmbcastretarget-glow {
  background: rgba(18, 183, 106, 0.14);
}

.wmbcastreach-image-frame,
.wmbcasttemplate-image-frame,
.wmbcastanalytics-image-frame,
.wmbcastretarget-image-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 60px -40px rgba(16, 24, 40, 0.5);
}

.wmbcastreach-image-frame img,
.wmbcasttemplate-image-frame img,
.wmbcastanalytics-image-frame img,
.wmbcastretarget-image-frame img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: cover;
}

.wmbcastreach-image-label,
.wmbcasttemplate-image-label,
.wmbcastanalytics-image-label,
.wmbcastretarget-image-label {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 3;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--green-700);
  box-shadow: 0 10px 24px -17px rgba(16, 24, 40, 0.5);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 800;
}

.wmbcastreach-image-label i,
.wmbcasttemplate-image-label i,
.wmbcastanalytics-image-label i,
.wmbcastretarget-image-label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}



/*  BROADCAST STORYBOARD  */

.wmstory-section,
.wmstory-section *,
.wmstory-section *::before,
.wmstory-section *::after {
  box-sizing: border-box;
}

.wmstory-section {
  position: relative;
  padding: 96px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 50% 20%, rgba(18, 183, 106, .08), transparent 28%),
      linear-gradient(180deg, var(--surface), var(--bg));
}

.wmstory-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(16, 24, 40, .06) .7px, transparent .7px);
  background-size: 26px 26px;
  opacity: .07;
}

.wmstory-section > .wrap {
  position: relative;
  z-index: 2;
}


.wmstory-heading {
  max-width: 820px;
  margin: 0 auto 48px;
  text-align: center;
}

.wmstory-eyebrow {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmstory-eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .12);
}

.wmstory-heading h2 {
  margin: 16px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px, 4.6vw, 41px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.047em;
  text-wrap: balance;
}

.wmstory-heading h2 span {
  color: var(--green-600);
}

.wmstory-heading p {
  max-width: 680px;
  margin: 15px auto 0;
  color: var(--ink-500);
  font-size: 14.5px;
  line-height: 1.72;
}


/* MAIN STORY STAGE  */

.wmstory-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.6fr) minmax(220px, .72fr);
  grid-template-rows: auto auto;
  gap: 22px 28px;
  align-items: center;
  padding: 42px;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 30px;
  background:
      radial-gradient(circle at 50% 50%, rgba(18, 183, 106, .08), transparent 32%),
      rgba(255, 255, 255, .92);
  box-shadow: 0 34px 75px -55px rgba(16, 24, 40, .55);
}


/*    SIDE NODES  */

.wmstory-node {
  position: relative;
  z-index: 3;
  min-width: 0;
  padding: 19px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 40px -32px rgba(16, 24, 40, .5);
  transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.wmstory-node:hover {
  border-color: var(--green-200);
  box-shadow: 0 25px 46px -32px rgba(3, 152, 85, .26);
  transform: translateY(-4px);
}

.wmstory-node--audience {
  grid-column: 1;
  grid-row: 1;
}

.wmstory-node--message {
  grid-column: 3;
  grid-row: 1;
}

.wmstory-node--delivery {
  grid-column: 1;
  grid-row: 2;
}

.wmstory-node--insights {
  grid-column: 3;
  grid-row: 2;
}


/* Node header */

.wmstory-node-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wmstory-node-icon {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmstory-node-icon svg {
  width: 18px;
  height: 18px;
}

.wmstory-node-label {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}


/* Node content */

.wmstory-node h3 {
  margin: 14px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.23;
  letter-spacing: -.027em;
}

.wmstory-node p {
  margin-top: 8px;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.6;
}

.wmstory-node-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.wmstory-node-tags span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 700;
}


/*  CENTER SHOWCASE  */

.wmstory-center {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  z-index: 4;
  min-width: 0;
}

.wmstory-center::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90%;
  height: 85%;
  border-radius: 50%;
  background: rgba(18, 183, 106, .12);
  filter: blur(48px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wmstory-center-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 65px -42px rgba(16, 24, 40, .52);
}


/* Topbar */

.wmstory-center-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 17px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--surface), var(--green-50));
}

.wmstory-center-topbar > div span,
.wmstory-center-topbar > div strong {
  display: block;
}

.wmstory-center-topbar > div span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmstory-center-topbar > div strong {
  margin-top: 3px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.wmstory-center-status {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.wmstory-center-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .12);
}


/* Main visual */

.wmstory-center-image {
  position: relative;
  height: 455px;
  overflow: hidden;
  background: var(--ink-50);
}

.wmstory-center-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


/* Footer */

.wmstory-center-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 13px 15px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.wmstory-center-footer span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 700;
}

.wmstory-center-footer i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
}


/*  CONNECTOR LINES  */

.wmstory-line {
  position: absolute;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--green-200), var(--green-400));
  opacity: .85;
}

.wmstory-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-100);
  transform: translateY(-50%);
}

.wmstory-line--lt {
  top: 29%;
  left: 23%;
  width: 12%;
}

.wmstory-line--lt::after {
  right: 0;
}

.wmstory-line--rt {
  top: 29%;
  right: 23%;
  width: 12%;
}

.wmstory-line--rt {
  background: linear-gradient(90deg, var(--green-400), var(--green-200));
}

.wmstory-line--rt::after {
  left: 0;
}

.wmstory-line--lb {
  bottom: 29%;
  left: 23%;
  width: 12%;
}

.wmstory-line--lb::after {
  right: 0;
}

.wmstory-line--rb {
  right: 23%;
  bottom: 29%;
  width: 12%;
  background: linear-gradient(90deg, var(--green-400), var(--green-200));
}

.wmstory-line--rb::after {
  left: 0;
}



/* Shared Team Inbox Page CSS  */


/*    SECOND SECTION  */

.wmkiboxcap-section,
.wmkiboxcap-section *,
.wmkiboxcap-section *::before,
.wmkiboxcap-section *::after {
  box-sizing: border-box;
}

.wmkiboxcap-section {
  position: relative;
  padding: 82px 0 88px;
  overflow: hidden;
  background: var(--surface);
}

.wmkiboxcap-section::before {
  content: "";
  position: absolute;
  top: -180px;
  left: 50%;
  width: 720px;
  height: 360px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .07);
  filter: blur(55px);
  transform: translateX(-50%);
  pointer-events: none;
}

.wmkiboxcap-section > .wrap {
  position: relative;
  z-index: 2;
}


/* Heading */

.wmkiboxcap-head {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.wmkiboxcap-eyebrow {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmkiboxcap-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .12);
}

.wmkiboxcap-head h2 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px, 4.3vw, 41px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmkiboxcap-head h2 span {
  color: var(--green-600);
}

.wmkiboxcap-head p {
  max-width: 630px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.7;
}


/* Cards */

.wmkiboxcap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wmkiboxcap-card {
  position: relative;
  min-width: 0;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 22px 20px;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .09);
  border-radius: 19px;
  background:
      radial-gradient(circle at 100% 100%, rgba(18, 183, 106, .07), transparent 37%),
      var(--surface);
  box-shadow: 0 18px 40px -33px rgba(16, 24, 40, .5);
  transition:
      transform .28s ease,
      border-color .28s ease,
      box-shadow .28s ease;
}

.wmkiboxcap-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-300),
      transparent
  );
  opacity: 0;
  transition: opacity .28s ease;
}

.wmkiboxcap-card:hover {
  border-color: var(--green-200);
  box-shadow: 0 27px 50px -33px rgba(3, 152, 85, .3);
  transform: translateY(-5px);
}

.wmkiboxcap-card:hover::before {
  opacity: 1;
}

.wmkiboxcap-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkiboxcap-icon svg {
  width: 19px;
  height: 19px;
}

.wmkiboxcap-copy {
  margin-top: 17px;
}

.wmkiboxcap-copy h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.025em;
}

.wmkiboxcap-copy p {
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.58;
}

.wmkiboxcap-arrow {
  position: absolute;
  top: 22px;
  right: 20px;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--ink-50);
  color: var(--ink-400);
  font-size: 13px;
  transition:
      color .25s ease,
      background .25s ease,
      border-color .25s ease,
      transform .25s ease;
}

.wmkiboxcap-card:hover .wmkiboxcap-arrow {
  border-color: var(--green-100);
  background: var(--green-50);
  color: var(--green-700);
  transform: translate(2px, -2px);
}


/*    THIRD - SIXTH FEATURE SECTIONS  */

.wmkiboxfeat-section,
.wmkiboxfeat-section *,
.wmkiboxfeat-section *::before,
.wmkiboxfeat-section *::after {
  box-sizing: border-box;
}

.wmkiboxfeat-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkiboxfeat-section--soft {
  background:
      radial-gradient(circle at 90% 50%, rgba(18, 183, 106, .055), transparent 27%),
      var(--bg);
}


/* Layout */

.wmkiboxfeat-layout {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 72px;
}

.wmkiboxfeat-layout--reverse {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
}

.wmkiboxfeat-layout--reverse .wmkiboxfeat-content {
  order: 2;
}

.wmkiboxfeat-layout--reverse .wmkiboxfeat-visual {
  order: 1;
}


/* Content */

.wmkiboxfeat-content {
  min-width: 0;
}

.wmkiboxfeat-tag {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkiboxfeat-tag i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkiboxfeat-content h2 {
  max-width: 550px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(31px, 3.8vw, 37px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkiboxfeat-content h2 span {
  color: var(--green-600);
}

.wmkiboxfeat-content > p {
  max-width: 535px;
  margin: 15px 0 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.72;
}


/* Points */

.wmkiboxfeat-list {
  display: grid;
  gap: 9px;
  margin-top: 23px;
}

.wmkiboxfeat-list span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-700);
  font-size: 11.5px;
  font-weight: 650;
}

.wmkiboxfeat-list i {
  position: relative;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 8px;
  background: var(--green-100);
}

.wmkiboxfeat-list i::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(45deg);
}


/* Visual */

.wmkiboxfeat-visual {
  position: relative;
  min-width: 0;
}

.wmkiboxfeat-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82%;
  height: 78%;
  border-radius: 50%;
  background: rgba(18, 183, 106, .11);
  filter: blur(48px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wmkiboxfeat-image {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 30px 62px -43px rgba(16, 24, 40, .52);
}

.wmkiboxfeat-image::before {
  content: "";
  position: absolute;
  top: 0;
  right: 10%;
  left: 10%;
  z-index: 3;
  height: 2px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-300),
      var(--green-500),
      var(--green-300),
      transparent
  );
}

.wmkiboxfeat-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}


/* Image status */

.wmkiboxfeat-status {
  position: absolute;
  top: 23px;
  left: 23px;
  z-index: 4;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  color: var(--green-700);
  box-shadow: 0 11px 24px -17px rgba(16, 24, 40, .5);
  backdrop-filter: blur(10px);
  font-size: 9px;
  font-weight: 800;
}

.wmkiboxfeat-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .11);
}


/* Whatsapp Business Calling Page CSS */
/*  SHARED SETUP */

.wmkcallintro-section,
.wmkcallimpact-section,
.wmkcallfeatures-section,
.wmkcallchoice-section,
.wmkcallsetup-section,
.wmkcallrules-section,
.wmkcallintro-section *,
.wmkcallimpact-section *,
.wmkcallfeatures-section *,
.wmkcallchoice-section *,
.wmkcallsetup-section *,
.wmkcallrules-section *,
.wmkcallintro-section *::before,
.wmkcallimpact-section *::before,
.wmkcallfeatures-section *::before,
.wmkcallchoice-section *::before,
.wmkcallsetup-section *::before,
.wmkcallrules-section *::before,
.wmkcallintro-section *::after,
.wmkcallimpact-section *::after,
.wmkcallfeatures-section *::after,
.wmkcallchoice-section *::after,
.wmkcallsetup-section *::after,
.wmkcallrules-section *::after {
  box-sizing: border-box;
}


/*   COMMON EYEBROWS  */

.wmkcallintro-eyebrow,
.wmkcallimpact-eyebrow,
.wmkcallfeatures-eyebrow,
.wmkcallchoice-eyebrow,
.wmkcallsetup-eyebrow,
.wmkcallrules-eyebrow {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkcallintro-eyebrow i,
.wmkcallimpact-eyebrow i,
.wmkcallfeatures-eyebrow i,
.wmkcallchoice-eyebrow i,
.wmkcallsetup-eyebrow i,
.wmkcallrules-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .11);
}


/*    SECOND SECTION  */

.wmkcallintro-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkcallintro-section::before {
  content: "";
  position: absolute;
  top: -220px;
  right: -180px;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .07);
  filter: blur(45px);
  pointer-events: none;
}

.wmkcallintro-section > .wrap {
  position: relative;
  z-index: 2;
}

.wmkcallintro-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, .78fr);
  align-items: center;
  gap: 64px;
  padding: 48px;
  border: 1px solid var(--green-100);
  border-radius: 28px;
  background:
      radial-gradient(circle at 100% 0%, rgba(18, 183, 106, .10), transparent 30%),
      linear-gradient(145deg, #f8fffb, var(--surface));
  box-shadow: 0 32px 68px -50px rgba(16, 24, 40, .48);
}

.wmkcallintro-content {
  min-width: 0;
}

.wmkcallintro-content h2 {
  max-width: 670px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(33px, 4.2vw, 35px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmkcallintro-content h2 span {
  color: var(--green-600);
}

.wmkcallintro-content > p {
  max-width: 650px;
  margin: 14px 0 0;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.72;
}

.wmkcallintro-checks {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.wmkcallintro-checks span {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-700);
  font-size: 10.5px;
  font-weight: 700;
}

.wmkcallintro-checks i {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: block;
  border-radius: 7px;
  background: var(--green-100);
}

.wmkcallintro-checks i::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(45deg);
}


/* Overview Panel */

.wmkcallintro-panel {
  min-width: 0;
  padding: 21px;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 24px 48px -35px rgba(16, 24, 40, .48);
}

.wmkcallintro-panel-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.wmkcallintro-panel-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkcallintro-panel-icon svg {
  width: 20px;
  height: 20px;
}

.wmkcallintro-panel-head > div {
  min-width: 0;
}

.wmkcallintro-panel-head > div span,
.wmkcallintro-panel-head > div strong {
  display: block;
}

.wmkcallintro-panel-head > div span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkcallintro-panel-head > div strong {
  margin-top: 3px;
  color: var(--ink-900);
  font-size: 11px;
  line-height: 1.4;
}

.wmkcallintro-live {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
}

.wmkcallintro-live i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}


/* Chat To Call */

.wmkcallintro-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 19px;
}

.wmkcallintro-flow-card {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--ink-50);
}

.wmkcallintro-flow-card--active {
  border-color: var(--green-100);
  background: var(--green-50);
}

.wmkcallintro-flow-card span,
.wmkcallintro-flow-card strong {
  display: block;
}

.wmkcallintro-flow-card span {
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wmkcallintro-flow-card strong {
  margin-top: 4px;
  color: var(--ink-800);
  font-size: 9px;
}

.wmkcallintro-flow-arrow {
  display: grid;
  place-items: center;
  color: var(--green-600);
  font-size: 18px;
}

.wmkcallintro-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.wmkcallintro-mini {
  min-width: 0;
  padding: 12px;
  border-radius: 11px;
  background: var(--ink-50);
}

.wmkcallintro-mini span,
.wmkcallintro-mini strong {
  display: block;
}

.wmkcallintro-mini span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wmkcallintro-mini strong {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 9px;
  line-height: 1.4;
}


/*  THIRD SECTION  */

.wmkcallimpact-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: var(--bg);
}

.wmkcallimpact-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .65fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 38px;
}

.wmkcallimpact-title {
  min-width: 0;
}

.wmkcallimpact-title h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 35px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkcallimpact-title h2 span {
  color: var(--green-600);
}

.wmkcallimpact-head > p {
  margin: 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.7;
}

.wmkcallimpact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wmkcallimpact-card {
  position: relative;
  min-width: 0;
  padding: 23px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 18px 38px -32px rgba(16, 24, 40, .44);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wmkcallimpact-card:hover {
  transform: translateY(-5px);
  border-color: var(--green-200);
  box-shadow: 0 26px 46px -31px rgba(3, 152, 85, .25);
}

.wmkcallimpact-icon,
.wmkcallfeatures-icon,
.wmkcallchoice-icon,
.wmkcallrules-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkcallimpact-icon svg,
.wmkcallfeatures-icon svg,
.wmkcallchoice-icon svg,
.wmkcallrules-icon svg {
  width: 19px;
  height: 19px;
}

.wmkcallimpact-label {
  display: block;
  margin-top: 15px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmkcallimpact-card h3 {
  margin: 6px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
}

.wmkcallimpact-card p {
  margin: 8px 0 0;
  color: var(--ink-500);
  font-size: 9.5px;
  line-height: 1.58;
}


/*  FOURTH SECTION  */

.wmkcallfeatures-section {
  position: relative;
  padding: 94px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkcallfeatures-heading {
  max-width: 790px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmkcallfeatures-heading h2,
.wmkcallchoice-heading h2,
.wmkcallsetup-head h2,
.wmkcallrules-heading h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 37px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkcallfeatures-heading h2 span,
.wmkcallchoice-heading h2 span,
.wmkcallsetup-head h2 span,
.wmkcallrules-heading h2 span {
  color: var(--green-600);
}

.wmkcallfeatures-heading p,
.wmkcallchoice-heading p,
.wmkcallrules-heading p {
  max-width: 660px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.7;
}

.wmkcallfeatures-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.wmkcallfeatures-card {
  position: relative;
  min-width: 0;
  min-height: 156px;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background:
      radial-gradient(circle at 100% 100%, rgba(18, 183, 106, .055), transparent 38%),
      var(--surface);
  box-shadow: 0 17px 34px -30px rgba(16, 24, 40, .45);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wmkcallfeatures-card:hover {
  transform: translateY(-4px);
  border-color: var(--green-200);
  box-shadow: 0 25px 44px -30px rgba(3, 152, 85, .25);
}

.wmkcallfeatures-card--featured {
  grid-column: auto;
  display: block;
}

.wmkcallfeatures-label {
  display: block;
  margin-top: 15px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmkcallfeatures-card h3 {
  margin: 15px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.32;
}

.wmkcallfeatures-card p {
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 9.5px;
  line-height: 1.58;
}


/*  FIFTH SECTION  */

.wmkcallchoice-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: var(--bg);
}

.wmkcallchoice-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.wmkcallchoice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
}

.wmkcallchoice-card {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--green-100);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--surface), var(--green-50));
}

.wmkcallchoice-card--large {
  min-height: 100%;
  padding: 30px;
}

.wmkcallchoice-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.wmkcallchoice-card-top > span:last-child {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wmkcallchoice-card h3 {
  margin: 16px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.wmkcallchoice-card--large h3 {
  max-width: 540px;
  font-size: 27px;
  line-height: 1.15;
}

.wmkcallchoice-card p {
  margin: 8px 0 0;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.62;
}

.wmkcallchoice-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.wmkcallchoice-mini span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 750;
}

.wmkcallchoice-mini i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkcallchoice-stack {
  display: grid;
  gap: 16px;
}


/*  SIXTH SECTION  */

.wmkcallsetup-section {
  position: relative;
  padding: 94px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkcallsetup-shell {
  position: relative;
  overflow: hidden;
  padding: 46px;
  border: 1px solid var(--green-100);
  border-radius: 30px;
  background:
      radial-gradient(circle at 100% 0%, rgba(18, 183, 106, .10), transparent 28%),
      radial-gradient(circle at 0% 100%, rgba(50, 213, 131, .05), transparent 25%),
      linear-gradient(145deg, #f8fffb, var(--surface));
  box-shadow: 0 34px 72px -50px rgba(16, 24, 40, .48);
}

.wmkcallsetup-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 7%;
  left: 7%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-200),
      var(--green-500),
      var(--green-200),
      transparent
  );
}

.wmkcallsetup-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: end;
  gap: 48px;
  padding-bottom: 31px;
  border-bottom: 1px solid rgba(16, 24, 40, .07);
}

.wmkcallsetup-head {
  max-width: 730px;
  min-width: 0;
}

.wmkcallsetup-head > p {
  max-width: 640px;
  margin: 14px 0 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.7;
}

.wmkcallsetup-overview {
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 20px 38px -31px rgba(16, 24, 40, .42);
}

.wmkcallsetup-overview-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkcallsetup-overview-icon svg {
  width: 20px;
  height: 20px;
}

.wmkcallsetup-overview > div {
  margin-top: 12px;
}

.wmkcallsetup-overview > div span,
.wmkcallsetup-overview > div strong {
  display: block;
}

.wmkcallsetup-overview > div span {
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wmkcallsetup-overview > div strong {
  margin-top: 3px;
  color: var(--ink-900);
  font-size: 11px;
  line-height: 1.4;
}

.wmkcallsetup-overview-status {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 13px;
  padding: 0 9px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.wmkcallsetup-overview-status i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkcallsetup-flow {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  margin-top: 27px;
}

.wmkcallsetup-line {
  position: absolute;
  top: 31px;
  bottom: 31px;
  left: 39px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(
      var(--green-100),
      var(--green-400),
      var(--green-500),
      var(--green-100)
  );
  pointer-events: none;
}

.wmkcallsetup-step {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 125px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid rgba(16, 24, 40, .075);
  border-radius: 17px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 17px 35px -31px rgba(16, 24, 40, .45);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.wmkcallsetup-step:hover {
  transform: translateX(5px);
  border-color: var(--green-200);
  box-shadow: 0 24px 45px -31px rgba(3, 152, 85, .25);
}

.wmkcallsetup-step-side {
  display: flex;
  align-items: center;
  gap: 9px;
}

.wmkcallsetup-step-icon {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 13px;
  background: var(--surface);
  color: var(--green-700);
}

.wmkcallsetup-step-icon svg {
  width: 19px;
  height: 19px;
}

.wmkcallsetup-marker {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.wmkcallsetup-step-body {
  min-width: 0;
}

.wmkcallsetup-step-body h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.wmkcallsetup-step-body p {
  margin: 5px 0 0;
  color: var(--ink-500);
  font-size: 9.5px;
  line-height: 1.58;
}

.wmkcallsetup-step-note {
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 750;
}

.wmkcallsetup-step-note i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}


/* Setup Footer */

.wmkcallsetup-footer {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 24px auto 0;
  padding: 18px;
  border: 1px solid var(--green-100);
  border-radius: 18px;
  background: linear-gradient(
      135deg,
      rgba(18, 183, 106, .06),
      rgba(18, 183, 106, .02)
  );
  box-shadow: 0 18px 38px -32px rgba(16, 24, 40, .32);
}

.wmkcallsetup-footer-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.wmkcallsetup-footer-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 14px;
  background: var(--surface);
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
}

.wmkcallsetup-footer-icon svg {
  width: 20px;
  height: 20px;
}

.wmkcallsetup-footer-copy {
  min-width: 0;
}

.wmkcallsetup-footer-copy strong {
  display: block;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.wmkcallsetup-footer-copy p {
  margin: 5px 0 0;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.65;
}

.wmkcallsetup-footer-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 24, 40, .07);
}

.wmkcallsetup-footer-points span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--surface);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 750;
}

.wmkcallsetup-footer-points span i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}


/*   SEVENTH SECTION  */

.wmkcallrules-section {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background: var(--bg);
}

.wmkcallrules-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.wmkcallrules-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.wmkcallrules-card {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 17px 34px -31px rgba(16, 24, 40, .44);
}

.wmkcallrules-label {
  display: block;
  margin-top: 14px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmkcallrules-card h3 {
  margin: 6px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.wmkcallrules-card p {
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 9.5px;
  line-height: 1.58;
}



/*  ALTERNATING CALLING USE CASES  */

.wmcallflow-section,
.wmcallflow-section *,
.wmcallflow-section *::before,
.wmcallflow-section *::after {
  box-sizing: border-box;
}

.wmcallflow-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmcallflow-section--soft {
  background: var(--bg);
}

.wmcallflow-row {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 72px;
}

.wmcallflow-row--reverse {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.wmcallflow-row--reverse .wmcallflow-content {
  order: 2;
}

.wmcallflow-row--reverse .wmcallflow-visual {
  order: 1;
}

/* Content */

.wmcallflow-content {
  min-width: 0;
}

.wmcallflow-tag {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmcallflow-tag i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmcallflow-content h2 {
  max-width: 560px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(31px, 3.7vw, 35px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.042em;
  text-wrap: balance;
}

.wmcallflow-content h2 span {
  color: var(--green-600);
}

.wmcallflow-content > p {
  max-width: 535px;
  margin: 14px 0 0;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.72;
}


/* Points */

.wmcallflow-points {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.wmcallflow-points span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-700);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.wmcallflow-points i {
  position: relative;
  width: 23px;
  height: 23px;
  flex: 0 0 23px;
  border-radius: 8px;
  background: var(--green-100);
}

.wmcallflow-points i::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 8px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(45deg);
}


/* Visual */

.wmcallflow-visual {
  position: relative;
  min-width: 0;
}

.wmcallflow-visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 74%;
  border-radius: 50%;
  background: rgba(18, 183, 106, .10);
  filter: blur(45px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wmcallflow-image-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 58px -42px rgba(16, 24, 40, .48);
  transition: transform .3s ease, box-shadow .3s ease;
}

.wmcallflow-image-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 64px -42px rgba(3, 152, 85, .24);
}

.wmcallflow-image-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  border-radius: 15px;
}


/* Image badge */

.wmcallflow-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 4;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--green-700);
  box-shadow: 0 12px 23px -17px rgba(16, 24, 40, .5);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
}

.wmcallflow-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}

/*  TWELFTH SECTION  */

.wmkcallregion-section,
.wmkcallregion-section *,
.wmkcallregion-section *::before,
.wmkcallregion-section *::after {
  box-sizing: border-box;
}

.wmkcallregion-section {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkcallregion-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -160px;
  width: 470px;
  height: 470px;
  border-radius: 50%;
  background: rgba(18,183,106,.055);
  filter: blur(58px);
  pointer-events: none;
}

.wmkcallregion-section > .wrap {
  position: relative;
  z-index: 2;
}


/*  HEADING  */

.wmkcallregion-head {
  max-width: 820px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmkcallregion-tag {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkcallregion-tag i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkcallregion-head h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px,4vw,41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkcallregion-head h2 span {
  color: var(--green-600);
}

.wmkcallregion-head > p {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.72;
}


/*   AVAILABILITY BOARD */

.wmkcallregion-board {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 28px 58px -46px rgba(16,24,40,.45);
}

.wmkcallregion-board::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 2px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-200),
      var(--green-500),
      var(--green-200),
      transparent
  );
}


/*   ROW ITEM  */

.wmkcallregion-item {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0,1fr) minmax(300px,.75fr);
  align-items: center;
  gap: 22px;
  min-width: 0;
  padding: 27px 30px;
  background: var(--surface);
  transition: background .25s ease;
}

.wmkcallregion-item + .wmkcallregion-item {
  border-top: 1px solid var(--border);
}

.wmkcallregion-item:hover {
  background: linear-gradient(
      90deg,
      var(--surface),
      rgba(18,183,106,.035)
  );
}


/*  ICON  */

.wmkcallregion-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 15px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkcallregion-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}


/* MAIN TEXT  */

.wmkcallregion-main {
  min-width: 0;
}

.wmkcallregion-kicker {
  display: block;
  margin-bottom: 4px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkcallregion-main h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}

.wmkcallregion-main p {
  max-width: 580px;
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.62;
}


/*  RIGHT DETAILS  */

.wmkcallregion-side {
  display: grid;
  gap: 8px;
  padding-left: 22px;
  border-left: 1px solid var(--border);
}

.wmkcallregion-side span {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.wmkcallregion-side i {
  width: 7px;
  height: 7px;
  display: block;
  border-radius: 50%;
  background: var(--green-500);
}


/*   BOTTOM INFO BAR  */

.wmkcallregion-foot {
  display: grid;
  grid-template-columns: 44px minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  margin-top: 18px;
  padding: 14px 15px;
  border: 1px solid var(--green-100);
  border-radius: 15px;
  background: var(--green-50);
}

.wmkcallregion-foot-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--surface);
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
}

.wmkcallregion-foot-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.wmkcallregion-foot-content {
  min-width: 0;
}

.wmkcallregion-foot-content strong {
  display: block;
  color: var(--ink-900);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.4;
}

.wmkcallregion-foot-content p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}


/* =========================================================
  CTA
  ========================================================= */

.wmkcallregion-btn {
  min-height: 39px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid var(--green-600);
  border-radius: 10px;
  background: var(--green-600);
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  transition:
      background .25s ease,
      border-color .25s ease,
      transform .25s ease;
}

.wmkcallregion-btn:hover {
  border-color: var(--green-700);
  background: var(--green-700);
  transform: translateY(-2px);
}

.wmkcallregion-btn span {
  font-size: 13px;
  line-height: 1;
}


/* AI page styles */

/*  THIRD SECTION  */

.wmkaiassist-section,
.wmkaiassist-section *,
.wmkaiassist-section *::before,
.wmkaiassist-section *::after {
  box-sizing: border-box;
}

.wmkaiassist-section {
  position: relative;
  padding: 92px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkaiassist-section::before {
  content: "";
  position: absolute;
  top: -180px;
  right: -180px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .06);
  filter: blur(60px);
  pointer-events: none;
}

.wmkaiassist-section > .wrap {
  position: relative;
  z-index: 2;
}


/* Main Shell */

.wmkaiassist-shell {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  align-items: center;
  gap: 70px;
}


/* Content */

.wmkaiassist-content {
  min-width: 0;
}

.wmkaiassist-eyebrow {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkaiassist-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiassist-content h2 {
  max-width: 570px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px, 3.8vw, 35px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkaiassist-content h2 span {
  color: var(--green-600);
}

.wmkaiassist-description {
  max-width: 545px;
  margin: 15px 0 0;
  color: var(--ink-500);
  font-size: 13.5px;
  line-height: 1.72;
}


/* Feature List */

.wmkaiassist-features {
  display: grid;
  gap: 11px;
  margin-top: 25px;
}

.wmkaiassist-feature {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  transition: border-color .25s ease, transform .25s ease;
}

.wmkaiassist-feature:hover {
  transform: translateX(3px);
  border-color: var(--green-200);
}

.wmkaiassist-feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkaiassist-feature-icon svg {
  width: 19px;
  height: 19px;
}

.wmkaiassist-feature strong {
  display: block;
  color: var(--ink-900);
  font-size: 10.5px;
  font-weight: 800;
}

.wmkaiassist-feature p {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}


/* Visual */

.wmkaiassist-visual {
  position: relative;
  min-width: 0;
}

.wmkaiassist-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 82%;
  height: 74%;
  border-radius: 50%;
  background: rgba(18, 183, 106, .11);
  filter: blur(52px);
  transform: translate(-50%, -50%);
  pointer-events: none;
}


/* Image Frame */

.wmkaiassist-image-frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(16, 24, 40, .08);
  border-radius: 23px;
  background: var(--surface);
  box-shadow: 0 30px 60px -44px rgba(16, 24, 40, .48);
}

.wmkaiassist-image-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 5px 12px;
}

.wmkaiassist-image-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmkaiassist-image-head > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiassist-image-head strong {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 750;
}

.wmkaiassist-image-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}


/* Image Badge */

.wmkaiassist-image-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 4;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  color: var(--green-700);
  box-shadow: 0 12px 24px -17px rgba(16, 24, 40, .5);
  font-size: 9px;
  font-weight: 800;
}

.wmkaiassist-image-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}

/*  FOURTH SECTION  */

.wmkaiscale-section,
.wmkaiscale-section *,
.wmkaiscale-section *::before,
.wmkaiscale-section *::after {
  box-sizing: border-box;
}

.wmkaiscale-section {
  position: relative;
  padding: 94px 0;
  overflow: hidden;
  background: var(--bg);
}

.wmkaiscale-section::before {
  content: "";
  position: absolute;
  top: -200px;
  left: -160px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: rgba(18, 183, 106, .055);
  filter: blur(65px);
  pointer-events: none;
}

.wmkaiscale-section::after {
  content: "";
  position: absolute;
  right: -180px;
  bottom: -230px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: rgba(50, 213, 131, .045);
  filter: blur(70px);
  pointer-events: none;
}

.wmkaiscale-section > .wrap {
  position: relative;
  z-index: 2;
}


/* =========================================================
  HEADING
  ========================================================= */

.wmkaiscale-head {
  max-width: 810px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmkaiscale-eyebrow {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkaiscale-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18, 183, 106, .10);
}

.wmkaiscale-head h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkaiscale-head h2 span {
  color: var(--green-600);
}

.wmkaiscale-head > p {
  max-width: 680px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.72;
}


/* =========================================================
  GRID
  ========================================================= */

.wmkaiscale-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 16px;
}



.wmkaiscale-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background:
      radial-gradient(
          circle at 100% 100%,
          rgba(18, 183, 106, .055),
          transparent 36%
      ),
      var(--surface);
  box-shadow: 0 20px 42px -34px rgba(16, 24, 40, .44);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkaiscale-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 28px;
  left: 28px;
  height: 2px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-200),
      var(--green-500),
      var(--green-200),
      transparent
  );
  opacity: .8;
}

.wmkaiscale-card:hover {
  transform: translateY(-5px);
  border-color: var(--green-200);
  box-shadow: 0 30px 52px -34px rgba(3, 152, 85, .24);
}



.wmkaiscale-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
}

.wmkaiscale-icon {
  width: 47px;
  height: 47px;
  flex: 0 0 47px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 14px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkaiscale-icon svg {
  width: 21px;
  height: 21px;
}

.wmkaiscale-label {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}



.wmkaiscale-card h3 {
  margin: 20px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.28;
  letter-spacing: -.025em;
}

.wmkaiscale-card > p {
  margin: 10px 0 0;
  color: var(--ink-500);
  font-size: 10.5px;
  line-height: 1.65;
} 

.wmkaiscale-points {
  display: grid;
  gap: 9px;
  margin-top: 20px;
}

.wmkaiscale-points span {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
}

.wmkaiscale-points i {
  position: relative;
  width: 21px;
  height: 21px;
  display: block;
  border-radius: 7px;
  background: var(--green-100);
}

.wmkaiscale-points i::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--green-700);
  border-bottom: 2px solid var(--green-700);
  transform: rotate(45deg);
}



.wmkaiscale-foot {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}

.wmkaiscale-foot-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 10px;
  background: var(--ink-50);
  color: var(--green-700);
}

.wmkaiscale-foot-icon svg {
  width: 17px;
  height: 17px;
}

.wmkaiscale-foot strong,
.wmkaiscale-foot span {
  display: block;
}

.wmkaiscale-foot strong {
  color: var(--ink-900);
  font-size: 9px;
  font-weight: 800;
  line-height: 1.4;
}

.wmkaiscale-foot > div span {
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.45;
}



.wmkaiscale-bottom {
  max-width: 900px;
  display: grid;
  grid-template-columns: 45px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin: 24px auto 0;
  padding: 14px 16px;
  border: 1px solid var(--green-100);
  border-radius: 15px;
  background:
      linear-gradient(
          135deg,
          rgba(18, 183, 106, .07),
          rgba(255, 255, 255, .8)
      );
}

.wmkaiscale-bottom-icon {
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 12px;
  background: var(--surface);
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
}

.wmkaiscale-bottom-icon svg {
  width: 20px;
  height: 20px;
}

.wmkaiscale-bottom strong {
  display: block;
  color: var(--ink-900);
  font-size: 10.5px;
  font-weight: 800;
}

.wmkaiscale-bottom p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.55;
}


/* FIFTH - SEVENTH SECTIONS  */

.wmkaiway-section,
.wmkaiway-section *,
.wmkaiway-section *::before,
.wmkaiway-section *::after {
  box-sizing: border-box;
}

.wmkaiway-section {
  position: relative;
  padding: 78px 0;
  overflow: hidden;
}

.wmkaiway-section--copilot,
.wmkaiway-section--connect {
  background: var(--surface);
}

.wmkaiway-section--agents {
  background: var(--bg);
}


.wmkaiway-shell {
  position: relative;
  padding: 46px;
  overflow: hidden;
  border: 1px solid var(--green-100);
  border-radius: 28px;
  background:
      radial-gradient(circle at 100% 0%, rgba(18,183,106,.085), transparent 28%),
      linear-gradient(145deg, #fafffc, var(--surface));
  box-shadow: 0 30px 64px -50px rgba(16,24,40,.45);
}

.wmkaiway-shell--soft {
  background:
      radial-gradient(circle at 0% 100%, rgba(18,183,106,.07), transparent 30%),
      linear-gradient(145deg, var(--surface), #f8fffb);
}

.wmkaiway-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-200),
      var(--green-500),
      var(--green-200),
      transparent
  );
}


/*    ROW  */

.wmkaiway-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  align-items: center;
  gap: 68px;
}

.wmkaiway-row--reverse {
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
}

.wmkaiway-row--reverse .wmkaiway-content {
  order: 2;
}

.wmkaiway-row--reverse .wmkaiway-visual {
  order: 1;
}



.wmkaiway-content {
  min-width: 0;
}

.wmkaiway-eyebrow {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkaiway-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18,183,106,.10);
}

.wmkaiway-content h2 {
  max-width: 600px;
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(32px,3.7vw,35px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkaiway-content h2 span {
  color: var(--green-600);
}

.wmkaiway-description {
  max-width: 555px;
  margin: 15px 0 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.72;
}


.wmkaiway-feature-grid {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.wmkaiway-feature {
  display: grid;
  grid-template-columns: 43px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border: 1px solid rgba(16,24,40,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.86);
  box-shadow: 0 12px 25px -23px rgba(16,24,40,.35);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkaiway-feature:hover {
  transform: translateX(4px);
  border-color: var(--green-200);
  box-shadow: 0 18px 30px -24px rgba(3,152,85,.22);
}

.wmkaiway-feature-icon {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkaiway-feature-icon svg {
  width: 19px;
  height: 19px;
}

.wmkaiway-feature strong {
  display: block;
  color: var(--ink-900);
  font-size: 10px;
  font-weight: 800;
}

.wmkaiway-feature p {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}


.wmkaiway-highlight {
  display: grid;
  grid-template-columns: 8px minmax(0,1fr);
  gap: 11px;
  max-width: 550px;
  margin-top: 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--green-500);
  border-radius: 0 12px 12px 0;
  background: rgba(18,183,106,.055);
}

.wmkaiway-highlight-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiway-highlight strong {
  display: block;
  color: var(--ink-900);
  font-size: 9px;
  font-weight: 800;
}

.wmkaiway-highlight p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
} 

.wmkaiway-visual {
  position: relative;
  min-width: 0;
  padding: 12px;
}

.wmkaiway-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 85%;
  height: 80%;
  border-radius: 50%;
  background: rgba(18,183,106,.12);
  filter: blur(54px);
  transform: translate(-50%,-50%);
  pointer-events: none;
} 

.wmkaiway-image-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  padding: 10px;
  border: 1px solid rgba(16,24,40,.085);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: 0 32px 68px -43px rgba(16,24,40,.5);
  transition:
      transform .3s ease,
      box-shadow .3s ease;
}

.wmkaiway-image-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 38px 72px -43px rgba(3,152,85,.24);
}

.wmkaiway-image-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  z-index: 4;
  height: 2px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-200),
      var(--green-500),
      var(--green-200),
      transparent
  );
}

.wmkaiway-image-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 5px 5px 12px;
}

.wmkaiway-image-top > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmkaiway-image-top > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiway-image-top strong {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 750;
}

.wmkaiway-image-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}


.wmkaiway-image-badge {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 5;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--green-700);
  box-shadow: 0 12px 25px -17px rgba(16,24,40,.5);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
}

.wmkaiway-image-badge i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}



/*  EIGHTH SECTION  */

.wmkaidivider-section,
.wmkaidivider-section *,
.wmkaidivider-section *::before,
.wmkaidivider-section *::after {
  box-sizing: border-box;
}

.wmkaidivider-section {
  position: relative;
  width: 100%;
  padding: 64px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 15% 50%, rgba(50,213,131,.15), transparent 28%),
      radial-gradient(circle at 88% 30%, rgba(166,244,197,.10), transparent 25%),
      linear-gradient(110deg, #09251b 0%, #0c3828 52%, #087447 100%);
}

.wmkaidivider-section::before {
  content: "";
  position: absolute;
  top: -120px;
  right: 8%;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
}

.wmkaidivider-section::after {
  content: "";
  position: absolute;
  bottom: -145px;
  left: 7%;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(50,213,131,.12);
  border-radius: 50%;
}

.wmkaidivider-section > .wrap {
  position: relative;
  z-index: 2;
}

.wmkaidivider-content {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
}

.wmkaidivider-content h2 {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(30px,4vw,41px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmkaidivider-content h2 span {
  color: var(--green-400);
}

.wmkaidivider-content p {
  max-width: 650px;
  margin: 14px auto 0;
  color: rgba(255,255,255,.72);
  font-size: 12.5px;
  line-height: 1.68;
}

.wmkaidivider-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}

.wmkaidivider-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 17px;
  border-radius: 11px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}

.wmkaidivider-btn:hover {
  transform: translateY(-2px);
}

.wmkaidivider-btn-primary {
  border: 1px solid var(--green-400);
  background: var(--green-400);
  color: #07351f;
}

.wmkaidivider-btn-primary:hover {
  background: var(--green-200);
  border-color: var(--green-200);
}

.wmkaidivider-btn-primary span {
  font-size: 13px;
}

.wmkaidivider-btn-secondary {
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(8px);
}

.wmkaidivider-btn-secondary:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.35);
}


.wmkaiconnectx-section *,
.wmkaivoicex-section *,
.wmkailaunchx-section *,
.wmkaicomparex-section *,
.wmkaiconnectx-section *::before,
.wmkaivoicex-section *::before,
.wmkailaunchx-section *::before,
.wmkaicomparex-section *::before,
.wmkaiconnectx-section *::after,
.wmkaivoicex-section *::after,
.wmkailaunchx-section *::after,
.wmkaicomparex-section *::after {
  box-sizing: border-box;
}

  

.wmkaiconnectx-eyebrow,
.wmkaivoicex-eyebrow,
.wmkailaunchx-eyebrow,
.wmkaicomparex-eyebrow {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkaiconnectx-eyebrow i,
.wmkaivoicex-eyebrow i,
.wmkailaunchx-eyebrow i,
.wmkaicomparex-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}


/*   NINTH SECTION  */

.wmkaiconnectx-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkaiconnectx-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(420px,1.08fr);
  align-items: center;
  gap: 62px;
  padding: 46px;
  overflow: hidden;
  border: 1px solid var(--green-100);
  border-radius: 28px;
  background:
      radial-gradient(circle at 100% 0%,rgba(18,183,106,.09),transparent 29%),
      linear-gradient(145deg,#f9fffb,var(--surface));
  box-shadow: 0 32px 68px -52px rgba(16,24,40,.46);
}

.wmkaiconnectx-shell::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8%;
  left: 8%;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--green-200),
      var(--green-500),
      var(--green-200),
      transparent
  );
}

.wmkaiconnectx-content {
  min-width: 0;
}

.wmkaiconnectx-content h2,
.wmkaivoicex-content h2,
.wmkailaunchx-head h2,
.wmkaicomparex-head h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(30px,4vw,33px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.043em;
  text-wrap: balance;
}

.wmkaiconnectx-content h2 span,
.wmkaivoicex-content h2 span,
.wmkailaunchx-head h2 span,
.wmkaicomparex-head h2 span {
  color: var(--green-600);
}

.wmkaiconnectx-description,
.wmkaivoicex-description {
  max-width: 560px;
  margin: 14px 0 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.72;
}



.wmkaiconnectx-features {
  display: grid;
  gap: 9px;
  margin-top: 22px;
}

.wmkaiconnectx-feature {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border: 1px solid rgba(16,24,40,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.82);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkaiconnectx-feature:hover {
  transform: translateX(3px);
  border-color: var(--green-200);
  box-shadow: 0 16px 28px -25px rgba(3,152,85,.22);
}

.wmkaiconnectx-feature-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkaiconnectx-feature-icon svg {
  width: 19px;
  height: 19px;
}

.wmkaiconnectx-feature strong {
  display: block;
  color: var(--ink-900);
  font-size: 10px;
  font-weight: 800;
}

.wmkaiconnectx-feature p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}




.wmkaiconnectx-note {
  display: grid;
  grid-template-columns: 7px minmax(0,1fr);
  gap: 11px;
  margin-top: 18px;
  padding: 11px 13px;
  border-left: 3px solid var(--green-500);
  border-radius: 0 11px 11px 0;
  background: rgba(18,183,106,.055);
}

.wmkaiconnectx-note > span {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiconnectx-note strong {
  display: block;
  color: var(--ink-900);
  font-size: 9px;
}

.wmkaiconnectx-note p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}



.wmkaiconnectx-visual,
.wmkaivoicex-visual {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 570px;
  justify-self: center;
}

.wmkaiconnectx-glow,
.wmkaivoicex-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 78%;
  height: 70%;
  border-radius: 50%;
  background: rgba(18,183,106,.11);
  filter: blur(48px);
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.wmkaiconnectx-image-card,
.wmkaivoicex-image-card {
  position: relative;
  z-index: 2;
  width: 100%;
  overflow: hidden;
  padding: 9px;
  border: 1px solid rgba(16,24,40,.08);
  border-radius: 21px;
  background: var(--surface);
  box-shadow: 0 28px 58px -42px rgba(16,24,40,.48);
}

.wmkaiconnectx-image-head,
.wmkaivoicex-image-head {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 5px 9px;
}

.wmkaiconnectx-image-head > span,
.wmkaivoicex-image-head > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wmkaiconnectx-image-head > span i,
.wmkaivoicex-image-head > span i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiconnectx-image-head strong,
.wmkaivoicex-image-head strong {
  color: var(--ink-500);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 750;
}


.wmkaiconnectx-image-area,
.wmkaivoicex-image-area {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px;
  background:
      radial-gradient(circle at 50% 35%,rgba(18,183,106,.08),transparent 35%),
      var(--ink-50);
}

.wmkaiconnectx-image-area img,
.wmkaivoicex-image-area img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border: 0;
}

.wmkaiconnectx-image-badge,
.wmkaivoicex-image-badge {
  position: absolute;
  left: 22px;
  bottom: 22px;
  z-index: 5;
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--green-100);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--green-700);
  box-shadow: 0 12px 22px -17px rgba(16,24,40,.48);
  backdrop-filter: blur(8px);
  font-size: 9px;
  font-weight: 800;
}

.wmkaiconnectx-image-badge i,
.wmkaivoicex-image-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}

.wmkaiconnectx-rail {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid var(--green-100);
  border-radius: 15px;
  background: var(--surface);
}

.wmkaiconnectx-rail > div {
  padding: 14px 17px;
}

.wmkaiconnectx-rail > div + div {
  border-left: 1px solid var(--border);
}

.wmkaiconnectx-rail span {
  display: block;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.wmkaiconnectx-rail strong {
  display: block;
  margin-top: 4px;
  color: var(--ink-900);
  font-size: 9px;
  font-weight: 800;
}


/*   TENTH SECTION  */

.wmkaivoicex-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background: var(--bg);
}

.wmkaivoicex-shell {
  display: grid;
  grid-template-columns: minmax(420px,1.08fr) minmax(0,.92fr);
  align-items: center;
  gap: 62px;
  padding: 44px;
  border: 1px solid var(--green-100);
  border-radius: 27px;
  background:
      radial-gradient(circle at 0% 100%,rgba(18,183,106,.07),transparent 28%),
      var(--surface);
  box-shadow: 0 30px 64px -50px rgba(16,24,40,.42);
}

.wmkaivoicex-content {
  min-width: 0;
}


.wmkaivoicex-list {
  display: grid;
  gap: 11px;
  margin-top: 23px;
}

.wmkaivoicex-list > div {
  display: grid;
  grid-template-columns: 24px minmax(0,1fr);
  align-items: start;
  gap: 9px;
}

.wmkaivoicex-check {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 900;
}

.wmkaivoicex-list p {
  margin: 2px 0 0;
  color: var(--ink-600);
  font-size: 9.5px;
  line-height: 1.55;
}

.wmkaivoicex-list strong {
  color: var(--ink-900);
}


.wmkaivoicex-highlights {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  margin-top: 15px;
}

.wmkaivoicex-highlights > div {
  min-width: 0;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
}

.wmkaivoicex-highlight-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkaivoicex-highlight-icon svg {
  width: 17px;
  height: 17px;
}

.wmkaivoicex-highlights strong {
  display: block;
  color: var(--ink-900);
  font-size: 9px;
  font-weight: 800;
}

.wmkaivoicex-highlights > div > div span {
  display: block;
  margin-top: 2px;
  color: var(--ink-500);
  font-size: 9px;
}


/*   ELEVENTH SECTION  */

.wmkailaunchx-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background: var(--surface);
}

.wmkailaunchx-head,
.wmkaicomparex-head {
  max-width: 810px;
  margin: 0 auto 40px;
  text-align: center;
}

.wmkailaunchx-head p,
.wmkaicomparex-head p {
  max-width: 650px;
  margin: 14px auto 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.7;
}

.wmkailaunchx-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
}

.wmkailaunchx-line {
  position: absolute;
  top: 51px;
  right: 8%;
  left: 8%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
      90deg,
      var(--green-100),
      var(--green-500),
      var(--green-100)
  );
}

.wmkailaunchx-step {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: 21px 18px 19px;
  border: 1px solid var(--border);
  border-radius: 17px;
  background:
      radial-gradient(circle at 100% 100%,rgba(18,183,106,.045),transparent 36%),
      var(--surface);
  box-shadow: 0 17px 34px -31px rgba(16,24,40,.42);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkailaunchx-step:hover {
  transform: translateY(-4px);
  border-color: var(--green-200);
  box-shadow: 0 24px 42px -31px rgba(3,152,85,.23);
}

.wmkailaunchx-number {
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--green-100);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
}

.wmkailaunchx-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 15px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkailaunchx-icon svg {
  width: 21px;
  height: 21px;
}

.wmkailaunchx-label {
  display: block;
  margin-top: 16px;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wmkailaunchx-step h3 {
  margin: 5px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.wmkailaunchx-step p {
  margin: 6px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.55;
}


/*  TWELFTH SECTION  */

.wmkaicomparex-section {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
  background:
      radial-gradient(circle at 50% 0%,rgba(18,183,106,.055),transparent 24%),
      var(--bg);
}

.wmkaicomparex-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  box-shadow: 0 28px 58px -46px rgba(16,24,40,.44);
}

.wmkaicomparex-table {
  min-width: 780px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

.wmkaicomparex-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(3,1fr);
  align-items: stretch;
}

.wmkaicomparex-row + .wmkaicomparex-row {
  border-top: 1px solid var(--border);
}

.wmkaicomparex-row--header {
  min-height: 82px;
  background: var(--ink-50);
}

.wmkaicomparex-capability-head {
  display: flex;
  align-items: center;
  padding: 17px;
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 800;
}

.wmkaicomparex-platform {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 17px;
  border-left: 1px solid var(--border);
}

.wmkaicomparex-platform--brand {
  background: var(--green-50);
}

.wmkaicomparex-platform-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  align-content: center;
  align-self: center;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--surface);
  color: var(--green-700);
}

.wmkaicomparex-platform-icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.wmkaicomparex-platform > div {
  min-width: 0;
}

.wmkaicomparex-platform strong,
.wmkaicomparex-platform span {
  display: block;
}

.wmkaicomparex-platform strong {
  color: var(--ink-900);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}

.wmkaicomparex-platform > div span {
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.4;
}

.wmkaicomparex-row:not(.wmkaicomparex-row--header) > div {
  min-width: 0;
  display: flex;
  align-items: center;
  min-height: 49px;
  padding: 12px 17px;
  color: var(--ink-600);
  font-size: 10px;
  line-height: 1.45;
}

.wmkaicomparex-row:not(.wmkaicomparex-row--header) > div + div {
  border-left: 1px solid var(--border);
}

.wmkaicomparex-capability {
  color: var(--ink-800) !important;
  font-weight: 700;
}

.wmkaicomparex-positive {
  color: var(--green-700) !important;
  font-weight: 700;
}

.wmkaicomparex-positive i {
  margin-right: 6px;
  color: var(--green-500);
  font-style: normal;
  font-weight: 900;
}

.wmkaicomparex-neutral {
  color: var(--ink-500) !important;
}

.wmkaicomparex-negative {
  color: var(--ink-400) !important;
}

.wmkaicomparex-neutral i,
.wmkaicomparex-negative i {
  margin-right: 6px;
  font-style: normal;
}


.wmkaicomparex-bottom {
  max-width: 880px;
  display: grid;
  grid-template-columns: 44px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  margin: 19px auto 0;
  padding: 13px 15px;
  border: 1px solid var(--green-100);
  border-radius: 14px;
  background: var(--green-50);
}

.wmkaicomparex-bottom-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--surface);
  color: var(--green-700);
}

.wmkaicomparex-bottom-icon svg {
  width: 19px;
  height: 19px;
}

.wmkaicomparex-bottom strong {
  display: block;
  color: var(--ink-900);
  font-size: 9.5px;
  font-weight: 800;
}

.wmkaicomparex-bottom p {
  margin: 3px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}



/* About Us Pages CSS  */

.wmkaboutv2-section,
.wmkaboutv2-section *,
.wmkaboutv2-section *::before,
.wmkaboutv2-section *::after {
  box-sizing: border-box;
}

.wmkaboutv2-section {
  position: relative;
  padding-top: 82px;
  overflow: hidden;
  background:
      radial-gradient(circle at 86% 17%, rgba(18,183,106,.09), transparent 23%),
      linear-gradient(180deg, #fbfefc 0%, #ffffff 100%);
}

.wmkaboutv2-section::before {
  content: "";
  position: absolute;
  top: 80px;
  left: -110px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(18,183,106,.04);
  filter: blur(45px);
  pointer-events: none;
}

.wmkaboutv2-section > .wrap {
  position: relative;
  z-index: 2;
}


.wmkaboutv2-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(470px, 520px);
  align-items: center;
  justify-content: space-between;
  gap: 76px;
}

.wmkaboutv2-content {
  min-width: 0;
  max-width: 650px;
}

.wmkaboutv2-eyebrow {
  width: max-content;
  max-width: 100%;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border: 1px solid rgba(18,183,106,.18);
  border-radius: 999px;
  background: rgba(236,253,243,.75);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkaboutv2-eyebrow > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18,183,106,.10);
}

.wmkaboutv2-content h1 {
  max-width: 650px;
  margin: 20px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(41px, 4.4vw, 45px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
}

.wmkaboutv2-content h1 span {
  /* display: block; */
  margin-top: 4px;
  color: var(--green-600);
}

.wmkaboutv2-description {
  max-width: 590px;
  margin: 20px 0 0;
  color: var(--ink-500);
  font-size: 16px;
  line-height: 1.75;
}

.wmkaboutv2-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.wmkaboutv2-primary,
.wmkaboutv2-secondary {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 14px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
      transform .25s ease,
      box-shadow .25s ease,
      background .25s ease,
      border-color .25s ease,
      color .25s ease,
      filter .25s ease;
}


/* Primary Button */

.wmkaboutv2-primary {
  border: 1px solid var(--green-600);
  background: linear-gradient(135deg, var(--green-600), var(--green-700));
  color: #fff;
  box-shadow: 0 14px 28px -18px rgba(3,152,85,.55);
}

.wmkaboutv2-primary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform .25s ease;
}

.wmkaboutv2-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -18px rgba(3,152,85,.65);
  filter: brightness(1.02);
}

.wmkaboutv2-primary:hover svg {
  transform: translateX(3px);
}


/* Secondary Button */

.wmkaboutv2-secondary {
  border: 1px solid #d9e0ea;
  background: #fff;
  color: var(--ink-700);
  box-shadow: 0 10px 24px -22px rgba(16,24,40,.45);
}

.wmkaboutv2-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(18,183,106,.22);
  background: #f8fffb;
  color: var(--green-700);
  box-shadow: 0 16px 30px -22px rgba(16,24,40,.28);
}


.wmkaboutv2-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 0;
  max-width: 640px;
  margin-top: 38px;
  padding: 20px 0 0;
  border-top: 1px solid #e6ebf2;
}

.wmkaboutv2-values > div {
  position: relative;
  min-width: 0;
  padding: 0 22px 0 0;
}

.wmkaboutv2-values > div + div {
  padding-left: 22px;
}

.wmkaboutv2-values > div + div::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 1px;
  height: 34px;
  background: #e6ebf2;
}

.wmkaboutv2-values span {
  display: block;
  margin-bottom: 8px;
  color: var(--green-600);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmkaboutv2-values strong {
  display: block;
  color: var(--ink-800);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}

.wmkaboutv2-visual {
  position: relative;
  width: 100%;
  max-width: 520px;
  min-width: 0;
  margin-left: auto;
  padding: 18px 18px 18px 0;
}

.wmkaboutv2-backdrop {
  position: absolute;
  top: 0;
  right: 0;
  width: 88%;
  height: 88%;
  border-radius: 34px;
  background:
      linear-gradient(
          145deg,
          rgba(209,250,223,.85),
          rgba(236,253,243,.38)
      );
  transform: rotate(3deg);
  pointer-events: none;
}

.wmkaboutv2-image {
  position: relative;
  z-index: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 28px;
  background: var(--ink-50);
  box-shadow:
      0 30px 60px -42px rgba(16,24,40,.48),
      0 0 0 1px rgba(16,24,40,.035);
}

.wmkaboutv2-image > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.wmkaboutv2-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 38%;
  z-index: 2;
  background:
      linear-gradient(
          180deg,
          transparent,
          rgba(16,24,40,.60)
      );
  pointer-events: none;
}

.wmkaboutv2-image-label {
  position: absolute;
  right: 22px;
  bottom: 21px;
  left: 22px;
  z-index: 4;
}

.wmkaboutv2-image-label > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.72);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkaboutv2-image-label i {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: var(--green-400);
}

.wmkaboutv2-image-label strong {
  max-width: 370px;
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.wmkaboutv2-floating-tag {
  position: absolute;
  top: 0;
  left: -23px;
  z-index: 5;
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid rgba(16,24,40,.07);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--ink-700);
  font-size: 9px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 12px 28px -23px rgba(16,24,40,.5);
  backdrop-filter: blur(8px);
}

.wmkaboutv2-floating-tag > span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18,183,106,.10);
}




/*  ABOUT STORY */

/* About Story */
.mmeabout-story{
    padding:82px 0;
    background:#fff;
}

.mmeabout-story-shell{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
    gap:58px;
    max-width:1180px;
    margin:0 auto;
    padding:54px;
    border:1px solid var(--green-100);
    border-radius:24px;
    background:var(--green-50);
    position:relative;
    overflow:hidden;
}

.mmeabout-story-shell:before{
    content:"";
    position:absolute;
    top:0;
    left:54px;
    width:82px;
    height:4px;
    border-radius:0 0 6px 6px;
    background:var(--green-600);
}

.mmeabout-story-copy{
    position:relative;
    z-index:1;
}

.mmeabout-story-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-bottom:18px;
    color:var(--green-700);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeabout-story-eyebrow i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green-600);
    box-shadow:0 0 0 5px var(--green-100);
}

.mmeabout-story-copy h2{
    max-width: 650px;
    margin-bottom: 15px;
    color: var(--ink-900);
    font-size: 38px;
    line-height: 1.08;
    letter-spacing: -.025em;
}

.mmeabout-story-copy h2 span{
    color:var(--green-600);
}

.mmeabout-story-lead{
    max-width:650px;
    color:var(--ink-600);
    font-size:16px;
    line-height:1.75;
}

.about-story-pargraph2 {
    margin-block: 15px;
}

.mmeabout-story-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:26px;
}

.mmeabout-story-tags span{
    padding:8px 11px;
    border:1px solid var(--green-100);
    border-radius:999px;
    background:#fff;
    color:var(--ink-600);
    font-size:11px;
    font-weight:700;
}

.mmeabout-story-side{
    align-self:center;
    padding:28px;
    border:1px solid var(--border);
    border-radius:18px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.mmeabout-story-side-head{
    padding-bottom:20px;
    border-bottom:1px solid var(--border);
}

.mmeabout-story-side-head span{
    display:block;
    margin-bottom:6px;
    color:var(--green-700);
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeabout-story-side-head strong{
    display:block;
    color:var(--ink-900);
    font-size:18px;
    line-height:1.4;
}

.mmeabout-story-point{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:15px;
    padding:21px 0;
    border-bottom:1px solid var(--border);
}

.mmeabout-story-point:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.mmeabout-story-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:11px;
    background:var(--green-50);
    color:var(--green-700);
    font-size:11px;
    font-weight:800;
}

.mmeabout-story-point h3{
    margin:0 0 6px;
    color:var(--ink-900);
    font-size:16px;
    line-height:1.35;
}

.mmeabout-story-point p{
    margin:0;
    color:var(--ink-500);
    font-size:13px;
    line-height:1.6;
}

.mmeabout-story-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    max-width:1080px;
    margin:18px auto 0;
    padding:18px 22px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
}

.mmeabout-story-bottom span{
    flex:0 0 auto;
    color:var(--green-700);
    font-size:11px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.mmeabout-story-bottom p{
    margin:0;
    color:var(--ink-500);
    font-size:13px;
    line-height:1.55;
    text-align:right;
}

@media(max-width:900px){
    .mmeabout-story-shell{
        grid-template-columns:1fr;
        gap:34px;
        padding:40px;
    }

    .mmeabout-story-copy h2{
        font-size:37px;
    }
}

@media(max-width:640px){
    .mmeabout-story{
        padding:58px 0;
    }

    .mmeabout-story-shell{
        padding:30px 22px;
        border-radius:18px;
    }

    .mmeabout-story-shell:before{
        left:22px;
    }

    .mmeabout-story-copy h2{
        font-size:31px;
    }

    .mmeabout-story-lead{
        font-size:15px;
    }

    .mmeabout-story-side{
        padding:22px;
    }

    .mmeabout-story-bottom{
        align-items:flex-start;
        flex-direction:column;
        gap:8px;
    }

    .mmeabout-story-bottom p{
        text-align:left;
    }
}


/* Fourth Section CSS    */

/* Awards & Recognition */
.mmeawardx-section,
.mmeawardx-section *,
.mmeawardx-section *::before,
.mmeawardx-section *::after{
    box-sizing:border-box;
}

.mmeawardx-section{
    position:relative;
    padding:90px 0;
    overflow:hidden;
    background:
        radial-gradient(circle at 7% 15%,rgba(18,183,106,.08),transparent 25%),
        radial-gradient(circle at 96% 85%,rgba(59,130,246,.045),transparent 23%),
        #f8faf9;
}

.mmeawardx-section::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background-image:radial-gradient(rgba(16,24,40,.055) .7px,transparent .7px);
    background-size:22px 22px;
    opacity:.14;
}

.mmeawardx-shell{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(310px,.72fr) minmax(0,1.28fr);
    align-items:stretch;
    gap:22px;
    max-width:1180px;
    margin:0 auto;
}


/* Left Panel */
.mmeawardx-intro{
    position:relative;
    min-width:0;
    padding:42px 38px;
    overflow:hidden;
    border-radius:24px;
    background:linear-gradient(145deg,#101828 0%,#15271f 100%);
    color:#fff;
    box-shadow:0 34px 70px -52px rgba(16,24,40,.72);
}

.mmeawardx-intro::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-110px;
    width:310px;
    height:310px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(18,183,106,.28),rgba(18,183,106,0) 70%);
    pointer-events:none;
}

.mmeawardx-intro::after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:210px;
    height:150px;
    opacity:.13;
    background-image:radial-gradient(rgba(255,255,255,.8) 1px,transparent 1px);
    background-size:14px 14px;
    mask-image:linear-gradient(315deg,#000,transparent 80%);
    pointer-events:none;
}

.mmeawardx-intro > *{
    position:relative;
    z-index:1;
}

.mmeawardx-eyebrow{
    min-height:31px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid rgba(166,244,197,.22);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:var(--green-200);
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mmeawardx-eyebrow i{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--green-400);
    box-shadow:0 0 0 5px rgba(50,213,131,.1);
}

.mmeawardx-intro h2{
    max-width:430px;
    margin:24px 0 0;
    color:#fff;
    font-family:var(--font-display);
    font-size:clamp(27px,3.4vw,36px);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-.045em;
}

.mmeawardx-intro h2 span{
    color:var(--green-400);
}

.mmeawardx-intro > p{
    max-width:440px;
    margin:20px 0 0;
    color:rgba(255,255,255,.68);
    font-size:14px;
    line-height:1.75;
}

.mmeawardx-focus{
    margin-top:30px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.1);
}

.mmeawardx-focus > span{
    display:block;
    color:var(--green-200);
    font-size:9px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.mmeawardx-focus > div{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:11px;
}

.mmeawardx-focus strong{
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:0 11px;
    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    background:rgba(255,255,255,.07);
    color:rgba(255,255,255,.82);
    font-size:9px;
    font-weight:700;
}

.mmeawardx-note{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;
    gap:12px;
    margin-top:30px;
    padding:13px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:14px;
    background:rgba(255,255,255,.055);
}

.mmeawardx-note > span{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--green-500);
    color:#fff;
    font-size:15px;
    font-weight:800;
}

.mmeawardx-note p{
    margin:0;
    color:rgba(255,255,255,.68);
    font-size:11px;
    line-height:1.55;
}


/* Awards Gallery */
.mmeawardx-gallery{
    min-width:0;
    padding:24px;
    border:1px solid rgba(16,24,40,.08);
    border-radius:24px;
    background:rgba(255,255,255,.94);
    box-shadow:0 32px 70px -54px rgba(16,24,40,.45);
    backdrop-filter:blur(14px);
}

.mmeawardx-gallery-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:3px 3px 20px;
    border-bottom:1px solid var(--border);
}

.mmeawardx-gallery-head span,
.mmeawardx-gallery-head strong{
    display:block;
}

.mmeawardx-gallery-head > div > span{
    color:var(--ink-400);
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeawardx-gallery-head > div > strong{
    margin-top:4px;
    color:var(--ink-900);
    font-size:17px;
    font-weight:800;
}

.mmeawardx-gallery-status{
    display:inline-flex !important;
    align-items:center;
    gap:7px;
    min-height:29px;
    padding:0 10px;
    border:1px solid var(--green-100);
    border-radius:999px;
    background:var(--green-50);
    color:var(--green-700);
    font-size:9px;
    font-weight:800;
}

.mmeawardx-gallery-status i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--green-500);
}

.mmeawardx-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.mmeawardx-card{
    position:relative;
    min-width:0;
    min-height:205px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:20px 14px;
    overflow:hidden;
    border:1px solid rgba(16,24,40,.065);
    border-radius:17px;
    background:linear-gradient(145deg,#fbfcfc,#f6f9f7);
    transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

.mmeawardx-card::before{
    content:"";
    position:absolute;
    right:-45px;
    bottom:-65px;
    width:130px;
    height:130px;
    border-radius:50%;
    background:rgba(18,183,106,.055);
    pointer-events:none;
}

.mmeawardx-card:hover{
    border-color:var(--green-200);
    background:linear-gradient(145deg,#fff,var(--green-50));
    box-shadow:0 22px 38px -30px rgba(3,152,85,.5);
    transform:translateY(-4px);
}

.mmeawardx-card-featured{
    border-color:rgba(18,183,106,.15);
    background:linear-gradient(145deg,#fff,#f1fdf6);
}

.mmeawardx-index{
    position:absolute;
    top:11px;
    left:12px;
    z-index:2;
    color:var(--ink-300);
    font-size:9px;
    font-weight:800;
    letter-spacing:.05em;
}

.mmeawardx-card img{
    position:relative;
    z-index:1;
    width:auto;
    max-width:138px;
    max-height:153px;
    object-fit:contain;
    filter:drop-shadow(0 12px 13px rgba(16,24,40,.10));
    transition:transform .25s ease;
}

.mmeawardx-card:hover img{
    transform:scale(1.035);
}


/* Responsive */
@media(max-width:900px){
    .mmeawardx-shell{
        grid-template-columns:1fr;
    }

    .mmeawardx-intro{
        padding:36px;
    }
}

@media(max-width:640px){
    .mmeawardx-section{
        padding:62px 0;
    }

    .mmeawardx-intro,
    .mmeawardx-gallery{
        padding:24px 20px;
        border-radius:19px;
    }

    .mmeawardx-intro h2{
        font-size:31px;
    }

    .mmeawardx-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mmeawardx-card{
        min-height:175px;
        padding:17px 10px;
    }

    .mmeawardx-card img{
        max-width:125px;
        max-height:140px;
    }
}

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

    .mmeawardx-card{
        min-height:190px;
    }

    .mmeawardx-card img{
        max-width:145px;
        max-height:160px;
    }
}


/* Fivth Section CSS */

.wmkway-section,.wmkway-section *,.wmkway-section *::before,.wmkway-section *::after{box-sizing:border-box}

.wmkway-section{position:relative;padding:84px 0;overflow:hidden;background:#fff}

.wmkway-shell{position:relative;padding:44px;overflow:hidden;border-radius:28px;background:linear-gradient(145deg,#101828 0%,#17241f 100%);box-shadow:0 34px 70px -55px rgba(16,24,40,.7)}

.wmkway-shell::before{content:"";position:absolute;top:-180px;right:-90px;width:430px;height:430px;border-radius:50%;background:radial-gradient(circle,rgba(18,183,106,.24),rgba(18,183,106,0) 68%);pointer-events:none}

.wmkway-shell::after{content:"";position:absolute;right:0;bottom:0;width:330px;height:220px;opacity:.12;background-image:radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 1px);background-size:15px 15px;mask-image:linear-gradient(315deg,#000,transparent 76%);pointer-events:none}

.wmkway-head,.wmkway-flow,.wmkway-foot{position:relative;z-index:2}

.wmkway-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.68fr);align-items:end;gap:56px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,.1)}

.wmkway-eyebrow{min-height:31px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid rgba(50,213,131,.2);border-radius:999px;background:rgba(18,183,106,.1);color:var(--green-200);font-size: 9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.wmkway-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 4px rgba(50,213,131,.1)}

.wmkway-head h2{max-width:680px;margin:16px 0 0;color:#fff;font-family:var(--font-display);font-size:clamp(33px,3.5vw,41px);font-weight:800;line-height:1.06;letter-spacing:-.045em}

.wmkway-head h2 span{color:var(--green-400)}

.wmkway-head>p{max-width:470px;margin:0;color:rgba(255,255,255,.6);font-size:13px;line-height:1.72}

.wmkway-flow{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:stretch;margin-top:30px}

.wmkway-step{min-width:0;padding:23px 20px;border:1px solid rgba(255,255,255,.09);border-radius:17px;background:rgba(255,255,255,.045);transition:transform .25s ease,border-color .25s ease,background .25s ease}

.wmkway-step:hover{transform:translateY(-3px);border-color:rgba(50,213,131,.24);background:rgba(18,183,106,.08)}

.wmkway-step-top{display:flex;align-items:center;justify-content:space-between}

.wmkway-step-top span{color:rgba(255,255,255,.38);font-size: 9px;font-weight:800;letter-spacing:.08em}

.wmkway-step-top i{width:8px;height:8px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px rgba(18,183,106,.1)}

.wmkway-step>strong{display:block;margin-top:25px;color:var(--green-400);font-size: 9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.wmkway-step h3{margin:6px 0 0;color:#fff;font-family:var(--font-display);font-size:13px;font-weight:800;line-height:1.4}

.wmkway-step p{margin:7px 0 0;color:rgba(255,255,255,.52);font-size: 9px;line-height:1.6}

.wmkway-connector{position:relative;align-self:center;height:1px;background:rgba(50,213,131,.24)}

.wmkway-connector::after{content:"";position:absolute;top:50%;right:-1px;width:6px;height:6px;border-radius:50%;background:var(--green-500);transform:translateY(-50%)}

.wmkway-foot{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}

.wmkway-foot span{color:var(--green-400);font-size: 9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.wmkway-foot strong{max-width:660px;color:rgba(255,255,255,.78);font-size:10px;font-weight:700;line-height:1.6;text-align:right}




/* Sixth Section CSS */

.wmkpurpose-section,.wmkpurpose-section *,.wmkpurpose-section *::before,.wmkpurpose-section *::after{box-sizing:border-box}

.wmkpurpose-section{position:relative;padding:86px 0;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f8faf9 100%)}

.wmkpurpose-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr);align-items:start;gap:70px}

.wmkpurpose-statement{position:relative;padding-top:8px}

.wmkpurpose-eyebrow{min-height:31px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--green-100);border-radius:999px;background:var(--green-50);color:var(--green-700);font-size: 9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.wmkpurpose-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--green-500);box-shadow:0 0 0 4px rgba(18,183,106,.1)}

.wmkpurpose-statement h2{max-width:570px;margin:18px 0 0;color:var(--ink-900);font-family:var(--font-display);font-size:clamp(35px,3.8vw,41px);font-weight:800;line-height:1.04;letter-spacing:-.05em}

.wmkpurpose-statement h2 span{color:var(--green-600)}

.wmkpurpose-statement>p{max-width:510px;margin:18px 0 0;color:var(--ink-600);font-size:13px;line-height:1.78}

.wmkpurpose-rail{position:relative;border-top:1px solid var(--border)}

.wmkpurpose-row{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;padding:25px 0;border-bottom:1px solid var(--border)}

.wmkpurpose-number{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--green-100);border-radius:50%;background:#fff;color:var(--green-700);font-size: 9px;font-weight:800}

.wmkpurpose-label{display:block;color:var(--green-700);font-size: 9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}

.wmkpurpose-row strong{max-width:650px;display:block;margin-top:5px;color:var(--ink-900);font-family:var(--font-display);font-size:16px;font-weight:800;line-height:1.4}

.wmkpurpose-row p{max-width:670px;margin:6px 0 0;color:var(--ink-500);font-size:9px;line-height:1.6}



/* Integrations Library Page CSS  */



/* =========================================================
  FEATURED INTEGRATIONS
  Prefix: wmkintshow-
  ========================================================= */

.wmkintshow-section,
.wmkintshow-section *,
.wmkintshow-section *::before,
.wmkintshow-section *::after {
  box-sizing: border-box;
}

.wmkintshow-section {
  position: relative;
  padding: 86px 0 92px;
  overflow: hidden;
  background:
      radial-gradient(circle at 9% 15%, rgba(18,183,106,.065), transparent 22%),
      radial-gradient(circle at 91% 82%, rgba(119,73,196,.045), transparent 21%),
      linear-gradient(180deg, #ffffff 0%, #f9fcfa 100%);
}

.wmkintshow-section::before {
  content: "";
  position: absolute;
  top: 300px;
  left: 50%;
  width: 650px;
  height: 230px;
  border-radius: 50%;
  background: rgba(18,183,106,.045);
  filter: blur(85px);
  transform: translateX(-50%);
  pointer-events: none;
}

.wmkintshow-section > .wrap {
  position: relative;
  z-index: 2;
}


/* ========================
  Heading
  ======================== */

.wmkintshow-head {
  max-width: 790px;
  margin: 0 auto 44px;
  text-align: center;
}

.wmkintshow-eyebrow {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  border: 1px solid rgba(18,183,106,.17);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkintshow-eyebrow i {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 4px rgba(18,183,106,.09);
}

.wmkintshow-head h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 41px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.045em;
}

.wmkintshow-head h2 span {
  color: var(--green-600);
}

.wmkintshow-head p {
  max-width: 630px;
  margin: 15px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.7;
}


/* ========================
  Grid
  ======================== */

.wmkintshow-grid {
  max-width: 1120px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 auto;
}


/* ========================
  Card
  ======================== */

.wmkintshow-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 25px;
  overflow: hidden;
  border: 1px solid #e5ebe7;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  box-shadow:
      0 1px 2px rgba(16,24,40,.02),
      0 22px 52px -42px rgba(16,24,40,.24);
  transition:
      transform .3s ease,
      border-color .3s ease,
      box-shadow .3s ease;
}

.wmkintshow-card:hover {
  transform: translateY(-7px);
  border-color: rgba(18,183,106,.20);
  box-shadow:
      0 1px 2px rgba(16,24,40,.02),
      0 32px 65px -40px rgba(16,24,40,.30);
}


/* ========================
  Hover Bottom Line
  Hidden by default
  ======================== */

.wmkintshow-accent {
  position: absolute;
  right: 22px;
  bottom: 0;
  left: 22px;
  height: 3px;
  border-radius: 999px 999px 0 0;

  opacity: 0;
  transform: scaleX(.15);
  transform-origin: center;

  transition:
      opacity .3s ease,
      transform .35s ease;
}

.wmkintshow-shopify .wmkintshow-accent {
  background: linear-gradient(90deg, #95bf47, #5ca646);
}

.wmkintshow-woo .wmkintshow-accent {
  background: linear-gradient(90deg, #96588a, #7846aa);
}

.wmkintshow-custom .wmkintshow-accent {
  background: linear-gradient(90deg, var(--green-400), var(--green-600));
}

.wmkintshow-card:hover .wmkintshow-accent {
  opacity: 1;
  transform: scaleX(1);
}


/* ========================
  Decorative Glow
  ======================== */

.wmkintshow-glow {
  position: absolute;
  top: -95px;
  right: -90px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  opacity: .8;
  pointer-events: none;
  transition: transform .4s ease, opacity .4s ease;
}

.wmkintshow-shopify .wmkintshow-glow {
  background: rgba(149,191,71,.08);
}

.wmkintshow-woo .wmkintshow-glow {
  background: rgba(150,88,138,.075);
}

.wmkintshow-custom .wmkintshow-glow {
  background: rgba(18,183,106,.075);
}

.wmkintshow-card:hover .wmkintshow-glow {
  transform: scale(1.15);
  opacity: 1;
}


/* ========================
  Top Row
  ======================== */

.wmkintshow-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wmkintshow-logo {
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  display: grid;
  place-items: center;
  border: 1px solid #e6ebe8;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 13px 26px -22px rgba(16,24,40,.3);
  transition: transform .3s ease, box-shadow .3s ease;
}

.wmkintshow-card:hover .wmkintshow-logo {
  transform: translateY(-2px);
  box-shadow: 0 17px 30px -21px rgba(16,24,40,.28);
}

.wmkintshow-logo img {
  width: auto;
  max-width: 38px;
  max-height: 38px;
  display: block;
  object-fit: contain;
}

.wmkintshow-custom-logo {
  color: var(--green-700);
  border-color: rgba(18,183,106,.16);
  background: linear-gradient(145deg, var(--green-50), #fff);
}

.wmkintshow-custom-logo svg {
  width: 27px;
  height: 27px;
}

.wmkintshow-category {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 1px solid #e4e9e6;
  border-radius: 999px;
  background: rgba(249,250,251,.82);
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}


/* ========================
  Main Content
  ======================== */

.wmkintshow-content {
  position: relative;
  z-index: 2;
  margin-top: 27px;
}

.wmkintshow-content h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.035em;
}

.wmkintshow-content p {
  min-height: 58px;
  margin: 9px 0 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.6;
}


/*  Tags */

.wmkintshow-tags {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 17px;
}

.wmkintshow-tags span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border: 1px solid #edf0ee;
  border-radius: 8px;
  background: #f7f9f8;
  color: var(--ink-600);
  font-size: 10px;
  font-weight: 700;
}


/* ========================
  Buttons
  ======================== */

.wmkintshow-actions {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  margin-top: auto;
  padding-top: 24px;
}

.wmkintshow-primary,
.wmkintshow-secondary {
  min-height: 50px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 14px;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  transition:
      transform .22s ease,
      box-shadow .22s ease,
      background .22s ease,
      border-color .22s ease,
      color .22s ease;
}


/* Primary Button */

.wmkintshow-primary {
  border: 1px solid var(--green-600);
  background: linear-gradient(135deg, var(--green-600) 0%, var(--green-700) 100%);
  color: #fff;
  box-shadow:
      0 8px 18px -10px rgba(3,152,85,.55),
      inset 0 1px 0 rgba(255,255,255,.12);
}

.wmkintshow-primary svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  transition: transform .22s ease;
}

.wmkintshow-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--green-700) 0%, #05613c 100%);
  border-color: var(--green-700);
  box-shadow:
      0 14px 24px -12px rgba(3,122,72,.52),
      inset 0 1px 0 rgba(255,255,255,.14);
}

.wmkintshow-primary:hover svg {
  transform: translateX(3px);
}


/* Secondary Button */

.wmkintshow-secondary {
  border: 1px solid #d8e0dc;
  background: rgba(255,255,255,.92);
  color: var(--ink-800);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

.wmkintshow-secondary:hover {
  transform: translateY(-2px);
  border-color: rgba(18,183,106,.30);
  background: var(--green-50);
  color: var(--green-700);
  box-shadow: 0 10px 20px -16px rgba(16,24,40,.22);
}



/* =========================================================
  THIRD SECTION - INTEGRATION FLOW
  Prefix: wmkflowbridge-
  ========================================================= */

.wmkflowbridge-section,
.wmkflowbridge-section *,
.wmkflowbridge-section *::before,
.wmkflowbridge-section *::after {
  box-sizing: border-box;
}

.wmkflowbridge-section {
  position: relative;
  padding: 90px 0 94px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #fafcfb 100%);
}

.wmkflowbridge-section > .wrap {
  position: relative;
  z-index: 2;
}


/* =========================================================
  INTRO
  ========================================================= */

.wmkflowbridge-intro {
  max-width: 1000px;
  margin: 0 auto 44px;
  text-align: center;
}

.wmkflowbridge-eyebrow {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(18,183,106,.16);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkflowbridge-intro h2 {
  max-width: 900px;
  margin: 18px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 41px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.wmkflowbridge-intro h2 span {
  color: var(--green-600);
}

.wmkflowbridge-intro-text {
  max-width: 720px;
  margin: 16px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.75;
}


/* =========================================================
  INTRO HIGHLIGHTS
  ========================================================= */

.wmkflowbridge-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  max-width: 900px;
  margin: 30px auto 0;
  text-align: left;
}

.wmkflowbridge-highlight {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: start;
  gap: 11px;
  padding: 17px 16px;
  border: 1px solid #e7ece9;
  border-radius: 15px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 16px 32px -28px rgba(16,24,40,.18);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkflowbridge-highlight:hover {
  transform: translateY(-3px);
  border-color: rgba(18,183,106,.18);
  box-shadow: 0 20px 38px -28px rgba(16,24,40,.24);
}

.wmkflowbridge-highlight-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18,183,106,.14);
  border-radius: 10px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.wmkflowbridge-highlight strong {
  display: block;
  color: var(--ink-900);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.wmkflowbridge-highlight p {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}


/* =========================================================
  BOARD
  ========================================================= */

.wmkflowbridge-board {
  position: relative;
  display: grid;
  grid-template-columns:
      minmax(220px,.82fr)
      minmax(85px,.30fr)
      minmax(245px,.86fr)
      minmax(85px,.30fr)
      minmax(220px,.82fr);
  align-items: center;
  gap: 0;
  min-height: 440px;
  padding: 70px 38px 38px;
  overflow: hidden;
  border: 1px solid #e3e9e5;
  border-radius: 30px;
  background:
      linear-gradient(
          145deg,
          rgba(255,255,255,.99),
          rgba(247,250,248,.97)
      );
  box-shadow:
      0 2px 4px rgba(16,24,40,.02),
      0 32px 70px -52px rgba(16,24,40,.32);
}

.wmkflowbridge-board::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .20;
  background-image:
      linear-gradient(rgba(16,24,40,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(16,24,40,.035) 1px, transparent 1px);
  background-size: 29px 29px;
  mask-image: linear-gradient(
      to bottom,
      transparent,
      #000 24%,
      #000 78%,
      transparent
  );
  pointer-events: none;
}


/* =========================================================
  BOARD LABEL
  ========================================================= */

.wmkflowbridge-board-label {
  position: absolute;
  top: 22px;
  left: 28px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 11px;
}

.wmkflowbridge-board-label span {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 7px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmkflowbridge-board-label strong {
  color: var(--ink-500);
  font-size: 9px;
  font-weight: 700;
}


/* =========================================================
  SOURCES
  ========================================================= */

.wmkflowbridge-sources {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
}

.wmkflowbridge-source {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #e5ebe7;
  border-radius: 15px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 15px 30px -27px rgba(16,24,40,.24);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkflowbridge-source:hover {
  transform: translateX(5px);
  border-color: rgba(18,183,106,.22);
  box-shadow: 0 20px 36px -27px rgba(16,24,40,.29);
}

.wmkflowbridge-source-icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid #e7ece9;
  border-radius: 13px;
  background: #fff;
}

.wmkflowbridge-source-icon img {
  width: auto;
  max-width: 31px;
  max-height: 31px;
  display: block;
  object-fit: contain;
}

.wmkflowbridge-source-icon-custom {
  color: var(--green-700);
  border-color: rgba(18,183,106,.15);
  background: var(--green-50);
}

.wmkflowbridge-source-icon-custom svg {
  width: 23px;
  height: 23px;
}

.wmkflowbridge-source span {
  display: block;
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmkflowbridge-source strong {
  display: block;
  margin-top: 3px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}


.wmkflowbridge-lines {
  position: relative;
  z-index: 2;
  height: 250px;
}

.wmkflowbridge-line {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 1px;
  background: linear-gradient(
      90deg,
      rgba(18,183,106,.10),
      rgba(18,183,106,.56),
      rgba(18,183,106,.10)
  );
}

.wmkflowbridge-line::before,
.wmkflowbridge-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  transform: translateY(-50%);
  box-shadow: 0 0 0 4px rgba(18,183,106,.07);
}

.wmkflowbridge-line::before {
  left: 0;
}

.wmkflowbridge-line::after {
  right: 0;
}

.wmkflowbridge-line-top {
  transform: translateY(-84px) rotate(23deg);
}

.wmkflowbridge-line-middle {
  transform: translateY(0);
}

.wmkflowbridge-line-bottom {
  transform: translateY(84px) rotate(-23deg);
}

.wmkflowbridge-lines-right .wmkflowbridge-line-top {
  transform: translateY(-84px) rotate(-23deg);
}

.wmkflowbridge-lines-right .wmkflowbridge-line-bottom {
  transform: translateY(84px) rotate(23deg);
}


.wmkflowbridge-hub {
  position: relative;
  z-index: 4;
  padding: 31px 25px;
  overflow: hidden;
  border: 1px solid rgba(50,213,131,.22);
  border-radius: 27px;
  background: linear-gradient(145deg, var(--green-700), #055b39);
  text-align: center;
  box-shadow:
      0 32px 58px -33px rgba(3,122,72,.62),
      inset 0 1px 0 rgba(255,255,255,.14);
}

.wmkflowbridge-hub::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
      radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1px);
  background-size: 15px 15px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
  pointer-events: none;
}

.wmkflowbridge-hub-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

.wmkflowbridge-hub-ring-one {
  width: 180px;
  height: 180px;
}

.wmkflowbridge-hub-ring-two {
  width: 230px;
  height: 230px;
}

.wmkflowbridge-hub-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 17px;
  background: rgba(255,255,255,.10);
  color: #fff;
}

.wmkflowbridge-hub-icon svg {
  width: 27px;
  height: 27px;
}

.wmkflowbridge-hub-label {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 16px;
  color: var(--green-200);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkflowbridge-hub strong {
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 5px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
}

.wmkflowbridge-hub p {
  position: relative;
  z-index: 2;
  max-width: 205px;
  margin: 8px auto 0;
  color: rgba(255,255,255,.64);
  font-size: 9px;
  line-height: 1.55;
}

.wmkflowbridge-hub-status {
  position: relative;
  z-index: 2;
  min-height: 30px;
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.82);
  font-size: 9px;
  font-weight: 800;
}

.wmkflowbridge-hub-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-200);
}


/*  OUTCOMES */

.wmkflowbridge-outcomes {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 14px;
}

.wmkflowbridge-outcome {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 12px;
  padding: 15px;
  border: 1px solid #e5ebe7;
  border-radius: 15px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 15px 30px -27px rgba(16,24,40,.24);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkflowbridge-outcome:hover {
  transform: translateX(-5px);
  border-color: rgba(18,183,106,.22);
  box-shadow: 0 20px 36px -27px rgba(16,24,40,.29);
}

.wmkflowbridge-outcome-number {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18,183,106,.14);
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}

.wmkflowbridge-outcome strong {
  display: block;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
}

.wmkflowbridge-outcome p {
  margin: 4px 0 0;
  color: var(--ink-500);
  font-size: 9px;
  line-height: 1.5;
}



/*  FOURTH SECTION - REAL BUSINESS WORKFLOWS */

.wmkuseflow-section,
.wmkuseflow-section *,
.wmkuseflow-section *::before,
.wmkuseflow-section *::after {
  box-sizing: border-box;
}

.wmkuseflow-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: #fff;
}

.wmkuseflow-section > .wrap {
  position: relative;
  z-index: 2;
}

.wmkuseflow-head {
  max-width: 820px;
  margin: 0 auto 44px;
  text-align: center;
}

.wmkuseflow-eyebrow {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(18,183,106,.16);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkuseflow-head h2 {
  margin: 17px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px,4.2vw,41px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.05em;
}

.wmkuseflow-head h2 span {
  color: var(--green-600);
}

.wmkuseflow-head p {
  max-width: 680px;
  margin: 16px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.75;
}

.wmkuseflow-layout {
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  align-items: stretch;
  gap: 22px;
}


/* Featured workflow */

.wmkuseflow-featured {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 32px;
  overflow: hidden;
  border: 1px solid rgba(18,183,106,.15);
  border-radius: 28px;
  background:
      linear-gradient(145deg,#f4fff8 0%,#ffffff 66%);
  box-shadow: 0 28px 60px -48px rgba(16,24,40,.24);
}

.wmkuseflow-featured::before {
  content: "";
  position: absolute;
  top: -110px;
  right: -100px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(18,183,106,.08);
  pointer-events: none;
}

.wmkuseflow-featured-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.wmkuseflow-index {
  color: var(--green-700);
  font-size: 11px;
  font-weight: 800;
}

.wmkuseflow-type {
  min-height: 29px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(18,183,106,.15);
  border-radius: 999px;
  background: #fff;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmkuseflow-featured-icon {
  position: relative;
  z-index: 2;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  margin-top: 38px;
  border-radius: 17px;
  background: var(--green-600);
  color: #fff;
  box-shadow: 0 18px 30px -20px rgba(3,152,85,.55);
}

.wmkuseflow-featured-icon svg {
  width: 26px;
  height: 26px;
}

.wmkuseflow-featured h3 {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 20px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.24;
  letter-spacing: -.03em;
}

.wmkuseflow-featured > p {
  position: relative;
  z-index: 2;
  max-width: 560px;
  margin: 12px 0 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.72;
}

.wmkuseflow-path {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: auto;
  padding-top: 30px;
}

.wmkuseflow-path span {
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid #e3e9e5;
  border-radius: 9px;
  background: #fff;
  color: var(--ink-700);
  font-size: 9px;
  font-weight: 700;
}

.wmkuseflow-path i {
  width: 26px;
  height: 1px;
  position: relative;
  background: rgba(18,183,106,.35);
}

.wmkuseflow-path i::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  width: 5px;
  height: 5px;
  border-top: 1px solid var(--green-600);
  border-right: 1px solid var(--green-600);
  transform: translateY(-50%) rotate(45deg);
}


/* Right side */

.wmkuseflow-side {
  display: grid;
  grid-template-rows: repeat(2,minmax(0,1fr));
  gap: 18px;
}

.wmkuseflow-item {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: 52px minmax(0,1fr);
  align-items: start;
  gap: 15px;
  padding: 24px;
  border: 1px solid #e5ebe7;
  border-radius: 22px;
  background: linear-gradient(180deg,#fff,#fbfcfb);
  box-shadow: 0 18px 42px -36px rgba(16,24,40,.22);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkuseflow-item:hover {
  transform: translateY(-4px);
  border-color: rgba(18,183,106,.18);
  box-shadow: 0 25px 46px -34px rgba(16,24,40,.27);
}

.wmkuseflow-item-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(18,183,106,.14);
  border-radius: 15px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmkuseflow-item-icon svg {
  width: 24px;
  height: 24px;
}

.wmkuseflow-item-copy > span {
  display: block;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmkuseflow-item-copy h3 {
  margin: 5px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.02em;
}

.wmkuseflow-item-copy p {
  margin: 7px 0 0;
  color: var(--ink-500);
  font-size: 10px;
  line-height: 1.6;
}

.wmkuseflow-mini-flow {
  grid-column: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 13px;
}

.wmkuseflow-mini-flow span {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 7px;
  background: #f5f8f6;
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 700;
}

.wmkuseflow-mini-flow i {
  color: var(--green-600);
  font-size: 11px;
  font-style: normal;
}



/* Chatbot Library Page CSS  */

/* Chatbot library */

.wmkbotlibx-section,
.wmkbotlibx-section *,
.wmkbotlibx-modal,
.wmkbotlibx-modal *,
.wmkbotlibx-section *::before,
.wmkbotlibx-section *::after,
.wmkbotlibx-modal *::before,
.wmkbotlibx-modal *::after {
  box-sizing: border-box;
}


/* Section */

.wmkbotlibx-section {
  position: relative;
  padding: 90px 0;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f8faf9 52%, #ffffff 100%);
}


/* Heading */

.wmkbotlibx-heading {
  max-width: 900px;
  margin: 0 auto 42px;
  text-align: center;
}

.wmkbotlibx-eyebrow {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  border: 1px solid rgba(18, 183, 106, .16);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.wmkbotlibx-heading h2 {
  max-width: 870px;
  margin: 18px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(37px, 4.3vw, 41px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.wmkbotlibx-heading h2 span {
  color: var(--green-600);
}

.wmkbotlibx-heading p {
  max-width: 700px;
  margin: 16px auto 0;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.72;
}


/* Library Header */

.wmkbotlibx-library-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e4e9e6;
}

.wmkbotlibx-library-head strong {
  display: block;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
}

.wmkbotlibx-library-head > div > span {
  max-width: 250px;
  display: block;
  margin-top: 4px;
  color: var(--ink-500);
  font-size: 10px;
}

.wmkbotlibx-count {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(18, 183, 106, .15);
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
}


/* Grid */

.wmkbotlibx-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}


/* Card */

.wmkbotlibx-card {
  --wmkbotlibx-accent: var(--green-600);

  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 375px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid #e2e8e4;
  border-radius: 21px;
  background: #ffffff;
  box-shadow: 0 18px 38px -34px rgba(16, 24, 40, .24);
  transition:
      transform .25s ease,
      border-color .25s ease,
      box-shadow .25s ease;
}

.wmkbotlibx-card:nth-child(4n + 2) {
  --wmkbotlibx-accent: #6d5abb;
}

.wmkbotlibx-card:nth-child(4n + 3) {
  --wmkbotlibx-accent: #c67a24;
}

.wmkbotlibx-card:nth-child(4n + 4) {
  --wmkbotlibx-accent: #397bb5;
}

.wmkbotlibx-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: var(--wmkbotlibx-accent);
  opacity: 0;
  transform: scaleX(.28);
  transition:
      opacity .25s ease,
      transform .25s ease;
}

.wmkbotlibx-card:hover {
  transform: translateY(-5px);
  border-color: rgba(18, 183, 106, .20);
  box-shadow: 0 26px 48px -36px rgba(16, 24, 40, .32);
}

.wmkbotlibx-card:hover::before {
  opacity: 1;
  transform: scaleX(1);
}


/* Card Top */

.wmkbotlibx-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wmkbotlibx-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--wmkbotlibx-accent) 18%, #ffffff);
  border-radius: 14px;
  background: color-mix(in srgb, var(--wmkbotlibx-accent) 8%, #ffffff);
  color: var(--wmkbotlibx-accent);
}

.wmkbotlibx-icon svg {
  width: 23px;
  height: 23px;
}

.wmkbotlibx-number {
  min-width: 34px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #edf0ee;
  border-radius: 8px;
  background: #fafbfa;
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 800;
}

/* Content */

.wmkbotlibx-category {
  display: block;
  margin-top: 20px;
  color: var(--wmkbotlibx-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmkbotlibx-card h3 {
  margin: 7px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.025em;
}

.wmkbotlibx-card > p {
  margin: 10px 0 0;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.68;
}

/* Tags */

.wmkbotlibx-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
  margin-bottom: 24px;
}

.wmkbotlibx-tags span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 1px solid #edf0ee;
  border-radius: 8px;
  background: #f7f9f8;
  color: var(--ink-600);
  font-size: 9px;
  font-weight: 700;
}


/*  DARK VIEW BUTTON */

.wmkbotlibx-view {
  min-height: 44px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: auto;
  padding: 0 15px;
  border: 1px solid var(--green-700);
  border-radius: 11px;
  background-color: var(--green-600);
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 18px -14px rgba(16, 24, 40, .48);
  transition:
      transform .22s ease,
      background .22s ease,
      border-color .22s ease,
      box-shadow .22s ease;
}

.wmkbotlibx-view svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  transition: transform .22s ease;
}

.wmkbotlibx-view:hover {
  transform: translateY(-2px);
  border-color: #344054;
  background-color: var(--green-700);
  box-shadow: 0 14px 22px -15px rgba(16, 24, 40, .56);
}

.wmkbotlibx-view:hover svg {
  transform: translateX(3px);
}

.wmkbotlibx-view:focus-visible {
  outline: 3px solid rgba(18, 183, 106, .22);
  outline-offset: 3px;
}

/*  MODAL */

.wmkbotlibx-modal[hidden] {
  display: none;
}

.wmkbotlibx-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
}

.wmkbotlibx-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 12, 10, .78);
  backdrop-filter: blur(6px);
}

.wmkbotlibx-modal-box {
  position: relative;
  z-index: 2;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 38px 90px rgba(0, 0, 0, .42);
  animation: wmkbotlibxModalIn .22s ease both;
}

@keyframes wmkbotlibxModalIn {
  from {
      opacity: 0;
      transform: translateY(12px) scale(.988);
  }

  to {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}

/* Modal Header */

.wmkbotlibx-modal-top {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 15px 13px 19px;
  border-bottom: 1px solid #e7ebe8;
}

.wmkbotlibx-modal-top span {
  display: block;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmkbotlibx-modal-top strong {
  display: block;
  margin-top: 3px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
}

/* Close */

.wmkbotlibx-modal-close {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #e1e6e3;
  border-radius: 9px;
  background: #ffffff;
  color: var(--ink-700);
  cursor: pointer;
  transition:
      background .2s ease,
      color .2s ease;
}

.wmkbotlibx-modal-close:hover {
  background: var(--ink-50);
  color: var(--ink-900);
}

.wmkbotlibx-modal-close svg {
  width: 16px;
  height: 16px;
}

/* GIF */

.wmkbotlibx-modal-media {
  display: grid;
  place-items: center;
  min-height: 420px;
  max-height: calc(100vh - 135px);
  padding: 24px;
  overflow: auto;
  background: #f7f9f8;
}

.wmkbotlibx-modal-media img {
  width: auto;
  max-width: 100%;
  max-height: 560px;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 22px 42px -30px rgba(16, 24, 40, .35);
}

/*  CHATBOT GIF MODAL */

body.wmkbotlibx-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

html.wmkbotlibx-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

.wmkbotlibx-modal[hidden] {
  display: none;
}

.wmkbotlibx-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.wmkbotlibx-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .91);
  cursor: pointer;
}

.wmkbotlibx-modal-preview {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overscroll-behavior: contain;
}

.wmkbotlibx-loading {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(18, 183, 106, .22);
  border-radius: 12px;
  background: rgba(247, 251, 249, .96);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(8, 35, 23, .18);
}

.wmkbotlibx-loading[hidden] {
  display: none;
}

.wmkbotlibx-loading-mark {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow: 0 0 0 5px rgba(18, 183, 106, .14);
  animation: wmkbotlibxLoadingPulse 1.1s ease-in-out infinite;
}

.wmkbotlibx-modal-preview img {
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease;
}

.wmkbotlibx-modal-preview img.is-ready {
  opacity: 1;
  visibility: visible;
}

@keyframes wmkbotlibxLoadingPulse {
  0%, 100% { transform: scale(.82); opacity: .65; }
  50% { transform: scale(1); opacity: 1; }
}

.wmkbotlibx-modal-preview img {
  width: auto;
  height: auto;
  max-width: min(92vw, 760px);
  max-height: calc(100vh - 90px);
  display: block;
  object-fit: contain;
  background: transparent;
  pointer-events: auto;
  animation: wmkbotlibxPreviewIn .2s ease both;
}

.wmkbotlibx-modal-close {
  position: fixed;
  top: 16px;
  right: 18px;
  z-index: 4;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: .9;
  transition:
      opacity .2s ease,
      transform .2s ease;
}

.wmkbotlibx-modal-close:hover {
  opacity: 1;
  transform: scale(1.08);
}

@keyframes wmkbotlibxPreviewIn {
  from {
      opacity: 0;
      transform: scale(.97);
  }

  to {
      opacity: 1;
      transform: scale(1);
  }
}

/*  Fourth SECTION  */

.wmkchatflow-section,
.wmkchatflow-section * {
  box-sizing:border-box;
}

.wmkchatflow-section {
  position:relative;
  padding:100px 0;
  overflow:hidden;
  background:linear-gradient(180deg,#ffffff 0%,#f7fcfa 100%);
}

/* Background Glow */

.wmkchatflow-section::before {
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  top:-150px;
  right:-120px;
  border-radius:50%;
  background:rgba(0,169,104,.07);
  animation:wmkchatflowGlow 8s ease-in-out infinite;
}

.wmkchatflow-section::after {
  content:"";
  position:absolute;
  width:300px;
  height:300px;
  bottom:-120px;
  left:-100px;
  border-radius:50%;
  background:rgba(0,169,104,.05);
  animation:wmkchatflowGlow 10s ease-in-out infinite reverse;
}

@keyframes wmkchatflowGlow {

  0%,100% {
      transform:translateY(0);
  }

  50% {
      transform:translateY(25px);
  }

}

/* Heading */

.wmkchatflow-heading {
  position:relative;
  z-index:2;
  max-width:760px;
  margin:0 auto 65px;
  text-align:center;
  animation:wmkchatflowFadeUp .8s ease both;
}

.wmkchatflow-eyebrow {
  display:inline-flex;
  padding:8px 16px;
  border-radius:50px;
  background:#ecfff5;
  border:1px solid rgba(0,169,104,.15);
  color:#008f52;
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wmkchatflow-heading h2 {
  margin:22px 0 18px;
  color:#101828;
  font-size:41px;
  line-height:1.1;
  font-weight:800;
  letter-spacing:-.045em;
}

.wmkchatflow-heading h2 span {
  color:#009c5a;
}

.wmkchatflow-heading p {
  max-width:680px;
  margin:auto;
  color:#667085;
  font-size:16px;
  line-height:1.8;
}

/* Main Layout */

.wmkchatflow-wrapper {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr .85fr;
  gap:70px;
  align-items:center;
}

/* Steps */

.wmkchatflow-steps {
  position:relative;
}

.wmkchatflow-steps::before {
  content:"";
  position:absolute;
  left:27px;
  top:35px;
  bottom:35px;
  width:2px;
  background:linear-gradient(
      180deg,
      #00a968,
      rgba(0,169,104,.15)
  );
}

.wmkchatflow-item {
  position:relative;
  display:flex;
  gap:22px;
  padding:28px;
  margin-bottom:22px;
  border:1px solid #e6edf0;
  border-radius:24px;
  background:#fff;
  opacity:0;
  transform:translateX(-40px);
  animation:wmkchatflowSlide .8s ease forwards;
}

.wmkchatflow-item:nth-child(1){
  animation-delay:.2s;
}

.wmkchatflow-item:nth-child(2){
  animation-delay:.35s;
}

.wmkchatflow-item:nth-child(3){
  animation-delay:.5s;
}

@keyframes wmkchatflowSlide {

  to {
      opacity:1;
      transform:translateX(0);
  }

}

.wmkchatflow-item:hover {
  transform:translateX(8px);
  border-color:#00a968;
  box-shadow:0 25px 50px rgba(0,0,0,.07);
}

.wmkchatflow-count {
  position:relative;
  z-index:2;
  width:54px;
  height:54px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#009c5a;
  color:#fff;
  font-size:14px;
  font-weight:800;
  box-shadow:0 12px 25px rgba(0,156,90,.25);
  transition:.3s ease;
}

.wmkchatflow-item:hover .wmkchatflow-count {
  transform:scale(1.08);
}

.wmkchatflow-copy h3 {
  margin:0 0 8px;
  color:#101828;
  font-size:21px;
  font-weight:800;
}


.wmkchatflow-copy p {
  margin:0;
  color:#667085;
  font-size:15px;
  line-height:1.7;
}

/* Chat Preview */

.wmkchatflow-preview {
  display:flex;
  justify-content:center;
  animation:wmkchatflowPreview 1s ease .4s both;
}

@keyframes wmkchatflowPreview {

  from {
      opacity:0;
      transform:scale(.92) translateY(30px);
  }

  to {
      opacity:1;
      transform:scale(1) translateY(0);
  }

}

.wmkchatflow-device {
  width:360px;
  padding:28px;
  border-radius:34px;
  background:#101828;
  box-shadow:0 35px 80px rgba(0,0,0,.18);
  animation:wmkchatflowFloat 5s ease-in-out infinite;
}

@keyframes wmkchatflowFloat {

  0%,100% {
      transform:translateY(0);
  }

  50% {
      transform:translateY(-10px);
  }

}

.wmkchatflow-device-head {
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  margin-bottom:30px;
}


.wmkchatflow-device-head span {
  width:12px;
  height:12px;
  border-radius:50%;
  background:#22c55e;
  animation:wmkchatflowPulse 2s infinite;
}

@keyframes wmkchatflowPulse {
  50% {
      box-shadow:0 0 0 8px rgba(34,197,94,.15);
  }
}

.wmkchatflow-chat {
  padding:16px 18px;
  border-radius:18px;
  margin-bottom:14px;
  font-size:14px;
  line-height:1.5;
  animation:wmkchatflowMessage .7s ease both;
}

.chat-user {
  background:#fff;
  color:#344054;
  animation-delay:.8s;
}


.chat-bot {
  background:#009c5a;
  color:#fff;
  animation-delay:1s;
}

@keyframes wmkchatflowMessage {

  from {
      opacity:0;
      transform:translateY(15px);
  }

  to {
      opacity:1;
      transform:translateY(0);
  }

}

.wmkchatflow-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px;
}



.wmkchatflow-actions span {
  padding:10px 14px;
  border-radius:50px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:12px;
  transition:.3s ease;
}



.wmkchatflow-actions span:hover {
  background:#009c5a;
}



.wmkchatflow-status {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:25px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.15);
  color:#d0d5dd;
  font-size:13px;
}

.wmkchatflow-status i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#22c55e;
}



/* Career Page CSS  */
/* Career story section */

.wmkcareer-story-section{
  padding:110px 0;
  background:
  radial-gradient(circle at top right,rgba(18,183,106,.06),transparent 35%),
  var(--surface);
}

.wmkcareer-story-grid{
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:70px;
  align-items:center;
}

.wmkcareer-story-tag,
.wmkcareer-culture-tag,
.wmkcareer-values-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:var(--green-50);
  border:1px solid var(--green-100);
  color:var(--green-700);
  font-size:14px;
  font-weight:700;
}

.wmkcareer-story-tag i,
.wmkcareer-culture-tag i,
.wmkcareer-values-tag i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-500);
}

.wmkcareer-story-content h2,
.wmkcareer-culture-heading h2,
.wmkcareer-values-heading h2{
  margin:22px 0 18px;
  font-family:var(--font-display);
  font-size:41px;
  line-height:1.15;
  letter-spacing:-1.3px;
  color:var(--ink-900);
  text-wrap-style: balance;
}

.wmkcareer-story-content h2 span,
.wmkcareer-culture-heading h2 span,
.wmkcareer-values-heading h2 span{
  color:var(--green-600);
}

.wmkcareer-story-content p,
.wmkcareer-culture-heading p{
  max-width:620px;
  margin:0 0 16px;
  color:var(--ink-600);
  font-size:17px;
  line-height:1.7;
}

.wmkcareer-story-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:20px;
  padding:13px 22px;
  border-radius:14px;
  background:var(--green-600);
  color:#fff;
  text-decoration:none;
  font-weight:600;
  transition:.25s ease;
}

.wmkcareer-story-link:hover{
  background:var(--green-700);
  transform:translateY(-3px);
}



/* Story Visual */

.wmkcareer-story-frame{
  padding:32px;
  border-radius:30px;
  background:linear-gradient(145deg,var(--green-50),#fff);
  border:1px solid var(--green-100);
  box-shadow:var(--shadow-lg);
}

.wmkcareer-story-main{
  padding:28px;
  text-align:center;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--border);
}

.wmkcareer-story-main span{
  display:block;
  margin-bottom:8px;
  color:var(--green-700);
  font-size:14px;
  font-weight:700;
}

.wmkcareer-story-main strong{
  display:block;
  max-width:300px;
  margin:auto;
  color:var(--ink-900);
  font-size:24px;
  line-height:1.35;
}

.wmkcareer-story-path{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:24px;
}

.wmkcareer-story-step{
  width:100%;
  display:flex;
  align-items:center;
  gap:14px;
  padding:17px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--border);
  transition:.25s ease;
}

.wmkcareer-story-step:hover{
  transform:translateX(6px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-md);
}

.wmkcareer-story-step span{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:var(--green-50);
  color:var(--green-700);
}

.wmkcareer-story-step svg{
  width:22px;
  height:22px;
}

.wmkcareer-story-step strong{
  color:var(--ink-900);
  font-size:17px;
}

.wmkcareer-story-line{
  height:24px;
  width:2px;
  background:var(--green-200);
}



/* =====================================
  Culture Section
===================================== */

.wmkcareer-culture-section{
  padding:100px 0;
  background:var(--bg);
}

.wmkcareer-culture-heading{
  max-width:800px;
  margin:0 auto 55px;
  text-align:center;
}

.wmkcareer-culture-heading p{
  margin-left:auto;
  margin-right:auto;
}

.wmkcareer-culture-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.wmkcareer-culture-card{
  padding:32px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--border);
  transition:.25s ease;
}

.wmkcareer-culture-card:hover{
  transform:translateY(-6px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-md);
}

.wmkcareer-culture-number{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:12px;
  background:var(--green-500);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.wmkcareer-culture-card h3{
  margin:0 0 12px;
  color:var(--ink-900);
  font-size:23px;
}

.wmkcareer-culture-card p{
  margin:0;
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
}



/*   Values Section  */

.wmkcareer-values-section{
  padding:100px 0;
  background:var(--surface);
}

.wmkcareer-values-heading{
  max-width:800px;
  margin:0 auto 55px;
  text-align:center;
}

.wmkcareer-values-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}

.wmkcareer-value-card{
  padding:30px;
  min-height:200px;
  border-radius:24px;
  background:var(--bg);
  border:1px solid var(--border);
  transition:.25s ease;
}

.wmkcareer-value-card:hover{
  background:#fff;
  transform:translateY(-5px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-md);
}

.wmkcareer-value-card h3{
  margin:0 0 12px;
  color:var(--ink-900);
  font-size:23px;
}

.wmkcareer-value-card p{
  margin:0;
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
}




/*  Career Shared Styles */

.wmkcareer-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:999px;
  background:var(--green-50);
  border:1px solid var(--green-100);
  color:var(--green-700);
  font-size:14px;
  font-weight:700;
}

.wmkcareer-label i{
  width:8px;
  height:8px;
  display:block;
  border-radius:50%;
  background:var(--green-500);
}

.wmkcareer-section-head{
  max-width:780px;
  margin:0 auto 60px;
  text-align:center;
}

.wmkcareer-section-head h2,
.wmkcareer-why-content h2,
.wmkcareer-life-content h2{
  margin:22px 0 18px;
  font-family:var(--font-display);
  font-size:41px;
  line-height:1.15;
  letter-spacing:-1.3px;
  color:var(--ink-900);
  text-wrap-style: balance;
}

.wmkcareer-section-head h2 span,
.wmkcareer-why-content h2 span,
.wmkcareer-life-content h2 span{
  color:var(--green-600);
}

.wmkcareer-section-head p,
.wmkcareer-why-content p,
.wmkcareer-life-content p{
  color:var(--ink-600);
  font-size:17px;
  line-height:1.75;
}


/* Why choose the platform */


.wmkcareer-why-section{
  padding:110px 0;
  background:
  radial-gradient(circle at top left,rgba(18,183,106,.06),transparent 35%),
  var(--surface);
}

.wmkcareer-why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center;
}


.wmkcareer-image-frame{
  overflow:hidden;
  border-radius:30px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:var(--shadow-lg);
}


.wmkcareer-image-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:.4s ease;
}


.wmkcareer-image-frame:hover img{
  transform:scale(1.04);
}


.wmkcareer-highlights{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
  margin-top:32px;
}


.wmkcareer-highlight{
  padding:20px;
  border-radius:18px;
  background:var(--green-50);
  border:1px solid var(--green-100);
  transition:.25s ease;
}


.wmkcareer-highlight:hover{
  transform:translateY(-5px);
  background:#fff;
  box-shadow:var(--shadow-md);
}


.wmkcareer-highlight strong{
  display:block;
  margin-bottom:8px;
  color:var(--ink-900);
  font-size:17px;
}


.wmkcareer-highlight span{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.5;
}




/*  Teams Section  */


.wmkcareer-teams-section{
  padding:110px 0;
  background:var(--bg);
}


.wmkcareer-team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}


.wmkcareer-team-card{
  padding:30px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--border);
  transition:.3s ease;
}


.wmkcareer-team-card:hover{
  transform:translateY(-7px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-md);
}


.wmkcareer-team-icon{
  width:50px;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:22px;
  border-radius:15px;
  background:var(--green-50);
  color:var(--green-700);
}


.wmkcareer-team-icon svg{
  width:25px;
  height:25px;
}


.wmkcareer-team-card h3{
  margin:0 0 12px;
  color:var(--ink-900);
  font-size:22px;
}


.wmkcareer-team-card p{
  margin:0;
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
}




/*  Life Section  */


.wmkcareer-life-section{
  padding:110px 0;
  background:#fff;
}


.wmkcareer-life-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  align-items:center;
}


.wmkcareer-life-list{
  margin-top:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}


.wmkcareer-life-list div{
  padding:18px 20px;
  border-left:3px solid var(--green-500);
  background:var(--green-50);
  border-radius:0 16px 16px 0;
  transition:.25s ease;
}


.wmkcareer-life-list div:hover{
  transform:translateX(6px);
}


.wmkcareer-life-list strong{
  display:block;
  margin-bottom:6px;
  color:var(--ink-900);
  font-size:17px;
}


.wmkcareer-life-list span{
  color:var(--ink-600);
  font-size:14px;
}




/*  Career Hiring Section  */

.wmkcareer-hiring-section{
  padding:110px 0;
  background:
  radial-gradient(circle at top right,rgba(18,183,106,.05),transparent 30%),
  var(--bg);
}

.wmkcareer-hiring-section .wmkcareer-section-head{
  max-width:780px;
  margin:0 auto 58px;
  text-align:center;
}

.wmkcareer-hiring-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  max-width:1080px;
  margin:0 auto;
}

.wmkcareer-hiring-card{
  position:relative;
  padding:30px;
  min-height:245px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease;
}

.wmkcareer-hiring-card::before{
  content:"";
  position:absolute;
  top:0;
  left:24px;
  width:calc(100% - 48px);
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
  transform:scaleX(0);
  transform-origin:left center;
  opacity:0;
  transition:transform .38s ease,opacity .25s ease;
}

.wmkcareer-hiring-card::after{
  content:"";
  position:absolute;
  right:-38px;
  bottom:-38px;
  width:110px;
  height:110px;
  border-radius:50%;
  background:rgba(18,183,106,.05);
  transition:transform .3s ease;
}

.wmkcareer-hiring-card:hover{
  transform:translateY(-6px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-lg);
}

.wmkcareer-hiring-card:hover::before{
  transform:scaleX(1);
  opacity:1;
}

.wmkcareer-hiring-card:hover::after{
  transform:scale(1.12);
}

.wmkcareer-hiring-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.wmkcareer-hiring-top span{
  width:54px;
  height:54px;
  min-width:54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:var(--green-50);
  border:1px solid var(--green-100);
  color:var(--green-700);
  font-size:14px;
  font-weight:800;
}

.wmkcareer-hiring-top strong{
  color:var(--ink-900);
  font-size:25px;
  line-height:1.3;
}

.wmkcareer-hiring-card p{
  position:relative;
  z-index:2;
  margin:0 0 24px;
  color:var(--ink-600);
  font-size:16px;
  line-height:1.75;
  max-width:92%;
}

.wmkcareer-hiring-meta{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--green-700);
  font-size:14px;
  font-weight:700;
}

.wmkcareer-hiring-meta i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-500);
}


/*  Benefits & Perks Section  */

.wmkcareer-benefitx-section{
  padding:110px 0;
  background:var(--surface);
}


.wmkcareer-benefitx-head{
  max-width:760px;
  text-align: center;
  margin:0 auto 55px auto;
}


.wmkcareer-benefitx-tag,
.wmkcareer-diversex-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 15px;
  border-radius:999px;
  background:var(--green-50);
  border:1px solid var(--green-100);
  color:var(--green-700);
  font-size:14px;
  font-weight:700;
}


.wmkcareer-benefitx-tag i,
.wmkcareer-diversex-tag i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-500);
}


.wmkcareer-benefitx-head h2,
.wmkcareer-diversex-content h2{
  margin:20px 0 16px;
  font-family:var(--font-display);
  color:var(--ink-900);
  font-size:41px;
  line-height:1.15;
  letter-spacing:-1.2px;
}


.wmkcareer-benefitx-head h2 span,
.wmkcareer-diversex-content h2 span{
  color:var(--green-600);
}


.wmkcareer-benefitx-head p,
.wmkcareer-diversex-content p{
  margin:0;
  color:var(--ink-600);
  font-size:17px;
  line-height:1.75;
}



/* Benefits Grid */

.wmkcareer-benefitx-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}


.wmkcareer-benefitx-card{
  position:relative;
  padding:30px;
  min-height:210px;
  border-radius:26px;
  background:#fff;
  border:1px solid var(--border);
  overflow:hidden;
  transition:.35s ease;
}


.wmkcareer-benefitx-card::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--green-400),var(--green-600));
  transform:scaleX(0);
  transform-origin:left;
  transition:.35s ease;
}


.wmkcareer-benefitx-card:hover{
  transform:translateY(-7px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-lg);
}


.wmkcareer-benefitx-card:hover::before{
  transform:scaleX(1);
}


.wmkcareer-benefitx-number{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:13px;
  font-weight:800;
  margin-bottom:22px;
}


.wmkcareer-benefitx-card h3{
  margin:0 0 10px;
  color:var(--ink-900);
  font-size:22px;
}


.wmkcareer-benefitx-card p{
  margin:0;
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
}




/*  Diversity & Inclusion Section  */


.wmkcareer-diversex-section{
  padding:110px 0;
  background:var(--bg);
}


.wmkcareer-diversex-layout{
  display:grid;
  grid-template-columns:1fr .95fr;
  gap:70px;
  align-items:center;
}



/* Image */

.wmkcareer-diversex-image{
  position:relative;
}


.wmkcareer-diversex-image img{
  width:100%;
  height:520px;
  display:block;
  object-fit:cover;
  border-radius:32px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  transition:.4s ease;
}


.wmkcareer-diversex-image:hover img{
  transform:scale(1.03);
}


.wmkcareer-diversex-image::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-25px;
  bottom:-25px;
  border-radius:30px;
  background:rgba(18,183,106,.10);
  z-index:-1;
}



/* Content */


.wmkcareer-diversex-content p{
  margin-bottom:15px;
}



.wmkcareer-diversex-values{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:32px;
}


.wmkcareer-diversex-value{
  padding:20px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--border);
  transition:.3s ease;
}


.wmkcareer-diversex-value:hover{
  transform:translateY(-5px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-md);
}


.wmkcareer-diversex-value span{
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border-radius:12px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:12px;
  font-weight:800;
}


.wmkcareer-diversex-value strong{
  display:block;
  margin-bottom:7px;
  color:var(--ink-900);
  font-size:17px;
}


.wmkcareer-diversex-value p{
  margin:0;
  color:var(--ink-600);
  font-size:13px;
  line-height:1.55;
}



/* Contact US Page CSS  */

.wmkcontact-v6-hero{
  padding:100px 0 85px;
  background:
  radial-gradient(circle at top left,rgba(18,183,106,.08),transparent 40%),
  var(--surface);
}


.wmkcontact-v6-hero-grid{
  display:grid;
  grid-template-columns:1fr 520px;
  gap:70px;
  align-items:center;
}


.wmkcontact-v6-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  border-radius:999px;
  background:var(--green-50);
  border:1px solid var(--green-100);
  color:var(--green-700);
  font-size:14px;
  font-weight:700;
}


.wmkcontact-v6-tag i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-500);
}


.wmkcontact-v6-hero-content h1{
  margin:22px 0 18px;
  max-width:620px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:48px;
  line-height:1.1;
  letter-spacing:-1.7px;
  color:var(--ink-900);
}


.wmkcontact-v6-hero-content h1 span,
.wmkcontact-v6-heading h2 span,
.wmkcontact-v6-form-info h2 span{
  color:var(--green-600);
}


.wmkcontact-v6-hero-content p{
  max-width:600px;
  margin:0;
  color:var(--ink-600);
  font-size:17px;
  line-height:1.75;
}



.wmkcontact-v6-actions{
  display:flex;
  gap:14px;
  margin-top:34px;
}


.wmkcontact-v6-primary,
.wmkcontact-v6-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 25px;
  border-radius:15px;
  font-size:15px;
  font-weight:700;
  transition:.3s ease;
}


.wmkcontact-v6-primary{
  background:var(--green-600);
  color:#fff;
}


.wmkcontact-v6-primary:hover{
  background:var(--green-700);
  transform:translateY(-3px);
}


.wmkcontact-v6-secondary{
  background:#fff;
  color:var(--ink-800);
  border:1px solid var(--border);
}


.wmkcontact-v6-secondary:hover{
  border-color:var(--green-300);
  transform:translateY(-3px);
}



.wmkcontact-v6-points{
  display:flex;
  gap:35px;
  margin-top:40px;
}


.wmkcontact-v6-points strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink-900);
  font-size:15px;
}


.wmkcontact-v6-points span{
  color:var(--ink-500);
  font-size:13px;
}



/* Hero Image */


.wmkcontact-v6-image{
  position:relative;
}


.wmkcontact-v6-image img{
  width:100%;
  height:500px;
  object-fit:cover;
  display:block;
  border-radius:34px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
}



.wmkcontact-v6-image-card{
  position:absolute;
  left:25px;
  bottom:25px;
  padding:18px 22px;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-md);
}


.wmkcontact-v6-image-card span{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--green-700);
  font-size:13px;
  font-weight:700;
}


.wmkcontact-v6-image-card i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green-500);
}


.wmkcontact-v6-image-card strong{
  display:block;
  margin-top:8px;
  color:var(--ink-900);
  font-size:15px;
}


/*    Options Section */

.wmkcontact-v6-options{
  padding:90px 0;
  background:var(--bg);
}


.wmkcontact-v6-heading{
  max-width:760px;
  text-align:center;
  margin:0 auto 45px auto;
}


.wmkcontact-v6-heading h2,
.wmkcontact-v6-form-info h2{
  margin:20px 0 15px;
  font-family:var(--font-display);
  font-weight:800;
  font-size:44px;
  line-height:1.15;
  color:var(--ink-900);
}


.wmkcontact-v6-heading p,
.wmkcontact-v6-form-info p{
  margin:0;
  color:var(--ink-600);
  font-size:17px;
  line-height:1.7;
}



.wmkcontact-v6-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}


.wmkcontact-v6-card{
  padding:30px;
  background:#fff;
  border-radius:26px;
  border:1px solid var(--border);
  transition:.3s ease;
}


.wmkcontact-v6-card:hover{
  transform:translateY(-8px);
  border-color:var(--green-200);
  box-shadow:var(--shadow-lg);
}



.wmkcontact-v6-card span{
  width:45px;
  height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--green-50);
  color:var(--green-700);
  font-size:13px;
  font-weight:800;
}


.wmkcontact-v6-card h3{
  margin:22px 0 10px;
  font-family:var(--font-display);
  font-weight:800;
  color:var(--ink-900);
  font-size:21px;
}


.wmkcontact-v6-card p{
  margin:0 0 20px;
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
}


.wmkcontact-v6-card a{
  color:var(--green-700);
  font-weight:700;
}




/*   Form Section  */


.wmkcontact-v6-form-section{
  padding:100px 0;
}


.wmkcontact-v6-form-box{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:55px;
  padding:55px;
  border-radius:35px;
  background:
  radial-gradient(circle at top right,rgba(18,183,106,.12),transparent 35%),
  var(--green-50);
  border:1px solid var(--green-100);
}



.wmkcontact-v6-benefits{
  margin-top:30px;
}


.wmkcontact-v6-benefits div{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  color:var(--ink-700);
  font-size:15px;
}


.wmkcontact-v6-benefits i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green-500);
}



.wmkcontact-v6-form{
  padding:35px;
  background:#fff;
  border-radius:30px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}


.wmkcontact-v6-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}



.wmkcontact-v6-field{
  position:relative;
  margin-bottom:18px;
}



.wmkcontact-v6-field input,
.wmkcontact-v6-field textarea{

  width:100%;
  padding:17px 18px;
  border-radius:16px;
  border:1px solid #d9e4df;
  background:#fff;
  outline:none;
  color:var(--ink-900);
  font-size:15px;
  transition:.3s ease;

}


.wmkcontact-v6-field input:hover,
.wmkcontact-v6-field textarea:hover{
  border-color:#b8dcca;
}


.wmkcontact-v6-field textarea{
  min-height:120px;
  resize:none;
}



.wmkcontact-v6-field label{

  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  padding:0 6px;
  color:#7b8794;
  font-size:14px;
  pointer-events:none;
  transition:.25s ease;

}



.wmkcontact-v6-field textarea + label{
  top:24px;
  transform:none;
}



.wmkcontact-v6-field input:focus,
.wmkcontact-v6-field textarea:focus{

  border-color:var(--green-500);
  box-shadow:0 0 0 5px rgba(18,183,106,.10);

}



.wmkcontact-v6-field input:focus + label,
.wmkcontact-v6-field textarea:focus + label,
.wmkcontact-v6-field input:valid + label,
.wmkcontact-v6-field textarea:valid + label{

  top:-9px;
  font-size:12px;
  color:var(--green-700);

}



.wmkcontact-v6-form button{

  width:100%;
  height:56px;
  margin-top:5px;
  border:none;
  border-radius:16px;
  background:var(--green-600);
  color:#fff;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.3s ease;

}


.wmkcontact-v6-form button:hover{

  background:var(--green-700);
  transform:translateY(-3px);

}



/* Policy Page CSS  */

/* Privacy policy */

.wmkprivacyx-page,
.wmkprivacyx-page * {
  box-sizing:border-box;
}

.wmkprivacyx-page {
  color:#101828;
  background:#fff;
  overflow:visible;
}

.wmkprivacyx-hero .wrap{
padding-top:10px !important;
}
.wmkprivacyx-hero {
  position:relative;
  padding:92px 0 86px;
  overflow:hidden;
  background:linear-gradient(145deg,#f7faf8 0%,#f5fbf8 55%,#ffffff 100%);
  border-bottom:1px solid #eaecf0;
}

.wmkprivacyx-hero::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#039855,#32d583,#039855);
}

.wmkprivacyx-hero-inner {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.75fr);
  gap:80px;
  align-items:center;
}

.wmkprivacyx-hero-copy {
  max-width:720px;
}

.wmkprivacyx-eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:22px;
  color:#027a48;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.wmkprivacyx-eyebrow::before {
  content:"";
  width:24px;
  height:2px;
  background:#12b76a;
}

.wmkprivacyx-hero h1 {
  max-width:760px;
  margin:0;
  color:#101828;
  font-family:var(--font-display,"Plus Jakarta Sans",sans-serif);
  font-size:46px;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.045em;
}

.wmkprivacyx-hero h1 span {
  color:#039855;
}

.wmkprivacyx-hero-copy > p {
  max-width:690px;
  margin:24px 0 0;
  color:#667085;
  font-size:17px;
  line-height:1.8;
}

.wmkprivacyx-updated {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:30px;
  color:#667085;
  font-size:13px;
}

.wmkprivacyx-updated span {
  padding-right:12px;
  border-right:1px solid #d0d5dd;
}

.wmkprivacyx-updated strong {
  color:#344054;
  font-weight:700;
}

.wmkprivacyx-hero-panel {
  padding:28px;
  border:1px solid #dce7e1;
  border-radius:24px;
  background:rgba(255,255,255,.9);
  box-shadow:0 24px 60px rgba(16,24,40,.08);
}

.wmkprivacyx-panel-label {
  display:block;
  margin-bottom:18px;
  color:#667085;
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.wmkprivacyx-principle {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:15px;
  padding:18px 0;
  border-top:1px solid #eaecf0;
}

.wmkprivacyx-principle:first-of-type {
  border-top:0;
}

.wmkprivacyx-principle > span {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#ecfdf3;
  color:#027a48;
  font-size:11px;
  font-weight:800;
}

.wmkprivacyx-principle strong {
  display:block;
  margin-bottom:5px;
  color:#101828;
  font-size:15px;
  font-weight:800;
}

.wmkprivacyx-principle p {
  margin:0;
  color:#667085;
  font-size:13px;
  line-height:1.65;
}


/* Content */

.wmkprivacyx-content {
  padding:86px 0 105px;
}

.wmkprivacyx-layout {
  display:grid;
  grid-template-columns:255px minmax(0,1fr);
  gap:70px;
  align-items:start;
}


/* Sidebar */

.wmkprivacyx-sidebar {
  position:sticky;
  top:110px;
  align-self:start;
  z-index:3;
}

.wmkprivacyx-sidebar-card {
  padding:22px;
  border:1px solid #eaecf0;
  border-radius:18px;
  background:#f9fafb;
}

.wmkprivacyx-sidebar-card > span {
  display:block;
  margin-bottom:15px;
  color:#101828;
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.wmkprivacyx-sidebar nav {
  display:flex;
  flex-direction:column;
  gap:3px;
}

.wmkprivacyx-sidebar a {
  display:block;
  padding:8px 10px;
  border-radius:8px;
  color:#667085;
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  text-decoration:none;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.wmkprivacyx-sidebar a:hover {
  background:#ecfdf3;
  color:#027a48;
  transform:translateX(2px);
}
/* Active Privacy Sidebar Link */
.wmkprivacyx-sidebar a.is-active {
  background:#ecfdf3;
  color:#027a48;
  font-weight:800;
}

.wmkprivacyx-sidebar a.is-active::before {
  opacity:1;
}

/* Optional smooth transition */
.wmkprivacyx-sidebar a {
  position:relative;
  transition:
      background .2s ease,
      color .2s ease,
      transform .2s ease;
}


/* Main Policy */

.wmkprivacyx-main {
  min-width:0;
}

.wmkprivacyx-block {
  position:relative;
  padding:0 0 54px;
  margin:0 0 54px;
  border-bottom:1px solid #eaecf0;
  scroll-margin-top:120px;
}

.wmkprivacyx-block:last-child {
  margin-bottom:0;
}

.wmkprivacyx-block-number {
  display:block;
  margin-bottom:12px;
  color:#039855;
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

.wmkprivacyx-block h2 {
  margin:0 0 20px;
  color:#101828;
  font-family:var(--font-display,"Plus Jakarta Sans",sans-serif);
  font-size:32px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.025em;
}

.wmkprivacyx-block > p {
  max-width:850px;
  margin:0 0 17px;
  color:#475467;
  font-size:15px;
  line-height:1.85;
}

.wmkprivacyx-block > p:last-child {
  margin-bottom:0;
}


/* Data Cards */

.wmkprivacyx-data-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:28px;
}

.wmkprivacyx-data-grid article {
  padding:23px;
  border:1px solid #eaecf0;
  border-radius:17px;
  background:#fff;
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}

.wmkprivacyx-data-grid article:hover {
  transform:translateY(-3px);
  border-color:#a6f4c5;
  box-shadow:0 18px 40px rgba(16,24,40,.06);
}

.wmkprivacyx-data-grid article > span {
  display:inline-flex;
  margin-bottom:13px;
  padding:6px 9px;
  border-radius:7px;
  background:#ecfdf3;
  color:#027a48;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.wmkprivacyx-data-grid h3 {
  margin:0 0 8px;
  color:#101828;
  font-size:16px;
  font-weight:800;
}

.wmkprivacyx-data-grid p {
  margin:0;
  color:#667085;
  font-size:13px;
  line-height:1.7;
}


/* Lists */

.wmkprivacyx-list {
  max-width:860px;
  display:grid;
  gap:10px;
  margin:23px 0 0;
  padding:0;
  list-style:none;
}

.wmkprivacyx-list li {
  position:relative;
  padding:13px 15px 13px 42px;
  border:1px solid #eaecf0;
  border-radius:11px;
  background:#fafafa;
  color:#475467;
  font-size:14px;
  line-height:1.65;
}

.wmkprivacyx-list li::before {
  content:"✓";
  position:absolute;
  top:13px;
  left:15px;
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#d1fadf;
  color:#027a48;
  font-size:10px;
  font-weight:900;
}


/* Highlight */

.wmkprivacyx-highlight {
  margin:24px 0;
  padding:24px 26px;
  border-left:4px solid #12b76a;
  border-radius:0 15px 15px 0;
  background:#f3fcf7;
}

.wmkprivacyx-highlight span {
  display:block;
  margin-bottom:7px;
  color:#027a48;
  font-size:10px;
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.wmkprivacyx-highlight strong {
  display:block;
  max-width:720px;
  color:#101828;
  font-size:18px;
  font-weight:800;
  line-height:1.5;
}


/* Sharing List */

.wmkprivacyx-info-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:26px;
  overflow:hidden;
  border:1px solid #eaecf0;
  border-radius:18px;
  background:#eaecf0;
}

.wmkprivacyx-info-list > div {
  padding:24px;
  background:#fff;
}

.wmkprivacyx-info-list strong {
  display:block;
  margin-bottom:8px;
  color:#101828;
  font-size:15px;
  font-weight:800;
}

.wmkprivacyx-info-list p {
  margin:0;
  color:#667085;
  font-size:13px;
  line-height:1.7;
}


/* Contact */

.wmkprivacyx-contact {
  padding:34px;
  border:1px solid #ccebdc;
  border-radius:22px;
  background:linear-gradient(135deg,#f2fcf6 0%,#ffffff 100%);
}

.wmkprivacyx-contact-layout {
  display:grid;
  grid-template-columns:1fr auto;
  gap:40px;
  align-items:center;
}

.wmkprivacyx-contact-label {
  display:block;
  margin-bottom:10px;
  color:#027a48;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.wmkprivacyx-contact h2 {
  margin-bottom:12px;
}

.wmkprivacyx-contact p {
  max-width:700px;
  margin:0;
  color:#475467;
  font-size:14px;
  line-height:1.75;
}

.wmkprivacyx-contact-action a {
  min-height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 19px;
  border-radius:11px;
  background:#101828;
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .2s ease,background .2s ease;
}

.wmkprivacyx-contact-action a:hover {
  background:#1d2939;
  transform:translateY(-2px);
}



/* Integrations  -  Shopify Page CSS  */






/*   SHOPIFY INTEGRATION INNER PAGE */

.wmshp2-page,
.wmshp2-page *,
.wmshp2-page *::before,
.wmshp2-page *::after {
  box-sizing: border-box;
}

.wmshp2-page {
  overflow: hidden;
  background: var(--surface);
}

.wmshp2-page svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wmshp2-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--green-700);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .08em;
}

.wmshp2-label::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--green-500);
}


/*   HERO  */

.wmshp2-hero {
  position: relative;
  padding: 116px 0 38px;
  overflow: hidden;
  background:
      radial-gradient(circle at 84% 23%, rgba(18,183,106,.10), transparent 29%),
      linear-gradient(180deg, #fbfefc 0%, var(--surface) 82%);
}

.wmshp2-hero::after {
  content: "";
  position: absolute;
  top: 80px;
  right: -150px;
  width: 410px;
  height: 410px;
  border: 1px solid rgba(18,183,106,.08);
  border-radius: 50%;
  box-shadow:
      0 0 0 55px rgba(18,183,106,.025),
      0 0 0 110px rgba(18,183,106,.015);
  pointer-events: none;
}

.wmshp2-hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(470px,1.1fr);
  align-items: center;
  gap: 64px;
}


/* Integration identity */

.wmshp2-app-line {
  width: fit-content;
  max-width: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 9px;
  border: 1px solid var(--green-100);
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--shadow-sm);
}

.wmshp2-app-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmshp2-app-line > div:nth-child(2) {
  display: flex;
  flex-direction: column;
}

.wmshp2-app-line > div:nth-child(2) > span {
  color: var(--ink-400);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
}

.wmshp2-app-line strong {
  margin-top: 2px;
  color: var(--ink-800);
  font-size: 13px;
  font-weight: 800;
}

.wmshp2-app-line > b {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.wmshp2-app-line > b > i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-500);
}


/* Hero copy */

.wmshp2-hero-copy h1 {
  max-width: 620px;
  margin: 22px 0 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(36px,4vw,42px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.038em;
  text-wrap: balance;
}

.wmshp2-hero-copy h1 span {
  color: var(--green-600);
}

.wmshp2-hero-copy > p {
  max-width: 590px;
  margin-top: 18px;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.72;
  text-wrap: pretty;
}


/*   PREMIUM CTA BUTTON SYSTEM  */

.wmshp2-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-top: 27px;
}


/* Primary */

.wmshp2-primary-btn {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 5px 6px 5px 19px;
  overflow: hidden;
  border: 1px solid var(--green-600);
  border-radius: 13px;
  background:
      linear-gradient(
          135deg,
          var(--green-500),
          var(--green-600)
      );
  color: #fff;
  box-shadow:
      0 12px 25px -14px rgba(3,152,85,.6),
      0 4px 10px rgba(3,152,85,.12);
  font-size: 13px;
  font-weight: 750;
  transition:
      transform .22s ease,
      box-shadow .22s ease,
      background .22s ease;
}

.wmshp2-primary-btn::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -35%;
  width: 80px;
  height: 130px;
  opacity: .18;
  transform: rotate(25deg);
  background: #fff;
  transition: left .45s ease;
}

.wmshp2-primary-btn:hover::before {
  left: 110%;
}

.wmshp2-primary-btn:hover {
  color: #fff;
  background:
      linear-gradient(
          135deg,
          var(--green-600),
          var(--green-700)
      );
  box-shadow:
      0 16px 30px -15px rgba(3,152,85,.65),
      0 6px 13px rgba(3,152,85,.14);
  transform: translateY(-2px);
}

.wmshp2-primary-btn > span {
  position: relative;
  z-index: 2;
}

.wmshp2-primary-btn > i {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.15);
  color: #fff;
  transition:
      background .22s ease,
      transform .22s ease;
}

.wmshp2-primary-btn:hover > i {
  background: rgba(255,255,255,.2);
  transform: translateX(2px);
}


/* Secondary */

.wmshp2-secondary-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 17px 5px 6px;
  border: 1px solid var(--ink-200);
  border-radius: 13px;
  background: rgba(255,255,255,.92);
  color: var(--ink-700);
  box-shadow:
      0 1px 2px rgba(16,24,40,.03),
      0 7px 18px -14px rgba(16,24,40,.2);
  font-size: 13px;
  font-weight: 750;
  transition:
      border-color .22s ease,
      color .22s ease,
      background .22s ease,
      transform .22s ease,
      box-shadow .22s ease;
}

.wmshp2-secondary-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 9px;
  background: var(--green-50);
  color: var(--green-700);
  transition:
      background .22s ease,
      color .22s ease,
      transform .22s ease;
}

.wmshp2-secondary-btn:hover {
  border-color: var(--green-200);
  background: #fff;
  color: var(--green-700);
  box-shadow:
      0 10px 22px -15px rgba(16,24,40,.26);
  transform: translateY(-2px);
}

.wmshp2-secondary-btn:hover .wmshp2-secondary-icon {
  background: var(--green-100);
  transform: translateY(2px);
}


/* Hero proof */

.wmshp2-hero-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 17px;
  margin-top: 22px;
}

.wmshp2-hero-proof > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-500);
  font-size: 11px;
  font-weight: 650;
}

.wmshp2-hero-proof svg {
  width: 19px;
  height: 19px;
  padding: 5px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
}


/*  HERO IMAGE  */

.wmshp2-hero-media {
  position: relative;
  min-height: 470px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wmshp2-main-image {
  position: relative;
  width: min(100%,520px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--ink-50);
  box-shadow:
      0 32px 70px -42px rgba(16,24,40,.45);
}

.wmshp2-main-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.3);
  pointer-events: none;
}

.wmshp2-main-image img {
  width: 100%;
  /* height: 100%; */
  display: block;
}


/* Image badges */

.wmshp2-image-badge {
  position: absolute;
  z-index: 3;
  display: grid;
  grid-template-columns: 35px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  min-width: 185px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(10px);
}

.wmshp2-image-badge > span {
  width: 35px;
  height: 35px;
  padding: 8px;
  border-radius: 9px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmshp2-image-badge > div {
  display: flex;
  flex-direction: column;
}

.wmshp2-image-badge small {
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
}

.wmshp2-image-badge strong {
  margin-top: 2px;
  color: var(--ink-700);
  font-size: 11px;
}

.wmshp2-image-badge-top {
  top: 38px;
  right: -6px;
}

.wmshp2-image-badge-bottom {
  left: -8px;
  bottom: 32px;
}


/* =========================================================
  META BAR
========================================================= */

.wmshp2-meta-bar {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.wmshp2-meta-bar > div {
  position: relative;
  padding: 13px 16px;
}

.wmshp2-meta-bar > div + div {
  border-left: 1px solid var(--border);
}

.wmshp2-meta-bar span,
.wmshp2-meta-bar strong {
  display: block;
}

.wmshp2-meta-bar span {
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.wmshp2-meta-bar strong {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 12px;
}


/* =========================================================
  OVERVIEW
========================================================= */

.wmshp2-overview {
  padding: 70px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.wmshp2-overview-grid {
  display: grid;
  grid-template-columns: minmax(0,.88fr) minmax(460px,1.12fr);
  align-items: center;
  gap: 70px;
}

.wmshp2-overview-copy h2,
.wmshp2-section-head h2,
.wmshp2-journey-heading h2 {
  max-width: 650px;
  margin-top: 10px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(28px,3vw,33px);
  font-weight: 800;
  line-height: 1.17;
  letter-spacing: -.033em;
  text-wrap: balance;
}

.wmshp2-overview-copy > p {
  max-width: 520px;
  margin-top: 13px;
  color: var(--ink-500);
  font-size: 14px;
  line-height: 1.72;
}

.wmshp2-overview-copy > p + p {
  margin-top: 9px;
}


/* Proper inline button */

.wmshp2-inline-action {
  width: fit-content;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  padding: 5px 6px;
  padding-right: 11px;
  border: 1px solid var(--green-100);
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 750;
  transition:
      background .2s ease,
      border-color .2s ease,
      transform .2s ease,
      box-shadow .2s ease;
}

.wmshp2-inline-action:hover {
  color: var(--green-700);
  background: var(--green-100);
  border-color: var(--green-200);
  box-shadow: 0 8px 18px -14px rgba(3,152,85,.45);
  transform: translateY(-1px);
}

.wmshp2-inline-action-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface);
  color: var(--green-700);
  box-shadow: var(--shadow-sm);
}

.wmshp2-inline-action > i {
  width: 17px;
  height: 17px;
  margin-left: 2px;
  transition: transform .2s ease;
}

.wmshp2-inline-action:hover > i {
  transform: translateX(3px);
}


/* Overview image */

.wmshp2-overview-image {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--ink-50);
  box-shadow: 0 26px 60px -44px rgba(16,24,40,.42);
}

.wmshp2-overview-image img {
  width: 100%;
  border-radius: 20px;
}

.wmshp2-overview-status {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: 9px 1fr;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: rgba(16,24,40,.83);
  color: #fff;
  backdrop-filter: blur(12px);
}

.wmshp2-overview-status > i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green-400);
  box-shadow:
      0 0 0 5px rgba(50,213,131,.12);
}

.wmshp2-overview-status > span {
  display: flex;
  flex-direction: column;
}

.wmshp2-overview-status small {
  color: var(--green-200);
  font-size: 9px;
  font-weight: 750;
}

.wmshp2-overview-status strong {
  margin-top: 2px;
  color: #fff;
  font-size: 11px;
}

/* =========================================================
  CAPABILITIES
========================================================= */

.wmshp2-capabilities {
  padding: 70px 0;
  background: var(--bg);
}

.wmshp2-section-head {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 34px;
}

.wmshp2-section-head > p {
  max-width: 470px;
  margin: 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.7;
}

.wmshp2-capability-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
}

.wmshp2-capability {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  align-items: start;
  gap: 14px;
  min-height: 175px;
  padding: 25px;
  background: var(--surface);
  transition:
      background .22s ease,
      box-shadow .22s ease;
}

.wmshp2-capability:nth-child(odd) {
  border-right: 1px solid var(--border);
}

.wmshp2-capability:nth-child(n+3) {
  border-top: 1px solid var(--border);
}

.wmshp2-capability::after {
  content: "";
  position: absolute;
  top: 0;
  left: 25px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--green-500);
  transition: width .28s ease;
}

.wmshp2-capability:hover {
  background: linear-gradient( 145deg, #fbfefc, var(--surface));
}

.wmshp2-capability:hover::after {
  width: 42px;
}

.wmshp2-cap-icon {
  width: 46px;
  height: 46px;
  padding: 11px;
  border-radius: 12px;
  background: var(--green-50);
  color: var(--green-700);
  transition: transform .22s ease, background .22s ease;
}

.wmshp2-capability:hover .wmshp2-cap-icon {
  background: var(--green-100);
  transform: translateY(-2px);
}

.wmshp2-cap-icon-amber {
  background: var(--amber-100);
  color: var(--amber-600);
}

.wmshp2-capability:hover .wmshp2-cap-icon-amber {
  background: var(--amber-100);
}

.wmshp2-capability small {
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
}

.wmshp2-capability h3 {
  margin-top: 6px;
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 780;
  line-height: 1.32;
  letter-spacing: -.018em;
}

.wmshp2-capability p {
  max-width: 440px;
  margin-top: 7px;
  color: var(--ink-500);
  font-size: 12px;
  line-height: 1.65;
}

/*   JOURNEY  */

.wmshp2-journey {
  padding: 70px 0;
  background: var(--surface);
}

.wmshp2-journey-shell {
  position: relative;
  padding: 39px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: radial-gradient(circle at 90% 10%, rgba(18,183,106,.08), transparent 28%), linear-gradient(145deg,#fbfefc,var(--surface));
}

.wmshp2-journey-shell::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -180px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(18,183,106,.08);
  border-radius: 50%;
}

.wmshp2-journey-heading {
  position: relative;
  z-index: 2;
  max-width: 690px;
  margin-inline: auto;
  text-align: center;
}

.wmshp2-journey-heading h2 {
  margin-inline: auto;
}

.wmshp2-journey-heading > p {
  max-width: 570px;
  margin: 11px auto 0;
  color: var(--ink-500);
  font-size: 13px;
  line-height: 1.68;
}

.wmshp2-flow {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 34px 1fr 34px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
}

.wmshp2-flow article {
  min-height: 185px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: 21px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.wmshp2-flow article:hover {
  border-color: var(--green-100);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.wmshp2-flow article.wmshp2-flow-active {
  border-color: var(--green-100);
  background: linear-gradient(145deg, var(--green-50), var(--surface));
}

.wmshp2-flow-icon {
  width: 43px;
  height: 43px;
  padding: 10px;
  border-radius: 11px;
  background: var(--green-50);
  color: var(--green-700);
}

.wmshp2-flow-active .wmshp2-flow-icon {
  background: var(--green-600);
  color: #fff;
  box-shadow:
      0 9px 18px -12px rgba(3,152,85,.6);
}

.wmshp2-flow article > small {
  margin-top: 14px;
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
}

.wmshp2-flow article > strong {
  margin-top: 4px;
  color: var(--ink-800);
  font-size: 14px;
  font-weight: 750;
}

.wmshp2-flow article > p {
  margin-top: 6px;
  color: var(--ink-500);
  font-size: 11px;
  line-height: 1.58;
}

.wmshp2-flow-arrow {
  width: 30px;
  height: 30px;
  margin-inline: auto;
  padding: 7px;
  border: 1px solid var(--green-100);
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-700);
}


/*   FINAL CTA */

.wmshp2-cta {
  padding: 0 0 72px;
  background: var(--surface);
}

.wmshp2-cta-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 45px;
  overflow: hidden;
  padding: 38px 44px;
  border-radius: 19px;
  background: radial-gradient(circle at 92% 0,rgba(255,255,255,.14),transparent 29%), linear-gradient(135deg,var(--green-600),var(--green-700));
  box-shadow: var(--shadow-green);
}

.wmshp2-cta-shell::after {
  content: "";
  position: absolute;
  right: -160px;
  bottom: -270px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  box-shadow: 0 0 0 55px rgba(255,255,255,.022), 0 0 0 110px rgba(255,255,255,.014);
}

.wmshp2-cta-shell > div,
.wmshp2-cta-btn {
  position: relative;
  z-index: 2;
}

.wmshp2-cta-shell > div > span {
  color: var(--green-200);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
}

.wmshp2-cta-shell h2 {
  max-width: 650px;
  margin-top: 7px;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(25px,3vw,31px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.wmshp2-cta-shell p {
  max-width: 570px;
  margin-top: 9px;
  color: rgba(255,255,255,.78);
  font-size: 12px;
  line-height: 1.65;
}


/* CTA white premium button */

.wmshp2-cta-btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 6px 6px 18px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 12px;
  background: #fff;
  color: var(--green-700);
  box-shadow:
      0 14px 28px -17px rgba(16,24,40,.48);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  transition:
      transform .22s ease,
      box-shadow .22s ease;
}

.wmshp2-cta-btn:hover {
  color: var(--green-700);
  transform: translateY(-2px);
  box-shadow:
      0 18px 32px -17px rgba(16,24,40,.56);
}

.wmshp2-cta-btn > i {
  width: 37px;
  height: 37px;
  flex: 0 0 37px;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 9px;
  background: var(--green-50);
  color: var(--green-700);
  transition:
      background .2s ease,
      transform .2s ease;
}

.wmshp2-cta-btn:hover > i {
  background: var(--green-100);
  transform: translateX(2px);
}


.wmh-integration-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.wmh-integration-grid > a,
.wmh-integration-all {
    display: grid;
    grid-template-columns:44px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    min-width: 0;
    min-height: 72px;
    padding: 10px 11px;
    border: 1px solid rgba(208, 213, 221, 0.72);
    border-radius: 14px;
    color: var(--ink-800);
    text-decoration: none;
    background: #ffffff;
    box-shadow: 0 8px 20px -20px rgba(16, 24, 40, 0.56);
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}


.wmh-integration-grid > a > span:nth-child(2),
.wmh-integration-all > span:nth-child(2) {
  min-width: 0;
  flex: 1;
}



.wmh-integration-grid > a > i,
.wmh-integration-all > i {
  color: #08a66a;
  font-style: normal;
  font-size: 16px;
}

.wmh-integration-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.wmh-integration-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #ecfdf3;
    color: #079455;
}

.wmh-integration-icon::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.wmh-integration-icon::before {
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.wmh-integration-icon--shopify::before,
.wmh-integration-icon--woo::before,
.wmh-integration-icon--custom::before {
  content: "" !important;
  width: 20px;
  height: 20px;
  background: currentColor;
  -webkit-mask: var(--wmh-icon) center / contain no-repeat;
  mask: var(--wmh-icon) center / contain no-repeat;
}

.wmh-product-icon--integration {
  color: #087f5b;
  background: #e9fbf2;
}

.wmh-product-icon--integration::before {
  content: "↗";
  font-size: 18px;
  font-weight: 800;
}

/* Distinct, topic-specific symbols keep each menu item scannable. */
.wmh-menu-card[href*="support/"] .wmh-menu-icon::before,
.wmh-mobile-card[href*="support/"] .wmh-mobile-row-icon::before { content: "♧" !important; }
.wmh-menu-card[href*="sales/"] .wmh-menu-icon::before,
.wmh-mobile-card[href*="sales/"] .wmh-mobile-row-icon::before { content: "↗" !important; }
.wmh-menu-card[href*="marketing/"] .wmh-menu-icon::before,
.wmh-mobile-card[href*="marketing/"] .wmh-mobile-row-icon::before { content: "◉" !important; }

.wmh-industry-grid a[href*="education/"] .wmh-industry-icon::before { content: "✦" !important; }
.wmh-industry-grid a[href*="ecommerce/"] .wmh-industry-icon::before { content: "▣" !important; }
.wmh-industry-grid a[href*="marketing-agencies/"] .wmh-industry-icon::before { content: "⌁" !important; }
.wmh-industry-grid a[href*="healthcare/"] .wmh-industry-icon::before { content: "＋" !important; }

.wmh-product-grid a[href*="whatsapp-chatbot/"] .wmh-product-icon::before { content: "◌" !important; }
.wmh-product-grid a[href*="chatbot-library/"] .wmh-product-icon::before { content: "▦" !important; }
.wmh-product-grid a[href*="whatsapp-broadcast/"] .wmh-product-icon::before { content: "◈" !important; }
.wmh-product-grid a[href*="whatsapp-business-api/"] .wmh-product-icon::before { content: "⌁" !important; }
.wmh-product-grid a[href*="shared-team-inbox/"] .wmh-product-icon::before { content: "≡" !important; }
.wmh-product-grid a[href*="facebook-messenger-automation/"] .wmh-product-icon::before { content: "●" !important; }
.wmh-product-grid a[href*="whatsapp-business-calling/"] .wmh-product-icon::before { content: "⌕" !important; }
.wmh-product-grid a[href*="click-to-whatsapp-ads/"] .wmh-product-icon::before { content: "➤" !important; }
.wmh-product-grid a[href*="integrations-overview/"] .wmh-product-icon::before { content: "↗" !important; }
.wmh-product-grid a[href*="mme-flow-ai/"] .wmh-product-icon::before { content: "✦" !important; }

/* Clean-url icon mappings (the menu uses extensionless routes). */
.wmh-menu-card[href*="support/"], .wmh-mobile-card[href*="support/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Cpath d='M4 14a2 2 0 0 1 2-2h1v6H6a2 2 0 0 1-2-2v-2ZM20 14a2 2 0 0 0-2-2h-1v6h1a2 2 0 0 0 2-2v-2Z'/%3E%3C/svg%3E"); }
.wmh-menu-card[href*="sales/"], .wmh-mobile-card[href*="sales/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19 10 13l4 4 6-8'/%3E%3Cpath d='M15 9h5v5'/%3E%3C/svg%3E"); }
.wmh-menu-card[href*="marketing/"], .wmh-mobile-card[href*="marketing/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-6v14L3 14v-3Z'/%3E%3Cpath d='M7 15.5 8.5 20'/%3E%3C/svg%3E"); }
.wmh-industry-grid a[href*="education/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-4 9 4-9 4-9-4Z'/%3E%3Cpath d='M7 11v5c3 2 7 2 10 0v-5'/%3E%3C/svg%3E"); }
.wmh-industry-grid a[href*="ecommerce/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1 12H5L4 8Z'/%3E%3Cpath d='M8 8a4 4 0 0 1 8 0'/%3E%3C/svg%3E"); }
.wmh-industry-grid a[href*="marketing-agencies/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-6v14L3 14v-3Z'/%3E%3C/svg%3E"); }
.wmh-industry-grid a[href*="healthcare/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }

.wmh-product-grid a[href*="whatsapp-chatbot/"], .wmh-product-grid a[href*="chatbot-library/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M8 10h.01M12 10h.01M16 10h.01M8 15h8'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="whatsapp-broadcast/"], .wmh-product-grid a[href*="click-to-whatsapp-ads/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-6v14L3 14v-3Z'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="whatsapp-catalog/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v14H4z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="whatsapp-catalog/"] .wmh-product-icon { color: #087f5b; background: #e9fbf2; }
.wmh-product-grid a[href*="whatsapp-business-api/"], .wmh-product-grid a[href*="facebook-messenger-automation/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v12H8l-4 4V5Z'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="shared-team-inbox/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v12H4zM8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="whatsapp-business-calling/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h4l2 5-3 2a12 12 0 0 0 5 5l2-3 5 2v4c-1 2-5 2-8 0-4-2-7-5-9-9-2-3-2-7 2-6Z'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="integrations-overview/"], .wmh-product-grid a[href*="mme-flow-ai/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="whatsapp-business-api/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a8 8 0 0 1-11.8 7L4 20l1.5-4.2A8 8 0 1 1 20 11.5Z'/%3E%3Cpath d='M8.5 9.5c.7 2 2 3.3 4 4'/%3E%3Cpath d='m8.2 8.5 1.2-.5 1 1.7-.8.7'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="facebook-messenger-automation/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 0 0-8 7.7c0 2.4 1.1 4.5 3 5.9V21l3.2-1.8c.6.1 1.2.2 1.8.2a8 8 0 1 0 0-15.4Z'/%3E%3Cpath d='m8 13 2.5-2 2 1.5 3.5-2'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="click-to-whatsapp-ads/"] { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 3 13 8-6 2-2 6L5 3Z'/%3E%3Cpath d='m13 13 5 5'/%3E%3C/svg%3E"); }
.wmh-product-grid a[href*="whatsapp-business-api/"] .wmh-product-icon {
  color: #079455;
  background: #e9fbf2;
}
.wmh-product-grid a[href*="facebook-messenger-automation/"] .wmh-product-icon {
  color: #7c3aed;
  background: #f2edff;
}
.wmh-product-grid a[href*="whatsapp-business-api/"] .wmh-product-icon::before,
.wmh-product-grid a[href*="facebook-messenger-automation/"] .wmh-product-icon::before {
  width: 22px;
  height: 22px;
  background: none;
  -webkit-mask: none;
  mask: none;
  display: grid;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
}
.wmh-product-grid a[href*="whatsapp-business-api/"] .wmh-product-icon::before {
  content: "☎" !important;
}
.wmh-product-grid a[href*="facebook-messenger-automation/"] .wmh-product-icon::before {
  content: "✦" !important;
}

.wmh-product-icon.wmh-brand-icon {
  display: grid;
  place-items: center;
}

.wmh-product-icon.wmh-brand-icon::before {
  display: none !important;
}

.wmh-product-icon.wmh-brand-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.wmh-product-icon.wmh-brand-icon img {
  display: block;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.wmh-product-grid a[href*="whatsapp-business-api/"] .wmh-brand-icon {
  color: #079455;
  background: #e9fbf2;
}

.wmh-product-grid a[href*="facebook-messenger-automation/"] .wmh-brand-icon {
  color: #7c3aed;
  background: #f2edff;
}

.wmh-product-grid a[href*="click-to-whatsapp-ads/"] .wmh-brand-icon {
  color: #ea580c;
  background: #fff4e8;
}
.wmh-product-grid a[href*="click-to-whatsapp-ads/"] .wmh-brand-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wmh-integration-icon--shopify { color: #079455; background: #ecfdf3; }
.wmh-integration-icon--woo { color: #6d4aff; background: #f2efff; }
.wmh-integration-icon--custom { color: #f79009; background: #fff6e5; }
.wmh-integration-icon--shopify { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 11H6L5 8Z'/%3E%3Cpath d='M9 8a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.wmh-integration-icon--woo { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M8 12h8M12 8v8'/%3E%3C/svg%3E"); }
.wmh-integration-icon--custom { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 17h6M17 14v6'/%3E%3C/svg%3E"); }
.wmh-integration-icon--shopify { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16l-1 12H5L4 8Z'/%3E%3Cpath d='M8 8a4 4 0 0 1 8 0'/%3E%3C/svg%3E"); }
.wmh-integration-icon--woo { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16l-2 13H6L4 7Z'/%3E%3Cpath d='M8 7a4 4 0 0 1 8 0'/%3E%3C/svg%3E"); }
.wmh-integration-all .wmh-mini-icon { --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 17h6M17 14v6'/%3E%3C/svg%3E"); }

.wmh-integration-all {
  background: linear-gradient(100deg, #f0fdf6, #fff);
}

.wmh-integration-actions .wmh-integration-all {
  margin-top: 0;
}

.wmh-mini-icon--overview {
  --wmh-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h16M4 12h10M4 18h7'/%3E%3Cpath d='m16 15 4 3-4 3'/%3E%3C/svg%3E");
}



/* Home page CTA and content-list polish. */
.hero-cta .play {
  min-height: 56px;
  padding: 6px 20px 6px 8px;
  border: 1px solid #cfd7e2;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
  box-shadow: 0 8px 18px rgba(16, 24, 40, .08), inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.hero-cta .play:hover {
  border-color: #79cfa8;
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255,255,255,.9);
}
.hero-cta .play .pbtn {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  box-shadow: none;
  /* border: 1px solid #d8e0ea; */
  border-radius: 11px;
  background: #fff;
  color: #344054;
}

.feature-point-list li b {
  font-size: 13px;
  line-height: 1.4;
}
.feature-point-list li > span {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
}
.feature-point-list li > span svg {
  width: 14px;
  height: 14px;
}
.aiw-shared-copy h3 {
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.25;
}
.aiw-shared-copy p {
  font-size: 12px;
  line-height: 1.55;
}
.aiw-shared-tags span {
  font-size: 10px;
  padding: 7px 10px;
}



.feature-tabs-shell .feature-point-list {
  gap: 9px;
  margin-top: 18px;
}
.feature-tabs-shell .feature-point-list li {
  min-height: 48px;
  padding: 9px 12px;
  gap: 9px;
}
.feature-tabs-shell .feature-point-list li b {
  font-size: 12px !important;
  line-height: 1.3;
  font-weight: 700;
}
.feature-tabs-shell .feature-point-list li > span {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
}

/* Keep support visuals clean: remove decorative rings/glows without changing content. */
#support-page-hero::before,
#support-page-hero::after,
#unified-support-inbox .omnichat-image-card::before,
#unified-support-inbox .omnichat-image-card::after {
  content: none;
}

#support-page-hero .supporthero-visual-glow,
#unified-support-inbox .omnichat-glow {
  background: none;
  filter: none;
}

#support-page-hero .supporthero-visual {
  min-height: 0;
  align-self: start;
}

#support-page-hero .supporthero-image-frame,
#unified-support-inbox .omnichat-image-card {
  box-shadow: none;
}

#support-page-hero .supporthero-image {
  filter: none;
}

#support-page-hero,
#support-page-hero .supporthero-visual,
#support-page-hero .supporthero-image-frame,
#unified-support-inbox .omnichat-visual,
#unified-support-inbox .omnichat-image-card {
  box-shadow: none !important;
  filter: none !important;
}

#support-page-hero {
  min-height: 0;
}



main section,
main section[class*="section"] {
  box-shadow: none !important;
}

html,
body {
  overflow-x: hidden;
}

.wmstack-footer-copy p {
  font-size: 13px;
  line-height: 1.5;
}
.wmstack-footer-copy p b {
  font-size: 14px;
}
.wmstack-categories span {
  font-size: 10px;
  letter-spacing: .03em;
}
.wmstack-app-copy small {
  font-size: 11px;
  line-height: 1.35;
}

main small {
  font-size: max(11px, 0.78em);
  line-height: 1.4;
}

main [class*="tag"] ,
main [class*="badge"],
main [class*="category"] {
  font-size: 10px !important;
  line-height: 1.3;
}

.assistmesh-card-status {
  font-size: 10px;
  line-height: 1.2;
}

.assistmesh-capabilities span {
  font-size: 9px;
  line-height: 1.25;
  letter-spacing: .02em;
}

.assistmesh-context-list span {
  font-size: 10px;
  line-height: 1.35;
}

main [class*="status"],
main [class*="note"],
main [class*="meta"] small,
main [class*="label"] small {
  font-size: 10px !important;
  line-height: 1.35;
}



/* Shared global and page-system rules. */
html,
body {
width: 100%;
margin: 0;
}

.mme-flow-ai-page .site-breadcrumb-hero {
padding-top: 64px !important;
}

.mme-flow-ai-page .site-breadcrumb-hero > .wrap {
margin-top: 18px !important;
}

.mme-flow-ai-page #marketing-trusted,
.mme-flow-ai-page #mme-flow-ai-assistance,
.mme-flow-ai-page #mme-flow-ai-scale,
.mme-flow-ai-page #mme-flow-ai-copilot,
.mme-flow-ai-page #mme-flow-ai-agents,
.mme-flow-ai-page #connect-your-ai {
padding-block: 72px;
}

/* Use one consistent pill treatment for every policy hero eyebrow. */
.wmkprivacyx-eyebrow {
min-height: 34px;
margin-bottom: 20px;
padding: 0 13px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 999px;
background: linear-gradient(135deg, #ecfdf3, #eff6ff);
color: #08783e;
font-size: 11px;
line-height: 1.2;
letter-spacing: 0.08em;
}

.wmkprivacyx-eyebrow::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: #12b76a;
box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.1);
}

:root {
--type-display: clamp(2.45rem, 5vw, 4.25rem);
--type-h2: clamp(1.9rem, 3.5vw, 3rem);
--type-h3: clamp(1.1rem, 1.7vw, 1.45rem);
--type-body: clamp(0.9375rem, 0.35vw + 0.84rem, 1.0625rem);
--type-small: 0.75rem;
--type-caption: 0.6875rem;
--content-line: 1.65;
}

html {
scroll-behavior: smooth;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

body {
font-size: 1rem;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}

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

main :where(p, li) {
text-wrap: pretty;
}

main :where(h1, h2, h3) {
text-wrap: balance;
}

main h1 {
font-size: var(--type-display);
line-height: 1.06;
}

main h2 {
font-size: var(--type-h2);
line-height: 1.12;
}

main h3 {
font-size: var(--type-h3);
line-height: 1.3;
}

main :where(p:not([class]), li:not([class])) {
line-height: var(--content-line);
}

main small,
main [class*="eyebrow"],
main [class*="kicker"],
main [class*="overline"] {
line-height: 1.45;
}

.site-breadcrumbs {
position: relative;
z-index: 20;
width: 100%;
margin: 0;
border: 0;
background: transparent;
}

.site-breadcrumb-hero {
position: relative;
flex-direction: column;
align-items: stretch;
padding-top: 120px !important;
}

.site-breadcrumbs ol {
display: flex;
align-items: center;
gap: 0.55rem;
width: fit-content;
max-width: 100%;
min-height: 34px;
margin: 0;
padding: 7px 12px;
list-style: none;
overflow-x: auto;
border: 1px solid rgba(18, 183, 106, 0.16);
border-radius: 11px;
background: rgba(255, 255, 255, 0.82);
scrollbar-width: none;
}

.site-breadcrumbs ol::-webkit-scrollbar {
display: none;
}

.site-breadcrumbs li {
display: inline-flex;
align-items: center;
gap: 0.55rem;
flex: 0 0 auto;
color: #64748b;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.2;
}

.site-breadcrumbs a {
color: #047857;
text-decoration: none;
}

.site-breadcrumbs a:hover,
.site-breadcrumbs a:focus-visible {
color: #059669;
text-decoration: underline;
text-underline-offset: 3px;
}

.site-breadcrumbs li[aria-current="page"] {
color: #334155;
}

.site-breadcrumbs__separator {
color: #94a3b8;
font-size: 1rem;
}


.site-breadcrumb-hero .saleshero-content,
.site-breadcrumb-hero .wmkhero-copy {
align-self: start !important;
}

.contact-form-alert {
margin: 0 0 1rem;
padding: 0.8rem 1rem;
border: 1px solid #bbf7d0;
border-radius: 12px;
background: #f0fdf4;
color: #166534;
font-size: 0.875rem;
line-height: 1.5;
}

.contact-form-alert--error {
border-color: #fecaca;
background: #fef2f2;
color: #991b1b;
}

.contact-form-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}

/* Pricing hero refinement: balanced typography, clean cards and clear actions. */
.pricing-page .pp-hero-shell::before,
.pricing-page .pp-hero-shell::after {
content: none !important;
}

.pricing-page .pp-growth-card {
transform: none;
box-shadow: 0 24px 55px -42px rgba(15, 23, 42, 0.48);
}

.pricing-page .pp-hero-actions .pp-btn--secondary {
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.9);
box-shadow: none;
}


.wmprice-free-price span {
white-space: nowrap;
}

.wmprice-no-card {
display: inline-flex !important;
align-items: center;
gap: 8px;
min-height: 34px;
padding: 7px 11px;
border: 1px solid rgba(3, 152, 85, 0.2);
border-radius: 10px;
background: rgba(236, 253, 245, 0.78);
color: var(--green-700) !important;
font-size: 12px !important;
font-weight: 750;
line-height: 1.2;
white-space: nowrap;
}

.wmprice-no-card svg {
width: 17px;
height: 17px;
flex: 0 0 17px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}



.wm-thankyou-page {
min-height: 0;
padding: 76px 0 72px;
background:
  radial-gradient(circle at 18% 18%, rgba(18, 183, 106, 0.11), transparent 32%),
  radial-gradient(circle at 86% 78%, rgba(59, 130, 246, 0.09), transparent 34%),
  linear-gradient(180deg, #f8fffb 0%, #ffffff 72%);
}
.wm-thankyou-page .wrap{
padding-top:0 !important;
}

.wm-thankyou-card {
width: 100%;
min-height: 430px;
margin: 0 auto;
margin-top: 20px;
padding: 48px 36px 54px;
border: 1px solid rgba(18, 183, 106, 0.18);
border-radius: 24px;
background: rgba(255, 255, 255, 0.92);
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.wm-thankyou-icon {
width: 58px;
height: 58px;
display: grid;
place-items: center;
margin: 0 auto 18px;
border-radius: 18px;
background: #dcfce7;
color: #07834b;
}

.wm-thankyou-icon svg {
width: 28px;
height: 28px;
}

.wm-thankyou-eyebrow {
color: #07834b;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.wm-thankyou-card h1 {
max-width: 600px;
margin: 14px auto 0;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(2.2rem, 5vw, 3.7rem);
line-height: 1.05;
letter-spacing: -0.05em;
}

.wm-thankyou-card h1 span {
color: var(--green-600);
}

.wm-thankyou-card p {
max-width: 520px;
margin: 18px auto 0;
color: var(--ink-500);
font-size: 1.05rem;
line-height: 1.7;
}

.wm-thankyou-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}

.wm-thankyou-actions a {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 18px;
border-radius: 11px;
font-size: 0.9rem;
font-weight: 800;
text-decoration: none;
}

.wm-thankyou-primary {
background: var(--green-600);
color: #fff;
}

.wm-thankyou-secondary {
border: 1px solid var(--border);
background: #fff;
color: var(--ink-800);
}

.aiw-agent-card--revenue:hover,
.aiw-agent-card--support:hover {
border-color: var(--green-200);
}

.aiw-agent-card--revenue .aiw-card-accent,
.aiw-agent-card--support .aiw-card-accent {
background: linear-gradient(90deg, var(--green-600), var(--green-400), transparent);
}

.aiw-agent-icon--revenue,
.aiw-agent-icon--support {
background: linear-gradient(145deg, var(--green-50), var(--green-100));
color: var(--green-600);
}

.aiw-metric-band--revenue,
.aiw-metric-band--support {
border-color: var(--green-200);
background: linear-gradient(135deg, var(--green-50), rgba(255,255,255,.94));
}

.aiw-agent-card--revenue .aiw-primary-metric strong,
.aiw-agent-card--support .aiw-primary-metric strong {
color: var(--green-600);
}

.salesx-section {
background:
  radial-gradient(circle at 8% 18%, rgba(18,183,106,.08), transparent 29%),
  radial-gradient(circle at 92% 76%, rgba(11,168,143,.08), transparent 28%),
  var(--surface);
}

.salesx-eyebrow {
border-color: var(--green-200);
background: var(--green-50);
color: var(--green-700);
}

.salesx-shell {
background:
  radial-gradient(circle at 82% 28%, rgba(18,183,106,.11), transparent 34%),
  linear-gradient(135deg, var(--green-50) 0%, #fff 45%, #effaf4 100%);
}

.salesx-shell::before {
background: rgba(18,183,106,.08);
}

.salesx-benefit-icon--blue,
.salesx-benefit-icon--amber,
.salesx-benefit-icon--violet {
background: var(--green-50);
color: var(--green-700);
}

.salesx-stage.active {
border-color: var(--green-200);
background: var(--green-50);
}

.salesx-stage.active > span {
border-color: var(--green-200);
background: var(--green-100);
color: var(--green-700);
}

.pricing-page .wmprice-section { background: linear-gradient(180deg, rgba(247,251,249,.78), rgba(255,255,255,.98) 34%, rgba(247,251,249,.68)); }
.pricing-page .wmprice-heading { max-width: 760px; }
.pricing-page .wmprice-heading h2 { letter-spacing: -0.045em; }
.pricing-page .wmprice-free { border-radius: 22px; box-shadow: 0 24px 60px -46px rgba(3,152,85,.55); }
.pricing-page .wmprice-card { min-height: 540px; border-top: 2px solid var(--green-200); border-radius: 20px; box-shadow: 0 20px 46px -38px rgba(16,24,40,.5); }
.pricing-page .wmprice-card .wmprice-feature-list { gap: 5px; }
.pricing-page .wmprice-card .wmprice-feature-row { min-height: 34px; padding: 6px 8px; gap: 7px; }
.pricing-page .wmprice-card .wmprice-feature-check { width: 20px; height: 20px; }
.pricing-page .wmprice-card--featured { border-top-color: var(--green-500); transform: translateY(-6px); }
.pricing-page .wmprice-card--business { border-top-color: var(--green-400); }
.pricing-page .wmprice-card:focus-within { border-color: var(--green-400); box-shadow: 0 26px 54px -40px rgba(3,152,85,.55); }
.pricing-page .wmprice-plan-cta:focus-visible,
.pricing-page .wmprice-free-cta:focus-visible { outline: 3px solid rgba(18,183,106,.3); outline-offset: 3px; }

/* WhatsApp Catalog Page */
.wmcatalog-page {
--wmcatalog-green: #039855;
--wmcatalog-green-dark: #027a48;
--wmcatalog-navy: #0f1f2e;
--wmcatalog-blue: #2e6eea;
--wmcatalog-mint: #effcf5;
background: #fff;
color: var(--ink-800);
}

.wmcatalog-page .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;
}

.wmcatalog-hero {
position: relative;
overflow: hidden;
padding-bottom: 86px;
background: linear-gradient(135deg, #effcf6 0%, #fff 52%, #f1f7ff 100%);
border-bottom: 1px solid #ddf2e7;
}

.wmcatalog-hero .site-breadcrumbs {
margin-bottom: 28px;
}

.wmcatalog-hero-grid {
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
align-items: center;
gap: 56px;
}

.wmcatalog-hero-copy {
position: relative;
z-index: 2;
}

.wmcatalog-eyebrow,
.wmcatalog-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--wmcatalog-green-dark);
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}

.wmcatalog-eyebrow {
padding: 9px 13px;
border: 1px solid #bfead3;
border-radius: 999px;
background: rgba(239, 252, 245, .9);
}

.wmcatalog-eyebrow i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-500);
box-shadow: 0 0 0 5px rgba(18, 183, 106, .1);
}

.wmcatalog-hero h1 {
max-width: 650px;
margin: 24px 0 20px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(42px, 4.9vw, 68px);
font-weight: 800;
line-height: 1.03;
letter-spacing: -.045em;
text-wrap: balance;
}

.wmcatalog-hero h1 span,
.wmcatalog-section-head h2 span {
color: var(--wmcatalog-green);
}

.wmcatalog-hero-copy > p {
max-width: 650px;
color: var(--ink-600);
font-size: 18px;
line-height: 1.75;
}

.wmcatalog-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 30px;
}

.wmcatalog-btn {
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: 12px;
font-size: 15px;
font-weight: 750;
line-height: 1;
transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.wmcatalog-btn:hover {
transform: translateY(-2px);
}

.wmcatalog-btn-primary {
color: #fff;
background: var(--wmcatalog-green);
box-shadow: 0 12px 28px rgba(3, 152, 85, .2);
}

.wmcatalog-btn-primary:hover {
background: var(--wmcatalog-green-dark);
box-shadow: 0 16px 32px rgba(3, 152, 85, .24);
}

.wmcatalog-btn-secondary {
color: var(--ink-800);
border-color: var(--ink-300);
background: rgba(255, 255, 255, .88);
}

.wmcatalog-btn-secondary:hover {
border-color: var(--green-400);
background: #fff;
}

.wmcatalog-btn-light {
color: #fff;
border-color: rgba(255, 255, 255, .28);
background: rgba(255, 255, 255, .08);
}

.wmcatalog-btn-light:hover {
border-color: rgba(255, 255, 255, .52);
background: rgba(255, 255, 255, .14);
}

.wmcatalog-hero-notes {
display: flex;
flex-wrap: wrap;
gap: 15px 20px;
margin-top: 25px;
color: var(--ink-600);
font-size: 13px;
font-weight: 650;
}

.wmcatalog-hero-notes span {
display: inline-flex;
align-items: center;
gap: 7px;
}

.wmcatalog-hero-notes i {
display: inline-grid;
width: 21px;
height: 21px;
place-items: center;
border-radius: 7px;
color: var(--green-700);
background: var(--green-100);
font-size: 12px;
font-style: normal;
}

.wmcatalog-hero-visual {
position: relative;
}

.wmcatalog-image-shell {
position: relative;
padding: 11px;
border: 1px solid rgba(3, 152, 85, .2);
border-radius: 30px;
background: rgba(255, 255, 255, .76);
box-shadow: 0 30px 70px rgba(15, 31, 46, .12);
}

.wmcatalog-image-shell img {
width: 100%;
border-radius: 21px;
aspect-ratio: 3 / 2;
object-fit: cover;
}

.wmcatalog-image-status {
position: absolute;
z-index: 2;
top: 28px;
left: 28px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid #d8eee3;
border-radius: 999px;
color: var(--green-700);
background: rgba(255, 255, 255, .94);
box-shadow: var(--shadow-sm);
font-size: 11px;
font-weight: 800;
}

.wmcatalog-image-status i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-500);
}

.wmcatalog-benefits {
position: relative;
z-index: 3;
margin-top: -34px;
}

.wmcatalog-benefit-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border: 1px solid #dce8e2;
border-radius: 22px;
background: #fff;
box-shadow: 0 18px 48px rgba(16, 24, 40, .1);
}

.wmcatalog-benefit-card {
display: flex;
gap: 16px;
padding: 25px;
}

.wmcatalog-benefit-card + .wmcatalog-benefit-card {
border-left: 1px solid var(--ink-200);
}

.wmcatalog-benefit-card h3 {
margin-bottom: 5px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 17px;
line-height: 1.3;
}

.wmcatalog-benefit-card p {
color: var(--ink-500);
font-size: 13px;
line-height: 1.65;
}

.wmcatalog-icon {
display: grid;
flex: 0 0 45px;
width: 45px;
height: 45px;
place-items: center;
border: 1px solid #bfead3;
border-radius: 13px;
color: var(--green-700);
background: var(--green-50);
}

.wmcatalog-icon svg {
width: 21px;
height: 21px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

.wmcatalog-icon-blue {
color: #175cd3;
border-color: #d1e1ff;
background: #eff5ff;
}

.wmcatalog-icon-navy {
color: #fff;
border-color: var(--wmcatalog-navy);
background: var(--wmcatalog-navy);
}

.wmcatalog-intro,
.wmcatalog-features,
.wmcatalog-usecases,
.wmcatalog-workflow,
.wmcatalog-showcase,
.wmcatalog-faq {
padding: 104px 0;
}

.wmcatalog-split {
display: grid;
grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
align-items: center;
gap: 64px;
}

.wmcatalog-section-copy h2,
.wmcatalog-workflow-copy h2,
.wmcatalog-faq-intro h2 {
margin: 17px 0 18px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(32px, 4vw, 48px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.035em;
text-wrap: balance;
}

.wmcatalog-section-copy > p,
.wmcatalog-workflow-copy > p,
.wmcatalog-faq-intro > p {
margin-top: 13px;
color: var(--ink-600);
font-size: 16px;
line-height: 1.8;
}

.wmcatalog-mini-points {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 26px;
}

.wmcatalog-mini-points span {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 9px 12px;
border: 1px solid #dce8e2;
border-radius: 10px;
color: var(--ink-700);
background: #fff;
font-size: 12px;
font-weight: 700;
}

.wmcatalog-mini-points i {
color: var(--green-600);
font-style: normal;
}

.wmcatalog-intro-visual {
padding: 10px;
border: 1px solid #dce8e2;
border-radius: 27px;
background: #fff;
box-shadow: 0 24px 55px rgba(16, 24, 40, .09);
}

.wmcatalog-intro-visual img {
width: 100%;
border-radius: 19px;
}

.wmcatalog-features {
background: #f7faf9;
border-block: 1px solid #e3eee8;
}

.wmcatalog-section-head {
max-width: 760px;
margin: 0 auto 65px;
text-align: center;
}

.wmcatalog-section-head h2 {
margin: 19px 0 15px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(34px, 4vw, 52px);
font-weight: 800;
line-height: 1.08;
letter-spacing: -.04em;
text-wrap: balance;
}

.wmcatalog-section-head p {
color: var(--ink-500);
font-size: 16px;
line-height: 1.75;
}

.wmcatalog-section-head-left {
max-width: 710px;
margin-right: auto;
margin-left: 0;
text-align: left;
}

.wmcatalog-feature-list {
display: grid;
gap: 28px;
}

.wmcatalog-feature-block {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(480px, 1.15fr);
align-items: center;
gap: 58px;
min-height: 440px;
padding: 44px;
border: 1px solid #dce8e2;
border-radius: 28px;
background: #fff;
}

.wmcatalog-feature-reverse .wmcatalog-feature-copy {
order: 2;
}

.wmcatalog-feature-reverse .wmcatalog-ui-card {
order: 1;
}

.wmcatalog-feature-number {
color: var(--green-700);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

.wmcatalog-feature-copy h3 {
margin: 15px 0 14px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: clamp(28px, 3vw, 40px);
font-weight: 800;
line-height: 1.13;
letter-spacing: -.03em;
text-wrap: balance;
}

.wmcatalog-feature-copy > p {
color: var(--ink-600);
font-size: 15px;
line-height: 1.75;
}

.wmcatalog-feature-copy ul {
display: grid;
gap: 10px;
margin-top: 21px;
}

.wmcatalog-feature-copy li {
position: relative;
padding-left: 27px;
color: var(--ink-700);
font-size: 14px;
font-weight: 650;
}

.wmcatalog-feature-copy li::before {
position: absolute;
top: 2px;
left: 0;
display: grid;
width: 19px;
height: 19px;
place-items: center;
border-radius: 6px;
color: var(--green-700);
background: var(--green-100);
content: "✓";
font-size: 11px;
}

.wmcatalog-ui-card {
min-height: 330px;
padding: 20px;
border: 1px solid #d8e7df;
border-radius: 22px;
background: linear-gradient(145deg, #fff 0%, #f1faf5 100%);
box-shadow: 0 18px 40px rgba(16, 24, 40, .08);
}

.wmcatalog-ui-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 15px;
border-bottom: 1px solid #e5ece8;
}

.wmcatalog-ui-head span {
color: var(--ink-500);
font-size: 11px;
font-weight: 750;
letter-spacing: .06em;
text-transform: uppercase;
}

.wmcatalog-ui-head b {
color: var(--green-700);
font-size: 11px;
}

.wmcatalog-product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
margin-top: 17px;
}

.wmcatalog-product-grid > span {
display: grid;
gap: 5px;
padding: 10px;
border: 1px solid #e0e8e4;
border-radius: 13px;
background: #fff;
}

.wmcatalog-product-grid b {
color: var(--ink-800);
font-size: 12px;
}

.wmcatalog-product-grid small {
width: fit-content;
padding: 3px 7px;
border-radius: 999px;
color: var(--green-700);
background: var(--green-50);
font-size: 9px;
font-weight: 750;
}

.wmcatalog-product-thumb {
height: 76px;
border-radius: 9px;
background-color: #f3f6f4;
background-position: center;
background-repeat: no-repeat;
}

.wmcatalog-product-thumb-chair { background-image: linear-gradient(145deg, transparent 42%, #315846 43% 62%, transparent 63%), linear-gradient(90deg, transparent 31%, #273b33 32% 67%, transparent 68%); }
.wmcatalog-product-thumb-lamp { background-image: radial-gradient(circle at 50% 30%, #d8bf7d 0 23%, transparent 24%), linear-gradient(90deg, transparent 48%, #344054 49% 52%, transparent 53%); }
.wmcatalog-product-thumb-mug { background-image: radial-gradient(circle at 58% 50%, transparent 0 13%, #517667 14% 20%, transparent 21%), linear-gradient(90deg, transparent 31%, #7aa08f 32% 64%, transparent 65%); }
.wmcatalog-product-thumb-planter { background-image: radial-gradient(ellipse at 50% 36%, #3d7758 0 24%, transparent 25%), linear-gradient(90deg, transparent 35%, #9eaa9e 36% 63%, transparent 64%); }

.wmcatalog-chat-product {
display: flex;
align-items: center;
gap: 12px;
margin-top: 17px;
padding: 12px;
border: 1px solid #e2e9e5;
border-radius: 13px;
background: #fff;
}

.wmcatalog-chat-product-image {
width: 52px;
height: 52px;
border-radius: 10px;
background: linear-gradient(140deg, #edf7f1, #d7e9df);
}

.wmcatalog-chat-product b,
.wmcatalog-chat-product small {
display: block;
}

.wmcatalog-chat-product b { color: var(--ink-800); font-size: 13px; }
.wmcatalog-chat-product small { margin-top: 2px; color: var(--ink-500); font-size: 10px; }

.wmcatalog-bubble {
max-width: 78%;
margin-top: 13px;
padding: 11px 13px;
border: 1px solid #e2e8e5;
border-radius: 13px;
color: var(--ink-700);
background: #fff;
font-size: 11px;
line-height: 1.55;
}

.wmcatalog-bubble-customer {
margin-left: auto;
border-color: #bce7d1;
background: #e9fbf1;
}

.wmcatalog-chat-status {
display: inline-flex;
align-items: center;
gap: 7px;
margin-top: 15px;
color: var(--green-700);
font-size: 10px;
font-weight: 750;
}

.wmcatalog-chat-status i {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--green-500);
}

.wmcatalog-update-row {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto;
align-items: center;
gap: 11px;
margin-top: 12px;
padding: 11px;
border: 1px solid #e1e9e5;
border-radius: 12px;
background: #fff;
}

.wmcatalog-update-thumb {
width: 48px;
height: 44px;
border-radius: 8px;
background: #edf5f1;
}

.wmcatalog-update-row b,
.wmcatalog-update-row small {
display: block;
}

.wmcatalog-update-row b { color: var(--ink-800); font-size: 12px; }
.wmcatalog-update-row small { color: var(--ink-500); font-size: 9px; }
.wmcatalog-update-row em { padding: 5px 8px; border-radius: 999px; color: var(--green-700); background: var(--green-50); font-size: 9px; font-style: normal; font-weight: 750; }
.wmcatalog-update-row:last-child em { color: #175cd3; background: #eff5ff; }

.wmcatalog-return-top {
margin-top: 17px;
padding: 16px;
border-radius: 14px;
color: #fff;
background: var(--wmcatalog-navy);
}

.wmcatalog-return-top span,
.wmcatalog-return-top b {
display: block;
}

.wmcatalog-return-top span { color: #9fd8bd; font-size: 10px; font-weight: 750; text-transform: uppercase; }
.wmcatalog-return-top b { max-width: 310px; margin-top: 5px; font-size: 15px; line-height: 1.35; }

.wmcatalog-return-items {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 9px;
margin-top: 13px;
}

.wmcatalog-return-items span {
display: grid;
gap: 7px;
padding: 9px;
border: 1px solid #e2e9e5;
border-radius: 11px;
background: #fff;
}

.wmcatalog-return-items i {
height: 42px;
border-radius: 7px;
background: linear-gradient(135deg, #e3f4ea, #f0f4f2);
}

.wmcatalog-return-items b { color: var(--ink-700); font-size: 10px; }
.wmcatalog-return-action { display: flex; align-items: center; justify-content: space-between; margin-top: 13px; padding: 10px 12px; border-radius: 10px; color: var(--green-700); background: var(--green-50); font-size: 11px; font-weight: 750; }

.wmcatalog-usecase-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 15px;
}

.wmcatalog-usecase-grid article {
grid-column: span 2;
min-height: 205px;
padding: 25px;
border: 1px solid #dce8e2;
border-radius: 20px;
background: #fff;
transition: transform .2s ease, border-color .2s ease;
}

.wmcatalog-usecase-grid article:nth-child(4),
.wmcatalog-usecase-grid article:nth-child(5) {
grid-column: span 3;
}

.wmcatalog-usecase-grid article:hover {
transform: translateY(-3px);
border-color: #a9dec2;
}

.wmcatalog-usecase-grid article > span {
color: var(--green-600);
font-size: 11px;
font-weight: 800;
}

.wmcatalog-usecase-grid h3 {
margin: 27px 0 8px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 19px;
}

.wmcatalog-usecase-grid p {
color: var(--ink-500);
font-size: 13px;
line-height: 1.7;
}

.wmcatalog-workflow {
background: #f4faf7;
border-block: 1px solid #e0eee7;
}

.wmcatalog-workflow-shell {
display: grid;
grid-template-columns: minmax(0, .75fr) minmax(560px, 1.25fr);
gap: 70px;
align-items: center;
}

.wmcatalog-workflow-copy > a,
.wmcatalog-faq-intro > a {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 24px;
color: var(--green-700);
font-size: 14px;
font-weight: 750;
}

.wmcatalog-workflow-steps {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}

.wmcatalog-workflow-steps article {
display: flex;
gap: 13px;
min-height: 145px;
padding: 20px;
border: 1px solid #dce8e2;
border-radius: 16px;
background: #fff;
}

.wmcatalog-workflow-steps article > span {
display: grid;
flex: 0 0 34px;
width: 34px;
height: 34px;
place-items: center;
border-radius: 10px;
color: var(--green-700);
background: var(--green-50);
font-size: 12px;
font-weight: 800;
}

.wmcatalog-workflow-steps h3 {
margin: 4px 0 6px;
color: var(--ink-900);
font-family: var(--font-display);
font-size: 15px;
}

.wmcatalog-workflow-steps p {
color: var(--ink-500);
font-size: 12px;
line-height: 1.65;
}

.wmcatalog-showcase-frame {
overflow: hidden;
padding: 10px;
border: 1px solid #d8e7df;
border-radius: 28px;
background: #fff;
box-shadow: 0 26px 65px rgba(16, 24, 40, .11);
}

.wmcatalog-showcase-frame img {
width: 100%;
border-radius: 20px;
}

.wmcatalog-showcase-frame figcaption {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 18px;
padding: 14px 10px 5px;
color: var(--ink-500);
font-size: 11px;
font-weight: 650;
}

.wmcatalog-showcase-frame figcaption span:first-child {
display: inline-flex;
align-items: center;
gap: 7px;
margin-right: auto;
color: var(--ink-700);
}

.wmcatalog-showcase-frame figcaption i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-500);
}

.wmcatalog-cta {
padding: 0 0 104px;
}

.wmcatalog-cta-box {
display: grid;
grid-template-columns: minmax(0, 1.25fr) auto;
align-items: center;
gap: 55px;
padding: 48px;
border-radius: 28px;
color: #fff;
background: linear-gradient(125deg, #0d1c2b 0%, #102c2a 58%, #074b38 100%);
}

.wmcatalog-cta-box > div:first-child > span {
color: #81ddb0;
font-size: 11px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}

.wmcatalog-cta-box h2 {
max-width: 700px;
margin: 12px 0 10px;
font-family: var(--font-display);
font-size: clamp(30px, 3.4vw, 46px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.035em;
text-wrap: balance;
}

.wmcatalog-cta-box p {
max-width: 690px;
color: #c7d7d1;
font-size: 15px;
}

.wmcatalog-cta-box .wmcatalog-actions {
min-width: 190px;
flex-direction: column;
margin-top: 0;
}

.wmcatalog-cta-box .wmcatalog-btn {
width: 100%;
}

.wmcatalog-faq {
background: #f7faf9;
border-top: 1px solid #e2ece7;
}

.wmcatalog-faq-layout {
display: grid;
grid-template-columns: minmax(0, .7fr) minmax(560px, 1.3fr);
align-items: start;
gap: 70px;
}

.wmcatalog-faq-intro {
position: sticky;
top: 110px;
}

.wmcatalog-faq-list {
display: grid;
gap: 11px;
}

.wmcatalog-faq-list details {
border: 1px solid #dce8e2;
border-radius: 15px;
background: #fff;
}

.wmcatalog-faq-list summary {
display: flex;
min-height: 65px;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 16px 18px;
color: var(--ink-900);
cursor: pointer;
font-family: var(--font-display);
font-size: 15px;
font-weight: 750;
list-style: none;
}

.wmcatalog-faq-list summary::-webkit-details-marker {
display: none;
}

.wmcatalog-faq-list summary span {
display: grid;
flex: 0 0 30px;
width: 30px;
height: 30px;
place-items: center;
border: 1px solid #cce7d9;
border-radius: 9px;
color: var(--green-700);
background: var(--green-50);
font-family: var(--font-display);
font-size: 18px;
transition: transform .2s ease;
}

.wmcatalog-faq-list details[open] summary span {
transform: rotate(45deg);
}

.wmcatalog-faq-list details p {
padding: 0 18px 19px;
color: var(--ink-600);
font-size: 14px;
line-height: 1.75;
}


/* Whatsapp Catalog Page  */

/* Second Section Start */

.wcatgridx-section{position:relative;padding:95px 0;background:#fff}
.wcatgridx-heading{max-width:760px;margin:0 auto 46px;text-align:center}
.wcatgridx-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:15px;padding:7px 12px;border:1px solid #d7ebe3;border-radius:999px;background:#f7fcfa;color:#087d59;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.wcatgridx-eyebrow i{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.1)}
.wcatgridx-heading h2{margin:0;color:#14201b;font-size:42px;font-weight:760;line-height:1.08;letter-spacing:-.04em}
.wcatgridx-heading h2 span{display:block;color:#0b9d70}
.wcatgridx-heading p{max-width:650px;margin:18px auto 0;color:#66726d;font-size:16px;line-height:1.72}

.wcatgridx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}

.wcatgridx-card{position:relative;display:flex;flex-direction:column;min-height:300px;padding:28px;border:1px solid #e1e9e5;border-radius:24px;background:#fff;box-shadow:0 14px 36px rgba(20,73,54,.06);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.wcatgridx-card::before{content:"";position:absolute;top:-70px;right:-70px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(16,185,129,.09) 0%,rgba(16,185,129,0) 72%);pointer-events:none}
.wcatgridx-card:hover{transform:translateY(-7px);border-color:#b9ddcf;box-shadow:0 24px 52px rgba(20,73,54,.11)}

.wcatgridx-card--featured{border-color:#c5e5d8;background:linear-gradient(180deg,#ffffff 0%,#f4fcf8 100%);box-shadow:0 20px 46px rgba(13,122,85,.1)}
.wcatgridx-card--featured::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#0b8f66,#22c58b)}

.wcatgridx-card-head{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.wcatgridx-number{display:grid;place-items:center;width:38px;height:38px;border:1px solid #e0e9e5;border-radius:50%;color:#8d9893;font-size:10px;font-weight:800;letter-spacing:.08em}
.wcatgridx-icon{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#edf9f4;color:#078a62;box-shadow:inset 0 0 0 1px #d9eee5}
.wcatgridx-icon svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.wcatgridx-content{position:relative;z-index:2;flex:1}
.wcatgridx-label{display:block;margin-bottom:10px;color:#0b8e66;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wcatgridx-content h3{margin:0 0 13px;color:#18231e;font-size:22px;font-weight:720;line-height:1.28;letter-spacing:-.025em}
.wcatgridx-content p{margin:0;color:#68746f;font-size:14px;line-height:1.72}

.wcatgridx-card--featured .wcatgridx-icon{background:#0c8f67;color:#fff;box-shadow:none}
.wcatgridx-card--featured .wcatgridx-number{border-color:#cde4da;background:#fff;color:#0b8b64}



/* Second Section End */


/* Third Section Start */

.wcatbridgepro-section{padding:46px 0;background:#fff}
.wcatbridgepro-shell{position:relative;display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:50px;align-items:center;padding:46px 50px;border-radius:28px;background:linear-gradient(135deg,#071c16 0%,#09291f 55%,#0b3528 100%);overflow:hidden;box-shadow:0 24px 60px rgba(5,40,29,.16)}
.wcatbridgepro-shell::after{content:"";position:absolute;top:-150px;right:-100px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(35,207,147,.18) 0%,rgba(35,207,147,0) 70%);pointer-events:none}
.wcatbridgepro-copy{position:relative;z-index:2}
.wcatbridgepro-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:13px;color:#79ddb8;font-size:10px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.wcatbridgepro-eyebrow i{width:7px;height:7px;border-radius:50%;background:#2bd29a;box-shadow:0 0 0 5px rgba(43,210,154,.1)}
.wcatbridgepro-copy h2{margin:0;color:#fff;font-size:32px;font-weight:750;line-height:1.12;letter-spacing:-.035em}
.wcatbridgepro-copy h2 span{display:block;color:#4bdba8}
.wcatbridgepro-copy p{max-width:520px;margin:14px 0 0;color:#b6c9c1;font-size:13px;line-height:1.7}

.wcatbridgepro-flow{position:relative;z-index:2;display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;gap:8px;align-items:center}
.wcatbridgepro-step{display:flex;align-items:center;gap:11px;min-height:72px;padding:13px 14px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:rgba(255,255,255,.045)}
.wcatbridgepro-step--active{border-color:rgba(72,219,165,.25);background:rgba(43,185,132,.12)}
.wcatbridgepro-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:rgba(63,213,157,.11);color:#52dbaa}
.wcatbridgepro-step--active .wcatbridgepro-icon{background:#22b982;color:#fff}
.wcatbridgepro-icon svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wcatbridgepro-step small{display:block;margin-bottom:2px;color:#6d9c8b;font-size:8px;font-weight:800}
.wcatbridgepro-step b{display:block;color:#f5fbf8;font-size:11px;line-height:1.3}
.wcatbridgepro-arrow{display:grid;place-items:center;color:#48d6a2;font-size:17px}


/* Third Section End */


/* Fourth Section Start */

.wcatpro-section{position:relative;padding:105px 0;background:#fff;overflow:hidden}
.wcatpro-heading{max-width:820px;margin:0 auto 84px;text-align:center}
.wcatpro-eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:15px;color:#087f5b;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.wcatpro-eyebrow i{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 5px rgba(16,185,129,.1)}
.wcatpro-heading h2{margin:0;color:#15201b;font-size:42px;font-weight:760;line-height:1.08;letter-spacing:-.04em}
.wcatpro-heading h2 span{display:block;color:#0b9d70}
.wcatpro-heading p{max-width:690px;margin:18px auto 0;color:#66736d;font-size:16px;line-height:1.72}

.wcatpro-list{display:grid;gap:120px}
.wcatpro-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:90px;align-items:center}
.wcatpro-row--reverse .wcatpro-content{order:2}
.wcatpro-row--reverse .wcatpro-visual{order:1}

.wcatpro-content{max-width:575px}
.wcatpro-step{display:grid;place-items:center;width:39px;height:39px;margin-bottom:20px;border:1px solid #dbe9e3;border-radius:12px;background:#f5faf7;color:#73867d;font-size:10px;font-weight:800;letter-spacing:.08em}
.wcatpro-label{display:block;margin-bottom:9px;color:#078b63;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.wcatpro-content h3{margin:0;color:#17221d;font-size:32px;font-weight:750;line-height:1.18;letter-spacing:-.035em}
.wcatpro-content>p{margin:17px 0 0;color:#65716b;font-size:15px;line-height:1.75}

.wcatpro-points{display:grid;gap:13px;margin:29px 0 0;padding:0;list-style:none}
.wcatpro-points li{display:flex;align-items:flex-start;gap:11px}
.wcatpro-points li>span{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;margin-top:1px;border-radius:8px;background:#e9f8f1;color:#078b63;font-size:10px;font-weight:800}
.wcatpro-points p{margin:0;color:#53615a;font-size:14px;line-height:1.6}

.wcatpro-visual{position:relative;min-height:470px;padding:32px 38px}
.wcatpro-image-shape{position:absolute;inset:48px 50px 30px;border-radius:46% 54% 58% 42% / 45% 43% 57% 55%;transform:rotate(-4deg)}
.wcatpro-image-shape--green{background:linear-gradient(145deg,#c9f7e4,#e8fbf3)}
.wcatpro-image-shape--blue{background:linear-gradient(145deg,#dcefff,#eaf8f3);transform:rotate(4deg)}
.wcatpro-image-shape--yellow{background:linear-gradient(145deg,#fff0bd,#ebfaf3)}

.wcatpro-image-frame{position:relative;z-index:2;width:82%;height:400px;margin:0 auto;border-radius:30px;overflow:hidden}
.wcatpro-image-frame img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.wcatpro-image-badge{position:absolute;z-index:4;right:0;bottom:30px;display:flex;align-items:center;gap:11px;max-width:255px;padding:13px 16px;border:1px solid #dfe9e5;border-radius:16px;background:#fff;box-shadow:0 18px 42px rgba(20,72,53,.14)}
.wcatpro-image-badge--left{right:auto;left:0}
.wcatpro-image-badge>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:#e9f8f1;color:#078b63}
.wcatpro-image-badge svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wcatpro-image-badge small,.wcatpro-image-badge b{display:block}
.wcatpro-image-badge small{margin-bottom:2px;color:#8c9791;font-size:9px}
.wcatpro-image-badge b{color:#213029;font-size:11px;line-height:1.35}


/* Fourth Section End */


#testimonials .stars{color:#f5a623;letter-spacing:2px;font-size:14px;line-height:1}
#testimonials .testimonials-rating .stars{display:block;color:#f5a623;font-size:13px;letter-spacing:2px}



/* =========================================================
  MME FLOW — WHATSAPP CALCULATORS FINAL DESIGN
  Messaging Calculator + Calling Calculator
  Design only — calculator JS/data hooks unchanged
  ========================================================= */

.wmrate-page,
.wmcapc-page,
.wmrate-page *,
.wmcapc-page *,
.wmrate-page *::before,
.wmrate-page *::after,
.wmcapc-page *::before,
.wmcapc-page *::after {
  box-sizing: border-box;
}


/* =========================================================
  CALCULATOR SECTION
  ========================================================= */

.wmrate-page .wmrate-calculator-section,
.wmcapc-page .wmcapc-calculator-section {
  position: relative;
  padding: 88px 0 94px;
  overflow: hidden;
  background:
      radial-gradient(circle at 8% 15%, rgba(18, 183, 106, .07), transparent 25%),
      linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
}

/* WhatsApp Pricing Information */
.wmrate-pricing-info{
    padding:72px 0;
    background:var(--surface);
}

.wmrate-pricing-info-shell{
    margin:0 auto;
    padding:40px;
    border:1px solid var(--green-100);
    border-radius:22px;
    background:linear-gradient(135deg,var(--green-50),#fff 70%);
    box-shadow:var(--shadow-sm);
}

.wmrate-pricing-info-head{
    max-width:760px;
    margin:0 auto;
    text-align:center;
}

.wmrate-pricing-info-eyebrow{
    display:inline-block;
    margin-bottom:10px;
    color:var(--green-700);
    font-size:11px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.wmrate-pricing-info-head h2{
    margin:0;
    color:var(--ink-900);
    font-size:38px;
    line-height:1.1;
    letter-spacing:-.04em;
}

.wmrate-pricing-info-head h2 span{
    color:var(--green-600);
}

.wmrate-pricing-info-head p{
    max-width:700px;
    margin:15px auto 0;
    color:var(--ink-500);
    font-size:15px;
    line-height:1.7;
}

.wmrate-pricing-factors{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-top:32px;
}

.wmrate-pricing-factors article{
    padding:21px;
    border:1px solid var(--border);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

.wmrate-pricing-factors article > span{
    display:block;
    margin-bottom:13px;
    color:var(--green-600);
    font-size:11px;
    font-weight:800;
}

.wmrate-pricing-factors h3{
    margin:0 0 7px;
    color:var(--ink-900);
    font-size:16px;
    line-height:1.3;
}

.wmrate-pricing-factors p{
    margin:0;
    color:var(--ink-500);
    font-size:13px;
    line-height:1.55;
}

.wmrate-service-window{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:18px;
    margin-top:18px;
    padding:22px;
    border:1px solid var(--green-200);
    border-radius:15px;
    background:var(--green-50);
}

.wmrate-service-window-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border-radius:12px;
    background:var(--green-600);
    color:#fff;
    font-size:14px;
    font-weight:800;
}

.wmrate-service-window span{
    display:block;
    margin-bottom:5px;
    color:var(--green-700);
    font-size:10px;
    font-weight:800;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.wmrate-service-window h3{
    margin:0 0 7px;
    color:var(--ink-900);
    font-size:19px;
    line-height:1.3;
}

.wmrate-service-window p{
    margin:0;
    color:var(--ink-600);
    font-size:13px;
    line-height:1.6;
}

.wmrate-pricing-note{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:13px;
    align-items:start;
    margin-top:16px;
    padding:17px 18px;
    border:1px solid var(--border);
    border-radius:13px;
    background:#fff;
}

.wmrate-pricing-note-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:50%;
    background:var(--green-50);
    color:var(--green-700);
    font-size:13px;
    font-weight:800;
}

.wmrate-pricing-note strong{
    display:block;
    margin-bottom:4px;
    color:var(--ink-900);
    font-size:13px;
}

.wmrate-pricing-note p{
    margin:0;
    color:var(--ink-500);
    font-size:12px;
    line-height:1.6;
}

@media(max-width:900px){
    .wmrate-pricing-factors{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:640px){
    .wmrate-pricing-info{
        padding:54px 0;
    }

    .wmrate-pricing-info-shell{
        padding:26px 20px;
        border-radius:18px;
    }

    .wmrate-pricing-info-head h2{
        font-size:31px;
    }

    .wmrate-pricing-factors{
        grid-template-columns:1fr;
    }

    .wmrate-service-window,
    .wmrate-pricing-note{
        grid-template-columns:1fr;
    }
}
/* =========================================================
  CALCULATOR INTRO
  ========================================================= */

.wmrate-page .wmrate-calculator-intro,
.wmcapc-page .wmcapc-calculator-heading {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.wmrate-page .wmrate-calc-heading2,
.wmcapc-page .wmcapc-calculator-heading h2 {
  max-width: 730px;
  margin: 15px auto 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(35px, 4.2vw, 41px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.wmrate-page .wmrate-calc-heading2 span,
.wmcapc-page .wmcapc-calculator-heading h2 span {
  color: var(--green-600);
}

.wmrate-page .wmrate-calculator-intro > p,
.wmcapc-page .wmcapc-calculator-heading > p {
  max-width: 650px;
  margin: 15px auto 0;
  color: var(--ink-500);
  font-size: 15px;
  line-height: 1.7;
}


/* =========================================================
  MAIN CALCULATOR CARD
  ========================================================= */

.wmrate-page .wmrate-calculator-card,
.wmcapc-page .wmcapc-calculator {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 34px 28px;
  overflow: visible;
  border: 1px solid #d8e6df;
  border-radius: 24px;
  background: #ffffff;
  box-shadow:
      0 1px 2px rgba(16, 24, 40, .025),
      0 26px 65px -45px rgba(16, 72, 51, .38);
}


/*  CALCULATOR HEADER  */

.wmrate-page .mmewa-calculator-head,
.wmcapc-page .wmcapc-calculator-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid #e4ece8;
}

.wmrate-page .mmewa-calculator-head > div:first-child > span,
.wmcapc-page .wmcapc-calculator-head > div:first-child > span {
  display: block;
  margin-bottom: 7px;
  color: var(--green-700);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.wmrate-page .mmewa-calculator-head h2,
.wmcapc-page .wmcapc-calculator-head h3 {
  margin: 0;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.03em;
}


/* Currency */

.wmrate-page .mmewa-currency,
.wmcapc-page .wmcapc-currency {
  min-width: 72px;
  min-height: 57px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #cfe3d9;
  border-radius: 13px;
  background: #f1f9f5;
  text-align: center;
}

.wmrate-page .mmewa-currency small,
.wmcapc-page .wmcapc-currency small {
  color: #7c8e85;
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.wmrate-page .mmewa-currency strong,
.wmcapc-page .wmcapc-currency strong {
  display: block;
  margin-top: 6px;
  color: var(--green-700);
  font-size: 13px;
  font-weight: 800;
}


/*  CALLING FREE NOTE */

.wmcapc-page .wmcapc-free-note {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  padding: 14px 16px;
  border: 1px solid #cce8da;
  border-radius: 14px;
  background: #f0faf5;
}

.wmcapc-page .wmcapc-free-note > span {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #d7f5e6;
  color: var(--green-700);
  font-size: 14px;
  font-weight: 900;
}

.wmcapc-page .wmcapc-free-note strong {
  display: block;
  color: #203128;
  font-size: 13px;
  font-weight: 750;
}

.wmcapc-page .wmcapc-free-note p {
  margin: 3px 0 0;
  color: #6d7c74;
  font-size: 11px;
  line-height: 1.5;
}


/*  COUNTRY / REGION FIELD  */

.wmrate-page .mmewa-country-field,
.wmcapc-page .wmcapc-country-field {
  margin: 0;
  padding: 25px 0 4px;
}

.wmrate-page .mmewa-field-label,
.wmcapc-page .wmcapc-field-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.wmrate-page .mmewa-field-label label,
.wmcapc-page .wmcapc-field-label label {
  color: #27372f;
  font-size: 13px;
  font-weight: 750;
}


/* Help icon */

.wmrate-page .mmewa-help,
.wmcapc-page .wmcapc-help {
  position: relative;
  z-index: 50;
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  outline: 0;
  background: #e9f1ed;
  color: #64756c;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  cursor: help;
}


/* Tooltip */

.wmrate-page .mmewa-help::after,
.wmcapc-page .wmcapc-help::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 11px);
  left: 50%;
  z-index: 110;
  width: min(260px, calc(100vw - 40px));
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: #12382d;
  color: #f5fffa;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: 0 15px 30px -18px rgba(4,45,31,.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
}

.wmrate-page .mmewa-help::before,
.wmcapc-page .wmcapc-help::after {
  content: "";
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 111;
  width: 9px;
  height: 9px;
  background: #12382d;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
}

.wmrate-page .mmewa-help:hover::after,
.wmrate-page .mmewa-help:focus-visible::after,
.wmcapc-page .wmcapc-help:hover::before,
.wmcapc-page .wmcapc-help:focus-visible::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.wmrate-page .mmewa-help:hover::before,
.wmrate-page .mmewa-help:focus-visible::before,
.wmcapc-page .wmcapc-help:hover::after,
.wmcapc-page .wmcapc-help:focus-visible::after {
  opacity: 1;
  visibility: visible;
}


/* Modern native select */



.wmrate-page .mmewa-select-wrap select,
.wmcapc-page .wmcapc-select-wrap select {
  width: 100%;
  height: 56px;
  display: block;
  margin: 0;
  padding: 0 54px 0 17px;
  border: 1px solid #cddfd6;
  border-radius: 14px;
  outline: none;
  background:
      linear-gradient(180deg, #ffffff 0%, #fbfdfc 100%);
  color: #1d2c24;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 56px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow:
      0 1px 2px rgba(16,24,40,.03),
      inset 0 1px 0 rgba(255,255,255,.9);
  transition:
      border-color .2s ease,
      box-shadow .2s ease,
      background .2s ease;
}

.wmrate-page .mmewa-select-wrap select:hover,
.wmcapc-page .wmcapc-select-wrap select:hover {
  border-color: #a8cdbb;
  background: #ffffff;
}

.wmrate-page .mmewa-select-wrap select:focus,
.wmcapc-page .wmcapc-select-wrap select:focus {
  border-color: #12a573;
  background: #ffffff;
  box-shadow:
      0 0 0 4px rgba(18,183,106,.09),
      0 8px 20px -16px rgba(3,152,85,.28);
}



/* ===== Calculator Select2 — Messaging + Calling ===== */

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container{
display:block;
width:100%!important
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection--single{
height:56px;
display:flex;
align-items:center;
padding:0 48px 0 17px;
border:1px solid #cfe0d8;
border-radius:16px;
background:#fff;
box-shadow:0 1px 2px rgba(16,24,40,.03);
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection--single:hover{
border-color:#a9d5c0;
background:#fcfefd
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection__rendered{
width:100%;
padding:0!important;
color:#1d2939;
font-family:inherit;
font-size:14px;
font-weight:600;
line-height:54px!important
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection__placeholder{
color:#667085;
font-weight:500
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection__arrow{
top:1px;
right:14px;
width:26px;
height:54px
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection__arrow b{
top:47%;
left:50%;
width:8px;
height:8px;
margin:0;
border:0;
border-right:1.8px solid #667085;
border-bottom:1.8px solid #667085;
transform:translate(-50%,-50%) rotate(45deg);
transition:transform .2s ease,border-color .2s ease
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container.select2-container--open
.select2-selection--single{
border-color:#12b76a;
background:#fff;
box-shadow:0 0 0 4px rgba(18,183,106,.10)
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container.select2-container--open
.select2-selection__arrow b{
border-color:#12b76a;
transform:translate(-50%,-38%) rotate(225deg)
}


/* Dropdown */

:is(.wmrate-page,.wmcapc-page)
.select2-container--open{
z-index:60
}

:is(.wmrate-page,.wmcapc-page)
.select2-dropdown{
overflow:hidden;
margin-top:8px;
border:1px solid #cfe0d8;
border-radius:16px;
background:#fff;
box-shadow:0 20px 40px -24px rgba(16,24,40,.28)
}

:is(.wmrate-page,.wmcapc-page)
.select2-dropdown.select2-dropdown--above{
margin-top:0;
margin-bottom:8px
}


/* Search */

:is(.wmrate-page,.wmcapc-page)
.select2-search--dropdown{
padding:10px;
background:#fff
}

:is(.wmrate-page,.wmcapc-page)
.select2-search--dropdown
.select2-search__field{
height:42px;
padding:0 13px;
border:1px solid #d6e4dd!important;
border-radius:10px;
outline:0;
background:#fff;
color:#1d2939;
font-family:inherit;
font-size:13px;
font-weight:500;
box-shadow:none!important
}

:is(.wmrate-page,.wmcapc-page)
.select2-search--dropdown
.select2-search__field:focus{
border-color:#12b76a!important;
box-shadow:0 0 0 3px rgba(18,183,106,.08)!important
}


/* Results */

:is(.wmrate-page,.wmcapc-page)
.select2-results__options{
max-height:280px!important;
padding:6px;
scrollbar-width:thin;
scrollbar-color:#b7d8c7 transparent
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__options::-webkit-scrollbar{
width:8px
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__options::-webkit-scrollbar-track{
background:transparent
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__options::-webkit-scrollbar-thumb{
background:#c7ddd1;
border-radius:999px
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__option{
margin:2px 0;
padding:11px 12px;
border-radius:10px;
color:#344054;
font-size:14px;
font-weight:550;
line-height:1.35;
transition:background .18s ease,color .18s ease
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__option--highlighted.select2-results__option--selectable{
background:#ecfdf3!important;
color:#027a48!important
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__option--selected{
background:#e8f7ef!important;
color:#027a48!important;
font-weight:700
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__option--disabled{
color:#98a2b3
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__message{
padding:12px;
color:#667085;
font-size:13px
}


@media(max-width:640px){

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection--single{
height:52px;
padding:0 44px 0 14px;
border-radius:14px
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection__rendered{
font-size:13px;
line-height:50px!important
}

:is(.wmrate-page,.wmcapc-page)
:is(#mmewaCountry,#wmcapcCountry)
+ .select2-container
.select2-selection__arrow{
height:50px;
right:12px
}

:is(.wmrate-page,.wmcapc-page)
.select2-dropdown{
border-radius:14px
}

:is(.wmrate-page,.wmcapc-page)
.select2-results__option{
padding:10px 11px;
font-size:13px
}

}

/* Calling calculator — manual minutes */

.wmcapc-page .wmcapc-rate-actions{
display:flex;
align-items:flex-end;
justify-content:flex-end;
gap:16px;
flex:0 0 auto
}

.wmcapc-page .wmcapc-custom-minutes{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:5px
}

.wmcapc-page .wmcapc-custom-minutes>span{
color:#7d8b84;
font-size:9px;
font-weight:750;
line-height:1;
text-transform:uppercase;
letter-spacing:.045em
}

.wmcapc-page .wmcapc-custom-minutes input{
width:136px;
height:39px;
margin:0;
padding:0 12px;
border:1px solid #d3e3da;
border-radius:10px;
outline:0;
background:#fff;
color:#1d2c24;
font-family:inherit;
font-size:12px;
font-weight:700;
line-height:39px;
text-align:right;
box-shadow:0 1px 2px rgba(16,24,40,.03);
transition:border-color .2s ease,box-shadow .2s ease,background .2s ease
}

.wmcapc-page .wmcapc-custom-minutes input:hover{
border-color:#a9cfbc
}

.wmcapc-page .wmcapc-custom-minutes input:focus{
border-color:var(--green-500);
background:#fff;
box-shadow:0 0 0 3px rgba(18,183,106,.09)
}

.wmcapc-page .wmcapc-custom-minutes input::-webkit-outer-spin-button,
.wmcapc-page .wmcapc-custom-minutes input::-webkit-inner-spin-button{
margin:0
}

@media(max-width:700px){

.wmcapc-page .wmcapc-rate-header{
flex-direction:column;
gap:14px
}

.wmcapc-page .wmcapc-rate-actions{
width:100%;
align-items:flex-end;
justify-content:space-between
}

.wmcapc-page .wmcapc-custom-minutes{
align-items:flex-end
}

.wmcapc-page .wmcapc-custom-minutes input{
width:128px
}

}


/* Messaging calculator — manual message volume */
.wmrate-page .mmewa-rate-actions{display:flex;align-items:flex-end;justify-content:flex-end;gap:16px;flex:0 0 auto}
.wmrate-page .mmewa-custom-volume{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.wmrate-page .mmewa-custom-volume>span{color:#7d8b84;font-size:9px;font-weight:750;line-height:1;text-transform:uppercase;letter-spacing:.045em}
.wmrate-page .mmewa-custom-volume input{width:136px;height:39px;margin:0;padding:0 12px;border:1px solid #d3e3da;border-radius:10px;outline:0;background:#fff;color:#1d2c24;font-family:inherit;font-size:12px;font-weight:700;line-height:39px;text-align:right;box-shadow:0 1px 2px rgba(16,24,40,.03);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
.wmrate-page .mmewa-custom-volume input:hover{border-color:#a9cfbc}
.wmrate-page .mmewa-custom-volume input:focus{border-color:var(--green-500);background:#fff;box-shadow:0 0 0 3px rgba(18,183,106,.09)}
.wmrate-page .mmewa-custom-volume input::-webkit-outer-spin-button,.wmrate-page .mmewa-custom-volume input::-webkit-inner-spin-button{margin:0}

@media(max-width:700px){
.wmrate-page .mmewa-rate-head{flex-direction:column;gap:14px}
.wmrate-page .mmewa-rate-actions{width:100%;align-items:flex-end;justify-content:space-between}
.wmrate-page .mmewa-custom-volume{align-items:flex-end}
.wmrate-page .mmewa-custom-volume input{width:128px}
}

/*   MESSAGING CALCULATOR ROWS  */

.wmrate-page .mmewa-rate-list {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.wmrate-page .mmewa-rate-row {
  min-width: 0;
  padding: 20px 21px;
  border: 1px solid #dbe8e1;
  border-radius: 17px;
  background:
      linear-gradient(145deg, #ffffff 0%, #f8fcfa 100%);
  box-shadow: 0 12px 26px -26px rgba(16, 65, 46, .5);
}

.wmrate-page .mmewa-rate-row.is-hidden {
  display: none;
}

.wmrate-page .mmewa-rate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.wmrate-page .mmewa-rate-name {
  display: flex;
  align-items: center;
  gap: 7px;
}

.wmrate-page .mmewa-rate-name > span:first-child {
  color: #192820;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.45;
}

.wmrate-page .mmewa-unit-price {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 5px;
  white-space: nowrap;
}

.wmrate-page .mmewa-unit-price strong {
  color: var(--green-700);
  font-size: 15px;
  font-weight: 800;
}

.wmrate-page .mmewa-unit-price span {
  color: #7d8b84;
  font-size: 10px;
}


/*  CALLING RATE PANEL  */

.wmcapc-page .wmcapc-rate-panel {
  margin-top: 22px;
  padding: 21px;
  border: 1px solid #dbe8e1;
  border-radius: 17px;
  background:
      linear-gradient(145deg, #ffffff 0%, #f8fcfa 100%);
  box-shadow: 0 12px 26px -26px rgba(16,65,46,.5);
}

.wmcapc-page .wmcapc-rate-panel.is-disabled {
  opacity: .5;
  pointer-events: none;
}

.wmcapc-page .wmcapc-rate-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.wmcapc-page .wmcapc-rate-header > div:first-child strong {
  display: block;
  color: #192820;
  font-size: 14px;
  font-weight: 750;
}

.wmcapc-page .wmcapc-rate-header > div:first-child span {
  display: block;
  margin-top: 5px;
  color: #75827b;
  font-size: 11px;
  line-height: 1.5;
}

.wmcapc-page .wmcapc-current-rate {
  flex: 0 0 auto;
  min-width: 135px;
  padding: 10px 12px;
  border: 1px solid #d5e7de;
  border-radius: 12px;
  background: #f2f9f6;
  text-align: right;
}

.wmcapc-page .wmcapc-current-rate > small {
  display: block;
  margin-bottom: 5px;
  color: #7e8c84;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.wmcapc-page .wmcapc-current-rate > div {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
}

.wmcapc-page .wmcapc-current-rate strong {
  color: var(--green-700);
  font-size: 18px;
  font-weight: 800;
}

.wmcapc-page .wmcapc-current-rate span {
  color: #7d8b84;
  font-size: 10px;
}


/*     SLIDERS  */

.wmrate-page .mmewa-slider-box,
.wmcapc-page .wmcapc-slider-area {
  position: relative;
  width: 100%;
  padding-top: 54px;
}


/* Value Bubble */

.wmrate-page .mmewa-slider-bubble,
.wmcapc-page #wmcapcBubble {
  position: absolute;
  top: 9px;
  left: 0;
  z-index: 5;
  min-width: 88px;
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 9px;
  background: var(--green-600);
  color: #ffffff;
  font-size: 10px;
  font-weight: 750;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 9px 18px -11px rgba(3,152,85,.72);
  pointer-events: none;
}


/* Slider track */

.wmrate-page .mmewa-slider-box input[type="range"],
.wmcapc-page #wmcapcMinutes {
  --wm-range-progress: 0%;
  width: 100%;
  height: 8px;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  background:
      linear-gradient(
          90deg,
          var(--green-500) 0%,
          var(--green-500) var(--wm-range-progress),
          #dce7e1 var(--wm-range-progress),
          #dce7e1 100%
      );
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}


/* WebKit thumb */

.wmrate-page .mmewa-slider-box input[type="range"]::-webkit-slider-thumb,
.wmcapc-page #wmcapcMinutes::-webkit-slider-thumb {
  width: 21px;
  height: 21px;
  margin-top: 0;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: var(--green-600);
  appearance: none;
  -webkit-appearance: none;
  box-shadow:
      0 0 0 1px rgba(3,152,85,.18),
      0 5px 12px rgba(3,152,85,.24);
  cursor: grab;
}

.wmrate-page .mmewa-slider-box input[type="range"]::-webkit-slider-thumb:active,
.wmcapc-page #wmcapcMinutes::-webkit-slider-thumb:active {
  cursor: grabbing;
}


/* Firefox */

.wmrate-page .mmewa-slider-box input[type="range"]::-moz-range-track,
.wmcapc-page #wmcapcMinutes::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #dce7e1;
}

.wmrate-page .mmewa-slider-box input[type="range"]::-moz-range-progress,
.wmcapc-page #wmcapcMinutes::-moz-range-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--green-500);
}

.wmrate-page .mmewa-slider-box input[type="range"]::-moz-range-thumb,
.wmcapc-page #wmcapcMinutes::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 4px solid #ffffff;
  border-radius: 50%;
  background: var(--green-600);
  box-shadow:
      0 0 0 1px rgba(3,152,85,.18),
      0 5px 12px rgba(3,152,85,.24);
  cursor: grab;
}


/* Cost under messaging slider */

.wmrate-page .mmewa-category-cost {
  display: block;
  margin-top: 12px;
  color: #52645a;
  font-size: 12px;
  font-weight: 750;
  text-align: right;
}


/*
  Calling page already has wmcapcCost as a JS target.
  Hide duplicate row visually; total estimate stays visible.
*/

.wmcapc-page .wmcapc-cost-row {
  display: none !important;
}


/*  UNAVAILABLE DESTINATION */

.wmcapc-page .wmcapc-unavailable {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 15px 16px;
  border: 1px solid #ecd8b6;
  border-radius: 14px;
  background: #fff9ee;
}

.wmcapc-page .wmcapc-unavailable[hidden] {
  display: none !important;
}

.wmcapc-page .wmcapc-unavailable > span {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #ffedcb;
  color: #b65c00;
  font-size: 13px;
  font-weight: 900;
}

.wmcapc-page .wmcapc-unavailable strong {
  display: block;
  color: #6d3b09;
  font-size: 12px;
}

.wmcapc-page .wmcapc-unavailable p {
  margin: 4px 0 0;
  color: #8c6c47;
  font-size: 10px;
  line-height: 1.55;
}


/*  TOTAL BOX  */

.wmrate-page .mmewa-total,
.wmcapc-page .wmcapc-total {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 23px;
  padding: 21px 23px;
  overflow: hidden;
  border: 1px solid rgba(100,221,174,.16);
  border-radius: 18px;
  background:
      radial-gradient(circle at 95% 10%, rgba(50,213,131,.12), transparent 32%),
      linear-gradient(135deg, #073c2c 0%, #062b21 100%);
  box-shadow: 0 20px 42px -28px rgba(3,75,52,.68);
}

.wmrate-page .mmewa-total > div > span,
.wmcapc-page .wmcapc-total > div > span {
  display: block;
  margin-bottom: 6px;
  color: #72c9a7;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmrate-page .mmewa-total strong,
.wmcapc-page .wmcapc-total strong {
  display: block;
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 41px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
}

.wmrate-page .mmewa-total small,
.wmcapc-page .wmcapc-total small {
  display: block;
  margin-top: 7px;
  color: #a7c6ba;
  font-size: 10px;
}

.wmrate-page .mmewa-total button,
.wmcapc-page .wmcapc-total button {
  min-width: 150px;
  min-height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 11px;
  outline: none;
  background: rgba(255,255,255,.08);
  color: #ffffff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition:
      background .2s ease,
      border-color .2s ease,
      transform .2s ease;
}

.wmrate-page .mmewa-total button:hover,
.wmcapc-page .wmcapc-total button:hover {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.14);
  transform: translateY(-1px);
}


/*    CALCULATOR FOOTER  */

.wmrate-page .mmewa-calculator-bottom,
.wmcapc-page .wmcapc-calculator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 16px;
}

.wmrate-page .mmewa-calculator-bottom p,
.wmcapc-page .wmcapc-calculator-footer p,
.wmcapc-page .wmcapc-calculator-footer > span {
  margin: 0;
  color: #7c8a83;
  font-size: 10px;
  line-height: 1.55;
}

.wmcapc-page .wmcapc-calculator-footer > span {
  flex: 0 0 auto;
}

.wmrate-page .wmrate-usd-note {
  max-width: 1080px;
  margin: 12px auto 0;
  color: #7d8b84;
  font-size: 10px;
  text-align: right;
}


/*  MESSAGING ESTIMATE GUIDE */

.wmrate-page .wmrate-guide-section {
  position: relative;
  padding: 84px 0;
  background: #ffffff;
}

.wmrate-page .wmrate-guide-shell {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 42px;
  padding: 42px 44px;
  overflow: hidden;
  border-radius: 24px;
  background:
      radial-gradient(circle at 100% 0%, rgba(50,213,131,.11), transparent 34%),
      linear-gradient(135deg, #061d16 0%, #07372a 100%);
  box-shadow: 0 28px 60px -42px rgba(3,68,46,.7);
}

.wmrate-page .wmrate-guide-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #69ddb1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmrate-page .wmrate-guide-copy h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.5vw, 3px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.wmrate-page .wmrate-guide-copy h2 span {
  display: block;
  color: var(--green-400);
}

.wmrate-page .wmrate-guide-copy > p {
  max-width: 520px;
  margin: 14px 0 0;
  color: #b4c9c1;
  font-size: 14px;
  line-height: 1.7;
}

.wmrate-page .wmrate-guide-note {
  margin-top: 21px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(255,255,255,.055);
}

.wmrate-page .wmrate-guide-note p {
  margin: 0;
  color: #abc1b8;
  font-size: 11px;
  line-height: 1.55;
}

.wmrate-page .wmrate-guide-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.wmrate-page .wmrate-guide-items article {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 17px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
}

.wmrate-page .wmrate-guide-items article > span {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(85,221,167,.13);
  color: #6ce0b4;
  font-size: 10px;
  font-weight: 800;
}

.wmrate-page .wmrate-guide-items strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
}

.wmrate-page .wmrate-guide-items p {
  margin: 5px 0 0;
  color: #aac0b7;
  font-size: 11px;
  line-height: 1.6;
}


/*  CALLING GUIDE SECTION  */

.wmcapc-page .wmcapc-guide-section {
  position: relative;
  padding: 84px 0;
  overflow: hidden;
  background: #ffffff;
}

.wmcapc-page .wmcapc-guide-shell {
  position: relative;
  width: 100%;
  padding: 42px 44px;
  overflow: hidden;
  border-radius: 24px;
  background: radial-gradient(circle at 100% 0%, rgba(50,213,131,.12), transparent 32%), linear-gradient(135deg, #061d16 0%, #07372a 100%);
  box-shadow: 0 28px 60px -42px rgba(3,68,46,.72);
}


/* Top row */

.wmcapc-page .wmcapc-guide-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: end;
  gap: 34px;
}

.wmcapc-page .wmcapc-guide-header {
  max-width: 700px;
}

.wmcapc-page .wmcapc-guide-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: #69ddb1;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wmcapc-page .wmcapc-guide-header h2 {
  margin: 0;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: clamp(31px, 3.5vw, 38px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.wmcapc-page .wmcapc-guide-header h2 span {
  display: block;
  color: var(--green-400);
}

.wmcapc-page .wmcapc-guide-header > p {
  max-width: 650px;
  margin: 14px 0 0;
  color: #b3c9c0;
  font-size: 14px;
  line-height: 1.7;
}


/* Informational note */

.wmcapc-page .wmcapc-guide-note {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  padding: 14px;
  border: 1px solid rgba(104,222,177,.16);
  border-radius: 14px;
  background: rgba(80,210,160,.075);
}

.wmcapc-page .wmcapc-guide-note > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(91,223,172,.14);
  color: #70e1b5;
  font-size: 12px;
  font-weight: 800;
}

.wmcapc-page .wmcapc-guide-note p {
  margin: 0;
  color: #b1c9bf;
  font-size: 11px;
  line-height: 1.6;
}


/* Calling cards */

.wmcapc-page .wmcapc-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
  margin-top: 30px;
}

.wmcapc-page .wmcapc-guide-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.095);
  border-radius: 15px;
  background: rgba(255,255,255,.055);
  transition: border-color .2s ease, background .2s ease,  transform .2s ease;
}

.wmcapc-page .wmcapc-guide-card:hover {
  border-color: rgba(99,221,174,.25);
  background: rgba(255,255,255,.075);
  transform: translateY(-2px);
}

.wmcapc-page .wmcapc-guide-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: 15px;
  border-radius: 11px;
  background: rgba(80,218,164,.13);
  color: #66ddb0;
}


/* IMPORTANT — fixes giant black circles / phone icons */

.wmcapc-page .wmcapc-guide-icon svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  display: block;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wmcapc-page .wmcapc-guide-card strong {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 750;
}

.wmcapc-page .wmcapc-guide-card p {
  margin: 6px 0 0;
  color: #abc0b8;
  font-size: 11px;
  line-height: 1.6;
}


/* Bottom rules */

.wmcapc-page .wmcapc-guide-rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 13px;
}

.wmcapc-page .wmcapc-guide-rule {
  min-width: 0;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid rgba(101,221,175,.16);
  border-radius: 14px;
  background: rgba(75,211,158,.075);
}

.wmcapc-page .wmcapc-guide-rule > span {
  width: 46px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(92,222,172,.13);
  color: #69dfb2;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.wmcapc-page .wmcapc-guide-rule > span svg {
  width: 19px !important;
  height: 19px !important;
  max-width: 19px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wmcapc-page .wmcapc-guide-rule strong {
  display: block;
  color: #ffffff;
  font-size: 12px;
  font-weight: 750;
}

.wmcapc-page .wmcapc-guide-rule p {
  margin: 5px 0 0;
  color: #abc3ba;
  font-size: 10px;
  line-height: 1.55;
}


/*   FAQ + CTA PAGE RHYTHM  */

.wmrate-page .faq-section,
.wmcapc-page .faq-section {
  padding: 84px 0 90px;
}

.wmrate-page .wmksupportcta-section,
.wmcapc-page .wmksupportcta-section {
  padding-top: 76px;
  padding-bottom: 92px;
}




/*   MME FLOW — FLOATING TOTAL BAR + MODERN CALCULATOR SELECT  */

/*  CALCULATOR FLOATING ESTIMATE  */

.wmcalc-total-anchor {
  display: block;
  width: 100%;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}

.wmrate-page .mmewa-total,
.wmcapc-page .wmcapc-total {
  transition:
      box-shadow .22s ease,
      opacity .22s ease;
}

.wmrate-page .mmewa-total.is-floating,
.wmcapc-page .wmcapc-total.is-floating {
  position: fixed !important;
  top: auto !important;
  right: auto !important;
  bottom: 18px !important;
  margin-top: 0 !important;
  z-index: 1900 !important;
  box-shadow:
      0 26px 55px -28px
      rgba(3, 63, 44, .58) !important;

  animation:
      wmcalcTotalFloatIn .28s
      cubic-bezier(.22, 1, .36, 1)
      both;
}

@keyframes wmcalcTotalFloatIn {
  from {
      opacity: 0;
      transform: translateY(16px) scale(.992);
  }

  to {
      opacity: 1;
      transform: translateY(0) scale(1);
  }
}








/*    MME FLOW AI PERFORMANCE  */

.mmeai10x-section,
.mmeai10x-section *,
.mmeai10x-section *::before,
.mmeai10x-section *::after {
  box-sizing: border-box;
}

.mmeai10x-section {
  position: relative;
  overflow: hidden;
  padding: 84px 20px 96px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fcf9 100%);
}

.mmeai10x-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}


/*  HEADING  */

.mmeai10x-heading {
  max-width: 820px;
  margin: 0 auto 54px;
  text-align: center;
}

.mmeai10x-kicker {
  display: inline-block;
  margin-bottom: 14px;
  padding: 8px 13px;
  border: 1px solid #bcebd3;
  border-radius: 999px;
  background: #effcf5;
  color: #087a4c;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .08em;
}

.mmeai10x-heading h2 {
  max-width: 760px;
  margin: 0 auto;
  color: #101828;
  font-family: var(--font-display, inherit);
  font-size: clamp(38px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
}

.mmeai10x-heading p {
  max-width: 720px;
  margin: 18px auto 0;
  color: #5f6f85;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
}


/* GRID  */

.mmeai10x-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
}


/*   CARDS  */

.mmeai10x-card {
  min-width: 0;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 16px 42px rgba(16, 24, 40, 0.07);
}

.mmeai10x-card--lead {
  border: 1px solid #ccebdd;
  background: linear-gradient(180deg, #f7fcf9 0%, #ffffff 100%);
}

.mmeai10x-card--support {
  border: 1px solid #c9e7e5;
  background: linear-gradient(180deg, #f6fbfb 0%, #ffffff 100%);
}


/*  VISUAL AREA  */

.mmeai10x-visual {
  position: relative;
  height: 520px;
  flex: 0 0 520px;
  margin: 18px 18px 0;
  overflow: hidden;
  border: 1px solid rgba(16, 86, 112, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
}


/*   LEFT FLOATING 24/7 PILL  */

.mmeai10x-lead-stat {
  position: absolute;
  top: 22px;
  right: 22px;
  left: 22px;
  z-index: 10;
  width: auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border: 2px solid #8bd9b3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(0, 153, 96, 0.08);
}

.mmeai10x-lead-stat span {
  color: #444;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.16;
}

.mmeai10x-lead-stat strong {
  color: #009b62;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}


/*  RIGHT 60% PILL */

.mmeai10x-support-stat {
  position: absolute;
  top: 22px;
  right: 22px;
  left: 22px;
  z-index: 10;
  width: auto;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 20px;
  border: 2px solid #76cfc9;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 137, 123, 0.08);
}

.mmeai10x-support-stat strong {
  color: #008f83;
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
}

.mmeai10x-support-stat span {
  max-width: 250px;
  color: #414141;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.18;
  text-align: right;
}


/*   MESSAGE BUBBLES  */

.mmeai10x-bubble {
  position: absolute;
  z-index: 5;
  padding: 13px 15px;
  color: #202020;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 13px;
  box-shadow: 0 9px 22px rgba(16, 24, 40, 0.09);
}

.mmeai10x-spark {
  position: absolute;
  right: 12px;
  top: calc(100% + 7px);
  color: #6b9cff;
  font-size: 17px;
  line-height: 1;
}


/* LEFT BUBBLES */

.mmeai10x-bubble--lead-customer {
  top: 124px;
  left: 22px;
  width: 68%;
  background: #dff8eb;
  border-bottom-left-radius: 4px;
}

.mmeai10x-bubble--lead-ai {
  top: 205px;
  right: 22px;
  width: 74%;
  border: 2px solid #35bd7f;
  background: #fff;
  border-bottom-right-radius: 4px;
}


/* RIGHT BUBBLES */

.mmeai10x-bubble--support-q1 {
  top: 124px;
  left: 22px;
  width: auto;
  background: #e6f7ef;
  border-bottom-left-radius: 4px;
}

.mmeai10x-bubble--support-a1 {
  top: 181px;
  right: 22px;
  width: 72%;
  border: 2px solid #13c8b0;
  background: #fff;
  border-bottom-right-radius: 4px;
}

.mmeai10x-bubble--support-q2 {
  top: 315px;
  left: 22px;
  background: #e6f7ef;
  border-bottom-left-radius: 4px;
}

.mmeai10x-bubble--support-a2 {
  top: 370px;
  right: 22px;
  width: 72%;
  border: 2px solid #13c8b0;
  background: #fff;
  border-bottom-right-radius: 4px;
}

.mmeai10x-bubble--support-a1 .mmeai10x-spark,
.mmeai10x-bubble--support-a2 .mmeai10x-spark {
  color: #10cab7;
}


/*  LEFT LEAD PROFILE */

.mmeai10x-profile {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  padding: 16px 15px 13px;
  border: 1px solid #75d6a6;
  border-radius: 14px;
  background: #eafaf2;
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.08);
}

.mmeai10x-profile-top {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}

.mmeai10x-profile-hot {
  color: #ef3d54;
  font-size: 27px;
  line-height: 1;
}

.mmeai10x-profile-user strong,
.mmeai10x-profile-user span {
  display: block;
}

.mmeai10x-profile-user strong {
  color: #3d4650;
  font-size: 14px;
  line-height: 1.1;
}

.mmeai10x-profile-user span {
  margin-top: 1px;

  color: #525d68;
  font-size: 12px;
  line-height: 1.12;
}

.mmeai10x-profile-score {
  min-width: 49px;
  text-align: center;
}

.mmeai10x-profile-score small {
  display: block;
  color: #5d6673;
  font-size: 10px;
}

.mmeai10x-profile-score strong {
  display: block;
  margin-top: 2px;
  color: #3f4852;
  font-size: 22px;
  line-height: 1;
}

.mmeai10x-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 11px;
}

.mmeai10x-profile-tags span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #0f5138;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  line-height: 1;
}

.mmeai10x-profile-details {
  margin-top: 10px;
}

.mmeai10x-profile-details p {
  margin: 2px 0;
  color: #65707c;
  font-size: 12px;
  line-height: 1.3;
}

.mmeai10x-profile-details b {
  color: #414b55;
}

.mmeai10x-profile-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 2px;
  color: #65707c;
  font-size: 12px;
}


/*   CARD COPY */

.mmeai10x-copy {
  min-height: 182px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: auto;
  padding: 25px 34px 28px;
  border-top: 1px solid rgba(71, 84, 103, 0.10);
  text-align: center;
}

.mmeai10x-copy h3 {
  margin: 0;
  color: #101828;
  font-family: var(--font-display, inherit);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.18;
}

.mmeai10x-copy p {
  max-width: 390px;
  margin: 11px auto 0;
  color: #59687d;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
}


/* BUTTON  */

.mmeai10x-btn {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding: 0 21px;
  border: 1px solid #0a8654;
  border-radius: 10px;
  background: #fff;
  color: #087a4c;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:  background .2s ease, border-color .2s ease,  box-shadow .2s ease,color .2s ease,  transform .2s ease;
}

.mmeai10x-btn:hover {
  border-color: #087a4c;
  background: #087a4c;
  color: #fff;
  box-shadow: 0 8px 18px rgba(8, 122, 76, 0.18);
  transform: translateY(-2px);
}

.mmeai10x-btn:focus-visible {
  outline: 3px solid rgba(18, 183, 106, 0.24);
  outline-offset: 3px;
}

/* Homepage buyer journey tabs */
.home-buyer-tabs {
  padding: 88px 0;
  background: linear-gradient(180deg, #f7fbf9 0%, #ffffff 100%);
}

.home-buyer-tabs::before {
  opacity: 0.1;
}

.home-buyer-tabs .home-buyer-tabs__heading {
  max-width: 760px;
  margin-bottom: 30px;
}

.home-buyer-tabs .home-buyer-tabs__heading h2 {
  max-width: 720px;
  font-size: clamp(36px, 4vw, 46px);
  line-height: 1.08;
}

.home-buyer-tabs .home-buyer-tabs__heading p {
  max-width: 690px;
  font-size: 16px;
  line-height: 1.7;
}

.home-buyer-tabs .home-buyer-tabs__shell {
  display: block;
  max-width: 1160px;
  margin-inline: auto;
}

.home-buyer-tabs .feature-tab-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
  padding: 8px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 38px -32px rgba(16, 24, 40, 0.42);
}

.home-buyer-tabs .feature-tab-button {
  min-height: 68px;
  grid-template-columns: 42px minmax(0, 1fr);
  padding: 10px 14px 13px;
  border-radius: 13px;
}

.home-buyer-tabs .feature-tab-button::after {
  display: none;
}

.home-buyer-tabs .feature-tab-button:hover {
  transform: translateY(-1px);
}

.home-buyer-tabs .feature-tab-label small {
  margin: 0 0 3px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-buyer-tabs .feature-tab-label b {
  font-size: 15px;
}

.home-buyer-tabs .feature-tab-stage {
  padding: 30px;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 58px -42px rgba(16, 24, 40, 0.42);
}

.home-buyer-tabs .feature-panel-grid {
  grid-template-columns: minmax(0, 0.84fr) minmax(420px, 1.16fr);
  gap: 34px;
  min-height: 440px;
}

.home-buyer-tabs .feature-panel-copy h3 {
  max-width: 570px;
  font-size: clamp(30px, 3vw, 39px);
  line-height: 1.1;
}

.home-buyer-tabs .feature-panel-copy > p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.7;
}

.home-buyer-tabs .feature-point-list {
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 20px;
}

.home-buyer-tabs .feature-point-list li {
  min-height: 44px;
  align-items: center;
  padding: 9px 11px;
  background: #f8fbfa;
}

.home-buyer-tabs .feature-point-list li > span {
  width: 24px;
  height: 24px;
  flex-basis: 24px;
  font-size: 13px;
  font-weight: 800;
}

.home-buyer-tabs .feature-point-list li b {
  font-size: 13px !important;
}

.home-buyer-tabs__cta {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding: 0 18px;
  border: 1px solid #09945b;
  border-radius: 11px;
  background: #079f62;
  color: #ffffff;
  font-size: 14px;
  font-weight: 750;
  text-decoration: none;
  box-shadow: 0 12px 24px -17px rgba(7, 159, 98, 0.72);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-buyer-tabs__cta:hover {
  border-color: #087f50;
  background: #087f50;
  color: #ffffff;
  box-shadow: 0 16px 28px -18px rgba(7, 127, 80, 0.75);
  transform: translateY(-1px);
}

.home-buyer-tabs__cta:focus-visible {
  outline: 3px solid rgba(18, 183, 106, 0.24);
  outline-offset: 3px;
}

.home-buyer-tabs .home-buyer-tabs__visual {
  display: grid;
  place-items: center;
  min-height: 390px;
  margin: 0;
  padding: 12px;
  overflow: hidden;
  border-color: #ccebdd;
  border-radius: 21px;
  background: linear-gradient(145deg, #f9fffc 0%, #edf9f4 100%);
  box-shadow: inset 0 1px 0 #ffffff, 0 22px 46px -38px rgba(16, 24, 40, 0.4);
}

.home-buyer-tabs .home-buyer-tabs__visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 410px;
  object-fit: contain;
  border-radius: 14px;
}

.home-buyer-tabs__visual--sales {
  background: linear-gradient(145deg, #fbfffd 0%, #f0f8f5 100%);
}

.home-buyer-tabs__visual--support {
  background: linear-gradient(145deg, #f9fffc 0%, #eef8f7 100%);
}

.home-buyer-ui__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid #dbe9e3;
}

.home-buyer-ui__top > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-700);
  font-size: 12px;
  font-weight: 750;
}

.home-buyer-ui__top i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #12b76a;
  box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.12);
}

.home-buyer-ui__top > b,
.home-buyer-card__head > span {
  padding: 6px 9px;
  border: 1px solid #bdebd2;
  border-radius: 999px;
  background: #eafaf2;
  color: #087a4c;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.home-buyer-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.home-buyer-flow__step {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px;
  border: 1px solid #dce8e3;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
}

.home-buyer-flow__step.is-primary {
  border-color: #8ee0b7;
  background: #edfff5;
}

.home-buyer-flow__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e7f8ef;
  color: #079f62;
}

.home-buyer-flow__step small,
.home-buyer-flow__step b,
.home-buyer-card small,
.home-buyer-card b {
  display: block;
}

.home-buyer-flow__step small,
.home-buyer-card small {
  color: var(--ink-400);
  font-size: 9px;
}

.home-buyer-flow__step b {
  margin-top: 3px;
  overflow: hidden;
  color: var(--ink-800);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-buyer-flow__arrow {
  color: #079f62;
  font-size: 17px;
  font-weight: 850;
}

.home-buyer-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid #d9e8e1;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 32px -28px rgba(16, 24, 40, 0.4);
}

.home-buyer-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e3ece8;
}

.home-buyer-card__head b {
  margin-top: 3px;
  color: var(--ink-800);
  font-size: 13px;
}

.home-buyer-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 13px 0 0;
}

.home-buyer-details > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e4ece8;
  border-radius: 11px;
  background: #fafcfb;
}

.home-buyer-details dt {
  color: var(--ink-400);
  font-size: 9px;
}

.home-buyer-details dd {
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--ink-800);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-buyer-owner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 11px;
  border: 1px solid #dce8e3;
  border-radius: 12px;
  background: #f9fcfb;
}

.home-buyer-owner > span {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #d9f8e8;
  color: #087a4c;
  font-size: 10px;
  font-weight: 850;
}

.home-buyer-owner > div {
  min-width: 0;
  flex: 1;
}

.home-buyer-owner b {
  margin-top: 2px;
  color: var(--ink-800);
  font-size: 11px;
}

.home-buyer-owner em {
  color: #087a4c;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
}

.home-buyer-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.home-buyer-timeline > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #dce7e2;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
}

.home-buyer-timeline i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 8px;
  background: #edf2f0;
  color: var(--ink-500);
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
}

.home-buyer-timeline .is-done i,
.home-buyer-timeline .is-current i {
  background: #d9f8e8;
  color: #087a4c;
}

.home-buyer-timeline .is-current {
  border-color: #83ddb0;
  background: #edfff5;
}

.home-buyer-timeline small,
.home-buyer-timeline b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-buyer-timeline small {
  color: var(--ink-400);
  font-size: 8px;
}

.home-buyer-timeline b {
  margin-top: 3px;
  color: var(--ink-700);
  font-size: 9px;
}

.home-buyer-chat {
  display: grid;
  gap: 10px;
  margin-top: 17px;
  padding: 14px;
  border: 1px solid #dce8e3;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.88);
}

.home-buyer-chat__row {
  max-width: 84%;
}

.home-buyer-chat__row span {
  display: block;
  margin-bottom: 5px;
  color: var(--ink-400);
  font-size: 9px;
  font-weight: 750;
}

.home-buyer-chat__row p {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid #e2ebe7;
  border-radius: 12px 12px 12px 4px;
  background: #ffffff;
  color: var(--ink-700);
  font-size: 11px;
  line-height: 1.45;
}

.home-buyer-chat__row.is-ai {
  justify-self: end;
}

.home-buyer-chat__row.is-ai span {
  text-align: right;
}

.home-buyer-chat__row.is-ai p {
  border-color: #a9e9c8;
  border-radius: 12px 12px 4px 12px;
  background: #eafff4;
}

.home-buyer-support-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}

.home-buyer-support-path::before {
  content: "Routine request";
}

.home-buyer-support-path::after {
  content: "Human handoff";
}

.home-buyer-support-path::before,
.home-buyer-support-path::after {
  display: grid;
  place-items: center;
  min-height: 54px;
  padding: 9px;
  border: 1px solid #dce8e3;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink-700);
  font-size: 10px;
  font-weight: 750;
  text-align: center;
}

.home-buyer-support-path {
  color: var(--ink-500);
}

.home-buyer-support-path > span {
  display: grid;
  place-items: center;
  min-height: 42px;
  padding: 8px;
  border: 1px solid #8ddfb5;
  border-radius: 11px;
  background: #eafff4;
  color: #087a4c;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}


/* WhatsApp Business Calling - 4 tab layout only */
.feature-tabs-section.wmkcalling-tabs .feature-tab-nav{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.feature-tabs-section.wmkcalling-tabs .feature-tab-button{
    min-width:0;
}

.feature-tabs-section.wmkcalling-tabs .feature-tab-label{
    min-width:0;
}

.feature-tabs-section.wmkcalling-tabs .feature-tab-label small,
.feature-tabs-section.wmkcalling-tabs .feature-tab-label b{
    display:block;
}

.feature-tabs-section.wmkcalling-tabs .feature-tab-label b{
    white-space:normal;
    line-height:1.25;
}

.feature-tabs-section.wmkcalling-tabs .wmkcalling-tabs__visual img{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
}

@media (max-width:991px){
    .feature-tabs-section.wmkcalling-tabs .feature-tab-nav{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width:575px){
    .feature-tabs-section.wmkcalling-tabs .feature-tab-nav{
        grid-template-columns:1fr;
    }
}







/*  NTEGRATION DETAIL  */
html:has(main.mmeintg4-page),
body:has(main.mmeintg4-page){
    overflow:visible !important;
}


/*  PAGE */

.mmeintg4-page{
    width:100%;
    min-width:0;
    padding-top:90px;
    background:var(--surface);
    color:var(--ink-900);
    font-family:var(--font-display);
}

.mmeintg4-page *,
.mmeintg4-page *::before,
.mmeintg4-page *::after{
    box-sizing:border-box;
}


/*  BREADCRUMBS  */

.mmeintg4-breadcrumbs{
    position:relative;
    z-index:10;
    width:100%;
    padding:20px 0 0;
}

.mmeintg4-breadcrumbs .wrap{
    overflow:visible;
}

.mmeintg4-breadcrumbs ol{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    width:max-content;
    max-width:100%;
    min-height:38px;
    margin:0;
    padding:9px 13px;
    border:1px solid var(--green-100);
    border-radius:11px;
    background:rgba(255,255,255,.96);
    box-shadow:var(--shadow-sm);
    list-style:none;
}

.mmeintg4-breadcrumbs li,
.mmeintg4-breadcrumbs a,
.mmeintg4-breadcrumbs span{
    color:var(--ink-500);
    font-size:12px;
    font-weight:700;
    line-height:1.25;
    text-decoration:none;
}

.mmeintg4-breadcrumbs a{
    color:var(--green-700);
    transition:color .2s ease;
}

.mmeintg4-breadcrumbs a:hover{
    color:var(--green-600);
}

.mmeintg4-breadcrumbs li[aria-current="page"]{
    color:var(--ink-700);
}


/*  MAIN SECTION  */

.mmeintg4-section{
    position:relative;
    width:100%;
    padding:28px 0 82px;
    overflow:visible;
}

.mmeintg4-section > .wrap{
    position:relative;
    overflow:visible;
}
 
.mmeintg4-layout{
    position:relative;
    display:grid;
    grid-template-columns:250px minmax(0,1fr) 250px;
    grid-template-areas:"left content right";
    gap:26px;
    align-items:stretch;
    width:100%;
    max-width:1200px;
    margin:0 auto;
    overflow:visible;
}

.mmeintg4-left{
    grid-area:left;
    position:relative;
    min-width:0;
    width:250px;
    align-self:stretch;
    overflow:visible;
}

.mmeintg4-content{
    grid-area:content;
    min-width:0;
    width:100%;
}

.mmeintg4-right{
    grid-area:right;
    position:relative;
    min-width:0;
    width:250px;
    align-self:stretch;
    overflow:visible;
}


/* =========================================================
   LEFT + RIGHT STICKY COLUMNS
========================================================= */

.mmeintg4-left-sticky,
.mmeintg4-right-sticky{
    position:sticky;
    top:92px;
    width:100%;
    height:max-content;
    align-self:start;
    z-index:5;
}

.mmeintg4-right-sticky{
    display:grid;
    gap:14px;
}


/* =========================================================
   LEFT INTEGRATION CARD
========================================================= */

.mmeintg4-app-card{
    padding:27px 20px 22px;
    border:1px solid var(--border);
    border-radius:20px 20px 0 0;
    background:
        linear-gradient(
            180deg,
            var(--surface) 0%,
            var(--green-50) 150%
        );
    text-align:center;
    box-shadow:var(--shadow-md);
}

.mmeintg4-app-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:64px;
    height:64px;
    margin:0 auto 15px;
    border:1px solid var(--green-100);
    border-radius:17px;
    background:var(--green-50);
    color:var(--green-600);
}

.mmeintg4-app-icon svg{
    width:31px;
    height:31px;
}

.mmeintg4-app-type{
    display:block;
    margin-bottom:7px;
    color:var(--green-700);
    font-size:10px;
    font-weight:800;
    line-height:1.25;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeintg4-app-card h2{
    margin:0 0 8px;
    color:var(--ink-900);
    font-size:27px;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.03em;
}

.mmeintg4-app-card p{
    max-width:205px;
    margin:0 auto;
    color:var(--ink-500);
    font-size:13px;
    line-height:1.55;
}

.mmeintg4-status{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:15px;
    padding:7px 11px;
    border:1px solid var(--green-100);
    border-radius:999px;
    background:var(--surface);
    color:var(--green-700);
    font-size:10px;
    font-weight:800;
    line-height:1;
    box-shadow:var(--shadow-sm);
}

.mmeintg4-status i{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--green-500);
}


/* =========================================================
   LEFT ACTIONS
========================================================= */

.mmeintg4-left-actions{
    display:grid;
    gap:9px;
    padding:13px;
    border:1px solid var(--border);
    border-top:0;
    border-radius:0 0 20px 20px;
    background:var(--surface);
    box-shadow:var(--shadow-md);
}

.mmeintg4-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:45px;
    padding:11px 13px;
    border-radius:11px;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-align:center;
    text-decoration:none;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.mmeintg4-btn svg{
    width:16px;
    height:16px;
    flex:0 0 16px;
}

.mmeintg4-btn-primary{
    border:1px solid var(--green-600);
    background:var(--green-600);
    color:#fff !important;
    box-shadow:var(--shadow-green);
}

.mmeintg4-btn-primary span,
.mmeintg4-btn-primary svg{
    color:#fff !important;
}

.mmeintg4-btn-primary:hover{
    border-color:var(--green-700);
    background:var(--green-700);
    color:#fff !important;
    transform:translateY(-1px);
}

.mmeintg4-btn-secondary{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink-700) !important;
    box-shadow:var(--shadow-sm);
}

.mmeintg4-btn-secondary:hover{
    border-color:var(--ink-300);
    background:var(--ink-50);
}


/* =========================================================
   CENTER INTEGRATION VISUAL
========================================================= */

.mmeintg4-visual{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr);
    gap:15px;
    align-items:center;
    min-height:235px;
    padding:27px 24px 55px;
    overflow:hidden;
    border:1px solid var(--green-100);
    border-radius:24px;
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(50,213,131,.20),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(18,183,106,.13),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            var(--green-50),
            var(--surface) 55%,
            var(--green-50)
        );
    box-shadow:var(--shadow-lg);
}

.mmeintg4-visual::before,
.mmeintg4-visual::after{
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.mmeintg4-visual::before{
    width:250px;
    height:250px;
    left:-120px;
    bottom:-155px;
    background:rgba(18,183,106,.07);
}

.mmeintg4-visual::after{
    width:210px;
    height:210px;
    right:-100px;
    top:-125px;
    background:rgba(50,213,131,.10);
}

.mmeintg4-platform,
.mmeintg4-connection,
.mmeintg4-visual-tags{
    position:relative;
    z-index:2;
}

.mmeintg4-platform{
    display:grid;
    place-items:center;
    gap:11px;
    min-height:135px;
    padding:18px;
    border:1px solid var(--green-100);
    border-radius:18px;
    background:rgba(255,255,255,.95);
    box-shadow:var(--shadow-md);
    text-align:center;
}

.mmeintg4-platform-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:54px;
    border:1px solid var(--green-100);
    border-radius:15px;
    background:var(--green-50);
    color:var(--green-600);
}

.mmeintg4-platform-icon svg{
    width:27px;
    height:27px;
}

.mmeintg4-platform strong{
    color:var(--ink-900);
    font-size:18px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.02em;
}

.mmeintg4-connection{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

.mmeintg4-connection span{
    width:31px;
    height:2px;
    border-radius:999px;
    background:var(--green-400);
}

.mmeintg4-connection i{
    width:17px;
    height:17px;
    border:5px solid var(--green-500);
    border-radius:50%;
    background:var(--surface);
    box-shadow:0 0 0 7px rgba(18,183,106,.12);
}

.mmeintg4-visual-tags{
    position:absolute;
    right:18px;
    bottom:15px;
    left:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;
    gap:7px;
}

.mmeintg4-visual-tags span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border:1px solid var(--green-100);
    border-radius:999px;
    background:var(--surface);
    color:var(--green-700);
    font-size:10px;
    font-weight:800;
    box-shadow:var(--shadow-sm);
}

.mmeintg4-visual-tags i{
    width:6px;
    height:6px;
    flex:0 0 6px;
    border-radius:50%;
    background:var(--green-500);
}


/* =========================================================
   CENTER HEADING
========================================================= */

.mmeintg4-heading{
    padding:29px 0 26px;
}

.mmeintg4-heading > span{
    display:block;
    margin-bottom:9px;
    color:var(--green-700);
    font-size:11px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeintg4-heading h1{
    margin:0;
    color:var(--ink-900);
    font-size:37px;
    font-weight:800;
    line-height:1.08;
    letter-spacing:-.04em;
    text-wrap:balance;
}

.mmeintg4-heading h1 em{
    color:var(--green-600);
    font-style:normal;
}

.mmeintg4-heading p{
    margin:14px 0 0;
    color:var(--ink-500);
    font-size:15px;
    line-height:1.65;
}


/* =========================================================
   CONTENT SECTIONS
========================================================= */

.mmeintg4-content-section{
    padding:27px 0;
    border-top:1px solid var(--border);
}

.mmeintg4-content-section h2{
    margin:0 0 13px;
    color:var(--ink-900);
    font-size:22px;
    font-weight:800;
    line-height:1.25;
    letter-spacing:-.02em;
}

.mmeintg4-content-section > p{
    margin:0 0 11px;
    color:var(--ink-600);
    font-size:14px;
    line-height:1.7;
}

.mmeintg4-content-section > p:last-child{
    margin-bottom:0;
}


/* =========================================================
   WHAT YOU CAN DO
========================================================= */

.mmeintg4-check-list{
    display:grid;
    gap:9px;
    margin:0;
    padding:0;
    list-style:none;
}

.mmeintg4-check-list li{
    position:relative;
    padding-left:24px;
    color:var(--ink-600);
    font-size:14px;
    line-height:1.55;
}

.mmeintg4-check-list li::before{
    content:"✓";
    position:absolute;
    top:0;
    left:0;
    color:var(--green-600);
    font-weight:900;
}


/* =========================================================
   FEATURES
========================================================= */

.mmeintg4-feature-list{
    display:grid;
    gap:0;
}

.mmeintg4-feature-list article{
    padding:17px 0;
    border-bottom:1px solid var(--border);
}

.mmeintg4-feature-list article:first-child{
    padding-top:0;
}

.mmeintg4-feature-list article:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.mmeintg4-feature-list h3{
    margin:0 0 6px;
    color:var(--ink-900);
    font-size:16px;
    font-weight:800;
    line-height:1.3;
}

.mmeintg4-feature-list p{
    margin:0;
    color:var(--ink-500);
    font-size:14px;
    line-height:1.6;
}


/* =========================================================
   RIGHT INTEGRATION DETAILS
========================================================= */

.mmeintg4-info-card,
.mmeintg4-use-card{
    width:100%;
    padding:20px;
    border:1px solid var(--border);
    border-radius:19px;
    background:var(--surface);
    box-shadow:var(--shadow-md);
}

.mmeintg4-info-title{
    display:block;
    margin-bottom:11px;
    color:var(--green-700);
    font-size:10px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeintg4-info-row{
    display:grid;
    gap:4px;
    padding:11px 0;
    border-bottom:1px solid var(--border);
}

.mmeintg4-info-row:last-child{
    padding-bottom:0;
    border-bottom:0;
}

.mmeintg4-info-row span{
    color:var(--ink-400);
    font-size:11px;
    font-weight:600;
    line-height:1.35;
}

.mmeintg4-info-row strong{
    color:var(--ink-800);
    font-size:13px;
    font-weight:700;
    line-height:1.4;
}


/* =========================================================
   RIGHT USE CASES
========================================================= */

.mmeintg4-use-card{
    border-color:var(--green-100);
    background:
        linear-gradient(
            145deg,
            var(--green-50),
            var(--surface)
        );
}

.mmeintg4-use-card ul{
    display:grid;
    gap:11px;
    margin:0;
    padding:0;
    list-style:none;
}

.mmeintg4-use-card li{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--ink-700);
    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

.mmeintg4-use-card li i{
    width:7px;
    height:7px;
    flex:0 0 7px;
    border-radius:50%;
    background:var(--green-500);
}


/* =========================================================
   CENTER FULL-WIDTH GET STARTED CTA
========================================================= */

.mmeintg4-cta{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:26px;
    width:100%;
    margin-top:32px;
    padding:28px;
    overflow:hidden;
    border:1px solid var(--green-200);
    border-radius:20px;
    background:
        linear-gradient(
            135deg,
            var(--green-50) 0%,
            var(--surface) 100%
        );
    box-shadow:var(--shadow-md);
}

.mmeintg4-cta::after{
    content:"";
    position:absolute;
    top:-90px;
    right:-70px;
    width:220px;
    height:220px;
    border-radius:50%;
    background:rgba(18,183,106,.10);
    pointer-events:none;
}

.mmeintg4-cta-copy,
.mmeintg4-cta-btn{
    position:relative;
    z-index:2;
}

.mmeintg4-cta-copy{
    max-width:420px;
}

.mmeintg4-cta-copy > span{
    display:block;
    margin-bottom:6px;
    color:var(--green-700);
    font-size:10px;
    font-weight:900;
    line-height:1.3;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.mmeintg4-cta h2{
    margin:0 0 8px;
    color:var(--ink-900);
    font-size:24px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:-.025em;
}

.mmeintg4-cta p{
    margin:0;
    color:var(--ink-600);
    font-size:13px;
    line-height:1.55;
}

.mmeintg4-cta-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    flex:0 0 auto;
    min-width:165px;
    min-height:46px;
    padding:12px 16px;
    border:1px solid var(--green-600);
    border-radius:11px;
    background:var(--green-600);
    color:#fff !important;
    font-size:12px;
    font-weight:800;
    line-height:1;
    text-decoration:none;
    box-shadow:var(--shadow-green);
    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.mmeintg4-cta-btn span,
.mmeintg4-cta-btn svg{
    color:#fff !important;
}

.mmeintg4-cta-btn svg{
    width:17px;
    height:17px;
    flex:0 0 17px;
}

.mmeintg4-cta-btn:hover{
    border-color:var(--green-700);
    background:var(--green-700);
    color:#fff !important;
    transform:translateY(-1px);
}


/* =========================================================
   MEDIUM DESKTOP
========================================================= */

@media (max-width:1180px){
    .mmeintg4-layout{
        grid-template-columns:225px minmax(0,1fr) 225px;
        gap:20px;
    }

    .mmeintg4-left,
    .mmeintg4-right{
        width:225px;
    }

    .mmeintg4-heading h1{
        font-size:34px;
    }

    .mmeintg4-platform{
        padding:16px;
    }

    .mmeintg4-platform strong{
        font-size:16px;
    }

    .mmeintg4-visual{
        grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);
    }

    .mmeintg4-connection span{
        width:23px;
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1020px){
    .mmeintg4-layout{
        grid-template-columns:220px minmax(0,1fr);
        grid-template-areas:
            "left content"
            "right content";
        gap:24px;
        align-items:start;
    }

    .mmeintg4-left,
    .mmeintg4-right{
        width:220px;
        align-self:start;
    }

    .mmeintg4-left-sticky,
    .mmeintg4-right-sticky{
        position:static;
        width:100%;
        height:auto;
    }

    .mmeintg4-right{
        margin-top:0;
    }

    .mmeintg4-heading h1{
        font-size:33px;
    }
}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width:820px){
    html:has(main.mmeintg4-page),
    body:has(main.mmeintg4-page){
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }

    .mmeintg4-page{
        padding-top:86px;
    }

    .mmeintg4-layout{
        grid-template-columns:1fr;
        grid-template-areas:
            "left"
            "content"
            "right";
        gap:24px;
    }

    .mmeintg4-left,
    .mmeintg4-right{
        width:100%;
    }

    .mmeintg4-left-sticky,
    .mmeintg4-right-sticky{
        position:static;
        top:auto;
    }

    .mmeintg4-left{
        max-width:440px;
    }

    .mmeintg4-right-sticky{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:640px){
    .mmeintg4-page{
        padding-top:78px;
    }

    .mmeintg4-breadcrumbs{
        padding-top:16px;
    }

    .mmeintg4-breadcrumbs ol{
        width:100%;
        min-height:0;
        padding:10px 12px;
        overflow-x:auto;
        flex-wrap:nowrap;
        white-space:nowrap;
        scrollbar-width:none;
    }

    .mmeintg4-breadcrumbs ol::-webkit-scrollbar{
        display:none;
    }

    .mmeintg4-section{
        padding:22px 0 56px;
    }

    .mmeintg4-layout{
        gap:22px;
    }

    .mmeintg4-left{
        max-width:none;
    }

    .mmeintg4-right-sticky{
        grid-template-columns:1fr;
    }

    .mmeintg4-visual{
        grid-template-columns:1fr;
        min-height:auto;
        padding:22px;
    }

    .mmeintg4-connection{
        transform:rotate(90deg);
        margin:2px 0;
    }

    .mmeintg4-visual-tags{
        position:static;
        margin-top:12px;
    }

    .mmeintg4-heading{
        padding:24px 0;
    }

    .mmeintg4-heading h1{
        font-size:30px;
    }

    .mmeintg4-heading p{
        font-size:14px;
    }

    .mmeintg4-content-section{
        padding:24px 0;
    }

    .mmeintg4-cta{
        display:block;
        padding:23px 20px;
    }

    .mmeintg4-cta-btn{
        width:100%;
        margin-top:18px;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:420px){
    .mmeintg4-app-card{
        padding:23px 17px 20px;
    }

    .mmeintg4-heading h1{
        font-size:28px;
    }

    .mmeintg4-platform{
        min-height:125px;
    }

    .mmeintg4-info-card,
    .mmeintg4-use-card{
        padding:17px;
    }

    .mmeintg4-cta{
        padding:21px 18px;
    }

    .mmeintg4-cta h2{
        font-size:22px;
    }
}

.wmktrust-disclaimer{max-width:760px;margin:16px auto 0;text-align:center;color:var(--ink-400);font-size:11px;line-height:1.55;}