/* AquaMesh — aquamesh.ai
   Tokens are lifted from the September customer deck: white ground, navy-black
   headlines, royal-blue accent words, pale-blue icon discs, spaced-caps labels,
   and the lighter wordmark blue. The one dark band is the product's own world. */

:root {
  color-scheme: light;

  --ink: #0b1026;
  --ink-2: #39455e;
  --ink-3: #66728a;
  --blue: #2449e8;
  --blue-600: #1b39c7;
  --brand: #4a9bcd;
  --tint: #e9effd;
  --wash: #f5f8fe;
  --rule: #dfe6f3;
  --navy: #10205a;
  --green: #137a4b;
  --green-tint: #e8f6ee;

  --night: #050a14;
  --night-2: #0b1424;
  --night-rule: rgba(120, 170, 230, 0.16);
  --night-ink: #e8f0f8;
  --night-ink-2: #9fb3c8;
  --cyan: #22d3ee;
  --red: #f87171;

  --display: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --body: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1160px;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(16, 30, 70, 0.05), 0 10px 30px rgba(16, 30, 70, 0.06);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { color: var(--ink); font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.lg { width: 44px; height: 44px; stroke-width: 1.5; }
.ic.xl { width: 44px; height: 44px; stroke-width: 1.6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 12px; }

.wrap { width: min(var(--wrap), 100% - 48px); margin-inline: auto; }

/* ── Type ────────────────────────────────────────────────────── */
.eyebrow {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--blue); display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap;
}
.eyebrow .ic { width: 1em; height: 1em; }
h1 {
  font-size: clamp(2.7rem, 6.2vw, 5.1rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.035em;
  max-width: 13ch;
}
h1 .dot { color: var(--blue); }
h2 { font-size: clamp(2rem, 3.8vw, 3.15rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.03em; }
h3 { font-size: 1.14rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.accent { color: var(--blue); }
.lead { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.55; color: var(--ink-3); max-width: 60ch; }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.92em 1.4em; border-radius: 999px;
  background: var(--blue); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none;
  box-shadow: 0 6px 18px rgba(36, 73, 232, 0.25);
  transition: background 0.15s ease, transform 0.15s ease;
}
.btn:hover { background: var(--blue-600); transform: translateY(-1px); }
.btn-sm { padding: 0.62em 1.1em; font-size: 0.92rem; box-shadow: none; }
.btn-ghost { background: var(--tint); color: var(--blue); box-shadow: none; }
.btn-ghost:hover { background: #dce6fc; }
.btn-light { background: #fff; color: var(--navy); box-shadow: none; }
.btn-light:hover { background: #eef3ff; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* ── Nav ─────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.88); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent; transition: border-color 0.2s ease;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; color: var(--brand); }
.wordmark { height: 22px; width: auto; color: var(--brand); display: block; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.nav-links a:hover { color: var(--blue); }

/* ── Legal pages ─────────────────────────────────────────────── */
.legal-meta { margin-top: 18px; font-size: .84rem; color: var(--ink-3); }
.legal-body { max-width: 74ch; display: flex; flex-direction: column; gap: clamp(30px, 4vw, 44px); }
.legal-body h2 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); margin-bottom: 14px; }
.legal-body p { font-size: 1rem; line-height: 1.65; }
.legal-body p + p { margin-top: 12px; }
.legal-body b { color: var(--ink); font-weight: 700; }
.legal-body code { font-family: var(--mono); font-size: .92em; background: var(--wash); padding: 2px 6px; border-radius: 6px; }

/* ── Opt-out control ─────────────────────────────────────────── */
.optout-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(24px, 3vw, 34px); }
.optout-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.optout-row h2 { font-size: 1.25rem; margin-bottom: 6px; }
.optout-row p { font-size: .96rem; color: var(--ink-3); }
.optout-note { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); }
.legal-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.legal-list li { position: relative; padding-left: 20px; font-size: 1rem; line-height: 1.6; }
.legal-list li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .55; }
.legal-body .table-wrap { overflow-x: auto; }
.legal-body .cs-table { font-size: .92rem; }

/* ── Mobile menu ─────────────────────────────────────────────── */
.nav-toggle {
  display: none; margin-left: auto; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-panel {
  position: sticky; top: 72px; z-index: 19; background: #fff; border-bottom: 1px solid var(--rule);
  padding: 8px 24px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  box-shadow: 0 18px 40px rgba(16, 30, 70, .1);
}
/* a class selector outranks the UA's [hidden] rule, so say it explicitly */
.nav-panel[hidden] { display: none; }
@media (min-width: 821px) { .nav-panel { display: none; } }
.nav-panel .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; width: 100%; }
.nav-panel .nav-links a { display: block; width: 100%; padding: 14px 0; font-size: 1.05rem; font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); }
.nav-panel .btn { margin-top: 18px; }
html.nav-open { overflow: hidden; }

/* ── Cookie notice ───────────────────────────────────────────── */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60;
  max-width: 720px; margin-inline: auto;
  background: var(--ink); color: #c9d5f5; border-radius: 16px;
  padding: 20px 22px; display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center;
  box-shadow: 0 20px 50px rgba(5, 10, 20, .35);
  transform: translateY(16px); opacity: 0; transition: transform .25s ease, opacity .25s ease;
}
.cookie-bar.is-in { transform: none; opacity: 1; }
.cookie-bar p { font-size: .88rem; line-height: 1.5; flex: 1 1 320px; margin: 0; }
.cookie-bar a { color: #9fc0ff; }
.cookie-actions { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.cookie-decline { background: none; border: 0; color: #9fb0d8; font: inherit; font-size: .86rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cookie-decline:hover { color: #dfe7fb; }
@media (prefers-reduced-motion: reduce) { .cookie-bar { transition: none; } }
@media (max-width: 560px) { .cookie-bar { padding: 18px; } .cookie-actions { width: 100%; justify-content: space-between; } }

/* ── Hero ────────────────────────────────────────────────────── */
/* The slide's own ground: white, easing into a pale water blue — so the
   product render (which carries that same ground) sits in the page, not on it. */
.hero {
  padding-top: clamp(40px, 6vw, 72px); overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 42%, #eef4fb 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.38fr); gap: clamp(20px, 3vw, 40px); align-items: center; }
.hero .eyebrow { margin-bottom: 20px; }
.hero h1 { margin-bottom: 18px; font-size: clamp(2.5rem, 4.1vw, 3.6rem); max-width: 13ch; }
.hero .lead { margin-bottom: 26px; }

/* A small bleed past the container keeps the hero from feeling boxed in, but
   it has to stay inside the gutter or it clips the probe and its caption. */
.hero-visual { margin: 0 calc(-1 * clamp(0px, 1.4vw, 44px)) 0 0; position: relative; }
/* The monitor and the probe come out of one slide render, split apart so the
   probe is not touching the bezel. The flex ratios are the two crops' pixel
   widths, so both scale by the same factor and their heights still agree. */
.shot { position: relative; isolation: isolate; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 30px); }
.shot-monitor { position: relative; flex: 1636 1 0; min-width: 0; }
.shot-probe { flex: 362 1 0; min-width: 0; width: 100%; height: auto; }
.shot-probe {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 96%, transparent), linear-gradient(to bottom, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 96%, transparent), linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-composite: intersect;
}
.shot-base { position: relative; z-index: 1; }
.shot-base {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 100%), linear-gradient(to bottom, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 100%), linear-gradient(to bottom, #000 80%, transparent 100%);
  mask-composite: intersect;
}
/* The live platform, laid exactly over the monitor's screen in the slide render.
   Percentages are of the cropped monitor (1636px), not the original composite. */
.shot-screen {
  position: absolute; z-index: 2; left: 3.341%; top: 11.818%; width: 94.417%; height: 74.04%;
  object-fit: cover; object-position: center top;
}
.hero-visual figcaption {
  position: absolute; right: 0; bottom: 3%; width: 22%; text-align: center;
  font-size: 0.8rem; line-height: 1.35; color: var(--ink-3);
}
.hero-visual figcaption b { display: block; color: var(--ink); font-size: 0.95rem; }

.hero-stats {
  margin: clamp(28px, 4vw, 44px) 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.hero-stats > div { padding: 22px 24px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.hero-stats > div + div { border-left: 1px solid var(--rule); }
.hero-stats dd { margin: 0; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; }
.hero-stats dt { font-size: 0.92rem; line-height: 1.4; color: var(--ink-2); }
.hero-note { margin-top: 12px; font-size: 0.82rem; color: var(--ink-3); }
.hero .industries { margin-top: 28px; }

.hero-checks { margin-top: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--ink-2); }
.hero-checks li { display: flex; align-items: center; gap: 10px; }
.hero-checks .ic { color: var(--green); width: 1.1em; height: 1.1em; stroke-width: 2.4; }

.flow-wrap { position: relative; height: clamp(190px, 26vw, 330px); }
#flow { position: absolute; inset: 0; width: 100%; height: 100%; }

.industries {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0;
  padding: 26px 0 34px; border-top: 1px solid var(--rule);
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3);
}
.industries li { padding: 0 18px; }
.industries li + li { border-left: 1px solid var(--rule); }
.footer-links { font-size: 0.86rem; color: var(--ink-3); line-height: 1.9; max-width: 62ch; }
.footer-links a { color: var(--ink-3); text-decoration: none; }
.footer-links a:hover { color: var(--blue); }

.industries a {
  color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5em;
  transition: color 0.15s ease;
}
.industries a::after {
  content: ''; width: 0.42em; height: 0.42em; border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.45;
}
.industries a:hover { color: var(--blue); }
.industries a:hover::after { opacity: 1; }

/* Industry pages reuse the case-study shell; the dark band there holds the
   solution pillars, which need the four-across treatment at full width. */
.night .pillars { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) { .night .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Sections ────────────────────────────────────────────────── */
.section { padding: clamp(72px, 10vw, 124px) 0; }
.wash { background: var(--wash); }
.head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(36px, 5vw, 56px); max-width: 780px; }
.head.center { margin-inline: auto; text-align: center; align-items: center; }
.head.center .eyebrow { justify-content: center; }

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px; display: flex; flex-direction: column; gap: 20px;
}
.card-top { display: flex; gap: 14px; align-items: flex-start; }
.card-top h3 { text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue); font-size: 1.02rem; }
.sub { color: var(--ink-3); font-size: 0.97rem; margin-top: 2px; }

