/* ClosedLoop AI v3 "alive" INTEGRATION DETAIL layer, scoped under .v3-ig.
   Loaded LAST (after tokens.css, site.css, index-CFw-kQHv.css, v3.css) from the body of
   integration-detail.php, so it owns the ground/type ladder for the <main> body. The shared
   nav (header.php) + footer (footer.php) keep their own v3.css chrome; this file only styles
   the flush-left drafting body: hero co-brand lockup + framed spec datasheet, capability
   cards, the hairline data-flow mapping (the ONE calm ambient current), setup steps, related
   entities, and the dark night-band final CTA. Cool ground; orange is the sole warm accent,
   used ONLY for the header-underline sweeps + the single flow current + the dark-band CTA.
   No measured numbers here, so NO evidence marks. Sharp 2px corners, no shadows on light. */

.v3-ig{
  /* ---- light drafting grammar (cool ladder) ---- */
  --ink:#141519;        /* UI, buttons, headlines, body text on light */
  --graphite:#2A2D31;   /* strong meta, firm hairline */
  --ig-muted:#8A8D93;   /* mono labels, kickers, captions (cool) */
  --ig-frame:#868A90;   /* corner registration marks (cool graphite) */
  --paper:#FFFFFF;      /* clean white card / surface fill */
  --ground:#FCFDFD;     /* cool near-white page ground */
  --board:#F0F2F3;      /* light board behind surfaces */
  --board-2:#E9ECEE;    /* firmer board tone */
  --rule:#E6E9EB;       /* hairline on ground */
  --rule-2:#D7DBDE;     /* firmer hairline */
  --ig-sec:#565A60;     /* secondary body text (cool) */
  --orange:#FF4F00;     /* THE ENERGY: header sweeps, the one flow current, action */
  --brand:#5F67BB;      /* logo indigo, the one signature corner on light frames */
  /* ---- dark band tokens (night register) ---- */
  --band:#0E0F13; --d-fg:#F3F3F1; --d-sec:#A5A9AE; --d-muted:#767B81;
  --d-rule:rgba(255,255,255,.12); --d-rule-2:rgba(255,255,255,.20); --d-frame:rgba(255,255,255,.30);
  --grid:rgba(255,255,255,.030);
  --glow:0 0 22px rgba(255,79,0,.42); --glow-strong:0 0 30px rgba(255,79,0,.60);
  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;

  display:block; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.58; font-variant-numeric:tabular-nums;
}
.v3-ig b{ font-weight:600; }
.v3-ig h1,.v3-ig h2,.v3-ig h3,.v3-ig h4{ margin:0; letter-spacing:-0.03em; text-wrap:balance; font-weight:600; }
.v3-ig p{ margin:0; }
.v3-ig img{ max-width:100%; display:block; }

.v3-ig .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }
.v3-ig section{ padding:88px 0; position:relative; } /* 2026-07-10 consistency pass: was 84px — aligned to the 88px marketing-band rhythm (v3-solution / home / pricing) */
.v3-ig section + section{ border-top:1px solid var(--rule); }

/* ---------- shared section furniture (flush-left) ---------- */
.v3-ig .ig-eyebrow{ display:flex; align-items:center; gap:10px; font:500 11px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ig-muted); margin-bottom:16px; }
.v3-ig .ig-eyebrow .bar{ width:18px; height:1px; background:var(--graphite); flex:none; }
.v3-ig .ig-h2{ font-size:clamp(28px,3.2vw,36px); letter-spacing:-0.03em; line-height:1.08; max-width:26ch; color:var(--ink); }
.v3-ig .ig-lead{ font-size:16px; color:var(--ig-sec); max-width:62ch; margin-top:14px; }
.v3-ig .ig-lead b{ color:var(--ink); font-weight:600; }

/* header underline: sweeps in on scroll (orange), static under reduced-motion */
.v3-ig .ig-uline{ display:block; height:3px; width:56px; margin-top:16px; background:var(--orange); transform-origin:left center; border-radius:1px; }
html.motion .v3-ig .ig-uline{ transform:scaleX(0); transition:transform .55s cubic-bezier(.2,.75,.2,1); }
html.motion .v3-ig .ig-uline.in{ transform:scaleX(1); }
.v3-ig .band-dark .ig-uline{ box-shadow:var(--glow); }

