/* ==========================================================================
   Beonsys · design system

   Light first, with a matching dark scheme that follows the visitor's OS.
   Type is the platform's own (SF on Apple devices), with Inter elsewhere.
   Motion uses two curves and only transform, opacity and clip-path.
   Every value below is deliberate; change tokens, not one-off numbers.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Surfaces and ink */
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --tile: #f5f5f7;          /* cards placed on --bg */
  --card: #ffffff;          /* cards placed on --bg-alt or --tile */
  --ink: #1d1d1f;
  --ink-2: #5f5f64;         /* captions, kickers, meta: 6.4:1 on white, 5.9:1 on --bg-alt */
  --ink-3: #6e6e73;         /* two-tone headlines and placeholders: 5.1:1 on white */
  --line: rgba(0, 0, 0, 0.08);
  --line-strong: rgba(0, 0, 0, 0.16);
  --field: #ffffff;

  /* Meaning */
  --accent: #0066cc;        /* links, focus, "running" */
  --ok: #1a7f37;            /* done: 5.1:1 on white */
  --warn: #b25000;
  --danger: #d70015;

  /* One colour per kind of system, used on icons only */
  --c-agents: #0071e3;
  --c-flow: #f56300;
  --c-systems: #1f9d4d;
  --c-integrations: #8a4bff;
  /* Two more for the integrations hub, which needs six tools apart */
  --c-pink: #e0306a;
  --c-teal: #0a95ad;

  /* Particles and dot grid. Channels, so canvas code can add its own alpha. */
  --p-ink: 29, 29, 31;
  --p-a: 0, 113, 227;
  --p-b: 138, 75, 255;
  --dot: rgba(0, 0, 0, 0.12);
  --dot-hot: rgba(0, 113, 227, 0.75);

  /* Particle signature: one gradient through the mark into the word. */
  --sig-a: #0071e3;
  --sig-b: #8a4bff;
  --sig-orbit: rgba(0, 0, 0, 0.16);
  --sig-glow-a: 12%;
  --sig-glow-b: 8%;

  /* Controls */
  --btn: #1d1d1f;
  --btn-hover: #3a3a3c;
  --btn-ink: #ffffff;

  /* Materials */
  --header: rgba(255, 255, 255, 0.78);
  --header-edge: rgba(255, 255, 255, 0.9);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 6px 16px rgba(0, 0, 0, 0.05),
            0 28px 56px -16px rgba(0, 0, 0, 0.16);

  /* Type */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  /* Layout */
  --maxw: 75rem;
  --gutter: clamp(1.25rem, 0.6rem + 2.8vw, 2.5rem);
  --section: clamp(5.5rem, 3rem + 7vw, 10rem);
  --header-h: 3.5rem;
  --radius-lg: clamp(1.5rem, 1rem + 1.2vw, 2rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-alt: #0f0f10;
    --tile: #161617;
    --card: #1c1c1e;
    --ink: #f5f5f7;
    --ink-2: #a1a1a6;
    --ink-3: #86868b;
    --line: rgba(255, 255, 255, 0.1);
    --line-strong: rgba(255, 255, 255, 0.2);
    --field: #1c1c1e;

    --accent: #2997ff;
    --ok: #32d74b;
    --warn: #ffb340;
    --danger: #ff6961;

    --c-pink: #ff5c8a;
    --c-teal: #40c4dc;

    --btn: #f5f5f7;
    --btn-hover: #ffffff;
    --btn-ink: #000000;

    --p-ink: 226, 230, 240;
    --p-a: 41, 151, 255;
    --p-b: 160, 130, 255;
    --dot: rgba(255, 255, 255, 0.1);
    --dot-hot: rgba(41, 151, 255, 0.85);

    --sig-a: #2997ff;
    --sig-b: #a586ff;
    --sig-orbit: rgba(255, 255, 255, 0.18);
    --sig-glow-a: 26%;
    --sig-glow-b: 18%;

    --header: rgba(22, 22, 23, 0.74);
    --header-edge: rgba(0, 0, 0, 0.85);
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 28px 56px -16px rgba(0, 0, 0, 0.7);
  }
}

@media (min-width: 60rem) {
  :root { --header-h: 3.75rem; }
}


/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* On large screens the whole scale grows with the window, from 100% at 1280px
   to 110% at 1440px and up: larger type and a wider column, the same look as
   browser zoom at 110%. It starts at 1280px because on smaller laptops the
   bigger type pushes the last word of some headings onto a line of its own.
   Breakpoints stay where they are, since media queries ignore this. */
@media (min-width: 80rem) {
  html { font-size: clamp(100%, 100% + (100vw - 80rem) / 100, 110%); }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;           /* 17px, Apple's reading size */
  line-height: 1.47;
  letter-spacing: -0.009em;       /* near zero for body, per size-specific tracking */
  font-optical-sizing: auto;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  font-size: 0.875rem;
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform 200ms var(--ease-out);
}
.skip-link:focus-visible { transform: none; }

/* Drifting particle field. Fixed behind everything; content sits on z-index 1.
   Both dimensions are pinned in CSS: a canvas sized by its own attributes
   feeds its measurement back into itself and grows on every rebuild. 100lvh
   is the largest the mobile viewport gets, so the URL bar sliding away never
   needs a rebuild. */
.particles {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
main, .footer { position: relative; z-index: 1; }

.container {
  width: min(100% - 2 * max(var(--gutter), env(safe-area-inset-left)), var(--maxw));
  margin-inline: auto;
}


/* --------------------------------------------------------------------------
   Type
   Tracking tightens as size grows; leading loosens as size shrinks.
   -------------------------------------------------------------------------- */

/* Sizes and tracking follow Apple's web type table: only display type is
   tracked tight (-0.015em at 80px); section headlines sit near zero, and
   mid-size headlines and intros open up slightly. Hierarchy comes from size,
   weight and leading, so body copy stays in full ink rather than grey. */
.display {
  font-size: clamp(3rem, 1.2rem + 4.6vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
}

.title {
  font-size: clamp(2.25rem, 1.3rem + 2.9vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.004em;
  font-weight: 600;
  text-wrap: balance;
}

.lead {
  font-size: clamp(1.1875rem, 1.05rem + 0.5vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0.004em;
  color: var(--ink);
  text-wrap: pretty;
}
.lead strong { font-weight: 600; }

.eyebrow {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.3125rem);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.006em;
  color: var(--ink-2);
  margin-bottom: 1rem;
}

.muted { color: var(--ink-3); }     /* two-tone headlines; large text only */

.link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration-color: currentColor; }
}


/* --------------------------------------------------------------------------
   Buttons
   Feedback lives on the press, so every button scales on :active.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-height: 3rem;
  padding: 0 1.375rem;
  border: 0;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  white-space: nowrap;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn svg { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn--primary { background: var(--btn); color: var(--btn-ink); }
.btn--sm { min-height: 2.25rem; padding: 0 1rem; font-size: 0.875rem; letter-spacing: -0.006em; }
.btn--lg { min-height: 3.5rem; padding: 0 1.75rem; font-size: 1.125rem; }
.btn--quiet { background: var(--tile); color: var(--ink); }
.btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, visibility 0s linear 150ms;
}
@media (hover: hover) and (pointer: fine) {
  .btn--quiet:hover { background: color-mix(in srgb, var(--ink) 9%, var(--tile)); }
  .btn--lg:hover svg, .btn--primary:hover svg { transform: translateX(2px); }
}
.btn svg { transition: transform 200ms var(--ease-out); }

.btn--link {
  min-height: 3rem;
  padding: 0 0.25rem;
  color: var(--accent);
  background: none;
}
.btn--link svg { transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--btn-hover); }
  .btn--link:hover svg { transform: translateX(3px); }
}

.btn[disabled] { opacity: 0.5; pointer-events: none; }


/* --------------------------------------------------------------------------
   Header
   Translucent material; content scrolls underneath. When it does, a soft
   scroll-edge fade appears instead of a hard 1px divider.
   -------------------------------------------------------------------------- */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--ink);
  background: var(--header);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  transition: background-color 250ms ease, color 250ms ease;
}

