/**
 * Quantilise - marketing home page (index.html only).
 *
 * privacy.html and terms.html keep styles.css, the light drafting-paper sheet:
 * documents stay on paper. This page is the dark "journey" built around the
 * liquid canvas in journey.js.
 *
 * Colour families, kept strictly apart, same discipline as the app:
 *   ground + ink     the dark deck the page is set on
 *   --accent         the product itself (links, buttons, focus, the liquid)
 *   --subject        "your scheme" and nothing else. Never decoration.
 *   --series-N       sector only. A sector's colour means the same thing here
 *                    as it does in the dashboard.
 */

/* IBM Plex, self-hosted (SIL Open Font License, see assets/fonts). Latin subset only. */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2'); }
/* IBM Plex Sans is a variable font: one file covers 400 to 600. */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('assets/fonts/ibm-plex-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/fonts/ibm-plex-sans-condensed-600-latin.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/fonts/ibm-plex-sans-condensed-700-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* The ground: the app's deck teal (#17434a), taken down towards black. */
  --bg: #061316;
  --bg-2: #0a1d21;
  --deck: #17434a;
  --glass: rgba(14, 38, 43, 0.66);
  --glass-2: rgba(20, 52, 58, 0.5);

  --ink: #eaf0ed;
  --ink-2: #a3b5b0;
  --ink-3: #7f948f;
  --border: rgba(234, 240, 237, 0.1);
  --rule: rgba(234, 240, 237, 0.2);
  --wash: rgba(234, 240, 237, 0.05);

  --accent: #56c2c6;
  --accent-2: #2f9aa1;
  --accent-ink: #061316;
  --subject: #d7e86e;
  --mark-ring: #56c2c6;

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;

  --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --page-max: 1320px;
  --gutter: clamp(1rem, 4vw, 3.5rem);

  --s-1: 0.8125rem;
  --s0: 1.0625rem;
  --s1: 1.25rem;
  --s2: 1.75rem;
  --s3: clamp(2rem, 3.6vw, 3rem);
  --s5: clamp(3rem, 9vw, 7.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--s0);
  line-height: 1.6;
  color: var(--ink);
  background:
    radial-gradient(120vw 80vh at 80% -10%, rgba(23, 67, 74, 0.55), transparent 60%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--cond);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--s5); letter-spacing: -0.025em; font-weight: 700; }
h2 { font-size: var(--s3); letter-spacing: -0.015em; }
h3 { font-size: var(--s0); font-family: var(--sans); font-weight: 600; line-height: 1.35; letter-spacing: 0; }

p { margin: 0; }
a { color: var(--accent); text-underline-offset: 3px; }

:where(a, button, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
svg text { font-family: var(--mono); font-variant-numeric: tabular-nums; }

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

.shell { width: 100%; max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }

main, .masthead, .colophon { position: relative; z-index: 1; }

/* ------------------------------------------------------------ the canvas */

/* One canvas behind the whole journey. journey.js owns its opacity; without
   it (no JS, no WebGL2, reduced motion) it stays hidden and the static
   stand-ins in each act are shown instead. */
.liquid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  display: block;
}
.liquid-on .liquid { opacity: var(--liquid-o, 1); }

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  transition: background-color .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.masthead.is-scrolled {
  background: rgba(6, 19, 22, 0.72);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--border);
}
.masthead__in { display: flex; align-items: center; gap: 1.5rem; min-height: 68px; }
.wordmark {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: var(--cond); font-size: 1.3rem; font-weight: 600; letter-spacing: -0.012em;
  color: var(--ink); text-decoration: none; margin-right: auto;
}
.wordmark svg { flex: none; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a:not(.btn) {
  color: var(--ink-2); text-decoration: none; font-size: var(--s-1); letter-spacing: 0.01em;
  position: relative; padding-block: 0.3rem;
}
.nav a:not(.btn):hover, .nav a[aria-current="true"] { color: var(--ink); }
.nav a[aria-current="true"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--accent); border-radius: 2px;
}
.nav-toggle { display: none; }

