/* ============================================================
   ELVA — Integrations page
   Loads on the shared .elva-ins-sub wrapper foundation (from
   elva-pages-insurance-sub.css: btn/ico/eyebrow/elva-live/faq/close/
   cta-box/pains/prose/sec/sec-head/wrap-wide are reused as-is). This
   file only adds what's unique to the Integrations page.
   IMPORTANT: every selector here is a name not used anywhere else in
   the Insurance-family CSS, specifically to avoid the class-collision
   bugs hit earlier (hero-inner, close). Do not reuse a bare "hero-inner"
   or "close" class on this page.
   ============================================================ */

/* ---- hero: 2-col with the floating bubble diagram ---- */
.elva-ins-sub .int-hero-grid{ position:relative; display:grid; grid-template-columns:1fr .9fr; gap:56px; align-items:center; }
.elva-ins-sub .hero h1{ font-size:clamp(38px,4.4vw,58px); margin:20px 0 0; max-width:16ch; }
.elva-ins-sub .hero h1 span{ display:block; }
.elva-ins-sub .hero-lead{ margin-top:22px; font-size:17px; line-height:1.6; color:var(--ink-2); max-width:52ch; }
.elva-ins-sub .hero-highlight{ margin-top:22px; max-width:56ch; font-family:var(--font-display); font-size:clamp(19px,2vw,23px); font-weight:600; letter-spacing:-.015em; line-height:1.4; color:var(--ink-1); padding-left:20px; border-left:2.5px solid var(--ai-3); }
.elva-ins-sub .hero-highlight strong{ color:var(--ink-0); }
.elva-ins-sub .trustline{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); margin-top:18px; }
.elva-ins-sub .trustline b{ color:var(--ink-2); font-weight:500; }
.elva-ins-sub .trust-item{ display:inline-flex; align-items:center; gap:7px; }
.elva-ins-sub .trust-item svg{ width:14px; height:14px; stroke:#1E7F72; fill:none; stroke-width:2; flex:none; }
.elva-ins-sub .trust-sep{ color:var(--cream-shadow,#D6D6DC); }
.elva-ins-sub .eyebrow.pill{ background:#fff; border:1px solid var(--cream-2); border-radius:var(--r-pill); padding:8px 16px; box-shadow:var(--sh-1); }

/* floating bubble diagram */
.elva-ins-sub .hv-free{ position:relative; }
.elva-ins-sub .bub-field{ position:relative; height:460px; }
.elva-ins-sub .bub{ position:absolute; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  background:linear-gradient(160deg,rgba(255,255,255,.88),rgba(255,255,255,.5)); backdrop-filter:blur(1px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.75), 0 0 0 1.5px var(--bc,rgba(180,180,195,.4)), 0 14px 30px -16px rgba(20,20,30,.16);
  animation:int-bub-float 7s ease-in-out infinite; }
.elva-ins-sub .bub::before{ content:''; position:absolute; inset:-16%; border-radius:50%; background:radial-gradient(circle,var(--bc,transparent) 0%,transparent 70%); opacity:.5; filter:blur(13px); z-index:-1; }
.elva-ins-sub .bub::after{ content:''; position:absolute; top:8%; left:18%; width:34%; height:26%; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.9),transparent 75%); pointer-events:none; }
.elva-ins-sub .bub-elva{ --bc:rgba(155,92,255,.5); width:172px; height:172px; top:99px; left:114px; z-index:4; animation-duration:8s; }
.elva-ins-sub .bub-elva img{ width:44px; height:44px; }
.elva-ins-sub .bub-elva span{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink-0); }
.elva-ins-sub .bub-live{ --bc:rgba(63,184,168,.45); width:118px; height:118px; z-index:3; }
.elva-ins-sub .bub-live span{ font-family:var(--font-body); font-weight:650; font-size:14px; letter-spacing:-.01em; color:var(--ink-0); }
.elva-ins-sub .bub-live .elva-live{ position:absolute; top:14px; right:16px; }
.elva-ins-sub .bub-live:nth-of-type(2){ --bc:rgba(63,184,168,.45); top:126px; left:278px; animation-duration:9s; animation-delay:.2s; }
.elva-ins-sub .bub-live:nth-of-type(3){ --bc:rgba(91,141,239,.45); top:259px; left:110px; animation-duration:7.5s; animation-delay:1s; }
.elva-ins-sub .bub-live:nth-of-type(4){ --bc:rgba(255,143,181,.45); top:66px; left:18px; animation-duration:8.4s; animation-delay:.5s; }
.elva-ins-sub .bub-live:nth-of-type(5){ --bc:rgba(224,149,77,.45); top:322px; left:20px; animation-duration:10s; animation-delay:.1s; }
.elva-ins-sub .bub-live:nth-of-type(6){ --bc:rgba(214,92,138,.45); top:10px; left:220px; animation-duration:7.8s; animation-delay:1.3s; }
.elva-ins-sub .bub-live:nth-of-type(7){ --bc:rgba(79,168,216,.45); top:340px; left:180px; animation-duration:9.2s; animation-delay:.7s; }
.elva-ins-sub .bub-live:nth-of-type(8){ --bc:rgba(122,139,92,.45); top:180px; left:340px; animation-duration:8s; animation-delay:1.6s; }
@keyframes int-bub-float{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(6px,-10px); } }
@media (prefers-reduced-motion:reduce){ .elva-ins-sub .bub{ animation:none; } }

