/* Davision Intelligence: lp-loop (the before / after story on the Intelligence page) and il (the loop on the case studies) */
/* =====================================================================
   lp-loop  |  "Every question makes the agent better"
   One root element. Variants differ only by text, avatar and
   the light modifier (.lp-loop--light together with .cs-light).
   ===================================================================== */
.lp-loop {
  --lp-ink: #f4f4f7;
  --lp-muted: #a3a3ad;
  --lp-faint: #74747e;
  --lp-card: rgba(255,255,255,0.045);
  --lp-card-2: rgba(255,255,255,0.07);
  --lp-line: rgba(255,255,255,0.09);
  --lp-line-2: rgba(255,255,255,0.14);
  --lp-accent: #6a6cff;
  --lp-accent-deep: #4c4fd7;
  --lp-accent-soft: #a9abff;
  --lp-ok: #3ddc84;
  --lp-ok-bg: rgba(61,220,132,0.1);
  --lp-ok-line: rgba(61,220,132,0.3);
  --lp-warn: #f6c46f;
  --lp-warn-bg: rgba(246,196,111,0.09);
  --lp-warn-line: rgba(246,196,111,0.28);
  --lp-user-bg: #6a6cff;
  --lp-user-ink: #fff;
  --lp-bubble: rgba(255,255,255,0.07);
  --lp-pill-bg: #0b0b12;
  --lp-gap: 40px;
  --lp-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--lp-ink);
}
.lp-loop--light {
  --lp-ink: #111114;
  --lp-muted: #5c5c64;
  --lp-faint: #7c7c84;
  --lp-card: #ffffff;
  --lp-card-2: #f6f6f8;
  --lp-line: rgba(0,0,0,0.07);
  --lp-line-2: rgba(0,0,0,0.12);
  --lp-accent: #4c4fd7;
  --lp-accent-soft: #4c4fd7;
  --lp-ok: #13854a;
  --lp-ok-bg: rgba(19,133,74,0.08);
  --lp-ok-line: rgba(19,133,74,0.24);
  --lp-warn: #8a5800;
  --lp-warn-bg: rgba(214,150,30,0.12);
  --lp-warn-line: rgba(176,120,10,0.28);
  --lp-user-bg: #111114;
  --lp-bubble: #f1f1f4;
  --lp-pill-bg: #ffffff;
}

/* soft indigo glow behind the dashboard card (dark only) */
.lp-loop::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 46% at 50% 66%, rgba(76,79,215,0.20), transparent 70%),
    radial-gradient(30% 30% at 86% 30%, rgba(106,108,255,0.08), transparent 70%);
}
.lp-loop--light::before {
  background: radial-gradient(44% 44% at 50% 66%, rgba(76,79,215,0.07), transparent 70%);
}

.lp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lp-loop svg { display: block; flex: none; }

/* ---------- head ---------- */
.lp-head { margin-bottom: 72px; }
.lp-head .cs-lead { max-width: 640px; }

/* ---------- flow ---------- */
.lp-flow {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--lp-gap);
  position: relative;
}
.lp-step { position: relative; display: flex; flex-direction: column; min-width: 0; }

/* nodes on the rail */
.lp-node { height: 48px; display: flex; justify-content: center; align-items: center; margin-bottom: 26px; }
.lp-dot {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--lp-pill-bg); border: 1px solid var(--lp-line-2); color: var(--lp-accent-soft);
  box-shadow: 0 0 0 6px rgba(106,108,255,0.06), 0 0 30px rgba(106,108,255,0.18);
  transition: border-color .6s ease, box-shadow .6s ease, color .6s ease, transform .6s var(--lp-ease);
}
.lp-dot svg { width: 20px; height: 20px; }
.lp-step--before .lp-dot { color: var(--lp-warn); }
.lp-step--after .lp-dot { color: var(--lp-ok); box-shadow: 0 0 0 6px rgba(61,220,132,0.06), 0 0 30px rgba(61,220,132,0.16); }
.lp-loop--light .lp-dot { box-shadow: 0 0 0 6px rgba(76,79,215,0.06), 0 8px 24px rgba(0,0,0,0.06); }
.lp-loop--light .lp-step--after .lp-dot { box-shadow: 0 0 0 6px rgba(19,133,74,0.07), 0 8px 24px rgba(0,0,0,0.06); }

