/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Settings
Font face declarations and design tokens (CSS custom properties) consumed
throughout the theme.
*/

/* Fonts
Self-hosted Funnel Sans (OFL — see fonts/OFL.txt). Single variable font file
covering the full weight axis (300–800), so Light/Regular/Medium (and heavier
weights, if needed later) all come from one request. Loaded early so the browser
begins fetching as soon as possible. Typographic tokens and element rules live
in css/elements/_typography.css.
*/

@font-face {
  font-family: 'Funnel Sans';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('https://www.trimedx.com/hubfs/raw_assets/public/trimedx-theme-2026/fonts/FunnelSans-Variable.woff2') format('woff2');
}
:root {
  /* Primary */
  --color-primary-black: #000000;
  --color-primary-white: #ffffff;
  --color-primary-olive: #1e1d1d;
  --color-primary-gray: #4d4d4d;
  --color-primary-steel: #edebe6;
  --color-primary-orange: #ff7b00;
  --color-primary-purple: #8473d1;

  /* Black tints */
  --color-tint-black-70: rgba(0, 0, 0, 0.7);
  --color-tint-black-50: rgba(0, 0, 0, 0.5);
  --color-tint-black-30: rgba(0, 0, 0, 0.3);
  --color-tint-black-15: rgba(0, 0, 0, 0.15);

  /* Olive / Steel / White */
  --color-tint-olive-70: rgba(30, 29, 29, 0.7);
  --color-tint-steel-50: #f6f5f2;
  --color-tint-white-75: rgba(255, 255, 255, 0.75);
  --color-tint-white-50: rgba(255, 255, 255, 0.5);
  --color-tint-white-30: rgba(255, 255, 255, 0.3);
  --color-tint-white-15: rgba(255, 255, 255, 0.15);

  /* Orange tints */
  --color-tint-orange-70: #ff9a4c;
  --color-tint-orange-50: #fbb885;
  --color-tint-orange-20: #fee0c7;
  --color-tint-orange-10: #fef0e1;

  /* Purple tints */
  --color-tint-purple-70: #b4a7f1;
  --color-tint-purple-50: #cdc4f5;
  --color-tint-purple-20: #e6e1fa;
  --color-tint-purple-10: #f5f3fd;
}

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! 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;
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



.row-fluid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--grid-gap);
}

/* Mobile: every column is full width and stacks (matches HubSpot's mobile dnd,
   which does not inject the flex row below 768px). */
.row-fluid > [class*="span"] {
  flex: 0 0 100%;
  max-width: 100%;
}

/* Desktop: each span fills N columns plus its (N-1) interior gaps. Widths + the
   flex `gap` sum to exactly 100% per 12-column row, so columns land on the design
   widths (≈84.7px at the 1280 content width) with exact 24px gutters between. */
@media (min-width: 768px) {
  
  .row-fluid > .span1 {
    flex: 0 0 calc(1 * (100% - 11 * var(--grid-gap)) / 12 + 0 * var(--grid-gap));
    max-width: calc(1 * (100% - 11 * var(--grid-gap)) / 12 + 0 * var(--grid-gap));
  }
  
  .row-fluid > .span2 {
    flex: 0 0 calc(2 * (100% - 11 * var(--grid-gap)) / 12 + 1 * var(--grid-gap));
    max-width: calc(2 * (100% - 11 * var(--grid-gap)) / 12 + 1 * var(--grid-gap));
  }
  
  .row-fluid > .span3 {
    flex: 0 0 calc(3 * (100% - 11 * var(--grid-gap)) / 12 + 2 * var(--grid-gap));
    max-width: calc(3 * (100% - 11 * var(--grid-gap)) / 12 + 2 * var(--grid-gap));
  }
  
  .row-fluid > .span4 {
    flex: 0 0 calc(4 * (100% - 11 * var(--grid-gap)) / 12 + 3 * var(--grid-gap));
    max-width: calc(4 * (100% - 11 * var(--grid-gap)) / 12 + 3 * var(--grid-gap));
  }
  
  .row-fluid > .span5 {
    flex: 0 0 calc(5 * (100% - 11 * var(--grid-gap)) / 12 + 4 * var(--grid-gap));
    max-width: calc(5 * (100% - 11 * var(--grid-gap)) / 12 + 4 * var(--grid-gap));
  }
  
  .row-fluid > .span6 {
    flex: 0 0 calc(6 * (100% - 11 * var(--grid-gap)) / 12 + 5 * var(--grid-gap));
    max-width: calc(6 * (100% - 11 * var(--grid-gap)) / 12 + 5 * var(--grid-gap));
  }
  
  .row-fluid > .span7 {
    flex: 0 0 calc(7 * (100% - 11 * var(--grid-gap)) / 12 + 6 * var(--grid-gap));
    max-width: calc(7 * (100% - 11 * var(--grid-gap)) / 12 + 6 * var(--grid-gap));
  }
  
  .row-fluid > .span8 {
    flex: 0 0 calc(8 * (100% - 11 * var(--grid-gap)) / 12 + 7 * var(--grid-gap));
    max-width: calc(8 * (100% - 11 * var(--grid-gap)) / 12 + 7 * var(--grid-gap));
  }
  
  .row-fluid > .span9 {
    flex: 0 0 calc(9 * (100% - 11 * var(--grid-gap)) / 12 + 8 * var(--grid-gap));
    max-width: calc(9 * (100% - 11 * var(--grid-gap)) / 12 + 8 * var(--grid-gap));
  }
  
  .row-fluid > .span10 {
    flex: 0 0 calc(10 * (100% - 11 * var(--grid-gap)) / 12 + 9 * var(--grid-gap));
    max-width: calc(10 * (100% - 11 * var(--grid-gap)) / 12 + 9 * var(--grid-gap));
  }
  
  .row-fluid > .span11 {
    flex: 0 0 calc(11 * (100% - 11 * var(--grid-gap)) / 12 + 10 * var(--grid-gap));
    max-width: calc(11 * (100% - 11 * var(--grid-gap)) / 12 + 10 * var(--grid-gap));
  }
  
  .row-fluid > .span12 {
    flex: 0 0 calc(12 * (100% - 11 * var(--grid-gap)) / 12 + 11 * var(--grid-gap));
    max-width: calc(12 * (100% - 11 * var(--grid-gap)) / 12 + 11 * var(--grid-gap));
  }
  
}
.content-wrapper {
  margin: 0 auto;
  padding: 0 var(--grid-gutter);
}

