/* Presentation player and slides (templates/presentations/, js/deck.js).
   Loaded only on presentation pages, on top of tailwind.css. Slides are laid
   out in pixels on a fixed 1920x1080 canvas that deck.js scales to the
   window, so every measurement below is in canvas pixels. Colors and type
   follow DESIGN.md: Montserrat, turquoise headlines, black body copy, warm
   off-white canvas, 4-8px corners and flat elevation. */

:root {
  --t: #007a86;
  --t-dark: #005f69;
  --t-tint: #e8f3f4;
  --t-soft: #cfe6e8;
  --t-mid: #4fa8b1;
  --red: #ba0c2f;
  --rose: #f7e3e7;
  --bone: #faf7f2;
  --sand: #f3ede3;
  --sand-deep: #e6d9c3;
  --brown: #8a6a3d;
  --line: #e2ddd4;
  --ink: #000;
  --ink-soft: #444;
  --ink-faint: #6f6a62;
  --navy: #1c1f3a;
  --navy-tint: #e8e9f1;
  --night: #06181e;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.5, 0.64, 1);
  --dir: 1;
}
[dir="rtl"] {
  --dir: -1;
}
html:has(.deck) {
  overflow: hidden;
  scrollbar-gutter: auto;
}

/* Player ----------------------------------------------------------------- */
.deck {
  --deck-bg: var(--bone);
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--deck-bg);
  transition: background-color 0.7s var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.deck[data-tone="dark"] {
  --deck-bg: var(--night);
}
.deck[data-tone="brand"],
.deck[data-tone="closing"] {
  --deck-bg: var(--t-dark);
}
.deck[data-tone="deep"] {
  --deck-bg: #04343a;
}
.deck[data-tone="sand"] {
  --deck-bg: var(--sand);
}
.deck-canvas {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin: -540px 0 0 -960px;
  transform: scale(var(--scale, 1));
  overflow: hidden;
  background: var(--bone);
  color: var(--ink);
  font-family: "Montserrat", "Montserrat Fallback", ui-sans-serif, system-ui, sans-serif;
}
/* The title slide's art runs edge to edge. This layer behind the canvas is
   three canvases wide and tall in canvas pixels, so the canvas sits in its
   middle cell. It holds a second copy of the title slide's background at
   exactly the same place, which the canvas covers except where the drawing
   overhangs the frame, so in a window wider than 16:9 the hills carry on
   past the canvas's edges. Past the drawing's own edges, bands of colour
   taken from its outermost columns carry the sky and ground to the window's
   edges. */
.deck-bleed {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5760px;
  height: 3240px;
  margin: -1620px 0 0 -2880px;
  transform: scale(var(--scale, 1));
  background:
    linear-gradient(
        var(--bone) 1622px,
        #b4d5d6 1622px 1693px,
        #7fbcc1 1693px 1759px,
        #5aabb2 1759px 1843px,
        #007e88 1843px
      )
      left top / 1811px 100% no-repeat,
    linear-gradient(
        var(--bone) 1606px,
        #b4d5d6 1606px 1681px,
        #7fbcc1 1681px 1747px,
        #5aabb2 1747px 1810px,
        #007e88 1810px
      )
      right top / 1831px 100% no-repeat,
    linear-gradient(var(--bone) 2160px, #007e88 2160px);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
/* Matches .title-bg: 2120x1145, its bottom on the canvas's bottom and its
   end edge 90px past the canvas's end edge. */
.deck-bleed img {
  position: absolute;
  max-width: none;
  left: 1810px;
  top: 1015px;
  width: 2120px;
  height: 1145px;
}
[dir="rtl"] .deck-bleed img {
  left: 1830px;
}
.deck[data-tone="hero"] .deck-bleed {
  opacity: 1;
}
/* The site's feature-list icon is turquoise and nudged down; on slides the
   icon takes its color and place from the chip it sits in. */
.deck .feature-icon {
  margin: 0;
  color: inherit;
}

/* Trademark line on every slide; its ink follows the slide's tone. */
.deck-disclaimer {
  position: absolute;
  inset-inline: 0;
  bottom: 22px;
  z-index: 4;
  margin: 0;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink-faint);
  pointer-events: none;
  transition: color 0.6s ease;
}
.deck[data-tone="hero"] .deck-disclaimer,
.deck[data-tone="brand"] .deck-disclaimer {
  color: rgb(255 255 255 / 0.78);
}
.deck[data-tone="dark"] .deck-disclaimer,
.deck[data-tone="deep"] .deck-disclaimer {
  color: rgb(255 255 255 / 0.55);
}

/* Slides crossfade; the motion lives in each slide's own entrances. */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s var(--ease),
    visibility 0s linear 0.6s;
}
.slide.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.7s var(--ease) 0.08s,
    visibility 0s;
}
/* Nothing loops or floats off screen. */
.slide:not(.is-active) *,
.slide:not(.is-active) *::before,
.slide:not(.is-active) *::after {
  animation-play-state: paused !important;
}

/* Entrances. Each [data-a] element starts in its "before" state and settles
   once the slide plays (.is-played), after its own --d delay. Elements held
   back for a later step (.is-held) stay in the before state. Individual
   transform properties (translate, scale, rotate) leave an element's own
   positioning transform alone. */
.slide [data-a] {
  transition:
    opacity 0.8s var(--ease),
    translate 1s var(--ease),
    scale 1s var(--ease),
    stroke-dashoffset 1.4s var(--ease);
  transition-delay: var(--d, 0s);
}
[data-a="fade"],
[data-a="rise"],
[data-a="scale"],
[data-a="pop"],
[data-a="left"],
[data-a="right"],
[data-a="grow"] {
  opacity: 0;
}
[data-a="rise"] {
  translate: 0 36px;
}
[data-a="scale"] {
  scale: 0.92;
}
[data-a="pop"] {
  scale: 0.4;
  transform-box: fill-box;
  transform-origin: center;
}
.slide [data-a="pop"] {
  transition-timing-function: var(--ease), var(--ease), var(--ease-pop), var(--ease);
  transition-duration: 0.6s, 0.6s, 0.7s, 0.6s;
}
[data-a="left"] {
  translate: calc(90px * var(--dir)) 0;
}
[data-a="right"] {
  translate: calc(-60px * var(--dir)) 0;
}
[data-a="grow"] {
  scale: 0.25 1;
}
/* A title that waits, larger, at the centre of the frame until a step
   (deck.js sets --cx/--cy from the layout), then glides into place. */
[data-center-until] {
  width: fit-content;
  transition:
    translate 0.9s var(--ease),
    scale 0.9s var(--ease);
}
[data-center-until].is-centered {
  translate: var(--cx, 0) var(--cy, 0);
  scale: 1.35;
}
/* Mosaic cards float in from their own side of the grid, slowly. */
[data-a="from-start"],
[data-a="from-end"],
[data-a="from-top"],
[data-a="from-bottom"] {
  opacity: 0;
}
[data-a="from-start"] {
  translate: calc(-280px * var(--dir)) 0;
}
[data-a="from-end"] {
  translate: calc(280px * var(--dir)) 0;
}
[data-a="from-top"] {
  translate: 0 -200px;
}
[data-a="from-bottom"] {
  translate: 0 200px;
}
.slide [data-a^="from-"] {
  transition-duration: 1.3s, 2.1s, 1s, 1.4s;
  transition-timing-function: ease, cubic-bezier(0.16, 1, 0.3, 1), ease, ease;
}
[data-a="draw"] {
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
}
.slide.is-played [data-a]:not(.is-held) {
  opacity: 1;
  translate: none;
  scale: none;
  stroke-dashoffset: 0;
}
/* Stepping back hides at once rather than waiting out entrance delays. */
.slide [data-a].is-held {
  transition-delay: 0s;
  transition-duration: 0.3s;
}

/* Motion typography: masked words rising in sequence (deck.js splits).
   Each word rises out of a mask that clips only below the line (the word
   starts there) and a little above it. Its sides stay open: with the
   headings' negative letter-spacing, a word's last glyph reaches past its
   box, and an overflow: hidden mask shaved it off. */