/* ------------------------------------------------------------------ buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.72rem 1.25rem;
  font-family: var(--sans); font-size: var(--s-1); font-weight: 600;
  border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.btn--lg { padding: 0.95rem 1.6rem; font-size: var(--s0); border-radius: 12px; }
.btn--primary {
  background: linear-gradient(180deg, #6fd3d6, var(--accent) 55%, #3eaeb3);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px rgba(86, 194, 198, .35), 0 8px 28px -8px rgba(86, 194, 198, .55), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(86, 194, 198, .5), 0 12px 34px -8px rgba(86, 194, 198, .7), inset 0 1px 0 rgba(255,255,255,.45); }
.btn--ghost { border-color: var(--rule); color: var(--ink); background: rgba(234, 240, 237, 0.03); backdrop-filter: blur(6px); }
.btn--ghost:hover { background: var(--wash); border-color: rgba(234, 240, 237, .35); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: var(--s-1); letter-spacing: 0.04em;
  color: var(--accent); text-transform: uppercase;
}
.eyebrow__n {
  display: inline-grid; place-items: center;
  min-width: 2.1rem; height: 1.45rem; padding: 0 0.4rem;
  border: 1px solid rgba(86, 194, 198, .45); border-radius: 999px;
  font-size: 0.72rem; color: var(--ink);
}

/* -------------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: 6.5rem 3rem;
}
/* Keeps the headline legible over the stream of figures. */
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 60% at 22% 50%, rgba(6, 19, 22, .8), transparent 75%);
}
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero .eyebrow { margin-bottom: 1.5rem; }
.hero h1 { max-width: 12ch; font-size: clamp(3rem, 6.4vw, 6.4rem); }
.hero__dash { color: var(--ink-3); font-weight: 600; }
/* The product's own teal, catching light: the one gradient headline. */
.hero__q {
  background: linear-gradient(100deg, #b9f0ee 0%, var(--accent) 38%, #2b8f96 70%, #9fe5e3 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 9s ease-in-out infinite alternate;
}
@keyframes sheen { from { background-position: 0% 0; } to { background-position: 100% 0; } }
.hero__sub { margin-top: 1.75rem; font-size: clamp(1.1rem, 1.7vw, 1.4rem); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.5rem; }

.cue {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.cue i { width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); position: relative; overflow: hidden; }
.cue i::after {
  content: ''; position: absolute; left: -1px; width: 3px; height: 12px; border-radius: 2px;
  background: var(--accent); animation: drip 2.2s cubic-bezier(.6,0,.3,1) infinite;
}
@keyframes drip { from { top: -12px; } to { top: 46px; } }

/* The hero's summary of the journey: dashboard, export, slides. journey.js
   pours figures into it from the top corners of this column. */
.flow { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.flow__dash {
  padding: 1rem 1.1rem 0.8rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(22, 56, 62, .55), rgba(10, 29, 33, .7));
  border: 1px solid rgba(234, 240, 237, .1);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(0,0,0,.85), 0 0 60px -30px rgba(86,194,198,.35);
}
.flow__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.flow__title { font-family: var(--cond); font-weight: 600; font-size: 1rem; }
.flow__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.7rem; }
.flow__kpis > div { display: grid; padding: 0.45rem 0.6rem; border-radius: 10px; background: rgba(234,240,237,.035); border: 1px solid var(--border); }
.flow__v { font-size: 1.15rem; font-weight: 500; }
.flow__v--subject { color: var(--subject); }
.flow__dash svg { display: block; width: 100%; height: auto; margin-top: 0.4rem; overflow: visible; }
.flow__export {
  position: relative; display: flex; justify-content: center;
  height: 3.2rem; margin: 0 auto;
}
.flow__export::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(var(--accent), rgba(86,194,198,.1));
}
.flow__export span {
  position: relative; align-self: center;
  padding: 0.2rem 0.65rem; border-radius: 999px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: var(--bg); border: 1px solid rgba(86,194,198,.4);
}
.flow__slides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; }
/* A PowerPoint slide, small: the deck teal ground, a title bar, a number. */
.thumb {
  position: relative; aspect-ratio: 16 / 9;
  padding: 0.45rem 0.5rem 0.4rem;
  border-radius: 8px;
  background: var(--deck);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9);
  display: flex; flex-direction: column; gap: 0.3rem;
  animation: thumbGlow 6s ease-in-out infinite;
}
.thumb:nth-child(2) { animation-delay: 2s; }
.thumb:nth-child(3) { animation-delay: 4s; }
.thumb__bar { height: 5px; width: 55%; border-radius: 3px; background: rgba(255,255,255,.75); }
.thumb svg { flex: 1; width: 100%; min-height: 0; }
.thumb__n { position: absolute; right: 0.45rem; bottom: 0.25rem; font-family: var(--mono); font-size: 0.58rem; color: rgba(255,255,255,.55); }
@keyframes thumbGlow {
  0%, 70%, 100% { box-shadow: 0 18px 40px -22px rgba(0,0,0,.9); }
  80% { box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(86,194,198,.55), 0 0 26px rgba(86,194,198,.3); }
}
.flow .cue { margin-top: 1.4rem; align-self: center; }