/* rail segment between two nodes */
.lp-seg {
  position: absolute; top: 24px; left: calc(50% + 32px); width: calc(100% + var(--lp-gap) - 64px); height: 1px;
  background-image: linear-gradient(90deg, var(--lp-line-2) 50%, transparent 50%); background-size: 8px 1px;
}
.lp-seg-fill {
  position: absolute; inset: 0; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(106,108,255,0.25), var(--lp-accent) 50%, rgba(61,220,132,0.6));
  box-shadow: 0 0 12px rgba(106,108,255,0.55);
}
.lp-loop--light .lp-seg-fill { box-shadow: none; background: linear-gradient(90deg, rgba(76,79,215,0.35), #4c4fd7 50%, rgba(19,133,74,0.7)); }
.lp-pulse {
  position: absolute; top: 50%; left: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 10px 2px var(--lp-accent); opacity: 0;
}
.lp-loop--light .lp-pulse { background: #4c4fd7; box-shadow: 0 0 8px 1px rgba(76,79,215,0.5); }

/* label sitting on the rail between two steps */
.lp-via {
  position: absolute; top: 24px; left: calc(100% + var(--lp-gap) / 2); transform: translate(-50%, -50%);
  z-index: 2; margin: 0; display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 8px 15px 8px 9px; border-radius: 100px; background: var(--lp-pill-bg); border: 1px solid var(--lp-line-2);
  font: 600 12px/1 var(--font-main); letter-spacing: .02em; color: var(--lp-ink);
}
.lp-loop--light .lp-via { box-shadow: 0 6px 18px rgba(0,0,0,0.06); }
.lp-via-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(106,108,255,0.14); color: var(--lp-accent-soft); }
.lp-via-ic svg { width: 12px; height: 12px; }
.lp-via--train .lp-via-ic { background: var(--lp-ok-bg); color: var(--lp-ok); }

/* ---------- cards ---------- */
.lp-card {
  flex: 1; display: flex; flex-direction: column; gap: 18px; min-width: 0;
  padding: 26px; border-radius: 24px; background: var(--lp-card); border: 1px solid var(--lp-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: opacity .8s var(--lp-ease), transform .8s var(--lp-ease);
}
.lp-loop--light .lp-card { box-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 24px 60px -24px rgba(0,0,0,0.12); }
.lp-card--dash {
  background: linear-gradient(180deg, rgba(106,108,255,0.10), rgba(255,255,255,0.04) 40%);
  border-color: rgba(169,171,255,0.22);
  box-shadow: 0 40px 90px -40px rgba(76,79,215,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
  padding-top: 0; overflow: hidden;
}
.lp-loop--light .lp-card--dash { background: #fff; border-color: rgba(76,79,215,0.2); box-shadow: 0 30px 70px -30px rgba(76,79,215,0.3); }

.lp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lp-kicker { display: block; font: 700 11px/1 var(--font-main); letter-spacing: .18em; text-transform: uppercase; color: var(--lp-faint); margin-bottom: 10px; }
.lp-card-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.18; letter-spacing: -0.005em; color: var(--lp-ink); margin: 0; }

/* status pills */
.lp-status {
  flex: none; display: inline-flex; align-items: center; gap: 7px; margin-top: 1px;
  padding: 7px 11px; border-radius: 100px; font: 600 11.5px/1 var(--font-main); white-space: nowrap;
  border: 1px solid; transition: color .5s ease, background-color .5s ease, border-color .5s ease;
}
.lp-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.lp-status--warn { color: var(--lp-warn); background: var(--lp-warn-bg); border-color: var(--lp-warn-line); }
.lp-status--ok, .lp-status--swap { color: var(--lp-ok); background: var(--lp-ok-bg); border-color: var(--lp-ok-line); }
.lp-status--live::before { box-shadow: 0 0 0 3px rgba(61,220,132,0.18); }

/* text swap: final state shown by default, pre-state only when armed */
.lp-swap { display: inline-grid; justify-items: start; }
.lp-status .lp-swap { justify-items: center; }
.lp-loop:not(.lp-armed) .lp-swap-a { display: none; }
.lp-swap > * { grid-area: 1 / 1; transition: opacity .45s ease, transform .45s var(--lp-ease); }
.lp-swap-a { opacity: 0; }

/* chat */
.lp-chat { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: rgba(0,0,0,0.22); border: 1px solid var(--lp-line); }
.lp-loop--light .lp-chat { background: #f7f7f9; }
.lp-chat-meta { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--font-main); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-faint); margin-bottom: 2px; }
.lp-chat-meta svg { width: 14px; height: 14px; color: var(--lp-accent-soft); }
.lp-msg { margin: 0; font-size: 14.5px; line-height: 1.5; }
.lp-msg--user {
  align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 4px 16px;
  background: var(--lp-user-bg); color: var(--lp-user-ink);
}
.lp-msg--agent { display: flex; align-items: flex-end; gap: 10px; max-width: 94%; }
.lp-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--lp-line-2); }
.lp-msg--agent p { margin: 0; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--lp-bubble); color: var(--lp-ink); }
.lp-msg--muted p { color: var(--lp-muted); font-style: italic; }