/* When a dnd_area carries .content-wrapper (e.g. the footer), the wrapper
   already supplies the side gutter — don't let the nested dnd-section add a
   second one. */
.content-wrapper .dnd-section {
  padding-inline: 0;
}

.dnd-section > .row-fluid {
  margin: 0 auto;
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

:root {
  --font-family: 'Funnel Sans', sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  --font-size-h1: 2.5rem;   --line-height-h1: 1.1;     --letter-spacing-h1: -0.02em; /* 40 / 110% / -0.02em */
  --font-size-h2: 2rem;     --line-height-h2: 1.25;    --letter-spacing-h2: -0.01em; /* 32 / 40px / -0.01em */
  --font-size-h3: 1.75rem;  --line-height-h3: 1.214;   /* 28 / 34px */
  --font-size-h4: 1.5rem;   --line-height-h4: 1.167;   --letter-spacing-h4: -0.01em; /* 24 / 28px / -1% */
  --font-size-body-lg: 1.125rem; --line-height-body-lg: 1.1;   /* 18 / 110% */
  --font-size-body-m: 1rem;     --line-height-body-m: 1.375; /* 16 / 22px */
  --font-size-nav: 0.875rem;    --line-height-nav: 1.286;    /* 14 / 18px */

  --font-size-display-xl: var(--font-size-h1);   --line-height-display-xl: var(--line-height-h1);     /*  40 / 110% */
  --font-size-display-lg: var(--font-size-h1);  --line-height-display-lg: var(--line-height-h1);   /*  40 / 110% */
  --font-size-body-xl: 1.5rem;      --line-height-body-xl: 1.1;      /*  24 / 110% */
  --font-size-label-md: 0.875rem;        --line-height-label-md: 1.1;    /*  14 / 20px */
  --font-size-label-sm: 0.875rem;    --line-height-label-sm: 1.43;     /*  14 / 20px */
  --font-size-stat: 4.375rem;       --line-height-stat: 1;           /*  70 / 100% */
}

@media (min-width: 992px) {
  :root {
    --font-size-h1: 4.25rem;  --line-height-h1: 1;       /* 68 / 100% */
    --font-size-h2: 3rem;     --line-height-h2: 1.167;   /* 48 / 56px */
    --font-size-h3: 2.5rem;   --line-height-h3: 1;       /* 40 / 100% */
    --font-size-h4: 2rem;     --line-height-h4: 1.094;   /* 32 / 35px */
    --font-size-body-lg: 1.25rem;  --line-height-body-lg: 1.3;  /* 20 / 26px */
    --font-size-body-m: 1.125rem; --line-height-body-m: 1.1; /* 18 / 110% */
    --font-size-nav: 1.125rem;    --line-height-nav: 1.11;   /* 18 / 20px */

    --font-size-display-xl: 7.5rem;   --line-height-display-xl: 1;     /* 120 / 100% */
    --font-size-display-lg: 5.625rem;  --line-height-display-lg: 0.92;   /*  90 / 92%  */

    --font-size-label-md: 1rem;        --line-height-label-md: 1.375;    /*  16 / 22px */
    --font-size-label-sm: 0.875rem;    --line-height-label-sm: 1.43;     /*  14 / 20px */
  }
}


/* Base element rules */

/* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

body {
  font-family: var(--font-family);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-light);
  line-height: var(--line-height-body-m);
  overflow-wrap: break-word;
}

/* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

html[lang^="ja"] body,
html[lang^="zh"] body,
html[lang^="ko"] body {
  line-break: strict;
  overflow-wrap: normal;
  word-break: break-all;
}

/* Paragraphs */

p {
  font-size: var(--font-size-body-m);
  line-height: var(--line-height-body-m);
  margin: 0 0 1.4rem;
}

/* Anchors */

a {
  cursor: pointer;
}

/* Headings */

h1,
.font-h1,
h2,
.font-h2,
h3,
.font-h3,
h4,
.font-h4,
h5,
.font-h5,
h6,
.font-h6 {
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
}

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

h1,
.font-h1 {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-h1);
  letter-spacing: var(--letter-spacing-h1);
}