.num {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 1.05rem;
}
.num.lg { width: 52px; height: 52px; font-size: 1.35rem; background: var(--tint); color: var(--blue); }

.disc {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center; background: var(--tint); color: var(--blue);
}
.disc .ic { width: 26px; height: 26px; }
.disc.sm { width: 42px; height: 42px; }
.disc.sm .ic { width: 20px; height: 20px; }

/* Problem */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.qa { display: flex; flex-direction: column; gap: 14px; font-size: 0.97rem; }
.qa b { display: block; color: var(--ink); font-weight: 600; }
.verdict em { font-style: normal; font-weight: 700; color: var(--ink-3); }
.verdict .yes { color: var(--green); }
.verdict .test { color: var(--blue); }
.costs { display: flex; flex-direction: column; gap: 12px; font-size: 0.95rem; }
.costs li { display: flex; gap: 12px; align-items: flex-start; }
.costs .ic { color: var(--blue); margin-top: 3px; }
.costs b { display: block; color: var(--ink); font-weight: 600; }
.figure { margin-top: auto; border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 2px; }
.figure.blue { background: var(--tint); }
.figure.green { background: var(--green-tint); }
.figure.slate { background: #eef1f7; }
.figure.slate .figure-label, .figure.slate .figure-num { color: var(--ink); }
.figure-label { font-weight: 600; font-size: 0.9rem; color: var(--blue); }
.figure.green .figure-label { color: var(--green); }
.figure-num { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); font-variant-numeric: tabular-nums; }
.figure.green .figure-num { color: var(--green); }
.figure-num small { font-size: 0.55em; font-weight: 700; }
.figure-note { font-size: 0.85rem; color: var(--ink-3); }

