/* Theme */

/* ─────────────────────────────────────────────────────────────
   US (Jupiter) brand tokens — layer 2.
   Injected at deploy into themes/web/css/_theme/_brand.css.
   The shared theme's _colors.css ramp derives the whole palette
   from this seed; swap these values to re-skin a brand.
   ───────────────────────────────────────────────────────────── */
:root {
  /* OKLCH color seed */
  --c-l: 0.48;
  --c-c: 0.2;
  --c-h: 290;

  --c-h-unit: 30;
  --c-l-unit: 0.1;

  /* Type */
  --font-body: Wintle Text, Helvetica, Helvetica Neue, Arial, sans-serif;

  /* Form colors (brand primary + light tint) — exact current US values */
  --form-button-bg: #623ac3;
  --form-input-border: #d6ceff;
}

/* ─────────────────────────────────────────────────────────────
   US (Jupiter) brand fonts — Wintle Text. Layer 2.
   Injected at deploy into themes/web/css/_theme/_fonts.css.
   URLs point at the US account's File Manager; CA supplies its own.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-display: swap;
  font-family: Wintle Text;
  src: url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_Bold.woff2) format("woff2"), url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_Bold.woff) format("woff");
  font-weight: 900;
}

@font-face {
  font-display: swap;
  font-family: Wintle Text;
  src: url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_DemiBold.woff2) format("woff2"), url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_DemiBold.woff) format("woff");
  font-weight: 700;
}

@font-face {
  font-display: swap;
  font-family: Wintle Text;
  src: url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_Medium.woff2) format("woff2"), url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_Medium.woff) format("woff");
  font-weight: 500;
}

@font-face {
  font-display: swap;
  font-family: Wintle Text;
  src: url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_Regular.woff2) format("woff2"), url(https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/WNTL/Wintle_Text_Web_Regular.woff) format("woff");
  font-weight: 400;
}

:root {
  /* Color seed (--c-l / --c-c / --c-h + step units) is supplied per-brand
     by _brand.css, included before this file. The ramp below derives the
     full palette from it — do not hardcode the seed here. */
  --c-h-0: calc(var(--c-h) + (0 * var(--c-h-unit)));
  --c-h-1: calc(var(--c-h) + (1 * var(--c-h-unit)));
  --c-h-2: calc(var(--c-h) + (2 * var(--c-h-unit)));
  --c-h-3: calc(var(--c-h) + (3 * var(--c-h-unit)));
  --c-h-4: calc(var(--c-h) + (4 * var(--c-h-unit)));
  --c-h-5: calc(var(--c-h) + (5 * var(--c-h-unit)));
  --c-h-6: calc(var(--c-h) + (6 * var(--c-h-unit)));
  --c-h-7: calc(var(--c-h) + (7 * var(--c-h-unit)));
  --c-h-8: calc(var(--c-h) + (8 * var(--c-h-unit)));
  --c-h-9: calc(var(--c-h) + (9 * var(--c-h-unit)));
  --c-h-10: calc(var(--c-h) + (10 * var(--c-h-unit)));
  --c-h-11: calc(var(--c-h) + (11 * var(--c-h-unit)));

  --c-l-9: calc(var(--c-l) + (-4 * var(--c-l-unit)));
  --c-l-8: calc(var(--c-l) + (-3 * var(--c-l-unit)));
  --c-l-7: calc(var(--c-l) + (-2 * var(--c-l-unit)));
  --c-l-6: calc(var(--c-l) + (-1 * var(--c-l-unit)));
  --c-l-5: calc(var(--c-l) + (0 * var(--c-l-unit)));
  --c-l-4: calc(var(--c-l) + (1 * var(--c-l-unit)));
  --c-l-3: calc(var(--c-l) + (2 * var(--c-l-unit)));
  --c-l-2: calc(var(--c-l) + (3 * var(--c-l-unit)));
  --c-l-1: calc(var(--c-l) + (4 * var(--c-l-unit)));
  --c-l-0: calc(var(--c-l) + (5 * var(--c-l-unit)));

  /* h = 0 */
  --c-0-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-0));
  --c-0-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-0));
  --c-0-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-0));
  --c-0-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-0));
  --c-0-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-0));
  --c-0-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-0));
  --c-0-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-0));
  --c-0-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-0));
  --c-0-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-0));
  --c-0-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-0));

  /* h = 1 */
  --c-1-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-1));
  --c-1-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-1));
  --c-1-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-1));
  --c-1-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-1));
  --c-1-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-1));
  --c-1-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-1));
  --c-1-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-1));
  --c-1-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-1));
  --c-1-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-1));
  --c-1-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-1));

  /* h = 2 */
  --c-2-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-2));
  --c-2-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-2));
  --c-2-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-2));
  --c-2-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-2));
  --c-2-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-2));
  --c-2-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-2));
  --c-2-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-2));
  --c-2-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-2));
  --c-2-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-2));
  --c-2-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-2));

  /* h = 3 */
  --c-3-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-3));
  --c-3-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-3));
  --c-3-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-3));
  --c-3-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-3));
  --c-3-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-3));
  --c-3-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-3));
  --c-3-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-3));
  --c-3-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-3));
  --c-3-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-3));
  --c-3-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-3));

  /* h = 4 */
  --c-4-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-4));
  --c-4-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-4));
  --c-4-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-4));
  --c-4-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-4));
  --c-4-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-4));
  --c-4-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-4));
  --c-4-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-4));
  --c-4-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-4));
  --c-4-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-4));
  --c-4-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-4));

  /* h = 5 */
  --c-5-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-5));
  --c-5-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-5));
  --c-5-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-5));
  --c-5-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-5));
  --c-5-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-5));
  --c-5-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-5));
  --c-5-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-5));
  --c-5-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-5));
  --c-5-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-5));
  --c-5-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-5));

  /* h = 6 */
  --c-6-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-6));
  --c-6-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-6));
  --c-6-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-6));
  --c-6-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-6));
  --c-6-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-6));
  --c-6-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-6));
  --c-6-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-6));
  --c-6-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-6));
  --c-6-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-6));
  --c-6-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-6));

  /* h = 7 */
  --c-7-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-7));
  --c-7-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-7));
  --c-7-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-7));
  --c-7-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-7));
  --c-7-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-7));
  --c-7-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-7));
  --c-7-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-7));
  --c-7-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-7));
  --c-7-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-7));
  --c-7-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-7));

  /* h = 8 */
  --c-8-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.1) var(--c-h-8));
  --c-8-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-8));
  --c-8-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-8));
  --c-8-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-8));
  --c-8-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-8));
  --c-8-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-8));
  --c-8-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-8));
  --c-8-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-8));
  --c-8-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-8));
  --c-8-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-8));

  /* h = 9 */
  --c-9-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-9));
  --c-9-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-9));
  --c-9-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-9));
  --c-9-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-9));
  --c-9-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-9));
  --c-9-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-9));
  --c-9-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-9));
  --c-9-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-9));
  --c-9-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-9));
  --c-9-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-9));

  /* h = 10 */
  --c-10-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-10));
  --c-10-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-10));
  --c-10-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-10));
  --c-10-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-10));
  --c-10-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-10));
  --c-10-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-10));
  --c-10-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-10));
  --c-10-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-10));
  --c-10-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-10));
  --c-10-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-10));

  /* h = 11 */
  --c-11-000: oklch(var(--c-l-0) calc(var(--c-c) - 0.12) var(--c-h-11));
  --c-11-100: oklch(var(--c-l-1) calc(var(--c-c) - 0.1) var(--c-h-11));
  --c-11-200: oklch(var(--c-l-2) calc(var(--c-c) - 0.05) var(--c-h-11));
  --c-11-300: oklch(var(--c-l-3) var(--c-c) var(--c-h-11));
  --c-11-400: oklch(var(--c-l-4) var(--c-c) var(--c-h-11));
  --c-11-500: oklch(var(--c-l-5) var(--c-c) var(--c-h-11));
  --c-11-600: oklch(var(--c-l-6) var(--c-c) var(--c-h-11));
  --c-11-700: oklch(var(--c-l-7) var(--c-c) var(--c-h-11));
  --c-11-800: oklch(var(--c-l-8) var(--c-c) var(--c-h-11));
  --c-11-900: oklch(var(--c-l-9) var(--c-c) var(--c-h-11));

  /* B&W */
  --c-black: oklch(0 0 var(--c-h-0));
  --c-grey-0: oklch(var(--c-l-0) 0 var(--c-h-0));
  --c-grey-1: oklch(var(--c-l-1) 0 var(--c-h-0));
  --c-grey-2: oklch(var(--c-l-2) 0 var(--c-h-0));
  --c-grey-3: oklch(var(--c-l-3) 0 var(--c-h-0));
  --c-grey-4: oklch(var(--c-l-4) 0 var(--c-h-0));
  --c-grey-5: oklch(var(--c-l-5) 0 var(--c-h-0));
  --c-grey-6: oklch(var(--c-l-6) 0 var(--c-h-0));
  --c-grey-7: oklch(var(--c-l-7) 0 var(--c-h-0));
  --c-grey-8: oklch(var(--c-l-8) 0 var(--c-h-0));
  --c-grey-9: oklch(var(--c-l-9) 0 var(--c-h-0));
  --c-white: oklch(1 0 var(--c-h-0));
}

.c-black {
  color: var(--c-black);
}
.c-grey-0 {
  color: var(--c-grey-0);
}
.c-grey-1 {
  color: var(--c-grey-1);
}
.c-grey-2 {
  color: var(--c-grey-2);
}
.c-grey-3 {
  color: var(--c-grey-3);
}
.c-grey-4 {
  color: var(--c-grey-4);
}
.c-grey-5 {
  color: var(--c-grey-5);
}
.c-grey-6 {
  color: var(--c-grey-6);
}
.c-grey-7 {
  color: var(--c-grey-7);
}
.c-grey-8 {
  color: var(--c-grey-8);
}
.c-grey-9 {
  color: var(--c-grey-9);
}
.c-white {
  color: var(--c-white);
}

.bg-black {
  background-color: var(--c-black);
}
.bg-grey-0 {
  background-color: var(--c-grey-0);
}
.bg-grey-1 {
  background-color: var(--c-grey-1);
}
.bg-grey-2 {
  background-color: var(--c-grey-2);
}
.bg-grey-3 {
  background-color: var(--c-grey-3);
}
.bg-grey-4 {
  background-color: var(--c-grey-4);
}
.bg-grey-5 {
  background-color: var(--c-grey-5);
}
.bg-grey-6 {
  background-color: var(--c-grey-6);
}
.bg-grey-7 {
  background-color: var(--c-grey-7);
}
.bg-grey-8 {
  background-color: var(--c-grey-8);
}
.bg-grey-9 {
  background-color: var(--c-grey-9);
}
.bg-white {
  background-color: var(--c-white);
}

/* ========= TEXT COLOR CLASSES ========= */

/* h = 0 */
.c-0-000 {
  color: var(--c-0-000);
}
.c-0-100 {
  color: var(--c-0-100);
}
.c-0-200 {
  color: var(--c-0-200);
}
.c-0-300 {
  color: var(--c-0-300);
}
.c-0-400 {
  color: var(--c-0-400);
}
.c-0-500 {
  color: var(--c-0-500);
}
.c-0-600 {
  color: var(--c-0-600);
}
.c-0-700 {
  color: var(--c-0-700);
}
.c-0-800 {
  color: var(--c-0-800);
}
.c-0-900 {
  color: var(--c-0-900);
}

/* h = 1 */
.c-1-000 {
  color: var(--c-1-000);
}
.c-1-100 {
  color: var(--c-1-100);
}
.c-1-200 {
  color: var(--c-1-200);
}
.c-1-300 {
  color: var(--c-1-300);
}
.c-1-400 {
  color: var(--c-1-400);
}
.c-1-500 {
  color: var(--c-1-500);
}
.c-1-600 {
  color: var(--c-1-600);
}
.c-1-700 {
  color: var(--c-1-700);
}
.c-1-800 {
  color: var(--c-1-800);
}
.c-1-900 {
  color: var(--c-1-900);
}

