/* ==========================================================================
   Echo (/echo.html), illustrated version since 2026-10-11
   Same grammar as the homepage (home-v27.css): the watercolour-and-ink world of
   the Cloudbizz film "Your IT. Orchestrated." on warm paper, laid out like the
   neoo.io V29 home, with Echo painted as a new member of the cast.
   Scope: .echo-page--v27 (page) and .ecv (illustrated content). Sizes come from
   the --cb-* tokens of styles.css. Design note: docs/design-echo-v27.md.
   Motion: every animated or initially hidden state lives under html.ecv-motion
   (set by echo-motion.js only when prefers-reduced-motion is not "reduce");
   the markup is the final state.
   ========================================================================== */

.echo-page--v27 {
  --ecv-paper: #fbf4e6;
  --ecv-ink: var(--cb-ink);
  --ecv-ink-soft: #32365a;
  --ecv-muted: #565a78;
  --ecv-line: rgba(7, 8, 63, .12);
  --ecv-card: #fffdf9;
  --ecv-shadow: 0 22px 54px rgba(61, 44, 14, .13), 0 2px 8px rgba(61, 44, 14, .07);
  --ecv-shadow-soft: 0 12px 30px rgba(61, 44, 14, .11), 0 1px 3px rgba(61, 44, 14, .06);
  --ecv-ok: #1d8f55;
  --ecv-alert: #d8432f;
  --ecv-warn: #b26a00;
  --ecv-focus: #3d5ff0;
  --ecv-link: #2f43b8;
  --ecv-header-h: 88px;
  /* Canonical accent gradient under an ink veil so accent words keep a 3:1 contrast on paper. */
  --ecv-accent-on-paper: linear-gradient(rgba(7, 8, 63, .3), rgba(7, 8, 63, .3)), var(--cb-accent-gradient);
  --ecv-accent-button: linear-gradient(rgba(7, 8, 63, .42), rgba(7, 8, 63, .42)), var(--cb-accent-gradient);
  margin: 0;
  color: var(--ecv-ink-soft);
  background: var(--ecv-paper);
  font-family: var(--cb-display-font);
}

html.echo-document { background: var(--ecv-paper, #fbf4e6); }

.echo-page--v27 .ecv-main { position: relative; }

/* Opaque paper inside the isolated group: the white-balanced vignettes use mix-blend-mode: multiply. */
.ecv {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--ecv-paper);
}

/* Paper: fine grain + soft watercolour blooms. */
.ecv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .33 0 0 0 0 .18 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 46% 18% at 86% 22%, rgba(86, 126, 255, .07), transparent 70%),
    radial-gradient(ellipse 40% 16% at 10% 44%, rgba(103, 224, 185, .07), transparent 70%),
    radial-gradient(ellipse 50% 18% at 80% 70%, rgba(222, 186, 120, .12), transparent 70%);
  background-size: 260px 260px, 100% 100%, 100% 100%, 100% 100%;
}

/* Torn paper edge over the shared navy footer. */
.ecv::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(90deg, #030915 0%, #04091d 52%, #080627 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20L14 25L36 13L69 18L92 22L126 18L158 20L193 13L217 21L249 10L281 17L319 23L336 18L374 21L405 19L443 24L467 15L503 15L521 14L546 14L584 18L617 24L633 14L662 18L687 12L725 10L749 15L780 25L807 12L832 14L855 16L878 18L908 13L946 17L982 20L1012 18L1039 21L1077 16L1109 13L1138 15L1161 16L1196 24L1200 23V40Z' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V20L14 25L36 13L69 18L92 22L126 18L158 20L193 13L217 21L249 10L281 17L319 23L336 18L374 21L405 19L443 24L467 15L503 15L521 14L546 14L584 18L617 24L633 14L662 18L687 12L725 10L749 15L780 25L807 12L832 14L855 16L878 18L908 13L946 17L982 20L1012 18L1039 21L1077 16L1109 13L1138 15L1161 16L1196 24L1200 23V40Z' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 100% 100% no-repeat;
}

.ecv-shell {
  width: var(--cb-shell);
  margin-inline: auto;
}

.ecv-section {
  position: relative;
  padding-block: clamp(72px, 7.5vw, 128px);
}

/* ---------- Typography (display = homepage hero grammar, ink for paper) ---------- */

.echo-page--v27 .ecv-hero__title,
.echo-page--v27 .ecv-title {
  margin: 0;
  color: var(--ecv-ink);
  font-family: var(--cb-display-font);
  font-weight: var(--cb-display-weight);
  letter-spacing: var(--cb-display-tracking);
  line-height: var(--cb-display-leading);
  text-wrap: balance;
}

.echo-page--v27 .ecv-hero__title { font-size: calc(var(--cb-title-hero) * 1.2); }
.echo-page--v27 .ecv-title { font-size: var(--cb-title-section-side); }
.echo-page--v27 .ecv-title--wide { font-size: var(--cb-title-section); }

.echo-page--v27 .ecv-hero__title span,
.echo-page--v27 .ecv-hero__title em { display: block; }

.echo-page--v27 .ecv-hero__title em,
.echo-page--v27 .ecv-title em,
.ecv-final__sig em,
.ecv-eyebrow__num {
  font-style: normal;
  background: var(--ecv-accent-on-paper);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ecv-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  color: #3e4378;
  font-size: var(--cb-eyebrow-size);
  font-weight: var(--cb-eyebrow-weight);
  letter-spacing: var(--cb-eyebrow-tracking);
  line-height: 1.3;
  text-transform: uppercase;
}

.ecv-eyebrow__num {
  font-weight: 600;
  letter-spacing: .04em;
}

.ecv-eyebrow__num::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin-left: 14px;
  vertical-align: middle;
  -webkit-text-fill-color: initial;
  background: rgba(62, 67, 120, .45);
}

.ecv-lead,
.ecv-hero__lead {
  max-width: 34em;
  margin: 24px 0 0;
  color: var(--ecv-ink-soft);
  font-size: calc(var(--cb-lead-section) * .72);
  font-weight: var(--cb-lead-weight);
  letter-spacing: var(--cb-lead-tracking);
  line-height: 1.55;
  text-wrap: pretty;
}

.ecv-hero__lead { max-width: 27em; margin-top: 26px; }

/* ---------- Buttons, links, chips, cards, bubbles ---------- */

.ecv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.ecv-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.ecv-btn--primary {
  color: #fff;
  background: var(--ecv-accent-button);
  box-shadow: 0 14px 34px rgba(66, 140, 223, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
}

.ecv-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(66, 140, 223, .42), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.ecv-btn--primary:hover svg { transform: translateX(3px); }

.ecv-btn--ghost {
  color: var(--ecv-ink);
  background: rgba(255, 253, 249, .6);
  box-shadow: inset 0 0 0 1px rgba(7, 8, 63, .22);
}

.ecv-btn--ghost:hover { background: #fffdf9; transform: translateY(-2px); }

.ecv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid rgba(47, 67, 184, .3);
  color: var(--ecv-link);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.ecv-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ecv-link:hover { border-bottom-color: currentColor; }
.ecv-link:hover svg { transform: translateX(3px); }

.ecv-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  color: var(--ecv-ink);
  background: var(--ecv-card);
  box-shadow: var(--ecv-shadow-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.ecv-chip b { font-weight: 600; }
.ecv-chip small { display: block; color: var(--ecv-muted); font-size: 12px; font-weight: 500; }
.ecv-chip img { width: 28px; height: 28px; border-radius: 50%; }

.ecv-chip__sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  margin-inline: 2px;
  background: var(--ecv-line);
}

.ecv-chip--time { font-variant-numeric: tabular-nums; }

.ecv-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ecv-ok);
  box-shadow: 0 0 0 3px rgba(29, 143, 85, .16);
  transition: background-color .3s ease, box-shadow .3s ease;
}