/* tags */
.lp-tags { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tag {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 100px;
  font-size: 12.5px; line-height: 1.2; color: var(--lp-muted); background: var(--lp-card-2); border: 1px solid var(--lp-line);
}
.lp-tag svg { width: 13px; height: 13px; }
.lp-tag--warn { color: var(--lp-warn); border-color: var(--lp-warn-line); background: var(--lp-warn-bg); }
.lp-tag--ok { color: var(--lp-ok); border-color: var(--lp-ok-line); background: var(--lp-ok-bg); }

/* helpfulness rating */
.lp-rate { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 2px; font-size: 12px; color: var(--lp-faint); }
.lp-rate-btns { display: inline-flex; gap: 6px; }
.lp-th { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--lp-line); color: var(--lp-faint); }
.lp-th svg { width: 13px; height: 13px; }
.lp-th--down svg { transform: scale(-1, -1); }
.lp-th.is-on { color: var(--lp-ok); border-color: var(--lp-ok-line); background: var(--lp-ok-bg); }
.lp-th--down.is-on { color: var(--lp-warn); border-color: var(--lp-warn-line); background: var(--lp-warn-bg); }

/* dashboard window bar */
.lp-win { display: flex; align-items: center; gap: 10px; margin: 0 -26px; padding: 14px 20px; border-bottom: 1px solid var(--lp-line); background: rgba(0,0,0,0.18); }
.lp-loop--light .lp-win { background: #f7f7f9; }
.lp-win-dots { display: flex; gap: 5px; }
.lp-win-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-line-2); }
.lp-win-logo { height: 10px; width: auto; filter: invert(1); opacity: .9; margin-left: 6px; }
.lp-loop--light .lp-win-logo { filter: none; }
.lp-win-name { font: 600 12px/1 var(--font-main); color: var(--lp-ink); }
.lp-win-crumb { margin-left: auto; font-size: 11.5px; color: var(--lp-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-card--dash .lp-card-head { margin-top: 8px; }

/* the gap item */
.lp-gap { padding: 16px; border-radius: 18px; background: rgba(0,0,0,0.2); border: 1px solid var(--lp-line); }
.lp-loop--light .lp-gap { background: #f7f7f9; }
.lp-gap-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-bottom: 10px; }
.lp-gap-label { white-space: nowrap; }
.lp-gap-label { font: 600 11px/1 var(--font-main); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-faint); }
.lp-gap-q { margin: 0 0 14px; font-size: 15px; line-height: 1.45; font-weight: 500; color: var(--lp-ink); }
.lp-masked { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lp-masked div { display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; border-radius: 12px; background: var(--lp-card-2); border: 1px solid var(--lp-line); min-width: 0; }
.lp-masked dt { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-faint); }
.lp-masked dd { margin: 0; }
.lp-redact {
  display: block; height: 9px; border-radius: 3px; width: 82%;
  background: repeating-linear-gradient(90deg, var(--lp-line-2) 0 6px, transparent 6px 9px);
}
.lp-masked div + div .lp-redact { width: 64%; }
.lp-mask-badge { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font-main); color: var(--lp-accent-soft); white-space: nowrap; }
.lp-mask-badge svg { width: 13px; height: 13px; }

/* the proposed fix */
.lp-fix { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 16px; border: 1px dashed rgba(169,171,255,0.35); background: rgba(106,108,255,0.06); }
.lp-loop--light .lp-fix { border-color: rgba(76,79,215,0.3); background: rgba(76,79,215,0.04); }
.lp-fix-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(106,108,255,0.14); color: var(--lp-accent-soft); flex: none; }
.lp-fix-ic svg { width: 18px; height: 18px; }
.lp-fix small { display: block; font: 600 10.5px/1 var(--font-main); letter-spacing: .12em; text-transform: uppercase; color: var(--lp-faint); margin-bottom: 6px; }
.lp-fix b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--lp-ink); }

/* lifecycle stepper */
.lp-life { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
.lp-life li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px 5px 7px; border-radius: 100px;
  font-size: 11.5px; line-height: 1; color: var(--lp-ink); border: 1px solid var(--lp-line);
  transition: color .5s ease, border-color .5s ease, background-color .5s ease;
}
.lp-life li::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent); box-shadow: 0 0 0 3px rgba(106,108,255,0.16);
  transition: background-color .5s ease, box-shadow .5s ease;
}
.lp-life li:last-child { color: var(--lp-ok); border-color: var(--lp-ok-line); background: var(--lp-ok-bg); }
.lp-life li:last-child::before { background: var(--lp-ok); box-shadow: 0 0 0 3px rgba(61,220,132,0.18); }