/* ---- what real-time sync means: 4-box grid ---- */
.elva-ins-sub .syngrid{ margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.elva-ins-sub .synbox{ position:relative; overflow:hidden; background:#fff; border:1px solid var(--cream-2); border-radius:var(--r-xl); padding:28px 28px 26px; box-shadow:var(--sh-2); display:flex; flex-direction:column; gap:12px; }
.elva-ins-sub .synbox::before{ content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--sb-c); }
.elva-ins-sub .synbox:nth-child(1){ --sb-c:#3D6FD6; } .elva-ins-sub .synbox:nth-child(2){ --sb-c:#9B5CFF; }
.elva-ins-sub .synbox:nth-child(3){ --sb-c:#C0892E; } .elva-ins-sub .synbox:nth-child(4){ --sb-c:#1E9C89; }
.elva-ins-sub .synbox .ic{ width:38px; height:38px; border-radius:11px; background:var(--sb-c); color:#fff; display:grid; place-items:center; box-shadow:0 10px 22px -12px var(--sb-c); }
.elva-ins-sub .synbox .ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.elva-ins-sub .synbox strong{ font-family:var(--font-display); font-size:18px; color:var(--ink-0); font-weight:600; letter-spacing:-.015em; }
.elva-ins-sub .synbox p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }

/* ---- Elva Chat mockup ---- */
.elva-ins-sub .chatsec{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; }
.elva-ins-sub .chatsec-copy h2{ margin-top:20px; font-size:clamp(28px,3.2vw,42px); max-width:14ch; }
.elva-ins-sub .cm-learn{ display:inline-flex; align-items:center; gap:8px; margin-top:26px; font-weight:600; font-size:15px; color:var(--ink-0); }
.elva-ins-sub .cm-learn .ico{ width:16px; height:16px; }
.elva-ins-sub .cm-learn:hover{ color:var(--ai-3); }
.elva-ins-sub .chatmock{ background:#F7F7F9; border:1px solid var(--cream-2); border-radius:var(--r-2xl,24px); box-shadow:var(--sh-4); overflow:hidden; }
.elva-ins-sub .cm-bar{ display:flex; align-items:center; gap:8px; padding:14px 18px; border-bottom:1px solid var(--cream-2); background:#fff; }
.elva-ins-sub .cm-bar .dot{ width:10px; height:10px; border-radius:50%; flex:none; }
.elva-ins-sub .cm-bar .dot.r{ background:#FF6058; } .elva-ins-sub .cm-bar .dot.y{ background:#FFBD2E; } .elva-ins-sub .cm-bar .dot.g{ background:#28C840; }
.elva-ins-sub .cm-bar .cm-title{ margin-left:10px; font-size:13px; font-weight:600; color:var(--ink-1); }
.elva-ins-sub .cm-body{ padding:40px 36px 30px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.elva-ins-sub .cm-mark{ position:relative; width:56px; height:56px; border-radius:16px; background:#fff; border:1px solid var(--cream-2); display:grid; place-items:center; box-shadow:0 16px 32px -14px rgba(91,61,220,.35); margin-bottom:6px; }
.elva-ins-sub .cm-mark img{ width:30px; height:30px; }
.elva-ins-sub .cm-mark::before{ content:''; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle,rgba(91,141,239,.4),transparent 70%); filter:blur(4px); z-index:-1; animation:int-cm-glow 3.2s ease-in-out infinite; }
@keyframes int-cm-glow{ 0%,100%{ opacity:.5; transform:scale(1); } 50%{ opacity:.9; transform:scale(1.18); } }
.elva-ins-sub .cm-body h4{ font-size:22px; margin:0; }
.elva-ins-sub .cm-body h4 span{ background:var(--grad-spectrum); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.elva-ins-sub .cm-sub{ font-size:13.5px; color:var(--ink-3); }
.elva-ins-sub .cm-suggest{ margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.elva-ins-sub .cm-suggest span{ background:#fff; border:1px solid var(--cream-2); border-radius:var(--r-md); padding:12px 14px; font-size:12.5px; line-height:1.4; color:var(--ink-1); text-align:left; }
.elva-ins-sub .cm-inputrow{ padding:14px 18px 20px; display:grid; gap:10px; }
.elva-ins-sub .cm-field{ background:#fff; border:1px solid var(--cream-2); border-radius:var(--r-lg); padding:13px 16px; font-size:13.5px; color:var(--ink-3); }
.elva-ins-sub .cm-tools{ display:flex; align-items:center; gap:8px; }
.elva-ins-sub .cm-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:550; color:var(--ink-2); background:#fff; border:1px solid var(--cream-2); border-radius:var(--r-pill); padding:8px 12px; }
.elva-ins-sub .cm-chip svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }
.elva-ins-sub .cm-send{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:#fff; background:var(--sage-2,#2E7D54); border-radius:var(--r-pill); padding:8px 16px; }
.elva-ins-sub .cm-send svg{ width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; }

/* ---- scenarios: 2-card risk/does ---- */
.elva-ins-sub .scenwrap{ margin-top:104px; padding:84px 0; background:linear-gradient(180deg,#F3F0FF,#EFF8F6 60%,var(--surface-mute,#EFEFF2)); }
.elva-ins-sub .scen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:44px; }
.elva-ins-sub .scen{ position:relative; overflow:hidden; padding:34px 36px; background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-2); }
.elva-ins-sub .scen::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--sc-c); }
.elva-ins-sub .scen:nth-child(1){ --sc-c:#E0654F; } .elva-ins-sub .scen:nth-child(2){ --sc-c:#3D6FD6; }
.elva-ins-sub .scen-k{ font-family:var(--font-mono); font-size:38px; color:var(--sc-c); letter-spacing:-.02em; opacity:.5; }
.elva-ins-sub .scen h3{ margin-top:8px; font-size:clamp(21px,2.3vw,26px); max-width:20ch; }
.elva-ins-sub .scen-row{ margin-top:22px; display:grid; gap:7px; }
.elva-ins-sub .scen-row+.scen-row{ margin-top:20px; }
.elva-ins-sub .scen-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.11em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill); width:fit-content; }
.elva-ins-sub .scen-tag.risk{ background:rgba(224,101,79,.16); color:#B4402A; }
.elva-ins-sub .scen-tag.does{ background:rgba(63,184,168,.18); color:#1E7F72; }
.elva-ins-sub .scen-row p{ font-size:15px; line-height:1.6; color:var(--ink-2); margin:0; }

/* ---- where Elva connects today: PMS card strip ---- */
.elva-ins-sub .connect-strip{ display:grid; grid-template-columns:1fr 1fr 1fr; grid-auto-rows:1fr; gap:16px; margin-top:44px; }
.elva-ins-sub .connect-col{ position:relative; overflow:hidden; padding:32px 30px 28px; background:#fff; border-radius:var(--r-xl); box-shadow:var(--sh-2); display:flex; flex-direction:column; }
.elva-ins-sub .connect-col::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:var(--cc-c); }
.elva-ins-sub .connect-col:nth-child(1){ --cc-c:#1E9C89; } .elva-ins-sub .connect-col:nth-child(2){ --cc-c:#3D6FD6; }
.elva-ins-sub .connect-col:nth-child(3){ --cc-c:#9B5CFF; } .elva-ins-sub .connect-col:nth-child(4){ --cc-c:#E0954D; }
.elva-ins-sub .connect-col:nth-child(5){ --cc-c:#D65C8A; } .elva-ins-sub .connect-col:nth-child(6){ --cc-c:#4FA8D8; }
.elva-ins-sub .connect-col:nth-child(7){ --cc-c:#7A8B5C; }
.elva-ins-sub .connect-more{ --cc-c:var(--ink-4) !important; background:var(--surface-mute,#EFEFF2); justify-content:center; gap:12px; }
.elva-ins-sub .connect-more::before{ display:none; }
.elva-ins-sub .connect-more h3{ font-size:19px; }
.elva-ins-sub .connect-more p{ color:var(--ink-2); }
.elva-ins-sub .connect-more-link{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:15px; color:var(--ai-4); margin-top:4px; }
.elva-ins-sub .connect-more-link:hover{ color:var(--ai-3); }
.elva-ins-sub .connect-more-link .ico{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2; }
.elva-ins-sub .connect-col h3{ margin-top:0; font-size:clamp(21px,2.3vw,26px); }
.elva-ins-sub .connect-col p{ margin-top:16px; font-size:16px; line-height:1.55; color:var(--ink-2); }
.elva-ins-sub .connect-col p+p{ margin-top:12px; }
.elva-ins-sub .connect-badge{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:9.5px; line-height:1.35; letter-spacing:.1em; text-transform:uppercase; color:var(--cc-c); margin-top:auto; padding-top:18px; border-top:1px solid var(--cream-2); }
.elva-ins-sub .connect-badge svg{ width:13px; height:13px; flex:none; stroke:currentColor; fill:none; stroke-width:2; }

/* ---- security & privacy: dark band ---- */
.elva-ins-sub .secdark{ margin-top:104px; padding:100px 0; background:var(--grad-ink, linear-gradient(160deg,#17171B,#1D1D1F)); position:relative; overflow:clip; }
.elva-ins-sub .secdark-glow{ position:absolute; top:-200px; left:50%; transform:translateX(-50%); width:900px; height:640px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 200deg at 50% 50%, var(--ai-3), var(--ai-4), var(--ai-5), var(--ai-3)); filter:blur(150px); opacity:.22; }
.elva-ins-sub .secdark .eyebrow{ color:rgba(255,255,255,.5); }
.elva-ins-sub .secdark h2{ color:#fff; font-size:clamp(28px,3.2vw,42px); position:relative; margin-top:18px; }
.elva-ins-sub .secdark .prose{ position:relative; }
.elva-ins-sub .secdark .prose p{ color:rgba(255,255,255,.62); }
.elva-ins-sub .checklist{ position:relative; margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; max-width:920px; }
.elva-ins-sub .chk{ display:flex; gap:16px; align-items:flex-start; padding:20px 0; border-top:1px solid rgba(255,255,255,.12); }
.elva-ins-sub .chk .ci{ width:32px; height:32px; border-radius:10px; background:var(--chk-c); color:#fff; display:grid; place-items:center; flex:none; box-shadow:0 8px 18px -10px var(--chk-c); }
.elva-ins-sub .chk:nth-child(1){ --chk-c:#5B8DEF; } .elva-ins-sub .chk:nth-child(2){ --chk-c:#9B5CFF; }
.elva-ins-sub .chk:nth-child(3){ --chk-c:#E8A93C; } .elva-ins-sub .chk:nth-child(4){ --chk-c:#3FB8A8; } .elva-ins-sub .chk:nth-child(5){ --chk-c:#E0654F; }
.elva-ins-sub .chk .ci svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.elva-ins-sub .chk p{ font-size:14.5px; line-height:1.58; color:rgba(255,255,255,.64); margin:0; padding-top:4px; }
.elva-ins-sub .chk p strong{ color:#fff; font-weight:600; }

/* ---- built alongside band ---- */
.elva-ins-sub .int-define{ margin-top:104px; padding:44px 0; border-top:1px solid var(--cream-2); border-bottom:1px solid var(--cream-2);
  background:linear-gradient(100deg,rgba(155,92,255,.09),rgba(91,141,239,.07) 50%,rgba(63,184,168,.07)); }
.elva-ins-sub .int-define p{ font-family:var(--font-display); font-size:clamp(20px,2.2vw,28px); line-height:1.34; letter-spacing:-.02em; color:var(--ink-1); max-width:900px; margin:0; }
.elva-ins-sub .int-define p strong{ color:var(--ink-0); font-weight:600; }

/* ---- responsive ---- */
@media (max-width:1080px){
  .elva-ins-sub .int-hero-grid{ grid-template-columns:1fr; gap:36px; }
  .elva-ins-sub .syngrid, .elva-ins-sub .chatsec, .elva-ins-sub .scen-grid{ grid-template-columns:1fr; }
  .elva-ins-sub .connect-strip{ grid-template-columns:1fr 1fr; }
  .elva-ins-sub .checklist{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .elva-ins-sub .connect-strip{ grid-template-columns:1fr; }
  .elva-ins-sub .bub-field{ height:280px; transform:scale(.62); transform-origin:top left; }
  .elva-ins-sub .secdark{ margin-top:72px; padding:72px 0; }
  .elva-ins-sub .int-define{ margin-top:72px; padding:32px 0; }
  .elva-ins-sub .scenwrap{ padding:56px 0; }
}