/* h = 2 */
.c-2-000 {
  color: var(--c-2-000);
}
.c-2-100 {
  color: var(--c-2-100);
}
.c-2-200 {
  color: var(--c-2-200);
}
.c-2-300 {
  color: var(--c-2-300);
}
.c-2-400 {
  color: var(--c-2-400);
}
.c-2-500 {
  color: var(--c-2-500);
}
.c-2-600 {
  color: var(--c-2-600);
}
.c-2-700 {
  color: var(--c-2-700);
}
.c-2-800 {
  color: var(--c-2-800);
}
.c-2-900 {
  color: var(--c-2-900);
}

/* h = 3 */
.c-3-000 {
  color: var(--c-3-000);
}
.c-3-100 {
  color: var(--c-3-100);
}
.c-3-200 {
  color: var(--c-3-200);
}
.c-3-300 {
  color: var(--c-3-300);
}
.c-3-400 {
  color: var(--c-3-400);
}
.c-3-500 {
  color: var(--c-3-500);
}
.c-3-600 {
  color: var(--c-3-600);
}
.c-3-700 {
  color: var(--c-3-700);
}
.c-3-800 {
  color: var(--c-3-800);
}
.c-3-900 {
  color: var(--c-3-900);
}

/* h = 4 */
.c-4-000 {
  color: var(--c-4-000);
}
.c-4-100 {
  color: var(--c-4-100);
}
.c-4-200 {
  color: var(--c-4-200);
}
.c-4-300 {
  color: var(--c-4-300);
}
.c-4-400 {
  color: var(--c-4-400);
}
.c-4-500 {
  color: var(--c-4-500);
}
.c-4-600 {
  color: var(--c-4-600);
}
.c-4-700 {
  color: var(--c-4-700);
}
.c-4-800 {
  color: var(--c-4-800);
}
.c-4-900 {
  color: var(--c-4-900);
}

/* h = 5 */
.c-5-000 {
  color: var(--c-5-000);
}
.c-5-100 {
  color: var(--c-5-100);
}
.c-5-200 {
  color: var(--c-5-200);
}
.c-5-300 {
  color: var(--c-5-300);
}
.c-5-400 {
  color: var(--c-5-400);
}
.c-5-500 {
  color: var(--c-5-500);
}
.c-5-600 {
  color: var(--c-5-600);
}
.c-5-700 {
  color: var(--c-5-700);
}
.c-5-800 {
  color: var(--c-5-800);
}
.c-5-900 {
  color: var(--c-5-900);
}

/* h = 6 */
.c-6-000 {
  color: var(--c-6-000);
}
.c-6-100 {
  color: var(--c-6-100);
}
.c-6-200 {
  color: var(--c-6-200);
}
.c-6-300 {
  color: var(--c-6-300);
}
.c-6-400 {
  color: var(--c-6-400);
}
.c-6-500 {
  color: var(--c-6-500);
}
.c-6-600 {
  color: var(--c-6-600);
}
.c-6-700 {
  color: var(--c-6-700);
}
.c-6-800 {
  color: var(--c-6-800);
}
.c-6-900 {
  color: var(--c-6-900);
}

/* h = 7 */
.c-7-000 {
  color: var(--c-7-000);
}
.c-7-100 {
  color: var(--c-7-100);
}
.c-7-200 {
  color: var(--c-7-200);
}
.c-7-300 {
  color: var(--c-7-300);
}
.c-7-400 {
  color: var(--c-7-400);
}
.c-7-500 {
  color: var(--c-7-500);
}
.c-7-600 {
  color: var(--c-7-600);
}
.c-7-700 {
  color: var(--c-7-700);
}
.c-7-800 {
  color: var(--c-7-800);
}
.c-7-900 {
  color: var(--c-7-900);
}

/* h = 8 */
.c-8-000 {
  color: var(--c-8-000);
}
.c-8-100 {
  color: var(--c-8-100);
}
.c-8-200 {
  color: var(--c-8-200);
}
.c-8-300 {
  color: var(--c-8-300);
}
.c-8-400 {
  color: var(--c-8-400);
}
.c-8-500 {
  color: var(--c-8-500);
}
.c-8-600 {
  color: var(--c-8-600);
}
.c-8-700 {
  color: var(--c-8-700);
}
.c-8-800 {
  color: var(--c-8-800);
}
.c-8-900 {
  color: var(--c-8-900);
}

/* h = 9 */
.c-9-000 {
  color: var(--c-9-000);
}
.c-9-100 {
  color: var(--c-9-100);
}
.c-9-200 {
  color: var(--c-9-200);
}
.c-9-300 {
  color: var(--c-9-300);
}
.c-9-400 {
  color: var(--c-9-400);
}
.c-9-500 {
  color: var(--c-9-500);
}
.c-9-600 {
  color: var(--c-9-600);
}
.c-9-700 {
  color: var(--c-9-700);
}
.c-9-800 {
  color: var(--c-9-800);
}
.c-9-900 {
  color: var(--c-9-900);
}

/* h = 10 */
.c-10-000 {
  color: var(--c-10-000);
}
.c-10-100 {
  color: var(--c-10-100);
}
.c-10-200 {
  color: var(--c-10-200);
}
.c-10-300 {
  color: var(--c-10-300);
}
.c-10-400 {
  color: var(--c-10-400);
}
.c-10-500 {
  color: var(--c-10-500);
}
.c-10-600 {
  color: var(--c-10-600);
}
.c-10-700 {
  color: var(--c-10-700);
}
.c-10-800 {
  color: var(--c-10-800);
}
.c-10-900 {
  color: var(--c-10-900);
}

/* h = 11 */
.c-11-000 {
  color: var(--c-11-000);
}
.c-11-100 {
  color: var(--c-11-100);
}
.c-11-200 {
  color: var(--c-11-200);
}
.c-11-300 {
  color: var(--c-11-300);
}
.c-11-400 {
  color: var(--c-11-400);
}
.c-11-500 {
  color: var(--c-11-500);
}
.c-11-600 {
  color: var(--c-11-600);
}
.c-11-700 {
  color: var(--c-11-700);
}
.c-11-800 {
  color: var(--c-11-800);
}
.c-11-900 {
  color: var(--c-11-900);
}

/* ========= BACKGROUND COLOR CLASSES ========= */

/* h = 0 */
.bg-0-000 {
  background-color: var(--c-0-000);
}
.bg-0-100 {
  background-color: var(--c-0-100);
}
.bg-0-200 {
  background-color: var(--c-0-200);
}
.bg-0-300 {
  background-color: var(--c-0-300);
}
.bg-0-400 {
  background-color: var(--c-0-400);
}
.bg-0-500 {
  background-color: var(--c-0-500);
}
.bg-0-600 {
  background-color: var(--c-0-600);
}
.bg-0-700 {
  background-color: var(--c-0-700);
}
.bg-0-800 {
  background-color: var(--c-0-800);
}
.bg-0-900 {
  background-color: var(--c-0-900);
}

/* h = 1 */
.bg-1-000 {
  background-color: var(--c-1-000);
}
.bg-1-100 {
  background-color: var(--c-1-100);
}
.bg-1-200 {
  background-color: var(--c-1-200);
}
.bg-1-300 {
  background-color: var(--c-1-300);
}
.bg-1-400 {
  background-color: var(--c-1-400);
}
.bg-1-500 {
  background-color: var(--c-1-500);
}
.bg-1-600 {
  background-color: var(--c-1-600);
}
.bg-1-700 {
  background-color: var(--c-1-700);
}
.bg-1-800 {
  background-color: var(--c-1-800);
}
.bg-1-900 {
  background-color: var(--c-1-900);
}

/* h = 2 */
.bg-2-000 {
  background-color: var(--c-2-000);
}
.bg-2-100 {
  background-color: var(--c-2-100);
}
.bg-2-200 {
  background-color: var(--c-2-200);
}
.bg-2-300 {
  background-color: var(--c-2-300);
}
.bg-2-400 {
  background-color: var(--c-2-400);
}
.bg-2-500 {
  background-color: var(--c-2-500);
}
.bg-2-600 {
  background-color: var(--c-2-600);
}
.bg-2-700 {
  background-color: var(--c-2-700);
}
.bg-2-800 {
  background-color: var(--c-2-800);
}
.bg-2-900 {
  background-color: var(--c-2-900);
}

/* h = 3 */
.bg-3-000 {
  background-color: var(--c-3-000);
}
.bg-3-100 {
  background-color: var(--c-3-100);
}
.bg-3-200 {
  background-color: var(--c-3-200);
}
.bg-3-300 {
  background-color: var(--c-3-300);
}
.bg-3-400 {
  background-color: var(--c-3-400);
}
.bg-3-500 {
  background-color: var(--c-3-500);
}
.bg-3-600 {
  background-color: var(--c-3-600);
}
.bg-3-700 {
  background-color: var(--c-3-700);
}
.bg-3-800 {
  background-color: var(--c-3-800);
}
.bg-3-900 {
  background-color: var(--c-3-900);
}

/* h = 4 */
.bg-4-000 {
  background-color: var(--c-4-000);
}
.bg-4-100 {
  background-color: var(--c-4-100);
}
.bg-4-200 {
  background-color: var(--c-4-200);
}
.bg-4-300 {
  background-color: var(--c-4-300);
}
.bg-4-400 {
  background-color: var(--c-4-400);
}
.bg-4-500 {
  background-color: var(--c-4-500);
}
.bg-4-600 {
  background-color: var(--c-4-600);
}
.bg-4-700 {
  background-color: var(--c-4-700);
}
.bg-4-800 {
  background-color: var(--c-4-800);
}
.bg-4-900 {
  background-color: var(--c-4-900);
}

/* h = 5 */
.bg-5-000 {
  background-color: var(--c-5-000);
}
.bg-5-100 {
  background-color: var(--c-5-100);
}
.bg-5-200 {
  background-color: var(--c-5-200);
}
.bg-5-300 {
  background-color: var(--c-5-300);
}
.bg-5-400 {
  background-color: var(--c-5-400);
}
.bg-5-500 {
  background-color: var(--c-5-500);
}
.bg-5-600 {
  background-color: var(--c-5-600);
}
.bg-5-700 {
  background-color: var(--c-5-700);
}
.bg-5-800 {
  background-color: var(--c-5-800);
}
.bg-5-900 {
  background-color: var(--c-5-900);
}

/* h = 6 */
.bg-6-000 {
  background-color: var(--c-6-000);
}
.bg-6-100 {
  background-color: var(--c-6-100);
}
.bg-6-200 {
  background-color: var(--c-6-200);
}
.bg-6-300 {
  background-color: var(--c-6-300);
}
.bg-6-400 {
  background-color: var(--c-6-400);
}
.bg-6-500 {
  background-color: var(--c-6-500);
}
.bg-6-600 {
  background-color: var(--c-6-600);
}
.bg-6-700 {
  background-color: var(--c-6-700);
}
.bg-6-800 {
  background-color: var(--c-6-800);
}
.bg-6-900 {
  background-color: var(--c-6-900);
}

/* h = 7 */
.bg-7-000 {
  background-color: var(--c-7-000);
}
.bg-7-100 {
  background-color: var(--c-7-100);
}
.bg-7-200 {
  background-color: var(--c-7-200);
}
.bg-7-300 {
  background-color: var(--c-7-300);
}
.bg-7-400 {
  background-color: var(--c-7-400);
}
.bg-7-500 {
  background-color: var(--c-7-500);
}
.bg-7-600 {
  background-color: var(--c-7-600);
}
.bg-7-700 {
  background-color: var(--c-7-700);
}
.bg-7-800 {
  background-color: var(--c-7-800);
}
.bg-7-900 {
  background-color: var(--c-7-900);
}

/* h = 8 */
.bg-8-000 {
  background-color: var(--c-8-000);
}
.bg-8-100 {
  background-color: var(--c-8-100);
}
.bg-8-200 {
  background-color: var(--c-8-200);
}
.bg-8-300 {
  background-color: var(--c-8-300);
}
.bg-8-400 {
  background-color: var(--c-8-400);
}
.bg-8-500 {
  background-color: var(--c-8-500);
}
.bg-8-600 {
  background-color: var(--c-8-600);
}
.bg-8-700 {
  background-color: var(--c-8-700);
}
.bg-8-800 {
  background-color: var(--c-8-800);
}
.bg-8-900 {
  background-color: var(--c-8-900);
}