[data-a="words"] .w {
  display: inline-block;
  clip-path: inset(-0.25em -0.5em 0 -0.5em);
  vertical-align: top;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
[data-a="words"] .wi {
  display: inline-block;
  translate: 0 112%;
  transition: translate 0.95s var(--ease);
  transition-delay: calc(var(--d, 0s) + var(--i, 0) * 55ms);
}
.slide.is-played [data-a="words"]:not(.is-held) .wi {
  translate: none;
}
.slide [data-a="words"].is-held .wi {
  transition-delay: 0s;
  transition-duration: 0.3s;
}

@keyframes bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -14px;
  }
}
.float-a {
  animation: bob 7s ease-in-out infinite;
}
.float-b {
  animation: bob 9s ease-in-out 1.2s infinite;
}
@keyframes ripple {
  0% {
    opacity: 0.45;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 2.4;
  }
}
@keyframes march {
  to {
    stroke-dashoffset: -240;
  }
}
@keyframes flow {
  to {
    stroke-dashoffset: -24;
  }
}

/* Type and shared layout -------------------------------------------------- */
.s {
  position: absolute;
  inset: 0;
  padding: 120px 120px 110px;
}
.s h1,
.s h2,
.s h3,
.s p {
  margin: 0;
}
.display {
  font-size: 92px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--navy);
  text-wrap: balance;
}
.headline {
  font-size: 72px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--t);
  text-wrap: balance;
}
.headline-md {
  font-size: 58px;
  line-height: 1.12;
}
.headline-sm {
  font-size: 50px;
  line-height: 1.15;
}
.accent {
  color: var(--t);
}
.accent-light {
  color: #ffd9a3;
}
.lead {
  margin-top: 30px !important;
  font-size: 28px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 780px;
  text-wrap: pretty;
}
.lead-lg {
  font-size: 32px;
  line-height: 1.45;
}
.pull {
  margin-top: 26px !important;
  padding-inline-start: 24px;
  border-inline-start: 5px solid var(--t);
  font-size: 26px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 780px;
}
.pull strong {
  color: var(--ink);
}
.s-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 100px;
  align-items: center;
}
.col-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.art {
  width: 100%;
  max-height: 760px;
  object-fit: contain;
}
.mini,
.stat,
.tile {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.mini {
  padding: 26px 28px;
}
.mini svg {
  width: 36px;
  height: 36px;
  color: var(--t);
}
.mini h3 {
  margin-top: 14px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mini p {
  margin-top: 8px;
  font-size: 21px;
  line-height: 1.45;
}
.btn {
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
  padding: 20px 36px;
  font-size: 22px;
  font-weight: 700;
  text-decoration: none;
  transition: translate 0.25s var(--ease);
}
.btn:hover {
  translate: 0 -2px;
}
.btn-light {
  background: #fff;
  color: var(--t);
}
.btn-outline {
  border: 2px solid rgb(255 255 255 / 0.75);
  color: #fff;
  font-weight: 600;
}
.laptop-frame {
  border-radius: 22px;
  background: #1c2428;
  padding: 12px;
  box-shadow:
    0 40px 80px -24px rgb(0 45 52 / 0.45),
    0 18px 36px -18px rgb(0 45 52 / 0.35);
}
.laptop-frame img {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.phone-frame {
  border-radius: 34px;
  background: #1c2428;
  padding: 9px;
  box-shadow:
    0 32px 64px -20px rgb(0 45 52 / 0.5),
    0 12px 28px -12px rgb(0 45 52 / 0.4);
}
.phone-frame img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top;
  border-radius: 26px;
}
.checks {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.checks li {
  position: relative;
  padding-inline-start: 52px;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.35;
}
.checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--t-tint)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007a86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E")
    center / 20px no-repeat;
}

/* Focus: a closing statement on a pane of liquid glass, with the rest of the
   slide blurred behind it and two soft blobs of brand colour for the glass to
   refract. Used as a slide's last step (key objectives' vision, the AI
   principle). */
.focus {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgb(250 247 242 / 0.35);
}
/* The slide behind the glass is blurred with a filter on its own content,
   not a backdrop-filter on the overlay: Chrome drops backdrop-filter while
   an ancestor's opacity animates, so leaving a slide on its focus step
   flashed the slide sharp during the crossfade. A filter stays put, and an
   animation (rather than a transition) leaves the content's own
   transitions alone. */
@keyframes focus-blur {
  from {
    filter: blur(0);
  }
  to {
    filter: blur(14px);
  }
}
.s:has(> .focus:not(.is-held)) > :not(.focus, template) {
  animation: focus-blur 0.6s ease forwards;
}
.focus-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.55;
}
.focus-blob-a {
  left: 360px;
  top: 300px;
  width: 480px;
  height: 340px;
  background: radial-gradient(circle at 40% 40%, #4fa8b1, rgb(79 168 177 / 0) 70%);
}
.focus-blob-b {
  right: 380px;
  bottom: 320px;
  width: 460px;
  height: 320px;
  background: radial-gradient(circle at 60% 60%, #f6b98a, rgb(246 185 138 / 0) 70%);
}
.slide.is-played .focus:not(.is-held) .focus-blob-a {
  animation: bob 9s ease-in-out infinite;
}
.slide.is-played .focus:not(.is-held) .focus-blob-b {
  animation: bob 11s ease-in-out 1.5s infinite;
}
.focus-glass {
  position: relative;
  max-width: 1320px;
  padding: 80px 100px;
  border: 1.5px solid rgb(255 255 255 / 0.85);
  border-radius: 40px;
  background: linear-gradient(140deg, rgb(255 255 255 / 0.66) 0%, rgb(255 255 255 / 0.3) 100%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  box-shadow:
    0 50px 90px -40px rgb(0 45 52 / 0.4),
    inset 0 1.5px 0 rgb(255 255 255 / 0.95),
    inset 0 -24px 48px -30px rgb(0 122 134 / 0.28);
  text-align: center;
}
/* The specular sheen across the top of the glass. */
.focus-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 18% 0%, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 55%);
  pointer-events: none;
}
.focus-statement {
  position: relative;
  font-size: 66px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--navy);
  text-wrap: balance;
}

/* 1. Title: the home hero, edge to edge -------------------------------------- */
.s-title {
  padding: 0;
}
/* Drawn a little larger than the frame and pinned bottom-right, so the
   figures at the whiteboard sit clear of the centered headline. */
.title-bg {
  position: absolute;
  max-width: none; /* the site caps images at their container's width */
  inset-inline-end: -90px;
  bottom: 0;
  width: 2120px;
  height: 1145px;
  object-fit: cover;
  object-position: right bottom;
}
.title-logo {
  position: absolute;
  top: 44px;
  inset-inline-start: 100px;
  height: 88px;
  width: auto;
}
.title-copy {
  position: absolute;
  top: 100px;
  inset-inline: 0;
  margin-inline: auto;
  width: 1240px;
  text-align: center;
  isolation: isolate;
}
/* A soft pool of the canvas colour behind the copy, so the headline sits
   clear of the world map instead of on top of it. */
.title-copy::before {
  content: "";
  position: absolute;
  inset: -70px -160px -60px;
  z-index: -1;
  background: radial-gradient(closest-side, var(--bone) 70%, rgb(250 247 242 / 0) 100%);
}
.s-title .display {
  font-size: 68px;
  line-height: 1.14;
}
/* Spanish runs about a third longer; a wider, slightly smaller headline
   keeps it to two lines so the copy clears the laptop. */
