/* 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
*/

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

/* Design tokens
Static custom properties for values that recur across the theme but are NOT
driven by the HubSpot theme settings. (Brand colors live in utilities/_colors.css
and fonts in theme-overrides.css, both seeded from the editor.) Defined on :root
in the generic layer so every component and module stylesheet can read them via
var(). Values mirror what is already used in the codebase, so adopting them is a
visual no-op — just a single source of truth going forward.
*/

:root {
  /* Neutrals & on-dark
  --color-white replaces the hardcoded white literals. The on-dark ramp is
  translucent white for text/borders over dark sections. */
  --color-white: #fff;
  --on-dark-90: rgba(255, 255, 255, 0.9);
  --on-dark-80: rgba(255, 255, 255, 0.8);
  --on-dark-70: rgba(255, 255, 255, 0.7);
  --on-dark-60: rgba(255, 255, 255, 0.6);
  --on-dark-50: rgba(255, 255, 255, 0.5);
  --on-dark-40: rgba(255, 255, 255, 0.4);
  --on-dark-30: rgba(255, 255, 255, 0.3);
  --on-dark-25: rgba(255, 255, 255, 0.25);
  --on-dark-20: rgba(255, 255, 255, 0.2);
  --on-dark-15: rgba(255, 255, 255, 0.15);
  --border-on-light: rgba(0, 0, 0, 0.15);

  /* Spacing scale (0.25rem base — matches the utilities in utilities/_spacing.css) */
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-gutter: var(--space-10); /* 2.5rem — section side padding */

  /* Font weight (the three real weights in use; retire stray `bold`) */
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Radius */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Elevation */
  --shadow-dropdown: 0 2px 9px 0 rgba(0, 0, 0, 0.2);

  /* Motion */
  --duration-fast: 0.15s;
  --duration-medium: 0.25s;
  --duration-slow: 0.3s;
  --easing-standard: linear;

  /* Z-index */
  --z-overlay: 1;
  --z-content: 2;
  --z-dropdown: 99;
}
*, *:before, *:after {
  box-sizing: border-box;
}

p,h1,h2,h3,h4,h5,h6,ul,ol,pre {
  margin: 0;
}

iframe {
  border: 0;
}
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

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

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

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

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

body {
  margin: 0;
}

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

h1 {
}

/* 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)
*/



/* CSS variables */

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

/* Mobile layout */

.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%;
}

/* Desktop layout */

@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));
    }
  
}
/* Guard against page-level horizontal scroll caused by full-bleed (100vw)
   modules and decorative bleed elements (e.g. horizontal-scroll's rail and
   flair). `clip` — unlike `hidden` — contains the horizontal overhang without
   creating a scroll container, so descendant `position: sticky` and vertical
   scrolling keep working, and nested horizontal rails still scroll. */
.body-wrapper {
  overflow-x: clip;
}

.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
}

@media screen and (min-width: 1380px) {
  .content-wrapper {
    padding: 0;
  }
}

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

.dnd-section .dnd-column {
  padding: 0;
}
/* Zigzag
Alternating media/text rows: stacked on mobile, side-by-side on desktop with
every other row reversed. Shared layout for the Feature and How-we-help panels.
Modules keep their own inner styling (titles, text colour, media aspect-ratio).
*/

.zigzag {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.zigzag__row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.zigzag__media,
.zigzag__body {
  width: 100%;
}

@media (min-width: 1024px) {
  .zigzag {
    gap: 4.5rem;
  }

  .zigzag__row {
    align-items: center;
    flex-direction: row;
    gap: 3.5rem;
  }

  .zigzag__row:nth-child(even) {
    flex-direction: row-reverse;
  }

  .zigzag__media,
  .zigzag__body {
    flex: 1;
    min-width: 0;
  }
}

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

/* 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 {
  line-height: 1.5;
  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 */

.typography p,
.typography .hs_cos_wrapper_type_rich_text p {
  font-size: 1.125rem;
}

/* Anchors */

.typography a,
.typography .hs_cos_wrapper_type_rich_text a {
  cursor: pointer;
}

/* Headings */
.typography h1,
.typography h2,
.typography h3,
.typography h4,
.typography h5,
.typography h6 {
  margin: 0;
  font-weight: 400;
}

/* Lists */

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

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

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

/* Code blocks */

.typography pre {
  overflow: auto;
}

.typography code {
  vertical-align: bottom;
}

/* Blockquotes */

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

/* Horizontal rules */

.typography hr {
  border: none;
  border-bottom: 1px solid rgba(235, 236, 240, 1);
  margin-top: 3rem;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .typography hr {
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
}

/* Image alt text */

.typography img {
  font-size: 0.583rem;
  word-break: normal;
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all var(--duration-fast) linear;
  white-space: normal;
}

/* Buttons opt out of the 2% link tracking applied to a{} in theme-overrides. */
button,
.button,
.hs-button,
.btn-cta,
.btn-dark,
.no-button {
  letter-spacing: normal;
}

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

/* Call-to-action button — shared across hero, cta, and reusable module CTAs.
   The visual treatment (background, border, radius, padding, font, transform,
   hover) is driven entirely by the Buttons theme settings (theme.buttons in
   fields.json), so it stays in lockstep with the native .hs-button rule in
   theme-overrides.css §4. With the default settings this renders the brand CTA:
   Cardinal Red (primary) fill that flips to Navy (#080074) on hover. This block
   adds only the flex layout for the trailing arrow on top of those theme-driven
   values. Modules may still override padding / min-width / display as needed. */

.btn-cta {
  align-items: center;
  display: inline-flex;
  gap: var(--space-4);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);

  /* Theme-driven — mirrors the native button rule in theme-overrides.css §4. */
  border: 1px solid #FF003E;

  padding-top: 20px;
padding-right: 30px;
padding-bottom: 20px;
padding-left: 30px;

  ;
  background-color: #FF003E;
  border-radius: 0px;
  color: #FFFFFF;
  font-size: 16px;
  line-height: 1;
  text-transform: none;
}

.btn-cta:hover {
  border: 1px solid #111111;

  background-color: #080074;
  border-radius: 0px;
  color: #ffffff;
}

/* Trailing arrow — one size for every CTA. */
.btn-cta .icon {
  block-size: 1.1rem;
  inline-size: 1.1rem;
}

/* Secondary (dark) variant — keeps the theme border / radius / padding / font,
   swaps the fill to the muted-dark token. Text colour comes from the base. */

.btn-cta--secondary {
  background-color: var(--color-dark2);
}

.btn-cta--secondary:hover {
  background-color: var(--color-secondary-dark);
}

/* Outline CTA — transparent over dark sections. Self-contained border (set on
   both states) so the theme fill / border does not leak in. */
.btn-cta--outline {
  background-color: transparent;
  border: 1px solid var(--on-dark-40);
}

.btn-cta--outline:hover {
  background-color: var(--on-dark-15);
  border-color: var(--on-dark-40);
}

/* Inverted CTA — white surface, navy text, over dark sections. Neutralises the
   theme border and pins navy text through hover for contrast on the light fill. */
.btn-cta--invert {
  background-color: var(--color-white);
  border-color: transparent;
  color: var(--color-navy);
}

.btn-cta--invert:hover {
  background-color: var(--color-light-neutral);
  border-color: transparent;
  color: var(--color-navy);
}

/* Dark CTA bar — dark surface, flips to accent on hover. Hover trigger is left to the
   module using this shared base. */

.btn-dark {
  align-items: center;
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  font-weight: var(--fw-medium);
  gap: var(--space-4);
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--easing-standard),
    color var(--duration-fast) var(--easing-standard);
}

.btn-dark__arrow {
  align-items: center;
  display: flex;
  flex: none;
}

.btn-dark__arrow .icon {
  height: 1.25rem;
  width: 1.375rem;
}

/* No button */

.no-button,
.no-button:hover,
.no-button:focus,
.no-button:active {
  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-bottom: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
  transition: none;
}
/* Fields */

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

/* Labels */

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

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

/* Help text */

form.hs-form legend {
  font-size: 0.875rem;
}

/* Inputs */

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

form.hs-form textarea {
  resize: vertical;
}

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

/* Inputs - checkbox/radio */

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

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

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

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

/* Inputs - date picker */

form.hs-form .hs-dateinput {
  position: relative;
}

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

form.hs-form .fn-date-picker .pika-table thead th {
  color: var(--color-white);
}

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

form.hs-form .fn-date-picker td .pika-button:hover,
form.hs-form .fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: var(--color-white);
}

/* Inputs - file picker */

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

/* Headings and text */

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

form.hs-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 var(--duration-fast) linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


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

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

  .body-container-wrapper .hs-search-field__button svg {
    height: 15px;
    fill: var(--color-white);
  }

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

  .body-container-wrapper .hs-search-field__suggestions li a {
    color: #494A52;
    padding: 0.35rem 0.7rem;
    text-decoration: none;
    transition: background-color var(--duration-slow);
  }

/* 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;
}

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

/* Global site header — navy bar with logo, primary nav, utility icons
   (search / account / language), a divider and an accent CTA. Collapses to a
   burger-triggered panel below 1024px.

   Optional background image: set --site-header-bg-image (e.g. url(...)) on
   .site-header to layer a photo behind the navy wash. */

.site-header {
  background: rgba(19, 60, 208, 0.4);
  backdrop-filter: blur(6px);
  background-position: center;
  background-size: cover;
  color: var(--color-white);
  z-index: var(--z-dropdown);
  position: fixed;
  width: 100%;
}

.site-header__inner {
  align-items: center;
  display: flex;
  gap: var(--space-6);
  min-height: 88px;
}

/* Skip link */

.site-header__skip {
  background-color: var(--color-accent);
  color: var(--color-white);
  left: -1000px;
  padding: var(--space-2) var(--space-4);
  position: absolute;
  top: -1000px;
  z-index: 1;
}

.site-header__skip:focus {
  left: var(--space-4);
  top: var(--space-4);
}

/* Brand / logo */

.site-header__brand {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
}

.site-header__brand img {
  display: block;
  height: auto;
  max-height: 54px;
  width: auto;
}

.site-header__brand .logo-company-name {
  color: var(--color-white);
}

/* Burger (mobile) */

.site-header__burger {
  color: var(--color-white);
  display: none;
  margin-left: auto;
  padding: var(--space-3);
}

.site-header__burger-box {
  display: block;
  height: 18px;
  position: relative;
  width: 24px;
}

.site-header__burger-bar,
.site-header__burger-bar::before,
.site-header__burger-bar::after {
  background-color: currentColor;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  width: 24px;
}

.site-header__burger-bar {
  top: 8px;
}

.site-header__burger-bar::before {
  top: -7px;
}

.site-header__burger-bar::after {
  top: 7px;
}

/* Menu region (nav + utilities + cta), right-aligned on desktop */

.site-header__menu {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-6);
  justify-content: flex-end;
}

/* Primary navigation */

.site-header .menu__wrapper {
  align-items: center;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
}

.site-header .menu__item--depth-1 {
  padding: var(--space-2) var(--space-3);
  text-transform: none;
}

.site-header .menu__link {
  color: var(--color-white);
  white-space: nowrap;
}

.site-header .menu__link:hover,
.site-header .menu__link:focus,
.site-header .menu__link--active-link,
.site-header .menu__link--active-branch {
  color: var(--color-sky);
}

.site-header .menu__child-toggle-icon {
  border-top-color: currentColor;
}

/* Dropdowns — open on hover / keyboard focus (desktop) */

@media (min-width: 768px) {

  .site-header .menu__item--has-submenu:hover>.menu__submenu,
  .site-header .menu__item--has-submenu:focus-within>.menu__submenu {
    display: block;
  }
}

.site-header .menu__submenu {
  background-color: var(--color-navy);
  border: 1px solid var(--on-dark-15);
}

.site-header .menu__submenu .menu__item {
  border-color: var(--on-dark-15);
}

.site-header .menu__submenu .menu__link {
  background-color: transparent !important;
  color: var(--color-white);
}

.site-header .menu__submenu .menu__link:hover,
.site-header .menu__submenu .menu__link:focus {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--color-sky);
}

/* Utility icons (search / account / language) */

.site-header__utils {
  align-items: center;
  display: flex;
  flex: none;
  gap: var(--space-3);
}

.site-header__util {
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  padding: var(--space-2);
}

.site-header__util:hover,
.site-header__util:focus-visible {
  color: var(--color-sky);
  padding: var(--space-2);
}

.site-header__util .icon {
  height: 1.375rem;
  width: 1.375rem;
}

.site-header__lang {
  align-items: center;
  color: var(--color-white);
  display: flex;
}

/* Divider between utilities and the CTA */

.site-header__divider {
  background-color: var(--on-dark-25);
  flex: none;
  height: 28px;
  width: 1px;
}

/* CTA — accent button with a trailing arrow (reuses .btn-cta) */

.site-header__cta {
  border-radius: var(--radius-sm);
  display: inline-flex;
  flex: none;
  gap: var(--space-3);
  justify-content: center;
  padding: var(--space-3) var(--space-5);
}