/* h = 9 */
.bg-9-000 {
  background-color: var(--c-9-000);
}
.bg-9-100 {
  background-color: var(--c-9-100);
}
.bg-9-200 {
  background-color: var(--c-9-200);
}
.bg-9-300 {
  background-color: var(--c-9-300);
}
.bg-9-400 {
  background-color: var(--c-9-400);
}
.bg-9-500 {
  background-color: var(--c-9-500);
}
.bg-9-600 {
  background-color: var(--c-9-600);
}
.bg-9-700 {
  background-color: var(--c-9-700);
}
.bg-9-800 {
  background-color: var(--c-9-800);
}
.bg-9-900 {
  background-color: var(--c-9-900);
}

/* h = 10 */
.bg-10-000 {
  background-color: var(--c-10-000);
}
.bg-10-100 {
  background-color: var(--c-10-100);
}
.bg-10-200 {
  background-color: var(--c-10-200);
}
.bg-10-300 {
  background-color: var(--c-10-300);
}
.bg-10-400 {
  background-color: var(--c-10-400);
}
.bg-10-500 {
  background-color: var(--c-10-500);
}
.bg-10-600 {
  background-color: var(--c-10-600);
}
.bg-10-700 {
  background-color: var(--c-10-700);
}
.bg-10-800 {
  background-color: var(--c-10-800);
}
.bg-10-900 {
  background-color: var(--c-10-900);
}

/* h = 11 */
.bg-11-000 {
  background-color: var(--c-11-000);
}
.bg-11-100 {
  background-color: var(--c-11-100);
}
.bg-11-200 {
  background-color: var(--c-11-200);
}
.bg-11-300 {
  background-color: var(--c-11-300);
}
.bg-11-400 {
  background-color: var(--c-11-400);
}
.bg-11-500 {
  background-color: var(--c-11-500);
}
.bg-11-600 {
  background-color: var(--c-11-600);
}
.bg-11-700 {
  background-color: var(--c-11-700);
}
.bg-11-800 {
  background-color: var(--c-11-800);
}
.bg-11-900 {
  background-color: var(--c-11-900);
}

/* ========= BORDER COLOR CLASSES ========= */

.b-black {
  border: 1px solid var(--c-black);
}
.b-grey-0 {
  border: 1px solid var(--c-grey-0);
}
.b-grey-1 {
  border: 1px solid var(--c-grey-1);
}
.b-grey-2 {
  border: 1px solid var(--c-grey-2);
}
.b-grey-3 {
  border: 1px solid var(--c-grey-3);
}
.b-grey-4 {
  border: 1px solid var(--c-grey-4);
}
.b-grey-5 {
  border: 1px solid var(--c-grey-5);
}
.b-grey-6 {
  border: 1px solid var(--c-grey-6);
}
.b-grey-7 {
  border: 1px solid var(--c-grey-7);
}
.b-grey-8 {
  border: 1px solid var(--c-grey-8);
}
.b-grey-9 {
  border: 1px solid var(--c-grey-9);
}
.b-white {
  border: 1px solid var(--c-white);
}

/* h = 0 */
.b-0-000 {
  border: 1px solid var(--c-0-000);
}
.b-0-100 {
  border: 1px solid var(--c-0-100);
}
.b-0-200 {
  border: 1px solid var(--c-0-200);
}
.b-0-300 {
  border: 1px solid var(--c-0-300);
}
.b-0-400 {
  border: 1px solid var(--c-0-400);
}
.b-0-500 {
  border: 1px solid var(--c-0-500);
}
.b-0-600 {
  border: 1px solid var(--c-0-600);
}
.b-0-700 {
  border: 1px solid var(--c-0-700);
}
.b-0-800 {
  border: 1px solid var(--c-0-800);
}
.b-0-900 {
  border: 1px solid var(--c-0-900);
}

/* h = 1 */
.b-1-000 {
  border: 1px solid var(--c-1-000);
}
.b-1-100 {
  border: 1px solid var(--c-1-100);
}
.b-1-200 {
  border: 1px solid var(--c-1-200);
}
.b-1-300 {
  border: 1px solid var(--c-1-300);
}
.b-1-400 {
  border: 1px solid var(--c-1-400);
}
.b-1-500 {
  border: 1px solid var(--c-1-500);
}
.b-1-600 {
  border: 1px solid var(--c-1-600);
}
.b-1-700 {
  border: 1px solid var(--c-1-700);
}
.b-1-800 {
  border: 1px solid var(--c-1-800);
}
.b-1-900 {
  border: 1px solid var(--c-1-900);
}

/* h = 2 */
.b-2-000 {
  border: 1px solid var(--c-2-000);
}
.b-2-100 {
  border: 1px solid var(--c-2-100);
}
.b-2-200 {
  border: 1px solid var(--c-2-200);
}
.b-2-300 {
  border: 1px solid var(--c-2-300);
}
.b-2-400 {
  border: 1px solid var(--c-2-400);
}
.b-2-500 {
  border: 1px solid var(--c-2-500);
}
.b-2-600 {
  border: 1px solid var(--c-2-600);
}
.b-2-700 {
  border: 1px solid var(--c-2-700);
}
.b-2-800 {
  border: 1px solid var(--c-2-800);
}
.b-2-900 {
  border: 1px solid var(--c-2-900);
}

/* h = 3 */
.b-3-000 {
  border: 1px solid var(--c-3-000);
}
.b-3-100 {
  border: 1px solid var(--c-3-100);
}
.b-3-200 {
  border: 1px solid var(--c-3-200);
}
.b-3-300 {
  border: 1px solid var(--c-3-300);
}
.b-3-400 {
  border: 1px solid var(--c-3-400);
}
.b-3-500 {
  border: 1px solid var(--c-3-500);
}
.b-3-600 {
  border: 1px solid var(--c-3-600);
}
.b-3-700 {
  border: 1px solid var(--c-3-700);
}
.b-3-800 {
  border: 1px solid var(--c-3-800);
}
.b-3-900 {
  border: 1px solid var(--c-3-900);
}

/* h = 4 */
.b-4-000 {
  border: 1px solid var(--c-4-000);
}
.b-4-100 {
  border: 1px solid var(--c-4-100);
}
.b-4-200 {
  border: 1px solid var(--c-4-200);
}
.b-4-300 {
  border: 1px solid var(--c-4-300);
}
.b-4-400 {
  border: 1px solid var(--c-4-400);
}
.b-4-500 {
  border: 1px solid var(--c-4-500);
}
.b-4-600 {
  border: 1px solid var(--c-4-600);
}
.b-4-700 {
  border: 1px solid var(--c-4-700);
}
.b-4-800 {
  border: 1px solid var(--c-4-800);
}
.b-4-900 {
  border: 1px solid var(--c-4-900);
}

/* h = 5 */
.b-5-000 {
  border: 1px solid var(--c-5-000);
}
.b-5-100 {
  border: 1px solid var(--c-5-100);
}
.b-5-200 {
  border: 1px solid var(--c-5-200);
}
.b-5-300 {
  border: 1px solid var(--c-5-300);
}
.b-5-400 {
  border: 1px solid var(--c-5-400);
}
.b-5-500 {
  border: 1px solid var(--c-5-500);
}
.b-5-600 {
  border: 1px solid var(--c-5-600);
}
.b-5-700 {
  border: 1px solid var(--c-5-700);
}
.b-5-800 {
  border: 1px solid var(--c-5-800);
}
.b-5-900 {
  border: 1px solid var(--c-5-900);
}

/* h = 6 */
.b-6-000 {
  border: 1px solid var(--c-6-000);
}
.b-6-100 {
  border: 1px solid var(--c-6-100);
}
.b-6-200 {
  border: 1px solid var(--c-6-200);
}
.b-6-300 {
  border: 1px solid var(--c-6-300);
}
.b-6-400 {
  border: 1px solid var(--c-6-400);
}
.b-6-500 {
  border: 1px solid var(--c-6-500);
}
.b-6-600 {
  border: 1px solid var(--c-6-600);
}
.b-6-700 {
  border: 1px solid var(--c-6-700);
}
.b-6-800 {
  border: 1px solid var(--c-6-800);
}
.b-6-900 {
  border: 1px solid var(--c-6-900);
}

/* h = 7 */
.b-7-000 {
  border: 1px solid var(--c-7-000);
}
.b-7-100 {
  border: 1px solid var(--c-7-100);
}
.b-7-200 {
  border: 1px solid var(--c-7-200);
}
.b-7-300 {
  border: 1px solid var(--c-7-300);
}
.b-7-400 {
  border: 1px solid var(--c-7-400);
}
.b-7-500 {
  border: 1px solid var(--c-7-500);
}
.b-7-600 {
  border: 1px solid var(--c-7-600);
}
.b-7-700 {
  border: 1px solid var(--c-7-700);
}
.b-7-800 {
  border: 1px solid var(--c-7-800);
}
.b-7-900 {
  border: 1px solid var(--c-7-900);
}

/* h = 8 */
.b-8-000 {
  border: 1px solid var(--c-8-000);
}
.b-8-100 {
  border: 1px solid var(--c-8-100);
}
.b-8-200 {
  border: 1px solid var(--c-8-200);
}
.b-8-300 {
  border: 1px solid var(--c-8-300);
}
.b-8-400 {
  border: 1px solid var(--c-8-400);
}
.b-8-500 {
  border: 1px solid var(--c-8-500);
}
.b-8-600 {
  border: 1px solid var(--c-8-600);
}
.b-8-700 {
  border: 1px solid var(--c-8-700);
}
.b-8-800 {
  border: 1px solid var(--c-8-800);
}
.b-8-900 {
  border: 1px solid var(--c-8-900);
}

/* h = 9 */
.b-9-000 {
  border: 1px solid var(--c-9-000);
}
.b-9-100 {
  border: 1px solid var(--c-9-100);
}
.b-9-200 {
  border: 1px solid var(--c-9-200);
}
.b-9-300 {
  border: 1px solid var(--c-9-300);
}
.b-9-400 {
  border: 1px solid var(--c-9-400);
}
.b-9-500 {
  border: 1px solid var(--c-9-500);
}
.b-9-600 {
  border: 1px solid var(--c-9-600);
}
.b-9-700 {
  border: 1px solid var(--c-9-700);
}
.b-9-800 {
  border: 1px solid var(--c-9-800);
}
.b-9-900 {
  border: 1px solid var(--c-9-900);
}

/* h = 10 */
.b-10-000 {
  border: 1px solid var(--c-10-000);
}
.b-10-100 {
  border: 1px solid var(--c-10-100);
}
.b-10-200 {
  border: 1px solid var(--c-10-200);
}
.b-10-300 {
  border: 1px solid var(--c-10-300);
}
.b-10-400 {
  border: 1px solid var(--c-10-400);
}
.b-10-500 {
  border: 1px solid var(--c-10-500);
}
.b-10-600 {
  border: 1px solid var(--c-10-600);
}
.b-10-700 {
  border: 1px solid var(--c-10-700);
}
.b-10-800 {
  border: 1px solid var(--c-10-800);
}
.b-10-900 {
  border: 1px solid var(--c-10-900);
}

/* h = 11 */
.b-11-000 {
  border: 1px solid var(--c-11-000);
}
.b-11-100 {
  border: 1px solid var(--c-11-100);
}
.b-11-200 {
  border: 1px solid var(--c-11-200);
}
.b-11-300 {
  border: 1px solid var(--c-11-300);
}
.b-11-400 {
  border: 1px solid var(--c-11-400);
}
.b-11-500 {
  border: 1px solid var(--c-11-500);
}
.b-11-600 {
  border: 1px solid var(--c-11-600);
}
.b-11-700 {
  border: 1px solid var(--c-11-700);
}
.b-11-800 {
  border: 1px solid var(--c-11-800);
}
.b-11-900 {
  border: 1px solid var(--c-11-900);
}

