/* The iECHO + AI deck (presentations/decks.py: AI), on top of deck.css and
   in its canvas pixels and tokens. It opens on the AI cycle (human-network
   .html, styled in deck.css) with a title treatment of its own (ai-cycle,
   below). */

/* Title: the AI cycle as the deck's opening (ai-cycle) ----------------- */
/* On step 0 the title waits higher than the cycle's centre, over its
   subtitle and the network + AI illustrations; from step 1 these clear and
   the slide carries on as on the overview. */
.s-amplify-title [data-center-until].is-centered {
  translate: var(--cx, 0) calc(var(--cy, 0) - 250px);
  scale: 1.45;
}
.amp-title {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0s;
}
.slide:not([data-on="0"]) .amp-title {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease,
    visibility 0s linear 0.5s;
}
.amp-title-sub {
  position: absolute;
  inset-inline: 0;
  top: 372px;
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  text-align: center;
}
.amp-title-art {
  position: absolute;
  inset-inline: 160px;
  top: 470px;
  bottom: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr);
  align-items: center;
}
.amp-title-art img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: contain;
}
.amp-title-plus {
  font-size: 110px;
  font-weight: 300;
  line-height: 1;
  color: var(--t);
  text-align: center;
}

/* Five principles for responsible AI ---------------------------------------- */
.pr-head .lead {
  max-width: 1200px;
  margin-top: 20px !important;
}
.pr-cols {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin: 50px 0 0;
  padding: 0;
  list-style: none;
}
.pr-cols li {
  position: relative;
  padding: 30px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.pr-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c) 13%, #fff);
  color: color-mix(in srgb, var(--c) 85%, #000);
}
.pr-icon svg,
.pr-commit svg {
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pr-cols h3 {
  margin-top: 22px;
  font-size: 27px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
  text-wrap: balance;
}
.pr-cols p {
  margin-top: 12px;
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.pr-commit {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 34px 0 0;
  padding: 22px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 22px 44px -18px rgb(0 45 52 / 0.35),
    0 6px 14px -8px rgb(0 45 52 / 0.2);
  list-style: none;
}
.pr-commit li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 21px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--t-dark);
}
.pr-commit svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 6px;
  border-radius: 50%;
  background: var(--t-tint);
  color: var(--t);
  stroke-width: 2.6;
}

/* A note under an illustrative mock-up. */
.ai-illustrative {
  position: absolute;
  inset-inline-start: 120px;
  bottom: 56px;
  font-size: 17px;
  font-style: italic;
  color: var(--ink-faint);
}

/* The phone: drawn, not captured (learner app, network insights) --------- */
.ai-phone {
  width: 450px;
  height: 900px;
  padding: 12px;
  border-radius: 54px;
  background: #1c2428;
  box-shadow:
    0 50px 90px -30px rgb(0 45 52 / 0.5),
    0 18px 36px -18px rgb(0 45 52 / 0.35);
}
.app-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 0 20px;
  border-radius: 43px;
  background: #f4f1ec;
}
/* The iECHO app itself (presentations/parts/iecho_phone_*.html), drawn to
   match the real mobile home page: a white page under a light header and
   view tabs, red-barred section headings, bordered session cards with a
   grey date block and teal titles, teal buttons and the bottom navigation.
   The AI features are sections of it, each marked with a sparkle. */
.ie-screen {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #fff;
}
.ie-status {
  display: flex;
  flex: none;
  justify-content: space-between;
  align-items: center;
  height: 44px;
  padding: 0 34px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}
.ie-status-icons {
  display: flex;
  gap: 5px;
}
.ie-status-icons i {
  width: 15px;
  height: 10px;
  border-radius: 3px;
  background: var(--navy);
}
.ie-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 12px;
}
.ie-avatar {
  position: relative;
  flex: none;
  width: 52px;
  height: 52px;
  border: 3px solid #e08a1e;
  border-radius: 50%;
}
.ie-avatar > svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.ie-menu {
  position: absolute;
  right: -6px;
  bottom: -6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--t);
}
.ie-menu svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.ie-hello {
  flex: 1;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}