/* approval lock */
.lp-approve { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--lp-line); }
.lp-lock { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--lp-ok-bg); border: 1px solid var(--lp-ok-line); color: var(--lp-ok); transition: background-color .5s ease, border-color .5s ease, color .5s ease; }
.lp-lock svg { width: 17px; height: 17px; grid-area: 1 / 1; transition: opacity .4s ease, transform .5s var(--lp-ease); }
.lp-lock .lp-lock-closed { opacity: 0; }
.lp-approve-txt { flex: 1; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--lp-muted); }
.lp-approve-txt b { color: var(--lp-ink); font-weight: 600; }
.lp-btn {
  flex: none; display: inline-grid; padding: 10px 16px; border-radius: 100px;
  font: 600 12px/1 var(--font-main); letter-spacing: .04em;
  background: var(--lp-ok); color: #04210f; transition: background-color .5s ease, color .5s ease, transform .3s var(--lp-ease);
}
.lp-loop--light .lp-btn { color: #fff; }
.lp-btn > span { grid-area: 1 / 1; text-align: center; transition: opacity .35s ease; }
.lp-btn .lp-btn-a { opacity: 0; }

/* attachment in the after card */
.lp-attach {
  display: flex; align-items: center; gap: 12px; margin-left: 40px; padding: 11px 12px; border-radius: 14px;
  background: var(--lp-card-2); border: 1px solid var(--lp-line-2); color: var(--lp-ink); text-decoration: none;
  transition: border-color .3s ease, transform .4s var(--lp-ease), box-shadow .3s ease;
}
.lp-attach:hover { border-color: rgba(169,171,255,0.5); transform: translateY(-2px); box-shadow: 0 12px 30px -12px rgba(106,108,255,0.45); }
.lp-attach-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(106,108,255,0.14); color: var(--lp-accent-soft); flex: none; }
.lp-attach-ic svg { width: 17px; height: 17px; }
.lp-attach span:not([class]) { flex: 1; min-width: 0; }
.lp-attach b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.lp-attach small { display: block; font-size: 12px; color: var(--lp-muted); line-height: 1.35; margin-top: 2px; }
.lp-attach-go { flex: none; display: inline-flex; align-items: center; gap: 5px; font: 600 11.5px/1 var(--font-main); color: var(--lp-accent-soft); white-space: nowrap; }
.lp-attach-go svg { width: 13px; height: 13px; transition: transform .4s var(--lp-ease); }
.lp-attach:hover .lp-attach-go svg { transform: translateX(3px); }