/* Border-bottom color utilities — mirror of .b-* (border, all sides) for the
   OKLCH ramp + named greys. Generated to match .b-* exactly. */
.bb-black {
  border-bottom: 1px solid var(--c-black);
}
.bb-grey-0 {
  border-bottom: 1px solid var(--c-grey-0);
}
.bb-grey-1 {
  border-bottom: 1px solid var(--c-grey-1);
}
.bb-grey-2 {
  border-bottom: 1px solid var(--c-grey-2);
}
.bb-grey-3 {
  border-bottom: 1px solid var(--c-grey-3);
}
.bb-grey-4 {
  border-bottom: 1px solid var(--c-grey-4);
}
.bb-grey-5 {
  border-bottom: 1px solid var(--c-grey-5);
}
.bb-grey-6 {
  border-bottom: 1px solid var(--c-grey-6);
}
.bb-grey-7 {
  border-bottom: 1px solid var(--c-grey-7);
}
.bb-grey-8 {
  border-bottom: 1px solid var(--c-grey-8);
}
.bb-grey-9 {
  border-bottom: 1px solid var(--c-grey-9);
}
.bb-white {
  border-bottom: 1px solid var(--c-white);
}

/* h = 0 */
.bb-0-000 {
  border-bottom: 1px solid var(--c-0-000);
}
.bb-0-100 {
  border-bottom: 1px solid var(--c-0-100);
}
.bb-0-200 {
  border-bottom: 1px solid var(--c-0-200);
}
.bb-0-300 {
  border-bottom: 1px solid var(--c-0-300);
}
.bb-0-400 {
  border-bottom: 1px solid var(--c-0-400);
}
.bb-0-500 {
  border-bottom: 1px solid var(--c-0-500);
}
.bb-0-600 {
  border-bottom: 1px solid var(--c-0-600);
}
.bb-0-700 {
  border-bottom: 1px solid var(--c-0-700);
}
.bb-0-800 {
  border-bottom: 1px solid var(--c-0-800);
}
.bb-0-900 {
  border-bottom: 1px solid var(--c-0-900);
}

/* h = 1 */
.bb-1-000 {
  border-bottom: 1px solid var(--c-1-000);
}
.bb-1-100 {
  border-bottom: 1px solid var(--c-1-100);
}
.bb-1-200 {
  border-bottom: 1px solid var(--c-1-200);
}
.bb-1-300 {
  border-bottom: 1px solid var(--c-1-300);
}
.bb-1-400 {
  border-bottom: 1px solid var(--c-1-400);
}
.bb-1-500 {
  border-bottom: 1px solid var(--c-1-500);
}
.bb-1-600 {
  border-bottom: 1px solid var(--c-1-600);
}
.bb-1-700 {
  border-bottom: 1px solid var(--c-1-700);
}
.bb-1-800 {
  border-bottom: 1px solid var(--c-1-800);
}
.bb-1-900 {
  border-bottom: 1px solid var(--c-1-900);
}

/* h = 2 */
.bb-2-000 {
  border-bottom: 1px solid var(--c-2-000);
}
.bb-2-100 {
  border-bottom: 1px solid var(--c-2-100);
}
.bb-2-200 {
  border-bottom: 1px solid var(--c-2-200);
}
.bb-2-300 {
  border-bottom: 1px solid var(--c-2-300);
}
.bb-2-400 {
  border-bottom: 1px solid var(--c-2-400);
}
.bb-2-500 {
  border-bottom: 1px solid var(--c-2-500);
}
.bb-2-600 {
  border-bottom: 1px solid var(--c-2-600);
}
.bb-2-700 {
  border-bottom: 1px solid var(--c-2-700);
}
.bb-2-800 {
  border-bottom: 1px solid var(--c-2-800);
}
.bb-2-900 {
  border-bottom: 1px solid var(--c-2-900);
}

/* h = 3 */
.bb-3-000 {
  border-bottom: 1px solid var(--c-3-000);
}
.bb-3-100 {
  border-bottom: 1px solid var(--c-3-100);
}
.bb-3-200 {
  border-bottom: 1px solid var(--c-3-200);
}
.bb-3-300 {
  border-bottom: 1px solid var(--c-3-300);
}
.bb-3-400 {
  border-bottom: 1px solid var(--c-3-400);
}
.bb-3-500 {
  border-bottom: 1px solid var(--c-3-500);
}
.bb-3-600 {
  border-bottom: 1px solid var(--c-3-600);
}
.bb-3-700 {
  border-bottom: 1px solid var(--c-3-700);
}
.bb-3-800 {
  border-bottom: 1px solid var(--c-3-800);
}
.bb-3-900 {
  border-bottom: 1px solid var(--c-3-900);
}

/* h = 4 */
.bb-4-000 {
  border-bottom: 1px solid var(--c-4-000);
}
.bb-4-100 {
  border-bottom: 1px solid var(--c-4-100);
}
.bb-4-200 {
  border-bottom: 1px solid var(--c-4-200);
}
.bb-4-300 {
  border-bottom: 1px solid var(--c-4-300);
}
.bb-4-400 {
  border-bottom: 1px solid var(--c-4-400);
}
.bb-4-500 {
  border-bottom: 1px solid var(--c-4-500);
}
.bb-4-600 {
  border-bottom: 1px solid var(--c-4-600);
}
.bb-4-700 {
  border-bottom: 1px solid var(--c-4-700);
}
.bb-4-800 {
  border-bottom: 1px solid var(--c-4-800);
}
.bb-4-900 {
  border-bottom: 1px solid var(--c-4-900);
}

/* h = 5 */
.bb-5-000 {
  border-bottom: 1px solid var(--c-5-000);
}
.bb-5-100 {
  border-bottom: 1px solid var(--c-5-100);
}
.bb-5-200 {
  border-bottom: 1px solid var(--c-5-200);
}
.bb-5-300 {
  border-bottom: 1px solid var(--c-5-300);
}
.bb-5-400 {
  border-bottom: 1px solid var(--c-5-400);
}
.bb-5-500 {
  border-bottom: 1px solid var(--c-5-500);
}
.bb-5-600 {
  border-bottom: 1px solid var(--c-5-600);
}
.bb-5-700 {
  border-bottom: 1px solid var(--c-5-700);
}
.bb-5-800 {
  border-bottom: 1px solid var(--c-5-800);
}
.bb-5-900 {
  border-bottom: 1px solid var(--c-5-900);
}

/* h = 6 */
.bb-6-000 {
  border-bottom: 1px solid var(--c-6-000);
}
.bb-6-100 {
  border-bottom: 1px solid var(--c-6-100);
}
.bb-6-200 {
  border-bottom: 1px solid var(--c-6-200);
}
.bb-6-300 {
  border-bottom: 1px solid var(--c-6-300);
}
.bb-6-400 {
  border-bottom: 1px solid var(--c-6-400);
}
.bb-6-500 {
  border-bottom: 1px solid var(--c-6-500);
}
.bb-6-600 {
  border-bottom: 1px solid var(--c-6-600);
}
.bb-6-700 {
  border-bottom: 1px solid var(--c-6-700);
}
.bb-6-800 {
  border-bottom: 1px solid var(--c-6-800);
}
.bb-6-900 {
  border-bottom: 1px solid var(--c-6-900);
}

/* h = 7 */
.bb-7-000 {
  border-bottom: 1px solid var(--c-7-000);
}
.bb-7-100 {
  border-bottom: 1px solid var(--c-7-100);
}
.bb-7-200 {
  border-bottom: 1px solid var(--c-7-200);
}
.bb-7-300 {
  border-bottom: 1px solid var(--c-7-300);
}
.bb-7-400 {
  border-bottom: 1px solid var(--c-7-400);
}
.bb-7-500 {
  border-bottom: 1px solid var(--c-7-500);
}
.bb-7-600 {
  border-bottom: 1px solid var(--c-7-600);
}
.bb-7-700 {
  border-bottom: 1px solid var(--c-7-700);
}
.bb-7-800 {
  border-bottom: 1px solid var(--c-7-800);
}
.bb-7-900 {
  border-bottom: 1px solid var(--c-7-900);
}

/* h = 8 */
.bb-8-000 {
  border-bottom: 1px solid var(--c-8-000);
}
.bb-8-100 {
  border-bottom: 1px solid var(--c-8-100);
}
.bb-8-200 {
  border-bottom: 1px solid var(--c-8-200);
}
.bb-8-300 {
  border-bottom: 1px solid var(--c-8-300);
}
.bb-8-400 {
  border-bottom: 1px solid var(--c-8-400);
}
.bb-8-500 {
  border-bottom: 1px solid var(--c-8-500);
}
.bb-8-600 {
  border-bottom: 1px solid var(--c-8-600);
}
.bb-8-700 {
  border-bottom: 1px solid var(--c-8-700);
}
.bb-8-800 {
  border-bottom: 1px solid var(--c-8-800);
}
.bb-8-900 {
  border-bottom: 1px solid var(--c-8-900);
}

/* h = 9 */
.bb-9-000 {
  border-bottom: 1px solid var(--c-9-000);
}
.bb-9-100 {
  border-bottom: 1px solid var(--c-9-100);
}
.bb-9-200 {
  border-bottom: 1px solid var(--c-9-200);
}
.bb-9-300 {
  border-bottom: 1px solid var(--c-9-300);
}
.bb-9-400 {
  border-bottom: 1px solid var(--c-9-400);
}
.bb-9-500 {
  border-bottom: 1px solid var(--c-9-500);
}
.bb-9-600 {
  border-bottom: 1px solid var(--c-9-600);
}
.bb-9-700 {
  border-bottom: 1px solid var(--c-9-700);
}
.bb-9-800 {
  border-bottom: 1px solid var(--c-9-800);
}
.bb-9-900 {
  border-bottom: 1px solid var(--c-9-900);
}

/* h = 10 */
.bb-10-000 {
  border-bottom: 1px solid var(--c-10-000);
}
.bb-10-100 {
  border-bottom: 1px solid var(--c-10-100);
}
.bb-10-200 {
  border-bottom: 1px solid var(--c-10-200);
}
.bb-10-300 {
  border-bottom: 1px solid var(--c-10-300);
}
.bb-10-400 {
  border-bottom: 1px solid var(--c-10-400);
}
.bb-10-500 {
  border-bottom: 1px solid var(--c-10-500);
}
.bb-10-600 {
  border-bottom: 1px solid var(--c-10-600);
}
.bb-10-700 {
  border-bottom: 1px solid var(--c-10-700);
}
.bb-10-800 {
  border-bottom: 1px solid var(--c-10-800);
}
.bb-10-900 {
  border-bottom: 1px solid var(--c-10-900);
}

/* h = 11 */
.bb-11-000 {
  border-bottom: 1px solid var(--c-11-000);
}
.bb-11-100 {
  border-bottom: 1px solid var(--c-11-100);
}
.bb-11-200 {
  border-bottom: 1px solid var(--c-11-200);
}
.bb-11-300 {
  border-bottom: 1px solid var(--c-11-300);
}
.bb-11-400 {
  border-bottom: 1px solid var(--c-11-400);
}
.bb-11-500 {
  border-bottom: 1px solid var(--c-11-500);
}
.bb-11-600 {
  border-bottom: 1px solid var(--c-11-600);
}
.bb-11-700 {
  border-bottom: 1px solid var(--c-11-700);
}
.bb-11-800 {
  border-bottom: 1px solid var(--c-11-800);
}
.bb-11-900 {
  border-bottom: 1px solid var(--c-11-900);
}