html[lang="es"] .title-copy {
  width: 1440px;
}
html[lang="es"] .s-title .display {
  font-size: 62px;
}
.s-title .lead {
  margin-top: 34px !important;
  margin-inline: auto;
  max-width: 1080px;
  font-size: 24px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.title-laptop {
  position: absolute;
  left: 22%;
  top: 440px;
  width: 44%;
  z-index: 1;
}
.title-phone {
  position: absolute;
  left: 65.5%;
  top: 540px;
  width: 11%;
  z-index: 2;
}
.title-doctor {
  position: absolute;
  left: 60px;
  bottom: 0;
  width: 250px;
  z-index: 3;
}

/* 2. ECHO Model rings ----------------------------------------------------- */
.stage-list {
  list-style: none;
  margin: 44px 0 0;
  padding: 0;
  display: grid;
  gap: 26px;
}
.stage-list li {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.stage-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--t);
  color: var(--t);
  font-size: 22px;
  font-weight: 700;
}
.stage-list h3 {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.stage-list p {
  margin-top: 6px;
  font-size: 21px;
  line-height: 1.45;
  max-width: 660px;
}
.rings {
  width: 820px;
  height: 820px;
  overflow: visible;
}
.ring-outer {
  fill: #eef6f6;
}
.ring-mid {
  fill: var(--t-soft);
}
.ring-core {
  fill: #fff;
  stroke: var(--t);
  stroke-width: 3;
}
.ring-outer,
.ring-mid,
.ring-core {
  transform-box: fill-box;
  transform-origin: center;
}
.rings .spoke,
.rings .arc {
  fill: none;
  stroke-linecap: round;
}
.rings .spoke {
  stroke: #8fc4ca;
  stroke-width: 2.5;
}
/* Three dashed arcs between neighbouring participants: they fade in one
   after another on step 1, then drift slowly for the rest of the slide. */
.rings .arc {
  stroke: var(--t);
  stroke-width: 2.5;
  stroke-dasharray: 6 10;
}
.slide.is-played .rings .arc:not(.is-held) {
  animation: flow 7s linear infinite;
}
.node-ring {
  fill: #fff;
}
.hub-people {
  transform-box: fill-box;
  transform-origin: center;
}
.ring-label {
  font-size: 22px;
  font-weight: 700;
  fill: var(--t-dark);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--t-soft);
  stroke-width: 10px;
  stroke-linejoin: round;
}
.ring-label-core {
  stroke: #fff;
}
.ring-label-outer {
  stroke: #eef6f6;
}
.ring-echo circle {
  fill: none;
  stroke: var(--t);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.slide.is-played .ring-echo circle {
  animation: ripple 4.2s ease-out infinite;
}
.slide.is-played .ring-echo circle:nth-child(2) {
  animation-delay: 1.4s;
}
.slide.is-played .ring-echo circle:nth-child(3) {
  animation-delay: 2.8s;
}

/* 6. Loose tools pulling into iECHO (two steps on one slide) ----------------- */
.s-orbit {
  padding-top: 96px;
}
.orbit-head {
  position: relative;
  z-index: 3;
  height: 250px;
  margin-inline: auto;
  width: 1200px;
  text-align: center;
}
.orbit-beat {
  position: absolute;
  inset: 0;
  transition: opacity 0.5s ease;
}
.orbit-beat .lead {
  margin-inline: auto;
  max-width: 900px;
}
.orbit-beat[data-at]:not(.is-current) {
  opacity: 0;
  pointer-events: none;
}
/* Chips: loose across the frame (x0/y0, rotated) until step 1 pulls them to
   their orbit seat (x1/y1). The bob lives on the inner body so it keeps
   floating in orbit. The selectors carry .slide so this transition list
   outranks the generic [data-a] entrance rule, which would otherwise drop
   left/top from the list and make the chips jump instead of fly. */
.slide .chip {
  position: absolute;
  z-index: 2;
  inset-inline-start: var(--x0);
  top: var(--y0);
  transform: translate(-50%, -50%) rotate(var(--r0, 0deg));
  transition:
    left 1.4s cubic-bezier(0.65, 0, 0.3, 1) var(--d),
    right 1.4s cubic-bezier(0.65, 0, 0.3, 1) var(--d),
    top 1.4s cubic-bezier(0.65, 0, 0.3, 1) var(--d),
    transform 1.4s cubic-bezier(0.65, 0, 0.3, 1) var(--d),
    opacity 0.6s ease var(--d),
    scale 0.7s var(--ease-pop) var(--d);
}
[dir="rtl"] .slide .chip {
  transform: translate(50%, -50%) rotate(var(--r0, 0deg));
}
.slide[data-on="1"] .chip {
  inset-inline-start: var(--x1);
  top: var(--y1);
  transform: translate(-50%, -50%) rotate(0deg);
}
[dir="rtl"] .slide[data-on="1"] .chip {
  transform: translate(50%, -50%) rotate(0deg);
}
/* Stepping back: the chips scatter again at once, without the entrance delay. */
.slide[data-on="0"] .chip {
  transition-delay: 0s, 0s, 0s, 0s, var(--d), var(--d);
}
.chip-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 24px;
  background: #fff;
  border: 2px dashed #cfc8bc;
  border-radius: 8px;
  font-size: 23px;
  font-weight: 600;
  color: #4a463f;
  white-space: nowrap;
  box-shadow: 0 14px 30px -20px rgb(0 45 52 / 0.35);
  transition:
    border-color 0.6s ease,
    border-style 0s linear,
    color 0.6s ease;
}
.slide.is-played .chip:not(.is-held) .chip-body {
  animation: bob var(--bob, 7s) ease-in-out 1.2s infinite;
}
.chip-icon {
  display: flex;
}
.chip svg {
  width: 26px;
  height: 26px;
  color: #8a8275;
  transition: color 0.6s ease;
}
/* Once a chip has settled in orbit (flight is --d + 1.4s) it turns solid
   and takes the iECHO feature's name. */
.slide[data-on="1"] .chip-body {
  border: 2px solid var(--t);
  color: var(--ink);
  transition-delay: calc(var(--d) + 1.2s);
}
.slide[data-on="1"] .chip svg {
  color: var(--t);
  transition-delay: calc(var(--d) + 1.2s);
}
.chip-labels {
  display: grid;
}
.chip-labels > span {
  grid-area: 1 / 1;
  transition: opacity 0.45s ease;
}
.chip-new {
  opacity: 0;
}
.slide[data-on="1"] .chip-old {
  opacity: 0;
  transition-delay: calc(var(--d) + 1s);
}
.slide[data-on="1"] .chip-new {
  opacity: 1;
  transition-delay: calc(var(--d) + 1.3s);
}
.orbit-lines {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
}
[dir="rtl"] .orbit-lines {
  transform: scaleX(-1);
}
.orbit-path {
  fill: none;
  stroke: var(--t-soft);
  stroke-width: 2;
}
.orbit-spoke {
  fill: none;
  stroke: var(--t);
  stroke-width: 2.5;
  stroke-dasharray: 4 10;
  stroke-linecap: round;
  animation: flow-in 1.4s linear infinite;
}
@keyframes flow-in {
  to {
    stroke-dashoffset: 28;
  }
}
.core {
  position: absolute;
  inset-inline-start: 960px;
  top: 668px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 250px;
  height: 250px;
  margin-top: -125px;
  margin-inline-start: -125px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #0d95a2, var(--t) 55%, var(--t-dark));
  box-shadow: 0 30px 60px -24px rgb(0 60 68 / 0.55);
}
.core-logo {
  position: relative;
  width: 132px;
  border-radius: 8px;
  box-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.5);
}
.core-mark {
  position: relative;
  margin-top: 10px;
  font-size: 46px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
}
.core-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--t);
  opacity: 0;
}
.slide[data-on="1"].is-played .core-ripple {
  animation: ripple 3.6s ease-out 1.6s infinite;
}
.slide[data-on="1"].is-played .core-ripple:nth-child(2) {
  animation-delay: 2.8s;
}
.slide[data-on="1"].is-played .core-ripple:nth-child(3) {
  animation-delay: 4s;
}

/* 5. What is iECHO ---------------------------------------------------------- */
.s-what {
  grid-template-columns: 900px minmax(0, 1fr);
  gap: 60px;
}
.s-what .lead {
  max-width: none;
}
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}
.stat {
  padding: 26px 22px;
  text-align: center;
}
.stat-value {
  font-size: 54px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--t);
}
.stat-label {
  margin-top: 12px !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
}
.what-art {
  position: relative;
}
.what-art > div {
  width: 100%;
}
.what-art .art {
  position: relative;
  width: 100%;
  height: auto;
}
/* Soft rings pulsing outward (the AI cycle's centre). */
@keyframes ripple-soft {
  0% {
    opacity: 0.35;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.55;
  }
}