/* --------------------------------------------------------------- built for */

.builtfor {
  position: relative;
  display: flex; align-items: center; gap: 2rem;
  padding: 1.6rem 0;
  border-block: 1px solid var(--border);
  background: rgba(6, 19, 22, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.builtfor__label {
  flex: none; padding-left: var(--gutter);
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.marquee {
  display: flex; overflow: hidden; flex: 1; min-width: 0;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logos {
  display: flex; flex: none; gap: 3.5rem; margin: 0; padding: 0 1.75rem; list-style: none;
  animation: marquee 38s linear infinite;
}
.logos li {
  display: inline-flex; align-items: center; gap: 0.7rem; white-space: nowrap;
  font-family: var(--cond); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.005em;
  color: rgba(234, 240, 237, 0.62);
}
.logos li::before {
  content: ''; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg);
  border: 1.5px solid var(--accent); opacity: .8;
}
.logos .logos__std { font-family: var(--mono); font-size: 1rem; font-weight: 500; color: rgba(234, 240, 237, 0.5); }
.logos .logos__std::before { border-radius: 50%; transform: none; border-color: var(--ink-3); }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ------------------------------------------------------------------- acts */

/* Each act is a tall section whose stage pins to the viewport while the
   figures behind it change state. The stage shows copy on the left and the
   act's destination (nothing, the template, the dashboard) on the right. */
.act { position: relative; }
.act[id] { scroll-margin-top: 0; }
.act__in {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}
.act__copy { position: relative; max-width: 34rem; }
.act__copy h2 { margin-top: 1.1rem; }
.act__lede { margin-top: 1.1rem; font-size: var(--s1); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }

.points { list-style: none; margin: 1.8rem 0 0; padding: 0; }
.points li {
  position: relative;
  padding: 0.85rem 0 0.85rem 1.4rem;
  border-top: 1px solid var(--border);
}
.points li:last-child { border-bottom: 1px solid var(--border); }
.points li::before {
  content: ''; position: absolute; left: 0; top: 1.25rem; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.points p { margin-top: 0.2rem; color: var(--ink-2); font-size: 0.95rem; line-height: 1.55; }

.act__visual { position: relative; min-width: 0; }
.act__visual--still { aspect-ratio: 1; }
.scatter { width: 100%; height: 100%; fill: var(--ink-2); }
.liquid-on .act__visual--still { visibility: hidden; }

.caption { font-size: 0.75rem; color: var(--ink-3); margin-top: 0.9rem; }

@media (min-width: 900px) {
  .act { height: 220vh; }
  .act--problem { height: 200vh; }
  .act__stage {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    display: flex; align-items: center;
    padding-top: 68px;
  }
  /* A scrim behind the copy, so text always wins over the liquid. */
  .act__stage::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(6, 19, 22, .9) 0%, rgba(6, 19, 22, .72) 30%, rgba(6, 19, 22, 0) 52%);
  }
  .act__in { position: relative; }
  @media (max-height: 820px) {
    .points li { padding-block: 0.6rem; }
    .points p { font-size: 0.88rem; }
    .act__lede { font-size: var(--s0); }
    .act__copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  }
}

/* Copy rises in once as each act arrives. Only with JS, so nothing is ever
   left invisible without it. */
@media (prefers-reduced-motion: no-preference) {
  .js .act__copy > * { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .js .act.is-in .act__copy > * { opacity: 1; transform: none; }
  .js .act.is-in .act__copy > *:nth-child(2) { transition-delay: .08s; }
  .js .act.is-in .act__copy > *:nth-child(3) { transition-delay: .16s; }
  .js .act.is-in .act__copy > *:nth-child(4) { transition-delay: .24s; }
}

/* ------------------------------------------------------- the template sheet */

.sheet {
  background: linear-gradient(180deg, rgba(22, 56, 62, .62), rgba(10, 29, 33, .78));
  border: 1px solid rgba(234, 240, 237, .1);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 80px -40px rgba(0,0,0,.85);
  overflow: hidden;
}
.sheet__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 0.75rem; color: var(--ink-3);
}
.sheet__file::before {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 0.55rem; border-radius: 2px;
  background: var(--accent); vertical-align: 0;
}
.sheet__tab {
  padding: 0.15rem 0.6rem; border-radius: 6px;
  background: rgba(86, 194, 198, .12); color: var(--accent);
}
.sheet__scroll { overflow: hidden; }
.sheet table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 12px; line-height: 1;
  table-layout: auto;
}
.sheet th, .sheet td {
  height: 30px; padding: 0 0.6rem;
  text-align: left; white-space: nowrap;
  border-right: 1px solid rgba(234, 240, 237, .06);
  border-bottom: 1px solid rgba(234, 240, 237, .06);
}
.sheet .num { text-align: right; }
.sheet thead th {
  height: 34px;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .01em;
  color: var(--accent); background: rgba(86, 194, 198, .07);
}
.sheet tbody th {
  width: 2.2rem; text-align: center; font-weight: 400; color: var(--ink-3);
  background: rgba(234, 240, 237, .025); font-size: 11px;
}
.sheet .corner { width: 2.2rem; }
.sheet td { color: var(--ink); }
.sheet .c-check { text-align: center; color: var(--accent); font-weight: 500; }
/* Liquid mode: the Check column lights row by row once the template is full. */
.liquid-on .sheet .c-check { opacity: 0; transition: opacity .35s ease; }
.liquid-on .sheet.is-complete .c-check { opacity: 1; }
.liquid-on .sheet.is-complete tbody tr:nth-child(n) .c-check { transition-delay: calc(var(--i, 0) * 40ms); }

/* With the liquid running, the cells are empty: the figures land in them. */
.liquid-on .sheet td[data-f] { color: transparent; }
/* The figures are drawn on the canvas beneath the sheet, so in liquid mode
   the glass is nearly clear and the figures read at full strength. */
.liquid-on .sheet { background: linear-gradient(180deg, rgba(22, 56, 62, .2), rgba(10, 29, 33, .28)); }
.liquid-on .sheet thead th { background: rgba(6, 19, 22, .55); }

/* --------------------------------------------------------------- dashboard */

.dash {
  background: linear-gradient(180deg, rgba(22, 56, 62, .62), rgba(10, 29, 33, .8));
  border: 1px solid rgba(234, 240, 237, .1);
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 50px 100px -40px rgba(0,0,0,.85), 0 0 80px -30px rgba(86,194,198,.25);
  padding: 1.1rem;
  display: grid; gap: 0.8rem;
}
.dash__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; }
.dash__title { font-family: var(--cond); font-weight: 600; font-size: 1.05rem; margin-right: auto; }
.chip {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-2);
  padding: 0.2rem 0.55rem; border: 1px solid var(--border); border-radius: 999px;
}
.chip--on { color: var(--accent); border-color: rgba(86, 194, 198, .4); background: rgba(86, 194, 198, .08); }

