/* ==========================================================================
   Intelligence22 — site styles (2026)
   One stylesheet for the whole site. New pages add class="site" to <body>;
   the policy pages still use liteframe.css for their body copy and only take
   the shared header, footer and button styles from here, so every global
   rule below is scoped to .site and every shared component has a name
   LiteFrame doesn't use (no .btn, .container, .nav, .logo, .grid, .card).

   The look comes from the original "What we do" section: bold black line
   icons, headings in the teal gradient, a light grey band, lots of air.
   ========================================================================== */

/* Montserrat, served from this site rather than Google's, so no visitor data
   leaves before they've made a cookie choice. Latin subsets, woff2.
   Copyright 2011 The Montserrat Project Authors, SIL Open Font License 1.1
   (https://openfontlicense.org). */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/montserrat-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/montserrat-500.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/montserrat-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/montserrat-700.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/montserrat-800.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --ink: #1d1d1b;          /* TFG black */
  --ink-2: #43464a;
  --ink-3: #62666c;
  --paper: #ffffff;
  --mist: #f3f5f7;         /* the grey band from the old What we do */
  --mist-2: #e8edf0;
  --line: #dde3e8;
  --teal: #2e767c;
  --teal-deep: #1f575c;
  --sky: #77bcc5;
  --sky-soft: #dcedf0;
  --good: #1c9152;
  --good-soft: #dff2e6;
  --bad: #d13b3b;
  --bad-soft: #fbe3e3;
  --amber: #c9761a;
  --amber-soft: #fcebd6;
  --grad: linear-gradient(to bottom left, var(--teal) 0%, var(--sky) 100%);
  --grad-h: linear-gradient(90deg, var(--teal) 0%, var(--sky) 100%);
  --radius: 3px;
  --radius-lg: 8px;
  --shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 8px 24px -12px rgba(16, 24, 32, .18);
  --shadow-lg: 0 40px 80px -30px rgba(16, 24, 32, .35), 0 16px 40px -20px rgba(16, 24, 32, .22);
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --header-h: 80px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Critically damped spring (response 0.42s, no overshoot). Browsers without
     linear() get a close curve. Settles in about 0.62s. */
  --spring: cubic-bezier(.2, .8, .2, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --spring: linear(0, 0.02, 0.08, 0.15, 0.24, 0.32, 0.41, 0.48, 0.55, 0.62, 0.67, 0.72, 0.77, 0.8, 0.83, 0.86, 0.88, 0.9, 0.92, 0.93, 0.95, 0.95, 0.96, 0.97, 0.97, 0.98, 0.98, 0.99, 0.99, 0.99, 0.99, 0.99, 0.99, 1, 1, 1, 1, 1, 1, 1, 1); }
}

/* ---------- Base (new pages only) ---------- */

.site,
.site *,
.site *::before,
.site *::after { box-sizing: border-box; }

html:has(body.site) { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }

body.site {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

.site h1, .site h2, .site h3, .site h4, .site p, .site ul, .site ol, .site figure { margin: 0; }
.site ul, .site ol { padding: 0; list-style: none; }
.site img, .site svg { display: block; max-width: 100%; }
.site a { color: inherit; }
.site button { font: inherit; color: inherit; }
.site ::selection { background: var(--sky-soft); color: var(--ink); }

.site :focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px; top: -60px;
  z-index: 1000;
  padding: 12px 18px;
  background: var(--ink);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: var(--radius);
  transition: top .2s;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Type ---------- */

.display {
  font-weight: 800;
  font-size: clamp(2.6rem, 1.3rem + 4.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -.025em;
}

.title {
  font-weight: 800;
  font-size: clamp(2.3rem, 1.4rem + 3.3vw, 4.375rem);
  line-height: 1.05;
  letter-spacing: -.02em;
}

.title--md { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); }

.lead {
  font-size: clamp(1.08rem, .95rem + .55vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}

.grad,
.site .grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--teal);
}

/* The eyebrow carries the three-bar mark from the logo. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow::before {
  content: "";
  width: 14px;
  height: 11px;
  flex: none;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 4px 45% no-repeat,
    linear-gradient(currentColor, currentColor) 5px 100% / 4px 72% no-repeat,
    linear-gradient(currentColor, currentColor) 10px 100% / 4px 100% no-repeat;
}
.eyebrow--light { color: var(--sky); }

.section-head { display: grid; gap: 20px; max-width: 900px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }
.section-head--center .lead { margin: 0 auto; }

/* ---------- Buttons (shared with the policy pages) ---------- */

.button {
  --b-bg: var(--ink);
  --b-fg: #fff;
  --b-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--b-bd);
  border-radius: var(--radius);
  background: var(--b-bg);
  color: var(--b-fg) !important;
  font-family: var(--font);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.button:hover { --b-bg: var(--teal); --b-bd: var(--teal); }