/* Over the dark band the header becomes the dark material, so the light
   glass never turns muddy grey over black. */
html:not(.nav-open) .header.on-dark {
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --header: rgba(22, 22, 23, 0.72);
  --header-edge: rgba(0, 0, 0, 0.85);
  --btn: #f5f5f7;
  --btn-hover: #ffffff;
  --btn-ink: #000000;
}

.header::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 1.25rem;
  background: linear-gradient(var(--header-edge), transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.header.is-stuck::after { opacity: 0.6; }

.header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 60rem) {
  .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header__actions { grid-column: 3; justify-self: end; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  justify-self: start;
}
.brand__mark {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
}

.nav { display: none; position: relative; }
@media (min-width: 60rem) { .nav { display: flex; gap: 0.125rem; } }

.nav__link {
  position: relative;
  z-index: 1;
  padding: 0.5rem 0.875rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  color: var(--ink-2);
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover { color: var(--ink); }
}

/* Two stacked copies of the label in a one-line window. On hover both slide
   up, so the word turns over to a fresh copy of itself while the pill glides
   underneath. Hover is a tens-a-day action, so it stays under 300ms. */
.nav__roll {
  display: block;
  height: 1.3em;
  line-height: 1.3;
  overflow: hidden;
}
.nav__roll span {
  display: block;
  transition: transform 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav__link:hover .nav__roll span { transform: translateY(-100%); }
}
.nav__link:focus-visible .nav__roll span { transform: translateY(-100%); }

/* One pill glides between links. It is clipped, not resized, so the motion
   stays on clip-path. Hover is a tens-a-day action: keep it short. */
.nav__pill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  clip-path: inset(0 100% 0 0 round 999px);
  opacity: 0;
  pointer-events: none;
  transition: clip-path 220ms var(--ease-out), opacity 150ms ease;
}

.header__actions { display: flex; align-items: center; gap: 0.25rem; }

.burger {
  display: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -0.625rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.js .burger { display: inline-grid; }
@media (min-width: 60rem) { .js .burger { display: none; } }

.burger__lines { position: relative; width: 1.125rem; height: 0.75rem; }
.burger__lines::before,
.burger__lines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 250ms var(--ease-out);
}
.burger__lines::before { top: 2px; }
.burger__lines::after { bottom: 2px; }
.burger[aria-expanded="true"] .burger__lines::before { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__lines::after { transform: translateY(-3.25px) rotate(-45deg); }

/* Mobile menu: a full-screen layer under the header. Exit is faster than
   entry, and the links cascade in only on the way in. */
.mnav {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: 49;
  padding: 1.5rem max(var(--gutter), env(safe-area-inset-left)) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.mnav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 250ms var(--ease-out), visibility 0s;
}
.mnav nav { display: grid; }
.mnav__link {
  display: block;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 150ms ease, transform 150ms ease;
}
.mnav.is-open .mnav__link {
  opacity: 1;
  transform: none;
  transition: opacity 300ms var(--ease-out), transform 400ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 40ms + 40ms);
}
@media (min-width: 60rem) { .mnav { display: none; } }

html.nav-open { overflow: hidden; }
html.nav-open .header { background: var(--bg); }


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

.hero {
  position: relative;
  padding-block: clamp(3rem, 1rem + 6vw, 7rem) clamp(4.5rem, 2rem + 6vw, 8rem);
}
.hero__grid { position: relative; z-index: 1; }

/* Dot grid behind the hero. It drifts slower than the page for depth, and
   on desktop a spotlight of accent dots follows the cursor. The spotlight is
   a second dot layer revealed through a radial mask, so the dots line up
   exactly and only that one layer repaints. */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero__dots { position: absolute; inset: -6rem 0 -10rem; }