/* 3. Objectives ----------------------------------------------------------- */
.s-objectives {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 100px;
}
.s-objectives .headline {
  max-width: 1300px;
}
.objectives {
  position: relative;
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.objectives li {
  position: relative;
  padding: 24px 32px 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.objectives img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
}
.objective-num {
  position: absolute;
  top: 24px;
  inset-inline-start: 24px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--t);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.objectives h3 {
  margin-top: 24px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.objectives p {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Ripples behind the closing slide's art. */
.closing-ripples span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 0.35);
  opacity: 0;
}
.slide.is-played .closing-ripples span {
  animation: ripple-out 6s ease-out infinite;
}
.slide.is-played .closing-ripples span:nth-child(2) {
  animation-delay: 2s;
}
.slide.is-played .closing-ripples span:nth-child(3) {
  animation-delay: 4s;
}
@keyframes ripple-out {
  0% {
    opacity: 0.8;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 1.7;
  }
}

/* 7. Scale ------------------------------------------------------------------ */
.s-scale {
  grid-template-columns: 720px minmax(0, 1fr);
  gap: 70px;
}
.tree {
  position: relative;
  width: 900px;
  height: 560px;
}
.tree svg {
  position: absolute;
  inset: 0;
  width: 900px;
  height: 560px;
  overflow: visible;
}
.tree path {
  fill: none;
  stroke: #8fc4ca;
  stroke-width: 3;
}
.tree circle {
  fill: var(--t);
  transform-box: fill-box;
  transform-origin: center;
}
.tree-node {
  position: absolute;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  border-radius: 8px;
  text-align: center;
  font-weight: 700;
  line-height: 1.2;
}
[dir="rtl"] .tree-node {
  transform: translateX(50%);
}
.tree-top {
  width: 360px;
  height: 64px;
  background: var(--t);
  color: #fff;
  font-size: 22px;
}
.tree-hub {
  width: 210px;
  height: 60px;
  background: var(--t-tint);
  border: 2px solid var(--t);
  color: var(--t-dark);
  font-size: 21px;
}
.tree-program {
  width: 96px;
  height: 50px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  font-size: 17px;
  font-weight: 600;
}
.tree-group {
  width: 58px;
  height: 40px;
  border-radius: 6px;
  background: var(--sand-deep);
  color: var(--brown);
  font-size: 13px;
  font-weight: 700;
}
.tree-legend {
  position: absolute;
  bottom: -30px;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-faint);
}
.tree-legend-group {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  background: var(--sand-deep);
}
.tree-legend-dot {
  width: 12px;
  height: 12px;
  margin-inline-start: 18px;
  border-radius: 50%;
  background: var(--t);
}

/* 8. Key features: section divider before the tour ---------------------- */
.s-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kf-head {
  margin-inline: auto;
}
.kf-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) 110px minmax(0, 1fr);
  align-items: center;
  margin: 64px 0 0;
  padding: 0;
  list-style: none;
}
.kf-step {
  height: 100%;
}
.kf-step a {
  position: relative;
  display: block;
  height: 100%;
  padding: 24px 32px 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.3s ease,
    opacity 0.6s ease,
    filter 0.6s ease,
    transform 0.6s var(--ease),
    box-shadow 0.6s ease;
}
.kf-step a:hover {
  border-color: var(--t-mid);
}
/* The spotlight on the first stage before the tour begins: it lifts and
   takes the brand border while the rest of the row fades back. */
.kf-step.is-current a {
  border-color: var(--t);
  box-shadow:
    0 0 0 3px var(--t),
    0 24px 48px -20px rgb(0 0 0 / 0.3);
  transform: translateY(-12px);
}
.kf-steps:has(.is-current) .kf-step:not(.is-current) a,
.kf-steps:has(.is-current) .kf-arrow svg {
  opacity: 0.3;
  filter: grayscale(1);
}
.kf-step img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: contain;
}
.kf-step h3 {
  margin-top: 24px;
  font-size: 32px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.kf-step p {
  margin-top: 10px;
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* A plain caret between stages, drawn in as the next stage arrives. */
.kf-arrow svg {
  display: block;
  width: 44px;
  height: 88px;
  margin-inline: auto;
  overflow: visible;
  transition:
    opacity 0.6s ease,
    filter 0.6s ease;
}
[dir="rtl"] .kf-arrow svg {
  transform: scaleX(-1);
}
.kf-arrow path {
  fill: none;
  stroke: var(--t);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 9-13. Feature tour --------------------------------------------------------- */
.s-showcase {
  padding: 48px 120px 0;
}
.showcase-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.showcase-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  height: 90px;
}
.showcase-dots {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.showcase-dots button {
  display: block;
  width: 34px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--t-soft);
  cursor: pointer;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
.showcase-dots button::after {
  content: "";
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 100%);
  background: var(--t);
  transition: width 0.25s linear;
}
.showcase-dots button.is-current {
  width: 72px;
}
.browser-xl {
  position: relative;
  width: 1440px;
  margin: 12px auto 0;
}
/* Recordings run from 1.5:1 to 2.25:1; a 2:1 stage keeps the letterbox small
   either way, and it is white like the app itself. */
.browser-xl .browser-screen {
  aspect-ratio: 2 / 1;
}
.browser {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 40px 80px -36px rgb(0 45 52 / 0.4);
}
/* Replays the current clip; it fills with turquoise once the clip ends. */
.replay {
  position: absolute;
  top: 6px;
  inset-inline-end: 12px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}
.replay svg {
  width: 16px;
  height: 16px;
}
.replay:hover,
.replay.is-ended {
  border-color: var(--t);
  background: var(--t);
  color: #fff;
}
.replay:focus-visible {
  outline: 2px solid var(--t);
  outline-offset: 2px;
}
.replay[hidden] {
  display: none;
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 18px;
  background: #f4f1ec;
  border-bottom: 1px solid var(--line);
}
.browser-bar > span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line);
}
.browser-bar p {
  margin-inline-start: 24px !important;
  width: 380px;
  padding: 5px 18px;
  border-radius: 6px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
}
.browser-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fff;
}
.browser-screen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.browser-screen video {
  object-fit: contain;
  object-position: top center;
}
.browser-screen video.is-current {
  opacity: 1;
}
.showcase-caption {
  position: relative;
  height: 64px;
  margin-top: 26px;
}
.caption {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  font-size: 30px;
  font-weight: 600;
  color: var(--navy);
  opacity: 0;
  translate: 0 10px;
  transition:
    opacity 0.4s ease,
    translate 0.5s var(--ease);
}
.caption.is-current {
  opacity: 1;
  translate: none;
}
.caption-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--t-tint);
  color: var(--t);
}
.caption-icon svg {
  width: 26px;
  height: 26px;
}
/* A caption with a qualifier under it, such as a feature's availability. */
.caption-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.caption-note {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink-soft);
}
/* One backdrop per chapter so the five tour slides read as siblings, not
   copies: a tinted band, the dashed connection swash, a dot grid, a navy
   band, and the brand gradient for participants. */