.site-header__cta .btn-cta__label {
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

/* Search drawer (revealed by the search toggle) */

.site-header__search[hidden] {
  display: none;
}

.site-header__search {
  background-color: var(--color-navy);
  border-top: 1px solid var(--on-dark-15);
  padding: var(--space-4) 0;
}

.site-header__search .hs-search-field {
  position: relative;
}

.site-header__search .hs-search-field__input {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--on-dark-25);
  border-radius: var(--radius-pill);
  color: var(--color-white);
  height: 44px;
  padding: 0 var(--space-5);
  width: 100%;
}

.site-header__search .hs-search-field__input::placeholder {
  color: var(--on-dark-50);
}

.site-header__search .hs-search-field__input:focus {
  border-color: var(--color-accent);
  outline: none;
}

/* Tablet / mobile: burger-triggered panel */

@media (max-width: 1023px) {
  .site-header__burger {
    display: inline-flex;
  }

  .site-header__menu {
    align-items: stretch;
    background-color: var(--color-navy);
    border-top: 1px solid var(--on-dark-15);
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    inset: 100% 0 auto 0;
    padding: var(--space-5) var(--space-gutter);
    position: absolute;
  }

  .site-header__menu.is-open {
    display: flex;
  }

  .site-header .menu__wrapper {
    align-items: stretch;
    flex-direction: column;
    gap: 0;
  }

  .site-header__utils {
    justify-content: flex-start;
  }

  .site-header__divider {
    display: none;
  }

  .site-header__cta {
    align-self: flex-start;
  }
}
:root {
  --module-padding-block: 3rem;
}

.container {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 1440px) {
  .container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }
}


/* 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%;
}
.module-header {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.module-header__uptitle-text,
.module-header__title {
  text-transform: uppercase;
}

@media screen and (min-width: 1024px) {
  .module-header {
    flex-direction: row;
    gap: 2rem;
  }

  .module-header__uptitle {
    flex: 1 1 100px;
    max-width: 200px;
  }

  .module-header__content {
    flex: 0 1 464px;
    margin-left: auto;
    max-width: 464px;
  }
}
/* Editorial card */

.editorial-list {
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.editorial-list__item {
  display: flex;
}

.editorial-card {
  background-color: var(--color-light1);
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
  height: 100%;
  position: relative;
}

/* Optional thumbnail at the top of the card (opt-in via article_card show_image). */
.editorial-card__media {
  aspect-ratio: 16 / 10;
  display: block;
  overflow: hidden;
}

.editorial-card__media img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
  transition: transform var(--duration-fast) linear;
}

.editorial-card--media:hover .editorial-card__media img,
.editorial-card--media:focus-within .editorial-card__media img {
  transform: scale(1.04);
}

.editorial-card__content {
  display: flex;
  padding: 0.75rem;
  text-decoration: none;
}

.editorial-card__eyebrow,
.editorial-card__meta {
  font-weight: var(--fw-bold);
  margin: 0;
  text-transform: uppercase;
}

.editorial-card__title {
  margin: 0;
}

.editorial-card__title-link {
  color: inherit;
  font-family: var(--font-secondary);
  font-weight: 500;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--duration-fast) linear;
}

.editorial-card__title-link::after {
  content: "";
  inset: 0;
  position: absolute;
}

.editorial-card__title-link:focus-visible {
  outline: none;
}

.editorial-card:hover .editorial-card__title-link,
.editorial-card:focus-within .editorial-card__title-link {
  color: var(--color-accent);
}

.editorial-card__excerpt {
  margin: 0;
}

.editorial-card__readmore {
  font-family: var(--font-primary);
  margin-top: auto;
}

.editorial-card:hover .editorial-card__readmore,
.editorial-card:focus-within .editorial-card__readmore {
  background-color: var(--color-accent);
  color: var(--color-black);
}

.editorial-card:focus-within {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .editorial-list--roomy {
    gap: 10px;
  }
}
/* Long-form article — rich body beside a sticky sidebar (auto table of contents,
   share links, signup). Shared by the position-content.module (open-position
   page) and the coded blog-post template, so both get the same treatment from
   one source. Block name stays .position-content (the original module contract).
   Loaded globally via main.css. */

.position-content {
  background-color: var(--color-white);
  min-height: 100%;
}

.position-content__inner {
  display: grid;
  gap: 2.5rem;
  min-height: 100%;
  padding-top: 2rem;
}

@media (min-width: 992px) {
  .position-content__inner {
    gap: 6rem;
    grid-template-columns: minmax(0, 350px) minmax(0, 660px);
    padding-top: 0;
  }

  /* Body is first in the DOM (mobile + a11y); sidebar sits left on desktop. */
  .position-content__sidebar {
    grid-column: 1;
    grid-row: 1;
  }

  .position-content__main {
    grid-column: 2;
    grid-row: 1;
    margin-top: 5rem;
  }
}

/* Sidebar */
.position-content__sticky {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  height: 100%;
  padding-bottom: 2rem;
}

@media (min-width: 992px) {
  .position-content__sticky {
    min-height: calc(100vh - 3rem);
  }

  .position-content__newsletter {
    margin-top: 30vh;
  }
}

/* Table of contents — each entry is a tab; the active one is a bordered white
   card with a blue label. Type comes from .text-tag / .text-small utilities. */
.position-content__toc {
  background-color: var(--color-light-bg);
  padding-top: 4rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
  padding-bottom: 2rem;
}


.position-content__toc-title,
.position-content__share-title {
  color: var(--color-primary-dark);
  margin: 0 0 0.85rem;
  font-family: var(--font-secondary);
  text-transform: uppercase;
}

.position-content__toc-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.position-content__toc-link {
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: rgba(165, 173, 186, 1);
  display: block;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--duration-fast) linear,
    border-color var(--duration-fast) linear,
    color var(--duration-fast) linear;
}

.position-content__toc-link:hover {
  color: var(--color-link);
}

.position-content__toc-link.is-active {
  background-color: var(--color-white);
  border-color: var(--border-on-light);
  color: var(--color-link);
}

/* Mobile TOC toggle — a pill button that opens the TOC as a dropdown panel.
   Hidden on desktop, where the nav shows inline in the sticky sidebar. */
.position-content__toc-trigger {
  display: none;
}

@media (max-width: 991px) {
  /* The trigger is a fixed pill pinned to the bottom of the viewport — the
     sidebar (and its inline TOC) stacks below the article, out of easy reach. */
  .position-content__toc-trigger:not([hidden]) {
    align-items: center;
    background-color: var(--color-primary-dark);
    border: none;
    border-radius: var(--radius-pill);
    bottom: 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    color: var(--color-white);
    cursor: pointer;
    display: inline-flex;
    gap: 0.4rem;
    left: 50%;
    max-width: calc(100vw - 2rem);
    padding: 0.45rem 0.85rem;
    position: fixed;
    transform: translateX(-50%);
    z-index: 60;
  }

  .position-content__toc-trigger-label {
    color: var(--color-white);
    font-size: 0.7rem; /* allow-custom-type */
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .position-content__toc-trigger .icon {
    block-size: 0.85rem;
    flex-shrink: 0;
    inline-size: 0.85rem;
    transition: transform var(--duration-fast) linear;
  }

  .position-content__toc-trigger[aria-expanded="true"] .icon {
    transform: rotate(180deg);
  }

  /* The nav becomes a fixed dropdown panel above the trigger — collapsed by
     default, revealed via .is-open (toggled in longform-article.js). */
  .position-content__toc {
    bottom: 5rem;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    display: none;
    left: 1rem;
    margin: 0;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.5rem;
    position: fixed;
    right: 1rem;
    z-index: 59;
  }

  .position-content__toc.is-open {
    display: block;
  }
}

/* Share */
.position-content__share-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.position-content__share-link {
  align-items: center;
  border: 1px solid var(--border-on-light);
  border-radius: var(--radius-circle);
  color: var(--color-primary-dark);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  transition: background-color var(--duration-fast) linear,
    border-color var(--duration-fast) linear,
    color var(--duration-fast) linear;
  width: 2.5rem;
}

.position-content__share-link:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

.position-content__share-link svg {
  fill: currentColor;
  height: 1.05rem;
  width: 1.05rem;
}

/* Signup card — light surface (pale brand background, dark copy). The form
   inside is styled by the shared .hs-form-light component. */
.position-content__newsletter {
  background-color: var(--color-light-bg);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  padding: 2rem;
}

.position-content__newsletter-title {
  color: var(--color-primary-dark);
  margin: 0;
}

.position-content__newsletter-text {
  color: var(--color-secondary-dark);
  margin: 0.6rem 0 1.5rem;
}

.position-content__newsletter-placeholder {
  color: var(--color-secondary-dark);
  margin: 0;
}

@media (min-width: 1024px) {
  .position-content__share {
    margin-top: 100px;
  }
}

/* Article body — HubSpot rich text on the shared .typography base. Block
   rhythm, list margins and paragraph sizing come from .typography; only the
   custom heading scale, list indent, link colour and image treatment are
   layered on here (custom type is intentional). */
.position-content__body h2,
.position-content__body h3,
.position-content__body h4 {
  font-family: var(--font-secondary);
  line-height: 1.15; /* allow-custom-type */
  margin-bottom: 1rem;
  margin-top: 2.5rem;
}

.position-content__body h2 {
  font-size: 2rem; /* allow-custom-type */
  font-weight: 400;
  scroll-margin-top: 1.5rem;
}

.position-content__body h3 {
  font-size: 1.5rem; /* allow-custom-type */
  font-weight: 400;
}

.position-content__body h4 {
  font-size: 1.25rem; /* allow-custom-type */
  font-weight: var(--fw-medium);
}

.position-content__body ul,
.position-content__body ol {
  padding-left: 1.25rem;
}

.position-content__body li {
  margin-bottom: 0.5rem;
}

.position-content__body a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.2rem;
}

.position-content__body img {
  border-radius: var(--radius-sm);
  display: block;
  height: auto;
  margin: 1.5rem 0;
  max-width: 100%;
}
/* Reusable inline text link with trailing SVG arrow. */

.arrow-link {
  align-items: center;
  color: var(--color-link);
  display: inline-flex;
  gap: var(--space-2);
  text-decoration: none;
}

.arrow-link:hover .icon {
  transform: translateX(5px);
}

.arrow-link .icon {
  block-size: 1.1rem;
  flex: 0 0 auto;
  inline-size: 1.1rem;
  transition: transform 240ms ease-in-out;
}

.arrow-link--compact .icon {
  block-size: 10px;
  inline-size: 11px;
}

.arrow-link--bright {
  color: var(--color-bright-blue);
}

.arrow-link--on-dark {
  color: var(--color-white);
}
/* Dark HubSpot form */

.hs-form-dark,
.hs-form-dark .hbspt-form,
.hs-form-dark .hs-form {
  background: transparent;
}

.hs-form-dark .form-title,
.hs-form-dark .hs-form-title {
  background: transparent;
  color: var(--color-white);
}

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

.hs-form-dark .hs-richtext {
  color: var(--on-dark-70);
  margin-bottom: 1rem;
}

.hs-form-dark .hs-form-field {
  border: 1px solid var(--on-dark-25);
  margin-bottom: 1rem;
  padding: 0.625rem 1rem;
}

.hs-form-dark .hs-form-field:focus-within {
  border-color: var(--color-accent);
}

.hs-form-dark .hs-form-field > label {
  color: var(--on-dark-60);
  display: block;
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
}

.hs-form-dark .hs-form-required {
  color: #e8a0a0;
  margin-left: 0.15rem;
}

.hs-form-dark .hs-form-field .input {
  margin: 0;
}

.hs-form-dark .hs-input {
  background-color: transparent;
  border: 0;
  color: var(--color-white);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  padding: 0;
  width: 100%;
}

.hs-form-dark .hs-input::placeholder {
  color: var(--on-dark-40);
}

.hs-form-dark textarea.hs-input {
  min-height: var(--hs-form-textarea-min-height, 5rem);
  resize: vertical;
}

.hs-form-dark select.hs-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 1.5rem;
}

.hs-form-dark select.hs-input option {
  color: #111111;
}

.hs-form-dark .hs-fieldtype-booleancheckbox,
.hs-form-dark .hs-fieldtype-checkbox,
.hs-form-dark .hs-fieldtype-radio {
  border: 0;
  padding: 0;
}

.hs-form-dark .inputs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

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

.hs-form-dark .inputs-list label {
  align-items: center;
  color: var(--color-white);
  display: flex;
  font-size: 1rem;
  gap: 0.5rem;
  margin: 0;
}

.hs-form-dark .hs-input[type="checkbox"],
.hs-form-dark .hs-input[type="radio"] {
  height: auto;
  width: auto;
}

.hs-form-dark input[type="file"].hs-input {
  color: var(--on-dark-70);
  font-size: 0.9375rem;
}

