.integrations-page {
  --integrations-line: #dce5d9;
  --integrations-muted: #627567;
}

.integrations-page h1,
.integrations-page h2,
.integrations-page h3,
.integrations-page p {
  text-wrap: pretty;
}

.integrations-page .skip-link {
  position: fixed;
  z-index: 100;
  top: -80px;
  left: 16px;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--lime);
  color: var(--ink);
  font-weight: 800;
}
.integrations-page .skip-link:focus { top: 12px; }

.integrations-primary {
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 12px 32px rgba(185, 239, 115, .13);
}
.integrations-primary:hover { background: #cffb96; }

.integrations-hero {
  position: relative;
  overflow: hidden;
  padding: 106px 0 110px;
  background: radial-gradient(circle at 78% 18%, rgba(130, 213, 124, .15), transparent 33%),
    radial-gradient(circle at 3% 85%, rgba(185, 239, 115, .07), transparent 30%), var(--bg);
}
.integrations-hero::before {
  position: absolute;
  inset: 0;
  content: '';
  opacity: .22;
  background-image: linear-gradient(to right, rgba(174, 222, 181, .1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(174, 222, 181, .1) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, black, transparent 92%);
  pointer-events: none;
}
.integrations-hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  align-items: center;
  gap: 76px;
}
.integrations-hero h1,
.integrations-section h2,
.integrations-closing h2 {
  font-family: Manrope, system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -.057em;
  line-height: 1.075;
}
.integrations-hero h1 {
  max-width: 740px;
  margin: 19px 0 24px;
  font-size: clamp(3.2rem, 5.65vw, 6rem);
}
.integrations-lead {
  max-width: 630px;
  margin: 0;
  color: #bfcec1;
  font-size: clamp(1rem, 1.33vw, 1.18rem);
  line-height: 1.75;
}
.integrations-hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 25px;
  margin-top: 34px;
}
.integrations-text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-block: 9px;
  border-bottom: 1px solid currentColor;
  color: var(--lime);
  font-size: .88rem;
  font-weight: 800;
  transition: gap .2s;
}
.integrations-text-link:hover { gap: 14px; }
.integrations-hero-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  max-width: 550px;
  margin: 34px 0 0;
  color: #95ac9d;
  font-size: .78rem;
  line-height: 1.6;
}
.integrations-note-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid #7b9b7e;
  border-radius: 50%;
  color: #c6e4bb;
  font-size: .66rem;
  font-weight: 800;
}