:root {
  --spacing-4xs: clamp(0.25rem, 0.227vw + 0.193rem, 0.375rem);
  --spacing-3xs: clamp(0.375rem, 0.227vw + 0.318rem, 0.5rem);
  --spacing-2xs: clamp(0.5rem, 0.227vw + 0.443rem, 0.625rem);
  --spacing-xs: clamp(0.625rem, 0.227vw + 0.568rem, 0.75rem);
  --spacing-s: clamp(0.75rem, 0.227vw + 0.693rem, 0.875rem);
  --spacing-m: clamp(0.875rem, 0.227vw + 0.818rem, 1rem);
  --spacing-l: clamp(1rem, 0.751vw + 0.824rem, 1.5rem);
  --spacing-xl: clamp(1.5rem, 0.909vw + 1.273rem, 2rem);
  --spacing-2xl: clamp(2rem, 1.818vw + 1.545rem, 3rem);
  --spacing-3xl: clamp(3rem, 1.818vw + 2.545rem, 4rem);
  --spacing-4xl: clamp(4rem, 1.818vw + 3.545rem, 5rem);
  --spacing-5xl: clamp(5rem, 1.818vw + 4.545rem, 6rem);
  --spacing-6xl: clamp(6rem, 1.818vw + 5.545rem, 7rem);
  --spacing-7xl: clamp(7rem, 1.818vw + 6.545rem, 8rem);
  --spacing-8xl: clamp(8rem, 1.818vw + 7.545rem, 9rem);
}

/* ========== Padding ========== */

.p-s {
  padding: var(--spacing-s);
}
.p-m {
  padding: var(--spacing-m);
}
.p-l {
  padding: var(--spacing-l);
}
.p-xl {
  padding: var(--spacing-xl);
}
.p-2xl {
  padding: var(--spacing-2xl);
}
.p-3xl {
  padding: var(--spacing-3xl);
}
.p-4xl {
  padding: var(--spacing-4xl);
}
.p-5xl {
  padding: var(--spacing-5xl);
}
.p-6xl {
  padding: var(--spacing-6xl);
}
.p-7xl {
  padding: var(--spacing-7xl);
}
.p-8xl {
  padding: var(--spacing-8xl);
}
.p-xs {
  padding: var(--spacing-xs);
}
.p-2xs {
  padding: var(--spacing-2xs);
}
.p-3xs {
  padding: var(--spacing-3xs);
}
.p-4xs {
  padding: var(--spacing-4xs);
}

/* ========== Padding Bottom ========== */

.pb-s {
  padding-bottom: var(--spacing-s);
}
.pb-m {
  padding-bottom: var(--spacing-m);
}
.pb-l {
  padding-bottom: var(--spacing-l);
}
.pb-xl {
  padding-bottom: var(--spacing-xl);
}
.pb-2xl {
  padding-bottom: var(--spacing-2xl);
}
.pb-3xl {
  padding-bottom: var(--spacing-3xl);
}
.pb-4xl {
  padding-bottom: var(--spacing-4xl);
}
.pb-5xl {
  padding-bottom: var(--spacing-5xl);
}
.pb-6xl {
  padding-bottom: var(--spacing-6xl);
}
.pb-7xl {
  padding-bottom: var(--spacing-7xl);
}
.pb-8xl {
  padding-bottom: var(--spacing-8xl);
}

/* ========== Padding Bottom ========== */

.pt-s {
  padding-top: var(--spacing-s);
}
.pt-m {
  padding-top: var(--spacing-m);
}
.pt-l {
  padding-top: var(--spacing-l);
}
.pt-xl {
  padding-top: var(--spacing-xl);
}
.pt-2xl {
  padding-top: var(--spacing-2xl);
}
.pt-3xl {
  padding-top: var(--spacing-3xl);
}
.pt-4xl {
  padding-top: var(--spacing-4xl);
}
.pt-5xl {
  padding-top: var(--spacing-5xl);
}
.pt-6xl {
  padding-top: var(--spacing-6xl);
}
.pt-7xl {
  padding-top: var(--spacing-7xl);
}
.pt-8xl {
  padding-top: var(--spacing-8xl);
}

/* ========== Padding Cancel ========== */

.p-t-0 {
  padding-top: 0;
}
.p-r-0 {
  padding-right: 0;
}
.p-b-0 {
  padding-bottom: 0;
}
.p-l-0 {
  padding-left: 0;
}

/* ========== Margin ========== */

.m-s {
  margin: var(--spacing-s);
}
.m-m {
  margin: var(--spacing-m);
}
.m-l {
  margin: var(--spacing-l);
}
.m-xl {
  margin: var(--spacing-xl);
}
.m-2xl {
  margin: var(--spacing-2xl);
}
.m-3xl {
  margin: var(--spacing-3xl);
}
.m-4xl {
  margin: var(--spacing-4xl);
}

/* ========== Margin Bottom ========== */

.mb-s {
  margin-bottom: var(--spacing-s);
}
.mb-m {
  margin-bottom: var(--spacing-m);
}
.mb-l {
  margin-bottom: var(--spacing-l);
}
.mb-xl {
  margin-bottom: var(--spacing-xl);
}
.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}
.mb-3xl {
  margin-bottom: var(--spacing-3xl);
}
.mb-4xl {
  margin-bottom: var(--spacing-4xl);
}

/* ========== Margin Top ========== */

.mt-s {
  margin-top: var(--spacing-s);
}
.mt-m {
  margin-top: var(--spacing-m);
}
.mt-l {
  margin-top: var(--spacing-l);
}
.mt-xl {
  margin-top: var(--spacing-xl);
}
.mt-2xl {
  margin-top: var(--spacing-2xl);
}
.mt-3xl {
  margin-top: var(--spacing-3xl);
}
.mt-4xl {
  margin-top: var(--spacing-4xl);
}

/* ========== Margin Right ========== */

.mr-s {
  margin-right: var(--spacing-s);
}
.mr-m {
  margin-right: var(--spacing-m);
}
.mr-l {
  margin-right: var(--spacing-l);
}
.mr-xl {
  margin-right: var(--spacing-xl);
}
.mr-2xl {
  margin-right: var(--spacing-2xl);
}
.mr-3xl {
  margin-right: var(--spacing-3xl);
}
.mr-4xl {
  margin-right: var(--spacing-4xl);
}

/* ========== Margin Left ========== */

.ml-s {
  margin-left: var(--spacing-s);
}
.ml-m {
  margin-left: var(--spacing-m);
}
.ml-l {
  margin-left: var(--spacing-l);
}
.ml-xl {
  margin-left: var(--spacing-xl);
}
.ml-2xl {
  margin-left: var(--spacing-2xl);
}
.ml-3xl {
  margin-left: var(--spacing-3xl);
}
.ml-4xl {
  margin-left: var(--spacing-4xl);
}

/* Gap */

.gap-s {
  gap: var(--spacing-s);
}
.gap-m {
  gap: var(--spacing-m);
}
.gap-l {
  gap: var(--spacing-l);
}
.gap-xl {
  gap: var(--spacing-xl);
}
.gap-2xl {
  gap: var(--spacing-2xl);
}
.gap-3xl {
  gap: var(--spacing-3xl);
}
.gap-4xl {
  gap: var(--spacing-4xl);
}

/* Gap by axis

   `gap-*` above writes the SHORTHAND, which sets both axes. These write one longhand each, so they
   compose: `gap-l gap-x-s` is a loose row gap with a tight column gap.

   ⚠ THEY MUST STAY BELOW THE `gap-*` BLOCK. Both are single-class rules, so specificity is equal and
   the winner is source order — declared above it, the shorthand would overwrite the axis rule and
   `gap-l gap-x-s` would silently come out as `gap-l` on both axes. That failure looks like a typo in
   the class string, which is why the two blocks live in one file rather than one per concern.

   AXIS FIRST, matching every other split utility in the theme (`pt-4xl`, `pb-6xl`, `g-col-span-5`).
   First wanted by `/integrations/zapier` §4, where a five-row comparison wants its rows further
   apart than its two columns. */
.gap-x-s {
  column-gap: var(--spacing-s);
}
.gap-x-m {
  column-gap: var(--spacing-m);
}
.gap-x-l {
  column-gap: var(--spacing-l);
}
.gap-x-xl {
  column-gap: var(--spacing-xl);
}
.gap-x-2xl {
  column-gap: var(--spacing-2xl);
}
.gap-x-3xl {
  column-gap: var(--spacing-3xl);
}
.gap-x-4xl {
  column-gap: var(--spacing-4xl);
}
.gap-y-s {
  row-gap: var(--spacing-s);
}
.gap-y-m {
  row-gap: var(--spacing-m);
}
.gap-y-l {
  row-gap: var(--spacing-l);
}
.gap-y-xl {
  row-gap: var(--spacing-xl);
}
.gap-y-2xl {
  row-gap: var(--spacing-2xl);
}
.gap-y-3xl {
  row-gap: var(--spacing-3xl);
}
.gap-y-4xl {
  row-gap: var(--spacing-4xl);
}

/* @font-face for the brand font is injected per-brand via _fonts.css. */

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  text-wrap: balance;
  overflow-wrap: break-word;
  padding-top: 72px;
}

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

/* Paragraphs */

p,
.p {
  font-size: clamp(0.875rem, 0.455vw + 0.761rem, 1.125rem);
  line-height: clamp(1.488rem, 0.568vw + 1.345rem, 1.8rem);
  margin: 0;
}

.p-small {
  font-size: clamp(0.75rem, 0.227vw + 0.693rem, 0.875rem);
  line-height: clamp(1.275rem, 0.386vw + 1.178rem, 1.488rem);
  margin: 0;
  font-weight: 400;
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin: 0;
}

h1,
.h-display {
  font-size: clamp(3rem, 2.727vw + 2.318rem, 4.5rem);
  line-height: clamp(3.3rem, 3vw + 2.55rem, 4.95rem);
  font-weight: 500;
  margin: 0;
}

.h-display-l {
  font-size: clamp(4.5rem, 4.545vw + 3.364rem, 7rem);
  line-height: clamp(4.95rem, 5vw + 3.7rem, 7.7rem);
  font-weight: 500;
  margin: 0;
}

h1,
.h1 {
  font-size: clamp(2.5rem, 1.818vw + 2.045rem, 3.5rem);
  line-height: clamp(3.25rem, 1.091vw + 2.977rem, 3.85rem);
  font-weight: 400;
}

h2,
.h2 {
  font-size: clamp(2rem, 1.818vw + 1.545rem, 3rem);
  line-height: clamp(2.8rem, 0.909vw + 2.573rem, 3.3rem);
  font-weight: 400;
}

h3,
.h3 {
  font-size: clamp(1.75rem, 1.364vw + 1.409rem, 2.5rem);
  line-height: clamp(2.625rem, 1.136vw + 2.341rem, 3.25rem);
  font-weight: 400;
}

h4,
.h4 {
  font-size: clamp(1.5rem, 0.909vw + 1.273rem, 2rem);
  line-height: clamp(2.25rem, 1vw + 2rem, 2.8rem);
  font-weight: 400;
}

h5,
.h5 {
  font-size: clamp(1.125rem, 0.682vw + 0.955rem, 1.5rem);
  line-height: clamp(1.8rem, 0.818vw + 1.595rem, 2.25rem);
  font-weight: 400;
}

h6,
.h6 {
  font-size: clamp(0.875rem, 0.455vw + 0.761rem, 1.125rem);
  line-height: clamp(1.488rem, 0.568vw + 1.345rem, 1.8rem);
  font-weight: 400;
  text-transform: uppercase;
}

/* Lists */

ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xs);
}

li {
  position: relative;
  padding-left: var(--spacing-xl);
  margin: 0;
  line-height: clamp(1.488rem, 0.568vw + 1.345rem, 1.8rem);
}


/* List bullets — inline-SVG checkmark (data-URI), so they no longer depend on
   the Font Awesome webfont. This lets the FA kit script be deferred without a
   bullet FOUC, and bullets render even if the kit is blocked/offline.
   Default bullet: mask + currentColor (inherits text color, like the old glyph).
   .li-check / -dark: token box fill + the check layered on top (color baked into
   the SVG since a data-URI can't read CSS vars; ~matches --c-0-500 / --c-0-300). */
li::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0.2rem;

  width: var(--spacing-l);
  height: var(--spacing-l);
  border-radius: var(--spacing-4xs);

  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.li-check li::before,
.li-check-dark li::before {
  -webkit-mask: none;
          mask: none;
  border: 1px solid var(--c-0-400);
  border-radius: var(--spacing-4xs);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.7rem;
}