.ecv-dot--alert { background: var(--ecv-alert); box-shadow: 0 0 0 3px rgba(216, 67, 47, .16); }

/* Echo's ear ring: the signature of the cast member. */
.ecv-ring {
  flex: none;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #10173d;
  box-shadow: inset 0 0 0 3px #42bbdf, 0 0 10px rgba(66, 187, 223, .55);
}

.ecv-flag {
  flex: none;
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(90deg, #111 0 33.333%, #ffd90c 33.333% 66.666%, #ef3340 66.666%);
  box-shadow: 0 0 0 1px rgba(7, 8, 63, .08);
}

.ecv-card {
  border-radius: 16px;
  color: var(--ecv-ink);
  background: var(--ecv-card);
  box-shadow: var(--ecv-shadow);
  font-size: 14px;
}

.ecv-card__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ecv-line);
  border-radius: 16px 16px 0 0;
  background: #f6f2ea;
  font-size: 13px;
}

.ecv-card__bar img { width: 24px; height: 24px; border-radius: 50%; }
.ecv-card__bar b { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ecv-card__bar small { margin-left: auto; padding: 3px 9px; border-radius: 999px; color: #0f3d2a; background: #c9f0dd; font-size: 11px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }

.ecv-bubble {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 270px;
  margin: 0;
  padding: 11px 17px;
  border-radius: 18px;
  color: var(--ecv-ink);
  background: #fff;
  box-shadow: var(--ecv-shadow-soft);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.3;
}

.ecv-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-radius: 0 0 4px 0;
  transform: rotate(45deg);
}

.ecv-bubble--left::after { left: 22px; }
.ecv-bubble--right::after { right: 22px; }
.ecv-bubble--avatar { padding-left: 8px; }
.ecv-bubble--avatar::after { left: 26px; }
.ecv-bubble img { width: 36px; height: 36px; border-radius: 50%; }

.ecv-node__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--ecv-accent-button);
}

.ecv-node__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ecv-check {
  flex: none;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ecv-ok);
}

.ecv-check::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Vignettes are laid on the paper like the film boards: their near-white washes take the paper tone. */
.ecv-vignette { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

.echo-page--v27 a:focus-visible,
.echo-page--v27 button:focus-visible,
.echo-page--v27 summary:focus-visible,
.echo-page--v27 select:focus-visible {
  outline: 3px solid var(--ecv-focus);
  outline-offset: 3px;
}

/* ---------- Topbar on paper (transparent over the hero, glass once scrolled) ---------- */

.echo-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  height: var(--ecv-header-h);
  padding: 0 var(--cb-topbar-pad-x);
  color: var(--ecv-ink);
  /* The night plate is dark under the right of the bar: a paper veil keeps the links readable. */
  background: linear-gradient(180deg, rgba(251, 244, 230, .94) 0%, rgba(251, 244, 230, .72) 62%, rgba(251, 244, 230, 0) 100%);
  transition: background-color .25s ease, box-shadow .25s ease;
}

.echo-topbar.is-scrolled {
  background: rgba(251, 244, 230, .88);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(7, 8, 63, .07);
}

.echo-topbar__brand,
.echo-topbar__actions,
.echo-nav,
.echo-logo { display: flex; align-items: center; }

.echo-topbar__brand { gap: 18px; min-width: 0; }
.echo-page--v27 .echo-topbar .cb-header-wordmark--light { --cb-header-wordmark-ink: var(--ecv-ink); }
.echo-topbar__divider { flex: none; width: 1px; height: 28px; background: rgba(7, 8, 63, .16); }

.echo-logo {
  gap: 8px;
  color: var(--ecv-ink);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
  text-decoration: none;
}

.echo-logo__ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #10173d;
  box-shadow: inset 0 0 0 4px #42bbdf, 0 0 10px rgba(66, 187, 223, .5);
}

.echo-logo__dot {
  margin-left: -6px;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.echo-nav { justify-content: center; gap: clamp(18px, 2vw, 34px); }

.echo-nav a,
.echo-login {
  position: relative;
  color: var(--ecv-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.echo-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1.5px;
  background: var(--cb-accent-gradient);
  scale: 0 1;
  transition: scale .25s ease;
}

/* login-menu.js turns the link into the shared "Connexion" menu trigger (icon + label + chevron). */
.echo-login { display: inline-flex; align-items: center; white-space: nowrap; }

.echo-nav a:hover,
.echo-login:hover { color: var(--ecv-link); }
.echo-nav a:hover::after,
.echo-nav a:focus-visible::after { scale: 1; }

.echo-topbar__actions { justify-content: flex-end; gap: 16px; }

.echo-lang { position: relative; display: inline-flex; }

.echo-lang select {
  min-height: 40px;
  padding: 0 30px 0 12px;
  border: 1px solid rgba(7, 8, 63, .2);
  border-radius: 10px;
  color: var(--ecv-ink);
  background: rgba(255, 253, 249, .7);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
}

.echo-lang::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 12px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--ecv-ink);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.echo-topbar__cta.ecv-btn {
  min-height: 46px;
  padding: 0 22px;
  font-size: 15px;
  box-shadow: 0 10px 26px rgba(66, 140, 223, .28);
  white-space: nowrap;
}

/* Breadcrumb on the paper, under the topbar, aligned on the wordmark by echo.js. */
.echo-page--v27 .page-breadcrumb--product {
  top: calc(var(--ecv-header-h) - 6px);
  left: var(--echo-breadcrumb-left, var(--cb-topbar-pad-x));
  z-index: 5;
  padding: 7px 16px;
  border: 1px solid rgba(7, 8, 63, .1);
  background: rgba(255, 253, 249, .72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #3e4378;
  font-size: 13px;
  font-weight: 600;
}

.echo-page--v27 .page-breadcrumb--product b { color: var(--ecv-ink); }
.echo-page--v27 .page-breadcrumb--product span[aria-hidden] { color: rgba(62, 67, 120, .45); }
.echo-page--v27 .page-breadcrumb--product a:hover { color: var(--ecv-link); }

/* ---------- Hero ---------- */

.ecv-hero {
  --ecv-hero-h: max(700px, min(100svh, 1100px));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: var(--ecv-hero-h);
  margin-top: calc(-1 * var(--ecv-header-h));
  padding-top: var(--ecv-header-h);
  overflow: hidden;
}

/* The plate never exceeds 92vw, so its painted half always starts right of the copy column. */
.ecv-hero__plate {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  width: min(92vw, calc(var(--ecv-hero-h) * 1.7768));
  aspect-ratio: 1672 / 941;
}

.ecv-hero__plate picture,
.ecv-hero__img {
  display: block;
  width: 100%;
  height: 100%;
}

.ecv-hero__img {
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-composite: intersect;
}

/* Sonar rings around Echo's ear (position of the ring in the 1672×941 plate). */
.ecv-sonar {
  position: absolute;
  left: 67.9%;
  top: 35.2%;
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ecv-sonar i {
  position: absolute;
  left: -60px;
  top: -60px;
  width: 120px;
  height: 120px;
  border: 1.5px solid rgba(103, 224, 185, .8);
  border-radius: 50%;
  opacity: 0;
}

.ecv-hero__time { position: absolute; left: 51%; top: 19%; z-index: 2; }
.ecv-hero__listen { position: absolute; left: 76%; top: 27%; z-index: 2; }

.ecv-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* The night plate is painted from ~35 % of its width: the copy column stays narrower than on the homepage. */
.ecv-hero__copy { max-width: min(560px, 37vw); margin-block: auto; padding-block: 56px 28px; }

.ecv-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 30px;
  margin-top: 38px;
}

.ecv-watch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  color: var(--ecv-ink);
  text-decoration: none;
}

.ecv-watch__ring {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255, 253, 249, .85);
  box-shadow: inset 0 0 0 1.5px var(--ecv-ink), 0 0 0 9px rgba(86, 126, 255, .12);
  transition: box-shadow .3s ease, transform .3s ease;
}

