/* StayNative, round 7: dark redesign
   The page is dark and quiet. The light objects on it are the things we
   build and the things you already run: white tool tiles, and the ice band
   for your ERP, database, or spreadsheets. Two colors carry meaning and
   nothing else: lilac = an AI agent (and the primary button), mint = data
   moving both ways / your data. Everything else is ink, surface, and text. */

/* Mona Sans, self-hosted. Subset to the characters, weights (400–800), and
   widths (100–125) this site uses, from the same version 2.000 variable
   font the pages loaded from Google Fonts. Subsetting is a modification
   under the SIL OFL, so the font's internal family name is not "Mona".
   License: /fonts/OFL.txt */
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("/fonts/mona-sans-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00B7, U+2013, U+2019, U+201C-201D, U+2026;
}

:root {
  /* Canvas */
  --ink: #070D1F;        /* page background */
  --midnight: #0B1530;   /* nav when scrolled, footer, dialog */
  --surface: #111C3A;    /* cards, chips */
  --surface-2: #17244A;  /* raised cards, hover */
  --line: #1D2A52;       /* hairlines (decorative only) */
  --line-2: #24356A;     /* chip borders, dividers (decorative only) */

  /* Text on dark */
  --text: #F2F4FA;       /* headlines, body: 17.6:1 on ink */
  --text-2: #C5CBDD;     /* ledes, second clauses: 11.9:1 on ink */
  --text-3: #8E97B3;     /* captions, meta, field borders: 6.7:1 on ink, 5.2:1 on surface-2 */

  /* Meaning */
  --lilac: #B3A4FF;      /* AI agent, primary button, focus ring */
  --lilac-hi: #C7BCFF;   /* button hover */
  --mint: #8EDDC8;       /* two-way sync, your data */
  --coral: #F4A193;      /* breakage, in the comparison drawing only: 8.3:1 on surface */

  /* The light objects */
  --white: #FFFFFF;      /* tool tiles */
  --ice: #EEF1F9;        /* what you already run */
  --ice-edge: #C3CBE2;
  --tile-line: #D9DEEC;
  --navy: #14214A;       /* text on tiles: 15.6:1 on white */
  --slate: #5A6585;      /* secondary text on tiles: 5.8:1 on white, 5.1:1 on ice */

  --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section-y: clamp(5rem, 12vw, 10rem);
  --nav-h: 4.5rem;
}

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

html {
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  background: var(--ink);
  color-scheme: dark;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  font-stretch: 110%;
  line-height: 1.05;
  text-wrap: balance;
}
h3 {
  font-size: 1.375rem;
  font-stretch: 100%;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
img { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--lilac);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* Keeps a short phrase on one line */
.nobr { white-space: nowrap; }

.defs {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
}

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Shared parts ---------- */

/* Pill chips. The dot says what the section is about: lilac for AI,
   mint for your systems and data, neutral otherwise. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.02em;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--text-3);
}
.chip--ai::before { background: var(--lilac); }
.chip--data::before { background: var(--mint); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.85rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: none;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  font-stretch: 105%;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.btn--lilac { background: var(--lilac); color: var(--ink); }
.btn--lilac:hover { background: var(--lilac-hi); }
.btn--small { min-height: 2.5rem; padding: 0.55rem 1.1rem; font-size: 0.9375rem; }
.btn--large { min-height: 3.75rem; padding: 1rem 2rem; font-size: 1.0625rem; }

.link {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--text-3);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
  transition: text-decoration-color 0.2s ease;
}
.link:hover { text-decoration-color: currentColor; }
.link--arrow::after { content: " \2192"; }

/* Sections sit on one dark canvas, divided by hairlines */
.section {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
}

.section__head {
  max-width: 47.5rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.section__head .chip { margin-bottom: 1.75rem; }
.section__title {
  font-size: clamp(2.125rem, 4.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.section__lede {
  margin-top: 1.5rem;
  max-width: 40rem;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}
.section__lede + .section__lede { margin-top: 1rem; }

/* Headlines are two clauses: the first in Text, the second in Text-2 */
.c2 { color: var(--text-2); }

.card {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

/* Line glyphs share one stroke style */
.glyph {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The mark: two tools and a new one, on a base. Drawn in currentColor so it
   follows whatever surface it sits on. */
.mk-tool { fill: currentColor; }
.mk-new { fill: var(--lilac); }
.mk-base { fill: currentColor; opacity: 0.4; }

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgb(7 13 31 / 0.82);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  color: var(--text);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* With JS, the nav starts clear over the hero and frosts once you scroll */
.js .nav:not(.is-scrolled) {
  border-bottom-color: transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: var(--nav-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.1875rem;
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand__mark { width: 26px; height: 22px; flex: none; }

.nav nav { margin-left: auto; }
.nav__links {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
}
.nav__links a {
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--text); }

@media (max-width: 1000px) {
  .nav nav { display: none; }
  .nav__inner .btn { margin-left: auto; }
}
@media (max-width: 400px) {
  .brand { font-size: 1.0625rem; }
  .nav__inner .btn { padding: 0.5rem 0.85rem; font-size: 0.875rem; }
}

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

.hero {
  position: relative;
  padding-block: calc(var(--nav-h) + clamp(3rem, 8vw, 7rem)) clamp(4.5rem, 9vw, 8rem);
  background:
    radial-gradient(55% 45% at 85% 8%, rgb(179 164 255 / 0.09), transparent 70%),
    radial-gradient(40% 35% at 10% 95%, rgb(142 221 200 / 0.04), transparent 70%);
}
.hero .chip { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__title {
  max-width: 15ch;
  font-size: clamp(2.75rem, 6vw, 5.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
}
.hero__title .c2 { display: block; }
.hero__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 4rem;
  align-items: end;
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
}
.hero__lede {
  max-width: 40rem;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}

/* Plain facts, no numbers we can't back */
.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-top: 1.5rem;
  color: var(--text-3);
  font-size: 0.875rem;
  font-weight: 500;
  font-stretch: 108%;
  letter-spacing: 0.01em;
}
.facts li { display: inline-flex; align-items: center; }
.facts li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-inline: 0.85rem;
  border-radius: 50%;
  background: var(--line-2);
  box-shadow: 0 0 0 1px var(--text-3);
  opacity: 0.8;
}

@media (max-width: 860px) {
  .hero__intro { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .facts { gap: 0.45rem 1.25rem; }
  .facts li + li::before { display: none; }
}

/* The board: your tools in a hosted frame, synced to what you already run */
.board {
  container-type: inline-size;
  margin: clamp(3.5rem, 7vw, 5.5rem) 0 0;
}
.board__host {
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 40%),
    var(--surface);
}
.board__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 1.1rem;
}
.board__title {
  font-size: 1.125rem;
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.host-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}
.host-tag__mark { width: 19px; height: 16px; flex: none; color: var(--text); }

/* Each tool: its name above, and a small sample screen of it at work.
   The screens are light (the things we build are the light objects) and
   scale as one piece: everything inside is sized in em, and the em is a
   share of the screen's width. */
.mods {
  --cols: repeat(3, minmax(0, 1fr)) minmax(0, 0.56fr);
  --gap: 1.25rem;
  --label: 2rem;
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--gap);
}
.mod {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
/* Short connectors between neighbors, at screen height: the tools share data */
.mod + .mod::before {
  content: "";
  position: absolute;
  left: calc(var(--gap) * -1 - 1px);
  top: calc(var(--label) + 0.75rem + (100% - var(--label) - 0.75rem) / 2);
  width: calc(var(--gap) + 2px);
  height: 2px;
  margin-top: -1px;
  background: var(--mint);
  opacity: 0.7;
}
.mod__label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--label);
}
.mod__icon {
  display: grid;
  place-items: center;
  width: 1.875rem;
  height: 1.875rem;
  flex: none;
  border-radius: 8px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.mod__icon svg {
  width: 17px; height: 17px;
  fill: none;
  stroke: var(--text);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mod__name {
  font-size: 1.0625rem;
  font-weight: 650;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.mod__label .agent { margin-left: auto; }

.screen {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 2px 6px rgb(0 0 0 / 0.25),
    0 22px 44px -16px rgb(0 0 0 / 0.7);
}

.agent {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem 0.3rem 0.45rem;
  border-radius: 999px;
  background: var(--lilac);
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}
.agent svg { width: 13px; height: 13px; }

/* The open slot lines up with the screens, below the labels */
.mod--add {
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: calc(var(--label) + 0.75rem);
  padding: 1rem 0.75rem;
  border: 1.5px dashed var(--text-3);
  border-radius: 12px;
  text-align: center;
}
.mod + .mod--add::before {
  top: 50%;
  margin-left: -1.5px;
  background: repeating-linear-gradient(90deg, var(--mint) 0 4px, transparent 4px 7px);
}
.mod--add .mod__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.05);
}
.mod--add .mod__icon svg { stroke: var(--text-2); stroke-width: 2; }
.mod--add .mod__name { color: var(--text-2); font-size: 1rem; font-weight: 500; }

.board__sync {
  position: relative;
  display: grid;
  grid-template-columns: var(--cols, repeat(3, minmax(0, 1fr)) minmax(0, 0.56fr));
  gap: 1.25rem;
  height: 3.5rem;
}

/* ----- Inside the sample screens -----
   Made-up data only. Lilac is the agent, mint-green is synced or done.
   The light-surface tokens are shared with the data, commitments, and ops
   graphics further down. */
.scr,
.dv,
.ops {
  --s-ink: #14214A;
  --s-mute: #5F6987;     /* 5.1:1 on the bar, 4.8:1 on the draft pill */
  --s-faint: #5F6886;    /* small meta text: 5.5:1 on white, 5.2:1 on the bar */
  --s-line: #E6E9F2;
  --s-ai: #5240D0;
  --s-ai-bg: #F0EDFF;
  --s-ai-line: #D6CDFF;
  --s-ok: #0B6A54;
  --s-ok-bg: #E1F5EE;
  --s-ok-line: #B5E6D7;
}
.scr {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--s-ink);
  font-size: 3.8cqw;
  font-stretch: 100%;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
}
.scr svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.5em;
  height: 2.4em;
  padding: 0 0.85em;
  border-bottom: 1px solid var(--s-line);
  background: #F7F8FC;
}
.s-app {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  flex: none;
  border-radius: 0.4em;
  background: var(--s-ink);
  color: var(--white);
}
.s-app svg { width: 1em; height: 1em; stroke-width: 2; }
.s-title { font-size: 0.92em; font-weight: 650; }
.s-crumb { color: var(--s-faint); font-size: 0.82em; }
.s-crumb::before { content: "/"; margin-right: 0.5em; }
.s-av {
  display: grid;
  place-items: center;
  width: 2.6em;
  height: 2.6em;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: #DDE3F4;
  color: var(--s-ink);
  font-size: 0.6em;
  font-weight: 700;
}
.s-av--a { background: #D8E8F2; color: #1E4A63; }
.s-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 0.9em 0.9em 0.75em;
}
.s-sync {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.6em 0.25em 0.45em;
  border-radius: 999px;
  background: var(--s-ok-bg);
  box-shadow: inset 0 0 0 1px var(--s-ok-line);
  color: var(--s-ok);
  font-size: 0.72em;
  font-weight: 650;
}
.s-sync svg { width: 1.15em; height: 1.15em; stroke-width: 2; }
.s-bar .s-sync { margin-left: auto; }
.s-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.15em 0.45em 0.15em 0.35em;
  border-radius: 999px;
  background: var(--s-ai-bg);
  color: var(--s-ai);
  font-size: 0.8em;
  font-style: normal;
  font-weight: 650;
}
.scr .s-ai svg,
.scr .s-sug svg,
.scr .s-hint svg,
.scr .s-add svg,
.scr .s-r4__ai { width: 1em; height: 1em; stroke: none; }
.s-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin-top: auto;
  padding-top: 0.6em;
  border-top: 1px solid var(--s-line);
}
.s-foot > * { grid-area: 1 / 1; }
.s-foot > :last-child { grid-column: 2; justify-self: end; }