.dots {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.6px);
  background-size: 26px 26px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(85% 70% at 50% 30%, #000 30%, transparent 78%);
  mask-image: radial-gradient(85% 70% at 50% 30%, #000 30%, transparent 78%);
}
.dots--spot {
  background-image: radial-gradient(var(--dot-hot) 1.3px, transparent 1.8px);
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  opacity: 0;
  transition: opacity 300ms ease;
}
.dots--spot.is-pointing { opacity: 1; }

/* The same dots behind every other section, the footer and the short pages.
   main.js appends a .page-dots layer to each one. Isolation keeps the layer
   above the section's own background and under its content, and main.js
   shifts each grid to line up with the page so the dots run on unbroken
   from one section into the next. */
.has-dots { position: relative; isolation: isolate; }
.page-dots {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
/* The 404 page's main is itself the narrow container; widen its layer to the window. */
.notfound > .page-dots { inset: 0 calc(50% - 50vw); }
.page-dots .dots {
  -webkit-mask-image: none;
  mask-image: none;
}
.page-dots .dots--spot {
  -webkit-mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
  mask-image: radial-gradient(240px circle at var(--mx, -999px) var(--my, -999px), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 100%);
}

.hero__grid {
  display: grid;
  gap: clamp(3rem, 2rem + 3vw, 4.5rem);
  align-items: center;
}
@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.hero__title span { display: block; }
.hero__lead { margin-top: 1.5rem; max-width: 34rem; }

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-top: 2.25rem;
}

.hero__points {
  display: grid;
  gap: 0.625rem;
  margin-top: 2.5rem;
  list-style: none;
  font-size: 0.9375rem;
  letter-spacing: -0.004em;
}
.hero__points li { display: flex; align-items: center; gap: 0.625rem; }
.hero__points svg {
  width: 1.125rem; height: 1.125rem; flex: none;
  fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Load sequence: CSS only, so it runs off the main thread and needs no JS. */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
[data-enter] {
  animation: rise 1s var(--ease-out) both;
  animation-delay: calc(var(--d, 0) * 70ms + 60ms);
}


/* --------------------------------------------------------------------------
   Example workflow (hero visual)
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  margin: 0;
  padding: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 70% at 100% 0%, color-mix(in srgb, var(--c-agents) 9%, transparent), transparent 62%),
    radial-gradient(90% 60% at 0% 100%, color-mix(in srgb, var(--c-systems) 8%, transparent), transparent 60%),
    var(--tile);
}

/* Segmented control. The active look is a second copy of the labels,
   clipped to the selected button, so text colour changes in one motion. */
.seg {
  position: relative;
  display: flex;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: 4px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.seg__list { display: flex; }
.seg__btn,
.seg__overlay span {
  padding: 0.5rem 1.05rem;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  line-height: 1.3;
}
.seg__btn {
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 160ms var(--ease-out);
}
.seg__btn:active { transform: scale(0.97); }
.seg__overlay {
  position: absolute;
  inset: 4px;
  display: flex;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink);
  pointer-events: none;
  clip-path: inset(0 66.6% 0 0 round 999px);
  transition: clip-path 260ms var(--ease-out);
}

.flow__card {
  padding: 0.5rem;
  border-radius: 1.375rem;
  background: var(--card);
  box-shadow: var(--shadow);
}

.flow__body { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
.flow__body.is-swapping { opacity: 0; transform: translateY(4px); }

.flow__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.875rem 0.875rem 0.75rem;
}
.flow__kicker { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.004em; color: var(--ink-2); }
.flow__name { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.018em; margin-top: 0.1rem; }

.flow__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  background: var(--tile);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--ink-2);
  transition: color 200ms ease;
}
.flow__dot {
  position: relative;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--accent);
  transition: background-color 200ms ease;
}
.flow__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  opacity: 0;
}
.flow__status[data-state="running"] .flow__dot::after { animation: ping 1.4s var(--ease-out) infinite; }
.flow__status[data-state="done"] { color: var(--ok); }
.flow__status[data-state="done"] .flow__dot { background: var(--ok); }

@keyframes ping {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 0; transform: scale(2.6); }
}

.flow__track { position: relative; }

/* The highlight travels row to row: one object moving, not five blinking. */
.flow__hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.75rem;
  border-radius: 0.875rem;
  background: var(--tile);
  opacity: 0;
  transition: transform 450ms var(--ease-out), opacity 200ms ease;
}

.flow__steps { position: relative; list-style: none; }

.flow__step {
  display: grid;
  grid-template-columns: 1.375rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.625rem 0.875rem;
}

.flow__icon { position: relative; width: 1.375rem; height: 1.375rem; }
.flow__icon > span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 200ms var(--ease-out), transform 250ms var(--ease-out);
}
.flow__ring { border: 1.5px solid var(--line-strong); }
.flow__spin {
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-top-color: var(--accent);
}
.flow__check { background: var(--ok); transform: scale(0.6); display: grid; place-items: center; }
.flow__check svg { width: 0.875rem; height: 0.875rem; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { .flow__check svg { stroke: #000; } }

.flow__step[data-state="pending"] .flow__ring { opacity: 1; }
.flow__step[data-state="active"] .flow__spin { opacity: 1; animation: spin 0.8s linear infinite; }
.flow__step[data-state="done"] .flow__check { opacity: 1; transform: none; }

@keyframes spin { to { transform: rotate(360deg); } }

.flow__text { display: grid; min-width: 0; transition: opacity 250ms ease; }
.flow__step[data-state="pending"] .flow__text { opacity: 0.62; }
.flow__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.012em; }
.flow__detail {
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow__foot {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.375rem;
  padding: 0.875rem 0.875rem 0.625rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--ink-2);
}
.flow__foot span:last-child { color: var(--ink); font-weight: 500; text-align: right; }


/* --------------------------------------------------------------------------
   Statement: words light up as it scrolls through the viewport.
   Unlit words stay at 3:1+ so the sentence is always readable.
   -------------------------------------------------------------------------- */

.statement { padding-block: clamp(3rem, 1rem + 6vw, 7rem) clamp(1rem, 3vw, 3rem); }

.statement__inner { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); align-items: center; }
@media (min-width: 64rem) {
  .statement__inner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
}

.statement__text {
  max-width: 22em;
  font-size: clamp(1.75rem, 1rem + 2.3vw, 3.25rem);
  line-height: 1.14;
  letter-spacing: -0.003em;
  font-weight: 600;
  text-wrap: pretty;
}
.statement__text .w { transition: color 350ms ease; }
.statement__text.is-armed .w { color: var(--ink-3); }
.statement__text.is-armed .w.is-lit { color: var(--ink); }


/* Throughput grid. Each cell is a task: it dips as it is picked up, flashes
   the accent while it is worked, then holds green as it clears. A diagonal
   delay spreads the cells across the loop, so a band of work sweeps through
   instead of the grid blinking in unison. The colours are overlays animated
   on opacity, so nothing repaints. */
.matrix { justify-self: center; width: min(100%, 21rem); margin: 0; }
.matrix__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 0.6vw, 9px);
}
.matrix__grid span {
  position: relative;
  aspect-ratio: 1;
  border-radius: 4px;
  background: var(--line);
  animation: cell-pick 3.6s var(--ease-out) infinite;
  animation-delay: calc((var(--x) + var(--y)) * 0.28s - 3.6s);
}
.matrix__grid span::before,
.matrix__grid span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  animation-duration: 3.6s;
  animation-iteration-count: infinite;
  animation-delay: calc((var(--x) + var(--y)) * 0.28s - 3.6s);
}
.matrix__grid span::before { background: var(--accent); animation-name: cell-work; animation-timing-function: var(--ease-out); }
.matrix__grid span::after { background: var(--ok); animation-name: cell-done; animation-timing-function: ease; }

@keyframes cell-pick {
  0%, 100% { transform: scale(1); }
  4% { transform: scale(0.82); }
  14% { transform: scale(1); }
}
@keyframes cell-work {
  0% { opacity: 0; }
  4% { opacity: 1; }
  14%, 100% { opacity: 0; }
}
@keyframes cell-done {
  0%, 6% { opacity: 0; }
  14%, 32% { opacity: 0.55; }
  52%, 100% { opacity: 0; }
}