.ecv-watch__ring svg { width: 22px; height: 22px; fill: #3249c7; }
.ecv-watch:hover .ecv-watch__ring { transform: scale(1.05); box-shadow: inset 0 0 0 1.5px var(--ecv-ink), 0 0 0 13px rgba(86, 126, 255, .16); }
.ecv-watch__text { display: grid; gap: 4px; }
.ecv-watch__text b { font-size: 19px; font-weight: 500; letter-spacing: -.015em; }
.ecv-watch__text small { max-width: 17em; color: var(--ecv-muted); font-size: 13px; font-weight: 500; line-height: 1.35; }

.ecv-proofs {
  align-self: flex-start;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 clamp(24px, 4.4vh, 48px);
  padding: 8px 6px;
  list-style: none;
  border-radius: 999px;
  background: rgba(255, 252, 245, .82);
  box-shadow: var(--ecv-shadow-soft);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ecv-proofs li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 18px;
  color: var(--ecv-ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.ecv-proofs li + li { border-left: 1px solid var(--ecv-line); }
.ecv-proofs svg { width: 18px; height: 18px; fill: none; stroke: #3e4378; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Split layout ---------- */

.ecv-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(40px, 5.5vw, 104px);
}

.ecv-cap--flip .ecv-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.ecv-cap--flip .ecv-copy { order: 2; }
.ecv-cap + .ecv-cap { padding-top: clamp(40px, 5vw, 80px); }

.ecv-scene {
  position: relative;
  margin: 0;
}

.ecv-quote {
  margin: 34px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid rgba(86, 126, 255, .45);
}

.ecv-quote p {
  margin: 0;
  color: var(--ecv-ink);
  font-size: calc(var(--cb-title-cta) * .86);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.25;
  text-wrap: balance;
}

.ecv-quote footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: var(--ecv-muted);
  font-size: 14px;
  font-weight: 500;
}

.ecv-quote img { width: 40px; height: 40px; border-radius: 50%; }

/* Check list in the copy column. */
.ecv-list {
  display: grid;
  gap: 10px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.ecv-list li {
  position: relative;
  padding-left: 28px;
  color: var(--ecv-ink-soft);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}

.ecv-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .32em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #10173d;
  box-shadow: inset 0 0 0 3px #42bbdf;
}

.ecv-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

.ecv-products {
  display: grid;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ecv-line);
}

.ecv-products a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 3px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--ecv-line);
  color: var(--ecv-ink);
  text-decoration: none;
}