/* Invoice approvals: a bill arrives, the agent codes it, it's approved and synced */
.s-bill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.65em;
  align-items: center;
}
.s-logo {
  display: grid;
  place-items: center;
  width: 2.95em;
  height: 2.95em;
  border-radius: 0.7em;
  background: #E9EDF8;
  font-size: 0.78em;
  font-weight: 750;
  letter-spacing: 0.02em;
}
.s-who b { display: block; font-size: 0.95em; font-weight: 650; }
.s-who i { display: block; margin-top: 0.15em; color: var(--s-faint); font-size: 0.76em; font-style: normal; }
.s-amt { font-size: 1.05em; font-weight: 700; }
.s-field {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.9em;
  padding: 0.55em 0.7em;
  border: 1px solid var(--s-line);
  border-radius: 0.55em;
  background: #FBFCFE;
}
.s-k { color: var(--s-mute); font-size: 0.8em; }
.s-v { display: grid; justify-items: end; font-size: 0.85em; font-weight: 650; }
.s-v > * { grid-area: 1 / 1; }
.s-ph { color: var(--s-faint); font-weight: 500; opacity: 0; }
.s-val { display: inline-flex; align-items: center; gap: 0.45em; }
.s-sug {
  position: absolute;
  top: calc(100% + 0.4em);
  right: 0.4em;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.35em 0.35em 0.6em;
  border: 1px solid var(--s-ai-line);
  border-radius: 0.6em;
  background: var(--white);
  box-shadow: 0 0.6em 1.4em -0.4em rgb(40 28 120 / 0.35);
  color: var(--s-ai);
  font-size: 0.78em;
  font-weight: 600;
  opacity: 0;
}
.s-sug b {
  margin-left: 0.2em;
  padding: 0.25em 0.6em;
  border-radius: 0.4em;
  background: var(--s-ai);
  color: var(--white);
  font-weight: 650;
}
.s-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.15em;
}
.s-track {
  position: absolute;
  top: 0.45em;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  margin-top: -1px;
  background: var(--s-line);
}
.s-track i {
  position: absolute;
  inset: 0;
  background: var(--s-ink);
  transform-origin: left;
}
.s-st {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4em;
  color: var(--s-mute);
  font-size: 0.74em;
  font-weight: 600;
}
.s-st i {
  position: relative;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px #C9D0E3;
}
.s-st i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--white) 0 24%, var(--s-ink) 27%);
}
.s-st--3 i::after { background: radial-gradient(circle, var(--white) 0 24%, #0E8A6C 27%); }
.s-wait { color: var(--s-faint); font-size: 0.78em; opacity: 0; }
.s-appr {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: 0.8em;
  font-weight: 650;
}
.s-appr .s-av { margin: 0; font-size: 0.72em; }
.s-appr svg { width: 1.1em; height: 1.1em; color: #0E8A6C; stroke-width: 2.6; }
.s-meta { display: flex; gap: 0.45em; margin-top: 0.6em; }
.s-meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.55em 0.25em 0.4em;
  border-radius: 0.4em;
  background: #F2F4F9;
  color: var(--s-mute);
  font-size: 0.7em;
  font-weight: 600;
}
.s-meta svg { width: 1.15em; height: 1.15em; }
.s-meta .s-match { background: var(--s-ok-bg); color: var(--s-ok); }
.s-meta .s-match svg { stroke-width: 2.6; }

/* Job scheduling: the agent finds the best slot, the job lands on the board */
.s-grid {
  position: relative;
  display: grid;
  grid-template-columns: 4em repeat(5, 4.1em);
  grid-template-rows: 1.45em repeat(4, 2.2em) 0.6em 2.2em;
}
.s-grid::before {
  content: "";
  grid-area: 2 / 2 / 6 / 7;
  border: 1px solid var(--s-line);
  border-radius: 0.4em;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(4.1em - 1px), var(--s-line) calc(4.1em - 1px) 4.1em),
    repeating-linear-gradient(180deg, transparent 0 calc(2.2em - 1px), #F0F2F7 calc(2.2em - 1px) 2.2em);
}
.s-day { grid-row: 1; align-self: center; padding-left: 0.6em; color: var(--s-faint); font-size: 0.7em; font-weight: 600; }
.s-day:nth-child(1) { grid-column: 2; }
.s-day:nth-child(2) { grid-column: 3; }
.s-day:nth-child(3) { grid-column: 4; }
.s-day:nth-child(4) { grid-column: 5; }
.s-day:nth-child(5) { grid-column: 6; }
.s-crew {
  display: flex;
  grid-column: 1;
  align-items: center;
  gap: 0.45em;
  font-size: 0.74em;
  font-weight: 600;
}
.s-crew i { width: 0.6em; height: 0.6em; border-radius: 50%; background: #6E86CF; }
.s-crew:nth-child(6) { grid-row: 2; }
.s-crew:nth-child(7) { grid-row: 3; }
.s-crew:nth-child(8) { grid-row: 4; }
.s-crew:nth-child(9) { grid-row: 5; }
.s-crew:nth-child(7) i { background: #3E97B4; }
.s-crew:nth-child(8) i { background: #8C95AE; }
.s-crew:nth-child(9) i { background: #5C6FA8; }
.s-job,
.s-new,
.s-slot {
  display: flex;
  align-items: center;
  margin: 0.32em 0.22em;
  padding: 0 0.6em;
  border-radius: 0.4em;
  font-size: 0.68em;
  font-weight: 650;
}
.s-job { background: #EDF0F9; box-shadow: inset 2px 0 0 #8E9BC7; color: #44507A; }
.s-j1 { grid-area: 2 / 2 / 3 / 4; }
.s-j2 { grid-area: 2 / 5 / 3 / 7; }
.s-j3 { grid-area: 3 / 2 / 4 / 5; background: #E8F3F6; box-shadow: inset 2px 0 0 #6FB0C6; color: #2F5B69; }
.s-j4 { grid-area: 4 / 3 / 5 / 6; }
.s-j5 { grid-area: 5 / 2 / 6 / 3; }
.s-j6 { grid-area: 5 / 4 / 6 / 7; }
.s-slot {
  grid-area: 3 / 5 / 4 / 6;
  border: 1px dashed #9F8DFF;
  background: var(--s-ai-bg);
  opacity: 0;
}
.s-ring {
  grid-area: 3 / 5 / 4 / 6;
  margin: 0.12em 0.06em;
  border-radius: 0.45em;
  box-shadow: 0 0 0 2px var(--mint);
  opacity: 0;
}
.s-new {
  position: relative;
  z-index: 2;
  grid-area: 3 / 5 / 4 / 6;
  gap: 0.35em;
  padding: 0 0.5em;
  background: var(--s-ink);
  color: var(--white);
}
.s-new::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0.9em 1.6em -0.5em rgb(20 33 74 / 0.55);
  opacity: 0;
}
.s-new svg {
  position: absolute;
  top: 50%;
  right: 0.45em;
  width: 1.15em;
  height: 1.15em;
  margin-top: -0.575em;
  color: var(--mint);
  stroke-width: 2.8;
}
.s-tray,
.s-done {
  grid-row: 7;
  align-self: center;
  font-size: 0.7em;
  font-weight: 600;
}
.s-tray { grid-column: 1 / 3; color: var(--s-faint); }
.s-done {
  display: flex;
  grid-column: 3 / 7;
  align-items: center;
  gap: 0.3em;
  color: var(--s-ok);
}
.s-done svg { width: 1.1em; height: 1.1em; stroke-width: 2.6; }
.s-hint {
  display: inline-flex;
  grid-area: 7 / 4 / 8 / 7;
  align-items: center;
  align-self: center;
  justify-self: end;
  gap: 0.3em;
  padding: 0.3em 0.65em 0.3em 0.5em;
  border-radius: 999px;
  background: var(--s-ai-bg);
  box-shadow: inset 0 0 0 1px var(--s-ai-line);
  color: var(--s-ai);
  font-size: 0.68em;
  font-weight: 650;
  opacity: 0;
}

/* Estimates: lines add up, the agent suggests one more, it's sent */
.s-status { display: grid; margin-left: auto; }
.s-status > * {
  grid-area: 1 / 1;
  justify-self: end;
  padding: 0.22em 0.65em;
  border-radius: 999px;
  font-size: 0.72em;
  font-weight: 650;
}
.s-draft { background: #EDF0F6; color: var(--s-mute); opacity: 0; }
.s-sent { background: var(--s-ok-bg); box-shadow: inset 0 0 0 1px var(--s-ok-line); color: var(--s-ok); }
.s-lines { display: grid; }
.s-row {
  display: grid;
  grid-column: 1;
  grid-template-columns: minmax(0, 1fr) 3.6em 5.4em;
  align-items: center;
  height: 2.15em;
  border-bottom: 1px solid #EEF0F6;
  font-size: 0.78em;
}
.s-row > span + span { text-align: right; }
.s-row > span:last-child,
.s-odo { font-variant-numeric: tabular-nums; }
.s-row > span:last-child { font-weight: 650; }
.s-row--head {
  height: 1.9em;
  border-bottom-color: var(--s-line);
  color: var(--s-faint);
  font-size: 0.68em;
  font-weight: 600;
}
.s-row--head > span:last-child { font-weight: 600; }
.s-r4 { grid-row: 5; }
.s-r4 > span:first-child { display: flex; align-items: center; gap: 0.35em; }
.scr .s-r4__ai { color: var(--s-ai); fill: currentColor; }
.s-add {
  display: flex;
  grid-area: 5 / 1;
  align-items: center;
  gap: 0.4em;
  margin: 0.2em 0;
  padding: 0 0.25em 0 0.55em;
  border: 1px dashed #A897FF;
  border-radius: 0.45em;
  background: var(--s-ai-bg);
  color: var(--s-ai);
  font-size: 0.72em;
  font-weight: 600;
  opacity: 0;
}
.s-add b {
  margin-left: auto;
  padding: 0.2em 0.65em;
  border-radius: 0.35em;
  background: var(--s-ai);
  color: var(--white);
  font-weight: 650;
}
.s-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.55em;
  font-size: 0.95em;
  font-weight: 700;
}
.s-odo { display: block; height: 1.25em; overflow: hidden; line-height: 1.25em; text-align: right; }
.s-odo__in { display: flex; flex-direction: column; transform: translateY(-80%); }
.s-valid { color: var(--s-faint); font-size: 0.74em; }
.s-send {
  grid-column: 2;
  padding: 0.35em 0.8em;
  border-radius: 0.45em;
  background: var(--s-ink);
  color: var(--white);
  font-size: 0.74em;
  font-weight: 650;
  opacity: 0;
}

/* Loops. The default styles above are each screen's finished frame, which
   is what shows without JS, with reduced motion, or before a loop starts.
   Each screen runs its own calm loop with a long rest, staggered so they
   never move together, and only while the board is on screen. */
@media (prefers-reduced-motion: no-preference) {
  .is-live .scr { --dur: 9s; --dl: 0.9s; }
  .is-live .mod:nth-child(2) .scr { --dur: 10.5s; --dl: 2.4s; }
  .is-live .mod:nth-child(3) .scr { --dur: 9.5s; --dl: -5.6s; }
  .is-live .scr *,
  .is-live .scr *::after {
    animation-duration: var(--dur);
    animation-delay: var(--dl);
    animation-timing-function: var(--ease);
    animation-iteration-count: infinite;
    animation-fill-mode: both;
  }
  .is-live .s-body { animation-name: s-cycle; }

  .is-live .s-inv .s-ph { animation-name: inv-ph; }
  .is-live .s-inv .s-val { animation-name: inv-val; }
  .is-live .s-inv .s-sug { animation-name: inv-sug; }
  .is-live .s-inv .s-sug b { animation-name: press-28; }
  .is-live .s-inv .s-track i { animation-name: inv-fill; }
  .is-live .s-inv .s-st--2 i::after { animation-name: inv-d2; }
  .is-live .s-inv .s-st--3 i::after { animation-name: inv-d3; }
  .is-live .s-inv .s-wait { animation-name: inv-wait; }
  .is-live .s-inv .s-appr { animation-name: inv-appr; }
  .is-live .s-inv .s-sync { animation-name: inv-sync; }

  .is-live .s-sch .s-hint { animation-name: sch-hint; }
  .is-live .s-sch .s-slot { animation-name: sch-slot; }
  .is-live .s-sch .s-new { animation-name: sch-new; }
  .is-live .s-sch .s-new::after { animation-name: sch-lift; }
  .is-live .s-sch .s-new svg { animation-name: sch-check; }
  .is-live .s-sch .s-ring { animation-name: sch-ring; }
  .is-live .s-sch .s-done { animation-name: sch-done; }
  .is-live .s-sch .s-sync { animation-name: sch-sync; }

  .is-live .s-est .s-r1 { animation-name: est-r1; }
  .is-live .s-est .s-r2 { animation-name: est-r2; }
  .is-live .s-est .s-r3 { animation-name: est-r3; }
  .is-live .s-est .s-add { animation-name: est-add; }
  .is-live .s-est .s-add b { animation-name: press-41; }
  .is-live .s-est .s-r4 { animation-name: est-r4; }
  .is-live .s-est .s-odo__in { animation-name: est-odo; }
  .is-live .s-est .s-draft { animation-name: est-draft; }
  .is-live .s-est .s-sent { animation-name: est-sent; }
  .is-live .s-est .s-send { animation-name: est-send; }
  .is-live .s-est .s-sync { animation-name: est-sync; }
}

@keyframes s-cycle {
  0% { opacity: 0; transform: translateY(0.4em); }
  5%, 93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
@keyframes press-28 {
  0%, 26% { transform: none; }
  28% { transform: scale(0.86); }
  31%, 100% { transform: none; }
}
@keyframes press-41 {
  0%, 39% { transform: none; }
  41% { transform: scale(0.86); }
  44%, 100% { transform: none; }
}

@keyframes inv-ph {
  0%, 30% { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes inv-val {
  0%, 32% { opacity: 0; transform: translateX(0.5em); }
  37%, 100% { opacity: 1; transform: none; }
}
@keyframes inv-sug {
  0%, 10% { opacity: 0; transform: translateY(-0.3em) scale(0.97); }
  15%, 30% { opacity: 1; transform: none; }
  34%, 100% { opacity: 0; transform: translateY(-0.2em) scale(0.98); }
}
@keyframes inv-fill {
  0%, 36% { transform: scaleX(0); }
  41%, 52% { transform: scaleX(0.5); }
  58%, 100% { transform: scaleX(1); }
}
@keyframes inv-d2 {
  0%, 39% { opacity: 0; transform: scale(0.4); }
  43%, 100% { opacity: 1; transform: none; }
}
@keyframes inv-d3 {
  0%, 56% { opacity: 0; transform: scale(0.4); }
  60%, 100% { opacity: 1; transform: none; }
}
@keyframes inv-wait {
  0%, 56% { opacity: 1; }
  59%, 100% { opacity: 0; }
}
@keyframes inv-appr {
  0%, 57% { opacity: 0; transform: translateY(0.3em); }
  61%, 100% { opacity: 1; transform: none; }
}
@keyframes inv-sync {
  0%, 64% { opacity: 0; transform: scale(0.85); }
  68%, 100% { opacity: 1; transform: none; }
}

/* The new job starts in the tray (row 7, Tue) and lands on Crew B, Thu:
   two columns right, three rows and the gap up. Its em is 0.68 of the grid's. */
@keyframes sch-new {
  0%, 22% { transform: translate(calc(-8.2em / 0.68), calc(7.2em / 0.68)); }
  26% { transform: translate(calc(-8.2em / 0.68), calc(7.2em / 0.68)) scale(1.08); }
  38% { transform: translate(0, 0) scale(1.08); }
  42%, 100% { transform: none; }
}
@keyframes sch-lift {
  0%, 22% { opacity: 0; }
  26%, 38% { opacity: 1; }
  42%, 100% { opacity: 0; }
}
@keyframes sch-hint {
  0%, 11% { opacity: 0; transform: translateX(0.4em); }
  16%, 37% { opacity: 1; transform: none; }
  41%, 100% { opacity: 0; transform: none; }
}
@keyframes sch-slot {
  0%, 13% { opacity: 0; }
  17%, 37% { opacity: 1; }
  41%, 100% { opacity: 0; }
}
@keyframes sch-check {
  0%, 42% { opacity: 0; transform: scale(0.5); }
  46%, 100% { opacity: 1; transform: none; }
}
@keyframes sch-ring {
  0%, 42% { opacity: 0; transform: scale(0.92); }
  45% { opacity: 1; transform: none; }
  56%, 100% { opacity: 0; transform: scale(1.12); }
}
@keyframes sch-done {
  0%, 42% { opacity: 0; }
  47%, 100% { opacity: 1; }
}
@keyframes sch-sync {
  0%, 50% { opacity: 0; transform: scale(0.85); }
  54%, 100% { opacity: 1; transform: none; }
}

@keyframes est-r1 {
  0%, 6% { opacity: 0; transform: translateY(0.35em); }
  10%, 100% { opacity: 1; transform: none; }
}
@keyframes est-r2 {
  0%, 13% { opacity: 0; transform: translateY(0.35em); }
  17%, 100% { opacity: 1; transform: none; }
}
@keyframes est-r3 {
  0%, 20% { opacity: 0; transform: translateY(0.35em); }
  24%, 100% { opacity: 1; transform: none; }
}
@keyframes est-add {
  0%, 29% { opacity: 0; transform: translateY(0.3em); }
  33%, 43% { opacity: 1; transform: none; }
  46%, 100% { opacity: 0; transform: none; }
}
@keyframes est-r4 {
  0%, 44% { opacity: 0; }
  48%, 100% { opacity: 1; }
}
/* The total rolls up as each line lands: $0, then 1,140, 3,450, 3,930, 4,115 */
@keyframes est-odo {
  0%, 7% { transform: translateY(0); }
  10%, 14% { transform: translateY(-20%); }
  17%, 21% { transform: translateY(-40%); }
  24%, 45% { transform: translateY(-60%); }
  49%, 100% { transform: translateY(-80%); }
}
@keyframes est-send {
  0%, 53% { opacity: 1; transform: none; }
  55% { opacity: 1; transform: scale(0.9); }
  58%, 100% { opacity: 0; transform: none; }
}
@keyframes est-sync {
  0%, 58% { opacity: 0; transform: scale(0.85); }
  62%, 100% { opacity: 1; transform: none; }
}
@keyframes est-draft {
  0%, 57% { opacity: 1; }
  60%, 100% { opacity: 0; }
}
@keyframes est-sent {
  0%, 58% { opacity: 0; transform: scale(0.8); }
  62%, 100% { opacity: 1; transform: none; }
}
.pin {
  display: grid;
  place-items: center;
}
.pin svg {
  width: 16px; height: 52px;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pin--add svg { stroke-dasharray: 3 4; opacity: 0.5; }
.sync-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.25rem 0.8rem;
  border: 1px solid rgb(142 221 200 / 0.35);
  border-radius: 999px;
  background: var(--ink);
  color: var(--mint);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
}

/* What you already run: the ice band under the hero board and the shared data */
.systems {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  padding: 1.1rem 1.5rem;
  border-radius: 18px;
  background: var(--ice);
  color: var(--navy);
}
.systems__name {
  font-size: 1.25rem;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
.systems__note {
  font-size: 0.9375rem;
  color: var(--slate);
}
.systems__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-left: auto;
}
.systems__list li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border-radius: 8px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--tile-line);
  font-size: 0.9375rem;
  font-weight: 600;
}
.systems__list svg {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: var(--navy);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.systems__list .is-more {
  padding-left: 0.9rem;
  background: none;
  box-shadow: inset 0 0 0 1px var(--ice-edge);
  color: var(--slate);
  font-weight: 550;
}

/* The one orchestrated moment: the frame appears, one tool lands first,
   then two more join it, the open slot shows, and the agents switch on. */
@media (prefers-reduced-motion: no-preference) {
  .board__host { animation: fade 0.6s ease 0.1s both; }
  .pin { animation: fade 0.5s ease 0.3s both; }
  .mod { animation: drop 0.55s var(--ease) both; }
  .mod:nth-child(1) { animation-delay: 0.4s; }
  .mod:nth-child(2) { animation-delay: 0.95s; }
  .mod:nth-child(3) { animation-delay: 1.08s; }
  .mods .mod--add { animation: fade 0.5s ease 1.4s both; }
  .mod__label .agent { animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.4) both; }
  .mod:nth-child(1) .agent { animation-delay: 1.6s; }
  .mod:nth-child(2) .agent { animation-delay: 1.72s; }
  .mod:nth-child(3) .agent { animation-delay: 1.84s; }
}
@keyframes drop {
  from { opacity: 0; transform: translateY(-16px); }
}
@keyframes fade {
  from { opacity: 0; }
}
@keyframes pop {
  from { opacity: 0; transform: scale(0.6); }
}

/* The board responds to its own width, not the viewport: two screens a row,
   then on phones one row that scrolls sideways, with the next screen peeking in */
@container (max-width: 900px) {
  .mods { --cols: repeat(2, minmax(0, 1fr)); --gap: 1rem; }
  .mod:nth-child(3)::before { display: none; }
  .board__sync { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pin:nth-child(n+3) { display: none; }
  .systems__list { margin-left: 0; }
}
@container (max-width: 560px) {
  .mods {
    --cols: repeat(3, 84%) 46%;
    --gap: 0.75rem;
    --label: 1.75rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .mods::-webkit-scrollbar { display: none; }
  .mod { gap: 0.6rem; scroll-snap-align: start; }
  .mod + .mod::before { display: none; }
  .mod--add { margin-top: calc(var(--label) + 0.6rem); }
  .mod__name { font-size: 1rem; }
  .mod--add .mod__name { font-size: 0.9375rem; }
}
@container (max-width: 440px) {
  .board__head { margin-bottom: 0.75rem; }
  .systems { padding: 1rem; }
  .systems__list li { padding: 0.35rem 0.65rem 0.35rem 0.5rem; font-size: 0.875rem; }
  .systems__list svg { width: 16px; height: 16px; }
}

@media (max-width: 560px) {
  .board { margin-inline: calc(var(--gutter) * -0.5); }
  .board__host { border-radius: 20px; padding: 0.75rem; }
}

/* ---------- The problem ---------- */

.problem {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2.5rem, 6vw, 6rem);
  align-items: end;
}
.problem .section__head { margin-bottom: 0; }
.problem__body {
  color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.55;
}
.problem__body p + p { margin-top: 1.25rem; color: var(--text); }

/* The workarounds, as quiet scraps */
.workarounds {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: clamp(3rem, 6vw, 4.5rem);
}
.workarounds li {
  display: flex;
  line-height: 1.35;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem 0.65rem 0.8rem;
  border: 1px dashed var(--line-2);
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
}
.workarounds svg {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 900px) {
  .problem { grid-template-columns: 1fr; }
  .workarounds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .workarounds { grid-template-columns: 1fr; gap: 0.5rem; }
}

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

/* Six turns on one path. Your team's turns are open cards, StayNative's are
   filled, so the back-and-forth reads as a checkerboard. */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  counter-reset: step;
}
.step {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 16px;
  counter-increment: step;
}
.step--us { background: var(--surface); }
.step__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}
.step__num {
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.02em;
}
.step h3 { margin-bottom: 0.6rem; }
.step p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.55;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.75rem 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
}
.who svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.who--team {
  background: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
}
.who--us {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
}
.who.who--us svg {
  width: 18px; height: 15px;
  stroke: none;
}
.who--agent {
  background: var(--lilac);
  color: var(--ink);
}
.who--auto {
  box-shadow: inset 0 0 0 1px var(--text-3);
  color: var(--text-2);
}
.who--auto svg { stroke-width: 2.4; }
/* The agent prepared it; a person on your team signs off */
.who--approve {
  background: rgb(179 164 255 / 0.14);
  box-shadow: inset 0 0 0 1px var(--lilac);
  color: var(--text);
}

.path__loop {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  color: var(--text-2);
  font-weight: 500;
}
.path__loop svg {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two columns break the checkerboard, so fill by owner instead */
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .step__top { margin-bottom: 1.5rem; }
}

/* ---------- Start small: the shared-data hub ---------- */

.grow__bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem 2.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.grow__tabs {
  justify-self: start;
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  gap: 0.25rem;
  padding: 0.3rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
}
.grow__tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.grow__tab:hover { color: var(--text); background: var(--surface-2); }
.grow__tab[aria-pressed="true"] {
  background: var(--text);
  color: var(--ink);
}
.grow__num {
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  flex: none;
  border-radius: 50%;
  background: var(--surface-2);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.grow__tab[aria-pressed="true"] .grow__num {
  background: var(--ink);
  color: var(--text);
}
.grow__caption {
  max-width: 34rem;
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.grow__caption [data-cap] { display: none; }
.grow[data-stage="1"] [data-cap="1"],
.grow[data-stage="2"] [data-cap="2"],
.grow[data-stage="3"] [data-cap="3"] { display: inline; }

/* The network: tools on both sides, wired into the shared data in the middle.
   Each spoke carries a label for what that tool adds to the shared data. */
.net {
  --spoke: clamp(5rem, 9vw, 8.5rem);
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) var(--spoke) minmax(0, 0.95fr) var(--spoke) minmax(0, 1fr);
}
.net__tools {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
}
.net__tools--left { grid-column: 1; grid-row: 1; }
.net__tools--right { grid-column: 5; grid-row: 1; }

.tool {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 5.25rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.08), 0 8px 24px rgb(0 0 0 / 0.4);
  outline: 1.5px dashed transparent;
  outline-offset: -1.5px;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, outline-color 0.35s ease;
}
.tool > * { transition: opacity 0.35s ease; }
.tool__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 10px;
  background: var(--navy);
}
.tool__icon svg {
  width: 21px; height: 21px;
  fill: none;
  stroke: var(--white);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tool__name {
  font-size: 1.0625rem;
  font-weight: 650;
  font-stretch: 105%;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.tool .badge { margin-left: auto; }
/* A glimpse of the tool's own data, the same records as the hero screens */
.tool__peek {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.3rem;
  color: var(--slate);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.2;
  white-space: nowrap;
}
.pk {
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--ice);
  box-shadow: inset 0 0 0 1px var(--tile-line);
  color: var(--navy);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 650;
}
.pk--ok { background: #E1F5EE; box-shadow: inset 0 0 0 1px #B5E6D7; color: #0B6A54; }

/* The spoke, and its label sitting on top of it */
.tool::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--spoke);
  height: 2px;
  margin-top: -1px;
  background: var(--mint);
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
.net__tools--left .tool::after { left: 100%; }
.net__tools--right .tool::after { right: 100%; }
.tool__flow {
  position: absolute;
  bottom: calc(50% + 0.4rem);
  width: var(--spoke);
  padding-inline: 0.35rem;
  color: var(--text-3);
  font-size: 0.75rem;
  font-weight: 550;
  line-height: 1.2;
  text-align: center;
}
.net__tools--left .tool__flow { left: 100%; }
.net__tools--right .tool__flow { right: 100%; }

.tool__open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--text-3);
  font-size: 0.9375rem;
  font-weight: 550;
  opacity: 0;
  pointer-events: none;
}
.tool__open svg {
  width: 18px; height: 18px;
  fill: none;
  stroke: var(--text-3);
  stroke-width: 2;
  stroke-linecap: round;
}

/* A slot you haven't filled yet */
.tool.is-off {
  background: transparent;
  box-shadow: none;
  outline-color: var(--text-3);
}
.tool.is-off > * { opacity: 0; }
.tool.is-off > .tool__open { opacity: 1; }
.tool.is-off::after {
  opacity: 0.4;
  background: repeating-linear-gradient(90deg, var(--text-3) 0 5px, transparent 5px 10px);
}

.badge {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--ink);
}
.badge svg { width: 14px; height: 14px; }

/* The shared data, hosted by StayNative */
.hub {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 1.25rem;
  border: 1px solid rgb(142 221 200 / 0.4);
  border-radius: 24px;
  background:
    radial-gradient(80% 60% at 50% 0%, rgb(142 221 200 / 0.08), transparent 70%),
    var(--surface);
  text-align: center;
}
.hub__mark {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 0.25rem;
  border-radius: 14px;
  background: var(--surface-2);
}
.hub__mark svg { width: 30px; height: 26px; }
.hub__title {
  font-size: clamp(1.375rem, 1rem + 0.9vw, 1.75rem);
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.hub__note {
  color: var(--text-3);
  font-size: 0.875rem;
  font-weight: 500;
}
.hub__records {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.hub__records li {
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
}

.net__sync {
  position: relative;
  display: grid;
  place-items: center;
  height: 3.75rem;
}
.net__sync svg {
  width: 16px; height: 52px;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.net__sync span {
  position: absolute;
  top: 50%;
  left: calc(50% + 1.25rem);
  transform: translateY(-50%);
  color: var(--mint);
  font-size: 0.8125rem;
  font-weight: 550;
  white-space: nowrap;
}

.grow__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin-top: 1.75rem;
  color: var(--text-3);
  font-size: 0.875rem;
  font-weight: 500;
}
.grow__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.grow__legend .badge { width: 1.375rem; height: 1.375rem; }
.grow__legend .badge svg { width: 11px; height: 11px; }
.legend-slot {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 6px;
  outline: 1.5px dashed var(--text-3);
  outline-offset: -1.5px;
}
.legend-pulse {
  position: relative;
  width: 1.75rem;
  height: 2px;
  background: rgb(142 221 200 / 0.55);
}
.legend-pulse::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--mint);
}

/* Data on the move: in from the tools on the left, through the shared data,
   out to the tools on the right. Three passes, only once it's in view. */
.tool__pulse {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgb(142 221 200 / 0.25);
  opacity: 0;
}
.net__tools--left .tool__pulse { left: 100%; }
.net__tools--right .tool__pulse { right: 100%; }
.tool.is-off .tool__pulse { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .grow.is-playing .net__tools--left .tool__pulse { animation: pulse-in 1.6s ease-in-out 3; }
  .grow.is-playing .net__tools--right .tool__pulse { animation: pulse-out 1.6s ease-in-out 3; }
  .grow.is-playing .net__tools li:nth-child(2) .tool__pulse { animation-delay: 0.15s; }
  .grow.is-playing .net__tools li:nth-child(3) .tool__pulse { animation-delay: 0.3s; }
}
@keyframes pulse-in {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  40% { opacity: 1; }
  48%, 100% { opacity: 0; transform: translateX(calc(var(--spoke) - 8px)); }
}
@keyframes pulse-out {
  0%, 50% { opacity: 0; transform: translateX(calc(8px - var(--spoke))); }
  58% { opacity: 1; }
  88% { opacity: 1; }
  96%, 100% { opacity: 0; transform: translateX(0); }
}

.growth__note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-2);
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 550;
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .grow__bar { grid-template-columns: 1fr; }
}

/* Narrow: the tools hang off one spine that runs down into the shared data */
@media (max-width: 820px) {
  .net {
    --spoke: 1.25rem;
    --rail: 0.5rem;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: calc(var(--rail) + var(--spoke));
  }
  .net::before {
    content: "";
    position: absolute;
    top: 2.6rem;
    bottom: 3rem;
    left: var(--rail);
    width: 2px;
    margin-left: -1px;
    background: rgb(142 221 200 / 0.55);
  }
  .net__tools { gap: 0.75rem; grid-auto-rows: auto; }
  .hub {
    order: 3;
    margin: 0.75rem 0 0 calc(-1 * (var(--rail) + var(--spoke)));
  }
  .net__tools--left .tool::after,
  .net__tools--right .tool::after { left: auto; right: 100%; }
  .tool { min-height: 4.5rem; }
  .tool__flow {
    position: static;
    width: auto;
    padding: 0;
    color: var(--slate);
    text-align: left;
    font-size: 0.8125rem;
  }
  .tool__pulse,
  .tool__peek { display: none; }
  .grow__legend > span:last-child { display: none; }
  .systems__list { margin-left: 0; }
}
@media (max-width: 560px) {
  .grow__tabs {
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-radius: 18px;
  }
  .grow__tab {
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.6rem 0.35rem;
    border-radius: 14px;
    font-size: 0.8125rem;
    white-space: normal;
    text-align: center;
  }
}

/* Phones: the whole story in about one screen. The six tools sit in two
   columns on either side of one mint trunk that runs straight down into the
   shared data, then on to what you already run. A tool that isn't added yet
   is a quiet outline, nudged off the trunk; adding it plugs it in. The stage
   tabs become a three-part step track that loops while the diagram is on
   screen (see the modular script). */
@media (max-width: 700px) {
  .grow__bar { gap: 0.9rem; margin-bottom: 1.5rem; }

  .grow__tabs {
    justify-self: stretch;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .grow__tab {
    position: relative;
    align-items: flex-start;
    padding: 0.95rem 0 0.35rem;
    border-radius: 4px;
    background: none;
    color: var(--text-3);
    font-size: 0.8125rem;
    line-height: 1.25;
    white-space: normal;
    text-align: left;
    text-wrap: balance;
  }
  .grow__tab:hover { background: none; color: var(--text); }
  .grow__tab[aria-pressed="true"] { background: none; color: var(--text); font-weight: 600; }
  .grow__num { display: none; }
  .grow__tab::before,
  .grow__tab::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--line-2);
  }
  .grow__tab::after {
    background: var(--text);
    transform: scaleX(0);
    transform-origin: left;
  }
  .grow__tab[aria-pressed="true"]::after,
  .grow[data-stage="2"] [data-stage-btn="1"]::after,
  .grow[data-stage="3"] [data-stage-btn="1"]::after,
  .grow[data-stage="3"] [data-stage-btn="2"]::after { transform: none; }
  [data-stage-btn="1"] { --hold: 4.5s; }
  [data-stage-btn="2"] { --hold: 5.5s; }
  [data-stage-btn="3"] { --hold: 8s; }

  /* All three captions share one cell, so the diagram never moves */
  .grow__caption {
    display: grid;
    font-size: 0.9375rem;
  }
  .grow__caption [data-cap] {
    display: block;
    grid-area: 1 / 1;
    visibility: hidden;
  }
  .grow[data-stage="1"] [data-cap="1"],
  .grow[data-stage="2"] [data-cap="2"],
  .grow[data-stage="3"] [data-cap="3"] { visibility: visible; }

  .net {
    --h: 3.5rem;      /* tool height */
    --g: 0.625rem;    /* between tools in a column */
    --gap: 1.5rem;    /* between the columns, where the trunk runs */
    --s: 1.25rem;     /* last tool to the shared data */
    --spoke: calc(var(--gap) / 2);
    --stub: calc(var(--gap) / 2 - 4px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    padding: 0;
  }
  .net::before {
    top: calc(var(--h) / 2);
    bottom: 2rem;
    left: 50%;
  }
  .net__tools {
    grid-row: 1;
    grid-auto-rows: var(--h);
    gap: var(--g);
  }
  .net__tools--left { grid-column: 1; }
  .net__tools--right { grid-column: 2; }

  .tool {
    min-height: 0;
    gap: 0.55rem;
    padding: 0 0.7rem;
    border-radius: 12px;
  }
  .tool__icon { width: 1.75rem; height: 1.75rem; border-radius: 8px; transition: background-color 0.35s ease; }
  .tool__icon svg { width: 16px; height: 16px; transition: stroke 0.35s ease; }
  .tool__name { font-size: 0.875rem; transition: color 0.35s ease; }
  .tool__flow { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tool__open { display: none; }
  /* The agent badge sits on the outer corner, away from the trunk */
  .tool .badge {
    position: absolute;
    top: -0.45rem;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    box-shadow: 0 0 0 2px var(--ink);
  }
  .tool .badge svg { width: 10px; height: 10px; }
  .net__tools--left .tool .badge { left: -0.45rem; }
  .net__tools--right .tool .badge { right: -0.45rem; }
  .net__tools--left .tool::after { left: 100%; right: auto; }
  .net__tools--right .tool::after { left: auto; right: 100%; }

  /* Not added yet: an outline with its name, unplugged from the trunk */
  .tool.is-off {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--line-2);
    outline-color: transparent;
  }
  .net__tools--left .tool.is-off { transform: translateX(-6px); }
  .net__tools--right .tool.is-off { transform: translateX(6px); }
  .tool.is-off > * { opacity: 1; }
  .tool.is-off .badge { opacity: 0; }
  .tool.is-off .tool__icon { background: var(--surface-2); }
  .tool.is-off .tool__icon svg { stroke: var(--text-3); }
  .tool.is-off .tool__name { color: var(--text-3); }
  .tool.is-off::after { opacity: 1; background: var(--line-2); }

  .tool__pulse { display: block; z-index: 2; }
  .tool.is-off .tool__pulse { display: block; visibility: hidden; }
  /* How far each tool's data drops down the trunk to reach the shared data */
  .net__tools li:nth-child(1) { --down: calc(2 * (var(--h) + var(--g)) + var(--h) / 2 + var(--s) + 6px); }
  .net__tools li:nth-child(2) { --down: calc(var(--h) + var(--g) + var(--h) / 2 + var(--s) + 6px); }
  .net__tools li:nth-child(3) { --down: calc(var(--h) / 2 + var(--s) + 6px); }

  .hub {
    z-index: 1;
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0;
    gap: 0.2rem;
    margin: var(--s) 0 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: 18px;
  }
  .hub__mark { display: none; }
  .hub__title { font-size: 1.25rem; }
  .hub__note { font-size: 0.8125rem; }
  .hub__records { gap: 0.3rem; margin-top: 0.55rem; }
  .hub__records li { padding: 0.2rem 0.5rem; font-size: 0.75rem; }

  .net__sync { height: 3rem; }
  .net__sync svg { height: 40px; }

  .systems {
    gap: 0.6rem 1rem;
    padding: 0.85rem 1rem 0.95rem;
    border-radius: 16px;
  }
  .systems__name { font-size: 1.0625rem; }
  .systems__note { font-size: 0.8125rem; }
  .systems__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.375rem;
    width: 100%;
  }
  .systems__list li { gap: 0.35rem; padding: 0.3rem 0.55rem 0.3rem 0.45rem; border-radius: 7px; font-size: 0.8125rem; }
  .systems__list .is-more { padding-left: 0.55rem; }
  .systems__list svg { width: 14px; height: 14px; }

  .grow__legend { margin-top: 1rem; font-size: 0.8125rem; }
  .grow__legend > span:nth-child(2) { display: none; }

  .growth__note { margin-top: 2rem; padding-top: 1.25rem; font-size: 1.0625rem; }
}