.matrix__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--ink-2);
}
.matrix__legend span { display: inline-flex; align-items: center; gap: 0.45rem; }
.matrix__key { width: 0.625rem; height: 0.625rem; border-radius: 3px; }
.matrix__key--q { background: var(--line-strong); }
.matrix__key--w { background: var(--accent); }
.matrix__key--d { background: color-mix(in srgb, var(--ok) 60%, transparent); }


/* --------------------------------------------------------------------------
   Signature: the mark and name, written in particles
   -------------------------------------------------------------------------- */

.signature { padding-block: 0 clamp(3rem, 2rem + 4vw, 6rem); }

/* The panel the signature sits in: a soft tile with a dot texture that fades
   toward its edges, a hairline edge, and a halo behind the name. */
.signature__frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line);
}
.signature__frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.6px);
  background-size: 22px 22px;
  background-position: center;
  -webkit-mask-image: radial-gradient(75% 70% at 50% 50%, #000 20%, transparent 85%);
  mask-image: radial-gradient(75% 70% at 50% 50%, #000 20%, transparent 85%);
}
.signature__canvas {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1200 / 560;
  touch-action: pan-y;
}
@media (max-width: 40rem) {
  .signature__canvas { aspect-ratio: 390 / 300; }
}
/* Static gradient; only its opacity follows the assembly. */
.signature__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: 80%;
  height: 92%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
    color-mix(in srgb, var(--sig-a) var(--sig-glow-a), transparent),
    color-mix(in srgb, var(--sig-b) var(--sig-glow-b), transparent) 55%,
    transparent);
  opacity: 0;
  pointer-events: none;
}

/* Tagline and service chips appear once the name is whole (.is-formed, set
   by the script). They arrive staggered and leave together, faster. */
.signature__caption {
  position: absolute;
  left: 50%;
  top: 89%;
  margin: 0;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  background: var(--tile);
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  letter-spacing: -0.01em;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(8px);
  transition: opacity 250ms ease, transform 300ms var(--ease-out);
}
.signature__chips { margin: 0; padding: 0; list-style: none; }
.sig-chip {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  transform: translate(-50%, -50%) translateY(10px) scale(0.96);
  transition: opacity 250ms ease, transform 300ms var(--ease-out);
}
.signature.is-formed .sig-chip {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: calc(var(--i) * 90ms + 120ms);
}
.signature.is-formed .signature__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity 700ms var(--ease-out) 520ms, transform 800ms var(--ease-out) 520ms;
}
.sig-chip__face {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), var(--shadow-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  white-space: nowrap;
  animation: chip-float 9s ease-in-out infinite;
  animation-delay: calc(var(--i) * -2.25s);
}
.sig-chip__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 18%, transparent);
}
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
/* Floating only while it is on screen and formed. */
.signature:not(.is-formed) .sig-chip__face { animation-play-state: paused; }

/* Phones: the chips sit in a grid under the name instead of around it. */
@media (max-width: 40rem) {
  .signature__caption {
    position: static;
    margin: -0.5rem auto 1rem;
    width: fit-content;
    text-align: center;
    white-space: normal;
    transform: translateY(8px);
  }
  .signature.is-formed .signature__caption { transform: none; }
  .signature__chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    padding: 0 1rem 1.25rem;
  }
  .sig-chip { position: static; transform: translateY(10px) scale(0.96); }
  .signature.is-formed .sig-chip { transform: none; }
  .sig-chip__face { display: flex; justify-content: center; gap: 0.4rem; font-size: 0.75rem; letter-spacing: 0; padding: 0.55rem 0.5rem; }
}

/* Shown until the canvas has drawn, so the name is never missing. */
.signature__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.28em;
  margin: 0;
  font-size: clamp(3rem, 1rem + 8vw, 8rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
.signature__fallback svg {
  width: 0.92em;
  height: 0.92em;
  fill: none;
  stroke: var(--c-agents);
  stroke-width: 6;
  stroke-linecap: round;
}
.signature__fallback[hidden] { display: none; }


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

.section { padding-block: var(--section); }
.section--alt { background: var(--bg-alt); }

.section__head { max-width: 50rem; margin-bottom: clamp(3rem, 2rem + 3vw, 5rem); }
.section__head .lead { margin-top: 1.25rem; max-width: 40rem; }


/* --------------------------------------------------------------------------
   What we build: bento
   -------------------------------------------------------------------------- */

.bento { display: grid; gap: clamp(0.75rem, 0.5rem + 0.6vw, 1.25rem); }

@media (min-width: 56rem) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .tile--agents { grid-column: span 7; }
  .tile--flow { grid-column: span 5; }
  .tile--systems { grid-column: span 5; }
  .tile--integrations { grid-column: span 7; }
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
  border-radius: var(--radius-lg);
  background: var(--tile);
  overflow: hidden;
}
@media (min-width: 56rem) { .tile { min-height: 32rem; } }

.tile__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 1.25rem;
  border-radius: 0.875rem;
  background: var(--c);
  color: #fff;
}
.tile__icon svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.tile__label { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; color: var(--ink-2); }
.tile__title {
  margin-top: 0.5rem;
  font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2rem);
  line-height: 1.125;
  letter-spacing: 0;
  font-weight: 600;
  text-wrap: balance;
}
.tile__body { margin-top: 0.875rem; max-width: 32rem; text-wrap: pretty; }
.tile__visual { margin-top: auto; }

/* Agents: a conversation. The customer is blue on the right, the agent grey on the left. */
.chat { display: grid; gap: 0.5rem; max-width: 27rem; }
.chat__msg {
  max-width: 82%;
  padding: 0.625rem 0.9rem;
  border-radius: 1.125rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.008em;
}
.chat__msg--in {
  justify-self: start;
  background: #e9e9eb;
  border-bottom-left-radius: 0.375rem;
  transform-origin: bottom left;
}
.chat__msg--out {
  justify-self: end;
  background: var(--c-agents);
  color: #fff;
  border-bottom-right-radius: 0.375rem;
  transform-origin: bottom right;
}
@media (prefers-color-scheme: dark) { .chat__msg--in { background: #2c2c2e; } }
.chat__meta {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--ink-2);
}
.dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--ok); flex: none; }

@keyframes pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.js .chat > * { opacity: 0; }
.js .tile.is-in .chat > * {
  animation: pop 500ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 550ms + 350ms);
}

/* Once main.js takes the chat over it plays conversations on a loop: the
   window grows into the tile's spare height (on desktop), messages stack from the bottom
   and older ones scroll up under a fade. Each new bubble pops in on its own. */