h2,
.font-h2 {
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

h3,
.font-h3 {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
}

h4,
.font-h4 {
  font-size: var(--font-size-h4);
  line-height: var(--line-height-h4);
  letter-spacing: var(--letter-spacing-h4);
}

/* H5/H6 are not defined in the design — defaulted below H4 pending confirmation. */

h5,
.font-h5 {
  font-size: var(--font-size-label-md);
  line-height: var(--line-height-label-md);
}

h6,
.font-h6 {
  font-size: var(--font-size-label-sm);
  line-height: var(--line-height-label-sm);
}

/* Lists */

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

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

ul.no-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

hr {
  border: none;
  border-bottom: 1px solid #CCC;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
}

/* Typography utilities
Apply a named type-scale variant from the UI kit to any element. Everything
resolves from the tokens above, so the responsive variants (headings, body, nav)
adjust at the 992px breakpoint automatically. Each base class uses the variant's
default weight (Light); compose a weight modifier (.font-medium / .font-regular /
.font-light) for the Medium/Regular variants.

  UI kit variant        →  class(es)
  Display/XL Light       →  .font-display-xl
  Display/L Light        →  .font-display-lg
  Heading/H1–H4 Light    →  .font-h1 … .font-h4
  Heading/H4 Medium      →  .font-h4 .font-medium
  Body/XL Light|Medium   →  .font-body-xl [.font-medium]
  Body/L  Light|Medium   →  .font-body-lg  [.font-medium]
  Body/M  Light|Med|Reg  →  .font-body-md  [.font-medium | .font-regular]
  Nav/Link               →  .font-nav        (Regular on mobile, Light on desktop)
  Label/M Light          →  .font-label-md
  Label/Button Regular   →  .font-label-md .font-regular
  Label/S Light|Regular  →  .font-label-sm [.font-regular]
  Label/Stats            →  .font-stat
*/

/* Display */
.font-display-xl { font-size: var(--font-size-display-xl); line-height: var(--line-height-display-xl); }
.font-display-lg  { font-size: var(--font-size-display-lg);  line-height: var(--line-height-display-lg); }

/* Headings (sizes are responsive via the tokens) */
.font-h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); }
.font-h2 { font-size: var(--font-size-h2); line-height: var(--line-height-h2); }
.font-h3 { font-size: var(--font-size-h3); line-height: var(--line-height-h3); }
.font-h4 { font-size: var(--font-size-h4); line-height: var(--line-height-h4); }

/* Body */
.font-body-xl-light { font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); font-weight: var(--font-weight-light); }
.font-body-xl-medium { font-size: var(--font-size-body-xl); line-height: var(--line-height-body-xl); font-weight: var(--font-weight-medium); }
.font-body-lg-light  { font-size: var(--font-size-body-lg);  line-height: var(--line-height-body-lg); font-weight: var(--font-weight-light); }
.font-body-lg-medium { font-size: var(--font-size-body-lg);  line-height: var(--line-height-body-lg); font-weight: var(--font-weight-medium); }
.font-body-md-light  { font-size: var(--font-size-body-m);  line-height: var(--line-height-body-m); font-weight: var(--font-weight-light); }
.font-body-md-medium { font-size: var(--font-size-body-m);  line-height: var(--line-height-body-m); font-weight: var(--font-weight-medium); }

/* Labels - Used for button text, form labels, and small UI metadata. */
.font-label-btn { font-size: var(--font-size-label-md); line-height: var(--line-height-label-md); font-weight: var(--font-weight-regular); }
.font-label-md { font-size: var(--font-size-label-md); line-height: var(--line-height-label-md); font-weight: var(--font-weight-light); }
.font-label-sm { font-size: var(--font-size-label-sm); line-height: var(--line-height-label-sm); }

/* Nav/Link — Regular on mobile, Light on desktop (weight already Light from the
   shared rule above; override to Regular below the breakpoint). */
.font-nav {
  font-size: var(--font-size-nav);
  line-height: var(--line-height-nav);
  font-weight: var(--font-weight-regular);
}

@media (min-width: 992px) {
  .font-nav { font-weight: var(--font-weight-light); }
}

/* Weight modifiers — compose with any variant above. Defined last so they win. */
.font-light   { font-weight: var(--font-weight-light); }
.font-regular { font-weight: var(--font-weight-regular); }
.font-medium  { font-weight: var(--font-weight-medium); }
button,
.btn {
  cursor: pointer;
}