.ie-hello span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-soft);
}
.ie-icon {
  flex: none;
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--t);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ie-tabs {
  display: grid;
  flex: none;
  grid-template-columns: 62px 1fr 1fr;
  align-items: stretch;
  background: #f1f2f2;
  font-size: 13px;
  font-weight: 500;
  color: var(--t);
}
.ie-tabs > span {
  display: grid;
  place-items: center;
  padding: 12px 4px;
  text-align: center;
  white-space: nowrap;
}
.ie-tabs .ie-switch {
  display: flex;
  justify-content: center;
  gap: 2px;
  color: var(--ink-soft);
}
.ie-switch svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ie-switch svg + svg {
  width: 13px;
}
.ie-tabs .is-on {
  border-bottom: 3px solid var(--t-dark);
  color: var(--t-dark);
}
.ie-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.ie-scroll {
  padding: 14px 16px 20px;
  transition: translate 0.8s var(--ease);
}
.ie-sec + .ie-sec {
  margin-top: 18px;
}
.ie-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding-inline-start: 10px;
  border-inline-start: 4px solid #c8102e;
  font-size: 19px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink);
}
/* The sparkle that marks AI inside the app. */
.ie-ai {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-inline-start: auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(120deg, #e8f3f4, #f3e9f2);
  color: #6e2c63;
  font-size: 11px;
  font-weight: 700;
}
.ie-ai svg,
.ie-sheet-title svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.ie-card {
  padding: 14px;
  border: 1.5px solid #d9dcdc;
  border-radius: 10px;
  background: #fff;
}
.ie-when {
  display: flex;
  gap: 12px;
}
.ie-date {
  display: grid;
  flex: none;
  place-items: center;
  align-content: center;
  width: 56px;
  height: 64px;
  border-radius: 5px;
  background: #f1f2f2;
  font-size: 12px;
  line-height: 1.15;
  color: var(--ink-soft);
}
.ie-date b {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.ie-card h5 {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--t);
}
.ie-time {
  margin-top: 4px !important;
  font-size: 13px;
  color: var(--ink-soft);
}
.ie-prog {
  margin-top: 10px !important;
  font-size: 13px;
  color: var(--ink);
}
.ie-prog a {
  color: var(--t);
}
.ie-recap {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--t-tint);
}
.ie-recap ul,
.ie-card ul {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.ie-recap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px !important;
}
.ie-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--t);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}
.ie-pill svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}
.ie-lang {
  font-size: 13px;
  font-weight: 700;
  color: var(--t-dark);
}
.ie-why {
  margin-top: 10px !important;
  font-size: 13px;
  font-weight: 600;
  color: #b8650a;
}
.ie-btn {
  margin-top: 12px !important;
  padding: 10px;
  border-radius: 5px;
  background: var(--t);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}
.ie-case {
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink);
}
.ie-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px !important;
}
.ie-options span {
  padding: 5px 10px;
  border: 1.5px solid #d9dcdc;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--t);
}
.ie-options .is-picked {
  border-color: var(--t);
  background: var(--t);
  color: #fff;
}
.ie-src {
  margin-top: 10px !important;
  font-size: 12px;
  font-style: italic;
  color: var(--ink-faint);
}
.ie-trend {
  border-color: #f2c79a;
  background: linear-gradient(180deg, #fff6ec, #fff 55%);
}
.ie-rising {
  font-size: 13px;
  font-weight: 600;
  color: #c07100;
}
.ie-trend h5 {
  margin-top: 2px;
  font-size: 17px;
}
.ie-meta {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.ie-sub {
  margin: 10px 0 4px !important;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.ie-expert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--t);
}
.ie-expert svg {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
.ie-nav {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 8px 6px 18px;
  border-top: 1px solid #e3e5e5;
  border-radius: 0 0 6px 6px;
  background: #fff;
  box-shadow: 0 -6px 16px -10px rgb(0 0 0 / 0.2);
}
.ie-nav > span {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
}
.ie-nav > span.is-on {
  color: var(--t);
}
.ie-nav > span.is-on::before {
  content: "";
  position: absolute;
  inset: -9px 6px auto;
  height: 3px;
  background: var(--t);
}
.ie-nav svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ie-nav .ie-fill {
  fill: currentColor;
}
/* On the learner slide, the home page scrolls to the current step's
   section, which stays bright while the rest dims (offsets measured from
   the drawn page). */
.s-learner .ie-sec {
  opacity: 0.35;
  transition: opacity 0.5s ease;
}
.s-learner .ie-sec.is-current {
  opacity: 1;
}
.slide[data-on="1"] .s-learner .ie-scroll {
  translate: 0 var(--scroll-1, 0);
}
.slide:is([data-on="2"], [data-on="3"]) .s-learner .ie-scroll {
  translate: 0 var(--scroll-2, 0);
}
/* The answer sheet slides up over the page on the last step. */
.ie-sheet {
  position: absolute;
  inset: auto 0 0;
  padding: 18px 18px 22px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -20px 40px -16px rgb(0 45 52 / 0.4);
  transition:
    translate 0.7s var(--ease),
    opacity 0.4s ease;
}
.ie-sheet.is-held {
  translate: 0 100%;
  opacity: 0;
}
.ie-sheet-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px !important;
  font-size: 14px;
  font-weight: 700;
  color: #6e2c63;
}
.ie-sheet .app-q {
  max-width: 280px;
}
.app-q {
  margin-inline-start: auto !important;
  width: fit-content;
  max-width: 300px;
  padding: 12px 16px;
  border-radius: 18px 18px 4px 18px;
  background: var(--t);
  color: #fff;
  font-size: 16px;
  line-height: 1.4;
}
.app-a {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 18px 18px 18px 4px;
  background: var(--t-tint);
}
.app-a p {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink);
}
.app-src {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px !important;
}
.app-src span {
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--t);
  font-size: 13px !important;
  font-weight: 700;
}