.chat.is-scripted {
  position: relative;
  flex: 1 0 auto;
  align-content: end;
  height: 19rem;            /* fixed, so the tile never changes size mid-chat */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
  mask-image: linear-gradient(to bottom, transparent, #000 2.5rem);
}
.js .tile.is-in .chat.is-scripted > * { opacity: 1; animation: pop 450ms var(--ease-out) both; }
.chat__msg--typing { display: flex; gap: 0.3rem; padding-block: 0.85rem; }
.chat__msg--typing span {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.45;
  animation: typing 1.1s ease-in-out infinite;
}
.chat__msg--typing span:nth-child(2) { animation-delay: 150ms; }
.chat__msg--typing span:nth-child(3) { animation-delay: 300ms; }
@keyframes typing {
  0%, 60%, 100% { transform: none; opacity: 0.45; }
  30% { transform: translateY(-3px); opacity: 1; }
}

/* Workflow automation: work items drop down a rail, stopping at each stage.
   The item clock (9s) and the stage clocks (3s) are two halves of one
   timeline: an item sits at stage one from 12% to 24% of its trip
   (1.08s-2.16s), so stage one's ring and fill carry --at: 1.08s to meet it;
   stage two (3.06s) wraps to 0.06s, stage three (5.04s) to 2.04s. Move one
   and the other has to move with it, or items arrive at dark stages. */
.pipe {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 384 / 330;
}
.pipe__rail {
  position: absolute;
  left: 6%;
  top: 3%;
  bottom: 3%;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--line-strong);
}
.pipe__stage {
  position: absolute;
  left: 16%;
  right: 0;
  height: 24%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  padding: 0 1.125rem;
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.pipe__stage--1 { top: 6%; }
.pipe__stage--2 { top: 38%; }
.pipe__stage--3 { top: 70%; }
.pipe__name { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.pipe__track {
  position: relative;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.pipe__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--c-flow);
  transform: scaleX(0);
  transform-origin: left;
  animation: pipe-fill 3s linear infinite;
  animation-delay: var(--at, 0s);
}
.pipe__ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px var(--c-flow), 0 8px 24px -8px color-mix(in srgb, var(--c-flow) 45%, transparent);
  opacity: 0;
  animation: pipe-ring 3s ease-out infinite;
  animation-delay: var(--at, 0s);
}
/* Each item is a full-height wrapper, so translateY in % is a share of the
   figure's height; the square rides its top edge. */
.pipe__item {
  position: absolute;
  inset: 0;
  animation: pipe-travel 9s var(--ease-in-out) infinite;
  animation-delay: var(--lag, 0s);
}
.pipe__item i {
  position: absolute;
  top: 0;
  left: 6%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 4px;
  background: var(--c-flow);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-flow) 18%, transparent);
}
.pipe__item--2 i { background: var(--c-agents); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-agents) 18%, transparent); }
.pipe__item--3 i { background: var(--c-integrations); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-integrations) 18%, transparent); }

@keyframes pipe-travel {
  0%   { transform: translateY(3%);  opacity: 0; }
  2%   { transform: translateY(3%);  opacity: 1; }
  12%  { transform: translateY(18%); }
  24%  { transform: translateY(18%); }
  34%  { transform: translateY(50%); }
  46%  { transform: translateY(50%); }
  56%  { transform: translateY(82%); }
  68%  { transform: translateY(82%); opacity: 1; }
  78%  { transform: translateY(97%); opacity: 1; }
  84%  { transform: translateY(97%); opacity: 0; }
  100% { transform: translateY(97%); opacity: 0; }
}
@keyframes pipe-ring {
  0% { opacity: 0; }
  8%, 34% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes pipe-fill {
  0%   { transform: scaleX(0); opacity: 0; }
  3%   { transform: scaleX(0); opacity: 1; }
  36%  { transform: scaleX(1); opacity: 1; }
  46%  { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Internal systems: a small dashboard */
.dash {
  padding: 1.25rem;
  border-radius: 1.25rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}
.dash__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dash__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.dash__chip {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--tile);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
}
.dash__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; margin-bottom: 0.875rem; }
.dash__stats > div { padding: 0.75rem 0.875rem; border-radius: 0.875rem; background: var(--tile); }
.dash__k { display: block; font-size: 0.75rem; letter-spacing: 0.004em; color: var(--ink-2); }
.dash__v {
  display: block;
  margin-top: 0.15rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dash__rows { list-style: none; }
.dash__rows li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  letter-spacing: -0.008em;
}

.tag {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  white-space: nowrap;
}
.tag--ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.tag--run { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tag--wait { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.tag--plain { color: var(--ink-2); background: var(--tile); font-weight: 500; }

/* Integrations: one system connected to the tools around it. The core is a
   switch: press it and pulses of light carry work from one tool, through the
   hub, to another. main.js spawns the pulses; everything here is styling and
   the on/off states. */
.hub { position: relative; height: 15rem; }
.hub__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub__lines line {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  vector-effect: non-scaling-stroke;
  transition: stroke 600ms var(--ease-out);
}
.hub.is-on .hub__lines line {
  stroke: color-mix(in srgb, var(--c-integrations) 45%, var(--line-strong));
  animation: hub-march 1.2s linear infinite;
}
@keyframes hub-march { to { stroke-dashoffset: -14; } }

.hub__beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hub__beam {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 42 400;
  stroke-dashoffset: -100;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px currentColor);
}

.hub__core {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  margin: -2rem 0 0 -2rem;
  padding: 0;
  border: 0;
  border-radius: 1.125rem;
  background: var(--btn);
  color: var(--btn-ink);
  box-shadow: var(--shadow-sm);
  transition: transform 200ms var(--ease-out);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: hover) and (pointer: fine) {
  .hub__core:hover { transform: scale(1.05); }
}
.hub__core:active { transform: scale(0.94); }
.hub__core:focus-visible { outline: 2px solid var(--accent); outline-offset: 0.875rem; }
.hub__core svg {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 6.5;
  stroke-linecap: round;
}
/* The lit state fades in over the dark key rather than swapping colours. */
.hub__core::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--sig-a), var(--sig-b));
  box-shadow: 0 10px 30px -6px color-mix(in srgb, var(--c-integrations) 70%, transparent);
  opacity: 0;
  transition: opacity 400ms var(--ease-out);
}
.hub.is-on .hub__core { color: #ffffff; }
.hub.is-on .hub__core::after { opacity: 1; }
.hub__core svg, .hub__glow { z-index: 1; }
/* Flashes in the colour of each pulse as it passes through. */
.hub__glow {
  position: absolute;
  inset: -0.375rem;
  border-radius: 1.4rem;
  background: var(--pc, var(--c-integrations));
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.hub__core::before {
  content: "";
  position: absolute;
  inset: -0.625rem;
  border-radius: 1.5rem;
  border: 1.5px solid var(--c-integrations);
  opacity: 0;
  pointer-events: none;
}
.js .hub__core::before { animation: halo 2.8s var(--ease-out) infinite; }
.js .hub.is-on .hub__core::before { animation-duration: 1.4s; }
@keyframes halo {
  from { opacity: 0.6; transform: scale(0.88); }
  to { opacity: 0; transform: scale(1.22); }
}
.hub__node {
  position: absolute;
  z-index: 1;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(0, 0, 0, 0.04);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.004em;
  white-space: nowrap;
}
/* A ring in the tool's colour, flashed by main.js when a pulse lands. */
.hub__node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px var(--pc), 0 6px 18px -4px color-mix(in srgb, var(--pc) 55%, transparent);
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  pointer-events: none;
}
.hub__node.is-hit::after { opacity: 1; transition-duration: 120ms; }
/* Each pulse is a full-size wrapper, so translate in % is a share of the
   hub's own width and height; the light rides its top-left corner. */
.hub__pulse {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.hub__pulse i {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--pc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 22%, transparent),
              0 0 14px 2px color-mix(in srgb, var(--pc) 60%, transparent);
}
.hub__pulse--tail i { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; box-shadow: none; opacity: 0.45; }
.hub__pulse--tail + .hub__pulse--tail i { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; opacity: 0.25; }
@media (max-width: 30rem) {
  .hub { height: 13rem; }
  .hub__node { padding: 0.35rem 0.6rem; font-size: 0.75rem; letter-spacing: 0.004em; }
}

/* Looping visuals only run while on screen. */
.js [data-live]:not(.is-live) *,
.js [data-live]:not(.is-live) *::before,
.js [data-live]:not(.is-live) *::after { animation-play-state: paused !important; }


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

.process { display: grid; gap: 3rem; }
@media (min-width: 64rem) {
  .process { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 5rem; align-items: start; }
  .process__intro { position: sticky; top: calc(var(--header-h) + 3rem); }
}

.pindex { display: none; position: relative; margin-top: 3rem; padding-left: 1.25rem; }
@media (min-width: 64rem) { .pindex { display: block; } }
.pindex::before,
.pindex__fill {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}
.pindex__fill {
  background: var(--ink);
  transform-origin: top;
  transform: scaleY(0.25);
  transition: transform 500ms var(--ease-out);
}
.pindex ol { list-style: none; display: grid; }
.pindex li {
  padding: 0.5rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink-3);
  transition: color 250ms ease;
}
.pindex li.is-active { color: var(--ink); }