/* Phones, in motion: the active step's track fills, and when it's full the
   script shows the next stage. Tools slide onto the trunk as they're added.
   One mint dot at a time carries data down the trunk into the shared data
   from a tool on the left, then back up and out to a tool on the right. */
@media (prefers-reduced-motion: no-preference) {
  @media (max-width: 700px) {
    .grow.is-looping .grow__tab[aria-pressed="true"]::after { animation: grow-step var(--hold) linear both; }
    .tool { transition: background-color 0.35s ease, box-shadow 0.35s ease, outline-color 0.35s ease, transform 0.45s var(--ease); }
    .grow.is-live .net__tools--left .tool__pulse { animation: m-in 7.2s linear infinite; }
    .grow.is-live .net__tools--right .tool__pulse { animation: m-out 7.2s linear infinite; }
    .grow.is-live .net__tools--right li:nth-child(1) .tool__pulse { animation-delay: 1.2s; }
    .grow.is-live .net__tools--left li:nth-child(2) .tool__pulse { animation-delay: 2.4s; }
    .grow.is-live .net__tools--right li:nth-child(2) .tool__pulse { animation-delay: 3.6s; }
    .grow.is-live .net__tools--left li:nth-child(3) .tool__pulse { animation-delay: 4.8s; }
    .grow.is-live .net__tools--right li:nth-child(3) .tool__pulse { animation-delay: 6s; }
  }
}
@keyframes grow-step {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes m-in {
  0% { opacity: 0; transform: translate(0, 0); }
  2% { opacity: 1; }
  5% { transform: translate(var(--stub), 0); }
  14% { opacity: 1; transform: translate(var(--stub), var(--down)); }
  16%, 100% { opacity: 0; transform: translate(var(--stub), var(--down)); }
}
@keyframes m-out {
  0% { opacity: 0; transform: translate(calc(-1 * var(--stub)), var(--down)); }
  2% { opacity: 1; }
  11% { transform: translate(calc(-1 * var(--stub)), 0); }
  14% { opacity: 1; transform: translate(0, 0); }
  16%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* ---------- Replacing off-the-shelf software ---------- */

.proof {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 44rem;
  margin-top: 2rem;
  color: var(--text);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: -0.012em;
  line-height: 1.3;
}
.proof__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  margin-top: 0.05em;
  border-radius: 50%;
  background: rgb(142 221 200 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(142 221 200 / 0.5);
}
.proof__mark svg {
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The comparison, drawn. Left: separate subscriptions, wired together with
   brittle dashed connectors, one of them broken (the only coral on the page).
   Right: your tools around one set of shared data, solid mint lines with data
   moving, synced both ways. Each drawing is one box with a fixed aspect, the
   wires an SVG in the same coordinates (1000 x 640), and everything else
   sized in em off the box width, so it scales like a picture. */
.versus {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}
.vs {
  padding: clamp(1rem, 2.2vw, 1.75rem);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background:
    radial-gradient(60% 50% at 65% 75%, rgb(244 161 147 / 0.06), transparent 70%),
    var(--surface);
}
.vs--new {
  border-color: rgb(142 221 200 / 0.35);
  background:
    radial-gradient(55% 50% at 50% 40%, rgb(142 221 200 / 0.08), transparent 70%),
    var(--surface);
}
.vs__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: clamp(0.75rem, 2vw, 1.25rem);
}
.vs__name {
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 650;
  font-stretch: 110%;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.vs__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.8rem 0.3rem 0.65rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 550;
  line-height: 1.3;
}
.vs__tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.vs__tag--ok { border-color: rgb(142 221 200 / 0.4); color: var(--mint); }
.vs__tag--ok::before { background: var(--mint); }

.vs__verdict {
  display: grid;
  place-items: center;
}
.vs__verdict svg {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0.7rem;
  border-radius: 50%;
  background: var(--text);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  box-shadow: 0 0 0 6px var(--ink);
}

.vs__art {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 25 / 16;
}
.vs__art > * {
  position: absolute;
  font-size: 2.6cqw;
  line-height: 1.2;
  white-space: nowrap;
}
.vs__art svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.vs__wires {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Off-the-shelf: generic grey-white app tiles, a little askew */
.app,
.addon,
.own {
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 0.8em 0.6em 0.6em;
  border-radius: 0.7em;
  font-weight: 600;
  box-shadow: 0 0.6em 1.4em -0.4em rgb(0 0 0 / 0.55);
}
.app {
  background: #E4E7EF;
  color: #2B3657;
  transform: rotate(var(--tilt, 0deg));
}
.app__icon,
.own__icon {
  display: grid;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  flex: none;
  border-radius: 0.45em;
  background: #C8CEDD;
}
.app__icon svg,
.own__icon svg { width: 1.1em; height: 1.1em; stroke-width: 1.8; }
.app--crm { left: 4%; top: 7.8%; width: 29%; --tilt: -3deg; }
.app--sched { left: 61%; top: 4.7%; width: 32%; --tilt: 2deg; }
.app--pm { left: 58%; top: 45%; width: 38%; --tilt: -1.5deg; }
.app--appr { left: 5%; top: 49%; width: 29%; --tilt: 2.5deg; }
.app--sheet { left: 31%; top: 76.5%; width: 31%; --tilt: -1deg; }
.seat {
  position: absolute;
  right: 0.6em;
  bottom: -0.85em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.55em 0.2em 0.4em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--ink);
  color: var(--text-2);
  font-size: 0.68em;
  font-weight: 600;
}
.seat svg { width: 1.1em; height: 1.1em; stroke-width: 1.8; }
.addon {
  left: 36%;
  top: 30%;
  padding: 0.45em 0.6em 0.45em 0.55em;
  border: 1px dashed var(--text-3);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 2.2cqw;
  font-weight: 550;
  box-shadow: none;
  transform: rotate(-1.5deg);
}
.addon svg { width: 1.2em; height: 1.2em; stroke-width: 1.8; }
.addon__extra {
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--ink);
  color: var(--text-3);
  font-size: 0.85em;
}

.wire {
  stroke: var(--text-3);
  stroke-width: 2.5;
  stroke-dasharray: 8 8;
  opacity: 0.85;
}
.wire--hand { stroke-dasharray: 1 10; stroke-width: 3.5; opacity: 0.6; }
.snap circle { fill: var(--ink); stroke: var(--coral); stroke-width: 3; }
.snap path { stroke: var(--coral); stroke-width: 3.5; }
.snap-note,
.retyped { color: var(--coral); font-size: 1.9cqw; font-weight: 600; }
.snap-note { left: 66.5%; top: 64.5%; }
.retyped {
  left: 64.5%;
  top: 82%;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.7em 0.3em 0.55em;
  border: 1px dashed rgb(244 161 147 / 0.6);
  border-radius: 999px;
  background: rgb(244 161 147 / 0.08);
}
.retyped svg { width: 1.15em; height: 1.15em; stroke-width: 1.8; }
.copied {
  left: 15%;
  top: 62%;
  padding: 0.25em 0.6em;
  border-radius: 0.4em;
  background: var(--white);
  color: var(--navy);
  font-size: 1.9cqw;
  font-weight: 650;
  box-shadow: 0 0.4em 1em -0.3em rgb(0 0 0 / 0.6);
  opacity: 0;
}

/* Built with you: crisp white tools, the shared data in the middle */
.own {
  width: 28%;
  background: var(--white);
  color: var(--navy);
  font-size: 2.4cqw;
}
.own__icon { background: var(--ice); }
.own__ai {
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  flex: none;
  margin-left: auto;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--ink);
}
.own__ai svg { width: 0.8em; height: 0.8em; stroke: none; }
.own--a { left: 3%; top: 6.3%; }
.own--b { left: 69.5%; top: 6.3%; }
.own--c { left: 3%; top: 52.2%; }
.own--d { left: 69.5%; top: 52.2%; }
.core {
  left: 37%;
  top: 20.3%;
  width: 26%;
  height: 34.4%;
  font-size: 3cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  border: 1px solid rgb(142 221 200 / 0.55);
  border-radius: 0.9em;
  background: var(--surface-2);
  font-weight: 650;
  font-stretch: 105%;
}
.core__mark { width: 1.6em; height: 1.4em; margin-bottom: 0.15em; color: var(--text); }
.core__note { color: var(--text-3); font-size: 0.72em; font-weight: 500; }
.core__ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px var(--mint);
  opacity: 0;
}
.ground {
  left: 4%;
  right: 4%;
  top: 75%;
  height: 18.75%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0 0.6em 0 1em;
  border-radius: 0.8em;
  background: var(--ice);
  color: var(--navy);
  font-weight: 650;
  font-stretch: 108%;
}
.ground__sync {
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: #DDF3EC;
  color: #0B6A54;
  font-size: 0.78em;
  font-stretch: 100%;
}
.link { stroke: var(--mint); stroke-width: 3; opacity: 0.5; }
.flow {
  stroke: var(--mint);
  stroke-width: 6;
  stroke-dasharray: 0.1 26;
}