.dash__kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.kpi {
  display: grid; gap: 0.1rem;
  padding: 0.65rem 0.8rem; border-radius: 12px;
  background: rgba(234, 240, 237, .035); border: 1px solid var(--border);
  opacity: var(--kpi, 1);
}
.kpi__k { font-size: 0.68rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.kpi__v { font-size: clamp(1.1rem, 1.7vw, 1.55rem); font-weight: 500; color: var(--ink); line-height: 1.2; }
.kpi__u { font-size: 0.7rem; color: var(--ink-3); }
.kpi--subject { border-color: rgba(215, 232, 110, .4); }
.kpi--subject .kpi__v { color: var(--subject); }

.dash__card {
  margin: 0; padding: 0.75rem 0.85rem; border-radius: 12px;
  background: rgba(234, 240, 237, .03); border: 1px solid var(--border);
}
.dash__h { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-3); margin-bottom: 0.4rem; }
.dash__card svg { display: block; width: 100%; height: auto; overflow: visible; }
.dash__key { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; font-size: 0.7rem; color: var(--ink-3); margin-top: 0.3rem; }
.dash__key span { display: inline-flex; align-items: center; gap: 0.35rem; }
.dash__key i { width: 8px; height: 8px; border-radius: 50%; }
/* Legend swatches as classes, not style attributes, so the CSP can forbid
   inline styles outright. */