.flowbar {
  margin-top: 28px; background: var(--navy); border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 18px 22px;
  counter-reset: step;
}
.flowbar li {
  position: relative; display: flex; align-items: center; gap: 12px;
  color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
}
.flowbar li small { display: block; font-weight: 500; letter-spacing: 0.06em; opacity: 0.72; font-size: 0.92em; }
.flowbar .disc { width: 46px; height: 46px; background: #dbe7ff; }
.flowbar .disc .ic { width: 22px; height: 22px; }
.flowbar li + li::before {
  content: ''; position: absolute; left: -10px; top: 50%; width: 8px; height: 8px;
  border-top: 2px solid rgba(255, 255, 255, 0.55); border-right: 2px solid rgba(255, 255, 255, 0.55);
  transform: translateY(-50%) rotate(45deg);
}

/* ── Platform (dark) ─────────────────────────────────────────── */
.night {
  background:
    radial-gradient(900px 500px at 80% 0%, rgba(34, 211, 238, 0.09), transparent 60%),
    radial-gradient(800px 500px at 0% 100%, rgba(45, 212, 191, 0.06), transparent 60%),
    var(--night);
  color: var(--night-ink-2);
}
.night h2, .night h3 { color: var(--night-ink); }
.night .accent, .night .eyebrow { color: var(--cyan); }
.night .lead { color: var(--night-ink-2); }

.twin {
  margin: 0; border-radius: 16px; background: #04070d; border: 1px solid rgba(94, 180, 230, 0.22);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.twin img { width: 100%; height: auto; }
.twin figcaption { padding: 12px 18px; font-size: 0.88rem; color: var(--night-ink-2); border-top: 1px solid var(--night-rule); }

.platform-grid { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
.pillar { display: flex; flex-direction: column; gap: 10px; }
.pillar .disc { background: rgba(34, 211, 238, 0.1); color: var(--cyan); width: 50px; height: 50px; }
.pillar p { font-size: 0.98rem; }

.finding { display: flex; flex-direction: column; gap: 12px; }
.finding-kicker, .stream-kicker {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--night-ink-2);
}
.finding-card, .stream {
  background: var(--night-2); border: 1px solid var(--night-rule); border-radius: 14px; padding: 16px 18px;
}
.finding-card { border-left: 3px solid var(--red); }
.finding-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; border: 1px solid rgba(94, 180, 230, 0.35); color: #9fd8f0;
}
.tag.crit { border-color: rgba(248, 113, 113, 0.45); color: var(--red); background: rgba(248, 113, 113, 0.08); }
.ago { margin-left: auto; font-family: var(--mono); font-size: 0.72rem; color: var(--night-ink-2); }
.finding-title { color: var(--night-ink); font-weight: 600; font-size: 1.02rem; line-height: 1.4; margin-bottom: 6px; }
.finding-body { font-size: 0.92rem; line-height: 1.55; }
.finding-body b { color: var(--night-ink); }
.finding-actions { display: flex; gap: 8px; margin-top: 14px; }
.finding-actions span {
  font-size: 0.78rem; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--night-rule); color: var(--night-ink);
}
.finding-actions .primary { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.4); }
.stream-kicker { margin-bottom: 10px; }
.stream-row { display: flex; align-items: flex-start; gap: 12px; font-size: 0.92rem; color: var(--night-ink); }
.stream-row small { display: block; color: var(--night-ink-2); font-size: 0.84rem; }
.stream-row b { margin-left: auto; font-family: var(--mono); color: #4ade80; font-weight: 500; font-size: 0.86rem; }
.stream-dot { width: 3px; align-self: stretch; border-radius: 2px; background: var(--cyan); }
.finding-note { font-size: 0.9rem; }

/* ── AquaSpectra ─────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 18px; }
.probe-panel {
  position: relative; border-radius: 24px; overflow: hidden; min-height: 460px;
  background: radial-gradient(120% 90% at 70% 20%, #ffffff 0%, #eef3fa 60%, #e3ebf6 100%);
  display: grid; place-items: center;
}
.probe-panel img {
  width: auto; height: min(560px, 90%); max-height: 560px; mix-blend-mode: multiply;
  /* Feather the photo's own background into the panel so no rectangle shows. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent);
  mask-composite: intersect;
}
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 8px; }
.specs li { display: flex; gap: 12px; align-items: flex-start; font-size: 0.95rem; }
.specs b { display: block; color: var(--ink); font-weight: 600; }

/* ── Real results ────────────────────────────────────────────── */
.proof-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 20px; align-items: stretch; }
.proof-total {
  background: var(--navy); color: #c9d5f5; border-radius: var(--radius); padding: 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}
.proof-num { font-size: clamp(2.8rem, 5.4vw, 4.4rem); font-weight: 800; letter-spacing: -0.035em; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
.proof-num small { font-size: 0.4em; font-weight: 700; color: #9fc0ff; letter-spacing: 0; }
.proof-label { font-size: 1.1rem; font-weight: 600; color: #dfe7fb; }
.proof-split { margin-top: 18px; display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.95rem; }
.proof-split b { display: block; color: #fff; font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.proof-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.proof-findings li {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; font-size: 0.95rem;
}
.pf-num { font-size: clamp(1.8rem, 2.8vw, 2.3rem); font-weight: 800; letter-spacing: -0.03em; color: var(--blue); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pf-num small { font-size: 0.5em; font-weight: 700; letter-spacing: 0; }
.proof-note { margin-top: 14px; font-size: 0.84rem; color: var(--ink-3); }

.split-foot { margin-top: 20px; font-size: 0.88rem; color: var(--ink-3); max-width: 70ch; }

/* ── How it works ────────────────────────────────────────────── */
/* Five cards hung off one rail: the numbered disc sits on each card's top
   edge and the rail passes behind it, so the sequence reads as a path
   rather than five boxes. The disc's white ring is what cuts the rail. */
.steps { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding-top: 52px; }
.steps::before {
  content: ''; position: absolute; top: 24px; left: 10%; right: 10%; height: 2px; border-radius: 2px;
  background: linear-gradient(to right, transparent, #cbd9fb 8%, #cbd9fb 92%, transparent);
}
.steps li {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 36px 20px 22px;
}
.steps .num {
  position: absolute; top: -44px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px;
}
.steps .ic.lg { color: var(--blue); margin: 2px 0; }
.steps h3 { text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); font-size: 0.92rem; }
.steps h3 small { display: block; font-size: 0.76rem; letter-spacing: 0.06em; color: var(--ink-3); font-weight: 600; }
.steps p { font-size: 0.94rem; }
.steps .blue {
  margin-top: auto; background: var(--tint); color: var(--blue); font-weight: 600;
  font-size: 0.83rem; line-height: 1.35; border-radius: 12px; padding: 8px 14px;
}

.assure {
  margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--wash); border: 1px solid var(--rule); border-radius: var(--radius);
}
.assure > div { padding: 26px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start; }
.assure > div + div { border-left: 1px solid var(--rule); }
.assure .disc { grid-row: span 2; background: #fff; }
.assure h3 { text-transform: uppercase; letter-spacing: 0.04em; color: var(--blue); font-size: 0.95rem; }
.assure p { font-size: 0.95rem; }
.assure b { color: var(--blue); }

.promise {
  margin-top: 20px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 24px;
}
.promise .ic { color: var(--blue); }
.promise p { font-size: 1.1rem; color: var(--ink); flex: 1 1 260px; }
.promise p span { color: var(--blue); font-weight: 600; }

/* ── Roadmap ─────────────────────────────────────────────────── */
.stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.stage {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px; display: flex; flex-direction: column; gap: 16px;
}
.stage header { display: flex; gap: 14px; align-items: center; }
.stage-when { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.stage h3 { color: var(--blue); font-size: 1.15rem; font-weight: 600; }
.stage > p { font-size: 0.97rem; }
.blade { width: 100%; height: auto; border-radius: 10px; mix-blend-mode: multiply; }
.sources, .agents { display: flex; flex-direction: column; gap: 11px; font-size: 0.93rem; }
.sources li, .agents li { display: flex; gap: 12px; align-items: flex-start; }
.sources .ic, .agents .ic { color: var(--blue); margin-top: 3px; }
.sources b, .agents b { display: block; color: var(--ink); font-weight: 600; }
.agents li { background: var(--wash); border: 1px solid var(--rule); border-radius: 12px; padding: 11px 14px; }
.stage-foot {
  margin-top: auto; display: flex; gap: 10px; align-items: center;
  background: var(--tint); color: var(--blue); font-weight: 600; font-size: 0.93rem; border-radius: 12px; padding: 12px 14px;
}

/* ── Why ─────────────────────────────────────────────────────── */
.why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.why .head { margin-bottom: 0; position: sticky; top: 110px; }
.checks { display: flex; flex-direction: column; }
.checks li { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.checks li:first-child { border-top: 1px solid var(--rule); }
.tick { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; margin-top: 1px; }
.tick .ic { width: 17px; height: 17px; stroke-width: 2.4; }
.checks p { font-size: 0.97rem; margin-top: 3px; }

/* ── Closing ─────────────────────────────────────────────────── */
.closing { padding-top: clamp(72px, 10vw, 116px); overflow: hidden; border-top: 1px solid var(--rule); }
.closing-inner { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.closing h2 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); }
.closing .actions { margin-top: 10px; }
.mail { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; text-decoration: none; padding: 0.9em 0.4em; }
.mail:hover { color: var(--blue); }

/* ── Footer ──────────────────────────────────────────────────── */
.footer { padding: 36px 0 44px; border-top: 1px solid var(--rule); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; }
.footer .wordmark { height: 18px; }
.footer-tag { margin-top: 10px; font-size: 0.9rem; color: var(--ink-3); }
.footer-meta { font-size: 0.88rem; color: var(--ink-3); }
.footer-meta a { color: var(--ink-2); }

/* ── Savings estimator ─────────────────────────────────────── */
.estimator {
  margin-top: 20px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.95fr); gap: 30px; align-items: center;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 30px;
}
.est-copy { display: flex; flex-direction: column; gap: 8px; }
.est-copy h3 { font-size: 1.3rem; }
.est-copy p:last-child { font-size: 0.95rem; }
.est-control { display: flex; flex-direction: column; gap: 8px; }
.est-control label { font-size: 0.85rem; font-weight: 600; color: var(--ink-2); }
.est-control output { font-size: 2.1rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.est-control input[type='range'] { width: 100%; accent-color: var(--blue); height: 22px; cursor: pointer; }
.est-scale { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--ink-3); }
.est-result { background: var(--tint); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.est-label { font-size: 0.85rem; font-weight: 600; color: var(--blue); }
.est-num { font-size: 1.95rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); line-height: 1.1; font-variant-numeric: tabular-nums; }
.est-note { font-size: 0.8rem; color: var(--ink-3); margin-bottom: 10px; }

/* ── Case studies ────────────────────────────────────────────── */
.case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink-2);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.case-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 30, 70, 0.06), 0 16px 40px rgba(16, 30, 70, 0.1); }
.case-kicker { font-size: 0.82rem; color: var(--ink-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tagline {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); background: var(--tint); border-radius: 999px; padding: 4px 9px;
}
.case-card h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.case-body { font-size: 0.97rem; }
.case-stats { margin: 4px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border-top: 1px solid var(--rule); padding-top: 16px; }
.case-stats > div { display: flex; flex-direction: column-reverse; gap: 2px; }
.case-stats dd { margin: 0; font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); line-height: 1.05; font-variant-numeric: tabular-nums; }
.case-stats dd small { font-size: 0.55em; font-weight: 700; }
.case-stats dt { font-size: 0.78rem; color: var(--ink-3); line-height: 1.3; }
.case-link { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--blue); font-weight: 600; }
.case-note { margin-top: 16px; font-size: 0.84rem; color: var(--ink-3); }

.case-teaser { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.case-teaser .head, .case-teaser h2 { margin-bottom: 0; }
.case-teaser > div:first-child { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.case-teaser .btn { margin-top: 6px; }
.case-teaser-stats {
  margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); overflow: hidden;
}
.case-teaser-stats > div { padding: 18px 22px; display: flex; flex-direction: column-reverse; gap: 4px; }
.case-teaser-stats > div + div { border-top: 1px solid var(--rule); }
.case-teaser-stats dd { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.025em; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; }
.case-teaser-stats dd small { font-size: 0.52em; font-weight: 700; }
.case-teaser-stats dt { font-size: 0.85rem; color: var(--ink-3); line-height: 1.35; }

/* ── Case study pages ────────────────────────────────────────── */
.cs h1 { font-size: clamp(2.3rem, 4.4vw, 3.7rem); max-width: 22ch; margin-bottom: 20px; }
.cs-head { padding-bottom: clamp(40px, 5vw, 64px); background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%); }
.cs-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; margin-bottom: 26px; }
.cs-head .eyebrow { margin-bottom: 18px; }
.cs-facts {
  margin: 34px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.cs-facts > div { padding: 20px 22px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.cs-facts > div + div { border-left: 1px solid var(--rule); padding-left: 22px; }
.cs-facts dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.cs-facts dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 0.98rem; line-height: 1.35; }
.cs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
.cs-two h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); margin-bottom: 14px; }
.cs-two p + p { margin-top: 12px; }