.li-check li::before {
  background-color: var(--c-0-000);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23737373' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

.li-check-dark li::before {
  background-color: var(--c-0-800);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23cfcfcf' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
}

ul,
ol {
  margin: 0;
}

ul ul,
ol ul,
ul ol,
ol ol {
  margin: 0;
}

/* No list */
ul.no-list,
ol.no-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul.no-list > li,
ol.no-list > li {
  position: static;
  padding-left: 0;
  margin: 0;
  line-height: inherit;
}

ul.no-list > li::before,
ol.no-list > li::before {
  content: none; /* hides the checkmark */
  display: none;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  border-left: 2px solid var(--c-0-400);
  margin: 0;
  padding-left: var(--spacing-xs);
}

/* Text Align */
.t-align-center {
  text-align: center;
}

.t-align-left {
  text-align: left;
}

.t-align-right {
  text-align: right;
}

/* Text Decoration */

.t-line-through {
  text-decoration: line-through;
  text-decoration-thickness: 0.4px;
}

.bg-dots {
  background-image: radial-gradient(circle, oklch(var(--c-l-5) var(--c-c) var(--c-h-0) / 16%) 1px, transparent 1px);
  background-size: var(--spacing-xl) var(--spacing-xl);
}

.bg-dots-dark {
  background-image: radial-gradient(circle, oklch(var(--c-l-2) var(--c-c) var(--c-h-0) / 24%) 1px, transparent 1px);
  background-size: var(--spacing-xl) var(--spacing-xl);
}

/* THE PAGE GROUND, DECLARED RATHER THAN ASSUMED. `body` carried no background
   at all before this — the white behind every page was the browser's default,
   which is fine until something needs to fade *to* it and has nothing to name.
   `--c-white` is the same white that was already showing, so no existing page
   changes. Read only by the soft-edge utilities below; `body` sets it so the
   value and the thing it describes cannot drift apart. */
:root {
  --page-bg: var(--c-white);
}

body {
  background-color: var(--page-bg);
}

/* ─────────────────────────────────────────────────────────────
   SOFT SECTION EDGES — a section's background dissolving into the page
   ground instead of ending on a hard line.

   `--bg-fade` is the one knob (default `--spacing-8xl`, picked against the
   real seams: mid→light, light→white, dots→white, motif→light, white→motif).

   WHY THIS IS A PAINTED SCRIM AND NOT A MASK, because that was the actual
   choice. Masking the section's own background makes it fade into whatever
   is genuinely behind it — a neighbouring section's colour included — which
   is strictly more capable. But the mask only has something to reveal if the
   section is first pulled UP over its neighbour by the same distance as the
   fade, and that climb is not free: it eats the bottom padding of the section
   above, and past that padding it washes over that section's last line of
   text at the transparent end of the gradient, where the cause is nearly
   invisible. On the default `pt-4xl pb-4xl` rhythm the climb is clear to 4xl
   and washes text from 5xl up — so an 8xl dissolve and a section that doesn't
   move are mutually exclusive under a mask. This scrim paints inside the
   section's own box with the content lifted above it, so it moves nothing at
   any height. Its one limit is the one below.

   IT FADES TO `--page-bg`, SO IT ONLY READS RIGHT AGAINST PAGE GROUND. On a
   seam where the neighbour carries its own `bg-*`, this paints white over
   that neighbour's colour and the seam gets a pale band instead of a soft
   one. For those, either give both bands the same ground, or leave the edge
   hard. A colour-to-colour cross-dissolve needs the mask + climb described
   above; it is deliberately not shipped here until a page wants it.

   THE `50%` CAP IS ON `.bg-fade-y` ONLY, AND ONLY BECAUSE TWO BANDS CAN CROSS.
   At 8xl (144px) two bands total ~288px, more than a one-line section is tall,
   so on a short band they would overlap and the section's own colour would
   never reach full strength anywhere. The percentage resolves against the
   section's height, so each band stops at the midpoint at worst.
   `.bg-fade-t` and `.bg-fade-b` are deliberately NOT capped: a single edge has
   nothing to collide with, so the value asked for is the value drawn. On a
   typical `pt-4xl pb-4xl` section (~205px) an 8xl band covers about 70% of it
   — that is the look, not a fault, and capping it would quietly ship a
   different fade than the one that was picked.

   `.bg-fade-t` AND `.bg-fade-b` DO NOT STACK — both need `::after` and the
   later rule wins, so only one edge would draw. Use `.bg-fade-y` for both.
   (`::before` is not available to them: `.jupiter-bg` owns it for the motif.)
   ───────────────────────────────────────────────────────────── */
.bg-fade-t,
.bg-fade-b,
.bg-fade-y {
  --bg-fade: var(--spacing-8xl);

  position: relative;
}

/* Content sits above the scrim. Matches what `.jupiter-bg > *` already does,
   and is why the scrim never washes the section's own text. */
.bg-fade-t > *,
.bg-fade-b > *,
.bg-fade-y > * {
  position: relative;
  z-index: 1;
}

.bg-fade-t::after,
.bg-fade-b::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: var(--bg-fade);
  pointer-events: none;
  z-index: 0;
}

.bg-fade-t::after {
  top: 0;
  background: linear-gradient(to bottom, var(--page-bg), transparent);
}

.bg-fade-b::after {
  bottom: 0;
  background: linear-gradient(to top, var(--page-bg), transparent);
}

/* Both edges from one pseudo-element — two gradients layered on the same box,
   each ending before the other begins. */
.bg-fade-y::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(to bottom, var(--page-bg), transparent min(var(--bg-fade), 50%)),
    linear-gradient(to top, var(--page-bg), transparent min(var(--bg-fade), 50%));
}

.div-dots {
  width: 100%;
  height: 2px;
  background-image: radial-gradient(circle, oklch(var(--c-l-3) var(--c-c) var(--c-h-0) / 32%) 1px, transparent 1px);
  background-size: var(--spacing-s);
  background-repeat: repeat-x;
  margin-top: var(--spacing-3xl);
  margin-bottom: var(--spacing-3xl);
}

.div-line {
  width: 100%;
  height: 1px;
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
}

.div-bar {
  width: 1px;
  min-height: 24px;
}

.media-fg {
  overflow: hidden;
  border-radius: var(--spacing-xs);
  position: relative;
}

/* A raw-HTML embed in a `media_src` field that opts into js/fit-frame.js.
   `display:block` matters: an inline iframe sits on the text baseline and
   leaves a few px of descender gap, which shows as a sliver of the media
   background under the frame. Height is deliberately NOT set — fit-frame
   writes the measured value, and the markup's `height` attribute is the
   pre-measurement fallback. Scoped to [data-fit] so no existing embed
   (a video, a cross-origin widget) is touched. */
.media-fg iframe[data-fit] {
  display: block;
  width: 100%;
  border: 0;
}

/* Optional wrapper for a `media_src` embed that carries a text alternative with it —
   a <figure> holding the image/video/iframe plus a <figcaption class="sr-only">.
   <figure> ships with a default UA margin, which would show as a gap inside the
   frame; that's all this resets. The contract for what goes inside is in
   themes/web/CLAUDE.md → Media embed contract. */
.media-item {
  margin: 0;
  display: block;
}

.p-t-0 .media-fg {
  border-radius: 0 0 var(--spacing-xs) var(--spacing-xs);
  top: -1px;
}

.p-r-0 .media-fg {
  border-radius: var(--spacing-xs) 0 0 var(--spacing-xs);
  right: -1px;
}

.p-b-0 .media-fg {
  border-radius: var(--spacing-xs) var(--spacing-xs) 0 0;
  bottom: -4px;
}

.p-l-0 .media-fg {
  border-radius: 0 var(--spacing-xs) var(--spacing-xs) 0;
  left: -1px;
}

.media-bg {
  overflow: hidden;

  position: relative;
}

/* The .jupiter-bg motif (brand texture + animation) is brand-specific —
   injected per-brand via _backgrounds-brand.css. The dot/line/media
   backgrounds above are neutral and re-skin from the OKLCH ramp. */

/* ─────────────────────────────────────────────────────────────
   US (Jupiter) background motif — the animated planet texture.
   Brand-specific; injected at deploy into
   themes/web/css/elements/_backgrounds-brand.css.
   A brand with a different background system supplies its own
   version here (or omits it). The texture URL is account-hosted.
   ───────────────────────────────────────────────────────────── */
.jupiter-bg {
  --jupiter-tile: 320px;
  --jupiter-speed: 10s;

  position: relative;
  overflow: hidden;
}

@keyframes jupiter-bg {
  from { background-position: 0 0; }
  to   { background-position: 320px calc(320px * -1); }
}

.jupiter-bg::before {
  content: "";
  position: absolute;
  inset: -60%;
  pointer-events: none;
  opacity: 0.48;
  mix-blend-mode: overlay;

  background-image: url("https://243399599.fs1.hubspotusercontent-na2.net/hubfs/243399599/jupiter-design/jupiter/textures/jupiter-planet-texture.jpg");
  background-repeat: repeat;
  background-size: 620px 620px;

  transform: rotate(24deg);
  transform-origin: center;

  will-change: background-position;
  animation: jupiter-bg 32s linear infinite;
}

/* keep children untouched and above */
.jupiter-bg > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .jupiter-bg::before {
    animation: none;
  }
}

:root {
  --btn-font-size: clamp(0.875rem, 0.227vw + 0.818rem, 1rem);
  --btn-font-weight: 400;

  --btn-radius: var(--spacing-4xs);
  --btn-padding-y: var(--spacing-s);
  --btn-padding-x: var(--spacing-m);
  --btn-shadow: 0 0 0 oklch(var(--c-l-6) var(--c-c) var(--c-h-0) / 0%);
  --btn-shadow-hover: 0 16px 32px oklch(var(--c-l-6) var(--c-c) var(--c-h-0) / 12%);
  --btn-transition: 200ms ease;

  --btn-primary-bg: var(--c-0-500);
  --btn-primary-bg-hover: var(--c-0-400);
  --btn-primary-bg-active: var(--c-0-500);
  --btn-primary-text: var(--c-white);

  --btn-secondary-bg: transparent;
  --btn-secondary-bg-hover: var(--c-0-400);
  --btn-secondary-bg-active: var(--c-0-500);
  --btn-secondary-text: var(--c-0-800);
}

/* Anchors */

a {
  cursor: pointer;
  color: inherit;
  margin: 0;
  font-size: var(--btn-font-size);
}

.link {
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  transition: all 200ms ease;
}

.link-text {
  transition: all 200ms ease;
}

.link-icon-1 {
  margin-left: var(--spacing-xs);
  transition: transform 200ms ease;
}

.link:hover .link-icon-1 {
  transform: translateX(var(--spacing-4xs));
}

.link-text-2 {
  transform: translateX(0);
  transition: transform 200ms ease;
}

.link:hover .link-text-2 {
  transform: translateX(24px);
}

.link-icon-2 {
  margin: 0;
  opacity: 0;
  width: 0;
  transition: all 400ms ease;
}


.link:hover .link-icon-2 {
  opacity: 1;
  transform: translateX(0);
}

.link-secondary {
  color: inherit;
}

.link-secondary:hover {
  color: var(--c-0-500);
}

/* Buttons */

button,
.button,
.hs-button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: none;
  outline: none;

  background-color: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);

  cursor: pointer;
  box-shadow: var(--btn-shadow);
  transform: translateY(0);

  transition: background-color var(--btn-transition), box-shadow var(--btn-transition), transform var(--btn-transition);
}

/* Hover */
.btn:hover {
  background-color: var(--btn-primary-bg-hover);
  box-shadow: var(--btn-shadow-hover);
  transform: translateY(-2px);
}

/* is_dark */
.btn.is_dark {
  background-color: var(--c-0-600);
}

.is_dark:hover {
  background-color: var(--c-0-500);
}

/* Active */
.btn:active {
  background-color: var(--btn-primary-bg-active);
  transform: translateY(0);
}

/* Keyboard focus */
.btn:focus-visible {
  outline: 2px solid var(--c-0-300);
  outline-offset: 2px;
}

