@import url('./ress.css');
@import url('./fonts.css');
@import url('./tokens.css');
@import url('./typography.css');

/* CSS reset - normalize browser defaults */

/**
 * Design System Entry Point
 *
 * This file combines all design system CSS:
 * - Generated tokens (colors, spacing, etc.)
 * - Typography context overrides (console/website)
 * - Global element styles (reset, body, headings)
 */

/*
 * Generated design tokens (emitted by `libs/ts/design-system/src/index.ts`).
 *
 * tokens.css contains every custom property including the typography subset;
 * tokens.typography.css ships as a standalone file for consumers that only
 * want typography (e.g. validate-tokens scans it directly) but is not
 * re-imported here to avoid duplicate :root rules.
 */

/**
 * Global Styles
 *
 * Base styles for HTML elements using design system tokens.
 * These styles are applied globally when importing the design system.
 *
 * Typography uses semantic tokens that respond to data-theme-context:
 * - Console (default): Compact typography for applications
 * - Website: Larger typography for documentation/marketing
 */

html,
body {
  height: 100%;
  font-family: var(--hx-font-family-inter);
  background-color: var(--hx-color-background-bold);
  color: var(--hx-color-text-base);
}

html[data-theme-context='website'],
html[data-theme-context='website'] body {
  background-color: var(--hx-color-palette-website-slate-n950);

  /* Match Figma's text rendering: disable the macOS grayscale-smoothing dilation
     so glyphs render at outline weight instead of ~5% heavier. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Fluid interpolation factors for the website responsive system.
 *
 * Each factor ramps from 0 to 1 across one tier range and clamps at the edges.
 * Use them to linearly interpolate pairs of values at the call site:
 *   calc(low + (high - low) * var(--hx-fluid-t-*))
 *
 * Anchor points are tied to layout geometry transitions: 600 and 1024 are the
 * column-count breakpoints, 1264 is the container cap point.
 */
[data-theme-context='website'] {
  --hx-fluid-t-desktop: clamp(0, (100vw - 1024px) / (1264px - 1024px), 1);
  --hx-fluid-t-mobile: clamp(0, (100vw - 320px) / (600px - 320px), 1);
  --hx-fluid-t-tablet: clamp(0, (100vw - 600px) / (1024px - 600px), 1);
}

body {
  font-size: var(--hx-typography-body-size);
  line-height: var(--hx-typography-body-line-height);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--hx-font-family-inter);
}

h1 {
  font-size: var(--hx-typography-heading-h1-size);
}

h2 {
  font-size: var(--hx-typography-heading-h2-size);
}

h3 {
  font-size: var(--hx-typography-heading-h3-size);
}

h4 {
  font-size: var(--hx-typography-heading-h4-size);
}

h5 {
  font-size: var(--hx-typography-heading-h5-size);
}

h6 {
  font-size: var(--hx-typography-heading-h6-size);
}

hr {
  border: none;
  border-top: var(--hx-border-thin);
}

* {
  scrollbar-width: thin;
  scrollbar-height: thin;
  scrollbar-color: var(--hx-scrollbar);
}

[data-asset-raster].svelte-1x7vxml {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1x7vxml {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-ysh8bj {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-ysh8bj {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1a0u80b {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1a0u80b {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-e9eq8m {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-e9eq8m {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-uwhsva {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-uwhsva {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-59fvcs {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-59fvcs {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1acdrk0 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1acdrk0 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1fdeb39 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1fdeb39 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-10e8zy3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-10e8zy3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-c4ctbb {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-c4ctbb {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-d8mg5q {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-d8mg5q {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1721b97 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1721b97 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-12bup3p {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-12bup3p {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-12b7l47 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-12b7l47 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1wdogxq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1wdogxq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-cvkdd0 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-cvkdd0 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-15a9a0e {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-15a9a0e {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-kxaim9 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-kxaim9 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1k1yyj8 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1k1yyj8 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-16tfpx2 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-16tfpx2 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1vlm9xv {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1vlm9xv {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1dmtq63 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1dmtq63 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-24wrxw {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-24wrxw {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1hhs0rx {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1hhs0rx {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1ur5k5a {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1ur5k5a {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-100pqet {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-100pqet {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-aiw09 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-aiw09 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-hitroc {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-hitroc {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1itvkbj {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1itvkbj {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1lelkeq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1lelkeq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-157p4r4 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-157p4r4 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-zkbltm {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-zkbltm {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-fsusel {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-fsusel {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-14wbkw3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-14wbkw3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1o872t6 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1o872t6 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-snh3uq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-snh3uq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-16mplbx {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-16mplbx {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-z66gta {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-z66gta {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-18h1hww {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-18h1hww {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1ehkr19 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1ehkr19 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-sgbtpa {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-sgbtpa {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-o0cbpc {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-o0cbpc {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1nq7azj {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1nq7azj {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1i0awtq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1i0awtq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1e3i9hp {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1e3i9hp {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-zuq0ub {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-zuq0ub {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1qnclpq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1qnclpq {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-p8mor0 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-p8mor0 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-ai8pt3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-ai8pt3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-92o6fy {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-92o6fy {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-5s1gtb {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-5s1gtb {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-7yqg42 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-7yqg42 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1rx44lz {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1rx44lz {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-10e5ieu {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-10e5ieu {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-9doohc {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-9doohc {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-1n02i94 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-1n02i94 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

[data-asset-raster].svelte-16uqnra {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: var(--asset-width, var(--asset-size, 100%));
  }

  [data-asset-raster-image].svelte-16uqnra {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--asset-height, auto);
    max-width: 100%;
    width: 100%;

    /* Effects */
    object-fit: var(--asset-object-fit, contain);
    object-position: var(--asset-object-position, center);

    /* Transform */
    transform: var(--asset-image-transform, none);
  }

/*
   * Component variables:
   * --arrow-active-background: active (pressed) button fill color.
   * --arrow-background: default button fill color.
   * --arrow-border-color: button outline color.
   * --arrow-disabled-color: disabled icon color.
   * --arrow-hover-background: hover button fill color.
   * --arrow-hover-color: hover icon color.
   * --arrow-icon-color: default icon color.
   */
  [data-arrow].svelte-nw7xv9 {
    /* Custom properties */
    --arrow-active-background: var(--hx-color-website-background-accent-bold);
    --arrow-background: transparent;
    --arrow-border-color: var(--hx-color-website-border-accent-brand);
    --arrow-disabled-color: var(--hx-color-website-text-disabled);
    --arrow-hover-background: var(--hx-color-website-background-accent-deep);
    --arrow-hover-color: var(--hx-color-website-text-primary);
    --arrow-icon-color: var(--hx-color-website-text-accent-brand);

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    height: var(--hx-website-size-40);
    max-width: 100%;
    min-width: 0;
    width: var(--hx-website-size-40);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--arrow-border-color);
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding: var(--hx-website-size-8);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--arrow-background);

    /* Typography & color */
    text-decoration: none;
    color: var(--arrow-icon-color);

    /* Transition & animation */
    transition:
      background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      border-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-arrow].svelte-nw7xv9:is(:where(.svelte-nw7xv9):hover, :where(.svelte-nw7xv9):focus-visible) {
    /* Background */
    background: var(--arrow-hover-background);

    /* Typography & color */
    color: var(--arrow-hover-color);
  }

  [data-arrow].svelte-nw7xv9:active {
    /* Background */
    background: var(--arrow-active-background);

    /* Typography & color */
    color: var(--arrow-hover-color);
  }

  [data-arrow].svelte-nw7xv9:is([data-disabled]:where(.svelte-nw7xv9), :where(.svelte-nw7xv9):disabled) {
    /* Typography & color */
    color: var(--arrow-disabled-color);

    /* Effects */
    opacity: 1;

    /* Interaction */
    cursor: not-allowed;
  }

  [data-arrow].svelte-nw7xv9:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

/*
   * Component variables:
   * --cta-disabled-color: disabled label color (shared across variants).
   * --cta-disabled-cursor: disabled cursor (shared across variants).
   * --cta-disabled-opacity: disabled opacity (shared across variants).
   * --cta-focus-outline-offset: focus-visible outline offset (shared across variants).
   * --cta-primary-active-background: primary active (pressed) fill color.
   * --cta-primary-active-border-color: primary active (pressed) border color.
   * --cta-primary-background: primary CTA fill color.
   * --cta-primary-border-color: primary CTA border color.
   * --cta-primary-hover-background: primary hover fill color.
   * --cta-primary-hover-border-color: primary hover border color.
   * --cta-primary-text-color: primary CTA label color.
   * --cta-secondary-active-background: secondary active (pressed) fill color.
   * --cta-secondary-active-border-color: secondary active (pressed) border color.
   * --cta-secondary-background: secondary CTA fill color.
   * --cta-secondary-border-color: secondary CTA border color.
   * --cta-secondary-hover-background: secondary hover fill color.
   * --cta-secondary-hover-border-color: secondary hover border color.
   * --cta-secondary-text-color: secondary CTA label color.
   */
  [data-cta].svelte-dcn5xy {
    /* Custom properties */
    --cta-disabled-color: var(--hx-color-website-text-disabled);
    --cta-disabled-cursor: not-allowed;
    --cta-disabled-opacity: 1;
    --cta-focus-outline-offset: var(--hx-website-size-4);
    --cta-primary-active-background: var(--hx-color-website-background-accent-active);
    --cta-primary-active-border-color: var(--hx-color-website-border-accent-solid);
    --cta-primary-background: var(--hx-color-website-background-accent);
    --cta-primary-border-color: transparent;
    --cta-primary-hover-background: var(--hx-color-website-background-accent-tint);
    --cta-primary-hover-border-color: var(--hx-color-website-border-accent-faint);
    --cta-primary-text-color: var(--hx-color-website-text-on-accent);
    --cta-secondary-active-background: var(--hx-color-website-background-panel-raised);
    --cta-secondary-active-border-color: var(--hx-color-website-border-secondary);
    --cta-secondary-background: transparent;
    --cta-secondary-border-color: var(--hx-color-website-border-accent-solid);
    --cta-secondary-hover-background: var(--hx-color-website-background-elevated);
    --cta-secondary-hover-border-color: var(--hx-color-website-border-highlight);
    --cta-secondary-text-color: var(--hx-color-website-text-primary);

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    max-width: 100%;
    min-height: var(--hx-website-size-40);
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--cta-primary-border-color);
    border-radius: var(--hx-radius-2xs);

    /* Padding */
    padding-block: var(--hx-website-size-4);
    padding-inline: var(--hx-website-size-16);

    /* Background */
    background: var(--cta-primary-background);

    /* Typography & color */
    /* No `nowrap`: a label wider than the button (narrow cards, text zoom) wraps to a second line
       and the button grows from its 40px minimum instead of the text overflowing the box. */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-bold);
    line-height: normal;
    text-align: center;
    text-decoration: none;
    text-transform: lowercase;
    color: var(--cta-primary-text-color);
    text-box: trim-both cap alphabetic;

    /* Transition & animation */
    transition:
      background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      border-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
    user-select: none;
  }

  [data-cta][data-cta-variant='secondary'].svelte-dcn5xy {
    /* Border & outline */
    border-color: var(--cta-secondary-border-color);

    /* Background */
    background: var(--cta-secondary-background);

    /* Typography & color */
    color: var(--cta-secondary-text-color);
  }

  [data-cta][data-cta-width='full'].svelte-dcn5xy {
    /* Size */
    width: 100%;
  }

  [data-cta][data-cta-variant='primary'].svelte-dcn5xy:is(:where(.svelte-dcn5xy):hover, :where(.svelte-dcn5xy):focus-visible) {
    /* Border & outline */
    border-color: var(--cta-primary-hover-border-color);

    /* Background */
    background: var(--cta-primary-hover-background);
  }

  [data-cta][data-cta-variant='primary'].svelte-dcn5xy:active {
    /* Border & outline */
    border-color: var(--cta-primary-active-border-color);

    /* Background */
    background: var(--cta-primary-active-background);
  }

  [data-cta][data-cta-variant='secondary'].svelte-dcn5xy:is(:where(.svelte-dcn5xy):hover, :where(.svelte-dcn5xy):focus-visible) {
    /* Border & outline */
    border-color: var(--cta-secondary-hover-border-color);

    /* Background */
    background: var(--cta-secondary-hover-background);
  }

  [data-cta][data-cta-variant='secondary'].svelte-dcn5xy:active {
    /* Border & outline */
    border-color: var(--cta-secondary-active-border-color);

    /* Background */
    background: var(--cta-secondary-active-background);
  }

  [data-cta].svelte-dcn5xy:is([data-disabled]:where(.svelte-dcn5xy), :where(.svelte-dcn5xy):disabled) {
    /* Typography & color */
    color: var(--cta-disabled-color);

    /* Effects */
    opacity: var(--cta-disabled-opacity);

    /* Interaction */
    cursor: var(--cta-disabled-cursor);
  }

  [data-cta].svelte-dcn5xy:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--cta-focus-outline-offset);
  }

  [data-visually-hidden].svelte-dcn5xy {
    /* Position & layer */
    position: absolute;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    white-space: nowrap;

    /* Effects */
    clip-path: inset(50%);
  }

/*
   * Component variables:
   * --card-body-color: body text color.
   * --card-body-line-height: body copy line-height; defaults to the `lg` role.
   * --card-body-min-lines: reserved body line count for cross-card row-height sync (TitleRowLines
   *   util); 0 disables the reservation.
   * --card-gap: gap between the leading/copy/trailing root children; defaults to `size-16`.
   * --card-hover-background: root background on hover/focus-visible when the card is a link
   *   (`href` set); defaults to no change.
   * --card-justify: root `justify-content`, distributing the leading/copy/trailing children;
   *   defaults to `flex-start`.
   * --card-label-color: label (eyebrow/category) text color.
   * --card-padding-block: root block padding; defaults to none.
   * --card-padding-inline: root inline padding; defaults to none.
   * --card-title-font-size-mobile: title font-size at the <=599px breakpoint for the default
   *   (`xl`) titleSize preset; defaults to the `md` role. The `32` preset keeps its own fixed
   *   mobile size.
   * --card-title-hover-color: title text color on hover/focus-visible when the card is a link
   *   (`href` set); defaults to no change.
   * --card-title-min-lines: reserved title line count for cross-card row-height sync (TitleRowLines
   *   util); 0 disables the reservation.
   */
  [data-card].svelte-4mlkgu {
    /* Custom properties */
    --card-body-color: var(--hx-color-website-text-secondary);
    --card-body-line-height: var(--hx-line-height-lg);
    --card-body-min-lines: 0;
    --card-gap: var(--hx-website-size-16);
    --card-hover-background: transparent;
    --card-justify: flex-start;
    --card-label-color: var(--hx-color-website-text-accent-deep);
    --card-padding-block: 0;
    --card-padding-inline: 0;
    --card-title-font-size-mobile: var(--hx-font-size-md);
    --card-title-hover-color: currentColor;
    --card-title-min-lines: 0;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: var(--card-justify);
    align-items: flex-start;
    gap: var(--card-gap);

    /* Padding */
    padding-block: var(--card-padding-block);
    padding-inline: var(--card-padding-inline);
  }

  [data-card][href].svelte-4mlkgu {
    /* Typography & color */
    text-decoration: none;

    /* Transition & animation */
    transition: background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-card][href].svelte-4mlkgu:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(-1 * var(--hx-border-width-medium));
  }

  [data-card][href].svelte-4mlkgu:is(:where(.svelte-4mlkgu):hover, :where(.svelte-4mlkgu):focus-visible) {
    /* Background */
    background: var(--card-hover-background);
  }

  [data-card-copy].svelte-4mlkgu {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-card-label].svelte-4mlkgu,
  [data-card-title].svelte-4mlkgu,
  [data-card-body].svelte-4mlkgu {
    /* Size */
    min-width: 0;
    width: 100%;

    /* Margin */
    margin: 0;
  }

  [data-card-label].svelte-4mlkgu {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--card-label-color);
  }

  [data-card-label][data-card-label-variant='category'].svelte-4mlkgu {
    /* Typography & color */
    text-transform: lowercase;
  }

  [data-card-title].svelte-4mlkgu {
    /* Size */
    min-height: calc(var(--card-title-min-lines) * 1lh);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: currentColor;

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-card-title][data-card-title-size='32'].svelte-4mlkgu {
    /* Typography & color */
    font-size: var(--hx-website-font-size-32);
  }

  [data-card].svelte-4mlkgu:is(:where(.svelte-4mlkgu):hover, :where(.svelte-4mlkgu):focus-visible) [data-card-title]:where(.svelte-4mlkgu) {
    /* Typography & color */
    color: var(--card-title-hover-color);
  }

  [data-card-body].svelte-4mlkgu {
    /* Size */
    min-height: calc(var(--card-body-min-lines) * 1lh);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--card-body-line-height);
    color: var(--card-body-color);
  }

  @media (max-width: 599px) {
    [data-card-title].svelte-4mlkgu {
      /* Typography & color */
      font-size: var(--card-title-font-size-mobile);
    }

    [data-card-title][data-card-title-size='32'].svelte-4mlkgu {
      /* Typography & color */
      font-size: var(--hx-font-size-xl);
    }

    [data-card-body].svelte-4mlkgu {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
    }
  }

/*
   * Component variables:
   * --eyebrow-pill-accent-background: accent variant fill.
   * --eyebrow-pill-accent-text-color: accent variant label color.
   * --eyebrow-pill-background: background fill for the mono label pill.
   * --eyebrow-pill-bare-text-color: bare variant label color.
   * --eyebrow-pill-border-color: border color for the mono label pill.
   * --eyebrow-pill-risk-background: risk variant fill.
   * --eyebrow-pill-risk-text-color: risk variant label color.
   * --eyebrow-pill-solid-background: solid variant fill.
   * --eyebrow-pill-solid-text-color: solid variant label color.
   * --eyebrow-pill-text-color: text color for the mono label pill.
   */
  [data-eyebrow-pill].svelte-15dsh01 {
    /* Custom properties */
    --eyebrow-pill-accent-background: var(--hx-color-website-component-accent-wash-gradient);
    --eyebrow-pill-accent-text-color: var(--hx-color-website-text-accent-strong);
    --eyebrow-pill-background: var(--hx-color-website-background-panel-raised);
    --eyebrow-pill-bare-text-color: var(--hx-color-website-text-accent-bold);
    --eyebrow-pill-border-color: var(--hx-color-website-border-panel);
    --eyebrow-pill-risk-background: var(--hx-color-website-component-risk-gradient);
    --eyebrow-pill-risk-text-color: var(--hx-color-website-text-on-negative);
    --eyebrow-pill-solid-background: var(--hx-color-website-component-process-tag-gradient);
    --eyebrow-pill-solid-text-color: var(--hx-color-website-text-on-accent-strong);
    --eyebrow-pill-text-color: var(--hx-color-website-text-secondary);

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--eyebrow-pill-border-color);
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-24);

    /* Background */
    background: var(--eyebrow-pill-background);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-medium);
    line-height: var(--hx-line-height-md);
    text-transform: lowercase;
    white-space: nowrap;
    color: var(--eyebrow-pill-text-color);
  }

  [data-eyebrow-pill].svelte-15dsh01:is(
    [data-eyebrow-pill-variant='accent']:where(.svelte-15dsh01),
    [data-eyebrow-pill-variant='risk']:where(.svelte-15dsh01),
    [data-eyebrow-pill-variant='solid']:where(.svelte-15dsh01)
  ) {
    /* Size */
    max-width: 100%;

    /* Flex & grid container */
    justify-content: center;

    /* Border & outline */
    border: 0;

    /* Overflow & scroll */
    /* Text behavior */
    overflow-wrap: anywhere;

    /* Typography & color */
    font-weight: var(--hx-font-weight-regular);
  }

  [data-eyebrow-pill][data-eyebrow-pill-variant='accent'].svelte-15dsh01 {
    /* Background */
    background: var(--eyebrow-pill-accent-background);

    /* Typography & color */
    color: var(--eyebrow-pill-accent-text-color);
  }

  [data-eyebrow-pill][data-eyebrow-pill-variant='bare'].svelte-15dsh01 {
    /* Border & outline */
    border: 0;
    border-radius: 0;

    /* Padding */
    padding: 0;

    /* Background */
    background: none;

    /* Typography & color */
    color: var(--eyebrow-pill-bare-text-color);
  }

  [data-eyebrow-pill][data-eyebrow-pill-variant='risk'].svelte-15dsh01 {
    /* Background */
    background: var(--eyebrow-pill-risk-background);

    /* Typography & color */
    color: var(--eyebrow-pill-risk-text-color);
  }

  [data-eyebrow-pill][data-eyebrow-pill-variant='solid'].svelte-15dsh01 {
    /* Background */
    background: var(--eyebrow-pill-solid-background);

    /* Typography & color */
    text-align: center;
    color: var(--eyebrow-pill-solid-text-color);
  }

  @media (max-width: 599px) {
    [data-eyebrow-pill].svelte-15dsh01 {
      /* Padding */
      padding-inline: var(--hx-website-size-8);

      /* Typography & color */
      font-size: var(--hx-font-size-2xs);
      line-height: var(--hx-line-height-base);
    }
  }

[data-heading].svelte-vv7qh8 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    color: currentColor;
  }

  [data-heading][data-heading-size='display-h1'].svelte-vv7qh8 {
    /* Typography & color */
    font: var(--hx-font-cera-h1);
    line-height: normal;
    text-transform: uppercase;
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
  }

  [data-heading][data-heading-size='heading-h2'].svelte-vv7qh8 {
    /* Typography & color */
    font: var(--hx-font-cera-h2);
    line-height: normal;
    text-transform: uppercase;
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
  }

  [data-heading][data-heading-size='heading-h3'].svelte-vv7qh8 {
    /* Typography & color */
    font: var(--hx-font-cera-h3);
    line-height: normal;
    text-transform: uppercase;
    text-wrap: balance;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 1023px) {
    [data-heading][data-heading-size='display-h1'].svelte-vv7qh8 {
      /* Typography & color */
      font-size: var(--hx-website-font-size-64);
      line-height: var(--hx-line-height-6xl);
    }
  }

  @media (max-width: 599px) {
    [data-heading][data-heading-size='display-h1'].svelte-vv7qh8 {
      /* Typography & color */
      font-size: var(--hx-font-size-5xl);
      line-height: var(--hx-line-height-5xl);
    }

    [data-heading][data-heading-size='heading-h2'].svelte-vv7qh8 {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }
  }

/*
   * Component variables:
   * --process-timeline-active-dot-background: active step marker fill.
   * --process-timeline-active-dot-border-color: active step marker border.
   * --process-timeline-active-dot-color: active step marker number color.
   * --process-timeline-active-title-color: active step title color.
   * --process-timeline-connector-color: connector stroke color.
   * --process-timeline-current-dot-background: current step marker fill.
   * --process-timeline-current-dot-border-color: current step marker border.
   * --process-timeline-current-title-color: current step title color.
   * --process-timeline-description-color: description text color.
   * --process-timeline-dot-background: default step marker fill.
   * --process-timeline-dot-border-color: default step marker border.
   * --process-timeline-dot-color: default step marker number color.
   * --process-timeline-dot-size: step marker size.
   * --process-timeline-horizontal-gap: spacing between timeline columns.
   * --process-timeline-item-gap: spacing between marker and content.
   * --process-timeline-step-gap: spacing between timeline items.
   * --process-timeline-title-color: default step title color.
   */
  [data-process-timeline].svelte-1g16fox {
    /* Custom properties */
    --process-timeline-active-dot-background: var(--hx-color-website-background-accent);
    --process-timeline-active-dot-border-color: var(--hx-color-website-border-accent-deep);
    --process-timeline-active-dot-color: var(--hx-color-website-text-on-accent);
    --process-timeline-active-title-color: var(--hx-color-website-text-primary);
    --process-timeline-connector-color: var(--hx-color-website-border-panel);
    --process-timeline-current-dot-background: var(--hx-color-website-background-accent-brand);
    --process-timeline-current-dot-border-color: var(--hx-color-website-border-accent-deep);
    --process-timeline-current-title-color: var(--hx-color-website-text-accent-deep);
    --process-timeline-description-color: var(--hx-color-website-text-secondary);
    --process-timeline-dot-background: var(--hx-color-website-background-panel-raised);
    --process-timeline-dot-border-color: var(--hx-color-website-border-panel);
    --process-timeline-dot-color: var(--hx-color-website-text-disabled);
    --process-timeline-dot-size: var(--hx-website-size-32);
    --process-timeline-horizontal-gap: var(--hx-website-size-16);
    --process-timeline-item-gap: var(--hx-website-size-16);
    --process-timeline-step-gap: var(--hx-website-size-16);
    --process-timeline-title-color: var(--hx-color-website-text-disabled);

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--process-timeline-step-gap);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-process-timeline-step].svelte-1g16fox {
    /* Box behavior */
    box-sizing: border-box;
    display: grid;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--process-timeline-item-gap);
  }

  [data-process-timeline-marker].svelte-1g16fox {
    /* Box behavior */
    display: flex;

    /* Size */
    min-height: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--process-timeline-item-gap);
  }

  [data-process-timeline-dot].svelte-1g16fox {
    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    height: var(--process-timeline-dot-size);
    min-width: 0;
    width: var(--process-timeline-dot-size);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--process-timeline-dot-border-color);
    border-radius: var(--hx-radius-full);

    /* Background */
    background: var(--process-timeline-dot-background);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-medium);
    line-height: var(--hx-line-height-sm);
    color: var(--process-timeline-dot-color);
  }

  [data-process-timeline-connector].svelte-1g16fox {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: var(--hx-website-size-16);
    width: var(--hx-border-width-thin);

    /* Flex & grid item */
    flex: 1 1 auto;

    /* Background */
    background: var(--process-timeline-connector-color);
  }

  [data-process-timeline-content].svelte-1g16fox {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-process-timeline-step-title].svelte-1g16fox,
  [data-process-timeline-step-description].svelte-1g16fox {
    /* Size */
    min-width: 0;

    /* Margin */
    margin: 0;
  }

  [data-process-timeline-step-title].svelte-1g16fox {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-3xl);
    text-transform: uppercase;
    color: var(--process-timeline-title-color);
  }

  [data-process-timeline-step-description].svelte-1g16fox {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--process-timeline-description-color);
  }

  [data-process-timeline-step][data-process-timeline-step-active].svelte-1g16fox [data-process-timeline-dot]:where(.svelte-1g16fox) {
    /* Border & outline */
    border-color: var(--process-timeline-active-dot-border-color);

    /* Background */
    background: var(--process-timeline-active-dot-background);

    /* Typography & color */
    color: var(--process-timeline-active-dot-color);
  }

  [data-process-timeline-step][data-process-timeline-step-active].svelte-1g16fox
    [data-process-timeline-step-title]:where(.svelte-1g16fox) {
    /* Typography & color */
    color: var(--process-timeline-active-title-color);
  }

  [data-process-timeline-step][data-process-timeline-step-current].svelte-1g16fox [data-process-timeline-dot]:where(.svelte-1g16fox) {
    /* Border & outline */
    border-color: var(--process-timeline-current-dot-border-color);

    /* Background */
    background: var(--process-timeline-current-dot-background);

    /* Typography & color */
    color: var(--process-timeline-active-dot-color);
  }

  [data-process-timeline-step][data-process-timeline-step-current].svelte-1g16fox
    [data-process-timeline-step-title]:where(.svelte-1g16fox) {
    /* Typography & color */
    color: var(--process-timeline-current-title-color);
  }

  [data-process-timeline][data-process-timeline-orientation='horizontal'].svelte-1g16fox {
    /* Flex & grid container */
    flex-direction: row;
    gap: var(--process-timeline-horizontal-gap);
  }

  [data-process-timeline][data-process-timeline-orientation='horizontal'].svelte-1g16fox
    [data-process-timeline-step]:where(.svelte-1g16fox) {
    /* Flex & grid container */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: var(--process-timeline-item-gap);

    /* Flex & grid item */
    flex: 1 1 0;
  }

  [data-process-timeline][data-process-timeline-orientation='horizontal'].svelte-1g16fox
    [data-process-timeline-marker]:where(.svelte-1g16fox) {
    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: row;
  }

  [data-process-timeline][data-process-timeline-orientation='horizontal'].svelte-1g16fox
    [data-process-timeline-connector]:where(.svelte-1g16fox) {
    /* Size */
    height: var(--hx-border-width-thin);
    min-height: 0;
    width: auto;

    /* Flex & grid item */
    flex: 1 1 auto;
  }
  [data-process-timeline][data-process-timeline-orientation='horizontal'].svelte-1g16fox
    [data-process-timeline-content]:where(.svelte-1g16fox) {
    /* Padding */
    padding-inline-start: 0;
  }

/*
   * Input variables (set from props via the style attribute):
   * --product-window-media-aspect-ratio-mobile: media aspect ratio override at ≤599px (aspectRatioMobile prop).
   *
   * Component variables:
   * --product-window-accent-background: teal accent fill behind the media.
   * --product-window-accent-inset-block: accent vertical inset (scales with the window's own width).
   * --product-window-accent-inset-block-mobile: optional accent vertical inset override at ≤599px.
   * --product-window-accent-inset-inline: accent horizontal inset; the gap to the media inset is the visible sliver.
   * --product-window-accent-inset-inline-mobile: optional accent horizontal inset override at ≤599px.
   * --product-window-border-color: frame border color.
   * --product-window-frame-background: translucent frame fill.
   * --product-window-media-aspect-ratio: optional fixed media aspect ratio (set via the aspectRatio prop); defaults to natural.
   * --product-window-media-inset: media inset from the frame, i.e. the frame inline padding (scales with the window's own width).
   * --product-window-padding-block-end: frame bottom padding (scales with the window's own width).
   * --product-window-padding-block-start: frame top padding (scales with the window's own width).
   * --product-window-shadow-color: frame and media shadow color.
   * --product-window-t: 0→1 scale factor derived from the window's own width via a container query.
   *
   * The component fills its parent (`width: 100%`); the parent owns the overall dimensions. The root is
   * a size container (`container-type: inline-size`), so internal spacing scales with the window's OWN
   * allocated width — correct in the hero, a full-bleed band, or a narrow column, independent of the viewport.
   */
  [data-product-window].svelte-vhzjch {
    /* Custom properties */
    --product-window-accent-background: var(--hx-color-website-background-accent-brand);
    --product-window-accent-inset-block: calc(
      var(--hx-website-size-16) + (var(--hx-website-size-24) - var(--hx-website-size-16)) *
        var(--product-window-t)
    );
    --product-window-accent-inset-inline: calc(
      var(--hx-website-size-8) + (var(--hx-website-size-16) - var(--hx-website-size-8)) *
        var(--product-window-t)
    );
    --product-window-border-color: var(--hx-color-website-border-panel);
    --product-window-frame-background: var(--hx-color-website-overlay-glass);
    --product-window-media-inset: calc(
      var(--hx-website-size-16) + (var(--hx-website-size-32) - var(--hx-website-size-16)) *
        var(--product-window-t)
    );
    --product-window-padding-block-end: calc(
      var(--hx-website-size-8) + (var(--hx-website-size-16) - var(--hx-website-size-8)) *
        var(--product-window-t)
    );
    --product-window-padding-block-start: calc(
      var(--hx-website-size-4) + (var(--hx-website-size-8) - var(--hx-website-size-4)) *
        var(--product-window-t)
    );
    --product-window-shadow-color: color-mix(
      in srgb,
      var(--hx-color-palette-website-slate-n950) 72%,
      transparent
    );
    --product-window-t: clamp(0, (100cqi - 400px) / (800px - 400px), 1);

    /* Box behavior */
    box-sizing: border-box;
    container-type: inline-size;

    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-product-window-frame].svelte-vhzjch {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: 100%;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--product-window-border-color);
    border-radius: var(--hx-radius-lg);

    /* Padding */
    padding-block: var(--product-window-padding-block-start) var(--product-window-padding-block-end);
    padding-inline: var(--product-window-media-inset);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--product-window-frame-background);

    /* Effects */
    box-shadow: var(--hx-website-size-8) var(--hx-website-size-8) var(--hx-website-size-24)
      var(--product-window-shadow-color);
  }

  [data-product-window-crop].svelte-vhzjch [data-product-window-frame]:where(.svelte-vhzjch) {
    /* Border & outline */
    border-end-end-radius: 0;
    border-inline-end-width: 0;
    border-start-end-radius: 0;

    /* Padding */
    padding-inline-end: 0;
  }

  [data-product-window-accent].svelte-vhzjch {
    /* Position & layer */
    inset-block: var(--product-window-accent-inset-block);
    inset-inline: var(--product-window-accent-inset-inline);
    position: absolute;
    z-index: 0;

    /* Border & outline */
    border-radius: var(--hx-radius-md);

    /* Background */
    background: var(--product-window-accent-background);

    /* Effects */
    opacity: var(--hx-opacity-95);
  }

  [data-product-window-crop].svelte-vhzjch [data-product-window-accent]:where(.svelte-vhzjch) {
    /* Position & layer */
    inset-inline-end: 0;

    /* Border & outline */
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }

  /* Bare mode: the consumer's content (e.g. a slider) sits directly in the frame, above the accent. */
  [data-product-window-content].svelte-vhzjch {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    display: block;

    /* Size */
    width: 100%;
  }

  /* Bare mode: content fills to the frame border (so sliding media clips at the border, not the inset
     media area); the consumer insets its own media, so the accent keeps its normal inset sliver. */
  [data-product-window-bare].svelte-vhzjch [data-product-window-frame]:where(.svelte-vhzjch) {
    /* Padding */
    padding: 0;
  }

  [data-product-window-media].svelte-vhzjch {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    display: block;

    /* Size */
    aspect-ratio: var(--product-window-media-aspect-ratio, auto);
    width: 100%;

    /* Border & outline */
    border-radius: var(--hx-radius-sm);

    /* Overflow & scroll */
    overflow: hidden;

    /* Effects */
    box-shadow: var(--hx-website-size-4) var(--hx-website-size-4) var(--hx-website-size-16)
      var(--product-window-shadow-color);
  }

  [data-product-window-crop].svelte-vhzjch [data-product-window-media]:where(.svelte-vhzjch) {
    /* Border & outline */
    border-end-end-radius: 0;
    border-start-end-radius: 0;
  }

  @media (max-width: 599px) {
    [data-product-window-accent].svelte-vhzjch {
      /* Position & layer */
      inset-block: var(
        --product-window-accent-inset-block-mobile,
        var(--product-window-accent-inset-block)
      );
      inset-inline: var(
        --product-window-accent-inset-inline-mobile,
        var(--product-window-accent-inset-inline)
      );
    }

    [data-product-window-media].svelte-vhzjch {
      /* Size */
      aspect-ratio: var(
        --product-window-media-aspect-ratio-mobile,
        var(--product-window-media-aspect-ratio, auto)
      );
    }
  }

[data-auto-advance-toggle].svelte-1rl9rra {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: var(--hx-website-size-24);
    width: var(--hx-website-size-24);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: 0;
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    color: var(--hx-color-website-text-subtle);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-auto-advance-toggle].svelte-1rl9rra:is(:where(.svelte-1rl9rra):hover, :where(.svelte-1rl9rra):focus-visible) {
    /* Typography & color */
    color: var(--hx-color-website-text-secondary);
  }

  [data-auto-advance-toggle].svelte-1rl9rra:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-auto-advance-toggle-icon].svelte-1rl9rra {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    width: var(--hx-website-size-16);

    /* Overflow & scroll */
    overflow: visible;
  }

/*
   * Component variables:
   * --pill-tabs-border-color: selector border color.
   * --pill-tabs-item-color: inactive text color.
   * --pill-tabs-item-disabled-color: disabled text color.
   * --pill-tabs-item-padding-inline: horizontal item padding.
   * --pill-tabs-item-selected-background: selected fill color.
   * --pill-tabs-item-selected-color: selected text color.
   * --pill-tabs-item-unselected-background: inactive fill color.
   * --pill-tabs-surface: selector surface color.
   */
  [data-pill-tabs].svelte-b9al31 {
    /* Custom properties */
    --pill-tabs-border-color: var(--hx-color-website-border-panel);
    --pill-tabs-item-color: var(--hx-color-website-text-primary);
    --pill-tabs-item-disabled-color: var(--hx-color-website-text-disabled);
    --pill-tabs-item-padding-inline: var(--hx-website-size-16);
    --pill-tabs-item-selected-background: var(--hx-color-website-background-accent);
    --pill-tabs-item-selected-color: var(--hx-color-website-text-on-accent);
    --pill-tabs-item-unselected-background: transparent;
    --pill-tabs-surface: var(--hx-color-website-background-panel-raised);

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    max-width: 100%;
    min-width: 0;
  }

  [data-pill-tabs-list].svelte-b9al31 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: auto;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--pill-tabs-border-color);
    border-radius: var(--hx-website-size-32);

    /* Padding */
    padding: var(--hx-website-size-2);

    /* Background */
    background: var(--pill-tabs-surface);

    /* Effects */
    box-shadow: none;
  }

  [data-pill-tabs-item].svelte-b9al31 {
    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    min-height: var(--hx-website-size-32);
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Border & outline */
    border: 0;
    border-radius: var(--hx-website-size-32);

    /* Padding */
    padding-inline: var(--pill-tabs-item-padding-inline);

    /* Background */
    background: var(--pill-tabs-item-unselected-background);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-medium);
    color: var(--pill-tabs-item-color);

    /* Interaction */
    cursor: pointer;
  }

  [data-pill-tabs-item][data-state='on'].svelte-b9al31 {
    /* Background */
    background: var(--pill-tabs-item-selected-background);

    /* Typography & color */
    color: var(--pill-tabs-item-selected-color);
  }

  [data-pill-tabs-item][data-disabled].svelte-b9al31 {
    /* Typography & color */
    color: var(--pill-tabs-item-disabled-color);

    /* Effects */
    opacity: 1;

    /* Interaction */
    cursor: not-allowed;
  }

  [data-pill-tabs-item][data-disabled][data-state='on'].svelte-b9al31 {
    /* Background */
    background: color-mix(
      in srgb,
      var(--pill-tabs-item-selected-background) 55%,
      var(--pill-tabs-surface) 45%
    );

    /* Typography & color */
    color: var(--pill-tabs-item-selected-color);
  }

  [data-pill-tabs-item][data-state='off'].svelte-b9al31:not([data-disabled]):hover {
    /* Background */
    background: color-mix(
      in srgb,
      var(--pill-tabs-item-selected-background) 20%,
      var(--pill-tabs-surface) 80%
    );

    /* Typography & color */
    color: var(--hx-color-website-text-accent-brand);
  }

  [data-pill-tabs-item].svelte-b9al31:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

/* Consumer overrides (all optional, inherited): --scroll-slider-gutter insets the first/last slide
     and the rail to the content column; --scroll-slider-gutter-start is an INITIAL-PAINT-ONLY hint
     (falls back to --scroll-slider-gutter, i.e. no hint) that bleeds the first slide past the content
     column at first paint without moving the row's own structural padding — true scrollLeft 0 (and
     native mobile snap) always land the first slide back at the full gutter, so scrolling/dragging
     back to 0 is never blocked; --scroll-slider-gap sets the inter-slide gap (default 24px, set 0px
     for flush full-bleed slides); --scroll-slider-fade sets the soft edge-fade width (default
     max(gutter, 48px), set 0px for a hard clip at the viewport edge); --scroll-slider-rail-gap sets
     the gap between the viewport and the rail (default 40px); --scroll-slider-rail-idle-opacity dims
     the rail until the slider is hovered, focused, or dragged (default 1, i.e. always fully visible).
     A row child marked data-scroll-slider-peek (e.g. a decorative, aria-hidden clone of another slide)
     is skipped like the trailing data-scroll-slider-end spacer: excluded from boundary measurement,
     snap targets, and keyboard nav, so only its tail peeks through the edge fade.
     Runtime vars: --scroll-slider-thumb-size / --scroll-slider-thumb-offset (0..1) size and position
     the progress thumb; --scroll-slider-boundary-start / --scroll-slider-boundary-end (px) carry the
     distance from each viewport edge to the nearest slide boundary. */
  [data-scroll-slider].svelte-vyz5wz {
    /* Custom properties */
    /* An edge fade may only cover a card that the edge is actually cutting: each fade tracks the
       distance to the nearest slide boundary (0 whenever a card rests aligned at that edge — the
       start, the end, or any snapped middle card), floored at the gutter (so it always covers the
       margin and the previous card's tail peeking through it) and capped at the classic width. */
    --scroll-slider-fade-end: min(
      max(var(--scroll-slider-gutter, 0px), var(--scroll-slider-boundary-end, 0px)),
      var(--scroll-slider-fade-size)
    );
    --scroll-slider-fade-size: var(
      --scroll-slider-fade,
      max(var(--scroll-slider-gutter, 0px), var(--hx-website-size-48))
    );
    --scroll-slider-fade-start: min(
      max(var(--scroll-slider-gutter, 0px), var(--scroll-slider-boundary-start, 0px)),
      var(--scroll-slider-fade-size)
    );

    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--scroll-slider-rail-gap, var(--hx-website-size-40));
  }

  [data-scroll-slider-viewport].svelte-vyz5wz {
    /* Box behavior */
    box-sizing: border-box;
    /* Slotted slides size themselves against this container (e.g. the home hero's
       flex-basis: 100cqi slides) — the consumer of the containment lives in consumer markup. */
    container-type: inline-size;

    /* Size */
    width: 100%;

    /* Overflow & scroll */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;

    /* Effects */
    mask-image: linear-gradient(
      to right,
      transparent,
      var(--hx-color-palette-website-slate-white) var(--scroll-slider-fade-start),
      var(--hx-color-palette-website-slate-white) calc(100% - var(--scroll-slider-fade-end)),
      transparent
    );

    /* Interaction */
    cursor: grab;
    touch-action: pan-x pan-y pinch-zoom;
  }

  [data-scroll-slider-viewport].svelte-vyz5wz::-webkit-scrollbar {
    /* Box behavior */
    display: none;
  }

  [data-scroll-slider-viewport][data-scroll-slider-dragging].svelte-vyz5wz {
    /* Interaction */
    cursor: grabbing;
    user-select: none;
  }

  [data-scroll-slider-row].svelte-vyz5wz {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    gap: var(--scroll-slider-gap, var(--hx-website-size-24));

    /* Padding */
    padding-inline-start: var(--scroll-slider-gutter, 0px);

    /* Overflow & scroll */
    /* Not a real scroll container (the viewport is) — scroll-padding-inline-start is never applied
       natively here. It's a resolvable (calc()-safe, unlike a raw custom property) carrier read once
       via getComputedStyle to compute the initial bleed offset; see --scroll-slider-gutter-start above. */
    scroll-padding-inline-start: var(
      --scroll-slider-gutter-start,
      var(--scroll-slider-gutter, 0px)
    );
  }

  [data-scroll-slider][data-scroll-slider-initial-visual-hint].svelte-vyz5wz [data-scroll-slider-row]:where(.svelte-vyz5wz) {
    /* Transform */
    transform: translateX(calc(-1 * var(--scroll-slider-initial-visual-offset, 0px)));
  }

  /* Trailing flex item supplies the end inset (a flex item's width is counted in scrollWidth, unlike a
     scroll container's padding-inline-end or a last item's margin-inline-end, which browsers drop); the
     negative start margin cancels the row gap (whatever a consumer has set it to) so the inset equals
     exactly the gutter. */
  [data-scroll-slider-end].svelte-vyz5wz {
    /* Flex & grid item */
    flex: 0 0 var(--scroll-slider-gutter, 0px);

    /* Margin */
    margin-inline-start: calc(-1 * var(--scroll-slider-gap, var(--hx-website-size-24)));
  }

  /* Houses the progress rail and, when auto-advance is enabled, the persistent pause/play toggle
     (WCAG 2.2.2) beside it; the shared gutter margin lives here (rather than on the rail alone) so
     both stay inset to the content column when the toggle renders without a rail (a slider short
     enough that it never overflows). */
  [data-scroll-slider-footer].svelte-vyz5wz {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: center;
    gap: var(--hx-website-size-16);

    /* Margin */
    margin-inline: var(--scroll-slider-gutter, 0px);
  }

  [data-scroll-slider-rail].svelte-vyz5wz {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-16);

    /* Flex & grid item */
    /* Fills the footer alongside the pause/play toggle (moved off this rule so the toggle's own
       fixed footprint sits beside it, both inset by the shared gutter margin below). */
    flex: 1 1 auto;

    /* Effects */
    /* Idle dim, not a hard hide: the rail is a real keyboard-focusable scrollbar (role="scrollbar",
       tabindex="0"), so it must stay perceivable at rest for discoverability/accessibility — only
       fades up to full strength on hover, focus-within, or an active drag (below). */
    opacity: var(--scroll-slider-rail-idle-opacity, 1);

    /* Transition & animation */
    transition: opacity var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
    touch-action: none;
    user-select: none;
  }

  /* Invisible hit-area extension: the rail's own visual height (16px) is unchanged and stays the
     drag handle's footprint; this pseudo-element grows the pointer-interactive region to the WCAG
     2.5.8 24px cross-axis floor without affecting layout (absolutely positioned, out of flow).
     Pointer/click events landing on it are dispatched with the rail itself as the target, per
     standard generated-content hit-testing. */
  [data-scroll-slider-rail].svelte-vyz5wz::after {
    /* Position & layer */
    inset-block: calc(-1 * var(--hx-website-size-4));
    inset-inline: 0;
    position: absolute;

    /* Generated content */
    content: '';
  }

  [data-scroll-slider-rail].svelte-vyz5wz:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-scroll-slider].svelte-vyz5wz:is(:where(.svelte-vyz5wz):hover, :where(.svelte-vyz5wz):focus-within) [data-scroll-slider-rail]:where(.svelte-vyz5wz),
  [data-scroll-slider-rail][data-scroll-slider-dragging].svelte-vyz5wz {
    /* Effects */
    opacity: 1;
  }

  [data-scroll-slider-track].svelte-vyz5wz {
    /* Position & layer */
    inset-block: 0;
    inset-inline: 0;
    position: absolute;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-4);

    /* Margin */
    margin-block: auto;

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Background */
    background: var(--hx-color-website-overlay-accent-wash);

    /* Interaction */
    pointer-events: none;
  }

  [data-scroll-slider-thumb].svelte-vyz5wz {
    /* Position & layer */
    inset-block: 0;
    inset-inline-start: calc(
      var(--scroll-slider-thumb-offset, 0) * (100% - var(--scroll-slider-thumb-size, 1) * 100%)
    );
    position: absolute;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-4);
    width: calc(var(--scroll-slider-thumb-size, 1) * 100%);

    /* Margin */
    margin-block: auto;

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Background */
    background: var(--hx-color-website-background-accent);

    /* Transition & animation */
    transition: background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    pointer-events: none;
  }

  [data-scroll-slider-rail].svelte-vyz5wz:hover [data-scroll-slider-thumb]:where(.svelte-vyz5wz) {
    /* Background */
    background: var(--hx-color-website-background-accent-tint);
  }

  [data-scroll-slider-rail][data-scroll-slider-dragging].svelte-vyz5wz [data-scroll-slider-thumb]:where(.svelte-vyz5wz) {
    /* Background */
    background: var(--hx-color-website-background-accent-faint);
  }

  @media (max-width: 599px) {
    /* Touch must always land on a card — proximity's "leave it where the user stopped" reads as
       broken on a phone. Native snap (rather than only the JS debounce) also settles instantly on
       release instead of waiting out SNAP_DELAY, and keeps working even mid-fling. scroll-padding
       mirrors the row's own gutter so a card's snapped rest position matches the JS-computed one
       (aligned to the content edge, not flush with the bare viewport edge). */
    [data-scroll-slider-viewport].svelte-vyz5wz {
      /* Overflow & scroll */
      scroll-padding-inline-start: var(--scroll-slider-gutter, 0px);
      scroll-snap-type: x mandatory;
    }

    /* NOTE: the slides are slotted consumer markup out of reach of this component's scoped CSS
       (and :global is banned by the no-global invariant), so each consumer declares
       scroll-snap-align: start on its own snapping cards in its own styles. */
  }

[data-pin-group].svelte-1phgh9 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    width: 100%;
  }

  [data-pin-probe].svelte-1phgh9 {
    /* Position & layer */
    position: absolute;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: var(--pin-top);
    width: 0;

    /* Interaction */
    pointer-events: none;
  }

  [data-pin-stage].svelte-1phgh9 {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    width: 100%;
  }

  [data-pin-stage][data-pin-engaged='true'].svelte-1phgh9 {
    /* Position & layer */
    position: sticky;
    top: var(--pin-stage-top);
  }

  [data-pin-runway].svelte-1phgh9 {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: var(--pin-runway);
    width: 100%;

    /* Background */
    background: var(--hx-color-website-background-page);
  }

/*
   * Component variables:
   * --section-grid-border-color: internal border color between cells.
   * --section-grid-border-width: internal border width.
   * --section-grid-inline-margin: side margin for stretch breakpoints.
   * --section-grid-inner-inline-border-color: inline border color on the constrained grid.
   * --section-grid-inner-inline-border-width: inline border width on the constrained grid.
   * --section-grid-max-width: maximum centered grid width.
   */
  [data-section-grid].svelte-1wkgwan {
    /* Custom properties */
    --section-grid-active-border-width: var(
      --section-grid-border-width,
      var(--section-grid-default-border-width)
    );
    --section-grid-border-block-end-active: min(
      var(
        --section-grid-border-block-end-desktop,
        var(--section-grid-border-block-end-default, 0px)
      ),
      var(
        --section-grid-frame-suppress-block-end-desktop,
        var(
          --section-grid-frame-suppress-block-end-default,
          var(--section-grid-active-border-width)
        )
      )
    );
    --section-grid-border-block-start-active: min(
      var(
        --section-grid-border-block-start-desktop,
        var(--section-grid-border-block-start-default, 0px)
      ),
      var(
        --section-grid-frame-suppress-block-start-desktop,
        var(
          --section-grid-frame-suppress-block-start-default,
          var(--section-grid-active-border-width)
        )
      )
    );
    --section-grid-border-inline-end-active: var(
      --section-grid-border-inline-end-desktop,
      var(--section-grid-border-inline-end-default, 0)
    );
    --section-grid-border-inline-start-active: var(
      --section-grid-border-inline-start-desktop,
      var(--section-grid-border-inline-start-default, 0)
    );
    --section-grid-default-border-color: var(--hx-color-website-border-section);
    --section-grid-default-border-width: var(--hx-border-width-thin);
    --section-grid-default-inline-margin: var(--hx-website-layout-margin-stretch);
    --section-grid-default-max-width: var(--hx-website-layout-container-width);
    --section-grid-frame-block-end-style-active: var(
      --section-grid-frame-block-end-style-desktop,
      var(--section-grid-frame-block-end-style-default, solid)
    );
    --section-grid-frame-block-start-style-active: var(
      --section-grid-frame-block-start-style-desktop,
      var(--section-grid-frame-block-start-style-default, solid)
    );
    --section-grid-frame-inline-end-style-active: var(
      --section-grid-frame-inline-end-style-desktop,
      var(--section-grid-frame-inline-end-style-default, solid)
    );
    --section-grid-frame-inline-start-style-active: var(
      --section-grid-frame-inline-start-style-desktop,
      var(--section-grid-frame-inline-start-style-default, solid)
    );
    --section-grid-inner-border-block-end-active: min(
      var(
        --section-grid-inner-border-block-end-desktop,
        var(--section-grid-inner-border-block-end-default, 0px)
      ),
      var(
        --section-grid-inner-frame-suppress-block-end-desktop,
        var(
          --section-grid-inner-frame-suppress-block-end-default,
          var(--section-grid-active-border-width)
        )
      )
    );
    --section-grid-inner-border-block-start-active: min(
      var(
        --section-grid-inner-border-block-start-desktop,
        var(--section-grid-inner-border-block-start-default, 0px)
      ),
      var(
        --section-grid-inner-frame-suppress-block-start-desktop,
        var(
          --section-grid-inner-frame-suppress-block-start-default,
          var(--section-grid-active-border-width)
        )
      )
    );

    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    width: 100%;

    /* Border & outline */
    border-block-end: var(--section-grid-border-block-end-active)
      var(--section-grid-frame-block-end-style-active)
      var(--section-grid-border-color, var(--section-grid-default-border-color));
    border-block-start: var(--section-grid-border-block-start-active)
      var(--section-grid-frame-block-start-style-active)
      var(--section-grid-border-color, var(--section-grid-default-border-color));
  }

  [data-section-grid][data-section-grid-has-background='true'].svelte-1wkgwan {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    isolation: isolate;
  }

  [data-section-grid-background].svelte-1wkgwan {
    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: -1;

    /* Box behavior */
    box-sizing: border-box;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  [data-section-grid-inner].svelte-1wkgwan {
    /* Position & layer */
    position: relative;
    z-index: 0;

    /* Box behavior */
    box-sizing: border-box;
    display: grid;
    isolation: isolate;

    /* Size */
    max-width: var(--section-grid-max-width, var(--section-grid-default-max-width));
    min-width: 0;
    width: calc(
      100% - var(--section-grid-inline-margin, var(--section-grid-default-inline-margin)) * 2
    );

    /* Flex & grid container */
    grid-template-areas: var(
      --section-grid-template-areas-desktop,
      var(--section-grid-template-areas-default)
    );
    grid-template-columns: var(
      --section-grid-template-columns-desktop,
      var(--section-grid-template-columns-default)
    );
    grid-template-rows: var(
      --section-grid-template-rows-desktop,
      var(--section-grid-template-rows-default)
    );
    gap: 0;

    /* Margin */
    margin-inline: auto;

    /* Border & outline */
    border-block-color: var(--section-grid-border-color, var(--section-grid-default-border-color));
    border-block-end-style: var(--section-grid-frame-block-end-style-active);
    border-block-end-width: var(--section-grid-inner-border-block-end-active);
    border-block-start-style: var(--section-grid-frame-block-start-style-active);
    border-block-start-width: var(--section-grid-inner-border-block-start-active);
    border-inline-color: var(
      --section-grid-inner-inline-border-color,
      var(--section-grid-border-color, var(--section-grid-default-border-color))
    );
    border-inline-end-style: var(--section-grid-frame-inline-end-style-active);
    border-inline-end-width: var(
      --section-grid-inner-inline-border-width,
      var(--section-grid-border-inline-end-active)
    );
    border-inline-start-style: var(--section-grid-frame-inline-start-style-active);
    border-inline-start-width: var(
      --section-grid-inner-inline-border-width,
      var(--section-grid-border-inline-start-active)
    );

    /* Padding */
    padding-block-end: var(
      --section-grid-inner-padding-block-end,
      var(--section-grid-inner-padding, 0)
    );
    padding-block-start: var(
      --section-grid-inner-padding-block-start,
      var(--section-grid-inner-padding, 0)
    );
    padding-inline-end: var(
      --section-grid-inner-padding-inline-end,
      var(--section-grid-inner-padding, 0)
    );
    padding-inline-start: var(
      --section-grid-inner-padding-inline-start,
      var(--section-grid-inner-padding, 0)
    );
  }

  @media (max-width: 1023px) {
    [data-section-grid].svelte-1wkgwan {
      /* Border & outline */
      border-block-end-style: var(
        --section-grid-frame-block-end-style-tablet,
        var(
          --section-grid-frame-block-end-style-desktop,
          var(--section-grid-frame-block-end-style-default, solid)
        )
      );
      border-block-end-width: min(
        var(
          --section-grid-border-block-end-tablet,
          var(
            --section-grid-border-block-end-desktop,
            var(--section-grid-border-block-end-default, 0px)
          )
        ),
        var(
          --section-grid-frame-suppress-block-end-tablet,
          var(
            --section-grid-frame-suppress-block-end-desktop,
            var(
              --section-grid-frame-suppress-block-end-default,
              var(--section-grid-active-border-width)
            )
          )
        )
      );
      border-block-start-style: var(
        --section-grid-frame-block-start-style-tablet,
        var(
          --section-grid-frame-block-start-style-desktop,
          var(--section-grid-frame-block-start-style-default, solid)
        )
      );
      border-block-start-width: min(
        var(
          --section-grid-border-block-start-tablet,
          var(
            --section-grid-border-block-start-desktop,
            var(--section-grid-border-block-start-default, 0px)
          )
        ),
        var(
          --section-grid-frame-suppress-block-start-tablet,
          var(
            --section-grid-frame-suppress-block-start-desktop,
            var(
              --section-grid-frame-suppress-block-start-default,
              var(--section-grid-active-border-width)
            )
          )
        )
      );
    }

    [data-section-grid-inner].svelte-1wkgwan {
      /* Flex & grid container */
      grid-template-areas: var(
        --section-grid-template-areas-tablet,
        var(--section-grid-template-areas-desktop, var(--section-grid-template-areas-default))
      );
      grid-template-columns: var(
        --section-grid-template-columns-tablet,
        var(--section-grid-template-columns-desktop, var(--section-grid-template-columns-default))
      );
      grid-template-rows: var(
        --section-grid-template-rows-tablet,
        var(--section-grid-template-rows-desktop, var(--section-grid-template-rows-default))
      );

      /* Border & outline */
      border-block-end-style: var(
        --section-grid-frame-block-end-style-tablet,
        var(
          --section-grid-frame-block-end-style-desktop,
          var(--section-grid-frame-block-end-style-default, solid)
        )
      );
      border-block-end-width: min(
        var(
          --section-grid-inner-border-block-end-tablet,
          var(
            --section-grid-inner-border-block-end-desktop,
            var(--section-grid-inner-border-block-end-default, 0px)
          )
        ),
        var(
          --section-grid-inner-frame-suppress-block-end-tablet,
          var(
            --section-grid-inner-frame-suppress-block-end-desktop,
            var(
              --section-grid-inner-frame-suppress-block-end-default,
              var(--section-grid-active-border-width)
            )
          )
        )
      );
      border-block-start-style: var(
        --section-grid-frame-block-start-style-tablet,
        var(
          --section-grid-frame-block-start-style-desktop,
          var(--section-grid-frame-block-start-style-default, solid)
        )
      );
      border-block-start-width: min(
        var(
          --section-grid-inner-border-block-start-tablet,
          var(
            --section-grid-inner-border-block-start-desktop,
            var(--section-grid-inner-border-block-start-default, 0px)
          )
        ),
        var(
          --section-grid-inner-frame-suppress-block-start-tablet,
          var(
            --section-grid-inner-frame-suppress-block-start-desktop,
            var(
              --section-grid-inner-frame-suppress-block-start-default,
              var(--section-grid-active-border-width)
            )
          )
        )
      );
      border-inline-end-style: var(
        --section-grid-frame-inline-end-style-tablet,
        var(
          --section-grid-frame-inline-end-style-desktop,
          var(--section-grid-frame-inline-end-style-default, solid)
        )
      );
      border-inline-end-width: var(
        --section-grid-inner-inline-border-width,
        var(
          --section-grid-border-inline-end-tablet,
          var(
            --section-grid-border-inline-end-desktop,
            var(--section-grid-border-inline-end-default, 0)
          )
        )
      );
      border-inline-start-style: var(
        --section-grid-frame-inline-start-style-tablet,
        var(
          --section-grid-frame-inline-start-style-desktop,
          var(--section-grid-frame-inline-start-style-default, solid)
        )
      );
      border-inline-start-width: var(
        --section-grid-inner-inline-border-width,
        var(
          --section-grid-border-inline-start-tablet,
          var(
            --section-grid-border-inline-start-desktop,
            var(--section-grid-border-inline-start-default, 0)
          )
        )
      );

      /* Padding */
      padding-block-start: var(
        --section-grid-inner-padding-block-start,
        var(--section-grid-inner-padding, 0)
      );
      padding-inline-start: var(
        --section-grid-inner-padding-inline-start,
        var(--section-grid-inner-padding, 0)
      );
    }
  }

  @media (max-width: 599px) {
    [data-section-grid].svelte-1wkgwan {
      /* Border & outline */
      border-block-end-style: var(
        --section-grid-frame-block-end-style-mobile,
        var(
          --section-grid-frame-block-end-style-tablet,
          var(
            --section-grid-frame-block-end-style-desktop,
            var(--section-grid-frame-block-end-style-default, solid)
          )
        )
      );
      border-block-end-width: min(
        var(
          --section-grid-border-block-end-mobile,
          var(
            --section-grid-border-block-end-tablet,
            var(
              --section-grid-border-block-end-desktop,
              var(--section-grid-border-block-end-default, 0px)
            )
          )
        ),
        var(
          --section-grid-frame-suppress-block-end-mobile,
          var(
            --section-grid-frame-suppress-block-end-tablet,
            var(
              --section-grid-frame-suppress-block-end-desktop,
              var(
                --section-grid-frame-suppress-block-end-default,
                var(--section-grid-active-border-width)
              )
            )
          )
        )
      );
      border-block-start-style: var(
        --section-grid-frame-block-start-style-mobile,
        var(
          --section-grid-frame-block-start-style-tablet,
          var(
            --section-grid-frame-block-start-style-desktop,
            var(--section-grid-frame-block-start-style-default, solid)
          )
        )
      );
      border-block-start-width: min(
        var(
          --section-grid-border-block-start-mobile,
          var(
            --section-grid-border-block-start-tablet,
            var(
              --section-grid-border-block-start-desktop,
              var(--section-grid-border-block-start-default, 0px)
            )
          )
        ),
        var(
          --section-grid-frame-suppress-block-start-mobile,
          var(
            --section-grid-frame-suppress-block-start-tablet,
            var(
              --section-grid-frame-suppress-block-start-desktop,
              var(
                --section-grid-frame-suppress-block-start-default,
                var(--section-grid-active-border-width)
              )
            )
          )
        )
      );
    }

    [data-section-grid-inner].svelte-1wkgwan {
      /* Flex & grid container */
      grid-template-areas: var(
        --section-grid-template-areas-mobile,
        var(
          --section-grid-template-areas-tablet,
          var(--section-grid-template-areas-desktop, var(--section-grid-template-areas-default))
        )
      );
      grid-template-columns: var(
        --section-grid-template-columns-mobile,
        var(
          --section-grid-template-columns-tablet,
          var(--section-grid-template-columns-desktop, var(--section-grid-template-columns-default))
        )
      );
      grid-template-rows: var(
        --section-grid-template-rows-mobile,
        var(
          --section-grid-template-rows-tablet,
          var(--section-grid-template-rows-desktop, var(--section-grid-template-rows-default))
        )
      );

      /* Border & outline */
      border-block-end-style: var(
        --section-grid-frame-block-end-style-mobile,
        var(
          --section-grid-frame-block-end-style-tablet,
          var(
            --section-grid-frame-block-end-style-desktop,
            var(--section-grid-frame-block-end-style-default, solid)
          )
        )
      );
      border-block-end-width: min(
        var(
          --section-grid-inner-border-block-end-mobile,
          var(
            --section-grid-inner-border-block-end-tablet,
            var(
              --section-grid-inner-border-block-end-desktop,
              var(--section-grid-inner-border-block-end-default, 0px)
            )
          )
        ),
        var(
          --section-grid-inner-frame-suppress-block-end-mobile,
          var(
            --section-grid-inner-frame-suppress-block-end-tablet,
            var(
              --section-grid-inner-frame-suppress-block-end-desktop,
              var(
                --section-grid-inner-frame-suppress-block-end-default,
                var(--section-grid-active-border-width)
              )
            )
          )
        )
      );
      border-block-start-style: var(
        --section-grid-frame-block-start-style-mobile,
        var(
          --section-grid-frame-block-start-style-tablet,
          var(
            --section-grid-frame-block-start-style-desktop,
            var(--section-grid-frame-block-start-style-default, solid)
          )
        )
      );
      border-block-start-width: min(
        var(
          --section-grid-inner-border-block-start-mobile,
          var(
            --section-grid-inner-border-block-start-tablet,
            var(
              --section-grid-inner-border-block-start-desktop,
              var(--section-grid-inner-border-block-start-default, 0px)
            )
          )
        ),
        var(
          --section-grid-inner-frame-suppress-block-start-mobile,
          var(
            --section-grid-inner-frame-suppress-block-start-tablet,
            var(
              --section-grid-inner-frame-suppress-block-start-desktop,
              var(
                --section-grid-inner-frame-suppress-block-start-default,
                var(--section-grid-active-border-width)
              )
            )
          )
        )
      );
      border-inline-end-style: var(
        --section-grid-frame-inline-end-style-mobile,
        var(
          --section-grid-frame-inline-end-style-tablet,
          var(
            --section-grid-frame-inline-end-style-desktop,
            var(--section-grid-frame-inline-end-style-default, solid)
          )
        )
      );
      border-inline-end-width: var(
        --section-grid-inner-inline-border-width,
        var(
          --section-grid-border-inline-end-mobile,
          var(
            --section-grid-border-inline-end-tablet,
            var(
              --section-grid-border-inline-end-desktop,
              var(--section-grid-border-inline-end-default, 0)
            )
          )
        )
      );
      border-inline-start-style: var(
        --section-grid-frame-inline-start-style-mobile,
        var(
          --section-grid-frame-inline-start-style-tablet,
          var(
            --section-grid-frame-inline-start-style-desktop,
            var(--section-grid-frame-inline-start-style-default, solid)
          )
        )
      );
      border-inline-start-width: var(
        --section-grid-inner-inline-border-width,
        var(
          --section-grid-border-inline-start-mobile,
          var(
            --section-grid-border-inline-start-tablet,
            var(
              --section-grid-border-inline-start-desktop,
              var(--section-grid-border-inline-start-default, 0)
            )
          )
        )
      );

      /* Padding */
      padding-block-start: var(
        --section-grid-inner-padding-block-start,
        var(--section-grid-inner-padding, 0)
      );
      padding-inline-start: var(
        --section-grid-inner-padding-inline-start,
        var(--section-grid-inner-padding, 0)
      );
    }
  }

/*
   * Component variables inherited from SectionGrid:
   * --section-grid-border-color: internal border color between cells.
   * --section-grid-border-width: internal border width.
   */
  [data-section-grid-cell].svelte-1jn9ei7 {
    /* Custom properties */
    --section-grid-cell-border-bottom-active: min(
      var(
        --section-grid-cell-section-bottom-desktop,
        var(
          --section-grid-cell-section-bottom-default,
          var(--section-grid-cell-effective-border-width)
        )
      ),
      max(
        var(
          --section-grid-cell-edge-bottom-desktop,
          var(
            --section-grid-cell-edge-bottom-default,
            var(--section-grid-cell-effective-border-width)
          )
        ),
        var(
          --section-grid-cell-fill-bottom-desktop,
          var(
            --section-grid-cell-fill-bottom-default,
            var(--section-grid-cell-effective-border-width)
          )
        )
      )
    );
    --section-grid-cell-border-color: var(
      --section-grid-border-color,
      var(--section-grid-default-border-color, var(--hx-color-website-border-section))
    );
    --section-grid-cell-border-left-active: min(
      var(
        --section-grid-cell-section-left-desktop,
        var(
          --section-grid-cell-section-left-default,
          var(--section-grid-cell-effective-border-width)
        )
      ),
      var(
        --section-grid-cell-paint-left-desktop,
        var(--section-grid-cell-paint-left-default, var(--section-grid-cell-effective-border-width))
      )
    );
    --section-grid-cell-border-right-active: min(
      var(
        --section-grid-cell-section-right-desktop,
        var(
          --section-grid-cell-section-right-default,
          var(--section-grid-cell-effective-border-width)
        )
      ),
      var(
        --section-grid-cell-paint-right-desktop,
        var(
          --section-grid-cell-paint-right-default,
          var(--section-grid-cell-effective-border-width)
        )
      )
    );
    --section-grid-cell-border-top-active: min(
      var(
        --section-grid-cell-section-top-desktop,
        var(
          --section-grid-cell-section-top-default,
          var(--section-grid-cell-effective-border-width)
        )
      ),
      max(
        var(
          --section-grid-cell-edge-top-desktop,
          var(--section-grid-cell-edge-top-default, var(--section-grid-cell-effective-border-width))
        ),
        var(
          --section-grid-cell-fill-top-desktop,
          var(--section-grid-cell-fill-top-default, var(--section-grid-cell-effective-border-width))
        )
      )
    );
    --section-grid-cell-dashed-bottom-active: var(
      --section-grid-cell-dashed-bottom-desktop,
      var(--section-grid-cell-dashed-bottom-default, 0)
    );
    --section-grid-cell-dashed-own-active: var(
      --section-grid-cell-dashed-own-desktop,
      var(--section-grid-cell-dashed-own-default, 0)
    );
    --section-grid-cell-dashed-right-active: var(
      --section-grid-cell-dashed-right-desktop,
      var(--section-grid-cell-dashed-right-default, 0)
    );
    --section-grid-cell-effective-border-width: var(
      --section-grid-active-border-width,
      var(--section-grid-border-width, var(--hx-border-width-thin))
    );
    --section-grid-cell-style-active: var(
      --section-grid-cell-style-desktop,
      var(--section-grid-cell-style-default, solid)
    );
    --section-grid-cell-style-bottom-active: var(
      --section-grid-cell-style-bottom-desktop,
      var(--section-grid-cell-style-bottom-default, var(--section-grid-cell-style-active))
    );
    --section-grid-cell-style-right-active: var(
      --section-grid-cell-style-right-desktop,
      var(--section-grid-cell-style-right-default, var(--section-grid-cell-style-active))
    );

    /* Position & layer */
    position: relative;
    z-index: var(--section-grid-cell-z-desktop, var(--section-grid-cell-z-default, 0));

    /* Box behavior */
    box-sizing: border-box;
    display: var(
      --section-grid-cell-display-desktop,
      var(--section-grid-cell-display-default, block)
    );

    /* Size */
    min-height: 0;
    min-width: 0;

    /* Margin */
    margin-block-end: calc(
      -1 *
        var(
          --section-grid-cell-overlap-bottom-desktop,
          var(--section-grid-cell-overlap-bottom-default, 0)
        )
    );
    margin-block-start: calc(
      -1 *
        var(
          --section-grid-cell-overlap-top-desktop,
          var(--section-grid-cell-overlap-top-default, 0)
        )
    );
    margin-inline-end: calc(
      -1 *
        var(
          --section-grid-cell-overlap-right-desktop,
          var(--section-grid-cell-overlap-right-default, 0)
        )
    );
    margin-inline-start: calc(
      -1 *
        var(
          --section-grid-cell-overlap-left-desktop,
          var(--section-grid-cell-overlap-left-default, 0)
        )
    );

    /* Border & outline */
    /* A dashed edge paints its real color via the ::before 5/5 overlay, so its native border-color is
       zeroed to transparent (the native width still reserves layout); a solid edge keeps the full color
       (flag unset → mix at 100%, byte-identical to the prior shorthand). */
    border-block-end-color: color-mix(
      in srgb,
      var(--section-grid-cell-border-color)
        calc((1 - var(--section-grid-cell-dashed-bottom-active, 0)) * 100%),
      transparent
    );
    border-block-end-style: var(--section-grid-cell-style-bottom-active);
    border-block-end-width: var(--section-grid-cell-border-bottom-active);
    border-block-start-color: color-mix(
      in srgb,
      var(--section-grid-cell-border-color)
        calc((1 - var(--section-grid-cell-dashed-own-active, 0)) * 100%),
      transparent
    );
    border-block-start-style: var(--section-grid-cell-style-active);
    border-block-start-width: var(--section-grid-cell-border-top-active);
    border-inline-end-color: color-mix(
      in srgb,
      var(--section-grid-cell-border-color)
        calc((1 - var(--section-grid-cell-dashed-right-active, 0)) * 100%),
      transparent
    );
    border-inline-end-style: var(--section-grid-cell-style-right-active);
    border-inline-end-width: var(--section-grid-cell-border-right-active);
    border-inline-start-color: color-mix(
      in srgb,
      var(--section-grid-cell-border-color)
        calc((1 - var(--section-grid-cell-dashed-own-active, 0)) * 100%),
      transparent
    );
    border-inline-start-style: var(--section-grid-cell-style-active);
    border-inline-start-width: var(--section-grid-cell-border-left-active);
  }

  /* Exact Figma dash (strokeDashes [5,5]) painted only on edges that resolve to dashed, sized by each
     edge's active border width × its dash flag, in the same color as the native border. */
  [data-section-grid-cell].svelte-1jn9ei7::before {
    /* Position & layer */
    inset-block-end: calc(-1 * var(--section-grid-cell-border-bottom-active));
    inset-block-start: calc(-1 * var(--section-grid-cell-border-top-active));
    inset-inline-end: calc(-1 * var(--section-grid-cell-border-right-active));
    inset-inline-start: calc(-1 * var(--section-grid-cell-border-left-active));
    /* cover the border-box by extending out over each edge's native border width. */
    position: absolute;

    /* Background */
    /* top, bottom, left, right dash tracks. */
    background-image:
      repeating-linear-gradient(
        90deg,
        var(--section-grid-cell-border-color) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        90deg,
        var(--section-grid-cell-border-color) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        180deg,
        var(--section-grid-cell-border-color) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        180deg,
        var(--section-grid-cell-border-color) 0 5px,
        transparent 5px 10px
      );
    background-position:
      top left,
      bottom left,
      left top,
      right top;
    background-repeat: no-repeat;
    background-size:
      100%
        calc(
          var(--section-grid-cell-border-top-active) * var(--section-grid-cell-dashed-own-active, 0)
        ),
      100%
        calc(
          var(--section-grid-cell-border-bottom-active) *
            var(--section-grid-cell-dashed-bottom-active, 0)
        ),
      calc(
          var(--section-grid-cell-border-left-active) *
            var(--section-grid-cell-dashed-own-active, 0)
        )
        100%,
      calc(
          var(--section-grid-cell-border-right-active) *
            var(--section-grid-cell-dashed-right-active, 0)
        )
        100%;

    /* Interaction */
    pointer-events: none;

    /* Generated content */
    content: '';
  }

  @media (max-width: 1023px) {
    [data-section-grid-cell].svelte-1jn9ei7 {
      /* Custom properties */
      --section-grid-cell-border-bottom-active: min(
        var(
          --section-grid-cell-section-bottom-tablet,
          var(
            --section-grid-cell-section-bottom-desktop,
            var(
              --section-grid-cell-section-bottom-default,
              var(--section-grid-cell-effective-border-width)
            )
          )
        ),
        max(
          var(
            --section-grid-cell-edge-bottom-tablet,
            var(
              --section-grid-cell-edge-bottom-desktop,
              var(
                --section-grid-cell-edge-bottom-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          ),
          var(
            --section-grid-cell-fill-bottom-tablet,
            var(
              --section-grid-cell-fill-bottom-desktop,
              var(
                --section-grid-cell-fill-bottom-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        )
      );
      --section-grid-cell-border-left-active: min(
        var(
          --section-grid-cell-section-left-tablet,
          var(
            --section-grid-cell-section-left-desktop,
            var(
              --section-grid-cell-section-left-default,
              var(--section-grid-cell-effective-border-width)
            )
          )
        ),
        var(
          --section-grid-cell-paint-left-tablet,
          var(
            --section-grid-cell-paint-left-desktop,
            var(
              --section-grid-cell-paint-left-default,
              var(--section-grid-cell-effective-border-width)
            )
          )
        )
      );
      --section-grid-cell-border-right-active: min(
        var(
          --section-grid-cell-section-right-tablet,
          var(
            --section-grid-cell-section-right-desktop,
            var(
              --section-grid-cell-section-right-default,
              var(--section-grid-cell-effective-border-width)
            )
          )
        ),
        var(
          --section-grid-cell-paint-right-tablet,
          var(
            --section-grid-cell-paint-right-desktop,
            var(
              --section-grid-cell-paint-right-default,
              var(--section-grid-cell-effective-border-width)
            )
          )
        )
      );
      --section-grid-cell-border-top-active: min(
        var(
          --section-grid-cell-section-top-tablet,
          var(
            --section-grid-cell-section-top-desktop,
            var(
              --section-grid-cell-section-top-default,
              var(--section-grid-cell-effective-border-width)
            )
          )
        ),
        max(
          var(
            --section-grid-cell-edge-top-tablet,
            var(
              --section-grid-cell-edge-top-desktop,
              var(
                --section-grid-cell-edge-top-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          ),
          var(
            --section-grid-cell-fill-top-tablet,
            var(
              --section-grid-cell-fill-top-desktop,
              var(
                --section-grid-cell-fill-top-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        )
      );
      --section-grid-cell-dashed-bottom-active: var(
        --section-grid-cell-dashed-bottom-tablet,
        var(
          --section-grid-cell-dashed-bottom-desktop,
          var(--section-grid-cell-dashed-bottom-default, 0)
        )
      );
      --section-grid-cell-dashed-own-active: var(
        --section-grid-cell-dashed-own-tablet,
        var(--section-grid-cell-dashed-own-desktop, var(--section-grid-cell-dashed-own-default, 0))
      );
      --section-grid-cell-dashed-right-active: var(
        --section-grid-cell-dashed-right-tablet,
        var(
          --section-grid-cell-dashed-right-desktop,
          var(--section-grid-cell-dashed-right-default, 0)
        )
      );
      --section-grid-cell-style-active: var(
        --section-grid-cell-style-tablet,
        var(--section-grid-cell-style-desktop, var(--section-grid-cell-style-default, solid))
      );
      --section-grid-cell-style-bottom-active: var(
        --section-grid-cell-style-bottom-tablet,
        var(
          --section-grid-cell-style-bottom-desktop,
          var(--section-grid-cell-style-bottom-default, var(--section-grid-cell-style-active))
        )
      );
      --section-grid-cell-style-right-active: var(
        --section-grid-cell-style-right-tablet,
        var(
          --section-grid-cell-style-right-desktop,
          var(--section-grid-cell-style-right-default, var(--section-grid-cell-style-active))
        )
      );

      /* Position & layer */
      z-index: var(
        --section-grid-cell-z-tablet,
        var(--section-grid-cell-z-desktop, var(--section-grid-cell-z-default, 0))
      );

      /* Box behavior */
      display: var(
        --section-grid-cell-display-tablet,
        var(--section-grid-cell-display-desktop, var(--section-grid-cell-display-default, block))
      );

      /* Margin */
      margin-block-end: calc(
        -1 *
          var(
            --section-grid-cell-overlap-bottom-tablet,
            var(
              --section-grid-cell-overlap-bottom-desktop,
              var(--section-grid-cell-overlap-bottom-default, 0)
            )
          )
      );
      margin-block-start: calc(
        -1 *
          var(
            --section-grid-cell-overlap-top-tablet,
            var(
              --section-grid-cell-overlap-top-desktop,
              var(--section-grid-cell-overlap-top-default, 0)
            )
          )
      );
      margin-inline-end: calc(
        -1 *
          var(
            --section-grid-cell-overlap-right-tablet,
            var(
              --section-grid-cell-overlap-right-desktop,
              var(--section-grid-cell-overlap-right-default, 0)
            )
          )
      );
      margin-inline-start: calc(
        -1 *
          var(
            --section-grid-cell-overlap-left-tablet,
            var(
              --section-grid-cell-overlap-left-desktop,
              var(--section-grid-cell-overlap-left-default, 0)
            )
          )
      );

      /* Border & outline */
      border-block-end-width: var(--section-grid-cell-border-bottom-active);
      border-block-start-width: var(--section-grid-cell-border-top-active);
      border-inline-end-width: var(--section-grid-cell-border-right-active);
      border-inline-start-width: var(--section-grid-cell-border-left-active);
    }
  }

  @media (max-width: 599px) {
    [data-section-grid-cell].svelte-1jn9ei7 {
      /* Custom properties */
      --section-grid-cell-border-bottom-active: min(
        var(
          --section-grid-cell-section-bottom-mobile,
          var(
            --section-grid-cell-section-bottom-tablet,
            var(
              --section-grid-cell-section-bottom-desktop,
              var(
                --section-grid-cell-section-bottom-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        ),
        max(
          var(
            --section-grid-cell-edge-bottom-mobile,
            var(
              --section-grid-cell-edge-bottom-tablet,
              var(
                --section-grid-cell-edge-bottom-desktop,
                var(
                  --section-grid-cell-edge-bottom-default,
                  var(--section-grid-cell-effective-border-width)
                )
              )
            )
          ),
          var(
            --section-grid-cell-fill-bottom-mobile,
            var(
              --section-grid-cell-fill-bottom-tablet,
              var(
                --section-grid-cell-fill-bottom-desktop,
                var(
                  --section-grid-cell-fill-bottom-default,
                  var(--section-grid-cell-effective-border-width)
                )
              )
            )
          )
        )
      );
      --section-grid-cell-border-left-active: min(
        var(
          --section-grid-cell-section-left-mobile,
          var(
            --section-grid-cell-section-left-tablet,
            var(
              --section-grid-cell-section-left-desktop,
              var(
                --section-grid-cell-section-left-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        ),
        var(
          --section-grid-cell-paint-left-mobile,
          var(
            --section-grid-cell-paint-left-tablet,
            var(
              --section-grid-cell-paint-left-desktop,
              var(
                --section-grid-cell-paint-left-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        )
      );
      --section-grid-cell-border-right-active: min(
        var(
          --section-grid-cell-section-right-mobile,
          var(
            --section-grid-cell-section-right-tablet,
            var(
              --section-grid-cell-section-right-desktop,
              var(
                --section-grid-cell-section-right-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        ),
        var(
          --section-grid-cell-paint-right-mobile,
          var(
            --section-grid-cell-paint-right-tablet,
            var(
              --section-grid-cell-paint-right-desktop,
              var(
                --section-grid-cell-paint-right-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        )
      );
      --section-grid-cell-border-top-active: min(
        var(
          --section-grid-cell-section-top-mobile,
          var(
            --section-grid-cell-section-top-tablet,
            var(
              --section-grid-cell-section-top-desktop,
              var(
                --section-grid-cell-section-top-default,
                var(--section-grid-cell-effective-border-width)
              )
            )
          )
        ),
        max(
          var(
            --section-grid-cell-edge-top-mobile,
            var(
              --section-grid-cell-edge-top-tablet,
              var(
                --section-grid-cell-edge-top-desktop,
                var(
                  --section-grid-cell-edge-top-default,
                  var(--section-grid-cell-effective-border-width)
                )
              )
            )
          ),
          var(
            --section-grid-cell-fill-top-mobile,
            var(
              --section-grid-cell-fill-top-tablet,
              var(
                --section-grid-cell-fill-top-desktop,
                var(
                  --section-grid-cell-fill-top-default,
                  var(--section-grid-cell-effective-border-width)
                )
              )
            )
          )
        )
      );
      --section-grid-cell-dashed-bottom-active: var(
        --section-grid-cell-dashed-bottom-mobile,
        var(
          --section-grid-cell-dashed-bottom-tablet,
          var(
            --section-grid-cell-dashed-bottom-desktop,
            var(--section-grid-cell-dashed-bottom-default, 0)
          )
        )
      );
      --section-grid-cell-dashed-own-active: var(
        --section-grid-cell-dashed-own-mobile,
        var(
          --section-grid-cell-dashed-own-tablet,
          var(
            --section-grid-cell-dashed-own-desktop,
            var(--section-grid-cell-dashed-own-default, 0)
          )
        )
      );
      --section-grid-cell-dashed-right-active: var(
        --section-grid-cell-dashed-right-mobile,
        var(
          --section-grid-cell-dashed-right-tablet,
          var(
            --section-grid-cell-dashed-right-desktop,
            var(--section-grid-cell-dashed-right-default, 0)
          )
        )
      );
      --section-grid-cell-style-active: var(
        --section-grid-cell-style-mobile,
        var(
          --section-grid-cell-style-tablet,
          var(--section-grid-cell-style-desktop, var(--section-grid-cell-style-default, solid))
        )
      );
      --section-grid-cell-style-bottom-active: var(
        --section-grid-cell-style-bottom-mobile,
        var(
          --section-grid-cell-style-bottom-tablet,
          var(
            --section-grid-cell-style-bottom-desktop,
            var(--section-grid-cell-style-bottom-default, var(--section-grid-cell-style-active))
          )
        )
      );
      --section-grid-cell-style-right-active: var(
        --section-grid-cell-style-right-mobile,
        var(
          --section-grid-cell-style-right-tablet,
          var(
            --section-grid-cell-style-right-desktop,
            var(--section-grid-cell-style-right-default, var(--section-grid-cell-style-active))
          )
        )
      );

      /* Position & layer */
      z-index: var(
        --section-grid-cell-z-mobile,
        var(
          --section-grid-cell-z-tablet,
          var(--section-grid-cell-z-desktop, var(--section-grid-cell-z-default, 0))
        )
      );

      /* Box behavior */
      display: var(
        --section-grid-cell-display-mobile,
        var(
          --section-grid-cell-display-tablet,
          var(--section-grid-cell-display-desktop, var(--section-grid-cell-display-default, block))
        )
      );

      /* Margin */
      margin-block-end: calc(
        -1 *
          var(
            --section-grid-cell-overlap-bottom-mobile,
            var(
              --section-grid-cell-overlap-bottom-tablet,
              var(
                --section-grid-cell-overlap-bottom-desktop,
                var(--section-grid-cell-overlap-bottom-default, 0)
              )
            )
          )
      );
      margin-block-start: calc(
        -1 *
          var(
            --section-grid-cell-overlap-top-mobile,
            var(
              --section-grid-cell-overlap-top-tablet,
              var(
                --section-grid-cell-overlap-top-desktop,
                var(--section-grid-cell-overlap-top-default, 0)
              )
            )
          )
      );
      margin-inline-end: calc(
        -1 *
          var(
            --section-grid-cell-overlap-right-mobile,
            var(
              --section-grid-cell-overlap-right-tablet,
              var(
                --section-grid-cell-overlap-right-desktop,
                var(--section-grid-cell-overlap-right-default, 0)
              )
            )
          )
      );
      margin-inline-start: calc(
        -1 *
          var(
            --section-grid-cell-overlap-left-mobile,
            var(
              --section-grid-cell-overlap-left-tablet,
              var(
                --section-grid-cell-overlap-left-desktop,
                var(--section-grid-cell-overlap-left-default, 0)
              )
            )
          )
      );

      /* Border & outline */
      border-block-end-width: var(--section-grid-cell-border-bottom-active);
      border-block-start-width: var(--section-grid-cell-border-top-active);
      border-inline-end-width: var(--section-grid-cell-border-right-active);
      border-inline-start-width: var(--section-grid-cell-border-left-active);
    }
  }

[data-product-link].svelte-1w5vxmy {
    /* Typography & color */
    text-decoration: underline;
    text-decoration-thickness: var(--hx-border-width-thin);
    text-underline-offset: var(--hx-website-size-2);
    color: var(--hx-color-website-text-accent-deep);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-product-link].svelte-1w5vxmy:is(:where(.svelte-1w5vxmy):hover, :where(.svelte-1w5vxmy):focus-visible) {
    /* Typography & color */
    text-decoration-thickness: var(--hx-border-width-medium);
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-product-link].svelte-1w5vxmy:focus-visible {
    /* Border & outline */
    border-radius: var(--hx-radius-2xs);
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-2);
  }

  [data-visually-hidden].svelte-1w5vxmy {
    /* Position & layer */
    position: absolute;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    white-space: nowrap;

    /* Effects */
    clip-path: inset(50%);
  }

/*
   * Component variables:
   * --logo-custom-width: custom rendered logo width.
   */
  [data-logo].svelte-1ctpd45 {
    /* Custom properties */
    /* Color/gradient variables live on Helixer.svelte (the mark declares and consumes them
       directly); this wrapper only owns its focus ring and size presets. */
    --logo-focus-outline: var(--hx-color-website-border-focus);
    --logo-width-md: 166.822px;
    --logo-width-sm: 119px;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    aspect-ratio: 166.822 / 32.244;
    max-width: 100%;
    width: var(--logo-custom-width, 100%);

    /* Typography & color */
    text-decoration: none;
  }

  [data-logo][data-logo-size='sm'].svelte-1ctpd45 {
    /* Size */
    width: var(--logo-width-sm);
  }

  [data-logo][data-logo-size='md'].svelte-1ctpd45 {
    /* Size */
    width: var(--logo-width-md);
  }

  [data-logo].svelte-1ctpd45:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--logo-focus-outline);
    outline-offset: var(--hx-website-size-4);
  }

/*
   * Component variables:
   * --menu-bar-background: navigation backdrop fill.
   * --menu-bar-content-gap: distance between menu cluster and trailing CTA.
   * --menu-bar-height: rendered top-row height.
   * --menu-bar-horizontal-padding: left and right bar padding.
   * --menu-bar-menu-gap: gap between top-level menu items.
   * --menu-bar-mobile-actions-gap: gap between mobile CTA and hamburger.
   * --menu-bar-submenu-gap: vertical gap between submenu items.
   * --menu-bar-vertical-padding: top and bottom row padding.
   */
  [data-menu-bar].svelte-zc5xax {
    /* Custom properties */
    /* Menu and cluster gaps scale fluidly from the Figma Desktop_Navigation (1105:9140) 32px
       anchors down at narrow desktop widths, so the row fits between the 1024px desktop
       breakpoint and ~1264px without the list overlapping the logo and CTA. */
    --menu-bar-background: var(--hx-color-website-background-nav-backdrop);
    --menu-bar-content-gap: calc(
      var(--hx-website-size-16) + (var(--hx-website-size-32) - var(--hx-website-size-16)) *
        var(--hx-fluid-t-desktop)
    );
    --menu-bar-height: var(--hx-website-size-80);
    --menu-bar-horizontal-padding: var(--hx-website-size-32);
    --menu-bar-menu-gap: calc(
      var(--hx-website-size-8) + (var(--hx-website-size-32) - var(--hx-website-size-8)) *
        var(--hx-fluid-t-desktop)
    );
    --menu-bar-mobile-actions-gap: var(--hx-website-size-32);
    --menu-bar-submenu-gap: var(--hx-website-size-8);
    --menu-bar-vertical-padding: var(--hx-website-size-8);

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Background */
    background: var(--menu-bar-background);
  }

  [data-menu-bar][data-menu-bar-background='transparent'].svelte-zc5xax {
    /* Background */
    background: transparent;
  }

  [data-menu-bar-row].svelte-zc5xax {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: var(--menu-bar-height);
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--menu-bar-content-gap);

    /* Padding */
    padding: var(--menu-bar-vertical-padding) var(--menu-bar-horizontal-padding);
  }

  [data-menu-bar-list].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;
    gap: var(--menu-bar-menu-gap);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-menu-bar-item].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;
  }

  [data-menu-bar-item][data-menu-bar-item-open].svelte-zc5xax {
    /* Border & outline */
    border-radius: var(--hx-radius-xs);

    /* Background */
    background: var(--hx-color-website-background-accent-wash);
  }

  [data-menu-bar-foldout].svelte-zc5xax {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: 100%;

    /* Padding */
    padding-block: var(--hx-website-size-16) var(--hx-website-size-32);
    padding-inline: var(--foldout-left, 0) var(--menu-bar-horizontal-padding);
  }

  [data-menu-bar-submenu].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--menu-bar-submenu-gap);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-menu-bar-subitem].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
  }

  [data-menu-bar-logo-desktop].svelte-zc5xax,
  [data-menu-bar-logo-mobile].svelte-zc5xax,
  [data-menu-bar-desktop-cta].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid item */
    flex: none;
  }

  [data-menu-bar-logo-mobile].svelte-zc5xax,
  [data-menu-bar-mobile-actions].svelte-zc5xax {
    /* Box behavior */
    display: none;
  }

  [data-menu-bar-mobile-actions].svelte-zc5xax {
    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: flex-end;
    align-items: center;
    gap: var(--menu-bar-mobile-actions-gap);

    /* Flex & grid item */
    flex: none;
  }

  [data-menu-bar-mobile-panel].svelte-zc5xax {
    /* Position & layer */
    inset: 0;
    position: fixed;
    z-index: 20;

    /* Box behavior */
    box-sizing: border-box;
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-menu-bar-mobile-panel-bar].svelte-zc5xax {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: var(--menu-bar-height);
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Padding */
    padding-inline: var(--hx-website-size-16);
  }

  [data-menu-bar-mobile-close].svelte-zc5xax {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    height: var(--hx-website-size-32);
    width: var(--hx-website-size-32);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-elevated);
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);

    /* Transition & animation */
    transition:
      color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      border-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  /* Invisible hit-area extension to the WCAG 2.5.8 / D16 40px norm: the visible 32px ring is
     unchanged, matching the MenuHamburger/progress-dot enlarge-hit-area-around-a-smaller-visual
     technique (see ScrollSlider's rail for the same pattern). */
  [data-menu-bar-mobile-close].svelte-zc5xax::after {
    /* Position & layer */
    inset: calc(-1 * var(--hx-website-size-4));
    position: absolute;

    /* Generated content */
    content: '';
  }

  [data-menu-bar-mobile-close].svelte-zc5xax:is(:where(.svelte-zc5xax):hover, :where(.svelte-zc5xax):focus-visible) {
    /* Border & outline */
    border-color: var(--hx-color-website-border-accent-solid);

    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-menu-bar-mobile-close].svelte-zc5xax:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-menu-bar-mobile-nav].svelte-zc5xax {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-24);

    /* Flex & grid item */
    flex: 1;

    /* Padding */
    padding: var(--hx-website-size-24);

    /* Overflow & scroll */
    overflow-y: auto;
  }

  [data-menu-bar-mobile-list].svelte-zc5xax,
  [data-menu-bar-mobile-sublist].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-24);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-menu-bar-mobile-cta].svelte-zc5xax {
    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Padding */
    padding-block: var(--hx-website-size-40);
  }

  @media (max-width: 1023px) {
    [data-menu-bar-list].svelte-zc5xax,
    [data-menu-bar-desktop-cta].svelte-zc5xax,
    [data-menu-bar-foldout].svelte-zc5xax {
      /* Box behavior */
      display: none;
    }

    [data-menu-bar-mobile-actions].svelte-zc5xax {
      /* Box behavior */
      display: flex;
    }

    [data-menu-bar-mobile-panel].svelte-zc5xax {
      /* Box behavior */
      display: flex;
    }
  }

  @media (max-width: 599px) {
    [data-menu-bar].svelte-zc5xax {
      /* Custom properties */
      --menu-bar-content-gap: clamp(var(--hx-website-size-4), 2vw, var(--hx-website-size-8));
      --menu-bar-mobile-actions-gap: clamp(var(--hx-website-size-4), 2vw, var(--hx-website-size-8));

      /* Background */
      background: var(--hx-color-website-background-page);
    }

    [data-menu-bar-row].svelte-zc5xax {
      /* Padding */
      padding-inline: clamp(var(--hx-website-size-8), 4vw, var(--hx-website-size-16));
    }

    [data-menu-bar-mobile-actions].svelte-zc5xax {
      /* Custom properties */
      --menu-item-font-size: clamp(11px, 3.4vw, var(--hx-font-size-sm));
      --menu-item-padding-inline: clamp(var(--hx-website-size-2), 1vw, var(--hx-website-size-4));

      /* Flex & grid item */
      flex: 1;
    }

    [data-menu-bar-logo-desktop].svelte-zc5xax {
      /* Box behavior */
      display: none;
    }

    [data-menu-bar-logo-mobile].svelte-zc5xax {
      /* Box behavior */
      display: flex;

      /* Size */
      width: clamp(var(--hx-website-size-80), 30vw, 119px);
    }
  }

/*
   * Component variables:
   * --menu-hamburger-color: icon color.
   * --menu-hamburger-hover-color: hover/focus icon color.
   * --menu-hamburger-icon-width: width of the inner hamburger glyph.
   */
  [data-menu-hamburger].svelte-ly2kwp {
    /* Custom properties */
    --menu-hamburger-color: var(--hx-color-website-text-primary);
    --menu-hamburger-hover-color: var(--hx-color-website-text-accent);
    --menu-hamburger-icon-width: 22.5px;

    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    height: var(--hx-website-size-32);
    max-width: 100%;
    min-width: 0;
    width: var(--hx-website-size-32);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: 0;
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    text-decoration: none;
    color: var(--menu-hamburger-color);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  /* Invisible hit-area extension to the WCAG 2.5.8 / D16 40px norm: the visible 32px button and its
     22.5px glyph are unchanged, same enlarge-hit-area-around-a-smaller-visual technique used for the
     progress-dot and the mobile-close button (ScrollSlider's rail carries the original precedent). */
  [data-menu-hamburger].svelte-ly2kwp::after {
    /* Position & layer */
    inset: calc(-1 * var(--hx-website-size-4));
    position: absolute;

    /* Generated content */
    content: '';
  }

  [data-menu-hamburger].svelte-ly2kwp:is(:where(.svelte-ly2kwp):hover, :where(.svelte-ly2kwp):focus-visible),
  [data-menu-hamburger][data-menu-hamburger-expanded].svelte-ly2kwp {
    /* Typography & color */
    color: var(--menu-hamburger-hover-color);
  }

  [data-menu-hamburger].svelte-ly2kwp:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

/*
   * Component variables:
   * --menu-item-cta-hover-color: CTA hover/active text color.
   * --menu-item-cta-text-color: CTA default text color.
   * --menu-item-default-hover-color: default hover/active text color.
   * --menu-item-default-text-color: default text color.
   * --menu-item-font-size: rendered item font size.
   * --menu-item-padding-inline: horizontal item padding.
   * --menu-item-sub-hover-color: sub item hover/active text color.
   * --menu-item-sub-text-color: sub item default text color.
   * --menu-item-content-gap: distance between item label and embedded chevron.
   * --menu-item-underline-offset: hover underline distance from text.
   */
  [data-menu-item].svelte-yqwtdz {
    /* Custom properties */
    --menu-item-content-gap: var(--hx-website-size-8);
    --menu-item-cta-hover-color: var(--hx-color-website-text-accent-deep);
    --menu-item-cta-text-color: var(--hx-color-website-text-accent-brand);
    --menu-item-default-hover-color: var(--hx-color-website-text-accent-deep);
    --menu-item-default-text-color: var(--hx-color-website-text-primary);
    --menu-item-sub-hover-color: var(--hx-color-website-text-primary);
    --menu-item-sub-text-color: var(--hx-color-website-text-secondary);
    --menu-item-underline-offset: var(--hx-border-width-medium);

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    height: var(--hx-website-size-40);
    max-width: 100%;
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;
    gap: var(--menu-item-content-gap);

    /* Border & outline */
    border: 0;

    /* Padding */
    padding-block: 0;
    padding-inline: var(--menu-item-padding-inline, var(--hx-website-size-8));

    /* Background */
    background: transparent;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--menu-item-font-size, var(--hx-font-size-sm));
    font-weight: var(--hx-font-weight-regular);
    line-height: normal;
    text-align: center;
    text-decoration: none;
    text-decoration-skip-ink: auto;
    text-underline-offset: var(--menu-item-underline-offset);
    white-space: nowrap;
    color: var(--menu-item-default-text-color);

    /* Effects */
    box-shadow: none;

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    user-select: none;
  }

  [data-menu-item][data-menu-item-variant='cta'].svelte-yqwtdz {
    /* Typography & color */
    font-weight: var(--hx-font-weight-medium);
    color: var(--menu-item-cta-text-color);
  }

  [data-menu-item][data-menu-item-interactive].svelte-yqwtdz,
  [data-menu-item][data-menu-item-variant='cta'].svelte-yqwtdz {
    /* Interaction */
    cursor: pointer;
  }

  [data-menu-item][data-menu-item-variant='sub'].svelte-yqwtdz {
    /* Typography & color */
    color: var(--menu-item-sub-text-color);
  }

  [data-menu-item][data-menu-item-variant='default'].svelte-yqwtdz:is(:where(.svelte-yqwtdz):hover, :where(.svelte-yqwtdz):focus-visible) {
    /* Typography & color */
    color: var(--menu-item-default-hover-color);
  }

  [data-menu-item][data-menu-item-variant='sub'].svelte-yqwtdz:is(:where(.svelte-yqwtdz):hover, :where(.svelte-yqwtdz):focus-visible) {
    /* Typography & color */
    color: var(--menu-item-sub-hover-color);
  }

  [data-menu-item][data-menu-item-variant='cta'].svelte-yqwtdz:hover {
    /* Typography & color */
    text-decoration: underline;
    color: var(--menu-item-cta-hover-color);
  }

  [data-menu-item].svelte-yqwtdz:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-visually-hidden].svelte-yqwtdz {
    /* Position & layer */
    position: absolute;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    white-space: nowrap;

    /* Effects */
    clip-path: inset(50%);
  }

  [data-menu-item-label].svelte-yqwtdz {
    /* Position & layer */
    position: relative;

    /* Size */
    min-width: 0;

    /* Typography & color */
    /* nav-link role: normal leading with cap trim (reconciliation rollout); the trim sits on the
       label because text-box has no effect on the flex row above. */
    text-box: trim-both cap alphabetic;
  }

  /* Active-page indicator dot, matching the page sub-nav. Absolutely positioned to the left of the
     label so marking an item active never changes its width (the row stays put between pages). */
  [data-menu-item-active].svelte-yqwtdz [data-menu-item-label]:where(.svelte-yqwtdz)::before {
    /* Position & layer */
    inset-block: 0;
    inset-inline-end: 100%;
    position: absolute;

    /* Size */
    block-size: 5px;
    inline-size: 5px;

    /* Margin */
    margin-block: auto;
    margin-inline-end: var(--hx-website-size-8);

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Background */
    background: var(--hx-color-website-background-accent);

    /* Generated content */
    content: '';
  }

  [data-menu-item-chevron].svelte-yqwtdz {
    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-4);

    /* Typography & color */
    color: currentColor;

    /* Transform */
    transform-origin: center;

    @media (prefers-reduced-motion: no-preference) {
      /* Transition & animation */
      transition: transform var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
    }
  }

  [data-menu-item-chevron][data-menu-item-chevron-expanded='true'].svelte-yqwtdz {
    /* Transform */
    transform: rotate(180deg);
  }

  /* Optical centering: the negative end margin cancels the chevron's occupied width (icon + its own
     inline padding + the flex gap), so the row centers the label alone while the chevron stays in
     flow — visible right after the word, like the active-dot on the other side. */
  [data-menu-item][data-menu-item-chevron-overlay].svelte-yqwtdz [data-menu-item-chevron]:where(.svelte-yqwtdz) {
    /* Margin */
    margin-inline-end: calc(
      -1 * (var(--hx-website-size-8) + 2 * var(--hx-website-size-4) + var(--menu-item-content-gap))
    );
  }

[data-submenu].svelte-1hgxjw8 {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-submenu-visually-hidden].svelte-1hgxjw8 {
    /* Position & layer */
    position: absolute;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    white-space: nowrap;

    /* Effects */
    clip-path: inset(50%);
  }

  [data-submenu-frame].svelte-1hgxjw8 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: stretch;
  }

  [data-submenu-viewport].svelte-1hgxjw8 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    block-size: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: stretch;

    /* Overflow & scroll */
    overflow-x: auto;
    overflow-y: hidden;
  }

  [data-submenu-row].svelte-1hgxjw8 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Flex & grid container */
    align-items: center;

    /* Flex & grid item */
    flex: none;
  }

  [data-submenu-item].svelte-1hgxjw8 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Border & outline */
    border: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    text-decoration: none;
    white-space: nowrap;

    /* Interaction */
    cursor: pointer;
  }

  [data-submenu-item].svelte-1hgxjw8:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(-1 * var(--hx-border-width-medium));
  }

  [data-submenu-item][data-active].svelte-1hgxjw8::before {
    /* Position & layer */
    inset-block: 0;
    position: absolute;

    /* Margin */
    margin-block: auto;

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Generated content */
    content: '';
  }

  [data-submenu][data-appearance='page'].svelte-1hgxjw8 {
    /* Border & outline */
    border-block-end: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Background */
    background: var(--hx-color-website-background-nav-backdrop);
  }

  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-frame]:where(.svelte-1hgxjw8) {
    /* Size */
    block-size: var(--hx-website-size-56);
    max-width: var(--hx-website-layout-container-width);
    width: calc(100% - var(--hx-website-layout-margin-stretch) * 2);

    /* Margin */
    margin-inline: auto;

    /* Border & outline */
    border-inline: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
  }

  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-row]:where(.svelte-1hgxjw8) {
    /* Flex & grid container */
    gap: var(--hx-website-size-8);

    /* Border & outline */
    border-inline-end: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-inline: var(--hx-website-size-16);
  }

  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item]:where(.svelte-1hgxjw8) {
    /* Size */
    min-height: var(--hx-website-size-40);

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding-block: 0;
    padding-inline: var(--hx-website-size-24);

    /* Typography & color */
    color: var(--hx-color-website-text-disabled);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item]:where(.svelte-1hgxjw8):is(:where(.svelte-1hgxjw8):hover, :where(.svelte-1hgxjw8):focus-visible),
  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item][data-active]:where(.svelte-1hgxjw8) {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item][data-active]:where(.svelte-1hgxjw8) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-medium);
  }

  [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item][data-active]:where(.svelte-1hgxjw8)::before {
    /* Position & layer */
    inset-inline-start: calc(var(--hx-website-size-24) - var(--hx-website-size-8) - 5px);

    /* Size */
    block-size: 5px;
    inline-size: 5px;

    /* Background */
    background: var(--hx-color-website-background-accent);
  }

  [data-submenu][data-appearance='band'].svelte-1hgxjw8 {
    /* Border & outline */
    border-block-end: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
  }

  [data-appearance='band'].svelte-1hgxjw8 [data-submenu-row]:where(.svelte-1hgxjw8) {
    /* Size */
    min-width: 100%;

    /* Flex & grid container */
    justify-content: space-between;

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-16);
  }

  [data-appearance='band'].svelte-1hgxjw8 [data-submenu-item]:where(.svelte-1hgxjw8) {
    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-24);

    /* Typography & color */
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-secondary);
  }

  [data-appearance='band'].svelte-1hgxjw8 [data-submenu-item][data-active]:where(.svelte-1hgxjw8) {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-appearance='band'].svelte-1hgxjw8 [data-submenu-item][data-active]:where(.svelte-1hgxjw8)::before {
    /* Position & layer */
    inset-inline-start: calc(
      var(--hx-website-size-24) - var(--hx-website-size-8) - var(--hx-website-size-4)
    );

    /* Size */
    block-size: var(--hx-website-size-4);
    inline-size: var(--hx-website-size-4);

    /* Background */
    background: var(--hx-color-website-background-accent-active);
  }

  [data-appearance='band'].svelte-1hgxjw8 [data-submenu-item][data-disabled]:where(.svelte-1hgxjw8) {
    /* Typography & color */
    color: var(--hx-color-website-text-disabled);

    /* Interaction */
    cursor: not-allowed;
  }

  @media (max-width: 599px) {
    [data-submenu-viewport].svelte-1hgxjw8 {
      /* Overflow & scroll */
      scrollbar-width: none;
    }

    [data-submenu-viewport].svelte-1hgxjw8::-webkit-scrollbar {
      /* Box behavior */
      display: none;
    }

    /* Directional fades live on the nested viewport so the page frame's inline seams remain solid.
       The measured attributes suppress each fade as soon as its corresponding edge is reached. */
    [data-submenu-viewport].svelte-1hgxjw8:not([data-can-scroll-left]):not([data-can-scroll-right]) {
      /* Effects */
      mask-image: none;
    }

    [data-submenu-viewport][data-can-scroll-left].svelte-1hgxjw8:not([data-can-scroll-right]) {
      /* Effects */
      mask-image: linear-gradient(
        to right,
        transparent,
        var(--hx-color-palette-website-slate-white) var(--hx-website-size-24),
        var(--hx-color-palette-website-slate-white)
      );
    }

    [data-submenu-viewport]:not([data-can-scroll-left])[data-can-scroll-right].svelte-1hgxjw8 {
      /* Effects */
      mask-image: linear-gradient(
        to right,
        var(--hx-color-palette-website-slate-white),
        var(--hx-color-palette-website-slate-white) calc(100% - var(--hx-website-size-24)),
        transparent
      );
    }

    [data-submenu-viewport][data-can-scroll-left][data-can-scroll-right].svelte-1hgxjw8 {
      /* Effects */
      mask-image: linear-gradient(
        to right,
        transparent,
        var(--hx-color-palette-website-slate-white) var(--hx-website-size-24),
        var(--hx-color-palette-website-slate-white) calc(100% - var(--hx-website-size-24)),
        transparent
      );
    }

    [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item]:where(.svelte-1hgxjw8) {
      /* Padding */
      padding-inline: var(--hx-website-size-16);
    }

    [data-appearance='page'].svelte-1hgxjw8 [data-submenu-item][data-active]:where(.svelte-1hgxjw8)::before {
      /* Position & layer */
      inset-inline-start: calc(var(--hx-website-size-16) - var(--hx-website-size-8) - 5px);
    }
  }

[data-lab-control-label].svelte-11o79ba {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-align: right;
    text-transform: uppercase;
    color: var(--lab-color-text-disabled);
  }

  [data-lab-outline-selector-list].svelte-11o79ba,
  [data-lab-box-inspector-selector-list].svelte-11o79ba,
  [data-lab-grid-overlay-selector-list].svelte-11o79ba,
  [data-lab-variant-selector-list].svelte-11o79ba,
  [data-lab-viewport-background-selector-list].svelte-11o79ba,
  [data-lab-viewport-selector-list].svelte-11o79ba {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-lab-outline-selector-link].svelte-11o79ba,
  [data-lab-box-inspector-selector-link].svelte-11o79ba,
  [data-lab-grid-overlay-selector-link].svelte-11o79ba,
  [data-lab-variant-selector-link].svelte-11o79ba,
  [data-lab-viewport-background-selector-link].svelte-11o79ba,
  [data-lab-viewport-selector-link].svelte-11o79ba {
    /* Custom properties */
    --lab-selector-link-padding-block: var(--hx-website-size-8);

    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding: var(--lab-selector-link-padding-block) var(--hx-website-size-8);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-decoration: none;
    text-transform: lowercase;
    color: var(--lab-color-text-subtle);
  }

  [data-lab-variant-selector].svelte-11o79ba,
  [data-lab-outline-selector].svelte-11o79ba,
  [data-lab-box-inspector-selector].svelte-11o79ba,
  [data-lab-grid-overlay-selector].svelte-11o79ba,
  [data-lab-viewport-background-selector].svelte-11o79ba,
  [data-lab-viewport-selector].svelte-11o79ba {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-lab-variant-row].svelte-11o79ba {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--hx-website-size-16);
  }

  [data-lab-variant-selector-list].svelte-11o79ba,
  [data-lab-outline-selector-list].svelte-11o79ba,
  [data-lab-box-inspector-selector-list].svelte-11o79ba,
  [data-lab-grid-overlay-selector-list].svelte-11o79ba,
  [data-lab-viewport-background-selector-list].svelte-11o79ba,
  [data-lab-viewport-selector-list].svelte-11o79ba {
    /* Flex & grid container */
    justify-content: flex-start;
  }

  [data-lab-variant-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-outline-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-box-inspector-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-grid-overlay-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-viewport-background-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-viewport-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba) {
    /* Typography & color */
    text-align: left;
  }

  [data-lab-variant-selector-link][data-active].svelte-11o79ba,
  [data-lab-outline-selector-link][data-active].svelte-11o79ba,
  [data-lab-box-inspector-selector-link][data-active].svelte-11o79ba,
  [data-lab-grid-overlay-selector-link][data-active].svelte-11o79ba,
  [data-lab-viewport-background-selector-link][data-active].svelte-11o79ba,
  [data-lab-viewport-selector-link][data-active].svelte-11o79ba {
    /* Border & outline */
    border-color: var(--lab-color-border-active);

    /* Background */
    background: var(--lab-color-panel-accent);

    /* Typography & color */
    color: var(--lab-color-text-strong);
  }

  [data-lab-viewport-selector].svelte-11o79ba {
    /* Flex & grid container */
    align-items: flex-end;

    /* Margin */
    margin-left: auto;
  }

  [data-lab-outline-selector].svelte-11o79ba {
    /* Flex & grid container */
    align-items: flex-end;
  }

  [data-lab-grid-overlay-selector].svelte-11o79ba {
    /* Flex & grid container */
    align-items: flex-end;
  }

  [data-lab-box-inspector-selector].svelte-11o79ba {
    /* Flex & grid container */
    align-items: flex-end;
  }

  [data-lab-viewport-background-selector].svelte-11o79ba {
    /* Flex & grid container */
    align-items: flex-end;
  }

  [data-lab-viewport-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-outline-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-box-inspector-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-grid-overlay-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba),
  [data-lab-viewport-background-selector].svelte-11o79ba [data-lab-control-label]:where(.svelte-11o79ba) {
    /* Typography & color */
    text-align: right;
  }

  [data-lab-viewport-selector-list].svelte-11o79ba,
  [data-lab-outline-selector-list].svelte-11o79ba,
  [data-lab-box-inspector-selector-list].svelte-11o79ba,
  [data-lab-grid-overlay-selector-list].svelte-11o79ba,
  [data-lab-viewport-background-selector-list].svelte-11o79ba {
    /* Flex & grid container */
    justify-content: flex-end;
  }

  @media (max-width: 900px) {
    [data-lab-variant-row].svelte-11o79ba {
      /* Flex & grid container */
      flex-direction: column;
    }

    [data-lab-viewport-selector].svelte-11o79ba,
    [data-lab-outline-selector].svelte-11o79ba,
    [data-lab-box-inspector-selector].svelte-11o79ba,
    [data-lab-grid-overlay-selector].svelte-11o79ba,
    [data-lab-viewport-background-selector].svelte-11o79ba {
      /* Flex & grid container */
      align-items: flex-start;

      /* Margin */
      margin-left: 0;
    }

    [data-lab-control-label].svelte-11o79ba {
      /* Typography & color */
      text-align: left;
    }
  }

[data-lab-box-inspector-overlay].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-gap-color: #2eb67d;
    --lab-box-inspector-label-transform: translate(-50%, -50%);
    --lab-box-inspector-margin-color: #ff4fa8;
    --lab-box-inspector-padding-color: #3f8cff;
    --lab-box-inspector-size-color: #ffd23f;
    --lab-debug-box-color: var(--lab-box-inspector-margin-color);
    --lab-debug-box-color-strong: color-mix(
      in srgb,
      var(--lab-box-inspector-size-color) 84%,
      #fff 16%
    );
    --lab-debug-box-label-color: #fff4fb;

    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: 35;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  [data-lab-box-inspector-overlay].svelte-g3qfdw :where(.svelte-g3qfdw) {
    /* Interaction */
    pointer-events: none;
    user-select: none;
  }

  [data-lab-box-inspector-region].svelte-g3qfdw {
    /* Position & layer */
    position: absolute;
    z-index: 1;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid
      color-mix(in srgb, var(--lab-box-inspector-region-color) 56%, transparent);
  }

  [data-lab-box-inspector-region][data-kind='margin'].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-region-color: var(--lab-box-inspector-margin-color);

    /* Background */
    background-color: color-mix(in srgb, var(--lab-box-inspector-region-color) 20%, transparent);
    background-image: repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--lab-box-inspector-region-color) 50%, transparent) 0,
      color-mix(in srgb, var(--lab-box-inspector-region-color) 50%, transparent)
        var(--hx-website-size-8),
      transparent var(--hx-website-size-8),
      transparent var(--hx-website-size-16)
    );
  }

  [data-lab-box-inspector-region][data-kind='padding'].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-region-color: var(--lab-box-inspector-padding-color);
    --lab-box-inspector-stripe-color: color-mix(
      in srgb,
      var(--lab-box-inspector-region-color) 64%,
      transparent
    );

    /* Border & outline */
    border-color: transparent;

    /* Background */
    background-color: color-mix(in srgb, var(--lab-box-inspector-region-color) 20%, transparent);
    background-image: linear-gradient(
      135deg,
      transparent 0 24%,
      var(--lab-box-inspector-stripe-color) 24% 50%,
      transparent 50% 74%,
      var(--lab-box-inspector-stripe-color) 74% 100%
    );
    background-repeat: repeat;
    background-size: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-box-inspector-region][data-kind='gap'].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-region-color: var(--lab-box-inspector-gap-color);
    --lab-box-inspector-stripe-color: color-mix(
      in srgb,
      var(--lab-box-inspector-region-color) 64%,
      transparent
    );

    /* Border & outline */
    border-color: transparent;

    /* Background */
    background-color: color-mix(in srgb, var(--lab-box-inspector-region-color) 20%, transparent);
    background-image: linear-gradient(
      135deg,
      transparent 0 24%,
      var(--lab-box-inspector-stripe-color) 24% 50%,
      transparent 50% 74%,
      var(--lab-box-inspector-stripe-color) 74% 100%
    );
    background-repeat: repeat;
    background-size: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-box-inspector-outline].svelte-g3qfdw {
    /* Position & layer */
    position: absolute;
    z-index: 2;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-debug-box-color-strong);
    outline: var(--hx-border-width-thin) dashed
      color-mix(in srgb, var(--lab-box-inspector-size-color) 68%, transparent);
    outline-offset: var(--hx-website-size-1);
  }

  [data-lab-box-inspector-label-group].svelte-g3qfdw {
    /* Position & layer */
    position: absolute;
    z-index: 3;

    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.125rem;

    /* Transform */
    transform: var(--lab-box-inspector-label-transform);
  }

  [data-lab-box-inspector-label].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-label-color: var(--lab-box-inspector-margin-color);

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    max-width: 11rem;
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid
      color-mix(in srgb, var(--lab-box-inspector-label-color) 74%, transparent);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: 0 0.35rem;

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: color-mix(in srgb, var(--lab-box-inspector-label-color) 34%, #101724 66%);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    font-weight: var(--hx-font-weight-semibold);
    line-height: var(--hx-line-height-xs);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lab-debug-box-label-color);
  }

  [data-lab-box-inspector-label][data-kind='gap'].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-label-color: var(--lab-box-inspector-gap-color);
  }

  [data-lab-box-inspector-label][data-kind='padding'].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-label-color: var(--lab-box-inspector-padding-color);
  }

  [data-lab-box-inspector-label][data-kind='size'].svelte-g3qfdw {
    /* Custom properties */
    --lab-box-inspector-label-color: var(--lab-box-inspector-size-color);

    /* Border & outline */
    border-color: color-mix(in srgb, var(--lab-box-inspector-label-color) 82%, #fff8d6 18%);

    /* Background */
    background: color-mix(in srgb, var(--lab-box-inspector-label-color) 34%, #1f1b08 66%);
  }

[data-component-preview].svelte-1u05wxa {
    /*
     * The --hx-fluid-t-* overrides make the website fluid t-factors resolve
     * against each preview's viewport width (100cqi, resolved on the variant
     * viewport frame below) instead of the actual browser viewport (100vw).
     * Production sites use the 100vw definition from @helixer/design-system/index.css.
     */

    /* Custom properties */
    --hx-fluid-t-desktop: clamp(0, (100cqi - 1024px) / (1264px - 1024px), 1);
    --hx-fluid-t-mobile: clamp(0, (100cqi - 320px) / (600px - 320px), 1);
    --hx-fluid-t-tablet: clamp(0, (100cqi - 600px) / (1024px - 600px), 1);
    --lab-component-color-border: var(--hx-color-palette-website-slate-n700);
    --lab-component-color-panel-raised: var(--hx-color-palette-website-slate-n850);
    --lab-component-color-text-muted: var(--hx-color-palette-website-slate-n400);
    --lab-component-color-text-subtle: var(--hx-color-palette-website-slate-n200);
    --lab-component-color-viewport-background: var(--hx-color-palette-website-slate-n950);
    --lab-component-viewport-stripe-color: color-mix(
      in srgb,
      var(--hx-color-palette-website-slate-n700) 36%,
      transparent
    );

    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);
  }

  [data-component-rendering-box].svelte-1u05wxa {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
  }

  [data-variant-preview].svelte-1u05wxa {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-component-viewport-group].svelte-1u05wxa {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-component-viewport-title].svelte-1u05wxa {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    font-weight: var(--hx-font-weight-semibold);
    line-height: var(--hx-line-height-base);
    text-transform: lowercase;
    color: var(--lab-component-color-text-muted);
  }

  [data-component-viewport-variants].svelte-1u05wxa {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-component-viewport-box].svelte-1u05wxa {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Overflow & scroll */
    overflow: auto;
  }

  [data-variant-viewport-frame].svelte-1u05wxa {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    container-type: inline-size;

    /* Size */
    max-width: 100%;
    min-width: 0;
    width: var(--lab-variant-viewport-width, 100%);

    /* Background */
    background: var(--lab-component-color-viewport-background);
  }

  [data-variant-viewport-frame][data-viewport-background='stripes'].svelte-1u05wxa {
    /* Background */
    background-image: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent var(--hx-website-size-16),
      var(--lab-component-viewport-stripe-color) var(--hx-website-size-16),
      var(--lab-component-viewport-stripe-color) var(--hx-website-size-24)
    );
  }

  [data-variant-tile].svelte-1u05wxa {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    max-width: 100%;
    min-width: 0;
    width: var(--lab-variant-size, 100%);

    /* Flex & grid container */
    flex-direction: column;

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;
  }

  [data-variant-tile][data-variant-tile-mode='bare'].svelte-1u05wxa {
    /* Border & outline */
    border-color: transparent;

    /* Padding */
    padding: 0;
  }

  [data-variant-label].svelte-1u05wxa {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    text-transform: lowercase;
    color: var(--lab-component-color-text-muted);
  }

  [data-lab-component-empty].svelte-1u05wxa {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    color: var(--lab-component-color-text-subtle);
  }

[data-lab-font-inspector-overlay].svelte-z9rcqc {
    /* Custom properties */
    --lab-font-inspector-color: #b47cff;
    --lab-font-inspector-panel-transform: translateY(0);

    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: 38;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  [data-lab-font-inspector-overlay].svelte-z9rcqc :where(.svelte-z9rcqc) {
    /* Interaction */
    pointer-events: none;
    user-select: none;
  }

  [data-lab-font-inspector-outline].svelte-z9rcqc {
    /* Position & layer */
    position: absolute;
    z-index: 1;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid
      color-mix(in srgb, var(--lab-font-inspector-color) 78%, transparent);
    outline: var(--hx-border-width-thin) dashed
      color-mix(in srgb, var(--lab-font-inspector-color) 60%, transparent);
    outline-offset: var(--hx-website-size-2);

    /* Background */
    background: color-mix(in srgb, var(--lab-font-inspector-color) 10%, transparent);
  }

  [data-lab-font-inspector-panel].svelte-z9rcqc {
    /* Position & layer */
    position: absolute;
    z-index: 2;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: max-content;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid
      color-mix(in srgb, var(--lab-font-inspector-color) 72%, transparent);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--hx-website-size-8);

    /* Background */
    background: color-mix(
      in srgb,
      var(--lab-font-inspector-color) 26%,
      var(--hx-color-palette-website-slate-n1000) 74%
    );

    /* Effects */
    box-shadow: 0 var(--hx-website-size-8) var(--hx-website-size-32)
      color-mix(in srgb, var(--hx-color-palette-website-slate-black) 34%, transparent);

    /* Transform */
    transform: var(--lab-font-inspector-panel-transform);
  }

  [data-lab-font-inspector-details].svelte-z9rcqc {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: var(--hx-website-size-4);
    column-gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;
  }

  [data-lab-font-inspector-detail].svelte-z9rcqc {
    /* Box behavior */
    display: contents;
  }

  [data-lab-font-inspector-detail].svelte-z9rcqc dt:where(.svelte-z9rcqc),
  [data-lab-font-inspector-detail].svelte-z9rcqc dd:where(.svelte-z9rcqc) {
    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-lab-font-inspector-detail].svelte-z9rcqc dt:where(.svelte-z9rcqc) {
    /* Typography & color */
    text-transform: uppercase;
    color: color-mix(in srgb, var(--lab-font-inspector-color) 72%, #fff 28%);
  }

  [data-lab-font-inspector-detail].svelte-z9rcqc dd:where(.svelte-z9rcqc) {
    /* Typography & color */
    color: var(--hx-color-palette-website-slate-n50);
  }

[data-lab-header].svelte-4uun8n {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--hx-website-size-24);

    /* Border & outline */
    border-bottom: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding-bottom: var(--hx-website-size-24);
  }

  [data-lab-header].svelte-4uun8n h1:where(.svelte-4uun8n),
  [data-lab-header].svelte-4uun8n p:where(.svelte-4uun8n) {
    /* Margin */
    margin: 0;
  }

  [data-lab-header].svelte-4uun8n h1:where(.svelte-4uun8n) {
    /* Margin */
    margin-top: var(--hx-website-size-8);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: clamp(var(--hx-website-size-32), 4vw, var(--hx-website-size-56));
    line-height: clamp(var(--hx-line-height-3xl), 4vw, var(--hx-line-height-6xl));
    color: var(--lab-color-text-strong);
  }

  [data-lab-header-description].svelte-4uun8n {
    /* Size */
    max-width: calc(var(--hx-website-size-16) * 46);

    /* Margin */
    margin-top: var(--hx-website-size-16);

    /* Typography & color */
    font-size: var(--hx-font-size-base);
    line-height: var(--hx-line-height-xl);
    color: var(--lab-color-text-subtle);
  }

  [data-lab-eyebrow].svelte-4uun8n {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    text-transform: lowercase;
    color: var(--lab-color-border-active);
  }

  [data-lab-header-actions].svelte-4uun8n {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-end;
    gap: var(--hx-website-size-8);
  }

  [data-lab-control-row].svelte-4uun8n {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: var(--hx-website-size-16);
  }

  [data-lab-control-group].svelte-4uun8n {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-lab-control-label].svelte-4uun8n {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-align: right;
    text-transform: uppercase;
    color: var(--lab-color-text-disabled);
  }

  [data-lab-measure-list].svelte-4uun8n {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-lab-measure-link].svelte-4uun8n {
    /* Custom properties */
    --lab-measure-link-padding-block: var(--hx-website-size-8);

    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding: var(--lab-measure-link-padding-block) var(--hx-website-size-8);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-decoration: none;
    text-transform: lowercase;
    color: var(--lab-color-text-subtle);
  }

  [data-lab-measure-link][data-active].svelte-4uun8n {
    /* Border & outline */
    border-color: var(--lab-color-border-active);

    /* Background */
    background: var(--lab-color-panel-accent);

    /* Typography & color */
    color: var(--lab-color-text-strong);
  }

  @media (max-width: 900px) {
    [data-lab-header].svelte-4uun8n {
      /* Flex & grid container */
      flex-direction: column;
    }

    [data-lab-header-actions].svelte-4uun8n {
      /* Size */
      width: 100%;

      /* Flex & grid container */
      align-items: flex-start;
    }

    [data-lab-control-row].svelte-4uun8n {
      /* Flex & grid container */
      justify-content: flex-start;
    }

    [data-lab-control-label].svelte-4uun8n {
      /* Typography & color */
      text-align: left;
    }

    [data-lab-measure-list].svelte-4uun8n {
      /* Flex & grid container */
      justify-content: flex-start;
    }
  }

[data-demo-frame].svelte-1u2rrln {
    /* Custom properties */
    --lab-preview-frame-color-border: var(--hx-color-palette-website-slate-n700);
    --lab-preview-frame-color-panel: var(--hx-color-palette-website-slate-n900);
    --lab-preview-frame-color-sidebar: var(--hx-color-palette-website-slate-n950);

    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-demo-frame-body].svelte-1u2rrln {
    /* Size */
    min-width: 0;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-preview-frame-color-border);

    /* Overflow & scroll */
    overflow: auto;

    /* Background */
    background: var(--lab-preview-frame-color-panel);
  }

  [data-demo-frame-surface].svelte-1u2rrln {
    /* Position & layer */
    position: relative;

    /* Size */
    min-width: 0;
  }

  [data-demo-frame-overlay-anchor='surface'].svelte-1u2rrln {
    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: 20;

    /* Interaction */
    pointer-events: none;
  }

  [data-demo-frame][data-tone='dark'].svelte-1u2rrln [data-demo-frame-body]:where(.svelte-1u2rrln) {
    /* Padding */
    padding: var(--hx-website-size-24);

    /* Background */
    background: var(--lab-preview-frame-color-sidebar);
  }

  [data-demo-frame][data-tone='component'].svelte-1u2rrln [data-demo-frame-body]:where(.svelte-1u2rrln) {
    /* Border & outline */
    border: 0;

    /* Background */
    background: transparent;
  }

  [data-demo-frame][data-tone='wide'].svelte-1u2rrln [data-demo-frame-body]:where(.svelte-1u2rrln) {
    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;
  }

  @media (max-width: 720px) {
    [data-demo-frame][data-tone='dark'].svelte-1u2rrln [data-demo-frame-body]:where(.svelte-1u2rrln) {
      /* Padding */
      padding: var(--hx-website-size-16);
    }
  }

[data-lab-outline-overlay].svelte-yu2hz4 {
    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: 30;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  [data-lab-outline-box].svelte-yu2hz4 {
    /* Position & layer */
    position: absolute;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-website-size-2) dashed var(--lab-outline-color);

    /* Effects */
    opacity: var(--hx-opacity-65);
  }

  [data-lab-outline-overlay][data-surface='viewport'].svelte-yu2hz4 {
    /* Custom properties */
    --lab-outline-color: var(--hx-color-website-component-outline-inspect);
  }

  [data-lab-outline-overlay][data-surface='variant'].svelte-yu2hz4 {
    /* Custom properties */
    --lab-outline-color: var(--hx-color-website-component-outline-info);
  }

[data-lab-grid-overlay].svelte-joj2m8 {
    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: 30;

    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    justify-content: center;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  [data-lab-grid-overlay-container].svelte-joj2m8 {
    /* Box behavior */
    display: grid;

    /* Size */
    max-width: 100%;
    min-width: 0;
    width: var(--lab-grid-overlay-container-width);

    /* Flex & grid container */
    grid-template-columns: repeat(var(--lab-grid-overlay-columns), minmax(0, 1fr));
    gap: var(--lab-grid-overlay-gutter);
  }

  [data-lab-grid-overlay-column].svelte-joj2m8 {
    /* Size */
    min-width: 0;
  }

  [data-lab-grid-overlay-mode='outlines'].svelte-joj2m8 [data-lab-grid-overlay-column]:where(.svelte-joj2m8) {
    /* Border & outline */
    border-inline: var(--hx-border-width-thin) solid
      color-mix(in srgb, var(--hx-color-palette-website-mint-n200) 76%, transparent);

    /* Background */
    background: color-mix(in srgb, var(--hx-color-palette-website-mint-n200) 5%, transparent);
  }

  [data-lab-grid-overlay-mode='background'].svelte-joj2m8 [data-lab-grid-overlay-column]:where(.svelte-joj2m8) {
    /* Background */
    background: color-mix(in srgb, var(--hx-color-palette-website-mint-n200) 14%, transparent);
  }

[data-pin-group-example-stage].svelte-rvoy2p {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
    border-radius: var(--hx-radius-md);

    /* Padding */
    padding: var(--hx-website-size-24);

    /* Background */
    background: var(--hx-color-website-background-panel);
  }

  [data-pin-group-example-after].svelte-rvoy2p {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hx-website-size-80);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) dashed var(--hx-color-website-border-panel);
    border-radius: var(--hx-radius-md);

    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-pin-group-example-label].svelte-rvoy2p {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    color: var(--hx-color-website-text-muted);
  }

  [data-pin-group-example-copy].svelte-rvoy2p {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-primary);
  }

[data-scroll-slider-example-card].svelte-1tk8kd7 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 280px;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);

    /* Flex & grid item */
    flex-shrink: 0;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
    border-radius: var(--hx-radius-md);

    /* Padding */
    padding: var(--hx-website-size-24);

    /* Background */
    background: var(--hx-color-website-background-panel);
  }

  [data-scroll-slider-example-label].svelte-1tk8kd7 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    color: var(--hx-color-website-text-muted);
  }

  [data-scroll-slider-example-title].svelte-1tk8kd7 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-semibold);
    line-height: var(--hx-line-height-base);
    color: var(--hx-color-website-text-primary);
  }

  [data-scroll-slider-example-body].svelte-1tk8kd7 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-muted);
  }

[data-section-grid-base-example-cell].svelte-1wwepih {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Background */
    background: var(--hx-color-palette-website-slate-n950);
  }

  [data-section-grid-base-example-kicker].svelte-1wwepih,
  [data-section-grid-base-example-title].svelte-1wwepih {
    /* Size */
    min-width: 0;

    /* Margin */
    margin: 0;
  }

  [data-section-grid-base-example-kicker].svelte-1wwepih {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    text-transform: lowercase;
    color: var(--hx-color-palette-website-mint-n400);
  }

  [data-section-grid-base-example-title].svelte-1wwepih {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-2xl);
    text-transform: uppercase;
    color: var(--hx-color-palette-website-slate-white);
  }

[data-section-grid-example-cell].svelte-guxcaw {
    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    gap: var(--hx-website-size-16);

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Background */
    background: var(--hx-color-palette-website-slate-n950);
  }

  [data-section-grid-example-cell-tone='muted'].svelte-guxcaw {
    /* Background */
    background: var(--hx-color-palette-website-slate-n875);
  }

  [data-section-grid-example-kicker].svelte-guxcaw,
  [data-section-grid-example-title].svelte-guxcaw {
    /* Size */
    min-width: 0;

    /* Margin */
    margin: 0;
  }

  [data-section-grid-example-kicker].svelte-guxcaw {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    text-transform: lowercase;
    color: var(--hx-color-palette-website-mint-n400);
  }

  [data-section-grid-example-title].svelte-guxcaw {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-3xl);
    text-transform: uppercase;
    color: var(--hx-color-palette-website-slate-white);
  }

[data-lab-measurement-details].svelte-1qvv1yx {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-lab-measurement-viewport-group].svelte-1qvv1yx {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-lab-measurement-viewport-panels].svelte-1qvv1yx {
    /* Box behavior */
    display: grid;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    grid-template-columns: repeat(var(--lab-variant-detail-columns), minmax(0, 1fr));
    gap: var(--hx-website-size-16);
  }

  [data-lab-variant-detail].svelte-1qvv1yx {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-lab-variant-detail-label].svelte-1qvv1yx {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    text-transform: lowercase;
    color: var(--lab-color-text-muted);
  }

  @media (max-width: 900px) {
    [data-lab-measurement-viewport-panels].svelte-1qvv1yx {
      /* Flex & grid container */
      grid-template-columns: 1fr;
    }
  }

[data-lab-variant-measurement-panel].svelte-hn4g7t {
    /* Custom properties */
    --lab-variant-panel-background: color-mix(
      in srgb,
      var(--lab-variant-panel-color-sidebar) 94%,
      var(--lab-variant-panel-color-border-active) 6%
    );
    --lab-variant-panel-color-border: var(--hx-color-palette-website-slate-n700);
    --lab-variant-panel-color-border-active: var(--hx-color-palette-website-mint-n200);
    --lab-variant-panel-color-panel-accent: var(--hx-color-palette-website-slate-n875);
    --lab-variant-panel-color-sidebar: var(--hx-color-palette-website-slate-n950);
    --lab-variant-panel-color-text-base: var(--hx-color-palette-website-slate-n50);
    --lab-variant-panel-color-text-body: var(--hx-color-palette-website-slate-n150);
    --lab-variant-panel-color-text-muted: var(--hx-color-palette-website-slate-n400);
    --lab-variant-panel-color-text-strong: var(--hx-color-palette-website-slate-white);
    --lab-variant-panel-color-text-subtle: var(--hx-color-palette-website-slate-n200);
    --lab-variant-panel-compact-padding-block: var(--hx-website-size-4);

    /* Size */
    width: 100%;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
    border-radius: var(--hx-radius-sm);

    /* Background */
    background: var(--lab-variant-panel-background);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    color: var(--lab-variant-panel-color-text-base);
  }

  [data-lab-variant-prop-controls].svelte-hn4g7t p:where(.svelte-hn4g7t),
  [data-lab-variant-state-controls].svelte-hn4g7t p:where(.svelte-hn4g7t),
  [data-lab-variant-size-controls].svelte-hn4g7t p:where(.svelte-hn4g7t),
  [data-lab-combined-measurements].svelte-hn4g7t h3:where(.svelte-hn4g7t) {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: inherit;
    line-height: inherit;
  }

  [data-lab-variant-prop-controls].svelte-hn4g7t p:where(.svelte-hn4g7t),
  [data-lab-variant-state-controls].svelte-hn4g7t p:where(.svelte-hn4g7t),
  [data-lab-variant-size-controls].svelte-hn4g7t p:where(.svelte-hn4g7t),
  [data-lab-combined-measurements].svelte-hn4g7t h3:where(.svelte-hn4g7t) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-semibold);
    color: var(--lab-variant-panel-color-text-strong);
  }

  [data-lab-variant-state-list].svelte-hn4g7t,
  [data-lab-variant-size-mode-list].svelte-hn4g7t,
  [data-lab-variant-static-size].svelte-hn4g7t {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: var(--hx-website-size-8);
  }

  [data-lab-variant-state-control].svelte-hn4g7t,
  [data-lab-variant-size-control].svelte-hn4g7t {
    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--lab-variant-panel-compact-padding-block) var(--hx-website-size-8);

    /* Background */
    background: transparent;

    /* Typography & color */
    font: inherit;
    text-decoration: none;
    text-transform: uppercase;
    color: var(--lab-variant-panel-color-text-subtle);

    /* Interaction */
    cursor: pointer;
  }

  [data-lab-variant-state-control][data-active].svelte-hn4g7t,
  [data-lab-variant-size-control][data-active].svelte-hn4g7t {
    /* Border & outline */
    border-color: var(--lab-variant-panel-color-border-active);

    /* Background */
    background: var(--lab-variant-panel-color-panel-accent);

    /* Typography & color */
    color: var(--lab-variant-panel-color-text-strong);
  }

  [data-lab-variant-state-controls].svelte-hn4g7t,
  [data-lab-variant-size-controls].svelte-hn4g7t {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    align-items: stretch;
    gap: var(--hx-website-size-8);

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-variant-prop-controls].svelte-hn4g7t,
  [data-lab-measurement-section].svelte-hn4g7t {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-variant-prop-list].svelte-hn4g7t {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hx-website-size-8);
  }

  [data-lab-variant-prop-control].svelte-hn4g7t {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-4);

    /* Typography & color */
    color: var(--lab-variant-panel-color-text-body);
  }

  [data-lab-variant-prop-label].svelte-hn4g7t {
    /* Typography & color */
    text-transform: lowercase;
    color: var(--lab-variant-panel-color-text-muted);
  }

  [data-lab-variant-prop-control].svelte-hn4g7t input:where(.svelte-hn4g7t),
  [data-lab-variant-prop-control].svelte-hn4g7t select:where(.svelte-hn4g7t),
  [data-lab-variant-prop-options].svelte-hn4g7t,
  [data-lab-variant-prop-reset].svelte-hn4g7t {
    /* Size */
    min-width: 0;
    width: 100%;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--lab-variant-panel-compact-padding-block) var(--hx-website-size-8);

    /* Background */
    background: var(--lab-variant-panel-color-sidebar);

    /* Typography & color */
    font: inherit;
    color: var(--lab-variant-panel-color-text-strong);
  }

  [data-lab-variant-prop-input-row].svelte-hn4g7t {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: minmax(0, 1fr) var(--hx-website-size-32);
    gap: var(--hx-website-size-4);
  }

  [data-lab-variant-prop-input-row][data-has-options].svelte-hn4g7t {
    /* Flex & grid container */
    grid-template-columns: minmax(0, 1fr) var(--hx-website-size-32) var(--hx-website-size-32);
  }

  [data-lab-variant-prop-options].svelte-hn4g7t,
  [data-lab-variant-prop-reset].svelte-hn4g7t {
    /* Box behavior */
    display: inline-flex;

    /* Size */
    height: var(--hx-website-size-32);
    width: var(--hx-website-size-32);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Padding */
    padding: 0;
  }

  [data-lab-variant-prop-option-menu].svelte-hn4g7t {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: inline-flex;

    /* Size */
    min-width: 0;
  }

  [data-lab-variant-prop-option-list].svelte-hn4g7t {
    /* Position & layer */
    position: absolute;
    right: 0;
    top: calc(100% + var(--hx-website-size-4));
    z-index: 2;

    /* Box behavior */
    display: flex;

    /* Size */
    min-width: var(--hx-website-size-96);

    /* Flex & grid container */
    flex-direction: column;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--lab-variant-panel-compact-padding-block);

    /* Background */
    background: var(--lab-variant-panel-color-sidebar);

    /* Effects */
    box-shadow: 0 var(--hx-website-size-8) var(--hx-website-size-24)
      color-mix(in srgb, var(--hx-color-palette-website-slate-black) 32%, transparent);
  }

  [data-lab-variant-prop-option].svelte-hn4g7t {
    /* Border & outline */
    border: 0;
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--hx-website-size-4) var(--hx-website-size-8);

    /* Background */
    background: transparent;

    /* Typography & color */
    font: inherit;
    text-align: left;
    color: var(--lab-variant-panel-color-text-strong);

    /* Interaction */
    cursor: pointer;
  }

  [data-lab-variant-prop-option].svelte-hn4g7t:hover {
    /* Background */
    background: var(--lab-variant-panel-color-panel-accent);
  }

  [data-lab-variant-prop-reset].svelte-hn4g7t {
    /* Interaction */
    cursor: pointer;
  }

  [data-lab-variant-measurement-panel].svelte-hn4g7t > [data-lab-detail-section]:where(.svelte-hn4g7t) + [data-lab-detail-section]:where(.svelte-hn4g7t) {
    /* Border & outline */
    border-top: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
  }

  [data-lab-variant-static-size].svelte-hn4g7t {
    /* Typography & color */
    color: var(--lab-variant-panel-color-text-body);
  }

  [data-lab-variant-static-size].svelte-hn4g7t input:where(.svelte-hn4g7t) {
    /* Size */
    min-width: 0;
    width: var(--hx-website-size-88);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--lab-variant-panel-compact-padding-block) var(--hx-website-size-8);

    /* Background */
    background: var(--lab-variant-panel-color-sidebar);

    /* Typography & color */
    font: inherit;
    color: var(--lab-variant-panel-color-text-strong);
  }

  [data-lab-variant-static-size].svelte-hn4g7t input[aria-invalid='true']:where(.svelte-hn4g7t) {
    /* Border & outline */
    border-color: var(--lab-variant-panel-color-border-active);

    /* Typography & color */
    color: var(--lab-variant-panel-color-text-subtle);
  }

  [data-lab-variant-static-size].svelte-hn4g7t input:where(.svelte-hn4g7t):not([data-active]) {
    /* Effects */
    opacity: var(--hx-opacity-50);
  }

  [data-lab-combined-measurements].svelte-hn4g7t {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-lab-measurement-section].svelte-hn4g7t + [data-lab-measurement-section]:where(.svelte-hn4g7t) {
    /* Border & outline */
    border-top: var(--hx-border-width-thin) solid var(--lab-variant-panel-color-border);
  }

  [data-lab-measurement-grid].svelte-hn4g7t {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: minmax(var(--hx-website-size-96), max-content) minmax(0, 1fr);
    gap: var(--hx-website-size-8) var(--hx-website-size-8);

    /* Margin */
    margin: 0;
  }

  [data-lab-measurement-grid].svelte-hn4g7t div:where(.svelte-hn4g7t) {
    /* Box behavior */
    display: contents;
  }

  [data-lab-measurement-grid].svelte-hn4g7t dt:where(.svelte-hn4g7t),
  [data-lab-measurement-grid].svelte-hn4g7t dd:where(.svelte-hn4g7t) {
    /* Margin */
    margin: 0;

    /* Typography & color */
    text-align: left;
  }

  [data-lab-measurement-grid].svelte-hn4g7t dt:where(.svelte-hn4g7t) {
    /* Typography & color */
    color: var(--lab-variant-panel-color-text-body);
  }

  [data-lab-measurement-grid].svelte-hn4g7t dd:where(.svelte-hn4g7t) {
    /* Overflow & scroll */
    overflow-wrap: anywhere;

    /* Typography & color */
    color: var(--lab-variant-panel-color-text-strong);
  }

  [data-lab-variant-measurement-panel][data-state='pending'].svelte-hn4g7t [data-lab-measurement-grid]:where(.svelte-hn4g7t) dd:where(.svelte-hn4g7t) {
    /* Typography & color */
    color: var(--lab-variant-panel-color-text-muted);
  }

[data-lab-viewport-panel].svelte-ygeg4g {
    /* Custom properties */
    --lab-viewport-panel-background: color-mix(
      in srgb,
      var(--lab-viewport-panel-color-sidebar) 94%,
      var(--lab-viewport-panel-color-border-active) 6%
    );
    --lab-viewport-panel-color-border: var(--hx-color-palette-website-slate-n700);
    --lab-viewport-panel-color-border-active: var(--hx-color-palette-website-mint-n200);
    --lab-viewport-panel-color-panel-accent: var(--hx-color-palette-website-slate-n875);
    --lab-viewport-panel-color-sidebar: var(--hx-color-palette-website-slate-n950);
    --lab-viewport-panel-color-text-base: var(--hx-color-palette-website-slate-n50);
    --lab-viewport-panel-color-text-body: var(--hx-color-palette-website-slate-n150);
    --lab-viewport-panel-color-text-muted: var(--hx-color-palette-website-slate-n400);
    --lab-viewport-panel-color-text-strong: var(--hx-color-palette-website-slate-white);
    --lab-viewport-panel-color-text-subtle: var(--hx-color-palette-website-slate-n200);
    --lab-viewport-panel-compact-padding-block: var(--hx-website-size-4);
    --lab-viewport-panel-divider-width: var(--hx-website-size-1);

    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    align-items: stretch;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-viewport-panel-color-border);
    border-radius: var(--hx-radius-sm);

    /* Background */
    background: var(--lab-viewport-panel-background);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    white-space: nowrap;
    color: var(--lab-viewport-panel-color-text-base);

    /* Effects */
    box-shadow: var(--hx-effect-shadow-lg);
  }

  [data-lab-viewport-panel-title].svelte-ygeg4g {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    gap: var(--hx-website-size-2);

    /* Border & outline */
    border-right: var(--hx-border-width-thin) solid var(--lab-viewport-panel-color-border);

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-viewport-panel-title].svelte-ygeg4g p:where(.svelte-ygeg4g),
  [data-lab-viewport-panel-title].svelte-ygeg4g small:where(.svelte-ygeg4g),
  [data-lab-viewport-panel-grid].svelte-ygeg4g,
  [data-lab-viewport-panel-grid].svelte-ygeg4g dt:where(.svelte-ygeg4g),
  [data-lab-viewport-panel-grid].svelte-ygeg4g dd:where(.svelte-ygeg4g) {
    /* Margin */
    margin: 0;
  }

  [data-lab-viewport-panel-title].svelte-ygeg4g p:where(.svelte-ygeg4g) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-semibold);
    color: var(--lab-viewport-panel-color-text-strong);
  }

  [data-lab-viewport-panel-title].svelte-ygeg4g small:where(.svelte-ygeg4g) {
    /* Typography & color */
    text-transform: uppercase;
    color: var(--lab-viewport-panel-color-text-muted);
  }

  [data-lab-viewport-panel-controls].svelte-ygeg4g {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    align-items: center;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border-right: var(--hx-border-width-thin) solid var(--lab-viewport-panel-color-border);

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-viewport-panel-grid].svelte-ygeg4g {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: repeat(3, max-content);
    align-items: start;
    gap: var(--hx-website-size-8);

    /* Margin */
    margin-left: auto;

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);
  }

  [data-lab-viewport-panel-grid].svelte-ygeg4g div:where(.svelte-ygeg4g) {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: flex-start;
    gap: var(--hx-website-size-8);
  }

  [data-lab-viewport-panel-grid].svelte-ygeg4g dt:where(.svelte-ygeg4g) {
    /* Typography & color */
    color: var(--lab-viewport-panel-color-text-body);
  }

  [data-lab-viewport-panel-grid].svelte-ygeg4g dd:where(.svelte-ygeg4g) {
    /* Typography & color */
    white-space: pre-line;
    color: var(--lab-viewport-panel-color-text-strong);
  }

  [data-lab-viewport-panel].svelte-ygeg4g > [data-lab-panel-outline-link]:where(.svelte-ygeg4g) {
    /* Flex & grid item */
    align-self: center;

    /* Margin */
    margin: var(--hx-website-size-8) var(--hx-website-size-8);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-viewport-panel-color-border);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--lab-viewport-panel-compact-padding-block) var(--hx-website-size-8);

    /* Typography & color */
    text-decoration: none;
    text-transform: uppercase;
    color: var(--lab-viewport-panel-color-text-subtle);
  }

  [data-lab-panel-divider].svelte-ygeg4g {
    /* Size */
    height: var(--hx-website-size-24);
    width: var(--lab-viewport-panel-divider-width);

    /* Flex & grid item */
    align-self: center;

    /* Background */
    background: var(--lab-viewport-panel-color-border);
  }

  [data-lab-panel-outline-link][data-active].svelte-ygeg4g {
    /* Border & outline */
    border-color: var(--lab-viewport-panel-color-border-active);

    /* Background */
    background: var(--lab-viewport-panel-color-panel-accent);

    /* Typography & color */
    color: var(--lab-viewport-panel-color-text-strong);
  }

  [data-lab-viewport-panel][data-state='pending'].svelte-ygeg4g [data-lab-viewport-panel-grid]:where(.svelte-ygeg4g) dd:where(.svelte-ygeg4g) {
    /* Typography & color */
    color: var(--lab-viewport-panel-color-text-muted);
  }

[data-lab-grouped-menu].svelte-xn78x9 {
    /* Custom properties */
    --lab-menu-color-border-active: var(--hx-color-palette-website-mint-n200);
    --lab-menu-color-border-subtle: var(--hx-color-palette-website-slate-n700);
    --lab-menu-color-panel-accent: var(--hx-color-palette-website-slate-n875);
    --lab-menu-color-panel-raised: var(--hx-color-palette-website-slate-n850);
    --lab-menu-color-text-muted: var(--hx-color-palette-website-slate-n400);
    --lab-menu-color-text-secondary: var(--hx-color-palette-website-slate-n100);
    --lab-menu-color-text-subtle: var(--hx-color-palette-website-slate-n200);

    /* Size */
    min-height: 0;
  }

  [data-lab-grouped-empty].svelte-xn78x9 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    color: var(--lab-menu-color-text-subtle);
  }

  [data-lab-group-list].svelte-xn78x9,
  [data-lab-entry-list].svelte-xn78x9 {
    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-lab-group-list].svelte-xn78x9 {
    /* Box behavior */
    display: grid;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    gap: var(--hx-website-size-16);
  }

  [data-lab-group].svelte-xn78x9 {
    /* Box behavior */
    display: grid;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    gap: var(--hx-website-size-8);
  }

  [data-lab-group-toggle].svelte-xn78x9 {
    /* Custom properties */
    --lab-group-toggle-padding-block: var(--hx-website-size-8);

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hx-website-size-40);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-menu-color-border-subtle);
    border-left-color: var(--lab-menu-color-border-active);
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--lab-group-toggle-padding-block) var(--hx-website-size-8);

    /* Background */
    background: var(--lab-menu-color-panel-raised);

    /* Typography & color */
    font-size: var(--hx-font-size-xs);
    font-weight: var(--hx-font-weight-bold);
    font: inherit;
    line-height: var(--hx-line-height-base);
    text-transform: uppercase;
    color: var(--lab-menu-color-text-secondary);

    /* Interaction */
    cursor: pointer;
  }

  [data-lab-group-toggle].svelte-xn78x9 span:where(.svelte-xn78x9) {
    /* Size */
    min-width: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-lab-group-toggle].svelte-xn78x9 small:where(.svelte-xn78x9) {
    /* Size */
    min-width: var(--hx-website-size-24);

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding: 0 var(--hx-website-size-8);

    /* Background */
    background: var(--lab-menu-color-panel-accent);

    /* Typography & color */
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-base);
    text-align: center;
    color: var(--lab-menu-color-text-muted);
  }

  [data-lab-group-meta].svelte-xn78x9 {
    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    align-items: center;
    gap: var(--hx-website-size-8);
  }

  [data-lab-group-chevron].svelte-xn78x9 {
    /* Transform */
    rotate: 0deg;

    /* Transition & animation */
    transition: rotate var(--hx-motion-duration-fast) var(--hx-motion-easing-standard);
  }

  [data-lab-group-toggle][aria-expanded='true'].svelte-xn78x9 [data-lab-group-chevron]:where(.svelte-xn78x9) {
    /* Transform */
    rotate: 90deg;
  }

  [data-lab-entry-list].svelte-xn78x9 {
    /* Box behavior */
    display: grid;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    gap: var(--hx-website-size-4);
  }

  [data-lab-entry-list].svelte-xn78x9 > li:where(.svelte-xn78x9) {
    /* Size */
    min-width: 0;
  }

  [data-lab-entry-link].svelte-xn78x9 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hx-website-size-40);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-8);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid transparent;
    border-radius: var(--hx-radius-sm);

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-md);
    text-decoration: none;
    color: inherit;
  }

  [data-lab-entry-title].svelte-xn78x9 {
    /* Size */
    min-width: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  [data-lab-entry-done].svelte-xn78x9 {
    /* Flex & grid item */
    flex-shrink: 0;

    /* Typography & color */
    color: var(--hx-color-palette-website-mint-n200);
  }

  [data-lab-entry-link][data-active].svelte-xn78x9 {
    /* Border & outline */
    border-color: var(--lab-menu-color-border-active);

    /* Background */
    background: var(--lab-menu-color-panel-accent);
  }

[data-lab-sidebar].svelte-1l6rek {
    /* Position & layer */
    position: sticky;
    top: 0;
    z-index: 20;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100vh;
    min-height: 0;
    min-width: 0;
    width: var(--lab-sidebar-expanded-width);

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border-right: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding: var(--hx-website-size-24);

    /* Overflow & scroll */
    overflow-x: hidden;
    overflow-y: auto;

    /* Background */
    background: var(--lab-color-sidebar);

    /* Transition & animation */
    transition:
      width var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      padding var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek {
    /* Size */
    width: var(--lab-sidebar-collapsed-width);

    /* Flex & grid container */
    align-items: center;

    /* Padding */
    padding: var(--hx-website-size-24) var(--hx-website-size-16) var(--hx-website-size-16);
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek:hover,
  [data-lab-sidebar][data-collapsed].svelte-1l6rek:focus-within {
    /* Size */
    width: var(--lab-sidebar-expanded-width);

    /* Flex & grid container */
    align-items: stretch;

    /* Padding */
    padding: var(--hx-website-size-24);
  }

  [data-lab-sidebar-header].svelte-1l6rek {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-16);
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek [data-lab-sidebar-header]:where(.svelte-1l6rek) {
    /* Flex & grid container */
    justify-content: center;
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek:hover [data-lab-sidebar-header]:where(.svelte-1l6rek),
  [data-lab-sidebar][data-collapsed].svelte-1l6rek:focus-within [data-lab-sidebar-header]:where(.svelte-1l6rek) {
    /* Flex & grid container */
    justify-content: space-between;
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek [data-lab-home]:where(.svelte-1l6rek) {
    /* Box behavior */
    display: none;
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek:hover [data-lab-home]:where(.svelte-1l6rek),
  [data-lab-sidebar][data-collapsed].svelte-1l6rek:focus-within [data-lab-home]:where(.svelte-1l6rek) {
    /* Box behavior */
    display: inline;
  }

  [data-lab-sidebar-body].svelte-1l6rek {
    /* Box behavior */
    display: flex;

    /* Size */
    min-height: 0;
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek [data-lab-sidebar-body]:where(.svelte-1l6rek) {
    /* Box behavior */
    display: none;
  }

  [data-lab-sidebar][data-collapsed].svelte-1l6rek:hover [data-lab-sidebar-body]:where(.svelte-1l6rek),
  [data-lab-sidebar][data-collapsed].svelte-1l6rek:focus-within [data-lab-sidebar-body]:where(.svelte-1l6rek) {
    /* Box behavior */
    display: flex;
  }

  [data-lab-sidebar-toggle].svelte-1l6rek {
    /* Box behavior */
    display: flex;

    /* Size */
    height: var(--hx-website-size-32);
    width: var(--hx-website-size-32);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex-shrink: 0;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);
    border-radius: var(--hx-radius-sm);

    /* Background */
    background: transparent;

    /* Typography & color */
    text-decoration: none;
    color: var(--lab-color-text-muted);

    /* Interaction */
    cursor: pointer;
  }

  [data-lab-sidebar-toggle].svelte-1l6rek:hover {
    /* Border & outline */
    border-color: var(--lab-color-border-active);

    /* Typography & color */
    color: var(--lab-color-text-secondary);
  }

  [data-lab-home].svelte-1l6rek,
  [data-lab-kind-link].svelte-1l6rek {
    /* Typography & color */
    text-decoration: none;
    color: inherit;
  }

  [data-lab-home].svelte-1l6rek {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-extrabold);
    text-transform: uppercase;
    color: var(--lab-color-border-active);
  }

  [data-lab-kind-list].svelte-1l6rek {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-lab-kind-link].svelte-1l6rek {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hx-website-size-56);
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    gap: var(--hx-website-size-4);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding: var(--hx-website-size-8);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--lab-color-panel-raised);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-base);
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lab-color-text-subtle);
  }

  [data-lab-kind-link].svelte-1l6rek span:where(.svelte-1l6rek) {
    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--lab-color-text-muted);
  }

  [data-lab-kind-link][data-active].svelte-1l6rek {
    /* Border & outline */
    border-color: var(--lab-color-border-active);

    /* Typography & color */
    color: var(--lab-color-text-strong);
  }

  @media (max-width: 900px) {
    [data-lab-sidebar].svelte-1l6rek {
      /* Position & layer */
      position: static;

      /* Size */
      height: auto;
      max-height: none;
      width: 100%;

      /* Border & outline */
      border-bottom: var(--hx-border-width-thin) solid var(--lab-color-border);
      border-right: none;
    }

    [data-lab-sidebar][data-collapsed].svelte-1l6rek,
    [data-lab-sidebar][data-collapsed].svelte-1l6rek:hover,
    [data-lab-sidebar][data-collapsed].svelte-1l6rek:focus-within {
      /* Size */
      width: 100%;
    }
  }

[data-website-tokens].svelte-1efg06p {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    gap: var(--hx-website-size-32);
  }

  [data-website-tokens-header].svelte-1efg06p {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--hx-website-size-24);

    /* Border & outline */
    border-bottom: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding-bottom: var(--hx-website-size-24);
  }

  [data-website-tokens-header].svelte-1efg06p h1:where(.svelte-1efg06p),
  [data-website-tokens-header].svelte-1efg06p p:where(.svelte-1efg06p),
  [data-website-token-section-header].svelte-1efg06p h2:where(.svelte-1efg06p),
  [data-website-token-section-header].svelte-1efg06p p:where(.svelte-1efg06p) {
    /* Margin */
    margin: 0;
  }

  [data-website-tokens-header].svelte-1efg06p h1:where(.svelte-1efg06p) {
    /* Margin */
    margin-top: var(--hx-website-size-8);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-4xl);
    line-height: var(--hx-line-height-5xl);
    color: var(--lab-color-text-strong);
  }

  [data-website-tokens-description].svelte-1efg06p {
    /* Size */
    max-width: calc(var(--hx-website-size-16) * 46);

    /* Margin */
    margin-top: var(--hx-website-size-16);

    /* Typography & color */
    font-size: var(--hx-font-size-base);
    line-height: var(--hx-line-height-xl);
    color: var(--lab-color-text-subtle);
  }

  [data-website-token-summary].svelte-1efg06p {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;
  }

  [data-website-token-summary-item].svelte-1efg06p {
    /* Box behavior */
    display: grid;
    /* Interactivity */
    appearance: none;

    /* Flex & grid container */
    gap: var(--hx-website-size-4);

    /* Flex & grid item */
    flex: 0 0 var(--hx-website-size-80);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);
    border-radius: var(--hx-radius-sm);

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Background */
    background: var(--lab-color-panel-raised);

    /* Typography & color */
    font: inherit;
    text-align: left;
    text-decoration: none;
    color: inherit;

    /* Interaction */
    cursor: pointer;
  }

  [data-website-token-summary-item][data-active].svelte-1efg06p {
    /* Border & outline */
    border-color: var(--lab-color-border-active);

    /* Background */
    background: var(--lab-color-chip-active);
  }

  [data-website-token-summary-item].svelte-1efg06p:hover {
    /* Border & outline */
    border-color: var(--lab-color-border-active);
  }

  [data-website-token-summary-item].svelte-1efg06p:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-website-token-summary-label].svelte-1efg06p {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-transform: uppercase;
    color: var(--lab-color-text-muted);
  }

  [data-website-token-summary-value].svelte-1efg06p {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-2xl);
    color: var(--lab-color-text-strong);
  }

  [data-website-token-section].svelte-1efg06p {
    /* Box behavior */
    display: grid;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    gap: var(--hx-website-size-16);
  }

  [data-website-token-section-header].svelte-1efg06p {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--hx-website-size-16);
  }

  [data-website-token-section-header].svelte-1efg06p h2:where(.svelte-1efg06p) {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    line-height: var(--hx-line-height-2xl);
    color: var(--lab-color-text-strong);
  }

  [data-website-token-section-header].svelte-1efg06p p:where(.svelte-1efg06p) {
    /* Margin */
    margin-top: var(--hx-website-size-8);

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    color: var(--lab-color-text-subtle);
  }

  [data-website-token-section-header].svelte-1efg06p span:where(.svelte-1efg06p) {
    /* Size */
    min-width: var(--hx-website-size-40);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);
    border-radius: var(--hx-radius-sm);

    /* Padding */
    padding: var(--hx-website-size-8) var(--hx-website-size-8);

    /* Background */
    background: var(--lab-color-panel-accent);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-sm);
    text-align: center;
    color: var(--lab-color-text-strong);
  }

  [data-website-token-table-scroll].svelte-1efg06p {
    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);
    border-radius: var(--hx-radius-sm);

    /* Overflow & scroll */
    overflow-x: auto;

    /* Background */
    background: var(--lab-color-panel);
  }

  [data-website-token-table].svelte-1efg06p {
    /* Size */
    min-width: calc(var(--hx-website-size-16) * 68);
    width: 100%;

    /* Border & outline */
    border-collapse: collapse;

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
    color: var(--lab-color-text-base);
  }

  [data-website-token-table].svelte-1efg06p th:where(.svelte-1efg06p),
  [data-website-token-table].svelte-1efg06p td:where(.svelte-1efg06p) {
    /* Border & outline */
    border-bottom: var(--hx-border-width-thin) solid var(--lab-color-border);

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Typography & color */
    text-align: left;
    vertical-align: middle;
  }

  [data-website-token-table].svelte-1efg06p thead:where(.svelte-1efg06p) th:where(.svelte-1efg06p) {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-transform: uppercase;
    color: var(--lab-color-text-muted);
  }

  [data-website-token-table].svelte-1efg06p tbody:where(.svelte-1efg06p) th:where(.svelte-1efg06p) {
    /* Size */
    width: 24%;

    /* Typography & color */
    font-weight: var(--hx-font-weight-regular);
  }

  [data-website-token-table].svelte-1efg06p tbody:where(.svelte-1efg06p) tr:where(.svelte-1efg06p):last-child th:where(.svelte-1efg06p),
  [data-website-token-table].svelte-1efg06p tbody:where(.svelte-1efg06p) tr:where(.svelte-1efg06p):last-child td:where(.svelte-1efg06p) {
    /* Border & outline */
    border-bottom: 0;
  }

  [data-website-token-table].svelte-1efg06p code:where(.svelte-1efg06p) {
    /* Overflow & scroll */
    overflow-wrap: anywhere;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    line-height: var(--hx-line-height-md);
    color: var(--lab-color-text-secondary);
  }

  [data-website-token-swatch].svelte-1efg06p {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-24);
    width: var(--hx-website-size-40);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border);
    border-radius: var(--hx-radius-xs);

    /* Background */
    background: var(--website-token-preview);
  }

  [data-website-token-size-track].svelte-1efg06p {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: calc(var(--hx-website-size-16) * 16);
    width: 100%;

    /* Flex & grid container */
    justify-content: flex-start;
  }

  [data-website-token-size-pill].svelte-1efg06p {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-16);
    min-width: var(--hx-website-size-2);
    width: min(var(--website-token-dimension), 100%);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--lab-color-border-active);
    border-radius: var(--hx-radius-xs);

    /* Background */
    background: var(--lab-color-chip-active);
  }

  [data-website-token-empty].svelte-1efg06p {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    line-height: var(--hx-line-height-xs);
    text-transform: uppercase;
    color: var(--lab-color-text-muted);
  }

  [data-website-token-derived-list].svelte-1efg06p {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    gap: var(--hx-website-size-4);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  @media (max-width: 900px) {
    [data-website-tokens-header].svelte-1efg06p,
    [data-website-token-section-header].svelte-1efg06p {
      /* Flex & grid container */
      flex-direction: column;
      align-items: flex-start;
    }

    [data-website-token-summary].svelte-1efg06p {
      /* Size */
      width: 100%;

      /* Flex & grid container */
      justify-content: flex-start;
    }

    [data-website-tokens-header].svelte-1efg06p h1:where(.svelte-1efg06p) {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
      line-height: var(--hx-line-height-4xl);
    }
  }

[data-page-shell].svelte-1nbud3h {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    /* sticky-footer column: main grows to absorb spare height, so the footer rests on the bottom
       of the viewport when the page is shorter than the screen and scrolls normally when taller. */
    display: flex;
    /* own stacking context so the z-index:-1 backgroundSlot layers above the shell
       background fill instead of disappearing behind it. */
    isolation: isolate;

    /* Size */
    min-height: 100vh;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-skip-link].svelte-1nbud3h {
    /* Position & layer */
    position: absolute;
    z-index: 100;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-16);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--hx-color-website-background-page);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    color: var(--hx-color-website-text-primary);

    /* Effects */
    clip-path: inset(50%);
  }

  [data-skip-link].svelte-1nbud3h:focus-visible {
    /* Position & layer */
    inset-block-start: var(--hx-website-size-16);
    inset-inline-start: var(--hx-website-size-16);

    /* Size */
    height: auto;
    width: auto;

    /* Border & outline */
    border-radius: var(--hx-radius-2xs);
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);

    /* Effects */
    clip-path: none;
  }

  [data-page-shell-content].svelte-1nbud3h {
    /* Box behavior */
    display: contents;
  }

  [data-page-shell-background].svelte-1nbud3h {
    /* Position & layer */
    /* sits above the shell background fill, behind all in-flow content. */
    inset: 0;
    position: absolute;
    z-index: -1;

    /* Interaction */
    pointer-events: none;
  }

  [data-page-shell][data-background='n950'].svelte-1nbud3h {
    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-page-shell][data-background='n1000'].svelte-1nbud3h {
    /* Background */
    background: var(--hx-color-website-background-page-deep);
  }

  [data-page-shell-main].svelte-1nbud3h {
    /* Flex & grid item */
    /* grow to fill spare vertical space (never shrink) so the footer is pushed to the bottom. */
    flex: 1 0 auto;
  }

  [data-page-shell-main].svelte-1nbud3h:focus {
    /* Border & outline */
    /* Programmatic-only focus target (skip-link destination, never reached via Tab): suppress the
       ring instead of showing one around the whole main region. */
    outline: none;
  }

[data-contact-bg].svelte-24z98u {
    /* Position & layer */
    /* the image is a band from ~245px (just below the heading, as in Figma) to the
       bottom; the band's 1.6 ratio matches the asset so its bright lobe lands mid-page, not cropped. */
    inset-block-end: 0;
    inset-block-start: 244px;
    inset-inline: 0;
    position: absolute;

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-contact-bg-overlay].svelte-24z98u {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    /* Mirror the Figma background composite: darken the top ~half of the glow band (solid n950
       fading out by ~49%) so the header + heading stay dark, plus a flat 20% black dim across the
       whole band so the glow reads softly instead of blowing out. */
    background:
      linear-gradient(
        180deg,
        var(--hx-color-palette-website-slate-n950) 0%,
        var(--hx-color-palette-website-slate-n950) 8.7%,
        transparent 48.8%
      ),
      color-mix(in srgb, var(--hx-color-palette-website-slate-black) 20%, transparent);

    /* Interaction */
    pointer-events: none;
  }

  @media (max-width: 599px) {
    [data-contact-bg].svelte-24z98u {
      /* Position & layer */
      /* Figma CTA_Mobile starts the glow lower (mid-form), so the header, heading and most of the
         form stay dark and the glow lights the lower form, details and footer. */
      inset-block-start: 680px;
    }

    [data-contact-bg-overlay].svelte-24z98u {
      /* Background */
      /* Mobile composite (Figma 1309:16081): solid n950 to ~8.9% then transparent by ~44.8%. */
      background:
        linear-gradient(
          180deg,
          var(--hx-color-palette-website-slate-n950) 0%,
          var(--hx-color-palette-website-slate-n950) 8.9%,
          transparent 44.8%
        ),
        color-mix(in srgb, var(--hx-color-palette-website-slate-black) 20%, transparent);
    }
  }

[data-section].svelte-1vmtem {
    /* Custom properties */
    --section-padding-block: calc(
      var(--hx-website-size-48) + var(--hx-website-size-32) *
        (1 - var(--hx-fluid-t-tablet) + var(--hx-fluid-t-desktop))
    );
    --section-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-40) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-16) * var(--hx-fluid-t-desktop)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-copy].svelte-1vmtem {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);
  }

  [data-actions].svelte-1vmtem {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 100%;
  }

  [data-body].svelte-1vmtem {
    /* Size */
    max-width: 100%;

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: normal;
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 599px) {
    [data-actions].svelte-1vmtem {
      /* Size */
      width: 100%;
    }

    [data-body].svelte-1vmtem {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
    }
  }

/* Owns the box model Card leaves to the site: fluid padding, full-height fill, title color, and
     the body/title overrides Card exposes as custom properties. */
  [data-card-wrapper].svelte-prahom {
    /* Custom properties */
    --card-body-color: var(--hx-color-website-text-disabled);
    --card-body-min-lines: 5;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Padding */
    padding-block: var(--hx-website-size-56);
    padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-title-reserve].svelte-prahom {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: calc(var(--build-title-lines, 2) * 1lh);
  }

  [data-title-text].svelte-prahom {
    /* Box behavior */
    display: block;
  }

  @media (max-width: 599px) {
    /* `*` prefix (zero specificity impact) keeps this responsive override of Card's exposed
       --card-body-min-lines out of the single-owner first-data-rule custom-property scan. */
    *[data-card-wrapper].svelte-prahom {
      /* Custom properties */
      --card-body-min-lines: 0;
    }

    [data-title-reserve].svelte-prahom {
      /* Size */
      min-height: 0;
    }

    /* Card's own body scale doesn't shrink line-height at this breakpoint; restore the tighter
       leading this section renders on mobile. */
    [data-card-body-text].svelte-prahom {
      /* Typography & color */
      line-height: var(--hx-line-height-md);
    }
  }

[data-no-break].svelte-10spthh {
    /* Typography & color */
    white-space: nowrap;
  }

[data-background].svelte-19r1nh9 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    width: 100%;

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-media].svelte-19r1nh9 {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-overlay].svelte-19r1nh9 {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    background: linear-gradient(
      180deg,
      var(--hx-color-palette-website-slate-n950) 30.321%,
      transparent 100%
    );
  }

  [data-line].svelte-19r1nh9 {
    /* Margin */
    margin: 0;
  }

  [data-line].svelte-19r1nh9 strong:where(.svelte-19r1nh9) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  @media (max-width: 599px) {
    [data-media].svelte-19r1nh9 {
      /* Position & layer */
      left: -169.26%;
      top: -38.36%;

      /* Size */
      height: 138.36%;
      width: 699.03%;
    }

    [data-overlay].svelte-19r1nh9 {
      /* Background */
      background: linear-gradient(
        180deg,
        var(--hx-color-palette-website-slate-n950) 18.977%,
        transparent 100%
      );
    }
  }

[data-section].svelte-1xurf6z {
    /* Custom properties */
    --section-padding-block: calc(
      var(--hx-website-size-32) + var(--hx-website-size-56) * var(--hx-fluid-t-tablet)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-32) + (var(--hx-website-size-8) + var(--hx-website-size-4)) *
        var(--hx-fluid-t-tablet)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: center;
    gap: calc(var(--hx-website-size-96) + var(--hx-website-size-4));

    /* Padding */
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-heading].svelte-1xurf6z,
  [data-subcopy].svelte-1xurf6z {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
  }

  [data-heading].svelte-1xurf6z {
    /* Flex & grid item */
    flex: 0 0 auto;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-size: var(--hx-font-size-5xl);
    text-wrap: balance;
    white-space: nowrap;
    color: transparent;
  }

  [data-subcopy].svelte-1xurf6z {
    /* Size */
    min-width: 0;

    /* Flex & grid item */
    flex: 1 1 0;

    /* Typography & color */
    font-size: var(--hx-font-size-lg);
  }

  @media (max-width: 1023px) {
    [data-section].svelte-1xurf6z {
      /* Flex & grid container */
      flex-direction: column;
      align-items: stretch;
      gap: var(--hx-website-size-16);
    }

    [data-heading].svelte-1xurf6z {
      /* Typography & color */
      white-space: normal;
    }
  }

  @media (max-width: 599px) {
    [data-heading].svelte-1xurf6z {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }

    [data-subcopy].svelte-1xurf6z {
      /* Typography & color */
      font-size: var(--hx-font-size-base);
    }
  }

[data-line].svelte-xwmkq5 {
    /* Margin */
    margin: 0;
  }

[data-silo-placeholder].svelte-1netgkd {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: 100%;

    /* Padding */
    padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-4) + var(--hx-website-size-1)
    );
  }

  [data-silo-placeholder].svelte-1netgkd::before {
    /* Box behavior */
    display: block;

    /* Size */
    aspect-ratio: 1165 / 558;

    /* Generated content */
    content: '';
  }

  @media (max-width: 599px) {
    [data-silo-placeholder].svelte-1netgkd {
      /* Padding */
      padding-block: var(--hx-website-size-96);
      padding-inline: 0;
    }

    [data-silo-placeholder].svelte-1netgkd::before {
      /* Size */
      aspect-ratio: 351 / 1044;
    }
  }

/* Section */
  [data-section].svelte-1hqqzgf {
    /* Custom properties */
    --section-badge-overlap: calc(var(--section-badge-size) / 2);
    --section-badge-size: calc(var(--hx-website-size-128) + var(--hx-website-size-2));
    --section-content-gap: var(--hx-website-size-40);
    --section-content-width: 812px;
    --section-copy-gap: calc(
      var(--hx-website-size-32) - var(--hx-website-size-8) * var(--hx-fluid-t-tablet)
    );
    --section-padding-block: calc(
      var(--hx-website-size-40) + var(--hx-website-size-40) * var(--hx-fluid-t-desktop)
    );
    --section-panel-padding-block-end: calc(
      var(--hx-website-size-56) + var(--hx-website-size-48) * var(--hx-fluid-t-desktop)
    );
    --section-panel-padding-block-start: calc(
      var(--section-badge-overlap) + var(--hx-website-size-40)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;

    /* Padding */
    padding-block-end: calc(var(--section-padding-block) + var(--hx-website-size-80));
    padding-block-start: var(--section-padding-block);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  /* Badge */
  [data-badge].svelte-1hqqzgf {
    /* Position & layer */
    position: relative;
    z-index: 2;

    /* Box behavior */
    display: block;

    /* Size */
    aspect-ratio: 1;
    width: var(--section-badge-size);

    /* Flex & grid item */
    flex: 0 0 auto;

    /* Margin */
    margin-block-end: calc(-1 * var(--section-badge-overlap));

    /* Typography & color */
    color: var(--hx-color-website-text-on-accent);
  }

  /* Panel */
  [data-panel].svelte-1hqqzgf {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 0;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--section-content-gap);

    /* Border & outline */
    /* transparent 1px reserves layout; the exact 5/5 dash is painted via background. */
    border: var(--hx-border-width-thin) solid transparent;

    /* Padding */
    padding-block: var(--section-panel-padding-block-start) var(--section-panel-padding-block-end);
    padding-inline: var(--hx-website-size-40);

    /* Background */
    /* slate-n850 fill kept; Figma dash strokeDashes [5,5] (mint-n600) on the border ring. */
    background-color: var(--hx-color-website-background-panel);
    background-image:
      repeating-linear-gradient(
        90deg,
        var(--hx-color-website-border-accent-bold) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        90deg,
        var(--hx-color-website-border-accent-bold) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        180deg,
        var(--hx-color-website-border-accent-bold) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        180deg,
        var(--hx-color-website-border-accent-bold) 0 5px,
        transparent 5px 10px
      );
    background-origin: border-box;
    background-position:
      top left,
      bottom left,
      left top,
      right top;
    background-repeat: no-repeat;
    background-size:
      100% var(--hx-border-width-thin),
      100% var(--hx-border-width-thin),
      var(--hx-border-width-thin) 100%,
      var(--hx-border-width-thin) 100%;
  }

  /* Copy */
  [data-copy].svelte-1hqqzgf {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: var(--section-content-width);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--section-copy-gap);
  }

  /* Heading */
  [data-heading].svelte-1hqqzgf {
    /* Size */
    width: 100%;

    /* Margin */
    margin: 0;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-tight);
    text-transform: uppercase;
    text-wrap: balance;
    color: transparent;
  }

  /* Body */
  [data-body].svelte-1hqqzgf {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-2xl);
  }

  /* Actions */
  [data-actions].svelte-1hqqzgf {
    /* Size */
    max-width: var(--section-content-width);
    min-width: 0;
    width: 100%;
  }

  /* Line */
  [data-line].svelte-1hqqzgf {
    /* Margin */
    margin: 0;
  }

  [data-line].svelte-1hqqzgf strong:where(.svelte-1hqqzgf) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  /* Responsive — mobile */
  @media (max-width: 599px) {
    [data-heading].svelte-1hqqzgf {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }
  }

[data-contact-form-intro].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    /* Padding */
    padding-block: var(--contact-form-intro-padding-block);
    padding-inline: var(--contact-form-intro-padding-inline);
  }

  [data-contact-form-copy].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--contact-form-copy-gap);
  }

  [data-heading].svelte-1rjs7ez,
  [data-body].svelte-1rjs7ez p:where(.svelte-1rjs7ez) {
    /* Margin */
    margin: 0;
  }

  [data-heading].svelte-1rjs7ez {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--contact-form-heading-size);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-tight);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-body].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--contact-form-body-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: normal;
    white-space: pre-wrap;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-body].svelte-1rjs7ez strong:where(.svelte-1rjs7ez) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  [data-contact-form-details].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--hx-website-size-40);
  }

  [data-contact-form-details-inline].svelte-1rjs7ez {
    /* Flex & grid container */
    /* Address and company columns size to their content and push to the column edges (matching the
       Figma 1440 layout), but wrap — company drops below address — on narrower desktop widths
       instead of shrinking and wrapping the IBAN or overflowing into the form. */
    flex-wrap: wrap;
    row-gap: var(--hx-website-size-24);
  }

  [data-contact-form-details-stacked].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--hx-website-size-48);

    /* Padding */
    padding-block: var(--hx-website-size-40);
    padding-inline: var(--hx-website-size-24);
  }

  [data-contact-form-detail-block].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;

    /* Flex & grid item */
    /* Size to content and never wrap a line, so the IBAN stays on one row (inline + stacked). */
    flex: 0 0 auto;

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--contact-form-detail-size);
    font-weight: var(--hx-font-weight-regular);
    font-style: normal;
    line-height: var(--hx-line-height-md);
    white-space: nowrap;
    color: var(--hx-color-website-text-primary);
  }

  [data-contact-form-detail-block].svelte-1rjs7ez a:where(.svelte-1rjs7ez) {
    /* Typography & color */
    color: currentColor;
  }

  [data-contact-form-detail-line='true'].svelte-1rjs7ez,
  [data-contact-form-detail-link].svelte-1rjs7ez {
    /* Typography & color */
    text-decoration: underline;
    text-decoration-skip-ink: none;
  }

  [data-contact-form-panel].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;

    /* Padding */
    padding-block: var(--contact-form-padding-block);
    padding-inline: var(--contact-form-padding-inline-start) var(--contact-form-padding-inline-end);
  }

  [data-contact-form-panel-success].svelte-1rjs7ez {
    /* Flex & grid container */
    justify-content: center;
  }

  [data-visually-hidden].svelte-1rjs7ez {
    /* Position & layer */
    position: absolute;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    white-space: nowrap;

    /* Effects */
    clip-path: inset(50%);
  }

  [data-contact-form-success].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-contact-form-success-heading].svelte-1rjs7ez {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-2xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-contact-form-success-body].svelte-1rjs7ez {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--contact-form-body-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-secondary);
  }

  [data-contact-form-fields].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);
  }

  [data-contact-form-field].svelte-1rjs7ez {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-contact-form-label].svelte-1rjs7ez {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--contact-form-label-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-primary);
  }

  [data-contact-form-optional].svelte-1rjs7ez {
    /* Margin */
    margin-inline-start: var(--hx-website-size-8);

    /* Typography & color */
    color: var(--contact-form-muted-color);
  }

  [data-contact-form-input].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    min-height: var(--hx-website-size-40);
    min-width: 0;
    width: 100%;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--contact-form-control-border);
    border-radius: var(--hx-radius-2xs);

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-16);

    /* Background */
    background: var(--contact-form-control-background);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--contact-form-value-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-primary);
  }

  [data-contact-form-input].svelte-1rjs7ez::placeholder,
  [data-contact-form-phone-input].svelte-1rjs7ez::placeholder {
    /* Typography & color */
    color: var(--contact-form-placeholder-color);
  }

  [data-contact-form-input].svelte-1rjs7ez:focus-visible,
  [data-contact-form-phone].svelte-1rjs7ez:focus-within {
    /* Border & outline */
    border-color: var(--hx-color-website-border-focus);
    outline: none;
  }

  [data-contact-form-input].svelte-1rjs7ez:user-invalid {
    /* Border & outline */
    border-color: var(--hx-color-website-border-negative);
    outline: none;
  }

  [data-contact-form-message].svelte-1rjs7ez {
    /* Size */
    min-height: var(--hx-website-size-80);
  }

  [data-contact-form-turnstile].svelte-1rjs7ez {
    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-contact-form-error].svelte-1rjs7ez {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--contact-form-value-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-negative);
  }

  [data-contact-form-phone].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hx-website-size-40);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: stretch;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--contact-form-control-border);
    border-radius: var(--hx-radius-2xs);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--contact-form-control-background);
  }

  [data-contact-form-flag].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 44px;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: 0 0 44px;

    /* Border & outline */
    border-inline-end: var(--hx-border-width-thin) solid var(--contact-form-control-border);
  }

  [data-contact-form-flag].svelte-1rjs7ez span:where(.svelte-1rjs7ez) {
    /* Box behavior */
    display: block;

    /* Size */
    height: 3px;
    width: 12px;
  }

  [data-contact-form-flag].svelte-1rjs7ez span:where(.svelte-1rjs7ez):nth-child(1) {
    /* Background */
    background: var(--hx-color-palette-website-flag-nl-red);
  }

  [data-contact-form-flag].svelte-1rjs7ez span:where(.svelte-1rjs7ez):nth-child(2) {
    /* Background */
    background: var(--hx-color-palette-website-slate-white);
  }

  [data-contact-form-flag].svelte-1rjs7ez span:where(.svelte-1rjs7ez):nth-child(3) {
    /* Background */
    background: var(--hx-color-palette-website-flag-nl-blue);
  }

  [data-contact-form-phone-input].svelte-1rjs7ez {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    min-width: 0;

    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border: none;
    outline: none;

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-16);

    /* Background */
    background: transparent;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--contact-form-value-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-primary);
  }

  @media (max-width: 1023px) {
    [data-contact-form-details-inline].svelte-1rjs7ez {
      /* Box behavior */
      display: none;
    }
  }

  @media (max-width: 599px) {
    [data-contact-form-details-stacked].svelte-1rjs7ez {
      /* Flex & grid container */
      flex-direction: column;
      gap: var(--hx-website-size-48);
    }
  }

[data-industries].svelte-16eh329 {
    /* Custom properties */
    --section-grid-inner-padding-block-end: var(--section-industries-padding-block);
    --section-grid-inner-padding-block-start: var(--section-industries-padding-block);
    --section-grid-inner-padding-inline-end: var(--section-industries-padding-inline);
    --section-grid-inner-padding-inline-start: var(--section-industries-padding-inline);
    --section-industries-gap: calc(
      var(--hx-website-size-48) + var(--hx-website-size-56) * var(--hx-fluid-t-desktop)
    );
    --section-industries-padding-block: var(--hx-website-size-48);
    --section-industries-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-24) * var(--hx-fluid-t-tablet)
    );
    --section-tab-padding-inline: var(--hx-website-size-24);

    /* Box behavior */
    box-sizing: border-box;
    display: grid;

    /* Size */
    height: 100%;
    min-height: 0;
    min-width: 0;
    width: 100%;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-surface].svelte-16eh329 {
    /* Box behavior */
    display: grid;

    /* Size */
    height: 100%;
    min-width: 0;

    /* Flex & grid item */
    grid-area: 1 / 1;

    /* Interaction */
    pointer-events: none;
  }

  [data-copy].svelte-16eh329 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-body].svelte-16eh329 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-secondary);
  }

  [data-main].svelte-16eh329 {
    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--hx-website-size-24);

    /* Interaction */
    pointer-events: auto;
  }

  [data-content].svelte-16eh329 {
    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Interaction */
    pointer-events: auto;
  }

  [data-kicker].svelte-16eh329 {
    /* Margin */
    /* Stays flush at the column's top, level with the right-hand text block's top (H-7); the
       heading block's own margin-block: auto is what centres it and pushes the slider down. */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-auto-advance-desktop].svelte-16eh329 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: center;
  }

  [data-auto-advance-mobile].svelte-16eh329 {
    /* Box behavior */
    display: none;

    /* Flex & grid container */
    align-items: center;
  }

  [data-heading-stack].svelte-16eh329 {
    /* Box behavior */
    display: grid;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Margin */
    /* Centres the heading between the (flush-top) kicker and the (flush-bottom) slider: both auto
       margins consume the column's leftover vertical space in equal halves (H-7). */
    margin-block: auto;
  }

  [data-mobile-heading-stack].svelte-16eh329 {
    /* Box behavior */
    display: none;
  }

  /* All industry headings stack in one grid cell so the block always reserves the tallest one; switching
     tabs only toggles visibility, so the slider below never shifts. */
  [data-tabs-heading].svelte-16eh329 {
    /* Size */
    min-width: 0;

    /* Flex & grid item */
    grid-area: 1 / 1;

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-3xl);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-snug);
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-tabs-heading].svelte-16eh329:not([data-active]) {
    /* Box behavior */
    visibility: hidden;
  }

  [data-tabs-heading].svelte-16eh329 strong:where(.svelte-16eh329) {
    /* Typography & color */
    font-weight: inherit;
    color: var(--hx-color-website-text-accent-strong);
  }

  /* Houses the tab strip and, when auto-advance is enabled, the persistent pause/play toggle
     (WCAG 2.2.2) beside it. */
  [data-tabs-row].svelte-16eh329 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: center;
    gap: var(--hx-website-size-16);
  }

  /* Visually similar to PillTabs (rounded, bordered strip of pill buttons), but not migrated onto it:
     the ARIA roles genuinely differ (tablist/tab switching visible panels vs. PillTabs' single-choice
     radiogroup/radio), and the visual spec has already diverged beyond that — 38px flush-edge,
     space-between pills vs. PillTabs' 32px inset pills, an accent-filled vs. subtle-border/elevated
     active state, and a ≤1023px scroll+fade behavior PillTabs doesn't have at all. Forcing a shared
     component would mean re-tuning one of the two (PillTabs was tuned recently; this strip's own
     spec is intentional), so only keep the two in sync by eye, not by shared markup/CSS.
     See docs/audit/component-patterns.md F9. */
  [data-tabs].svelte-16eh329 {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: var(--hx-website-size-40);
    min-width: 0;
    width: 100%;

    /* Flex & grid item */
    flex: 1 1 auto;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-subtle);
    border-radius: var(--hx-radius-full);

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-tabs-scroll].svelte-16eh329 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: calc(100% + var(--hx-border-width-thin) * 2);
    width: calc(100% + var(--hx-border-width-thin) * 2);

    /* Flex & grid container */
    /* Edge tabs sit flush against the strip's rounded ends; the ≤1023 block adds the
       edge-fade mask when the strip overflows and scrolls. */
    justify-content: space-between;
    align-items: center;

    /* Margin */
    /* Extend through the strip border box. The strip's overflow clip keeps its outer border visible
       while removing the coincident pill edges, so an edge pill only adds its inner rounded cap. */
    margin: calc(-1 * var(--hx-border-width-thin));

    /* Overflow & scroll */
    overflow-x: auto;
    overflow-y: hidden;
  }

  [data-tab].svelte-16eh329 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    /* Fill the strip so the active pill's top and bottom borders merge with the rail border.
       Edge pills also share the rail's rounded end cap, leaving only their inner rounded edge
       visually distinct. */
    height: 100%;

    /* Flex & grid container */
    align-items: center;

    /* Flex & grid item */
    flex-shrink: 0;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid transparent;
    border-radius: var(--hx-radius-full);
    outline: none;

    /* Padding */
    padding-block: 0;
    padding-inline: var(--section-tab-padding-inline);

    /* Background */
    background: transparent;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-md);
    white-space: nowrap;
    color: var(--hx-color-website-text-secondary);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-tab].svelte-16eh329:not([data-active]):hover {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-tab][data-active].svelte-16eh329 {
    /* Border & outline */
    border-color: var(--hx-color-website-border-subtle);

    /* Background */
    background: var(--hx-color-website-background-elevated);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-tab].svelte-16eh329:focus-visible {
    /* Border & outline */
    border-color: var(--hx-color-website-border-focus);
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(-1 * var(--hx-border-width-medium));
  }

  [data-aside].svelte-16eh329 {
    /* Box behavior */
    display: grid;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;
  }

  /* All industry panels stack in the same grid cell so the aside always reserves the tallest one;
     switching tabs only toggles visibility, never the row height. */
  [data-aside-panel].svelte-16eh329 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: space-between;
    gap: var(--hx-website-size-24);

    /* Flex & grid item */
    grid-area: 1 / 1;
  }

  [data-aside-panel].svelte-16eh329:not([data-active]) {
    /* Box behavior */
    visibility: hidden;
  }

  [data-aside-heading].svelte-16eh329 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-lg);
  }

  @media (max-width: 1023px) {
    [data-industries].svelte-16eh329 {
      /* Box behavior */
      display: flex;

      /* Flex & grid container */
      flex-direction: column;
    }

    [data-surface].svelte-16eh329 {
      /* Size */
      height: auto;

      /* Flex & grid item */
      grid-area: auto;
    }

    [data-main].svelte-16eh329 {
      /* Box behavior */
      display: grid;

      /* Size */
      height: auto;

      /* Flex & grid container */
      grid-template-areas:
        'kicker toggle'
        'tabs tabs';
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      row-gap: var(--hx-website-size-24);
      column-gap: var(--hx-website-size-16);
    }

    [data-content].svelte-16eh329 {
      /* Flex & grid container */
      gap: var(--hx-website-size-32);
    }

    [data-kicker].svelte-16eh329 {
      /* Flex & grid item */
      grid-area: kicker;
    }

    [data-auto-advance-desktop].svelte-16eh329 {
      /* Box behavior */
      display: none;
    }

    [data-auto-advance-mobile].svelte-16eh329 {
      /* Box behavior */
      display: flex;

      /* Flex & grid item */
      grid-area: toggle;
      justify-self: end;
    }

    [data-desktop-heading-stack].svelte-16eh329 {
      /* Box behavior */
      display: none;
    }

    [data-mobile-heading-stack].svelte-16eh329 {
      /* Box behavior */
      display: grid;

      /* Margin */
      margin-block: 0;
    }

    [data-tabs-row].svelte-16eh329 {
      /* Flex & grid item */
      grid-area: tabs;
    }

    [data-tabs-scroll].svelte-16eh329 {
      /* Overflow & scroll */
      scrollbar-width: none;
    }

    [data-tabs-scroll].svelte-16eh329::-webkit-scrollbar {
      /* Box behavior */
      display: none;
    }

    /* Directional edge fades live on the inner scroller so they never wash out the rail border.
       They follow measured overflow rather than appearing unconditionally. */
    [data-tabs-scroll].svelte-16eh329:not([data-can-scroll-left]):not([data-can-scroll-right]) {
      /* Effects */
      mask-image: none;
    }

    [data-tabs-scroll][data-can-scroll-left].svelte-16eh329:not([data-can-scroll-right]) {
      /* Effects */
      mask-image: linear-gradient(
        to right,
        transparent,
        var(--hx-color-palette-website-slate-white) var(--section-tab-padding-inline),
        var(--hx-color-palette-website-slate-white)
      );
    }

    [data-tabs-scroll]:not([data-can-scroll-left])[data-can-scroll-right].svelte-16eh329 {
      /* Effects */
      mask-image: linear-gradient(
        to right,
        var(--hx-color-palette-website-slate-white),
        var(--hx-color-palette-website-slate-white) calc(100% - var(--section-tab-padding-inline)),
        transparent
      );
    }

    [data-tabs-scroll][data-can-scroll-left][data-can-scroll-right].svelte-16eh329 {
      /* Effects */
      mask-image: linear-gradient(
        to right,
        transparent,
        var(--hx-color-palette-website-slate-white) var(--section-tab-padding-inline),
        var(--hx-color-palette-website-slate-white) calc(100% - var(--section-tab-padding-inline)),
        transparent
      );
    }
  }

  @media (max-width: 599px) {
    [data-body].svelte-16eh329 {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-lg);
    }
  }

[data-header].svelte-1exz29v,
  [data-card-wrapper].svelte-1exz29v {
    /* Custom properties */
    --section-card-padding-block: var(--hx-website-size-56);
    --section-card-padding-inline: calc(
      var(--hx-website-size-40) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet)
    );
    --section-graphic-color: var(--hx-color-website-component-graphic-accent-deep);
  }

  [data-header].svelte-1exz29v {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: 0 var(--hx-website-size-48);

    /* Typography & color */
    text-align: center;
    color: var(--hx-color-website-text-primary);
  }

  /* Owns the box model Card leaves to the site: fixed padding/min-height and the color context Card's
     currentColor title reads from. Card fills this wrapper via its own height:100%/width:100%. */
  [data-card-wrapper].svelte-1exz29v {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    min-height: calc(var(--hx-website-layout-grid-column) * 2 + var(--hx-website-size-32));
    min-width: 0;

    /* Padding */
    padding-block: var(--section-card-padding-block);
    padding-inline: var(--section-card-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-title-reserve].svelte-1exz29v {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: calc(var(--reliability-title-lines, 2) * 1lh);
  }

  [data-title-text].svelte-1exz29v {
    /* Box behavior */
    display: block;
  }

  [data-body].svelte-1exz29v {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-secondary);
  }

  [data-media].svelte-1exz29v {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: calc(var(--hx-website-size-128) + var(--hx-website-size-104));
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Margin */
    margin-block: 0 auto;
    margin-inline: auto;

    /* Typography & color */
    color: var(--section-graphic-color);
  }

  @media (max-width: 599px) {
    [data-mobile-heading-line].svelte-1exz29v {
      /* Box behavior */
      display: block;

      /* Typography & color */
      white-space: nowrap;
    }

    [data-card-wrapper].svelte-1exz29v {
      /* Size */
      min-height: 0;
    }

    [data-title-reserve].svelte-1exz29v {
      /* Size */
      min-height: 0;
    }

    [data-body].svelte-1exz29v {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-lg);
    }
  }

[data-media].svelte-hf2qzp {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Margin */
    margin-block-start: auto;
    margin-inline: auto;
  }

  /* Token-rounded desktop sizing reduces the visual padding around the first pair by roughly 10–15%
     and around the second pair by roughly 25%. Width continues to follow each aspect ratio. */
  [data-media-kind='card1'].svelte-hf2qzp,
  [data-media-kind='card2'].svelte-hf2qzp {
    /* Size */
    height: var(--hx-website-size-128);
  }

  [data-media-kind='card3'].svelte-hf2qzp,
  [data-media-kind='card4'].svelte-hf2qzp {
    /* Size */
    height: calc(var(--hx-website-size-128) + var(--hx-website-size-16));
  }

  [data-media-kind='card1'].svelte-hf2qzp {
    /* Size */
    aspect-ratio: 546 / 136;
  }

  [data-media-kind='card2'].svelte-hf2qzp {
    /* Size */
    aspect-ratio: 530 / 141;
  }

  [data-media-kind='card3'].svelte-hf2qzp {
    /* Size */
    aspect-ratio: 512 / 163;
  }

  [data-media-kind='card4'].svelte-hf2qzp {
    /* Size */
    aspect-ratio: 525 / 154;
  }

  /* Every graphic swaps to a differently-proportioned mobile viewBox at this same breakpoint (portrait
     for card1/card2, wider for card3/card4). Keeping the desktop height+aspect-ratio pair here would
     letterbox the mobile artwork down to a sliver, so mobile drops both and lets the graphic size
     itself from its own viewBox — the same no-forced-ratio technique ProductDetailVisualSectionTemplate
     uses for its wide/mobile graphic pairs. */
  @media (max-width: 599px) {
    [data-media-kind='card1'].svelte-hf2qzp,
    [data-media-kind='card2'].svelte-hf2qzp,
    [data-media-kind='card3'].svelte-hf2qzp,
    [data-media-kind='card4'].svelte-hf2qzp {
      /* Size */
      aspect-ratio: auto;
      height: auto;
    }
  }

[data-media].svelte-b2u2ur {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Margin */
    margin-block-start: auto;
    margin-inline: auto;
  }

  /* Top row: a shared height keeps the two graphics aligned; width follows each graphic's aspect
     ratio (FindData is far wider than DataHub, so equal width would make it shorter). */
  [data-media-kind='card1'].svelte-b2u2ur,
  [data-media-kind='card2'].svelte-b2u2ur {
    /* Size */
    height: calc(var(--hx-website-size-96) + var(--hx-website-size-16));
  }

  [data-media-kind='card1'].svelte-b2u2ur {
    /* Size */
    aspect-ratio: 395 / 98;
  }

  [data-media-kind='card2'].svelte-b2u2ur {
    /* Size */
    aspect-ratio: 275 / 108;
  }

  /* Bottom row: sized to each graphic's intrinsic width. */
  [data-media-kind='card3'].svelte-b2u2ur,
  [data-media-kind='card4'].svelte-b2u2ur {
    /* Size */
    width: 100%;
  }

  [data-media-kind='card3'].svelte-b2u2ur {
    /* Size */
    max-width: calc(
      var(--hx-website-layout-grid-column) + var(--hx-website-size-96) + var(--hx-website-size-24) +
        var(--hx-website-size-4)
    );
  }

  [data-media-kind='card4'].svelte-b2u2ur {
    /* Size */
    max-width: calc(384px + var(--hx-website-size-32) + var(--hx-website-size-4));
  }

[data-card].svelte-dzcd1q {
    /* Custom properties */
    --card-label-color: var(--hx-color-website-text-accent-bold);
    --section-card-padding-block: var(--hx-website-size-56);
    --section-card-padding-inline: calc(38px - 6px * var(--hx-fluid-t-tablet));

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: calc(var(--hx-website-layout-grid-column) * 3 + var(--hx-website-size-16));
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-56);

    /* Padding */
    padding-block: var(--section-card-padding-block);
    padding-inline: var(--section-card-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-copy].svelte-dzcd1q {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  /* Reserve the row's tallest rendered body so every card's CTA starts on the same line; mobile
     stacks a single column and flows naturally. Card's own body scale doesn't match this file's
     flat font-size / breakpoint-varying line-height, so the typography stays hand-rolled on this
     span passed as Card's `body` snippet. */
  [data-body].svelte-dzcd1q {
    /* Size */
    min-height: calc(var(--body-lines, 3) * 1lh);

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-secondary);
  }

  [data-body-text].svelte-dzcd1q {
    /* Box behavior */
    display: block;
  }

  [data-actions].svelte-dzcd1q {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;
  }

  /* The graphic renders at its natural design size, centered in the zone below the CTA (Figma
     keeps every lineup graphic unscaled at 1440 and ~0.84x on the 393 frame). */
  [data-media].svelte-dzcd1q {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 100%;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Margin */
    margin-block: 0 auto;
    margin-inline: auto;

    /* Typography & color */
    color: var(--hx-color-website-component-graphic-accent);
  }

  [data-media-frame].svelte-dzcd1q {
    /* Size */
    aspect-ratio: var(--media-aspect);
    width: min(
      100%,
      calc(
        var(--media-w-mobile) + (var(--media-w) - var(--media-w-mobile)) *
          (var(--hx-fluid-t-tablet) + var(--hx-fluid-t-desktop)) / 2
      )
    );
  }

  @media (max-width: 599px) {
    [data-card].svelte-dzcd1q {
      /* Size */
      min-height: 0;
    }

    [data-body].svelte-dzcd1q {
      /* Size */
      min-height: 0;

      /* Typography & color */
      line-height: var(--hx-line-height-lg);
    }
  }

[data-panel].svelte-zqnac9 {
    /* Custom properties */
    --section-card-padding-block: var(--hx-website-size-56);
    --section-card-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-16) * var(--hx-fluid-t-desktop)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 0;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;

    /* Typography & color */
    text-decoration: none;
    color: var(--hx-color-website-text-primary);
  }

  [data-cell-fill].svelte-zqnac9 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-card].svelte-zqnac9 {
    /* Size */
    /* Square by preference; `min-height: auto` restores the content-based minimum so the card
       outgrows the square when copy + graphic need more room, and `flex-grow` keeps row-mates
       flush. */
    aspect-ratio: 1;
    min-height: auto;

    /* Flex & grid container */
    justify-content: space-between;
    gap: var(--hx-website-size-24);

    /* Flex & grid item */
    flex-grow: 1;

    /* Padding */
    padding-block: var(--section-card-padding-block);
    padding-inline: var(--section-card-padding-inline);

    /* Transition & animation */
    transition: background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-card].svelte-zqnac9:is(:where(.svelte-zqnac9):hover, :where(.svelte-zqnac9):focus-visible) {
    /* Background */
    background: var(--hx-color-website-background-panel);
  }

  [data-card].svelte-zqnac9:is(:where(.svelte-zqnac9):hover, :where(.svelte-zqnac9):focus-visible) [data-heading]:where(.svelte-zqnac9) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-card].svelte-zqnac9:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(-1 * var(--hx-border-width-medium));
  }

  [data-media].svelte-zqnac9 {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 100%;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Margin */
    margin-block-start: auto;
    margin-inline: auto;

    /* Typography & color */
    color: var(--hx-color-website-component-graphic-accent);
  }

  [data-media][data-compact].svelte-zqnac9 {
    /* Size */
    max-width: var(--media-compact-width);
  }

  [data-copy].svelte-zqnac9 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-heading].svelte-zqnac9,
  [data-body].svelte-zqnac9 {
    /* Margin */
    margin: 0;
  }

  [data-heading].svelte-zqnac9 {
    /* Box behavior */
    /* Flex row so the category is an atomic item: it moves to the next line whole instead of
       breaking inside the brackets. The 0.28em column-gap matches the word space this replaces;
       it is inline-only by design — stacked mode separates the lines with line-height leading
       alone, like a natural text wrap (no row-gap). */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.28em;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-heading][data-stacked].svelte-zqnac9 {
    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
  }

  [data-category].svelte-zqnac9 {
    /* Typography & color */
    font-weight: var(--hx-font-weight-regular);
    /* Bracket labels render as authored ('[data core]', '[AI Analyst]') — the heading's uppercase
       must not leak into them (same class as the ProductLineup bracket-label fix). */
    text-transform: none;
  }

  [data-body].svelte-zqnac9 {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-secondary);
  }

  @media (max-width: 599px) {
    [data-card].svelte-zqnac9 {
      /* Size */
      aspect-ratio: auto;
      min-height: 0;

      /* Flex & grid container */
      gap: var(--hx-website-size-56);
    }

    [data-heading].svelte-zqnac9 {
      /* Typography & color */
      font-size: var(--hx-font-size-xl);
    }

    [data-body].svelte-zqnac9 {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-lg);
    }
  }

/*
   * Window anchor measured from the Cortex hero spec (Figma frames 1309:10334 / 3133:10442 /
   * 3133:10695 / 1309:15828). The window keeps a fixed pixel size across desktop/laptop (spec § F),
   * so those two rules fluid-interpolate position only. Tablet uses the frame's own measured anchor
   * directly (no scale). Mobile keeps the frame's measured left edge and uniformly scales the window
   * to ~54.07% (spec § B) — the window still bleeds off the right edge there, matching the reference.
   */
  [data-window='app-engine'].svelte-17rzs2k {
    /* Custom properties */
    --hero-glass-card-inset: 5px;
    --hero-glass-card-inset-block-start: 5px;

    /* Position & layer */
    left: calc(
      520px + (var(--hero-canvas-container-left) + 624.75px - 520px) * var(--hx-fluid-t-desktop)
    );
    position: absolute;
    top: calc(197px + (155px - 197px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: calc(763px * 9 / 16);
    width: 763px;
  }

  @media (max-width: 1023px) {
    [data-window='app-engine'].svelte-17rzs2k {
      /* Position & layer */
      left: var(--hx-website-size-48);
      top: 84px;
    }
  }

  @media (max-width: 599px) {
    [data-window='app-engine'].svelte-17rzs2k {
      /* Position & layer */
      left: 13px;
      top: 55px;

      /* Transform */
      transform: scale(0.5407);
      transform-origin: 0 0;
    }
  }

/*
   * Component variables:
   * --hero-background-image-height: background photo crop height.
   * --hero-background-image-top: background photo vertical offset.
   * --hero-background-media-width: Figma background media width.
   * --hero-content-frame-width: full desktop hero frame width.
   * --hero-copy-width: lower copy column width.
   * --hero-content-gap: vertical gap between title block and lower content.
   * --hero-content-max-width: title-block width; wide enough to hold the 96px H1 on one line at the 1440 board, so it wraps by line-break below ~1265px.
   * --hero-content-rail-inset: desktop left content rail.
   * --hero-foreground: primary text color.
   * --hero-gradient-height: top fade height.
   * --hero-gradient-top: top fade vertical offset.
   * --hero-muted-foreground: supporting text color.
   * --hero-window-bleed: how far the enclosed right edge bleeds off-screen until the viewport exceeds the content frame.
   * --hero-window-enclosure: width of the ProductWindow right enclosure that bleeds off-screen on normal desktop.
   * --hero-window-mobile-width: mobile ProductWindow frame width after the compact content inset.
   * --hero-window-reference-height: unitless full-width ProductWindow frame height in pixels.
   * --hero-window-reference-width: unitless full-width ProductWindow frame width in pixels.
   */
  [data-hero-section].svelte-1soimnc {
    /* Custom properties */
    --hero-background-image-height: 1078px;
    --hero-background-image-top: 414px;
    --hero-background-media-width: 2616px;
    --hero-content-frame-width: 1440px;
    --hero-content-gap: var(--hx-website-layout-hero-first-screen-content-gap);
    --hero-content-max-width: 1280px;
    --hero-content-rail-inset: 108px;
    --hero-copy-width: 391px;
    --hero-foreground: var(--hx-color-website-text-primary);
    --hero-gradient-height: 782.12px;
    --hero-gradient-top: 169px;
    --hero-muted-foreground: var(--hx-color-website-text-primary);
    --hero-padding-block-end: var(--hx-website-layout-hero-first-screen-padding-block-end);
    --hero-padding-block-start: var(--hx-website-layout-hero-first-screen-padding-block-start);
    --hero-title-max-width: 1074px;
    --hero-visual-max-width-compact: 480px;
    /* Mobile-only: the proportionally scaled ProductWindow frame plus the fixed 24px rail gap and
       24px controls row. Drives the mobile first-screen split. */
    --hero-visual-mobile-height: calc(
      var(--hero-window-mobile-width) * var(--hero-window-reference-height) /
        var(--hero-window-reference-width) + var(--scroll-slider-rail-gap) +
        var(--hx-website-size-24)
    );
    --hero-window-bleed: max(
      0px,
      var(--hero-window-enclosure) - max(0px, (100vw - var(--hero-content-frame-width)) / 2)
    );
    --hero-window-bleed-offset: calc(-1 * var(--hero-window-bleed));
    --hero-window-enclosure: var(--hx-website-size-32);
    --hero-window-mobile-width: calc(100vw - 2 * var(--hx-website-size-16));
    --hero-window-reference-height: 471.625;
    --hero-window-reference-width: 844;
    /* ProductWindow's mobile opt-in hooks preserve its normal defaults everywhere else. The border
       compensation keeps the outer accent distance proportional to the 844px reference frame. */
    --product-window-accent-inset-block-mobile: max(
      0px,
      calc(
        var(--hero-window-mobile-width) * 25 / var(--hero-window-reference-width) -
          var(--hx-border-width-thin)
      )
    );
    --product-window-accent-inset-inline-mobile: max(
      0px,
      calc(
        var(--hero-window-mobile-width) * 17 / var(--hero-window-reference-width) -
          var(--hx-border-width-thin)
      )
    );
    /* ScrollSlider overrides for the visual gallery: a hard clip at the frame edge (no soft edge fade),
       no extra inter-slide gap (each slide insets its own media), and a tighter viewport-to-rail gap so
       the visual keeps the original (pre-slider) height. Inherited by the ScrollSlider. */
    --scroll-slider-fade: 0px;
    --scroll-slider-gap: 0px;
    --scroll-slider-rail-gap: var(--hx-website-size-24);

    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;
    isolation: isolate;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hero-content-gap);

    /* Padding */
    padding-block: var(--hero-padding-block-start) var(--hero-padding-block-end);

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    color: var(--hero-foreground);
  }

  [data-hero-section].svelte-1soimnc::after {
    /* Position & layer */
    left: 50%;
    position: absolute;
    top: var(--hero-gradient-top);
    z-index: 0;

    /* Size */
    height: var(--hero-gradient-height);
    min-width: 100%;
    width: var(--hero-background-media-width);

    /* Background */
    background: linear-gradient(
      180deg,
      var(--hx-color-palette-website-slate-n950) 33.264%,
      transparent 100%
    );

    /* Transform */
    transform: translateX(-50%);

    /* Interaction */
    pointer-events: none;

    /* Generated content */
    content: '';
  }

  [data-hero-background-media].svelte-1soimnc {
    /* Position & layer */
    inset-block-end: 0;
    left: 50%;
    position: absolute;
    top: var(--hero-background-image-top);
    z-index: 0;

    /* Size */
    min-height: var(--hero-background-image-height);
    min-width: 100%;
    width: var(--hero-background-media-width);

    /* Overflow & scroll */
    overflow: hidden;

    /* Transform */
    transform: translateX(-50%);

    /* Interaction */
    pointer-events: none;
  }

  [data-hero-background-media].svelte-1soimnc::after {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    background: linear-gradient(
      color-mix(in srgb, var(--hx-color-palette-website-slate-n1000) 20%, transparent),
      color-mix(in srgb, var(--hx-color-palette-website-slate-n1000) 20%, transparent)
    );

    /* Generated content */
    content: '';
  }

  [data-hero-title-block].svelte-1soimnc,
  [data-hero-content].svelte-1soimnc {
    /* Position & layer */
    position: relative;
    z-index: 1;
  }

  [data-hero-title-block].svelte-1soimnc {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: var(--hero-content-max-width);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-48);

    /* Padding */
    padding-inline: var(--hx-website-size-16);

    /* Typography & color */
    text-align: center;
  }

  [data-hero-title-block].svelte-1soimnc p:where(.svelte-1soimnc),
  [data-hero-copy].svelte-1soimnc p:where(.svelte-1soimnc) {
    /* Margin */
    margin: 0;
  }

  [data-hero-title-block].svelte-1soimnc p:where(.svelte-1soimnc) {
    /* Size */
    max-width: var(--hero-title-max-width);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-bold);
    line-height: normal;
    text-wrap: pretty;
    /* Single line at the 1440 board (it fits), wraps once it no longer does. */
    white-space: normal;
    text-box: trim-both cap alphabetic;
  }

  [data-hero-content].svelte-1soimnc {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: var(--hero-content-frame-width);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    /* Floor the copy<->visual gap so it can't collapse below the stacked-layout
       gap as space-between runs out of room (48px @1024 -> 96px @>=1264); at the
       1440 board space-between still widens it back to the designed 129px. */
    column-gap: calc(
      var(--hx-website-size-48) + (var(--hx-website-size-96) - var(--hx-website-size-48)) *
        var(--hx-fluid-t-desktop)
    );

    /* Margin */
    margin-inline: auto;

    /* Padding */
    padding-inline-start: var(--hero-content-rail-inset);
  }

  [data-hero-copy].svelte-1soimnc {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: var(--hero-copy-width);

    /* Flex & grid container */
    flex-direction: column;
    align-items: stretch;
    gap: var(--hx-website-size-40);

    /* Flex & grid item */
    flex: none;
  }

  [data-hero-copy-text].svelte-1soimnc {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-hero-copy].svelte-1soimnc p:where(.svelte-1soimnc) {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    line-height: normal;
    text-wrap: pretty;
    color: var(--hero-muted-foreground);
    text-box: trim-both cap alphabetic;
  }

  [data-hero-copy].svelte-1soimnc p:where(.svelte-1soimnc) strong:where(.svelte-1soimnc) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  [data-hero-actions].svelte-1soimnc {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-hero-visual].svelte-1soimnc {
    /* Box behavior */
    display: block;

    /* Size */
    max-width: 100%;
    min-width: 0;
    width: calc(var(--hero-window-reference-width) * var(--hx-website-size-1));

    /* Flex & grid item */
    flex: none;

    /* Margin */
    margin-inline-end: var(--hero-window-bleed-offset);
  }

  /* Each slide spans the framed viewport (100cqi = the ScrollSlider viewport's own width) and clips at
     the frame border; its media is inset by the same spacing the ProductWindow uses for a single media
     (padding-inline 32, the small block padding), so a snapped media keeps the teal accent sliver while
     a sliding media still travels to the frame border. */
  [data-hero-slide].svelte-1soimnc {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    min-width: 0;

    /* Flex & grid item */
    flex: 0 0 100cqi;

    /* Padding */
    padding-block: var(--hx-website-size-16);
    padding-inline: var(--hx-website-size-32);
  }

  [data-hero-media].svelte-1soimnc {
    /* Size */
    aspect-ratio: 16 / 9;
    width: 100%;

    /* Border & outline */
    border-radius: var(--hx-radius-sm);

    /* Overflow & scroll */
    overflow: hidden;
  }

  @media (max-width: 1023px) {
    [data-hero-section].svelte-1soimnc {
      /* Flex & grid container */
      align-items: stretch;

      /* Padding */
      padding-block: var(--hx-website-size-80) var(--hx-website-size-64);
    }

    [data-hero-title-block].svelte-1soimnc {
      /* Flex & grid item */
      align-self: center;
    }

    [data-hero-content].svelte-1soimnc {
      /* Flex & grid container */
      flex-direction: column;
      align-items: stretch;
      gap: var(--hx-website-size-48);

      /* Padding */
      padding-inline: var(--hx-website-size-16);
    }

    [data-hero-copy].svelte-1soimnc {
      /* Size */
      max-width: var(--hero-visual-max-width-compact);
      width: 100%;
    }

    [data-hero-visual].svelte-1soimnc {
      /* Size */
      width: 100%;

      /* Flex & grid item */
      justify-self: stretch;
      /* Figma's mobile/tablet frames show the product visual above the copy, reversed from the
         desktop DOM order (copy first, so it reads before the visual on a screen reader / narrow
         no-JS render); reorder visually only once the layout stacks. */
      order: -1;

      /* Margin */
      margin-inline-end: 0;
    }

    [data-hero-slide].svelte-1soimnc {
      /* Padding */
      padding-block: var(--hx-website-size-8) var(--hx-website-size-16);
    }
  }

  @media (max-width: 599px) {
    [data-hero-section].svelte-1soimnc {
      /* Flex & grid container */
      gap: 0;

      /* Padding */
      padding-block-start: 0;
    }

    [data-hero-title-block].svelte-1soimnc,
    [data-hero-content].svelte-1soimnc {
      /* Padding */
      padding-inline: var(--hx-website-size-16);
    }

    [data-hero-title-block].svelte-1soimnc {
      /* Size */
      /* First-screen spec: at top scroll the slider graphic shows its top third at the viewport
         bottom, and the title block fills the space between the menu bar (size-80 clearance above
         the section) and the graphic, centering the text in it. svh keeps it stable while mobile
         browser chrome shows/hides. */
      min-height: calc(100svh - var(--hx-website-size-80) - var(--hero-visual-mobile-height) / 3);

      /* Flex & grid container */
      justify-content: center;
    }

    [data-hero-slide].svelte-1soimnc {
      /* Padding */
      padding-block: max(
        0px,
        calc(
          var(--hero-window-mobile-width) * 17 / var(--hero-window-reference-width) -
            var(--hx-border-width-thin)
        )
      );
      padding-inline: max(
        0px,
        calc(
          var(--hero-window-mobile-width) * 33 / var(--hero-window-reference-width) -
            var(--hx-border-width-thin)
        )
      );
    }

    [data-hero-title-block].svelte-1soimnc p:where(.svelte-1soimnc),
    [data-hero-copy].svelte-1soimnc p:where(.svelte-1soimnc) {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
      line-height: normal;
      white-space: normal;
      text-box: trim-both cap alphabetic;
    }
  }

/*
   * Both windows are built once at their Figma 1440 (Desktop) design size, then positioned and
   * uniformly scaled per breakpoint per the hero canvas coordinate system (see TEMPLATE-CONTRACT.md):
   * left/top interpolate between the Laptop (1024) and Desktop (>=1264 plateau) anchors using
   * --hx-fluid-t-desktop; scale interpolates the same way. Tablet (768) reuses the Laptop window
   * pixel size (spec F: laptop and tablet windows are identical px), so its scale is fixed at the
   * laptop factor. Mobile (393) is its own fixed anchor.
   */
  [data-lens-visual].svelte-1go4ivn {
    /* Custom properties */
    --lens-w1-height: 460.899px;
    --lens-w1-left-desktop: 625px;
    --lens-w1-left-laptop: 512px;
    --lens-w1-left-mobile: 5.05px;
    --lens-w1-left-tablet: 51px;
    --lens-w1-scale-laptop: 0.8527;
    --lens-w1-scale-mobile: 0.553;
    --lens-w1-top-desktop: 120px;
    --lens-w1-top-laptop: 144px;
    --lens-w1-top-mobile: 112px;
    --lens-w1-top-tablet: 169px;
    --lens-w1-width: 718.605px;
    --lens-w2-height: 652px;
    --lens-w2-left-desktop: 1061px;
    --lens-w2-left-laptop: 775.19px;
    --lens-w2-left-mobile: 239.7px;
    --lens-w2-left-tablet: 515px;
    --lens-w2-scale-laptop: 0.9248;
    --lens-w2-scale-mobile: 0.5613;
    --lens-w2-top-desktop: 24px;
    --lens-w2-top-mobile: 56px;
    --lens-w2-top-tablet: 49px;
    --lens-w2-width: 282px;

    /* Position & layer */
    position: relative;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-lens-window-dashboard].svelte-1go4ivn {
    /* Position & layer */
    inset-block-start: calc(
      var(--lens-w1-top-laptop) + (var(--lens-w1-top-desktop) - var(--lens-w1-top-laptop)) *
        var(--hx-fluid-t-desktop)
    );
    inset-inline-start: calc(
      var(--lens-w1-left-laptop) +
        (
          var(--hero-canvas-container-left) + var(--lens-w1-left-desktop) -
            var(--lens-w1-left-laptop)
        ) *
        var(--hx-fluid-t-desktop)
    );
    position: absolute;

    /* Size */
    height: var(--lens-w1-height);
    width: var(--lens-w1-width);

    /* Transform */
    transform: scale(
      calc(
        var(--lens-w1-scale-laptop) + (1 - var(--lens-w1-scale-laptop)) * var(--hx-fluid-t-desktop)
      )
    );
    transform-origin: 0 0;
  }

  [data-lens-window-settings].svelte-1go4ivn {
    /* Position & layer */
    inset-block-start: var(--lens-w2-top-desktop);
    inset-inline-start: calc(
      var(--lens-w2-left-laptop) +
        (
          var(--hero-canvas-container-left) + var(--lens-w2-left-desktop) -
            var(--lens-w2-left-laptop)
        ) *
        var(--hx-fluid-t-desktop)
    );
    position: absolute;

    /* Size */
    height: var(--lens-w2-height);
    width: var(--lens-w2-width);

    /* Transform */
    transform: scale(
      calc(
        var(--lens-w2-scale-laptop) + (1 - var(--lens-w2-scale-laptop)) * var(--hx-fluid-t-desktop)
      )
    );
    transform-origin: 0 0;
  }

  @media (max-width: 1023px) {
    [data-lens-window-dashboard].svelte-1go4ivn {
      /* Position & layer */
      inset-block-start: var(--lens-w1-top-tablet);
      inset-inline-start: var(--lens-w1-left-tablet);

      /* Transform */
      transform: scale(var(--lens-w1-scale-laptop));
    }

    [data-lens-window-settings].svelte-1go4ivn {
      /* Position & layer */
      inset-block-start: var(--lens-w2-top-tablet);
      inset-inline-start: var(--lens-w2-left-tablet);

      /* Transform */
      transform: scale(var(--lens-w2-scale-laptop));
    }
  }

  @media (max-width: 599px) {
    [data-lens-window-dashboard].svelte-1go4ivn {
      /* Position & layer */
      inset-block-start: var(--lens-w1-top-mobile);
      inset-inline-start: var(--lens-w1-left-mobile);

      /* Transform */
      transform: scale(var(--lens-w1-scale-mobile));
    }

    [data-lens-window-settings].svelte-1go4ivn {
      /* Position & layer */
      inset-block-start: var(--lens-w2-top-mobile);
      inset-inline-start: var(--lens-w2-left-mobile);

      /* Transform */
      transform: scale(var(--lens-w2-scale-mobile));
    }
  }

[data-mira-window].svelte-pjju4i {
    /* Custom properties */
    --hero-glass-accent-inset: 20px 15px 30px 15px;
    --hero-glass-card-inset: 11px 28px 12px 28px;
    --hero-glass-card-inset-block-start: 11px;
    /* ScrollSlider overrides for the two-slide window: a hard clip inside the stationary glass
       shell, no extra inter-slide gap, and the home hero's tighter viewport-to-rail gap. */
    --scroll-slider-fade: 0px;
    --scroll-slider-gap: 0px;
    --scroll-slider-rail-gap: var(--hx-website-size-24);

    /* Position & layer */
    left: calc(437px + (var(--hero-canvas-container-left) + 186px) * var(--hx-fluid-t-desktop));
    position: absolute;
    top: calc((100% - 518px) / 2);

    /* Size */
    height: 518px;
    width: 808px;

    /* Interaction */
    /* The hero template's [data-canvas] wrapper disables pointer events for decorative windows;
       this window hosts an interactive ScrollSlider (drag/click/rail), so re-enable them here. */
    pointer-events: auto;
  }

  [data-mira-card].svelte-pjju4i {
    /* Position & layer */
    left: 0;
    position: absolute;
    top: 0;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: 808px;
  }

  [data-mira-frame].svelte-pjju4i {
    /* Position & layer */
    position: relative;

    /* Size */
    height: 446px;
  }

  [data-mira-shell].svelte-pjju4i {
    /* Position & layer */
    inset: 0;
    position: absolute;
    z-index: 0;

    /* Interaction */
    pointer-events: none;
  }

  [data-mira-viewport-layer].svelte-pjju4i {
    /* Position & layer */
    inset: var(--hx-border-width-thin);
    position: absolute;
    z-index: 1;
  }

  /* The viewport sits inside the stationary panel's 1px border, so each 806x444 moving slide keeps
     the existing 28px inline and 11px/12px block card insets: a 750x421 card border box around the
     accepted 748x419 no-crop media aperture. */
  [data-mira-slide].svelte-pjju4i {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: 444px;
    min-width: 0;

    /* Flex & grid item */
    flex: 0 0 100%;
  }

  @media (max-width: 1023px) {
    [data-mira-window].svelte-pjju4i {
      /* Position & layer */
      left: 46px;
      top: 67px;
    }
  }

  @media (max-width: 599px) {
    [data-mira-window].svelte-pjju4i {
      /* Position & layer */
      left: var(--hx-website-size-24);
      top: 81px;

      /* Transform */
      transform: scale(0.4581);
      transform-origin: 0 0;
    }
  }

/*
   * Window anchors are measured from the Nexus hero spec (Figma frames 1309:9686 / 3095:15923 /
   * 3095:16176 / 3095:11449). Desktop/laptop positions fluid-interpolate between the 1024 and 1440
   * frame anchors (windows keep fixed pixel size across those two breakpoints, per spec § F); tablet
   * and mobile use the frame's own measured anchors directly.
   */
  [data-window='vrl'].svelte-1bo3xvo {
    /* Position & layer */
    left: calc(
      545px + (var(--hero-canvas-container-left) + 649px - 545px) * var(--hx-fluid-t-desktop)
    );
    position: absolute;
    top: calc(628px + (605px - 628px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: 129px;
    width: 353px;
  }

  [data-window='metrics'].svelte-1bo3xvo {
    /* Position & layer */
    left: calc(
      523px + (var(--hero-canvas-container-left) + 672px - 523px) * var(--hx-fluid-t-desktop)
    );
    position: absolute;
    top: calc(97px + (123px - 97px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: 435px;
    width: 751px;
  }

  [data-window='explore'].svelte-1bo3xvo {
    /* Position & layer */
    left: calc(
      738px + (var(--hero-canvas-container-left) + 1045px - 738px) * var(--hx-fluid-t-desktop)
    );
    position: absolute;
    top: calc(294px + (506px - 294px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: 307px;
    width: 294px;
  }

  @media (max-width: 1023px) {
    [data-window='vrl'].svelte-1bo3xvo {
      /* Position & layer */
      left: 51px;
      top: var(--hx-website-size-24);
    }

    [data-window='metrics'].svelte-1bo3xvo {
      /* Position & layer */
      left: 28px;
      top: 176px;
    }

    [data-window='explore'].svelte-1bo3xvo {
      /* Position & layer */
      left: 485px;
      top: 159px;
    }
  }

  @media (max-width: 599px) {
    [data-window='vrl'].svelte-1bo3xvo {
      /* Position & layer */
      left: 20px;
      top: 34px;
    }

    [data-window='metrics'].svelte-1bo3xvo {
      /* Position & layer */
      left: 7px;
      top: 181px;

      /* Transform */
      transform: scale(0.661);
      transform-origin: 0 0;
    }

    [data-window='explore'].svelte-1bo3xvo {
      /* Position & layer */
      left: 165px;
      top: 173px;

      /* Size */
      width: 234px;
    }
  }

[data-section].svelte-lue3sg {
    /* Custom properties */
    --section-padding-block: calc(
      var(--hx-website-size-96) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-24);

    /* Padding */
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    text-align: center;
    color: var(--hx-color-website-text-primary);
  }

  [data-heading].svelte-lue3sg {
    /* Size */
    width: 100%;
  }

  [data-subtitle].svelte-lue3sg {
    /* Size */
    max-width: 797px;

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  @media (max-width: 599px) {
    [data-section].svelte-lue3sg {
      /* Flex & grid container */
      align-items: flex-start;
      gap: var(--hx-website-size-16);

      /* Padding */
      padding-block: var(--hx-website-size-56);
      padding-inline: var(--hx-website-size-4);

      /* Typography & color */
      text-align: left;
    }

    [data-subtitle].svelte-lue3sg {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-md);
    }
  }

[data-po-content].svelte-aqfyc5 {
    /* Custom properties */
    --po-copy-width: calc(413px + 70px * var(--hx-fluid-t-desktop));
    --po-padding-block: calc(
      var(--hx-website-size-48) + var(--hx-website-size-16) * var(--hx-fluid-t-desktop)
    );
    /* Gap from the frame's left rail to the copy, matching ProductHeroSectionTemplate's inset so the
       text never sits flush against the rail line. */
    --po-padding-inline-start: calc(
      var(--hx-website-size-32) + var(--hx-website-size-72) * var(--hx-fluid-t-desktop)
    );

    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;
    isolation: isolate;

    /* Size */
    min-block-size: 652px;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: row;
    align-items: center;

    /* Padding */
    padding-block: var(--po-padding-block);
    padding-inline-start: var(--po-padding-inline-start);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  /* Escapes the constrained grid cell to the full viewport width (the standard SectionGrid bleed
     trick), so the media's own percentage box below matches the pre-grid full-bleed layout exactly. */
  [data-po-bleed].svelte-aqfyc5 {
    /* Position & layer */
    inset-block: 0;
    inset-inline: calc((100% - 100vw) / 2);
    position: absolute;
    z-index: -2;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  /* Hub render anchored by its left edge and sized in percentages of the bleed frame, so it scales
     with the viewport (instead of drifting off-frame) and bleeds past the right edge, which the
     frame's overflow clips. Matches the Figma composition (left 41.13%, width 75.09%). The block-size
     is a fixed px value (not a percentage of the content box) so it can never inherit the height
     changes driven by the content box's own fluid block padding: 699px is 107.21% of the 652px
     min-block-size baseline, the Figma composition ratio. */
  [data-po-media].svelte-aqfyc5 {
    /* Position & layer */
    inset-block-start: 0;
    inset-inline-start: 41.13%;
    position: absolute;

    /* Size */
    block-size: 699px;
    inline-size: 75.09%;
  }

  [data-po-overlay].svelte-aqfyc5 {
    /* Position & layer */
    inset-block: 0;
    inset-inline: calc((100% - 100vw) / 2);
    position: absolute;
    z-index: -1;

    /* Background */
    background: linear-gradient(
      86.51deg,
      var(--hx-color-palette-website-slate-n950) 44.13%,
      transparent 64.17%
    );

    /* Interaction */
    pointer-events: none;
  }

  [data-po-copy].svelte-aqfyc5 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: var(--po-copy-width);

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hx-website-size-40);

    /* Flex & grid item */
    flex: none;
  }

  [data-po-body].svelte-aqfyc5 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
  }

  [data-po-body].svelte-aqfyc5 p:where(.svelte-aqfyc5) {
    /* Margin */
    margin: 0;
  }

  [data-po-body].svelte-aqfyc5 strong:where(.svelte-aqfyc5) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  /* Mobile/tablet (Figma 1309:14161): the hub covers the whole hero as a background and the copy
     pins to the bottom over an upward scrim, instead of the desktop's left-copy/right-media split. */
  @media (max-width: 1023px) {
    [data-po-content].svelte-aqfyc5 {
      /* Size */
      min-block-size: 976px;

      /* Flex & grid container */
      flex-direction: column;
      justify-content: flex-end;
      align-items: stretch;

      /* Padding */
      padding-block: var(--hx-website-size-40)
        calc(var(--hx-website-size-56) + var(--hx-website-size-4));
      padding-inline: calc(var(--hx-website-size-16) + var(--hx-website-size-4));
    }

    /* Hub fills the bleed frame; cover + center reproduces the Figma crop exactly (the frame is
       taller than the render's aspect ratio, so the image spans full height and center-crops). */
    [data-po-media].svelte-aqfyc5 {
      /* Position & layer */
      inset: 0;

      /* Size */
      block-size: auto;
      inline-size: auto;
    }

    [data-po-overlay].svelte-aqfyc5 {
      /* Background */
      background:
        linear-gradient(
          3.236deg,
          color-mix(in srgb, var(--hx-color-palette-website-slate-n950) 90%, transparent) 39.131%,
          color-mix(in srgb, var(--hx-color-palette-website-slate-n800) 71.1%, transparent) 51.183%,
          transparent 70.236%
        ),
        color-mix(in srgb, var(--hx-color-palette-website-slate-black) 20%, transparent);
    }

    [data-po-copy].svelte-aqfyc5 {
      /* Size */
      width: 100%;
    }
  }

[data-copy].svelte-7ey0bi {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    display: flex;

    /* Size */
    max-width: calc(486px + var(--hx-website-size-8) * var(--hx-fluid-t-tablet));
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-40);

    /* Transform */
    transform: translateY(
      calc(
        (var(--hero-section-min-height) / 2 - var(--hero-section-padding-block-start) - 50%) *
          var(--hx-fluid-t-tablet)
      )
    );
  }

  [data-heading].svelte-7ey0bi {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hx-website-size-24);
  }

  [data-heading-title].svelte-7ey0bi {
    /* Size */
    min-width: 100%;
  }

  [data-body].svelte-7ey0bi p:where(.svelte-7ey0bi) {
    /* Margin */
    margin: 0;
  }

  [data-body].svelte-7ey0bi {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-primary);
  }

  [data-body].svelte-7ey0bi strong:where(.svelte-7ey0bi) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  @media (max-width: 599px) {
    [data-copy].svelte-7ey0bi {
      /* Flex & grid container */
      gap: var(--hx-website-size-48);
    }

    [data-body].svelte-7ey0bi {
      /* Flex & grid container */
      gap: calc(var(--hx-line-height-xl) - var(--hx-website-size-2));

      /* Typography & color */
      font-size: var(--hx-font-size-md);
    }
  }

[data-soma-hero-visual].svelte-27ezwz {
    /* Position & layer */
    left: calc(
      435px + (var(--hero-canvas-container-left) + 625px - 435px) * var(--hx-fluid-t-desktop)
    );
    position: absolute;
    top: calc(79px + (107px - 79px) * var(--hx-fluid-t-desktop));

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 561px;
    width: 812px;
  }

  @media (max-width: 1023px) {
    [data-soma-hero-visual].svelte-27ezwz {
      /* Position & layer */
      left: 45px;
      top: 78px;
    }
  }

  @media (max-width: 599px) {
    [data-soma-hero-visual].svelte-27ezwz {
      /* Position & layer */
      left: 20px;
      top: 82px;

      /* Transform */
      transform: scale(0.55);
      transform-origin: 0 0;
    }
  }

/*
   * Component variables:
   * --soma-window-font-cta: CTA button label font-size.
   * --soma-window-font-micro: field label / link font-size.
   */
  [data-soma-hero-window].svelte-7o5yaj {
    /* Custom properties */
    --soma-window-font-cta: 13px;
    --soma-window-font-micro: 10px;

    /* Position & layer */
    position: relative;

    /* Size */
    height: 100%;
    width: 100%;

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-window-outer].svelte-7o5yaj {
    /* Position & layer */
    position: relative;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-glass-outer].svelte-7o5yaj,
  [data-glass-inner].svelte-7o5yaj {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-glass);
    border-radius: var(--hx-radius-md);

    /* Background */
    background: var(--hx-color-website-overlay-glass);

    /* Effects */
    box-shadow: var(--hero-glass-outer-shadow);
  }

  [data-mint-outer].svelte-7o5yaj,
  [data-mint-inner].svelte-7o5yaj {
    /* Position & layer */
    position: absolute;

    /* Border & outline */
    border-radius: var(--hx-radius-sm);

    /* Background */
    background: var(--hx-color-palette-website-mint-n400);
  }

  [data-mint-outer].svelte-7o5yaj {
    /* Position & layer */
    /* Mirrored inline insets: the mint sliver peeks 13px on both sides of the card. */
    inset: 20px 15px 30px 15px;
  }

  [data-mint-inner].svelte-7o5yaj {
    /* Position & layer */
    inset: 15px 9px 23px 10px;
  }

  [data-card-outer].svelte-7o5yaj,
  [data-card-inner].svelte-7o5yaj {
    /* Position & layer */
    position: absolute;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
    border-radius: var(--hx-radius-sm);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--hx-color-website-background-panel);

    /* Effects */
    box-shadow: var(--hero-glass-card-shadow);
  }

  [data-card-outer].svelte-7o5yaj {
    /* Position & layer */
    inset: 11px 28px 12px 28px;
  }

  [data-card-inner].svelte-7o5yaj {
    /* Position & layer */
    inset: 6px var(--hx-website-size-16) 6px 18px;
  }

  [data-window-glow].svelte-7o5yaj {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Effects */
    opacity: 0.3;
  }

  [data-window-inner].svelte-7o5yaj {
    /* Position & layer */
    left: 193px;
    position: absolute;
    top: 42px;

    /* Size */
    height: 429px;
    width: 354px;
  }

  [data-login-content].svelte-7o5yaj {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;

    /* Padding */
    padding-block-start: 47px;
    padding-inline: 38px var(--hx-website-size-40);
  }

  [data-logo-wrapper].svelte-7o5yaj {
    /* Margin */
    margin-block-end: var(--hx-website-size-96);
  }

  [data-fields-block].svelte-7o5yaj {
    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Margin */
    margin-block-end: 26px;
  }

  [data-field-group].svelte-7o5yaj {
    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: 5px;
  }

  [data-field-label].svelte-7o5yaj {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--soma-window-font-micro);
    font-weight: var(--hx-font-weight-regular);
    line-height: normal;
    color: color-mix(in srgb, var(--hx-color-website-text-muted) 70%, transparent);
    text-box: trim-both cap alphabetic;
  }

  [data-field-box].svelte-7o5yaj {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 27px;
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;

    /* Border & outline */
    border: 0.5px solid
      color-mix(in srgb, var(--hx-color-palette-website-slate-white) 35%, transparent);
    border-radius: var(--hx-radius-sm);

    /* Padding */
    padding-inline: 14px var(--hx-website-size-16);

    /* Background */
    background: color-mix(
      in srgb,
      var(--hx-color-palette-website-slate-white) 21%,
      var(--hx-color-palette-website-slate-black)
    );
  }

  [data-field-placeholder].svelte-7o5yaj {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-xs);
    font-weight: var(--hx-font-weight-regular);
    line-height: normal;
    color: color-mix(in srgb, var(--hx-color-palette-website-slate-white) 50%, transparent);
    text-box: trim-both cap alphabetic;
  }

  [data-cta-button].svelte-7o5yaj {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 31px;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border-radius: var(--hx-radius-2xs);

    /* Background */
    background: var(--hx-color-palette-website-mint-n200);
  }

  [data-cta-text].svelte-7o5yaj {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--soma-window-font-cta);
    font-weight: var(--hx-font-weight-bold);
    line-height: normal;
    color: var(--hx-color-website-text-on-accent);
    text-box: trim-both cap alphabetic;
  }

/*
   * Window anchors are measured from the Synapse hero spec (Figma frames 3001:6633 / 3095:17098 /
   * 3095:17515 / 3095:10398). Unlike Nexus/Mira/Cortex, Synapse's 3 windows are uniformly resized
   * (not just repositioned) between the 1024 and 1440 frame anchors — laptop measures ~87.48% of the
   * desktop glass-rect size for all 3 windows (spec § F) — so the desktop/laptop rules below fluid
   * both position and a uniform scale factor. Tablet and mobile use each frame's own measured anchor
   * and per-window scale directly (§ F: HQL resizes non-uniformly at both breakpoints).
   */
  [data-window].svelte-if3yow {
    /* Position & layer */
    position: absolute;

    /* Transform */
    transform-origin: 0 0;
  }

  [data-window='connect'].svelte-if3yow {
    /* Position & layer */
    left: calc(
      615px + (var(--hero-canvas-container-left) + 614px - 615px) * var(--hx-fluid-t-desktop)
    );
    top: calc(282px + (53px - 282px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: 205px;
    width: 455px;

    /* Transform */
    transform: scale(calc(0.8747 + (1 - 0.8747) * var(--hx-fluid-t-desktop)));
  }

  [data-window='hql'].svelte-if3yow {
    /* Position & layer */
    left: calc(
      802px + (var(--hero-canvas-container-left) + 1087px - 802px) * var(--hx-fluid-t-desktop)
    );
    top: calc(118px + (73px - 118px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: 160px;
    width: 269px;

    /* Transform */
    transform: scale(calc(0.874 + (1 - 0.874) * var(--hx-fluid-t-desktop)));
  }

  [data-window='explore'].svelte-if3yow {
    /* Position & layer */
    left: calc(
      520px + (var(--hero-canvas-container-left) + 633px - 520px) * var(--hx-fluid-t-desktop)
    );
    top: calc(470px + (282px - 470px) * var(--hx-fluid-t-desktop));

    /* Size */
    height: 363px;
    width: 696px;

    /* Transform */
    transform: scale(calc(0.8748 + (1 - 0.8748) * var(--hx-fluid-t-desktop)));
  }

  @media (max-width: 1023px) {
    [data-window='connect'].svelte-if3yow {
      /* Position & layer */
      left: 344px;
      top: 206px;

      /* Transform */
      transform: scale(0.8747);
    }

    [data-window='hql'].svelte-if3yow {
      /* Position & layer */
      left: 508px;
      top: var(--hx-website-size-32);

      /* Transform */
      transform: scale(0.916, 0.8625);
    }

    [data-window='explore'].svelte-if3yow {
      /* Position & layer */
      left: 22px;
      top: 416px;

      /* Transform */
      transform: scale(0.964, 0.9543);
    }
  }

  @media (max-width: 599px) {
    [data-window='connect'].svelte-if3yow {
      /* Position & layer */
      left: 62px;
      top: 195px;

      /* Transform */
      transform: scale(0.7692);
    }

    [data-window='hql'].svelte-if3yow {
      /* Position & layer */
      left: 160px;
      top: 17px;

      /* Transform */
      transform: scale(0.9962, 0.9875);
    }

    [data-window='explore'].svelte-if3yow {
      /* Position & layer */
      left: var(--hx-website-size-8);
      top: 370px;

      /* Transform */
      transform: scale(0.5513, 0.5558);
    }
  }

[data-section].svelte-vgz3kc {
    /* Custom properties */
    --footer-logo-width: 166.81px;
    /* Logo size="md" rendered width */
    --footer-width-phone: 560px;
    /* [data-bottom] width at the 600px phone breakpoint (600 - 2 * 20px margin) */
    --section-copy-size: var(--hx-font-size-sm);

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-block-size: calc(
      var(--hx-website-size-80) * 6 + var(--hx-website-size-56) - var(--hx-website-size-40) *
        var(--hx-fluid-t-mobile) - var(--hx-website-size-112) * var(--hx-fluid-t-tablet) -
        var(--hx-website-size-16) * var(--hx-fluid-t-desktop)
    );
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(var(--hx-website-size-40) + var(--hx-website-size-40) * var(--hx-fluid-t-tablet));

    /* Padding */
    padding-block: calc(
        var(--hx-website-size-64) + var(--hx-website-size-8) * var(--hx-fluid-t-mobile) +
          var(--hx-website-size-64) * var(--hx-fluid-t-tablet)
      )
      calc(var(--hx-website-size-56) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet));

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-background].svelte-vgz3kc {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Size */
    height: 100%;
    width: 100%;

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-overlay].svelte-vgz3kc {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    background-image: linear-gradient(
      -0.137deg,
      transparent 3.9008%,
      color-mix(in srgb, var(--hx-color-palette-website-slate-n950) 91.6%, transparent) 74.919%,
      var(--hx-color-palette-website-slate-n950) 92.288%
    );

    /* Interaction */
    pointer-events: none;
  }

  [data-nav].svelte-vgz3kc {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-32);
  }

  [data-link].svelte-vgz3kc {
    /* Typography & color */
    color: inherit;

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-link].svelte-vgz3kc:is(:where(.svelte-vgz3kc):hover, :where(.svelte-vgz3kc):focus-visible) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-link].svelte-vgz3kc:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-link='nav'].svelte-vgz3kc {
    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--section-copy-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    text-align: center;
    text-decoration: none;
  }

  [data-bottom].svelte-vgz3kc {
    /* Box behavior */
    display: grid;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    /* Address/copyright hug the left. The trailing column is the logo's right inset:
       it equals the first column (logo centered) until the centered gap shrinks to
       what it would be with the logo right-aligned at the phone breakpoint, then it
       follows the surplus width — fluidly sliding the logo right until it is fully
       right-aligned at the phone breakpoint (where mobile re-stacks it, below). */
    grid-template-areas:
      'address logo .'
      'copyright logo .';
    grid-template-columns:
      1fr auto
      min(calc((100% - var(--footer-logo-width)) / 2), calc(100% - var(--footer-width-phone)));
    align-items: center;
    row-gap: var(--hx-website-size-16);
  }

  [data-address].svelte-vgz3kc {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;

    /* Flex & grid item */
    grid-area: address;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--section-copy-size);
    font-weight: var(--hx-font-weight-regular);
    font-style: normal;
    line-height: var(--hx-line-height-lg);
    color: inherit;
  }

  [data-link='contact'].svelte-vgz3kc {
    /* Typography & color */
    text-decoration-line: underline;
    text-decoration-skip-ink: none;
  }

  [data-copyright].svelte-vgz3kc {
    /* Flex & grid item */
    grid-area: copyright;

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--section-copy-size);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    text-align: start;
    color: inherit;
  }

  [data-logo].svelte-vgz3kc {
    /* Flex & grid item */
    grid-area: logo;
    justify-self: center;
  }

  @media (max-width: 1023px) {
    [data-overlay].svelte-vgz3kc {
      /* Background */
      background-image: linear-gradient(
        -0.257deg,
        transparent 3.9008%,
        color-mix(in srgb, var(--hx-color-palette-website-slate-n950) 91.6%, transparent) 74.919%,
        var(--hx-color-palette-website-slate-n950) 92.288%
      );
    }
  }

  @media (max-width: 599px) {
    [data-overlay].svelte-vgz3kc {
      /* Background */
      background-image: linear-gradient(
        -1.055deg,
        transparent 3.4822%,
        var(--hx-color-palette-website-slate-n950) 92.073%
      );
    }

    [data-section].svelte-vgz3kc {
      /* Flex & grid container */
      justify-content: space-between;
    }

    [data-nav].svelte-vgz3kc {
      /* Flex & grid container */
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      gap: var(--hx-website-size-16);
    }

    [data-bottom].svelte-vgz3kc {
      /* Box behavior */
      display: flex;

      /* Size */
      width: 100%;

      /* Flex & grid container */
      flex-direction: column;
      align-items: flex-start;
      gap: var(--hx-website-size-40);
    }

    [data-address].svelte-vgz3kc {
      /* Margin */
      margin-inline-start: var(--hx-website-size-8);
    }

    [data-copyright].svelte-vgz3kc {
      /* Typography & color */
      text-align: left;
    }

    [data-logo].svelte-vgz3kc {
      /* Margin */
      margin-inline-start: var(--hx-website-size-8);
    }
  }

[data-heading].svelte-alnq3d,
  [data-copy].svelte-alnq3d,
  [data-axis].svelte-alnq3d {
    /* Custom properties */
    --axis-arrow-height: calc(
      var(--hx-website-size-16) + var(--hx-website-size-2) + var(--hx-website-size-1)
    );
    --axis-arrow-width: calc(
      var(--hx-website-size-40) - var(--hx-website-size-2) - var(--hx-website-size-1)
    );
    --axis-dot-size: var(--hx-website-size-2);
    --axis-gap: calc(var(--hx-website-size-8) + var(--hx-website-size-2));
    --axis-line-thickness: var(--hx-website-size-1);
    --axis-marker-size: var(--hx-website-size-16);
    --axis-segment-size: var(--hx-website-size-4);
    --axis-vertical-marker-size: calc(
      var(--hx-website-size-16) - var(--hx-website-size-2) - var(--hx-website-size-1)
    );
    --section-axis-color: var(--hx-color-website-component-graphic-accent-muted);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-heading].svelte-alnq3d {
    /* Padding */
    padding-bottom: var(--hx-website-size-56);
    padding-inline: var(--hx-website-size-48);
    padding-top: var(--hx-website-size-64);

    h2:where(.svelte-alnq3d) {
      /* Margin */
      margin: 0;

      /* Typography & color */
      font-family: var(--hx-font-family-cera);
      font-size: var(--hx-font-size-3xl);
      font-weight: var(--hx-font-weight-black);
      line-height: var(--hx-line-height-5xl);
      text-transform: uppercase;
      text-wrap: balance;

      span:where(.svelte-alnq3d) {
        /* Box behavior */
        display: block;
      }
    }
  }

  [data-copy].svelte-alnq3d {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: row;
    gap: var(--hx-website-size-64);

    /* Padding */
    padding-bottom: var(--hx-website-size-64);
    padding-inline: var(--hx-website-size-48);
    padding-top: var(--hx-website-size-56);

    [data-lead]:where(.svelte-alnq3d) {
      /* Margin */
      margin: 0;

      /* Typography & color */
      font-family: var(--hx-font-family-inter);
      font-size: var(--hx-font-size-xl);
      font-weight: var(--hx-font-weight-bold);
      line-height: var(--hx-line-height-2xl);
    }

    [data-card]:where(.svelte-alnq3d) {
      /* Box behavior */
      display: flex;

      /* Size */
      min-width: 0;

      /* Flex & grid container */
      flex-direction: column;
      gap: var(--hx-website-size-16);

      h3:where(.svelte-alnq3d) {
        /* Margin */
        margin: 0;

        /* Typography & color */
        font-family: var(--hx-font-family-cera);
        font-size: var(--hx-font-size-xl);
        font-weight: var(--hx-font-weight-black);
        line-height: var(--hx-line-height-2xl);
        text-transform: uppercase;
      }

      p:where(.svelte-alnq3d) {
        /* Margin */
        margin: 0;

        /* Typography & color */
        font-family: var(--hx-font-family-inter);
        font-size: var(--hx-font-size-base);
        font-weight: var(--hx-font-weight-regular);
        line-height: var(--hx-line-height-lg);
      }
    }
  }

  [data-axis].svelte-alnq3d {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--axis-arrow-height);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: center;
    gap: var(--axis-gap);

    /* Padding */
    padding-inline: var(--hx-website-size-48);

    [data-arrow]:where(.svelte-alnq3d) {
      /* Box behavior */
      display: grid;

      /* Size */
      height: var(--axis-arrow-height);
      width: var(--axis-arrow-width);

      /* Flex & grid container */
      place-items: center;

      /* Flex & grid item */
      flex: 0 0 var(--axis-arrow-width);
    }

    [data-arrow]:where(.svelte-alnq3d) [data-graphic]:where(.svelte-alnq3d) {
      /* Box behavior */
      display: grid;

      /* Size */
      height: var(--axis-arrow-height);
      width: var(--axis-arrow-width);

      /* Flex & grid container */
      place-items: center;
    }

    [data-line]:where(.svelte-alnq3d) {
      /* Box behavior */
      display: flex;

      /* Size */
      height: var(--axis-marker-size);
      min-width: 0;
      width: 100%;

      /* Flex & grid container */
      align-items: center;

      /* Flex & grid item */
      flex: 1 1 0;
    }

    [data-segment]:where(.svelte-alnq3d) {
      /* Size */
      height: var(--axis-line-thickness);
      min-width: 0;

      /* Flex & grid item */
      flex-basis: 0;
      flex-grow: 1;
      flex-shrink: 1;

      /* Background */
      background-image: repeating-linear-gradient(
        to right,
        var(--section-axis-color) 0 var(--axis-dot-size),
        transparent var(--axis-dot-size) var(--axis-segment-size)
      );
    }

    [data-segment]:where(.svelte-alnq3d):nth-child(1) {
      /* Flex & grid item */
      flex-grow: 330;
    }

    [data-segment]:where(.svelte-alnq3d):nth-child(3) {
      /* Flex & grid item */
      flex-grow: 260;
    }

    [data-segment]:where(.svelte-alnq3d):nth-child(5) {
      /* Flex & grid item */
      flex-grow: 211;
    }

    [data-segment]:where(.svelte-alnq3d):nth-child(7) {
      /* Flex & grid item */
      flex-grow: 230;

      /* Effects */
      mask-image: linear-gradient(
        to right,
        var(--hx-color-palette-website-slate-white),
        transparent
      );
    }

    [data-marker]:where(.svelte-alnq3d) {
      /* Box behavior */
      box-sizing: border-box;
      display: block;

      /* Size */
      height: var(--axis-marker-size);
      width: var(--axis-marker-size);

      /* Border & outline */
      border: var(--hx-border-width-thin) solid var(--section-axis-color);
      border-radius: var(--hx-radius-full);
    }
  }

  @media (max-width: 1023px) {
    [data-copy].svelte-alnq3d {
      /* Flex & grid container */
      flex-direction: column;
      gap: var(--hx-website-size-56);

      /* Padding */
      padding-bottom: var(--hx-website-size-48);
      padding-left: var(--hx-website-size-32);
      padding-top: 0;
    }

    [data-axis].svelte-alnq3d {
      /* Size */
      height: 100%;
      width: min-content;

      /* Flex & grid container */
      flex-direction: column;

      /* Padding */
      padding-bottom: var(--hx-website-size-48);
      padding-left: var(--hx-website-size-48);
      padding-right: var(--hx-website-size-32);
    }

    [data-axis].svelte-alnq3d [data-arrow]:where(.svelte-alnq3d) {
      /* Size */
      height: var(--axis-arrow-width);
      width: var(--axis-arrow-height);

      /* Flex & grid item */
      flex: 0 0 var(--axis-arrow-width);
    }

    [data-axis].svelte-alnq3d [data-arrow]:where(.svelte-alnq3d) [data-graphic]:where(.svelte-alnq3d) {
      /* Transform */
      transform: translateX(calc((var(--axis-arrow-height) - var(--axis-arrow-width)) / 2))
        rotate(90deg);
    }

    [data-axis].svelte-alnq3d [data-line]:where(.svelte-alnq3d) {
      /* Size */
      height: 100%;
      width: var(--axis-marker-size);

      /* Flex & grid container */
      flex-direction: column;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(1) {
      /* Flex & grid item */
      flex-grow: 101;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(3) {
      /* Flex & grid item */
      flex-grow: 127;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(5) {
      /* Flex & grid item */
      flex-grow: 127;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(7) {
      /* Flex & grid item */
      flex-grow: 64;

      /* Effects */
      mask-image: linear-gradient(
        to bottom,
        var(--hx-color-palette-website-slate-white),
        transparent
      );
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d) {
      /* Size */
      height: auto;
      min-height: 0;
      width: var(--axis-line-thickness);

      /* Background */
      background-image: repeating-linear-gradient(
        to bottom,
        var(--section-axis-color) 0 var(--axis-dot-size),
        transparent var(--axis-dot-size) var(--axis-segment-size)
      );
    }

    [data-axis].svelte-alnq3d [data-marker]:where(.svelte-alnq3d) {
      /* Size */
      height: var(--axis-vertical-marker-size);
      width: var(--axis-vertical-marker-size);
    }
  }

  @media (max-width: 599px) {
    [data-heading].svelte-alnq3d {
      /* Padding */
      padding-inline: 0;
      padding-top: var(--hx-website-size-72);
    }

    [data-copy].svelte-alnq3d {
      /* Flex & grid container */
      gap: var(--hx-website-size-48);

      /* Padding */
      padding-bottom: var(--hx-website-size-72);
      padding-left: var(--hx-website-size-24);
      padding-right: 0;
    }

    [data-axis].svelte-alnq3d {
      /* Padding */
      padding-bottom: var(--hx-website-size-72);
      padding-left: var(--hx-website-size-24);
      padding-right: var(--hx-website-size-24);
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(1) {
      /* Flex & grid item */
      flex-grow: 174;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(3) {
      /* Flex & grid item */
      flex-grow: 124;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(5) {
      /* Flex & grid item */
      flex-grow: 124;
    }

    [data-axis].svelte-alnq3d [data-segment]:where(.svelte-alnq3d):nth-child(7) {
      /* Flex & grid item */
      flex-grow: 72;
    }

    [data-card].svelte-alnq3d h3:where(.svelte-alnq3d) {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
      line-height: calc(var(--hx-line-height-xl) - var(--hx-website-size-2));
    }

    [data-card].svelte-alnq3d p:where(.svelte-alnq3d) {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: calc(var(--hx-line-height-md) - var(--hx-website-size-1));
    }
  }

[data-strip].svelte-3nst6y {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

[data-heading].svelte-i69km5 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    width: 100%;

    /* Flex & grid container */
    align-items: center;

    /* Padding */
    padding-inline: var(--hx-website-size-80) var(--hx-website-size-72);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-background].svelte-i69km5 {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-heading].svelte-i69km5 strong:where(.svelte-i69km5) {
    /* Typography & color */
    font-weight: inherit;
    color: var(--hx-color-website-text-accent);
  }

  @media (max-width: 1023px) {
    [data-background].svelte-i69km5 {
      /* Background */
      background: transparent;
    }

    [data-heading].svelte-i69km5 {
      /* Padding */
      padding-inline: var(--hx-website-size-48);
    }
  }

  @media (max-width: 599px) {
    [data-heading].svelte-i69km5 {
      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }
  }

[data-content].svelte-k9o1m4,
  [data-mobile].svelte-k9o1m4 {
    /* Custom properties */
    --section-muted-color: var(--hx-color-palette-website-slate-n550);
    --section-rail-color: var(--hx-color-website-component-graphic-accent);
    --section-rail-track: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n300) 35%,
      transparent
    );

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    width: 100%;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-content].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;

    /* Padding */
    /* 80px top/bottom around the 576px stepper → 736px body (Figma Frame 193). */
    padding-block: var(--hx-website-size-80);
    padding-inline: var(--hx-website-size-72);
  }

  [data-mobile].svelte-k9o1m4 {
    /* Box behavior */
    /* Desktop uses the sticky-rail stepper ([data-content]); the swipe deck takes over
       at <=1023px (below). Without this the deck auto-places alongside it and overlaps. */
    display: none;

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-background].svelte-k9o1m4 {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    /* Transparent: the desktop gradient lives on the scroll-experience wrapper so it spans
       the full pinned track; the mobile composition intentionally remains background-free. */
    background: transparent;
  }

  [data-eyebrow-wrap].svelte-k9o1m4 {
    /* Box behavior */
    /* Grid so the pill hugs its label via justify-items instead of stretching to the
       detail column width; the mobile block flips this to stretch. */
    display: grid;

    /* Flex & grid container */
    justify-items: start;
  }

  [data-process].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    /* The Figma stepper component (Frame 72) is 576px tall. */
    min-height: 576px;
    min-width: 0;

    /* Flex & grid container */
    align-items: flex-start;
    gap: calc(var(--hx-website-size-56) + var(--hx-website-size-80) * var(--hx-fluid-t-tablet));
  }

  [data-rail].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    width: var(--hx-website-size-16);

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
  }

  [data-dot].svelte-k9o1m4 {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: var(--hx-website-size-16);
    width: var(--hx-website-size-16);

    /* Flex & grid item */
    flex: 0 0 var(--hx-website-size-16);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--section-rail-color);
    border-radius: var(--hx-radius-full);
  }

  [data-dot-active='true'].svelte-k9o1m4 {
    /* Background */
    background: var(--section-rail-color);
  }

  [data-line].svelte-k9o1m4 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: block;

    /* Size */
    width: var(--hx-border-width-thin);

    /* Flex & grid item */
    flex: 1 1 auto;

    /* Background */
    /* Dashed track (the unfilled rail); the solid fill below grows over it with scroll progress. */
    background-image: repeating-linear-gradient(
      to bottom,
      var(--section-rail-track) 0,
      var(--section-rail-track) var(--hx-website-size-4),
      transparent var(--hx-website-size-4),
      transparent var(--hx-website-size-8)
    );
  }

  [data-line].svelte-k9o1m4::before {
    /* Position & layer */
    inset-block-start: 0;
    inset-inline-start: 0;
    position: absolute;

    /* Size */
    block-size: calc(var(--line-fill, 0) * 100%);
    width: 100%;

    /* Background */
    /* Solid fill rising dot-to-dot as the matching step activates. */
    background: var(--section-rail-color);

    /* Generated content */
    content: '';
  }

  [data-steps].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-step].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    gap: var(--hx-website-size-56);

    /* Border & outline */
    border: 0;

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    text-align: left;
    color: var(--section-muted-color);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-step].svelte-k9o1m4:not([data-step-active='true']):hover {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  /* Spread the four steps down the rail to match the Figma stepper proportions. */
  [data-step].svelte-k9o1m4:not(:last-child) [data-step-body]:where(.svelte-k9o1m4) {
    /* Padding */
    padding-block-end: var(--hx-website-size-96);
  }

  [data-step-body].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    width: 280px;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-step-active='true'].svelte-k9o1m4 {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-step].svelte-k9o1m4:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-step-title].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: flex-start;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-2xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-2xl);
    text-transform: uppercase;
    white-space: nowrap;
  }

  [data-step-subtitle].svelte-k9o1m4 {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-detail].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    /* Match the stepper height so the detail column fills the frame and does not jump as states swap. */
    min-height: 576px;
    min-width: 0;

    /* Flex & grid item */
    flex: 1 1 0;
  }

  [data-detail-panel].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Transition & animation */
    /* Re-keyed on the active step, so each swap fades up (disabled under reduced-motion below). */
    animation: svelte-k9o1m4-detail-panel-in var(--hx-motion-duration-enter) var(--hx-motion-easing-standard) both;
  }

  [data-detail-copy].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 599px;
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-light);
    line-height: var(--hx-line-height-2xl);
  }

  [data-detail-copy].svelte-k9o1m4 p:where(.svelte-k9o1m4) {
    /* Margin */
    margin: 0;
  }

  [data-lead].svelte-k9o1m4 {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  [data-track].svelte-k9o1m4 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    gap: 0;

    /* Overflow & scroll */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  [data-track].svelte-k9o1m4::-webkit-scrollbar {
    /* Box behavior */
    display: none;
  }

  [data-card].svelte-k9o1m4 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 663px;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Flex & grid item */
    flex: 0 0 100%;

    /* Padding */
    padding-inline: var(--hx-website-size-24);

    /* Overflow & scroll */
    scroll-snap-align: start;
  }

  [data-card].svelte-k9o1m4 [data-detail-copy]:where(.svelte-k9o1m4) {
    /* Typography & color */
    font-size: var(--hx-font-size-md);
  }

  [data-tabs].svelte-k9o1m4 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: flex-start;

    /* Padding */
    padding-inline: var(--hx-website-size-24);
  }

  [data-tab].svelte-k9o1m4 {
    /* Border & outline */
    border: 0;

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-2xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-2xl);
    text-transform: uppercase;
    color: var(--section-muted-color);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-tab].svelte-k9o1m4:not([data-tab-active='true']):hover {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-tab].svelte-k9o1m4:focus-visible,
  [data-progress-dot].svelte-k9o1m4:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-tab-active='true'].svelte-k9o1m4 {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-card-heading].svelte-k9o1m4 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-card-heading].svelte-k9o1m4 h3:where(.svelte-k9o1m4) {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-2xl);
    text-transform: uppercase;
  }

  [data-card-heading].svelte-k9o1m4 p:where(.svelte-k9o1m4) {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-progress].svelte-k9o1m4 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    align-items: center;

    /* Padding */
    padding-inline: var(--hx-website-size-24);
  }

  /* The button is the >=24px hit target; the visible 16px dot is flex-centered inside it. */
  [data-progress-dot].svelte-k9o1m4 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: var(--hx-website-size-24);
    width: var(--hx-website-size-24);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border: 0;

    /* Padding */
    padding: 0;

    /* Background */
    background: transparent;

    /* Interaction */
    cursor: pointer;
  }

  [data-progress-dot].svelte-k9o1m4::before {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: var(--hx-website-size-16);
    width: var(--hx-website-size-16);

    /* Border & outline */
    border: var(--hx-website-size-1) solid var(--section-rail-color);
    border-radius: var(--hx-radius-full);

    /* Background */
    background-color: transparent;

    /* Transition & animation */
    transition:
      background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      border-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Generated content */
    content: '';
  }

  [data-progress-dot-filled='true'].svelte-k9o1m4::before {
    /* Background */
    background-color: var(--section-rail-color);
  }

  [data-progress-dot].svelte-k9o1m4:not([data-progress-dot-filled='true']):hover::before {
    /* Border & outline */
    border-color: var(--hx-color-website-border-highlight);
  }

  [data-progress-line].svelte-k9o1m4 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: block;

    /* Size */
    height: 0;

    /* Flex & grid item */
    flex: 1 1 auto;

    /* Border & outline */
    border-block-start: var(--hx-website-size-1) dashed var(--section-rail-color);
  }

  [data-progress-line].svelte-k9o1m4::before {
    /* Position & layer */
    inset-block-start: calc(var(--hx-website-size-1) * -1);
    inset-inline-start: 0;
    position: absolute;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-1);
    width: 100%;

    /* Background */
    background: var(--section-rail-color);

    /* Transform */
    transform: scaleX(var(--deck-line-fill, 0));
    transform-origin: left center;

    /* Interaction */
    pointer-events: none;

    /* Generated content */
    content: '';
  }

  @keyframes svelte-k9o1m4-detail-panel-in {
    from {
      /* Effects */
      opacity: 0;

      /* Transform */
      transform: translateY(var(--hx-website-size-8));
    }

    to {
      /* Effects */
      opacity: 1;

      /* Transform */
      transform: translateY(0);
    }
  }

  @media (max-width: 1023px) {
    /* Below desktop the compact stepper is too narrow, so the swipe deck takes over. */
    [data-content].svelte-k9o1m4 {
      /* Box behavior */
      display: none;
    }

    [data-mobile].svelte-k9o1m4 {
      /* Box behavior */
      display: flex;

      /* Flex & grid container */
      flex-direction: column;
      row-gap: var(--hx-website-size-16);

      /* Padding */
      padding-block: var(--hx-website-size-32) var(--hx-website-size-48);
    }

    [data-track].svelte-k9o1m4 {
      /* Margin */
      margin-block-start: var(--hx-website-size-16);
    }

    [data-eyebrow-wrap].svelte-k9o1m4 {
      /* Flex & grid container */
      justify-items: stretch;
    }

    [data-detail-copy].svelte-k9o1m4 {
      /* Size */
      max-width: none;
      width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-detail-panel].svelte-k9o1m4 {
      /* Transition & animation */
      animation: none;
    }
  }

[data-first-insights].svelte-rjo5zg {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: 100%;

    /* Background */
    background:
      radial-gradient(
        circle at 0% 100%,
        color-mix(in srgb, var(--hx-color-palette-website-mint-n900) 40%, transparent),
        transparent 34%
      ),
      var(--hx-color-website-background-page);
  }

  @media (max-width: 1023px) {
    [data-first-insights].svelte-rjo5zg {
      /* Background */
      background: transparent;
    }
  }

[data-stages].svelte-1gjjbso,
  [data-stat].svelte-1gjjbso {
    /* Box behavior */
    box-sizing: border-box;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-stages].svelte-1gjjbso {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--hx-website-size-80);
    padding-inline: var(--hx-website-size-104);
  }

  [data-stat].svelte-1gjjbso {
    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    gap: var(--hx-website-size-32);

    /* Padding */
    padding-block: var(--hx-website-size-88);
    padding-inline: var(--hx-website-size-40);
  }

  [data-intro].svelte-1gjjbso {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-subtitle].svelte-1gjjbso {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-lg);
  }

  [data-flow].svelte-1gjjbso {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Margin */
    margin: 0;

    /* Padding */
    padding: 0;

    /* Lists & tables */
    list-style: none;
  }

  [data-stage-item].svelte-1gjjbso {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);
  }

  [data-stage-pill].svelte-1gjjbso {
    /* Box behavior */
    box-sizing: border-box;
    display: inline-flex;

    /* Size */
    max-width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    /* Hug the label's content instead of stretching to the stage column width
       (the [data-stage-item] flex column would otherwise stretch this child). */
    align-self: flex-start;

    /* Margin */
    margin: 0;

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-24);

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-base);
    text-transform: lowercase;
  }

  [data-stage-copy].svelte-1gjjbso {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-stage-title].svelte-1gjjbso {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
  }

  [data-stage-body].svelte-1gjjbso {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-stat-heading].svelte-1gjjbso {
    /* Margin */
    margin: 0;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: transparent;
  }

  [data-stat-body].svelte-1gjjbso {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
  }

  @media (max-width: 1023px) {
    [data-stages].svelte-1gjjbso {
      /* Padding */
      padding-inline: var(--hx-website-size-48);
    }

    [data-stat].svelte-1gjjbso {
      /* Size */
      height: auto;

      /* Padding */
      padding-block: var(--hx-website-size-56);
      padding-inline: var(--hx-website-size-48);
    }

    [data-stat-heading].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-4xl);
    }

    [data-stat-body].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-xl);
    }
  }

  @media (max-width: 599px) {
    [data-stages].svelte-1gjjbso {
      /* Padding */
      padding-block: var(--hx-website-size-48);
      padding-inline: var(--hx-website-size-24);
    }

    [data-subtitle].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-base);
    }

    [data-stat].svelte-1gjjbso {
      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }

    [data-stat-heading].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }

    [data-stat-body].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-xl);
    }

    [data-stage-title].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
    }

    [data-stage-body].svelte-1gjjbso {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
    }
  }

[data-section].svelte-16d774d {
    /* Custom properties */
    --section-padding-block: calc(
      var(--hx-website-size-56) + var(--hx-website-size-40) * var(--hx-fluid-t-tablet)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-56);

    /* Padding */
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-heading].svelte-16d774d {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-4xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
  }

  [data-columns].svelte-16d774d {
    /* Box behavior */
    display: grid;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
    gap: var(--hx-website-size-56);
  }

  [data-services].svelte-16d774d {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-40);
  }

  [data-services-intro].svelte-16d774d {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-label].svelte-16d774d {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-medium);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-intro].svelte-16d774d {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-service-list].svelte-16d774d {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-service].svelte-16d774d {
    /* Border & outline */
    border-block-start: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
  }

  [data-service-trigger].svelte-16d774d {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border: 0;

    /* Padding */
    padding-block: var(--hx-website-size-16);
    padding-inline: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    text-align: start;

    /* Interaction */
    cursor: pointer;
  }

  [data-service-trigger-label].svelte-16d774d {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-secondary);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-service-trigger].svelte-16d774d:is(:where(.svelte-16d774d):hover, :where(.svelte-16d774d):focus-visible) [data-service-trigger-label]:where(.svelte-16d774d) {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-service-trigger][data-service-trigger-selected].svelte-16d774d [data-service-trigger-label]:where(.svelte-16d774d) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-service-trigger].svelte-16d774d:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(-1 * var(--hx-border-width-medium));
  }

  [data-service-chevron].svelte-16d774d {
    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Typography & color */
    color: currentColor;

    /* Transform */
    /* Points at the detail panel on the right; the selected tab's chevron shows accent color. */
    transform: rotate(-90deg);
    transform-origin: center;

    @media (prefers-reduced-motion: no-preference) {
      /* Transition & animation */
      transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
    }
  }

  [data-service-trigger][data-service-trigger-selected].svelte-16d774d [data-service-chevron]:where(.svelte-16d774d) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-service-rows].svelte-16d774d {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Margin */
    margin: 0;
  }

  [data-service-row].svelte-16d774d {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-4);
  }

  [data-service-row-label].svelte-16d774d {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-lg);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-service-row-detail].svelte-16d774d {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-callout].svelte-16d774d {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hx-website-size-32);
  }

  @media (max-width: 1023px) {
    [data-columns].svelte-16d774d {
      /* Flex & grid container */
      grid-template-columns: minmax(0, 1fr);
      gap: var(--hx-website-size-48);
    }
  }

  @media (max-width: 599px) {
    [data-heading].svelte-16d774d {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }
  }

[data-card].svelte-z5zxel {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: var(--pricing-card-padding-block);
    padding-inline: var(--pricing-card-padding-inline);
  }

  [data-card-full].svelte-z5zxel {
    /* Border & outline */
    border-top: 0;
  }

  [data-card-actions].svelte-z5zxel {
    /* Flex & grid container */
    flex-direction: row;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--hx-website-size-56);
  }

  [data-card-title].svelte-z5zxel {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-description].svelte-z5zxel {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-primary);
  }

  @media (max-width: 599px) {
    [data-card-actions].svelte-z5zxel {
      /* Flex & grid container */
      flex-direction: column;
    }
  }

[data-section].svelte-1fm7jyi {
    /* Custom properties */
    --detail-band-border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
    --detail-block-padding-block: calc(
      var(--hx-website-size-56) + var(--hx-website-size-24) * var(--hx-fluid-t-tablet)
    );
    --detail-block-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );
    --detail-cell-border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
    /* Self-hosted and Managed SaaS panels share one content column so neither tab reads narrower
       than the other when a visitor switches between them. */
    --detail-column: 1020px;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-heading-band].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border-block-end: var(--detail-band-border);

    /* Padding */
    padding-block: var(--hx-website-size-40);
    padding-inline: var(--detail-block-padding-inline);

    /* Typography & color */
    text-align: center;
  }

  [data-tabs].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Border & outline */
    border-block-end: var(--detail-band-border);
  }

  [data-tab].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border: 0;

    /* Padding */
    padding-block: var(--hx-website-size-16);
    padding-inline: var(--hx-website-size-16);

    /* Background */
    background: transparent;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
    color: var(--hx-color-website-text-muted);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-tab].svelte-1fm7jyi + [data-tab]:where(.svelte-1fm7jyi) {
    /* Border & outline */
    border-inline-start: var(--detail-band-border);
  }

  [data-tab][data-active].svelte-1fm7jyi {
    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    color: transparent;
  }

  [data-tab].svelte-1fm7jyi:not([data-active]):hover {
    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-tab].svelte-1fm7jyi:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  [data-panel].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-block].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-48);

    /* Padding */
    padding-block: var(--detail-block-padding-block);
    padding-inline: var(--detail-block-padding-inline);
  }

  [data-block].svelte-1fm7jyi > :where(.svelte-1fm7jyi) {
    /* Size */
    max-width: var(--detail-column);
    width: 100%;
  }

  [data-intro].svelte-1fm7jyi {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-accent].svelte-1fm7jyi {
    /* Typography & color */
    color: var(--hx-color-website-text-accent-strong);
  }

  /* Boxed group table: separate borders + a spacer table-row per group open the gaps between the
     bordered product boxes; only start edges paint (plus explicit outer ends) so borders never
     double up. */
  [data-table].svelte-1fm7jyi {
    /* Size */
    width: 100%;

    /* Border & outline */
    border-collapse: separate;
    border-spacing: 0;
  }

  [data-table].svelte-1fm7jyi tbody:where(.svelte-1fm7jyi)::before {
    /* Box behavior */
    display: table-row;

    /* Size */
    height: var(--hx-website-size-24);

    /* Generated content */
    content: '';
  }

  [data-table].svelte-1fm7jyi th:where(.svelte-1fm7jyi),
  [data-table].svelte-1fm7jyi td:where(.svelte-1fm7jyi) {
    /* Border & outline */
    border-block-start: var(--detail-cell-border);
    border-inline-end: var(--detail-cell-border);

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-8);

    /* Typography & color */
    text-align: start;
    vertical-align: middle;
  }

  [data-table].svelte-1fm7jyi th:where(.svelte-1fm7jyi):first-child,
  [data-table].svelte-1fm7jyi td:where(.svelte-1fm7jyi):first-child {
    /* Border & outline */
    border-inline-start: var(--detail-cell-border);
  }

  [data-table].svelte-1fm7jyi thead:where(.svelte-1fm7jyi) th:where(.svelte-1fm7jyi),
  [data-table].svelte-1fm7jyi tbody:where(.svelte-1fm7jyi) tr:where(.svelte-1fm7jyi):last-child th:where(.svelte-1fm7jyi),
  [data-table].svelte-1fm7jyi tbody:where(.svelte-1fm7jyi) tr:where(.svelte-1fm7jyi):last-child td:where(.svelte-1fm7jyi) {
    /* Border & outline */
    border-block-end: var(--detail-cell-border);
  }

  [data-table].svelte-1fm7jyi thead:where(.svelte-1fm7jyi) th:where(.svelte-1fm7jyi) {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
  }

  [data-table].svelte-1fm7jyi [data-price-cell]:where(.svelte-1fm7jyi) {
    /* Typography & color */
    text-align: end;
  }

  [data-sku].svelte-1fm7jyi {
    /* Typography & color */
    font-weight: var(--hx-font-weight-regular);
  }

  [data-sku-title].svelte-1fm7jyi {
    /* Box behavior */
    display: block;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-lg);
    text-transform: uppercase;
  }

  [data-sku-note].svelte-1fm7jyi {
    /* Box behavior */
    display: block;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    font-style: italic;
    line-height: var(--hx-line-height-lg);
  }

  [data-kind='addon'].svelte-1fm7jyi [data-sku-title]:where(.svelte-1fm7jyi) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-regular);
    color: var(--hx-color-website-text-muted);
  }

  [data-kind='addon'].svelte-1fm7jyi [data-sku-note]:where(.svelte-1fm7jyi) {
    /* Typography & color */
    color: var(--hx-color-website-text-muted);
  }

  [data-price='amount'].svelte-1fm7jyi {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-lg);
  }

  /* Remark price kind replaces the amount with a phrase (no number to right-align), so the frame
     keeps it start-aligned like the SKU column instead of following the amount's end alignment. The
     link kind (e.g. the Mira "Talk to us about access" cell) stays end-aligned like every other
     price in the column. */
  [data-price='remark'].svelte-1fm7jyi {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    font-style: italic;
    line-height: var(--hx-line-height-lg);
  }

  [data-price='link'].svelte-1fm7jyi {
    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    line-height: var(--hx-line-height-lg);
  }

  /* Matches [data-table] [data-price-cell]'s specificity so this start-align override actually wins
     (a bare [data-price='remark'] selector ties with/loses to the table-scoped default). */
  [data-table].svelte-1fm7jyi [data-price='remark']:where(.svelte-1fm7jyi) {
    /* Typography & color */
    text-align: start;
  }

  [data-wide].svelte-1fm7jyi {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-wide='note'].svelte-1fm7jyi {
    /* Typography & color */
    font-style: italic;
  }

  [data-table].svelte-1fm7jyi [data-wide='link']:where(.svelte-1fm7jyi) {
    /* Typography & color */
    text-align: center;
  }

  [data-contact-link].svelte-1fm7jyi {
    /* Typography & color */
    text-decoration: underline;
    text-decoration-skip-ink: none;
    color: var(--hx-color-website-text-accent-strong);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-contact-link].svelte-1fm7jyi:is(:where(.svelte-1fm7jyi):hover, :where(.svelte-1fm7jyi):focus-visible) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-pack-details].svelte-1fm7jyi {
    /* Border & outline */
    border-block-start: var(--detail-band-border);
  }

  [data-pack-details].svelte-1fm7jyi [data-block]:where(.svelte-1fm7jyi) {
    /* Flex & grid container */
    align-items: stretch;
  }

  [data-pack-details].svelte-1fm7jyi [data-block]:where(.svelte-1fm7jyi) > :where(.svelte-1fm7jyi) {
    /* Size */
    max-width: none;
  }

  [data-pack-details-heading].svelte-1fm7jyi {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-3xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
  }

  [data-pack-list].svelte-1fm7jyi {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-pack-item].svelte-1fm7jyi {
    /* Border & outline */
    border-block-end: var(--detail-cell-border);
  }

  [data-pack-item-heading].svelte-1fm7jyi {
    /* Margin */
    margin: 0;
  }

  [data-pack-trigger].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    width: 100%;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border: 0;

    /* Padding */
    padding-block: var(--hx-website-size-24);
    padding-inline: 0;

    /* Background */
    background: transparent;

    /* Typography & color */
    text-align: start;

    /* Interaction */
    cursor: pointer;
  }

  [data-pack-trigger-label].svelte-1fm7jyi {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-pack-trigger].svelte-1fm7jyi:is(:where(.svelte-1fm7jyi):hover, :where(.svelte-1fm7jyi):focus-visible) [data-pack-trigger-label]:where(.svelte-1fm7jyi) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-pack-trigger].svelte-1fm7jyi:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(-1 * var(--hx-border-width-medium));
  }

  [data-pack-chevron].svelte-1fm7jyi {
    /* Box behavior */
    display: inline-flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: none;

    /* Typography & color */
    color: var(--hx-color-website-text-secondary);

    /* Transform */
    transform-origin: center;

    @media (prefers-reduced-motion: no-preference) {
      /* Transition & animation */
      transition: transform var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
    }
  }

  [data-pack-chevron][data-pack-chevron-expanded].svelte-1fm7jyi {
    /* Transform */
    transform: rotate(180deg);
  }

  [data-pack-panel].svelte-1fm7jyi {
    /* Padding */
    padding-block-end: var(--hx-website-size-32);
    padding-inline-start: var(--hx-website-size-16);
  }

  [data-explain-list].svelte-1fm7jyi {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Margin */
    margin: 0;
  }

  [data-explain-item].svelte-1fm7jyi {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-4);
  }

  [data-term].svelte-1fm7jyi {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: center;
    gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-lg);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-term].svelte-1fm7jyi::before {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-4);
    width: var(--hx-website-size-4);

    /* Flex & grid item */
    flex: none;

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Background */
    background: var(--hx-color-website-background-accent-active);

    /* Generated content */
    content: '';
  }

  [data-detail].svelte-1fm7jyi {
    /* Margin */
    margin: 0;

    /* Padding */
    padding-inline-start: calc(var(--hx-website-size-4) + var(--hx-website-size-8));

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-sizing-band].svelte-1fm7jyi {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    border-block: var(--detail-band-border);

    /* Padding */
    padding-block: var(--hx-website-size-80);
    padding-inline: var(--detail-block-padding-inline);
  }

  [data-sizing-heading].svelte-1fm7jyi {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
  }

  [data-sizing-copy].svelte-1fm7jyi {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Flex & grid item */
    align-self: flex-start;
  }

  [data-sizing-title].svelte-1fm7jyi {
    /* Margin */
    margin: 0;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: transparent;
  }

  [data-sizing-intro].svelte-1fm7jyi {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-sizing-scroll].svelte-1fm7jyi {
    /* Size */
    max-width: 100%;

    /* Overflow & scroll */
    overflow-x: auto;
    overflow-y: hidden;
  }

  [data-sizing-table].svelte-1fm7jyi {
    /* Size */
    min-width: 720px;
    width: 100%;

    /* Border & outline */
    border-collapse: collapse;
  }

  [data-sizing-table].svelte-1fm7jyi th:where(.svelte-1fm7jyi),
  [data-sizing-table].svelte-1fm7jyi td:where(.svelte-1fm7jyi) {
    /* Typography & color */
    text-align: start;
    vertical-align: middle;
  }

  [data-sizing-table].svelte-1fm7jyi thead:where(.svelte-1fm7jyi) th:where(.svelte-1fm7jyi) {
    /* Padding */
    padding-block-end: var(--hx-website-size-24);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
  }

  [data-sizing-table].svelte-1fm7jyi tbody:where(.svelte-1fm7jyi) th:where(.svelte-1fm7jyi),
  [data-sizing-table].svelte-1fm7jyi tbody:where(.svelte-1fm7jyi) td:where(.svelte-1fm7jyi) {
    /* Border & outline */
    border-block-end: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);

    /* Padding */
    padding-block: var(--hx-website-size-8);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-sizing-sku].svelte-1fm7jyi {
    /* Typography & color */
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-sizing-table].svelte-1fm7jyi thead:where(.svelte-1fm7jyi) th:where(.svelte-1fm7jyi):last-child,
  [data-sizing-table].svelte-1fm7jyi [data-sizing-price]:where(.svelte-1fm7jyi) {
    /* Typography & color */
    text-align: end;
  }

  [data-sizing-table].svelte-1fm7jyi [data-sizing-price]:where(.svelte-1fm7jyi) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  @media (max-width: 599px) {
    [data-tab].svelte-1fm7jyi {
      /* Typography & color */
      font-size: var(--hx-font-size-lg);
    }

    [data-sizing-heading].svelte-1fm7jyi {
      /* Typography & color */
      font-size: var(--hx-website-font-size-32);
    }
  }

[data-card].svelte-18dy46y {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: var(--pricing-card-padding-block);
    padding-inline: var(--pricing-card-padding-inline);
  }

  [data-row].svelte-18dy46y {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-row].svelte-18dy46y [data-card]:where(.svelte-18dy46y) {
    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border-right: 0;
    border-top: 0;
  }

  [data-row].svelte-18dy46y [data-card]:where(.svelte-18dy46y):last-child {
    /* Border & outline */
    border-right: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
  }

  [data-card-full].svelte-18dy46y {
    /* Size */
    width: 100%;

    /* Border & outline */
    border-top: 0;
  }

  [data-card-center].svelte-18dy46y {
    /* Flex & grid container */
    align-items: center;
  }

  [data-card-actions].svelte-18dy46y {
    /* Flex & grid container */
    flex-direction: row;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--hx-website-size-56);
  }

  [data-price-block].svelte-18dy46y {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-price-line].svelte-18dy46y {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: flex-end;
    gap: var(--hx-website-size-8);
  }

  [data-card-section-title].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-card-title].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-name].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-name-reserve].svelte-18dy46y {
    /* Size */
    min-height: calc(var(--tier-name-lines, 2) * 1lh);
  }

  [data-tier-name-text].svelte-18dy46y {
    /* Box behavior */
    display: block;
  }

  [data-qualifier].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    font-style: italic;
    line-height: normal;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-price].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: normal;
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-period].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-description].svelte-18dy46y {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-disabled);
  }

  @media (max-width: 1023px) {
    [data-row].svelte-18dy46y {
      /* Flex & grid container */
      flex-direction: column;
    }

    [data-row].svelte-18dy46y [data-card]:where(.svelte-18dy46y) {
      /* Border & outline */
      border-right: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
    }

    [data-row].svelte-18dy46y [data-card]:where(.svelte-18dy46y) + [data-card]:where(.svelte-18dy46y) {
      /* Border & outline */
      border-top: 0;
    }

    [data-tier-name-reserve].svelte-18dy46y {
      /* Size */
      min-height: 0;
    }
  }

  @media (max-width: 599px) {
    [data-card-actions].svelte-18dy46y {
      /* Flex & grid container */
      flex-direction: column;
    }
  }

[data-section].svelte-1vgai5x {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
  }

  [data-panel].svelte-1vgai5x {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-40);

    /* Border & outline */
    /* No block borders: the section frame paints the top line and the licensing panel's dashed
       ring paints the panel seam below. */
    border-inline: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: calc(var(--hx-website-size-64) + var(--hx-website-size-16));
    padding-inline: calc(var(--hx-website-size-80) + var(--hx-website-size-24));
  }

  [data-eyebrow-wrap].svelte-1vgai5x {
    /* Flex & grid item */
    /* Panel default is align-items: stretch (headings/body copy need the full panel width to
       wrap correctly); the pill is the one child that must stay fit-content. */
    align-self: flex-start;
  }

  [data-panel-licensing].svelte-1vgai5x {
    /* Border & outline */
    /* transparent 1px (all sides) reserves layout; 5/5 dash painted via background. */
    border-block-end: var(--hx-border-width-thin) solid transparent;
    border-block-start: var(--hx-border-width-thin) solid transparent;
    border-inline: var(--hx-border-width-thin) solid transparent;

    /* Background */
    /* Figma dash strokeDashes [5,5] on the border ring. */
    background-image:
      repeating-linear-gradient(
        90deg,
        var(--hx-color-website-border-section) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        90deg,
        var(--hx-color-website-border-section) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        180deg,
        var(--hx-color-website-border-section) 0 5px,
        transparent 5px 10px
      ),
      repeating-linear-gradient(
        180deg,
        var(--hx-color-website-border-section) 0 5px,
        transparent 5px 10px
      );
    background-origin: border-box;
    background-position:
      top left,
      bottom left,
      left top,
      right top;
    background-repeat: no-repeat;
    background-size:
      100% var(--hx-border-width-thin),
      100% var(--hx-border-width-thin),
      var(--hx-border-width-thin) 100%,
      var(--hx-border-width-thin) 100%;
  }

  [data-heading].svelte-1vgai5x {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-2xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-features].svelte-1vgai5x {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-40);
  }

  [data-feature].svelte-1vgai5x {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-feature-subheading].svelte-1vgai5x,
  [data-feature-body].svelte-1vgai5x,
  [data-licensing-subheading].svelte-1vgai5x {
    /* Margin */
    margin: 0;
  }

  [data-feature-subheading].svelte-1vgai5x,
  [data-licensing-subheading].svelte-1vgai5x {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-feature-body].svelte-1vgai5x {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-subtle);
  }

  [data-highlight].svelte-1vgai5x {
    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-licensing-copy].svelte-1vgai5x {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-licensing-body].svelte-1vgai5x {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-subtle);
  }

  [data-licensing-body].svelte-1vgai5x p:where(.svelte-1vgai5x) {
    /* Margin */
    margin: 0;
  }

  [data-scaling].svelte-1vgai5x {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    /* No block-start (the section frame paints the top line) and no inline-start beside the
       panels (their edges paint the middle seam — solid along modular, dashed along licensing,
       per Figma); painting both sides doubled the seam to 2px. */
    border-block-end: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
    border-inline-end: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: calc(var(--hx-website-size-64) + var(--hx-website-size-24));
    padding-inline: var(--hx-website-size-40);
  }

  [data-scaling-heading].svelte-1vgai5x {
    /* Margin */
    margin: 0;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
    color: transparent;
  }

  @media (max-width: 1023px) {
    [data-panel].svelte-1vgai5x {
      /* Padding */
      padding-inline: var(--hx-website-size-40);
    }

    [data-scaling].svelte-1vgai5x {
      /* Padding */
      padding-inline: var(--hx-website-size-40);
    }
  }

  @media (max-width: 599px) {
    [data-panel].svelte-1vgai5x {
      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }

    [data-scaling].svelte-1vgai5x {
      /* Border & outline */
      /* Stacked below the licensing panel, the inline-start edge is the section's outer left
         edge again (no panel beside it paints the seam). */
      border-inline-start: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }

    [data-scaling-heading].svelte-1vgai5x {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }
  }

[data-card].svelte-u6pntf {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: var(--pricing-card-padding-block);
    padding-inline: var(--pricing-card-padding-inline);
  }

  [data-row].svelte-u6pntf {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-row].svelte-u6pntf [data-card]:where(.svelte-u6pntf) {
    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border-right: 0;
    border-top: 0;
  }

  [data-row].svelte-u6pntf [data-card]:where(.svelte-u6pntf):last-child {
    /* Border & outline */
    border-right: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
  }

  [data-card-full].svelte-u6pntf {
    /* Size */
    width: 100%;

    /* Border & outline */
    border-top: 0;
  }

  [data-card-center].svelte-u6pntf {
    /* Flex & grid container */
    align-items: center;

    /* Typography & color */
    text-align: center;
  }

  [data-card-actions].svelte-u6pntf {
    /* Flex & grid container */
    flex-direction: row;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--hx-website-size-56);
  }

  [data-price-block].svelte-u6pntf {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-price-line].svelte-u6pntf {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: flex-end;
    gap: var(--hx-website-size-8);
  }

  [data-card-section-title].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-card-title].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-name].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-name-reserve].svelte-u6pntf {
    /* Size */
    min-height: calc(var(--tier-name-lines, 2) * 1lh);
  }

  [data-tier-name-text].svelte-u6pntf {
    /* Box behavior */
    display: block;
  }

  [data-qualifier].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    font-style: italic;
    line-height: normal;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-price].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: normal;
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-period].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-description].svelte-u6pntf {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-disabled);
  }

  [data-body-stack].svelte-u6pntf {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  @media (max-width: 1023px) {
    [data-row].svelte-u6pntf {
      /* Flex & grid container */
      flex-direction: column;
    }

    [data-row].svelte-u6pntf [data-card]:where(.svelte-u6pntf) {
      /* Border & outline */
      border-right: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
    }

    [data-row].svelte-u6pntf [data-card]:where(.svelte-u6pntf) + [data-card]:where(.svelte-u6pntf) {
      /* Border & outline */
      border-top: 0;
    }

    [data-tier-name-reserve].svelte-u6pntf {
      /* Size */
      min-height: 0;
    }
  }

  @media (max-width: 599px) {
    /* "Two ways to run it" (a bare divider) stays centered on mobile per Figma; "Protocol packs" (a
       divider with body copy underneath) does not — this modifier scopes the mobile left-align to
       just that card without touching the shared [data-card-center] centering behavior. */
    [data-card-align-start-mobile].svelte-u6pntf {
      /* Flex & grid container */
      align-items: flex-start;

      /* Typography & color */
      text-align: left;
    }

    [data-card-align-start-mobile].svelte-u6pntf [data-card-section-title]:where(.svelte-u6pntf) {
      /* Typography & color */
      text-align: left;
    }

    [data-card-actions].svelte-u6pntf {
      /* Flex & grid container */
      flex-direction: column;
    }
  }

[data-section].svelte-19h0fmc {
    /* Custom properties */
    --section-action-width: calc(
      var(--hx-website-layout-grid-column) * 2 + var(--hx-website-size-64)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-16) * var(--hx-fluid-t-mobile) +
        (var(--hx-website-size-64) + var(--hx-website-size-4)) * var(--hx-fluid-t-desktop)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-48);

    /* Padding */
    padding-block: var(--hx-website-size-48)
      calc(var(--hx-website-size-48) + var(--hx-website-size-2));
    padding-inline: var(--section-padding-inline);
  }

  [data-media].svelte-19h0fmc {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    max-width: 100%;
    min-width: 0;
    width: 100%;
  }

  [data-actions].svelte-19h0fmc {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    max-width: 100%;
    width: var(--section-action-width);
  }

  @media (max-width: 599px) {
    [data-section].svelte-19h0fmc {
      /* Flex & grid container */
      gap: var(--hx-website-size-32);

      /* Padding */
      padding-block: var(--hx-website-size-24);
    }
  }

/* --scroll-slider-gutter insets the first/last card and the rail to the page content column;
     --card-width sizes each slide so three cards span the column on desktop. The wrapper extends the
     viewport through SectionGrid's 20px margins so the next card can peek at the browser edge. Mobile
     uses a 57px total inset (336px card at the 393px Figma viewport), a 12px gap, and a 28.5px centered
     gutter. The phone factor is declared in this first rule to satisfy component-css-vars and becomes
     zero at 600px, restoring the prior 24px gap, wrapper alignment, and gutter for tablet/desktop. */
  [data-slider].svelte-13ns2ti {
    /* Custom properties */
    --card-width: calc(
      (
          min(
              var(--hx-website-layout-container-width),
              100vw - 2 * var(--hx-website-layout-margin-stretch)
            ) -
            2 * var(--hx-website-size-24)
        ) /
        3
    );
    --scroll-slider-gap: calc(
      var(--hx-website-size-24) - (var(--hx-website-size-16) - var(--hx-website-size-4)) *
        var(--scroll-slider-phone-factor)
    );
    --scroll-slider-gutter: max(
      calc(
        (var(--hx-website-size-56) + var(--hx-website-size-1)) * var(--scroll-slider-phone-factor) /
          2
      ),
      calc(
        (100vw - var(--hx-website-layout-container-width)) / 2 -
          var(--hx-website-layout-margin-stretch)
      )
    );
    --scroll-slider-phone-factor: clamp(0, (600px - 100vw) / 1px, 1);
    /* The rail sits idle at low opacity and comes up on hover/focus/drag (ScrollSlider), rather than
       staying at full strength before the visitor has touched the slider at all. */
    --scroll-slider-rail-idle-opacity: var(--hx-opacity-35);

    /* Size */
    width: 100%;

    /* Padding */
    /* Opens the Figma gap between the hero and the highlighted card's expanded top edge. */
    padding-block-start: var(--hx-website-size-88);
  }

  [data-visually-hidden].svelte-13ns2ti {
    /* Position & layer */
    position: absolute;

    /* Size */
    height: var(--hx-website-size-1);
    width: var(--hx-website-size-1);

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    white-space: nowrap;

    /* Effects */
    clip-path: inset(50%);
  }

  [data-card].svelte-13ns2ti {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--pricing-card-min-height, auto);
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Flex & grid item */
    flex: 0 0 var(--card-width);

    /* Margin */
    /* The block margins are the highlight headroom: the highlighted card drops them and stretches
       to the full row height, extending past its neighbours on both ends (Figma 3009:3908). */
    margin-block: var(--hx-website-size-32);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: var(--hx-website-size-24);
    padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet)
    );

    /* Background */
    background: transparent;

    /* Transition & animation */
    transition:
      background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      border-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard),
      margin var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-card][data-highlighted].svelte-13ns2ti {
    /* Margin */
    margin-block: 0;

    /* Border & outline */
    border-color: var(--hx-color-website-border-subtle);

    /* Background */
    background: var(--hx-color-website-background-panel);
  }

  [data-card-top].svelte-13ns2ti {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);
  }

  [data-card-name].svelte-13ns2ti {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-2xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);

    /* Transition & animation */
    transition: color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-card][data-highlighted].svelte-13ns2ti [data-card-name]:where(.svelte-13ns2ti) {
    /* Typography & color */
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-tiers].svelte-13ns2ti {
    /* Box behavior */
    display: grid;

    /* Flex & grid container */
    grid-template-columns: 1fr 1fr;
    gap: var(--hx-website-size-16);
  }

  [data-tier].svelte-13ns2ti {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-8);
  }

  [data-tier-label].svelte-13ns2ti {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    font-weight: var(--hx-font-weight-medium);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-subtle);
  }

  [data-tier-price].svelte-13ns2ti {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-4);
  }

  [data-tier-amount].svelte-13ns2ti {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-period].svelte-13ns2ti {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-disabled);
  }

  [data-card-note].svelte-13ns2ti {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-card-desc].svelte-13ns2ti {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-card-actions].svelte-13ns2ti {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Margin */
    margin-block-start: auto;
  }

  [data-footer].svelte-13ns2ti {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  @media (max-width: 1023px) {
    [data-card].svelte-13ns2ti {
      /* Flex & grid item */
      flex: 0 0
        calc(
          (
              min(
                  var(--hx-website-layout-container-width),
                  100vw - 2 * var(--hx-website-layout-margin-stretch)
                ) -
                var(--hx-website-size-24)
            ) /
            2
        );
    }
  }

  @media (max-width: 599px) {
    [data-slider].svelte-13ns2ti {
      /* Size */
      width: calc(100% + 2 * var(--hx-website-layout-margin-stretch));

      /* Margin */
      margin-inline: calc(-1 * var(--hx-website-layout-margin-stretch));
    }

    [data-card].svelte-13ns2ti {
      /* Flex & grid item */
      /* 393px target: 393 - 56 - 1 = 336px. Keeping the inset constant also keeps the card centered
         on narrower phones while the full-bleed viewport exposes equal neighbour peeks. */
      flex: 0 0 calc(100vw - 2 * var(--scroll-slider-gutter));

      /* Overflow & scroll */
      /* Pairs with ScrollSlider's mobile scroll-snap-type: the slides are slotted markup, so the
         snap alignment must live here in the consumer's own scoped CSS. */
      scroll-snap-align: start;
    }
  }

[data-card].svelte-ahz18a {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: var(--pricing-card-padding-block);
    padding-inline: var(--pricing-card-padding-inline);
  }

  [data-card-full].svelte-ahz18a {
    /* Border & outline */
    border-top: 0;
  }

  [data-card-actions].svelte-ahz18a {
    /* Flex & grid container */
    flex-direction: row;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--hx-website-size-56);
  }

  [data-card-title].svelte-ahz18a {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-description].svelte-ahz18a {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-disabled);
  }

  @media (max-width: 599px) {
    [data-card-actions].svelte-ahz18a {
      /* Flex & grid container */
      flex-direction: column;
    }
  }

[data-card].svelte-19az0gz {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);

    /* Padding */
    padding-block: var(--pricing-card-padding-block);
    padding-inline: var(--pricing-card-padding-inline);
  }

  [data-row].svelte-19az0gz {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-row].svelte-19az0gz [data-card]:where(.svelte-19az0gz) {
    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border-right: 0;
    border-top: 0;
  }

  [data-row].svelte-19az0gz [data-card]:where(.svelte-19az0gz):last-child {
    /* Border & outline */
    border-right: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
  }

  [data-card-full].svelte-19az0gz {
    /* Size */
    width: 100%;

    /* Border & outline */
    border-top: 0;
  }

  [data-card-center].svelte-19az0gz {
    /* Flex & grid container */
    align-items: center;
  }

  [data-card-actions].svelte-19az0gz {
    /* Flex & grid container */
    flex-direction: row;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--hx-website-size-56);
  }

  [data-divider].svelte-19az0gz {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-border-width-thin);
    width: 100%;

    /* Margin */
    margin: 0;

    /* Border & outline */
    border: 0;

    /* Background */
    /* exact Figma 5/5 dashed divider line. */
    background-image: repeating-linear-gradient(
      90deg,
      var(--hx-color-website-border-section) 0 5px,
      transparent 5px 10px
    );
  }

  [data-price-block].svelte-19az0gz {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-price-line].svelte-19az0gz {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: flex-end;
    gap: var(--hx-website-size-8);
  }

  [data-card-section-title].svelte-19az0gz {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-name].svelte-19az0gz {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-tier-name-reserve].svelte-19az0gz {
    /* Size */
    min-height: calc(var(--tier-name-lines, 2) * 1lh);
  }

  [data-tier-name-text].svelte-19az0gz {
    /* Box behavior */
    display: block;
  }

  [data-qualifier].svelte-19az0gz {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    font-style: italic;
    line-height: normal;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-price].svelte-19az0gz {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: normal;
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-period].svelte-19az0gz {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-description].svelte-19az0gz {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-primary);
  }

  @media (max-width: 1023px) {
    [data-row].svelte-19az0gz {
      /* Flex & grid container */
      flex-direction: column;
    }

    [data-row].svelte-19az0gz [data-card]:where(.svelte-19az0gz) {
      /* Border & outline */
      border-right: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
    }

    [data-row].svelte-19az0gz [data-card]:where(.svelte-19az0gz) + [data-card]:where(.svelte-19az0gz) {
      /* Border & outline */
      border-top: 0;
    }

    [data-tier-name-reserve].svelte-19az0gz {
      /* Size */
      min-height: 0;
    }
  }

  @media (max-width: 599px) {
    [data-card-actions].svelte-19az0gz {
      /* Flex & grid container */
      flex-direction: column;
    }
  }

[data-heading].svelte-i5faeo {
    /* Margin */
    margin: 0;

    /* Padding */
    padding-block: var(--hx-website-size-88);
    padding-inline: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-4xl);
    font-weight: var(--hx-font-weight-black);
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  @media (max-width: 599px) {
    [data-heading].svelte-i5faeo {
      /* Padding */
      padding-block: var(--hx-website-size-40);

      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }
  }

[data-card].svelte-5cksxz {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-32);

    /* Padding */
    padding-block: var(--hx-website-size-56);
    padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-badge].svelte-5cksxz {
    /* Box behavior */
    display: flex;

    /* Size */
    /* Height-first sizing: the badges share one token-derived height and keep their intrinsic
       aspect ratios; max-width guards against a wide badge pushing the row past the viewport. */
    height: calc(var(--hx-website-size-128) + var(--hx-website-size-56));
    max-width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: 0 0 auto;
  }

  [data-copy].svelte-5cksxz {
    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid item */
    flex: 1 0 auto;
  }

  /* Card's title/body scale shrinks font-size at its own mobile breakpoint; this card's copy holds
     a flat size at every breakpoint, so the nested span pins the size Card otherwise varies. */
  [data-title].svelte-5cksxz {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: calc(var(--certification-title-lines, 2) * 1lh);

    /* Typography & color */
    font-size: var(--hx-font-size-xl);
  }

  [data-title-text].svelte-5cksxz {
    /* Box behavior */
    display: block;
  }

  [data-body].svelte-5cksxz {
    /* Typography & color */
    font-size: var(--hx-font-size-base);
  }

  @media (max-width: 599px) {
    [data-card].svelte-5cksxz {
      /* Flex & grid container */
      justify-content: flex-start;
    }

    [data-copy].svelte-5cksxz {
      /* Flex & grid item */
      flex: 0 0 auto;
    }

    [data-title].svelte-5cksxz {
      /* Size */
      min-height: 0;
    }
  }

[data-section].svelte-11azl09 {
    /* Custom properties */
    --section-content-width: calc(
      var(--hx-website-layout-grid-column) * 5 + var(--hx-website-size-24)
    );
    --section-padding-block: calc(
      var(--hx-website-size-48) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-16) * var(--hx-fluid-t-desktop)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-40) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-16) * var(--hx-fluid-t-desktop)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-40);

    /* Margin */
    margin: 0;

    /* Padding */
    padding-block-end: var(--section-padding-block);
    padding-block-start: calc(var(--section-padding-block) + var(--hx-website-size-48));
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    text-align: center;
    color: var(--hx-color-website-text-primary);
  }

  [data-copy].svelte-11azl09,
  [data-attribution].svelte-11azl09 {
    /* Size */
    max-width: var(--section-content-width);
    min-width: 0;
    width: 100%;
  }

  [data-body].svelte-11azl09 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-light);
    line-height: var(--hx-line-height-2xl);
  }

  [data-attribution].svelte-11azl09 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-40);

    /* Typography & color */
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-light);
    line-height: var(--hx-line-height-md);
  }

  [data-meta].svelte-11azl09 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
  }

  [data-accent].svelte-11azl09 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 43px;
    width: 43px;

    /* Border & outline */
    border-radius: 50%;

    /* Background */
    background: var(--hx-color-website-background-panel-raised);
  }

  [data-portrait].svelte-11azl09 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 86px;
    width: 86px;

    /* Border & outline */
    border-radius: 50%;

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-portrait-image].svelte-11azl09 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;

    /* Effects */
    object-fit: cover;
    object-position: center;
  }

[data-section].svelte-xai1f8 {
    /* Custom properties */
    --section-label-background: var(--hx-color-website-overlay-glass);
    --section-label-border-color: var(--hx-color-website-border-highlight);
    --section-label-radius: var(--hx-radius-sm);
    --section-label-tab-color: var(--hx-color-website-background-accent-brand);
    /* One Figma-design pixel of the mobile stage: the 393-wide line artwork scales down with the
       viewport (xMinYMin meet), so mobile portrait anchors multiply this to track the line ends. */
    --section-mobile-design-px: calc(min(100vw, 393px) / 393);
    --section-portrait-border-color: var(--hx-color-website-border-highlight);
    --section-portrait-overlay: color-mix(
      in srgb,
      var(--hx-color-palette-website-slate-n1000) 40%,
      transparent
    );

    /* Box behavior */
    box-sizing: border-box;
    container-type: inline-size;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-background].svelte-xai1f8 {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: 100%;
    width: 100%;

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-media].svelte-xai1f8,
  [data-overlay].svelte-xai1f8 {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Interaction */
    pointer-events: none;
  }

  [data-media].svelte-xai1f8 {
    /* Size */
    height: 100%;
    max-width: none;
    width: 100%;

    /* Effects */
    filter: blur(var(--hx-website-size-2));

    /* Transform */
    transform: scale(1.01);
  }

  [data-overlay].svelte-xai1f8 {
    /* Background */
    background: linear-gradient(
      180deg,
      var(--hx-color-palette-website-slate-n950) 21.922%,
      transparent 66.978%
    );
  }

  [data-stage].svelte-xai1f8 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    max-width: var(--hx-website-layout-container-width);
    min-width: 0;
    width: 100%;

    /* Margin */
    margin-inline: auto;
  }

  [data-labels].svelte-xai1f8,
  [data-portraits].svelte-xai1f8,
  [data-lines].svelte-xai1f8 {
    /* Position & layer */
    position: absolute;
  }

  [data-labels].svelte-xai1f8 {
    /* Position & layer */
    inset-block-start: var(--hx-website-size-128);
    inset-inline-start: 50%;
    z-index: 3;

    /* Box behavior */
    display: flex;

    /* Size */
    width: min(
      calc(536px * 2 - var(--hx-website-size-2)),
      calc(
        100% - var(--hx-website-layout-grid-column) + var(--hx-website-size-4) +
          var(--hx-website-size-2)
      )
    );

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-56);

    /* Transform */
    transform: translateX(-50%);
  }

  [data-label].svelte-xai1f8 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;
  }

  [data-tab].svelte-xai1f8 {
    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-24);

    /* Flex & grid item */
    flex: 0 0 var(--hx-website-size-4);

    /* Border & outline */
    border: var(--hx-website-size-1) solid var(--hx-color-website-border-glass-soft);
    border-inline-end: 0;
    border-radius: var(--section-label-radius) 0 0 var(--section-label-radius);

    /* Background */
    background: var(--section-label-tab-color);

    /* Effects */
    opacity: var(--hx-opacity-95);
  }

  [data-tab].svelte-xai1f8:last-child {
    /* Transform */
    transform: rotate(180deg);
  }

  [data-label-body].svelte-xai1f8 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hx-website-size-40);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-16);

    /* Border & outline */
    border: var(--hx-website-size-1) solid var(--section-label-border-color);
    border-radius: var(--section-label-radius);

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-24);

    /* Background */
    background: var(--section-label-background);

    /* Effects */
    backdrop-filter: blur(var(--hx-website-size-4));
    box-shadow: var(--hx-website-size-8) var(--hx-website-size-8) var(--hx-website-size-24)
      color-mix(in srgb, var(--hx-color-palette-website-slate-n1000) 15%, transparent);
  }

  [data-name].svelte-xai1f8,
  [data-role].svelte-xai1f8 {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    line-height: normal;
    white-space: nowrap;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-name].svelte-xai1f8 {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  [data-role].svelte-xai1f8 {
    /* Typography & color */
    font-weight: var(--hx-font-weight-regular);
  }

  [data-portraits].svelte-xai1f8 {
    /* Position & layer */
    inset-block-start: calc(
      var(--hx-website-layout-grid-column) + var(--hx-website-size-56) + var(--hx-website-size-4) +
        var(--hx-website-size-1)
    );
    inset-inline-start: 50%;
    z-index: 2;

    /* Box behavior */
    display: flex;

    /* Size */
    width: min(
      calc(536px * 2 + var(--hx-website-size-8) + var(--hx-website-size-4)),
      calc(100% - 136px - var(--hx-website-size-4))
    );

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-48);

    /* Transform */
    transform: translateX(-50%);
  }

  [data-portrait].svelte-xai1f8 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    aspect-ratio: 1;
    width: calc(
      var(--hx-website-layout-grid-column) + var(--hx-website-size-72) + var(--hx-website-size-4) -
        var(--hx-website-size-1)
    );

    /* Flex & grid item */
    flex: 0 0
      calc(
        var(--hx-website-layout-grid-column) + var(--hx-website-size-72) +
          var(--hx-website-size-4) - var(--hx-website-size-1)
      );

    /* Margin */
    margin: 0;

    /* Border & outline */
    border: var(--hx-website-size-1) solid var(--section-portrait-border-color);
    border-radius: var(--hx-radius-full);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--section-portrait-overlay);
  }

  [data-lines].svelte-xai1f8 {
    /* Position & layer */
    inset: 0;
    z-index: 1;

    /* Box behavior */
    display: none;

    /* Interaction */
    pointer-events: none;
  }

  [data-lines].svelte-xai1f8 svg:where(.svelte-xai1f8) {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Size */
    height: 100%;
    width: 100%;

    /* SVG */
    fill: none;
    stroke-width: var(--hx-website-size-1);
  }

  [data-line-variant='tablet'].svelte-xai1f8 {
    /* SVG */
    stroke: var(--hx-color-palette-website-mint-n500);
    stroke-linecap: round;
    stroke-dasharray: var(--hx-website-size-1) var(--hx-website-size-4);
  }

  /* Stroke color comes from the per-path fade gradients in the markup. */
  [data-line-variant='mobile'].svelte-xai1f8 {
    /* Box behavior */
    display: none;

    /* SVG */
    stroke-dasharray: var(--hx-website-size-2) var(--hx-website-size-2);
  }

  @media (max-width: 1023px) {
    [data-labels].svelte-xai1f8 {
      /* Position & layer */
      inset: 0;
      z-index: 3;

      /* Box behavior */
      display: block;

      /* Size */
      width: 100%;

      /* Transform */
      transform: none;
    }

    [data-label].svelte-xai1f8 {
      /* Position & layer */
      position: absolute;
    }

    [data-label][data-member-id='bastiaan'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: 0;
      inset-inline-start: var(--hx-website-size-40);
    }

    [data-label][data-member-id='boris'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: var(--hx-website-size-56);
      inset-inline-start: calc(var(--hx-website-layout-grid-column) + var(--hx-website-size-16));
    }

    [data-label][data-member-id='sander'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--hx-website-size-96) + var(--hx-website-size-8));
      inset-inline-end: calc(
        var(--hx-website-layout-grid-column) + var(--hx-website-size-16) +
          var(--hx-website-size-4) - var(--hx-website-size-1)
      );
    }

    [data-label][data-member-id='tommy'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--hx-website-layout-grid-column) - var(--hx-website-size-4));
      inset-inline-end: var(--hx-website-size-40);
    }

    [data-label-body].svelte-xai1f8 {
      /* Flex & grid container */
      gap: var(--hx-website-size-4);
    }

    [data-portraits].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(
        var(--hx-website-layout-grid-column) + var(--hx-website-size-128) +
          var(--hx-website-size-8) + var(--hx-website-size-1)
      );

      /* Size */
      width: min(
        calc(
          536px + var(--hx-website-layout-grid-column) + var(--hx-website-size-24) +
            var(--hx-website-size-4)
        ),
        calc(100% - var(--hx-website-size-40))
      );

      /* Flex & grid container */
      gap: calc(var(--hx-website-size-16) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet));
    }

    [data-portrait].svelte-xai1f8 {
      /* Size */
      width: min(
        calc(
          var(--hx-website-layout-grid-column) - var(--hx-website-size-2) - var(--hx-website-size-1)
        ),
        calc((100cqi - var(--hx-website-size-88)) / 4)
      );

      /* Flex & grid item */
      flex-basis: min(
        calc(
          var(--hx-website-layout-grid-column) - var(--hx-website-size-2) - var(--hx-website-size-1)
        ),
        calc((100cqi - var(--hx-website-size-88)) / 4)
      );
    }

    [data-lines].svelte-xai1f8 {
      /* Box behavior */
      display: block;
    }
  }

  /* Mobile (Figma Company_Mobile 1309:12190): the heading lives in BuiltForTheBoldSection above;
     here the tags cascade left→right down into an
     un-blurred full-bleed team photo band pinned to the section's bottom seam, with the portrait row
     nested in the band where the connector lines land. */
  @media (max-width: 599px) {
    [data-section].svelte-xai1f8 {
      /* Padding */
      padding-block-start: calc(var(--hx-website-size-40) + var(--hx-website-size-4));
    }

    /* The shared background media becomes the in-composition photo band: bottom-pinned, 300px tall
       (393×300 in the Figma frame), sharp instead of the desktop blur, no scrim. */
    [data-media].svelte-xai1f8 {
      /* Position & layer */
      inset: auto 0 0;

      /* Size */
      height: 300px;

      /* Effects */
      filter: none;

      /* Transform */
      transform: none;
    }

    [data-overlay].svelte-xai1f8 {
      /* Box behavior */
      display: none;
    }

    /* Fixed stage height = the Figma tag/lines/photo group (Group 79, 393×406). The group's tag and
       line coordinates are viewport-relative, so the stage escapes the cell rails to full-bleed. */
    [data-stage].svelte-xai1f8 {
      /* Size */
      height: 406px;
      max-width: none;
      width: 100vw;

      /* Margin */
      margin-inline: calc((100% - 100vw) / 2);
    }

    [data-label][data-member-id='bastiaan'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: 0;
      inset-inline-start: calc(var(--hx-website-size-16) + var(--hx-website-size-4));
    }

    [data-label][data-member-id='boris'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--hx-website-size-48) + var(--hx-website-size-4));
      inset-inline-start: calc(var(--hx-website-size-64) + var(--hx-website-size-4));
    }

    [data-label][data-member-id='sander'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--hx-website-size-96) + var(--hx-website-size-8));
      inset-inline-end: auto;
      inset-inline-start: var(--hx-website-size-120);
    }

    [data-label][data-member-id='tommy'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(
        var(--hx-website-size-128) + var(--hx-website-size-24) + var(--hx-website-size-4)
      );
      inset-inline-end: auto;
      inset-inline-start: calc(
        var(--hx-website-size-128) + var(--hx-website-size-64) + var(--hx-website-size-2)
      );
    }

    [data-label-body].svelte-xai1f8 {
      /* Size */
      min-height: var(--hx-website-size-40);

      /* Padding */
      padding-inline: var(--hx-website-size-24);
    }

    /* Each portrait centers on its connector line's end point so the dotted line always runs into
       the middle of the circle; anchors multiply the design-px unit to track the artwork's scale. */
    [data-portraits].svelte-xai1f8 {
      /* Position & layer */
      inset: 0;

      /* Box behavior */
      display: block;

      /* Size */
      width: 100%;

      /* Transform */
      transform: none;
    }

    [data-portrait].svelte-xai1f8 {
      /* Position & layer */
      position: absolute;

      /* Size */
      width: min(
        var(--hx-website-size-80),
        calc((100cqi - (var(--hx-website-size-96) + var(--hx-website-size-16))) / 4)
      );

      /* Border & outline */
      border-width: var(--hx-website-size-1);

      /* Transform */
      transform: translate(-50%, -50%);
    }

    [data-portrait][data-member-id='bastiaan'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--section-mobile-design-px) * 288);
      inset-inline-start: calc(var(--section-mobile-design-px) * 82);
    }

    [data-portrait][data-member-id='boris'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--section-mobile-design-px) * 285);
      inset-inline-start: calc(var(--section-mobile-design-px) * 161);
    }

    [data-portrait][data-member-id='sander'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--section-mobile-design-px) * 285);
      inset-inline-start: calc(var(--section-mobile-design-px) * 238);
    }

    [data-portrait][data-member-id='tommy'].svelte-xai1f8 {
      /* Position & layer */
      inset-block-start: calc(var(--section-mobile-design-px) * 285);
      inset-inline-start: calc(var(--section-mobile-design-px) * 316);
    }

    [data-line-variant='tablet'].svelte-xai1f8 {
      /* Box behavior */
      display: none;
    }

    [data-line-variant='mobile'].svelte-xai1f8 {
      /* Box behavior */
      display: block;
    }
  }

[data-section].svelte-o7udye {
    /* Custom properties */
    --section-padding-block: calc(
      var(--hx-website-size-80) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-16) + var(--hx-website-size-88) * var(--hx-fluid-t-tablet)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--section-min-height, auto);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    gap: var(--hx-website-size-32);

    /* Padding */
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-heading].svelte-o7udye,
  [data-body].svelte-o7udye p:where(.svelte-o7udye) {
    /* Margin */
    margin: 0;
  }

  [data-heading].svelte-o7udye {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
  }

  [data-section][data-heading-tone='accent'].svelte-o7udye [data-heading]:where(.svelte-o7udye) {
    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    color: transparent;
  }

  [data-body].svelte-o7udye {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-kicker].svelte-o7udye {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
  }

  [data-section][data-align='center'].svelte-o7udye {
    /* Typography & color */
    text-align: center;
  }

  [data-section][data-variant='compact'].svelte-o7udye {
    /* Flex & grid container */
    gap: calc(var(--hx-website-size-8) + var(--hx-website-size-2));

    /* Padding */
    padding-block: calc(var(--hx-website-size-56) - var(--hx-website-size-2));
    padding-inline: calc(var(--hx-website-size-56) - var(--hx-website-size-2));
  }

  [data-section][data-variant='compact'].svelte-o7udye [data-heading]:where(.svelte-o7udye) {
    /* Typography & color */
    font-size: var(--hx-website-font-size-32);
  }

  [data-section][data-variant='compact'].svelte-o7udye [data-body]:where(.svelte-o7udye) {
    /* Typography & color */
    color: var(--hx-color-website-text-secondary);
  }

  @media (max-width: 599px) {
    [data-section].svelte-o7udye {
      /* Size */
      min-height: auto;

      /* Flex & grid container */
      gap: var(--hx-website-size-24);

      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }

    [data-heading].svelte-o7udye {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }

    /* The compact variant's heading is 32px by design at every breakpoint. */
    [data-section][data-variant='compact'].svelte-o7udye [data-heading]:where(.svelte-o7udye) {
      /* Typography & color */
      font-size: var(--hx-website-font-size-32);
    }

    [data-body].svelte-o7udye {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-md);
    }

    [data-section][data-align='center'].svelte-o7udye {
      /* Typography & color */
      text-align: start;
    }

    [data-section][data-mobile-heading-shrink='false'].svelte-o7udye [data-heading]:where(.svelte-o7udye) {
      /* Typography & color */
      font-size: var(--hx-font-size-5xl);
    }

    [data-section][data-variant='compact'].svelte-o7udye {
      /* Flex & grid container */
      gap: calc(var(--hx-website-size-16) + var(--hx-website-size-4));

      /* Padding */
      padding-block: calc(var(--hx-website-size-48) + var(--hx-website-size-2));
      padding-inline: var(--hx-website-size-24);
    }
  }

[data-section].svelte-152jxiv {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Padding */
    padding-inline: var(--graphic-padding-inline, 0px);

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-section][data-grid-background='true'].svelte-152jxiv {
    /* Background */
    /* Figma's grid uses 10%-opacity strokes inside a 50%-opacity group: 5% effective opacity. */
    background-image:
      repeating-linear-gradient(
        90deg,
        transparent 0 34px,
        color-mix(in srgb, var(--hx-color-website-border-accent-solid) 5%, transparent) 34px 35px
      ),
      repeating-linear-gradient(
        180deg,
        transparent 0 35px,
        color-mix(in srgb, var(--hx-color-website-border-divider) 50%, transparent) 35px 36px
      );
  }

  /* An explicit height keeps this a definite cross-size for the [data-section] flex row (align-items:
     center never stretches it there). Without it the graphic snippet's own `height: 100%` had nothing
     definite to resolve against, so replaced-element sizing fell back to the SVG's intrinsic viewBox
     ratio against its 100%-wide box — taller than the row on most industry graphics, silently cropped by
     [data-section]'s overflow: hidden instead of letterboxing with breathing room like Figma. */
  [data-visual].svelte-152jxiv {
    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
  }

  @media (max-width: 599px) {
    [data-section][data-graphic-padding-mobile].svelte-152jxiv {
      /* Padding */
      padding-block: var(--graphic-padding-mobile-block, var(--hx-website-size-56));
      padding-inline: var(--graphic-padding-mobile-inline, var(--hx-website-size-96));
    }
  }

[data-list].svelte-uffnjj,
  [data-panel].svelte-uffnjj {
    /* Custom properties */
    --section-list-padding-block: var(--hx-website-size-80);
    --section-list-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-40) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-40) * var(--hx-fluid-t-desktop)
    );
    --section-panel-padding-block: calc(
      var(--hx-website-size-40) + var(--hx-website-size-48) * var(--hx-fluid-t-tablet)
    );
    --section-panel-padding-inline: var(--hx-website-size-40);

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-list].svelte-uffnjj {
    /* Flex & grid container */
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block: var(--section-list-padding-block);
    padding-inline: var(--section-list-padding-inline);
  }

  [data-panel].svelte-uffnjj {
    /* Flex & grid container */
    justify-content: center;
    gap: var(--hx-website-size-32);

    /* Padding */
    padding-block: var(--section-panel-padding-block);
    padding-inline: var(--section-panel-padding-inline);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-weight: var(--hx-font-weight-black);
    text-transform: uppercase;
  }

  [data-card].svelte-uffnjj {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hx-website-size-16);
  }

  [data-copy].svelte-uffnjj {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-heading].svelte-uffnjj,
  [data-body].svelte-uffnjj,
  [data-value].svelte-uffnjj,
  [data-summary].svelte-uffnjj {
    /* Margin */
    margin: 0;
  }

  [data-heading].svelte-uffnjj {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
  }

  [data-body].svelte-uffnjj {
    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
  }

  [data-value].svelte-uffnjj {
    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-size: var(--hx-font-size-5xl);
    line-height: var(--hx-line-height-snug);
    color: transparent;
  }

  [data-summary].svelte-uffnjj {
    /* Typography & color */
    font-size: var(--hx-font-size-2xl);
    line-height: var(--hx-line-height-snug);
  }

  @media (max-width: 599px) {
    [data-heading].svelte-uffnjj {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
    }

    [data-body].svelte-uffnjj {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-lg);
    }

    [data-value].svelte-uffnjj {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
      line-height: var(--hx-line-height-5xl);
    }

    [data-summary].svelte-uffnjj {
      /* Typography & color */
      font-size: var(--hx-font-size-xl);
      line-height: var(--hx-line-height-3xl);
    }
  }

[data-panel].svelte-157ptap {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;

    /* Padding */
    padding-block: var(--section-panel-padding-block);
    padding-inline: var(--section-panel-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-panel='heading'][data-panel-align='center'].svelte-157ptap {
    /* Flex & grid container */
    justify-content: center;
  }

  [data-panel='heading'][data-panel-align='end'].svelte-157ptap {
    /* Flex & grid container */
    gap: var(--hx-website-size-8);
  }

  [data-heading='section'].svelte-157ptap,
  [data-heading='card'].svelte-157ptap,
  [data-copy].svelte-157ptap {
    /* Margin */
    margin: 0;
  }

  [data-heading='section'].svelte-157ptap {
    /* Size */
    max-width: 100%;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-3xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-5xl);
    text-transform: uppercase;
    text-wrap: balance;
    color: transparent;
  }

  [data-heading='card'].svelte-157ptap {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-website-font-size-32);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-card-content].svelte-157ptap {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);
  }

  [data-body].svelte-157ptap {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--section-body-color);
  }

  [data-panel='copy'].svelte-157ptap {
    /* Flex & grid container */
    justify-content: center;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--section-body-color);
  }

  @media (max-width: 1023px) {
    [data-panel='heading'].svelte-157ptap {
      /* Flex & grid container */
      justify-content: center;
    }

    [data-panel='heading'][data-panel-align='end'].svelte-157ptap {
      /* Flex & grid container */
      justify-content: flex-start;
    }

    [data-panel='card'].svelte-157ptap {
      /* Size */
      min-block-size: calc(var(--hx-website-layout-grid-column) * 2 + var(--hx-website-size-4));

      /* Padding */
      padding-inline: var(--hx-website-size-56);
    }

    [data-panel='copy'].svelte-157ptap {
      /* Size */
      min-block-size: calc(var(--hx-website-layout-grid-column) + var(--hx-website-size-96));

      /* Padding */
      padding-inline: var(--hx-website-size-56);
    }

    [data-heading='section'].svelte-157ptap {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
      line-height: var(--hx-line-height-5xl);
    }
  }

  @media (max-width: 599px) {
    [data-panel='heading'].svelte-157ptap {
      /* Flex & grid container */
      justify-content: flex-start;
    }

    [data-panel='card'].svelte-157ptap,
    [data-panel='copy'].svelte-157ptap {
      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }

    [data-heading='card'].svelte-157ptap {
      /* Typography & color */
      font-size: var(--hx-font-size-lg);
      line-height: var(--hx-line-height-2xl);
    }

    [data-heading='section'].svelte-157ptap {
      /* Typography & color */
      font-size: var(--hx-font-size-2xl);
      line-height: var(--hx-line-height-4xl);
    }

    [data-body].svelte-157ptap,
    [data-panel='copy'].svelte-157ptap {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      line-height: var(--hx-line-height-lg);
    }
  }

[data-compact-closing-cta].svelte-k4sd5e {
    /* Custom properties */
    --compact-cta-border-color: var(--hx-color-website-border-panel);
    --compact-cta-content-width: calc(var(--hx-website-size-128) * 6 + var(--hx-website-size-40));
    --compact-cta-divider-width: calc(var(--hx-website-size-24) + var(--compact-cta-size-6));
    --compact-cta-heading-cell-width: calc(
      var(--hx-website-size-128) * 3 + var(--hx-website-size-8)
    );
    --compact-cta-heading-font-size: var(--hx-font-size-5xl);
    --compact-cta-mark-cell-width: calc(
      var(--hx-website-size-128) + var(--hx-website-size-72) + var(--compact-cta-size-6) +
        var(--hx-website-size-1)
    );
    --compact-cta-padding-block: calc(
      var(--hx-website-size-80) + var(--hx-website-size-80) * var(--hx-fluid-t-desktop)
    );
    --compact-cta-row-height: calc(
      var(--hx-website-size-128) + var(--hx-website-size-24) + var(--hx-website-size-4)
    );
    --compact-cta-size-10: calc(var(--hx-website-size-8) + var(--hx-website-size-2));
    --compact-cta-size-6: calc(var(--hx-website-size-4) + var(--hx-website-size-2));

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;

    /* Padding */
    padding-block: var(--compact-cta-padding-block);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-content].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    max-width: var(--compact-cta-content-width);
    min-width: 0;
    width: calc(100% - 2 * var(--hx-website-layout-margin-stretch));

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: calc(var(--hx-website-size-24) + var(--hx-website-size-1));

    /* Margin */
    margin-inline: auto;
  }

  [data-heading-row].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--compact-cta-row-height);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: stretch;
  }

  [data-heading-cell].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: var(--compact-cta-heading-cell-width);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: 0 0 var(--compact-cta-heading-cell-width);

    /* Border & outline */
    border-block: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
    border-inline-start: var(--hx-border-width-thin) solid var(--compact-cta-border-color);

    /* Padding */
    padding-block: var(--hx-website-size-48);
    padding-inline: var(--hx-website-size-48);
  }

  [data-heading].svelte-k4sd5e {
    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow-wrap: anywhere;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--compact-cta-heading-font-size);
    font-weight: var(--hx-font-weight-black);
    line-height: normal;
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-divider].svelte-k4sd5e {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: var(--compact-cta-divider-width);

    /* Flex & grid item */
    align-self: stretch;
    flex: 0 0 var(--compact-cta-divider-width);

    /* Overflow & scroll */
    overflow: hidden;
  }

  [data-divider-fill].svelte-k4sd5e {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: stretch;
  }

  [data-actions-cell].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--compact-cta-row-height);
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border-block: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
    border-inline-end: var(--hx-border-width-thin) solid var(--compact-cta-border-color);

    /* Padding */
    padding-block: var(--compact-cta-size-10);
    padding-inline: var(--compact-cta-divider-width) var(--compact-cta-size-10);
  }

  [data-actions-button].svelte-k4sd5e {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 100%;
    min-width: 0;
    width: calc(var(--hx-website-size-128) + var(--hx-website-size-112) + var(--hx-website-size-4));
  }

  [data-copy-row].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: calc(
      var(--hx-website-size-88) + var(--hx-website-size-4) + var(--hx-website-size-2)
    );
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    align-items: stretch;
  }

  [data-copy-cell].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    align-items: center;

    /* Flex & grid item */
    flex: 1 1 0;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--compact-cta-border-color);

    /* Padding */
    padding-block: var(--compact-cta-size-10);
    padding-inline: calc(var(--hx-website-size-56) + var(--hx-website-size-1));
  }

  [data-copy].svelte-k4sd5e {
    /* Size */
    min-width: 0;
    width: 100%;

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-semibold);
    line-height: normal;
    text-align: start;
    color: var(--hx-color-website-text-primary);
    text-box: trim-both cap alphabetic;
  }

  [data-mark-cell].svelte-k4sd5e {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: var(--compact-cta-mark-cell-width);

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Flex & grid item */
    flex: 0 0 var(--compact-cta-mark-cell-width);

    /* Border & outline */
    border-block: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
    border-inline-end: var(--hx-border-width-thin) solid var(--compact-cta-border-color);

    /* Padding */
    padding: var(--compact-cta-size-10);

    /* Background */
    background: var(--hx-color-website-background-panel-raised);
  }

  @media (max-width: 599px) {
    [data-compact-closing-cta].svelte-k4sd5e {
      /* Padding */
      padding-block: var(--hx-website-size-80);
    }

    [data-content].svelte-k4sd5e {
      /* Size */
      max-width: none;

      /* Flex & grid container */
      gap: var(--compact-cta-divider-width);
    }

    [data-heading-row].svelte-k4sd5e {
      /* Box behavior */
      display: flex;

      /* Size */
      min-height: 0;

      /* Flex & grid container */
      flex-direction: column;
      align-items: stretch;
    }

    [data-heading-cell].svelte-k4sd5e {
      /* Size */
      width: 100%;

      /* Flex & grid item */
      flex: none;

      /* Border & outline */
      border-block: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
      border-block-end: none;
      border-inline: var(--hx-border-width-thin) solid var(--compact-cta-border-color);

      /* Padding */
      padding-block: calc(var(--hx-website-size-56) + var(--hx-website-size-4));
      padding-inline: var(--compact-cta-size-10);
    }

    [data-heading].svelte-k4sd5e {
      /* Typography & color */
      /* Cap at the standard mobile heading size; consumers passing a smaller size keep it. */
      font-size: min(var(--compact-cta-heading-font-size), var(--hx-font-size-3xl));
    }

    [data-divider].svelte-k4sd5e {
      /* Size */
      height: var(--compact-cta-divider-width);
      width: 100%;

      /* Flex & grid item */
      flex: none;

      /* Border & outline */
      /* Stacked layout: the band runs horizontally, so the side borders carry the envelope outline
         through it; the chevron's tips meet them at the band's top corners. */
      border-inline: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
    }

    [data-actions-cell].svelte-k4sd5e {
      /* Box behavior */
      box-sizing: border-box;

      /* Size */
      height: calc(
        var(--hx-website-size-128) + var(--hx-website-size-40) + var(--compact-cta-size-6)
      );
      width: 100%;

      /* Flex & grid item */
      flex: none;

      /* Border & outline */
      border-block: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
      border-block-start: none;
      border-inline: var(--hx-border-width-thin) solid var(--compact-cta-border-color);

      /* Padding */
      padding-block: var(--compact-cta-divider-width) var(--compact-cta-size-10);
      padding-inline: var(--compact-cta-size-10);
    }

    [data-copy-row].svelte-k4sd5e {
      /* Size */
      height: calc(var(--hx-website-size-128) * 2 + var(--hx-website-size-16));

      /* Flex & grid container */
      flex-direction: column;
      align-items: stretch;
    }

    [data-copy-cell].svelte-k4sd5e {
      /* Flex & grid item */
      flex: 1 1 0;

      /* Padding */
      padding-block: var(--compact-cta-size-10);
      padding-inline: var(--hx-website-size-48);
    }

    [data-copy].svelte-k4sd5e {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
    }

    [data-mark-cell].svelte-k4sd5e {
      /* Size */
      width: 100%;

      /* Flex & grid item */
      flex: 1 1 0;

      /* Border & outline */
      border-block: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
      border-block-start: none;
      border-inline: var(--hx-border-width-thin) solid var(--compact-cta-border-color);
    }
  }

[data-header].svelte-9y6emt,
  [data-card].svelte-9y6emt {
    /* Custom properties */
    --section-card-min-block-size: calc(
      384px + var(--hx-website-size-96) + var(--hx-website-size-16)
    );
    --section-card-min-block-size-plain: calc(
      256px + var(--hx-website-size-128) + var(--hx-website-size-48) + var(--hx-website-size-16)
    );
    --section-card-padding-block: var(--hx-website-size-56);
    --section-card-padding-inline: var(--hx-website-size-32);
    --section-header-padding-inline: calc(
      var(--hx-website-size-48) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-header].svelte-9y6emt {
    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--hx-website-size-24);

    /* Padding */
    padding-block: var(--section-card-padding-block);
    padding-inline: var(--section-header-padding-inline);
  }

  [data-card].svelte-9y6emt {
    /* Size */
    min-height: var(--section-card-min-block-size-plain);

    /* Padding */
    padding-block: var(--section-card-padding-block);
    padding-inline: var(--section-card-padding-inline);
  }

  [data-card][data-has-media].svelte-9y6emt {
    /* Size */
    min-height: var(--section-card-min-block-size);
  }

  [data-card-graphic].svelte-9y6emt {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Margin */
    margin-block-start: auto;
  }

  /* Each visible two-card row reserves its tallest rendered title. The inner span stays natural-height
     so ResizeObserver measures text rather than the reservation applied by this outer span. */
  [data-card-title-reserve].svelte-9y6emt {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: calc(var(--feature-card-title-lines, 2) * 1lh);
  }

  [data-card-title-text].svelte-9y6emt {
    /* Box behavior */
    display: block;
  }

  [data-kicker].svelte-9y6emt {
    /* Margin */
    margin: 0;

    /* Padding */
    padding-block-end: var(--hx-website-size-32);
    padding-block-start: var(--hx-website-size-80);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-light);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: lowercase;
    color: var(--hx-color-website-text-accent-deep);
  }

  [data-heading].svelte-9y6emt,
  [data-kicker].svelte-9y6emt,
  [data-subcopy].svelte-9y6emt {
    /* Margin */
    margin: 0;
  }

  [data-heading].svelte-9y6emt {
    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    text-transform: uppercase;
    text-wrap: balance;
    color: transparent;
  }

  [data-subcopy].svelte-9y6emt {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-align: center;
    color: var(--hx-color-website-text-primary);
  }

  [data-kicker].svelte-9y6emt {
    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-accent-deep);
  }

  @media (max-width: 1023px) {
    [data-card].svelte-9y6emt {
      /* Size */
      min-height: calc(256px + var(--hx-website-size-128) + var(--hx-website-size-96));
    }

    [data-card][data-has-media].svelte-9y6emt {
      /* Size */
      min-height: calc(536px + var(--hx-website-size-16));
    }
  }

  @media (max-width: 599px) {
    [data-heading].svelte-9y6emt {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }

    [data-subcopy].svelte-9y6emt {
      /* Typography & color */
      font-size: var(--hx-font-size-lg);
    }

    [data-card].svelte-9y6emt,
    [data-card][data-has-media].svelte-9y6emt {
      /* Size */
      min-height: 0;
    }

    [data-card-title-reserve].svelte-9y6emt {
      /* Size */
      min-height: 0;
    }

    [data-card-graphic].svelte-9y6emt {
      /* Size */
      width: calc(100% + var(--section-card-padding-inline) * 2);

      /* Margin */
      /* Cancel Card's copy→trailing gap and the outer card padding so this media band owns
         the requested border-to-artwork spacing without changing the copy column. */
      margin-block-end: calc(-1 * var(--section-card-padding-block));
      margin-block-start: calc(-1 * var(--card-gap));
      margin-inline: calc(-1 * var(--section-card-padding-inline));

      /* Padding */
      padding-block: var(--feature-card-graphic-padding-mobile-block, var(--hx-website-size-56));
      padding-inline: var(--feature-card-graphic-padding-mobile-inline, var(--hx-website-size-96));
    }
  }

/*
   * Consumer knobs (set as custom properties on an ancestor; read here via var() fallbacks so the
   * inherited value wins — deliberately NOT declared on the root, which would clobber overrides):
   * --hero-glass-accent-inset: accent sheet inset from the glass backdrop (default 8px).
   * --hero-glass-card-background: card fill behind the consumer's content (default panel token).
   * --hero-glass-card-inset: card inset from the glass backdrop (default 9px).
   * --hero-glass-card-inset-block-start: card top inset (default 8px).
   * --hero-glass-card-radius: card corner radius (default --hx-radius-sm).
   *
   * --hero-glass-outer-shadow/--hero-glass-card-shadow are the opposite direction: set by this
   * component itself (module-exported `HERO_GLASS_OUTER_SHADOW`/`HERO_GLASS_CARD_SHADOW` above,
   * bound on the root via `style:`) so `SomaHeroWindow`'s rebuilt layers can import and reuse the
   * exact same recipe instead of duplicating the literals — see Finding 1, docs/audit/effects.md.
   *
   * The panel fills its parent; the consumer owns the outer dimensions and placement. Recipe from the
   * hero Figma boards: translucent white glass backdrop with a hairline border and soft shadow, and
   * the dark UI card offset slightly up-left inside it.
   */
  [data-hero-glass-panel].svelte-1fctryi {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    width: 100%;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-glass);
    border-radius: var(--hx-radius-md);

    /* Background */
    background: var(--hx-color-website-overlay-glass);

    /* Effects */
    box-shadow: var(--hero-glass-outer-shadow);
  }

  [data-panel-accent].svelte-1fctryi {
    /* Position & layer */
    inset: var(--hero-glass-accent-inset, var(--hx-website-size-8));
    position: absolute;

    /* Border & outline */
    border-radius: var(--hx-radius-sm);

    /* Background */
    background: var(--hx-color-website-background-accent-brand);
  }

/*
   * Consumer knobs (set as custom properties on an ancestor):
   * --hero-glass-card-background: card fill behind the consumer's content (default panel token).
   * --hero-glass-card-inset: card inset from its positioned parent (default 9px).
   * --hero-glass-card-inset-block-start: card top inset (default 8px).
   * --hero-glass-card-radius: card corner radius (default --hx-radius-sm).
   * --hero-glass-card-shadow: card shadow (default shared glass inner-shadow token).
   */
  [data-panel-card].svelte-1lrafdk {
    /* Position & layer */
    inset: var(--hero-glass-card-inset, 9px);
    inset-block-start: var(--hero-glass-card-inset-block-start, var(--hx-website-size-8));
    position: absolute;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);
    border-radius: var(--hero-glass-card-radius, var(--hx-radius-sm));

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--hero-glass-card-background, var(--hx-color-website-background-panel));

    /* Effects */
    box-shadow: var(--hero-glass-card-shadow, var(--hx-color-website-component-glass-shadow-inner));
  }

[data-copy].svelte-8k6b2q {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    display: flex;

    /* Size */
    max-width: var(--hero-section-copy-width);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-40);

    /* Transform */
    transform: translateY(
      calc(
        (var(--hero-section-min-height) / 2 - var(--hero-section-padding-block-start) - 50%) *
          var(--hx-fluid-t-tablet)
      )
    );
  }

  [data-heading-wrap].svelte-8k6b2q {
    /* Size */
    min-width: 100%;
  }

  [data-body].svelte-8k6b2q p:where(.svelte-8k6b2q) {
    /* Margin */
    margin: 0;
  }

  [data-body].svelte-8k6b2q {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: calc(
      var(--hx-website-size-16) + var(--hx-website-size-4) + var(--hx-website-size-2) +
        var(--hx-website-size-2) * var(--hx-fluid-t-tablet)
    );

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
  }

  [data-body].svelte-8k6b2q strong:where(.svelte-8k6b2q) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
  }

  @media (max-width: 599px) {
    [data-body].svelte-8k6b2q {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
    }
  }

[data-background].svelte-11io36d,
  [data-section].svelte-11io36d {
    /* Custom properties */
    --hero-media-height: calc(
      100% + 68.85% * var(--hx-fluid-t-tablet) + 234.54% * var(--hx-fluid-t-desktop)
    );
    --hero-media-left: calc(
      -9.47% + 9.49% * var(--hx-fluid-t-tablet) - 0.02% * var(--hx-fluid-t-desktop)
    );
    --hero-media-top: calc(
      -8.37% * var(--hx-fluid-t-tablet) - 804.461px * var(--hx-fluid-t-desktop) + 8.37% *
        var(--hx-fluid-t-desktop)
    );
    --hero-media-width: calc(
      195.9% - 40.48% * var(--hx-fluid-t-tablet) - 55.42% * var(--hx-fluid-t-desktop)
    );
    --hero-overlay-gradient: linear-gradient(
      89.09deg,
      color-mix(in srgb, var(--hx-color-palette-website-slate-n950) 79%, transparent) 41.851%,
      transparent 69.455%
    );
    --hero-overlay-gradient-mobile:
      linear-gradient(
        2.546deg,
        color-mix(in srgb, var(--hx-color-palette-website-slate-n950) 90%, transparent) 46.311%,
        transparent 52.273%
      ),
      color-mix(in srgb, var(--hx-color-palette-website-slate-n1000) 20%, transparent);
    --hero-section-copy-width: calc(
      400px - var(--hx-website-size-8) - var(--hx-website-size-2) +
        (var(--hx-website-size-96) + var(--hx-website-size-2)) * var(--hx-fluid-t-tablet)
    );
    --hero-section-min-height: 650px;
    --hero-section-padding-block-end: calc(
      (var(--hx-website-size-40) + var(--hx-website-size-16) + var(--hx-website-size-4)) *
        (1 - var(--hx-fluid-t-tablet))
    );
    --hero-section-padding-block-start: calc(
      var(--hx-website-size-40) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet)
    );
    --hero-section-padding-inline-end: calc(var(--hx-website-size-24) * var(--hx-fluid-t-tablet));
    --hero-section-padding-inline-start: calc(
      (var(--hx-website-size-56) - var(--hx-website-size-2)) * var(--hx-fluid-t-mobile) +
        (var(--hx-website-size-48) + var(--hx-website-size-2)) * var(--hx-fluid-t-tablet)
    );
  }

  [data-section].svelte-11io36d {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    min-height: var(--hero-section-min-height);
    min-width: 0;

    /* Padding */
    padding-block: var(--hero-section-padding-block-start) var(--hero-section-padding-block-end);
    padding-inline: var(--hero-section-padding-inline-start) var(--hero-section-padding-inline-end);

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-background].svelte-11io36d {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: block;
    container-type: size;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--hx-color-website-background-page);
  }

  [data-media].svelte-11io36d {
    /* Position & layer */
    left: var(--hero-media-default-left, var(--hero-media-left));
    position: absolute;
    top: var(--hero-media-default-top, var(--hero-media-top));

    /* Size */
    height: var(--hero-media-default-height, var(--hero-media-height));
    width: var(--hero-media-default-width, var(--hero-media-width));

    /* Interaction */
    pointer-events: none;
  }

  [data-background][data-media-variant='proven-precision'].svelte-11io36d [data-media]:where(.svelte-11io36d) {
    /* Effects */
    mix-blend-mode: lighten;
  }

  [data-overlay].svelte-11io36d {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    background: var(--hero-overlay-gradient);

    /* Interaction */
    pointer-events: none;
  }

  @media (max-width: 599px) {
    [data-section].svelte-11io36d {
      /* Box behavior */
      display: flex;

      /* Flex & grid container */
      flex-direction: column;
      justify-content: flex-end;
      align-items: stretch;

      /* Padding */
      padding-inline: 0;
    }

    [data-section][data-mobile-copy-anchor='top'].svelte-11io36d {
      /* Flex & grid container */
      justify-content: flex-start;

      /* Padding */
      padding-block: var(--hx-website-size-120);
    }

    [data-media].svelte-11io36d {
      /* Position & layer */
      left: var(--hero-media-mobile-left, var(--hero-media-default-left, var(--hero-media-left)));
      top: var(--hero-media-mobile-top, var(--hero-media-default-top, var(--hero-media-top)));

      /* Size */
      height: var(
        --hero-media-mobile-height,
        var(--hero-media-default-height, var(--hero-media-height))
      );
      width: var(
        --hero-media-mobile-width,
        var(--hero-media-default-width, var(--hero-media-width))
      );
    }

    [data-overlay].svelte-11io36d {
      /* Background */
      background: var(--hero-overlay-gradient-mobile);
    }
  }

/*
   * Input variables (set from props via the style attribute):
   * --hero-in-canvas-height-mobile: windows-canvas block height at ≤599px.
   * --hero-in-canvas-height-tablet: windows-canvas block height at 600–1023px.
   * --hero-in-copy-inset-tablet: copy inset from the stretch margin at 600–1023px.
   * --hero-in-heading-size: heading font size at the ≥1264px plateau.
   * --hero-in-heading-size-mobile: heading font size at ≤599px.
   * --hero-in-min-height-desktop: band min-height at the ≥1264px plateau.
   * --hero-in-min-height-laptop: band min-height at a 1024px viewport.
   */
  [data-glow].svelte-12or0x8,
  [data-section].svelte-12or0x8 {
    /* Custom properties */
    --hero-body-line-height-mobile: calc(
      var(--hero-in-body-size-mobile, var(--hx-font-size-md)) * 1.2
    );
    --hero-canvas-container-left: calc(
      (
          100vw -
            min(
              var(--hx-website-layout-container-width),
              100vw - var(--hx-website-layout-margin-stretch) * 2
            )
        ) /
        2
    );
    --hero-copy-padding-inline-start: calc(
      var(--hx-website-size-32) + var(--hx-website-size-72) * var(--hx-fluid-t-desktop)
    );
    --hero-copy-width: calc(401px + 12px * var(--hx-fluid-t-desktop));
    --hero-heading-font-size: calc(
      42px + (var(--hero-in-heading-size, var(--hx-font-size-5xl)) - 42px) *
        var(--hx-fluid-t-desktop)
    );
    --hero-heading-size-tablet: 42px;
    --hero-min-height: calc(
      var(--hero-in-min-height-laptop, 864px) +
        (var(--hero-in-min-height-desktop, 734px) - var(--hero-in-min-height-laptop, 864px)) *
        var(--hx-fluid-t-desktop)
    );
  }

  [data-section].svelte-12or0x8 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: var(--hero-min-height);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: row;
    align-items: center;

    /* Padding */
    padding-block: var(--hx-website-size-64);
    padding-inline-start: var(--hero-copy-padding-inline-start);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-glow].svelte-12or0x8 {
    /* Position & layer */
    inset: 0;
    inset-inline-end: auto;
    inset-inline-start: calc(var(--hero-canvas-container-left) * var(--hx-fluid-t-desktop));
    position: absolute;

    /* Size */
    width: max(1334px, calc(100vw - var(--hero-canvas-container-left) * var(--hx-fluid-t-desktop)));
  }

  [data-glow-overlay].svelte-12or0x8 {
    /* Position & layer */
    inset: 0;
    position: absolute;

    /* Background */
    background: linear-gradient(
      90deg,
      var(--hx-color-website-background-page) 13.113%,
      color-mix(in srgb, var(--hx-color-website-background-page) 0%, transparent) 88.166%
    );
  }

  [data-section][data-copy-align='start'].svelte-12or0x8 {
    /* Flex & grid container */
    align-items: flex-start;
  }

  [data-copy].svelte-12or0x8 {
    /* Position & layer */
    position: relative;
    z-index: 1;

    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: var(--hero-copy-width);

    /* Flex & grid container */
    flex-direction: column;
    align-items: flex-start;
    gap: var(--hx-website-size-40);

    /* Flex & grid item */
    flex: none;
  }

  [data-eyebrow-wrap].svelte-12or0x8 {
    /* Box behavior */
    display: flex;
  }

  [data-heading].svelte-12or0x8 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hero-heading-font-size);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--hx-color-website-text-primary);
  }

  [data-body].svelte-12or0x8 {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-line-height-xl);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xl);
    color: var(--hx-color-website-text-secondary);
  }

  [data-body].svelte-12or0x8 p:where(.svelte-12or0x8) {
    /* Margin */
    margin: 0;
  }

  [data-body].svelte-12or0x8 strong:where(.svelte-12or0x8) {
    /* Typography & color */
    font-weight: var(--hx-font-weight-bold);
    color: var(--hx-color-website-text-primary);
  }

  [data-canvas].svelte-12or0x8 {
    /* Position & layer */
    inset-block: 0;
    inset-inline: calc((100% - 100vw) / 2);
    position: absolute;
    z-index: 0;

    /* Box behavior */
    box-sizing: border-box;

    /* Overflow & scroll */
    overflow: hidden;

    /* Interaction */
    pointer-events: none;
  }

  @media (max-width: 1023px) {
    [data-glow].svelte-12or0x8 {
      /* Box behavior */
      display: none;
    }

    [data-section].svelte-12or0x8 {
      /* Size */
      min-height: 0;

      /* Flex & grid container */
      flex-direction: column;
      align-items: stretch;

      /* Padding */
      padding-block-end: 0;
      padding-inline: var(--hero-in-copy-inset-tablet, var(--hx-website-size-2));
    }

    [data-copy].svelte-12or0x8 {
      /* Size */
      width: 100%;
    }

    [data-heading].svelte-12or0x8 {
      /* Typography & color */
      font-size: var(--hero-heading-size-tablet);
    }

    [data-canvas].svelte-12or0x8 {
      /* Position & layer */
      inset-block: auto;
      inset-inline: auto;
      position: relative;

      /* Size */
      height: var(--hero-in-canvas-height-tablet, 600px);
      width: calc(
        100% + 2 *
          (
            var(--hero-in-copy-inset-tablet, var(--hx-website-size-2)) +
              var(--hx-website-layout-margin-stretch)
          )
      );

      /* Margin */
      margin-inline: calc(
        -1 * var(--hero-in-copy-inset-tablet, var(--hx-website-size-2)) -
          var(--hx-website-layout-margin-stretch)
      );
    }
  }

  @media (max-width: 599px) {
    [data-section].svelte-12or0x8 {
      /* Padding */
      padding-block-start: var(--hx-website-size-88);
      padding-inline: var(--hx-website-size-4);
    }

    [data-copy].svelte-12or0x8 {
      /* Flex & grid container */
      gap: var(--hx-website-size-16);
    }

    [data-eyebrow-wrap].svelte-12or0x8 {
      /* Margin */
      margin-block-end: var(--hx-website-size-16);
    }

    [data-heading].svelte-12or0x8 {
      /* Typography & color */
      font-size: var(--hero-in-heading-size-mobile, var(--hx-font-size-4xl));
    }

    [data-body].svelte-12or0x8 {
      /* Flex & grid container */
      gap: var(--hero-body-line-height-mobile);

      /* Typography & color */
      font-size: var(--hero-in-body-size-mobile, var(--hx-font-size-md));
      line-height: var(--hero-body-line-height-mobile);
    }

    [data-canvas].svelte-12or0x8 {
      /* Size */
      height: var(--hero-in-canvas-height-mobile, var(--hero-in-canvas-height-tablet, 600px));
      width: calc(100% + 2 * (var(--hx-website-size-4) + var(--hx-website-layout-margin-stretch)));

      /* Margin */
      margin-inline: calc(-1 * var(--hx-website-size-4) - var(--hx-website-layout-margin-stretch));
    }
  }

[data-window-graphic].svelte-15q27qn {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Padding */
    /* Reuses ProductWindow's own --product-window-t (inherited from the ProductWindow ancestor,
       0..1 by the window's own width) so this inset scales in step with the frame's media inset
       instead of a flat value that drifts out of proportion once the window shrinks. */
    padding-block: calc(
      var(--hx-website-size-24) + (var(--hx-website-size-48) - var(--hx-website-size-24)) *
        var(--product-window-t)
    );
    padding-inline: calc(
      var(--hx-website-size-16) + (var(--hx-website-size-32) - var(--hx-website-size-16)) *
        var(--product-window-t)
    );

    /* Overflow & scroll */
    /* A graphic wider/taller than the padded box can otherwise ignore the padding and bleed straight
       to (or past) the card edge on the overflowing side only, breaking the inset on that side while
       the rest stays correct. */
    overflow: hidden;
  }

  [data-window-line].svelte-15q27qn {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-4);
    max-width: none;
    width: calc(100% - var(--hx-website-size-16));

    /* Margin */
    margin-block-start: var(--hx-website-size-32);
    margin-inline-start: var(--hx-website-size-16);
  }

  [data-window-line].svelte-15q27qn::before {
    /* Position & layer */
    inset-block-start: 50%;
    inset-inline: 0;
    position: absolute;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-1);
    width: 100%;

    /* Background */
    background: color-mix(in srgb, var(--hx-color-palette-website-mint-n50) 30%, transparent);

    /* Transform */
    transform: translateY(-50%);

    /* Generated content */
    content: '';
  }

  [data-window-line].svelte-15q27qn::after {
    /* Position & layer */
    inset-block: 0;
    inset-inline-start: 0;
    position: absolute;

    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: calc(265 / 798 * 100%);

    /* Border & outline */
    border-radius: var(--hx-radius-2xs);

    /* Background */
    background: var(--hx-color-palette-website-mint-n200);

    /* Generated content */
    content: '';
  }

[data-divider].svelte-r8ugfj {
    /* Custom properties */
    --divider-border-color: var(--hx-color-website-border-divider);

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    width: 100%;
  }

  [data-divider][data-variant='full'].svelte-r8ugfj {
    /* Size */
    min-height: var(--hx-website-size-48);
  }

  [data-divider][data-variant='low-opacity'].svelte-r8ugfj {
    /* Size */
    min-height: var(--hx-website-size-120);

    /* Border & outline */
    border-inline-end: var(--hx-border-width-thin) solid var(--divider-border-color);
    border-inline-start: var(--hx-border-width-thin) solid var(--divider-border-color);
  }

  [data-divider][data-variant='section-spacer'].svelte-r8ugfj {
    /* Size */
    min-height: var(--hx-website-size-120);
  }

  [data-divider][data-variant='sub-page-spacer'].svelte-r8ugfj {
    /* Size */
    min-height: var(--hx-website-size-56);
  }

  @media (max-width: 599px) {
    [data-divider][data-mobile-hidden].svelte-r8ugfj {
      /* Box behavior */
      display: none;
    }

    [data-divider][data-variant='low-opacity'].svelte-r8ugfj {
      /* Size */
      min-height: var(--hx-website-size-96);
    }

    [data-divider][data-variant='section-spacer'].svelte-r8ugfj {
      /* Size */
      min-height: var(--hx-website-size-96);
    }

    [data-divider][data-variant='sub-page-spacer'].svelte-r8ugfj {
      /* Size */
      min-height: var(--hx-website-size-48);
    }
  }

[data-header].svelte-10ohxqn {
    /* Custom properties */
    --header-border-color: var(--hx-color-website-border-section-solid);
    --header-height: var(--hx-website-size-80);
    --header-max-width: 1440px;

    /* Position & layer */
    position: sticky;
    top: 0;
    z-index: 10;

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: var(--header-height);
    width: 100%;
  }

  /* Only while the foldout is open, lift the header above the sticky product sub-nav (z-index 10) so
     the foldout panel overlays it. Conditional so the header/sub-nav seam is untouched at rest. */
  [data-header][data-nav-open].svelte-10ohxqn {
    /* Position & layer */
    z-index: 20;
  }

  [data-header-bar].svelte-10ohxqn {
    /* Position & layer */
    inset-block-start: 0;
    inset-inline: 0;
    position: absolute;

    /* Box behavior */
    box-sizing: border-box;

    /* Border & outline */
    border-block-end: var(--hx-border-width-thin) solid transparent;

    /* Background */
    background-color: var(--hx-color-website-background-page);

    /* Transition & animation */
    transition: background-color calc(var(--hx-motion-duration-enter) * 2)
      var(--hx-motion-easing-standard);
  }

  [data-header][data-scrolling].svelte-10ohxqn [data-header-bar]:where(.svelte-10ohxqn) {
    /* Background */
    background-color: var(--hx-color-website-background-nav-backdrop);

    /* Transition & animation */
    transition-duration: var(--hx-motion-duration-fast);
  }

  [data-header][data-scrolled].svelte-10ohxqn [data-header-bar]:where(.svelte-10ohxqn),
  [data-header-bar][data-open].svelte-10ohxqn {
    /* Border & outline */
    border-block-end-color: var(--header-border-color);
  }

  /* When the element below the header (sub-nav or first section) paints its own top border, it
     collapses it and the header owns the seam — showing the divider at rest on every breakpoint. */
  [data-header][data-precedes-bordered-section].svelte-10ohxqn [data-header-bar]:where(.svelte-10ohxqn) {
    /* Border & outline */
    border-block-end-color: var(--header-border-color);
  }

  [data-header-inner].svelte-10ohxqn {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    max-width: var(--header-max-width);
    width: 100%;

    /* Margin */
    margin-inline: auto;
  }

/* Owns the box model Card leaves to the site: fluid padding, full-height fill, and the label
     color override Card exposes as a custom property. */
  [data-card-wrapper].svelte-u35r12 {
    /* Custom properties */
    --card-label-color: var(--hx-color-website-text-accent-muted);

    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    min-width: 0;

    /* Padding */
    padding-block: max(
      calc(
        var(--hx-website-size-40) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet) +
          var(--hx-website-size-8) * var(--hx-fluid-t-desktop)
      ),
      var(--stage-card-min-padding-block, 0px)
    );
    padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-24) * var(--hx-fluid-t-desktop)
    );

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  /* Reserve the active layout's tallest title so every card body in that visible row starts on one
     line. The inner measured span stays natural-height so the observer never measures this reserve. */
  [data-title-reserve].svelte-u35r12 {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: calc(var(--stage-title-lines-desktop, 2) * 1lh);
  }

  [data-title-text].svelte-u35r12 {
    /* Box behavior */
    display: block;
  }

  @media (max-width: 1023px) {
    [data-title-reserve].svelte-u35r12 {
      /* Size */
      min-height: calc(var(--stage-title-lines-tablet, 2) * 1lh);
    }
  }

  @media (max-width: 599px) {
    [data-title-reserve].svelte-u35r12 {
      /* Size */
      min-height: 0;
    }
  }

[data-section].svelte-x3mpui {
    /* Custom properties */
    --pricing-card-padding-block: calc(
      var(--hx-website-size-32) + var(--hx-website-size-24) * var(--hx-fluid-t-tablet)
    );
    --pricing-card-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: stretch;
    gap: 0;

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-header].svelte-x3mpui {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: center;
    gap: var(--hx-website-size-24);

    /* Padding */
    padding-block: calc(
      var(--hx-website-size-40) + var(--hx-website-size-16) * var(--hx-fluid-t-tablet)
    );
    padding-inline: var(--section-padding-inline);
  }

  [data-heading-wrap].svelte-x3mpui {
    /* Size */
    min-width: 0;
    width: 100%;

    /* Typography & color */
    text-align: center;
  }

  [data-body].svelte-x3mpui {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: 797px;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-bold);
    line-height: var(--hx-line-height-lg);
    text-align: center;
  }

  [data-body].svelte-x3mpui p:where(.svelte-x3mpui) {
    /* Margin */
    margin: 0;
  }

  [data-actions].svelte-x3mpui {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    gap: var(--hx-website-size-40);

    /* Padding */
    padding-block-start: var(--hx-website-size-16);
  }

  [data-cards].svelte-x3mpui {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: stretch;

    /* Border & outline */
    border-block-start: var(--hx-border-width-thin) solid var(--hx-color-website-border-section);
  }

  @media (max-width: 599px) {
    [data-header].svelte-x3mpui {
      /* Padding */
      padding-inline: 0;
    }

    [data-heading-wrap].svelte-x3mpui {
      /* Typography & color */
      text-align: left;
    }

    [data-body].svelte-x3mpui {
      /* Typography & color */
      font-size: var(--hx-font-size-sm);
      text-align: left;
    }

    [data-actions].svelte-x3mpui {
      /* Flex & grid container */
      flex-direction: column;

      /* Padding */
      padding-block-start: 0;
    }
  }

/* --scroll-slider-gutter is the inset from the bleeding viewport edge to the page content column;
     ScrollSlider uses it to align the cards and the rail to the column and to fade the cards out as
     they bleed past the column into the margins. --scroll-slider-gutter-start is an INITIAL-PAINT-ONLY
     hint (read once by ScrollSlider's measure(), never the row's structural padding): a shallower value
     bleeds the first card outside the normal content column at first paint (Figma 1815845799: "first
     card offset outside of the normal layout"), while true scrollLeft 0 still aligns every card,
     including the first, with the content column — dragging/scrolling back to 0 always reaches it.
     On phones the wrapper reaches the browser edges while the structural gutter remains the normal
     20px content margin. A transient visual-only 10px translation provides the initial hint without
     asking native mandatory snapping to hold an invalid scroll position; ScrollSlider clears it before
     its first user-driven geometry read, leaving true scrollLeft 0 aligned at 20px. The phone factor is
     declared here (rather than re-declared in @media) because component-css-vars requires all variables
     on the first data rule. It drops to zero at 600px so tablet/desktop retain their prior 24px gap and
     alignment. The same entry-state offset applies to every product slider, including the two-card
     Cortex and Soma rows. */
  [data-slider].svelte-ynjqnc {
    /* Custom properties */
    /* Two cards plus the gap span exactly the normal section content column. */
    --card-width: calc(
      (
          min(
              var(--hx-website-layout-container-width),
              100vw - 2 * var(--hx-website-layout-margin-stretch)
            ) -
            var(--hx-website-size-24)
        ) /
        2
    );
    --scroll-slider-gap: calc(
      var(--hx-website-size-24) - var(--hx-website-size-16) * var(--scroll-slider-phone-factor)
    );
    --scroll-slider-gutter: max(
      calc(var(--hx-website-layout-margin-stretch) * var(--scroll-slider-phone-factor)),
      calc(
        (100vw - var(--hx-website-layout-container-width)) / 2 -
          var(--hx-website-layout-margin-stretch)
      )
    );
    --scroll-slider-gutter-start: max(
      calc(
        var(--hx-website-size-8) + (var(--scroll-slider-gutter) - var(--hx-website-size-8)) *
          var(--scroll-slider-phone-factor)
      ),
      calc(var(--scroll-slider-gutter) - var(--hx-website-size-64))
    );
    --scroll-slider-phone-factor: clamp(0, (600px - 100vw) / 1px, 1);
    /* The rail sits idle at low opacity and comes up on hover/focus/drag (ScrollSlider), rather than
       staying at full strength before the visitor has touched the slider at all. */
    --scroll-slider-rail-idle-opacity: var(--hx-opacity-35);

    /* Size */
    width: 100%;
  }

  [data-card].svelte-ynjqnc {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 370px;
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-16);

    /* Flex & grid item */
    flex: 0 0 var(--card-width);

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--hx-color-website-border-panel);

    /* Padding */
    padding-block: var(--hx-website-size-56);
    padding-inline: var(--hx-website-size-32);
  }

  [data-card-label].svelte-ynjqnc {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-accent-muted);
  }

  [data-card-title].svelte-ynjqnc {
    /* Size */
    min-height: calc(2 * var(--hx-line-height-snug) * var(--hx-font-size-xl));

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    color: var(--hx-color-website-text-primary);
  }

  [data-card-body].svelte-ynjqnc {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    color: var(--hx-color-website-text-secondary);
  }

  [data-footer].svelte-ynjqnc {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  @media (max-width: 1023px) {
    [data-card].svelte-ynjqnc {
      /* Padding */
      padding-block: var(--hx-website-size-40);
      padding-inline: var(--hx-website-size-24);
    }
  }

  @media (max-width: 599px) {
    [data-slider].svelte-ynjqnc {
      /* Size */
      width: calc(100% + 2 * var(--hx-website-layout-margin-stretch));

      /* Margin */
      margin-inline: calc(-1 * var(--hx-website-layout-margin-stretch));
    }

    [data-card].svelte-ynjqnc {
      /* Flex & grid item */
      /* Exactly a normal section content box, matching every non-slider section at this breakpoint —
         the peek of the next card comes from the ScrollSlider bleed/gutter offset, not from shrinking
         the card itself below the content column width. */
      flex: 0 0 calc(100vw - 2 * var(--hx-website-layout-margin-stretch));

      /* Padding */
      padding-block: var(--hx-website-size-32);
      padding-inline: var(--hx-website-size-24);

      /* Overflow & scroll */
      /* Pairs with ScrollSlider's mobile scroll-snap-type: the slides are slotted markup, so the
         snap alignment must live here in the consumer's own scoped CSS. */
      scroll-snap-align: start;
    }
  }

[data-footer-card].svelte-kk8ak8 {
    /* Box behavior */
    box-sizing: border-box;

    /* Size */
    height: 100%;
    min-width: 0;

    /* Padding */
    padding-block: calc(
      var(--hx-website-size-40) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-8) * var(--hx-fluid-t-desktop)
    );
    padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-24) * var(--hx-fluid-t-desktop)
    );

    /* Typography & color */
    color: var(--hx-color-website-text-accent-strong);
  }

  [data-footer-icon].svelte-kk8ak8 {
    /* Box behavior */
    display: flex;

    /* Size */
    height: var(--hx-website-size-24);
    width: var(--hx-website-size-24);
  }

  /* Reserve the active layout's tallest title so every card body in that visible row starts on one
     line. Card's title tag grows around this outer reserve while the inner measured span remains at
     its natural text height. */
  [data-footer-title-reserve].svelte-kk8ak8 {
    /* Box behavior */
    display: block;

    /* Size */
    min-height: calc(var(--footer-title-lines-desktop, 2) * 1lh);
  }

  [data-footer-title-text].svelte-kk8ak8 {
    /* Box behavior */
    display: block;
  }

  @media (max-width: 1023px) {
    [data-footer-title-reserve].svelte-kk8ak8 {
      /* Size */
      min-height: calc(var(--footer-title-lines-tablet, 2) * 1lh);
    }
  }

  @media (max-width: 599px) {
    [data-footer-title-reserve].svelte-kk8ak8 {
      /* Size */
      min-height: 0;
    }
  }

[data-main].svelte-n42dlu {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-32);

    /* Padding */
    padding-top: var(--hx-website-size-32);
  }

  [data-category].svelte-n42dlu {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-light);
    text-align: center;
    text-transform: lowercase;
    color: var(--hx-color-website-text-accent-muted);
  }

  [data-header].svelte-n42dlu {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    gap: var(--hx-website-size-32);

    /* Border & outline */
    /* transparent 1px reserves layout; the exact 5/5 dash is painted via background. */
    border: var(--hx-border-width-thin) solid transparent;

    /* Padding */
    padding: var(--hx-website-size-56);

    /* Background */
    /* Figma dash strokeDashes [5,5] on the border ring. */
    background-image: var(--hx-color-website-component-border-dashed-gradient);
    background-origin: border-box;
    background-position:
      top left,
      bottom left,
      left top,
      right top;
    background-repeat: no-repeat;
    background-size:
      100% var(--hx-border-width-thin),
      100% var(--hx-border-width-thin),
      var(--hx-border-width-thin) 100%,
      var(--hx-border-width-thin) 100%;
  }

  [data-heading-wrap].svelte-n42dlu {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-direction: column;

    /* Padding */
    padding-top: var(--hx-website-size-16);
  }

  [data-heading].svelte-n42dlu {
    /* Margin */
    margin: 0;

    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    line-height: var(--hx-line-height-snug);
    text-transform: uppercase;
    text-wrap: balance;
    color: transparent;
  }

  [data-body].svelte-n42dlu {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    font-size: var(--hx-font-size-lg);
    font-weight: var(--hx-font-weight-regular);
    line-height: normal;
    color: var(--hx-color-website-text-primary);
  }

  [data-body].svelte-n42dlu p:where(.svelte-n42dlu) {
    /* Margin */
    margin: 0;

    /* Typography & color */
    text-box: trim-both cap alphabetic;
  }

  /* Cera Pro ships only Bold (700) and Black (900), so regular body copy uses Inter while the
     emphasis opts into the real Cera Black face. */
  [data-body-emphasis].svelte-n42dlu {
    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-weight: var(--hx-font-weight-black);
  }

  @media (max-width: 1023px) {
    [data-header].svelte-n42dlu {
      /* Padding */
      padding: var(--hx-website-size-40);
    }
  }

  @media (max-width: 599px) {
    [data-header].svelte-n42dlu {
      /* Padding */
      padding: var(--hx-website-size-24);
    }

    [data-heading].svelte-n42dlu {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }

    [data-body].svelte-n42dlu {
      /* Typography & color */
      font-size: var(--hx-font-size-md);
    }
  }

[data-visual].svelte-pgsumj {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 313px;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /* Border & outline */
    /* transparent 1px reserves layout; the exact 5/5 dash is painted via background. */
    border: var(--hx-border-width-thin) solid transparent;

    /* Padding */
    padding: var(--hx-website-size-56);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    /* Figma dash strokeDashes [5,5] on the border ring. */
    background-image: var(--hx-color-website-component-border-dashed-gradient);
    background-origin: border-box;
    background-position:
      top left,
      bottom left,
      left top,
      right top;
    background-repeat: no-repeat;
    background-size:
      100% var(--hx-border-width-thin),
      100% var(--hx-border-width-thin),
      var(--hx-border-width-thin) 100%,
      var(--hx-border-width-thin) 100%;
  }

  [data-footer].svelte-pgsumj {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  @media (max-width: 1023px) {
    [data-visual].svelte-pgsumj {
      /* Padding */
      padding: var(--hx-website-size-40);
    }
  }

  @media (max-width: 599px) {
    [data-visual].svelte-pgsumj {
      /* Padding */
      padding-block: var(--product-detail-visual-padding-mobile-block, var(--hx-website-size-56));
      padding-inline: var(--product-detail-visual-padding-mobile-inline, var(--hx-website-size-96));
    }
  }

[data-section].svelte-ga42ts {
    /* Custom properties */
    --section-copy-width: calc(400px * 2 + var(--hx-website-size-24));
    --section-padding-block: calc(
      var(--hx-website-size-48) + var(--hx-website-size-8) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-8) * var(--hx-fluid-t-desktop)
    );
    --section-padding-inline: calc(
      var(--hx-website-size-24) + var(--hx-website-size-32) * var(--hx-fluid-t-tablet) +
        var(--hx-website-size-24) * var(--hx-fluid-t-desktop)
    );

    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Padding */
    padding-block: var(--section-padding-block);
    padding-inline: var(--section-padding-inline);

    /* Typography & color */
    color: var(--hx-color-website-text-primary);
  }

  [data-dual].svelte-ga42ts {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: flex;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;
  }

  [data-dual].svelte-ga42ts > [data-section]:where(.svelte-ga42ts) {
    /* Flex & grid item */
    flex: 1 1 0;
  }

  [data-divider].svelte-ga42ts {
    /* Position & layer */
    inset-block: 0;
    inset-inline-start: 50%;
    position: absolute;
    z-index: 1;

    /* Box behavior */
    display: flex;

    /* Size */
    width: var(--hx-website-size-32);

    /* Flex & grid container */
    justify-content: center;
    align-items: stretch;

    /* Overflow & scroll */
    overflow: hidden;

    /* Transform */
    transform: translateX(-50%);
  }

  [data-copy].svelte-ga42ts {
    /* Box behavior */
    display: flex;

    /* Size */
    max-width: var(--section-copy-width);
    min-width: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    align-items: stretch;
    gap: var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-weight: var(--hx-font-weight-black);
    text-align: center;
    text-transform: uppercase;
  }

  /* Stacked full-width cards widen the copy so each detail stays within two rows on desktop (Figma
     sizes the body at ~874px); single-card and divider layouts keep the narrower default. */
  [data-stacked].svelte-ga42ts > [data-copy]:where(.svelte-ga42ts) {
    /* Size */
    max-width: calc(var(--section-copy-width) + var(--hx-website-size-56));
  }

  [data-value].svelte-ga42ts,
  [data-detail].svelte-ga42ts {
    /* Margin */
    margin: 0;
  }

  [data-value].svelte-ga42ts {
    /* Typography & color */
    font-size: var(--hx-font-size-5xl);
    line-height: var(--hx-line-height-snug);
    color: var(--hx-color-website-text-primary);
  }

  [data-section][data-balance-value-text='true'].svelte-ga42ts [data-value]:where(.svelte-ga42ts) {
    /* Typography & color */
    text-wrap: balance;
  }

  [data-value][data-gradient].svelte-ga42ts {
    /* Background */
    background: var(--hx-color-website-component-heading-gradient);
    background-clip: text;

    /* Typography & color */
    color: transparent;
  }

  [data-detail].svelte-ga42ts {
    /* Typography & color */
    font-size: var(--hx-font-size-xl);
    line-height: var(--hx-line-height-3xl);
  }

  @media (max-width: 599px) {
    [data-dual].svelte-ga42ts {
      /* Flex & grid container */
      flex-direction: column;
    }

    [data-divider].svelte-ga42ts {
      /* Position & layer */
      inset-block-end: auto;
      inset-block-start: 50%;
      inset-inline-end: 0;
      inset-inline-start: 0;

      /* Size */
      height: var(--hx-website-size-24);
      width: auto;

      /* Transform */
      transform: translateY(-50%);
    }

    [data-section][data-mobile-text-align='left'].svelte-ga42ts [data-copy]:where(.svelte-ga42ts) {
      /* Typography & color */
      text-align: left;
    }

    [data-value].svelte-ga42ts {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
      line-height: var(--hx-line-height-snug);
    }

    [data-detail].svelte-ga42ts {
      /* Typography & color */
      font-size: var(--hx-font-size-lg);
      line-height: var(--hx-line-height-2xl);
    }
  }

[data-cell-link].svelte-7zoaba {
    /* Box behavior */
    box-sizing: content-box;
    display: flex;

    /* Size */
    height: var(--hx-website-size-32);
    min-width: 0;
    width: calc(100% - var(--hx-website-size-32));

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Border & outline */
    outline: none;

    /* Padding */
    padding-block: var(--hx-website-size-32);
    padding-inline: var(--hx-website-size-16);

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    text-decoration: none;
    color: var(--hx-color-website-text-trust-accent);

    /* Transition & animation */
    transition: background-color var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-cell-link].svelte-7zoaba:is(:where(.svelte-7zoaba):hover, :where(.svelte-7zoaba):focus-visible) {
    /* Background */
    background: var(--hx-color-website-background-panel);
  }

  [data-cell-link].svelte-7zoaba:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: calc(var(--hx-border-width-medium) * -1);
  }

[data-cell].svelte-14mmsku {
    /* Box behavior */
    box-sizing: content-box;
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    justify-content: center;
    align-items: center;

    /* Padding */
    padding-inline: var(--hx-website-size-16);

    /* Overflow & scroll */
    overflow: hidden;

    /* Typography & color */
    color: var(--hx-color-website-text-trust-accent);
  }

  [data-cell-label].svelte-14mmsku {
    /* Size */
    height: 100%;

    /* Margin */
    margin: 0;

    /* Overflow & scroll */
    overflow-wrap: anywhere;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-base);
    font-weight: var(--hx-font-weight-light);
    line-height: normal;
    text-align: center;
    text-transform: lowercase;
    color: var(--hx-color-website-text-trust-accent);
    text-box: trim-both cap alphabetic;
  }

  [data-cell-logo].svelte-14mmsku {
    /* Size */
    height: var(--hx-website-size-32);
    width: calc(100% - var(--hx-website-size-32));

    /* Padding */
    padding-block: var(--hx-website-size-32);
  }

  @media (max-width: 599px) {
    [data-cell-label].svelte-14mmsku {
      /* Size */
      height: fit-content;

      /* Padding */
      padding-block: var(--hx-website-size-16);
    }
  }

[data-axis-arrow].svelte-b1gv9h {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-axis-arrow-chevron].svelte-b1gv9h {
    /* SVG */
    fill: none;
  }

  [data-axis-arrow-chevron='blue'].svelte-b1gv9h {
    /* SVG */
    stroke: var(--hx-color-palette-website-signal-info);
  }

  [data-axis-arrow-chevron='mint'].svelte-b1gv9h {
    /* SVG */
    stroke: var(--hx-color-palette-website-mint-n200);
  }

  [data-axis-arrow-chevron='amber'].svelte-b1gv9h {
    /* SVG */
    stroke: var(--hx-color-palette-website-signal-trust);
  }

[data-divider-graphic].svelte-ujnvbg {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    max-width: 100%;
    width: 100%;
  }

  [data-divider-variant].svelte-ujnvbg {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    max-width: 100%;
    width: 100%;

    /* Overflow & scroll */
    /* Stroke endpoints bleed ~1 unit past the viewBox so the line fully reaches the side
       borders; the ancestor [data-divider] clips the bleed back with overflow: hidden. */
    overflow: visible;
  }

  [data-divider-variant='default'].svelte-ujnvbg {
    /* Box behavior */
    display: block;
  }

  [data-divider-stroke].svelte-ujnvbg {
    /* SVG */
    fill: none;
    stroke: var(--hx-color-palette-website-slate-n500);
  }

  [data-divider-graphic][data-divider-tone='muted'].svelte-ujnvbg [data-divider-stroke]:where(.svelte-ujnvbg) {
    /* SVG */
    stroke: var(--hx-color-website-border-divider);
  }

  [data-divider-graphic][data-divider-tone='section'].svelte-ujnvbg [data-divider-stroke]:where(.svelte-ujnvbg) {
    /* SVG */
    stroke: var(--hx-color-website-border-section);
  }

  [data-divider-graphic][data-divider-dashed='true'].svelte-ujnvbg [data-divider-stroke]:where(.svelte-ujnvbg) {
    /* SVG */
    stroke-dasharray: 5 5;
  }

  @media (max-width: 599px) {
    [data-divider-variant='default'].svelte-ujnvbg {
      /* Box behavior */
      display: none;
    }

    [data-divider-variant='mobile'].svelte-ujnvbg {
      /* Box behavior */
      display: block;
    }
  }

[data-sprint-badge].svelte-18cq5oi {
    /* Custom properties */
    --sprint-badge-end: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n700) 70%,
      var(--hx-color-palette-website-mint-n900) 30%
    );
    --sprint-badge-start: var(--hx-color-palette-website-mint-n400);
    --sprint-badge-stroke-end: var(--hx-color-palette-website-slate-n400);
    --sprint-badge-stroke-start: var(--hx-color-palette-website-slate-white);

    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

[data-graphic-silo].svelte-1sm1sin {
    /* Box behavior */
    display: contents;
  }

  [data-silo-graphic].svelte-1sm1sin {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-silo-graphic-layout='wide'].svelte-1sm1sin {
    /* Box behavior */
    box-sizing: border-box;
    display: block;

    /* Size */
    height: auto;
    width: 100%;

    /* Padding */
    padding-inline: 29px;
  }

  [data-silo-fill='box'].svelte-1sm1sin {
    /* SVG */
    fill: color-mix(
      in srgb,
      var(--hx-color-palette-website-slate-n950) 90%,
      var(--hx-color-palette-website-slate-n500) 10%
    );
  }

  [data-silo-fill='mint-n300'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

  [data-silo-fill='mint-n400'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n400);
  }

  [data-silo-fill='signal-alert'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-alert);
  }

  [data-silo-fill='signal-alert-strong'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-alert-strong);
  }

  [data-silo-fill='signal-alert-wash'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-alert-wash);
  }

  [data-silo-fill='signal-info'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-info);
  }

  [data-silo-fill='signal-info-soft'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-info-soft);
  }

  [data-silo-fill='signal-info-strong'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-info-strong);
  }

  [data-silo-fill='signal-trust'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-trust);
  }

  [data-silo-fill='signal-warning'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-signal-warning);
  }

  [data-silo-fill='slate-white'].svelte-1sm1sin {
    /* SVG */
    fill: var(--hx-color-palette-website-slate-white);
  }

  [data-silo-stroke='mint-n100'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-mint-n100);
  }

  [data-silo-stroke='mint-n200'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-mint-n200);
  }

  [data-silo-stroke='mint-n300'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-mint-n300);
  }

  [data-silo-stroke='mint-n400'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-mint-n400);
  }

  [data-silo-stroke='signal-alert'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-signal-alert);
  }

  [data-silo-stroke='signal-info-soft'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-signal-info-soft);
  }

  [data-silo-stroke='signal-trust'].svelte-1sm1sin {
    /* SVG */
    stroke: var(--hx-color-palette-website-signal-trust);
  }

  @media (max-width: 599px) {
    [data-silo-graphic-layout='wide'].svelte-1sm1sin {
      /* Box behavior */
      display: none;
    }

    [data-silo-graphic-layout='mobile'].svelte-1sm1sin {
      /* Box behavior */
      box-sizing: border-box;
      display: block;

      /* Size */
      height: auto;
      width: 100%;

      /* Padding */
      padding-block: var(--hx-website-size-96);
      padding-inline: 0;
    }
  }

[data-icon-access-control].svelte-1sarlpq {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-1sarlpq {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-1sarlpq {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-bar-chart].svelte-qmw7rq {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-qmw7rq {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-qmw7rq {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-code].svelte-9jsh1o {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-9jsh1o {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-9jsh1o {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-graphic-cortex].svelte-4awml5 {
    /* Custom properties */
    --pd-amber: var(--hx-color-palette-website-signal-trust);
    --pd-amber-bright: color-mix(
      in srgb,
      var(--hx-color-palette-website-signal-trust) 80%,
      var(--hx-color-palette-website-slate-white) 20%
    );
    --pd-blue: var(--hx-color-palette-website-signal-info);
    --pd-mint: var(--hx-color-palette-website-mint-n200);
    --pd-vessel-fill: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n700) 70%,
      var(--hx-color-palette-website-slate-n300) 30%
    );
    --pd-vessel-stroke: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n400) 75%,
      var(--hx-color-palette-website-slate-n600) 25%
    );

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-4awml5 {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-4awml5 {
    /* Box behavior */
    display: block;
  }

  [data-pd-line].svelte-4awml5 {
    /* SVG */
    fill: none;
  }

  [data-pd-line='amber'].svelte-4awml5 {
    /* SVG */
    stroke: var(--pd-amber);
  }

  [data-pd-line='blue'].svelte-4awml5 {
    /* SVG */
    stroke: var(--pd-blue);
  }

  [data-pd-line='mint'].svelte-4awml5 {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-fill='amber-bright'].svelte-4awml5 {
    /* SVG */
    fill: var(--pd-amber-bright);
  }

  [data-pd-fill='blue'].svelte-4awml5 {
    /* SVG */
    fill: var(--pd-blue);
  }

  [data-pd-shape='vessel-fill-vessel-stroke'].svelte-4awml5 {
    /* SVG */
    fill: var(--pd-vessel-fill);
    stroke: var(--pd-vessel-stroke);
  }

[data-icon-cube].svelte-iad0zo {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-iad0zo {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-iad0zo {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-database].svelte-ympnm4 {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-ympnm4 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-ympnm4 {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-graphic-deep-observability].svelte-1n933sl {
    /* Custom properties */
    --pd-amber: var(--hx-color-palette-website-signal-trust);
    --pd-bg: var(--hx-color-palette-website-slate-n950);
    --pd-blue: var(--hx-color-palette-website-signal-info);
    --pd-mint: var(--hx-color-palette-website-mint-n200);
    --pd-mint-dim: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n200) 55%,
      var(--hx-color-palette-website-slate-n950) 45%
    );
    --pd-mint-shadow: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n400) 60%,
      var(--hx-color-palette-website-slate-n950) 40%
    );

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-1n933sl {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-1n933sl {
    /* Box behavior */
    display: block;
  }

  [data-pd-grad-line].svelte-1n933sl {
    /* SVG */
    fill: none;
  }

  [data-pd-line].svelte-1n933sl {
    /* SVG */
    fill: none;
  }

  [data-pd-line='amber'].svelte-1n933sl {
    /* SVG */
    stroke: var(--pd-amber);
  }

  [data-pd-line='blue'].svelte-1n933sl {
    /* SVG */
    stroke: var(--pd-blue);
  }

  [data-pd-line='mint'].svelte-1n933sl {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-line='mint-shadow'].svelte-1n933sl {
    /* SVG */
    stroke: var(--pd-mint-shadow);
  }

  [data-pd-fill='mint'].svelte-1n933sl {
    /* SVG */
    fill: var(--pd-mint);
  }

[data-icon-device].svelte-v0c6v {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-v0c6v {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-v0c6v {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-entity-cube].svelte-vgnvwj {
    /* Box behavior */
    display: contents;
  }

  [data-entity-cube-icon].svelte-vgnvwj {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-entity-cube-stroke].svelte-vgnvwj {
    /* SVG */
    fill: none;
    stroke: var(--hx-color-palette-website-mint-n300);
    stroke-linejoin: bevel;
  }

[data-icon-find-data].svelte-i05me {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-i05me {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-i05me {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-gateway-terminal].svelte-175y3u6 {
    /* Custom properties */
    --terminal-accent: var(--hx-color-website-text-accent);
    --terminal-border: var(--hx-color-website-border-panel);
    --terminal-cursor: var(--hx-color-website-text-accent);
    --terminal-muted: var(--hx-color-website-text-subtle);
    --terminal-output: var(--hx-color-website-text-secondary);
    --terminal-prompt: var(--hx-color-website-text-accent);
    --terminal-surface: var(--hx-color-website-background-surface-deep);
    --terminal-surface-raised: var(--hx-color-website-background-panel-raised);
    --terminal-text: var(--hx-color-website-text-primary);

    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    min-width: 0;
    width: 100%;
  }

  [data-terminal-frame].svelte-175y3u6 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    height: 100%;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--terminal-border);
    border-radius: var(--hx-radius-md);

    /* Overflow & scroll */
    overflow: hidden;

    /* Background */
    background: var(--terminal-surface);

    /* Effects */
    box-shadow: var(--hx-website-size-4) var(--hx-website-size-4) var(--hx-website-size-16)
      var(--hx-color-website-overlay-shadow);
  }

  [data-terminal-titlebar].svelte-175y3u6 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Flex & grid container */
    justify-content: space-between;
    align-items: center;
    gap: var(--hx-website-size-8);

    /* Border & outline */
    border-block-end: var(--hx-border-width-thin) solid var(--terminal-border);

    /* Padding */
    padding-block: var(--hx-website-size-8);
    padding-inline: var(--hx-website-size-16);

    /* Background */
    background: var(--terminal-surface-raised);
  }

  [data-terminal-title].svelte-175y3u6 {
    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-xs);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-xs);
    text-transform: uppercase;
    color: var(--terminal-muted);
  }

  [data-terminal-status].svelte-175y3u6 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: center;
    gap: var(--hx-website-size-8);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-2xs);
    font-weight: var(--hx-font-weight-regular);
    text-transform: uppercase;
    color: var(--terminal-muted);
  }

  [data-terminal-status-dot].svelte-175y3u6 {
    /* Position & layer */
    position: relative;

    /* Box behavior */
    display: block;

    /* Size */
    height: var(--hx-website-size-8);
    width: var(--hx-website-size-8);

    /* Border & outline */
    border-radius: var(--hx-radius-full);

    /* Background */
    background: var(--terminal-accent);
  }

  [data-terminal-status-dot].svelte-175y3u6::after {
    /* Position & layer */
    inset: calc(var(--hx-website-size-2) * -1);
    position: absolute;

    /* Border & outline */
    border: var(--hx-border-width-thin) solid var(--terminal-accent);
    border-radius: var(--hx-radius-full);

    /* Effects */
    opacity: 0;

    /* Transform */
    transform: scale(0.6);

    /* Generated content */
    content: '';

    @media (prefers-reduced-motion: no-preference) {
      /* Transition & animation */
      animation: svelte-175y3u6-terminal-status-pulse calc(var(--hx-motion-duration-deliberate) * 2)
        var(--hx-motion-easing-decelerate) infinite;
    }
  }

  [data-terminal-body].svelte-175y3u6 {
    /* Box behavior */
    box-sizing: border-box;
    display: flex;

    /* Size */
    min-height: 0;
    width: 100%;

    /* Flex & grid container */
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--hx-website-size-8);

    /* Flex & grid item */
    flex: 1;

    /* Padding */
    padding-block: var(--hx-website-size-24);
    padding-inline: var(--hx-website-size-24);

    /* Overflow & scroll */
    overflow-x: hidden;
    overflow-y: auto;
  }

  [data-terminal-line].svelte-175y3u6 {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    align-items: baseline;
    gap: var(--hx-website-size-8);

    /* Margin */
    margin: 0;

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
    font-size: var(--hx-font-size-sm);
    font-weight: var(--hx-font-weight-regular);
    line-height: var(--hx-line-height-lg);
    white-space: pre-wrap;
    color: var(--terminal-output);
  }

  [data-terminal-line][data-terminal-line-kind='prompt'].svelte-175y3u6 {
    /* Typography & color */
    color: var(--terminal-text);
  }

  [data-terminal-line][data-terminal-line-tone='muted'].svelte-175y3u6 {
    /* Typography & color */
    color: var(--terminal-muted);
  }

  [data-terminal-line][data-terminal-line-tone='accent'].svelte-175y3u6 {
    /* Typography & color */
    color: var(--terminal-accent);
  }

  [data-terminal-prompt].svelte-175y3u6 {
    /* Typography & color */
    color: var(--terminal-prompt);
  }

  [data-terminal-cursor].svelte-175y3u6 {
    /* Box behavior */
    display: inline-block;

    /* Size */
    height: 1em;
    width: 0.5em;

    /* Background */
    background: var(--terminal-cursor);

    /* Transform */
    transform: translateY(0.1em);

    @media (prefers-reduced-motion: no-preference) {
      /* Transition & animation */
      animation: svelte-175y3u6-terminal-cursor-blink calc(var(--hx-motion-duration-deliberate) * 2)
        var(--hx-motion-easing-standard) infinite;
    }
  }

  @keyframes svelte-175y3u6-terminal-cursor-blink {
    0%,
    49% {
      /* Effects */
      opacity: 1;
    }

    50%,
    100% {
      /* Effects */
      opacity: 0;
    }
  }

  @keyframes svelte-175y3u6-terminal-status-pulse {
    0% {
      /* Effects */
      opacity: 0.8;

      /* Transform */
      transform: scale(0.6);
    }

    70%,
    100% {
      /* Effects */
      opacity: 0;

      /* Transform */
      transform: scale(1.6);
    }
  }

  @media (max-width: 599px) {
    [data-terminal-title].svelte-175y3u6 {
      /* Typography & color */
      font-size: var(--hx-font-size-2xs);
    }

    [data-terminal-body].svelte-175y3u6 {
      /* Padding */
      padding-block: var(--hx-website-size-16);
      padding-inline: var(--hx-website-size-16);
    }

    [data-terminal-line].svelte-175y3u6 {
      /* Typography & color */
      font-size: var(--hx-font-size-xs);
      line-height: var(--hx-line-height-md);
    }
  }

[data-icon-grafana].svelte-185p35v {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-185p35v {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-185p35v {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-guided].svelte-1wvemk1 {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-1wvemk1 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-1wvemk1 {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-graphic-hybrid-runtime].svelte-h5nyk6 {
    /* Custom properties */
    --pd-amber: var(--hx-color-palette-website-signal-trust);
    --pd-bg: var(--hx-color-palette-website-slate-n950);
    --pd-blue: var(--hx-color-palette-website-signal-info-strong);
    --pd-mint: var(--hx-color-palette-website-mint-n200);
    --pd-mint-dim: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n200) 55%,
      var(--hx-color-palette-website-slate-n950) 45%
    );

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-h5nyk6 {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-h5nyk6 {
    /* Box behavior */
    display: block;
  }

  [data-pd-grad-line].svelte-h5nyk6 {
    /* SVG */
    fill: none;
  }

  [data-pd-line].svelte-h5nyk6 {
    /* SVG */
    fill: none;
  }

  [data-pd-line='mint'].svelte-h5nyk6 {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-fill='amber'].svelte-h5nyk6 {
    /* SVG */
    fill: var(--pd-amber);
  }

  [data-pd-fill='bg'].svelte-h5nyk6 {
    /* SVG */
    fill: var(--pd-bg);
  }

  [data-pd-fill='blue'].svelte-h5nyk6 {
    /* SVG */
    fill: var(--pd-blue);
  }

  [data-pd-fill='mint'].svelte-h5nyk6 {
    /* SVG */
    fill: var(--pd-mint);
  }

[data-icon-identity].svelte-3mer9z {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-3mer9z {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-3mer9z {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-graphic-lens].svelte-cc85wc {
    /* Custom properties */
    --pd-amber: var(--hx-color-palette-website-signal-trust);
    --pd-blue: var(--hx-color-palette-website-signal-info);
    --pd-mint: var(--hx-color-palette-website-mint-n200);
    --pd-mint-muted: var(--hx-color-palette-website-mint-muted);

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-cc85wc {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-cc85wc {
    /* Box behavior */
    display: block;
  }

  [data-pd-line].svelte-cc85wc {
    /* SVG */
    fill: none;
  }

  [data-pd-line='amber'].svelte-cc85wc {
    /* SVG */
    stroke: var(--pd-amber);
  }

  [data-pd-line='blue'].svelte-cc85wc {
    /* SVG */
    stroke: var(--pd-blue);
  }

  [data-pd-line='mint'].svelte-cc85wc {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-line='mint-muted'].svelte-cc85wc {
    /* SVG */
    stroke: var(--pd-mint-muted);
  }

  [data-pd-fill='mint'].svelte-cc85wc {
    /* SVG */
    fill: var(--pd-mint);
  }

[data-graphic-mira].svelte-rmako3 {
    /* Custom properties */
    --pd-amber: var(--hx-color-palette-website-signal-trust);
    --pd-bg: var(--hx-color-palette-website-slate-n950);
    --pd-green: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n200) 55%,
      var(--hx-color-palette-website-signal-warning) 45%
    );
    --pd-mint: var(--hx-color-palette-website-mint-n200);
    --pd-olive: color-mix(
      in srgb,
      var(--hx-color-palette-website-signal-trust) 75%,
      var(--hx-color-palette-website-mint-n300) 25%
    );

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-rmako3 {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-rmako3 {
    /* Box behavior */
    display: block;
  }

  [data-pd-grad-line].svelte-rmako3 {
    /* SVG */
    fill: none;
  }

  [data-pd-line].svelte-rmako3 {
    /* SVG */
    fill: none;
  }

  [data-pd-line='amber'].svelte-rmako3 {
    /* SVG */
    stroke: var(--pd-amber);
  }

  [data-pd-line='mint'].svelte-rmako3 {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-fill='amber'].svelte-rmako3 {
    /* SVG */
    fill: var(--pd-amber);
  }

  [data-pd-fill='bg'].svelte-rmako3 {
    /* SVG */
    fill: var(--pd-bg);
  }

  [data-pd-fill='green'].svelte-rmako3 {
    /* SVG */
    fill: var(--pd-green);
  }

  [data-pd-fill='mint'].svelte-rmako3 {
    /* SVG */
    fill: var(--pd-mint);
  }

  [data-pd-fill='olive'].svelte-rmako3 {
    /* SVG */
    fill: var(--pd-olive);
  }

[data-graphic-nexus].svelte-p49omh {
    /* Custom properties */
    --pd-amber-bright: color-mix(
      in srgb,
      var(--hx-color-palette-website-signal-trust) 80%,
      var(--hx-color-palette-website-slate-white) 20%
    );
    --pd-mint: var(--hx-color-palette-website-mint-n200);

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-p49omh {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-p49omh {
    /* Box behavior */
    display: block;
  }

  [data-pd-line].svelte-p49omh {
    /* SVG */
    fill: none;
  }

  [data-pd-line='amber-bright'].svelte-p49omh {
    /* SVG */
    stroke: var(--pd-amber-bright);
  }

  [data-pd-line='mint'].svelte-p49omh {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-fill='amber-bright'].svelte-p49omh {
    /* SVG */
    fill: var(--pd-amber-bright);
  }

[data-icon-observability].svelte-f739vg {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-f739vg {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-f739vg {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-panels].svelte-1kqbrxe {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-1kqbrxe {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-1kqbrxe {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-plain-language].svelte-amkm15 {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-amkm15 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-amkm15 {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon-shield-lock].svelte-y4feg3 {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-y4feg3 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-y4feg3 {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-graphic-soma].svelte-1afbhro {
    /* Custom properties */
    --pd-blue: var(--hx-color-palette-website-signal-info);
    --pd-mint: var(--hx-color-palette-website-mint-n200);
    --pd-mint-muted: var(--hx-color-palette-website-mint-muted);
    --pd-mint-shadow: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n700) 70%,
      var(--hx-color-palette-website-slate-n500) 30%
    );

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-1afbhro {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-1afbhro {
    /* Box behavior */
    display: block;
  }

  [data-pd-line].svelte-1afbhro {
    /* SVG */
    fill: none;
  }

  [data-pd-line='blue'].svelte-1afbhro {
    /* SVG */
    stroke: var(--pd-blue);
  }

  [data-pd-line='mint'].svelte-1afbhro {
    /* SVG */
    stroke: var(--pd-mint);
  }

  [data-pd-fill='blue'].svelte-1afbhro {
    /* SVG */
    fill: var(--pd-blue);
  }

  [data-pd-fill='mint'].svelte-1afbhro {
    /* SVG */
    fill: var(--pd-mint);
  }

  [data-pd-fill='mint-muted'].svelte-1afbhro {
    /* SVG */
    fill: var(--pd-mint-muted);
  }

  [data-pd-fill='mint-shadow'].svelte-1afbhro {
    /* SVG */
    fill: var(--pd-mint-shadow);
  }

[data-icon-stopwatch].svelte-18whmci {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-18whmci {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-18whmci {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-graphic-synapse].svelte-1wlhlr9 {
    /* Custom properties */
    --pd-amber: var(--hx-color-palette-website-signal-trust);
    --pd-blue: var(--hx-color-palette-website-signal-info);
    --pd-mint: var(--hx-color-palette-website-mint-n200);

    /* Box behavior */
    display: contents;
  }

  [data-pd-graphic].svelte-1wlhlr9 {
    /* Box behavior */
    display: none;

    /* Size */
    height: 100%;
    width: 100%;

    /* Transform */
    transform: translateZ(0);
  }

  [data-pd-graphic-layout='wide'].svelte-1wlhlr9 {
    /* Box behavior */
    display: block;
  }

  [data-pd-line].svelte-1wlhlr9 {
    /* SVG */
    fill: none;
  }

  [data-pd-line='amber'].svelte-1wlhlr9 {
    /* SVG */
    stroke: var(--pd-amber);
  }

  [data-pd-line='blue'].svelte-1wlhlr9 {
    /* SVG */
    stroke: var(--pd-blue);
  }

  [data-pd-line='mint'].svelte-1wlhlr9 {
    /* SVG */
    stroke: var(--pd-mint);
  }

[data-icon-variables].svelte-dch3z4 {
    /* Box behavior */
    display: contents;
  }

  [data-pd-icon].svelte-dch3z4 {
    /* Box behavior */
    display: block;

    /* Size */
    height: 100%;
    width: 100%;
  }

  [data-pd-fill='mint'].svelte-dch3z4 {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n300);
  }

[data-icon].svelte-1qvvwpw {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--icon-size, 100%);

    /* Overflow & scroll */
    overflow: visible;
  }

[data-icon].svelte-w8uyzu {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--icon-size, 100%);

    /* Overflow & scroll */
    overflow: visible;
  }

[data-icon].svelte-1tj9mij {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--icon-size, 100%);

    /* Overflow & scroll */
    overflow: visible;
  }

[data-icon].svelte-142xkwe {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--icon-size, 100%);

    /* Overflow & scroll */
    overflow: visible;
  }

/* Sizing convention matches Helixer.svelte/Mark.svelte (width-first, var()-with-fallback): the
     fallback resolves to this logo's own natural height-driven width — 32px (a --hx-website-size-32
     trust-strip cell) scaled by the wordmark's own viewBox aspect ratio — so every current call site
     (TrustSectionTemplate.svelte, none of which pass `size`) renders pixel-identical to the prior
     height-first default. See docs/patterns/logos.md for the full sizing/color convention writeup. */
  [data-logo].svelte-3g4x0c {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--logo-size, calc(var(--hx-website-size-32) * 137.587 / 29.6739));

    /* Overflow & scroll */
    overflow: visible;
  }

/* Brand mark: owns its color tokens locally (gradients + hover swap below) rather than inheriting
     `currentColor` like the partner marks (CAMBioceramics.svelte/Liquin.svelte). See
     docs/patterns/logos.md for the full brand-vs-partner color/sizing convention writeup. */
  [data-logo].svelte-uofkcj {
    /* Custom properties */
    --logo-mark-default-end: var(--hx-color-palette-website-mint-n900);
    --logo-mark-default-start: var(--hx-color-palette-website-mint-n400);
    --logo-mark-hover-end: var(--hx-color-palette-website-mint-n900);
    --logo-mark-hover-mid: var(--hx-color-palette-website-mint-n500);
    --logo-mark-hover-start: var(--hx-color-palette-website-mint-n300);
    --logo-stroke-end: var(--hx-color-palette-website-slate-n400);
    --logo-stroke-start: var(--hx-color-palette-website-slate-white);
    --logo-wordmark-default: var(--hx-color-palette-website-slate-white);
    --logo-wordmark-hover: color-mix(
      in srgb,
      var(--hx-color-palette-website-mint-n50) 65%,
      var(--hx-color-palette-website-slate-white) 35%
    );

    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--logo-size, 100%);

    /* Overflow & scroll */
    overflow: visible;
  }

  [data-logo-layer].svelte-uofkcj {
    /* Transition & animation */
    transition: opacity var(--hx-motion-duration-base) var(--hx-motion-easing-standard);
  }

  [data-logo-layer='hover'].svelte-uofkcj {
    /* Effects */
    opacity: 0;
  }

  [data-logo-helixer].svelte-uofkcj:is(:where(.svelte-uofkcj):hover, :where(.svelte-uofkcj):focus-visible) [data-logo-layer='default']:where(.svelte-uofkcj) {
    /* Effects */
    opacity: 0;
  }

  [data-logo-helixer].svelte-uofkcj:is(:where(.svelte-uofkcj):hover, :where(.svelte-uofkcj):focus-visible) [data-logo-layer='hover']:where(.svelte-uofkcj) {
    /* Effects */
    opacity: 1;
  }

/* Sizing convention matches Helixer.svelte/Mark.svelte (width-first, var()-with-fallback): the
     fallback resolves to this logo's own natural height-driven width — 32px (a --hx-website-size-32
     trust-strip cell) scaled by the wordmark's own viewBox aspect ratio — so every current call site
     (TrustSectionTemplate.svelte, none of which pass `size`) renders pixel-identical to the prior
     height-first default. See docs/patterns/logos.md for the full sizing/color convention writeup. */
  [data-logo].svelte-bl7bbg {
    /* Box behavior */
    display: block;

    /* Size */
    height: auto;
    max-width: 100%;
    width: var(--logo-size, calc(var(--hx-website-size-32) * 123.075 / 28.7698));

    /* Overflow & scroll */
    overflow: visible;
  }

/* Brand mark: owns its color tokens locally rather than inheriting `currentColor` like the
     partner marks (CAMBioceramics.svelte/Liquin.svelte). See docs/patterns/logos.md for the full
     brand-vs-partner color/sizing convention writeup. */
  [data-mark].svelte-9fuufn {
    /* Custom properties */
    --mark-stroke-end: var(--hx-color-palette-website-slate-n400);
    --mark-stroke-start: var(--hx-color-palette-website-slate-white);

    /* Box behavior */
    display: block;

    /* Size */
    aspect-ratio: 1;
    height: auto;
    width: var(--mark-size, 100%);
  }

  [data-mark-tile].svelte-9fuufn {
    /* SVG */
    fill: var(--hx-color-palette-website-mint-n200);
  }

[data-error-page].svelte-eedcwb {
    /* Box behavior */
    display: grid;

    /* Size */
    min-height: 100vh;

    /* Flex & grid container */
    place-items: center;

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Background */
    background:
      radial-gradient(
        circle at top,
        var(--hx-color-website-background-accent-wash),
        transparent 40%
      ),
      var(--hx-color-website-background-page);
  }

  [data-error-card].svelte-eedcwb {
    /* Size */
    width: min(calc(var(--hx-website-size-16) * 32), 100%);

    /* Border & outline */
    border: var(--hx-website-size-1) solid var(--hx-color-website-border-subtle);
    border-radius: var(--hx-radius-lg);

    /* Padding */
    padding: var(--hx-website-size-24);

    /* Background */
    background: var(--hx-color-website-background-surface-deep);

    /* Effects */
    box-shadow: var(--hx-website-size-8) var(--hx-website-size-8) var(--hx-website-size-24)
      color-mix(in srgb, var(--hx-color-palette-website-slate-n950) 72%, transparent);
  }

  [data-eyebrow].svelte-eedcwb {
    /* Margin */
    margin: 0 0 var(--hx-website-size-16);

    /* Typography & color */
    font-size: var(--hx-font-size-xs);
    text-transform: uppercase;
    color: var(--hx-color-website-text-secondary);
  }

  h1.svelte-eedcwb {
    /* Margin */
    margin: 0 0 var(--hx-website-size-16);

    /* Typography & color */
    font-family: var(--hx-font-family-cera);
    font-size: var(--hx-font-size-5xl);
    font-weight: var(--hx-font-weight-black);
    text-transform: uppercase;
  }

  [data-message].svelte-eedcwb {
    /* Margin */
    margin: 0;

    /* Typography & color */
    color: var(--hx-color-website-text-secondary);
  }

  [data-message].svelte-eedcwb code:where(.svelte-eedcwb) {
    /* Border & outline */
    border-radius: var(--hx-radius-xs);

    /* Padding */
    padding: var(--hx-website-size-4) var(--hx-website-size-8);

    /* Background */
    background: var(--hx-color-website-background-panel);

    /* Typography & color */
    font-family: var(--hx-font-family-mono);
  }

  [data-actions].svelte-eedcwb {
    /* Box behavior */
    display: flex;

    /* Flex & grid container */
    flex-wrap: wrap;
    gap: var(--hx-website-size-16);

    /* Margin */
    margin-top: var(--hx-website-size-16);
  }

  [data-error-action].svelte-eedcwb {
    /* Box behavior */
    display: inline-flex;
    appearance: none;

    /* Border & outline */
    border: none;
    border-radius: var(--hx-radius-sm);

    /* Padding */
    padding: var(--hx-website-size-16) var(--hx-website-size-16);

    /* Background */
    background: var(--hx-color-website-background-accent);

    /* Typography & color */
    font: inherit;
    text-decoration: none;
    color: var(--hx-color-website-text-on-accent);

    /* Transition & animation */
    transition: background var(--hx-motion-duration-base) var(--hx-motion-easing-standard);

    /* Interaction */
    cursor: pointer;
  }

  [data-error-action].svelte-eedcwb:is(:where(.svelte-eedcwb):hover, :where(.svelte-eedcwb):focus-visible) {
    /* Background */
    background: var(--hx-color-website-background-accent-tint);
  }

  [data-error-action].svelte-eedcwb:focus-visible {
    /* Border & outline */
    outline: var(--hx-border-width-medium) solid var(--hx-color-website-border-focus);
    outline-offset: var(--hx-website-size-4);
  }

  @media (max-width: 599px) {
    h1.svelte-eedcwb {
      /* Typography & color */
      font-size: var(--hx-font-size-3xl);
    }
  }

[data-lab-unavailable].svelte-avm8fa {
    /* Box behavior */
    display: grid;

    /* Size */
    min-height: 100vh;

    /* Flex & grid container */
    place-items: center;

    /* Padding */
    padding: var(--hx-website-size-16);

    /* Typography & color */
    text-align: center;
    color: var(--hx-color-website-text-secondary);
  }

  [data-lab-unavailable-action].svelte-avm8fa {
    /* Typography & color */
    color: var(--hx-color-website-text-accent);
  }

  [data-lab-page].svelte-avm8fa {
    /* Custom properties */
    --lab-color-border: var(--hx-color-palette-website-slate-n700);
    --lab-color-border-active: var(--hx-color-palette-website-mint-n200);
    --lab-color-canvas: var(--hx-color-palette-website-slate-n1000);
    --lab-color-chip-active: color-mix(
      in srgb,
      var(--lab-color-border-active) 18%,
      var(--lab-color-panel) 82%
    );
    --lab-color-debug-box: var(--hx-color-website-component-outline-inspect);
    --lab-color-debug-box-label-bg: color-mix(
      in srgb,
      var(--lab-color-debug-box) 34%,
      var(--hx-color-palette-website-slate-n950) 66%
    );
    --lab-color-debug-box-label-bg-size: color-mix(
      in srgb,
      var(--lab-color-debug-box) 42%,
      var(--hx-color-palette-website-slate-n1000) 58%
    );
    --lab-color-debug-box-label-color: var(--hx-color-palette-website-slate-white);
    --lab-color-debug-box-strong: color-mix(
      in srgb,
      var(--lab-color-debug-box) 84%,
      var(--hx-color-palette-website-slate-white) 16%
    );
    --lab-color-panel: var(--hx-color-palette-website-slate-n900);
    --lab-color-panel-accent: var(--hx-color-palette-website-slate-n875);
    --lab-color-panel-raised: var(--hx-color-palette-website-slate-n850);
    --lab-color-sidebar: var(--hx-color-palette-website-slate-n950);
    --lab-color-text-base: var(--hx-color-palette-website-slate-n50);
    --lab-color-text-disabled: var(--hx-color-palette-website-slate-n500);
    --lab-color-text-muted: var(--hx-color-palette-website-slate-n400);
    --lab-color-text-secondary: var(--hx-color-palette-website-slate-n100);
    --lab-color-text-strong: var(--hx-color-palette-website-slate-white);
    --lab-color-text-subtle: var(--hx-color-palette-website-slate-n200);
    --lab-debug-box-color: var(--lab-color-debug-box);
    --lab-debug-box-color-strong: var(--lab-color-debug-box-strong);
    --lab-debug-box-label-bg: var(--lab-color-debug-box-label-bg);
    --lab-debug-box-label-bg-size: var(--lab-color-debug-box-label-bg-size);
    --lab-debug-box-label-color: var(--lab-color-debug-box-label-color);
    --lab-sidebar-collapsed-width: calc(var(--hx-website-size-64) + var(--hx-website-size-1));
    --lab-sidebar-expanded-width: clamp(
      calc(var(--hx-website-size-16) * 18),
      22vw,
      calc(var(--hx-website-size-16) * 22)
    );

    /* Box behavior */
    display: grid;

    /* Size */
    min-height: 100vh;

    /* Flex & grid container */
    grid-template-columns:
      var(--lab-sidebar-expanded-width)
      minmax(0, 1fr);

    /* Background */
    background: var(--lab-color-canvas);

    /* Typography & color */
    font-family: var(--hx-font-family-inter);
    color: var(--lab-color-text-base);
  }

  [data-lab-page][data-sidebar-collapsed].svelte-avm8fa {
    /* Flex & grid container */
    grid-template-columns: var(--lab-sidebar-collapsed-width) minmax(0, 1fr);
  }

  [data-lab-workspace].svelte-avm8fa {
    /* Box behavior */
    display: flex;

    /* Size */
    min-width: 0;

    /* Flex & grid container */
    flex-direction: column;
    gap: var(--hx-website-size-24);

    /* Padding */
    padding: var(--hx-website-size-32);
  }

  [data-lab-preview].svelte-avm8fa {
    /* Size */
    min-width: 0;
    width: 100%;
  }

  [data-lab-preview][data-viewport-scope='global'][data-selected-viewport='desktop'].svelte-avm8fa {
    /* Size */
    width: 100%;
  }

  [data-lab-preview][data-viewport-scope='global'][data-selected-viewport='tablet'].svelte-avm8fa {
    /* Size */
    width: min(100%, var(--lab-viewport-tablet-width));
  }

  [data-lab-preview][data-viewport-scope='global'][data-selected-viewport='mobile'].svelte-avm8fa {
    /* Size */
    width: min(100%, var(--lab-viewport-mobile-width));
  }

  @media (max-width: 900px) {
    [data-lab-page].svelte-avm8fa,
    [data-lab-page][data-sidebar-collapsed].svelte-avm8fa {
      /* Flex & grid container */
      grid-template-columns: 1fr;
    }

    [data-lab-workspace].svelte-avm8fa {
      /* Padding */
      padding: var(--hx-website-size-16);
    }
  }