/* For learners: the steps beside the phone ------------------------------- */
.s-learner {
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 80px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.s-learner .lead {
  max-width: 900px;
  font-size: 26px;
}
.lr-steps {
  display: grid;
  gap: 10px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}
.lr-steps li {
  display: flex;
  gap: 20px;
  padding: 16px 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.5;
  transition:
    opacity 0.4s ease,
    background-color 0.4s ease,
    border-color 0.4s ease;
}
.lr-steps li.is-current {
  opacity: 1;
  border-color: var(--line);
  background: #fff;
}
.lr-steps li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--t-tint);
  color: var(--t);
  font-size: 20px;
  font-weight: 700;
}
.lr-steps li.is-current > span {
  background: var(--t);
  color: #fff;
}
.lr-steps h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.lr-steps p {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Insights no general AI can give: chatbot, phone, why ------------------- */
.s-insights {
  padding-top: 80px;
}
.ins-grid {
  display: grid;
  grid-template-columns: 520px 90px 400px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  margin-top: 36px;
}
.ins-generic {
  padding: 30px 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  filter: grayscale(1);
}
.ins-who {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink-faint);
}
.ins-q {
  margin: 18px 0 0 auto !important;
  width: fit-content;
  max-width: 380px;
  padding: 14px 18px;
  border-radius: 18px 18px 4px 18px;
  background: #5c5c5c;
  color: #fff;
  font-size: 20px;
  line-height: 1.4;
}
.ins-a {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 18px 18px 18px 4px;
  background: #efefef;
}
.ins-a p {
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ins-line {
  display: block;
  height: 12px;
  margin-top: 12px;
  border-radius: 6px;
  background: #dcdcdc;
}
.ins-line-short {
  width: 60%;
}
.ins-limits {
  display: grid;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}
.ins-limits li {
  position: relative;
  padding-inline-start: 34px;
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.ins-limits li::before {
  content: "×";
  position: absolute;
  inset-inline-start: 0;
  top: -3px;
  font-size: 28px;
  font-weight: 700;
  color: #888;
}
.ins-vs {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: var(--t);
}
.ai-phone-sm {
  width: 400px;
  height: 820px;
}
.app-spark {
  display: block;
  width: 100%;
  height: 66px;
  margin-top: 10px;
}
.app-spark-fill {
  fill: rgb(237 139 0 / 0.14);
}
.app-spark-line {
  fill: none;
  stroke: #ed8b00;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ins-why {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ins-why li {
  padding: 18px 24px;
  border-inline-start: 6px solid var(--t);
  border-radius: 0 10px 10px 0;
  background: #fff;
}
[dir="rtl"] .ins-why li {
  border-radius: 10px 0 0 10px;
}
.ins-why h3 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--t);
}
.ins-why p {
  margin-top: 4px;
  font-size: 21px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* Shared by the dark technical slides (Listening Network, architecture). */
.s-listen,
.s-arch {
  --glass: rgb(255 255 255 / 0.06);
  --glass-line: rgb(159 216 222 / 0.22);
  --mint: #9fd8de;
  background: radial-gradient(110% 80% at 55% 55%, #0b3a41 0%, var(--night) 70%);
  color: #fff;
  overflow: hidden;
}
.s-listen .headline,
.s-arch .headline {
  color: #fff;
}

/* The ECHO Listening Network: pipeline, graph, what it gives back --------- */
.s-listen {
  padding: 60px 100px 0;
}
.ln-head {
  display: flex;
  align-items: baseline;
  gap: 40px;
}
.ln-head .headline {
  flex: none;
}
.ln-head .lead {
  margin: 0 !important;
  max-width: none;
  font-size: 24px;
  color: rgb(255 255 255 / 0.75);
}
.ln-grid {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 420px;
  gap: 30px;
  align-items: center;
  margin-top: 20px;
}
.ln-pipe {
  position: relative;
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The line the five stages hang on, with a pulse running down it. */
.ln-pipe::before {
  content: "";
  position: absolute;
  inset-inline-start: 23px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: linear-gradient(var(--mint) 0 0) 0 -40px / 2px 40px no-repeat, rgb(159 216 222 / 0.25);
}
.slide.is-played .ln-pipe::before {
  animation: ln-flow 3s linear infinite;
}
@keyframes ln-flow {
  to {
    background-position: 0 calc(100% + 40px), 0 0;
  }
}
.ln-pipe li {
  position: relative;
  display: flex;
  gap: 18px;
  padding: 14px 18px 14px 0;
}
.ln-pipe li > span {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--mint);
  border-radius: 50%;
  background: var(--night);
  color: var(--mint);
  font-size: 20px;
  font-weight: 700;
}
.ln-pipe h3 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ln-pipe p {
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.7);
}
.ln-graph {
  position: relative;
}
.kg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 800px;
  overflow: visible;
}
.kg-edge {
  fill: none;
  stroke: rgb(159 216 222 / 0.35);
  stroke-width: 2;
  transition: stroke 0.5s ease, opacity 0.5s ease, stroke-width 0.5s ease;
}
.kg-node {
  --k: #4fa8b1;
  transform-box: fill-box;
  transform-origin: center;
}
.kg-node > circle {
  fill: color-mix(in srgb, var(--k) 28%, var(--night));
  stroke: var(--k);
  stroke-width: 2.5;
}
.kg-node text {
  font-size: 19px;
  font-weight: 600;
  fill: rgb(255 255 255 / 0.88);
  text-anchor: middle;
}
.kg-geo,
.kg-k-geo {
  --k: #4fa8b1;
}
.kg-hub,
.kg-k-hub {
  --k: #c27bb6;
}
.kg-program,
.kg-k-program {
  --k: #8f96d6;
}
.kg-disease,
.kg-k-disease {
  --k: #e07a5f;
}
.kg-expert,
.kg-k-expert {
  --k: #c9cb4a;
}
.kg-insight,
.kg-k-insight {
  --k: #f6a84a;
}
.kg-session,
.kg-k-session {
  --k: #8aa3a8;
}
.kg-insight > circle {
  fill: color-mix(in srgb, var(--k) 70%, var(--night));
}
.kg-node .kg-in {
  font-size: 19px;
  font-weight: 700;
  fill: #fff;
}
.kg-session > circle {
  fill: var(--k);
  stroke: none;
}
.kg-pulse circle {
  fill: none;
  stroke: #f6a84a;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.slide.is-played .ln-graph:not(.is-held) .kg-pulse circle {
  animation: ripple-soft 3.6s ease-out infinite;
}
.slide.is-played .ln-graph:not(.is-held) .kg-pulse circle:nth-child(2) {
  animation-delay: 1.8s;
}
/* Asking the network (steps 2 and 3): the signal's neighbourhood lights up,
   its edges carrying a current toward the signal; the rest dims. */