@media (prefers-reduced-motion: no-preference) {
  .is-live .wire--c { animation: flicker-a 10s linear infinite; }
  .is-live .wire--d { animation: flicker-b 10s linear infinite; }
  .is-live .wire--snap1 { animation: snap-1 10s var(--ease) infinite; }
  .is-live .wire--snap2 { animation: snap-2 10s var(--ease) infinite; }
  .is-live .snap { animation: snap-mark 10s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
  .is-live .snap-note { animation: snap-note 10s ease infinite; }
  .is-live .copied { animation: copied 10s ease-in-out infinite; }
  .is-live .retyped { animation: retyped 10s var(--ease) infinite; }
  .is-live .flow { animation: flow 1.6s linear infinite; }
  .is-live .flow--late { animation-delay: -0.8s; }
  .is-live .core__ring { animation: ring 3.2s ease-out infinite; }
}
@keyframes flicker-a {
  0%, 38% { opacity: 0.85; }
  39% { opacity: 0.15; }
  40% { opacity: 0.85; }
  41.5% { opacity: 0.2; }
  43%, 100% { opacity: 0.85; }
}
@keyframes flicker-b {
  0%, 72% { opacity: 0.85; }
  73% { opacity: 0.1; }
  74.5% { opacity: 0.85; }
  76% { opacity: 0.25; }
  77%, 100% { opacity: 0.85; }
}
/* The broken connector: whole, then it snaps apart and stays broken */
@keyframes snap-1 {
  0%, 20% { transform: translate(-9px, 11px); }
  24%, 90% { transform: none; }
  96%, 100% { transform: translate(-9px, 11px); }
}
@keyframes snap-2 {
  0%, 20% { transform: translate(9px, -11px); }
  24%, 90% { transform: none; }
  96%, 100% { transform: translate(9px, -11px); }
}
@keyframes snap-mark {
  0%, 21% { opacity: 0; transform: scale(0.3); }
  26%, 90% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: scale(0.3); }
}
@keyframes snap-note {
  0%, 23% { opacity: 0; }
  28%, 90% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
/* Someone carries a job across by hand, slowly */
@keyframes copied {
  0%, 40% { opacity: 0; transform: none; }
  44% { opacity: 1; transform: none; }
  64% { opacity: 1; transform: translate(7.5em, 5.6em); }
  68%, 100% { opacity: 0; transform: translate(7.5em, 5.6em); }
}
@keyframes retyped {
  0%, 63% { transform: none; }
  66% { transform: scale(1.08); }
  70%, 100% { transform: none; }
}
@keyframes flow {
  to { stroke-dashoffset: -26.1; }
}
@keyframes ring {
  0% { opacity: 0.7; transform: none; }
  70%, 100% { opacity: 0; transform: scale(1.1, 1.16); }
}

@media (max-width: 900px) {
  .versus { grid-template-columns: minmax(0, 1fr); }
  .vs__verdict { height: 3.5rem; }
  .vs__verdict svg { transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .versus { margin-inline: calc(var(--gutter) * -0.5); }
  .vs { padding: 0.9rem 0.6rem 0.75rem; border-radius: 20px; }
  .vs__head { padding-inline: 0.4rem; }
  .vs__art > * { font-size: 2.85cqw; }
  .addon { font-size: 2.4cqw; }
  .own { font-size: 2.5cqw; }
  .core { font-size: 3.2cqw; }
  .snap-note,
  .retyped,
  .copied { font-size: 2.3cqw; }
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.0625rem;
  line-height: 1.45;
}
.compare th,
.compare td {
  width: 50%;
  padding: 0.85rem 1.5rem 0.85rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  padding-top: 0;
  border-bottom-color: var(--line-2);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 112%;
  letter-spacing: 0.02em;
}
.compare thead th:first-child { color: var(--text-3); }
.compare thead th:last-child { color: var(--text); }
.compare td:first-child { color: var(--text-3); }
.compare td:last-child { color: var(--text); font-weight: 550; }
.compare td:last-child::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.7rem 0.15rem 0;
  border-radius: 50%;
  background: var(--mint);
  vertical-align: middle;
}

/* The second column lines up with the "Built with you" drawing */
.compare th:last-child,
.compare td:last-child { padding-left: 1.75rem; }
@media (max-width: 900px) {
  .compare th:last-child,
  .compare td:last-child { padding-left: 0; }
}
@media (max-width: 520px) {
  .compare { font-size: 0.9375rem; }
  .compare th, .compare td { padding-right: 0.9rem; }
}

/* ---------- AI agents ---------- */

#ai {
  background: radial-gradient(50% 40% at 20% 15%, rgb(179 164 255 / 0.06), transparent 70%);
}

.window {
  margin-top: 1.25rem;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  overflow: hidden;
}
.window__bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  background: var(--surface-2);
  font-weight: 600;
  font-stretch: 105%;
}
.window__bar svg {
  width: 20px; height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tasks__head {
  display: flex;
  justify-content: space-between;
  padding: 0.7rem 1.1rem 0.35rem;
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 500;
}
.tasks li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--line);
  font-weight: 500;
}