.hs-form-dark .hs-error-msgs {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.hs-form-dark .hs-error-msg {
  color: #ff8a8a;
  font-size: 0.8125rem;
}

.hs-form-dark .hs_submit .actions {
  margin: 1.5rem 0 0;
  padding: 0;
}

.hs-form-dark .hs-button {
  background-color: var(--color-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12h13m0 0-5.5-5.5M18 12l-5.5 5.5' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 1.25rem center;
  background-repeat: no-repeat;
  border: 0;
  color: var(--color-black);
  cursor: pointer;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  padding: 1rem 1.25rem;
  text-align: left;
  transition: filter var(--duration-fast) linear;
  width: 100%;
}

.hs-form-dark .hs-button:hover {
  filter: brightness(0.95);
}

@media (min-width: 480px) {
  .hs-form-dark .form-columns-2 {
    display: flex;
    gap: 1rem;
  }

  .hs-form-dark .form-columns-2 .hs-form-field {
    flex: 1;
  }
}
/* Light HubSpot form
   For a HubSpot form on a light card/section — e.g. the open-position "Get
   exclusive content first" signup. Labels sit above white, bordered inputs and
   the submit is a solid blue button. Mirror of components/_hubspot-form-dark.css
   for the inverse surface. */

.hs-form-light,
.hs-form-light .hbspt-form,
.hs-form-light .hs-form {
  background: transparent;
}

.hs-form-light .form-title,
.hs-form-light .hs-form-title {
  background: transparent;
  color: var(--color-primary-dark);
}

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

.hs-form-light .hs-richtext {
  color: var(--color-secondary-dark);
  margin-bottom: 1rem;
}

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

.hs-form-light .hs-form-field > label {
  color: var(--color-primary-dark);
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-semibold);
  margin-bottom: 0.4rem;
}

.hs-form-light .hs-form-required {
  color: var(--color-link);
  margin-left: 0.15rem;
}

.hs-form-light .hs-form-field .input {
  margin: 0;
}

.hs-form-light .hs-input {
  background-color: var(--color-white);
  border: 1px solid var(--color-light-neutral);
  border-radius: var(--radius-sm);
  color: var(--color-primary-dark);
  font-family: inherit;
  font-size: 1rem;
  outline: none;
  padding: 0.7rem; /* base elements/_forms.css wins on specificity; match it */
  width: 100%;
}

.hs-form-light .hs-input::placeholder {
  color: var(--color-dark-neutral);
}

.hs-form-light .hs-input:focus,
.hs-form-light .hs-form-field:focus-within .hs-input {
  border-color: var(--color-link);
}

.hs-form-light .hs-input.invalid.error {
  border-color: var(--color-accent);
}

.hs-form-light textarea.hs-input {
  min-height: var(--hs-form-textarea-min-height, 5rem);
  resize: vertical;
}

.hs-form-light select.hs-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23172B4D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 0.85rem center;
  background-repeat: no-repeat;
  background-size: 14px;
  padding-right: 2rem;
}

/* Checkbox / radio rows (incl. GDPR consent) */
.hs-form-light .hs-fieldtype-booleancheckbox,
.hs-form-light .hs-fieldtype-checkbox,
.hs-form-light .hs-fieldtype-radio {
  border: 0;
  padding: 0;
}

.hs-form-light .inputs-list {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

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

.hs-form-light .inputs-list label {
  align-items: flex-start;
  color: var(--color-secondary-dark);
  display: flex;
  font-size: 0.875rem;
  font-weight: 400;
  gap: 0.5rem;
  margin: 0;
}

.hs-form-light .hs-input[type="checkbox"],
.hs-form-light .hs-input[type="radio"] {
  height: auto;
  margin-top: 0.15rem;
  width: auto;
}

.hs-form-light .legal-consent-container .hs-form-booleancheckbox-display > span,
.hs-form-light .legal-consent-container .hs-richtext {
  color: var(--color-secondary-dark);
  font-size: 0.875rem;
}

/* The flex row already spaces the box from the text; drop the base's !important
   left margin on the consent label so the gap doesn't double up. */
.hs-form-light .legal-consent-container .hs-form-booleancheckbox-display > span,
.hs-form-light .legal-consent-container .hs-form-booleancheckbox-display > span p {
  margin-left: 0 !important;
}

.hs-form-light a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15rem;
}