.slide:is([data-on="2"], [data-on="3"]) .kg-edge.kg-hot {
  stroke: #f6a84a;
  stroke-width: 3;
  stroke-dasharray: 0.04 0.025;
  animation: kg-current 6s linear infinite;
}
@keyframes kg-current {
  to {
    stroke-dashoffset: -1;
  }
}
.slide:is([data-on="2"], [data-on="3"]) .kg-edge:not(.kg-hot),
.slide:is([data-on="2"], [data-on="3"]) .kg-node:not(.kg-hot) {
  opacity: 0.22;
}
.kg-node {
  transition:
    opacity 0.5s ease,
    scale 0.7s var(--ease-pop);
}
.kg-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.kg-key li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.7);
}
.kg-key li::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--k);
}
.ln-side {
  display: grid;
  gap: 18px;
}
.ln-query {
  padding: 22px 24px;
  border: 1.5px solid rgb(246 168 74 / 0.6);
  border-radius: 14px;
  background: rgb(246 168 74 / 0.08);
  box-shadow: 0 0 60px -20px rgb(246 168 74 / 0.5);
}
.ln-ask {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.08);
  font-size: 17px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}
.ln-ask svg,
.ln-valid svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ln-hit {
  margin-top: 16px !important;
  font-size: 16px;
  font-weight: 700;
  color: #f6a84a;
}
.ln-query h3 {
  margin-top: 4px;
  font-size: 27px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ln-facts {
  display: flex;
  gap: 18px;
  margin-top: 12px !important;
  font-size: 17px;
  color: rgb(255 255 255 / 0.75);
}
.ln-facts b {
  font-size: 26px;
  color: #fff;
}
.ln-valid {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px !important;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  font-size: 17px;
  font-weight: 700;
  color: var(--mint);
}
.ln-out {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ln-out li {
  padding: 14px 20px;
  border-inline-start: 4px solid var(--mint);
  border-radius: 0 10px 10px 0;
  background: var(--glass);
}
[dir="rtl"] .ln-out li {
  border-radius: 10px 0 0 10px;
}
.ln-out h3 {
  font-size: 22px;
  font-weight: 700;
}
.ln-out p {
  margin-top: 4px;
  font-size: 17px;
  line-height: 1.4;
  color: rgb(255 255 255 / 0.72);
}

/* A team of AI agents for every ECHO practitioner -------------------------- */
/* The long title opens a little less enlarged than others, to keep its
   margins at the centre. */
.s-agents [data-center-until].is-centered {
  scale: 1.18;
}
.s-agents {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ag-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 44px;
}
.ag-col {
  padding: 24px 24px 26px;
  border: 1px solid color-mix(in srgb, var(--c) 16%, var(--bone));
  border-radius: 10px;
  background: color-mix(in srgb, var(--c) 7%, var(--bone));
}
.ag-col > h3 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--c) 82%, #000);
}
.ag-card {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.ag-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 13%, #fff);
  color: color-mix(in srgb, var(--c) 85%, #000);
}
.ag-icon svg,
.ag-base svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ag-card h4 {
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.ag-card p {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.35;
  color: var(--ink-soft);
}
.ag-base {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 30px !important;
  padding: 20px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 22px 44px -18px rgb(0 45 52 / 0.35),
    0 6px 14px -8px rgb(0 45 52 / 0.2);
  color: var(--t-dark);
  font-size: 24px;
  font-weight: 700;
}
.ag-base svg {
  color: var(--t);
}

/* The iECHO + AI platform, built outward from the core (ai-architecture) -- */
.s-ax {
  padding: 54px 100px 0;
}
.s-ax h3 {
  font-weight: 700;
  color: #fff;
}
.s-ax h3 small {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgb(255 255 255 / 0.6);
}
/* The core: three plain layers, centred on step 0, then to the start side. */
.ax-core {
  position: absolute;
  left: 110px;
  top: 375px;
  width: 400px;
  display: grid;
  gap: 12px;
}
.ax-core-name {
  margin-bottom: 4px !important;
  font-size: 22px;
  font-weight: 700;
  color: var(--mint);
  text-align: center;
}
.ax-layer {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border: 1.5px solid rgb(255 255 255 / 0.3);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.08);
}
.ax-layer svg {
  flex: none;
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--mint);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ax-layer h3 {
  font-size: 24px;
}
.ax-layer p {
  margin-top: 2px;
  font-size: 16px;
  color: rgb(255 255 255 / 0.68);
}
.ax-link {
  position: absolute;
  left: 518px;
  top: 548px;
  width: 112px;
  text-align: center;
}
.ax-link p {
  margin-bottom: 8px !important;
  font-size: 14px;
  font-weight: 700;
  color: var(--mint);
}
.ax-link-line {
  position: absolute;
  inset-inline: 0;
  top: 34px;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--mint) 0 8px, transparent 8px 14px) 0 0 / 28px 3px;
}
@keyframes ax-march {
  to {
    background-position: 28px 0;
  }
}
.slide.is-played .ax-link:not(.is-held) .ax-link-line {
  animation: ax-march 0.8s linear infinite;
}
.ax-agents,
.ax-harness,
.ax-kg,
.ax-gw {
  position: absolute;
  border-radius: 16px;
}
/* One harness, many agents. */
.ax-agents {
  left: 640px;
  top: 186px;
  width: 750px;
  height: 140px;
  padding: 18px 22px;
  border: 1px solid rgb(143 150 214 / 0.55);
  background: rgb(143 150 214 / 0.1);
}
.ax-agents h3 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 22px;
}
.ax-agents h3 small {
  display: inline;
}
.ax-agents p {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px !important;
}
.ax-agents span {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.92);
  color: #3d4486;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
