/* ==========================================================================
   Integrations — "Everything Connected"
   --------------------------------------------------------------------------
   Built on the shared Blue Lily section grammar in home.css (grounds, heads,
   buttons, reveals, finale bloom). This file holds the page's own
   compositions, which are not reused from the home page:

     hero   Connected Paths  — light paths from the core to five categories
     02     One record route — a booking branching to three teams (scroll)
     04     Data flow        — a line of light through four stations (scroll)

   Without JavaScript every composition is complete and still. Under
   prefers-reduced-motion everything is shown finished (see the end).
   ========================================================================== */

:root {
  --bl-midnight: #0B1630;
  --bl-deep-navy: #10264A;
  --bl-royal: #2563EB;
  --bl-electric: #4DA8FF;
  --bl-soft: #93C5FD;
  --bl-teal: #14B8A6;
  --bl-violet: #8B5CF6;
  --bl-off-white: #F8FAFC;
  --bl-slate: #475569;
}

/* ------------------------------------------------------------- hero --- */
.int-hero { padding-block: var(--v2-pad-hero) var(--v2-pad); }
.int-hero .crumbs { margin-bottom: clamp(20px, 3vw, 36px); color: #B7C8E2; }
.int-hero .crumbs a { color: #C9D8EE; }
.int-hero .crumbs a:hover { color: #FFFFFF; }
.int-hero__split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.int-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-hero);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.035em;
  color: #FFFFFF;
  text-wrap: balance;
}
.int-hero .v2-head > .petal-field { inset: -30% -10% -10%; }

/* the stage: an SVG of paths under an HTML hub and HTML category labels */
.int-core {
  position: relative;
  aspect-ratio: 600 / 560;
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}
.int-core__glow {
  position: absolute;
  left: 50%; top: 48%;
  width: 70%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(77, 168, 255, .28), rgba(139, 92, 246, .10) 60%, transparent);
  pointer-events: none;
}
.int-core__paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.int-core__track { fill: none; stroke: rgba(147, 197, 253, .18); stroke-width: 10; stroke-linecap: round; }
.int-core__path {
  fill: none;
  stroke: url(#intCoreLine);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.int-core__ring { fill: none; stroke: rgba(191, 219, 254, .22); stroke-width: 1.2; stroke-dasharray: 3 8; }
.int-core__hub {
  position: absolute;
  left: 50%; top: 48%;
  z-index: 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: clamp(120px, 24%, 150px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  color: #FFFFFF;
  text-align: center;
  background: radial-gradient(circle at 36% 16%, #5B9BF8 0%, #2563EB 36%, #1D4ED8 100%);
  border: 1px solid rgba(191, 219, 254, .55);
  box-shadow: 0 0 0 12px rgba(37, 99, 235, .12), 0 30px 60px -20px rgba(4, 10, 26, .9);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1);
}
.int-core__hub strong { font: 600 16px/1.2 var(--font-display); }
.int-core__hub span { font-size: 13px; font-weight: 500; line-height: 1.3; color: #FFFFFF; }
.int-core__nodes { list-style: none; margin: 0; padding: 0; }
.int-core__node {
  position: absolute;
  left: var(--x); top: var(--y);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 200px;
  translate: -50% -50%;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  font: 600 15px/1.25 var(--font-display);
  color: #FFFFFF;
  background: rgba(16, 26, 70, .86);
  border: 1px solid rgba(147, 197, 253, .28);
  box-shadow: 0 18px 40px -22px rgba(4, 10, 26, .9);
  transition: border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.int-core__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  color: #C4B5FD;
  background: rgba(139, 92, 246, .18);
  border: 1px solid rgba(196, 181, 253, .3);
}
.int-core__node.is-near {
  border-color: rgba(191, 219, 254, .75);
  background: rgba(22, 36, 92, .94);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, .25), 0 0 36px rgba(77, 168, 255, .35);
}
.int-core__runner use { color: var(--petal-soft); }
.int-core__runner:nth-of-type(2) use { color: var(--petal-violet); }

/* entrance: the paths draw from the core, then the labels arrive */
.js .int-core .int-core__path { stroke-dashoffset: 1; }
.js .v2.is-in .int-core .int-core__path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) calc(.35s + var(--i) * .12s);
}
.js .int-core__node { opacity: 0; scale: .9; }
.js .v2.is-in .int-core__node {
  opacity: 1; scale: 1;
  transition: opacity .7s ease calc(1s + var(--i) * .1s),
              scale .8s cubic-bezier(.34, 1.4, .64, 1) calc(1s + var(--i) * .1s),
              border-color .4s ease, box-shadow .4s ease, background-color .4s ease;
}
.js .int-core__hub { opacity: 0; scale: .8; }
.js .v2.is-in .int-core__hub { opacity: 1; scale: 1;
  transition: opacity .8s ease .15s, scale 1s cubic-bezier(.34, 1.4, .64, 1) .15s, transform .8s cubic-bezier(.22, .61, .36, 1); }

/* ------------------------------------------------- 02 one record route --- */
.int-route {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.15fr);
  align-items: center;
  min-height: 420px;
}
.int-route__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.int-route__track { fill: none; stroke: #DCE8FF; stroke-width: 6; stroke-linecap: round; }
.int-route__draw {
  fill: none;
  stroke: url(#intRouteLine);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.int-route__source, .int-route__dest {
  position: relative;
  z-index: 1;
  padding: 16px 18px;
  border-radius: 18px;
  background: #FFFFFF;
  border: 1px solid rgba(37, 99, 235, .12);
  box-shadow: 0 24px 50px -30px rgba(11, 22, 48, .5);
}
.int-route__source { grid-column: 1; }
.int-route__dests {
  grid-column: 3;
  display: grid;
  gap: clamp(18px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.int-route__icon {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  margin-bottom: 10px;
  border-radius: 11px;
  color: #1D4ED8;
  background: #EDF3FC;
}
.int-route__source .int-route__icon { color: #FFFFFF; background: var(--bl-royal); }
.int-route h3 { margin: 0 0 4px; font: 600 17px/1.25 var(--font-display); color: #0B1630; }
.int-route p { margin: 0; font-size: 15px; line-height: 1.5; color: #475569; }
.int-route__dest { transition: border-color .5s ease, box-shadow .5s ease, translate .6s cubic-bezier(.22, .61, .36, 1); }
.int-route__dest.is-lit,
.no-js .int-route__dest { border-color: rgba(37, 99, 235, .45); box-shadow: 0 0 0 4px rgba(77, 168, 255, .12), 0 24px 50px -30px rgba(11, 22, 48, .5); }
.int-route__dest.is-lit .int-route__icon { color: #FFFFFF; background: var(--bl-royal); }
.js .int-route__draw { stroke-dashoffset: 1; }

/* ------------------------------------------------- 03 categories --- */
.int-cats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(32px, 4vw, 52px);
}
.int-cat { grid-column: span 2; }
.int-cat:nth-child(4) { grid-column: 2 / span 2; }
.int-cat {
  position: relative;
  padding: 24px 24px 22px;
  border-radius: 20px;
  background: rgba(16, 26, 70, .78);
  border: 1px solid rgba(147, 197, 253, .2);
  box-shadow: 0 24px 50px -30px rgba(4, 10, 26, .9);
  transition: border-color .4s ease, box-shadow .4s ease, transform .5s cubic-bezier(.22, .61, .36, 1);
}
.int-cat:hover { border-color: rgba(191, 219, 254, .5); box-shadow: 0 0 34px rgba(77, 168, 255, .2), 0 24px 50px -30px rgba(4, 10, 26, .9); }
.int-cat__icon {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-bottom: 16px;
  border-radius: 12px;
  color: #C4B5FD;
  background: rgba(139, 92, 246, .16);
  border: 1px solid rgba(196, 181, 253, .3);
}
.int-cat h3 { margin: 0 0 8px; font: 600 18px/1.25 var(--font-display); color: #FFFFFF; }
.int-cat p { margin: 0; font-size: 15px; line-height: 1.55; color: #C9D8EE; }
.int-cat__examples {
  margin-top: 16px !important;
  padding-top: 12px;
  border-top: 1px solid rgba(147, 197, 253, .16);
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #B7C8E2 !important;
}
.int-cat--inside { background: rgba(37, 99, 235, .22); border-color: rgba(147, 197, 253, .34); }
.js .int-cat { opacity: 0; transform: translate3d(0, 22px, 0); }
.js .int-cats.is-in .int-cat { opacity: 1; transform: none;
  transition: opacity .7s ease calc(var(--i) * .08s), transform .8s cubic-bezier(.22, .61, .36, 1) calc(var(--i) * .08s),
              border-color .4s ease, box-shadow .4s ease; }

/* ------------------------------------------------- 04 data flow --- */
.int-flow { position: relative; margin-top: clamp(36px, 4vw, 56px); }
.int-flow__svg {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 64px;
  overflow: visible;
  pointer-events: none;
}
.int-flow__track { fill: none; stroke: #CFDDFB; stroke-width: 6; stroke-linecap: round; }
.int-flow__draw {
  fill: none;
  stroke: url(#intFlowLine);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.js .int-flow__draw { stroke-dashoffset: 1; }
.int-flow__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.int-flow__step { text-align: center; }
.int-flow__dot {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  color: #1D4ED8;
  background: #FFFFFF;
  border: 2px solid #BFDBFE;
  box-shadow: 0 16px 34px -18px rgba(37, 99, 235, .6);
  transition: color .5s ease, background-color .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.int-flow__step.is-lit .int-flow__dot {
  color: #FFFFFF;
  background: var(--bl-royal);
  border-color: #93C5FD;
  box-shadow: 0 0 0 8px rgba(77, 168, 255, .16), 0 16px 34px -18px rgba(37, 99, 235, .9);
}
.int-flow__num { margin: 0 0 4px; font: 600 13px/1 var(--font-body); letter-spacing: .12em; color: #1D4ED8; }
.int-flow__step h3 { margin: 0 0 6px; font: 600 19px/1.25 var(--font-display); color: #0B1630; }
.int-flow__step p { margin: 0 auto; max-width: 26ch; font-size: 15px; line-height: 1.55; color: #475569; }

/* ------------------------------------------------- 05 open by design --- */
.int-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px;
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}
.int-points li { padding-left: 16px; border-left: 2px solid #BFDBFE; }
.int-points h3 { margin: 0 0 4px; font: 600 17px/1.25 var(--font-display); color: #0B1630; }
.int-points p { margin: 0; font-size: 15px; line-height: 1.5; color: #475569; }

/* ------------------------------------------------- 06 directory --- */
.int-table { margin-top: clamp(28px, 3vw, 40px); overflow-x: auto; }
.int-table .compare { background: #FFFFFF; border-radius: 18px; overflow: hidden; }
.int-table caption { caption-side: bottom; padding-top: 12px; text-align: left; font-size: 14px; color: #475569; }

/* ------------------------------------------------- responsive --- */
@media (max-width: 1024px) {
  .int-hero__split { grid-template-columns: minmax(0, 1fr); }
  .int-core { max-width: 560px; }
  .int-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .int-cat, .int-cat:nth-child(4) { grid-column: auto; }
  .int-cat:last-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  /* the constellation becomes the hub above a list of categories */
  .int-core { aspect-ratio: auto; }
  .int-core__paths, .int-core__glow { display: none; }
  .int-core__hub { position: relative; left: auto; top: auto; translate: none; margin: 0 auto 20px; width: 132px; }
  .int-core__nodes { display: grid; gap: 10px; }
  .int-core__node { position: relative; left: auto; top: auto; translate: none; max-width: none; }
  /* the route stacks: source, a short connector, then the three teams */
  .int-route { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 28px; }
  .int-route__svg { display: none; }
  .int-route__source, .int-route__dests { grid-column: 1; }
  .int-route__dests { padding-left: 18px; border-left: 3px solid #BFDBFE; }
  .int-cats { grid-template-columns: minmax(0, 1fr); }
  .int-cat:last-child { grid-column: auto; }
  .int-flow__svg { display: none; }
  .int-flow__steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .int-flow__step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; text-align: left; align-items: start; }
  .int-flow__dot { margin: 0; }
  .int-flow__step p { margin: 0; max-width: none; }
  .int-points { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------- reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .js .int-core .int-core__path, .js .int-route__draw, .js .int-flow__draw { stroke-dashoffset: 0; transition: none; }
  .js .int-core__node, .js .int-core__hub, .js .int-cat { opacity: 1; scale: 1; transform: none; transition: none; }
  .int-core__runner { display: none; }
  .int-route__dest { border-color: rgba(37, 99, 235, .45); }
  .int-flow__step .int-flow__dot { color: #FFFFFF; background: var(--bl-royal); border-color: #93C5FD; }
}