.button:active { transform: scale(.97); transition-duration: .1s; }
.button .ico { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.button:hover .ico--nudge { transform: translateX(4px); }

.button--ghost { --b-bg: transparent; --b-fg: var(--ink); }
.button--ghost:hover { --b-bg: var(--ink); --b-bd: var(--ink); --b-fg: #fff; }

.button--light { --b-bg: #fff; --b-fg: var(--ink); --b-bd: #fff; }
.button--light:hover { --b-bg: var(--sky); --b-bd: var(--sky); --b-fg: var(--ink); }

.button--ghost-light { --b-bg: transparent; --b-fg: #fff; --b-bd: rgba(255, 255, 255, .5); }
.button--ghost-light:hover { --b-bg: #fff; --b-bd: #fff; --b-fg: var(--ink); }

.button--sm { min-height: 40px; padding: 0 16px; font-size: .82rem; }
.button--sm .ico { width: 18px; height: 18px; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--teal) !important;
  text-decoration: none !important;
}
.textlink .ico { width: 20px; height: 20px; transition: transform .25s var(--ease); }
.textlink:hover .ico { transform: translateX(4px); }
.textlink:hover span { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Header (shared) ---------- */

.site-header {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--header-h) !important;
  background: rgba(255, 255, 255, .94) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent !important;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
  font-family: var(--font);
}
.site-header.is-scrolled { border-bottom-color: var(--line) !important; }

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Wordmark: the third bar doubles as the I, so the compact state just hides
   NTELLIGENCE and slides the 22 back next to the bars (1064.5 user units). */
.site-logo {
  display: block;
  flex: none;
  width: 340px;
  height: 26px;
  overflow: hidden;
  color: var(--ink);
  transition: width .5s var(--ease-out);
}
.site-logo .wordmark { width: 340px; height: 26px; max-width: none; fill: currentColor; overflow: visible; }
.wordmark .wm-letters { transition: opacity .35s var(--ease), transform .5s var(--ease-out); }
.wordmark .wm-22 { transition: transform .5s var(--ease-out); }
.wordmark .wm-bars rect { transform-box: fill-box; transform-origin: 50% 100%; }

.site-header.is-compact .site-logo { width: 76px; }
.site-header.is-compact .wm-letters { opacity: 0; transform: translateX(-160px); }
.site-header.is-compact .wm-22 { transform: translateX(-1064.5px); }

.js .wordmark .wm-bars rect { animation: bar-rise .9s var(--spring) both; }
.js .wordmark .wm-bars rect:nth-child(2) { animation-delay: .08s; }
.js .wordmark .wm-bars rect:nth-child(3) { animation-delay: .16s; }
@keyframes bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.site-nav { margin-left: auto; display: none; }
.site-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.site-nav__link {
  position: relative;
  display: block;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--ink-3) !important;
  transition: color .2s var(--ease);
}
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, rgba(119, 188, 197, 0) 0%, var(--sky) 35%, var(--sky) 65%, rgba(119, 188, 197, 0) 100%);
  transform: scaleX(0);
  transition: transform .35s var(--ease-out);
}
.site-nav__link:hover { color: var(--ink) !important; }
.site-nav__link.is-active, .site-nav__link[aria-current="page"] { color: var(--ink) !important; }
.site-nav__link.is-active::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.site-nav + .site-header__actions { margin-left: 12px; }

.menu-toggle {
  position: relative;
  width: 44px; height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: var(--radius);
}
.menu-toggle__bars { position: relative; width: 22px; height: 14px; }
.menu-toggle__bars span {
  position: absolute; left: 0;
  width: 100%; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .2s, top .35s var(--ease-out);
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 6px; }
.menu-toggle__bars span:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: var(--header-h); left: 0; right: 0; bottom: 0;
  z-index: 190;
  background: #fff;
  padding: 24px var(--gutter) 40px;
  overflow-y: auto;
  font-family: var(--font);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .4s var(--ease-out), visibility 0s linear .4s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.mobile-menu__list li { border-bottom: 1px solid var(--line); }
.mobile-menu__list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink) !important;
  text-decoration: none !important;
}
.mobile-menu__list a .ico { width: 24px; height: 24px; color: var(--teal); }
.mobile-menu.is-open .mobile-menu__list li { animation: menu-in .5s var(--ease-out) both; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(2) { animation-delay: .04s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(3) { animation-delay: .08s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(4) { animation-delay: .12s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(5) { animation-delay: .16s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(6) { animation-delay: .2s; }
.mobile-menu.is-open .mobile-menu__list li:nth-child(7) { animation-delay: .24s; }
@keyframes menu-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.mobile-menu__foot { display: grid; gap: 16px; margin-top: 32px; }
.mobile-menu__foot .button { width: 100%; }
.mobile-menu__contact { font-size: .95rem; color: var(--ink-3); }
.mobile-menu__contact a { color: var(--teal) !important; font-weight: 700; }

body.menu-open { overflow: hidden; }

@media (max-width: 599px) {
  .site-logo { width: 76px; }
  .wm-letters { opacity: 0; transform: translateX(-160px); }
  .wm-22 { transform: translateX(-1064.5px); }
}

/* Eight items, with the Freethinking Hub dropdown: the header stays in the
   page's 1240px column, lined up with everything below, and makes room by
   using the compact wordmark (the bars and 22) whenever the full menu shows. */
@media (min-width: 1240px) {
  .site-nav { display: block; }
  .menu-toggle, .mobile-menu { display: none; }
  .site-header__inner { gap: 14px; }
  .site-nav__link { padding: 10px 9px; letter-spacing: .06em; }
  .site-logo { width: 76px; }
  .wm-letters { opacity: 0; transform: translateX(-160px); }
  .wm-22 { transform: translateX(-1064.5px); }
}

/* ---------- Sections ---------- */

.section { position: relative; padding: clamp(88px, 11vw, 160px) 0; }
.section--mist { background: var(--mist); }
.section--dark { background: var(--ink); color: #fff; }
.section--dark .lead { color: rgba(255, 255, 255, .72); }
.section--dark .grad { background: linear-gradient(to bottom left, var(--sky) 0%, #b9e0e5 100%); -webkit-background-clip: text; background-clip: text; }
.section--tight { padding: clamp(56px, 7vw, 96px) 0; }
.section--flush-top { padding-top: 0; }

.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

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

.hero {
  position: relative;
  padding: calc(var(--header-h) + clamp(40px, 7vw, 96px)) 0 clamp(64px, 8vw, 120px);
  overflow: hidden;
}
.hero__grid {
  position: relative;
  display: grid;
  gap: clamp(48px, 6vw, 72px);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; }
.hero__copy .lead { max-width: 40ch; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.hero__note { font-size: .9rem; color: var(--ink-3); }
.hero__note a { color: var(--teal); font-weight: 700; text-decoration: none; }
.hero__note a:hover { text-decoration: underline; text-underline-offset: 3px; }

.hero__visual { position: relative; z-index: 1; }

/* The three bars from the old hero, grown huge and faint behind the product. */
.hero__bars {
  position: absolute;
  right: -4%;
  bottom: -18%;
  width: min(68%, 620px);
  aspect-ratio: 327 / 261;
  display: flex;
  align-items: flex-end;
  gap: 7%;
  z-index: 0;
  pointer-events: none;
}
.hero__bars span {
  flex: 1;
  background: var(--grad);
  opacity: .12;
  transform-origin: 50% 100%;
}
.hero__bars span:nth-child(1) { height: 50%; }
.hero__bars span:nth-child(2) { height: 75%; }
.hero__bars span:nth-child(3) { height: 100%; }
.js .hero__bars span { animation: bar-rise 1.4s var(--ease-out) both; }
.js .hero__bars span:nth-child(2) { animation-delay: .15s; }
.js .hero__bars span:nth-child(3) { animation-delay: .3s; }

/* ---------- Brand hero: the Intelligence22 bars, and the one still to come ----------
   The three bars of the mark in ink, then a fourth, taller one drawn as a
   dashed outline that fills with teal: the potential in the headline. The
   bars keep the mark's proportions (1 : 1.5 : 2). */

.potential {
  position: relative;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  margin: 0 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8%;
  padding: 0 3% 0 0;
}
.potential__bar {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 0 0;
  background: var(--ink);
  transform-origin: 50% 100%;
}
.potential__bar:nth-child(1) { --h: 33%; }
.potential__bar:nth-child(2) { --h: 49.5%; }
.potential__bar:nth-child(3) { --h: 66%; }
.potential__bar--next {
  --h: 92%;
  position: relative;
  background: transparent;
  border: 2px dashed var(--teal);
  border-bottom: 0;
}
.potential__fill {
  position: absolute;
  inset: 5px 5px 0;
  border-radius: 3px 3px 0 0;
  background: var(--teal);
  transform-origin: 50% 100%;
}
/* Each outcome sits over a bar, climbing with them. */
.hero.hero--brand .sat { top: auto; right: auto; bottom: auto; left: auto; }
.hero.hero--brand .sat--1 { top: 50%; left: 1%; }
.hero.hero--brand .sat--2 { top: 33%; left: 13%; }
.hero.hero--brand .sat--3 { top: 16%; left: 34%; }
/* The bars keep to the grid; only the product drawing bled off the edge. */
@media (min-width: 1024px) { .hero--brand .hero__visual { margin-right: 0; } }
@media (max-width: 1023px) { .potential { width: min(100%, 420px); } }

@media (min-width: 1024px) {
  .hero { min-height: min(100vh, 940px); display: flex; align-items: center; }
  .hero__grid { grid-template-columns: minmax(0, 5.6fr) minmax(0, 6.4fr); }
  .hero .display { font-size: clamp(3.2rem, 1.6rem + 3.3vw, 4.6rem); }
  .hero__visual { margin-right: calc(-1 * clamp(0px, 6vw, 120px)); }
}

/* ---------- Product recreation (a drawing of DataViz, not a screenshot) ---------- */

.app {
  --app-font: 12px;
  position: relative;
  font-size: var(--app-font);
  line-height: 1.35;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  isolation: isolate;
  user-select: none;
}

/* As DataViz runs today (the 60-second film is the reference): a white
   navbar, a grey bar with the slide's title and tools, the slide rail with
   its category chips, the filter row and the freshness line, then grey
   tiles and cards with 1px corners on a white page. */
.app__top {
  display: flex;
  align-items: center;
  gap: 1.2em;
  height: 3.6em;
  padding: 0 1.3em;
  background: #fff;
  box-shadow: inset 0 -1px 0 #dedfe1;
}
.app__logo { height: 1.35em; width: auto; }
.app__logo--dataviz { height: .92em; aspect-ratio: 641 / 100; }
.app__icons { margin-left: auto; display: flex; align-items: center; gap: 1em; }
.app__client {
  display: inline-flex; align-items: center; gap: .6em;
  height: 2.3em;
  padding: 0 .5em 0 .75em;
  margin-right: .2em;
  background: var(--mist);
  box-shadow: inset 0 0 0 1px #dedfe1;
  border-radius: 2px;
  font-weight: 600;
  white-space: nowrap;
}
.app__client .ico { width: 1.1em; height: 1.1em; color: #5d5e5d; }
.app__icon { position: relative; display: grid; place-items: center; color: var(--ink-2); }
.app__icon .ico, .app__icon img { display: block; width: 1.5em; height: 1.5em; }
.app__badge {
  position: absolute; top: -.75em; right: -.85em;
  min-width: 1.5em; height: 1.5em;
  padding: 0 .3em;
  border-radius: 1px;
  background: var(--bad);
  color: #fff;
  font-size: .7em; font-weight: 700;
  display: grid; place-items: center;
}

.app__sub {
  display: flex; align-items: center;
  height: 3.6em;
  padding-right: 1.3em;
  background: var(--mist);
  box-shadow: inset 0 -1px 0 #dedfe1;
  white-space: nowrap;
}
.app__back { display: grid; place-items: center; width: 3.2em; flex: none; color: #5d5e5d; }
.app__back .ico { width: 1.4em; height: 1.4em; transform: rotate(90deg); }
.app__title { font-size: 1.4em; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.app__tag { margin-left: 1.1em; font-size: .76em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #888989; }
.app__tools { margin-left: auto; display: flex; align-items: center; gap: 1.25em; padding-left: 1em; color: var(--ink-2); }
.app__tools .ico { display: block; width: 1.4em; height: 1.4em; }
.app__seen { display: inline-flex; align-items: center; gap: .5em; height: 2em; padding: 0 .75em; background: #fff; box-shadow: inset 0 0 0 1px #dedfe1; border-radius: 2px; font-size: .9em; font-weight: 600; }
.app__seen .ico { width: 1.2em; height: 1.2em; color: var(--teal); }
.app__tool { position: relative; }

.app__main { display: grid; grid-template-columns: 13em minmax(0, 1fr); }
.app__rail { background: var(--mist); box-shadow: inset -1px 0 0 #dedfe1; display: grid; align-content: start; min-width: 0; }
.app__chips { display: flex; gap: .45em; padding: .65em .65em .75em; }
.app__chips span { display: flex; align-items: center; height: 1.95em; padding: 0 .7em; background: #fff; box-shadow: inset 0 0 0 1px #dedfe1; font-size: .88em; font-weight: 600; }
.app__chips .is-on { background: var(--teal); box-shadow: none; color: #fff; }
.app__slide { display: flex; align-items: center; gap: .8em; height: 3em; padding: 0 .8em 0 1.1em; box-shadow: inset -1px -1px 0 #dedfe1; font-weight: 500; white-space: nowrap; min-width: 0; }
.app__slide .ico { width: 1.4em; height: 1.4em; flex: none; color: var(--teal); }
.app__slide span { overflow: hidden; text-overflow: ellipsis; }
.app__slide.is-on { background: var(--teal); color: #fff; box-shadow: none; }
.app__slide.is-on .ico { color: #fff; }
.app__slide.is-draft { background: #fbddbb; }
.app__slide b { margin-left: auto; padding: .1em .45em; background: #dedfe1; font-size: .78em; font-weight: 700; }

.app__page { padding: 1.1em 1.4em 1.4em; background: #fff; min-width: 0; }
.app__frow { display: flex; align-items: center; gap: .7em; white-space: nowrap; }
.app__fbtn { display: inline-flex; align-items: center; gap: .55em; height: 2.6em; padding: 0 .85em; background: var(--mist); box-shadow: inset 0 0 0 1px #dedfe1; font-weight: 500; }
.app__fbtn .ico { width: 1.25em; height: 1.25em; color: var(--teal); }
.app__fbtn .ico + .ico { width: 1.05em; height: 1.05em; color: #5d5e5d; }
.app__fbtn--sq { width: 2.6em; padding: 0; justify-content: center; }
.app__fbtn--date { margin-left: auto; }
.app__flink { margin-left: .2em; font-size: .92em; color: #5d5e5d; text-decoration: underline; text-underline-offset: .25em; }
.app__fresh { margin: .85em 0 1em; font-size: .9em; font-weight: 500; color: #888989; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; margin-bottom: 1em; }

.kpi {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 9.6em;
  padding: .95em 1em 0;
  background: var(--mist);
  border-radius: 1px;
  overflow: hidden;
  transition: background-color .5s var(--ease), opacity .4s var(--ease), transform .4s var(--ease);
}
.kpi__row { display: flex; align-items: center; gap: .55em; }
.kpi__label { font-size: .8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5d5e5d; white-space: nowrap; }
.kpi__chip {
  margin-left: auto;
  padding: .2em .55em;
  border-radius: 1px;
  font-size: .8em; font-weight: 700;
  white-space: nowrap;
  transition: background-color .4s, color .4s;
}
.kpi__chip--good { background: #d3ebc8; color: #2f6e14; }
.kpi__chip--action { background: #edcfd3; color: #be2f3f; }
.kpi__chip--pace { background: #c8dcde; color: var(--teal-deep); }
.kpi__kebab { font-weight: 800; line-height: 1; color: #888989; }
.kpi__value {
  margin-top: .35em;
  font-size: 1.6em;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.kpi__delta { margin-top: .3em; font-size: .86em; font-weight: 500; color: #888989; white-space: nowrap; }
.kpi__delta b { font-weight: 700; }
.kpi__delta.is-up b { color: var(--good); }
.kpi__delta.is-down b { color: #be2f3f; }
.kpi__spark { display: block; width: calc(100% + 2em); height: 2.9em; margin: auto -1em 0; padding-top: .5em; overflow: visible; }
.kpi__spark .area { fill: #e1e8eb; }
.kpi__spark .line { fill: none; stroke: #a3bcc1; stroke-width: 1.6; stroke-linejoin: round; }
.js .kpi__spark { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-out); }
.js .kpi.is-drawn .kpi__spark { clip-path: inset(0 0 0 0); }
.kpi.is-alert { background: #f9eaec; }
.kpi__tgt { margin-top: .5em; font-size: .9em; font-weight: 600; color: #be2f3f; white-space: nowrap; }
.kpi__bar { position: relative; height: 5px; margin: auto 0 1.1em; background: #dedfe1; }
.kpi__bar em { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--teal); transform-origin: 0 50%; }
.kpi__bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.kpi__meta { display: flex; justify-content: space-between; gap: .5em; margin-top: .5em; font-size: .82em; font-weight: 600; color: #5d5e5d; white-space: nowrap; }
.js .kpi__bar em { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .3s; }
.js .kpi.is-drawn .kpi__bar em { transform: scaleX(1); }
.kpi__target { display: grid; gap: .35em; margin-top: .55em; font-size: .85em; color: #be2f3f; font-weight: 600; }
.kpi__target i { display: block; height: 5px; border-radius: 1px; background: #dedfe1; overflow: hidden; }
.kpi__target em { display: block; height: 100%; width: 100%; background: var(--teal); transform-origin: 0 50%; }
.js .kpi__target em { transform: scaleX(0); transition: transform 1.4s var(--ease-out) .3s; }
.js .kpi.is-drawn .kpi__target em { transform: scaleX(1); }
.kpi.is-pulse { animation: kpi-pulse 1.2s var(--ease) 1; }
@keyframes kpi-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(209, 59, 59, 0); } 40% { box-shadow: 0 0 0 .5em rgba(209, 59, 59, .18); } }

.chart {
  background: var(--mist);
  border-radius: 1px;
  padding: 1em 1.1em .9em;
}
.chart__head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .6em; }
.chart__title { font-size: 1.25em; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.chart__title .rc {
  position: relative;
  display: inline-block;
  font-weight: 700;
  color: var(--teal-deep);
  border-bottom: 1.5px dotted var(--sky);
  padding-right: .7em;
}
.chart__title .rc::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  border: .22em solid transparent;
  border-top-color: var(--ink-3);
  transform: translateY(-10%);
}
.rc__word { display: inline-block; transition: opacity .3s var(--ease), transform .4s var(--ease-out); }
.rc__word.is-leaving { opacity: 0; transform: translateY(-40%); }
.rc__word.is-entering { opacity: 0; transform: translateY(40%); }
.chart__flag {
  padding: .3em .6em;
  border-radius: 2px;
  background: var(--sky-soft);
  color: var(--teal-deep);
  font-weight: 700;
  font-size: .85em;
  white-space: nowrap;
}
.chart__svg { width: 100%; height: auto; overflow: visible; }
.chart__svg text { font-family: var(--font); font-size: 10px; fill: var(--ink-3); }
.chart__grid line { stroke: #e1e3e5; stroke-width: 1; }
.chart__compare { fill: none; stroke: #888989; stroke-width: 1.6; stroke-dasharray: 5 4; }
.chart__line { fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chart__future { fill: #eaeef1; }
.chart__band { fill: #c8dcde; opacity: .75; }
.chart__proj { fill: none; stroke: var(--teal); stroke-width: 1.8; stroke-dasharray: 5 5; }
.chart__pin { fill: var(--teal); }
.chart__legend { display: flex; flex-wrap: wrap; gap: 1.2em; margin-top: .5em; color: var(--ink-3); }
.chart__legend span { display: inline-flex; align-items: center; gap: .45em; white-space: nowrap; }
.chart__legend em { font-style: normal; }
.chart__legend i { width: 1.4em; height: 3px; background: var(--teal); border-radius: 2px; }
.chart__legend i.is-dash { background: repeating-linear-gradient(90deg, #9aa3aa 0 4px, transparent 4px 7px); }
.chart__legend i.is-band { height: .8em; background: #c8dcde; box-shadow: inset 0 0 0 1.5px var(--teal); }
.chart__note {
  margin-top: .8em;
  padding: .7em .9em;
  background: #c8dcde;
  color: var(--teal-deep);
  font-weight: 500;
}
.chart__note b { display: block; color: var(--ink); font-weight: 700; }

.app__insight {
  position: absolute;
  right: 1.2em;
  bottom: 1.2em;
  width: min(22em, 46%);
  padding: 1em 1.1em;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 2px;
  box-shadow: 0 18px 40px -16px rgba(16, 24, 32, .35);
  transform: translateY(12px);
  opacity: 0;
  transition: opacity .5s var(--ease), transform .7s var(--ease-out), border-color .4s;
}
.app__insight.is-on { opacity: 1; transform: none; }
.app__insight-top { display: flex; align-items: center; gap: .5em; font-size: .8em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.app__insight-top .ico { width: 1.3em; height: 1.3em; }
.app__insight p { margin-top: .45em; font-size: 1.08em; font-weight: 600; line-height: 1.4; }
.app__insight-actions { display: flex; gap: .5em; margin-top: .8em; }
.app__insight-actions span { padding: .45em .8em; border-radius: 2px; font-weight: 700; font-size: .9em; border: 1px solid var(--ink); }
.app__insight-actions span:first-child { background: var(--ink); color: #fff; }
.app__insight.is-action { border-left-color: var(--bad); }
.app__insight.is-action .app__insight-top { color: var(--bad); }

@media (max-width: 720px) {
  .app { --app-font: 9.5px; }
  .app__main { grid-template-columns: minmax(0, 1fr); }
  .app__rail, .app__client, .app__icon--more, .app__tools > :not(.app__seen), .app__flink, .app__fbtn--sq, .app__fresh { display: none; }
  .app__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app__kpis .kpi:nth-child(n + 3) { display: none; }
  .app__insight { width: 70%; }
}

/* ---------- Clients marquee ---------- */

.clients { padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients__label { text-align: center; margin-bottom: 24px; }
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track img {
  width: 136px;
  height: 85px;
  margin: 0 clamp(12px, 2vw, 28px);
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter .3s, opacity .3s;
}
.marquee__track img:hover { filter: none; opacity: 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Flow diagram ---------- */

.flow {
  position: relative;
  display: grid;
  gap: 40px;
  padding: 8px 0;
}
.flow__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.flow__wire { fill: none; stroke: #c9d2d8; stroke-width: 2; stroke-linecap: round; }
.flow__dot { fill: var(--teal); }
.flow__dot.is-sky { fill: var(--sky); }
.flow__col { position: relative; z-index: 1; display: grid; gap: 14px; align-content: center; }
.flow__label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}

.flow-node {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  align-items: center;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.flow-node .ico { grid-row: span 2; width: 30px; height: 30px; color: var(--ink); }
.flow-node strong { font-size: .98rem; font-weight: 700; line-height: 1.25; }
.flow-node small { font-size: .8rem; line-height: 1.35; color: var(--ink-3); }
.flow-node--out strong { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; }

.flow-hub {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.flow-hub__head { display: flex; align-items: center; gap: 12px; }
.flow-hub__head .ico { width: 36px; height: 36px; color: var(--sky); }
.flow-hub__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.flow-hub__role { font-size: .78rem; color: rgba(255, 255, 255, .6); margin-top: 2px; }
.flow-hub__steps { display: grid; gap: 6px; margin-top: 18px; }
.flow-hub__steps li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .06);
  font-size: .86rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.flow-hub__steps li .ico { width: 18px; height: 18px; color: var(--sky); }
.flow-hub__steps li.is-lit { background: var(--teal); color: #fff; }
.flow-hub__steps li.is-lit .ico { color: #fff; }

.flow-hub--app { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.flow-hub--app .flow-hub__role { color: var(--ink-3); }
.flow-hub--app .flow-hub__steps li { background: var(--mist); color: var(--ink-2); }
.flow-hub--app .flow-hub__steps li .ico { color: var(--teal); }
.flow-hub--app .flow-hub__steps li.is-lit { background: var(--teal); color: #fff; }
.flow-hub--app .flow-hub__steps li.is-lit .ico { color: #fff; }
.flow-hub__mark { width: 40px; height: auto; }

@media (min-width: 600px) and (max-width: 1023px) {
  .flow__col--sources, .flow__col--outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__col--sources .flow__label, .flow__col--outcomes .flow__label { grid-column: 1 / -1; }
  .flow__col--hub, .flow__col--app { max-width: 460px; width: 100%; margin: 0 auto; }
}
@media (min-width: 1024px) {
  .flow {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(40px, 5vw, 80px);
    align-items: center;
  }
}

/* ---------- The ecosystem: more comes in, more goes out, and the way back ---------- */

.flow--eco .flow__col { gap: 10px; }
.flow--eco .flow-node { padding: 11px 14px; gap: 2px 12px; }
.flow--eco .flow-node .ico { width: 26px; height: 26px; }
.flow--eco .flow-node strong { font-size: .92rem; }
.flow--eco .flow-node small { font-size: .76rem; }
.flow-node__mark { grid-row: span 2; width: 26px; height: 26px; max-width: none; }
.flow--eco .flow-hub__steps { margin-top: 14px; gap: 5px; }
.flow--eco .flow-hub__steps li { padding: 7px 10px; font-size: .84rem; }

.flow-hub--mini {
  padding: 16px 18px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
}
.flow-hub--mini .flow-hub__head .ico { width: 30px; height: 30px; color: var(--teal); }
.flow-hub--mini .flow-hub__name { font-size: 1.05rem; }
.flow-hub--mini .flow-hub__role { color: var(--ink-3); }
.flow-hub__name .pa { font-size: 1.08em; }
.site .flow-hub__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.flow-hub__chips li {
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--mist);
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
}

.flow__wire--back { stroke: var(--teal); stroke-dasharray: 5 7; opacity: 0; transition: opacity .8s var(--ease); }
.flow__wire--back.is-on { opacity: .6; }

.site .flow__loop {
  position: relative;
  z-index: 1;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: .82rem;
  font-weight: 700;
  color: var(--teal);
}
.flow__loop .ico { width: 18px; height: 18px; }
@media (min-width: 1024px) {
  .flow--eco {
    grid-template-columns: minmax(0, .95fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 28px clamp(36px, 4.4vw, 72px);
    align-items: center;
  }
  .flow--eco .flow__loop { grid-column: 1 / -1; margin-top: 18px; }
  /* Every column's label on one line across the top, its boxes centred below. */
  .flow--eco { align-items: stretch; }
  .flow--eco .flow__col { display: flex; flex-direction: column; gap: 10px; }
  .flow--eco .flow__label { margin-bottom: auto; }
  .flow--eco .flow__col > :last-child { margin-bottom: auto; }
}

.site .eco-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 26px;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 16px 22px;
  border-radius: var(--radius-lg);
  background: var(--mist);
  list-style: none;
}
.eco-band li { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 600; color: var(--ink-2); }
.eco-band .ico { width: 18px; height: 18px; color: var(--teal); flex: none; }
.eco-band li.eco-band__title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }

.eco-detail { margin-top: clamp(44px, 5vw, 72px); }
.eco-detail__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.site .eco-detail__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.eco-tabs {
  display: flex;
  gap: 4px;
  max-width: 100%;
  padding: 5px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--mist);
  scrollbar-width: none;
}
.eco-tabs::-webkit-scrollbar { display: none; }
.site .eco-tab {
  flex: none;
  padding: 9px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.site .eco-tab:hover { color: var(--ink); }
.site .eco-tab[aria-selected="true"] { background: var(--ink); color: #fff; }
@media (max-width: 599px) {
  .eco-tabs { flex-wrap: wrap; gap: 6px; padding: 0; overflow: visible; border-radius: 0; background: none; }
  .site .eco-tab { background: var(--mist); }
  .site .eco-tab[aria-selected="true"] { background: var(--ink); }
}
.eco-tab:focus-visible, .eco-panel:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.eco-panel { margin-top: 22px; border-radius: var(--radius-lg); }
.eco-panel[hidden] { display: none; }
.eco-cards { display: grid; gap: 16px; }
@media (min-width: 720px) { .eco-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .eco-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.eco-card {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow);
}
.eco-card > .ico, .eco-card__mark { width: 28px; height: 28px; max-width: none; color: var(--teal); }
.site .eco-card h4 { font-size: 1.02rem; font-weight: 800; line-height: 1.25; }
.eco-card p { font-size: .9rem; line-height: 1.55; color: var(--ink-2); }


/* ---------- Icon cards (the original What we do style) ---------- */

.icon-cards { display: grid; gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
@media (min-width: 600px) { .icon-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .icon-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .icon-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .icon-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .icon-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; } }

.icon-card { display: grid; gap: 14px; align-content: start; }
.icon-card > .ico { width: clamp(44px, 5vw, 72px); height: clamp(44px, 5vw, 72px); color: var(--ink); margin-bottom: 6px; }
.icon-card h3 {
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.icon-card p { color: var(--ink-2); font-size: 1rem; }
.section--dark .icon-card > .ico { color: #fff; }
.section--dark .icon-card h3 { background: linear-gradient(to bottom left, var(--sky) 0%, #c3e6ea 100%); -webkit-background-clip: text; background-clip: text; }
.section--dark .icon-card p { color: rgba(255, 255, 255, .7); }

/* ---------- Feature showcase (DataViz on the home page) ---------- */

.showcase { display: grid; gap: 20px; }
@media (min-width: 720px) { .showcase { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .showcase { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.show-card {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.show-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.show-card__stage {
  position: relative;
  height: 200px;
  padding: 22px;
  background: linear-gradient(180deg, #f7f9fa 0%, #eef3f5 100%);
  border-bottom: 1px solid var(--line);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.show-card__body { padding: 22px 22px 26px; display: grid; gap: 10px; align-content: start; }
.show-card__body h3 { font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.show-card__body p { font-size: .95rem; color: var(--ink-2); }
.show-card__stage .app { --app-font: 11px; box-shadow: var(--shadow); }
.show-card__stage .kpi { width: 100%; max-width: 230px; font-size: 12px; box-shadow: var(--shadow); }

.mini-title {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow);
  font-size: 13px;
  width: 100%;
}
.mini-title .chart__title { font-size: 14px; white-space: normal; line-height: 1.8; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 70px; margin-top: 12px; }
.mini-bars i {
  flex: 1;
  background: var(--teal);
  border-radius: 1px 1px 0 0;
  transform-origin: 50% 100%;
  transition: height .7s var(--ease-out), background-color .4s;
}
.mini-bars i:nth-child(even) { background: var(--sky); }

.mini-forecast { width: 100%; }
.mini-forecast svg { width: 100%; height: auto; overflow: visible; }
.mini-forecast .cap { margin-top: 8px; font-size: 11px; color: var(--ink-2); padding: 6px 8px; border-left: 3px solid var(--teal); background: #eef6f7; }

.mini-commentary {
  width: 100%;
  max-width: 260px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 2px;
  box-shadow: var(--shadow);
  font-size: 12px;
}
.mini-commentary__date { display: inline-block; padding: 3px 8px; border-radius: 20px; background: var(--sky-soft); color: var(--teal-deep); font-weight: 700; font-size: 10px; }
.mini-commentary__head { margin-top: 8px; font-weight: 800; font-size: 13px; line-height: 1.3; }
.mini-commentary__lines { margin-top: 8px; display: grid; gap: 6px; }
.mini-commentary__lines i { display: block; height: 6px; border-radius: 3px; background: var(--mist-2); transform-origin: 0 50%; }
.js .mini-commentary__lines i { transform: scaleX(0); transition: transform .7s var(--ease-out); }
.js .mini-commentary.is-typed .mini-commentary__lines i { transform: none; }
.js .mini-commentary.is-typed .mini-commentary__lines i:nth-child(2) { transition-delay: .35s; }
.js .mini-commentary.is-typed .mini-commentary__lines i:nth-child(3) { transition-delay: .7s; }
.js .mini-commentary.is-typed .mini-commentary__lines i:nth-child(4) { transition-delay: 1.05s; }
.js .mini-commentary__foot { opacity: 0; transform: translateY(4px); transition: opacity .5s var(--ease) 1.6s, transform .5s var(--ease-out) 1.6s; }
.js .mini-commentary.is-typed .mini-commentary__foot { opacity: 1; transform: none; }
.mini-commentary__foot { margin-top: 10px; display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; color: var(--good); }
.mini-commentary__foot .ico { width: 14px; height: 14px; }

/* ---------- potent.ai ----------
   Its own mark, a purple ribbon, with the wordmark set live in Montserrat
   ExtraBold and tracked tight, exactly as the potent.ai hub sets it. Being
   text, it takes the colour of whatever it sits in, like the other logos. */
.nw { white-space: nowrap; }
.pa { display: inline-flex; align-items: center; gap: .12em; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; text-transform: none; vertical-align: -.08em; }
.pa img { width: 1.12em; height: 1.12em; margin: -.2em 0 -.2em -.04em; flex: none; max-width: none; }
/* The potent.ai mark on a feature: this is where our AI is at work. */
.ai-mark { display: inline-block; flex: none; width: 1.1em; height: 1.1em; max-width: none; margin-left: auto; vertical-align: -.2em; }
.product__chips li:has(.ai-mark) { display: inline-flex; align-items: center; white-space: nowrap; }
.product__chips .ai-mark { margin-left: 6px; width: 1.05em; height: 1.05em; }

/* ---------- Our products (home) ---------- */

.products { display: grid; gap: 20px; }
@media (min-width: 900px) { .products { grid-template-columns: 1fr 1fr; } }
.product {
  position: relative;
  display: grid;
  gap: 18px;
  align-content: start;
  padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 0 0 1px var(--line), var(--shadow);
  overflow: hidden;
}
.product--connect { background: var(--ink); color: #fff; box-shadow: var(--shadow-lg); }
.product__kicker { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); }
.product--connect .product__kicker { color: var(--sky); }
.product__logo { display: block; width: auto; height: 30px; aspect-ratio: 940 / 172; margin: 2px 0 4px; }
.product__logo--dataviz { height: 25px; aspect-ratio: 641 / 100; margin: 5px 0 6px; }
.product__text { margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--ink-2); max-width: 54ch; }
.product--connect .product__text { color: rgba(255, 255, 255, .78); }
.product__chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.product__chips li { padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; background: var(--mist); color: var(--ink-2); }
.product--connect .product__chips li { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); }
.product__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.site .products__sub { margin: clamp(56px, 7vw, 88px) 0 24px; font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; }

/* ---------- Security / governance ---------- */

.gov-grid { display: grid; gap: clamp(36px, 4vw, 52px) clamp(24px, 3vw, 44px); }
@media (min-width: 640px) { .gov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.connect-card {
  margin-top: clamp(56px, 7vw, 96px);
  display: grid;
  gap: 32px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(46, 118, 124, .28), rgba(119, 188, 197, .08));
  border: 1px solid rgba(119, 188, 197, .3);
}
.connect-card h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.12; }
.connect-card p { color: rgba(255, 255, 255, .75); max-width: 52ch; }
.connect-card__copy { display: grid; gap: 14px; align-content: start; }
.connect-card__soon { font-size: .82rem; color: rgba(255, 255, 255, .55); }
@media (min-width: 1024px) { .connect-card { grid-template-columns: 1fr 1.1fr; align-items: center; } }

.pipe { display: grid; gap: 10px; }
.pipe__step {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 2px 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background-color .5s var(--ease), border-color .5s var(--ease);
}
.pipe__step .ico { grid-row: span 2; width: 26px; height: 26px; color: var(--sky); justify-self: center; }
.pipe__step strong { font-size: .98rem; }
.pipe__step small { font-size: .82rem; color: rgba(255, 255, 255, .6); line-height: 1.4; }
.pipe__step.is-lit { background: rgba(46, 118, 124, .55); border-color: rgba(119, 188, 197, .6); }
.pipe__step.is-lit .ico { color: #fff; }

/* ---------- How we work ---------- */

.steps-head { margin-top: clamp(80px, 10vw, 140px); margin-bottom: 0; }
.ai-head { margin-top: clamp(80px, 10vw, 140px); }
.steps {
  position: relative;
  display: grid;
  gap: 32px;
  margin-top: clamp(40px, 5vw, 56px);
}
.steps__line { display: none; }
.step { position: relative; display: grid; gap: 10px; align-content: start; padding-left: 56px; }
.step__dot {
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
}
.step__dot .ico { width: 20px; height: 20px; }
.step__num { font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: var(--ink-3); }
.step h3 { font-size: 1.2rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.step p { font-size: .95rem; color: var(--ink-2); }
.steps__ends { display: none; }

@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; padding-top: 68px; }
  .steps__line {
    display: block;
    position: absolute;
    left: 20px; right: 20px; top: 88px;
    height: 3px;
    background: var(--ink);
    transform-origin: 0 50%;
  }
  .js .steps__line { transform: scaleX(0); transition: transform 1.6s var(--ease-out); }
  .js .steps.is-in .steps__line { transform: scaleX(1); }
  .step { padding-left: 0; padding-top: 64px; }
  .step__dot { top: 0; left: 0; }
  .steps__ends {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0; right: 0; top: 0;
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal);
  }
}

/* ---------- About (the spider diagram, redrawn in SVG) ---------- */

.about { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.about__copy { display: grid; gap: 22px; }
.about__copy p { font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem); line-height: 1.6; color: var(--ink-2); }
.spider { width: min(100%, 380px); margin: 0 auto; overflow: visible; }
.spider__arm { stroke: var(--ink); stroke-width: 8; stroke-linecap: butt; }
.spider__dot, .spider__core { fill: var(--ink); }
.js .spider__arm { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--ease-out); transition-delay: var(--d, 0ms); }
.js .spider.is-in .spider__arm { stroke-dashoffset: 0; }
.js .spider__dot, .js .spider__core { transform-box: fill-box; transform-origin: center; transform: scale(0); }
.js .spider.is-in .spider__core { animation: pop 1s var(--spring) forwards; }
.js .spider.is-in .spider__dot { animation: pop .9s var(--spring) forwards; animation-delay: var(--d, 0ms); }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (min-width: 900px) { .about { grid-template-columns: 380px 1fr; } }
.about__group { display: grid; gap: 12px; margin-top: 4px; }
.site .about__group-title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--ink-3); }
.site .about__facts { display: flex; flex-wrap: wrap; gap: 10px; }
.about__facts li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .85rem; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
.about__facts .ico { width: 18px; height: 18px; flex: none; color: var(--teal); }

/* ---------- Contact ---------- */

.contact { display: grid; gap: 48px; }
.contact__cta { display: grid; gap: 22px; justify-items: start; }
.contact__cta .button { margin-top: 6px; }
.contact__details { display: grid; gap: 28px; align-content: start; }
.contact__block { display: grid; gap: 4px; font-size: 1rem; color: rgba(255, 255, 255, .78); }
.contact__block strong { color: #fff; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 6px; }
.contact__block a { color: #fff; font-weight: 700; text-decoration: none; }
.contact__block a:hover { color: var(--sky); }
.socials { display: flex; gap: 10px; }
.socials a {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border: 2px solid rgba(255, 255, 255, .3);
  border-radius: var(--radius);
  color: #fff;
  transition: background-color .2s, border-color .2s, color .2s;
}
.socials a:hover { background: #fff; border-color: #fff; color: var(--ink); }
.socials .ico { width: 22px; height: 22px; }
@media (min-width: 900px) { .contact { grid-template-columns: 1.3fr 1fr; align-items: end; } }

/* ---------- Footer (shared) ---------- */

.site-footer {
  font-family: var(--font);
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 36px 0;
  color: var(--ink-3);
  font-size: .85rem;
}
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.site-footer__brand { display: flex; align-items: center; gap: 16px; }
.site-footer__brand img { height: 36px; width: auto; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.site-footer__links a { color: var(--ink-2) !important; text-decoration: none !important; font-weight: 600; }
.site-footer__links a:hover { color: var(--teal) !important; }
.site-footer__links button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.site-footer__links button:hover { color: var(--teal); }
.site-footer .site-footer__legal { margin: 18px auto 0; font-size: .76rem; line-height: 1.5; color: var(--ink-3); }

/* ---------- Group policies on the security page, and the policies' date line ---------- */

.site .group-policies { margin-top: clamp(32px, 4vw, 48px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); }
.site .group-policies__title { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.site .group-policies__list { display: grid; gap: 10px 28px; margin-top: 14px; }
@media (min-width: 720px) { .site .group-policies__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site .group-policies__list a { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; text-decoration: none; }
.site .group-policies__list a:hover { color: var(--sky); }
.site .group-policies__list .ico { width: 16px; height: 16px; flex: none; color: var(--sky); }
.policy-updated { font-size: .85rem; color: #62666c; }

/* ---------- Cookie choice (js/consent.js): Accept and Reject look the same ---------- */

.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 400;
  max-width: 25rem;
  margin-left: auto;
  padding: 20px 20px 18px;
  border-radius: var(--radius-lg);
  background: var(--ink);
  color: #fff;
  font-family: var(--font);
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .45);
}
.consent[hidden] { display: none; }
.consent .consent__eyebrow { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky); }
.consent .consent__text { margin: 8px 0 0; font-size: .86rem; line-height: 1.6; color: rgba(255, 255, 255, .86); }
.consent__text a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.consent__actions { display: flex; gap: 10px; margin-top: 14px; }
.consent .consent__button {
  flex: 1;
  min-height: 42px;
  border: 1px solid #fff;
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.consent .consent__button:hover { background: var(--sky); border-color: var(--sky); }
.consent .consent__button:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

/* ---------- Back to top (shared) ---------- */

.to-top {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 150;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 0;
  border-radius: var(--radius);
  background: var(--teal);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .4s var(--ease-out), background-color .2s;
}
.to-top.is-on { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--ink); }
.to-top .ico { width: 24px; height: 24px; }

/* ---------- Product page ---------- */

.hero--product { background: var(--ink); color: #fff; padding-bottom: 0; }
.hero--product .lead { color: rgba(255, 255, 255, .72); }
.hero--product .hero__note { color: rgba(255, 255, 255, .55); }
.hero--product .hero__note a { color: var(--sky); }
.hero--product .grad { background: linear-gradient(to bottom left, var(--sky) 0%, #c3e6ea 100%); -webkit-background-clip: text; background-clip: text; }

.product-hero__copy { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: center; text-align: center; max-width: 920px; margin: 0 auto; }
.product-hero__copy .lead { max-width: 52ch; }
.product-hero__stage {
  position: relative;
  z-index: 2;
  margin: clamp(48px, 6vw, 80px) auto 0;
  max-width: 1120px;
  perspective: 1800px;
}
/* The drawing scales with its frame, so it keeps one layout at every width. */
.product-hero__stage .hero__tilt, .story__screen { container-type: inline-size; }
.product-hero__stage .app {
  --app-font: clamp(9px, calc(100cqw / 81), 13px);
  transform-origin: 50% 0;
  transform: rotateX(14deg) scale(.96);
  transition: transform 1.4s var(--ease-out);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
  box-shadow: var(--shadow-lg);
}
.product-hero__stage.is-in .app { transform: none; }
@media (max-width: 720px) { .product-hero__stage .app { --app-font: 9px; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  border-radius: 40px;
  background: #fff;
  border: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-2);
}
.chip .ico { width: 18px; height: 18px; color: var(--teal); }

/* Scroll story: the text steps scroll past a pinned drawing of the product. */
.story { display: grid; gap: 40px; }
.story__steps { display: grid; }
.story__step { min-height: 72vh; display: flex; align-items: center; padding: 40px 0; }
.story__step-inner { display: grid; gap: 14px; max-width: 460px; opacity: .28; transition: opacity .5s var(--ease); }
.story__step.is-active .story__step-inner { opacity: 1; }
.story__num { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); display: flex; align-items: center; gap: 10px; }
.story__num .ico { width: 22px; height: 22px; color: var(--ink); }
.story__step h3 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.story__step p { font-size: 1.05rem; color: var(--ink-2); }
.story__stage {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  height: calc(100vh - var(--header-h) - 32px);
  display: grid;
  align-items: center;
  z-index: 2;
}
.story__screen { position: relative; }
.story__screen .app { --app-font: 12.5px; }
@media (min-width: 1024px) { .story__screen .app { --app-font: clamp(8px, calc(100cqw / 55.2), 12.5px); } }
.story__screen .app__main { grid-template-columns: 11em minmax(0, 1fr); }
.story__screen .kpi__value { font-size: 1.42em; }
.story__screen .kpi__delta { font-size: .8em; }
.story__screen .app__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story__screen .app__kpis .kpi:nth-child(4) { display: none; }
@media (max-width: 720px) {
  .story__screen .app__main { grid-template-columns: minmax(0, 1fr); }
  .story__screen .app__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) {
  .story__stage { top: var(--header-h); height: 50vh; padding: 12px 0; background: linear-gradient(#fff 85%, rgba(255, 255, 255, 0)); }
  .story__screen .app { --app-font: 8.5px; }
  .story__step { min-height: 60vh; align-items: flex-start; }
  .story__step-inner { background: #fff; padding: 20px 0; }
}
@media (min-width: 1024px) {
  .story { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(40px, 5vw, 80px); }
  .story__stage { order: 2; }
  .story__steps { order: 1; }
}

/* Scene overlays inside the pinned product drawing. */
.scene { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s var(--ease); z-index: 5; }
.app[data-scene="sources"] .scene--sources,
.app[data-scene="commentary"] .scene--commentary,
.app[data-scene="insights"] .scene--insights,
.app[data-scene="meeting"] .scene--meeting,
.app[data-scene="ask"] .scene--ask { opacity: 1; }

.app[data-scene="kpis"] .chart,
.app[data-scene="explore"] .app__kpis,
.app[data-scene="forecast"] .app__kpis { opacity: .35; filter: saturate(.4); transition: opacity .5s, filter .5s; }
.app .chart, .app .app__kpis { transition: opacity .5s, filter .5s; }
.app[data-scene="kpis"] .kpi { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(16, 24, 32, .35); }
.app[data-scene="explore"] .chart__title .rc { background: var(--sky-soft); }
.app[data-scene="forecast"] .chart__band { fill: #bfe0e5; }

.scene--sources { background: rgba(251, 252, 252, .94); display: grid; place-items: center; }
.scene-sources { display: grid; grid-template-columns: repeat(4, auto); gap: 1.2em 2em; }
.scene-sources span {
  display: grid; justify-items: center; gap: .5em;
  font-weight: 700; font-size: 1em; color: var(--ink-2);
  opacity: 0; transform: translateY(1.5em) scale(.9);
  transition: opacity .5s var(--ease), transform .6s var(--spring);
  transition-delay: var(--d, 0ms);
}
.scene-sources span .ico { width: 3.2em; height: 3.2em; color: var(--ink); padding: .7em; background: #fff; border: 1px solid var(--line); border-radius: 50%; box-shadow: var(--shadow); }
.app[data-scene="sources"] .scene-sources span { opacity: 1; transform: none; }

.scene--commentary { display: flex; justify-content: flex-end; }
.drawer-panel {
  width: min(28em, 58%);
  height: 100%;
  background: #fff;
  border-left: 1px solid var(--line);
  box-shadow: -20px 0 40px -20px rgba(16, 24, 32, .25);
  padding: 1.4em;
  transform: translateX(100%);
  transition: transform .7s var(--ease-out);
  display: grid;
  gap: .8em;
  align-content: start;
}
.app[data-scene="commentary"] .drawer-panel { transform: none; }
.drawer-panel__tabs { display: flex; gap: 1.2em; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--ink-3); }
.drawer-panel__tabs span { padding-bottom: .6em; }
.drawer-panel__tabs span.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--teal); }
.drawer-panel h4 { font-size: 1.35em; font-weight: 800; line-height: 1.25; }
.drawer-panel p { color: var(--ink-2); }
.drawer-panel__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em; }
.drawer-panel__stats div { padding: .6em; border-top: 3px solid var(--teal); background: var(--mist); }
.drawer-panel__stats div:nth-child(2) { border-top-color: var(--good); }
.drawer-panel__stats div:nth-child(3) { border-top-color: var(--bad); }
.drawer-panel__stats b { display: block; font-size: 1.3em; }
.drawer-panel__stats small { color: var(--ink-3); }
.drawer-panel__by { display: flex; align-items: center; gap: .5em; font-size: .9em; color: var(--ink-3); }
.drawer-panel__by .ico { width: 1.3em; height: 1.3em; color: var(--good); }

.scene--insights { display: grid; align-content: end; justify-items: end; padding: 1.4em; }
.insight-stack { display: grid; gap: .6em; width: min(26em, 60%); }
.insight-stack .app__insight { position: static; width: 100%; opacity: 0; transform: translateX(2em); }
.app[data-scene="insights"] .insight-stack .app__insight { opacity: 1; transform: none; }
.insight-stack .app__insight:nth-child(2) { transition-delay: .15s; }
.insight-stack .app__insight:nth-child(3) { transition-delay: .3s; }

.scene--meeting { background: rgba(29, 29, 27, .92); display: grid; place-items: center; }
.deck-fan { position: relative; width: 60%; aspect-ratio: 16 / 9; }
.deck-slide {
  position: absolute; inset: 0;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6);
  padding: 7% 8%;
  display: flex;
  flex-direction: column;
  gap: .7em;
  transition: transform .9s var(--ease-out);
}
.deck-slide__eyebrow { font-size: .8em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.deck-slide__title { font-size: 1.6em; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.deck-slide__bars { display: flex; align-items: flex-end; gap: 4%; flex: 1; min-height: 0; margin-top: .4em; border-bottom: 1px solid #d5dce1; }
.deck-slide__bars i { flex: 1; background: #c9d2d8; }
.deck-slide__bars i.is-key { background: var(--teal); }
.deck-slide--1 { transform: rotate(-8deg) translate(-26%, 6%) scale(.82); }
.deck-slide--2 { transform: rotate(7deg) translate(26%, 6%) scale(.82); }
.deck-slide--3 { transform: none; z-index: 2; }
.app:not([data-scene="meeting"]) .deck-slide--1, .app:not([data-scene="meeting"]) .deck-slide--2 { transform: none; }
.deck-label { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); color: #fff; font-weight: 700; display: flex; gap: .6em; align-items: center; white-space: nowrap; }
.deck-label .ico { width: 1.6em; height: 1.6em; color: var(--sky); }

/* Ask, as the film shows it: potent.ai's purple where it is at work, the
   answer in full figures, and Ask's star bot (one of the six a person can
   choose in DataViz). It watches the question being typed, hops into its
   answer, thinks, then bobs while the answer arrives. */
.scene--ask { background: rgba(255, 255, 255, .97); display: grid; place-items: center; padding: 1.6em 2em; }
.ask-box { width: min(40em, 94%); display: grid; gap: .95em; }
.ask-q { display: flex; justify-content: flex-end; }
.ask-q span { padding: .65em 1em; border-radius: 1em 1em 2px 1em; background: #ece7fb; font-size: 1.05em; font-weight: 600; }
.ask-q span.typing::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; background: #7356d6; vertical-align: -.15em; animation: ask-caret .9s steps(1) infinite; }
@keyframes ask-caret { 50% { opacity: 0; } }
.ask-a { display: flex; align-items: flex-start; gap: 1em; }
.ask-bot { position: relative; z-index: 1; flex: none; width: 3.4em; height: 3.4em; margin-top: -.2em; }
.ask-bot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ask-bot__eyes { transition: transform .4s var(--ease); }
.ask-a__head { position: relative; flex: 1; min-width: 0; min-height: 3.6em; }
.ask-h { font-size: 2.1em; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask-s { margin-top: .4em; font-weight: 500; color: var(--ink-3); }
.ask-think { position: absolute; left: 0; top: .5em; display: flex; align-items: center; gap: .7em; opacity: 0; transition: opacity .3s var(--ease); }
.ask-orb { width: 2em; height: 2em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9cffa 0%, #9b85ea 35%, #7356d6 65%, #4b2fb0 100%); box-shadow: 0 0 1.2em rgba(115, 86, 214, .45); animation: ask-orb 1.6s var(--ease) infinite; }
@keyframes ask-orb { 50% { transform: scale(.86); box-shadow: 0 0 .6em rgba(115, 86, 214, .3); } }
.ask-think span { font-weight: 600; color: transparent; background: linear-gradient(90deg, #888989 0%, #c8cacb 45%, #888989 90%) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; animation: ask-shimmer 1.3s linear infinite; }
@keyframes ask-shimmer { to { background-position: -200% 0; } }
.ask-bars { display: grid; gap: .5em; margin-left: 4.4em; }
.ask-bars div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 7.6em; align-items: center; gap: .8em; font-weight: 600; }
.ask-bars i { display: block; height: 1.1em; border-radius: .55em; background: var(--mist); overflow: hidden; }
.ask-bars em { display: block; height: 100%; border-radius: .55em; background: #cfc6f2; transform-origin: 0 50%; }
.ask-bars div:first-child em { background: #7356d6; }
.ask-bars b { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ask-wk { margin-left: 4.4em; padding: .7em .95em; border-radius: .6em; background: #f3f0fd; color: var(--ink-2); font-weight: 500; }
.ask-wk b { display: block; margin-bottom: .2em; font-size: .78em; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.ask-wk span { color: #7356d6; }
.ask-foot { margin-left: 4.4em; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4em 1em; }
.ask-cite { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; color: var(--teal); }
.ask-cite .ico { width: 1.25em; height: 1.25em; }
.ask-by { display: inline-flex; align-items: center; gap: .45em; font-weight: 500; color: #888989; }
.ask-by img { width: 1.2em; height: 1.2em; }
.ask-by b { color: var(--ink); font-weight: 700; }

/* The run, set by demo.js. Without it (or with reduced motion) the answer simply shows. */
.ask-h, .ask-s, .ask-wk, .ask-foot { transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.ask-bars em { transition: transform .9s var(--ease-out); }
.ask-bars div:nth-child(2) em { transition-delay: .1s; }
.ask-bars div:nth-child(3) em { transition-delay: .2s; }
.ask-bars div:nth-child(4) em { transition-delay: .3s; }
.ask-wk { transition-delay: .35s; }
.ask-foot { transition-delay: .5s; }
.ask-box.is-asking .ask-h, .ask-box.is-asking .ask-s, .ask-box.is-asking .ask-wk, .ask-box.is-asking .ask-foot { opacity: 0; transform: translateY(.5em); transition-delay: 0s; }
.ask-box.is-asking .ask-bars em { transform: scaleX(0); transition-delay: 0s; }
.ask-box.is-thinking .ask-think { opacity: 1; }
.ask-box.is-typing .ask-bot { transform: translateY(var(--bot-y, -3.8em)); }
.ask-box.is-typing .ask-bot__eyes { transform: translate(2.5px, -1px); }
.ask-box.is-hop .ask-bot { animation: ask-hop .62s var(--spring) both; }
@keyframes ask-hop {
  0% { transform: translateY(var(--bot-y, -3.8em)); }
  40% { transform: translateY(calc(var(--bot-y, -3.8em) * .5 - 1.4em)) scale(1.05, .95); }
  80% { transform: translateY(.15em) scale(1.06, .92); }
  100% { transform: none; }
}
.ask-box.is-answered .ask-bot svg { animation: ask-bob .5s ease-in-out 6 alternate; }
@keyframes ask-bob { to { transform: translateY(-.22em); } }

/* Feature grid on the product page */
.feature-grid { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
@media (min-width: 600px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.feature { background: #fff; padding: 28px 24px 30px; display: grid; gap: 10px; align-content: start; transition: background-color .3s var(--ease); }
.feature:hover { background: #f8fafb; }
.feature .ico { width: 34px; height: 34px; color: var(--ink); margin-bottom: 6px; transition: transform .4s var(--spring), color .3s; }
.feature:hover .ico { transform: translateY(-3px) scale(1.06); color: var(--teal); }
.feature h3 { font-size: 1.05rem; font-weight: 800; }
.feature p { font-size: .92rem; color: var(--ink-2); }

.split { display: grid; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split__copy { display: grid; gap: 22px; align-content: start; }
.split__list { display: grid; gap: 14px; margin-top: 6px; }
.split__list li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: start; }
.split__list .ico { width: 24px; height: 24px; color: var(--teal); margin-top: 2px; }
.split__list b { display: block; font-size: 1rem; }
.split__list span { color: var(--ink-2); font-size: .95rem; }
.section--dark .split__list span { color: rgba(255, 255, 255, .7); }
.section--dark .split__list .ico { color: var(--sky); }
@media (min-width: 1024px) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split--flip .split__copy { order: 2; }
}

.ask-demo { position: relative; }
.ask-demo .app { --app-font: 13px; }
.ask-demo .scene--ask { position: relative; inset: auto; opacity: 1; padding: 2.4em 1.6em; background: #fbfcfc; }
.ask-demo__input {
  display: flex; align-items: center; gap: .8em;
  margin: 0 1.6em 1.6em;
  padding: .9em 1em;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: #fff;
  color: var(--ink-3);
}
.ask-demo__input .ico { width: 1.5em; height: 1.5em; color: var(--teal); margin-left: auto; }
.typing::after { content: "|"; margin-left: 1px; animation: blink 1s steps(1) infinite; color: var(--teal); }
@keyframes blink { 50% { opacity: 0; } }

.cta-band { display: grid; gap: 24px; justify-items: center; text-align: center; }
.cta-band .lead { margin: 0 auto; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.stat-row { display: grid; gap: 24px; margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 720px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat { padding-top: 18px; border-top: 3px solid var(--ink); display: grid; gap: 6px; }
.stat b { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat span { color: var(--ink-2); }

/* ---------- Reveal on scroll ---------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal="left"] { transform: translateX(-32px); }
.js [data-reveal="right"] { transform: translateX(32px); }
.js [data-reveal="scale"] { transform: scale(.94); }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.js [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-draw].is-in, .js .is-in [data-draw] { stroke-dashoffset: 0; }

/* ---------- Reduced motion: everything lands in its final state ---------- */

@media (prefers-reduced-motion: reduce) {
  html:has(body.site) { scroll-behavior: auto; }
  .site *, .site *::before, .site *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-draw] { stroke-dashoffset: 0; }
  .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .marquee__track [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Product page extras ---------- */

.chips-track { align-items: center; }
.chips-track .chip { flex: none; margin: 0 6px; }
.marquee:has(.chips-track) { padding: 4px 0; }

.scene--sources { align-content: center; gap: 1.6em; }
.scene-sources__via {
  display: inline-flex; align-items: center; gap: .5em;
  justify-self: center;
  padding: .5em .9em;
  border-radius: 2em;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity .5s var(--ease) .6s, transform .6s var(--ease-out) .6s;
}
.scene-sources__via .ico { width: 1.3em; height: 1.3em; color: var(--sky); }
.app[data-scene="sources"] .scene-sources__via { opacity: 1; transform: none; }

.stack { width: 100%; max-width: 480px; margin: 0 auto; display: grid; }
.stack__layer {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 2px 16px;
  align-items: center;
  padding: 20px 22px;
  border-radius: var(--radius-lg);
}
.stack__layer > .ico, .stack__layer > img { grid-row: span 2; width: 40px; height: auto; justify-self: center; }
.stack__layer > .ico { height: 36px; width: 36px; }
.stack__layer strong { font-size: 1.15rem; font-weight: 800; }
.stack__layer small { font-size: .88rem; line-height: 1.4; }
.stack__layer--app { background: #fff; color: var(--ink); box-shadow: 0 20px 60px -20px rgba(119, 188, 197, .45); }
.stack__layer--app small { color: var(--ink-3); }
.stack__layer--connect { background: var(--teal); color: #fff; }
.stack__layer--connect small { color: rgba(255, 255, 255, .78); }
.stack__layer--connect .ico { color: #fff; }
.stack__layer--src { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
.stack__layer--src small { color: rgba(255, 255, 255, .6); }
.stack__layer--src .ico { color: var(--sky); }
.stack__pipe { height: 64px; display: flex; justify-content: center; gap: 56px; }
.stack__pipe i {
  position: relative;
  width: 10px;
  overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .22)) center / 2px 100% no-repeat;
}
.stack__pipe i::after {
  content: "";
  position: absolute;
  left: 1px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sky);
  animation: rise 1.8s linear infinite;
}
.stack__pipe i:nth-child(2)::after { animation-delay: .6s; background: #fff; }
.stack__pipe i:nth-child(3)::after { animation-delay: 1.2s; }
@keyframes rise { from { transform: translateY(70px); } to { transform: translateY(-12px); } }

@media (min-width: 1024px) {
  .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 0; }
  .steps--4 .steps__line { top: 20px; }
}

/* ==========================================================================
   Motion layer
   html.motion is set by site.js when GSAP loaded and the visitor hasn't
   asked for reduced motion; motion.js then drives everything below. Without
   it the page keeps the simple CSS reveals above, so nothing depends on it.
   ========================================================================== */

/* Lenis smooth scrolling (its own stylesheet, inlined) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
html.lenis { scroll-behavior: auto !important; }

.motion [data-reveal],
.motion .steps__line,
.motion .product-hero__stage .app { transition: none !important; }
.motion .product-hero__stage .app { transform: none; }
.motion .marquee__track { animation: none; }

/* Words split for reveals: each word rises out of its own mask. */
.w { display: inline-block; overflow: clip; vertical-align: top; padding: 0 .02em .14em 0; margin-bottom: -.14em; }
.w__i { display: inline-block; will-change: transform; }
.grad.is-split { background: none !important; }
.w__i.grad, .sw.grad {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section--dark .w__i.grad, .hero--product .w__i.grad, .section--dark .sw.grad {
  background: linear-gradient(to bottom left, var(--sky) 0%, #c3e6ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Brand intro, first visit per session only */
.intro { display: none; }
.motion-intro .intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--ink);
  clip-path: inset(0 0 0 0);
}
.intro__mark { width: min(220px, 46vw); height: auto; fill: #fff; overflow: visible; }
.intro__mark rect { transform-box: fill-box; transform-origin: 50% 100%; }

/* Header: tucks away on the way down, back on the way up */
.site-header { transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .5s var(--ease-out); }
.site-header.is-hidden { transform: translateY(-100%); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; overflow: hidden; }
.scroll-progress i { display: block; height: 100%; background: var(--teal); transform-origin: 0 50%; transform: scaleX(0); }

/* Hero backdrop: drifting aurora and a grid that lights up under the cursor */
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.grid-bg, .grid-spot {
  position: absolute;
  inset: 0;
  background-size: 56px 56px;
  background-position: -1px -1px;
}
.grid-bg {
  background-image: linear-gradient(to right, rgba(29, 29, 27, .055) 1px, transparent 1px), linear-gradient(to bottom, rgba(29, 29, 27, .055) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 35%, #000 20%, transparent 75%);
}
.grid-spot {
  background-image: linear-gradient(to right, rgba(46, 118, 124, .5) 1px, transparent 1px), linear-gradient(to bottom, rgba(46, 118, 124, .5) 1px, transparent 1px);
  -webkit-mask-image: radial-gradient(260px circle at var(--mx, -500px) var(--my, -500px), #000 0%, transparent 70%);
  mask-image: radial-gradient(260px circle at var(--mx, -500px) var(--my, -500px), #000 0%, transparent 70%);
  opacity: 0;
  transition: opacity .5s var(--ease);
}
.hero:hover .grid-spot { opacity: 1; }
.hero--product .grid-bg { background-image: linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px); }
.hero--product .grid-spot { background-image: linear-gradient(to right, rgba(119, 188, 197, .55) 1px, transparent 1px), linear-gradient(to bottom, rgba(119, 188, 197, .55) 1px, transparent 1px); }
.hero .wrap { position: relative; z-index: 1; }

/* 3D stage for the hero drawing, and the cards that orbit it */
.hero__visual { perspective: 1600px; }
.hero__tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.sat { position: absolute; z-index: 4; will-change: transform; pointer-events: none; }
.sat__inner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  box-shadow: 0 22px 44px -20px rgba(16, 24, 32, .45), 0 2px 6px rgba(16, 24, 32, .06);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
.sat__inner .ico { width: 20px; height: 20px; color: var(--teal); }
.sat__inner small { display: block; font-size: 11px; font-weight: 500; color: var(--ink-3); }
.sat__inner b { font-weight: 800; }
.sat__badge { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--sky-soft); flex: none; }
.sat--alert .sat__badge { background: var(--bad-soft); }
.sat--alert .ico { color: var(--bad); }
.sat--good .sat__badge { background: var(--good-soft); }
.sat--good .ico { color: var(--good); }
.sat--dark .sat__inner { background: var(--ink); color: #fff; border-color: rgba(255, 255, 255, .12); }
.sat--dark .sat__inner small { color: rgba(255, 255, 255, .6); }
.sat--dark .sat__badge { background: rgba(119, 188, 197, .18); }
.sat--dark .ico { color: var(--sky); }
.sat__avatars { display: flex; padding-left: 8px; }
.sat__avatars i {
  width: 26px; height: 26px;
  margin-left: -8px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: grid; place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--teal);
}
.sat__avatars i:nth-child(2) { background: var(--ink); }
.sat__avatars i:nth-child(3) { background: var(--sky); color: var(--ink); }
.sat__avatars i:nth-child(4) { background: #9aa3aa; }
.hero .sat--1 { top: -6%; left: -7%; }
.hero .sat--2 { top: 38%; left: -11%; }
.hero .sat--3 { bottom: -7%; left: 6%; }
.hero .sat--4 { top: 4%; right: -3%; }
.hero--product .sat { top: auto; right: auto; bottom: auto; left: auto; }
.hero--product .sat--1 { top: 16%; left: -5%; }
.hero--product .sat--2 { top: 44%; left: -7%; }
.hero--product .sat--3 { top: 20%; right: -5%; }
.hero--product .sat--4 { top: 52%; right: -6%; }
@media (max-width: 1023px) { .sat { display: none; } }

/* Cards: a faint light follows the cursor */
[data-spot] { --mx: 50%; --my: 50%; }
[data-spot]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx) var(--my), rgba(29, 29, 27, .045), transparent 60%);
  opacity: 0;
  transition: opacity .4s var(--ease);
  pointer-events: none;
  z-index: 2;
}
[data-spot]:hover::after { opacity: 1; }
.show-card, .feature, .flow-node, .journey__card { position: relative; }

.section--dark .gov-grid .icon-card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: background-color .4s var(--ease), transform .5s var(--ease-out);
}
.section--dark .gov-grid .icon-card:hover { background: rgba(255, 255, 255, .05); }
/* Journey: a sideways scroll through the six steps on desktop */
.journey { position: relative; margin-top: clamp(40px, 5vw, 56px); }
.journey__legend {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
.journey__legend span:last-child::after { content: " \2192"; }
.journey__viewport { position: relative; }
.journey__track { display: grid; gap: 16px; }
.journey__rail { display: none; }
.journey__card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 28px 26px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease-out);
}
.journey__top { display: flex; align-items: center; justify-content: space-between; }
.journey__num {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(29, 29, 27, .35);
  transition: color .5s var(--ease), -webkit-text-stroke-color .5s var(--ease);
}
.journey__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; transition: background-color .5s var(--ease), transform .6s var(--spring); }
.journey__icon .ico { width: 24px; height: 24px; }
.journey__card h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.journey__card p { color: var(--ink-2); }
.journey__card.is-active { border-color: rgba(46, 118, 124, .45); box-shadow: 0 30px 60px -30px rgba(46, 118, 124, .45); }
.journey__card.is-active .journey__num { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.journey__card.is-active .journey__icon { background: var(--teal); transform: rotate(-8deg) scale(1.08); }
@media (min-width: 640px) { .journey__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .journey__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .motion .journey__viewport { overflow: hidden; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
  .motion .journey__track { display: flex; width: max-content; gap: 28px; padding: 64px 0 8px; position: relative; }
  .motion .journey__card { width: min(400px, 32vw); min-height: 340px; }
  .motion .journey__rail { display: block; position: absolute; left: 0; right: 0; top: 22px; height: 3px; background: var(--mist-2); border-radius: 3px; }
  .motion .journey__rail i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); }
  .motion .journey__card::before {
    content: "";
    position: absolute;
    top: -50px; left: 26px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--mist);
    border: 3px solid rgba(29, 29, 27, .3);
    transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .5s var(--spring);
  }
  .motion .journey__card.is-active::before { background: var(--teal); border-color: var(--teal); transform: scale(1.25); }
}

/* DataViz tour: the camera moves to what each step is about */
.story__screen { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); background: #fff; }
.story__screen .app {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(var(--z, 1));
  transition: transform 1.1s var(--ease-out), transform-origin 1.1s var(--ease-out);
}
.story__screen .app[data-scene="kpis"] { --z: 1.22; --ox: 88%; --oy: 36%; }
.story__screen .app[data-scene="explore"] { --z: 1.3; --ox: 30%; --oy: 56%; }
.story__screen .app[data-scene="forecast"] { --z: 1.3; --ox: 94%; --oy: 74%; }
.story__screen .app[data-scene="meeting"] { --z: .96; }
.story__progress { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-size: .8rem; font-weight: 700; color: var(--ink-3); }
.story__progress-bar { position: relative; flex: 1; height: 3px; border-radius: 3px; background: var(--mist-2); overflow: hidden; }
.story__progress-bar i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .8s var(--ease-out); }
.story__progress-label { min-width: 11em; text-align: right; font-variant-numeric: tabular-nums; }
.story__progress-label b { color: var(--ink); }
@media (max-width: 1023px) { .story__progress { margin-top: 8px; } }

/* DataViz in 60 seconds, in a dialog (site.js). Sized so the whole frame fits the screen. */
.film-dialog { width: min(1120px, calc(100vw - 32px), calc((100vh - 120px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: #000; overflow: visible; }
.film-dialog::backdrop { background: rgba(16, 18, 20, .86); }
.film-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: #000; }
.film-dialog__close { position: absolute; right: 0; bottom: calc(100% + 12px); display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer; transition: background-color .2s var(--ease); }
.film-dialog__close:hover, .film-dialog__close:focus-visible { background: rgba(255, 255, 255, .3); }
.film-dialog__close .ico { width: 22px; height: 22px; }
.film__more { margin-top: 32px; text-align: center; }
.film-link { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; color: var(--ink); text-decoration: none; }
.film-link > .ico { flex: none; width: 38px; height: 38px; padding: 10px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .3s var(--spring); }
.film-link:hover > .ico, .film-link:focus-visible > .ico { transform: scale(1.08); }
.product__film { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .92rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.product__film .ico { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: var(--ink); color: #fff; }

/* Beyond the numbers (DataViz): the 60-second film's three heroes, each a
   small working piece of DataViz doing its one thing, left to right. Without
   script, or with reduced motion, each shows its end state. */
.heroes { display: grid; gap: 20px; }
@media (min-width: 900px) { .heroes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hero-card { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: var(--radius-lg); background: var(--mist); }
.hero-card__top { display: flex; align-items: center; gap: 14px; }
.hero-card__ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--sky-soft); color: var(--teal); }
.hero-card__ic .ico { width: 22px; height: 22px; }
.hero-card h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.hero-card > p { color: var(--ink-2); }
.hero-card__stage { position: relative; height: 272px; }

.why { position: absolute; inset: 0 0 auto; padding: 14px 16px 14px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px #dedfe1, 0 14px 28px -22px rgba(16, 24, 32, .45); }
.why__head { font-size: .92rem; font-weight: 700; }
.why__head span { font-weight: 500; color: #888989; }
.why__plot { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.why__plot text { font: 500 12px var(--font); fill: #888989; }
.why__area { fill: #e1e8eb; }
.why__line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.why__guide { stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 4; }
.why__mark { fill: #fff; stroke: var(--teal); stroke-width: 3; }
.why__pin-head { fill: var(--teal); }
.why__pin-dot { fill: #fff; }
.why__note { position: relative; margin-top: 8px; padding: 9px 12px; background: #c8dcde; color: var(--teal-deep); font-size: .84rem; font-weight: 500; line-height: 1.35; }
.why__note b { margin-right: 4px; font-weight: 800; }
.why__note span { display: block; margin-top: 2px; font-size: .74rem; font-weight: 600; color: var(--teal); }
.why__note::before { content: ""; position: absolute; top: -7px; left: var(--x, 50%); margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: #c8dcde; }

.alert { position: absolute; inset: 0 0 auto; }
.alert__bar { display: flex; align-items: center; justify-content: space-between; height: 46px; padding: 0 16px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px #dedfe1; }
.alert__bar .dv { font-size: 17px; }
.alert__icons { display: flex; align-items: center; gap: 16px; }
.alert__icons img { display: block; width: 20px; height: 20px; }
.alert__bell { position: relative; color: var(--ink-2); transform-origin: 50% 8%; }
.alert__bell .ico { display: block; width: 22px; height: 22px; }
.alert__badge { position: absolute; right: -8px; top: -7px; display: grid; place-items: center; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 1px; background: var(--bad); color: #fff; font-size: 10px; font-weight: 700; }
.alert__card { position: relative; margin-top: 12px; padding: 14px 16px 14px 22px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px #dedfe1, 0 22px 36px -24px rgba(16, 24, 32, .55); transform-origin: 90% 0; }
.alert__card::before { content: ""; position: absolute; top: -8px; right: 18px; border: 8px solid transparent; border-top: 0; border-bottom-color: #fff; filter: drop-shadow(0 -1px 0 #dedfe1); }
.alert__sev { position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #be2f3f; transform-origin: 50% 0; }
.alert__eb { display: flex; justify-content: space-between; gap: 8px; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #be2f3f; }
.alert__eb em { font-style: normal; font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #888989; }
.alert__t { margin-top: 6px; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.alert__b { margin-top: 3px; font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.alert__pa { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .8rem; font-weight: 600; color: #7356d6; }
.alert__pa img { width: 16px; height: 16px; }
.alert__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.alert__btns span { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 1px; font-size: .78rem; font-weight: 700; }
.alert__btns .ico { width: 15px; height: 15px; }
.alert__go { background: var(--teal); color: #fff; }
.alert__done { box-shadow: inset 0 0 0 1.5px var(--teal); color: var(--teal); }

.mtg { position: absolute; inset: 0; }
.mtg__deck { position: absolute; left: 50%; top: 16px; width: 230px; height: 132px; margin-left: -115px; }
.mtg__slide { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 10px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px #dedfe1, 0 18px 30px -18px rgba(16, 24, 32, .45); }
.mtg__slide small, .mtg__page small { font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.mtg__slide b { font-size: .78rem; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.mtg__bars { display: flex; align-items: flex-end; gap: 4%; flex: 1; min-height: 0; border-bottom: 1px solid #d5dce1; }
.mtg__bars i { flex: 1; background: #c9d2d8; }
.mtg__bars i.k { background: var(--teal); }
.mtg__slide:nth-child(1) { transform: translate(-44px, 10px) rotate(-9deg); }
.mtg__slide:nth-child(2) { transform: translate(44px, 10px) rotate(8deg); }
.mtg__pdf { position: absolute; left: 50%; top: 10px; width: 112px; height: 146px; margin-left: -56px; }
.mtg__page { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 13px; background: #fff; border-radius: 3px; box-shadow: 0 0 0 1px #dedfe1, 0 22px 34px -20px rgba(16, 24, 32, .55); }
.mtg__page b { margin-top: 3px; font-size: .78rem; font-weight: 800; line-height: 1.1; }
.mtg__page .mtg__bars { flex: none; height: 30px; margin-top: 8px; border: 0; }
.mtg__line { display: block; height: 4px; margin-top: 6px; background: #dedfe1; }
.mtg__tag { position: absolute; left: -10px; bottom: 14px; padding: 3px 8px; border-radius: 1px; background: var(--bad); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.mtg__btn { position: absolute; left: 50%; bottom: 6px; display: grid; height: 42px; border-radius: 2px; background: var(--teal); color: #fff; overflow: hidden; transform: translateX(-50%); }
.mtg__btn span { grid-area: 1 / 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; font-size: .86rem; font-weight: 700; white-space: nowrap; transition: transform .45s var(--ease-out), opacity .3s var(--ease); }
.mtg__btn .ico { width: 18px; height: 18px; }
.mtg__go { transform: translateY(-100%); opacity: 0; }
.mtg__deck { opacity: 0; }

/* The play, one card after another (demo.js adds .is-play). */
.js [data-heroes] .why__drawn { clip-path: inset(0 100% 0 0); transition: clip-path 1.5s var(--ease-out); }
.js [data-heroes] .why__pin { opacity: 0; transform: translateY(-46px); transition: transform .6s var(--spring) 1.25s, opacity .2s linear 1.25s; }
.js [data-heroes] .why__mark { opacity: 0; transition: opacity .25s 1.6s; }
.js [data-heroes] .why__guide { opacity: 0; transition: opacity .3s 1.7s; }
.js [data-heroes] .why__note { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease) 1.8s, transform .6s var(--ease-out) 1.8s; }
.js [data-heroes] .is-play .why__drawn { clip-path: inset(0 0 0 0); }
.js [data-heroes] .is-play :is(.why__pin, .why__mark, .why__guide, .why__note) { opacity: 1; transform: none; }

.js [data-heroes] .alert__badge { transform: scale(0); transition: transform .4s var(--spring) .55s; }
.js [data-heroes] .alert__card { opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .45s var(--ease) .75s, transform .7s var(--ease-out) .75s; }
.js [data-heroes] .alert__sev { transform: scaleY(0); transition: transform .5s var(--ease-out) 1.05s; }
.js [data-heroes] :is(.alert__pa, .alert__btns) { opacity: 0; transition: opacity .5s var(--ease) 1.4s; }
.js [data-heroes] .alert__btns { transition-delay: 1.6s; }
.js [data-heroes] .is-play .alert__bell { animation: hero-ring .9s var(--ease) .1s; }
.js [data-heroes] .is-play :is(.alert__badge, .alert__card, .alert__sev) { opacity: 1; transform: none; }
.js [data-heroes] .is-play :is(.alert__pa, .alert__btns) { opacity: 1; }
@keyframes hero-ring { 0%, 100% { transform: none; } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }

/* Meeting ready: the slides fan out, a click on Export PDF, and they fold into the pack. */
.js [data-heroes] .mtg__deck { opacity: 1; transition: opacity .35s var(--ease) 1.75s, transform .5s var(--ease-in, ease-in) 1.6s; }
.js [data-heroes] .mtg__slide { transition: transform .7s var(--ease-out) .2s; }
.js [data-heroes] .hero-card:not(.is-play) .mtg__slide { transform: none; }
.js [data-heroes] .is-play .mtg__deck { opacity: 0; transform: scale(.45); }
.js [data-heroes] .mtg__pdf { opacity: 0; transform: scale(.7); transition: opacity .4s var(--ease) 1.95s, transform .6s var(--spring) 1.95s; }
.js [data-heroes] .is-play .mtg__pdf { opacity: 1; transform: none; }
.js [data-heroes] .mtg__go { transform: none; opacity: 1; }
.js [data-heroes] .mtg__done { transform: translateY(100%); opacity: 0; }
.js [data-heroes] .is-play .mtg__go { transform: translateY(-100%); opacity: 0; transition-delay: 2.1s; }
.js [data-heroes] .is-play .mtg__done { transform: none; opacity: 1; transition-delay: 2.1s; }
.js [data-heroes] .is-play .mtg__btn { animation: hero-press .3s var(--ease) 1.35s; }
@keyframes hero-press { 50% { transform: translateX(-50%) scale(.94); } }

@media (prefers-reduced-motion: reduce) {
  .js [data-heroes] *, .js [data-heroes] *::before { transition: none !important; animation: none !important; }
}

/* Governance stack: the layers assemble as you scroll */
.stack { perspective: 1400px; }
.stack__layer, .stack__pipe { will-change: transform; }

/* Magnetic buttons keep their own transform for the pull */
[data-magnetic] { will-change: transform; }

/* ---------- Brand marks ---------- */

.flow-hub__logo { display: block; width: auto; height: 22px; aspect-ratio: 940 / 172; margin: 2px 0 4px; }
.connect-card__logo { display: block; width: auto; height: 30px; aspect-ratio: 940 / 172; margin-bottom: 6px; }
.stack__logo { display: block; width: auto; height: 20px; aspect-ratio: 940 / 172; margin: 3px 0 5px; }
/* DataViz: its cap height is the whole box, so it's set smaller to match Connect's letters */
.flow-hub__logo--dataviz { height: 17px; aspect-ratio: 641 / 100; margin: 4px 0 6px; }
.stack__logo--dataviz { height: 15px; aspect-ratio: 641 / 100; margin: 5px 0 7px; }
.product-hero__logo { margin: 0; }
.product-hero__logo img { display: block; width: auto; height: clamp(26px, 2.4vw + 12px, 40px); aspect-ratio: 641 / 100; }
.flow-hub--app .flow-hub__head .ico { color: var(--teal); }
.stack__layer--app > .ico { color: var(--teal); }
.scene-sources__via img { display: inline-block; width: auto; height: 1em; margin-left: .45em; vertical-align: -.08em; }

/* ---------- Governance stack as layers of material ----------
   The platform drawn as three panes of glass: the sources underneath, Connect
   in the middle, DataViz on top. Lighter material on top for the thing people
   touch, heavier underneath; each pane catches light along its top edge. On
   scroll the exploded stack settles into place (motion.js). */

.stack { position: relative; padding: 24px 0; }
.stack::before {
  content: "";
  position: absolute;
  inset: -40px -20px;
  background-image: linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 30%, transparent 72%);
  pointer-events: none;
}
.stack__layer { position: relative; transform-style: preserve-3d; }
/* The exploded top pane leans out past a phone's edge before it settles; clip
   the section sideways so it never widens the page (clip keeps the 3D). */
.section:has(.stack) { overflow-x: clip; }
.stack__layer--app {
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 36px 70px -30px rgba(0, 0, 0, .75);
}
.stack__layer--connect {
  background: rgba(46, 118, 124, .62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(119, 188, 197, .3), 0 36px 70px -30px rgba(0, 0, 0, .75);
}
.stack__layer--src {
  background: rgba(255, 255, 255, .055);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 30px 60px -30px rgba(0, 0, 0, .7);
}

/* ---------- The film (the DataViz reel, with its chapters) ----------
   The reel is drawn on the website's mist, as the 60-second film is, so the
   frame takes the same colour and the video has no visible edge. The chapter list follows the
   video: the current chapter darkens and its line fills as it plays. */

.film { display: grid; gap: clamp(24px, 4vw, 56px); align-items: center; }
@media (min-width: 1000px) {
  .film { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
@media (max-width: 999px) {
  /* Stacked: keep the square to a size that leaves the chapters in reach */
  .film__screen, .film__chapters { width: 100%; max-width: 640px; margin: 0 auto; }
}
.film__screen {
  position: relative;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  background: var(--mist-2);
  box-shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 40px 80px -40px rgba(16, 24, 32, .4);
  isolation: isolate;
}
.film__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film__toggle {
  position: absolute;
  right: 14px; bottom: 14px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 8px 20px -10px rgba(16, 24, 32, .45);
  cursor: pointer;
  transition: transform .1s ease-out, background-color .2s;
}
.film__toggle[hidden] { display: none; }
.film__toggle:hover { background: rgba(255, 255, 255, .92); }
.film__toggle:active { transform: scale(.94); }
.film__toggle .ico { width: 22px; height: 22px; }
.film__toggle .film__play, .film.is-paused .film__toggle .film__pause { display: none; }
.film.is-paused .film__toggle .film__play { display: block; }

.film__chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.film__chapter {
  position: relative;
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  gap: 2px 10px;
  width: 100%;
  padding: 13px 16px 17px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease), transform .1s ease-out;
}
.film__chapter:hover { color: var(--ink-2); background: var(--mist); }
.film__chapter:active { transform: scale(.985); }
.film__chapter:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.film__n { grid-row: span 2; padding-top: .28em; font-size: .78rem; font-weight: 800; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.film__chapter b { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; font-size: 1.05rem; font-weight: 800; letter-spacing: -.005em; }
.film__chapter b img { width: auto; height: .92em; opacity: .5; transition: opacity .35s var(--ease); }
.film__d { font-size: .9rem; line-height: 1.45; }
.film__chapter i {
  position: absolute;
  left: 16px; right: 16px; bottom: 7px;
  height: 2px;
  border-radius: 1px;
  background: var(--mist-2);
  overflow: hidden;
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.film__chapter i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.film__chapter.is-on { color: var(--ink); background: var(--mist); }
.film__chapter.is-on .film__n { color: var(--teal); }
.film__chapter.is-on b img, .film__chapter:hover b img { opacity: 1; }
.film__chapter.is-on i { opacity: 1; background: #fff; }
@media (max-width: 599px) {
  .film__chapter { padding: 11px 14px 15px; }
  .film__d { display: none; }
  .film__chapter b { font-size: .98rem; }
}

/* ---------- Reduced transparency: frosted becomes solid ---------- */

@media (prefers-reduced-transparency: reduce) {
  .site-header { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sat__inner { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stack__layer--app { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stack__layer--connect { background: var(--teal); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .stack__layer--src { background: #2a2a28; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .film__toggle { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Product names in text: always the logo, never the word ----------
   DataViz and Connect are named with their marks wherever they're read: in
   sentences, menus, buttons and headings. Each is set at the surrounding
   text's cap height (Montserrat's is .7em) and in its colour, so it sits on
   the baseline like a word. DataViz's box is its cap height; Connect's
   letters are 130 of its 172 units, standing 20 above the box's foot. */
svg.dv, svg.cn { display: inline-block; max-width: none; overflow: visible; fill: currentColor; }
svg.dv { width: 4.49em; height: .7em; vertical-align: baseline; margin: 0 .03em; }
svg.cn { width: 5.06em; height: .926em; vertical-align: -.11em; margin: 0 .02em; }

/* ==========================================================================
   Connect, Security and Data maturity pages
   ========================================================================== */

/* Page heroes without a drawing: the security and maturity pages */
.hero--page { padding-bottom: clamp(56px, 7vw, 96px); }
.page-hero { position: relative; z-index: 2; display: grid; gap: 24px; justify-items: start; max-width: 920px; }
.page-hero .lead { max-width: 60ch; }
.trust-row { display: grid; gap: 12px; width: 100%; margin-top: 12px; }
@media (min-width: 640px) { .trust-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .trust-row { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1160px; } }
.trust-row li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.trust-row .ico { width: 30px; height: 30px; color: var(--teal); flex: none; }
.trust-row b { display: block; font-size: .95rem; font-weight: 800; }
.trust-row small { display: block; font-size: .8rem; color: var(--ink-3); }

.section-more { margin-top: clamp(32px, 4vw, 48px); }

/* Connect hero: its logo, and the run console */
.product-hero__logo img.is-connect { aspect-ratio: 940 / 172; height: clamp(34px, 3.1vw + 14px, 54px); }
.hero--connect .product-hero__stage { max-width: 760px; padding-bottom: clamp(56px, 7vw, 96px); }
.console {
  position: relative;
  border-radius: 14px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  padding: 18px;
  text-align: left;
}
.console__top { display: flex; align-items: center; gap: 12px; padding: 4px 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, .1); margin-bottom: 12px; }
.console__logo { width: auto; height: 16px; aspect-ratio: 940 / 172; }
.console__client { font-size: .82rem; font-weight: 700; color: rgba(255, 255, 255, .6); }
.console__rev { margin-left: auto; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--sky); }
.console__steps { display: grid; gap: 6px; }
.console__steps li {
  display: grid;
  grid-template-columns: 22px 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .72);
  font-size: .9rem;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.console__steps li .ico { width: 20px; height: 20px; color: var(--sky); }
.console__steps li b { color: #fff; font-weight: 800; }
.console__steps li.is-lit { background: var(--teal); color: #fff; }
.console__steps li.is-lit .ico { color: #fff; }
@media (max-width: 560px) {
  .console__steps li { grid-template-columns: 20px minmax(0, 1fr); }
  .console__steps li span { grid-column: 2; font-size: .82rem; }
}

/* The five steps */
.csteps { display: grid; gap: 16px; }
@media (min-width: 700px) { .csteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .csteps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.cstep { position: relative; display: grid; gap: 12px; align-content: start; padding: 26px 22px 28px; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cstep__num { font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--teal); }
.cstep > .ico { width: 34px; height: 34px; color: var(--ink); }
.cstep h3 { font-size: 1.15rem; font-weight: 800; }
.cstep p { font-size: .92rem; color: var(--ink-2); }

/* Map: naming rules at work */
.rules { border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); padding: 10px 0 18px; overflow: hidden; }
.rules__head, .rules__row { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 12px 20px; }
.rules__head { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.rules__row + .rules__row { border-top: 1px solid var(--mist-2); }
.rules__row code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8rem; color: var(--ink-2); overflow-wrap: anywhere; }
.rules__row span { justify-self: start; padding: 4px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--sky-soft); color: var(--teal-deep); }
.rules__note { margin: 10px 20px 0; font-size: .78rem; color: var(--ink-3); }
@media (max-width: 560px) {
  .rules__head { display: none; }
  .rules__row { grid-template-columns: repeat(3, auto); justify-content: start; }
  .rules__row code { grid-column: 1 / -1; }
}

/* Define: one metric, as Connect holds it */
.defcard { border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; }
.defcard__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.defcard__name { font-size: 1.3rem; font-weight: 800; }
.defcard__name small { display: block; font-size: .82rem; font-weight: 600; color: var(--ink-3); }
.defcard__live { padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: var(--good-soft); color: var(--good); white-space: nowrap; }
.defcard__formula { margin: 0; padding: 16px 18px; border-radius: var(--radius); background: var(--mist); font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); font-weight: 800; letter-spacing: -.01em; }
.defcard__formula b { color: var(--teal); margin: 0 .2em; }
.defcard__facts { display: grid; gap: 8px; }
.defcard__facts li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; font-size: .9rem; }
.defcard__facts span { color: var(--ink-3); }
.defcard__review { display: flex; flex-wrap: wrap; gap: 10px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.defcard__who { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 700; color: var(--ink-2); }
.defcard__who i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-style: normal; font-size: .7rem; font-weight: 800; color: #fff; background: var(--ink); }
.defcard__who--ok i { background: var(--teal); }
.defcard__note { margin: 0; font-size: .78rem; color: var(--ink-3); }

/* Showing its working: where a number came from, and the log */
.proof { display: grid; gap: 20px; }
@media (min-width: 960px) { .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.proof__card { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.proof__label { margin: 0 0 18px; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.lineage__kpi { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--ink); color: #fff; }
.lineage__kpi span { font-size: .85rem; color: rgba(255, 255, 255, .7); }
.lineage__kpi b { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.lineage__trail { position: relative; display: grid; gap: 14px; margin-top: 18px; padding-left: 8px; }
.lineage__trail::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: var(--mist-2); }
.lineage__trail li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; align-items: center; }
.lineage__trail .ico { grid-row: span 2; width: 24px; height: 24px; padding: 3px; border-radius: 50%; background: #fff; color: var(--teal); box-shadow: 0 0 0 2px var(--mist-2); }
.lineage__trail b { font-size: .92rem; }
.lineage__trail span { font-size: .82rem; color: var(--ink-3); }
.audit { display: grid; }
.audit li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--mist-2); font-size: .9rem; color: var(--ink-2); }
.audit li:first-child { border-top: 0; padding-top: 0; }
.audit time { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .8rem; color: var(--ink-3); }
.audit b { color: var(--ink); }
.audit code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: .82rem; padding: 1px 5px; border-radius: 3px; background: var(--mist); }
.proof__foot { margin-top: 16px; font-size: .8rem; color: var(--ink-3); }

/* Certification cards, on dark */
.cert-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cert { display: grid; gap: 12px; align-content: start; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12); }
.cert > .ico { width: 36px; height: 36px; color: var(--sky); }
.cert h3 { font-size: 1.2rem; font-weight: 800; color: #fff; }
.cert p { color: rgba(255, 255, 255, .75); font-size: .95rem; }
.cert a { color: var(--sky); font-weight: 700; }

/* Data maturity: the framework */
.matrix-wrap { border-radius: var(--radius-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; background: #fff; }
.matrix { width: 100%; border-collapse: collapse; table-layout: fixed; }
.matrix th, .matrix td { padding: 18px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: .9rem; line-height: 1.5; }
.matrix thead th { border-top: 0; padding-top: 20px; padding-bottom: 16px; }
.matrix thead th:first-child { width: 190px; }
.matrix tbody th { font-weight: 800; font-size: 1.02rem; }
.matrix tbody th .ico { display: block; width: 30px; height: 30px; color: var(--ink); margin-bottom: 8px; }
.matrix td { color: var(--ink-2); }
.matrix td + td, .matrix tbody th + td { border-left: 1px solid var(--mist-2); }
.level { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.level--1 { background: var(--mist-2); color: var(--ink-2); }
.level--2 { background: var(--sky-soft); color: var(--teal-deep); }
.level--3 { background: var(--sky); color: var(--ink); }
.level--4 { background: var(--teal); color: #fff; }
@media (max-width: 899px) {
  .matrix, .matrix tbody, .matrix tr, .matrix th, .matrix td { display: block; width: 100%; }
  .matrix thead { display: none; }
  .matrix tr { border-top: 8px solid var(--mist); }
  .matrix tr:first-child { border-top: 0; }
  .matrix tbody th { border-top: 0; padding-bottom: 6px; }
  .matrix td { border-left: 0 !important; border-top: 1px solid var(--mist-2); padding-top: 12px; }
  .matrix td::before { content: attr(data-level); display: block; margin-bottom: 4px; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--teal); }
}

/* Data maturity: capability model, on dark */
.quad { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; }
.quad__y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.quad__x { grid-row: 2; grid-column: 2; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--sky); }
.quad__grid { grid-row: 1; grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.quad__cell { display: grid; gap: 8px; align-content: start; min-height: clamp(130px, 14vw, 170px); padding: clamp(16px, 2vw, 22px); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.quad__cell b { font-size: 1.15rem; font-weight: 800; color: #fff; }
.quad__cell span { font-size: .9rem; color: rgba(255, 255, 255, .72); }
.quad__cell--lead { background: var(--teal); border-color: var(--teal); }
.quad__cell--lead span { color: rgba(255, 255, 255, .9); }
/* The Connect console is narrower than the DataViz drawing, so its cards sit
   out beside it, and only where there's room for them. */
.hero--connect .sat--1 { top: 4%; left: -31%; }
.hero--connect .sat--2 { top: 56%; left: -33%; }
.hero--connect .sat--3 { top: 28%; right: -31%; }
@media (max-width: 1239px) { .hero--connect .sat { display: none; } }

/* Page heroes size to their words; only the home and product heroes fill the screen. */
@media (min-width: 1024px) { .hero--page { min-height: 0; display: block; } }
.page-hero { max-width: none; }
.page-hero > .display { max-width: 920px; }
.page-hero > .trust-row { justify-self: stretch; }

/* ---------- The Freethinking Hub: its tools (js/tools.js) ----------
   Each tool keeps its own colours inside its pop-up; around it, the site's. */

.tm-hublogo { position: relative; display: inline-flex; flex-direction: column; padding-right: .85em; line-height: .92; white-space: nowrap; color: var(--ink); }
.tm-hublogo b { font-weight: 800; letter-spacing: -.005em; }
.tm-hublogo span { font-weight: 400; letter-spacing: .01em; }
.tm-hublogo svg { position: absolute; top: -.42em; right: 0; width: .8em; height: .8em; fill: currentColor; }
.tm-hublogo--inline { display: inline-flex; flex-direction: row; gap: .3em; padding-right: .9em; vertical-align: -.1em; font-size: .9em; }

/* Home: the Hub section */
.hub-intro { display: flex; align-items: center; gap: 14px; font-size: 1.5rem; margin-bottom: 10px; }
.hub-intro .tm-hublogo svg { fill: var(--teal); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.tool-tile {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; align-items: center;
  padding: 20px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .3s var(--spring), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tool-tile:hover, .tool-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.tool-tile img { grid-row: span 2; width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }
.tool-tile b { font-size: 1.05rem; font-weight: 800; }
.tool-tile span { font-size: .9rem; color: var(--ink-2); line-height: 1.4; }

/* Menu: the Freethinking Hub dropdown */
.site-nav__drop { position: relative; }
.site-nav__drop > button { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; cursor: pointer; font-family: inherit; }
.site-nav__drop > button .ico { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.site-nav__drop.is-open > button .ico { transform: rotate(180deg); }
.site-nav__menu {
  position: absolute; left: 50%; top: calc(100% + 14px); z-index: 60; width: 340px; padding: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s var(--ease), transform .25s var(--ease-out), visibility 0s .25s;
}
.site-nav__drop.is-open .site-nav__menu, .site-nav__drop:focus-within .site-nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.site-nav__menu a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 8px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none; text-transform: none; letter-spacing: 0; }
.site-nav__menu a:hover, .site-nav__menu a:focus-visible { background: var(--mist); }
.site-nav__menu img { grid-row: span 2; width: 36px; height: 36px; border-radius: 9px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }
.site-nav__menu b { font-size: .9rem; font-weight: 700; }
.site-nav__menu small { font-size: .78rem; font-weight: 500; color: var(--ink-3); }
.mobile-menu__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 0 4px; }
.mobile-menu__tools a { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; font-size: .78rem; font-weight: 600; text-align: center; color: var(--ink); text-decoration: none; }
.mobile-menu__tools img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }

/* The flow: the Hub's box holds the tools' icons */
.flow-hub__apps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.flow-hub__apps a { display: block; border-radius: 7px; transition: transform .25s var(--spring); }
.flow-hub__apps a:hover, .flow-hub__apps a:focus-visible { transform: translateY(-2px) scale(1.08); }
.flow-hub__apps img { display: block; width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .1); }
.flow-hub__logo-hub { width: 22px; height: 22px; border-radius: 6px; flex: none; }

/* The pop-up */
.tool-dialog { width: min(980px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-lg); overflow: visible; }
.tool-dialog::backdrop { background: rgba(16, 18, 20, .72); }
.tool-dialog__inner { max-height: calc(100vh - 32px); overflow-y: auto; padding: clamp(22px, 4vw, 40px); overscroll-behavior: contain; }
.tool-dialog__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--mist); color: var(--ink); cursor: pointer; }
.tool-dialog__close:hover, .tool-dialog__close:focus-visible { background: var(--mist-2); }
.tool-dialog__close .ico { width: 22px; height: 22px; }
.tool-dialog__head { display: flex; align-items: center; gap: 18px; padding-right: 40px; }
.tool-dialog__icon { width: 64px; height: 64px; flex: none; border-radius: 15px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }
.tool-dialog__logo { font-size: 1.7rem; line-height: 1; }
.tool-dialog__line { margin-top: 8px; font-weight: 600; color: var(--ink-2); }
.tool-dialog__text { margin-top: 22px; max-width: 66ch; font-size: 1.05rem; }
.tool-dialog__who { margin-top: 10px; color: var(--ink-2); }
.tool-dialog__who b { margin-right: 6px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--tool, var(--teal)); }
.tool-dialog__mocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; margin-top: 26px; }
.tool-mock { margin: 0; }
.tool-mock__frame { height: 100%; min-height: 230px; padding: 18px; border-radius: var(--radius); background: var(--tool-ground, var(--mist)); box-shadow: inset 0 0 0 1px rgba(16, 24, 32, .06); font-size: 13px; }
.tool-mock figcaption { margin-top: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tool-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--ink-3); }

.tm-logo { display: block; height: .9em; width: auto; }
.tm-logo--cep { height: 1.15em; }
.tm-wordmark { display: inline-flex; align-items: center; gap: .35em; font-weight: 800; letter-spacing: -.02em; }
.tm-wordmark img { display: none; }

/* Each tool's own colours (from its repo) */
.tool-dialog--hub { --tool: #00754A; --tool-ground: #f2f4ee; }
.tool-dialog--budget-planning { --tool: #56684e; --tool-ground: #f4f4ee; }
.tool-dialog--cep { --tool: #526783; --tool-ground: #edf1f6; }
.tool-dialog--shopper-missions { --tool: #8a500c; --tool-ground: #f7f5f1; }
.tool-dialog--creative-signal { --tool: #F4511E; --tool-ground: #f3f4f6; }
.tool-dialog--custom-agents { --tool: #5D3FD3; --tool-ground: #f3f0fd; }

/* Mock-up parts, shared */
.tm-note { margin-top: 10px; font-size: 11px; color: var(--ink-3); }
.tm-bar { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 3em; align-items: center; gap: 10px; margin-top: 9px; font-weight: 600; }
.tm-bar i { display: block; height: 12px; border-radius: 6px; background: rgba(16, 24, 32, .08); overflow: hidden; }
.tm-bar em { display: block; height: 100%; border-radius: 6px; background: var(--tool); opacity: .55; }
.tm-bar:first-child em { opacity: 1; }
.tm-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.tm-map { position: relative; height: 230px; margin: 0 0 0 16px; border-left: 1px solid rgba(16, 24, 32, .25); border-bottom: 1px solid rgba(16, 24, 32, .25); }
.tm-map__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--tool); box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
.tm-map__label { position: absolute; margin: 9px 0 0 -40px; width: 80px; text-align: center; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--ink-2); }
.tm-map__q { position: absolute; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.tm-map__x { position: absolute; right: 0; bottom: -20px; font-size: 10.5px; color: var(--ink-3); }
.tm-map__y { position: absolute; left: -20px; top: 0; font-size: 10.5px; color: var(--ink-3); writing-mode: vertical-rl; transform: rotate(180deg); }
.tm-map__cut { position: absolute; top: 0; bottom: 0; border-left: 1px dashed rgba(16, 24, 32, .3); }
.tm-map__cut--h { top: auto; left: 0; right: 0; bottom: auto; border-left: 0; border-top: 1px dashed rgba(16, 24, 32, .3); }
.tm-map__dot--grow { background: #5365a0; } .tm-map__dot--attack { background: #c72117; } .tm-map__dot--defend { background: #2c757c; } .tm-map__dot--watch { background: #a85e0a; }
.tm-table > div { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; padding: 10px 12px; background: #fff; border-bottom: 1px solid rgba(16, 24, 32, .06); }
.tm-table__head { background: transparent !important; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.tm-table > div:not(.tm-table__head) span:last-child { font-weight: 700; color: var(--tool); }

/* Budget Planning */
.tm-bp { display: grid; gap: 14px; }
.tm-bp__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tm-bp__fields label { display: grid; gap: 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tm-bp__fields span { padding: 8px 10px; background: #fff; border: 1px solid rgba(16, 24, 32, .1); font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }
.tm-bp__out { padding: 16px; background: #1d1d1b; color: #fff; }
.tm-bp__out small { font-size: 11px; color: #a7b49a; }
.tm-bp__out b { display: block; margin-top: 2px; font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: #e7eadf; }
.tm-bp__share { display: grid; gap: 6px; margin-top: 12px; }
.tm-bp__share span { display: block; padding: 5px 8px; background: rgba(255, 255, 255, .14); font-size: 11px; font-weight: 600; white-space: nowrap; }
.tm-bp__share .is-new { background: #a7b49a; color: #1d1d1b; }

/* Freethinking Hub */
.tm-hub { background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }
.tm-hub__bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #0a0a0a; font-size: 13px; }
.tm-hub__bar .tm-hublogo { color: #fff; }
.tm-hub__bar .tm-hublogo svg { fill: #D7FF3C; }
.tm-hub__user { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #D7FF3C; font-size: 0; }
.tm-hub__user::after { content: "S"; font-size: 12px; font-weight: 800; color: #0a0a0a; }
.tm-hub__hi { padding: 14px 14px 4px; font-size: 16px; font-weight: 800; }
.tm-hub__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px 14px 14px; }
.tm-hub__tile { display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(16, 24, 32, .08); }
.tm-hub__tile img { width: 28px; height: 28px; border-radius: 7px; }
.tm-hub__tile b { font-size: 11.5px; line-height: 1.2; }
.tm-hub__tile small { font-size: 10px; color: #00754A; font-weight: 700; }

/* Chats: the Hub's agents and custom agents */
.tm-chat { display: grid; gap: 10px; padding: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }
.tm-chat--dark { background: #14102A; color: #fff; }
.tm-chat__head { display: flex; align-items: center; gap: 8px; }
.tm-chat__head img { width: 26px; height: 26px; border-radius: 7px; }
.tm-chat__head small { margin-left: auto; font-size: 10.5px; font-weight: 600; opacity: .65; }
.tm-chat__q { justify-self: end; max-width: 85%; padding: 9px 12px; border-radius: 12px 12px 2px 12px; background: #ece7fb; color: var(--ink); font-weight: 600; }
.tm-chat__a { max-width: 92%; padding: 10px 12px; border-radius: 12px 12px 12px 2px; background: var(--mist); color: var(--ink); line-height: 1.45; }
.tm-chat--dark .tm-chat__a { background: #241B48; color: #fff; }
.tm-chat__by { font-size: 11px; opacity: .8; }
.tm-chat__src { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-chat__src span { padding: 4px 8px; border-radius: 20px; background: #f3f0fd; color: #5D3FD3; font-size: 10.5px; font-weight: 700; }
.tm-setup { display: grid; gap: 10px; }
.tm-setup div { padding: 12px 14px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 32, .08); }
.tm-setup small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5D3FD3; }
.tm-setup b { display: block; margin-top: 3px; font-weight: 600; }

/* Creative Signal */
.tm-list > div { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 8px; padding: 10px 12px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 32, .06); border-radius: 8px; }
.tm-list__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #F4511E; color: #fff; font-weight: 800; font-size: 11px; }
.tm-list b { font-size: 11.5px; color: #12825C; white-space: nowrap; }
.tm-brief { display: grid; gap: 8px; padding: 16px; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .06); }
.tm-brief small { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #F4511E; }
.tm-brief b { font-size: 15px; }
.tm-brief ul { margin: 0; padding-left: 18px; line-height: 1.6; }
.tm-brief__tag { justify-self: start; padding: 4px 9px; border-radius: 20px; background: #14161B; color: #fff; font-size: 10.5px; font-weight: 700; }

@media (max-width: 560px) {
  .tm-bp__fields { grid-template-columns: 1fr; }
  .tm-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-bar { grid-template-columns: 7.5em minmax(0, 1fr) 3em; }
}
.mobile-menu__group { display: block; padding: 10px 0; }
.mobile-menu__label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
@media (hover: hover) and (min-width: 1240px) { .site-nav__drop:hover .site-nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; } }
.site-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
/* The site's reset clears paragraph margins; the pop-up sets its own. */
.tool-dialog .tool-dialog__line { margin-top: 10px; }
.tool-dialog .tool-dialog__text { margin-top: 24px; }
.tool-dialog .tool-dialog__who { margin-top: 12px; }
.tool-dialog .tm-note { margin-top: 10px; }
.tool-dialog .tm-brief ul { list-style: disc; }
.flow-hub__name a { color: inherit; text-decoration: none; }
.flow-hub__name a:hover, .flow-hub__name a:focus-visible { text-decoration: underline; }
@media (min-width: 900px) { .tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- The flow's boxes, each in its own product's look ----------
   Connect as its own app draws itself: a near-black instrument panel, a
   lamp for each step and the group's yellow for the step at work. DataViz as
   a small DataViz window: a white navbar, grey rows with 1px corners and
   teal. The Freethinking Hub in its black and Volt, each tool by its own
   full logo. */
.flow-hub--connect { background: #0f0f0f; box-shadow: 0 0 0 1px #292929, var(--shadow-lg); border-radius: 6px; }
.flow-hub--connect .flow-hub__head .ico { color: #e8a63d; }
.flow-hub--connect .flow-hub__role { color: rgba(255, 255, 255, .55); }
.flow-hub--connect .flow-hub__steps li { background: #171717; box-shadow: inset 0 0 0 1px #262626; border-radius: 3px; color: rgba(255, 255, 255, .82); }
.flow-hub--connect .flow-hub__steps li .ico { color: #e8a63d; }
.flow-hub--connect .flow-hub__steps li.is-lit { background: #1e1b14; box-shadow: inset 0 0 0 1px #f0bb32; color: #fff; }
.flow-hub--connect .flow-hub__steps li.is-lit .ico { color: #f0bb32; }
.flow-lamp { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: #2fae7a; box-shadow: 0 0 0 3px rgba(47, 174, 122, .16); flex: none; }
.flow-hub--connect .flow-hub__steps li.is-lit .flow-lamp { background: #f0bb32; box-shadow: 0 0 0 3px rgba(240, 187, 50, .22), 0 0 10px rgba(240, 187, 50, .6); }

.flow-hub--dataviz { padding: 0; overflow: hidden; border-radius: 4px; }
.flow-hub--dataviz .flow-hub__head { padding: 12px 16px; background: #fff; box-shadow: inset 0 -1px 0 #dedfe1; }
.flow-hub--dataviz .flow-hub__head > .ico { display: none; }
.flow-hub--dataviz .flow-hub__steps { margin: 0; padding: 12px 14px 14px; background: #fff; }
.flow-hub--dataviz .flow-hub__steps li { border-radius: 1px; background: #f3f5f7; color: var(--ink); white-space: nowrap; }
.flow-hub--dataviz .flow-hub__steps li .ico { color: var(--teal); }
.flow-hub--dataviz .flow-hub__steps li.is-lit { background: var(--teal); color: #fff; }

.flow-hub--tools { padding: 16px 16px 14px; background: #0a0a0a; color: #fff; box-shadow: 0 0 0 1px #1d1d1d, var(--shadow-lg); border-radius: 6px; }
.flow-hub__hublogo { display: inline-block; font-size: 1.05rem; color: #fff; text-decoration: none; }
.flow-hub__hublogo .tm-hublogo { color: #fff; }
.flow-hub__hublogo .tm-hublogo svg { fill: #D7FF3C; }
.flow-hub--tools .flow-hub__role { margin-top: 6px; color: rgba(255, 255, 255, .6); }
.flow-hub--tools .flow-hub__role .pa { color: #fff; }
.site .flow-tools { display: grid; gap: 5px; margin: 12px 0 0; padding: 0; list-style: none; }
.flow-tools a { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; background: #fff; border-radius: 3px; color: var(--ink); text-decoration: none; transition: transform .25s var(--spring), box-shadow .25s var(--ease); }
.flow-tools a:hover, .flow-tools a:focus-visible { transform: translateX(3px); box-shadow: 0 0 0 2px #D7FF3C; }
.flow-tool__logo--bp { height: 11px; width: auto; }
.flow-tool__logo--cep { height: 15px; width: auto; }
.flow-tool__icon { width: 20px; height: 20px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(16, 24, 32, .1); }
.flow-tool__name { font-size: .86rem; font-weight: 800; letter-spacing: -.01em; }
.flow-tool__name--sm { color: #8a500c; }
.flow-tool__name--cs { color: #14161B; }
.flow-tool__name--ag { color: #241B48; }
/* The Hub's tools in white, straight on its black, centred. */
.flow-hub--tools { text-align: center; }
.flow-hub--tools .flow-hub__role { text-align: center; }
.flow-tools a { justify-content: center; height: 40px; padding: 0 10px; background: transparent; border-radius: 0; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.flow-tools li:first-child a { box-shadow: none; }
.flow-tools a:hover, .flow-tools a:focus-visible { transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); background: rgba(215, 255, 60, .08); }
.flow-tool__logo--bp { height: 12px; }
.flow-tool__logo--cep { height: 16px; }
.flow-tool__mark { height: 18px; width: auto; }
.flow-tool__mark--dot { height: 15px; }
.flow-tool__name { font-size: .92rem; font-weight: 800; letter-spacing: -.01em; color: #fff; }
/* DataViz's box, centred like the Hub's: the logo and its line in the middle. */
.flow-hub--dataviz .flow-hub__head { justify-content: center; text-align: center; }
.flow-hub--dataviz .flow-hub__name img { margin-left: auto; margin-right: auto; }
/* DataViz in its own brand: the logo white on charcoal over a white page,
   rows like its slide rail, teal on the one at work. */
.flow-hub--dataviz { border-radius: 6px; box-shadow: 0 0 0 1px #1d1d1b, var(--shadow-lg); }
.flow-hub--dataviz .flow-dv__bar { display: block; padding: 16px 16px 14px; background: #1d1d1b; box-shadow: none; text-align: center; }
.flow-hub--dataviz .flow-dv__bar .flow-hub__role { color: rgba(255, 255, 255, .6); }
.flow-hub--dataviz .flow-hub__steps li { background: #f3f5f7; box-shadow: inset 0 0 0 1px #e3e6e9; border-radius: 2px; }
.flow-hub--dataviz .flow-hub__steps li.is-lit { background: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); color: #fff; }
.flow-hub--dataviz .flow-hub__steps li.is-lit .ico { color: #fff; }

/* The Hub: each tool on its own dark row, as Connect's steps are, its white
   logo centred, and the Hub's Volt lighting each one in turn. */
.site .flow-tools { gap: 6px; }
.flow-tools a { height: 40px; background: #141414; box-shadow: inset 0 0 0 1px #262626; border-radius: 3px; transition: background-color .45s var(--ease), box-shadow .45s var(--ease); }
.flow-tools li:first-child a { box-shadow: inset 0 0 0 1px #262626; }
.flow-tools li.is-lit a, .flow-tools a:hover, .flow-tools a:focus-visible { background: #181a10; box-shadow: inset 0 0 0 1px #D7FF3C, 0 0 14px rgba(215, 255, 60, .14); }
.flow-hub--dataviz .flow-hub__steps li.is-lit .ai-mark { padding: 2px; border-radius: 50%; background: #fff; }

/* ---------- The flow's boxes, option B (Nathan, 10 Oct): as the apps look ----------
   Connect and DataViz headed the same way, the logo alone, the same size and
   centred. DataViz as its real screen: white navbar, grey page, white tiles,
   teal on the active one. The Hub as its own home screen: a launcher. */
.flow-box__head { margin: -6px -22px 14px; padding: 6px 0 16px; text-align: center; }
.flow-box__logo { display: block; height: 24px; width: auto; margin: 0 auto; }
.flow-hub--connect .flow-box__head { box-shadow: inset 0 -1px 0 #262626; }
.flow-hub--connect .flow-hub__steps { margin-top: 0; }

.flow-hub--dataviz { padding: 0; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); }
.flow-hub--dataviz .flow-box__head { margin: 0; padding: 20px 16px; background: #fff; box-shadow: inset 0 -1px 0 #dedfe1; }
.flow-hub--dataviz .flow-hub__steps { margin: 0; padding: 12px; background: #f3f5f7; gap: 6px; }
.flow-hub--dataviz .flow-hub__steps li { background: #fff; box-shadow: 0 0 0 1px #e3e6e9; border-radius: 1px; color: var(--ink); }
.flow-hub--dataviz .flow-hub__steps li.is-lit { background: var(--teal); box-shadow: 0 0 0 1px var(--teal); color: #fff; }

.flow-hub--tools { padding: 0; overflow: hidden; border-radius: 6px; background: #f2f4ee; color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow-lg); text-align: left; }
.flow-hubbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: #0a0a0a; }
.flow-hubbar a { color: #fff; text-decoration: none; font-size: .82rem; }
.flow-hubbar .tm-hublogo { color: #fff; }
.flow-hubbar .tm-hublogo svg { fill: #D7FF3C; }
.flow-hubbar__by { font-size: .68rem; color: #bdbdbd; white-space: nowrap; }
.flow-hubbar__by b { color: #fff; }
.site .flow-launcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 12px; list-style: none; }
.flow-launcher a { display: grid; justify-items: center; align-content: start; gap: 6px; height: 100%; padding: 10px 4px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px #e6e8ea; color: var(--ink); text-decoration: none; text-align: center; transition: transform .25s var(--spring), box-shadow .25s var(--ease); }
.flow-launcher a:hover, .flow-launcher a:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px #e6e8ea, var(--shadow); }
.flow-launcher img { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.flow-launcher b { font-size: .7rem; font-weight: 800; line-height: 1.2; }

/* The stack (Connect and DataViz pages), in the flow's option B looks:
   logos alone and centred, Connect dark with its five lamps. */
.stack__layer--connect, .stack__layer--app, .stack__layer--hub { display: block; text-align: center; }
.stack__logo--center { display: block; height: 22px; width: auto; margin: 0 auto 8px; }
.stack__logo--center.stack__logo--dataviz { height: 20px; }
.stack__layer--connect { background: #0f0f0f; box-shadow: 0 0 0 1px #2e2e2e, 0 24px 60px -24px rgba(0, 0, 0, .7); }
.stack__lamps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.stack__lamps span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 3px; background: #171717; box-shadow: inset 0 0 0 1px #2a2a2a; font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .82); }
.stack__lamps i { width: 7px; height: 7px; border-radius: 50%; background: #2fae7a; }
.stack__lamps .is-lit { box-shadow: inset 0 0 0 1px #f0bb32; background: #1e1b14; }
.stack__lamps .is-lit i { background: #f0bb32; box-shadow: 0 0 8px rgba(240, 187, 50, .6); }
.stack__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stack__layer--hub { padding: 0; overflow: hidden; background: #f2f4ee; color: var(--ink); }
.stack__hubbar { display: block; padding: 10px 12px; background: #0a0a0a; font-size: .78rem; }
.stack__hubbar .tm-hublogo { color: #fff; }
.stack__hubbar .tm-hublogo svg { fill: #D7FF3C; }
.stack__apps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 12px 10px; }
.stack__apps img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
@media (max-width: 520px) { .stack__row { grid-template-columns: 1fr; } }
.site-footer__products { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; margin: 0; padding: 0; }
.site-footer__products a { color: var(--ink) !important; text-decoration: none !important; font-weight: 800; }
.site-footer__products a:hover { color: var(--teal) !important; }
.stack__layer > img.stack__logo--center { grid-row: auto; width: auto; height: 24px; }
.stack__layer > img.stack__logo--center.stack__logo--dataviz { height: 22px; }

/* ---------- KPI tiles as DataViz draws them since 9 Oct 2026 ----------
   A grey box, a label in sentence case, the figure in full, the change in
   green or red against the previous figure, and a teal trend to the tile's
   edges. No status pills and no tinted tile: a tile out of line gets a line
   along its top and the reason under the change (KpiNumber.tsx, flag.ts). */
.kpi { min-height: 9.6em; padding: .95em 1.25em 0; background: #f3f5f7; border-radius: 1px; }
.kpi.is-alert { background: #f3f5f7; }
.kpi--danger { box-shadow: inset 0 3px 0 #dc3545; }
.kpi__label { font-size: .82em; font-weight: 600; letter-spacing: 0; text-transform: none; color: #484847; }
.kpi__value { margin-top: .2em; font-size: 1.62em; font-weight: 700; letter-spacing: -.01em; }
.kpi__of { margin-left: .5em; font-size: .52em; font-weight: 500; color: #5d5e5d; letter-spacing: 0; }
.kpi__delta { margin-top: .15em; font-size: .82em; font-weight: 500; color: #5d5e5d; }
.kpi__delta b { font-weight: 600; }
.kpi__delta.is-good b { color: #28a745; }
.kpi__delta.is-bad b { color: #b51f2e; }
.kpi__flag { display: flex; align-items: center; gap: .4em; margin-top: .3em; font-size: .76em; font-weight: 600; color: #b51f2e; white-space: nowrap; }
.kpi__flag .ico { width: 1.15em; height: 1.15em; color: #dc3545; }
.kpi__spark { width: calc(100% + 2.5em); margin: auto -1.25em 0; height: 2.9em; }
.kpi__spark .area { fill: rgba(46, 118, 124, .1); }
.kpi__spark .line { stroke: #2e767c; stroke-width: 1.5; }
.kpi__bar { position: relative; height: 4px; margin: auto 0 1.1em; background: #dedfe1; }
.kpi__bar em { position: absolute; top: 0; bottom: 0; left: 0; width: auto; background: #2e767c; transform-origin: 0 50%; }
.kpi__bar em.is-over { background: #dc3545; }
.kpi__bar i { position: absolute; top: -4px; bottom: auto; width: 2px; height: 12px; margin-left: -1px; background: #1d1d1b; }
.kpi__sub { margin-top: .15em; font-size: .78em; color: #5d5e5d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__chip, .kpi__kebab, .kpi__tgt, .kpi__meta { display: none; }

/* The Potent star's colours, from DataViz's potent-star.css: purple ready,
   blue thinking, green done; the eyes always dark. */
.potent-star { --star-lit: #7a59e6; --star-top: #a68cf5; --star-dim: #cdbff9; --star-scan: #4a2fb0; display: block; overflow: visible; }
.potent-star[data-status='thinking'] { --star-lit: #2a7fdc; --star-top: #7bb8f5; --star-dim: #c3dcf8; --star-scan: #14519a; }
.potent-star[data-status='done'] { --star-lit: #1f9e5a; --star-top: #5fd08f; --star-dim: #bde5cd; --star-scan: #0f6b3a; }
.potent-star .ps-lit { fill: var(--star-lit); }
.potent-star .ps-top { fill: var(--star-top); }
.potent-star .ps-dim { fill: var(--star-dim); }
.potent-star .ps-scan { fill: var(--star-scan); }
.potent-star .ps-eye { fill: #1c1733; }

/* Ask as DataViz draws it since 5 Oct: potent.ai's team along the top, the
   Analyst's block star answering, what it read, the purple bars, Worth
   knowing and the two follow-ups. */
.ask-team { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .9em; padding-bottom: .8em; border-bottom: 1px solid #ece6ff; }
.ask-team span { display: inline-flex; align-items: center; gap: .4em; font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #9a98a6; }
.ask-team span.is-on { color: #4a2fb0; }
.ask-team span:not(.is-on) .potent-star { opacity: .55; filter: saturate(.6); }
.ask-team i { display: block; }
.ask-mode { margin-left: auto; display: inline-flex; padding: .2em; border-radius: 999px; background: #f6f3ff; font-style: normal; font-size: .78em; font-weight: 600; color: #6b6880; }
.ask-mode, .ask-mode b { gap: 0; }
.ask-mode b, .ask-mode { white-space: nowrap; }
.ask-mode b { padding: .3em .8em; border-radius: 999px; background: #fff; color: #4a2fb0; box-shadow: 0 1px 2px rgba(42, 30, 90, .12); font-weight: 700; margin-right: .2em; }
.ask-mode { padding-right: .8em; align-items: center; }
.ask-q span { background: #f6f3ff; border-radius: 12px 12px 2px 12px; }
.ask-bot { width: 3.4em; height: auto; margin-top: .1em; }
.ask-bot .potent-star { width: 100%; height: auto; }
.ask-think span { font-size: .95em; }
.ask-read { display: inline-flex; align-items: center; gap: .35em; margin-bottom: .45em; font-size: .82em; font-weight: 600; color: #1f9e5a; }
.ask-read .ico { width: 1.1em; height: 1.1em; }
.ask-bars i { height: 10px; border-radius: 5px; background: #ece6ff; }
.ask-bars em, .ask-bars div:first-child em { border-radius: 5px; background: linear-gradient(90deg, #8f6fef, #5d3fd3); }
.ask-bars div:not(:first-child) em { opacity: .55; }
.ask-wk { border-radius: 12px; background: #f6f3ff; }
.ask-wk span { color: #5d3fd3; }
.ask-next { margin-left: 4.4em; display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1.1em; }
.ask-chip { padding: .35em .9em; border: 1px solid #cdbff9; border-radius: 999px; background: #fff; font-size: .88em; font-weight: 600; color: #4a2fb0; }
.ask-src { display: inline-flex; align-items: center; gap: .2em; font-size: .88em; font-weight: 600; color: #6b6880; }
.ask-src .ico { width: 1.1em; height: 1.1em; }
.ask-by img { display: none; }
.ask-read, .ask-next { transition: opacity .5s var(--ease), transform .6s var(--ease-out); }
.ask-next { transition-delay: .45s; }
.ask-box.is-asking .ask-read, .ask-box.is-asking .ask-next { opacity: 0; transform: translateY(.5em); transition-delay: 0s; }
@media (max-width: 599px) { .ask-mode { display: none; } }
.kpi--danger { box-shadow: inset 0 3px 0 #dc3545; }
.show-card__stage .kpi--danger { box-shadow: inset 0 3px 0 #dc3545, var(--shadow); }
.app[data-scene="kpis"] .kpi--danger { box-shadow: inset 0 3px 0 #dc3545, 0 10px 24px -14px rgba(16, 24, 32, .35); }
.ask-bot { width: 4em; }
/* On a phone the two tiles shown are Revenue and the CPA that's out of line. */
@media (max-width: 720px) {
  .app__kpis .kpi:nth-child(3) { display: block; }
  .app__kpis .kpi:nth-child(2), .app__kpis .kpi:nth-child(4) { display: none; }
  .story__screen .app[data-scene="kpis"] { --ox: 50%; }
}

/* Chart cards as DataViz draws them since 9 Oct (the ledger): the title on
   its own band over a fine rule, the plot inside 16px, and the forecast a
   reader chose shown as a chip, "Forecast to month end". */
.chart { padding: 0; background: #f3f5f7; }
.chart__head { margin: 0; padding: .55em .8em .55em 1.25em; border-bottom: 1px solid #dedfe1; }
.chart__title { font-size: 1.1em; color: #484847; }
.chart__title .rc { color: #1d1d1b; border-bottom-color: #9fc3c6; }
.chart > .chart__svg { display: block; width: calc(100% - 2.5em); margin: .9em 1.25em 0; }
.chart > .chart__legend, .chart > .chart__note { margin-left: 1.25em; margin-right: 1.25em; }
.chart > .chart__note { margin-bottom: 1em; }
.chart > .chart__legend:last-child { margin-bottom: 1em; }
.chart__flag { display: inline-flex; align-items: center; gap: .35em; padding: .15em .55em; border-radius: 1px; background: #c0d6d8; color: #1d4c4f; font-weight: 600; font-size: .8em; }
.chart__flag .ico { width: 1.15em; height: 1.15em; }
.chart__note { padding: .65em .9em; border-left: 2px solid var(--teal); background: #c0d6d8; color: #1d4c4f; }

/* Alerts as DataViz raises them: a rule, not a guess. A white row with a
   fine border and a dot, the rule's name, what broke it, and Mark as seen. */
.alert__card { padding: 14px 16px; }
.alert__row { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: start; }
.alert__row .alert__sev { position: static; width: 8px; height: 8px; margin-top: .45em; border-radius: 50%; background: #dc3545; transform-origin: 50% 50%; }
.alert__row .alert__t { margin-top: 0; font-size: .98rem; }
.alert__row .alert__b { margin-top: 4px; font-size: .84rem; line-height: 1.45; }
.alert__row .alert__eb { justify-content: flex-start; gap: .35em; margin-top: 8px; font-size: .74rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #888989; }
.alert__row .alert__eb span { font-weight: 700; color: #b51f2e; }
.alert__row .alert__eb em { font-size: inherit; }
.alert__btns { margin-left: 20px; }
.js [data-heroes] .alert__row .alert__sev { transform: scale(0); }
.js [data-heroes] .is-play .alert__row .alert__sev { transform: none; }

/* Connect's box and stack lamps as the app draws them: neutral blacks, a
   7px lamp with a faint ring before its label, no icons, 8px corners, and
   the lit stage outlined in brass rather than filled. */
.flow-hub--connect { border-radius: 12px; }
.flow-hub--connect .flow-hub__steps li { gap: 10px; border-radius: 8px; background: #171717; box-shadow: inset 0 0 0 1px #292929; color: #f0f0f0; }
.flow-hub--connect .flow-hub__steps li.is-lit { background: #171717; box-shadow: inset 0 0 0 1px #e6a433; color: #f0f0f0; }
.flow-hub--connect .flow-lamp { width: 7px; height: 7px; margin-left: 0; background: #38b286; box-shadow: 0 0 0 3px rgba(56, 178, 134, .12); }
.flow-hub--connect .flow-hub__steps li.is-lit .flow-lamp { background: #e6a433; box-shadow: 0 0 0 3px rgba(230, 164, 51, .12); }
.stack__lamps span { border-radius: 8px; background: #171717; box-shadow: inset 0 0 0 1px #292929; color: #f0f0f0; }
.stack__lamps i { background: #38b286; box-shadow: 0 0 0 3px rgba(56, 178, 134, .12); }
.stack__lamps .is-lit { background: #171717; box-shadow: inset 0 0 0 1px #e6a433; }
.stack__lamps .is-lit i { background: #e6a433; box-shadow: 0 0 0 3px rgba(230, 164, 51, .12); }

/* DataViz's Home, drawn from the app (features/home, 3 Oct 2026): the teal
   and black banner with the delta bleeding off it, Platform health in its
   colour, the folders, and Ask's question box with the Analyst ready. */
.dvhome { overflow: hidden; border-radius: var(--radius-lg); background: #fff; box-shadow: 0 0 0 1px #dedfe1, var(--shadow-lg); font-size: 13px; }
.dvhome__bar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; background: #fff; border-bottom: 1px solid #dedfe1; }
.dvhome__bar .dv { font-size: 15px; }
.dvhome__bar span { display: flex; gap: 14px; color: #484847; }
.dvhome__bar .ico { width: 18px; height: 18px; }
.dvhome__hero { position: relative; overflow: hidden; padding: 26px 24px 24px; color: #fff; background: radial-gradient(120% 140% at 85% 10%, #2e767c 0%, #174245 38%, #1d1d1b 78%); }
.dvhome__mark { position: absolute; right: -34px; bottom: -30px; width: 190px; opacity: .1; }
.dvhome__mark svg { display: block; width: 100%; fill: #fff; }
.dvhome__eb { position: relative; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .7); }
.dvhome__hi { position: relative; margin-top: 8px; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.dvhome__sub { position: relative; margin-top: 6px; color: rgba(255, 255, 255, .8); }
.dvhome__btn { position: relative; display: inline-block; margin-top: 16px; padding: 8px 14px; border-radius: 1px; background: #fff; color: #1d1d1b; font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.dvhome__body { display: grid; gap: 14px; padding: 18px 20px 20px; }
.dvhome__health { display: flex; align-items: center; gap: 14px; }
.dvhome__delta { flex: none; width: 46px; }
.dvhome__delta svg { display: block; width: 100%; fill: #28a745; }
.js .dvhome__delta svg { animation: dvhealth 4s ease-in-out infinite alternate; }
@keyframes dvhealth { from { filter: hue-rotate(0deg) brightness(1); } to { filter: hue-rotate(-25deg) brightness(1.15); } }
.dvhome__health small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #888989; }
.dvhome__health b { display: block; margin-top: 2px; font-size: 15px; color: #1d1d1b; }
.dvhome__health em { display: block; font-style: normal; color: #6d6e6e; }
.dvhome__news { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid #dedfe1; border-bottom: 1px solid #dedfe1; }
.dvhome__news b { font-weight: 600; }
.dvhome__news span { flex: none; font-weight: 700; color: #2e767c; }
.dvhome__folders { display: grid; grid-template-columns: repeat(2, minmax(0, 150px)); gap: 14px; }
.dvfolder { position: relative; padding: 72px 12px 10px; background: #e4eff0; clip-path: polygon(0 10px, 38% 10px, calc(38% + 9px) 0, 100% 0, 100% 100%, 0 100%); }
.dvfolder::before { content: ""; position: absolute; left: 0; top: 0; width: 42%; height: 12px; background: #e4eff0; }
.dvfolder__sheet { position: absolute; left: 10px; right: 10px; top: 14px; display: block; padding: 6px 8px; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 32, .18); font-style: normal; font-size: 10px; font-weight: 700; line-height: 1.25; color: #1d1d1b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .3s var(--ease-out); }
.dvfolder:hover .dvfolder__sheet { transform: translateY(-3px); }
.dvfolder__sheet small, .dvfolder__sheet em { display: block; font-size: 9px; font-weight: 500; font-style: normal; color: #6d6e6e; }
.dvfolder__sheet small { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #2e767c; }
.dvfolder b { position: relative; z-index: 1; font-size: 12px; }
.dvfolder > span:last-child { position: relative; z-index: 1; margin-left: 6px; font-size: 11px; color: #484847; }
.dvfolder__new { position: absolute; z-index: 2; left: 8px; top: 0; padding: 0 6px; font-size: 9px; font-weight: 700; line-height: 10px; color: #fff; background: #2e767c; }
.dvhome__ask { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; border: 1px solid #cdbff9; border-radius: 14px; background: #fff; box-shadow: 0 2px 10px -6px rgba(93, 63, 211, .35); }
.dvhome__ask p { flex: 1; color: #888989; }
.dvhome__ask i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #8f6fef, #5d3fd3); color: #fff; }
.dvhome__ask .ico { width: 16px; height: 16px; }
.dvhome__starters { display: flex; flex-wrap: wrap; gap: 6px; }
.dvhome__starters span { padding: 5px 10px; border-radius: 999px; background: #f6f3ff; color: #4a2fb0; font-size: 11px; font-weight: 600; }
@media (max-width: 420px) { .dvhome { font-size: 12px; } .dvhome__hi { font-size: 23px; } .dvhome__news b { font-weight: 500; } }
@media (prefers-reduced-motion: reduce) { .js .dvhome__delta svg { animation: none; } }
.dvhome__folders { grid-template-columns: repeat(2, minmax(0, 172px)); }
.dvfolder b, .dvfolder > span:last-child { white-space: nowrap; }

/* The way in for clients: "Log in to DataViz", solid, on every page's header.
   On a phone the words fold away and the wordmark and arrow stay. */
.header-login { gap: .45em; white-space: nowrap; }
.header-login .dv { font-size: .92em; }
@media (max-width: 480px) { .header-login__pre { display: none; } }
/* Below 1240 the nav is hidden, so the login and menu go back to the right. */
@media (max-width: 1239px) { .site-nav + .site-header__actions { margin-left: auto; } }

/* Creative Signal as its own app draws itself (CreativeSignal brand.css):
   white panels with fine rules, a black feature card with a yellow word,
   the group's purple as its accent, teal for what is working. */
.tool-dialog--creative-signal { --tool: #712B70; --tool-ground: #f3f3f2; }
.tm-cs { display: grid; gap: 10px; }
.tm-cs__feature { padding: 16px 18px; border-radius: 9px; background: #1d1d1b; color: #fff; }
.tm-cs__feature small, .tm-cs__brief small { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #b2aaa2; }
.tm-cs__feature b { display: block; margin-top: 8px; font-size: 18px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.tm-cs__feature em { font-style: normal; color: #f0bb32; }
.tm-cs__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #dddddb; border-radius: 8px; background: #fff; }
.tm-cs__metrics div { padding: 10px 12px; border-right: 1px solid #dddddb; }
.tm-cs__metrics div:last-child { border-right: 0; }
.tm-cs__metrics span { display: block; font-size: 10px; color: #656563; }
.tm-cs__metrics b { display: block; margin-top: 3px; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }
.tm-cs__list { padding: 4px 14px 10px; border: 1px solid #dddddb; border-radius: 8px; background: #fff; }
.tm-cs__list > div { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid #dddddb; }
.tm-cs__list > div span { font-size: 9.5px; color: #712b70; }
.tm-cs__list > div b { font-size: 12px; font-weight: 500; }
.tm-cs__list > div em { font-style: normal; font-size: 11px; font-weight: 600; color: #2c757c; white-space: nowrap; }
.tm-cs__brief { padding: 16px; border: 1px solid #dddddb; border-radius: 8px; background: #fff; }
.tm-cs__brief small { color: #712b70; }
.tm-cs__brief b { display: block; margin: 6px 0 8px; font-size: 15px; font-weight: 600; }
.tm-cs__brief ul { margin: 0; padding-left: 18px; line-height: 1.6; list-style: disc; }
.tm-cs__est { border: 1px solid #dddddb; border-radius: 8px; background: #fff; }
.tm-cs__est div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #dddddb; font-size: 12px; }
.tm-cs__est div:last-child { border-bottom: 0; }
.tm-cs__est .is-total { background: #f2e9f2; color: #712b70; font-weight: 600; }
.tool-dialog--creative-signal .tm-logo { height: 34px; width: auto; max-width: 100%; }
/* On a phone the step's words wait just under the pinned drawing while
   their step is in play, rather than sliding up underneath it. */
@media (max-width: 1023px) {
  .story__step-inner { position: sticky; top: calc(var(--header-h) + 50vh - 8px); }
}
/* On the dark product hero the client's way in sits under the buttons. */
.hero__note--light { margin-top: 18px; color: rgba(255, 255, 255, .7); }
.hero__note--light a { display: inline-flex; align-items: center; gap: .35em; color: #fff; }
.hero__note--light a .dv { font-size: .95em; }
/* The Hub's menu button is a <button>, which ".site button { font: inherit }"
   would otherwise make bigger and lighter than the links beside it. */
.site .site-nav__drop > button.site-nav__link { font-size: .76rem; font-weight: 700; letter-spacing: .06em; line-height: inherit; }
.page-404 { min-height: 60vh; display: grid; align-items: center; }

/* Wide desktops: let the page use the screen instead of a 1240px column. */
@media (min-width: 1440px) { :root { --wrap: 1720px; --gutter: 56px; } }