.s-showcase-run .showcase-deco {
  background: linear-gradient(180deg, var(--t-tint) 0, var(--t-tint) 560px, transparent 560px);
}
.s-showcase-connect .showcase-deco {
  background:
    radial-gradient(circle at 12% 30%, rgb(0 122 134 / 0.14) 0, transparent 34%),
    radial-gradient(circle at 92% 70%, rgb(186 12 47 / 0.08) 0, transparent 30%),
    var(--sand);
}
.s-showcase-connect .showcase-deco::before,
.s-showcase-connect .showcase-deco::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px dashed rgb(0 122 134 / 0.3);
}
.s-showcase-connect .showcase-deco::before {
  width: 900px;
  height: 900px;
  inset-inline-start: -380px;
  top: 300px;
}
.s-showcase-connect .showcase-deco::after {
  width: 700px;
  height: 700px;
  inset-inline-end: -300px;
  top: -260px;
}
/* A step that belongs on a phone (WhatsApp) swaps the browser for one. */
.showcase-stage {
  position: relative;
}
.stage-browser,
.showcase-phone {
  transition:
    opacity 0.5s ease,
    scale 0.6s var(--ease);
}
.slide[data-on="5"] .stage-browser {
  opacity: 0;
  scale: 0.96;
}
.showcase-phone {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 360px;
  translate: -50% 0;
  opacity: 0;
  scale: 0.94;
}
.showcase-phone.is-current {
  opacity: 1;
  scale: none;
}
.showcase-phone img {
  aspect-ratio: 1290 / 2796;
}
.s-showcase-measure .showcase-deco {
  background-color: var(--bone);
  background-image: radial-gradient(rgb(0 122 134 / 0.22) 1.6px, transparent 1.6px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 620px, transparent 900px);
  mask-image: linear-gradient(180deg, #000 0, #000 620px, transparent 900px);
}
.s-showcase-govern .showcase-deco {
  background: linear-gradient(180deg, var(--navy) 0, var(--navy) 470px, transparent 470px);
}
.s-showcase-govern .headline,
.s-showcase-participants .headline {
  color: #fff;
}
.s-showcase-govern .showcase-dots button,
.s-showcase-participants .showcase-dots button {
  background: rgb(255 255 255 / 0.3);
}
.s-showcase-govern .showcase-dots button::after,
.s-showcase-participants .showcase-dots button::after {
  background: #fff;
}
.s-showcase-participants .showcase-deco {
  background: linear-gradient(135deg, #0a8794 0%, var(--t) 50%, var(--t-dark) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 520px, transparent 520px);
  mask-image: linear-gradient(180deg, #000 0, #000 520px, transparent 520px);
}
.s-showcase-participants .browser-xl {
  width: 1260px;
  margin-inline-start: 120px;
}
.participant-phone {
  position: absolute;
  inset-inline-end: 130px;
  bottom: 70px;
  z-index: 2;
  width: 250px;
}
.stores {
  position: absolute;
  inset-inline-start: 120px;
  bottom: 62px;
  display: flex;
  gap: 12px;
}
.stores img {
  height: 48px;
  width: auto;
}
.s-showcase-participants .showcase-caption {
  width: 1260px;
  margin-inline-start: 120px;
}

/* 14 and 20. Mosaics: a 6x4 grid of cards around a centre tile, in a light
   (feature summary) and a dark teal (security and privacy) variant. ------ */
.s-mosaic {
  padding: 52px 120px 0;
}
.mosaic-head {
  height: 78px;
}
.mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 196px);
  gap: 16px;
  margin-top: 16px;
}
.tile-m {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 22px 24px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line);
  transform-origin: center;
}
.tile-m h3 {
  position: relative;
  z-index: 1;
  font-size: 21px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
  text-wrap: balance;
}
.tile-m.w2 {
  grid-column: span 2;
}
.tile-icon {
  position: absolute;
  inset-inline-end: 20px;
  bottom: 18px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--t-tint);
  color: var(--t);
}
.tile-icon svg {
  width: 28px;
  height: 28px;
}
/* Tinted tiles. Their borders melt into the fill. */
.tile-m.tone-tint {
  background: var(--t-tint);
  border-color: var(--t-tint);
}
.tile-m.tone-sand {
  background: var(--sand);
  border-color: var(--sand);
}
.tone-tint .tile-icon,
.tone-sand .tile-icon {
  background: #fff;
}
.tone-sand .tile-icon {
  color: var(--brown);
}
.tile-m.tone-navy {
  background: var(--navy);
  border-color: var(--navy);
}
.tile-m.tone-navy h3 {
  color: #fff;
}
/* The feature summary: no headline, the grid filling the frame, and white
   cards standing out on a sand ground with a firmer edge. The sand tiles
   go a shade deeper so they still read as tiles. */
.s-mosaic-full {
  padding: 48px 56px 64px;
  background: var(--sand);
}
.s-mosaic-full .mosaic {
  height: 100%;
  margin-top: 0;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 18px;
}
.s-mosaic-full .tile-m {
  border-color: var(--sand-deep);
}
.s-mosaic-full .tile-m.tone-sand {
  background: var(--sand-deep);
  border-color: var(--sand-deep);
}
.s-mosaic-full .tile-m h3 {
  font-size: 24px;
}
/* Wide tiles: the title on the left, the picture on the right. */
.tile-split h3 {
  max-width: 50%;
  font-size: 23px;
}
.tile-art {
  position: absolute;
  inset-inline-end: 20px;
  top: 50%;
  translate: 0 -50%;
  height: 76%;
  width: auto;
  max-width: 52%;
  object-fit: contain;
}
.tile-m:not(.w2) .tile-art {
  top: auto;
  bottom: 12px;
  translate: none;
  height: 58%;
}
/* The desktop app in a window that runs off the tile's bottom edge. */
.tile-window {
  position: absolute;
  inset-inline-end: 24px;
  top: 28px;
  width: 52%;
  height: 210px;
  overflow: hidden;
  border: 1px solid rgb(0 95 105 / 0.18);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 36px -20px rgb(0 45 52 / 0.45);
}
.tile-window img {
  display: block;
  width: 170%;
  max-width: none;
}
/* The phone stands up from the bottom of its tile, under the title. */
.tile-phone {
  position: absolute;
  inset-inline-end: 26px;
  top: 96px;
  width: 92px;
  padding: 5px;
  border-radius: 16px;
  background: #fff;
  aspect-ratio: 9 / 19;
  object-fit: cover;
  object-position: top;
  box-shadow: 0 -10px 30px -12px rgb(0 0 0 / 0.5);
}
/* Small pieces of the product in place of an icon. */
.tile-pill {
  position: absolute;
  inset-inline-start: 24px;
  bottom: 22px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: #0a672b;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.tile-pill svg {
  width: 17px;
  height: 17px;
}
.tile-chips {
  position: absolute;
  inset-inline-start: 24px;
  bottom: 22px;
  display: flex;
  gap: 8px;
}
.tile-chips span {
  padding: 7px 12px;
  border-radius: 6px;
  background: #fff;
  color: var(--t-dark);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.tile-roll {
  position: absolute;
  inset-inline-start: 24px;
  bottom: 22px;
  display: flex;
  align-items: center;
}
.tile-roll > svg {
  width: 52px;
  height: 52px;
  margin-inline-end: -12px;
  border: 3px solid #fff;
  border-radius: 50%;
}
.tile-roll-check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-inline-start: 22px;
  border-radius: 50%;
  background: #0a672b;
}
.tile-roll-check svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-tree {
  position: absolute;
  inset-inline-start: 24px;
  bottom: 22px;
  width: 150px;
}
.tile-tree path {
  fill: none;
  stroke: #8fc4ca;
  stroke-width: 2;
}
.tile-tree rect {
  fill: var(--t);
}
.tile-tree .tile-tree-hub {
  fill: var(--t-soft);
}
.tile-stat {
  justify-content: flex-end;
}
.tile-stat .tile-big {
  font-size: 64px;
}
.tile-stat h3 {
  margin-top: 6px;
}
.tile-hello {
  position: absolute;
  top: 22px;
  inset-inline-start: 24px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}
.tile-center {
  grid-column: 3 / span 2;
  grid-row: 2 / span 2;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  padding: 40px;
  border: 0;
  background: linear-gradient(135deg, #0d95a2 0%, var(--t) 50%, var(--t-dark) 100%);
  color: #fff;
  text-align: center;
}
/* The feature summary's centre: the app on a phone beside the name. */
.tile-m.tile-center-app {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 44px;
  padding: 30px 44px;
  text-align: start;
}
.app-phone {
  position: relative;
  flex: none;
  width: 150px;
  aspect-ratio: 9 / 19;
  padding: 7px;
  border-radius: 28px;
  background: #10191c;
  box-shadow:
    inset 0 0 0 1.5px rgb(255 255 255 / 0.14),
    0 26px 44px -18px rgb(0 20 24 / 0.65);
}
.app-phone::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 1;
  width: 42px;
  height: 10px;
  translate: -50% 0;
  border-radius: 6px;
  background: #10191c;
}
.app-phone-screen {
  display: grid;
  place-items: center;
  height: 100%;
  border-radius: 22px;
  background: #fff;
}
.app-phone-screen img {
  width: 80%;
}
.tile-center-app .tile-mark {
  font-size: 68px;
}
.tile-center-app .tile-tag {
  margin-top: 10px;
  max-width: 250px;
  font-size: 20px;
  line-height: 1.4;
}
/* A partner's logo on a white plate, where an icon would sit. */
.tile-logo {
  position: absolute;
  inset-inline-end: 20px;
  bottom: 18px;
  display: grid;
  place-items: center;
  height: 56px;
  padding: 0 10px;
  border-radius: 10px;
  background: #fff;
}
.tile-logo img {
  height: 44px;
  width: auto;
}
/* Badge cards as mosaic tiles (see .badge below). */
.s-mosaic .tile-m.badge {
  justify-content: flex-start;
  padding: 0;
  border-color: transparent;
  background: #f2f0eb;
}
.s-mosaic .tile-m.badge svg {
  height: 112px;
}
.s-mosaic .badge .badge-name {
  margin-top: 13px;
  font-size: 24px;
}
/* On the dark mosaic they wear the same translucent card as their
   neighbours: white emblem and name, no turquoise band. */