.integrations-flow {
  width: 100%;
  max-width: 555px;
  margin-left: auto;
  padding: 23px;
  border: 1px solid rgba(209, 238, 207, .3);
  border-radius: 23px;
  background: #f4f7ee;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .28), 0 0 0 8px rgba(222, 255, 211, .035);
  color: var(--ink);
}
.integrations-flow-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #dfe8db;
  color: #5c765f;
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.integrations-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8abf5d;
}
.integrations-flow-example {
  margin-left: auto;
  color: #879886;
  font-size: .59rem;
  white-space: nowrap;
}
.integrations-flow-sources {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-top: 22px;
}
.integrations-source {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 11px 9px;
  border: 1px solid #dce7d9;
  border-radius: 10px;
  background: #fff;
}
.integrations-source-symbol {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: .9rem;
}
.integrations-symbol-drive { background: #e5f4dd; color: #5e9b43; }
.integrations-symbol-chat { background: #dcf1e0; color: #438b62; }
.integrations-symbol-data { background: #e8ebe4; color: #66816b; }
.integrations-source strong,
.integrations-source small,
.integrations-agent-card strong,
.integrations-agent-card small,
.integrations-result-card strong,
.integrations-result-card small { display: block; }
.integrations-source strong { font-size: .71rem; }
.integrations-source small { margin-top: 2px; color: #879987; font-size: .56rem; white-space: nowrap; }
.integrations-flow-line { display: grid; place-items: center; height: 43px; }
.integrations-flow-line span { height: 31px; width: 1px; background: #9bc896; }
.integrations-agent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  border: 1px solid #a9d39c;
  border-radius: 13px;
  background: #e8f4db;
}
.integrations-agent-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #0b1713;
}
.integrations-agent-icon img { width: 30px; height: 30px; }
.integrations-agent-overline { display: block; margin-bottom: 2px; color: #61915a; font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.integrations-agent-card strong { font: 800 .9rem Manrope, system-ui, sans-serif; }
.integrations-agent-card small { margin-top: 3px; color: #648268; font-size: .62rem; }
.integrations-agent-pulse { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: #80bb60; box-shadow: 0 0 0 5px rgba(128, 187, 96, .13); }
.integrations-flow-line-bottom { height: 38px; }
.integrations-flow-line-bottom span { height: 25px; }
.integrations-result-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid #dce7d9;
  border-radius: 11px;
  background: #fff;
}
.integrations-result-icon { display: grid; place-items: center; flex: none; width: 33px; height: 33px; border-radius: 8px; background: #e6f2dc; color: #4c824b; font-weight: 800; }
.integrations-result-card strong { font-size: .75rem; }
.integrations-result-card small { margin-top: 3px; color: #829384; font-size: .6rem; }
.integrations-result-tag { margin-left: auto; padding: 5px 7px; border-radius: 99px; background: #f5ecd4; color: #a07232; font-size: .57rem; font-weight: 800; white-space: nowrap; }

.integrations-section { padding: 112px 0; }
.integrations-section h2 { margin: 15px 0 0; font-size: clamp(2.25rem, 4.3vw, 4.25rem); }
.integrations-status-section { background: var(--cream); color: var(--ink); }
.integrations-section-heading,
.integrations-drive-head {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: end;
  gap: 60px;
}
.integrations-section-heading h2 { max-width: 760px; }
.integrations-section-heading > p,
.integrations-drive-head > p {
  margin: 0 0 7px;
  color: var(--integrations-muted);
  font-size: .98rem;
  line-height: 1.7;
}
.integrations-status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-top: 45px; }
.integrations-status-card {
  display: flex;
  flex-direction: column;
  min-height: 333px;
  padding: 25px 23px 21px;
  border: 1px solid var(--integrations-line);
  border-radius: 17px;
  background: #fff;
}
.integrations-status-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.integrations-card-index { color: #8c9d8b; font-size: .63rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.integrations-badge { flex: none; padding: 5px 8px; border-radius: 99px; font-size: .61rem; font-weight: 800; }
.integrations-badge-design { background: #edf3e8; color: #588258; }
.integrations-badge-pilot { background: #e3f2d1; color: #467b3c; }
.integrations-status-card h3 { margin: 31px 0 10px; font: 800 1.18rem/1.25 Manrope, system-ui, sans-serif; letter-spacing: -.035em; }
.integrations-status-card > p { margin: 0; color: #607363; font-size: .83rem; line-height: 1.66; }
.integrations-status-detail { display: grid; gap: 3px; margin-top: auto; padding-top: 17px; border-top: 1px solid #e7ede4; }
.integrations-status-detail span { color: #8e9e8e; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.integrations-status-detail strong { color: #345d3f; font-size: .73rem; line-height: 1.45; }

.integrations-whatsapp-section { background: #e9f0e7; color: var(--ink); }
.integrations-whatsapp-heading { display: grid; grid-template-columns: 1fr .7fr; align-items: end; gap: 70px; }
.integrations-whatsapp-heading h2 { max-width: 690px; }
.integrations-whatsapp-heading > p { max-width: 460px; margin: 0 0 6px; color: #5e7362; font-size: .96rem; line-height: 1.7; }
.integrations-number-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; margin-top: 43px; }
.integrations-number-card { display: flex; flex-direction: column; min-width: 0; padding: 30px; border: 1px solid #d7e3d4; border-radius: 17px; background: #fff; box-shadow: 0 18px 40px rgba(31,71,39,.045); }
.integrations-number-label { color: #547c54; font-size: .68rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
.integrations-number-card h3 { margin: 18px 0 11px; font: 800 clamp(1.35rem,2.1vw,1.8rem)/1.2 Manrope,system-ui,sans-serif; letter-spacing: -.035em; }
.integrations-number-card p { margin: 0; color: #617566; font-size: .88rem; line-height: 1.7; }
.integrations-number-card > strong { margin-top: auto; padding-top: 23px; color: #315c3a; font-size: .75rem; line-height: 1.5; }
.integrations-whatsapp-setup { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; margin-top: 16px; overflow: hidden; border: 1px solid #cfdfcc; border-radius: 15px; background: #cfdfcc; }
.integrations-whatsapp-setup > div { display: flex; gap: 13px; padding: 22px; background: #f8fbf5; }
.integrations-whatsapp-setup span { flex: none; display: grid; place-items: center; width: 29px; height: 29px; border-radius: 9px; background: #e0f0d4; color: #467c43; font: 800 .65rem Manrope,system-ui,sans-serif; }
.integrations-whatsapp-setup p { margin: 1px 0 0; color: #637966; font-size: .78rem; line-height: 1.55; }
.integrations-whatsapp-setup strong { color: #284d31; }
.integrations-whatsapp-qr { max-width: 900px; margin: 16px 0 0; color: #617466; font-size: .75rem; line-height: 1.65; }
.integrations-whatsapp-guardrails { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 35px; }
.integrations-whatsapp-guardrails > div { display: flex; align-items: flex-start; gap: 10px; padding: 19px; border: 1px solid #d2e1ce; border-radius: 13px; background: rgba(255,255,255,.57); }
.integrations-guardrails-icon { display: grid; place-items: center; flex: none; width: 19px; height: 19px; margin-top: 1px; border-radius: 50%; background: #cee9c1; color: #3f7841; font-size: .68rem; font-weight: 900; }
.integrations-whatsapp-guardrails p { margin: 0; color: #617466; font-size: .77rem; line-height: 1.55; }
.integrations-whatsapp-guardrails strong { color: #284d31; }
.integrations-whatsapp-source { display: inline-flex; gap: 9px; align-items: center; margin-top: 25px; padding-bottom: 5px; border-bottom: 1px solid #4d7f4b; color: #39703c; font-size: .78rem; font-weight: 800; }
.integrations-whatsapp-source:hover { color: #224f2b; }

.integrations-permissions-section { background: #153827; color: var(--cream); }
.integrations-permissions-grid { display: grid; grid-template-columns: .87fr 1.13fr; gap: 85px; }
.integrations-permissions-intro { align-self: start; position: sticky; top: 110px; }
.integrations-permissions-intro h2 { max-width: 550px; }
.integrations-permissions-intro > p:not(.eyebrow) { max-width: 510px; margin: 23px 0; color: #bfcebf; font-size: .95rem; line-height: 1.7; }
.integrations-steps { display: grid; gap: 12px; }
.integrations-step { display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 25px; border: 1px solid rgba(223, 239, 220, .18); border-radius: 14px; background: rgba(255, 255, 255, .035); }
.integrations-step-number { display: grid; place-items: center; width: 33px; height: 33px; border: 1px solid rgba(185, 239, 115, .65); border-radius: 50%; color: var(--lime); font: 800 .76rem Manrope, system-ui, sans-serif; }
.integrations-step h3 { margin: 0 0 7px; font: 800 1.07rem Manrope, system-ui, sans-serif; letter-spacing: -.025em; }
.integrations-step p { margin: 0; color: #afc3b0; font-size: .85rem; line-height: 1.65; }

.integrations-drive-section { background: var(--paper); color: var(--ink); }
.integrations-drive-head h2 { max-width: 700px; }
.integrations-drive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 43px; }
.integrations-drive-option { display: flex; flex-direction: column; min-height: 267px; padding: 28px; border: 1px solid var(--integrations-line); border-radius: 17px; background: #fff; }
.integrations-option-letter { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #e7f3db; color: #4c7c43; font: 800 1rem Manrope, system-ui, sans-serif; }
.integrations-drive-option h3 { margin: 18px 0 8px; font: 800 1.2rem Manrope, system-ui, sans-serif; letter-spacing: -.03em; }
.integrations-drive-option p { margin: 0; color: #627466; font-size: .88rem; line-height: 1.68; }
.integrations-drive-option p strong { color: var(--ink); }
.integrations-option-foot { margin-top: auto; padding-top: 20px; color: #5b8a58; font-size: .69rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.integrations-drive-caveat { max-width: 850px; margin: 20px 0 0; color: #78897b; font-size: .76rem; line-height: 1.6; }

.integrations-controls-section { background: #0d2017; color: var(--cream); }
.integrations-controls-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; }
.integrations-controls-grid h2 { max-width: 510px; }
.integrations-controls-list { display: grid; }
.integrations-controls-list > div { display: flex; align-items: start; gap: 20px; padding: 17px 0; border-bottom: 1px solid rgba(223, 239, 220, .15); }
.integrations-controls-list > div:first-child { padding-top: 4px; }
.integrations-controls-list span { color: var(--lime); font-size: 1.1rem; }
.integrations-controls-list p { margin: 0; color: #aec4b0; font-size: .93rem; line-height: 1.65; }
.integrations-controls-list strong { color: var(--cream); }

.integrations-faq-section { background: var(--cream); color: var(--ink); }
.integrations-faq-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.integrations-faq-grid > div:first-child > p:last-child { max-width: 390px; margin: 20px 0 0; color: var(--integrations-muted); font-size: .92rem; line-height: 1.7; }
.integrations-faq-list { display: grid; align-content: start; gap: 10px; }
.integrations-faq-list details { border: 1px solid #d9e3d7; border-radius: 12px; background: #fbfcf6; padding: 0 19px; }
.integrations-faq-list summary { position: relative; padding: 18px 28px 18px 0; list-style: none; cursor: pointer; font-size: .92rem; font-weight: 800; line-height: 1.45; }
.integrations-faq-list summary::-webkit-details-marker { display: none; }
.integrations-faq-list summary::after { position: absolute; right: 0; top: 12px; content: '+'; color: #527a55; font-size: 1.35rem; font-weight: 400; }
.integrations-faq-list details[open] summary::after { content: '−'; }
.integrations-faq-list details p { margin: 0; padding: 15px 0 19px; border-top: 1px solid #e1e9dd; color: #627567; font-size: .85rem; line-height: 1.68; }

.integrations-closing { position: relative; overflow: hidden; padding: 85px 0; background: radial-gradient(circle at 90% 105%, rgba(185, 239, 115, .19), transparent 39%), #11271c; }
.integrations-closing::before { position: absolute; right: -100px; bottom: -350px; width: 600px; height: 600px; content: ''; border: 1px solid rgba(185, 239, 115, .14); border-radius: 50%; box-shadow: 0 0 0 65px rgba(185, 239, 115, .025), 0 0 0 135px rgba(185, 239, 115, .02); }
.integrations-closing-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.integrations-closing h2 { max-width: 770px; margin: 13px 0 13px; font-size: clamp(2.25rem, 4vw, 4rem); }
.integrations-closing-inner > div > p:last-child { max-width: 620px; margin: 0; color: #b1c5b3; font-size: .91rem; line-height: 1.65; }
.integrations-closing-cta { flex: none; background: var(--lime); color: var(--ink); }
.integrations-closing-cta:hover { background: #cffb96; }

@media (max-width: 1100px) {
  .integrations-hero-grid { gap: 40px; }
  .integrations-hero h1 { font-size: clamp(3rem, 5.4vw, 5.2rem); }
  .integrations-status-grid { grid-template-columns: repeat(2, 1fr); }
  .integrations-status-card { min-height: 280px; }
}
@media (max-width: 850px) {
  .integrations-hero { padding: 77px 0 82px; }
  .integrations-hero-grid,
  .integrations-section-heading,
  .integrations-whatsapp-heading,
  .integrations-drive-head,
  .integrations-permissions-grid,
  .integrations-controls-grid,
  .integrations-faq-grid { grid-template-columns: 1fr; gap: 38px; }
  .integrations-hero h1 { max-width: 760px; font-size: clamp(3.3rem, 8vw, 5.8rem); }
  .integrations-flow { max-width: 620px; margin: 0; }
  .integrations-whatsapp-setup { grid-template-columns: 1fr; }
  .integrations-whatsapp-guardrails { grid-template-columns: 1fr; gap: 9px; }
  .integrations-permissions-intro { position: static; }
  .integrations-closing-inner { align-items: flex-start; flex-direction: column; gap: 25px; }
  .integrations-section { padding: 85px 0; }
}
@media (max-width: 600px) {
  .integrations-hero { padding: 59px 0 69px; }
  .integrations-hero h1 { font-size: clamp(2.65rem, 11vw, 4rem); }
  .integrations-hero-actions { align-items: flex-start; flex-direction: column; gap: 12px; }
  .integrations-primary { width: 100%; }
  .integrations-flow { padding: 14px; border-radius: 17px; }
  .integrations-flow-sources { gap: 5px; }
  .integrations-source { display: block; padding: 8px 6px; }
  .integrations-source-symbol { width: 25px; height: 25px; margin-bottom: 6px; }
  .integrations-source strong { font-size: .62rem; }
  .integrations-source small { overflow: hidden; text-overflow: ellipsis; font-size: .5rem; }
  .integrations-flow-example { font-size: .5rem; }
  .integrations-agent-card { padding: 10px; }
  .integrations-agent-card strong { font-size: .78rem; }
  .integrations-agent-card small { font-size: .54rem; }
  .integrations-result-tag { font-size: .51rem; }
  .integrations-section { padding: 70px 0; }
  .integrations-section h2 { font-size: clamp(2.13rem, 9.5vw, 3.3rem); }
  .integrations-status-grid,
  .integrations-number-grid,
  .integrations-drive-grid { grid-template-columns: 1fr; margin-top: 29px; }
  .integrations-number-card { padding: 24px; }
  .integrations-whatsapp-setup > div { padding: 17px; }
  .integrations-status-card { min-height: 285px; }
  .integrations-drive-option { min-height: 280px; padding: 24px; }
  .integrations-step { grid-template-columns: 33px 1fr; gap: 12px; padding: 20px 17px; }
  .integrations-closing { padding: 73px 0; }
  .integrations-closing h2 { font-size: clamp(2.2rem, 9.5vw, 3.6rem); }
  .integrations-closing-cta { width: 100%; }
}