.hs-form-light .hs-error-msgs {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.hs-form-light .hs-error-msg {
  color: var(--color-accent);
  font-size: 0.8125rem;
}

.hs-form-light .hs_submit .actions {
  margin: 1.5rem 0 0;
  padding: 0;
}

.hs-form-light .hs-button {
  background-color: var(--color-persian);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  padding: 0.75rem 1.75rem;
  transition: filter var(--duration-fast) linear;
  width: auto;
}

.hs-form-light .hs-button:hover {
  filter: brightness(0.92);
}

@media (min-width: 480px) {
  .hs-form-light .form-columns-2 {
    display: flex;
    gap: 1rem;
  }

  .hs-form-light .form-columns-2 .hs-form-field {
    flex: 1;
  }
}
/* Accordion section
Shared header + panel for collapsible page sections
(e.g. the accordions and feature modules, plus several example modules).
Each module is a single <details>; the <summary> is the header bar:
eyebrow ——— rule ——— +/- toggle. Markup via the accordion_header macro
(_macros/components.html); the open state is the open_by_default field.
*/

.accordion-section {
  padding: var(--module-padding-block) var(--space-gutter);
}

.accordion-section__header {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: 1.25rem;
  list-style: none;
}

.accordion-section__header::-webkit-details-marker {
  display: none;
}

.accordion-section__eyebrow {
  flex: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.accordion-section__rule {
  background-color: rgba(0, 0, 0, 0.2);
  flex: 1;
  height: 1px;
}

.accordion-section__toggle {
  flex: none;
  font-size: 1.5rem;
  line-height: 1;
}

.accordion-section__toggle::after {
  content: "+";
}

.accordion-section[open] .accordion-section__toggle::after {
  content: "\2212";
}

.accordion-section__header:hover {
  color: var(--color-accent);
}

.accordion-section__panel {
  padding-top: var(--module-padding-block);
}

@media (min-width: 1024px) {
  .accordion-section {
    padding: 0 4rem;
  }

  .accordion-section__panel {
    padding-top: 3.5rem;
  }

  /* Content sits in the right half (left column intentionally empty). */
  .accordion-section__panel--aside {
    margin-left: auto;
    width: 50%;
  }
}
/* Decorative brand shapes
   Base style for SVGs rendered by the shape() macro (e.g. shape("scallop")).
   Color follows currentColor; each module positions its own instance via a
   module-scoped class (e.g. absolute bottom/left, width, z-index). */

.shape {
  display: block;
  height: auto;
  max-width: 100%;
  pointer-events: none;
}
/* Pixelation
   Decorative frosted squares laid over the corners of an image.

   The layer matches the image box (`inset: 0`), so the four clusters anchor to
   the REAL corners of the photo whatever its ratio. An earlier version made the
   layer a square — sized from the wrapper's height and centred — to buy rotation
   as a plain `transform: rotate()`, since a square maps onto itself at every
   quarter turn. That only held on a 1:1 image: on a 3:2 photo the square was
   inset ~17% on each side and the clusters landed in the middle of the picture;
   on a 2:3 photo it overhung by as much and got clipped by the section.

   So rotation is no longer a container transform. The macro remaps which corner
   each cluster occupies (`data-corner`) and `.pixelation--rot-N` spins each
   cluster on itself. Flips stay a container transform — a rectangle is stable
   under a mirror, only rotation was the problem.

   Four clusters, all sized from a single scalar --pixelation-unit so the
   decoration keeps its calibre on a wide photo and on a tall one alike:

     cluster        pixels   grid    width   alpha ramp
     left-top         6      2 x 3    2u     .6 .5 .4 .3 .2 .1
     right-top        2      1 x 2    1u     .4 .2
     left-bottom      3      1 x 3    1u     .6 .4 .2
     right-bottom     4      2 x 2    2u     .2 .3 .4 .5

   The consuming module owns the wrapper — it needs `position: relative` and must
   NOT clip — and sets the FALLBACK tint:  .hero__media { --pixelation-color: #fff; }
   When the pixelation group's color field is set, the macro writes
   --pixelation-color inline on the layer and the editor's pick wins.

   It also has to LEAVE ROOM: a cluster overhangs the wrapper by up to 3 x --u on
   the side it sits on (a 2u-wide cluster pushed a further 1u out), and rotation
   moves the widest cluster around, so the room must exist on all four sides. At
   the default --u of 10% that is 30% of the wrapper width — i.e. the wrapper can
   be at most ~62% of a full-bleed column. Where a grid gap or page margin already
   absorbs it, the wrapper can be wider; see pixelation-demo.module for both cases.

   Rendered by the pixelation() / image_pixelation() macros in
   src/modules/_macros/components.html. */

/* The knobs — --pixelation-color, --pixelation-blur and --pixelation-unit — are
   read with a var() fallback and never declared on .pixelation itself. A default
   here would beat the value inherited from the wrapper, so a module setting the
   tint or the calibre on its own container would be silently ignored. */

.pixelation {
  /* 10% => the 2-column cluster spans 20% of the width, the calibre the square
     layer produced on a 1:1 image. The clamp keeps it from swelling on a wide
     media or vanishing on mobile. The percentage resolves against the wrapper. */
  --u: var(--pixelation-unit, clamp(16px, 10%, 60px));

  inset: 0;
  pointer-events: none;
  position: absolute;
}

.pixelation__pixel {
  -webkit-backdrop-filter: blur(var(--pixelation-blur, 5px));
  backdrop-filter: blur(var(--pixelation-blur, 5px));
  aspect-ratio: 1 / 1;
  background-color: rgb(
    from var(--pixelation-color, #fff) r g b / var(--alpha)
  );
}

/* Relative color syntax is Safari 16.4+ / Firefox 128+. Older engines drop the
   declaration above and would paint nothing, so fall back to a flat tint and
   carry the ramp on opacity instead. */
@supports not (background-color: rgb(from white r g b / 1)) {
  .pixelation__pixel {
    background-color: var(--pixelation-color, #fff);
    opacity: var(--alpha);
  }
}

.pixelation__left-top,
.pixelation__right-top,
.pixelation__left-bottom,
.pixelation__right-bottom {
  display: grid;
  position: absolute;
}

/* --- the clusters: shape and ramp only, no placement -------------------- */

.pixelation__left-top {
  grid-template-columns: repeat(2, 1fr);
  width: calc(var(--u) * 2);
}

.pixelation__left-top .pixelation__pixel:nth-child(1) { --alpha: 0.6; }
.pixelation__left-top .pixelation__pixel:nth-child(2) { --alpha: 0.5; }
.pixelation__left-top .pixelation__pixel:nth-child(3) { --alpha: 0.4; }
.pixelation__left-top .pixelation__pixel:nth-child(4) { --alpha: 0.3; }
.pixelation__left-top .pixelation__pixel:nth-child(5) { --alpha: 0.2; }
.pixelation__left-top .pixelation__pixel:nth-child(6) { --alpha: 0.1; }

.pixelation__right-top {
  grid-template-columns: repeat(1, 1fr);
  width: var(--u);
}

.pixelation__right-top .pixelation__pixel:nth-child(1) { --alpha: 0.4; }
.pixelation__right-top .pixelation__pixel:nth-child(2) { --alpha: 0.2; }

.pixelation__left-bottom {
  grid-template-columns: repeat(1, 1fr);
  width: var(--u);
}

.pixelation__left-bottom .pixelation__pixel:nth-child(1) { --alpha: 0.6; }
.pixelation__left-bottom .pixelation__pixel:nth-child(2) { --alpha: 0.4; }
.pixelation__left-bottom .pixelation__pixel:nth-child(3) { --alpha: 0.2; }

.pixelation__right-bottom {
  grid-template-columns: repeat(2, 1fr);
  width: calc(var(--u) * 2);
}

.pixelation__right-bottom .pixelation__pixel:nth-child(1) { --alpha: 0.2; }
.pixelation__right-bottom .pixelation__pixel:nth-child(2) { --alpha: 0.3; }
.pixelation__right-bottom .pixelation__pixel:nth-child(3) { --alpha: 0.4; }
.pixelation__right-bottom .pixelation__pixel:nth-child(4) { --alpha: 0.5; }

/* --- the four slots, keyed off data-corner ------------------------------ */

/* These use the individual `translate:` property rather than `transform:`.
   translate: is applied last in the transform chain (outermost), so the corner
   overhang stays expressed in page space while `rotate:` below turns the cluster
   on itself. Writing both into one `transform:` would spin the overhang too.
   Overhangs are expressed in --u so they stay proportional to the cluster. */

.pixelation [data-corner="lt"] {
  left: 0;
  top: 0;
  translate: -50% -33.33%;
}

.pixelation [data-corner="rt"] {
  right: 0;
  top: 0;
  translate: calc(100% + var(--u)) calc(-50% - var(--u) * 0.6);
}

.pixelation [data-corner="lb"] {
  bottom: 0;
  left: 0;
  translate: calc(-100% - var(--u)) calc(33.33% + var(--u) * 0.6);
}

.pixelation [data-corner="rb"] {
  right: 0;
  bottom: 0;
  translate: 50% 50%;
}

/* --- rotation: each cluster turns on itself ----------------------------- */

.pixelation--rot-90 > * { rotate: 90deg; }
.pixelation--rot-180 > * { rotate: 180deg; }
.pixelation--rot-270 > * { rotate: 270deg; }

/* Optional wrapper for image_pixelation(), when a module has no media wrapper
   of its own. Must not clip: the clusters overhang the image. */
.pixelation-media {
  position: relative;
  z-index: 1;
}

.pixelation-media__image {
  display: block;
  height: auto;
  width: 100%;
}

/* Forced colors would repaint the translucent squares as opaque system colors,
   dropping solid blocks onto the photo. It is pure decoration — hide it. */
@media (forced-colors: active) {
  .pixelation {
    display: none;
  }
}
/* Global "back to top" button — fixed bottom-right, revealed on scroll by JS. */

.back-to-top {
  align-items: center;
  background-color: var(--color-primary-dark);
  block-size: 3rem;
  border: 0;
  border-radius: var(--radius-circle);
  /* Stacked above HubSpot's chat bubble (60px launcher + ~26px inset = ~86px). */
  bottom: 96px;
  box-shadow: var(--shadow-dropdown);
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  inline-size: 3rem;
  inset-inline-end: var(--space-6);
  justify-content: center;
  opacity: 0;
  position: fixed;
  transform: translateY(0.75rem);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
  visibility: hidden;
  z-index: var(--z-dropdown);
}

/* Revealed once the user has scrolled past the threshold (toggled in main.js). */
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--color-bright-blue);
}

.back-to-top:focus-visible {
  outline: 2px solid var(--color-bright-blue);
  outline-offset: 2px;
}

.back-to-top .icon {
  block-size: 1.1rem;
  inline-size: 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.25s ease;
    transform: none;
  }

  .back-to-top.is-visible {
    transform: none;
  }
}

/* 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;
  }
}
/* Color utilities
Tailwind-style helper classes for the HYPE theme palette. Each color gets a text
and a background utility. The core palette is exposed as CSS custom properties on
:root, seeded from the "Global colors" theme settings, so the utilities stay in
sync when an editor changes the palette. The infographic / data-viz palette is a
fixed scale, defined as static custom properties below.

HYPE core: Cardinal Red (#FF003E) action/CTA, a deep-blue system (Navy #080074,
Oxford #040B35, Persian #133CD0, Pale azure #7DE1FF), Atlassian-style neutrals
(Primary dark #172B4D, Secondary dark #42526E, Dark neutral #A5ADBA, Light
neutral #DFE1E6, Light Background #F4F5F7), and Primary Text #000.

NOTE: hex values were read from the brand image and may need fine-tuning. Core
colors live in the theme settings (src/fields.json); the infographic scale and
the brand gradient live in this :root block — correcting one is a single line.
*/

:root {
  /* Core palette — seeded from theme settings. Brand-named aliases and the
     legacy --color-* names sit side by side so existing modules keep resolving. */
  --color-accent: #FF003E;        /* Cardinal Red — action / CTA */
  --color-cardinal: #FF003E;
  --color-navy: #080074;           /* Navy Blue — primary dark */
  --color-black: #080074;
  --color-oxford: #040B35;        /* Oxford Blue — deepest */
  --color-persian: #133CD0;      /* Persian blue — secondary highlight */
  --color-bright-blue: #1980eb;                                  /* Bright blue — extra highlight */
  --color-azure: #7DE1FF;    /* Pale azure — soft accent */
  --color-sky: #7DE1FF;      /* legacy alias for azure */
  --color-primary-dark: #172B4D;   /* Primary dark — UI text */
  --color-dark1: #172B4D;
  --color-secondary-dark: #42526E;
  --color-dark-neutral: #A5ADBA;
  --color-text: #000000;           /* Primary Text — #000 */
  --color-dark2: #000000;
  --color-light-neutral: #DFE1E6; /* Light neutral — cards */
  --color-light1: #DFE1E6;
  --color-light-bg: #F4F5F7;   /* Light Background — sections */
  --color-light2: #F4F5F7;

  /* Semantic roles */
  --color-link: var(--color-bright-blue);            /* Text links & arrow accent */

  /* Brand gradient — provisional stops read from the image (Persian → Oxford).
     Adjust the two stops / angle to the official spec. */
  --gradient-HYPE: linear-gradient(180deg, #133CD0 0%, #040B35 100%);
  --gradient-HYPE-glow:
    linear-gradient(180deg, rgba(255, 255, 255, 0) calc(100% - 1450px), rgba(255, 255, 255, .18) calc(100% - 1325px), rgba(255, 255, 255, .48) calc(100% - 1200px), rgba(255, 255, 255, .78) calc(100% - 1100px), #fff calc(100% - 1000px), #fff 100%),
    radial-gradient(118% 18% at 51% calc(100% - 980px), rgba(255, 255, 255, .88) 0 18%, rgba(255, 255, 255, .35) 30%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(58% 52% at 94% calc(100% - 1120px), rgba(255, 255, 255, .86) 0 14%, rgba(255, 255, 255, .48) 23%, rgba(6, 31, 112, .74) 47%, rgba(6, 31, 112, 0) 76%),
    radial-gradient(48% 48% at 54% calc(100% - 1080px), rgba(255, 255, 255, .88) 0 13%, rgba(255, 255, 255, .5) 22%, rgba(0, 98, 255, .78) 46%, rgba(0, 98, 255, 0) 75%),
    linear-gradient(123deg, var(--color-oxford) 0%, var(--color-navy) 15%, #0836dc 45.9%, var(--color-azure) 100%);

  /* Infographic / data-viz palette — fixed scale (not editor-tuned). Values read
     from the brand image; correct any here. Persian + azure reuse the core. */
  --color-info-comp: #40A48E;
  --color-info-celadon: #94f0b0;
  --color-info-steel: #4093a4;
  --color-info-nonphoto: #a4dded;
  --color-info-persian: #133CD0;
  --color-info-azure: #7DE1FF;
  --color-info-heliotrope: #DB60F9;
  --color-info-mauve: #f0b8f9;
  --color-info-shocking: #e215bb;
  --color-info-rose: #ff85d0;
  --color-info-carrot: #E69429;
  --color-info-mustard: #e1a92a;
}

/* Text color */

.text-accent { color: var(--color-accent); }
.text-cardinal { color: var(--color-cardinal); }
.text-black { color: var(--color-black); }
.text-navy { color: var(--color-navy); }
.text-oxford { color: var(--color-oxford); }
.text-persian { color: var(--color-persian); }
.text-bright-blue { color: var(--color-bright-blue); }
.text-azure { color: var(--color-azure); }
.text-sky { color: var(--color-sky); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-dark1 { color: var(--color-dark1); }
.text-secondary-dark { color: var(--color-secondary-dark); }
.text-dark-neutral { color: var(--color-dark-neutral); }
.text-dark2 { color: var(--color-dark2); }
.text-light-neutral { color: var(--color-light-neutral); }
.text-light1 { color: var(--color-light1); }

/* Background color */

.bg-accent { background-color: var(--color-accent); }
.bg-cardinal { background-color: var(--color-cardinal); }
.bg-black { background-color: var(--color-black); }
.bg-navy { background-color: var(--color-navy); }
.bg-oxford { background-color: var(--color-oxford); }
.bg-persian { background-color: var(--color-persian); }
.bg-bright-blue { background-color: var(--color-bright-blue); }
.bg-azure { background-color: var(--color-azure); }
.bg-sky { background-color: var(--color-sky); }
.bg-primary-dark { background-color: var(--color-primary-dark); }
.bg-dark1 { background-color: var(--color-dark1); }
.bg-secondary-dark { background-color: var(--color-secondary-dark); }
.bg-dark-neutral { background-color: var(--color-dark-neutral); }
.bg-dark2 { background-color: var(--color-dark2); }
.bg-light-neutral { background-color: var(--color-light-neutral); }
.bg-light1 { background-color: var(--color-light1); }
.bg-light-bg { background-color: var(--color-light-bg); }
.bg-light2 { background-color: var(--color-light2); }
.bg-gradient { background-image: var(--gradient-HYPE); }
.bg-gradient-glow {
  background-color: var(--color-oxford);
  background-image: var(--gradient-HYPE-glow);
  background-position: center;
  background-size: cover;
}

/* Infographic / data-viz backgrounds */

.bg-info-comp { background-color: var(--color-info-comp); }
.bg-info-celadon { background-color: var(--color-info-celadon); }
.bg-info-steel { background-color: var(--color-info-steel); }
.bg-info-nonphoto { background-color: var(--color-info-nonphoto); }
.bg-info-persian { background-color: var(--color-info-persian); }
.bg-info-azure { background-color: var(--color-info-azure); }
.bg-info-heliotrope { background-color: var(--color-info-heliotrope); }
.bg-info-mauve { background-color: var(--color-info-mauve); }
.bg-info-shocking { background-color: var(--color-info-shocking); }
.bg-info-rose { background-color: var(--color-info-rose); }
.bg-info-carrot { background-color: var(--color-info-carrot); }
.bg-info-mustard { background-color: var(--color-info-mustard); }


/* Page backdrop: a dark brand gradient at the top that resolves to white, and a
   soft blue transition into the dark footer at the bottom.

   The two top layers are capped with min(1450px, 100%) rather than a flat
   1450px. Anchored to the top at a fixed height, a page shorter than 1450px
   only ever showed the *dark* upper part of the gradient — so every module with
   a transparent or light background landed dark-on-dark and the copy became
   unreadable. Capping to the page height compresses the ramp instead, so the
   fade to white always completes within the page and short pages stay legible.
   Page length is now the layout's problem, not the content's. */
.body-wrapper {
  background-color: var(--color-white);
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-gradient-bottom.svg),
    linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(125, 225, 255, 0.22) 42%, rgba(8, 0, 116, 0.10) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 72%, var(--color-white) 100%),
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-top.svg);
  background-position:
    left bottom -120px,
    center bottom -75px,
    center 0,
    center 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    1920px auto,
    100% min(900px, 45%),
    100% min(1450px, 100%),
    120% min(1450px, 100%);
}

.body-wrapper--homepage {
  background-color: var(--color-white);
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-gradient-bottom.svg),
    linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(125, 225, 255, 0.22) 42%, rgba(8, 0, 116, 0.10) 100%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0) 72%, var(--color-white) 100%),
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-gradrient-top-home.svg);
  background-position:
    left bottom -120px,
    center bottom -75px,
    center 0,
    center 0;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat;
  background-size:
    1920px auto,
    100% min(900px, 45%),
    100% min(1450px, 100%),
    100% min(1450px, 100%);
}

@media (max-width: 767px) {
  .body-wrapper,
  .body-wrapper--homepage {
    background-image:
      url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-gradient-mobile.svg),
      linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(125, 225, 255, 0.22) 42%, rgba(8, 0, 116, 0.10) 100%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 72%, var(--color-white) 100%),
      url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-top.svg);
    background-position:
      left bottom -120px,
      center bottom -75px,
      center 0,
      center 0;
    background-size:
      100% auto,
      100% min(900px, 45%),
      100% min(1450px, 100%),
      120% min(1450px, 100%);
  }

  .body-wrapper--homepage {
    background-image:
      url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-gradient-mobile.svg),
      linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(125, 225, 255, 0.22) 42%, rgba(8, 0, 116, 0.10) 100%),
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 72%, var(--color-white) 100%),
      url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/bg-gradrient-top-home.svg);
    background-size:
      100% auto,
      100% min(900px, 45%),
      100% min(1450px, 100%),
      100% min(1450px, 100%);
  }
}

:root .bg-flair-top-left {
  background-position: left calc(0px - 800px) top calc(0px - 150px) !important;
}

@media (min-width: 1500px) {
  :root .bg-flair-top-left {
  background-position: left calc(0px - 1200px) top calc(0px - 200px) !important;
}
}







:root .bg-flair-bottom-right {
  background-position-x: right !important;
  background-position-y: calc(50% + 500px) !important;
  background-repeat: no-repeat;
  background-size: 710px !important;
}


:root .bg-flair-bottom-left {
  background-position-x: left !important;
  background-position-y: center !important;
  background-repeat: no-repeat;
  background-size: 710px !important;
}







.u-flair-measurable-results {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg),
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-5.svg);
  background-position:
    right calc(0% + 100px),
    left calc(0% - 130px);
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    710px,
    710px;
}



.u-flair-measurable-results-2 {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg);
  background-position: right calc(0% + 1200px);
  background-repeat: no-repeat;
  background-size: 710px;
}

.u-flair-measurable-results-3 {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg),
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-5.svg);
  background-position:
    right calc(0% + 100px),
    left calc(0% - 130px);
  background-repeat:
    no-repeat,
    no-repeat;
  background-size:
    710px,
    710px;
}

.u-flair-measurable-results-4 {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-5.svg);
  background-position:
    left calc(0% + 300px);
  background-repeat:
    no-repeat;
  background-size:
    710px;
}

.u-flair-measurable-results-5 {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/degrade_bg_supp.svg);
  background-position:
    center calc(100% + 360px);
  background-repeat:
    no-repeat;
  background-size:
  1920px 2324px;
}



.u-flair-bottom-right {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg);
  background-position:
    right calc(0% + 50px);
  background-repeat:
    no-repeat;
  background-size:
    710px,
}

.u-flair-bottom-right-2 {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg);
  background-position:
    right calc(100% - 100px);
  background-repeat:
    no-repeat;
  background-size:
    710px,
}

.u-flair-bottom-right-3 {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg);
  background-position:
    right bottom;
  background-repeat:
    no-repeat;
  background-size:
    710px,
}