.cs-findings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs-findings li {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 28px; display: flex; flex-direction: column; gap: 8px;
}
.cs-findings li:first-child { grid-column: 1 / -1; }
.cs-findings h3 { font-size: 1.12rem; }
.cs-findings p:last-child { font-size: 0.96rem; }

.cs-shot { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(94, 180, 230, 0.22); background: #0a111e; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); }
.cs-shot img { width: 100%; height: auto; -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 88%, transparent 100%); }
.cs-shot figcaption { padding: 12px 18px; font-size: 0.86rem; color: var(--night-ink-2); border-top: 1px solid var(--night-rule); }

.cs-value { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 56px); align-items: center; }
.cs-value h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); margin-bottom: 14px; }
.cs-value p + p { margin-top: 12px; }
.cs-value .btn { margin-top: 22px; }

.cs-figure { margin: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; padding: 18px; box-shadow: var(--shadow); }
.cs-figure img { width: 100%; height: auto; }
.cs-figure figcaption { margin-top: 14px; font-size: 0.88rem; color: var(--ink-3); max-width: 80ch; }
.cs-callout {
  margin-top: 20px; border-left: 3px solid var(--blue); background: var(--tint); border-radius: 0 12px 12px 0;
  padding: 16px 20px; font-size: 1rem; max-width: 90ch;
}
.cs-callout b { color: var(--ink); }