button:not(.no-button) {
  display: inline-block;
  padding: 0.875rem 1.5rem;
  border-radius: 0.5rem;
  text-align: center;
  white-space: normal;
  text-decoration: none;
  color: var(--color-primary-black);
  background-color: var(--color-primary-white);
  transition: all 0.2s linear;
}

button:not(.no-button)[hidden] {
  display: none;
}

button:not(.no-button):hover,
button:not(.no-button):focus-visible,
button:not(.no-button).is-active {
  background-color: var(--color-primary-steel);
}

button:not(.no-button).secondary {
  color: var(--color-primary-white);
  background-color: var(--color-primary-purple);
}

button:not(.no-button).secondary:hover,
button:not(.no-button).secondary:focus-visible,
button:not(.no-button).secondary.is-active {
  color: var(--color-primary-black);
  background-color: var(--color-tint-purple-70);
}

button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* No button */
.no-button {
  background: none;
  border: none;
  border-radius: 0;
  color: initial;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}

/* ==========================================================================
   .btn — pill button
   --------------------------------------------------------------------------
   The pill is a single white rounded rect (.btn base). Primary (.btn--primary)
   nests a purple arrow chip on the right inside the pill; on hover that purple
   fill slides left across the whole button while the text turns white.
   Secondary (.btn--secondary) is the same pill with no arrow; it fills steel on
   hover. The arrow markup (.btn__icon) is only emitted for primary buttons.
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 0.5rem;
  background-color: var(--color-primary-white);
  color: var(--color-primary-black);
  text-decoration: none;
  font-weight: var(--font-weight-medium, 500);
  line-height: 1;
  overflow: hidden;
  isolation: isolate; /* keep ::before fill behind the label/icon */
  transition: background-color 0.25s ease;
}

.btn:hover {
  text-decoration: none;
}

.btn__label {
  position: relative;
  z-index: 1;
  padding: 0.875rem 1.125rem;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.btn__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 3.3125rem;
  color: var(--color-primary-white);
}

.btn__icon > svg {
  display: block;
}

/* -- Primary: arrow chip + slide-to-fill hover ---------------------------- */

/* The purple fill: at rest a chip hugging the arrow at the right; on hover it
   grows leftward (its left edge slides to 0) to cover the whole pill. */
.btn--primary::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: 0;
  left: calc(100% - 3.3125rem); /* 3.3125remrem arrow */
  border-radius: 0.5rem;
  background-color: var(--color-primary-purple);
  transition: left 0.35s ease, right 0.35s ease, top 0.35s ease,
    bottom 0.35s ease, border-radius 0.35s ease;
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before {
  inset: 0;
  border-radius: 0.5rem;
}

.btn--primary:hover .btn__label,
.btn--primary:focus-visible .btn__label {
  color: var(--color-primary-white);
}

/* -- Secondary: white pill, fills steel on hover -------------------------- */
.btn--secondary:hover,
.btn--secondary:focus-visible {
  color: var(--color-primary-black);
  background-color: var(--color-primary-steel);
}

/* -- Nav: purple pill, white text, purple tint 70% pill & black text on hover -- */
.btn--nav {
  color: var(--color-primary-white);
  background-color: var(--color-primary-purple);
}

.btn--nav:hover,
.btn--nav:focus-visible {
  color: var(--color-primary-black);
  background-color: var(--color-tint-purple-70);
}

/* -- Arrow: icon-only purple square, no label; tint-70 on hover.
   Larger on desktop (3.5rem) than mobile (3rem). The macro emits it with just a
   .btn__icon (white arrow) and an aria-label from the button text. -------- */
.btn--arrow {
  justify-content: center;
  width: 2.875rem;
  height: 2.625rem;
  background-color: var(--color-primary-purple);
}

.btn--arrow > .btn__icon {
  width: auto;
}

.btn--arrow > .btn__icon > svg {
  width: 21px;
  height: 16px;
}

.btn--arrow:hover,
.btn--arrow:focus-visible {
  background-color: var(--color-tint-purple-70);
}

/* Arrow icon turns black on hover (CSS fill overrides the SVG's fill="white"). */
.btn--arrow > .btn__icon > svg > path {
  transition: fill 0.2s linear;
}

.btn--arrow:hover > .btn__icon > svg > path,
.btn--arrow:focus-visible > .btn__icon > svg > path {
  fill: var(--color-primary-black);
}

@media (min-width: 768px) {
  .btn--arrow {
    width: 3.25rem;
    height: 3.25rem;
  }
  .btn--arrow > .btn__icon > svg {
    width: 23px;
    height: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn__label,
  .btn--primary::before {
    transition: none;
  }
}
a,
.is-link {
  text-decoration: underline;
  color: var(--color-primary-purple);
  cursor: pointer;
  transition: color 0.2s linear;
}

a:hover,
.is-link:hover,
a:focus-visible,
.is-link:focus-visible,
a:active,
.is-link:active {
  text-decoration: underline;
  color: var(--color-tint-purple-50);
}
/* Fields */

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

/* Labels */

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

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

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

.hs-dateinput {
  position: relative;
}

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

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

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

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

/* Inputs - file picker */

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

/* Headings and text */

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

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

/* GDPR */

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

/* Validation */

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

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

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

/* Submit button */

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

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Table */

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

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
  background-color: var(--color-tint-steel-50);
  color: var(--color-primary-black);
  font-size: var(--font-size-label-md);
  line-height: 1;
}