.control {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.console {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: var(--surface);
}

/* The dial: four stops on one track, lilac filling up to the one you pick */
.dial {
  --p: 0.3333;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.dial:has(input[value="1"]:checked) { --p: 0; }
.dial:has(input[value="2"]:checked) { --p: 0.3333; }
.dial:has(input[value="3"]:checked) { --p: 0.6667; }
.dial:has(input[value="4"]:checked) { --p: 1; }

.dial__legend {
  padding: 0;
  font-size: 1.1875rem;
  font-weight: 600;
  font-stretch: 108%;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.dial__ends {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.1rem 0 0.9rem;
  color: var(--text-3);
  font-size: 0.8125rem;
  font-weight: 500;
}
.dial__ends span:first-child::before { content: "\2190  "; }
.dial__ends span:last-child::after { content: "  \2192"; }

.dial__stops {
  --knob: 1.625rem;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.dial__stops::before,
.dial__stops::after {
  content: "";
  position: absolute;
  top: calc(var(--knob) / 2 - 2px);
  left: 12.5%;
  height: 4px;
  border-radius: 2px;
}
.dial__stops::before {
  right: 12.5%;
  background: var(--line-2);
}
.dial__stops::after {
  width: calc(75% * var(--p));
  background: var(--lilac);
  transition: width 0.35s var(--ease);
}
.dial__stop {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-inline: 0.25rem;
  text-align: center;
  cursor: pointer;
}
.dial__stop input {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--knob);
  height: var(--knob);
  margin: 0 0 0 calc(var(--knob) / -2);
  opacity: 0;
  cursor: pointer;
}
.dial__knob {
  width: var(--knob);
  height: var(--knob);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--text-3);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.dial__name {
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.25;
}
.dial__stop:hover .dial__name { color: var(--text); }
.dial__stop:hover .dial__knob { box-shadow: inset 0 0 0 2px var(--lilac); }
.dial__stop input:checked + .dial__knob {
  background: var(--lilac);
  box-shadow: 0 0 0 7px rgb(179 164 255 / 0.2);
}
.dial__stop input:checked ~ .dial__name {
  color: var(--text);
  font-weight: 650;
}
.dial__stop input:focus-visible + .dial__knob {
  outline: 2px solid var(--lilac);
  outline-offset: 5px;
}
/* Stops below the one you picked fill in too */
.dial:has(input[value="2"]:checked) .dial__stop:nth-child(-n+1) .dial__knob,
.dial:has(input[value="3"]:checked) .dial__stop:nth-child(-n+2) .dial__knob,
.dial:has(input[value="4"]:checked) .dial__stop:nth-child(-n+3) .dial__knob {
  background: var(--lilac);
  box-shadow: none;
}

/* Each setting shows only what's true at that setting */
.console:has(input[value="1"]:checked) [data-on]:not([data-on~="1"]),
.console:has(input[value="2"]:checked) [data-on]:not([data-on~="2"]),
.console:has(input[value="3"]:checked) [data-on]:not([data-on~="3"]),
.console:has(input[value="4"]:checked) [data-on]:not([data-on~="4"]) { display: none; }

.console:has(input[value="1"]:checked) li[data-agent~="1"],
.console:has(input[value="2"]:checked) li[data-agent~="2"],
.console:has(input[value="3"]:checked) li[data-agent~="3"],
.console:has(input[value="4"]:checked) li[data-agent~="4"] { background: rgb(179 164 255 / 0.1); }

.console__desc {
  display: grid;
  align-items: center;
  min-height: 4.5rem;
  margin-top: 1.75rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  background: var(--surface-2);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
}
.console .tasks li { transition: background-color 0.25s ease; }

/* Beside the dial: three short rules, each with a small moving icon, then
   the one about learning, set apart because it carries the promise that
   your data never trains AI models */
.rules { display: grid; align-content: start; }
.rule {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: center;
  gap: 0.2rem 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line);
}
.rule:first-child { padding-top: 0.25rem; border-top: 0; }
.rule__icon {
  display: grid;
  grid-row: span 2;
  align-self: start;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 14px;
  background: rgb(179 164 255 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(179 164 255 / 0.28);
  color: var(--lilac);
}
.rule__icon svg {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.rule__icon circle[class^="k"] { fill: var(--surface); }
.rule__icon .track { opacity: 0.3; }
.rule__icon .fill { stroke-dasharray: 100; stroke-dashoffset: 27; }
.rule__icon .hand { stroke: var(--text); transform-origin: 16px 22px; }
.rule__icon .orbit { stroke-dasharray: 2 4.2; opacity: 0.5; }
.rule__icon .dots { fill: currentColor; stroke: none; transform-origin: 16px 16px; }
.rule__icon .spark { fill: currentColor; stroke: none; transform-origin: 16px 15px; }
.rule__icon .lid { transform-origin: 16px 16px; }
.rule h3 { align-self: end; font-size: 1.125rem; }
.rule p {
  grid-column: 2;
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.45;
}
.rule--learn {
  margin-top: 0.75rem;
  padding: 1.25rem;
  border: 1px solid rgb(179 164 255 / 0.4);
  border-radius: 18px;
  background:
    radial-gradient(90% 80% at 0% 0%, rgb(179 164 255 / 0.1), transparent 70%),
    var(--surface);
}
.rule__pledge {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 0.65rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-2);
}
.rule .rule__pledge { color: var(--text); font-weight: 600; }
.rule__pledge svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: no-preference) {
  .is-live .rule__icon .k1 { animation: knob-a 7s var(--ease) infinite; }
  .is-live .rule__icon .k2 { animation: knob-b 7s var(--ease) infinite; }
  .is-live .rule__icon .k3 { animation: knob-a 7s var(--ease) -3.2s infinite reverse; }
  .is-live .rule__icon .fill { animation: trust-fill 7s var(--ease) 0.6s infinite both; }
  .is-live .rule__icon .hand { animation: trust-hand 7s var(--ease) 0.6s infinite both; }
  .is-live .rule__icon .lid { animation: blink 5.5s ease 1.4s infinite; }
  .is-live .rule__icon .dots { animation: orbit 9s linear infinite; }
  .is-live .rule__icon .spark { animation: spark 4.5s ease-in-out infinite; }
}
@keyframes knob-a {
  0%, 12% { transform: none; }
  24%, 58% { transform: translateX(7px); }
  70%, 100% { transform: none; }
}
@keyframes knob-b {
  0%, 30% { transform: none; }
  42%, 76% { transform: translateX(-6px); }
  88%, 100% { transform: none; }
}
@keyframes trust-fill {
  0%, 10% { stroke-dashoffset: 85; }
  45%, 80% { stroke-dashoffset: 27; }
  95%, 100% { stroke-dashoffset: 85; }
}
@keyframes trust-hand {
  0%, 10% { transform: rotate(-105deg); }
  45%, 80% { transform: none; }
  95%, 100% { transform: rotate(-105deg); }
}
@keyframes blink {
  0%, 90%, 100% { transform: none; }
  94% { transform: scaleY(0.1); }
}
@keyframes orbit {
  to { transform: rotate(360deg); }
}
@keyframes spark {
  0%, 100% { transform: none; }
  50% { transform: scale(1.18); }
}

@media (max-width: 960px) {
  .control { grid-template-columns: 1fr; }
  .rules {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 1.5rem;
  }
  .rule,
  .rule:first-child {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 1.25rem 0 0;
    border-top: 1px solid var(--line-2);
  }
  .rule__icon { grid-row: auto; margin-bottom: 0.5rem; }
  .rule p { grid-column: 1; }
  .rule--learn {
    grid-column: 1 / -1;
    grid-template-columns: 3rem minmax(0, 1fr);
    margin-top: 1.5rem;
    padding: 1.25rem;
  }
  .rule--learn .rule__icon { grid-row: span 2; margin: 0; }
  .rule--learn p { grid-column: 2; }
}
@media (max-width: 680px) {
  .rules { grid-template-columns: 1fr; }
  .rule,
  .rule:first-child { grid-template-columns: 3rem minmax(0, 1fr); padding: 1.1rem 0; }
  .rule:first-child { padding-top: 0.25rem; border-top: 0; }
  .rule__icon { grid-row: span 2; margin: 0; }
  .rule p { grid-column: 2; }
  .rule--learn { margin-top: 0.5rem; padding: 1.1rem; }
}
@media (max-width: 520px) {
  .console { padding: 1.1rem; }
  .tasks li { flex-wrap: nowrap; padding-inline: 0.9rem; font-size: 1rem; }
  .tasks li > span:first-child { flex: 1 1 auto; min-width: 0; }
  .tasks .who { flex: none; }
  .dial__stops { --knob: 1.375rem; }
  .dial__name { font-size: 0.8125rem; }
  .dial__stop { padding-inline: 0.1rem; }
}

/* ---------- We run it. Your data stays yours. ---------- */

#security {
  background: radial-gradient(45% 40% at 85% 12%, rgb(142 221 200 / 0.05), transparent 70%);
}

/* The data graphic is the full-width top tile of the commitments bento:
   the same card, and the grid's gap below it. Inside, one grid: your team on
   the left; StayNative's hosting on the right, a recessed plate like the
   tiles' drawings, holding your workspace (the white screen), other clients'
   locked spaces, the backups, and exports. The lanes cross the plate's edge.
   Default styles are the finished frame. */
.dv,
.sf {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}
.dv {
  container-type: inline-size;
  margin: 0 0 1rem;
  padding: 1.25rem;
}
.dv__art {
  /* The plate starts on the bento's fourth column line, the left edge of
     the AI tile below: a quarter of the card, plus a quarter of the grid's
     gap, less half the card's padding and border */
  --to-plate: calc(25cqw + 1rem / 4 - 1.25rem / 2 - 0.5px);
  --lane: calc(var(--to-plate) - 9.5em + 1.75em);
  --plate: #0C142B;
  position: relative;
  display: grid;
  grid-template-columns: 9.5em calc(var(--to-plate) - 9.5em) 1.75em minmax(0, 1fr) 3.25em 9.5em 1.75em;
  grid-template-rows: 1.5em auto 1.4em auto 1.4em auto 1.6em;
  font-size: clamp(0.75rem, 1.2cqw, 0.875rem);
  line-height: 1.25;
  white-space: nowrap;
}
.dv__art svg:not(.host-tag__mark) {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dv__art > :not(.dv__frame) { position: relative; z-index: 1; }
/* The plate is opaque (Ink at 55% over Surface, as the tiles' plates) so
   the "Nothing shared" label can mask the wall line with the same color */
.dv__frame {
  grid-area: 1 / 3 / 8 / 8;
  border-radius: 12px;
  background:
    radial-gradient(55% 60% at 45% 45%, rgb(142 221 200 / 0.07), transparent 70%),
    var(--plate);
  box-shadow: inset 0 0 0 1px var(--line);
}
.dv__head {
  display: flex;
  grid-area: 2 / 4 / 3 / 7;
  align-items: center;
  gap: 0.6em;
}
.dv__head .host-tag { font-size: 1em; }
.dv__where {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.35em 0.85em 0.35em 0.65em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-weight: 500;
}
.dv__where svg { width: 1.15em; height: 1.15em; color: var(--mint); }
.dv__watch {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin-left: auto;
  color: var(--mint);
  font-weight: 600;
}
.dv__watch i,
.op-ok i {
  position: relative;
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--mint);
}
.dv__watch i::after,
.op-ok i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mint);
  opacity: 0;
}

/* Your team, outside the hosting */
.dv__team {
  display: flex;
  grid-area: 4 / 1;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 0.7em;
  padding: 1.1em 0.6em;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-2);
}
.dv__people { display: flex; padding-left: 0.5em; }
.dv__people svg {
  width: 2.3em;
  height: 2.3em;
  margin-left: -0.5em;
  padding: 0.5em;
  border-radius: 50%;
  background: var(--ice);
  color: var(--navy);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.dv__team b { font-size: 1.05em; font-weight: 650; }

/* The lanes. Packets run both ways, encrypted, across the frame's edge */
.dv__lane { align-self: center; }
.dv__lane--in { grid-area: 4 / 2 / 5 / 4; height: 6em; }
.dv__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 1.7em;
  height: 2px;
  border-radius: 2px;
  background: rgb(142 221 200 / 0.3);
}
.dv__rail--back { top: 2.7em; }
.dv__rail i {
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.75em;
  height: 0.38em;
  margin-top: -0.19em;
  border-radius: 999px;
  background: var(--mint);
}
.dv__rail i:nth-child(1) { transform: translateX(0.8em); }
.dv__rail i:nth-child(2) { transform: translateX(3.6em); }
.dv__rail i:nth-child(3) { transform: translateX(7em); }
.dv__rail--back i { opacity: 0.6; }
.dv__rail--back i:nth-child(1) { transform: translateX(2.2em); }
.dv__rail--back i:nth-child(2) { transform: translateX(5.4em); }
/* Both sit centered over the open stretch of the lane, before the plate's
   1.75em padding (at their 0.85em size, 1.75em / 0.85) */
.dv__https {
  position: absolute;
  top: 1.25em;
  left: calc(50% - 1.75em / 0.85 / 2);
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.25em 0.6em 0.25em 0.45em;
  border-radius: 999px;
  background: var(--mint);
  color: var(--ink);
  font-size: 0.85em;
  font-weight: 700;
  transform: translateX(-50%);
}
.dv__https svg { width: 1.1em; height: 1.1em; stroke-width: 2.2; }
.dv__note {
  position: absolute;
  top: 4.1em;
  right: calc(1.75em / 0.85);
  left: 0;
  color: var(--text-3);
  font-size: 0.85em;
  text-align: center;
  white-space: normal;
}

/* Your workspace: the white screen, ringed in mint */
.dv__ws {
  grid-area: 4 / 4;
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  color: var(--s-ink);
  box-shadow:
    0 0 0 1px rgb(142 221 200 / 0.6),
    0 0 0 6px rgb(142 221 200 / 0.1),
    0 22px 44px -16px rgb(0 0 0 / 0.7);
}
.dv-bar {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: 2.9em;
  padding: 0 1em;
  border-bottom: 1px solid var(--s-line);
  background: #F7F8FC;
}
.dv-app {
  display: grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border-radius: 0.45em;
  background: var(--s-ink);
  color: var(--white);
}
.dv-app svg { width: 1.05em; height: 1.05em; stroke-width: 2; }
.dv-title { font-weight: 650; }
.dv-crumb { color: var(--s-faint); font-size: 0.92em; }
.dv-crumb::before { content: "/"; margin-right: 0.5em; }
.dv-rest {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  margin-left: auto;
  padding: 0.3em 0.7em 0.3em 0.55em;
  border-radius: 999px;
  background: var(--s-ok-bg);
  box-shadow: inset 0 0 0 1px var(--s-ok-line);
  color: var(--s-ok);
  font-size: 0.86em;
  font-weight: 650;
}
.dv-rest svg { width: 1.1em; height: 1.1em; stroke-width: 2; }
.dv-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 1.4em;
  padding: 1.1em 1.1em 1.2em;
}
.dv-k {
  display: flex;
  align-items: center;
  gap: 0.45em;
  margin-bottom: 0.65em;
  color: var(--s-mute);
  font-size: 0.86em;
  font-weight: 600;
}
.dv-k svg { width: 1.2em; height: 1.2em; }
.dv-k:not(:first-child) { margin-top: 1.15em; }
.dv-tables {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45em;
}
.dv-tables li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  height: 2.3em;
  padding: 0 0.65em;
  border: 1px solid var(--s-line);
  border-radius: 0.55em;
  background: #FBFCFE;
}
.dv-tables b { font-size: 0.92em; font-weight: 600; }
.dv-tables i {
  color: var(--s-faint);
  font-size: 0.84em;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.dv-roles {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 0.5em 1.2em;
}
.dv-rh { color: var(--s-faint); font-size: 0.8em; font-weight: 600; }
.dv-rh:not(:first-child) { justify-self: center; }
.dv-role { font-size: 0.92em; font-weight: 600; }
.dv-sw {
  position: relative;
  justify-self: center;
  width: 2.2em;
  height: 1.25em;
  border-radius: 999px;
  background: #C9D0E3;
}
.dv-sw::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #0E8A6C;
}
.dv-sw::after {
  content: "";
  position: absolute;
  top: 0.17em;
  left: 0.17em;
  width: 0.91em;
  height: 0.91em;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(20 33 74 / 0.3);
  transform: translateX(0.95em);
}
.dv-sw--off::before { opacity: 0; }
.dv-sw--off::after { transform: none; }