.ecv-products b { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.ecv-products span { grid-column: 1; color: var(--ecv-muted); font-size: 15px; line-height: 1.45; }
.ecv-products svg { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 20px; height: 20px; fill: none; stroke: var(--ecv-link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.ecv-products a:hover b { color: var(--ecv-link); }
.ecv-products a:hover svg { transform: translateX(4px); }

/* ---------- 00 The night ---------- */

.ecv-scene--night { aspect-ratio: 760 / 690; }
.ecv-night__img { position: absolute; right: 0; top: 3%; width: 76%; }
.ecv-night__clock { position: absolute; left: 0; top: 0; z-index: 3; }
.ecv-night__echo { left: 2%; top: 16%; }
.ecv-night__echo::after { left: auto; right: 26px; }

.ecv-log {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 58%;
  padding-bottom: 12px;
}

.ecv-log__cmd {
  display: flex;
  gap: 8px;
  min-height: 2.6em;
  margin: 0;
  padding: 12px 16px 6px;
  color: #3e4378;
  font: 500 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ecv-log__cmd span { color: #42bbdf; font-weight: 700; }
.ecv-log__cmd code { font: inherit; overflow-wrap: anywhere; }

.ecv-log__steps,
.ecv-actions__list,
.ecv-cockpit__activity {
  display: grid;
  margin: 0;
  padding: 0 16px;
  list-style: none;
}

.ecv-log__steps li,
.ecv-actions__list li,
.ecv-cockpit__activity li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--ecv-line);
}

.ecv-log__steps li > span:nth-child(2),
.ecv-actions__list li > span:nth-child(2),
.ecv-cockpit__activity li > span:nth-child(2) { display: grid; gap: 1px; min-width: 0; }

.ecv-log__steps b,
.ecv-actions__list b,
.ecv-cockpit__activity b { font-size: 13.5px; font-weight: 600; }

.ecv-log__steps small,
.ecv-actions__list small,
.ecv-cockpit__activity small { color: var(--ecv-muted); font-size: 12px; font-weight: 500; }

.ecv-log__steps time,
.ecv-actions__list time,
.ecv-cockpit__activity time { color: var(--ecv-muted); font-size: 12px; font-variant-numeric: tabular-nums; }

.ecv-log__result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
  margin: 4px 16px 0;
  padding-top: 10px;
  border-top: 1px solid var(--ecv-line);
  color: var(--ecv-muted);
  font-size: 12.5px;
  font-weight: 500;
}

.ecv-log__result b { margin-left: auto; color: var(--ecv-link); font-size: 12px; font-weight: 700; letter-spacing: .02em; }

/* ---------- Platform board ---------- */

.ecv-head {
  max-width: 980px;
  text-align: center;
}

.ecv-head .ecv-eyebrow { justify-content: center; }
.ecv-head .ecv-lead { margin-inline: auto; }

.ecv-board {
  position: relative;
  width: min(1200px, var(--cb-shell));
  margin: clamp(48px, 6vw, 88px) auto 0;
  aspect-ratio: 1200 / 760;
}

.ecv-board__art { position: absolute; inset: 0; margin: 0; }

.ecv-board__ink,
.ecv-board__colour {
  position: absolute;
  left: 21%;
  top: 4%;
  width: 58%;
  height: auto;
  mix-blend-mode: multiply;
}

.ecv-board__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ecv-board__links path { fill: none; stroke: url(#ecv-link-gradient); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }

/* Centred with auto margins (not a transform): the pop-in keyframes animate transform. */
.ecv-board__badge,
.ecv-final__mark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: 1;
  white-space: nowrap;
}

.ecv-board__badge {
  position: absolute;
  left: 0;
  right: 0;
  top: 85.5%;
  z-index: 2;
  width: max-content;
  margin: 0 auto;
  padding: 10px 22px 10px 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--ecv-shadow), 0 0 0 1.5px rgba(66, 187, 223, .55);
  font-size: 24px;
}

.ecv-board__badge b,
.ecv-final__mark b { color: var(--ecv-ink); font-weight: 700; }

.ecv-board__badge em,
.ecv-final__mark em {
  margin-left: -10px; /* cancels the flex gap: "echo." reads as one word */
  font-style: normal;
  font-weight: 700;
  background: var(--cb-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.ecv-board__nodes { margin: 0; padding: 0; list-style: none; }

.ecv-node {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: 24%;
  padding: 10px 18px 10px 10px;
  border-radius: 999px;
  color: var(--ecv-ink);
  background: var(--ecv-card);
  box-shadow: var(--ecv-shadow-soft);
}

.ecv-node__text { display: grid; gap: 1px; min-width: 0; }
.ecv-node__text b { font-size: 16px; font-weight: 600; }
.ecv-node__text small { color: var(--ecv-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }

.ecv-node--cloud { left: 0; top: 19%; --n: 0; }
.ecv-node--office { left: 0; top: 56%; --n: 2; }
.ecv-node--cloudbizz { right: 0; top: 18%; --n: 1; }
.ecv-node--clients { right: 0; top: 58%; --n: 3; }

.ecv-board__team {
  position: absolute;
  left: 0;
  right: 0;
  top: -3%;
  z-index: 2;
  width: max-content;
  margin-inline: auto;
}

.ecv-board__more { margin-top: clamp(28px, 3vw, 44px); text-align: center; }

/* ---------- 01 Monitor ---------- */

.ecv-scene--watch { aspect-ratio: 760 / 620; }
.ecv-watch__office { position: absolute; left: 0; top: 9%; width: 100%; }
.ecv-watch__sessions { position: absolute; left: 3%; top: 0; z-index: 3; }
.ecv-watch__backup { position: absolute; right: 0; top: 3%; z-index: 3; }

.ecv-avatars { display: inline-flex; }
.ecv-avatars img { width: 28px; height: 28px; border: 2px solid #fff; border-radius: 50%; }
.ecv-avatars img + img { margin-left: -9px; }

.ecv-metrics {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 48%;
  padding: 14px 16px 12px;
}

.ecv-metrics__head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.ecv-metrics__head b { font-size: 14px; font-weight: 600; }
.ecv-metrics__head small { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; color: var(--ecv-ok); font-size: 12px; font-weight: 600; }

.ecv-bars { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }

.ecv-bars li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
}

.ecv-bars span { color: var(--ecv-muted); letter-spacing: .04em; }
.ecv-bars b { font-variant-numeric: tabular-nums; text-align: right; }

.ecv-bars i {
  position: relative;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #ece6da;
}

.ecv-bars i::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--v, 50%);
  border-radius: inherit;
  background: var(--cb-accent-gradient);
}

.ecv-services {
  position: absolute;
  left: 0;
  bottom: 5%;
  z-index: 2;
  display: grid;
  width: 40%;
  padding: 6px 14px;
}

.ecv-services p {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 8px 0;
  font-size: 13px;
}

.ecv-services p + p { border-top: 1px solid var(--ecv-line); }
.ecv-services b { font-weight: 600; }
.ecv-services em { margin-left: auto; color: var(--ecv-muted); font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- 02 Understand ---------- */

.ecv-scene--detect { aspect-ratio: 760 / 600; }
.ecv-detect__img { position: absolute; right: -2%; top: 2%; width: 100%; }
.ecv-detect__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ecv-detect__links path { fill: none; stroke: #d8432f; stroke-width: 1.6; stroke-dasharray: .015 .012; stroke-linecap: round; opacity: .7; vector-effect: non-scaling-stroke; }
.ecv-detect__window { position: absolute; left: 0; top: 0; z-index: 3; }

.ecv-alerts {
  position: absolute;
  left: 0;
  top: 9%;
  z-index: 2;
  display: grid;
  gap: 10px;
  width: 34%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ecv-alert {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px 9px 10px;
  border-radius: 12px;
  color: var(--ecv-ink);
  background: var(--ecv-card);
  box-shadow: var(--ecv-shadow-soft);
  transform: rotate(var(--r, 0deg));
}

.ecv-alert:nth-child(odd) { --r: -.8deg; }
.ecv-alert:nth-child(even) { --r: .9deg; }
.ecv-alert i { align-self: stretch; border-radius: 4px; background: var(--ecv-alert); }
.ecv-alert--mid i { background: #e08a1e; }
.ecv-alert--low i { background: #8f7bff; }
.ecv-alert span { display: grid; gap: 1px; min-width: 0; }
.ecv-alert b { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.ecv-alert small { color: var(--ecv-muted); font-size: 12px; font-weight: 500; }
.ecv-alert time { color: var(--ecv-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }

.ecv-root {
  position: absolute;
  left: 22%;
  bottom: 0;
  z-index: 2;
  width: 52%;
  padding: 16px 18px 14px;
  box-shadow: var(--ecv-shadow), 0 0 0 1.5px rgba(66, 187, 223, .5);
}

.ecv-root__kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: #3e4378; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ecv-root__kicker .ecv-node__icon { width: 30px; height: 30px; }
.ecv-root__kicker em { margin-left: auto; color: var(--ecv-ink); font-size: 26px; font-style: normal; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ecv-root__title { margin: 10px 0 0; color: var(--ecv-ink); font-size: 19px; font-weight: 500; letter-spacing: -.02em; }

.ecv-root__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ecv-line);
}

.ecv-root__meta div { display: flex; flex-direction: column; justify-content: space-between; }
.ecv-root__meta dt { color: var(--ecv-muted); font-size: 11.5px; font-weight: 500; line-height: 1.3; }
.ecv-root__meta dd { margin: 3px 0 0; color: var(--ecv-ink); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ecv-root__meta div:last-child dd { color: var(--ecv-alert); }

.ecv-root__match { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--ecv-link); font-size: 12.5px; font-weight: 600; }
.ecv-root__match svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 03 Act ---------- */

.ecv-scene--act { aspect-ratio: 760 / 580; }
.ecv-act__dc { position: absolute; right: 0; top: 0; width: 80%; }

.ecv-actions {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 58%;
  padding-bottom: 8px;
}

.ecv-actions__human img { width: 22px; height: 22px; border-radius: 50%; }
.ecv-actions__human b { color: var(--ecv-link); }
.ecv-act__bubble { right: 4%; top: 46%; }
.ecv-act__chip { position: absolute; right: 0; bottom: 3%; z-index: 3; }

.ecv-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
  margin-top: clamp(48px, 5vw, 72px);
}

.ecv-groups article { padding-top: 22px; border-top: 1px solid rgba(7, 8, 63, .2); }

.ecv-groups h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--ecv-ink);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.015em;
}

.ecv-groups ul { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.ecv-groups li { position: relative; padding-left: 18px; color: var(--ecv-ink-soft); font-size: 15.5px; line-height: 1.45; }
.ecv-groups li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #42bbdf; }

/* ---------- 04 Deploy ---------- */

.ecv-scene--deploy { aspect-ratio: 760 / 720; }
.ecv-deploy__img { position: absolute; left: 0; top: 4%; width: 100%; }
.ecv-deploy__bubble { left: 6%; top: 0; }

.ecv-flow {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 52%;
  padding: 16px 18px 14px;
}

.ecv-flow__head { display: flex; align-items: center; gap: 12px; margin: 0; }
.ecv-flow__head > span:last-child { display: grid; }
.ecv-flow__head small { color: var(--ecv-muted); font-size: 12px; font-weight: 500; }
.ecv-flow__head b { font-size: 16px; font-weight: 600; }
.ecv-flow__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #c27a2c; font-size: 13px; font-weight: 700; }
.ecv-flow__steps { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.ecv-flow__steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px; }
.ecv-flow__steps li > span:last-child { display: grid; gap: 1px; }
.ecv-flow__steps b { font-size: 13.5px; font-weight: 600; }
.ecv-flow__steps small { color: var(--ecv-muted); font-size: 12px; font-weight: 500; line-height: 1.35; }
.ecv-flow__bar { position: relative; display: block; height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #ece6da; }
.ecv-flow__bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--cb-accent-gradient); }
.ecv-flow__foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--ecv-line); color: var(--ecv-muted); font-size: 12.5px; font-weight: 500; }
.ecv-flow__foot b { color: var(--ecv-ink); font-weight: 700; letter-spacing: -.04em; }

/* ---------- 05 Remote ---------- */

.ecv-scene--remote { aspect-ratio: 760 / 640; }
.ecv-remote__bram { position: absolute; right: 0; top: 0; width: 74%; }
.ecv-remote__bubble { right: 2%; top: 49%; }

.ecv-cockpit {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 56%;
  padding: 14px 0 8px;
}

.ecv-cockpit__head { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 0 16px 12px; border-bottom: 1px solid var(--ecv-line); }
.ecv-cockpit__head > span:first-child { display: grid; gap: 2px; }
.ecv-cockpit__head small { color: var(--ecv-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ecv-cockpit__head b { font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.ecv-cockpit__online { display: inline-flex; align-items: center; gap: 7px; color: var(--ecv-muted); font-size: 12px; font-weight: 500; }
.ecv-cockpit__btn { margin-left: auto; padding: 7px 12px; border-radius: 999px; color: #fff; background: var(--ecv-accent-button); font-size: 12px; font-weight: 600; white-space: nowrap; }

.ecv-cockpit__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 12px 16px;
}

.ecv-cockpit__facts dt { color: var(--ecv-muted); font-size: 11px; font-weight: 600; }
.ecv-cockpit__facts dd { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 600; }
.ecv-cockpit__health { display: flex; align-items: baseline; margin: 0; padding: 10px 16px 8px; border-top: 1px solid var(--ecv-line); font-size: 13px; }
.ecv-cockpit__health b { font-weight: 600; }
.ecv-cockpit__health em { margin-left: auto; color: var(--ecv-ok); font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; }
.ecv-bars--compact { padding: 0 16px 10px; }
.ecv-cockpit__activity li { grid-template-columns: 22px minmax(0, 1fr) auto; }

/* ---------- 06 Comply ---------- */

.ecv-scene--comply { aspect-ratio: 760 / 660; }
.ecv-comply__greet { position: absolute; right: 0; top: 7%; width: 70%; }
.ecv-comply__bubble { right: 6%; top: 0; }

.ecv-comply {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 58%;
  padding: 14px 16px 10px;
}

.ecv-comply__score { display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--ecv-line); }
.ecv-comply__score p { display: grid; gap: 2px; margin: 0; }
.ecv-comply__score small { color: var(--ecv-muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.ecv-comply__score p b { font-size: 17px; font-weight: 600; }
.ecv-comply__score p span { color: var(--ecv-muted); font-size: 12.5px; }

.ecv-score { position: relative; display: grid; flex: none; place-items: center; width: 66px; height: 66px; }
.ecv-score svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ecv-score circle { fill: none; stroke: #ece6da; stroke-width: 10; }
.ecv-score .ecv-score__arc { stroke: #2fae86; stroke-linecap: round; stroke-dasharray: 94 100; }
.ecv-score b { position: relative; margin-top: -6px; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ecv-score small { position: absolute; bottom: 13px; color: var(--ecv-muted); font-size: 9.5px; font-weight: 600; }

.ecv-comply__matrix { display: grid; margin: 0; padding: 0; list-style: none; }

.ecv-comply__matrix li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  font-size: 12.5px;
  font-weight: 500;
}

.ecv-comply__matrix li + li { border-top: 1px solid rgba(7, 8, 63, .07); }
.ecv-comply__matrix i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--ecv-ok); font-size: 11px; font-style: normal; font-weight: 700; }
.ecv-comply__matrix .is-warn i { background: #e08a1e; }
.ecv-comply__matrix .is-danger i { background: var(--ecv-alert); }
.ecv-comply__matrix .is-scan i { background: #10173d; box-shadow: inset 0 0 0 4px #42bbdf; }
.ecv-comply__matrix small { color: var(--ecv-muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ecv-comply__matrix em { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-style: normal; font-weight: 700; }
.ecv-comply__matrix .is-danger em { color: #7a1d12; background: #fde1db; transform: rotate(-2deg); }
.ecv-comply__matrix .is-scan em { color: #10306a; background: #dbe6ff; }

.ecv-verdicts { margin-top: 30px; }
.ecv-verdicts p { margin: 0; color: var(--ecv-ink-soft); font-size: 16px; }
.ecv-verdicts ul { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }

.ecv-verdict {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  color: var(--ecv-ink);
  background: var(--ecv-card);
  box-shadow: var(--ecv-shadow-soft);
  font-size: 15px;
  font-weight: 600;
}

.ecv-verdict > span:first-child { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700; }
.ecv-verdict--report > span:first-child { background: #e08a1e; }
.ecv-verdict--correct > span:first-child { background: var(--ecv-ok); }
.ecv-verdict--isolate > span:first-child { background: var(--ecv-alert); }

/* ---------- 07 Neoo ---------- */

.ecv-scene--neoo { aspect-ratio: 760 / 640; }
.ecv-neoo__jonas { position: absolute; right: 0; top: 0; width: 72%; }
.ecv-neoo__bubble { right: 3%; top: 50%; }

.ecv-ticket {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  width: 60%;
  padding: 14px 16px 12px;
}

.ecv-ticket__head { display: flex; align-items: center; gap: 10px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ecv-line); font-size: 13px; }
.ecv-ticket__brand { color: var(--ecv-ink); font-size: 20px; font-weight: 700; letter-spacing: -.06em; }
.ecv-ticket__head span { color: var(--ecv-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.ecv-ticket__head em { margin-left: auto; padding: 3px 9px; border-radius: 999px; color: #0f3d2a; background: #c9f0dd; font-size: 11.5px; font-style: normal; font-weight: 700; }

.ecv-ticket__context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 12px 0 0;
}

.ecv-ticket__context div { min-width: 0; }
.ecv-ticket__context dt { color: var(--ecv-muted); font-size: 11px; font-weight: 600; line-height: 1.3; }
.ecv-ticket__context dd { margin: 2px 0 0; color: var(--ecv-ink); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.ecv-ticket__context div:last-child { grid-column: 1 / -1; }
.ecv-ticket__foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ecv-line); color: var(--ecv-muted); font-size: 12.5px; font-weight: 500; }
.ecv-ticket__foot img { width: 24px; height: 24px; border-radius: 50%; }

.ecv-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.ecv-steps li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 8px;
  align-content: start;
  padding: 11px 0;
  border-top: 1px solid var(--ecv-line);
}

.ecv-steps__num { grid-row: span 2; padding-top: 3px; color: #3249c7; font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.ecv-steps b { color: var(--ecv-ink); font-size: 16px; font-weight: 600; }
.ecv-steps li > span:last-child { color: var(--ecv-muted); font-size: 14.5px; line-height: 1.4; }

/* ---------- 08 Learn ---------- */

.ecv-scene--learn { aspect-ratio: 760 / 640; }
.ecv-learn__img { position: absolute; right: 0; top: 0; width: 90%; }
.ecv-learn__chip { position: absolute; right: 0; bottom: 2%; z-index: 3; }

.ecv-memory {
  position: absolute;
  left: 0;
  bottom: 9%;
  z-index: 2;
  width: 54%;
  padding: 14px 16px 12px;
}

.ecv-memory__head { display: flex; align-items: center; gap: 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--ecv-line); }
.ecv-memory__head img { width: 36px; height: 36px; border-radius: 50%; }
.ecv-memory__head span { display: grid; }
.ecv-memory__head b { font-size: 15px; font-weight: 600; }
.ecv-memory__head small { color: var(--ecv-muted); font-size: 12px; font-weight: 500; }
.ecv-memory__list { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.ecv-memory__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; font-size: 13px; font-weight: 500; line-height: 1.35; }
.ecv-memory__list li > span:first-child { color: #3249c7; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.ecv-quote--plain { border-left-color: rgba(103, 224, 185, .7); }

/* ---------- Trust ---------- */

.ecv-trust__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(40px, 6vw, 112px);
}

.ecv-points { display: grid; gap: 18px; margin: 34px 0 0; padding: 0; list-style: none; }
.ecv-points li { display: flex; align-items: flex-start; gap: 14px; color: var(--ecv-ink); font-size: 18px; font-weight: 400; line-height: 1.45; }
.ecv-points .ecv-check { margin-top: 2px; background: #2f6fcf; }

.ecv-statement {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 36px);
  margin: 0;
  padding: clamp(28px, 3.4vw, 48px);
  border-radius: 24px;
  background: rgba(255, 253, 249, .78);
  box-shadow: var(--ecv-shadow-soft);
}

.ecv-statement__echo { grid-row: 1 / span 3; align-self: end; width: 100%; }
.ecv-statement blockquote { margin: 0; }

.ecv-statement blockquote p {
  margin: 0;
  color: var(--ecv-ink);
  font-size: calc(var(--cb-title-cta) * .92);
  font-weight: 300;
  letter-spacing: -.03em;
  line-height: 1.3;
}

.ecv-statement figcaption { margin-top: 18px; color: var(--ecv-muted); font-size: 14px; font-weight: 500; }

.ecv-metrics-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--ecv-line);
}

.ecv-metrics-row dt { color: var(--ecv-ink); font-size: 26px; font-weight: 300; letter-spacing: -.04em; }
.ecv-metrics-row dd { margin: 6px 0 0; color: var(--ecv-muted); font-size: 14px; line-height: 1.4; }

/* ---------- FAQ ---------- */

.ecv-faq { padding-top: clamp(40px, 5vw, 80px); }

.ecv-faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: start;
}

.ecv-faq__list { border-top: 1px solid var(--ecv-line); }
.ecv-faq__list details { border-bottom: 1px solid var(--ecv-line); }

.ecv-faq__list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 48px;
  padding: 20px 4px;
  color: var(--ecv-ink);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.015em;
  cursor: pointer;
  list-style: none;
}

.ecv-faq__list summary::-webkit-details-marker { display: none; }

.ecv-faq__list summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 14px no-repeat;
  transition: transform .25s ease;
}

.ecv-faq__list details[open] summary::after { transform: rotate(45deg); }
.ecv-faq__list details p { max-width: 40em; margin: 0; padding: 0 4px 22px; color: var(--ecv-ink-soft); font-size: 16px; line-height: 1.6; }

/* ---------- Final call (end card of the film) ---------- */

.ecv-final { padding-bottom: clamp(110px, 12vw, 180px); text-align: center; }

.ecv-final::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 2%;
  z-index: -1;
  width: min(1100px, 110vw);
  aspect-ratio: 1;
  background: url("/assets/home/home-v27/wash-blue-20261011.webp") center / contain no-repeat;
  opacity: .34;
  mix-blend-mode: multiply;
  transform: translateX(-50%);
  pointer-events: none;
}

.ecv-final__inner { display: flex; flex-direction: column; align-items: center; }
.ecv-final__mark { margin: 0; font-size: clamp(64px, 8vw, 124px); gap: .14em; }
.ecv-final__mark em { margin-left: -.14em; }
.ecv-final__mark .ecv-ring { width: .42em; height: .42em; box-shadow: inset 0 0 0 .09em #42bbdf, 0 0 .2em rgba(66, 187, 223, .5); }

.ecv-final__sig {
  margin: 16px 0 0;
  color: var(--ecv-ink);
  font-size: calc(var(--cb-title-section) * .62);
  font-weight: 300;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.echo-page--v27 .ecv-final__title { margin-top: clamp(40px, 4vw, 60px); font-size: var(--cb-title-cta); }
.ecv-final__lead { margin-inline: auto; text-align: center; }

.ecv-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.ecv-journey {
  width: min(980px, 100%);
  margin-top: clamp(56px, 6vw, 88px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: 26px;
  background: rgba(255, 253, 249, .8);
  box-shadow: var(--ecv-shadow-soft);
  text-align: left;
}

.ecv-journey__kicker { display: flex; align-items: center; gap: 10px; margin: 0; color: #3e4378; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.ecv-journey__title { margin: 10px 0 0; color: var(--ecv-ink); font-size: 24px; font-weight: 400; letter-spacing: -.03em; }
.ecv-journey__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.ecv-journey__steps li { display: grid; align-content: start; gap: 6px; padding-top: 16px; border-top: 1px solid var(--ecv-line); color: var(--ecv-muted); font-size: 15px; line-height: 1.45; }
.ecv-journey__steps b { color: var(--ecv-ink); font-size: 17px; font-weight: 600; }
.ecv-journey__num { color: #3249c7; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ecv-final__note { max-width: 46em; margin: 40px 0 0; color: var(--ecv-muted); font-size: 13px; line-height: 1.5; }

/* ---------- Motion (only with html.ecv-motion) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .ecv-rise { animation: ecv-rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 110ms + 120ms); }

  .ecv-hero__img {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%), url("/assets/home/home-v27/bloom-mask-20261011.png");
    -webkit-mask-composite: source-in, source-in;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: 0 0, 0 0, 70% 42%;
    -webkit-mask-size: 100% 100%, 100% 100%, 330% 330%;
    mask-image: linear-gradient(90deg, transparent 0, #000 16%), linear-gradient(180deg, #000 80%, transparent 100%), url("/assets/home/home-v27/bloom-mask-20261011.png");
    mask-composite: intersect, intersect;
    mask-repeat: no-repeat;
    mask-position: 0 0, 0 0, 70% 42%;
    mask-size: 100% 100%, 100% 100%, 330% 330%;
    animation: ecv-bloom 2.4s cubic-bezier(.3, .6, .2, 1) both .1s;
  }

  .ecv-hero__time { animation: ecv-pop .6s cubic-bezier(.3, 1.4, .5, 1) both 1.7s; }
  .ecv-hero__listen { animation: ecv-pop .6s cubic-bezier(.3, 1.4, .5, 1) both 2.1s; }
  /* Three echoes, three times, then silence (finite: WCAG 2.2.2). */
  .ecv-sonar i { animation: ecv-sonar 2.4s cubic-bezier(.2, .6, .3, 1) 3 both; }
  .ecv-sonar i:nth-child(1) { animation-delay: 2s; }
  .ecv-sonar i:nth-child(2) { animation-delay: 2.5s; }
  .ecv-sonar i:nth-child(3) { animation-delay: 3s; }
}

@keyframes ecv-rise {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}

@keyframes ecv-pop {
  from { opacity: 0; transform: scale(.82) translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes ecv-bloom {
  from { -webkit-mask-size: 100% 100%, 100% 100%, 0% 0%; mask-size: 100% 100%, 100% 100%, 0% 0%; }
  to { -webkit-mask-size: 100% 100%, 100% 100%, 330% 330%; mask-size: 100% 100%, 100% 100%, 330% 330%; }
}

@keyframes ecv-sonar {
  0% { opacity: 0; transform: scale(.2); }
  20% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.6); }
}

@keyframes ecv-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes ecv-paint {
  from { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  to { -webkit-mask-size: 340% 340%; mask-size: 340% 340%; }
}

@keyframes ecv-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ecv-fall {
  from { opacity: 0; transform: translateY(-22px) rotate(calc(var(--r, 0deg) * 4)) scale(.95); }
  to { opacity: 1; transform: rotate(var(--r, 0deg)); }
}

@keyframes ecv-check {
  from { background: #e5e0d4; transform: scale(.8); }
  60% { transform: scale(1.15); }
  to { background: var(--ecv-ok); transform: none; }
}

@keyframes ecv-grow {
  from { width: 0; }
}

@keyframes ecv-arc {
  from { stroke-dasharray: 0 100; }
}

/* Reveal of copy blocks */
html.ecv-motion .ecv-copy[data-ecv-reveal] > *,
html.ecv-motion .ecv-head[data-ecv-reveal] > *,
html.ecv-motion .ecv-faq__head[data-ecv-reveal] > *,
html.ecv-motion .ecv-final__inner[data-ecv-reveal] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

html.ecv-motion [data-ecv-reveal].is-in > * { opacity: 1; transform: none; }
html.ecv-motion [data-ecv-reveal].is-in > :nth-child(2) { transition-delay: .08s; }
html.ecv-motion [data-ecv-reveal].is-in > :nth-child(3) { transition-delay: .16s; }
html.ecv-motion [data-ecv-reveal].is-in > :nth-child(4) { transition-delay: .24s; }
html.ecv-motion [data-ecv-reveal].is-in > :nth-child(5) { transition-delay: .32s; }
html.ecv-motion [data-ecv-reveal].is-in > :nth-child(n + 6) { transition-delay: .4s; }

html.ecv-motion .ecv-groups[data-ecv-reveal] > article,
html.ecv-motion .ecv-faq__list[data-ecv-reveal],
html.ecv-motion .ecv-statement[data-ecv-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1);
}

html.ecv-motion .ecv-groups.is-in > article,
html.ecv-motion .ecv-faq__list.is-in,
html.ecv-motion .ecv-statement.is-in { opacity: 1; transform: none; }
html.ecv-motion .ecv-groups.is-in > article:nth-child(2) { transition-delay: .1s; }
html.ecv-motion .ecv-groups.is-in > article:nth-child(3) { transition-delay: .2s; }

/* Scenes: vignettes paint in with the watercolour bloom, then UI pieces arrive. */
html.ecv-motion .ecv-scene .ecv-vignette,
html.ecv-motion .ecv-board__colour {
  -webkit-mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 50% 45%;
  -webkit-mask-size: 0% 0%;
  mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
  mask-repeat: no-repeat;
  mask-position: 50% 45%;
  mask-size: 0% 0%;
}

html.ecv-motion .ecv-scene.is-in .ecv-vignette { animation: ecv-paint 1.6s cubic-bezier(.3, .6, .2, 1) both; }
html.ecv-motion .ecv-board.is-in .ecv-board__colour { animation: ecv-paint 2.2s cubic-bezier(.3, .6, .2, 1) both .5s; }

html.ecv-motion .ecv-scene .ecv-card,
html.ecv-motion .ecv-scene .ecv-chip,
html.ecv-motion .ecv-scene .ecv-bubble,
html.ecv-motion .ecv-scene .ecv-alert,
html.ecv-motion .ecv-board .ecv-node,
html.ecv-motion .ecv-board .ecv-chip,
html.ecv-motion .ecv-board__badge { opacity: 0; }

html.ecv-motion .ecv-scene.is-in .ecv-card { animation: ecv-rise .8s cubic-bezier(.2, .7, .2, 1) both .7s; }
html.ecv-motion .ecv-scene.is-in .ecv-chip { animation: ecv-pop .6s cubic-bezier(.3, 1.4, .5, 1) both 1.2s; }
html.ecv-motion .ecv-scene.is-in .ecv-bubble { animation: ecv-pop .55s cubic-bezier(.3, 1.4, .5, 1) both 1.8s; }
html.ecv-motion .ecv-board.is-in .ecv-board__badge { animation: ecv-pop .6s cubic-bezier(.3, 1.4, .5, 1) both .3s; }
html.ecv-motion .ecv-board.is-in .ecv-node { animation: ecv-pop .6s cubic-bezier(.3, 1.4, .5, 1) both calc(1.3s + var(--n, 0) * .18s); }
html.ecv-motion .ecv-board.is-in .ecv-chip { animation: ecv-pop .6s cubic-bezier(.3, 1.4, .5, 1) both .2s; }

html.ecv-motion .ecv-board__links path { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.ecv-motion .ecv-board.is-in .ecv-board__links path { animation: ecv-draw 1.5s ease-in-out both calc(1.2s + var(--n, 0) * .2s); }
.ecv-board__links path:nth-of-type(2) { --n: 1; }
.ecv-board__links path:nth-of-type(3) { --n: 2; }
.ecv-board__links path:nth-of-type(4) { --n: 3; }

/* Checks tick one by one (night log, actions, deployment flow). */
html.ecv-motion .ecv-scene .ecv-log__steps .ecv-check,
html.ecv-motion .ecv-scene .ecv-actions__list .ecv-check,
html.ecv-motion .ecv-scene .ecv-flow__steps .ecv-check { background: #e5e0d4; }
html.ecv-motion .ecv-scene .ecv-log__steps .ecv-check::after,
html.ecv-motion .ecv-scene .ecv-actions__list .ecv-check::after,
html.ecv-motion .ecv-scene .ecv-flow__steps .ecv-check::after { opacity: 0; }
html.ecv-motion .ecv-scene.is-in .ecv-log__steps .ecv-check,
html.ecv-motion .ecv-scene.is-in .ecv-actions__list .ecv-check,
html.ecv-motion .ecv-scene.is-in .ecv-flow__steps .ecv-check { animation: ecv-check .45s ease both calc(1.3s + var(--i) * .6s); }
html.ecv-motion .ecv-scene.is-in .ecv-log__steps .ecv-check::after,
html.ecv-motion .ecv-scene.is-in .ecv-actions__list .ecv-check::after,
html.ecv-motion .ecv-scene.is-in .ecv-flow__steps .ecv-check::after { animation: ecv-fade-in .3s ease both calc(1.45s + var(--i) * .6s); }
html.ecv-motion .ecv-scene .ecv-log__steps li,
html.ecv-motion .ecv-scene .ecv-log__result,
html.ecv-motion .ecv-scene .ecv-actions__human { opacity: .35; transition: opacity .45s ease; }
html.ecv-motion .ecv-scene.is-in .ecv-log__steps li { opacity: 1; transition-delay: calc(1.3s + var(--i) * .6s); }
html.ecv-motion .ecv-scene.is-in .ecv-log__result { opacity: 1; transition-delay: 3.8s; }
html.ecv-motion .ecv-scene.is-in .ecv-actions__human { opacity: 1; transition-delay: 4s; }
html.ecv-motion .ecv-scene--night.is-in .ecv-night__echo { animation-delay: 4.1s; }
html.ecv-motion [data-ecv-type][data-ecv-typing]::after { content: "▍"; color: #42bbdf; }

/* Detect: the alerts fall in, the threads draw, the root cause lands. */
html.ecv-motion .ecv-scene--detect.is-in .ecv-alert { animation: ecv-fall .6s cubic-bezier(.2, .9, .3, 1.15) both calc(.5s + var(--i) * .35s); }
html.ecv-motion .ecv-detect__links path { stroke-dashoffset: 1; }
html.ecv-motion .ecv-scene--detect.is-in .ecv-detect__links path { animation: ecv-draw .9s ease both 2s; }
html.ecv-motion .ecv-scene--detect.is-in .ecv-root { animation-delay: 2.6s; }
html.ecv-motion .ecv-scene--detect.is-in .ecv-detect__window { animation-delay: .2s; }

/* Bars, score and progress fill once their scene is on screen. */
html.ecv-motion .ecv-scene.is-in .ecv-bars i::after { animation: ecv-grow 1.2s cubic-bezier(.3, .6, .2, 1) both 1.1s; }
html.ecv-motion .ecv-scene.is-in .ecv-flow__bar i { animation: ecv-grow 1.4s cubic-bezier(.3, .6, .2, 1) both 2.4s; }
html.ecv-motion .ecv-scene.is-in .ecv-score__arc { animation: ecv-arc 1.4s cubic-bezier(.3, .6, .2, 1) both 1s; }
html.ecv-motion .ecv-scene--comply.is-in .ecv-comply__bubble { animation-delay: 2.6s; }

/* ---------- Responsive ---------- */

@media (max-width: 1360px) {
  .echo-nav { gap: 18px; }
  .echo-nav a { font-size: 14px; }
  .echo-login { display: none; }
}

@media (max-width: 1120px) {
  .echo-page--v27 { --ecv-header-h: 76px; }
  .echo-topbar { grid-template-columns: minmax(0, 1fr) auto; background: rgba(251, 244, 230, .94); box-shadow: 0 1px 0 rgba(7, 8, 63, .07); }
  .echo-nav { display: none; }
  .echo-page--v27 .page-breadcrumb--product { position: relative; top: auto; left: auto; width: var(--cb-shell); max-width: none; margin: 14px auto 0; border-radius: 999px; }

  .ecv-hero {
    min-height: 0;
    margin-top: 0;
    padding: 34px 0 0;
  }

  /* Stacked hero: copy, then the plate, then the proofs. */
  .ecv-hero__inner { display: contents; }
  .ecv-hero__copy,
  .ecv-proofs { order: 1; width: min(var(--cb-shell), 640px); max-width: none; margin-inline: auto; }
  .ecv-hero__copy { margin-block: 0; padding-block: 0; }
  .ecv-proofs { order: 3; }

  .ecv-hero__plate {
    position: relative;
    inset: auto;
    order: 2;
    width: min(100%, 860px);
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 30px auto 0;
  }

  .ecv-hero__img,
  html.ecv-motion .ecv-hero__img {
    -webkit-mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    -webkit-mask-size: 118% 118%;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-composite: source-over;
    mask-image: url("/assets/home/home-v27/bloom-mask-20261011.png");
    mask-size: 118% 118%;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    mask-composite: add;
    animation: none;
  }

  /* Ring position in the 4:3 mobile crop (x 672–1672, y 96–846 of the plate). */
  .ecv-sonar { left: 46.3%; top: 31.2%; }
  .ecv-hero__time { left: 6%; top: 7%; }
  .ecv-hero__listen { left: auto; right: 6%; top: 18%; }

  .ecv-proofs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
    margin-top: 26px;
    margin-bottom: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ecv-proofs li,
  .ecv-proofs li + li { padding: 0; border: 0; white-space: normal; }

  .ecv-split,
  .ecv-trust__grid,
  .ecv-faq__grid { grid-template-columns: minmax(0, 1fr); }
  .ecv-cap--flip .ecv-split { grid-template-columns: minmax(0, 1fr); }
  .ecv-cap--flip .ecv-copy { order: 0; }
  .ecv-lead,
  .ecv-hero__lead { font-size: calc(var(--cb-lead-section) * .9); }
  .ecv-scene { width: min(100%, 760px); margin-inline: auto; }
  .ecv-groups { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ecv-groups article { padding-block: 20px; }
}

@media (max-width: 760px) {
  .ecv-shell,
  .ecv-hero__copy,
  .ecv-proofs,
  .echo-page--v27 .page-breadcrumb--product { width: calc(100% - 40px); }
  .echo-page--v27 .page-breadcrumb--product { display: none; }
  .ecv-section { padding-block: 80px; }
  .ecv-hero { padding-top: 26px; }
  .echo-page--v27 .ecv-hero__title { font-size: calc(var(--cb-title-hero) * .98); }
  .echo-page--v27 .ecv-title,
  .echo-page--v27 .ecv-title--wide { font-size: var(--cb-title-section-side); }
  .ecv-lead,
  .ecv-hero__lead { font-size: calc(var(--cb-lead-section) * .88); }
  .ecv-eyebrow { font-size: 13px; }
  .ecv-hero__actions { gap: 22px; }
  .ecv-hero__actions .ecv-btn { width: 100%; }
  .ecv-hero__plate { width: calc(100% + 24px); margin-inline: -12px; }
  .ecv-proofs li { font-size: 13px; }
  .ecv-chip { padding: 7px 12px 7px 9px; font-size: 12.5px; }
  .ecv-list--two,
  .ecv-steps { grid-template-columns: minmax(0, 1fr); }

  /* Scenes become stacked: illustration first, then the live UI pieces in flow. */
  .ecv-board { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: calc(100% - 40px); aspect-ratio: auto; padding-top: 48px; }
  .ecv-board__art { position: relative; aspect-ratio: 1100 / 960; }
  .ecv-board__ink,
  .ecv-board__colour { left: 0; top: 0; width: 100%; }
  .ecv-board__links { display: none; }
  .ecv-board__badge { top: auto; bottom: 0; font-size: 20px; }
  .ecv-board__nodes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .ecv-node { position: relative; inset: auto; width: auto; min-width: 0; max-width: none; padding: 8px 10px 8px 8px; border-radius: 16px; }
  .ecv-node .ecv-node__icon { width: 30px; height: 30px; }
  .ecv-node__text b { font-size: 14px; }
  .ecv-node__text small { font-size: 11.5px; white-space: normal; }
  .ecv-board__team { top: 0; }

  .ecv-scene--night,
  .ecv-scene--watch,
  .ecv-scene--detect,
  .ecv-scene--act,
  .ecv-scene--deploy,
  .ecv-scene--remote,
  .ecv-scene--comply,
  .ecv-scene--neoo,
  .ecv-scene--learn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; aspect-ratio: auto; }

  .ecv-scene > *,
  .ecv-alerts { position: relative; inset: auto; width: 100%; min-width: 0; }
  .ecv-scene > .ecv-chip,
  .ecv-scene > .ecv-bubble { justify-self: start; width: max-content; max-width: 100%; white-space: normal; }
  .ecv-scene > .ecv-bubble::after { left: 22px; right: auto; }
  .ecv-detect__links { display: none; }
  .ecv-alert { --r: 0deg; }
  .ecv-alert:nth-child(n) { --r: 0deg; }
  .ecv-scene--night .ecv-night__echo,
  .ecv-scene--comply .ecv-comply__bubble,
  .ecv-scene--neoo .ecv-neoo__bubble { justify-self: end; }
  .ecv-scene--night .ecv-night__echo::after,
  .ecv-scene--comply .ecv-comply__bubble::after,
  .ecv-scene--neoo .ecv-neoo__bubble::after { left: auto; right: 26px; }
  .ecv-root__meta,
  .ecv-cockpit__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ecv-statement { grid-template-columns: minmax(0, 1fr); }
  .ecv-statement__echo { grid-row: auto; width: 120px; justify-self: center; margin-bottom: 18px; }
  .ecv-metrics-row,
  .ecv-journey__steps { grid-template-columns: minmax(0, 1fr); }
  .ecv-final__actions .ecv-btn { width: 100%; }
}

@media (max-width: 640px) {
  .echo-page--v27 { --ecv-header-h: 68px; }
  .echo-topbar { gap: 12px; padding: 0 16px; }
  .echo-topbar__home,
  .echo-topbar__divider { display: none; }
  .echo-topbar__actions { gap: 10px; }
  .echo-lang select { min-height: 40px; padding-right: 26px; }
  .echo-topbar__cta.ecv-btn { min-height: 42px; padding: 0 16px; font-size: 14px; }
  .ecv-proofs { grid-template-columns: minmax(0, 1fr); }
}

@media (forced-colors: active) {
  .echo-page--v27 .ecv-hero__title em,
  .echo-page--v27 .ecv-title em,
  .ecv-final__sig em,
  .ecv-eyebrow__num,
  .ecv-board__badge em,
  .ecv-final__mark em,
  .echo-logo__dot {
    background: none;
    color: LinkText;
    -webkit-text-fill-color: currentColor;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecv-btn,
  .ecv-btn svg,
  .ecv-watch__ring,
  .ecv-link svg,
  .ecv-products svg,
  .echo-topbar,
  .echo-nav a::after { transition: none; }
  .ecv-sonar { display: none; }
}