.psteps { list-style: none; display: grid; gap: 1rem; }
.pstep {
  padding: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--card);
}
.pstep__num {
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem);
}
.pstep__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.125;
  letter-spacing: 0;
  font-weight: 600;
}
.pstep__body { margin-top: 0.875rem; max-width: 36rem; text-wrap: pretty; }
.pstep__out {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  letter-spacing: -0.004em;
}
.pstep__out b {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--ink-2);
}


/* --------------------------------------------------------------------------
   Where to start
   -------------------------------------------------------------------------- */

.starts { list-style: none; border-top: 1px solid var(--line-strong); }
.starts li {
  display: grid;
  gap: 0.5rem 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .starts li { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 11rem; align-items: baseline; }
}
.starts h3 {
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.004em;
  font-weight: 600;
}
.starts p { text-wrap: pretty; }
.starts .tag { justify-self: start; margin-top: 0.25rem; }


/* --------------------------------------------------------------------------
   Why Beonsys
   -------------------------------------------------------------------------- */

.principles { display: grid; gap: 2.5rem 2rem; }
@media (min-width: 56rem) { .principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principle { padding-top: 1.75rem; border-top: 1px solid var(--line-strong); }
.principle h3 {
  margin-bottom: 0.75rem;
  font-size: clamp(1.3125rem, 1.15rem + 0.5vw, 1.625rem);
  line-height: 1.2;
  letter-spacing: 0.004em;
  font-weight: 600;
}
.principle p { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   Outcomes band: the one dark moment in the light page
   -------------------------------------------------------------------------- */

.band {
  --ink: #f5f5f7;
  --ink-2: #a1a1a6;
  --ink-3: #86868b;
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.24);
  position: relative;
  padding-block: var(--section);
  background:
    radial-gradient(60% 55% at 50% 0%, rgba(41, 151, 255, 0.16), transparent 70%),
    #000;
  color: var(--ink);
  overflow: hidden;
}
@media (prefers-color-scheme: dark) {
  .band {
    background:
      radial-gradient(60% 55% at 50% 0%, rgba(41, 151, 255, 0.2), transparent 70%),
      #000;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  }
}
.band .muted { color: #86868b; }
.band { --dot: rgba(255, 255, 255, 0.1); --dot-hot: rgba(41, 151, 255, 0.85); }

.outcomes { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .outcomes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.outcome { padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.outcome dt {
  margin-bottom: 0.5rem;
  font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.2;
  letter-spacing: 0.004em;
  font-weight: 600;
}
.outcome dd { text-wrap: pretty; }


/* --------------------------------------------------------------------------
   Closing call to action (home)
   -------------------------------------------------------------------------- */

.closing__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(3rem, 2rem + 5vw, 6.5rem) clamp(1.5rem, 1rem + 4vw, 5rem);
  border-radius: calc(var(--radius-lg) * 1.25);
  background: var(--tile);
  text-align: center;
}
.closing__card .title { max-width: 15em; margin-inline: auto; }
.closing__card .lead { max-width: 34rem; margin: 1.25rem auto 0; }
.closing__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 2.25rem;
}
.closing__glow {
  position: absolute;
  inset: -40% -10% auto;
  height: 130%;
  z-index: -1;
  background:
    radial-gradient(45% 45% at 50% 30%, color-mix(in srgb, var(--c-agents) 14%, transparent), transparent 70%),
    radial-gradient(35% 35% at 78% 45%, color-mix(in srgb, var(--c-integrations) 11%, transparent), transparent 70%),
    radial-gradient(30% 30% at 22% 50%, color-mix(in srgb, var(--c-systems) 8%, transparent), transparent 70%);
  pointer-events: none;
}


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

.hero--contact { padding-block: clamp(2.5rem, 1rem + 4vw, 5rem) var(--section); }

.contact-page {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 2.5rem;
  grid-template-areas: "head" "form" "aside";
}
@media (min-width: 64rem) {
  .contact-page {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6.2fr);
    grid-template-areas: "head form" "aside form";
    column-gap: clamp(3rem, 2rem + 3vw, 5.5rem);
    row-gap: 3rem;
    align-items: start;
  }
  .contact-page__form { position: sticky; top: calc(var(--header-h) + 2rem); }
}
.contact-page__head { grid-area: head; }
.contact-page__form { grid-area: form; }
.contact-page__aside { grid-area: aside; }

.contact-page__title {
  font-size: clamp(2.5rem, 1.4rem + 3.1vw, 4rem);
  line-height: 1.06;
  letter-spacing: -0.009em;
  font-weight: 600;
  text-wrap: balance;
}
.contact-page__head .lead { margin-top: 1.25rem; max-width: 34rem; }

/* The stepper card */
.stepper {
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
}
.stepper__top { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.stepper__count {
  flex: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.004em;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.stepper__count-done { display: none; color: var(--ok); }
.stepper.is-done .stepper__count-steps { display: none; }
.stepper.is-done .stepper__count-done { display: inline; }
.stepper__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.stepper__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--c-agents), var(--c-integrations));
  transform: scaleX(0.3333);
  transform-origin: left;
  transition: transform 500ms var(--ease-out);
}

/* Steps share one grid cell, so the card is as tall as its tallest step and
   never jumps. The step you came from leaves toward where it sits in the
   sequence; the next one arrives from the other side. Exit is faster than
   entry. Without JS every step simply shows, stacked. */
.stepper__viewport { display: grid; }
.step { grid-area: 1 / 1; min-width: 0; margin: 0; padding: 0; border: 0; }
.js .step {
  transition: opacity 260ms var(--ease-out), transform 380ms var(--ease-out), visibility 0s;
}
.js .step.is-before,
.js .step.is-after {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease, transform 260ms var(--ease-out), visibility 0s linear 260ms;
}
.js .step.is-before { transform: translateX(-28px); }
.js .step.is-after { transform: translateX(28px); }
html:not(.js) .step + .step { margin-top: 2.5rem; }
html:not(.js) .step--done, html:not(.js) .stepper__top { display: none; }

.step__title {
  display: block;
  width: 100%;
  padding: 0;
  font-size: clamp(1.375rem, 1.15rem + 0.8vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.002em;
  font-weight: 600;
}
.step__hint { margin-top: 0.5rem; font-size: 0.9375rem; letter-spacing: -0.004em; color: var(--ink-2); }
.step .field { margin-top: 1.5rem; }
.step .form__row { margin-top: 1.5rem; }
.step .form__row .field { margin-top: 0; }
.field__label { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.004em; }

/* Choice chips. The native input covers the chip, so taps, keyboard and
   screen readers all work without scripting. When picked, the glyph turns
   into a check in the same box, so nothing reflows. */
.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; margin-top: 1.5rem; }
.chips--compact { margin-top: 0.75rem; }
.chip { position: relative; display: inline-flex; }
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.chip__face {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.05rem;
  border-radius: 999px;
  background: var(--tile);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.006em;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 200ms ease, box-shadow 200ms ease, transform 160ms var(--ease-out);
}
.chip:has(.chip__icon) .chip__face { padding-left: 0.85rem; }
.chip__icon { position: relative; flex: none; width: 1.125rem; height: 1.125rem; }
.chip__icon svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 200ms ease, transform 250ms var(--ease-out);
}
.chip__check { opacity: 0; transform: scale(0.6); color: var(--accent); stroke-width: 2.4 !important; }
.chip input:checked + .chip__face {
  background: color-mix(in srgb, var(--accent) 9%, var(--card));
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.chip input:checked + .chip__face .chip__glyph { opacity: 0; transform: scale(0.6); }
.chip input:checked + .chip__face .chip__check { opacity: 1; transform: none; }
.chip input:focus-visible + .chip__face { outline: 2px solid var(--accent); outline-offset: 3px; }
.chip:active .chip__face { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .chip:hover .chip__face { box-shadow: inset 0 0 0 1px var(--line-strong); }
}

.stepper__nav { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; }
.stepper__nav #step-next { margin-left: auto; }
.stepper__note { margin-top: 1.25rem; font-size: 0.8125rem; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.stepper.is-done .stepper__nav,
.stepper.is-done .stepper__note { display: none; }

/* Done */
.done__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}
.done__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 0;
}
.js .step--done.is-active .done__icon { animation: done-pop 500ms var(--ease-out) 120ms both; }
.js .step--done.is-active .done__icon svg { animation: done-draw 420ms var(--ease-out) 320ms both; }
@keyframes done-pop {
  from { opacity: 0; transform: scale(0.7); }
  to { opacity: 1; transform: none; }
}
@keyframes done-draw {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}
.done__title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: 1.125;
  letter-spacing: 0;
  font-weight: 600;
  outline: none;
}
.done__body { margin-top: 0.625rem; text-wrap: pretty; }
.done__note {
  margin: 1.5rem 0 0;
  padding: 1rem 1.125rem;
  max-height: 11rem;
  overflow: auto;
  border-radius: 1rem;
  background: var(--tile);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0;
  white-space: pre-wrap;
  color: var(--ink-2);
}
.done__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.done__restart {
  margin-top: 1rem;
  padding: 0.5rem 0;
  border: 0;
  background: none;
  font-size: 0.9375rem;
  color: var(--accent);
}