/* reveal (fade-up), gated so reduced-motion shows everything settled */
html.motion .v3-ig .ig-reveal{ opacity:0; transform:translateY(15px); transition:opacity .5s ease, transform .5s cubic-bezier(.2,.75,.2,1); }
html.motion .v3-ig .ig-reveal.in{ opacity:1; transform:none; }

/* ---------- the entity corner frame (drafting grammar) ---------- */
.v3-ig .fr{
  position:relative;
  --fc:var(--ig-frame);
  --sig:var(--brand);          /* the one signature corner: indigo on light */
  --fl:16px; --ft:0.75px; --fts:calc(var(--ft) * 3);
  background-image:
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--sig),var(--sig)), linear-gradient(var(--sig),var(--sig));
  background-repeat:no-repeat;
  background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
  background-size:
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--fts), var(--fts) var(--fl);
  transition:background-size .18s ease;
}
.v3-ig .fr:hover{ --fl:22px; }
.v3-ig .band-dark .fr{ --fc:var(--d-frame); --sig:var(--orange); }

/* ---------- buttons: INK fill on light, ORANGE energy on dark bands ---------- */
.v3-ig .ig-btn{ display:inline-block; padding:12px 26px; border-radius:2px; font:600 15px var(--sans); text-decoration:none; border:1px solid var(--graphite); color:var(--ink); background:transparent; letter-spacing:-0.01em; transition:background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.v3-ig .ig-btn:hover{ background:rgba(20,21,25,.05); border-color:var(--ink); }
.v3-ig .ig-btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.v3-ig .ig-btn.primary:hover{ background:#000; border-color:#000; }
.v3-ig .band-dark .ig-btn{ color:var(--d-fg); border-color:var(--d-rule-2); background:rgba(255,255,255,.015); }
.v3-ig .band-dark .ig-btn:hover{ background:rgba(255,255,255,.06); border-color:var(--d-fg); }
.v3-ig .band-dark .ig-btn.energy{ color:#fff; border-color:var(--orange); background:var(--orange); box-shadow:0 8px 26px -10px rgba(255,79,0,.6); }
.v3-ig .band-dark .ig-btn.energy:hover{ box-shadow:var(--glow-strong); transform:translateY(-1px); }

/* ===================== INTEGRATION HERO ===================== */
.v3-ig .ig-hero-sec{ padding:34px 0 84px; }
.v3-ig .ig-crumbs{ display:flex; align-items:center; gap:9px; font:500 11px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ig-muted); margin-bottom:26px; flex-wrap:wrap; }
.v3-ig .ig-crumbs a{ color:var(--ig-sec); text-decoration:none; }
.v3-ig .ig-crumbs a:hover{ color:var(--ink); }
.v3-ig .ig-crumbs .sep{ color:var(--rule-2); }
.v3-ig .ig-crumbs .cur{ color:var(--ink); }
.v3-ig .ig-hero{ display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:56px; align-items:center; }

/* co-brand lockup: the ClosedLoop AI indigo mark + the framed partner entity */
.v3-ig .ig-lockup{ display:inline-flex; align-items:center; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.v3-ig .ig-lk-mark{ display:inline-flex; align-items:center; gap:10px; min-width:0; }
.v3-ig .ig-lk-mark img.ig-lk-logo{ width:30px; height:30px; object-fit:contain; }
.v3-ig .ig-lk-name{ font:600 17px var(--sans); letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; }
.v3-ig .ig-lk-plus{ font:400 20px var(--mono); color:var(--ig-frame); line-height:1; }
.v3-ig .ig-lk-tile{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; flex:none; background:var(--paper); --fl:9px; --ft:0.75px; }
.v3-ig .ig-lk-tile img{ width:24px; height:24px; object-fit:contain; }

.v3-ig .ig-hero h1{ font-size:clamp(36px,4.7vw,54px); line-height:1.04; letter-spacing:-0.035em; margin:0 0 16px; max-width:17ch; }
.v3-ig .ig-hero .ig-hlead{ font-size:16px; color:var(--ig-sec); max-width:54ch; margin-bottom:28px; }
.v3-ig .ig-cta{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
.v3-ig .ig-micro{ font-size:12px; color:var(--ig-muted); font-family:var(--mono); letter-spacing:.01em; }

/* the ONE framed entity in the hero: the integration spec datasheet */
.v3-ig .ig-spec{ background:var(--paper); padding:26px 26px 24px; display:flex; flex-direction:column; }
.v3-ig .ig-spec-kick{ font:600 10.5px var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ig-muted); }
.v3-ig .ig-spec-name{ font-size:26px; font-weight:600; letter-spacing:-0.025em; color:var(--ink); margin-top:10px; }
.v3-ig .ig-spec-sub{ font-size:13px; color:var(--ig-sec); margin-top:3px; }
.v3-ig .ig-spec-rows{ display:flex; flex-direction:column; margin-top:20px; padding-top:6px; border-top:1px solid var(--graphite); }
.v3-ig .ig-spec-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--rule); }
.v3-ig .ig-spec-row:last-child{ border-bottom:0; padding-bottom:0; }
.v3-ig .ig-spec-k{ font:500 10px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--ig-muted); white-space:nowrap; }
.v3-ig .ig-spec-v{ font:500 13px var(--mono); letter-spacing:.01em; color:var(--ink); text-align:right; }
.v3-ig .ig-status{ display:inline-flex; align-items:center; font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ig-sec); }
/* status carries color in the LABEL, no dot (founder call, 2026-07-17):
   Active = green, Beta = firm graphite, Coming soon = muted grey. */