.s-mosaic-dark .tile-m.badge {
  border-color: rgb(255 255 255 / 0.1);
  background: rgb(255 255 255 / 0.07);
}
.s-mosaic-dark .tile-m.badge svg {
  background: none;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
}
.s-mosaic-dark .badge .badge-name {
  color: #fff;
}
.s-mosaic-dark .badge .badge-kind {
  color: rgb(255 255 255 / 0.6);
}
.tile-mark {
  font-size: 108px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
}
.tile-mark-sm {
  font-size: 44px;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.tile-tag {
  font-size: 20px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
  text-wrap: balance;
}
.tile-center svg {
  width: 88px;
  height: 88px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tile-big {
  font-size: 40px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--t);
}
.mosaic > :nth-child(7) {
  --d: 0.15s;
}
.mosaic > :nth-child(6) {
  --d: 0.22s;
}
.mosaic > :nth-child(8) {
  --d: 0.29s;
}
.mosaic > :nth-child(2) {
  --d: 0.36s;
}
.mosaic > :nth-child(3) {
  --d: 0.43s;
}
.mosaic > :nth-child(10) {
  --d: 0.50s;
}
.mosaic > :nth-child(11) {
  --d: 0.57s;
}
.mosaic > :nth-child(1) {
  --d: 0.64s;
}
.mosaic > :nth-child(4) {
  --d: 0.71s;
}
.mosaic > :nth-child(9) {
  --d: 0.78s;
}
.mosaic > :nth-child(12) {
  --d: 0.85s;
}
.mosaic > :nth-child(5) {
  --d: 0.92s;
}
.mosaic > :nth-child(13) {
  --d: 0.99s;
}
.mosaic > :nth-child(14) {
  --d: 1.06s;
}
.mosaic > :nth-child(15) {
  --d: 1.13s;
}
.mosaic > :nth-child(16) {
  --d: 1.20s;
}
/* Dark variant: dark teal canvas, dark cards a shade lighter than it, light
   text. */
.s-mosaic-dark {
  background: linear-gradient(135deg, #073f47 0%, #03262b 100%);
}
.s-mosaic-dark .headline {
  color: #fff;
}
.s-mosaic-dark .tile-m {
  background: rgb(255 255 255 / 0.07);
  border-color: rgb(255 255 255 / 0.1);
}
.s-mosaic-dark .tile-m h3 {
  color: #fff;
}
.s-mosaic-dark .tile-icon {
  background: rgb(159 216 222 / 0.14);
  color: #9fd8de;
}
.s-mosaic-dark .tile-roll > svg {
  border-color: #0b3a41;
}
.tile-roll-lock {
  background: #9fd8de;
  color: #03262b;
}
.tile-roll-lock svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
/* A one-time code, as the sign-in screen asks for it. */
.tile-code {
  position: absolute;
  inset-inline-start: 24px;
  bottom: 22px;
  display: flex;
  gap: 6px;
  direction: ltr;
}
.tile-code span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 40px;
  border-radius: 6px;
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(159 216 222 / 0.3);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
/* The six NIST functions, in the colours of the wheel on slide 19. */
.tile-csf {
  position: absolute;
  inset-inline: 24px;
  bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tile-csf span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.tile-csf span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c);
}
.s-mosaic-dark .tile-big {
  color: #9fd8de;
}
/* The centre stays as quiet as its neighbours: the same translucent white. */
.s-mosaic-dark .tile-center {
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.1);
}
.tile-center-trust .tile-tag {
  color: rgb(255 255 255 / 0.75);
}

/* 15. Outcomes pyramid ------------------------------------------------------ */
.s-outcomes {
  padding-top: 60px;
}
.outcomes-head .lead {
  margin-top: 18px !important;
  max-width: 1100px;
  font-size: 26px;
}
.pyramid {
  position: absolute;
  top: 0;
  inset-inline-start: 120px;
  width: 1700px;
  height: 1000px;
}
.pyramid-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 1100px;
  height: 900px;
  overflow: visible;
}
.pyramid-lines path {
  fill: none;
  stroke: #7fbfc5;
  stroke-width: 2;
}
.level {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 78px;
  padding-inline: 52px 14px;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1.15;
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  box-shadow: 0 10px 24px -18px rgb(0 45 52 / 0.35);
  transform-origin: center;
}
.level-num {
  position: absolute;
  inset-inline-start: 18px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  font-size: 15px;
  color: var(--t-dark);
}
.level-1 {
  background: #dcedee;
}
.level-2 {
  background: #c4e1e4;
}
.level-3 {
  background: #a4d2d7;
}
.level-4 {
  background: #6fb8bf;
  color: #fff;
}
.level-5 {
  background: #2a929d;
  color: #fff;
}
.level-6 {
  background: var(--t);
  color: #fff;
}
.level-7 {
  background: var(--t-dark);
  color: #fff;
}
.level-4 .level-num,
.level-5 .level-num,
.level-6 .level-num,
.level-7 .level-num {
  background: rgb(255 255 255 / 0.2);
  color: #fff;
}
.callout {
  position: absolute;
  left: 1030px;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 660px;
  height: 84px;
  padding: 0 22px;
  transform: translateY(-50%);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.callout-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--t-tint);
  color: var(--t);
}
.callout-icon svg {
  width: 24px;
  height: 24px;
}
.callout h3 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.callout p {
  margin-top: 3px;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ink-soft);
}
.footnote {
  position: absolute;
  bottom: 52px;
  inset-inline-start: 120px;
  font-size: 15px;
  color: var(--ink-faint);
}
[dir="rtl"] .pyramid {
  /* Canvas-coordinate diagram: mirror it and turn its labels back. */
  transform: scaleX(-1);
}
[dir="rtl"] .pyramid .level,
[dir="rtl"] .pyramid .callout {
  transform: scaleX(-1);
}
[dir="rtl"] .pyramid .callout {
  transform: scaleX(-1) translateY(-50%);
}