.dash__key .sw-1 { background: var(--series-1); }
.dash__key .sw-2 { background: var(--series-2); }
.dash__key .sw-3 { background: var(--series-3); }
.dash__key .sw-4 { background: var(--series-4); }
.dash__key .sw-5 { background: var(--series-5); }
.dash__key b { font-weight: inherit; }
.dash__minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.dash__unit { display: flex; flex-direction: column; }
.dash__big { font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 500; margin-top: auto; }
.dash__small { font-size: 0.72rem; color: var(--ink-3); margin-bottom: auto; }

/* Liquid mode: every dashboard and deck element is drawn by the canvas while
   figures morph into it, then the crisp DOM element takes over on completion. */
.liquid-on [data-dash] [data-slot], .liquid-on [data-dash] [data-subject],
.liquid-on [data-deck] [data-slot] { opacity: 0; transition: opacity .35s ease; }
.liquid-on [data-dash].is-complete [data-slot], .liquid-on [data-dash].is-complete [data-subject],
.liquid-on [data-deck].is-complete [data-slot] { opacity: 1; }
.liquid-on .dash { background: linear-gradient(180deg, rgba(22, 56, 62, .2), rgba(10, 29, 33, .3)); }
.liquid-on .kpi, .liquid-on .dash__card { background: rgba(234, 240, 237, .015); }

/* Completion: a quiet teal hue on the outer border once every figure has
   landed where it belongs. A brief swell, then it settles. */
.sheet, .dash, .vslide { transition: box-shadow .6s ease, border-color .6s ease; }
.sheet.is-complete, .dash.is-complete, .deck.is-complete .vslide {
  border-color: rgba(86, 194, 198, .55);
  box-shadow: 0 0 0 1px rgba(86, 194, 198, .35), 0 0 32px rgba(86, 194, 198, .2), 0 40px 80px -40px rgba(0,0,0,.85);
  animation: complete 1.4s ease-out 1;
}
@keyframes complete {
  0% { box-shadow: 0 0 0 1px rgba(86, 194, 198, 0), 0 0 0 rgba(86, 194, 198, 0), 0 40px 80px -40px rgba(0,0,0,.85); }
  35% { box-shadow: 0 0 0 1px rgba(86, 194, 198, .6), 0 0 56px rgba(86, 194, 198, .38), 0 40px 80px -40px rgba(0,0,0,.85); }
  100% { box-shadow: 0 0 0 1px rgba(86, 194, 198, .35), 0 0 32px rgba(86, 194, 198, .2), 0 40px 80px -40px rgba(0,0,0,.85); }
}