/* The audit trail, newest first. Rows have fixed heights so the loop can
   slide new ones in above the old. */
/* The list clips at its bottom edge only (the AI row's glow spills out). */
.dv-log { display: grid; gap: 0.45em; clip-path: inset(-0.5em -0.5em 0); }
.dv-log li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 1.25em 1.25em;
  align-content: center;
  gap: 0.3em 0.65em;
  height: 4em;
  padding: 0 0.75em;
  border: 1px solid var(--s-line);
  border-radius: 0.6em;
  background: var(--white);
}
.dv-log li.dv-log__ai {
  grid-template-rows: 1.25em 1.25em 1.1em;
  height: 5.3em;
  border-color: var(--s-ai-line);
}
/* Two faded older entries trail the oldest row, so the list never looks half
   empty mid-loop. New rows push them below the clip; the final frame hides them. */
.dv-log__old::before,
.dv-log__old::after {
  content: "";
  position: absolute;
  top: calc(100% + 1px + 0.45em);
  left: -1px;
  right: -1px;
  height: 4em;
  border: 1px solid var(--s-line);
  border-radius: 0.6em;
  background:
    radial-gradient(circle at 1.8em 50%, #ECEFF6 1.05em, transparent 1.1em),
    linear-gradient(#ECEFF6, #ECEFF6) 3.5em 1.15em / 42% 0.55em no-repeat,
    linear-gradient(#F1F3F8, #F1F3F8) 3.5em 2.3em / 26% 0.55em no-repeat,
    #FBFCFE;
}
.dv-log__old::after { top: calc(100% + 1px + 4.9em); }
.dv-log__ai::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 3px rgb(82 64 208 / 0.18);
  opacity: 0;
}
.dv-who {
  display: grid;
  grid-row: 1 / 3;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #E9EDF8;
  color: var(--s-ink);
}
.dv-who svg { width: 1.15em; height: 1.15em; }
.dv-who--ai { background: var(--s-ai-bg); color: var(--s-ai); }
.dv-who--ai svg { width: 1em; height: 1em; }
.dv-what { font-size: 0.92em; overflow: hidden; text-overflow: ellipsis; }
.dv-what b { font-weight: 650; }
.dv-when { color: var(--s-faint); font-size: 0.8em; font-variant-numeric: tabular-nums; }
.dv-diff {
  display: flex;
  grid-column: 2 / 4;
  align-items: center;
  gap: 0.4em;
  font-size: 0.84em;
}
.dv-diff s { color: var(--s-faint); text-decoration-color: rgb(95 104 134 / 0.7); }
.dv-diff svg { width: 1em; height: 1em; color: var(--s-faint); }
.dv-diff em {
  padding: 0.1em 0.45em;
  border-radius: 0.35em;
  background: #EDF0F8;
  font-style: normal;
  font-weight: 650;
}
.dv-log__ai .dv-diff em { background: var(--s-ai-bg); color: var(--s-ai); }
.dv-fields {
  display: inline-flex;
  grid-column: 2 / 4;
  align-items: center;
  gap: 0.35em;
  color: var(--s-ai);
  font-size: 0.8em;
  font-weight: 600;
}
.dv-fields svg { width: 1.1em; height: 1.1em; }

/* Other clients: locked, separate, walled off */
.dv__wall {
  grid-area: 4 / 5;
  justify-self: center;
  margin-block: 0.5em;
  border-left: 1.5px dashed var(--line-2);
}
.dv__wall span {
  position: absolute;
  top: 50%;
  left: 0;
  padding: 0.25em 0.6em;
  background: var(--plate);
  color: var(--text-3);
  font-size: 0.85em;
  font-weight: 600;
  transform: translate(-50%, -50%) rotate(-90deg);
}
.dv__others {
  display: grid;
  grid-area: 4 / 6;
  gap: 0.6em;
}
.dv-other {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  padding: 0.7em 0.5em;
  border-radius: 14px;
  outline: 1.5px dashed var(--line-2);
  outline-offset: -1.5px;
  background: rgb(7 13 31 / 0.4);
  color: var(--text-3);
  text-align: center;
}
.dv-other svg { width: 1.35em; height: 1.35em; margin-bottom: 0.15em; }
.dv-other b { color: var(--text-2); font-size: 0.92em; font-weight: 600; }
.dv-other i { font-size: 0.8em; font-style: normal; }

/* Backups and exports along the bottom */
.dv__base {
  display: grid;
  grid-area: 6 / 4 / 7 / 7;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1em;
}
.dv-tile {
  padding: 1em 1.1em;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface-2);
}
.dv-tile__k { display: flex; align-items: center; gap: 0.5em; font-weight: 650; }
.dv-tile__k svg { width: 1.25em; height: 1.25em; color: var(--mint); }
.dv-tile__note { margin-top: 0.8em; color: var(--text-3); font-size: 0.85em; }
.dv-ex {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: 0.85em;
}
.dv-ex__req {
  padding: 0.3em 0.7em;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--text-2);
  font-size: 0.85em;
  font-weight: 550;
}
.dv-ex__bar {
  position: relative;
  flex: 1;
  min-width: 1.5em;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-2);
}
.dv-ex__bar i { position: absolute; inset: 0; background: var(--mint); transform-origin: left; }
.dv-ex__file,
.dv-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.7em 0.4em 0.5em;
  border-radius: 0.5em;
  background: var(--white);
  color: var(--navy);
  font-size: 0.85em;
  font-weight: 650;
  box-shadow: 0 0.4em 1em -0.3em rgb(0 0 0 / 0.6);
}
.dv-ex__file svg,
.dv-file svg { width: 1.15em; height: 1.15em; }
.dv-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35em;
  margin-top: 0.85em;
}
.dv-days li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  color: var(--text-3);
  font-size: 0.78em;
  font-weight: 550;
}
.dv-days i {
  position: relative;
  width: 100%;
  height: 2.2em;
  overflow: hidden;
  border-radius: 0.45em;
  background: rgb(142 221 200 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(142 221 200 / 0.3);
}
.dv-days i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(142 221 200 / 0.4);
  transform-origin: bottom;
}
.dv-days .dv-today { color: var(--text); font-weight: 650; }
.dv-today i::after { background: var(--mint); }
.dv-done {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 0.75em;
  color: var(--mint);
  font-size: 0.85em;
  font-weight: 600;
}
.dv-done svg { width: 1.1em; height: 1.1em; stroke-width: 2.4; }

/* The export, carried back out to your team */
.dv__lane--out { grid-area: 6 / 2 / 7 / 4; height: 2em; }
.dv__rail--dash {
  top: 50%;
  height: 0;
  margin-top: -1px;
  border-top: 2px dashed rgb(142 221 200 / 0.45);
  background: none;
}
.dv__carry {
  position: absolute;
  top: 50%;
  right: 0.4em;
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  margin-top: -0.95em;
  border-radius: 0.45em;
  background: var(--white);
  color: var(--navy);
  opacity: 0;
}
.dv__carry svg { width: 1.1em; height: 1.1em; }
.dv__got {
  display: flex;
  grid-area: 6 / 1;
  align-self: center;
  justify-content: center;
}
.dv-file {
  padding: 0.6em 0.75em 0.6em 0.6em;
  box-shadow: 0 0 0 1px rgb(142 221 200 / 0.6), 0 0.6em 1.4em -0.4em rgb(0 0 0 / 0.6);
  line-height: 1.2;
  white-space: normal;
}
.dv-file .dv-file__ok { color: #0E8A6C; stroke-width: 2.6; }

/* Narrower: smaller side columns, the workspace in one column */
@container (max-width: 1020px) {
  .dv__art {
    grid-template-columns: 9.5em calc(var(--to-plate) - 9.5em) 1.75em minmax(0, 1fr) 2.75em 8em 1.5em;
  }
  .dv__rail i:nth-child(3) { transform: translateX(5.6em); }
  .dv-body { grid-template-columns: minmax(0, 1fr); }
  .dv__base { grid-template-columns: minmax(0, 1fr); }
  /* The export tile is now the top half of the base: meet it there */
  .dv__lane--out { align-self: start; margin-top: 3em; }
  .dv__got { align-self: start; margin-top: 2.2em; }
}
/* Phones: one column. Your team on top, the lane runs down into the frame */
@container (max-width: 720px) {
  .dv__art {
    grid-template-columns: 1em minmax(0, 1fr) 1em;
    grid-template-rows: auto 5.5em 1.25em auto 1em auto 2.2em auto 1em auto 1.25em;
    font-size: 0.8125rem;
  }
  .dv__frame { grid-area: 3 / 1 / 12 / 4; }
  .dv__team {
    grid-area: 1 / 1 / 2 / 4;
    flex-direction: row;
    justify-self: center;
    padding: 0.6em 1em 0.6em 0.8em;
  }
  .dv__lane--in { grid-area: 2 / 2; align-self: stretch; height: auto; }
  .dv__rail {
    top: 0;
    bottom: 0;
    left: calc(50% - 0.6em);
    right: auto;
    width: 2px;
    height: auto;
  }
  .dv__rail--back { left: calc(50% + 0.6em); }
  .dv__rail i {
    top: 0;
    left: 50%;
    width: 0.38em;
    height: 0.75em;
    margin: 0 0 0 -0.19em;
  }
  .dv__rail i:nth-child(1) { transform: translateY(0.4em); }
  .dv__rail i:nth-child(2) { transform: translateY(2.2em); }
  .dv__rail i:nth-child(3) { transform: translateY(4em); }
  .dv__rail--back i:nth-child(1) { transform: translateY(1.2em); }
  .dv__rail--back i:nth-child(2) { transform: translateY(3.2em); }
  .dv__https { top: auto; bottom: -1em; left: 50%; }
  .dv__note { top: 1.6em; right: auto; left: calc(50% + 1.6em); text-align: left; white-space: nowrap; }
  .dv__head { grid-area: 4 / 2; flex-wrap: wrap; }
  .dv__watch { margin-left: 0; }
  .dv__ws { grid-area: 6 / 2; }
  .dv-bar { padding-inline: 0.8em; }
  .dv-crumb { display: none; }
  .dv-body { padding: 1em 0.9em; }
  /* Room for the whole action: the time drops beside the change */
  .dv-what { grid-column: 2 / 4; }
  .dv-when { grid-area: 2 / 3; align-self: center; }
  .dv-diff { grid-column: 2; }
  .dv__wall {
    grid-area: 7 / 2;
    align-self: center;
    justify-self: stretch;
    margin: 0;
    border-left: 0;
    border-top: 1.5px dashed var(--line-2);
  }
  .dv__wall span { left: 50%; transform: translate(-50%, -50%); }
  .dv__others { grid-area: 8 / 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dv-other i { display: none; }
  .dv__base { grid-area: 10 / 2; }
  .dv__lane--out,
  .dv__got { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .is-live .dv__art { --dur: 13s; }
  .is-live .dv__rail i { animation: dv-pkt 2.4s linear infinite; }
  .is-live .dv__rail i:nth-child(2) { animation-delay: -0.8s; }
  .is-live .dv__rail i:nth-child(3) { animation-delay: -1.6s; }
  .is-live .dv__rail--back i { animation-direction: reverse; animation-duration: 3s; }
  .is-live .dv__rail--back i:nth-child(2) { animation-delay: -1.5s; }
  .is-live .dv__watch i::after,
  .is-live .op-ok i::after { animation: ping 2.6s ease-out infinite; }
  .is-live .dv-sw--off::before { animation: dv-sw-fill var(--dur) var(--ease) infinite both; }
  .is-live .dv-sw--off::after { animation: dv-sw-knob var(--dur) var(--ease) infinite both; }
  .is-live .dv-log,
  .is-live .dv-backup,
  .is-live .dv-ex,
  .is-live .dv__got { animation: dv-blink var(--dur) ease infinite both; }
  .is-live .dv-log__old { animation: dv-old var(--dur) var(--ease) infinite both; }
  .is-live .dv-log__role { animation: dv-role var(--dur) var(--ease) infinite both; }
  .is-live .dv-log__ai { animation: dv-ai var(--dur) var(--ease) infinite both; }
  .is-live .dv-log__ai::after { animation: dv-glow var(--dur) ease infinite both; }
  .is-live .dv-today i::after { animation: dv-fill var(--dur) var(--ease) infinite both; }
  .is-live .dv-done { animation: dv-done var(--dur) var(--ease) infinite both; }
  .is-live .dv-ex__req { animation: dv-req var(--dur) var(--ease) infinite both; }
  .is-live .dv-ex__bar i { animation: dv-bar var(--dur) var(--ease) infinite both; }
  .is-live .dv-ex__file { animation: dv-file var(--dur) var(--ease) infinite both; }
  .is-live .dv__carry { animation: dv-carry var(--dur) var(--ease) infinite both; }
  .is-live .dv-file { animation: dv-got var(--dur) var(--ease) infinite both; }
}
@keyframes dv-pkt {
  0% { opacity: 0; transform: translateX(0); }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--lane) - 0.75em)); }
}
@keyframes dv-pkt-y {
  0% { opacity: 0; transform: translateY(0); }
  15%, 85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(4.75em); }
}
@keyframes ping {
  0% { opacity: 0.8; transform: none; }
  70%, 100% { opacity: 0; transform: scale(2.6); }
}
/* The story, on one 13-second clock: the owner switches the field crew to
   view only (6%), that change is recorded (10%), the agent's change is
   recorded (22%), the night's backup lands (34–48%), an export is requested
   and carried out to your team (54–80%). Rest, then everything resets
   while the moving parts are faded out (94–100%). */
@keyframes dv-blink {
  0%, 93% { opacity: 1; }
  96%, 98.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes dv-sw-fill {
  0%, 6% { opacity: 1; }
  9%, 96% { opacity: 0; }
  98.5%, 100% { opacity: 1; }
}
@keyframes dv-sw-knob {
  0%, 6% { transform: translateX(0.95em); }
  9%, 96% { transform: none; }
  98.5%, 100% { transform: translateX(0.95em); }
}
@keyframes dv-old {
  0%, 10% { transform: translateY(-10.2em); }
  15%, 22% { transform: translateY(-5.75em); }
  27%, 97% { transform: none; }
  97.5%, 100% { transform: translateY(-10.2em); }
}
@keyframes dv-role {
  0%, 10% { opacity: 0; transform: translateY(-6.4em); }
  15%, 22% { opacity: 1; transform: translateY(-5.75em); }
  27%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(-6.4em); }
}
@keyframes dv-ai {
  0%, 22% { opacity: 0; transform: translateY(-0.6em); }
  27%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(-0.6em); }
}
@keyframes dv-glow {
  0%, 24% { opacity: 0; }
  29%, 44% { opacity: 1; }
  56%, 100% { opacity: 0; }
}
@keyframes dv-fill {
  0%, 34% { transform: scaleY(0); }
  46%, 97% { transform: none; }
  97.5%, 100% { transform: scaleY(0); }
}
@keyframes dv-done {
  0%, 46% { opacity: 0; transform: translateY(0.3em); }
  49%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(0.3em); }
}
@keyframes dv-req {
  0%, 53% { opacity: 0; transform: translateX(-0.4em); }
  56%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(-0.4em); }
}
@keyframes dv-bar {
  0%, 56% { transform: scaleX(0); }
  64%, 97% { transform: none; }
  97.5%, 100% { transform: scaleX(0); }
}
@keyframes dv-file {
  0%, 64% { opacity: 0; transform: scale(0.8); }
  67%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: scale(0.8); }
}
@keyframes dv-carry {
  0%, 67% { opacity: 0; transform: none; }
  69% { opacity: 1; transform: none; }
  77% { opacity: 1; transform: translateX(calc(var(--lane) * -1 + 2.5em)); }
  79%, 100% { opacity: 0; transform: translateX(calc(var(--lane) * -1 + 2.5em)); }
}
@keyframes dv-got {
  0%, 77% { opacity: 0; transform: translateX(0.6em); }
  80%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateX(0.6em); }
}
@media (prefers-reduced-motion: no-preference) {
  @container (max-width: 720px) {
    .is-live .dv__rail i { animation-name: dv-pkt-y; }
  }
}

