/* GENERATED FILE — do not edit directly.
   Site styles: src/styles/*.css · Kit blocks: src/styles/vendor/blocks/*.css
   Tokens: committed src/styles/tokens/ (surface-website.css, tokens.css)
   Blocks: (no kit) (none)
   Build: shared build-lib.mjs --optimize */

:root {
  --colour-neutral-0: rgb(255 255 255);
  --colour-neutral-50: rgb(250 250 250);
  --colour-neutral-200: rgb(230 230 230);
  --colour-neutral-500: rgb(154 154 154);
  --colour-neutral-600: rgb(112 112 112);
  --colour-neutral-800: rgb(52 52 52);
  --colour-neutral-850: rgb(32 32 32);
  --colour-neutral-900: rgb(24 24 24);
  --colour-accent-500: rgb(38 100 227);
  --colour-text-strong: var(--colour-neutral-900);
  --colour-text-default: var(--colour-neutral-800);
  --colour-text-subtle: var(--colour-neutral-600);
  --colour-surface-raised: var(--colour-neutral-0);
  --colour-surface-base: var(--colour-neutral-50);
  --colour-action-primary: var(--colour-accent-500);
  --colour-action-primary-text: var(--colour-neutral-0);
}

[data-theme="dark"] {
  --colour-text-strong: var(--colour-neutral-50);
  --colour-text-default: var(--colour-neutral-200);
  --colour-text-subtle: var(--colour-neutral-500);
  --colour-surface-raised: var(--colour-neutral-850);
  --colour-surface-base: var(--colour-neutral-900);
  --colour-action-primary: var(--colour-accent-500);
  --colour-action-primary-text: var(--colour-neutral-0);
}

:root {
  --viewport-width: min(100vw, 2263px);
  --canvas-scale: clamp(1px, calc(var(--viewport-width) / 1600), 1.414375px);
  --content-max-width: 2263px;
  --role-heading-1-font-family: acumin-variable, system-ui, sans-serif;
  --role-heading-1-font-weight: 400;
  --role-lead-font-family: acumin-variable, system-ui, sans-serif;
  --role-lead-font-weight: 400;
  --role-body-font-family: acumin-variable, system-ui, sans-serif;
  --role-body-font-weight: 400;
  --role-heading-1-font-size: clamp(40px, calc(40px + 10 * ((var(--viewport-width) - 440px) / 460)), 50px);
  --role-heading-1-line-height: clamp(48px, calc(48px + 12 * ((var(--viewport-width) - 440px) / 460)), 60px);
  --role-lead-font-size: clamp(20px, calc(20px + 2 * ((var(--viewport-width) - 440px) / 460)), 22px);
  --role-lead-line-height: clamp(28px, calc(28px + 4 * ((var(--viewport-width) - 440px) / 460)), 32px);
  --role-body-font-size: clamp(16px, calc(16px + 2 * ((var(--viewport-width) - 440px) / 460)), 18px);
  --role-body-line-height: clamp(24px, calc(24px + 2 * ((var(--viewport-width) - 440px) / 460)), 26px);
  --space-tight: clamp(16px, calc(16px + 2 * ((var(--viewport-width) - 440px) / 460)), 18px);
  --space-element: clamp(32px, calc(32px + 4 * ((var(--viewport-width) - 440px) / 460)), 36px);
  --space-group: clamp(64px, calc(64px + 8 * ((var(--viewport-width) - 440px) / 460)), 72px);
  --space-section: clamp(128px, calc(128px + 16 * ((var(--viewport-width) - 440px) / 460)), 144px);
  --space-before-lead: clamp(20px, calc(20px + 2 * ((var(--viewport-width) - 440px) / 460)), 22px);
  --space-before-body: clamp(16px, calc(16px + 2 * ((var(--viewport-width) - 440px) / 460)), 18px);
  --grid-1-margin: clamp(32px, calc(32px + 4 * ((var(--viewport-width) - 440px) / 460)), 36px);
  --grid-1-gutter: clamp(24px, calc(24px + 4 * ((var(--viewport-width) - 440px) / 460)), 28px);
}

@media (min-width: 900px) {:root {
  --role-heading-1-font-size: clamp(50px, calc(50px + 12 * ((var(--viewport-width) - 900px) / 700)), 62px);
  --role-heading-1-line-height: clamp(60px, calc(60px + 16 * ((var(--viewport-width) - 900px) / 700)), 76px);
  --role-lead-font-size: clamp(22px, calc(22px + 4 * ((var(--viewport-width) - 900px) / 700)), 26px);
  --role-lead-line-height: clamp(32px, calc(32px + 6 * ((var(--viewport-width) - 900px) / 700)), 38px);
  --role-body-font-size: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 900px) / 700)), 20px);
  --role-body-line-height: clamp(26px, calc(26px + 2 * ((var(--viewport-width) - 900px) / 700)), 28px);
  --space-tight: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 900px) / 700)), 20px);
  --space-element: clamp(36px, calc(36px + 4 * ((var(--viewport-width) - 900px) / 700)), 40px);
  --space-group: clamp(72px, calc(72px + 8 * ((var(--viewport-width) - 900px) / 700)), 80px);
  --space-section: clamp(144px, calc(144px + 16 * ((var(--viewport-width) - 900px) / 700)), 160px);
  --space-before-lead: clamp(22px, calc(22px + 4 * ((var(--viewport-width) - 900px) / 700)), 26px);
  --space-before-body: clamp(18px, calc(18px + 2 * ((var(--viewport-width) - 900px) / 700)), 20px);
  --grid-1-margin: clamp(36px, calc(36px + 4 * ((var(--viewport-width) - 900px) / 700)), 40px);
  --grid-1-gutter: clamp(28px, calc(28px + 2 * ((var(--viewport-width) - 900px) / 700)), 30px);
}}