.color-mode__on-dark .chip {
  color: var(--color-primary-white);
  background: var(--color-primary-olive);
}

.chip-dot {
  flex: 0 0 0.75rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 2px;
  background-color: var(--color-primary-orange);
}

.chip-dot.purple {
  background-color: var(--color-primary-purple);
}

.chip-dot.light_purple {
  background-color: var(--color-tint-purple-50);
}

.chip-sep {
  color: var(--color-tint-black-30);
}

.color-mode__on-dark .chip-sep {
  color: var(--color-tint-white-75);
}
.stat {
  display: flex;
  flex-direction: column;
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

@media (min-width: 1024px) {
  .header-mobile-only {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .header-desktop-only {
    display: none !important;
  }
}

/* COMMON STYLES */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: var(--color-primary-olive);
}

.header__wrapper {
  height: var(--height-header);
  display: flex;
  gap: 32px;
  align-items: center;
}

.header__skip {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}

.header__skip:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  overflow: visible;
  padding: 8px 16px;
  background: #fff;
  color: var(--primary-color);
  text-decoration: underline;
}

.header__brand {
  flex-shrink: 0;
}

.header__brand a,
.header__brand img {
  display: block;
}

/* MOBILE STYLES */

@media (max-width: 1023.98px) {
  .header__brand {
    max-width: 108px;
  }

  .mobile-menu-toggle {
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    margin-left: auto;
  }

  .mobile-menu-toggle::before,
  .mobile-menu-toggle::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    margin: auto;
    width: 100%;
    height: 1px;
    background-color: var(--color-primary-white);
    transition-property: transform, background-color;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transform-origin: center;
  }

  .mobile-menu-toggle::before {
    transform: translate(-50%, -4px);
  }

  .mobile-menu-toggle::after {
    transform: translate(-50%, 4px);
  }

  .nav-open .mobile-menu-toggle::before {
    transform: translate(-50%, 0) rotate(45deg) scale(1.125, 1.5);
  }

  .nav-open .mobile-menu-toggle::after {
    transform: translate(-50%, 0) rotate(-45deg) scale(1.125, 1.5);
  }

  .mobile-menu-toggle:hover::before,
  .mobile-menu-toggle:hover::after,
  .mobile-menu-toggle:focus-visible::before,
  .mobile-menu-toggle:focus-visible::after,
  .nav-open .mobile-menu-toggle::before,
  .nav-open .mobile-menu-toggle::after {
    background-color: var(--color-tint-purple-75);
  }

  .header__nav-wrapper {
    position: fixed;
    inset: 0;
    top: var(--height-header);
    height: 100%;
    width: 100%;
    background: var(--color-primary-olive);

    display: flex;
    flex-direction: column;

    /* Slide in from right */
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  html.nav-open .header__nav-wrapper {
    transform: translateX(0);
  }

  /* scroll container */
  .header__nav-scroll {
    height: 100%;
    padding: 32px var(--grid-gutter);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* DESKTOP STYLES */

@media (min-width: 1024px) {
  .header__brand {
    max-width: 121px;
  }

  .mobile-menu-toggle {
    display: none;
  }

  .header__nav-wrapper {
    flex-grow: 1;
    flex-basis: 100%;
  }

  .header__nav-scroll {
    display: flex;
    gap: 32px;
    align-items: center;
    justify-content: space-between;
  }
}
.footer {
  font-weight: var(--font-weight-light);
  font-size: var(--font-size-label-sm);
  line-height: 1.4285714286;
  color: var(--color-tint-white-75);
  background-color: var(--color-primary-olive);
}

.footer p {
  font-size: var(--font-size-label-sm);
  line-height: 1.4285714286;
}

.footer__wrapper {
  padding-bottom: 40px;
}

.footer .footer__brand-grid {
  align-items: end;
}

.footer__brand {
  margin-bottom: 24px;
}

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

.footer__copywrite a {
  color: var(--color-tint-white-75);
  text-decoration: none;
}

.footer__copywrite a:hover,
.footer__coprywrite a:focus-visible {
  color: var(--color-tint-purple-70);
}

@media (min-width: 768px) {
  .footer__wrapper {
    padding-bottom: 80px;
  }

  .footer__brand {
    margin-bottom: 0;
  }
}
/* Menu and simple menu */

.hs-menu-wrapper ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Horizontal menu */

.hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
  flex-direction: column;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-horizontal ul {
    flex-direction: column;
  }
}

/* Vertical menu */

.hs-menu-wrapper.hs-menu-flow-vertical ul {
  flex-direction: column;
}

/* Flyouts */

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
  display: inline-flex;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    display: flex;
  }
}