/* Disabled */
.btn[disabled],
.btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Button Secondary */
.btn-secondary {
  background-color: transparent;
  border: 1px solid var(--c-0-300);
  color: var(--btn-secondary-text);
  font-weight: var(--btn-font-weight);
}

.btn-secondary:hover {
  background-color: transparent;
  border: 1px solid var(--c-0-400);
  color: var(--btn-secondary-text);
}

.btn-secondary.is_dark {
  background-color: transparent;
  border: 1px solid var(--c-0-300);
  color: var(--btn-primary-text);
  font-weight: var(--btn-font-weight);
}

/* Button Group */

.btn-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-s);
}

/* A CENTRED SECTION CENTRES ITS BUTTONS, and without this it only looks like it does.
   `.btn-group` is a sibling of `.content-wrapper` inside `.section-wrapper`, so a hero declaring
   `align-center` centres the GROUP — which is invisible while the group is narrower than the
   column. The moment it wraps, the group stretches to the full column width and centring it buys
   nothing: the rows inside are still `justify-content: normal`, so they left-align. Measured on
   `/integrations/zapier` §1 at 390px — a two-button group wrapped to two rows, the group at the
   full 358px, the second row ending 139px short.
   SCOPED TO `align-center` on purpose. `justify-content: inherit` on `.btn-group` would be tidier
   and is wrong: 7 section-wrappers across the portal carry `justify-between`, and their buttons
   would fly apart. This only reaches sections that already asked to be centred. */
.section-wrapper.align-center > .btn-group {
  justify-content: center;
}

/* Chips */

.chip {
  text-decoration: none;
  display: inline-flex;
  flex-direction: row;
  padding: var(--spacing-xs) var(--spacing-s);
  border-radius: var(--btn-radius);
  color: var(--c-0-300);
  background-color: var(--c-0-900);
  border: 1px solid var(--c-0-600);
  transition: all 200ms ease;
  font-size: var(--btn-font-size);
}

.chip:hover {
  background-color: var(--c-0-800);
}

/* Skip-link — visually hidden until focused, then pinned top-left so keyboard
   users can jump past the header to #main-content. */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--spacing-s) var(--spacing-m);
  background: var(--c-0-000);
  color: var(--c-0-900);
  border-radius: var(--spacing-3xs);
}

.skip-link:focus {
  left: var(--spacing-s);
  top: var(--spacing-s);
}

/* Sections */

.section {
  padding-left: var(--spacing-l);
  padding-right: var(--spacing-l);
  scroll-margin-top: 100px;
}

/* A section that BLEEDS to the viewport edge — for a band whose one child owns its own safe area:
   a framed embed that paints its own ground and insets its own content, a full-width media strip.
   Not for a section with copy in it; that is what the containers below are for.

   TWO CLASSES, AND THAT IS THE WHOLE REASON THIS RULE EXISTS. `.p-l-0` / `.p-r-0` already ship in
   `_theme/_spacing.css`, and on a `.section` they do nothing: that file is composed into main.css
   BEFORE this one, so at equal specificity `.section`'s own padding wins and the utility reads like
   a decision while being an inert no-op. (Same trap as `mb-*` on a heading, which `_typography`
   overrides for the same reason.) Rather than reorder main.css — which would silently change every
   page that has ever put a padding utility on a section — this is one rule that wins on specificity
   and says so. */
.section.section-bleed {
  padding-left: 0;
  padding-right: 0;
}

/* ...and a bleeding band has square corners, because its corners are the viewport's. `.media-fg`
   rounds every raw-HTML embed by `--spacing-xs` and clips it, which is right for a media block
   sitting inside a container and wrong the moment the block reaches the screen edge — a rounded
   corner there reads as a rendering fault rather than a radius. Scoped to the bleed so no existing
   embed changes. */
.section.section-bleed .media-fg,
.section.section-bleed .media-bg {
  border-radius: 0;
}

/* Containers */

.container-s {
  margin: auto;
  max-width: 48rem;
}
.container-m {
  margin: auto;
  max-width: 64rem;
}
.container-l {
  margin: auto;
  max-width: 80rem;
}

.container-full {
  margin: auto;
  max-width: 100%;
}

/* Wrapper */

.wrapper {
  width: 100%;
}

.logo-wrapper {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xl);
  height: var(--spacing-xl);
}

.logo-wrapper img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo {
  width: auto;
  height: var(--spacing-xl);
}

/* Dividers */

.v-line {
  width: 1px;
  height: var(--spacing-xl);
  background-color: var(--c-0-600);
}

.h-line {
  width: var(--spacing-xl);
  height: 1px;
  background-color: var(--c-0-600);
}

/* Grid */

.g-cols-12 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
/* AN ODD NUMBER OF COLUMNS EXISTS FOR A CENTRED DIVIDER, and that is the whole of its job. A
   comparison band is two equal halves either side of something narrow — `/integrations/zapier` §4 is
   5 + 1 + 5, two cards with an arrow between them — and 12 cannot express it: 5 + 2 + 5 makes the
   divider twice the width it wants, and 5 + 1 + 5 on a 12-column grid leaves the row 1 column short
   of every span-12 element in the same band (measured: 109px at a 1440 viewport). 11 makes it exact
   and symmetric. Same breakpoint behaviour as 12 — one column below 991px — so a band built on it
   collapses the same way. */
.g-cols-11 {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.g-rows-12 {
  display: grid;
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

@media (min-width: 991px) {
  .g-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .g-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .g-rows-12 {
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }
}

/* Grid Column Span */

.g-col-span-1,
.g-col-span-2,
.g-col-span-3,
.g-col-span-4,
.g-col-span-5,
.g-col-span-6,
.g-col-span-7,
.g-col-span-8,
.g-col-span-9,
.g-col-span-10,
.g-col-span-11,
.g-col-span-12 {
  grid-column: span 1 / span 1;
}

@media (min-width: 991px) {
  .g-col-span-1 {
    grid-column: span 1 / span 1;
  }
  .g-col-span-2 {
    grid-column: span 2 / span 2;
  }
  .g-col-span-3 {
    grid-column: span 3 / span 3;
  }
  .g-col-span-4 {
    grid-column: span 4 / span 4;
  }
  .g-col-span-5 {
    grid-column: span 5 / span 5;
  }
  .g-col-span-6 {
    grid-column: span 6 / span 6;
  }
  .g-col-span-7 {
    grid-column: span 7 / span 7;
  }
  .g-col-span-8 {
    grid-column: span 8 / span 8;
  }
  .g-col-span-9 {
    grid-column: span 9 / span 9;
  }
  .g-col-span-10 {
    grid-column: span 10 / span 10;
  }
  .g-col-span-11 {
    grid-column: span 11 / span 11;
  }
  .g-col-span-12 {
    grid-column: span 12 / span 12;
  }
}

/* Grid Row Span */

.g-row-span-1,
.g-row-span-2,
.g-row-span-3,
.g-row-span-4,
.g-row-span-5,
.g-row-span-6,
.g-row-span-7,
.g-row-span-8,
.g-row-span-9,
.g-row-span-10,
.g-row-span-11,
.g-row-span-12 {
  grid-row: span 1 / span 1;
}

@media (min-width: 640px) {
  .g-row-span-1 {
    grid-row: span 1 / span 1;
  }
  .g-row-span-2 {
    grid-row: span 2 / span 2;
  }
  .g-row-span-3 {
    grid-row: span 3 / span 3;
  }
  .g-row-span-4 {
    grid-row: span 4 / span 4;
  }
  .g-row-span-5 {
    grid-row: span 5 / span 5;
  }
  .g-row-span-6 {
    grid-row: span 6 / span 6;
  }
  .g-row-span-7 {
    grid-row: span 7 / span 7;
  }
  .g-row-span-8 {
    grid-row: span 8 / span 8;
  }
  .g-row-span-9 {
    grid-row: span 9 / span 9;
  }
  .g-row-span-10 {
    grid-row: span 10 / span 10;
  }
  .g-row-span-11 {
    grid-row: span 11 / span 11;
  }
  .g-row-span-12 {
    grid-row: span 12 / span 12;
  }
}

.grid-strech {
  justify-self: stretch;
}

/* Order */

.g-order-2 {
  order: 2;
}

@media (min-width: 991px) {
  .g-order-2 {
    order: 0;
  }
}

/* Icon Boxes */

.box-xs {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-4xs);
  width: var(--spacing-xl);
  height: var(--spacing-xl);
  aspect-ratio: 1 /1;
}

.box-s {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-4xs);
  width: var(--spacing-2xl);
  height: var(--spacing-2xl);
  aspect-ratio: 1 /1;
}

.box-m {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-4xs);
  width: var(--spacing-3xl);
  height: var(--spacing-3xl);
  aspect-ratio: 1 /1;
}

/* Border radius */

.rounded-s {
  border-radius: var(--spacing-4xs);
}

.rounded-m {
  border-radius: var(--spacing-3xs);
}

.rounded-l {
  border-radius: var(--spacing-2xs);
}


/* Flex */

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

.flex-row {
  display: flex;
  flex-direction: row;
}

.justify-between {
  justify-content: space-between;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: end;
}

.align-end {
  align-items: end;
}

.align-center {
  align-items: center;
}

.align-start {
  align-items: start;
}

.align-stretch {
  align-items: stretch;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.flex-grow {
  flex-grow: 1;
}

/* Desktop-only end-alignment — flips to start on mobile (≤991px).
   Useful for right-aligned button groups that should hug the left edge
   when the layout collapses to one column. */
.justify-end-desktop {
  justify-content: start;
}

@media (min-width: 991px) {
  .justify-end-desktop {
    justify-content: end;
  }
}

/* Sizing — numeric = percentage. */

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

/* Badge — fixed-width image slot. Width is set by the size variant; height
   auto-derives from the image's intrinsic aspect ratio so badges never
   distort. flex-shrink: 0 keeps them sized correctly in tight flex rows. */

.badge {
  --badge-w: var(--spacing-6xl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--badge-w);
  flex-shrink: 0;
}

.badge-xs { --badge-w: var(--spacing-3xl); }
.badge-s  { --badge-w: var(--spacing-4xl); }
.badge-m  { --badge-w: var(--spacing-6xl); }
.badge-l  { --badge-w: var(--spacing-8xl); }

@media (max-width: 991px) {
  .badge-xs { --badge-w: var(--spacing-2xl); }
  .badge-s  { --badge-w: var(--spacing-3xl); }
  .badge-m  { --badge-w: var(--spacing-4xl); }
  .badge-l  { --badge-w: var(--spacing-6xl); }
}

.badge img,
.badge svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Optional fixed-height slot. Pair with a badge size (width); the image
   scales to fit inside the box, centered, preserving its aspect ratio — so
   cards whose source images have different aspect ratios align vertically.
   Opt-in: the object-fit override is scoped to badge-h-* so plain badges
   (logo rows, tight flex) keep their intrinsic auto-height behaviour. */

.badge-h-xs { height: var(--spacing-4xl); }
.badge-h-s  { height: var(--spacing-5xl); }
.badge-h-m  { height: var(--spacing-6xl); }
.badge-h-l  { height: var(--spacing-8xl); }

.badge[class*="badge-h-"] img,
.badge[class*="badge-h-"] svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon slot — fixed-size frame for inline icons (SVG or image). Sized by
   --icon-slot-w / --icon-slot-h so it can be re-themed in place; inherits
   currentColor so any c-* color class on the slot tints currentColor SVGs. */

.icon-slot {
  --icon-slot-w: var(--spacing-4xl);
  --icon-slot-h: var(--spacing-4xl);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-slot-w);
  height: var(--icon-slot-h);
  flex-shrink: 0;
}

.icon-slot-s { --icon-slot-w: var(--spacing-3xl); --icon-slot-h: var(--spacing-3xl); }
.icon-slot-l { --icon-slot-w: var(--spacing-5xl); --icon-slot-h: var(--spacing-5xl); }

/* Minimal step badge — plain-text number pinned to a card's top-left. */