.v3-ig .ig-status .dot{ display:none; }
.v3-ig .ig-status.is-active{ color:#1F7A43; }
.v3-ig .ig-status.is-beta{ color:var(--graphite); }
.v3-ig .ig-status.is-soon{ color:var(--ig-muted); }

/* ===================== CAPABILITY CARDS (What you get / Who you'll hear from) ===================== */
.v3-ig .ig-caps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:34px; }
.v3-ig .ig-cap{ background:var(--paper); padding:24px 24px 26px; display:flex; flex-direction:column; gap:12px; }
.v3-ig .ig-cap .kick{ font:600 10.5px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ig-muted); }
.v3-ig .ig-cap h3{ font-size:19px; font-weight:600; letter-spacing:-0.02em; line-height:1.2; color:var(--ink); }
.v3-ig .ig-cap p{ font-size:14px; line-height:1.6; color:var(--ig-sec); max-width:46ch; }

/* ===================== HOW THE DATA FLOWS (hairline mapping + the ONE calm current) ===================== */
.v3-ig .ig-flow{ position:relative; margin-top:32px; border-top:1px solid var(--graphite); }
.v3-ig .ig-flow-head,.v3-ig .ig-flow-row{ display:grid; grid-template-columns:minmax(0,1fr) 56px minmax(0,1.18fr); align-items:center; gap:0 20px; }
.v3-ig .ig-flow-head{ padding:12px 0; border-bottom:1px solid var(--rule-2); }
.v3-ig .ig-flow-h{ font:500 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ig-muted); }
.v3-ig .ig-flow-row{ padding:18px 0; border-bottom:1px solid var(--rule); }
.v3-ig .ig-flow-src{ font-size:15px; color:var(--ig-sec); }
.v3-ig .ig-flow-arrow{ position:relative; display:flex; align-items:center; justify-content:center; color:var(--ig-frame); }
.v3-ig .ig-flow-arrow svg{ display:block; overflow:visible; }
.v3-ig .ig-arrow-rail{ stroke:currentColor; }
.v3-ig .ig-arrow-pulse{ stroke:var(--orange); opacity:0; }
.v3-ig .ig-flow-dst{ font-size:16px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
.v3-ig .ig-flow-note{ margin-top:16px; font:500 11px var(--mono); letter-spacing:.06em; color:var(--ig-muted); }

/* THE ONE ambient current: a calm orange read-head sweeps down the arrow column, left->right
   along each hairline. Depicts the live product reading each field. Gated behind html.motion;
   fully static under reduced-motion / paused when the tab is hidden. No glow storm, one pulse. */
html.motion .v3-ig .ig-arrow-pulse{
  stroke-dasharray:6 40; opacity:.9;
  animation:igflow 2.8s linear infinite;
  filter:drop-shadow(0 0 2px rgba(255,79,0,.7));
}
html.motion .v3-ig .ig-flow-row:nth-child(3) .ig-arrow-pulse{ animation-delay:-.55s; }
html.motion .v3-ig .ig-flow-row:nth-child(4) .ig-arrow-pulse{ animation-delay:-1.1s; }
html.motion .v3-ig .ig-flow-row:nth-child(5) .ig-arrow-pulse{ animation-delay:-1.65s; }
html.motion .v3-ig .ig-flow-row:nth-child(6) .ig-arrow-pulse{ animation-delay:-2.2s; }
@keyframes igflow{ to{ stroke-dashoffset:-46; } }

/* ===================== WHAT CHANGES (outcomes, hairline numbered list) ===================== */
.v3-ig .ig-changes{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px; margin-top:30px; }
.v3-ig .ig-change{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; align-items:start; padding:18px 0; border-bottom:1px solid var(--rule); }
.v3-ig .ig-change .n{ font:500 11px var(--mono); letter-spacing:.12em; color:var(--ig-muted); padding-top:2px; }
.v3-ig .ig-change p{ font-size:15px; line-height:1.5; color:var(--ink); }

/* ===================== SETUP STEPS ===================== */
.v3-ig .ig-steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; margin-top:36px; }
.v3-ig .ig-step{ border-top:2px solid var(--graphite); padding-top:14px; transition:border-color .16s ease; }
.v3-ig .ig-step:last-child{ border-top-color:var(--orange); }
.v3-ig .ig-step:hover{ border-color:var(--orange); }
.v3-ig .ig-step .s-no{ display:block; font:500 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ig-muted); margin-bottom:10px; }
.v3-ig .ig-step:last-child .s-no{ color:var(--orange); }
.v3-ig .ig-step b{ display:block; font-size:15px; color:var(--ink); }
.v3-ig .ig-step p{ font-size:13px; color:var(--ig-sec); margin-top:6px; line-height:1.5; }