/* ---------- foot: trust + loop ---------- */
.lp-foot { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; border-radius: 24px; overflow: hidden; background: var(--lp-line); border: 1px solid var(--lp-line); }
.lp-foot li { list-style: none; display: flex; gap: 14px; padding: 24px 26px; background: #07070b; }
.lp-loop--light .lp-foot li { background: #fff; }
.lp-foot-ic { width: 38px; height: 38px; border-radius: 12px; flex: none; display: grid; place-items: center; color: var(--lp-ok); background: var(--lp-ok-bg); border: 1px solid var(--lp-ok-line); }
.lp-foot-ic svg { width: 18px; height: 18px; }
.lp-foot b { display: block; font-size: 15px; font-weight: 600; color: var(--lp-ink); margin-bottom: 5px; }
.lp-foot span:not([class]) { display: block; font-size: 13.5px; line-height: 1.55; color: var(--lp-muted); }

.lp-again { margin: 28px 0 0; display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; font-size: 14.5px; color: var(--lp-muted); }
.lp-again svg { width: 18px; height: 18px; color: var(--lp-accent-soft); }
.lp-again b { color: var(--lp-ink); font-weight: 600; }

/* =====================================================================
   Motion. Only when JS adds .lp-armed (and motion is allowed);
   .lp-play then runs the story once. Without JS: final state above.
   ===================================================================== */
.lp-armed .lp-card, .lp-armed .lp-via { opacity: 0; }
.lp-armed .lp-card { transform: translateY(22px); }
.lp-armed .lp-dot { border-color: var(--lp-line); box-shadow: none; color: var(--lp-faint); transform: scale(.86); }
.lp-armed .lp-seg-fill { transform: scaleX(0); }
.lp-armed .lp-swap-a { opacity: 1; }
.lp-armed .lp-swap-b { opacity: 0; transform: translateY(6px); }
.lp-armed .lp-status--swap { color: var(--lp-warn); background-color: var(--lp-warn-bg); border-color: var(--lp-warn-line); }
.lp-armed .lp-lock { color: var(--lp-faint); background-color: var(--lp-card-2); border-color: var(--lp-line-2); }
.lp-armed .lp-lock .lp-lock-closed { opacity: 1; }
.lp-armed .lp-lock .lp-lock-open { opacity: 0; transform: scale(.6); }
.lp-armed .lp-btn { background-color: var(--lp-accent); color: #fff; }
.lp-armed .lp-btn .lp-btn-a { opacity: 1; }
.lp-armed .lp-btn .lp-btn-b { opacity: 0; }
.lp-armed .lp-life li:nth-child(n+3) { color: var(--lp-faint); border-color: var(--lp-line); background-color: transparent; }
.lp-armed .lp-life li:nth-child(n+3)::before { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--lp-line-2); }
.lp-armed .lp-via--train .lp-via-ic { background-color: rgba(106,108,255,0.14); color: var(--lp-accent-soft); }
.lp-armed .lp-spin { opacity: 1; }

.lp-spin { position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--lp-accent); opacity: 0; transition: opacity .3s ease; }
.lp-via-ic { position: relative; }

.lp-play .lp-card, .lp-play .lp-via { opacity: 1; }
.lp-play .lp-card { transform: none; }
/* the labels on the rail keep their own centring while the story plays (owner, 18 Oct 2026: they slid half a
   label to the right and covered the next node) */
.lp-play .lp-dot { border-color: var(--lp-line-2); color: var(--lp-accent-soft); transform: none; box-shadow: 0 0 0 6px rgba(106,108,255,0.06), 0 0 30px rgba(106,108,255,0.18); }
.lp-play .lp-step--before .lp-dot { color: var(--lp-warn); }
.lp-play .lp-step--after .lp-dot { color: var(--lp-ok); }
.lp-play .lp-seg-fill { transform: none; transition: transform 1s var(--lp-ease); }
.lp-play .lp-swap-a { opacity: 0; transform: translateY(-6px); }
.lp-play .lp-swap-b { opacity: 1; transform: none; }
.lp-play .lp-status--swap { color: var(--lp-ok); background-color: var(--lp-ok-bg); border-color: var(--lp-ok-line); }
.lp-play .lp-lock { color: var(--lp-ok); background-color: var(--lp-ok-bg); border-color: var(--lp-ok-line); }
.lp-play .lp-lock .lp-lock-closed { opacity: 0; transform: scale(.6); }
.lp-play .lp-lock .lp-lock-open { opacity: 1; transform: none; }
.lp-play .lp-btn { background-color: var(--lp-ok); color: #04210f; }
.lp-loop--light.lp-play .lp-btn { color: #fff; }
.lp-play .lp-btn .lp-btn-a { opacity: 0; }
.lp-play .lp-btn .lp-btn-b { opacity: 1; }
.lp-play .lp-life li:nth-child(n+3) { color: var(--lp-ink); border-color: var(--lp-line); }
.lp-play .lp-life li:nth-child(n+3)::before { background-color: var(--lp-accent); box-shadow: 0 0 0 3px rgba(106,108,255,0.16); }
.lp-play .lp-life li:last-child { color: var(--lp-ok); border-color: var(--lp-ok-line); background-color: var(--lp-ok-bg); }
.lp-play .lp-life li:last-child::before { background-color: var(--lp-ok); box-shadow: 0 0 0 3px rgba(61,220,132,0.18); }
.lp-play .lp-via--train .lp-via-ic { background-color: var(--lp-ok-bg); color: var(--lp-ok); }
.lp-play .lp-spin { opacity: 0; }
.lp-armed .lp-spin { animation: lp-spin 0.9s linear infinite; }

/* the timeline (delays) */
.lp-play .lp-step--before .lp-card, .lp-play .lp-step--before .lp-dot { transition-delay: .1s; }
.lp-play .lp-step--before .lp-seg-fill { transition-delay: .7s; }
.lp-play .lp-via--intel { transition: opacity .5s ease 1.2s; }
.lp-play .lp-step--dash .lp-dot, .lp-play .lp-step--dash .lp-card { transition-delay: 1.4s; }
.lp-play .lp-step--dash .lp-swap > *, .lp-play .lp-status--swap,
.lp-play .lp-lock, .lp-play .lp-lock svg, .lp-play .lp-btn, .lp-play .lp-btn > span,
.lp-play .lp-life li:nth-child(3), .lp-play .lp-life li:nth-child(3)::before { transition-delay: 2.7s; }
.lp-play .lp-step--dash .lp-seg-fill { transition-delay: 3.2s; }
.lp-play .lp-via--train { transition: opacity .5s ease 3.4s; }
.lp-play .lp-life li:nth-child(4), .lp-play .lp-life li:nth-child(4)::before { transition-delay: 3.6s; }
.lp-play .lp-via--train .lp-swap > *, .lp-play .lp-via--train .lp-via-ic, .lp-play .lp-spin { transition-delay: 4.5s; }
.lp-play .lp-step--after .lp-dot, .lp-play .lp-step--after .lp-card { transition-delay: 4.7s; }
.lp-play .lp-life li:nth-child(5), .lp-play .lp-life li:nth-child(5)::before { transition-delay: 5s; }
.lp-play .lp-btn { transform: scale(1); }
.lp-play.lp-press .lp-btn { transform: scale(.94); }

@keyframes lp-spin { to { transform: rotate(360deg); } }
@keyframes lp-run-x { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@keyframes lp-run-y { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes lp-breathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(61,220,132,0.18); } 50% { box-shadow: 0 0 0 6px rgba(61,220,132,0.04); } }

@media (prefers-reduced-motion: no-preference) {
  .lp-loop.lp-play .lp-pulse, .lp-loop:not(.lp-armed) .lp-pulse { animation: lp-run-x 3.4s ease-in-out 6s infinite; }
  .lp-loop:not(.lp-armed) .lp-pulse { animation-delay: 0s; }
  .lp-step--dash .lp-pulse { animation-delay: 7.7s !important; }
  .lp-loop:not(.lp-armed) .lp-step--dash .lp-pulse { animation-delay: 1.7s !important; }
  .lp-status--live::before { animation: lp-breathe 2.4s ease-in-out infinite; }
}

/* ---------- tablet + mobile: vertical rail ---------- */
@media (max-width: 1080px) {
  .lp-head { margin-bottom: 52px; }
  .lp-flow { grid-template-columns: 1fr; max-width: 700px; }
  .lp-step { padding-left: 72px; padding-bottom: 96px; }
  .lp-step:last-child { padding-bottom: 0; }
  .lp-node { position: absolute; left: 0; top: 0; margin: 0; width: 48px; }
  .lp-seg {
    top: 56px; left: 24px; width: 1px; height: calc(100% - 64px);
    background-image: linear-gradient(180deg, var(--lp-line-2) 50%, transparent 50%); background-size: 1px 8px;
  }
  .lp-seg-fill { transform-origin: 50% 0; background: linear-gradient(180deg, rgba(106,108,255,0.25), var(--lp-accent) 50%, rgba(61,220,132,0.6)); }
  .lp-loop--light .lp-seg-fill { background: linear-gradient(180deg, rgba(76,79,215,0.35), #4c4fd7 50%, rgba(19,133,74,0.7)); }
  .lp-armed .lp-seg-fill { transform: scaleY(0); }
  .lp-pulse { left: 50%; top: 0; margin: -3.5px 0 0 -3.5px; }
  .lp-via { top: auto; bottom: 48px; left: 12px; transform: translateY(50%); }
  .lp-foot { grid-template-columns: 1fr; max-width: 700px; }
  .lp-again { max-width: 700px; justify-content: flex-start; text-align: left; }
}
@media (max-width: 1080px) and (prefers-reduced-motion: no-preference) {
  .lp-loop.lp-play .lp-pulse, .lp-loop:not(.lp-armed) .lp-pulse { animation-name: lp-run-y; }
}
@media (max-width: 560px) {
  .lp-loop { --lp-gap: 0px; }
  .lp-head { margin-bottom: 40px; }
  .lp-step { padding-left: 52px; padding-bottom: 88px; }
  .lp-node, .lp-dot { width: 38px; height: 38px; }
  .lp-node { height: 38px; }
  .lp-dot svg { width: 17px; height: 17px; }
  .lp-dot { box-shadow: 0 0 0 4px rgba(106,108,255,0.06), 0 0 20px rgba(106,108,255,0.16); }
  .lp-seg { top: 46px; left: 19px; height: calc(100% - 54px); }
  .lp-via { left: 7px; bottom: 44px; font-size: 11.5px; padding: 7px 13px 7px 7px; }
  .lp-card { padding: 20px 18px; border-radius: 20px; gap: 16px; }
  .lp-card--dash { padding-top: 0; }
  .lp-win { margin: 0 -18px; padding: 12px 16px; }
  .lp-card-head { flex-direction: column; gap: 12px; }
  .lp-card-title { font-size: 19px; }
  .lp-chat, .lp-gap { padding: 13px; }
  .lp-msg { font-size: 14px; }
  .lp-attach { margin-left: 0; }
  .lp-attach-go { display: none; }
  .lp-approve { flex-wrap: wrap; }
  .lp-foot li { padding: 20px 18px; }
  .lp-again { justify-content: flex-start; text-align: left; align-items: flex-start; }
  .lp-again svg { margin-top: 2px; }
}

/* =====================================================================
   il  |  The Davision Intelligence loop (case studies)
   One continuous loop, four stages. Symbolic: no data, no screens.
   The final, calm state is the default. case-loop.js draws the loop to
   the real layout (--il-mode: row | grid | col) and, when motion is
   allowed, sends light packets around it and lights each stage in turn.
   ===================================================================== */
.lp-loop[data-il] {
  --il-ink: #f4f4f7;
  --il-muted: #a3a3ad;
  --il-faint: #6f6f7a;
  --il-chip: rgba(255,255,255,0.035);
  --il-chip-line: rgba(255,255,255,0.1);
  --il-line: color-mix(in srgb, var(--il-a) 46%, rgba(255,255,255,0.14));
  --il-fill: rgba(255,255,255,0.018);
  --il-node-bg: radial-gradient(circle at 32% 24%, rgba(255,255,255,0.17), rgba(255,255,255,0.03) 62%), rgba(14,14,20,0.78);
  --il-node-line: rgba(255,255,255,0.16);
  --il-node-ink: var(--il-a2);
  --il-node-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 14px 34px -12px rgba(0,0,0,0.7);
  --il-pk: #fff;
  --il-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
.lp-loop[data-il]::before {
  background:
    radial-gradient(56% 48% at 50% 64%, color-mix(in srgb, var(--il-a) 15%, transparent), transparent 72%),
    radial-gradient(26% 30% at 8% 58%, color-mix(in srgb, var(--il-a) 8%, transparent), transparent 70%);
}
.lp-loop--light[data-il] {
  --il-ink: #111114;
  --il-muted: #55555d;
  --il-faint: #85858d;
  --il-chip: rgba(255,255,255,0.7);
  --il-chip-line: rgba(0,0,0,0.08);
  --il-line: color-mix(in srgb, var(--il-a) 42%, rgba(0,0,0,0.06));
  --il-fill: rgba(255,255,255,0.42);
  --il-node-bg: radial-gradient(circle at 32% 24%, #fff, rgba(255,255,255,0.82) 70%);
  --il-node-line: rgba(0,0,0,0.08);
  --il-node-ink: var(--il-a);
  --il-node-shadow: inset 0 1px 0 #fff, 0 14px 30px -14px rgba(20,34,44,0.42);
  --il-pk: var(--il-a);
}
.lp-loop--light[data-il]::before {
  background: radial-gradient(56% 48% at 50% 64%, color-mix(in srgb, var(--il-a) 11%, transparent), transparent 72%);
}
.il { color: var(--il-ink); }
.il svg { display: block; flex: none; }
.il-head .cs-lead { max-width: 720px; }
.il-head .cs-eyebrow { text-wrap: balance; }

/* ---------- the stage: loop + four stops ---------- */
.il-stage { --il-mode: row; position: relative; margin-top: 64px; }
.il-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.il-fill { fill: var(--il-fill); stroke: none; }
.il-line { fill: none; stroke-width: 1.5; }
.il-s1 { stop-color: var(--il-a2); stop-opacity: 0.8; }
.il-s2 { stop-color: var(--il-a); stop-opacity: 0.42; }
.il-s3 { stop-color: var(--il-a); stop-opacity: 0.2; }
.il--light .il-s1 { stop-color: var(--il-a); stop-opacity: 0.7; }
.il--light .il-s2 { stop-opacity: 0.36; }
.il-trail { fill: none; stroke: var(--il-a2); stroke-width: 2.4; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 5px var(--il-a)); }
.il--light .il-trail { stroke: var(--il-a); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--il-a) 60%, transparent)); }
/* before the script draws the loop (or without it): the same shape in CSS */
.il-stage::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  left: 0; right: 0; top: 32px; bottom: 0; border: 1.5px solid var(--il-line); border-radius: 40px; background: var(--il-fill);
}
.il-stage.il-drawn::before { display: none; }

.il-track { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0 44px 80px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, auto) 1fr; column-gap: 40px; }
.il-st { display: grid; grid-row: span 5; grid-template-rows: subgrid; align-content: start; min-width: 0; }
/* titles only (case studies): the loop closes closer under the words */
.il-track:has(.il-st--title) { padding-bottom: 44px; }

/* node: soft glass orb sitting on the loop */
.il-node { position: relative; width: 64px; height: 64px; }
.il-node b { position: relative; z-index: 2; display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--il-node-bg); border: 1px solid var(--il-node-line); box-shadow: var(--il-node-shadow); color: var(--il-node-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.il-node b svg { width: 26px; height: 26px; }
.il-glow { position: absolute; z-index: 1; inset: -18px; border-radius: 50%; opacity: 0.6;
  background: radial-gradient(circle, color-mix(in srgb, var(--il-a) 52%, transparent) 0%, transparent 68%); }
.il-halo { position: absolute; z-index: 1; inset: 0; border-radius: 50%; border: 1.5px solid var(--il-a2); opacity: 0; }
.il--light .il-halo { border-color: var(--il-a); }

/* words */
.il-k { display: block; margin-top: 24px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; color: var(--il-a2); font-variant-numeric: tabular-nums; }
.il--light .il-k { color: var(--il-a); }
.il-st h3 { margin: 10px 0 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--il-ink); }
.il-st p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.62; color: var(--il-muted); }