/* Six commitments as a bento of small drawings: a short label and one line
   each. The fuller detail lives in the FAQ and the privacy policy. */
.safe {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}
/* Border, radius, and surface are shared with the data graphic above */
.sf {
  display: flex;
  grid-column: span 4;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1.35rem;
}
.sf--db,
.sf--key { grid-column: span 3; }
.sf--ai {
  grid-column: span 6;
  border-color: rgb(179 164 255 / 0.35);
  background:
    radial-gradient(70% 80% at 0% 0%, rgb(179 164 255 / 0.09), transparent 70%),
    var(--surface);
}
.sf h3 { margin-bottom: 0.35rem; font-size: 1.0625rem; }
.sf p {
  color: var(--text-2);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.sf .sf__pledge {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.6rem;
  color: var(--text);
  font-size: 1rem;
  font-weight: 600;
}
.sf__pledge svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.2rem;
  fill: none;
  stroke: var(--mint);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sf .sf__fine { margin-top: 0.5rem; color: var(--text-3); font-size: 0.875rem; }

/* Each drawing sits on a recessed plate that grows to fill its tile */
.sf__art {
  position: relative;
  display: flex;
  flex: 1 0 6.75rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgb(7 13 31 / 0.55);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.sf__art svg {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Your own database among others, locked */
.sf-db { position: relative; color: var(--text-3); }
.sf-db > svg { width: 2.4rem; height: 2.4rem; stroke-dasharray: 2.5 2.5; stroke-width: 1.4; }
.sf-db i {
  position: absolute;
  right: -0.35rem;
  bottom: -0.2rem;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--surface-2);
  box-shadow: 0 0 0 2px var(--ink);
}
.sf-db i svg { width: 0.75rem; height: 0.75rem; stroke-width: 2; }
.sf-db--yours {
  margin-inline: 0.6rem;
  padding: 0.7rem;
  border-radius: 14px;
  background: rgb(142 221 200 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(142 221 200 / 0.45);
  color: var(--mint);
}
.sf-db--yours > svg { width: 2.6rem; height: 2.6rem; stroke-dasharray: none; stroke-width: 1.7; }
.sf-db--yours i { right: -0.4rem; bottom: -0.4rem; width: 1.5rem; height: 1.5rem; background: var(--mint); color: var(--ink); }
.sf-db--yours i svg { width: 0.95rem; height: 0.95rem; stroke-width: 2.2; }

/* AI: your steps, rules, and corrections teach the agent; nothing crosses
   the wall to model training */
.sf--ai .sf__art { flex-basis: 8.5rem; justify-content: space-between; gap: 0; padding-inline: 1rem; }
.sf-learn { display: grid; gap: 0.35rem; }
.sf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.6rem 0.3rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgb(179 164 255 / 0.3);
  color: var(--text);
}
.sf-chip svg { width: 0.9rem; height: 0.9rem; color: var(--lilac); }
.sf-flow {
  position: relative;
  flex: 1 1 2rem;
  align-self: center;
  height: 2px;
  min-width: 1.25rem;
  margin-inline: 0.4rem;
  background: rgb(179 164 255 / 0.35);
  container-type: inline-size;
}
.sf-flow i {
  position: absolute;
  top: -2px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lilac);
}
.sf-flow i:nth-child(1) { left: 15%; }
.sf-flow i:nth-child(2) { left: 50%; }
.sf-flow i:nth-child(3) { left: 85%; }
.sf-flow--stop { flex-basis: 1.25rem; background: repeating-linear-gradient(90deg, rgb(179 164 255 / 0.35) 0 4px, transparent 4px 7px); }
.sf-flow--stop i { opacity: 0; }
.sf-agent {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  text-align: center;
}
.sf-agent__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.3rem;
  border-radius: 50%;
  background: var(--lilac);
  color: var(--ink);
}
.sf-agent__dot svg { width: 1.3rem; height: 1.3rem; }
.sf-agent__ring {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -1.375rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--lilac);
  opacity: 0;
}
.sf-agent b { color: var(--text); font-size: 0.8125rem; }
.sf-agent i,
.sf-train i { color: var(--text-3); font-style: normal; font-weight: 500; }
.sf-wall {
  align-self: stretch;
  width: 0;
  margin-inline: 0.5rem 0.9rem;
  border-left: 2px solid var(--line-2);
}
.sf-train {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border-radius: 12px;
  outline: 1.5px dashed var(--line-2);
  outline-offset: -1.5px;
  text-align: center;
}
.sf-train svg { width: 1.3rem; height: 1.3rem; margin-bottom: 0.2rem; color: var(--mint); }
.sf-train b { color: var(--text-2); font-size: 0.8125rem; }

/* Your systems: a token, not a password, carried by an official connection */
.sf-sys {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 10px;
  background: var(--ice);
  color: var(--navy);
}
.sf-sys svg { width: 1.3rem; height: 1.3rem; }
.sf-sys--tool { background: var(--white); color: var(--navy); }
.sf-sys--tool svg { width: 1.45rem; height: 1.25rem; }
.sf-wire {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  height: 2px;
  max-width: 7rem;
  background: rgb(142 221 200 / 0.5);
  container-type: inline-size;
}
.sf-token {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem 0.3rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px rgb(142 221 200 / 0.5);
  color: var(--mint);
}
.sf-token svg { width: 0.9rem; height: 0.9rem; }

/* Roles: three switches, one changed, and the change recorded */
.sf--roles .sf__art { flex-wrap: wrap; align-content: center; gap: 0.45rem; }
.sf-role {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.4rem 0.35rem 0.65rem;
  border-radius: 999px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
}
.sf-role i {
  position: relative;
  width: 1.7rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--line-2);
}
.sf-role i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--mint);
}
.sf-role i::after {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--text);
  transform: translateX(0.7rem);
}
.sf-role--off i::before { opacity: 0; }
.sf-role--off i::after { transform: none; }
.sf-audit {
  display: inline-flex;
  flex-basis: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--text-3);
  font-weight: 500;
}
.sf-audit svg { width: 0.95rem; height: 0.95rem; color: var(--mint); }

/* Daily backups, the newest landing, hosted in Virginia */
.sf--backup .sf__art { flex-direction: column; gap: 0.6rem; }
.sf-bars { display: flex; align-items: flex-end; gap: 0.3rem; height: 2.4rem; }
.sf-bars i {
  position: relative;
  width: 0.85rem;
  height: 100%;
  overflow: hidden;
  border-radius: 0.3rem;
  background: rgb(142 221 200 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(142 221 200 / 0.28);
}
.sf-bars i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(142 221 200 / 0.4);
  transform-origin: bottom;
}
.sf-bars .sf-bars__new::after { background: var(--mint); }
.sf-pin { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--text-2); }
.sf-pin svg { width: 0.95rem; height: 0.95rem; color: var(--mint); }

/* Export: your data leaves the workspace and lands with you */
.sf-box {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--text);
}
.sf-box svg { width: 1.45rem; height: 1.25rem; }
.sf-out {
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  max-width: 7rem;
  height: 0;
  border-top: 2px dashed rgb(142 221 200 / 0.45);
  container-type: inline-size;
}
.sf-doc {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.4rem;
  background: var(--white);
  color: var(--navy);
  transform: translateY(-1px);
}
.sf-doc svg { width: 1.05rem; height: 1.05rem; }
.sf-you {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  background: var(--ice);
  box-shadow: 0 0 0 2px rgb(142 221 200 / 0.6);
  color: var(--navy);
}
.sf-you svg { width: 1.35rem; height: 1.35rem; }

@media (prefers-reduced-motion: no-preference) {
  .is-live .sf-db--yours i { animation: sf-lock 8s var(--ease) 0.4s infinite both; }
  .is-live .sf-flow i { left: 0; animation: sf-drip 2.4s linear infinite; }
  .is-live .sf-flow i:nth-child(2) { animation-delay: -0.8s; }
  .is-live .sf-flow i:nth-child(3) { animation-delay: -1.6s; }
  .is-live .sf-flow--stop i { animation-name: sf-stop; animation-duration: 3s; }
  .is-live .sf-flow--stop i:nth-child(2) { animation-delay: -1.5s; }
  .is-live .sf-agent__ring { animation: ping-soft 2.4s ease-out infinite; }
  .is-live .sf-token { animation: sf-token 7s var(--ease) 1s infinite both; }
  .is-live .sf-role--off i::before { animation: sf-role-fill 8s var(--ease) 1.6s infinite both; }
  .is-live .sf-role--off i::after { animation: sf-role-knob 8s var(--ease) 1.6s infinite both; }
  .is-live .sf-audit { animation: sf-audit 8s var(--ease) 1.6s infinite both; }
  .is-live .sf-bars__new::after { animation: sf-bar 8s var(--ease) 2.2s infinite both; }
  .is-live .sf-doc { animation: sf-doc 8s var(--ease) 2.8s infinite both; }
  .is-live .sf-you { animation: sf-you 8s var(--ease) 2.8s infinite both; }
}
@keyframes sf-lock {
  0%, 10% { transform: scale(0.6); opacity: 0.4; }
  16%, 100% { transform: none; opacity: 1; }
}
@keyframes sf-drip {
  0% { transform: none; opacity: 0; }
  20%, 80% { opacity: 1; }
  100% { transform: translateX(calc(100cqw - 6px)); opacity: 0; }
}
/* Toward the wall, and no further */
@keyframes sf-stop {
  0% { transform: none; opacity: 0; }
  30%, 70% { opacity: 1; }
  100% { transform: translateX(calc(100cqw - 6px)); opacity: 0; }
}
@keyframes ping-soft {
  0% { opacity: 0.7; transform: none; }
  70%, 100% { opacity: 0; transform: scale(1.5); }
}
@keyframes sf-token {
  0% { transform: translateX(calc(-50cqw + 50%)); opacity: 0; }
  10% { opacity: 1; }
  40%, 85% { transform: none; opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes sf-role-fill {
  0%, 15% { opacity: 1; }
  22%, 92% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes sf-role-knob {
  0%, 15% { transform: translateX(0.7rem); }
  22%, 92% { transform: none; }
  100% { transform: translateX(0.7rem); }
}
@keyframes sf-audit {
  0%, 24% { opacity: 0; transform: translateY(0.3rem); }
  30%, 90% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: translateY(0.3rem); }
}
@keyframes sf-bar {
  0%, 8% { transform: scaleY(0); }
  30%, 90% { transform: none; }
  98%, 100% { transform: scaleY(0); }
}
@keyframes sf-doc {
  0%, 6% { transform: translate(-45cqw, -1px); opacity: 0; }
  12% { opacity: 1; }
  34% { transform: translate(45cqw, -1px); opacity: 1; }
  40%, 100% { transform: translate(45cqw, -1px); opacity: 0; }
}
@keyframes sf-you {
  0%, 34% { box-shadow: 0 0 0 2px rgb(142 221 200 / 0.6); }
  40% { box-shadow: 0 0 0 6px rgb(142 221 200 / 0.35); }
  52%, 100% { box-shadow: 0 0 0 2px rgb(142 221 200 / 0.6); }
}

.safe__more {
  margin-top: 1.5rem;
  color: var(--text-3);
  font-size: 1rem;
}
.safe__more a { color: var(--text); }

@media (max-width: 1080px) {
  .sf--db,
  .sf--key,
  .sf { grid-column: span 6; }
  .sf--ai { grid-column: 1 / -1; order: -1; }
}
@media (max-width: 600px) {
  .safe { grid-template-columns: minmax(0, 1fr); }
  .sf,
  .sf--db,
  .sf--key,
  .sf--ai { grid-column: 1; }
  .sf__art { flex-basis: 6rem; }
  /* The wall turns sideways: model training sits below, cut off */
  .sf--ai .sf__art { flex-wrap: wrap; justify-content: center; row-gap: 0.8rem; padding: 1rem 0.8rem; }
  .sf-flow--stop { display: none; }
  .sf-wall { flex-basis: 100%; height: 0; margin: 0; border-left: 0; border-top: 2px solid var(--line-2); }
  .sf-train { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.2rem 0.45rem; padding: 0.5rem 0.8rem; }
  .sf-train svg { margin: 0; }
}

/* ---------- The engagement ---------- */

/* The ops view on the left, what we handle and what you won't deal with
   on the right */
.run {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
.ops {
  margin: 0;
  container-type: inline-size;
}
.ops__frame {
  padding: clamp(0.9rem, 2vw, 1.25rem);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.025), transparent 40%),
    var(--surface);
  font-size: 0.8125rem;
  line-height: 1.25;
  white-space: nowrap;
}
.ops__frame svg:not(.host-tag__mark) {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ops__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em 1em;
  margin-bottom: 1em;
}
.ops__title {
  font-size: 1.3em;
  font-weight: 600;
  font-stretch: 110%;
  letter-spacing: -0.01em;
}
.ops__head .host-tag { font-size: 1em; }

/* Each tool's pulse: a steady beat and a running status */
.ops__tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6em;
}
.op-tool {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6em 0.55em;
  padding: 0.75em 0.8em;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface-2);
}
.op-tool__icon {
  display: grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.5em;
  background: var(--white);
  color: var(--navy);
}
.op-tool__icon svg { width: 1.15em; height: 1.15em; }
.op-tool b {
  grid-column: 2 / 4;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
}
.op-beat { grid-column: 1 / 3; color: var(--mint); }
.op-beat svg { width: 100%; height: auto; max-height: 1.9em; overflow: visible; }
.op-beat__base { opacity: 0.25; }
.op-beat__line { stroke-width: 1.8; }
.op-ok {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.25em 0.6em 0.25em 0.5em;
  border-radius: 999px;
  background: rgb(142 221 200 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(142 221 200 / 0.35);
  color: var(--mint);
  font-size: 0.85em;
  font-weight: 600;
}
.op-ok i { width: 0.5em; height: 0.5em; }

.ops__main {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 0.75em;
  margin-top: 0.75em;
}

/* The request thread: a white screen, like the tools themselves */
.op-scr {
  overflow: hidden;
  border-radius: 12px;
  background: var(--white);
  color: var(--s-ink);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.1),
    0 22px 44px -16px rgb(0 0 0 / 0.7);
}
.op-bar {
  display: flex;
  align-items: center;
  gap: 0.5em;
  height: 2.6em;
  padding: 0 0.9em;
  border-bottom: 1px solid var(--s-line);
  background: #F7F8FC;
}
.op-app {
  display: grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 0.4em;
  background: var(--s-ink);
  color: var(--white);
}
.op-app svg { width: 1em; height: 1em; stroke-width: 2; }
.op-name { font-weight: 650; }
.op-crumb { color: var(--s-faint); font-size: 0.9em; }
.op-crumb::before { content: "/"; margin-right: 0.5em; }
.op-thread { display: grid; gap: 0.65em; padding: 0.9em; }
.op-msg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.6em;
}
.op-av {
  display: grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  background: var(--s-ink);
  color: var(--white);
  font-size: 0.85em;
  font-weight: 700;
}
.op-av--team { background: #E9EDF8; color: var(--s-ink); }
.op-av svg { width: 1.3em; height: 1.3em; }
.op-msg p {
  grid-area: 1 / 2;
  justify-self: start;
  padding: 0.5em 0.75em 0.55em;
  border-radius: 0.25em 0.8em 0.8em 0.8em;
  background: #F2F4F9;
  font-size: 0.95em;
  line-height: 1.35;
  white-space: normal;
}
.op-msg p b {
  display: block;
  margin-bottom: 0.1em;
  color: var(--s-faint);
  font-size: 0.85em;
  font-weight: 650;
}
.op-msg--reply p,
.op-msg--live p { background: #E8ECF7; }
.op-typing {
  display: flex;
  grid-area: 1 / 2;
  align-self: center;
  justify-self: start;
  gap: 0.25em;
  padding: 0.6em 0.75em;
  border-radius: 0.25em 0.8em 0.8em 0.8em;
  background: #E8ECF7;
  opacity: 0;
}
.op-typing i { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--s-faint); }
.op-req {
  margin-left: 2.47em;
  padding: 0.65em 0.8em 0.7em;
  border: 1px solid var(--s-line);
  border-radius: 0.7em;
  background: #FBFCFE;
}
.op-req__name { display: flex; align-items: center; gap: 0.4em; font-size: 0.95em; font-weight: 650; }
.op-req__name svg { width: 1em; height: 1em; stroke-width: 2.2; }
.op-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.7em;
}
.op-track__rail {
  position: absolute;
  top: 0.5em;
  left: 16.67%;
  right: 16.67%;
  height: 2px;
  margin-top: -1px;
  background: var(--s-line);
}
.op-track__rail i { position: absolute; inset: 0; background: #0E8A6C; transform-origin: left; }
.op-st {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35em;
  color: var(--s-mute);
  font-size: 0.8em;
  font-weight: 600;
}
.op-st i {
  position: relative;
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px #C9D0E3;
}
.op-st i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--white) 0 26%, #0E8A6C 29%);
}
.op-st--3 { color: var(--s-ok); }