.cs-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cs-steps.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-steps li { display: flex; gap: 14px; align-items: flex-start; }
.cs-steps h3 { font-size: 1.05rem; margin-bottom: 6px; }
.cs-steps p { font-size: 0.95rem; }

.cs-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; background: #fff; }
.cs-table caption { text-align: left; font-size: 0.84rem; color: var(--ink-3); padding: 14px 18px; }
.cs-table th, .cs-table td { text-align: left; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.cs-table thead th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); background: var(--wash); }
.cs-table tbody tr:last-child td { border-bottom: none; }
.cs-table td:nth-child(2) { font-weight: 700; color: var(--blue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { margin-top: 24px; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); }

.cs-context { margin: 24px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.cs-context > div { display: flex; flex-direction: column-reverse; gap: 6px; }
.cs-context dd { margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--blue); line-height: 1; font-variant-numeric: tabular-nums; }
.cs-context dt { font-size: 0.86rem; color: var(--ink-3); line-height: 1.35; }
.cs-note { margin-top: 16px; font-size: 0.82rem; color: var(--ink-3); max-width: 90ch; }
.cs .closing { border-top: 1px solid var(--rule); padding-bottom: clamp(56px, 8vw, 90px); }

/* ── Company page (kept simple: story, founder, advisors, terms) ─── */
/* ── Story rows ──────────────────────────────────────────────── */
.story-row { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: center; }
.story-row + .story-row { margin-top: clamp(38px, 5vw, 68px); }
.story-row.reverse .story-shot { order: 2; }
.story-row.solo { grid-template-columns: minmax(0, 1fr); }
.story-row.solo .story-copy p { max-width: 74ch; }
.story-shot { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 1px 2px rgba(16,30,70,0.06), 0 18px 44px rgba(16,30,70,0.13); }
.story-shot img { width: 100%; height: auto; display: block; }
/* The lab shot is a portrait, so it reads larger than the landscape one at
   the same column width - cap it so the two rows feel balanced. */
.story-shot.compact { max-width: 430px; }
.story-copy { display: flex; flex-direction: column; gap: 12px; }
.story-copy h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.story-copy p { font-size: 1.02rem; line-height: 1.6; max-width: 56ch; }
.story-copy .eyebrow { color: var(--ink-3); }

.origins { margin: clamp(34px, 4vw, 54px) 0; padding: clamp(24px, 3vw, 34px) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.origins-label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
.origins-marks { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(28px, 4vw, 60px); }
.origins-marks img { height: clamp(30px, 3.4vw, 42px); width: auto; mix-blend-mode: multiply; }
.origins-marks li:nth-child(2) img { height: clamp(38px, 4.2vw, 52px); }
.origins-text { font-family: var(--display); font-size: clamp(1.15rem, 1.6vw, 1.45rem); font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.origins-note { margin-top: 18px; font-size: 0.86rem; color: var(--ink-3); max-width: 84ch; }

/* ── Team ────────────────────────────────────────────────────── */
/* Portraits are the source ovals uncropped - the rounded ends sit on the
   card's own white, so nothing is cut off the top of anyone's head. */
.team-lead {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(26px, 3.4vw, 52px);
  align-items: center; background: #fff; border: 1px solid var(--rule);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(26px, 3vw, 44px);
}
.team-lead img {
  width: clamp(190px, 21vw, 300px); aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 16px; background: var(--wash);
}
.team-lead > div { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.team-lead h3 { font-size: clamp(2.1rem, 3.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02; }
.team-lead .co-role { font-size: 0.82rem; letter-spacing: 0.22em; color: var(--blue); }
.team-lead p { font-size: 1.06rem; line-height: 1.55; max-width: 58ch; }
.team-lead .mail { padding-left: 0; font-size: 1rem; }
.team-lead .co-affil { font-size: 1.05rem; font-weight: 800; color: var(--blue); margin-top: -4px; }

.team-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.team-grid li {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px 24px 28px; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 5px;
}
.team-grid img {
  width: min(100%, 250px); aspect-ratio: 23 / 34; object-fit: contain;
  background: #fff; margin-bottom: 14px;
}
.team-grid h3 { font-size: clamp(1.25rem, 1.5vw, 1.45rem); font-weight: 800; letter-spacing: -0.02em; }
.team-grid .co-affil { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; color: var(--blue); font-variant-numeric: tabular-nums; }
.team-grid li > p:last-child { font-size: 0.96rem; line-height: 1.5; margin-top: 6px; color: var(--ink-2); }
.co-role { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }

/* A click-to-reveal address: the mailbox is assembled in the browser, so it
   is not sitting in the markup for a scraper to lift. */
.mailbtn {
  display: inline-flex; align-items: center; gap: 0.55em; border: 1px solid var(--rule);
  background: var(--tint); color: var(--blue); font: inherit; font-weight: 600;
  border-radius: 999px; padding: 0.6em 1.1em; cursor: pointer;
}
.mailbtn:hover { background: #dce6fc; }
.mailbtn .ic { width: 1.15em; height: 1.15em; }

.co-list { display: flex; flex-direction: column; gap: 14px; max-width: 90ch; }
.co-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; }
.co-list .ic { color: var(--green); width: 1.15em; height: 1.15em; stroke-width: 2.4; margin-top: 4px; flex: none; }
.co-list b { color: var(--ink); }

/* ── Trust ───────────────────────────────────────────────────── */
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.trust-grid li {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.trust-grid p { font-size: 0.95rem; }
#how, #why { border-top: 1px solid var(--rule); }

/* ── Industry pages ──────────────────────────────────────────── */
.ind-hero { padding-top: clamp(28px, 4vw, 52px); background: linear-gradient(180deg, #fff 0%, #fff 58%, var(--wash) 100%); }
.ind-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ind-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ind-hero-copy .cs-back { margin-bottom: 4px; }
.ind-hero-copy h1 { font-size: clamp(2.2rem, 3.6vw, 3.3rem); max-width: 15ch; }
.ind-hero-copy .lead { max-width: 46ch; }
.ind-hero-copy .actions { margin-top: 6px; }
.ind-shot { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: 0 2px 4px rgba(16,30,70,.06), 0 26px 60px rgba(16,30,70,.18); }
.ind-shot img { width: 100%; height: auto; display: block; }

/* What it reads / connects to / needs - facts about the product, not the reader */
.ind-spec { margin-top: clamp(34px, 4.5vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ind-spec > div { padding: 22px 26px; display: flex; flex-direction: column; gap: 6px; }
.ind-spec > div + div { border-left: 1px solid var(--rule); }
.ind-spec dt { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.ind-spec dd { margin: 0; font-size: .96rem; color: var(--ink); line-height: 1.45; font-weight: 500; }

.ind-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 30px); }
.ind-caps > li { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 28px 30px; }
.ind-caps > li > .disc { background: var(--tint); color: var(--blue); width: 46px; height: 46px; margin-bottom: 16px; }
.ind-caps h3 { font-size: 1.14rem; margin-bottom: 8px; }
.ind-caps > li > p { font-size: .97rem; color: var(--ink-2); }
/* the general class sits above; the two concrete examples sit under a rule */
.ind-egs { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.ind-egs li { position: relative; padding-left: 20px; font-size: .92rem; color: var(--ink-3); line-height: 1.45; }
.ind-egs li::before { content: ''; position: absolute; left: 2px; top: .56em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); opacity: .5; }

.ind-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ind-apps li { padding: 22px 24px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.ind-apps li:nth-child(-n+3) { border-top: 0; }
.ind-apps li:nth-child(3n+1) { border-left: 0; }
.ind-apps b { color: var(--ink); font-size: 1rem; font-weight: 700; }
.ind-apps span { font-size: .92rem; color: var(--ink-3); line-height: 1.45; }

.ind-dia { margin: clamp(30px, 4vw, 48px) 0 0; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(20px, 2.6vw, 34px); }
.ind-dia .dia { width: 100%; height: auto; display: block; }
.ind-dia figcaption { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-3); max-width: 80ch; }

.ind-solve { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.ind-sol { display: flex; gap: 16px; align-items: flex-start; }
.ind-sol .disc { background: rgba(34, 211, 238, .1); color: var(--cyan); width: 46px; height: 46px; flex: none; }
.ind-sol h3 { color: var(--night-ink); font-size: 1.05rem; margin-bottom: 6px; }
.ind-sol p { font-size: .95rem; }

/* The probe, and what it is used for in that sector */
.ind-sensor { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.ind-probe { margin: 0; display: flex; justify-content: center; background: linear-gradient(160deg, var(--wash), #fff 70%); border: 1px solid var(--rule); border-radius: var(--radius); padding: clamp(20px, 2.6vw, 34px); }
/* the crop carries its own pale ground, so the edges are feathered away */
.ind-probe img {
  width: auto; max-height: clamp(260px, 32vw, 420px); height: auto; display: block; mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse 74% 80% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 74% 80% at 50% 50%, #000 58%, transparent 100%);
}
.ind-sensor-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.ind-sensor-copy h2 { font-size: clamp(1.7rem, 2.6vw, 2.3rem); }
.ind-sensor-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; margin-top: 4px; }
.ind-sensor-specs li { display: flex; gap: 12px; align-items: flex-start; font-size: .95rem; }
.ind-sensor-specs b { display: block; color: var(--ink); font-weight: 700; }
.ind-sensor-use { margin-top: 10px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: 100%; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ind-sensor-use > div { padding: 18px 22px; display: flex; flex-direction: column; gap: 5px; }
.ind-sensor-use > div + div { border-left: 1px solid var(--rule); }
.ind-sensor-use dt { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--blue); }
.ind-sensor-use dd { margin: 0; font-size: .94rem; color: var(--ink-2); line-height: 1.45; }

.ind-ui { margin: clamp(34px, 4.5vw, 56px) 0 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(94,180,230,.22); background: #0a111e; }
.ind-ui img { width: 100%; height: auto; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); mask-image: linear-gradient(to bottom, #000 80%, transparent 100%); }
.ind-ui figcaption { padding: 2px 22px 18px; font-size: .88rem; color: var(--night-ink-2); }

.ind-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ind-steps li { background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ind-steps .num { width: 30px; height: 30px; margin-bottom: 4px; }
.ind-steps h3 { font-size: 1.02rem; }
.ind-steps p { font-size: .93rem; color: var(--ink-2); }

.ind-proof {
  margin-top: clamp(24px, 3vw, 36px); display: inline-flex; align-items: center; gap: 14px;
  background: var(--navy); color: #dfe7fb; text-decoration: none; font-weight: 600;
  border-radius: 999px; padding: 14px 24px; font-size: .98rem;
}
.ind-proof .ic { color: #9fc0ff; }
.ind-proof:hover { background: #17287a; }

/* ── Large displays ──────────────────────────────────────────── */
/* A standard centred column, stepped up so it is not marooned on a big
   screen. Line length is held by .lead / .head, not by the container. */
@media (min-width: 1500px) { :root { --wrap: 1290px; } }
@media (min-width: 1750px) { :root { --wrap: 1400px; font-size: 17px; } }
@media (min-width: 2100px) { :root { --wrap: 1500px; font-size: 18px; } }
/* Four pillars read better than two very wide ones once there is room. */
@media (min-width: 1500px) { .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Seven findings: the lead one takes its own full-width row and sets its text
   in two columns to fill it; the other six make two clean rows of three. */
@media (min-width: 1200px) {
  .cs-findings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-findings + .cs-note { margin-top: 18px; }
  .cs-findings li:first-child { grid-column: 1 / -1; }
  .cs-findings li:first-child > p:last-of-type { column-count: 2; column-gap: clamp(28px, 3vw, 56px); }
  .finding-body, .finding-note { max-width: 74ch; }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1020px) {
  .ind-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ind-hero-copy h1 { max-width: none; }
  .ind-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-solve { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { margin: 8px auto 0; max-width: 760px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats > div:nth-child(3) { border-left: 0; }
  .hero-stats > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .proof-grid, .cs-value { grid-template-columns: minmax(0, 1fr); }
  .case-grid, .cs-two, .cs-findings, .case-teaser { grid-template-columns: minmax(0, 1fr); }
  .cs-steps, .cs-steps.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-facts, .cs-context { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .cs-facts > div:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .estimator { grid-template-columns: minmax(0, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-row, .story-row.reverse { grid-template-columns: minmax(0, 1fr); }
  .story-row.reverse .story-shot { order: 0; }
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trio, .stages { grid-template-columns: minmax(0, 1fr); }
  .platform-grid { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 18px; }
  .steps::before { display: none; }
  /* Five steps in two columns would strand the last one in a half-empty
     row, so it takes the full width instead. */
  .steps li:nth-child(5) { grid-column: 1 / -1; }
  .flowbar { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .flowbar li + li::before { display: none; }
  .why { grid-template-columns: minmax(0, 1fr); }
  .why .head { position: static; }
}
@media (max-width: 820px) {
  .ind-spec, .ind-caps { grid-template-columns: minmax(0, 1fr); }
  .ind-sensor { grid-template-columns: minmax(0, 1fr); }
  .ind-probe { max-width: 320px; margin-inline: auto; }
  .ind-spec > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .ind-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-apps li:nth-child(-n+3) { border-top: 1px solid var(--rule); }
  .ind-apps li:nth-child(-n+2) { border-top: 0; }
  .ind-apps li:nth-child(3n+1) { border-left: 1px solid var(--rule); }
  .ind-apps li:nth-child(odd) { border-left: 0; }
  .nav-links { display: none; }
  .nav-inner { justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .nav-inner .btn-sm { display: none; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .probe-panel { min-height: 360px; }
  .assure { grid-template-columns: minmax(0, 1fr); }
  .assure > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .pillars { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .ind-steps, .ind-solve { grid-template-columns: minmax(0, 1fr); }
  .ind-sensor-specs, .ind-sensor-use { grid-template-columns: minmax(0, 1fr); }
  .ind-sensor-use > div + div { border-left: 0; border-top: 1px solid var(--rule); }
  .ind-apps { grid-template-columns: minmax(0, 1fr); }
  .ind-apps li { border-left: 0 !important; border-top: 1px solid var(--rule) !important; }
  .ind-apps li:first-child { border-top: 0 !important; }
  .wrap { width: min(var(--wrap), 100% - 32px); }
  .proof-findings { grid-template-columns: minmax(0, 1fr); }
  .trust-grid { grid-template-columns: minmax(0, 1fr); }
  .team-lead { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .team-lead > div { align-items: center; }
  .team-lead p { max-width: none; }
  .cs-steps, .cs-steps.three, .case-stats { grid-template-columns: minmax(0, 1fr); }
  .cs-facts, .cs-context { grid-template-columns: minmax(0, 1fr); }
  .cs-facts > div, .cs-facts > div + div { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); }
  .hero-stats > div { padding: 18px; }
  .hero-visual figcaption { position: static; width: auto; margin-top: 4px; text-align: right; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .specs { grid-template-columns: minmax(0, 1fr); }
  .industries li { padding: 0 10px; }
  .card, .stage { padding: 22px; }
  .btn-sm { padding: 0.55em 0.9em; font-size: 0.85rem; }
  .wordmark { height: 18px; }
}