/* ===================== RELATED READING (blog links, light hairline list) ===================== */
.v3-ig .ig-reading{ display:flex; flex-direction:column; margin-top:30px; border-top:1px solid var(--graphite); }
.v3-ig .ig-read{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 2px; border-bottom:1px solid var(--rule); text-decoration:none; transition:background .16s ease, padding-left .16s ease; }
.v3-ig .ig-read:hover{ background:rgba(255,79,0,.04); padding-left:10px; }
.v3-ig .ig-read .t{ font-size:16px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); }
.v3-ig .ig-read .arr{ flex:none; font:500 12px var(--mono); color:var(--ig-muted); white-space:nowrap; }
.v3-ig .ig-read:hover .arr{ color:var(--orange); }

/* ===================== RELATED INTEGRATIONS (framed entity cards) ===================== */
.v3-ig .ig-related-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:30px; }
.v3-ig .ig-rel{ background:var(--paper); padding:20px 20px 18px; display:flex; flex-direction:column; gap:12px; text-decoration:none; transition:background .16s ease; }
.v3-ig .ig-rel:hover{ background-color:rgba(20,21,25,.02); } /* background-color (not shorthand) so the .fr corner frame survives hover */
.v3-ig .ig-rel-head{ display:flex; align-items:center; gap:11px; min-width:0; }
.v3-ig .ig-rel-logo{ width:34px; height:34px; flex:none; display:flex; align-items:center; justify-content:center; }
.v3-ig .ig-rel-logo img{ width:24px; height:24px; object-fit:contain; }
.v3-ig .ig-rel-head > span{ min-width:0; }
.v3-ig .ig-rel-nm{ display:block; font-size:16px; font-weight:600; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v3-ig .ig-rel-cat{ display:block; font:500 9.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ig-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.v3-ig .ig-rel-desc{ font-size:13px; line-height:1.5; color:var(--ig-sec); flex:1; }
.v3-ig .ig-rel-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:12px; border-top:1px solid var(--rule); }
.v3-ig .ig-rel-arrow{ font:500 12px var(--sans); color:var(--ink); }
.v3-ig .ig-rel:hover .ig-rel-arrow{ text-decoration:underline; text-underline-offset:3px; }
.v3-ig .ig-related-all{ margin-top:26px; }

/* ===================== FINAL CTA (dark night band) ===================== */
.v3-ig .band-dark{ background:var(--band); color:var(--d-fg); }
.v3-ig .band-dark.night{
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:34px 34px; background-position:center top;
  position:relative; overflow:hidden;
}
.v3-ig .band-dark.night::before{ content:""; position:absolute; top:6%; left:50%; transform:translateX(-50%);
  width:760px; max-width:120%; height:460px; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse at center, rgba(255,79,0,.09), rgba(255,79,0,0) 62%); }