/* What happened overnight and today */
.op-feed { display: grid; align-content: start; gap: 0.6em; }
.op-ev {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.4em 0.65em;
  padding: 0.75em 0.8em;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface-2);
}
.op-ev__icon {
  display: grid;
  grid-row: span 3;
  align-self: start;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 0.55em;
  background: rgb(142 221 200 / 0.12);
  color: var(--mint);
}
.op-ev__icon svg { width: 1.15em; height: 1.15em; }
.op-ev p { display: flex; justify-content: space-between; gap: 0.5em; }
.op-ev p b { font-weight: 600; }
.op-ev__when { color: var(--text-3); font-size: 0.85em; font-variant-numeric: tabular-nums; }
.op-ev__what { color: var(--text-2); font-size: 0.88em; line-height: 1.3; white-space: normal; }
.op-prog {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line-2);
}
.op-prog i { position: absolute; inset: 0; background: var(--mint); transform-origin: left; }
.op-ev__ok {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--mint);
  font-size: 0.85em;
  font-weight: 600;
}
.op-ev__ok svg { width: 1.05em; height: 1.05em; stroke-width: 2.4; }

/* The two lists, as quiet hairline rows beside the ops view */
.terms { display: grid; gap: 2.25rem; }
.terms h3 { margin-bottom: 0.6rem; font-size: 1.125rem; }
.terms li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--line);
  font-size: 1rem;
  line-height: 1.45;
}
.terms svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  margin-top: 0.15rem;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.terms__in svg { stroke: var(--mint); }
.terms__out li { color: var(--text-2); }
.terms__out svg { stroke: var(--text-3); }
.deal__price {
  margin-top: 2.5rem;
  color: var(--text-2);
  font-weight: 500;
}
.deal__price a { color: var(--text); }

@container (max-width: 560px) {
  .ops__tools { grid-template-columns: minmax(0, 1fr); gap: 0.45em; }
  .op-tool { grid-template-columns: auto minmax(0, 1fr) 5.5em auto; padding: 0.6em 0.75em; }
  .op-tool b { grid-column: 2; }
  .op-beat { grid-column: 3; }
  .ops__main { grid-template-columns: minmax(0, 1fr); }
  .op-feed { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .is-live .ops__frame { --dur: 13s; }
  .is-live .op-beat__line { stroke-dasharray: 26 74; animation: beat 3s linear infinite; }
  .is-live .op-tool:nth-child(2) .op-beat__line { animation-delay: -1.1s; animation-duration: 3.4s; }
  .is-live .op-tool:nth-child(3) .op-beat__line { animation-delay: -2.1s; animation-duration: 3.2s; }
  .is-live .op-tool:nth-child(2) .op-ok i::after { animation-delay: -0.9s; }
  .is-live .op-tool:nth-child(3) .op-ok i::after { animation-delay: -1.7s; }
  .is-live .op-thread,
  .is-live .op-feed { animation: dv-blink var(--dur) ease infinite both; }
  .is-live .op-msg--ask { animation: op-ask var(--dur) var(--ease) infinite both; }
  .is-live .op-typing { animation: op-typing var(--dur) ease infinite both; }
  .is-live .op-typing i { animation: op-dot 0.9s ease-in-out infinite; }
  .is-live .op-typing i:nth-child(2) { animation-delay: 0.15s; }
  .is-live .op-typing i:nth-child(3) { animation-delay: 0.3s; }
  .is-live .op-msg--reply p,
  .is-live .op-msg--reply .op-av { animation: op-reply var(--dur) var(--ease) infinite both; }
  .is-live .op-req { animation: op-req var(--dur) var(--ease) infinite both; }
  .is-live .op-track__rail i { animation: op-rail var(--dur) var(--ease) infinite both; }
  .is-live .op-st--2 i::after { animation: op-st2 var(--dur) ease infinite both; }
  .is-live .op-st--3 i::after { animation: op-st3 var(--dur) ease infinite both; }
  .is-live .op-msg--live { animation: op-live var(--dur) var(--ease) infinite both; }
  .is-live .op-prog i { animation: op-prog var(--dur) var(--ease) infinite both; }
  .is-live .op-ev--backup .op-ev__ok { animation: op-ok-a var(--dur) var(--ease) infinite both; }
  /* The fix and the feature rest dimmed in place (--on 0), then light up as
     they happen (--on 1), so the feed is never empty. Resting text stays
     text-3, 5.8:1 on the frame. */
  .is-live .op-ev--fix,
  .is-live .op-ev--ship {
    border-color: color-mix(in srgb, var(--line-2) calc(var(--on) * 100%), var(--line));
    background: color-mix(in srgb, var(--surface-2) calc(var(--on) * 100%), transparent);
  }
  .is-live :is(.op-ev--fix, .op-ev--ship) b { color: color-mix(in srgb, var(--text) calc(var(--on) * 100%), var(--text-3)); }
  .is-live :is(.op-ev--fix, .op-ev--ship) .op-ev__what { color: color-mix(in srgb, var(--text-2) calc(var(--on) * 100%), var(--text-3)); }
  .is-live :is(.op-ev--fix, .op-ev--ship) .op-ev__icon { opacity: calc(0.45 + var(--on) * 0.55); }
  .is-live :is(.op-ev--fix, .op-ev--ship) .op-ev__ok { opacity: var(--on); transform: translateY(calc((1 - var(--on)) * 0.3em)); }
  .is-live .op-ev--fix { animation: op-fix var(--dur) var(--ease) infinite both; }
  .is-live .op-ev--ship { animation: op-ship var(--dur) var(--ease) infinite both; }
}
@property --on {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}
@keyframes beat {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}
@keyframes op-dot {
  0%, 100% { transform: none; opacity: 0.5; }
  50% { transform: translateY(-0.2em); opacity: 1; }
}
/* One 13-second clock: your team asks (6%), Mike answers (20%), the request
   moves Asked, Building, Live (27–60%) and Mike confirms (66%). Alongside,
   the backup completes (8–24%), a fix ships (42%), the feature goes live
   (62%). Rest, then reset while faded out. */
@keyframes op-ask {
  0%, 4% { opacity: 0; transform: translateY(0.5em); }
  8%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(0.5em); }
}
@keyframes op-typing {
  0%, 11% { opacity: 0; }
  13%, 18% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes op-reply {
  0%, 18.5% { opacity: 0; transform: translateY(0.5em); }
  22%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(0.5em); }
}
@keyframes op-req {
  0%, 25% { opacity: 0; transform: translateY(0.5em); }
  29%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(0.5em); }
}
@keyframes op-rail {
  0%, 31% { transform: scaleX(0); }
  38%, 52% { transform: scaleX(0.5); }
  60%, 97% { transform: none; }
  97.5%, 100% { transform: scaleX(0); }
}
@keyframes op-st2 {
  0%, 37% { opacity: 0; }
  39%, 97% { opacity: 1; }
  97.5%, 100% { opacity: 0; }
}
@keyframes op-st3 {
  0%, 59% { opacity: 0; }
  61%, 97% { opacity: 1; }
  97.5%, 100% { opacity: 0; }
}
@keyframes op-live {
  0%, 64% { opacity: 0; transform: translateY(0.5em); }
  68%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(0.5em); }
}
@keyframes op-prog {
  0%, 6% { transform: scaleX(0); }
  22%, 97% { transform: none; }
  97.5%, 100% { transform: scaleX(0); }
}
@keyframes op-ok-a {
  0%, 22% { opacity: 0; transform: translateY(0.3em); }
  25%, 97% { opacity: 1; transform: none; }
  97.5%, 100% { opacity: 0; transform: translateY(0.3em); }
}
@keyframes op-fix {
  0%, 40% { --on: 0; }
  44%, 97% { --on: 1; }
  97.5%, 100% { --on: 0; }
}
@keyframes op-ship {
  0%, 60% { --on: 0; }
  64%, 97% { --on: 1; }
  97.5%, 100% { --on: 0; }
}

@media (max-width: 1080px) {
  .run { grid-template-columns: minmax(0, 1fr); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 4vw, 3rem); }
}
@media (max-width: 620px) {
  .terms { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Who you'll work with ---------- */

#team .section__head { max-width: 60rem; }
.team {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1rem;
  align-items: start;
}
.person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  align-items: start;
}
.person__photo {
  display: block;
  width: clamp(7rem, 12vw, 10rem);
  height: auto;
  aspect-ratio: 1;
  border-radius: 14px;
  object-fit: cover;
  object-position: 50% 20%;
  background: var(--surface-2);
}
.person__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: 1.5rem;
  font-weight: 650;
  font-stretch: 110%;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.person__name span {
  color: var(--text-3);
  font-size: 1rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0;
}
.person__role {
  margin-top: 0.35rem;
  color: var(--text-2);
  font-size: 1rem;
}
.person__bio {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  color: var(--text-2);
  font-size: 1.0625rem;
}
.person__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line-2);
}
.person__facts li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1.4;
}
.person__facts svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  margin-top: 0.05rem;
  fill: none;
  stroke: var(--text-2);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.split h3 { margin-bottom: 0.5rem; }
.split__intro { color: var(--text-2); font-size: 1rem; }
.split__rows { margin-top: 1.5rem; }
.split__rows li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-2);
}
.split__who {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  line-height: 1.4;
}
.split__who::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--text-3);
}
.split__rows p { color: var(--text-2); font-size: 1rem; line-height: 1.5; }

@media (max-width: 1000px) {
  .team { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .person { grid-template-columns: 1fr; }
  .person__facts { grid-template-columns: 1fr; }
  .split__rows li { grid-template-columns: 1fr; }
}

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

.faq {
  max-width: 56rem;
  border-bottom: 1px solid var(--line-2);
}
.faq details { border-top: 1px solid var(--line-2); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.5rem;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  font-stretch: 104%;
  letter-spacing: -0.01em;
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background:
    linear-gradient(var(--text-2), var(--text-2)) center / 10px 1.5px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) center / 1.5px 10px no-repeat;
  transition: transform 0.25s var(--ease), background-color 0.2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover::after { background-color: var(--surface-2); }
.faq__a {
  max-width: 44rem;
  padding: 0 3.25rem 1.75rem 0;
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* ---------- Final CTA ---------- */

.cta {
  position: relative;
  padding-block: var(--section-y);
  border-top: 1px solid var(--line);
  background: radial-gradient(50% 55% at 50% 60%, rgb(179 164 255 / 0.09), transparent 70%);
  overflow: hidden;
}
.cta .chip { margin-bottom: 2rem; }
.cta__title {
  max-width: 12ch;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(2rem, 4vw, 2.5rem);
  border-top: 1px dashed var(--line-2);
}
.cta__lede {
  max-width: 30rem;
  color: var(--text-2);
  font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
  line-height: 1.5;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.cta__mail {
  color: var(--text-3);
  font-size: 0.9375rem;
}
.cta__mail a {
  color: var(--text);
  font-weight: 600;
  text-underline-offset: 4px;
}

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background: var(--midnight);
  color: var(--text-3);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 3rem;
  font-size: 0.9375rem;
}
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem 3rem;
  align-items: start;
}
.footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  font-stretch: 115%;
  letter-spacing: -0.02em;
}
.footer__tagline {
  margin-top: 0.75rem;
  color: var(--text);
  font-size: 1.0625rem;
  font-weight: 500;
}
.footer__about {
  max-width: 40rem;
  margin-top: 0.5rem;
  color: var(--text-3);
  font-size: 0.875rem;
  line-height: 1.55;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 700px) {
  .footer__inner { grid-template-columns: 1fr; }
}

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

.contact {
  width: min(36rem, calc(100vw - 1.5rem));
  max-height: calc(100vh - 1.5rem);
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: var(--midnight);
  color: var(--text);
  box-shadow: 0 24px 64px rgb(0 0 0 / 0.5);
}
.contact::backdrop {
  background: rgb(7 13 31 / 0.78);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.contact [hidden] { display: none !important; }

.contact__panel { padding: clamp(1.35rem, 4vw, 2.15rem); }
.contact__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.contact__title {
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.contact__lede {
  margin-top: 0.85rem;
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.45;
}
.contact__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  margin: -0.15rem -0.15rem 0 0;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.contact__close:hover { background: var(--surface-2); }
.contact__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.contact__form { margin-top: 0.25rem; }
.contact__fields {
  display: grid;
  gap: 0.95rem;
  margin-top: 1.35rem;
}
.field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 600;
}
.field__opt {
  color: var(--text-3);
  font-weight: 500;
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--text-3);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}
.field textarea {
  min-height: 7.5rem;
  resize: vertical;
}
.field input:focus-visible,
.field textarea:focus-visible { border-color: var(--lilac); }
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: var(--lilac);
  border-width: 2px;
  padding: calc(0.75rem - 1px) calc(0.9rem - 1px);
  background: var(--surface-2);
}

.contact__status {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--lilac);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.contact__actions {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.contact__note {
  color: var(--text-3);
  font-size: 0.875rem;
}
.contact__note a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn:disabled { opacity: 0.65; cursor: wait; }

.contact__success {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.contact__success p { color: var(--text-2); }
.contact__success strong {
  color: var(--text);
  font-weight: 650;
  overflow-wrap: anywhere;
}

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

@media (max-width: 560px) {
  .contact { border-radius: 20px; }
  .contact__actions .btn,
  .contact__success .btn { width: 100%; }
}

/* ---------- Scroll reveals ----------
   Progressive enhancement. A script in <head> adds html.reveal only when
   IntersectionObserver exists and reduced motion is off, so without JS or
   with reduced motion nothing is ever hidden. Elements fade and rise once.
   The hero headline and lede are never hidden. */
html.reveal [data-reveal]:not(.in) {
  opacity: 0;
  transform: translateY(16px);
}
html.reveal .section__title [data-reveal]:not(.in),
html.reveal .cta__title[data-reveal]:not(.in) { transform: translateY(24px); }
html.reveal [data-reveal] {
  transition:
    opacity 0.6s var(--ease) var(--d, 0ms),
    transform 0.6s var(--ease) var(--d, 0ms);
}
html.reveal .section__title [data-reveal],
html.reveal .cta__title[data-reveal] { transition-duration: 0.7s; }
/* Clauses animate as blocks of text, so they need a box to move */
.section__title .c1,
.section__title .c2 { display: inline-block; }

/* Sequence inside a section head: chip, clause one, clause two, lede */
.section__head > .chip,
.cta > .wrap > .chip { --d: 0ms; }
.section__title .c1 { --d: 80ms; }
.section__title .c2 { --d: 200ms; }
.section__head > .section__lede,
.problem__body,
.cta__row { --d: 280ms; }
.section__head > .section__lede + .section__lede { --d: 340ms; }

/* Cards and rows stagger 70ms apart, capped at the sixth */
[data-stagger] > :nth-child(2) { --d: 70ms; }
[data-stagger] > :nth-child(3) { --d: 140ms; }
[data-stagger] > :nth-child(4) { --d: 210ms; }
[data-stagger] > :nth-child(5) { --d: 280ms; }
[data-stagger] > :nth-child(n+6) { --d: 350ms; }

/* Live graphics (data-live) loop only once the script has seen them on
   screen (.is-live), and hold still while off screen or in a hidden tab.
   The loops set the animation shorthand, which resets play-state with
   higher specificity, so the hold has to be !important. */
.is-held,
.is-held *,
.is-held *::before,
.is-held *::after { animation-play-state: paused !important; }

@media print {
  html.reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .nav { position: static; }
}