.hs-menu-wrapper.flyouts .hs-item-has-children {
  position: relative;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
  left: -9999px;
  opacity: 0;
  position: absolute;
}

.hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
  display: block;
  white-space: nowrap;
}

.hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 0;
  opacity: 1;
  top: 100%;
}

.hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
  left: 100%;
  opacity: 1;
  top: 0;
}

@media (max-width: 767px) {
  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    position: relative;
    top: auto;
  }
}

/* CTA, logo, and rich text images */

.hs_cos_wrapper_type_cta img,
.hs_cos_wrapper_type_logo img,
.hs_cos_wrapper_type_rich_text img {
  height: auto;
  max-width: 100%;
}

/* Forms */

.color-mode--on-dark .hs-form {
  color: var(--color-tint-white-75);
}

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

.hs-input[type="text"],
.hs-input[type="tel"],
.hs-input[type="email"] {
  padding: 1rem;
  border: 1px solid rgba(0, 0, 0, 0.20);
  border-radius: 0.5rem;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--color-primary-black);
  background: var(--color-primary-white);
}

@media (min-width:768px) {
  .hs-input[type="text"],
  .hs-input[type="tel"],
  .hs-input[type="email"] {
    padding: 1.125rem 1.25rem;
  }
}

.color-mode--on-dark .hs-input[type="text"],
.color-mode--on-dark .hs-input[type="tel"],
.color-mode--on-dark .hs-input[type="email"] {
  border: 1px solid rgba(255, 255, 255, 0.20);
  color: var(--color-primary-white);
  background: var(--color-primary-black);
}

.hs-input::placeholder {
  color: var(--color-tint-black-70);
}

.color-mode--on-dark .hs-input::placeholder {
  color: var(--color-tint-white-75);
}

label.hs-form-booleancheckbox-display {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.hs-input[type="checkbox"] {
  flex-shrink: 0;
  appearance: none;
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--color-tint-black-70);
  margin-right: 0;
  margin-bottom: 0.25rem;
  margin-left: 0.25rem;
  /* Set here so that Windows' High-Contrast Mode can override */
  color: var(--color-tint-black-70);
  background: var(--color-primary-white);
}

.hs-input[type="checkbox"]::before {
  content: "✔";
  position: absolute;
  font-size: 1.125rem;
  right: -0.05em;
  top: -0.1em;
  visibility: hidden;
}

.hs-input[type="checkbox"]:checked::before {
  /* Use `visibility` instead of `display` to avoid recalculating layout */
  visibility: visible;
}

.hs-input[type="checkbox"]:disabled {
  background: var(--color-tint-black-15);
}

.color-mode--on-dark .hs-input[type="checkbox"] {
  border: 1px solid var(--color-tint-white-75);
  /* Set here so that Windows' High-Contrast Mode can override */
  color: var(--color-tint-white-75);
  background: var(--color-primary-black);
}

.color-mode--on-dark .hs-input[type="checkbox"]:disabled {
  background: var(--color-tint-white-15);
}

.hs-submit .actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.hs-submit .actions .hs-button {
  width: 100%;
  padding: 0.75rem 2rem;
  border: 0 none;
  border-radius: 0.5rem;
  font-size: var(--font-size-label-md);
  line-height: var(--line-height-label-md);
}

.hs-submit .actions .hs-button.primary {
  color: var(--color-primary-white);
  background: var(--color-primary-purple);
}

.hs-submit .actions .hs-button.primary:hover,
.hs-submit .actions .hs-button.primary:focus-visible {
  color: var(--color-primary-black);
  background-color: var(--color-tint-purple-70);
}

.hs-submit .actions .hs-button.secondary {
  color: var(--color-primary-black);
  background: var(--color-primary-white);
}

.hs-submit .actions .hs-button.secondary:hover,
.hs-submit .actions .hs-button.secondary:focus-visible {
  background: var(--color-primary-steel);
}
/* Footnotes
Shared footnote-REFERENCE marker, emitted by templates/partials/footnote-refs.html
and rendered inside host-module body copy (stats-reveal notes, etc.). The footnote
BODY list + back-links live in footer-footnotes.module and are styled there.

The <sup> sizing/position comes from normalize (sub/sup). The resting marker
inherits the host text colour so it always meets WCAG AA against whatever surface
it sits on (light / lavender / dark); hover + focus shift to the purple link
colour for an interactive affordance. */

.footnote-ref {
  /* keep the marker out of the line box so refs don't shift line height */
  line-height: 0;
  white-space: nowrap;
}

.footnote-ref__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  /* modest horizontal padding for a larger tap target without shifting layout */
  padding: 0 0.15em;
  transition: color 0.2s linear;
}

.footnote-ref__link:hover,
.footnote-ref__link:active {
  color: var(--color-primary-purple);
}

.footnote-ref__link:focus-visible {
  color: var(--color-primary-purple);
  outline: 2px solid var(--color-primary-purple);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Utilities
Helper classes with ability to override anything that comes 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;
  }
}