.u-flair-top-right {
  background-image:
    url(https://www.hypeinnovation.com/hubfs/Hype%20-%20Theme%20-%202026/flair-4.svg);
  background-position:
    right top;
  background-repeat:
    no-repeat;
  background-size:
    710px,
}

.body-wrapper {
  position: relative;
}

.body-container-wrapper {
  position: relative;
  z-index: 1;
}

@media (max-width: 1023px) {
  .body-wrapper::after {
    content: "";
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 32%;

   background-image:
  radial-gradient(
    95% 20% at 50% 0%,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.15) 35%,
    rgba(255, 255, 255, 0) 100%
  ),
  radial-gradient(
    72% 36% at 78% 30%,
    rgba(125, 225, 255, 0.5) 0%,
    rgba(125, 225, 255, 0.2) 50%,
    rgba(125, 225, 255, 0) 100%
  ),
  linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(125, 225, 255, 0.25) 8%,
    rgba(125, 225, 255, 0.4) 15%,
    var(--color-persian) 25%,
    var(--color-navy) 45%,
    var(--color-oxford) 65%,
    var(--color-oxford) 90%,
    #000 100%
  );
    background-repeat: no-repeat;
    background-position: center bottom;

    pointer-events: none;
  }
}


.hs-blog-post {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='738' viewBox='0 0 1440 738' fill='none'%3E%3Cg filter='url(%23filter0_f_4349_34009)'%3E%3Cpath d='M-29 0H1467V638C1350.71 638 -29 638 -29 638V0Z' fill='url(%23paint0_linear_4349_34009)'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_f_4349_34009' x='-129' y='-100' width='1696' height='838' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur stdDeviation='50' result='effect1_foregroundBlur_4349_34009'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_4349_34009' x1='846.978' y1='0' x2='846.978' y2='638' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23040B35'/%3E%3Cstop offset='0.15' stop-color='%23080074'/%3E%3Cstop offset='0.459103' stop-color='%23133CD0'/%3E%3Cstop offset='1' stop-color='%237DE1FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
background-position: center top;
background-repeat: no-repeat;
}
/* Flex & grid utilities
Tailwind-style helper classes scoped to flexbox and grid layout only.
Single-class selectors, loaded in the utilities layer so they override
component styles. Gap follows Tailwind's spacing scale (1 unit = 0.25rem).
*/

/* Display */

.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.grid {
  display: grid;
}
.inline-grid {
  display: inline-grid;
}

/* Flex direction */

.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}

/* Flex wrap */

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

/* Flex */

.flex-1 {
  flex: 1 1 0%;
}
.flex-auto {
  flex: 1 1 auto;
}
.flex-initial {
  flex: 0 1 auto;
}
.flex-none {
  flex: none;
}

/* Flex grow & shrink */

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

/* Order */

.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}
.order-6 {
  order: 6;
}
.order-7 {
  order: 7;
}
.order-8 {
  order: 8;
}
.order-9 {
  order: 9;
}
.order-10 {
  order: 10;
}
.order-11 {
  order: 11;
}
.order-12 {
  order: 12;
}
.order-first {
  order: -9999;
}
.order-last {
  order: 9999;
}
.order-none {
  order: 0;
}

/* Grid template columns */

.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-none {
  grid-template-columns: none;
}

/* Grid template rows */

.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}
.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}
.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}
.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}
.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}
.grid-rows-none {
  grid-template-rows: none;
}

/* Grid column start / end / span */

.col-auto {
  grid-column: auto;
}
.col-span-1 {
  grid-column: span 1 / span 1;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.col-span-3 {
  grid-column: span 3 / span 3;
}
.col-span-4 {
  grid-column: span 4 / span 4;
}
.col-span-5 {
  grid-column: span 5 / span 5;
}
.col-span-6 {
  grid-column: span 6 / span 6;
}
.col-span-7 {
  grid-column: span 7 / span 7;
}
.col-span-8 {
  grid-column: span 8 / span 8;
}
.col-span-9 {
  grid-column: span 9 / span 9;
}
.col-span-10 {
  grid-column: span 10 / span 10;
}
.col-span-11 {
  grid-column: span 11 / span 11;
}
.col-span-12 {
  grid-column: span 12 / span 12;
}
.col-span-full {
  grid-column: 1 / -1;
}
.col-start-1 {
  grid-column-start: 1;
}
.col-start-2 {
  grid-column-start: 2;
}
.col-start-3 {
  grid-column-start: 3;
}
.col-start-4 {
  grid-column-start: 4;
}
.col-start-5 {
  grid-column-start: 5;
}
.col-start-6 {
  grid-column-start: 6;
}
.col-start-7 {
  grid-column-start: 7;
}
.col-start-8 {
  grid-column-start: 8;
}
.col-start-9 {
  grid-column-start: 9;
}
.col-start-10 {
  grid-column-start: 10;
}
.col-start-11 {
  grid-column-start: 11;
}
.col-start-12 {
  grid-column-start: 12;
}
.col-start-13 {
  grid-column-start: 13;
}
.col-start-auto {
  grid-column-start: auto;
}
.col-end-1 {
  grid-column-end: 1;
}
.col-end-2 {
  grid-column-end: 2;
}
.col-end-3 {
  grid-column-end: 3;
}
.col-end-4 {
  grid-column-end: 4;
}
.col-end-5 {
  grid-column-end: 5;
}
.col-end-6 {
  grid-column-end: 6;
}
.col-end-7 {
  grid-column-end: 7;
}
.col-end-8 {
  grid-column-end: 8;
}
.col-end-9 {
  grid-column-end: 9;
}
.col-end-10 {
  grid-column-end: 10;
}
.col-end-11 {
  grid-column-end: 11;
}
.col-end-12 {
  grid-column-end: 12;
}
.col-end-13 {
  grid-column-end: 13;
}
.col-end-auto {
  grid-column-end: auto;
}

/* Grid row start / end / span */

.row-auto {
  grid-row: auto;
}
.row-span-1 {
  grid-row: span 1 / span 1;
}
.row-span-2 {
  grid-row: span 2 / span 2;
}
.row-span-3 {
  grid-row: span 3 / span 3;
}
.row-span-4 {
  grid-row: span 4 / span 4;
}
.row-span-5 {
  grid-row: span 5 / span 5;
}
.row-span-6 {
  grid-row: span 6 / span 6;
}
.row-span-full {
  grid-row: 1 / -1;
}
.row-start-1 {
  grid-row-start: 1;
}
.row-start-2 {
  grid-row-start: 2;
}
.row-start-3 {
  grid-row-start: 3;
}
.row-start-4 {
  grid-row-start: 4;
}
.row-start-5 {
  grid-row-start: 5;
}
.row-start-6 {
  grid-row-start: 6;
}
.row-start-7 {
  grid-row-start: 7;
}
.row-start-auto {
  grid-row-start: auto;
}
.row-end-1 {
  grid-row-end: 1;
}
.row-end-2 {
  grid-row-end: 2;
}
.row-end-3 {
  grid-row-end: 3;
}
.row-end-4 {
  grid-row-end: 4;
}
.row-end-5 {
  grid-row-end: 5;
}
.row-end-6 {
  grid-row-end: 6;
}
.row-end-7 {
  grid-row-end: 7;
}
.row-end-auto {
  grid-row-end: auto;
}

/* Grid auto flow */

.grid-flow-row {
  grid-auto-flow: row;
}
.grid-flow-col {
  grid-auto-flow: column;
}
.grid-flow-dense {
  grid-auto-flow: dense;
}
.grid-flow-row-dense {
  grid-auto-flow: row dense;
}
.grid-flow-col-dense {
  grid-auto-flow: column dense;
}

/* Grid auto columns & rows */

.auto-cols-auto {
  grid-auto-columns: auto;
}
.auto-cols-min {
  grid-auto-columns: min-content;
}
.auto-cols-max {
  grid-auto-columns: max-content;
}
.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}
.auto-rows-auto {
  grid-auto-rows: auto;
}
.auto-rows-min {
  grid-auto-rows: min-content;
}
.auto-rows-max {
  grid-auto-rows: max-content;
}
.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

/* Justify content */

.justify-normal {
  justify-content: normal;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}
.justify-stretch {
  justify-content: stretch;
}

/* Justify items */

.justify-items-start {
  justify-items: start;
}
.justify-items-end {
  justify-items: end;
}
.justify-items-center {
  justify-items: center;
}
.justify-items-stretch {
  justify-items: stretch;
}

/* Justify self */

.justify-self-auto {
  justify-self: auto;
}
.justify-self-start {
  justify-self: start;
}
.justify-self-end {
  justify-self: end;
}
.justify-self-center {
  justify-self: center;
}
.justify-self-stretch {
  justify-self: stretch;
}

/* Align content */

.content-normal {
  align-content: normal;
}
.content-center {
  align-content: center;
}
.content-start {
  align-content: flex-start;
}
.content-end {
  align-content: flex-end;
}
.content-between {
  align-content: space-between;
}
.content-around {
  align-content: space-around;
}
.content-evenly {
  align-content: space-evenly;
}
.content-baseline {
  align-content: baseline;
}
.content-stretch {
  align-content: stretch;
}

/* Align items */

.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}

/* Align self */

.self-auto {
  align-self: auto;
}
.self-start {
  align-self: flex-start;
}
.self-end {
  align-self: flex-end;
}
.self-center {
  align-self: center;
}
.self-stretch {
  align-self: stretch;
}
.self-baseline {
  align-self: baseline;
}

/* Place content */

.place-content-center {
  place-content: center;
}
.place-content-start {
  place-content: start;
}
.place-content-end {
  place-content: end;
}
.place-content-between {
  place-content: space-between;
}
.place-content-around {
  place-content: space-around;
}
.place-content-evenly {
  place-content: space-evenly;
}
.place-content-baseline {
  place-content: baseline;
}
.place-content-stretch {
  place-content: stretch;
}

/* Place items */

.place-items-start {
  place-items: start;
}
.place-items-end {
  place-items: end;
}
.place-items-center {
  place-items: center;
}
.place-items-baseline {
  place-items: baseline;
}
.place-items-stretch {
  place-items: stretch;
}

/* Place self */

.place-self-auto {
  place-self: auto;
}
.place-self-start {
  place-self: start;
}
.place-self-end {
  place-self: end;
}
.place-self-center {
  place-self: center;
}
.place-self-stretch {
  place-self: stretch;
}

/* Gap */