/* concepts, as icons and words */
.il-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-content: start; }
.il-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 99px;
  border: 1px solid var(--il-chip-line); background: var(--il-chip); font-size: 12.5px; line-height: 1.3; color: var(--il-muted);
  transition: border-color 0.4s, color 0.4s; }
.il-chips li svg { width: 14px; height: 14px; color: var(--il-a2); }
.il--light .il-chips li svg { color: var(--il-a); }

/* markers on the loop itself, placed by the script */
.il-mark { position: absolute; z-index: 2; left: var(--x, 0); top: var(--y, 0); transform: translate(-50%, -50%);
  display: none; align-items: center; gap: 7px; padding: 6px 13px 6px 10px; border-radius: 99px; white-space: nowrap;
  font-size: 12px; font-weight: 500; color: var(--il-muted);
  background: var(--il-node-bg); border: 1px solid var(--il-node-line); box-shadow: var(--il-node-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.il-mark svg { width: 15px; height: 15px; color: var(--il-a2); }
.il--light .il-mark svg { color: var(--il-a); }
.il-mark em { font-style: normal; }
.il-drawn .il-mark { display: inline-flex; }

/* light packets */
.il-pk { position: absolute; z-index: 1; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; opacity: 0;
  background: var(--il-pk); offset-rotate: 0deg; offset-anchor: center; pointer-events: none;
  box-shadow: 0 0 10px 2px color-mix(in srgb, var(--il-a) 80%, transparent); }
.il-pk--lead { width: 10px; height: 10px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--il-a) 35%, transparent), 0 0 22px 6px color-mix(in srgb, var(--il-a) 75%, transparent); }
.il-run .il-pk { opacity: 0.7; }
.il-run .il-pk--lead { opacity: 1; }
.il-run .il-trail { opacity: 1; }