/* The harness: the agent loop between its four modules. */
.ax-harness {
  left: 640px;
  top: 350px;
  width: 750px;
  height: 420px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 200px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 16px;
  padding: 20px 22px;
  border: 1.5px solid var(--mint);
  background: linear-gradient(135deg, rgb(0 122 134 / 0.45), rgb(0 122 134 / 0.14));
  box-shadow: 0 0 60px -14px rgb(79 168 177 / 0.65);
}
.ax-harness > h3 {
  grid-column: 1 / -1;
  font-size: 28px;
}
.ax-mods {
  display: grid;
  align-content: center;
  gap: 14px;
}
.ax-mods p {
  padding: 14px 16px;
  border-radius: 10px;
  background: rgb(6 24 30 / 0.55);
  font-size: 15px;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.7);
}
.ax-mods b {
  display: block;
  margin-bottom: 3px;
  font-size: 20px;
  color: #fff;
}
.ax-loop {
  align-self: center;
  width: 100%;
  height: auto;
  max-height: 320px;
  overflow: visible;
}
.ax-loop-track {
  fill: none;
  stroke: rgb(159 216 222 / 0.3);
  stroke-width: 3;
  stroke-dasharray: 3 9;
}
.ax-loop-run {
  fill: none;
  stroke: var(--mint);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 0.16 0.84;
  filter: drop-shadow(0 0 8px var(--mint));
}
@keyframes ax-run {
  to {
    stroke-dashoffset: -1;
  }
}
.slide.is-played .ax-harness:not(.is-held) .ax-loop-run {
  animation: ax-run 4s linear infinite;
}
.ax-loop-core circle {
  fill: var(--mint);
}
.ax-loop-core text {
  font-size: 22px;
  font-weight: 700;
  fill: var(--night);
  text-anchor: middle;
}
.ax-loop-stage circle {
  fill: var(--night);
  stroke: var(--mint);
  stroke-width: 3;
}
.ax-loop-stage text {
  font-size: 18px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
}
/* The knowledge graph that grounds them. */
.ax-kg {
  left: 1420px;
  top: 186px;
  width: 370px;
  height: 584px;
  padding: 20px 22px;
  border: 1px solid rgb(194 123 182 / 0.6);
  background: rgb(194 123 182 / 0.12);
}
.ax-kg h3 {
  font-size: 24px;
}
.ax-kg-art {
  display: block;
  width: 100%;
  height: auto;
  margin: 18px 0 10px;
}
.ax-kg-art path {
  fill: none;
  stroke: rgb(230 184 223 / 0.6);
  stroke-width: 2;
}
.ax-kg-art circle {
  stroke: rgb(255 255 255 / 0.8);
  stroke-width: 1.5;
}
.ax-kg-art .k-geo {
  fill: #4fa8b1;
}
.ax-kg-art .k-hub {
  fill: #c27bb6;
}
.ax-kg-art .k-prog {
  fill: #8f96d6;
}
.ax-kg-art .k-dis {
  fill: #e07a5f;
}
.ax-kg-art .k-ins {
  fill: #f6a84a;
  filter: drop-shadow(0 0 10px rgb(246 168 74 / 0.8));
}
.ax-kg ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ax-kg li {
  padding: 11px 14px;
  border-radius: 8px;
  background: rgb(255 255 255 / 0.07);
  font-size: 16px;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.85);
}
/* The LLM gateway that powers it all. */
.ax-gw {
  left: 640px;
  top: 796px;
  width: 1150px;
  height: 150px;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid rgb(246 168 74 / 0.6);
  background: rgb(246 168 74 / 0.1);
}
.ax-gw h3 {
  font-size: 26px;
}
.ax-gw p {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.ax-gw span {
  display: grid;
  place-items: center;
  height: 64px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.08);
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.ax-gw .ax-main {
  background: #f6a84a;
  color: var(--night);
}
/* Trust and safety, around the whole AI layer. */
.ax-frame {
  position: absolute;
  left: 606px;
  top: 158px;
  width: 1218px;
  height: 818px;
  border: 2px dashed rgb(224 122 95 / 0.8);
  border-radius: 24px;
  box-shadow:
    0 0 50px -10px rgb(224 122 95 / 0.35),
    inset 0 0 50px -20px rgb(224 122 95 / 0.35);
  pointer-events: none;
}
.ax-frame-tag {
  position: absolute;
  left: 30px;
  bottom: -22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  border-radius: 999px;
  background: #e07a5f;
  color: var(--night);
  font-size: 17px;
  font-weight: 700;
}
.ax-frame-tag svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ax-frame-tag span {
  padding: 2px 10px;
  border-radius: 999px;
  background: rgb(6 24 30 / 0.15);
  font-size: 14px;
}

/* Guiding health care through the AI transition (ai-implementation) ----- */
.s-im {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.s-im .lead {
  max-width: 1300px;
  margin-top: 18px !important;
  font-size: 25px;
}
.im-grid {
  display: grid;
  grid-template-columns: 640px minmax(0, 1fr);
  align-items: center;
  gap: 60px;
  margin-top: 24px;
}
.im-shift {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.im-shift li {
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.im-shift h3 {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.im-shift p {
  margin-top: 6px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.im-hub svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 470px;
  overflow: visible;
}
.im-spokes path {
  fill: none;
  stroke: var(--t-mid);
  stroke-width: 2.5;
  stroke-dasharray: 10;
}
.slide.is-played .im-hub:not(.is-held) .im-spokes path {
  animation: march 6s linear infinite;
}
.im-core,
.im-node {
  transform-box: fill-box;
  transform-origin: center;
}
.im-core > circle:not(.im-ripple) {
  fill: var(--t);
}
.im-ripple {
  fill: none;
  stroke: var(--t);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.slide.is-played .im-hub:not(.is-held) .im-ripple {
  animation: ripple-soft 4.4s ease-out infinite;
}
.slide.is-played .im-hub:not(.is-held) .im-ripple:nth-child(2) {
  animation-delay: 2.2s;
}
.im-core text {
  font-size: 26px;
  font-weight: 700;
  fill: #fff;
  text-anchor: middle;
}
.im-core .im-core-sub {
  font-size: 30px;
  letter-spacing: 0.04em;
}
.im-core .im-core-note {
  font-size: 15px;
  font-weight: 600;
  fill: rgb(255 255 255 / 0.8);
}
.im-node > circle {
  fill: #fff;
  stroke: var(--t-mid);
  stroke-width: 3;
}
.im-node text {
  font-size: 19px;
  font-weight: 700;
  fill: var(--navy);
  text-anchor: middle;
}
.im-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px !important;
}
.im-topics span {
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--t-tint);
  color: var(--t-dark);
  font-size: 19px;
  font-weight: 700;
}
/* The invitation (ai-invitation): the overview's closing panel, with the
   network's figures along the bottom. */
.s-invite .closing-copy {
  max-width: 1000px;
}
.invite-figures {
  position: absolute;
  inset-inline: 120px;
  bottom: 80px;
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 90px;
  margin: 0;
}
.invite-figures dt {
  font-size: 19px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.75);
}
.invite-figures dd {
  margin: 6px 0 0;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.03em;
}