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

.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;
}
/* 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);
  bottom: var(--space-6);
  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); }


.body-wrapper {
  background-color: var(--color-white);
  background-image:
    url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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% 900px,
    100% 1450px,
    120% 1450px;
}

.body-wrapper--homepage {
  background-color: var(--color-white);
  background-image:
    url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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% 900px,
    100% 1450px,
    100% 1450px;
}

@media (max-width: 767px) {
  .body-wrapper,
  .body-wrapper--homepage {
    background-image:
      url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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% 900px,
      100% 1450px,
      120% 1450px;
  }

  .body-wrapper--homepage {
    background-image:
      url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/Hype%20-%20Theme%20-%202026/bg-gradrient-top-home.svg);
    background-size:
      100% auto,
      100% 900px,
      100% 1450px,
      100% 1450px;
  }
}

: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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/Hype%20-%20Theme%20-%202026/flair-4.svg),
    url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/Hype%20-%20Theme%20-%202026/flair-4.svg),
    url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/Hype%20-%20Theme%20-%202026/flair-5.svg);
  background-position:
    left calc(0% + 300px);
  background-repeat:
    no-repeat;
  background-size:
    710px;
}


.u-flair-bottom-right {
  background-image:
    url(https://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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://314186.fs1.hubspotusercontent-na1.net/hubfs/314186/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;
  }
}
/* 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;
}