@media (min-width: 1600px) {:root {
  --role-heading-1-font-size: calc(62 * var(--canvas-scale));
  --role-heading-1-line-height: calc(76 * var(--canvas-scale));
  --role-lead-font-size: calc(26 * var(--canvas-scale));
  --role-lead-line-height: calc(38 * var(--canvas-scale));
  --role-body-font-size: calc(20 * var(--canvas-scale));
  --role-body-line-height: calc(28 * var(--canvas-scale));
  --space-tight: calc(20 * var(--canvas-scale));
  --space-element: calc(40 * var(--canvas-scale));
  --space-group: calc(80 * var(--canvas-scale));
  --space-section: calc(160 * var(--canvas-scale));
  --space-before-lead: calc(26 * var(--canvas-scale));
  --space-before-body: calc(20 * var(--canvas-scale));
  --grid-1-margin: calc(40 * var(--canvas-scale));
  --grid-1-gutter: calc(30 * var(--canvas-scale));
}}

.text-heading-1 {
  font-family: var(--role-heading-1-font-family);
  font-weight: var(--role-heading-1-font-weight);
  font-size: var(--role-heading-1-font-size);
  line-height: var(--role-heading-1-line-height);
}

.text-lead {
  font-family: var(--role-lead-font-family);
  font-weight: var(--role-lead-font-weight);
  font-size: var(--role-lead-font-size);
  line-height: var(--role-lead-line-height);
}

.text-body {
  font-family: var(--role-body-font-family);
  font-weight: var(--role-body-font-weight);
  font-size: var(--role-body-font-size);
  line-height: var(--role-body-line-height);
}

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

* {
  margin: 0;
}

html, body {
  height: 100%;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: inherit;
  text-decoration: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  
  scroll-padding-top: var(--space-group);
  background-color: var(--colour-surface-raised);
}

body {
  font-family: var(--role-body-font-family);
  font-size: var(--role-body-font-size);
  line-height: var(--role-body-line-height);
  color: var(--colour-text-default);
  
  background-color: var(--colour-surface-raised);
}

::selection {
  background-color: var(--colour-action-primary);
  color: var(--colour-action-primary-text);
}

.text-lead { margin-block-start: var(--space-before-lead); }

.text-body { margin-block-start: var(--space-before-body); }

:where(.text-heading-2, .text-heading-3, .text-lead, .text-body, .text-caption):first-child {
  margin-block-start: 0;
}

.text-body { text-wrap: pretty; }

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.page__main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.page__footer {
  color: var(--colour-text-subtle);
}

.page__footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-element);
  padding-block: var(--space-element);
}

.surface-container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--grid-1-margin);
}

:root {
  --section-surface: var(--colour-surface-base);
  --section-gap: var(--space-element);
  --section-padding: var(--space-element);
}

.section {
  background-color: var(--section-surface);
}

.section[data-theme="dark"] {
  color: var(--colour-text-default);
  background-color: var(--colour-surface-base);
}

.section__content {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-block: var(--section-padding);
}

.section__content--center :is(.measure, .text-display-1, .text-display-2, .text-heading-1, .text-heading-2, .text-heading-3, .text-heading-4, .text-body, .text-lead, .text-caption) {
  margin-inline: auto;
}

.flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-tight);
}

.flow > .button {
  margin-block-start: calc(var(--space-group) - var(--space-tight));
}

.section__content > .cluster {
  margin-block-start: calc(var(--space-group) - var(--space-element));
}

@media (min-width: 900px) {.section__content > .cluster {
    margin-block-start: 0;
  }}

.measure { max-width: 66ch; }

.heading--measure { max-width: 30ch; text-wrap: balance; }

:root {
  --section-surface: var(--colour-surface-raised);
  --section-padding: var(--space-section);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-element);
  padding-block: var(--space-tight);
}

.site-header__title {
  color: var(--colour-text-default);
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav__menu {
  display: flex;
  align-items: center;
  gap: var(--grid-1-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  color: inherit;
  text-decoration: none;
}

.site-nav__link:hover, .site-nav__link:focus-visible {
  color: var(--colour-text-strong);
}

.site-nav__link[aria-current="page"] {
  color: var(--colour-text-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.nav-progress {
  --progress: 0;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--colour-text-default);
  transform-origin: left center;
  transform: scaleX(var(--progress));
  transition: transform 200ms cubic-bezier(0.1, 0.5, 0.4, 1), opacity 150ms ease-out;
  opacity: 0;
  z-index: 100;
  pointer-events: none;
}

.nav-progress[data-state="loading"] {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {.nav-progress {
    transition: opacity 100ms ease-out;
  }}

::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {::view-transition-old(root), ::view-transition-new(root) {
    animation: none;
  }

::view-transition-new(root) {
    opacity: 1;
  }}