@media (min-width: 992px) {
  .mobile-only {
    display: none !important;
  }
}

@media (max-width: 991.99px) {
  .desktop-only {
    display: none !important;
  }
}
/* =========================================================================
   Grid utilities — snap module elements onto the page design grid.

   The page content column is a fixed geometry: a centred 1280px content track,
   12 columns on desktop / 4 on mobile, gaps = --grid-gap. Applying `.u-grid` to
   a module root that fills the content column reproduces those exact tracks, so
   children placed with the span/start utilities land on the SAME lines the
   client designed to in Figma.

   ALIGNMENT REQUIRES the module to sit in a FULL-WIDTH (span 12) dnd section
   with no horizontal padding added to the module. In a partial dnd column the
   tracks subdivide that column instead of the page — still a tidy local grid,
   but not aligned to the global lines. See docs/grid-utilities.md.

   Breakpoints follow the dnd grid's single step at 768px:
     base    → mobile, 4-column context
     .u-md-* → ≥768px, 12-column context

   Columns are placed with two longhands so they compose cleanly:
     width    = grid-column-end: span N   (.u-span-*, .u-md-span-*)
     position = grid-column-start: N       (.u-start-*, .u-md-start-*)
   ========================================================================= */

.u-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
  align-items: start;
}

/* --- Base (mobile, 4-column). A span larger than the track count clamps to
   full width, so .u-span-12 is a convenient "full width on mobile". --- */

.u-span-1 { grid-column-end: span 1; }

.u-span-2 { grid-column-end: span 2; }

.u-span-3 { grid-column-end: span 3; }

.u-span-4 { grid-column-end: span 4; }

.u-span-5 { grid-column-end: span 5; }

.u-span-6 { grid-column-end: span 6; }

.u-span-7 { grid-column-end: span 7; }

.u-span-8 { grid-column-end: span 8; }

.u-span-9 { grid-column-end: span 9; }

.u-span-10 { grid-column-end: span 10; }

.u-span-11 { grid-column-end: span 11; }

.u-span-12 { grid-column-end: span 12; }

.u-span-full { grid-column: 1 / -1; }


.u-start-1 { grid-column-start: 1; }

.u-start-2 { grid-column-start: 2; }

.u-start-3 { grid-column-start: 3; }

.u-start-4 { grid-column-start: 4; }

.u-start-5 { grid-column-start: 5; }

.u-start-6 { grid-column-start: 6; }

.u-start-7 { grid-column-start: 7; }

.u-start-8 { grid-column-start: 8; }

.u-start-9 { grid-column-start: 9; }

.u-start-10 { grid-column-start: 10; }

.u-start-11 { grid-column-start: 11; }

.u-start-12 { grid-column-start: 12; }