/* 16. Accessibility (everyone, everywhere) ------------------------------------------------- */
.s-inclusive {
  display: grid;
  grid-template-columns: 820px minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.lang-panel {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 20px 28px;
  border-radius: 8px;
  background: var(--t-tint);
}
.lang-cycle {
  position: relative;
  flex: 1;
  height: 150px;
}
.lang-cycle > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 84px;
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--t);
  opacity: 0;
  translate: 0 40px;
  transition:
    opacity 0.5s ease,
    translate 0.7s var(--ease);
}
.lang-cycle > span.is-current {
  opacity: 1;
  translate: none;
}
.lang-art {
  flex: none;
  width: 260px;
  mix-blend-mode: multiply;
}
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.tile {
  --c: var(--t);
  --c-bg: var(--t-tint);
  padding: 30px 32px 34px;
}
.tile-sand {
  --c: var(--brown);
  --c-bg: var(--sand);
}
.tile-navy {
  --c: var(--navy);
  --c-bg: var(--navy-tint);
}
.tile-rose {
  --c: var(--red);
  --c-bg: var(--rose);
}
.tile svg {
  width: 36px;
  height: 36px;
  color: var(--c);
}
.tile-value {
  margin-top: 16px !important;
  font-size: 44px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--c);
}
.tile h3 {
  margin-top: 10px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.tile p:not(.tile-value) {
  margin-top: 8px;
  font-size: 22px;
  line-height: 1.45;
}

/* AI augmenting the ECHO model: the knowledge cycle (the iECHO + AI deck's title, ai-cycle) */
.s-amplify {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 72px 110px 80px;
}
.amp-head .headline {
  text-align: center;
}
/* Movement 1: people and AI side by side, under the title. It clears once
   the cycle arrives (step 3 on). */
.amp-intro {
  position: absolute;
  inset: 200px 110px 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0s;
}
.slide:is([data-on="3"], [data-on="4"], [data-on="5"], [data-on="6"], [data-on="7"], [data-on="8"]) .amp-intro {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}
.amp-intro .lead {
  margin-top: 0 !important;
  max-width: 1120px;
  font-size: 30px;
  text-align: center;
}
.amp-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
  align-items: stretch;
  width: 100%;
  max-width: 1520px;
  margin-top: 44px;
}
.amp-card {
  padding: 30px 40px 38px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.amp-card img {
  display: block;
  width: 100%;
  height: 330px;
  object-fit: contain;
}
.amp-card h3 {
  margin-top: 22px !important;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--navy);
}
.amp-card p {
  margin: 12px auto 0 !important;
  max-width: 600px;
  font-size: 23px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.amp-plus {
  align-self: center;
  font-size: 96px;
  font-weight: 300;
  line-height: 1;
  color: var(--t);
  text-align: center;
}
/* Movements 2 and 3: the cycle at the centre, each stage's card on the side
   its node sits. */
.amp-cycle {
  position: absolute;
  inset: 190px 80px 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 800px minmax(0, 1fr);
  gap: 50px;
  align-items: center;
}
.amp-cycle .cycle {
  width: 800px;
  height: 800px;
}
.cycle-side {
  align-content: space-between;
  height: 620px;
  margin: 0 !important;
}
/* Each stage wears its colour in the cycle, darkened for type. */
.cycle-list {
  gap: 20px;
  margin-top: 34px;
}
.cycle-list .stage-num {
  border-color: var(--c);
  color: color-mix(in srgb, var(--c) 78%, #000);
}
.cycle-list p {
  font-size: 20px;
}
.cycle {
  width: 860px;
  height: 860px;
  overflow: visible;
}
.cycle-track {
  fill: none;
  stroke: var(--line);
  stroke-width: 2;
  stroke-dasharray: 2 10;
  stroke-linecap: round;
}
.cycle-halo {
  fill: var(--t-tint);
  transform-box: fill-box;
  transform-origin: center;
}
.cycle-core circle {
  fill: var(--t);
}
.cycle-core,
.cycle-node {
  transform-box: fill-box;
  transform-origin: center;
}
.cycle-core-mark {
  font-size: 46px;
  font-weight: 700;
  letter-spacing: -0.04em;
  fill: #fff;
  text-anchor: middle;
}
.cycle-echo circle {
  fill: none;
  stroke: var(--t);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.slide.is-played .cycle-echo circle {
  animation: ripple-soft 4.4s ease-out infinite;
}
.slide.is-played .cycle-echo circle:nth-child(2) {
  animation-delay: 2.2s;
}
.cycle-node > circle {
  fill: color-mix(in srgb, var(--c) 14%, #fff);
  stroke: var(--c);
  stroke-width: 3;
}
.cycle-icon {
  fill: none;
  stroke: var(--c);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cycle-label text {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.01em;
  fill: var(--navy);
  text-anchor: middle;
}
/* Wraps a long name onto two lines, sitting on the circle below it. */
.cycle-label-box {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  margin: 0;
  font-size: 25px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-align: center;
  text-wrap: balance;
}
/* Dashed like the site's connector lines; the dashes march toward the
   arrowhead while the slide is up. */
.cycle-arc .cycle-line {
  fill: none;
  stroke: var(--c);
  stroke-width: 3;
  stroke-dasharray: 12;
}
.slide.is-played .cycle-arc:not(.is-held) .cycle-line {
  animation: march 6s linear infinite;
}
.cycle-arc .cycle-head {
  fill: var(--c);
  stroke: none;
}

/* 19. Security overview: the NIST wheel and badge cards ----------------------- */
.s-security {
  grid-template-columns: minmax(0, 1fr) 600px;
  gap: 80px;
  align-items: start;
  padding-top: 100px;
}
.s-security .lead {
  margin-top: 18px !important;
  font-size: 28px;
  color: var(--ink-soft);
}
.csf-panels {
  position: relative;
  min-height: 250px;
  margin-top: 60px;
}
.csf-panel {
  position: absolute;
  inset: 0 0 auto;
  padding-inline-start: 26px;
  border-inline-start: 6px solid var(--c);
  opacity: 0;
  translate: 0 16px;
  transition:
    opacity 0.45s ease,
    translate 0.6s var(--ease);
}
.csf-panel.is-current {
  opacity: 1;
  translate: none;
}
.csf-panel h3 {
  font-size: 36px;
  font-weight: 700;
  color: color-mix(in srgb, var(--c) 82%, #000);
}
.csf-panel ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.csf-panel li {
  position: relative;
  margin-top: 14px;
  padding-inline-start: 34px;
  font-size: 24px;
  line-height: 1.4;
}
.csf-panel li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 13px;
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: var(--c);
}
.csf-wheel {
  width: 600px;
  height: 600px;
  margin-top: -20px;
  overflow: visible;
}
.csf-seg {
  cursor: pointer;
  transition: translate 0.5s var(--ease-pop);
}
.csf-seg path,
.csf-core circle {
  fill: color-mix(in srgb, var(--c) 18%, #fff);
  stroke: var(--bone);
  stroke-width: 6;
  transition:
    fill 0.4s ease,
    filter 0.4s ease;
}
.csf-seg:hover path,
.csf-seg:hover circle {
  fill: color-mix(in srgb, var(--c) 32%, #fff);
}
.csf-seg text {
  font-size: 26px;
  font-weight: 700;
  fill: var(--navy);
  text-anchor: middle;
  dominant-baseline: middle;
  transition: fill 0.4s ease;
}
.csf-icon {
  fill: none;
  stroke: color-mix(in srgb, var(--c) 85%, #000);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.4s ease;
}
.csf-icon-core {
  stroke-width: 5;
}
.slide.is-played .csf-seg.is-current {
  translate: var(--dx) var(--dy);
}
.csf-seg.is-current path,
.csf-core.is-current circle {
  fill: var(--c);
  filter: drop-shadow(0 16px 24px rgb(0 30 34 / 0.25));
}
.csf-seg.is-current text {
  fill: var(--on, #fff);
}
.csf-seg.is-current .csf-icon {
  stroke: var(--on, #fff);
}
.csf-core text {
  font-size: 32px;
}
/* Compliance badge cards: the standard's emblem in white on turquoise,
   its name and our standing with it below (artwork: badges.html). Used in a
   row on the security overview and as tiles in the dark mosaic. */
.badges {
  position: absolute;
  inset-inline: 120px;
  bottom: 84px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.badge {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f2f0eb;
  text-align: center;
  box-shadow: 0 16px 30px -24px rgb(0 45 52 / 0.55);
}
.badge svg {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 128px;
  padding: 12px 0;
  background: linear-gradient(140deg, #0d95a2 0%, var(--t) 50%, var(--t-dark) 100%);
}
.badge .badge-name {
  margin-top: 14px;
  font-size: 26px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.badge .badge-kind {
  margin: 5px 0 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* 21. Global network (dark) ------------------------------------------------- */
.s-network {
  display: flex;
  justify-content: center;
  padding-top: 190px;
  background: var(--night);
  color: #fff;
  text-align: center;
}
.network-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.network-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, rgb(6 24 30 / 0.15), rgb(6 24 30 / 0.6)),
    rgb(6 24 30 / 0.1);
}
.network-copy {
  position: relative;
  max-width: 1300px;
}
.s-network .headline {
  font-size: 84px;
  color: #fff;
}
.s-network .lead {
  margin-inline: auto;
  max-width: 1300px;
  font-size: 24px;
  color: rgb(255 255 255 / 0.88);
  text-shadow: 0 1px 12px rgb(6 24 30 / 0.6);
}
.big-stats {
  display: flex;
  justify-content: center;
  gap: 130px;
  margin: 40px 0 0;
}
.big-stat {
  font-size: 112px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.big-stats p:not(.big-stat) {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.8);
}
.marquee {
  position: absolute;
  bottom: 70px;
  left: 0;
  right: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 80s linear infinite;
}
.marquee-track > span {
  display: flex;
  align-items: center;
  font-size: 38px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.55);
  white-space: nowrap;
}
.marquee .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 34px;
  border-radius: 50%;
  background: var(--t);
}
@keyframes marquee {
  to {
    translate: -50% 0;
  }
}
[dir="rtl"] .marquee-track {
  animation-name: marquee-rtl;
}
@keyframes marquee-rtl {
  to {
    translate: 50% 0;
  }
}

/* 22. Recognition ----------------------------------------------------------- */
.s-recognition {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.recognition-head .lead {
  margin-top: 18px !important;
}
.awards {
  list-style: none;
  margin: 70px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.awards li {
  padding: 0 26px 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  text-align: center;
  overflow: hidden;
}
.award-logo {
  display: grid;
  place-items: center;
  height: 170px;
  margin: 0 -26px 26px;
  border-bottom: 1px solid var(--line);
}
.award-logo img {
  max-width: 200px;
  max-height: 100px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.awards h3 {
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.awards p {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-faint);
}

/* 23. Closing (brand) ------------------------------------------------------- */
.s-closing {
  display: flex;
  align-items: center;
  padding-bottom: 260px;
  background: linear-gradient(135deg, var(--t) 0%, var(--t-dark) 100%);
  color: #fff;
  overflow: hidden;
}
.closing-copy {
  position: relative;
  max-width: 1040px;
}
.s-closing .display {
  color: #fff;
}
.s-closing .lead {
  max-width: 980px;
  color: rgb(255 255 255 / 0.9);
}
.closing-actions {
  display: flex;
  gap: 20px;
  margin-top: 48px;
}
.closing-contact {
  display: flex;
  gap: 44px;
  margin-top: 44px !important;
  font-size: 22px;
  font-weight: 600;
  color: rgb(255 255 255 / 0.85);
}
.closing-ripples {
  position: absolute;
  inset-inline-end: -100px;
  top: -30px;
  width: 1000px;
  height: 1000px;
}
/* The drawing's circle sits on a square backdrop; keep only the circle. */
.closing-art {
  position: absolute;
  inset-inline-end: 90px;
  top: 120px;
  width: 640px;
  clip-path: circle(42.5% at 47.2% 48.3%);
}
.closing-logos {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 170px;
  padding-bottom: 26px;
  background: var(--bone);
  overflow: hidden;
}
.closing-logos .ticker-track {
  gap: 90px;
}
.closing-logos .ticker-track img {
  height: 60px;
  max-width: 200px;
}

/* Controls --------------------------------------------------------------------- */
.deck-progress {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 10;
  height: 4px;
  background: rgb(0 0 0 / 0.06);
}
.deck-progress span {
  display: block;
  height: 100%;
  background: var(--t);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s var(--ease);
}
[dir="rtl"] .deck-progress span {
  transform-origin: right center;
}
.deck-chrome {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  translate: -50% 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(255 255 255 / 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.05);
  transition:
    opacity 0.4s ease,
    translate 0.4s var(--ease);
}
.deck.is-idle .deck-chrome {
  opacity: 0;
  translate: -50% 12px;
}
.deck-chrome-group {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-inline-start: 6px;
  border-inline-start: 1px solid var(--line);
}
.deck-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.deck-btn:hover {
  background: var(--sand);
}
.deck-btn:focus-visible {
  outline: 2px solid var(--t);
  outline-offset: 1px;
}
[dir="rtl"] .deck-flip {
  transform: scaleX(-1);
}
.deck-counter {
  direction: ltr;
  unicode-bidi: isolate;
  min-width: 70px;
  margin: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
/* Captions: the current step's narration, over the bottom of the frame
   like a video's subtitles. They sit above the controls while those show
   and drop toward the edge when they hide. */
.deck-captions {
  position: fixed;
  bottom: 84px;
  left: 50%;
  z-index: 9;
  width: max-content;
  max-width: min(1100px, calc(100vw - 32px));
  translate: -50% 0;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    bottom 0.4s var(--ease);
  pointer-events: none;
}
.deck.is-idle .deck-captions {
  bottom: 28px;
}
.deck-captions.is-shown {
  opacity: 1;
}
.deck-captions p {
  margin: 0;
  padding: 0.35em 0.75em;
  border-radius: 8px;
  background: rgb(6 24 30 / 0.84);
  color: #fff;
  font-size: max(16px, calc(30px * var(--scale, 1)));
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-wrap: balance;
}
.deck-play-icon,
.deck-play[aria-pressed="true"] .deck-pause-icon {
  display: block;
}
.deck-pause-icon,
.deck-play[aria-pressed="true"] .deck-play-icon {
  display: none;
}
.deck-btn[hidden] {
  display: none;
}
/* Autoplay waits for a click before it starts: browsers only let a page
   play sound after one, and it lets the viewer settle first. */
.deck-start {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 28px;
  padding: 16px;
  background: rgb(0 0 0 / 0.6);
  backdrop-filter: blur(2px);
  color: #fff;
  text-align: center;
}
.deck-start[hidden] {
  display: none;
}
.deck-start-play {
  display: grid;
  justify-items: center;
  gap: 20px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}
.deck-start-icon {
  display: grid;
  place-items: center;
  width: clamp(112px, 16vmin, 160px);
  height: clamp(112px, 16vmin, 160px);
  border-radius: 50%;
  background: var(--t);
  box-shadow: 0 20px 50px -16px rgb(0 0 0 / 0.6);
  transition: transform 0.3s var(--ease);
}
.deck-start-icon svg {
  margin-inline-start: 8px;
}
.deck-start-play:hover .deck-start-icon,
.deck-start-play:focus-visible .deck-start-icon {
  transform: scale(1.06);
}
.deck-start-play:focus-visible {
  outline: none;
}
.deck-start-play:focus-visible .deck-start-icon {
  outline: 3px solid #fff;
  outline-offset: 4px;
}
.deck-start-browse {
  padding: 12px 22px;
  border: 1px solid rgb(255 255 255 / 0.55);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.deck-start-browse:hover,
.deck-start-browse:focus-visible {
  border-color: #fff;
  background: rgb(255 255 255 / 0.18);
}
.deck-start-browse:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
/* The voiceover's volume: hovering the speaker (or focusing it) raises a
   vertical slider above it; the speaker itself mutes and unmutes. The
   panel sits on a transparent bridge so the pointer can travel up to it
   without the slider closing. */
.deck-vol {
  position: relative;
}
.deck-vol[hidden] {
  display: none;
}
.deck-vol-pop {
  position: absolute;
  left: 50%;
  bottom: 100%;
  padding-bottom: 12px;
  translate: -50% 6px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    translate 0.2s var(--ease),
    visibility 0s linear 0.2s;
}
.deck-vol:hover .deck-vol-pop,
.deck-vol:focus-within .deck-vol-pop {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.2s ease,
    translate 0.2s var(--ease),
    visibility 0s;
}
.deck-vol-panel {
  display: grid;
  justify-items: center;
  padding: 14px 12px;
  border-radius: 999px;
  background: rgb(15 20 25 / 0.3);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.35);
}
/* Vertical, filled from the bottom up to the volume (--v, set by deck.js). */
.deck-vol-range {
  -webkit-appearance: none;
  appearance: none;
  writing-mode: vertical-lr;
  direction: rtl;
  width: 5px;
  height: 88px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(to top, #4fa8b1 var(--v, 70%), rgb(255 255 255 / 0.35) var(--v, 70%));
  cursor: pointer;
}
.deck-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}
.deck-vol-range::-moz-range-thumb {
  width: 17px;
  height: 17px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.4);
}
.deck-vol-range:focus-visible {
  outline: 2px solid var(--t);
  outline-offset: 6px;
}
.deck-voice-off,
[data-deck-voice][aria-pressed="true"] .deck-voice-off,
[data-deck-voice][aria-pressed="false"] .deck-voice-on {
  display: none;
}
[data-deck-voice][aria-pressed="false"] .deck-voice-off {
  display: block;
}
.deck-btn[aria-pressed="true"] {
  background: var(--t-tint);
  color: var(--t-dark);
}
.deck-hint {
  position: fixed;
  top: 20px;
  left: 50%;
  z-index: 10;
  margin: 0;
  padding: 10px 18px;
  translate: -50% 0;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.deck-hint.is-gone {
  opacity: 0;
}
.deck-list {
  width: min(560px, 92vw);
  max-height: 80vh;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.35);
}
.deck-list::backdrop {
  background: rgb(6 24 30 / 0.45);
}
.deck-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 24px;
  border-bottom: 1px solid var(--line);
}
.deck-list-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}
.deck-list ol {
  list-style: none;
  margin: 0;
  padding: 8px;
  max-height: calc(80vh - 74px);
  overflow-y: auto;
}
.deck-list a {
  display: flex;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.deck-list a:hover {
  background: var(--sand);
}
.deck-list a[aria-current] {
  background: var(--t-tint);
  color: var(--t-dark);
}
.deck-list-num {
  min-width: 24px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .deck *,
  .deck *::before,
  .deck *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}