.gap-0 {
  gap: 0;
}
.gap-px {
  gap: 1px;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-3\.5 {
  gap: 0.875rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-7 {
  gap: 1.75rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-9 {
  gap: 2.25rem;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-11 {
  gap: 2.75rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-14 {
  gap: 3.5rem;
}
.gap-16 {
  gap: 4rem;
}
.gap-20 {
  gap: 5rem;
}
.gap-24 {
  gap: 6rem;
}
.gap-28 {
  gap: 7rem;
}
.gap-32 {
  gap: 8rem;
}

/* Gap (column) */

.gap-x-0 {
  column-gap: 0;
}
.gap-x-px {
  column-gap: 1px;
}
.gap-x-0\.5 {
  column-gap: 0.125rem;
}
.gap-x-1 {
  column-gap: 0.25rem;
}
.gap-x-1\.5 {
  column-gap: 0.375rem;
}
.gap-x-2 {
  column-gap: 0.5rem;
}
.gap-x-2\.5 {
  column-gap: 0.625rem;
}
.gap-x-3 {
  column-gap: 0.75rem;
}
.gap-x-3\.5 {
  column-gap: 0.875rem;
}
.gap-x-4 {
  column-gap: 1rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-x-7 {
  column-gap: 1.75rem;
}
.gap-x-8 {
  column-gap: 2rem;
}
.gap-x-9 {
  column-gap: 2.25rem;
}
.gap-x-10 {
  column-gap: 2.5rem;
}
.gap-x-11 {
  column-gap: 2.75rem;
}
.gap-x-12 {
  column-gap: 3rem;
}
.gap-x-14 {
  column-gap: 3.5rem;
}
.gap-x-16 {
  column-gap: 4rem;
}
.gap-x-20 {
  column-gap: 5rem;
}
.gap-x-24 {
  column-gap: 6rem;
}
.gap-x-28 {
  column-gap: 7rem;
}
.gap-x-32 {
  column-gap: 8rem;
}

/* Gap (row) */

.gap-y-0 {
  row-gap: 0;
}
.gap-y-px {
  row-gap: 1px;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.gap-y-2\.5 {
  row-gap: 0.625rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-3\.5 {
  row-gap: 0.875rem;
}
.gap-y-4 {
  row-gap: 1rem;
}
.gap-y-5 {
  row-gap: 1.25rem;
}
.gap-y-6 {
  row-gap: 1.5rem;
}
.gap-y-7 {
  row-gap: 1.75rem;
}
.gap-y-8 {
  row-gap: 2rem;
}
.gap-y-9 {
  row-gap: 2.25rem;
}
.gap-y-10 {
  row-gap: 2.5rem;
}
.gap-y-11 {
  row-gap: 2.75rem;
}
.gap-y-12 {
  row-gap: 3rem;
}
.gap-y-14 {
  row-gap: 3.5rem;
}
.gap-y-16 {
  row-gap: 4rem;
}
.gap-y-20 {
  row-gap: 5rem;
}
.gap-y-24 {
  row-gap: 6rem;
}
.gap-y-28 {
  row-gap: 7rem;
}
.gap-y-32 {
  row-gap: 8rem;
}

/* Responsive grid utilities */

@media (min-width: 640px) {
  /* Display */

  .sm\:grid {
    display: grid;
  }
  .sm\:inline-grid {
    display: inline-grid;
  }

  /* Grid template columns */

  .sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .sm\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .sm\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .sm\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .sm\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .sm\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .sm\:grid-cols-none {
    grid-template-columns: none;
  }

  /* Grid template rows */

  .sm\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .sm\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .sm\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .sm\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .sm\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .sm\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .sm\:grid-rows-none {
    grid-template-rows: none;
  }

  /* Grid column span */

  .sm\:col-auto {
    grid-column: auto;
  }
  .sm\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .sm\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .sm\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .sm\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .sm\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .sm\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .sm\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .sm\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .sm\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .sm\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .sm\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .sm\:col-span-full {
    grid-column: 1 / -1;
  }

  /* Grid row span */

  .sm\:row-auto {
    grid-row: auto;
  }
  .sm\:row-span-1 {
    grid-row: span 1 / span 1;
  }
  .sm\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .sm\:row-span-3 {
    grid-row: span 3 / span 3;
  }
  .sm\:row-span-4 {
    grid-row: span 4 / span 4;
  }
  .sm\:row-span-5 {
    grid-row: span 5 / span 5;
  }
  .sm\:row-span-6 {
    grid-row: span 6 / span 6;
  }
  .sm\:row-span-full {
    grid-row: 1 / -1;
  }

  /* Grid auto flow */

  .sm\:grid-flow-row {
    grid-auto-flow: row;
  }
  .sm\:grid-flow-col {
    grid-auto-flow: column;
  }
  .sm\:grid-flow-dense {
    grid-auto-flow: dense;
  }
  .sm\:grid-flow-row-dense {
    grid-auto-flow: row dense;
  }
  .sm\:grid-flow-col-dense {
    grid-auto-flow: column dense;
  }

  /* Grid auto columns & rows */

  .sm\:auto-cols-auto {
    grid-auto-columns: auto;
  }
  .sm\:auto-cols-min {
    grid-auto-columns: min-content;
  }
  .sm\:auto-cols-max {
    grid-auto-columns: max-content;
  }
  .sm\:auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
  }
  .sm\:auto-rows-auto {
    grid-auto-rows: auto;
  }
  .sm\:auto-rows-min {
    grid-auto-rows: min-content;
  }
  .sm\:auto-rows-max {
    grid-auto-rows: max-content;
  }
  .sm\:auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }

  /* Gap */

  .sm\:gap-0 {
    gap: 0;
  }
  .sm\:gap-px {
    gap: 1px;
  }
  .sm\:gap-0\.5 {
    gap: 0.125rem;
  }
  .sm\:gap-1 {
    gap: 0.25rem;
  }
  .sm\:gap-1\.5 {
    gap: 0.375rem;
  }
  .sm\:gap-2 {
    gap: 0.5rem;
  }
  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }
  .sm\:gap-3 {
    gap: 0.75rem;
  }
  .sm\:gap-3\.5 {
    gap: 0.875rem;
  }
  .sm\:gap-4 {
    gap: 1rem;
  }
  .sm\:gap-5 {
    gap: 1.25rem;
  }
  .sm\:gap-6 {
    gap: 1.5rem;
  }
  .sm\:gap-7 {
    gap: 1.75rem;
  }
  .sm\:gap-8 {
    gap: 2rem;
  }
  .sm\:gap-9 {
    gap: 2.25rem;
  }
  .sm\:gap-10 {
    gap: 2.5rem;
  }
  .sm\:gap-11 {
    gap: 2.75rem;
  }
  .sm\:gap-12 {
    gap: 3rem;
  }
  .sm\:gap-14 {
    gap: 3.5rem;
  }
  .sm\:gap-16 {
    gap: 4rem;
  }
  .sm\:gap-20 {
    gap: 5rem;
  }
  .sm\:gap-24 {
    gap: 6rem;
  }
  .sm\:gap-28 {
    gap: 7rem;
  }
  .sm\:gap-32 {
    gap: 8rem;
  }

  /* Gap (column) */

  .sm\:gap-x-0 {
    column-gap: 0;
  }
  .sm\:gap-x-px {
    column-gap: 1px;
  }
  .sm\:gap-x-0\.5 {
    column-gap: 0.125rem;
  }
  .sm\:gap-x-1 {
    column-gap: 0.25rem;
  }
  .sm\:gap-x-1\.5 {
    column-gap: 0.375rem;
  }
  .sm\:gap-x-2 {
    column-gap: 0.5rem;
  }
  .sm\:gap-x-2\.5 {
    column-gap: 0.625rem;
  }
  .sm\:gap-x-3 {
    column-gap: 0.75rem;
  }
  .sm\:gap-x-3\.5 {
    column-gap: 0.875rem;
  }
  .sm\:gap-x-4 {
    column-gap: 1rem;
  }
  .sm\:gap-x-5 {
    column-gap: 1.25rem;
  }
  .sm\:gap-x-6 {
    column-gap: 1.5rem;
  }
  .sm\:gap-x-7 {
    column-gap: 1.75rem;
  }
  .sm\:gap-x-8 {
    column-gap: 2rem;
  }
  .sm\:gap-x-9 {
    column-gap: 2.25rem;
  }
  .sm\:gap-x-10 {
    column-gap: 2.5rem;
  }
  .sm\:gap-x-11 {
    column-gap: 2.75rem;
  }
  .sm\:gap-x-12 {
    column-gap: 3rem;
  }
  .sm\:gap-x-14 {
    column-gap: 3.5rem;
  }
  .sm\:gap-x-16 {
    column-gap: 4rem;
  }
  .sm\:gap-x-20 {
    column-gap: 5rem;
  }
  .sm\:gap-x-24 {
    column-gap: 6rem;
  }
  .sm\:gap-x-28 {
    column-gap: 7rem;
  }
  .sm\:gap-x-32 {
    column-gap: 8rem;
  }

  /* Gap (row) */

  .sm\:gap-y-0 {
    row-gap: 0;
  }
  .sm\:gap-y-px {
    row-gap: 1px;
  }
  .sm\:gap-y-0\.5 {
    row-gap: 0.125rem;
  }
  .sm\:gap-y-1 {
    row-gap: 0.25rem;
  }
  .sm\:gap-y-1\.5 {
    row-gap: 0.375rem;
  }
  .sm\:gap-y-2 {
    row-gap: 0.5rem;
  }
  .sm\:gap-y-2\.5 {
    row-gap: 0.625rem;
  }
  .sm\:gap-y-3 {
    row-gap: 0.75rem;
  }
  .sm\:gap-y-3\.5 {
    row-gap: 0.875rem;
  }
  .sm\:gap-y-4 {
    row-gap: 1rem;
  }
  .sm\:gap-y-5 {
    row-gap: 1.25rem;
  }
  .sm\:gap-y-6 {
    row-gap: 1.5rem;
  }
  .sm\:gap-y-7 {
    row-gap: 1.75rem;
  }
  .sm\:gap-y-8 {
    row-gap: 2rem;
  }
  .sm\:gap-y-9 {
    row-gap: 2.25rem;
  }
  .sm\:gap-y-10 {
    row-gap: 2.5rem;
  }
  .sm\:gap-y-11 {
    row-gap: 2.75rem;
  }
  .sm\:gap-y-12 {
    row-gap: 3rem;
  }
  .sm\:gap-y-14 {
    row-gap: 3.5rem;
  }
  .sm\:gap-y-16 {
    row-gap: 4rem;
  }
  .sm\:gap-y-20 {
    row-gap: 5rem;
  }
  .sm\:gap-y-24 {
    row-gap: 6rem;
  }
  .sm\:gap-y-28 {
    row-gap: 7rem;
  }
  .sm\:gap-y-32 {
    row-gap: 8rem;
  }
}

@media (min-width: 768px) {
  /* Display */

  .md\:grid {
    display: grid;
  }
  .md\:inline-grid {
    display: inline-grid;
  }

  /* Grid template columns */

  .md\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .md\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .md\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .md\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .md\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .md\:grid-cols-none {
    grid-template-columns: none;
  }

  /* Grid template rows */

  .md\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .md\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .md\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .md\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .md\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .md\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .md\:grid-rows-none {
    grid-template-rows: none;
  }

  /* Grid column span */

  .md\:col-auto {
    grid-column: auto;
  }
  .md\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .md\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .md\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .md\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .md\:col-span-full {
    grid-column: 1 / -1;
  }

  /* Grid row span */

  .md\:row-auto {
    grid-row: auto;
  }
  .md\:row-span-1 {
    grid-row: span 1 / span 1;
  }
  .md\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .md\:row-span-3 {
    grid-row: span 3 / span 3;
  }
  .md\:row-span-4 {
    grid-row: span 4 / span 4;
  }
  .md\:row-span-5 {
    grid-row: span 5 / span 5;
  }
  .md\:row-span-6 {
    grid-row: span 6 / span 6;
  }
  .md\:row-span-full {
    grid-row: 1 / -1;
  }

  /* Grid auto flow */

  .md\:grid-flow-row {
    grid-auto-flow: row;
  }
  .md\:grid-flow-col {
    grid-auto-flow: column;
  }
  .md\:grid-flow-dense {
    grid-auto-flow: dense;
  }
  .md\:grid-flow-row-dense {
    grid-auto-flow: row dense;
  }
  .md\:grid-flow-col-dense {
    grid-auto-flow: column dense;
  }

  /* Grid auto columns & rows */

  .md\:auto-cols-auto {
    grid-auto-columns: auto;
  }
  .md\:auto-cols-min {
    grid-auto-columns: min-content;
  }
  .md\:auto-cols-max {
    grid-auto-columns: max-content;
  }
  .md\:auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
  }
  .md\:auto-rows-auto {
    grid-auto-rows: auto;
  }
  .md\:auto-rows-min {
    grid-auto-rows: min-content;
  }
  .md\:auto-rows-max {
    grid-auto-rows: max-content;
  }
  .md\:auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }

  /* Gap */

  .md\:gap-0 {
    gap: 0;
  }
  .md\:gap-px {
    gap: 1px;
  }
  .md\:gap-0\.5 {
    gap: 0.125rem;
  }
  .md\:gap-1 {
    gap: 0.25rem;
  }
  .md\:gap-1\.5 {
    gap: 0.375rem;
  }
  .md\:gap-2 {
    gap: 0.5rem;
  }
  .md\:gap-2\.5 {
    gap: 0.625rem;
  }
  .md\:gap-3 {
    gap: 0.75rem;
  }
  .md\:gap-3\.5 {
    gap: 0.875rem;
  }
  .md\:gap-4 {
    gap: 1rem;
  }
  .md\:gap-5 {
    gap: 1.25rem;
  }
  .md\:gap-6 {
    gap: 1.5rem;
  }
  .md\:gap-7 {
    gap: 1.75rem;
  }
  .md\:gap-8 {
    gap: 2rem;
  }
  .md\:gap-9 {
    gap: 2.25rem;
  }
  .md\:gap-10 {
    gap: 2.5rem;
  }
  .md\:gap-11 {
    gap: 2.75rem;
  }
  .md\:gap-12 {
    gap: 3rem;
  }
  .md\:gap-14 {
    gap: 3.5rem;
  }
  .md\:gap-16 {
    gap: 4rem;
  }
  .md\:gap-20 {
    gap: 5rem;
  }
  .md\:gap-24 {
    gap: 6rem;
  }
  .md\:gap-28 {
    gap: 7rem;
  }
  .md\:gap-32 {
    gap: 8rem;
  }

  /* Gap (column) */

  .md\:gap-x-0 {
    column-gap: 0;
  }
  .md\:gap-x-px {
    column-gap: 1px;
  }
  .md\:gap-x-0\.5 {
    column-gap: 0.125rem;
  }
  .md\:gap-x-1 {
    column-gap: 0.25rem;
  }
  .md\:gap-x-1\.5 {
    column-gap: 0.375rem;
  }
  .md\:gap-x-2 {
    column-gap: 0.5rem;
  }
  .md\:gap-x-2\.5 {
    column-gap: 0.625rem;
  }
  .md\:gap-x-3 {
    column-gap: 0.75rem;
  }
  .md\:gap-x-3\.5 {
    column-gap: 0.875rem;
  }
  .md\:gap-x-4 {
    column-gap: 1rem;
  }
  .md\:gap-x-5 {
    column-gap: 1.25rem;
  }
  .md\:gap-x-6 {
    column-gap: 1.5rem;
  }
  .md\:gap-x-7 {
    column-gap: 1.75rem;
  }
  .md\:gap-x-8 {
    column-gap: 2rem;
  }
  .md\:gap-x-9 {
    column-gap: 2.25rem;
  }
  .md\:gap-x-10 {
    column-gap: 2.5rem;
  }
  .md\:gap-x-11 {
    column-gap: 2.75rem;
  }
  .md\:gap-x-12 {
    column-gap: 3rem;
  }
  .md\:gap-x-14 {
    column-gap: 3.5rem;
  }
  .md\:gap-x-16 {
    column-gap: 4rem;
  }
  .md\:gap-x-20 {
    column-gap: 5rem;
  }
  .md\:gap-x-24 {
    column-gap: 6rem;
  }
  .md\:gap-x-28 {
    column-gap: 7rem;
  }
  .md\:gap-x-32 {
    column-gap: 8rem;
  }

  /* Gap (row) */

  .md\:gap-y-0 {
    row-gap: 0;
  }
  .md\:gap-y-px {
    row-gap: 1px;
  }
  .md\:gap-y-0\.5 {
    row-gap: 0.125rem;
  }
  .md\:gap-y-1 {
    row-gap: 0.25rem;
  }
  .md\:gap-y-1\.5 {
    row-gap: 0.375rem;
  }
  .md\:gap-y-2 {
    row-gap: 0.5rem;
  }
  .md\:gap-y-2\.5 {
    row-gap: 0.625rem;
  }
  .md\:gap-y-3 {
    row-gap: 0.75rem;
  }
  .md\:gap-y-3\.5 {
    row-gap: 0.875rem;
  }
  .md\:gap-y-4 {
    row-gap: 1rem;
  }
  .md\:gap-y-5 {
    row-gap: 1.25rem;
  }
  .md\:gap-y-6 {
    row-gap: 1.5rem;
  }
  .md\:gap-y-7 {
    row-gap: 1.75rem;
  }
  .md\:gap-y-8 {
    row-gap: 2rem;
  }
  .md\:gap-y-9 {
    row-gap: 2.25rem;
  }
  .md\:gap-y-10 {
    row-gap: 2.5rem;
  }
  .md\:gap-y-11 {
    row-gap: 2.75rem;
  }
  .md\:gap-y-12 {
    row-gap: 3rem;
  }
  .md\:gap-y-14 {
    row-gap: 3.5rem;
  }
  .md\:gap-y-16 {
    row-gap: 4rem;
  }
  .md\:gap-y-20 {
    row-gap: 5rem;
  }
  .md\:gap-y-24 {
    row-gap: 6rem;
  }
  .md\:gap-y-28 {
    row-gap: 7rem;
  }
  .md\:gap-y-32 {
    row-gap: 8rem;
  }
}

@media (min-width: 1024px) {
  /* Display */

  .lg\:grid {
    display: grid;
  }
  .lg\:inline-grid {
    display: inline-grid;
  }

  /* Grid template columns */

  .lg\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-cols-7 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .lg\:grid-cols-8 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
  .lg\:grid-cols-9 {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
  .lg\:grid-cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
  .lg\:grid-cols-11 {
    grid-template-columns: repeat(11, minmax(0, 1fr));
  }
  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .lg\:grid-cols-none {
    grid-template-columns: none;
  }

  /* Grid template rows */

  .lg\:grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
  }
  .lg\:grid-rows-2 {
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }
  .lg\:grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .lg\:grid-rows-4 {
    grid-template-rows: repeat(4, minmax(0, 1fr));
  }
  .lg\:grid-rows-5 {
    grid-template-rows: repeat(5, minmax(0, 1fr));
  }
  .lg\:grid-rows-6 {
    grid-template-rows: repeat(6, minmax(0, 1fr));
  }
  .lg\:grid-rows-none {
    grid-template-rows: none;
  }

  /* Grid column span */

  .lg\:col-auto {
    grid-column: auto;
  }
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }
  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }
  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }
  .lg\:col-span-4 {
    grid-column: span 4 / span 4;
  }
  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }
  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }
  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }
  .lg\:col-span-8 {
    grid-column: span 8 / span 8;
  }
  .lg\:col-span-9 {
    grid-column: span 9 / span 9;
  }
  .lg\:col-span-10 {
    grid-column: span 10 / span 10;
  }
  .lg\:col-span-11 {
    grid-column: span 11 / span 11;
  }
  .lg\:col-span-12 {
    grid-column: span 12 / span 12;
  }
  .lg\:col-span-full {
    grid-column: 1 / -1;
  }

  /* Grid row span */

  .lg\:row-auto {
    grid-row: auto;
  }
  .lg\:row-span-1 {
    grid-row: span 1 / span 1;
  }
  .lg\:row-span-2 {
    grid-row: span 2 / span 2;
  }
  .lg\:row-span-3 {
    grid-row: span 3 / span 3;
  }
  .lg\:row-span-4 {
    grid-row: span 4 / span 4;
  }
  .lg\:row-span-5 {
    grid-row: span 5 / span 5;
  }
  .lg\:row-span-6 {
    grid-row: span 6 / span 6;
  }
  .lg\:row-span-full {
    grid-row: 1 / -1;
  }

  /* Grid auto flow */

  .lg\:grid-flow-row {
    grid-auto-flow: row;
  }
  .lg\:grid-flow-col {
    grid-auto-flow: column;
  }
  .lg\:grid-flow-dense {
    grid-auto-flow: dense;
  }
  .lg\:grid-flow-row-dense {
    grid-auto-flow: row dense;
  }
  .lg\:grid-flow-col-dense {
    grid-auto-flow: column dense;
  }

  /* Grid auto columns & rows */

  .lg\:auto-cols-auto {
    grid-auto-columns: auto;
  }
  .lg\:auto-cols-min {
    grid-auto-columns: min-content;
  }
  .lg\:auto-cols-max {
    grid-auto-columns: max-content;
  }
  .lg\:auto-cols-fr {
    grid-auto-columns: minmax(0, 1fr);
  }
  .lg\:auto-rows-auto {
    grid-auto-rows: auto;
  }
  .lg\:auto-rows-min {
    grid-auto-rows: min-content;
  }
  .lg\:auto-rows-max {
    grid-auto-rows: max-content;
  }
  .lg\:auto-rows-fr {
    grid-auto-rows: minmax(0, 1fr);
  }

  /* Gap */

  .lg\:gap-0 {
    gap: 0;
  }
  .lg\:gap-px {
    gap: 1px;
  }
  .lg\:gap-0\.5 {
    gap: 0.125rem;
  }
  .lg\:gap-1 {
    gap: 0.25rem;
  }
  .lg\:gap-1\.5 {
    gap: 0.375rem;
  }
  .lg\:gap-2 {
    gap: 0.5rem;
  }
  .lg\:gap-2\.5 {
    gap: 0.625rem;
  }
  .lg\:gap-3 {
    gap: 0.75rem;
  }
  .lg\:gap-3\.5 {
    gap: 0.875rem;
  }
  .lg\:gap-4 {
    gap: 1rem;
  }
  .lg\:gap-5 {
    gap: 1.25rem;
  }
  .lg\:gap-6 {
    gap: 1.5rem;
  }
  .lg\:gap-7 {
    gap: 1.75rem;
  }
  .lg\:gap-8 {
    gap: 2rem;
  }
  .lg\:gap-9 {
    gap: 2.25rem;
  }
  .lg\:gap-10 {
    gap: 2.5rem;
  }
  .lg\:gap-11 {
    gap: 2.75rem;
  }
  .lg\:gap-12 {
    gap: 3rem;
  }
  .lg\:gap-14 {
    gap: 3.5rem;
  }
  .lg\:gap-16 {
    gap: 4rem;
  }
  .lg\:gap-20 {
    gap: 5rem;
  }
  .lg\:gap-24 {
    gap: 6rem;
  }
  .lg\:gap-28 {
    gap: 7rem;
  }
  .lg\:gap-32 {
    gap: 8rem;
  }

  /* Gap (column) */

  .lg\:gap-x-0 {
    column-gap: 0;
  }
  .lg\:gap-x-px {
    column-gap: 1px;
  }
  .lg\:gap-x-0\.5 {
    column-gap: 0.125rem;
  }
  .lg\:gap-x-1 {
    column-gap: 0.25rem;
  }
  .lg\:gap-x-1\.5 {
    column-gap: 0.375rem;
  }
  .lg\:gap-x-2 {
    column-gap: 0.5rem;
  }
  .lg\:gap-x-2\.5 {
    column-gap: 0.625rem;
  }
  .lg\:gap-x-3 {
    column-gap: 0.75rem;
  }
  .lg\:gap-x-3\.5 {
    column-gap: 0.875rem;
  }
  .lg\:gap-x-4 {
    column-gap: 1rem;
  }
  .lg\:gap-x-5 {
    column-gap: 1.25rem;
  }
  .lg\:gap-x-6 {
    column-gap: 1.5rem;
  }
  .lg\:gap-x-7 {
    column-gap: 1.75rem;
  }
  .lg\:gap-x-8 {
    column-gap: 2rem;
  }
  .lg\:gap-x-9 {
    column-gap: 2.25rem;
  }
  .lg\:gap-x-10 {
    column-gap: 2.5rem;
  }
  .lg\:gap-x-11 {
    column-gap: 2.75rem;
  }
  .lg\:gap-x-12 {
    column-gap: 3rem;
  }
  .lg\:gap-x-14 {
    column-gap: 3.5rem;
  }
  .lg\:gap-x-16 {
    column-gap: 4rem;
  }
  .lg\:gap-x-20 {
    column-gap: 5rem;
  }
  .lg\:gap-x-24 {
    column-gap: 6rem;
  }
  .lg\:gap-x-28 {
    column-gap: 7rem;
  }
  .lg\:gap-x-32 {
    column-gap: 8rem;
  }

  /* Gap (row) */

  .lg\:gap-y-0 {
    row-gap: 0;
  }
  .lg\:gap-y-px {
    row-gap: 1px;
  }
  .lg\:gap-y-0\.5 {
    row-gap: 0.125rem;
  }
  .lg\:gap-y-1 {
    row-gap: 0.25rem;
  }
  .lg\:gap-y-1\.5 {
    row-gap: 0.375rem;
  }
  .lg\:gap-y-2 {
    row-gap: 0.5rem;
  }
  .lg\:gap-y-2\.5 {
    row-gap: 0.625rem;
  }
  .lg\:gap-y-3 {
    row-gap: 0.75rem;
  }
  .lg\:gap-y-3\.5 {
    row-gap: 0.875rem;
  }
  .lg\:gap-y-4 {
    row-gap: 1rem;
  }
  .lg\:gap-y-5 {
    row-gap: 1.25rem;
  }
  .lg\:gap-y-6 {
    row-gap: 1.5rem;
  }
  .lg\:gap-y-7 {
    row-gap: 1.75rem;
  }
  .lg\:gap-y-8 {
    row-gap: 2rem;
  }
  .lg\:gap-y-9 {
    row-gap: 2.25rem;
  }
  .lg\:gap-y-10 {
    row-gap: 2.5rem;
  }
  .lg\:gap-y-11 {
    row-gap: 2.75rem;
  }
  .lg\:gap-y-12 {
    row-gap: 3rem;
  }
  .lg\:gap-y-14 {
    row-gap: 3.5rem;
  }
  .lg\:gap-y-16 {
    row-gap: 4rem;
  }
  .lg\:gap-y-20 {
    row-gap: 5rem;
  }
  .lg\:gap-y-24 {
    row-gap: 6rem;
  }
  .lg\:gap-y-28 {
    row-gap: 7rem;
  }
  .lg\:gap-y-32 {
    row-gap: 8rem;
  }
}
/* Vertical spacing utilities
Tailwind-style helper classes for vertical margin and padding only
(top, bottom, and the y-axis shorthand). Loaded in the utilities layer
so they override component styles. Scale follows Tailwind's spacing
scale (1 unit = 0.25rem), matching the gap utilities in _flex-grid.css.
*/