.v3-ig .band-dark.night > .wrap{ position:relative; z-index:1; }
.v3-ig .ig-final{ text-align:center; padding:104px 0 112px; border-top:0; } /* 2026-07-10: was 100/108 — aligned to the 104/112 dark-CTA rhythm (v3-solution .final) */
.v3-ig .ig-final h2{ font-size:clamp(30px,3.6vw,40px); letter-spacing:-0.03em; margin:0 auto 12px; max-width:22ch; color:var(--d-fg); }
.v3-ig .ig-final .ig-sub{ font-size:16px; color:var(--d-sec); max-width:56ch; margin:0 auto; }
.v3-ig .ig-final .ig-uline{ margin:20px auto 26px; }
.v3-ig .ig-final .ig-cta{ justify-content:center; margin-bottom:0; }
.v3-ig .ig-final .ig-micro{ margin-top:16px; color:var(--d-muted); }

/* ===================== motion housekeeping ===================== */
/* pause the ambient current when the tab is hidden */
html.tab-hidden .v3-ig .ig-arrow-pulse{ animation-play-state:paused !important; }
/* reduced motion: fully static settled states */
@media (prefers-reduced-motion:reduce){
  .v3-ig *,.v3-ig *::before,.v3-ig *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
html.reduce .v3-ig *,html.reduce .v3-ig *::before,html.reduce .v3-ig *::after{ animation:none !important; transition:none !important; }

/* ===================== responsive ===================== */
@media (max-width:980px){
  .v3-ig section{ padding:62px 0; }
  .v3-ig .ig-hero-sec{ padding:26px 0 62px; }
  .v3-ig .ig-hero{ grid-template-columns:1fr; gap:40px; }
  .v3-ig .ig-caps{ grid-template-columns:1fr 1fr; }
  .v3-ig .ig-related-cards{ grid-template-columns:1fr 1fr; }
  .v3-ig .ig-steps{ grid-template-columns:1fr 1fr; }
  .v3-ig .ig-changes{ grid-template-columns:1fr; gap:0; }
  .v3-ig .ig-final{ padding:78px 0 88px; }
}
@media (max-width:600px){
  .v3-ig .ig-caps{ grid-template-columns:1fr; }
  .v3-ig .ig-related-cards{ grid-template-columns:1fr; }
  .v3-ig .ig-steps{ grid-template-columns:1fr; }
  .v3-ig .ig-cta .ig-btn{ flex:1 1 100%; text-align:center; }
  .v3-ig .ig-hero h1{ font-size:clamp(30px,8.5vw,42px); }
  /* mapping restacks: source becomes a mono kicker over the ink insight */
  .v3-ig .ig-flow{ border-top:1px solid var(--rule-2); }
  .v3-ig .ig-flow-head{ display:none; }
  .v3-ig .ig-flow-row{ grid-template-columns:1fr; gap:6px; padding:16px 0; }
  .v3-ig .ig-flow-arrow{ display:none; }
  .v3-ig .ig-flow-src{ font:500 10.5px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ig-muted); }
  .v3-ig .ig-flow-dst{ font-size:15px; }
}

/* ---------- frame re-assert (2026-07-10 consistency pass) ----------
   The `background:` SHORTHANDS on .ig-lk-tile/.ig-spec/.ig-cap/.ig-rel above reset
   background-image and erased the corner registration marks. Re-asserted LAST so source
   order inside this file can never kill the frame again (sister backstop in v3.css). */
.v3-ig .fr{
  background-image:
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--fc),var(--fc)), linear-gradient(var(--fc),var(--fc)),
    linear-gradient(var(--sig),var(--sig)), linear-gradient(var(--sig),var(--sig));
  background-repeat:no-repeat;
  background-position:top left,top left, top right,top right, bottom left,bottom left, bottom right,bottom right;
  background-size:
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--ft), var(--ft) var(--fl),
    var(--fl) var(--fts), var(--fts) var(--fl);
}