/* ------------------------------------------------------------------ vision */

.deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}
.vslide {
  position: relative;
  display: flex; flex-direction: column; gap: 0.5rem;
  aspect-ratio: 16 / 10;
  padding: 0.8rem 0.95rem 0.6rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(23, 67, 74, .9), rgba(14, 44, 49, .92));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.85);
}
.vslide--wide { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
.vslide__bar {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-bottom: 0.45rem; border-bottom: 1px solid rgba(255,255,255,.14);
  font-family: var(--cond); font-weight: 600; font-size: 1.05rem;
}
.vslide__sub { margin-left: 0.6rem; font-family: var(--mono); font-style: normal; font-weight: 400; font-size: 0.66rem; letter-spacing: .05em; color: var(--accent); }
.vslide__n { font-family: var(--mono); font-size: 0.7rem; color: rgba(255,255,255,.5); }
.vslide svg { flex: 1; min-height: 0; width: 100%; overflow: visible; }
.vslide__foot { font-family: var(--mono); font-size: 0.62rem; letter-spacing: .04em; color: rgba(255,255,255,.45); }
.liquid-on .vslide { background: linear-gradient(180deg, rgba(23, 67, 74, .35), rgba(14, 44, 49, .45)); }

/* ------------------------------------------------------------------- bands */

.band { position: relative; padding-block: clamp(5rem, 10vw, 8rem); }
.band[id] { scroll-margin-top: 40px; }
.band__head h2 { margin-top: 1rem; max-width: 22ch; }

.plans {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem;
  margin-top: 3rem;
}
.plan {
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.9rem 1.6rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(22, 56, 62, .5), rgba(10, 29, 33, .6));
  border: 1px solid rgba(234, 240, 237, .1);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -40px rgba(0,0,0,.8);
}
.plan h3 { font-family: var(--cond); font-size: var(--s2); font-weight: 600; letter-spacing: -0.01em; }
.plan__line { color: var(--ink-2); font-size: var(--s-1); margin-top: 0.4rem; min-height: 2.6rem; }
.plan ul { list-style: none; margin: 1.3rem 0 1.9rem; padding: 0; font-size: 0.9rem; }
.plan li { padding: 0.45rem 0 0.45rem 1.4rem; position: relative; color: var(--ink-2); border-top: 1px solid var(--border); }
.plan li::before {
  content: ''; position: absolute; left: 0; top: 0.95rem; width: 8px; height: 4px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }
.plans__extra {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 2rem;
  margin-top: 1.1rem; padding: 1rem 1.6rem;
  border-radius: 14px; border: 1px solid var(--border); background: rgba(234, 240, 237, .025);
}
.plans__extra-k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.plans__extra-p { color: var(--ink-3); font-size: 0.85rem; }
.plans__extra ul { flex-basis: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; }
.plans__extra li { position: relative; padding-left: 1.2rem; color: var(--ink-2); font-size: 0.9rem; }
.plans__extra li::before { content: '+'; position: absolute; left: 0; color: var(--accent); font-family: var(--mono); }
.plan--lead {
  background:
    linear-gradient(180deg, rgba(31, 111, 120, .35), rgba(10, 29, 33, .7)) padding-box,
    linear-gradient(160deg, rgba(86, 194, 198, .8), rgba(86, 194, 198, .05) 60%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 60px -20px rgba(86, 194, 198, .35), 0 30px 60px -40px rgba(0,0,0,.8);
}

.faqwrap { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faqside { display: flex; flex-direction: column; gap: 1.8rem; }
@media (min-width: 900px) { .faqside { position: sticky; top: 100px; } }
/* Two features, each a small picture of itself and a link back to its act. */
.feats { display: grid; gap: 0.7rem; }
.feat {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 1.1rem; row-gap: 0.25rem; align-items: start;
  padding: 0.95rem 1rem; border-radius: 14px;
  background: rgba(234, 240, 237, .03); border: 1px solid var(--border);
  color: inherit; text-decoration: none;
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.feat:hover, .feat:focus-visible { border-color: rgba(86, 194, 198, .45); background: rgba(86, 194, 198, .06); transform: translateY(-2px); }
.feat__vis { grid-row: 1 / span 2; align-self: center; width: 100%; height: auto; }
.feat__t { font-family: var(--cond); font-weight: 600; font-size: 1.15rem; }
.feat__p { color: var(--ink-2); font-size: 0.9rem; line-height: 1.45; }
.feat__deck { position: relative; display: block; aspect-ratio: 16 / 10; }
.feat__deck .thumb { position: absolute; width: 72%; padding: 0.3rem 0.35rem; gap: 0.2rem; border-radius: 5px; animation: none; }
.feat__deck .thumb:nth-child(1) { left: 0; top: 0; transform: rotate(-5deg); }
.feat__deck .thumb:nth-child(2) { left: 14%; top: 14%; transform: rotate(-1deg); }
.feat__deck .thumb:nth-child(3) { left: 28%; top: 28%; transform: rotate(3deg); }
.feat__deck .thumb__bar { height: 3px; }
.feat:hover .feat__deck .thumb:nth-child(3) { box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), 0 0 0 1px rgba(86,194,198,.55); }
@media (max-width: 480px) { .feat { grid-template-columns: 6rem minmax(0, 1fr); column-gap: 0.9rem; } }
.askcard {
  position: relative; overflow: hidden;
  padding: 1.5rem 1.4rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(31, 111, 120, .35), rgba(10, 29, 33, .75)) padding-box,
    linear-gradient(160deg, rgba(86, 194, 198, .7), rgba(86, 194, 198, .05) 60%) border-box;
  border: 1px solid transparent;
  box-shadow: 0 0 60px -24px rgba(86, 194, 198, .35);
}
.askcard > * { position: relative; }
.askcard__texture {
  position: absolute; inset: -10% -5%;
  font-family: var(--mono); font-size: 0.95rem; line-height: 2;
  color: rgba(86, 194, 198, .09); word-spacing: 1.2rem;
  transform: rotate(-8deg); pointer-events: none; user-select: none;
}
.askcard__k { font-family: var(--cond); font-weight: 600; font-size: 1.5rem; }
.askcard__p { margin-top: 0.5rem; color: var(--ink-2); max-width: 40ch; }
.askcard__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 1.2rem; }
.askcard__mail { font-size: var(--s-1); color: var(--ink-2); }
.faq details { border-top: 1px solid var(--border); }
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0; font-weight: 600;
  transition: color .2s ease;
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--mono); color: var(--accent); flex: none; transition: transform .25s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 1.3rem; color: var(--ink-2); max-width: 62ch; }

.contact {
  text-align: center; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
}
/* The orbiting figures (journey.js) circle this block; the scrim keeps the
   middle calm so it reads as the focal point. */
.contact::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 40% at 50% 50%, rgba(6, 19, 22, .85), rgba(6, 19, 22, .4) 70%, transparent 100%),
    radial-gradient(60% 70% at 50% 50%, rgba(31, 111, 120, .35), transparent 70%);
}
.contact__in { display: flex; flex-direction: column; align-items: center; }
.contact h2 { margin-top: 1.1rem; font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; }
.contact .act__lede { margin-inline: auto; }
.contact .hero__cta { justify-content: center; }
.contact__alt { margin-top: 1.5rem; font-size: var(--s-1); color: var(--ink-3); }

/* ---------------------------------------------------------------- colophon */

