/* ==========================================================================
   Theme stylesheet entry point
   Loaded once by templates/layouts/base.html. Everything global lives in the
   partials below; module styles live in each module's module.css.

   @font-face sits here rather than in a partial so the relative
   get_asset_url paths resolve from this file's known location (css/).
   ========================================================================== */

@font-face {
  font-family: 'Denim';
  src: url('https://8723344.fs1.hubspotusercontent-na1.net/hubfs/8723344/raw_assets/public/coadjute_refresh/fonts/Denim-Regular.woff2') format('woff2'),
       url('https://8723344.fs1.hubspotusercontent-na1.net/hubfs/8723344/raw_assets/public/coadjute_refresh/fonts/Denim-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Denim';
  src: url('https://8723344.fs1.hubspotusercontent-na1.net/hubfs/8723344/raw_assets/public/coadjute_refresh/fonts/Denim-Medium.woff2') format('woff2'),
       url('https://8723344.fs1.hubspotusercontent-na1.net/hubfs/8723344/raw_assets/public/coadjute_refresh/fonts/Denim-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Denim';
  src: url('https://8723344.fs1.hubspotusercontent-na1.net/hubfs/8723344/raw_assets/public/coadjute_refresh/fonts/Denim-SemiBold.woff2') format('woff2'),
       url('https://8723344.fs1.hubspotusercontent-na1.net/hubfs/8723344/raw_assets/public/coadjute_refresh/fonts/Denim-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Design tokens
   The only file that reads theme.* values. Editable tokens come from the
   theme fields.json; the hardcoded ones below are Figma values with no
   theme field yet. Every theme.* path here must exist in fields.json:
   an undefined path renders as an empty string and the declaration is
   silently dropped.
   ========================================================================== */

:root {
  /* =========================================================================
     PRIMITIVE COLORS - Lilac
     ========================================================================= */
  --color-lilac-10: #F9F2FF;
  --color-lilac-15: #F7EEFF;
  --color-lilac-20: #F2E5FF;
  --color-lilac-30: #ECD8FF;
  --color-lilac-40: #E5CBFF;
  --color-lilac-50: #DFBEFF;
  --color-lilac-60: #D9B1FF;
  --color-lilac-70: #CA92FF;
  --color-lilac-80: #C977FF;
  --color-lilac-90: #BE7CFF;
  --color-lilac-100: #BF7DFF;
  /* Figma colour style "Lilac 140" (no theme field yet): the current page in the navbar */
  --color-lilac-140: #8b44cf;

  /* =========================================================================
     PRIMITIVE COLORS - Neutral
     ========================================================================= */
  --color-neutral-00: #FFFFFF;
  --color-neutral-05: #FDFCFD;
  --color-neutral-10: #FBF7FC;
  --color-neutral-20: #EEE8F1;
  --color-neutral-30: #E7E0EB;
  --color-neutral-40: #E0D7E5;
  --color-neutral-50: #D9CEDF;
  --color-neutral-60: #C8BCD1;
  --color-neutral-70: #BCAFC7;
  --color-neutral-80: #B0A2BD;
  --color-neutral-90: #BCA8C7;
  --color-neutral-100: #B59FC1;

  /* =========================================================================
     PRIMITIVE COLORS - Ink
     ========================================================================= */
  --color-ink-10: #E6EAED;
  --color-ink-20: #CCD5DB;
  --color-ink-30: #B3BFC8;
  --color-ink-40: #99AAB6;
  --color-ink-50: #8094A3;
  --color-ink-60: #667E90;
  --color-ink-70: #4D697E;
  --color-ink-80: #33536B;
  --color-ink-90: #193D58;
  --color-ink-100: #002846;

  /* =========================================================================
     PRIMITIVE COLORS - Grey
     ========================================================================= */
  --color-grey-50: #F8FAFC;
  --color-grey-60: #F1F5F9;
  --color-grey-70: #E2E8F0;
  --color-grey-80: #CBD5E1;
  --color-grey-90: #94A3B8;
  --color-grey-100: #64748B;

  /* =========================================================================
     PRIMITIVE COLORS - Azure
     ========================================================================= */
  --color-azure-14: #002846;
  --color-azure-18: #003A5C;
  --color-azure-47: #64748B;
  --color-azure-65: #94A3B8;

  /* =========================================================================
     PRIMITIVE COLORS - Teal
     ========================================================================= */
  --color-teal-80: #00809C;
  --color-teal-100: #005466;

  /* =========================================================================
     PRIMITIVE COLORS - Cyan
     ========================================================================= */
  --color-cyan-10: #E1FCFE;
  --color-cyan-30: #BAF8FC;
  --color-cyan-80: #3DF2FF;
  --color-cyan-100: #00E4F5;

  /* =========================================================================
     PRIMITIVE COLORS - Blue
     ========================================================================= */
  --color-blue-30: #DBEAFE;
  --color-blue-80: #3B82F6;

  /* =========================================================================
     PRIMITIVE COLORS - Purple
     ========================================================================= */
  --color-purple-30: #EDE9FE;
  --color-purple-80: #8B5CF6;

  /* =========================================================================
     PRIMITIVE COLORS - Pink
     ========================================================================= */
  --color-pink-30: #FCE7F3;
  --color-pink-80: #FF44D6;

  /* =========================================================================
     PRIMITIVE COLORS - Red
     ========================================================================= */
  --color-red-30: #FFDBD9;
  --color-red-80: #F30066;
  --color-red-90: #E5005C;
  --color-red-100: #D9005B;

  /* =========================================================================
     PRIMITIVE COLORS - Orange
     ========================================================================= */
  --color-orange-30: #FFEDD5;
  --color-orange-60: #FFC8A1;
  --color-orange-80: #FF6D3D;
  --color-orange-100: #FF5E29;

  /* =========================================================================
     PRIMITIVE COLORS - Green
     ========================================================================= */
  --color-green-10: #DCFCE7;
  --color-green-30: #BBF7D0;
  --color-green-60: #4ADE80;
  --color-green-80: #86EFB1;

  /* =========================================================================
     PRIMITIVE COLORS - Black
     ========================================================================= */
  --color-black-100: #000000;

  /* =========================================================================
     TYPOGRAPHY - Font Family
     ========================================================================= */
  --font-family-body: Denim, system-ui, -apple-system, sans-serif;
  --font-family-heading: Denim, system-ui, -apple-system, sans-serif;

  /* =========================================================================
     TYPOGRAPHY - Font Sizes
     ========================================================================= */
  --font-size-4xs: 9px;
  --font-size-3xs: 10px;
  --font-size-2xs: 14px;
  --font-size-xs: 12px;
  --font-size-s: 16px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 22px;
  --font-size-2xl: 24px;
  --font-size-3xl: 28px;
  --font-size-4xl: 32px;
  --font-size-5xl: 40px;
  --font-size-6xl: 48px;
  --font-size-7xl: 56px;
  --font-size-8xl: 64px;

  /* Header font sizes (Figma design system) */
  --font-size-h1: 64px;
  --font-size-h2: 56px;
  --font-size-h3: 48px;
  --font-size-h4: 28px;

  /* Body font sizes (Figma design system) */
  --font-size-body-l: 22px;
  --font-size-body-m: 20px;

  /* =========================================================================
     TYPOGRAPHY - Font Weights
     ========================================================================= */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* =========================================================================
     TYPOGRAPHY - Line Heights
     ========================================================================= */
  --line-height-4xs: 12px;
  --line-height-3xs: 14px;
  --line-height-2xs: 16px;
  --line-height-xs: 21px;
  --line-height-sm: 21px;
  --line-height-md: 23px;
  --line-height-lg: 28px;
  --line-height-xl: 32px;
  --line-height-tight: 1;
  --line-height-normal: 1.2;
  --line-height-relaxed: 1.4;

  /* Additional line heights (Figma design system) */
  --line-height-none: 1;
  --line-height-snug: 1.2;

  /* =========================================================================
     TYPOGRAPHY - Letter Spacing
     ========================================================================= */
  --letter-spacing-tight: -2px;
  --letter-spacing-tighter: -1.28px;
  --letter-spacing-normal: 0px;
  --letter-spacing-wide: 0.5px;
  --letter-spacing-wider: 0.8px;
  --letter-spacing-widest: 0.96px;

  /* Header letter spacing (Figma design system) */
  --letter-spacing-h1: -1.28px;
  --letter-spacing-h2: -1.12px;
  --letter-spacing-h3: -0.96px;
  --letter-spacing-h4: -0.28px;

  /* Specialty letter spacing */
  --letter-spacing-eyebrow: 0.8px;
  --letter-spacing-button: 0.96px;

  /* =========================================================================
     SPACING SCALE
     ========================================================================= */
  --space-none: 0px;
  --space-5xs: 2px;
  --space-4xs: 4px;
  --space-3xs: 6px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-sm: 24px;
  --space-md: 32px;
  --space-lg: 40px;
  --space-xl: 48px;
  --space-2xl: 56px;
  --space-3xl: 64px;
  --space-4xl: 72px;
  --space-5xl: 80px;

  /* =========================================================================
     BORDER RADIUS
     ========================================================================= */
  --radius-minimal: 2px;
  --radius-buttons: 4px;
  --radius-cards: 8px;
  --radius-panel: 12px;
  --radius-large: 16px;
  --radius-xl: 24px;
  --radius-pill: 100px;
  --radius-full: 360px;

  /* =========================================================================
     SEMANTIC: TEXT COLORS
     ========================================================================= */
  --text-primary: #002846;
  --text-secondary: #33536B;
  --text-tertiary: #667E90;
  --text-disabled: #8093A2;
  --text-inverted: #FFFFFF;
  --text-muted: #B3BFC8;
  --text-link: #00809C;
  --text-link-hover: #005466;

  /* =========================================================================
     SEMANTIC: BACKGROUND COLORS
     ========================================================================= */
  --bg-primary: #F6F2F8;
  --bg-primary-hover: #E1FCFE;
  --bg-secondary: #F7EEFF;
  --bg-secondary-hover: #F2E5FF;
  --bg-dark: #002846;
  --bg-dark-secondary: #003A5C;
  --bg-card-primary: #FFFFFF;
  --bg-card-secondary: #F9F2FF;
  --bg-text-field: #FBF7FC;

  /* =========================================================================
     SEMANTIC: BORDER COLORS
     ========================================================================= */
  --border-primary: #E7E0EB;
  --border-secondary: #D4C9DB;
  --border-dark: #4D697E;
  --border-secondary-button: #8093A2;

  /* =========================================================================
     SEMANTIC: ICON COLORS
     ========================================================================= */
  --icon-primary: #002846;
  --icon-secondary: #8093A2;
  --icon-tertiary: #E0D7E5;
  --icon-inverted: #FFFFFF;
  --icon-error: #D9005B;
  --icon-disabled: #8093A2;
  --icon-background: #E5CBFF;

  /* =========================================================================
     SEMANTIC: BUTTON COLORS
     ========================================================================= */
  --btn-primary: #00E4F5;
  --btn-primary-hover: #3DF2FF;
  --btn-primary-text: #002846;

  --btn-secondary: #002846;
  --btn-secondary-hover: #E1FCFE;
  --btn-secondary-text: #002846;

  --btn-ghost-border: #667E90;
  --btn-ghost-text: #FFFFFF;

  --btn-disabled: #E6EAED;
  --btn-disabled-text: #8093A2;

  --btn-control-tonal: #E1FCFE;
  --btn-control-tonal-hover: #BAF8FC;

  --btn-destructive: #D9005B;
  --btn-destructive-hover: #F30066;
  --btn-destructive-text: #FFFFFF;

  /* =========================================================================
     SEMI-TRANSPARENT WHITES (for dark schemes)
     Figma color/white/ 90%, 70%, 10%, 8%. 15% has no Figma variable.
     ========================================================================= */
  --color-white-90: rgba(255, 255, 255, 0.9);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-8: rgba(255, 255, 255, 0.08);

  /* =========================================================================
     GRADIENTS
     ========================================================================= */
  /* Accent gradient: gradient text in headlines, accent bars and step connectors */
  --gradient-accent: linear-gradient(90deg, #c977ff 0%, #ff44d6 54%, #ff5e29 100%);
  /* Warm two-stop variant */
  --gradient-accent-warm: linear-gradient(90deg, #ff44d6 0%, #ff6d3d 100%);

  /* =========================================================================
     FEEDBACK COLORS (derived from primitives)
     ========================================================================= */
  --feedback-success: var(--color-green-80);
  --feedback-success-bg: var(--color-green-10);
  --feedback-warning: var(--color-orange-80);
  --feedback-warning-bg: var(--color-orange-30);
  --feedback-error: var(--color-red-100);
  --feedback-error-bg: var(--color-red-30);
  --feedback-info: var(--color-blue-80);
  --feedback-info-bg: var(--color-blue-30);

  /* =========================================================================
     BRAND COLORS (derived from primitives)
     ========================================================================= */
  --brand-primary: var(--color-lilac-80);
  --brand-primary-light: var(--color-lilac-30);
  --brand-accent: var(--color-cyan-100);
  --brand-accent-light: var(--color-cyan-30);

  /* =========================================================================
     MOTION
     Strong ease-out for entrances and press feedback. Durations stay in
     each rule (UI motion under 300ms).
     ========================================================================= */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* =========================================================================
     LAYOUT
     Breakpoints are not tokens: custom properties don't work inside
     @media queries. Use 1023px (tablet) and 767px (mobile) literally.
     ========================================================================= */
  --layout-content-max-width: 1192px;

  /* Fixed site header (navbar module): 4px accent strip + bar. Used for the
     page offset and anchor scroll margin. */
  --header-height: 86px;
}

@media (max-width: 1199px) {
  :root {
    --header-height: 84px;
  }
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

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

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

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

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

body {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

legend {
  padding: 0;
}

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

progress {
  vertical-align: baseline;
}

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

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

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

summary {
  display: list-item;
}
*, *:before, *:after {
  box-sizing: border-box;
}

/*
 * Note: overflow-x: hidden on html breaks sticky positioning.
 * We use clip instead which hides overflow but doesn't create a new
 * scroll container, allowing sticky to work properly.
 */
html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}

img {
  max-width: 100%;
  height: auto;
}
/* ==========================================================================
   Colour schemes and section backgrounds

   Modules and macro output read colour only from these scheme properties:
     --fg              primary text
     --fg-secondary    body copy under a heading (card and benefit descriptions)
     --fg-muted        de-emphasised text (hints, "coming soon" labels)
     --surface         card / panel background
     --border          hairlines and dividers
     --eyebrow-bg      eyebrow pill background
     --eyebrow-fg      eyebrow pill text
     --icon-bg         themed-icon tile background (colour or gradient)
     --icon-fg         themed-icon glyph fill (colour or gradient)
     --accent          links and accent text
     --ghost-border    ghost button border
     --ghost-fg        ghost button text
     --ghost-hover-bg  ghost button hover fill
     --tint            tinted panel and selected-tab fill (journey-tabs)
     --tint-neutral    neutral panel fill, no lilac (comparison-accordion highlight, journey-tabs panel)
     --marker          step numbers and small accent labels
     --figure-fill     big stat figures, as a background clipped to the text (stat-band),
                       and the scroll-timeline line and markers:
                       secondary ink on light, lilac 50 on dark

   Scheme flows by cascade. A section preset sets a .bg-* class on its
   dnd_section; a module can override with .theme-light / .theme-dark on its
   root (from its "theme" field). Each scheme selector also sets `color`,
   because inherited `color` is computed once on the ancestor and does not
   re-read --fg further down.

   Section backgrounds are a closed set: each named Figma background is
   defined once here and reused by name. Values carried over from the old
   theme's section CSS.
   ========================================================================== */

/* Light scheme (default) */
:root,
.theme-light,
.bg-white,
.bg-lilac,
.bg-lilac-gradient,
.bg-lilac-glow,
.bg-lilac-dawn,
.bg-lilac-header,
.bg-lilac-light,
.bg-neutral,
.bg-brand-gradient,
.bg-primary-fill,
.bg-primary-surface {
  --fg: var(--text-primary);
  --fg-secondary: var(--text-secondary);
  --fg-muted: var(--color-ink-30);
  --surface: var(--bg-card-primary);
  --border: var(--border-primary);
  --eyebrow-bg: var(--color-lilac-20);
  --eyebrow-fg: var(--text-primary);
  /* Figma "Feature icon": pale lilac tile, ink-gradient glyph */
  --icon-bg: linear-gradient(199.12deg, #faebff 11.23%, #fbf7ff 88.77%);
  --icon-fg: linear-gradient(81.19deg, #124661 0%, #063558 37.03%, #063558 54.32%, #3f4c85 99.96%);
  --accent: var(--text-link);
  --ghost-border: var(--border-secondary-button);
  --ghost-fg: var(--text-secondary);
  --ghost-hover-bg: rgba(0, 40, 70, 0.05);
  --tint: var(--color-lilac-15);
  --tint-neutral: var(--color-neutral-10);
  --marker: var(--color-lilac-140);
  --figure-fill: var(--text-secondary);
}

/* Dark scheme */
.theme-dark,
.bg-ink,
.bg-ink-gradient,
.bg-teal-gradient,
.bg-hero-gradient,
.bg-accent-gradient {
  --fg: var(--text-inverted);
  --fg-secondary: var(--color-white-90);
  --fg-muted: var(--color-white-70);
  --surface: var(--color-white-10);
  --border: rgba(255, 255, 255, 0.2);
  --eyebrow-bg: var(--color-white-10);
  --eyebrow-fg: var(--color-neutral-00);
  --icon-bg: var(--color-white-10);
  --icon-fg: var(--color-neutral-00);
  --accent: var(--color-cyan-100);
  --ghost-border: var(--btn-ghost-border);
  --ghost-fg: var(--fg);
  --ghost-hover-bg: var(--color-white-10);
  --tint: var(--color-white-8);
  --tint-neutral: var(--color-white-8);
  --marker: var(--color-lilac-70);
  --figure-fill: var(--color-lilac-50);
}

:root,
.theme-light,
.theme-dark,
.bg-white,
.bg-lilac,
.bg-lilac-gradient,
.bg-lilac-glow,
.bg-lilac-dawn,
.bg-lilac-header,
.bg-lilac-light,
.bg-neutral,
.bg-brand-gradient,
.bg-primary-fill,
.bg-primary-surface,
.bg-ink,
.bg-ink-gradient,
.bg-teal-gradient,
.bg-hero-gradient,
.bg-accent-gradient {
  color: var(--fg);
}

/* --------------------------------------------------------------------------
   Section backgrounds
   -------------------------------------------------------------------------- */

.bg-white {
  background: var(--color-neutral-00);
}

/* Most common light tint: benefits, FAQ, statement-light, blog header */
.bg-lilac {
  background: var(--color-lilac-15);
}

/* Lilac gradient: pale lilac fading down (Figma "services alt" 1142:212852) */
.bg-lilac-gradient {
  background: linear-gradient(191.42deg, #faebff 11.23%, #fbf7ff 88.77%);
}

/* Lilac glow: stronger lilac top-right, fading to near white (Figma "audience types" 1121:165941) */
.bg-lilac-glow {
  background: linear-gradient(202.64deg, rgba(247, 223, 255, 0.9) 3.95%, rgba(248, 242, 255, 0.5) 88.76%), #ffffff;
}

/* Lilac dawn: white top half, lilac rising from the bottom (Figma hero "Header" 1168:89217).
   Figma's stops (3.69%, 56.04%) are of a 717px frame that includes the navbar;
   rescaled to the 631px hero below it. */
.bg-lilac-dawn {
  background: linear-gradient(-10.66deg, #f7dfff 4.19%, #ffffff 63.68%);
}

/* Lilac header: white top-left, lilac rising from the bottom right (Figma
   style "Web header grad", resources hero 3112:46548 and the blog post
   header 3112:48461). Same colours as lilac dawn, but Figma's stops here are
   of the 300px header itself; the post header's taller frame gives -7.68deg
   in Figma, close enough to share one class. */
.bg-lilac-header {
  background: linear-gradient(-4.51deg, #f7dfff 3.69%, #ffffff 56.04%);
}

/* Lilac light: lilac 10 to lilac 20, left to right (Figma style "Lilac grad light", Benefits 3003:35198) */
.bg-lilac-light {
  background: linear-gradient(90deg, var(--color-lilac-10) 0%, var(--color-lilac-20) 100%);
}

/* Pale neutral: client logo bars. Figma calls this colour/neutral/05
   (#FBF7FC, Navigation 1121:165889); in the theme that value is Neutral 10,
   and the theme's Neutral 05 is the near-white #FDFCFD. */
.bg-neutral {
  background: var(--color-neutral-10);
}

/* Primary surface: the theme's background/primary (#F6F2F8), Figma FAQ
   "Common questions" (3050:185685) */
.bg-primary-surface {
  background: var(--bg-primary);
}

/* Flat ink: heroes */
.bg-ink {
  background: var(--color-ink-100);
}

/* Ink gradient: benefits-dark, benefits-steps-dark, timeline.
   The old theme used angles from 70deg to 73.87deg for the same design;
   normalised to 71.67deg. 3-up cards used a near-identical 71deg variant
   (ink stop at 49%, end rgb(1, 65, 93)), folded in here. */
.bg-ink-gradient {
  background: linear-gradient(
    71.67deg,
    rgb(29, 43, 87) 0%,
    var(--color-ink-100) 37.03%,
    var(--color-ink-100) 65.85%,
    rgb(1, 58, 87) 99.96%
  );
}

/* Teal gradient: statement-dark sections */
.bg-teal-gradient {
  background: linear-gradient(
    64deg,
    rgb(18, 70, 97) 0%,
    rgb(6, 53, 88) 37%,
    rgb(6, 53, 88) 54%,
    rgb(63, 76, 133) 100%
  );
}

/* Hero gradient: dark navy to teal (old 3-up cards / bleed heroes) */
.bg-hero-gradient {
  background: linear-gradient(69deg, rgb(23, 79, 105) 0%, rgb(53, 62, 103) 100%);
}

/* Brand gradient: CTA banner, app-store banner, logo scroller. Dark text.
   The old theme had three stop variants for this bar; this is the CTA banner's. */
.bg-brand-gradient {
  background: linear-gradient(90deg, #c992ff 40.865%, #ff44d6 81.547%, #ff6d3d 99.37%);
}

/* Primary fill: Figma style "Gradient/Primary fill" (app badges bar
   3045:173923). Like the brand gradient, but the lilac holds to 52%. */
.bg-primary-fill {
  background: linear-gradient(90deg, #be7cff 51.841%, #ff44d6 81.547%, #ff6d3d 99.37%);
}

/* Accent gradient with light text: backers logo bar */
.bg-accent-gradient {
  background: var(--gradient-accent);
}
/* ==========================================================================
   HubSpot drag-and-drop normalisation
   The ONLY file that targets HubSpot's DnD wrappers (.dnd-section,
   .dnd-column, .dnd-row, .dnd-module, .row-fluid, .span*, .hs_cos_wrapper).
   Everywhere else, select from a module's own root class inward.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12-column grid for DnD columns
   Carried over from HubSpot's boilerplate layout; editors can still split
   rows into columns in the page editor.
   -------------------------------------------------------------------------- */


:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}

/* --------------------------------------------------------------------------
   Section content container
   dnd_section sets max_width=1192 with zero horizontal padding; the
   responsive gutters come from --section-padding-inline here, following the
   Figma breakpoint frames (Header 1121:161477 / 161556 / 161634 / 161714):
   ≥1440: 0 (the 1192px cap centres the row, 124px each side at 1440)
   1024–1439: 64px at 1024 rising linearly to 124px at 1440
   768–1023: 48px at 768 rising linearly to 64px at 1024
   ≤767: 24px
   The linear ramps keep the content width continuous across breakpoints
   (896px at 1024, 672px at 768).

   The row is content-box, so the 1192px cap (ours, and the !important one
   HubSpot generates from max_width) applies to the content and the gutters
   sit outside it: content is min(1192px, viewport - 2 x gutter) and grows
   smoothly up to 1440. With border-box it was capped at 1192 - 248 = 944px
   from ~1192px to 1439px, then jumped to 1192px at 1440.
   -------------------------------------------------------------------------- */
.dnd-section > .row-fluid,
.dnd-section > .row-fluid-wrapper > .row-fluid {
  box-sizing: content-box;
  width: auto; /* the 100% from .row-fluid plus padding would overflow */
  max-width: var(--layout-content-max-width, 1192px);
  margin-inline: auto;
  padding-inline: var(--section-padding-inline, 0);
}

.dnd-section .dnd-column {
  padding: 0;
}

@media (max-width: 1439px) {
  .dnd-section > .row-fluid,
  .dnd-section > .row-fluid-wrapper > .row-fluid {
    --section-padding-inline: calc(64px + (100vw - 1024px) * 0.1442);
  }
}

@media (max-width: 1023px) {
  .dnd-section > .row-fluid,
  .dnd-section > .row-fluid-wrapper > .row-fluid {
    --section-padding-inline: calc(48px + (100vw - 768px) * 0.0625);
  }
}

@media (max-width: 767px) {
  .dnd-section > .row-fluid,
  .dnd-section > .row-fluid-wrapper > .row-fluid {
    --section-padding-inline: 24px;
  }
}

/* --------------------------------------------------------------------------
   Full-bleed modules
   The rules above cap every section's row at 1192px with gutters, even on a
   full_width=true section. Modules that own their full-width layout are
   listed here so their row spans the viewport.
   -------------------------------------------------------------------------- */
.dnd-section:has(.hero-video) > .row-fluid,
.dnd-section:has(.hero-video) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.hero-split) > .row-fluid,
.dnd-section:has(.hero-split) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.hero-collage) > .row-fluid,
.dnd-section:has(.hero-collage) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.hero-layers) > .row-fluid,
.dnd-section:has(.hero-layers) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.benefits-columns) > .row-fluid,
.dnd-section:has(.benefits-columns) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.cta-banner) > .row-fluid,
.dnd-section:has(.cta-banner) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.statement--left) > .row-fluid,
.dnd-section:has(.statement--left) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.meeting-split) > .row-fluid,
.dnd-section:has(.meeting-split) > .row-fluid-wrapper > .row-fluid,
.dnd-section:has(.page-header) > .row-fluid,
.dnd-section:has(.page-header) > .row-fluid-wrapper > .row-fluid {
  max-width: none;
  padding-inline: 0;
}

/* --------------------------------------------------------------------------
   Sections that crop decorative art at their edges
   form-split's illustration box overflows the module into the section
   padding and past its bottom edge (transparent margin of the image); the
   section cuts it off.
   -------------------------------------------------------------------------- */
.dnd-section:has(.form-split__art) {
  overflow: clip;
}

/* --------------------------------------------------------------------------
   Row spacing between modules stacked in one section
   Testimonials over a logo bar (Figma 3003:34387): 56px to the strip plus
   the strip's own 37px of padding. On the logo row, so deleting it leaves
   no gap behind.
   -------------------------------------------------------------------------- */
.dnd-row:has(.testimonials) + .dnd-row:has(.logo-bar) {
  margin-top: 93px;
}

/* Statement over a logo bar (Figma 3112:86829, statement-backers): 46px
   from the body to the logos */
.dnd-row:has(.statement) + .dnd-row:has(.logo-bar) {
  margin-top: 46px;
}

/* Statement intro over numbered columns (stats, with/without tables), and a
   statement note or button row after them; also a form split over numbered
   columns (the V4 health check): 48px (no Figma frame yet) */
.dnd-row:has(.statement) + .dnd-row:has(.numbered-columns),
.dnd-row:has(.numbered-columns) + .dnd-row:has(.statement),
.dnd-row:has(.form-split) + .dnd-row:has(.numbered-columns) {
  margin-top: var(--space-xl, 48px);
}

@media (max-width: 767px) {
  .dnd-row:has(.testimonials) + .dnd-row:has(.logo-bar) {
    margin-top: 56px;
  }

  .dnd-row:has(.statement) + .dnd-row:has(.logo-bar) {
    margin-top: 40px;
  }

  .dnd-row:has(.statement) + .dnd-row:has(.numbered-columns),
  .dnd-row:has(.numbered-columns) + .dnd-row:has(.statement),
  .dnd-row:has(.form-split) + .dnd-row:has(.numbered-columns) {
    margin-top: var(--space-lg, 40px);
  }
}

/* --------------------------------------------------------------------------
   Anchor links
   HubSpot anchor targets (<a data-hs-anchor="true">) land near the middle of
   the viewport rather than under the sticky header.
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Module roots with an Anchor ID field value (ui.anchor_attrs) land just
   below the fixed header. */
[data-anchor] {
  scroll-margin-top: calc(var(--header-height) + 24px);
}

a[data-hs-anchor="true"] {
  scroll-margin-top: calc(30vh - var(--header-height, 80px));
}
/* ==========================================================================
   Typography
   Base elements, then the .text-* classes the macros emit (Figma
   Website/Header/* and Website/Body/*). Colour comes from the scheme
   (--fg), never from these classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base elements
   body sets the brand font so plain <p>, <li> and richtext output inherit it.
   (The old theme set font-family only through dead theme-field references,
   so a bare <p> fell back to the browser default.)
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-family-body, 'Denim', sans-serif);
  background-color: var(--color-neutral-00);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Stops long words forcing horizontal scroll on mobile */
  overflow-wrap: break-word;
}

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

p {
  margin: 0 0 1.4rem;
}

a {
  color: var(--accent);
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
  font-weight: var(--font-weight-regular, 400);
}

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

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

blockquote {
  border-left: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 0.7rem;
}

hr {
  border: none;
  border-bottom: 1px solid var(--border);
}

pre {
  overflow: auto;
}

/* --------------------------------------------------------------------------
   Headings (Figma Website/Header/*)
   -------------------------------------------------------------------------- */
.text-h1 {
  font-size: var(--font-size-h1, 64px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-none, 1);
  letter-spacing: var(--letter-spacing-h1, -1.28px);
}

.text-h2 {
  font-size: var(--font-size-h2, 56px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-none, 1);
  letter-spacing: var(--letter-spacing-h2, -1.12px);
}

.text-h3 {
  font-size: var(--font-size-h3, 48px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-none, 1);
  letter-spacing: var(--letter-spacing-h3, -0.96px);
}

.text-h3-5 {
  font-size: 38px;
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-none, 1);
  letter-spacing: -0.76px;
}

.text-h4 {
  font-size: var(--font-size-h4, 28px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-none, 1);
  letter-spacing: var(--letter-spacing-h4, -0.28px);
}

.text-h5 {
  font-size: var(--font-size-xl, 24px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-snug, 1.2);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Body (Figma Website/Body/*)
   -------------------------------------------------------------------------- */
.text-body-xl {
  font-size: var(--font-size-xl, 24px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-normal, 1.25);
  letter-spacing: 0;
}

.text-body-l {
  font-size: var(--font-size-body-l, 22px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-snug, 1.2);
  letter-spacing: 0;
}

.text-body-m {
  font-size: var(--font-size-body-m, 20px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-snug, 1.2);
  letter-spacing: 0;
}

.text-body-s {
  font-size: var(--font-size-md, 18px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-normal, 1.25);
  letter-spacing: 0;
}

.text-body-xs {
  font-size: var(--font-size-s, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-normal, 1.25);
  letter-spacing: 0;
}

.text-body-xxs {
  font-size: var(--font-size-2xs, 14px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-snug, 1.2);
  letter-spacing: 0;
}

.text-body-xxxs {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-regular, 400);
  line-height: var(--line-height-snug, 1.2);
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Specialty
   -------------------------------------------------------------------------- */
.text-eyebrow {
  font-size: var(--font-size-2xs, 14px);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: var(--letter-spacing-eyebrow, 0.8px);
  text-transform: uppercase;
}

.text-cta-sm {
  font-size: 10px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.text-label,
.text-button {
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 14px;
  letter-spacing: var(--letter-spacing-button, 0.96px);
  text-transform: uppercase;
}

.text-nav {
  font-size: var(--font-size-s, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 1.3;
  letter-spacing: 0;
}

/* --------------------------------------------------------------------------
   Gradient text
   Editors wrap words in <span class="gradient-text"> in richtext source view.
   -------------------------------------------------------------------------- */
.gradient-text,
.gradient-text--warm {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text--warm {
  background: var(--gradient-accent-warm);
  -webkit-background-clip: text;
  background-clip: text;
}

/* --------------------------------------------------------------------------
   Modifiers
   -------------------------------------------------------------------------- */
.text-muted {
  color: var(--fg-muted);
}

.font-regular {
  font-weight: var(--font-weight-regular, 400);
}

.font-medium {
  font-weight: var(--font-weight-medium, 500);
}

.font-semibold {
  font-weight: var(--font-weight-semibold, 600);
}

/* --------------------------------------------------------------------------
   Mobile defaults
   These shrink shared classes everywhere. A module whose text must stay
   larger adds its own mobile override, scoped to its own class.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .text-h1 {
    font-size: var(--font-size-h2, 56px);
    letter-spacing: var(--letter-spacing-h2, -1.12px);
  }

  .text-h3 {
    font-size: 40px;
    letter-spacing: -0.8px;
  }

  .text-h5 {
    font-size: var(--font-size-body-m, 20px);
  }

  .text-body-m {
    font-size: var(--font-size-s, 16px);
  }
}
/* ==========================================================================
   Buttons
   Structure: .button + variant + size, rendered by ui.cta().
   Variants: --primary --secondary --tertiary --tonal --ghost --destructive
   Sizes:    --large (40px, default from the macro) · --default (28px)
   ========================================================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4xs, 4px);
  border: none;
  border-radius: var(--radius-buttons, 4px);
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--font-weight-medium, 500);
  line-height: 14px;
  letter-spacing: var(--letter-spacing-button, 0.96px);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 160ms var(--ease-out);
}

.button__label {
  display: inline-block;
}

.button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: currentColor;
  transition: transform 0.2s ease;
}

.button__icon svg {
  width: 100%;
  height: 100%;
}

/* Press feedback
   -------------------------------------------------------------------------- */
.button:active {
  transform: scale(0.97);
}

/* Sizes
   -------------------------------------------------------------------------- */
.button--large {
  height: 40px;
  padding: var(--space-xs, 12px) var(--space-s, 16px);
}

.button--default {
  height: 28px;
  padding: var(--space-4xs, 4px) var(--space-xs, 12px);
}

/* Primary: cyan, dark text
   -------------------------------------------------------------------------- */
.button--primary {
  background-color: var(--btn-primary, #00e4f5);
  color: var(--color-ink-100, #002846);
}

.button--primary:hover,
.button--primary:focus {
  background-color: var(--btn-primary-hover, #3df2ff);
}

.button--primary:active {
  background-color: var(--color-cyan-80, #3df2ff);
}

/* Secondary: white, dark text
   -------------------------------------------------------------------------- */
.button--secondary {
  background-color: var(--color-neutral-00, #ffffff);
  color: var(--text-primary, #002846);
}

.button--secondary:hover,
.button--secondary:focus {
  background-color: var(--color-neutral-05, #f5f5f5);
}

.button--secondary:active {
  background-color: var(--color-neutral-10, #e6eaed);
}

/* Tertiary: link-styled
   -------------------------------------------------------------------------- */
.button--tertiary {
  background-color: transparent;
  color: var(--text-link, #00809c);
}

.button--tertiary:hover,
.button--tertiary:focus {
  color: var(--text-link-hover, #005466);
}

/* Tonal: light cyan, dark text
   -------------------------------------------------------------------------- */
.button--tonal {
  background-color: var(--btn-control-tonal, #e1fcfe);
  color: var(--text-primary, #002846);
}

.button--tonal:hover,
.button--tonal:focus {
  background-color: var(--btn-control-tonal-hover, #baf8fc);
}

/* Ghost: transparent with border; follows the colour scheme, so it works on
   light and dark backgrounds (the old theme's ghost was white-only)
   -------------------------------------------------------------------------- */
.button--ghost {
  background-color: transparent;
  color: var(--ghost-fg);
  border: 1px solid var(--ghost-border);
}

.button--ghost:hover,
.button--ghost:focus {
  background-color: var(--ghost-hover-bg);
  border-color: var(--fg);
}

/* Destructive
   -------------------------------------------------------------------------- */
.button--destructive {
  background-color: var(--btn-destructive, #d9005b);
  color: var(--btn-destructive-text, #ffffff);
}

.button--destructive:hover,
.button--destructive:focus {
  background-color: var(--btn-destructive-hover, #f30066);
}

/* Disabled
   -------------------------------------------------------------------------- */
.button:disabled,
.button--disabled {
  background-color: var(--btn-disabled, #e6eaed);
  color: var(--btn-disabled-text, #8093a2);
  border: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Icon hover: nudge in the arrow's direction
   -------------------------------------------------------------------------- */
.button:hover .button__icon--right {
  transform: translateX(4px);
}

.button:hover .button__icon--down {
  transform: translateY(4px);
}

.button:hover .button__icon--left {
  transform: translateX(-4px);
}

.button:hover .button__icon--up {
  transform: translateY(-4px);
}

/* Reset a <button> to look like plain content
   -------------------------------------------------------------------------- */
.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* ==========================================================================
   Macro components
   Styles for markup rendered by macros/components.html. Colour comes from
   the scheme properties in _schemes.css, so these work on light and dark
   backgrounds without per-section overrides.
   ========================================================================== */

/* Eyebrow: small pill label above a headline
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 6px 8px;
  border-radius: var(--radius-pill, 100px);
  background-color: var(--eyebrow-bg);
  color: var(--eyebrow-fg);
}

/* Eyebrow with a badge (ui.eyebrow's badge group, Figma 3175:104040): the
   badge (3192:27535) is a pill with no fill, 6px after the eyebrow, inside
   a 1px angular-gradient stroke: lilac 40, pink #FF44D6 at the right edge,
   lilac 40 again. Figma's stops (25.5%, 61%, 100%) are angles in the
   stretched 93 x 22 box; the stops below are those mapped to on-screen
   angles, with intermediates for its non-linear sweep. A masked
   pseudo-element draws the ring, so the pill stays transparent */
.eyebrow-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.eyebrow--outline {
  position: relative;
  background-color: transparent;
}

.eyebrow--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(
    from 225deg,
    #e5cbff 0%,
    #e5cbff 15.2%,
    #eca7f4 18.6%,
    #f381e8 32.8%,
    #f962df 55.4%,
    #ff44d6 61%,
    #f963df 63.8%,
    #f286ea 66.6%,
    #eca8f4 72.5%,
    #e5cbff 100%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

/* Headline / subline / description
   -------------------------------------------------------------------------- */
.headline,
.subline,
.description {
  margin: 0;
  color: var(--fg);
}

/* Headline text pasted into the richtext field can arrive wrapped in <p>
   (one per line); without this each takes the global 1.4rem paragraph
   margin, adding 22.4px under the headline */
.headline p {
  margin: 0;
}

/* Richtext paragraphs inherit the description's .text-body-* size */
.description p {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0 0 1em;
}

.description p:last-child {
  margin-bottom: 0;
}

/* Checklist: editors add class="checklist" to a <ul> in richtext source view;
   a module can pass the description--checklist class to ui.description to
   make every <ul> in it a checklist */
.description ul.checklist,
.description--checklist ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs, 12px);
  margin: 0 0 1em;
  padding-left: 0;
  list-style: none;
}

/* The tick is positioned, not a flex item: as flex rows, a <strong> or <a>
   inside an item became a column of its own */
.description ul.checklist li,
.description--checklist ul li {
  position: relative;
  padding-left: 32px;
}

.description ul.checklist li::before,
.description--checklist ul li::before {
  content: '';
  position: absolute;
  top: 1px;
  left: 0;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Crect width='24' height='24' rx='12' fill='%23CC97FF'/%3E%3Cmask id='m' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='18' height='18'%3E%3Crect width='18' height='18' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z' fill='%23002846'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 24px 24px;
  background-repeat: no-repeat;
}

/* CTA group: primary + secondary buttons
   -------------------------------------------------------------------------- */
.cta-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s, 16px);
}

@media (max-width: 767px) {
  .cta-group {
    gap: var(--space-2xs, 8px);
  }
}

/* Helper message in place of either button (Figma 3003:68677, 3003:69385):
   14px/1.2 italic, 16px after the button. Denim has no italic file, so the
   browser slants the regular weight. */
.cta-group__note {
  margin: 0;
  color: var(--fg);
  font-style: italic;
}

/* Themed icon
   mode "full": the uploaded image as-is, filling its parent.
   mode "path": the SVG used as a mask, so the glyph takes --icon-fg on an
   --icon-bg tile. The parent element sets the outer size.
   -------------------------------------------------------------------------- */
.themed-icon--full {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.themed-icon--path {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius-buttons, 4px);
  background: var(--icon-bg);
}

.themed-icon__glyph {
  display: block;
  background: var(--icon-fg);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* App store badges
   Each badge's height scales with its own --badge-scale (set inline by the
   macro from the item's scale field). A module can change the base height
   (--badge-height, --badge-height-mobile) and the gap (--badge-gap).
   -------------------------------------------------------------------------- */
.app-store-banners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--badge-gap, 24px);
}

.app-store-banners--left {
  justify-content: flex-start;
}

.app-store-banners__link {
  display: block;
  line-height: 0;
}

.app-store-banners__image {
  width: auto;
  height: calc(var(--badge-height, 48px) * var(--badge-scale, 1));
}

@media (max-width: 767px) {
  .app-store-banners__image {
    height: calc(var(--badge-height-mobile, 40px) * var(--badge-scale, 1));
  }
}

/* Arrow link: round primary-colour button with a 21px arrow (ui.arrow_link)
   Figma "Component 7" (3021:120182). The icon nudges 2px towards its
   direction on hover.
   -------------------------------------------------------------------------- */
.arrow-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--btn-primary, #00e4f5);
  color: var(--text-primary);
  transition: background-color 0.2s ease, transform 160ms var(--ease-out);
}

.arrow-link:hover,
.arrow-link:focus-visible {
  background-color: var(--btn-primary-hover, #3df2ff);
}

/* 0.95, not 0.97: on a 32px circle 3% doesn't read */
.arrow-link:active {
  transform: scale(0.95);
}

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

/* .button__icon is 16px everywhere else */
.arrow-link .button__icon {
  width: 21.33px;
  height: 21.33px;
  transition: transform 0.2s ease;
}

.arrow-link:hover .button__icon--down { transform: translateY(2px); }
.arrow-link:hover .button__icon--up { transform: translateY(-2px); }
.arrow-link:hover .button__icon--right { transform: translateX(2px); }
.arrow-link:hover .button__icon--left { transform: translateX(-2px); }

@media (prefers-reduced-motion: reduce) {
  .arrow-link .button__icon {
    transition: none;
  }
}

/* Video trigger: pill that opens the video lightbox
   Size from the Figma "Watch film" button as it renders in the 1440 hero.
   Its white 10% glass got lost on bright shots (Miro review), so the fill is
   the ink variant's teal gradient at 60% (Figma video-split "Button - Play
   video" 3045:171045). The stroke is a conic gradient on ::before, masked to
   a 1.7px ring: the full accent gradient (lilac, pink, orange) over about
   half the circumference, fading in and out; its angle turns continuously
   so the highlight orbits the pill.
   -------------------------------------------------------------------------- */
@property --video-trigger-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes video-trigger-orbit {
  to {
    --video-trigger-angle: 360deg;
  }
}

.video-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 47px;
  padding: 0 27px;
  border: 0;
  border-radius: var(--radius-pill, 100px);
  background-color: transparent;
  background-image: linear-gradient(
    42.22deg,
    rgba(18, 70, 97, 0.6) 0%,
    rgba(6, 53, 88, 0.6) 37.03%,
    rgba(6, 53, 88, 0.6) 54.32%,
    rgba(63, 76, 133, 0.6) 99.96%
  );
  -webkit-backdrop-filter: blur(5.24px);
  backdrop-filter: blur(5.24px);
  color: var(--color-neutral-00);
  font-family: inherit;
  font-size: 18.25px;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 21px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.video-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1.7px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--video-trigger-angle),
    rgba(201, 119, 255, 0) 0deg,
    #c977ff 40deg,
    #ff44d6 110deg,
    #ff5e29 180deg,
    rgba(255, 94, 41, 0) 220deg,
    rgba(255, 94, 41, 0) 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: video-trigger-orbit 4s linear infinite;
}

.video-trigger:hover {
  background-image: linear-gradient(
    42.22deg,
    rgba(18, 70, 97, 0.8) 0%,
    rgba(6, 53, 88, 0.8) 37.03%,
    rgba(6, 53, 88, 0.8) 54.32%,
    rgba(63, 76, 133, 0.8) 99.96%
  );
}

.video-trigger:focus-visible {
  outline: 2px solid var(--color-neutral-00);
  outline-offset: 3px;
}

.video-trigger__icon {
  display: inline-flex;
  flex-shrink: 0;
}

.video-trigger__icon svg {
  display: block;
}

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

@media (max-width: 767px) {
  .video-trigger {
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    font-size: 16px;
  }

  .video-trigger__icon svg {
    width: 25px;
    height: 25px;
  }
}

/* Ink variant: Figma video-split "Button - Play video" (3045:171045), a 55px
   pill of the teal gradient at 60% over a 2.87px blur, 34px icon, 20px text,
   no orbiting stroke. The gradient is a background-image, so hover lifts its
   alpha rather than setting background-color. */
.video-trigger--ink {
  gap: 10px;
  height: 55px;
  padding: 0 26px;
  background-color: transparent;
  background-image: linear-gradient(
    42.22deg,
    rgba(18, 70, 97, 0.6) 0%,
    rgba(6, 53, 88, 0.6) 37.03%,
    rgba(6, 53, 88, 0.6) 54.32%,
    rgba(63, 76, 133, 0.6) 99.96%
  );
  -webkit-backdrop-filter: blur(2.87px);
  backdrop-filter: blur(2.87px);
  font-size: 20px;
  line-height: 23px;
}

.video-trigger--ink::before {
  content: none;
}

.video-trigger--ink:hover {
  background-color: transparent;
  background-image: linear-gradient(
    42.22deg,
    rgba(18, 70, 97, 0.8) 0%,
    rgba(6, 53, 88, 0.8) 37.03%,
    rgba(6, 53, 88, 0.8) 54.32%,
    rgba(63, 76, 133, 0.8) 99.96%
  );
}

@media (max-width: 767px) {
  .video-trigger--ink {
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    font-size: 16px;
    line-height: 20px;
  }

  .video-trigger--ink .video-trigger__icon svg {
    width: 26px;
    height: 26px;
  }
}

/* Video lightbox: one <dialog> per page, built by js/video-lightbox.js
   Figma "Homepage V2" video player: ink-gradient overlay at 90% with 4px
   blur, a 16:9 player at 80% width (1152px at 1440), glass close button.
   The dialog fills the viewport, so a click on it (outside the player)
   is a backdrop click.
   -------------------------------------------------------------------------- */
.video-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.video-lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-lightbox::backdrop {
  background: linear-gradient(76.1deg, rgba(18, 70, 97, 0.9) 0%, rgba(6, 53, 88, 0.9) 37.03%, rgba(6, 53, 88, 0.9) 54.323%, rgba(63, 76, 133, 0.9) 99.96%);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* the curve is var(--ease-out), written out: ::backdrop doesn't inherit
     custom properties in older browsers */
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

.video-lightbox__frame {
  position: relative;
  width: min(80vw, 1152px, calc((100dvh - 48px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-cards, 8px);
  background-color: #313131;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out);
}

.video-lightbox__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #313131;
  object-fit: contain;
}

.video-lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: rgba(0, 40, 70, 0.4);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: var(--color-neutral-00);
  cursor: pointer;
}

.video-lightbox__close:focus-visible {
  outline: 2px solid var(--color-neutral-00);
  outline-offset: 2px;
}

/* Page-level state: locks page scroll while the lightbox is open */
html.video-lightbox-open {
  overflow: hidden;
}

/* Opening fades the backdrop in and scales the player up from 96%. Closing
   stays instant: cleanup() removes the player as the dialog closes, so a
   fade-out would show an empty frame. */
@starting-style {
  .video-lightbox[open]::backdrop {
    opacity: 0;
  }

  .video-lightbox[open] .video-lightbox__frame {
    opacity: 0;
    transform: scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-lightbox__frame {
    transition: opacity 250ms var(--ease-out);
  }
}

@media (max-width: 767px) {
  .video-lightbox__frame {
    width: min(calc(100vw - 48px), calc((100dvh - 48px) * 16 / 9));
  }

  .video-lightbox__close {
    top: 8px;
    right: 8px;
    width: 36px;
    height: 36px;
  }
}

/* Marquee: a continuously looping row, shared by logo-bar and team-strip
   Markup: a .marquee root holding a .marquee__viewport, whose .marquee__track
   lists the items twice over (the second half and any padding copies carry
   .marquee__clone), plus the ui.marquee_pause button. Moving every item left
   by half the track's width returns to an identical frame, so each item
   carries the gap as a right margin to keep both halves the same width.
   The items move, not the track: the track is several viewports wide (11000px
   for the bleed logo bar), and Firefox won't run an animation that big on the
   compositor (it repaints from the main thread as the track moves on) while
   Safari paints its tiles as they come into view, so both stuttered. Each
   item is a small layer of its own instead. js/marquee.js measures the half
   width into --marquee-distance (0 until it runs, so the row stands still)
   and runs the pause button.
   Drag (opt-in, data-marquee-drag on the root): marquee.js sets
   is-draggable while a drag would move the row (grab cursor) and
   is-dragging during a drag and its fling, which pauses the loop while the
   script seeks it.
   The calling module sets --marquee-gap and --marquee-duration, and owns the
   layout for reduced motion, when the clones and the pause button are
   hidden and the track is a plain row. A module that stops the loop sets
   animation on .marquee__track > *.
   -------------------------------------------------------------------------- */
@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(calc(-1 * var(--marquee-distance, 0px)), 0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .marquee .marquee__viewport {
    overflow: hidden;
  }

  .marquee .marquee__track {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: max-content;
  }

  .marquee .marquee__track > * {
    flex: none;
    margin-inline-end: var(--marquee-gap, 0px);
    will-change: transform;
    animation: marquee-scroll var(--marquee-duration, 30s) linear infinite;
  }

  .marquee.is-paused .marquee__track > *,
  .marquee.is-dragging .marquee__track > *,
  .marquee .marquee__viewport:hover .marquee__track > *,
  .marquee .marquee__viewport:focus-within .marquee__track > * {
    animation-play-state: paused;
  }
}

.marquee.is-draggable .marquee__viewport {
  cursor: grab;
}

.marquee.is-dragging .marquee__viewport {
  cursor: grabbing;
  user-select: none;
}

/* !important: module CSS loads after this file and sets display on its items */
@media (prefers-reduced-motion: reduce) {
  .marquee__clone,
  .marquee-pause {
    display: none !important;
  }
}

.marquee-pause {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background-color: transparent;
  color: var(--fg);
  cursor: pointer;
}

.marquee-pause:hover {
  background-color: var(--ghost-hover-bg);
}

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

.marquee-pause__icon {
  display: flex;
}

.marquee-pause__icon--play,
.marquee-pause[aria-pressed="true"] .marquee-pause__icon--pause {
  display: none;
}

.marquee-pause[aria-pressed="true"] .marquee-pause__icon--play {
  display: flex;
}

/* HubSpot form theme
   The theme's form language for embedded HubSpot forms, set by the
   .hs-form-theme class on a module's form container (form-split's card,
   the calculator's and the compliance check's form): 14px medium labels
   8px over 44px white inputs (1px Ink 30 border, 4px radius, Ink 60 on
   hover), 28px between fields, the consent checkbox and text, and the
   40px primary button. Two parts:
   - Legacy forms (.hs-form markup in the page). HubSpot inlines per-form
     CSS at (0,3,1) after the theme CSS, so it wins ties: every rule that
     competes with it must be more specific. The doubled class keeps each
     selector exactly as strong as it was in form-split (0,2,0 base, plus
     the .hs-form in the field rules).
   - New form editor forms, which take their look from HubSpot's --hsf-*
     custom properties (the variables in HubSpot's "style your form"
     reference); set on the container, they inherit into the form. Only
     the developer embed (hs-form-html, Professional and Enterprise) renders
     in the page; the standard embed (hs-form-frame) is a cross-origin
     iframe no page CSS reaches, styled only by the form's Style tab.
   -------------------------------------------------------------------------- */

/* Legacy forms
   -------------------------------------------------------------------------- */
.hs-form-theme.hs-form-theme form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 0;
}

.hs-form-theme.hs-form-theme fieldset {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Fieldsets holding only hidden tracking fields (UTM, ticket) */
.hs-form-theme.hs-form-theme fieldset:not(:has(input:not([type="hidden"]), select, textarea)) {
  display: none;
}

.hs-form-theme.hs-form-theme fieldset.form-columns-2,
.hs-form-theme.hs-form-theme fieldset.form-columns-3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 16px;
}

.hs-form-theme.hs-form-theme fieldset.form-columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hs-form-theme.hs-form-theme .hs-form fieldset .hs-form-field {
  width: auto;
  float: none;
}

.hs-form-theme.hs-form-theme .hs-form-field {
  margin: 0;
}

.hs-form-theme.hs-form-theme .hs-form fieldset .input {
  margin: 0;
}

.hs-form-theme.hs-form-theme .hs-form-field > label {
  display: block;
  margin-bottom: 8px;
  color: var(--fg);
  font-size: var(--font-size-2xs, 14px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
}

.hs-form-theme.hs-form-theme .hs-form-required {
  color: #ef6b51;
}

/* (0,4,0): above HubSpot's (0,3,1), below the textarea and select rules */
.hs-form-theme.hs-form-theme .hs-form-field .hs-input:where(:not([type="checkbox"], [type="radio"])) {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  height: 44.4px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--color-ink-30, #b3bfc8);
  border-radius: var(--radius-buttons, 4px);
  background-color: var(--color-neutral-00, #ffffff);
  color: var(--fg);
  font: inherit;
  font-size: var(--font-size-s, 16px);
  line-height: 1.15;
}

/* HubSpot's phone rule (max-width 400px, or a device under 481px, so every
   phone) sets inputs in multi-column fieldsets to 95% at (0,5,1), which left
   the stacked first/last name fields 14px narrower than the rest. Width only,
   so the base rule keeps its lower weight against the textarea/select rules */
.hs-form-theme.hs-form-theme .hs-form :is(fieldset.form-columns-2, fieldset.form-columns-3) .hs-form-field .hs-input:where(:not([type="checkbox"], [type="radio"])) {
  width: 100%;
}

/* Scoped by HubSpot's field-type wrapper so these outrank the input rule above */
.hs-form-theme.hs-form-theme .hs-fieldtype-textarea textarea.hs-input {
  height: 120px;
  padding-block: 12px;
  resize: vertical;
}

.hs-form-theme.hs-form-theme .hs-fieldtype-select select.hs-input {
  padding-right: 45px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23002846' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 17px center;
  background-repeat: no-repeat;
  appearance: none;
}

.hs-form-theme.hs-form-theme .hs-form-field .hs-input:where(:not([type="checkbox"], [type="radio"])):hover {
  border-color: var(--text-tertiary, #667e90);
}

.hs-form-theme.hs-form-theme .hs-input:focus-visible {
  outline: 2px solid var(--btn-primary, #00e4f5);
  outline-offset: 1px;
}

.hs-form-theme.hs-form-theme .hs-input.invalid.error {
  border-color: #ef6b51;
}

.hs-form-theme.hs-form-theme .hs-error-msgs {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.hs-form-theme.hs-form-theme .hs-error-msg,
.hs-form-theme.hs-form-theme .hs-error-msgs label {
  color: #ef6b51;
  font-size: var(--font-size-xs, 12px);
  line-height: 1.4;
}

/* Checkboxes and consent: 13px box, text 13.6px after it; 11px more
   space above than between the other fields, as in Figma */
.hs-form-theme.hs-form-theme fieldset:has(.hs-form-booleancheckbox),
.hs-form-theme.hs-form-theme .legal-consent-container {
  margin-top: 11px;
}

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

.hs-form-theme.hs-form-theme .inputs-list > li {
  margin: 0;
}

.hs-form-theme.hs-form-theme .inputs-list > li + li {
  margin-top: 8px;
}

.hs-form-theme.hs-form-theme .hs-form-booleancheckbox-display,
.hs-form-theme.hs-form-theme .hs-form-checkbox-display,
.hs-form-theme.hs-form-theme .hs-form-radio-display {
  display: flex;
  align-items: flex-start;
  gap: 13.6px;
  color: var(--fg);
  font-size: var(--font-size-2xs, 14px);
  line-height: 1.4;
  cursor: pointer;
}

.hs-form-theme.hs-form-theme .inputs-list input.hs-input {
  flex: none;
  width: 13px;
  height: 13px;
  margin: 4px 0 0;
  float: none;
  accent-color: var(--color-ink-100, #002846);
}

.hs-form-theme.hs-form-theme .hs-form-booleancheckbox-display > span,
.hs-form-theme.hs-form-theme .hs-form-booleancheckbox-display > span p {
  margin: 0;
}

/* The required asterisk follows the consent text on its line, not under it */
.hs-form-theme.hs-form-theme .hs-form-booleancheckbox-display > span p {
  display: inline;
}

.hs-form-theme.hs-form-theme .hs-richtext,
.hs-form-theme.hs-form-theme .hs-richtext p {
  margin: 0;
  color: var(--fg);
  font-size: var(--font-size-2xs, 14px);
  line-height: 1.4;
}

/* reCAPTCHA badge, centred, 11px further down like the consent */
.hs-form-theme.hs-form-theme .hs_recaptcha {
  display: flex;
  justify-content: center;
  margin-top: 11px;
}

/* Submit: the primary button at 40px, 24px further down */
.hs-form-theme.hs-form-theme .hs_submit {
  margin-top: 24px;
}

.hs-form-theme.hs-form-theme .hs_submit .actions {
  margin: 0;
  padding: 0;
}

.hs-form-theme.hs-form-theme .hs-button {
  height: 40px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-buttons, 4px);
  background-color: var(--btn-primary, #00e4f5);
  color: var(--color-ink-100, #002846);
  font: inherit;
  font-size: var(--font-size-xs, 12px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  letter-spacing: var(--letter-spacing-button, 0.96px);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 160ms var(--ease-out);
}

.hs-form-theme.hs-form-theme .hs-button:hover,
.hs-form-theme.hs-form-theme .hs-button:focus-visible {
  background-color: var(--btn-primary-hover, #3df2ff);
}

.hs-form-theme.hs-form-theme .hs-button:focus-visible {
  outline: 2px solid var(--color-ink-100, #002846);
  outline-offset: 2px;
}

.hs-form-theme.hs-form-theme .hs-button:active {
  transform: scale(0.97);
}

/* Inline thank-you message: rises into the form's place when HubSpot
   swaps it in */
.hs-form-theme.hs-form-theme .submitted-message {
  color: var(--fg);
  font-size: var(--font-size-body-m, 20px);
  line-height: 1.2;
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out);
}

@starting-style {
  .hs-form-theme.hs-form-theme .submitted-message {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-form-theme.hs-form-theme .submitted-message {
    transition: opacity 300ms var(--ease-out);
  }
}

/* New form editor forms
   -------------------------------------------------------------------------- */
.hs-form-theme {
  --hsf-global__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-global__font-size: var(--font-size-s, 16px);
  --hsf-global__color: var(--fg);
  --hsf-global-error__color: #ef6b51;

  --hsf-background__background-color: transparent;
  --hsf-background__background-image: none;
  --hsf-background__border-style: none;
  --hsf-background__border-width: 0;
  --hsf-background__padding: 0;

  --hsf-row__horizontal-spacing: var(--space-s, 16px);
  --hsf-row__vertical-spacing: 20px;
  --hsf-module__vertical-spacing: 8px;

  --hsf-heading__font-family: var(--font-family-heading, 'Denim', Arial, sans-serif);
  --hsf-heading__color: var(--fg);

  --hsf-field-label__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-field-label__font-size: var(--font-size-2xs, 14px);
  --hsf-field-label__color: var(--fg);
  --hsf-field-label-requiredindicator__color: #ef6b51;
  --hsf-field-description__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-field-description__color: var(--fg-secondary);
  --hsf-field-footer__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-field-footer__color: var(--fg-secondary);

  --hsf-field-input__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-field-input__color: var(--color-ink-100, #002846);
  --hsf-field-input__background-color: var(--color-neutral-00, #ffffff);
  --hsf-field-input__placeholder-color: var(--text-tertiary, #667e90);
  --hsf-field-input__border-color: var(--color-ink-30, #b3bfc8);
  --hsf-field-input__border-width: 1px;
  --hsf-field-input__border-style: solid;
  --hsf-field-input__border-radius: var(--radius-buttons, 4px);
  --hsf-field-input__padding: 11px 16px;

  --hsf-field-textarea__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-field-textarea__color: var(--color-ink-100, #002846);
  --hsf-field-textarea__background-color: var(--color-neutral-00, #ffffff);
  --hsf-field-textarea__placeholder-color: var(--text-tertiary, #667e90);
  --hsf-field-textarea__border-color: var(--color-ink-30, #b3bfc8);
  --hsf-field-textarea__border-width: 1px;
  --hsf-field-textarea__border-style: solid;
  --hsf-field-textarea__border-radius: var(--radius-buttons, 4px);
  --hsf-field-textarea__padding: 12px 16px;

  /* Unset, the checkbox and radio take the input padding and grow to 34 x 24px */
  --hsf-field-checkbox__padding: 8px;
  --hsf-field-radio__padding: 8px;
  --hsf-field-checkbox__background-color: var(--color-neutral-00, #ffffff);
  --hsf-field-checkbox__color: var(--color-ink-100, #002846);
  --hsf-field-checkbox__border-color: var(--color-ink-30, #b3bfc8);
  --hsf-field-checkbox__border-width: 1px;
  --hsf-field-checkbox__border-style: solid;
  --hsf-field-radio__background-color: var(--color-neutral-00, #ffffff);
  --hsf-field-radio__color: var(--color-ink-100, #002846);
  --hsf-field-radio__border-color: var(--color-ink-30, #b3bfc8);
  --hsf-field-radio__border-width: 1px;
  --hsf-field-radio__border-style: solid;

  --hsf-richtext__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-richtext__font-size: var(--font-size-xs, 12px);
  --hsf-richtext__color: var(--fg-secondary);

  --hsf-erroralert__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-erroralert__font-size: var(--font-size-xs, 12px);
  --hsf-erroralert__color: #ef6b51;
  --hsf-infoalert__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-infoalert__font-size: var(--font-size-2xs, 14px);
  --hsf-infoalert__color: var(--fg);

  --hsf-button__font-family: var(--font-family-body, 'Denim', Arial, sans-serif);
  --hsf-button__font-size: 12px;
  --hsf-button__color: var(--color-ink-100, #002846);
  --hsf-button__background-color: var(--btn-primary, #00e4f5);
  --hsf-button__background-image: none;
  --hsf-button__border-radius: var(--radius-buttons, 4px);
  --hsf-button__padding: 13px 20px;
  --hsf-button__box-shadow: none;
  /* Undocumented, read by HubSpot's button row (default: the button on the right) */
  --hsf-navigationrow-buttons__justify-content: flex-start;
  --hsf-navigationrow-buttons-single__justify-content: flex-start;
}

/* The button's case and spacing have no variable */
.hs-form-theme :is(button[type="submit"], input[type="submit"]) {
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: var(--letter-spacing-button, 0.96px);
  text-transform: uppercase;
  cursor: pointer;
}

.hs-form-theme :is(button[type="submit"], input[type="submit"]):hover {
  background-color: var(--btn-primary-hover, #3df2ff);
}
/* ==========================================================================
   Utilities
   Loaded last; may override anything before it.
   ========================================================================== */

/* For content that needs to be visually hidden but stay visible for screenreaders */

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

@media (max-width: 767px) {
  .show-for-sr--mobile {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }
}