/* --- Desktop (≥768px, 12-column) --- */
@media (min-width: 768px) {
  
  .u-md-span-1 { grid-column-end: span 1; }
  
  .u-md-span-2 { grid-column-end: span 2; }
  
  .u-md-span-3 { grid-column-end: span 3; }
  
  .u-md-span-4 { grid-column-end: span 4; }
  
  .u-md-span-5 { grid-column-end: span 5; }
  
  .u-md-span-6 { grid-column-end: span 6; }
  
  .u-md-span-7 { grid-column-end: span 7; }
  
  .u-md-span-8 { grid-column-end: span 8; }
  
  .u-md-span-9 { grid-column-end: span 9; }
  
  .u-md-span-10 { grid-column-end: span 10; }
  
  .u-md-span-11 { grid-column-end: span 11; }
  
  .u-md-span-12 { grid-column-end: span 12; }
  
  .u-md-span-full { grid-column: 1 / -1; }

  
  .u-md-start-1 { grid-column-start: 1; }
  
  .u-md-start-2 { grid-column-start: 2; }
  
  .u-md-start-3 { grid-column-start: 3; }
  
  .u-md-start-4 { grid-column-start: 4; }
  
  .u-md-start-5 { grid-column-start: 5; }
  
  .u-md-start-6 { grid-column-start: 6; }
  
  .u-md-start-7 { grid-column-start: 7; }
  
  .u-md-start-8 { grid-column-start: 8; }
  
  .u-md-start-9 { grid-column-start: 9; }
  
  .u-md-start-10 { grid-column-start: 10; }
  
  .u-md-start-11 { grid-column-start: 11; }
  
  .u-md-start-12 { grid-column-start: 12; }
  
}
/* ==========================================================================
   Scroll-triggered animation utilities
   --------------------------------------------------------------------------
   Standard, reusable animations that play once an element scrolls into view.
   Driven by js/animations.js via an IntersectionObserver.

   How it works
   - Add a data-anim="…" attribute to an element (see the list below).
   - On load, js/animations.js sets `html.anim-ready`, which switches on the
     initial (pre-animation) states defined here. Without JS, `.anim-ready` is
     never added, so content stays fully visible — the animations are purely a
     progressive enhancement.
   - When the element enters the viewport the observer adds `.is-inview`, which
     transitions it to its final state.

   Accessibility
   - Every hidden/transform initial state is wrapped in
     `@media (prefers-reduced-motion: no-preference)`. Users who prefer reduced
     motion see the final state immediately (and count-up jumps to its target
     in JS), with no movement.

   Per-element tuning (optional, set as data attributes; JS maps them to the
   custom properties below):
     data-anim-duration="700"   -> --anim-duration  (ms)
     data-anim-distance="4rem"  -> --anim-distance   (slide travel distance)

   Staggering is handled in JS (wall-clock timing per [data-anim-container]),
   not via CSS delay — see js/animations.js.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  /* Shared transition for every transform/opacity based animation.
     Applied only once JS is present and only before the element is revealed. */
  [data-anim]:not(.is-inview) {
    will-change: opacity, transform;
  }

  [data-anim] {
    transition:
      opacity var(--anim-duration, 700ms) var(--anim-easing, cubic-bezier(0.22, 0.61, 0.36, 1)),
      transform var(--anim-duration, 700ms) var(--anim-easing, cubic-bezier(0.22, 0.61, 0.36, 1));
  }

  /* ---- Slide in from right ---------------------------------------------- */
  [data-anim="slide-right"] {
    opacity: 0;
    transform: translateX(var(--anim-distance, 4rem));
  }

  /* ---- Slide in from left ------------------------------------------------ */
  [data-anim="slide-left"] {
    opacity: 0;
    transform: translateX(calc(var(--anim-distance, 4rem) * -1));
  }

  /* ---- Fade in + slide up -------------------------------------------------- */
  [data-anim="fade-up"] {
    opacity: 0;
    transform: translateY(var(--anim-distance, 2rem));
  }

  /* ---- Divider line draws in (scaleX; no fade) ----------------------------- */
  [data-anim="line-draw"] {
    transform: scaleX(0);
    transform-origin: left center;   /* draws left → right */
  }
  [data-anim="line-draw"][data-anim-direction="rtl"] {
    transform-origin: right center;  /* draws right → left */
  }

  /* ---- Revealed state (shared) ----------------------------------------- */
  .anim-ready [data-anim].is-inview {
    opacity: 1;
    transform: none;
  }

  .is-in-editor [data-anim] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Pinned sticky-stacking (scroll-linked, not IntersectionObserver-based)
   --------------------------------------------------------------------------
   A different engine from the [data-anim] system above: scroll-linked and
   continuous rather than reveal-once. Rows pin to the viewport and
   accumulate into a stack as the visitor scrolls past them. See
   docs/scroll-animations.md for the full write-up and attribute contract.

   [data-stack]       – container; every [data-stack-item] must be its DIRECT
                        child so they share one containing block — this is
                        what makes pinned headers accumulate instead of
                        un-sticking one at a time as the next row arrives.
   [data-stack-item]  – a row; needs an opaque background and, to collapse to
                        a specific band height, a [data-stack-header] child
                        (see below). The "collapse" is an illusion: nothing
                        resizes — once pinned, the next row's opaque,
                        higher-z-index box slides up and visually covers this
                        row's now-exposed body, leaving only its collapsed
                        band exposed.
   [data-stack-header] – optional, inside a row; marks the content that
                        should stay visible once the row is pinned (e.g. a
                        title). js/stack.js measures it to compute
                        --collapsed-h per row, so rows whose header wraps to
                        a different number of lines each get their own
                        correctly sized band — no fixed value needed. A row
                        with no [data-stack-header] just never visually
                        collapses (safe, inert fallback).
   --row-index        – inline custom property per row (loop.index0 in HubL),
                        drives z-index so later rows always paint over
                        earlier ones.
   --stack-top        – optional inline custom property on [data-stack],
                        offsets where the stack starts (e.g. below a fixed
                        site header). Falls back to var(--height-header).
   --stack-offset      – JS-computed running total of every earlier row's own
                        --collapsed-h, so non-uniform collapsed heights still
                        stack flush, one directly beneath the last.
   --collapsed-h       – this row's own collapsed-band height. Set by
                        js/stack.js from its [data-stack-header]; the
                        `calc(var(--row-index,0) * var(--collapsed-h,3.5rem))`
                        fallback below is only the brief pre-JS/uniform-space
                        approximation, superseded the moment the script runs.

   Gated on: JS present (reuses .anim-ready, set globally by
   js/animations.js — the dynamic measurement itself is a separate script,
   js/stack.js, both loaded globally from templates/layouts/base.html), the
   consuming module's own .is-stacking toggle class, reduced motion, and
   desktop widths only (small screens fall back to a plain static list).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .anim-ready .is-stacking[data-stack] [data-stack-item] {
    position: sticky;
    top: calc(var(--stack-top, var(--height-header, 0px)) + var(--stack-offset, calc(var(--row-index, 0) * var(--collapsed-h, 3.5rem))));
    z-index: calc(var(--row-index, 0) + 1);
  }
}