/* Margin · top */

.mt-0 {
  margin-top: 0;
}
.mt-px {
  margin-top: 1px;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-3\.5 {
  margin-top: 0.875rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-11 {
  margin-top: 2.75rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-20 {
  margin-top: 5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-28 {
  margin-top: 7rem;
}
.mt-32 {
  margin-top: 8rem;
}
.mt-auto {
  margin-top: auto;
}
.-mt-px {
  margin-top: -1px;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-1\.5 {
  margin-top: -0.375rem;
}
.-mt-2 {
  margin-top: -0.5rem;
}
.-mt-2\.5 {
  margin-top: -0.625rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.-mt-3\.5 {
  margin-top: -0.875rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.-mt-5 {
  margin-top: -1.25rem;
}
.-mt-6 {
  margin-top: -1.5rem;
}
.-mt-7 {
  margin-top: -1.75rem;
}
.-mt-8 {
  margin-top: -2rem;
}
.-mt-9 {
  margin-top: -2.25rem;
}
.-mt-10 {
  margin-top: -2.5rem;
}
.-mt-11 {
  margin-top: -2.75rem;
}
.-mt-12 {
  margin-top: -3rem;
}
.-mt-14 {
  margin-top: -3.5rem;
}
.-mt-16 {
  margin-top: -4rem;
}
.-mt-20 {
  margin-top: -5rem;
}
.-mt-24 {
  margin-top: -6rem;
}
.-mt-28 {
  margin-top: -7rem;
}
.-mt-32 {
  margin-top: -8rem;
}

/* Margin · bottom */

.mb-0 {
  margin-bottom: 0;
}
.mb-px {
  margin-bottom: 1px;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-2\.5 {
  margin-bottom: 0.625rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-3\.5 {
  margin-bottom: 0.875rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-7 {
  margin-bottom: 1.75rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-11 {
  margin-bottom: 2.75rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-14 {
  margin-bottom: 3.5rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-20 {
  margin-bottom: 5rem;
}
.mb-24 {
  margin-bottom: 6rem;
}
.mb-28 {
  margin-bottom: 7rem;
}
.mb-32 {
  margin-bottom: 8rem;
}
.mb-auto {
  margin-bottom: auto;
}
.-mb-px {
  margin-bottom: -1px;
}
.-mb-0\.5 {
  margin-bottom: -0.125rem;
}
.-mb-1 {
  margin-bottom: -0.25rem;
}
.-mb-1\.5 {
  margin-bottom: -0.375rem;
}
.-mb-2 {
  margin-bottom: -0.5rem;
}
.-mb-2\.5 {
  margin-bottom: -0.625rem;
}
.-mb-3 {
  margin-bottom: -0.75rem;
}
.-mb-3\.5 {
  margin-bottom: -0.875rem;
}
.-mb-4 {
  margin-bottom: -1rem;
}
.-mb-5 {
  margin-bottom: -1.25rem;
}
.-mb-6 {
  margin-bottom: -1.5rem;
}
.-mb-7 {
  margin-bottom: -1.75rem;
}
.-mb-8 {
  margin-bottom: -2rem;
}
.-mb-9 {
  margin-bottom: -2.25rem;
}
.-mb-10 {
  margin-bottom: -2.5rem;
}
.-mb-11 {
  margin-bottom: -2.75rem;
}
.-mb-12 {
  margin-bottom: -3rem;
}
.-mb-14 {
  margin-bottom: -3.5rem;
}
.-mb-16 {
  margin-bottom: -4rem;
}
.-mb-20 {
  margin-bottom: -5rem;
}
.-mb-24 {
  margin-bottom: -6rem;
}
.-mb-28 {
  margin-bottom: -7rem;
}
.-mb-32 {
  margin-bottom: -8rem;
}

/* Margin · vertical (y) */

.my-0 {
  margin-bottom: 0;
  margin-top: 0;
}
.my-px {
  margin-bottom: 1px;
  margin-top: 1px;
}
.my-0\.5 {
  margin-bottom: 0.125rem;
  margin-top: 0.125rem;
}
.my-1 {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}
.my-1\.5 {
  margin-bottom: 0.375rem;
  margin-top: 0.375rem;
}
.my-2 {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}
.my-2\.5 {
  margin-bottom: 0.625rem;
  margin-top: 0.625rem;
}
.my-3 {
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}
.my-3\.5 {
  margin-bottom: 0.875rem;
  margin-top: 0.875rem;
}
.my-4 {
  margin-bottom: 1rem;
  margin-top: 1rem;
}
.my-5 {
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}
.my-6 {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}
.my-7 {
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
}
.my-8 {
  margin-bottom: 2rem;
  margin-top: 2rem;
}
.my-9 {
  margin-bottom: 2.25rem;
  margin-top: 2.25rem;
}
.my-10 {
  margin-bottom: 2.5rem;
  margin-top: 2.5rem;
}
.my-11 {
  margin-bottom: 2.75rem;
  margin-top: 2.75rem;
}
.my-12 {
  margin-bottom: 3rem;
  margin-top: 3rem;
}
.my-14 {
  margin-bottom: 3.5rem;
  margin-top: 3.5rem;
}
.my-16 {
  margin-bottom: 4rem;
  margin-top: 4rem;
}
.my-20 {
  margin-bottom: 5rem;
  margin-top: 5rem;
}
.my-24 {
  margin-bottom: 6rem;
  margin-top: 6rem;
}
.my-28 {
  margin-bottom: 7rem;
  margin-top: 7rem;
}
.my-32 {
  margin-bottom: 8rem;
  margin-top: 8rem;
}
.my-auto {
  margin-bottom: auto;
  margin-top: auto;
}
.-my-px {
  margin-bottom: -1px;
  margin-top: -1px;
}
.-my-0\.5 {
  margin-bottom: -0.125rem;
  margin-top: -0.125rem;
}
.-my-1 {
  margin-bottom: -0.25rem;
  margin-top: -0.25rem;
}
.-my-1\.5 {
  margin-bottom: -0.375rem;
  margin-top: -0.375rem;
}
.-my-2 {
  margin-bottom: -0.5rem;
  margin-top: -0.5rem;
}
.-my-2\.5 {
  margin-bottom: -0.625rem;
  margin-top: -0.625rem;
}
.-my-3 {
  margin-bottom: -0.75rem;
  margin-top: -0.75rem;
}
.-my-3\.5 {
  margin-bottom: -0.875rem;
  margin-top: -0.875rem;
}
.-my-4 {
  margin-bottom: -1rem;
  margin-top: -1rem;
}
.-my-5 {
  margin-bottom: -1.25rem;
  margin-top: -1.25rem;
}
.-my-6 {
  margin-bottom: -1.5rem;
  margin-top: -1.5rem;
}
.-my-7 {
  margin-bottom: -1.75rem;
  margin-top: -1.75rem;
}
.-my-8 {
  margin-bottom: -2rem;
  margin-top: -2rem;
}
.-my-9 {
  margin-bottom: -2.25rem;
  margin-top: -2.25rem;
}
.-my-10 {
  margin-bottom: -2.5rem;
  margin-top: -2.5rem;
}
.-my-11 {
  margin-bottom: -2.75rem;
  margin-top: -2.75rem;
}
.-my-12 {
  margin-bottom: -3rem;
  margin-top: -3rem;
}
.-my-14 {
  margin-bottom: -3.5rem;
  margin-top: -3.5rem;
}
.-my-16 {
  margin-bottom: -4rem;
  margin-top: -4rem;
}
.-my-20 {
  margin-bottom: -5rem;
  margin-top: -5rem;
}
.-my-24 {
  margin-bottom: -6rem;
  margin-top: -6rem;
}
.-my-28 {
  margin-bottom: -7rem;
  margin-top: -7rem;
}
.-my-32 {
  margin-bottom: -8rem;
  margin-top: -8rem;
}

/* Padding · top */

.pt-0 {
  padding-top: 0;
}
.pt-px {
  padding-top: 1px;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-1\.5 {
  padding-top: 0.375rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-2\.5 {
  padding-top: 0.625rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-3\.5 {
  padding-top: 0.875rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.pt-7 {
  padding-top: 1.75rem;
}
.pt-8 {
  padding-top: 2rem;
}
.pt-9 {
  padding-top: 2.25rem;
}
.pt-10 {
  padding-top: 2.5rem;
}
.pt-11 {
  padding-top: 2.75rem;
}
.pt-12 {
  padding-top: 3rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pt-24 {
  padding-top: 6rem;
}
.pt-28 {
  padding-top: 7rem;
}
.pt-32 {
  padding-top: 8rem;
}

/* Padding · bottom */

.pb-0 {
  padding-bottom: 0;
}
.pb-px {
  padding-bottom: 1px;
}
.pb-0\.5 {
  padding-bottom: 0.125rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-1\.5 {
  padding-bottom: 0.375rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-2\.5 {
  padding-bottom: 0.625rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-3\.5 {
  padding-bottom: 0.875rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-7 {
  padding-bottom: 1.75rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pb-9 {
  padding-bottom: 2.25rem;
}
.pb-10 {
  padding-bottom: 2.5rem;
}
.pb-11 {
  padding-bottom: 2.75rem;
}
.pb-12 {
  padding-bottom: 3rem;
}
.pb-14 {
  padding-bottom: 3.5rem;
}
.pb-16 {
  padding-bottom: 4rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pb-24 {
  padding-bottom: 6rem;
}
.pb-28 {
  padding-bottom: 7rem;
}
.pb-32 {
  padding-bottom: 8rem;
}

/* Padding · vertical (y) */

.py-0 {
  padding-bottom: 0;
  padding-top: 0;
}
.py-px {
  padding-bottom: 1px;
  padding-top: 1px;
}
.py-0\.5 {
  padding-bottom: 0.125rem;
  padding-top: 0.125rem;
}
.py-1 {
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}
.py-1\.5 {
  padding-bottom: 0.375rem;
  padding-top: 0.375rem;
}
.py-2 {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}
.py-2\.5 {
  padding-bottom: 0.625rem;
  padding-top: 0.625rem;
}
.py-3 {
  padding-bottom: 0.75rem;
  padding-top: 0.75rem;
}
.py-3\.5 {
  padding-bottom: 0.875rem;
  padding-top: 0.875rem;
}
.py-4 {
  padding-bottom: 1rem;
  padding-top: 1rem;
}
.py-5 {
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
}
.py-6 {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}
.py-7 {
  padding-bottom: 1.75rem;
  padding-top: 1.75rem;
}
.py-8 {
  padding-bottom: 2rem;
  padding-top: 2rem;
}
.py-9 {
  padding-bottom: 2.25rem;
  padding-top: 2.25rem;
}
.py-10 {
  padding-bottom: 2.5rem;
  padding-top: 2.5rem;
}
.py-11 {
  padding-bottom: 2.75rem;
  padding-top: 2.75rem;
}
.py-12 {
  padding-bottom: 3rem;
  padding-top: 3rem;
}
.py-14 {
  padding-bottom: 3.5rem;
  padding-top: 3.5rem;
}
.py-16 {
  padding-bottom: 4rem;
  padding-top: 4rem;
}
.py-20 {
  padding-bottom: 5rem;
  padding-top: 5rem;
}
.py-24 {
  padding-bottom: 6rem;
  padding-top: 6rem;
}
.py-28 {
  padding-bottom: 7rem;
  padding-top: 7rem;
}
.py-32 {
  padding-bottom: 8rem;
  padding-top: 8rem;
}
/* Text style utilities
Tailwind-style helper classes for the CEOM type scale (Aeonik / Aeonik Fono).
Each class bundles font-size + line-height, the same way Tailwind's text-*
utilities do. Loaded in the utilities layer so they override element styles.

Sizes are the official CEOM scale in px, expressed as rem on a fixed 16px root
(see theme-overrides.css). Line heights follow the spec (100% = 1, 125% = 1.25,
150% = 1.5). Each heading utility also pins the brand family and weight so the
class is self-contained: H1–H4 use Aeonik Fono (--font-secondary) at the spec
weight (H4 = 500, H1/H2/H3 = 400); H5 uses Aeonik body (--font-primary) at 600.
*/

/* Headings */

.text-h1 {
  /* Mobile: 32px (2rem) → Desktop: 48px (3rem) / Regular 400 */
  font-size: clamp(2rem, 1.56rem + 1.85vw, 3rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 400;
}

.text-h2 {
  /* Mobile: 28px (1.75rem) -> Desktop: 36px (2.25rem) / Regular 400 */
  font-size: clamp(1.75rem, 1.53rem + 0.93vw, 2.25rem);
  line-height: 1.2;
  font-family: var(--font-secondary);
  font-weight: 400;
}

.text-h3 {
  /* 25px / Regular 400 */
  font-size: 1.5625rem;
  line-height: 1;
  font-family: var(--font-secondary);
  font-weight: 400;
}
.text-h4 {
  /* 20px / Medium 500 */
  font-size: 1.25rem;
  line-height: 1;
  font-family: var(--font-secondary);
  font-weight: var(--fw-medium);
  font-weight: 400;
}
.text-h5 {
  /* 14px / SemiBold 600 — Aeonik body, not Fono */
  font-size: 0.875rem;
  line-height: 1.25;
  font-family: var(--font-primary);
  font-weight: var(--fw-semibold);
  font-weight: 600;
}

/* Stats — fluid, gentle reduction */

.text-stat {
  /* Desktop: 36px */
  font-size: clamp(1.875rem, 1.71rem + 0.69vw, 2.25rem);
  line-height: 1.4;
}
.text-stat-desc {
  /* Desktop: 36px */
  font-size: clamp(1.75rem, 1.53rem + 0.93vw, 2.25rem);
  line-height: 1;
}

/* Body */

.text-normal {
  /* Text Common — 18px */
  font-size: 1.125rem;
  line-height: 1.5;
}
.text-large {
  /* Text Large — 24px */
  font-size: 1.5rem;
  line-height: 1.5;
}
.text-small {
  /* Text Small — 14px */
  font-size: 0.875rem;
  line-height: 1.25;
}
.text-link {
  /* Links — 16px / Medium 500 / 2% tracking */
  font-size: 1rem;
  line-height: 1;
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
}
.text-surtitre {
  /* Subtitle — 18px */
  font-size: 1.125rem;
  line-height: 1;
}
.text-tag {
  /* 14px */
  font-size: 0.875rem;
  line-height: 1.25;
}
.text-table-title {
  /* Desktop: 18px */
  font-size: 1.125rem;
  line-height: 1.2;
}


.typography > *,
.typography .hs_cos_wrapper_type_rich_text > * {
  margin-top: 0;
}

.typography > * + *,
.typography .hs_cos_wrapper_type_rich_text > * + * {
  margin-top: var(--space-4) !important;
}