.colophon { border-top: 1px solid var(--border); padding-block: 2.5rem 3.5rem; background: rgba(4, 12, 14, .6); }
.colophon__top { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; justify-content: space-between; }
.colophon__line { font-family: var(--cond); font-size: 1.05rem; color: var(--ink-2); }
.colophon__meta { margin-top: 2rem; font-size: 0.75rem; color: var(--ink-3); max-width: 76ch; }
.colophon__meta p + p { margin-top: 0.5rem; }
.colophon__meta a { color: var(--ink-2); }

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  /* No liquid, so no pinning: each act is just a section. */
  .act, .act--problem { height: auto; }
  .thumb { animation: none; }
  .feat { transition: none; }
  .feat:hover, .feat:focus-visible { transform: none; }
  .act__stage { position: relative; height: auto; padding-block: 6rem; }
  .logos { animation: none; }
  .marquee { overflow-x: auto; }
  .logos[aria-hidden] { display: none; }
  .hero__q { animation: none; }
  .cue i::after { animation: none; display: none; }
}

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1560px) {
  .sheet .c-region, .sheet .c-super, .sheet .c-base { display: none; }
}
@media (max-width: 1240px) {
  .sheet .c-sub { display: none; }
}
@media (max-width: 1080px) {
  .sheet .c-super, .sheet .c-base { display: none; }
  .nav { gap: 1.2rem; }
}

@media (max-width: 899px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero { padding-block: 6rem 3rem; }
  /* Room above the card for the figures to funnel in from its corners. */
  .flow { margin-top: 4.5rem; }
  .deck { grid-template-columns: minmax(0, 1fr); }
  .vslide, .vslide--wide { aspect-ratio: 16 / 9; }
  .vslide--wide { aspect-ratio: auto; }
  .vslide--wide svg { min-height: 9.5rem; }
  .vslide__sub { display: block; margin: 0.15rem 0 0; }
  .act { padding-block: 5rem 3rem; }
  .act__in { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .act__copy { max-width: none; }
  .act__copy::before {
    content: ''; position: absolute; inset: -1.5rem -1rem; z-index: -1; border-radius: 20px;
    background: radial-gradient(100% 100% at 50% 50%, rgba(6, 19, 22, .82), rgba(6, 19, 22, .4) 90%);
  }
  .act__visual--still { max-width: 320px; margin: 0 auto; width: 100%; }
  /* Stacked, the swirl already fills the screen behind the copy, so the
     problem keeps no empty column of its own. */
  .liquid-on .act--problem .act__visual { display: none; }
  .sheet .c-name, .sheet .c-sub { display: none; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .faqwrap { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .nav-toggle {
    display: inline-flex; padding: 0.5rem 0.9rem;
    font: 600 var(--s-1) var(--sans); color: var(--ink);
    background: rgba(234,240,237,.04); border: 1px solid var(--rule); border-radius: 9px; cursor: pointer;
  }
  .nav {
    display: none;
    position: absolute; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: rgba(6, 19, 22, .96); border-bottom: 1px solid var(--border);
  }
  .nav[data-open="true"] { display: flex; }
  .nav a:not(.btn) { padding: 0.85rem 0; border-bottom: 1px solid var(--border); font-size: var(--s0); }
  .nav a[aria-current="true"]::after { display: none; }
  .nav .btn { margin-top: 1rem; }
  .masthead { background: rgba(6, 19, 22, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

  .builtfor { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .builtfor__label { padding-left: var(--gutter); }
  .logos li { font-size: 1.1rem; }
  .logos { gap: 2.25rem; }

  .sheet .c-region, .sheet .c-base, .sheet .c-super { display: none; }
  .sheet th, .sheet td { padding: 0 0.45rem; }
  .sheet table { font-size: 11px; }
  .sheet tbody th, .sheet .corner { width: 1.6rem; padding: 0 0.25rem; }
  .sheet .c-check { padding: 0 0.35rem; }
  .dash { padding: 0.8rem; }
  .dash__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__minis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash__minis > :last-child { display: none; }
  .chip:not(.chip--on) { display: none; }
  .hero h1 { font-size: clamp(2.7rem, 13vw, 4rem); }
}