/* conversations flowing in: the channels catch the light one after another */
@keyframes il-in {
  0%, 22%, 100% { border-color: var(--il-chip-line); color: var(--il-muted); box-shadow: none; }
  9% { border-color: color-mix(in srgb, var(--il-a) 70%, transparent); color: var(--il-ink);
       box-shadow: 0 0 18px -6px var(--il-a); }
}
.il-run .il-chips--in li { animation: il-in 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * 0.6s); }
.il-stage:not(.il-vis) .il-chips--in li { animation-play-state: paused; }

/* foot */
.il-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px; margin-top: 44px; }
.il-foot p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--il-muted); }
.il-foot p svg { width: 18px; height: 18px; color: var(--il-a2); }
.il-trust { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.il-certs .certs-list { gap: 12px 14px; }
.il--light .il-foot p svg { color: var(--il-a); }

/* ---------- tablet and phone: one vertical sequence, the loop comes back up the right ----------
   (a 2x2 square would put 04 before 03 in reading order, so below 1100 the stages stay in a column) */
@media (max-width: 1099px) {
  .il-stage { --il-mode: col; margin-top: 48px; }
  .il-stage::before { left: 31px; top: 0; bottom: 0; border-radius: 32px; }
  .il-track { display: block; padding: 44px 48px 60px 0; }
  .il-st { display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: none; column-gap: 26px; padding: 0 0 46px; }
  .il-st:last-child { padding-bottom: 10px; }
  .il-st > * { grid-column: 2; max-width: 600px; }
  .il-st .il-node { grid-column: 1; grid-row: 1 / span 4; margin: 0; width: 62px; height: 62px; }
  .il-k { margin-top: 6px; }
  .il-st h3 { margin-top: 6px; }
  /* stage 01 already says personal data is masked; on the narrow loop the marker would sit on its text */
  .il-drawn .il-mark--mask { display: none; }
}
@media (max-width: 699px) {
  .il-stage { margin-top: 40px; }
  .il-stage::before { left: 26px; border-radius: 28px; }
  .il-track { padding: 34px 30px 52px 0; }
  .il-st { grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; padding: 0 0 34px; }
  .il-st:last-child { padding-bottom: 6px; }
  .il-st .il-node { width: 52px; height: 52px; }
  .il-node b svg { width: 22px; height: 22px; }
  .il-k { margin-top: 4px; }
  .il-st h3 { font-size: 18px; }
  .il-st p { font-size: 14.5px; }
  .il-chips { margin-top: 14px; }
  .il-mark { font-size: 11.5px; padding: 5px 12px 5px 9px; }
  .il-mark svg { width: 14px; height: 14px; }
  .il-foot { margin-top: 32px; }
  .il-foot .cs-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .il-pk, .il-trail { display: none; }
  .il-chips--in li { animation: none !important; }
}
@media (max-width: 420px) {
  .il-foot .cs-btn { padding-left: 18px; padding-right: 18px; font-size: 12.5px; letter-spacing: 0.06em; }
}