/* What happens next */
.aside__title { margin-bottom: 1.25rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink-2); }
.next { list-style: none; display: grid; }
.next li { position: relative; display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.5rem; }
.next li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2.4rem;
  bottom: 0.3rem;
  width: 1px;
  background: var(--line-strong);
}
.next__num {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.next h3 { margin-top: 0.2rem; font-size: 1.0625rem; line-height: 1.35; letter-spacing: -0.012em; font-weight: 600; }
.next p { margin-top: 0.25rem; font-size: 0.9375rem; text-wrap: pretty; }

.founder {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: 1.125rem 1.25rem;
  border-radius: 1.25rem;
  background: var(--tile);
}
.founder__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.875rem;
  background: var(--btn);
  color: var(--btn-ink);
}
.founder__mark svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 6.5; stroke-linecap: round; }
.founder__title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.006em; }
.founder__text { font-size: 0.875rem; color: var(--ink-2); }
.founder .btn { margin-left: auto; }

/* Shared field styles */
.form__row { display: grid; gap: 1.25rem; }
@media (min-width: 40rem) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.field { display: grid; gap: 0.5rem; }
.field label { font-size: 0.9375rem; font-weight: 500; letter-spacing: -0.004em; }
.field input,
.field textarea {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 0.875rem;
  background: var(--field);
  font-size: 1.0625rem;           /* 16px+ so iOS never zooms the page */
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: var(--ink-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field [aria-invalid="true"] { border-color: var(--danger); }
.field__error { font-size: 0.875rem; color: var(--danger); }
.field__error[hidden] { display: none; }


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

.footer {
  padding: 4rem 0 calc(2rem + env(safe-area-inset-bottom));
  background: var(--bg-alt);
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--ink-2);
}
.footer__top { display: grid; gap: 2.5rem; }
@media (min-width: 56rem) { .footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); } }
.footer .brand { color: var(--ink); }
.footer__tagline, .footer__nav a, .footer__base { color: var(--ink-2); }
.footer__tagline { margin-top: 0.875rem; max-width: 22rem; }
.footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 2rem; }
.footer__nav h2 { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.footer__nav a { display: block; padding: 0.4rem 0; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .footer__nav a:hover { color: var(--ink); }
}
.footer__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8125rem;
}