.step-badge-minimal {
  position: absolute;
  top: var(--spacing-l);
  left: var(--spacing-l);
  z-index: 1;
  pointer-events: none;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* =================================================================
   Card alignment (opt-in, per card). Add .card-align to each card in
   a row that should share vertical rhythm: reserves space for up to 2
   lines of title and description, and bottom-anchors links/buttons, so
   sibling cards line up at title/description/link rows without touching
   the parent grid. Scoped to >=992px; a no-op on mobile (cards stack).
   Tune via --card-title-lines / --card-desc-lines on the card.
   ================================================================= */

@media (min-width: 992px) {
  .card-align {
    --card-title-lines: 2;
    --card-desc-lines: 2;
    display: flex;
    flex-direction: column;
  }
  .card-align > .title-section {
    min-height: calc(var(--card-title-lines) * 1lh);
  }
  .card-align > .description-section {
    min-height: calc(var(--card-desc-lines) * 1lh);
  }
  .card-align > .links-section,
  .card-align > .btn-group {
    margin-top: auto;
  }
}

/* Stacked comparison — a before/after that collapses to one column

   A two-column comparison band is card | divider | card. Under 991px every span becomes one column,
   so the grid's single `row-gap` falls between EVERY item: card, arrow, card, card, arrow, card.
   That makes the space INSIDE a pair (two gaps plus the divider) LARGER than the space BETWEEN
   pairs (one gap) — so the stack reads as pairs pushed apart and unrelated neighbours pulled
   together, which is exactly backwards. Measured on `/integrations/zapier` §4 at 390px: 48px+arrow
   inside a pair against 24px between them.

   `.stack-pairs` goes on the grid container and `.stack-mid` on the divider cell. Desktop is
   untouched — at those widths the divider is a COLUMN, and its vertical margins do nothing to a
   row whose height its neighbours set. */
@media (max-width: 991px) {
  .stack-pairs {
    row-gap: var(--spacing-3xl);
  }
  .stack-pairs > .stack-mid {
    margin-block: calc(-1 * var(--spacing-l));
  }
}

/* ── Elevation ───────────────────────────────────────────────────────────
   The shadow scale.

   Before this file the framework had exactly two shadows and neither was
   reachable from a page: the button hover lift (element-local, in
   _buttons.css) and the slide-in banner's panel shadow (scoped inside
   banner-slide-in.module). Anything else that needed to sit above the page
   — a framed embed, a card — had no class to reach for, which is how an
   inline banner ends up flat.

   banner-slide-in.module.css reads `--shadow-l` rather than declaring its
   own, so the banner panel moves with the scale — retunes here reach it.

   BRAND-TINTED, not neutral black. The dark side is the primary one L step
   down — `--c-l-6` at full seed chroma — so the scale re-skins with the seed
   instead of being a fixed grey. It is the same colour `--btn-shadow-hover`
   casts in _buttons.css; the two lifts differ only in geometry. The white
   top-left layer is the light source, not a brand colour, hence the literal
   `oklch(1 0 0 / …)`. It needs a LIGHT surface to read — on a dark ground it
   becomes a haze along the top edge rather than a highlight.

   Lightness and alpha are ONE knob, not two: a darker tint needs less alpha
   for the same weight, and less alpha means less colour cast. Retune them
   together in design/elevation-tuner.html — never edit one alone.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* Two layers per step: a tinted pool down-right for the lift, a white
     highlight up-left for the light source.

     Two things here are structure, not tuning. ALPHA IS CONSTANT across the
     three steps — tint .08, highlight .2 — so geometry alone carries the
     step, and -s and -l are the same material at different sizes rather than
     three different weights of shadow. And the highlight is far stronger
     than the tint, which is what makes this read as a soft raise on a light
     ground; it is also exactly why it degrades on a dark one.

     Pick values in design/elevation-tuner.html against a real caster and
     ground, not by editing numbers here. */
  --shadow-s:
    0.2rem 0.2rem 0.875rem oklch(var(--c-l-6) var(--c-c) var(--c-h-0) / .08),
    -0.2rem -0.2rem 1rem oklch(1 0 0 / .2);

  --shadow-m:
    0.4rem 0.4rem 1.75rem oklch(var(--c-l-6) var(--c-c) var(--c-h-0) / .08),
    -0.4rem -0.4rem 1.6rem oklch(1 0 0 / .2);

  --shadow-l:
    0.8rem 0.8rem 2rem oklch(var(--c-l-6) var(--c-c) var(--c-h-0) / .08),
    -0.6rem -0.6rem 2rem oklch(1 0 0 / .2);
}

.shadow-s { box-shadow: var(--shadow-s); }
.shadow-m { box-shadow: var(--shadow-m); }
.shadow-l { box-shadow: var(--shadow-l); }

/* An explicit off switch, for overriding a shadow a component sets itself. */
.shadow-none { box-shadow: none; }

:root {
    --hsf-global__font-family: inherit;
    --hsf-global__font-size: clamp(0.75rem, 0.227vw + 0.693rem, 0.875rem);
    --hsf-global__color: black;
    --hsf-global-error__color: #fb5663;

    --hsf-button__font-size: clamp(0.875rem, 0.227vw + 0.818rem, 1rem);
    --hsf-button__background-color: var(--form-button-bg);
    --hsf-button__border-radius: clamp(0.25rem, 0.227vw + 0.193rem, 0.375rem);
    --hsf-button__padding: clamp(0.875rem, 0.227vw + 0.818rem, 1rem);

    --hsf-field-label__color: #424242;
    --hsf-field-input__color: inherit;
    --hsf-field-input__background-color: white;
    --hsf-field-input__placeholder-color: #b7b7b7;
    --hsf-field-input__border-color: var(--form-input-border);
    --hsf-field-input__border-width: 1px;
    --hsf-field-input__border-radius: clamp(0.25rem, 0.227vw + 0.193rem, 0.375rem);
  }

/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

form input[type=text],
form input[type=search],
form input[type=email],
form input[type=password],
form input[type=tel],
form input[type=number],
form input[type=file],
form select,
form textarea {
  display: inline-block;
  font-size: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

form fieldset {
  max-width: 100% !important;
}

/* Inputs - checkbox/radio */

form .inputs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

form .inputs-list input,
form .inputs-list span {
  vertical-align: middle;
}

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

.hs-dateinput:before {
  content:'\01F4C5';
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
}

.fn-date-picker .pika-table thead th {
  color: #FFF;
}

.fn-date-picker td.is-selected .pika-button {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

form input[type=file] {
  background-color: transparent;
  border: initial;
  padding: initial;
}

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

form .hs-richtext img {
  max-width: 100% !important;
}

/* GDPR */

.legal-consent-container .hs-form-booleancheckbox-display > span,
.legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 1rem !important;
}

/* Validation */

.hs-form-required {
  color: #EF6B51;
}

.hs-input.invalid.error {
  border-color: #EF6B51;
}

.hs-error-msg {
  color: #0033ff;
  margin-top: 0.35rem;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


  /* Search button input field and suggestions */
  .body-container-wrapper .hs-search-field__button {
    padding: 15px;
  }

  .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
    margin-left: 6px;
    margin-bottom: 0;
  }

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: #fff;
  }

  .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
    padding: 10px;
  }

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color 0.3s;
  }


/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

/* Lendesk Animation System
   Add classes in the HubSpot editor CSS class field to enable animations.

   TYPE (pick one):
     anim-fade-up | anim-fade-in | anim-zoom-in | anim-slide-left | anim-slide-right | anim-text-chars

   TRIGGER (optional, default is scroll):
     anim-load        triggers on page load instead of scroll (use on heroes)

   TIMING (optional):
     anim-delay-200   delay before animation starts, in ms (200, 400, 600...)
     anim-duration-900  animation duration, in ms (400, 600, 800, 1000...)

   STAGGER (add to a parent element):
     anim-stagger     staggers direct children that have a type class, 80ms apart
     anim-gap-100     custom stagger gap in ms (use alongside anim-stagger)

   TEXT CHARS - child delay (add to a child span inside anim-text-chars):
     anim-char-gap-500  pauses the char stagger by 500ms before animating that span's chars */


/* Initial states */

.js-anim .anim-fade-up {
  opacity: 0;
  transform: translateY(30px);
}

.js-anim .anim-fade-in {
  opacity: 0;
}

.js-anim .anim-zoom-in {
  opacity: 0;
  transform: scale(0.93);
}

.js-anim .anim-slide-left {
  opacity: 0;
  transform: translateX(-40px);
}

.js-anim .anim-slide-right {
  opacity: 0;
  transform: translateX(40px);
}

/* Parent held hidden until play so the full title can't paint before JS
   splits it into chars (otherwise: flash of the whole title, then it
   vanishes as the .anim-char rule below kicks in, then it animates in).
   The early-reveal bootstrap in base.html adds .anim-play at parse time so
   this hidden window — and the LCP deferral it causes on the hero — stays
   minimal. Reduced motion resets this below. */
.js-anim .anim-text-chars { opacity: 0; }
.js-anim .anim-text-chars.anim-play { opacity: 1; }

.js-anim .anim-text-chars .anim-char {
  opacity: 0;
}


/* Keyframes */

@keyframes leFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes leFadeIn {
  to { opacity: 1; }
}

@keyframes leZoomIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes leSlideLeft {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes leSlideRight {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes leChar {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* Play states — .anim-play added by JS */

.anim-fade-up.anim-play {
  animation: leFadeUp var(--anim-duration, 800ms) cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms) both;
}

.anim-fade-in.anim-play {
  animation: leFadeIn var(--anim-duration, 800ms) ease var(--anim-delay, 0ms) both;
}

.anim-zoom-in.anim-play {
  animation: leZoomIn var(--anim-duration, 800ms) cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms) both;
}

.anim-slide-left.anim-play {
  animation: leSlideLeft var(--anim-duration, 800ms) cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms) both;
}

.anim-slide-right.anim-play {
  animation: leSlideRight var(--anim-duration, 800ms) cubic-bezier(0.22, 1, 0.36, 1) var(--anim-delay, 0ms) both;
}

.anim-text-chars.anim-play .anim-char {
  animation: leChar var(--anim-duration, 400ms) ease var(--anim-char-delay, 0ms) both;
}


/* Done state — belt-and-suspenders after animation completes */

.anim-done {
  opacity: 1 !important;
  transform: none !important;
}

.anim-done .anim-char {
  opacity: 1 !important;
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .js-anim .anim-fade-up,
  .js-anim .anim-fade-in,
  .js-anim .anim-zoom-in,
  .js-anim .anim-slide-left,
  .js-anim .anim-slide-right,
  .js-anim .anim-text-chars,
  .js-anim .anim-text-chars .anim-char {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Hide on mobile */

.d-desktop {}

.d-mobile {}

@media (max-width: 991px) {
  .d-desktop {
    display: none;
  }
}

@media (min-width: 991px) {
  .d-mobile {
    display: none;
  }
}

/* Removed from the visual flow but NOT from the accessibility tree — a screen reader
   still announces it and a crawler still reads it. That's the whole point, and it is
   why this clips instead of using `display: none`: display:none is hidden from
   assistive tech too, and search engines discount it.

   Use it for a text EQUIVALENT of media that is genuinely on the page — the caption
   of a screenshot, the copy inside a framed embed. Not for keywords that have no
   visible counterpart; that's cloaking, and it's the one way to turn this from an
   accessibility win into a penalty. See themes/web/CLAUDE.md → Media embed contract. */
.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;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct box sizing in Firefox.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

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

/* Fluid media — the rule that makes a `width`/`height` attribute pair SAFE.
   Browsers turn those two attributes into an internal `aspect-ratio`, used only to
   reserve the right box before the file loads (which is what kills layout shift).
   `height: auto` is what keeps them a *ratio hint* instead of a fixed pixel height:
   without it, `height="1380"` really would render 1380px tall and squash the image.
   So dimensions in an embed and fluidity are not a trade-off — but this rule has to
   exist first. Element-level, so every scoped rule (.hub-tile img, .badge img,
   .logo-wrapper img, an inline style) still wins on specificity.

   `iframe` is deliberately NOT here: js/fit-frame.js owns iframe height and writes a
   measured pixel value. See themes/web/CLAUDE.md → Site-embed HTML. */
img,
video {
  max-width: 100%;
  height: auto;
}