/* --------------------------------------------------------------------------
   Legal pages and 404
   -------------------------------------------------------------------------- */

.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--section); }
.prose { max-width: 42rem; }
.prose h1 {
  font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.006em;
  font-weight: 600;
}
.prose__meta { margin-top: 0.75rem; font-size: 0.9375rem; color: var(--ink-2); }
.prose__intro { margin-top: 2rem; }
.prose h2 {
  margin: 2.5rem 0 0.75rem;
  font-size: 1.3125rem;
  line-height: 1.25;
  letter-spacing: 0.004em;
  font-weight: 600;
}
.prose p, .prose li { text-wrap: pretty; }
.prose p + p { margin-top: 1rem; }
.prose ul { display: grid; gap: 0.5rem; margin-top: 0.75rem; padding-left: 1.25rem; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 0.18em; }

.notfound {
  min-height: calc(100svh - var(--header-h));
  display: grid;
  place-items: center;
  padding: 3rem 0 6rem;
  text-align: center;
}
.notfound__code { margin-bottom: 1rem; font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.notfound__body { margin: 1.25rem auto 2.25rem; max-width: 30rem; }


/* --------------------------------------------------------------------------
   Scroll reveal
   Armed only when JS runs (.js). If the script never confirms it is alive,
   an inline timer adds .reveal-all and everything shows.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-reveal].is-in,
.reveal-all [data-reveal] { opacity: 1; transform: none; }


/* Section heads cascade: eyebrow, then headline, then lead, 70ms apart. The
   head itself only fades, so the children carry the movement. */
.js .section__head[data-reveal] { transform: none; }
.js .section__head[data-reveal] > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out);
}
.js .section__head[data-reveal].is-in > *,
.reveal-all .section__head > * { opacity: 1; transform: none; }
.js .section__head[data-reveal].is-in > :nth-child(2) { transition-delay: 70ms; }
.js .section__head[data-reveal].is-in > :nth-child(3) { transition-delay: 140ms; }

/* Text that changes in place (a status, a step number, a button label) rolls
   to its new value instead of teleporting; the script drives it with WAAPI. */
.swap { display: inline-block; }

/* Field errors arrive with a small drop; clearing one is instant, since a
   fixed field should just be fixed. */
.field__error:not([hidden]) {
  opacity: 1;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
  @starting-style { opacity: 0; transform: translateY(-4px); }
}

/* Press feedback for plain links: dim, the way Apple's text links do. */
.mnav__link, .footer__nav a, .link, .prose a, .done__restart, .brand, .founder__title {
  transition-property: opacity, color;
  transition-duration: 100ms, 200ms;
  transition-timing-function: ease;
}
.mnav__link:active, .footer__nav a:active, .link:active, .prose a:active, .done__restart:active, .brand:active { opacity: 0.55; }
.burger__lines { transition: transform 160ms var(--ease-out); }
.burger:active .burger__lines { transform: scale(0.88); }


/* --------------------------------------------------------------------------
   Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-enter] { animation: fade 400ms ease both; animation-delay: 0ms; }
  .js [data-reveal] { transform: none; transition: opacity 400ms ease; transition-delay: 0ms; }
  .js .section__head[data-reveal] > * { transform: none; transition: opacity 400ms ease; transition-delay: 0ms; }
  .field__error:not([hidden]) { transform: none; }
  .burger:active .burger__lines { transform: none; }
  .js .tile.is-in .chat > * { animation: fade 400ms ease both; }
  .pipe__item, .pipe__ring, .pipe__fill,
  .matrix__grid span, .matrix__grid span::before, .matrix__grid span::after { animation: none; }
  .pipe__item { opacity: 0; }
  .pipe__item--1 { opacity: 1; transform: translateY(50%); }
  .pipe__stage--2 .pipe__ring { opacity: 1; }
  .pipe__fill { transform: scaleX(1); }
  .pipe__stage--3 .pipe__fill { transform: scaleX(0); }
  .nav__roll span, .nav__link:hover .nav__roll span, .nav__link:focus-visible .nav__roll span { transform: none; }
  .dots--spot { display: none; }
  .sig-chip__face { animation: none; }
  @media (min-width: 40.01rem) {
    .sig-chip, .signature.is-formed .sig-chip,
    .signature__caption, .signature.is-formed .signature__caption { transform: translate(-50%, -50%); }
  }
  @media (max-width: 40rem) {
    .sig-chip, .signature.is-formed .sig-chip,
    .signature__caption, .signature.is-formed .signature__caption { transform: none; }
  }
  .js .step, .js .step.is-before, .js .step.is-after { transform: none; }
  .js .step--done.is-active .done__icon, .js .step--done.is-active .done__icon svg { animation: none; }
  .stepper__fill { transition-duration: 0ms; }
  .chip:active .chip__face { transform: none; }
  .js .hub__core::before,
  .hub.is-on .hub__lines line,
  .flow__status[data-state="running"] .flow__dot::after { animation: none; }
  .flow__hl, .flow__body, .seg__overlay, .nav__pill { transition-property: opacity; }
  .mnav__link, .mnav.is-open .mnav__link { transform: none; }
  .btn:active, .seg__btn:active, .hub__core:active, .hub__core:hover { transform: none; }
  .hub.is-on .hub__node::after { opacity: 1; }
}

@media (prefers-reduced-transparency: reduce) {
  .header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

@media (prefers-contrast: more) {
  :root { --ink-2: #3a3a3c; --ink-3: #5a5a5e; --line: rgba(0, 0, 0, 0.3); --line-strong: rgba(0, 0, 0, 0.5); }
  .header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 var(--line-strong); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root { --ink-2: #d1d1d6; --ink-3: #aeaeb2; --line: rgba(255, 255, 255, 0.35); --line-strong: rgba(255, 255, 255, 0.55); }
}

@media print {
  .header, .mnav, .hero__visual, .burger, .stepper, .skip-link,
  .particles, .hero__bg, .signature { display: none !important; }
  .js [data-reveal], .js .section__head > *, [data-enter] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .band { background: none; color: #000; }
  body { font-size: 11pt; }
}