/**
 * ModMed 2.0 ("MM20") Foundation
 *
 * A Divi-independent, "bootstrap-style" layer built on top of the MM20 /
 * Harmony design system: design tokens, a responsive 12-column grid
 * (.row / .col-*), spacing & sizing utilities, typography, and color
 * utilities that work against plain HTML markup.
 *
 * Ported from assets/css/style-mm20.css, translating Divi-coupled
 * selectors (.et_pb_row, .et_pb_column_*, et_pb_gutters*) into generic
 * class names. The responsive column-count cascade (12 cols above
 * 980px, 8 cols 480-980px, 4 cols below 480px) and per-tier column
 * span values are carried over unchanged so layouts behave the same as
 * their Divi-rendered equivalents.
 *
 * Out of scope (left in style-mm20.css): Divi module/component skins
 * (CTA buttons, Pillar Cards, Specialty Icons, AI CTA, Quote Module,
 * Text Stats, etc.) — these are bound to Divi-generated markup and
 * need new markup contracts, not just a CSS port. Also out of scope:
 * OneTrust banner, footer builder styles, Divi named row-layout
 * presets, and the row--5col intermediate 10-column tier that only
 * applied in a ~120px viewport band (981-1099px) — see the .row--5col
 * section below for the simplified version that was kept.
 */

@font-face {
  font-family: "Cera ModMed";
  src: url("../fonts/Cera-ModMed-Variable.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
}

html {
  box-sizing: border-box;
  font-size: 16px;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:root {
  /* ---------------------------------------------------------------- *
     * Spacing — base scale
     * ---------------------------------------------------------------- */
  --space-0: 0; /* 0 */
  --space-1: 0.125rem; /* 2px */
  --space-2: 0.25rem; /* 4px */
  --space-3: 0.375rem; /* 6px */
  --space-4: 0.5rem; /* 8px */
  --space-5: 0.625rem; /* 10px */
  --space-6: 0.75rem; /* 12px */
  --space-7: 1rem; /* 16px */
  --space-8: 1.25rem; /* 20px */
  --space-9: 1.5rem; /* 24px */
  --space-10: 1.75rem; /* 28px */
  --space-11: 2rem; /* 32px */
  --space-12: 2.25rem; /* 36px */
  --space-13: 2.5rem; /* 40px */
  --space-14: 3rem; /* 48px */
  --space-15: 3.5rem; /* 56px */
  --space-16: 4rem; /* 64px */
  --space-17: 5rem; /* 80px */
  --space-18: 6rem; /* 96px */
  --space-19: 8rem; /* 128px */
  --space-20: 10rem; /* 160px */
  --space-none: var(--space-0);

  /* Semantic spacing scale — redefined per breakpoint below */
  --space-4xs: var(--space-1); /* 2px */
  --space-3xs: var(--space-2); /* 4px */
  --space-2xs: var(--space-4); /* 8px */
  --space-xs: var(--space-7); /* 16px */
  --space-s: var(--space-9); /* 24px */
  --space-m: var(--space-11); /* 32px */
  --space-l: var(--space-14); /* 48px */
  --space-xl: var(--space-16); /* 64px */
  --space-2xl: var(--space-18); /* 96px */
  --space-3xl: var(--space-20); /* 160px */

  --gap-narrow: var(--space-none);
  --gap-condensed: var(--space-7); /* 16px */
  --gap-wide: var(--space-11); /* 32px */
  --gap-xwide: var(--space-14); /* 48px */

  /* Grid container width */
  --content-max-width: 83.5rem; /* 1336px */
  --container-padding: 40px;

  /* ---------------------------------------------------------------- *
     * Radii
     * ---------------------------------------------------------------- */
  --radius-none: 0;
  --radius-round: 16rem; /* enough to fully round a square element */
  --radius-1: 0.125rem; /* 2px */
  --radius-2: 0.25rem; /* 4px */
  --radius-3: 0.375rem; /* 6px */
  --radius-4: 0.5rem; /* 8px */
  --radius-5: 0.75rem; /* 10px */
  --radius-6: 1.125rem; /* 12px */
  --radius-7: 1.5rem; /* 16px */
  --radius-8: 2rem; /* 20px */

  /* ---------------------------------------------------------------- *
     * Typography — variable font uses weight + width axes
     * ---------------------------------------------------------------- */
  --wdth-value: 97;

  --display-l-font-size: 4.625rem;
  --display-l-line-height: 5rem;
  --display-l-font-weight: 280;
  --display-l-letter-spacing: -0.4px;
  --display-m-font-size: 3.625rem;
  --display-m-line-height: 4rem;
  --display-m-font-weight: 300;
  --display-m-letter-spacing: -0.3px;
  --display-s-font-size: 2.875rem;
  --display-s-line-height: 3.25rem;
  --display-s-font-weight: 340;
  --display-s-letter-spacing: -0.2px;

  /* "-fixed" variants never change at tablet/mobile breakpoints, unlike the ones above */
  --display-l-fixed-font-size: 4.625rem;
  --display-l-fixed-line-height: 5rem;
  --display-l-fixed-font-weight: 280;
  --display-l-fixed-letter-spacing: -0.4px;
  --display-m-fixed-font-size: 3.625rem;
  --display-m-fixed-line-height: 4rem;
  --display-m-fixed-font-weight: 300;
  --display-m-fixed-letter-spacing: -0.3px;
  --display-s-fixed-font-size: 2.875rem;
  --display-s-fixed-line-height: 3.25rem;
  --display-s-fixed-font-weight: 340;
  --display-s-fixed-letter-spacing: -0.2px;

  --headline-l-font-size: 2.25rem;
  --headline-l-line-height: 2.625rem;
  --headline-l-font-weight: 340;
  --headline-l-letter-spacing: -0.2px;
  --headline-m-font-size: 1.8125rem;
  --headline-m-line-height: 2.1875rem;
  --headline-m-font-weight: 360;
  --headline-m-letter-spacing: -0.1px;
  --headline-s-font-size: 1.4375rem;
  --headline-s-line-height: 1.8125rem;
  --headline-s-font-weight: 380;
  --headline-s-letter-spacing: 0;

  --headline-l-fixed-font-size: 2.25rem;
  --headline-l-fixed-line-height: 2.625rem;
  --headline-l-fixed-font-weight: 340;
  --headline-l-fixed-letter-spacing: -0.2px;
  --headline-m-fixed-font-size: 1.8125rem;
  --headline-m-fixed-line-height: 2.1875rem;
  --headline-m-fixed-font-weight: 360;
  --headline-m-fixed-letter-spacing: -0.1px;
  --headline-s-fixed-font-size: 1.4375rem;
  --headline-s-fixed-line-height: 1.8125rem;
  --headline-s-fixed-font-weight: 380;
  --headline-s-fixed-letter-spacing: 0;

  --title-l-font-size: 1.25rem;
  --title-l-line-height: 1.625rem;
  --title-l-font-weight: 400;
  --title-l-letter-spacing: 0.1px;
  --title-m-font-size: 1.125rem;
  --title-m-line-height: 1.5rem;
  --title-m-font-weight: 410;
  --title-m-letter-spacing: 0.1px;
  --title-s-font-size: 1rem;
  --title-s-line-height: 1.375rem;
  --title-s-font-weight: 420;
  --title-s-letter-spacing: 0.2px;

  --body-l-font-size: 1.125rem;
  --body-l-line-height: 1.5rem;
  --body-l-font-weight: 410;
  --body-l-letter-spacing: 0.1px;
  --body-m-font-size: 1rem;
  --body-m-line-height: 1.375rem;
  --body-m-font-weight: 420;
  --body-m-letter-spacing: 0.2px;
  --body-s-font-size: 0.875rem;
  --body-s-line-height: 1.25rem;
  --body-s-font-weight: 430;
  --body-s-letter-spacing: 0.3px;

  --body-l-compact-font-size: 1.125rem;
  --body-l-compact-line-height: 1.25rem;
  --body-l-compact-font-weight: 410;
  --body-l-compact-letter-spacing: 0.1px;
  --body-m-compact-font-size: 1rem;
  --body-m-compact-line-height: 1.125rem;
  --body-m-compact-font-weight: 420;
  --body-m-compact-letter-spacing: 0.2px;
  --body-s-compact-font-size: 0.875rem;
  --body-s-compact-line-height: 1rem;
  --body-s-compact-font-weight: 430;
  --body-s-compact-letter-spacing: 0.3px;

  --paragraph-l-font-size: 2rem;
  --paragraph-l-line-height: 2.375rem;
  --paragraph-l-font-weight: 350;
  --paragraph-l-letter-spacing: -0.1px;
  --paragraph-m-font-size: 1.625rem;
  --paragraph-m-line-height: 2rem;
  --paragraph-m-font-weight: 370;
  --paragraph-m-letter-spacing: 0;
  --paragraph-s-font-size: 1.25rem;
  --paragraph-s-line-height: 1.625rem;
  --paragraph-s-font-weight: 400;
  --paragraph-s-letter-spacing: 0.1px;

  --list-spacing-body-l: var(--space-3);
  --list-spacing-body-m: var(--space-4);
  --list-spacing-body-s: var(--space-5);
  --list-spacing-paragraph-l: var(--space-5);
  --list-spacing-paragraph-m: var(--space-6);
  --list-spacing-paragraph-s: var(--space-6);

  --icon-link-icon-size: 1.375rem;
  --icon-button-padding: calc(var(--space-7) - var(--space-1));

  /* ---------------------------------------------------------------- *
     * Color ramps
     * ---------------------------------------------------------------- */
  --purple50: #f0ebfa;
  --purple100: #e0dbfa;
  --purple200: #c9bdf6;
  --purple300: #b799f4;
  --purple400: #9f6dec;
  --purple500: #864fdf;
  --purple600: #6a3fad;
  --purple700: #502d7f;
  --purple800: #351e55;
  --purple900: #160c22;
  /* Intermediate stops added 9/17/2025 — used by hover/active background tokens below */
  --purple51: #e8e3fa;
  --purple101: #d5ccf8;
  --purple201: #c0abf5;
  --purple301: #ab83f0;
  --purple401: #935ee5;
  --purple501: #7847c6;
  --purple601: #5d3696;
  --purple701: #43266a;
  --purple801: #26153c;

  --gold50: #fff9e9;
  --gold100: #fff2cc;
  --gold200: #ffe8a8;
  --gold300: #ffd86c;
  --gold400: #ffc82e;
  --gold500: #f2ad00;
  --gold600: #dc820f;
  --gold700: #aa640a;
  --gold800: #784600;
  --gold900: #392000;
  --gold51: #fff5db;
  --gold101: #ffedba;
  --gold201: #ffe08a;
  --gold301: #ffcf4d;
  --gold401: #ffb917;
  --gold501: #ed9608;
  --gold601: #c3730d;
  --gold701: #915505;
  --gold801: #593300;

  --pink50: #ffedee;
  --pink100: #ffdedf;
  --pink200: #ffc3c8;
  --pink300: #ffa5af;
  --pink400: #f08291;
  --pink500: #cd6778;
  --pink600: #a0505f;
  --pink700: #7d3f4b;
  --pink800: #5a2d37;
  --pink900: #3c191e;

  --azure50: #dff2ff;
  --azure100: #afdcfd;
  --azure200: #73c4ff;
  --azure300: #43aeff;
  --azure400: #1491f0;
  --azure500: #0077d7;
  --azure600: #005fbc;
  --azure700: #0048a0;
  --azure800: #003473;
  --azure900: #001a2e;

  --gray50: #f7f7f7;
  --gray100: #e8e8e8;
  --gray200: #d3d3d3;
  --gray300: #bdbdbd;
  --gray400: #a3a3a3;
  --gray500: #838383;
  --gray600: #666666;
  --gray700: #4d4d4d;
  --gray800: #333333;
  --gray900: #1d1d1d;
  --gray51: #efefef;
  --gray101: #dddddd;
  --gray201: #c8c8c8;
  --gray301: #b0b0b0;
  --gray401: #939393;
  --gray501: #757575;
  --gray601: #5a5a5a;
  --gray701: #404040;
  --gray801: #282828;

  --red50: #ffe8ea;
  --red100: #fdc6ce;
  --red200: #fca1ad;
  --red300: #fb7a8d;
  --red400: #f75269;
  --red500: #f22d48;
  --red600: #da1230;
  --red700: #b20c27;
  --red800: #7e061e;
  --red900: #490312;

  --green50: #c8f2df;
  --green100: #a6e5c6;
  --green200: #7ad8a4;
  --green300: #4dcb86;
  --green400: #3bba72;
  --green500: #2da45d;
  --green600: #21874c;
  --green700: #116a3b;
  --green800: #0b4d2b;
  --green900: #06311c;

  --white: #ffffff;

  /* ---------------------------------------------------------------- *
     * Semantic tokens — light theme (default)
     * ---------------------------------------------------------------- */
  --text-primary: var(--gray900);
  --text-secondary: var(--gray500);
  --text-on-color: var(--white);
  --text-brand-primary: var(--purple700);
  --text-brand-secondary: var(--gold400);
  --text-error: var(--red600);
  --text-disabled: rgba(0, 0, 0, 0.25);
  --text-on-color-disabled: var(--gray500);
  --text-weak: var(--gray600);
  --text-placeholder: var(--gray900);

  /* Dark-section tokens — no utility classes consume these yet (only buttons do, see .button--dark*); kept available for future dark-section components */
  --text-primary-dark: var(--white);
  --text-secondary-dark: var(--gray400);
  --text-on-color-dark: var(--white);
  --text-brand-primary-dark: var(--purple200);
  --text-brand-secondary-dark: var(--gold400);
  --text-error-dark: var(--red400);
  --text-on-color-disabled-dark: var(--gray400);
  --text-disabled-dark: rgba(255, 255, 255, 0.25);
  --text-placeholder-dark: var(--gray400);

  --link-primary: var(--azure600);
  --link-hover: var(--azure700);
  --link-active: var(--azure800);
  --link-focus: var(--azure500);
  --link-secondary: var(--gray900);
  --link-tertiary: var(--gray600);
  --link-visited: var(--purple600);

  /* Accent link colors — used for links on dark/footer-style containers (e.g. footnotes) */
  --text-accent: var(--azure300);
  --text-accent-hover: var(--azure400);
  --text-accent-active: var(--azure500);
  --text-accent-focus: var(--azure500);

  --border-brand: var(--purple700);
  --border-primary: var(--gray500);
  --border-secondary: var(--gray300);
  --border-tertiary: var(--gray200);
  --border-focus: var(--azure500);
  --border-error: var(--red600);

  --border-brand-dark: var(--purple300);
  --border-primary-dark: var(--gray400);
  --border-secondary-dark: var(--gray600);
  --border-tertiary-dark: var(--gray700);
  --border-focus-dark: var(--azure500);
  --border-error-dark: var(--red400);

  --bg-primary: var(--white);
  --bg-neutral-1: var(--gray50);
  --bg-neutral-2: var(--gray100);
  --bg-brand-primary-1: var(--purple50);
  --bg-brand-primary-2: var(--purple100);
  --bg-brand-primary-3: var(--purple200);
  --bg-brand-primary-4: var(--purple300);
  --bg-error: var(--red50);
  --bg-alert: var(--gold50);
  --bg-success: var(--green50);

  /* Background state colors */
  --bg-hover: var(--gray51);
  --bg-active: var(--gray100);
  --bg-medium-hover: var(--gray101);
  --bg-medium-active: var(--gray200);
  --bg-brand-hover: var(--purple101);
  --bg-brand-active: var(--purple200);
  --bg-warning-hover: var(--gold401);
  --bg-warning-active: var(--gold500);

  --bg-primary-dark: var(--gray900);
  --bg-neutral-1-dark: var(--gray800);
  --bg-neutral-2-dark: var(--gray700);
  --bg-brand-primary-1-dark: var(--purple900);
  --bg-brand-primary-2-dark: var(--purple800);
  --bg-brand-primary-3-dark: var(--purple700);
  --bg-brand-primary-4-dark: var(--purple600);
  --bg-error-dark: var(--red900);
  --bg-alert-dark: var(--gold900);
  --bg-success-dark: var(--green900);

  --bg-hover-dark: var(--gray701);
  --bg-active-dark: var(--gray700);
  --bg-medium-hover-dark: var(--gray601);
  --bg-medium-active-dark: var(--gray600);
  --bg-brand-hover-dark: var(--purple601);
  --bg-brand-active-dark: var(--purple600);
  --bg-warning-hover-dark: var(--gold401);
  --bg-warning-active-dark: var(--gold500);

  /* Pills */
  --pill-secondary-bg: var(--bg-neutral-2);
  --pill-secondary-bg-hover: var(--gray200);
  --pill-secondary-bg-active: var(--gray200);

  /* Brand */
  --logo: var(--purple700);
  --logo-dark: var(--white);

  /* Buttons
     Matches the Harmony Website Components Button spec (Figma
     hm2v2Ob7wGxMq6I5QEc6Pb, nodes 3357:9549 "on light" / 7423:51452 "on
     dark") — confirmed byte-identical color values between the light and
     dark frames, so there's deliberately no separate hue per section:
       - Secondary's hover/active reuse the same azure600/azure700 as
         Primary/Outline, rather than darker grays — every non-danger
         variant converges on one shared brand-blue interaction color.
       - Danger sits one step darker in the red ramp (600/700/800) than
         this file previously had (500/600/700).
       - Outline's enabled text/border is azure600, not azure500.
       - Disabled is a semi-transparent overlay on whatever's behind it
         (black-based on light, white-based on dark) rather than a flat
         gray fill, so it stays legible on either surface. */
  --button-primary: var(--azure500);
  --button-primary-hover: var(--azure600);
  --button-primary-active: var(--azure700);
  --button-secondary: var(--gray600);
  --button-secondary-hover: var(--azure600);
  --button-secondary-active: var(--azure700);
  --button-tertiary: transparent;
  --button-tertiary-hover: var(--azure600);
  --button-tertiary-active: var(--azure700);
  --button-danger: var(--red600);
  --button-danger-hover: var(--red700);
  --button-danger-active: var(--red800);
  --button-disabled: rgba(0, 0, 0, 0.17);

  /* Dark-section buttons — for use on dark-background sections via .button--dark* */
  --button-primary-dark: var(--azure500);
  --button-primary-hover-dark: var(--azure600);
  --button-primary-active-dark: var(--azure700);
  --button-secondary-dark: var(--gray600);
  --button-secondary-hover-dark: var(--azure600);
  --button-secondary-active-dark: var(--azure700);
  --button-tertiary-dark: transparent;
  --button-tertiary-hover-dark: var(--azure600);
  --button-tertiary-active-dark: var(--azure700);
  --button-danger-dark: var(--red600);
  --button-danger-hover-dark: var(--red700);
  --button-danger-active-dark: var(--red800);
  --button-disabled-dark: rgba(255, 255, 255, 0.17);

  --button-font-size: 1rem; /* 16px */
  --button-line-height: 1.125rem; /* 18px, compact */
  --button-font-weight: 420;
  --button-letter-spacing: 0.2px;

  --button-size-small: var(--space-3); /* 6px padding */
  --button-size-medium: var(--space-5); /* 10px padding */
  --button-size-large: calc(var(--space-7) - var(--space-1)); /* 14px padding */

  --button-radius: var(--radius-1);
  --button-icon-size: var(--space-8); /* 20px */
}

/* -------------------------------------------------------------------- *
 * Responsive spacing overrides
 * -------------------------------------------------------------------- */

/* Tablet — 768px to 980px */
@media all and (min-width: 48rem) and (max-width: 61.25rem) {
  :root {
    --space-2xs: var(--space-4); /* 6px */
    --space-s: var(--space-8); /* 20px */
    --space-m: var(--space-9); /* 24px */
    --space-l: var(--space-12); /* 36px */
    --space-xl: var(--space-15); /* 56px */
    --space-2xl: var(--space-17); /* 80px */
    --space-3xl: var(--space-19); /* 128px */
  }
}

/* Small tablet — 481px to 767px */
@media all and (min-width: 30.0625rem) and (max-width: 47.9375rem) {
  :root {
    --space-s: var(--space-8); /* 20px */
    --space-m: var(--space-9); /* 24px */
    --space-l: var(--space-12); /* 36px */
    --space-xl: var(--space-15); /* 56px */
    --space-2xl: var(--space-17); /* 80px */
    --space-3xl: var(--space-19); /* 128px */
    --gap-condensed: var(--space-4); /* 8px */
    --gap-wide: var(--space-11);
    --gap-xwide: var(--space-14);
  }
}

/* Mobile — up to 480px */
@media all and (max-width: 30rem) {
  :root {
    --space-s: var(--space-7); /* 16px */
    --space-m: var(--space-7); /* 16px */
    --space-l: var(--space-11); /* 36px */
    --space-xl: var(--space-14); /* 56px */
    --space-2xl: var(--space-16); /* 80px */
    --space-3xl: var(--space-18); /* 128px */
    --gap-condensed: var(--space-4); /* 8px */
    --gap-wide: var(--space-7);
    --gap-xwide: var(--space-11);
  }
}

/* Typography — tablet/mobile adjustments */
@media all and (min-width: 30.0625rem) and (max-width: 61.25rem) {
  :root {
    --display-l-font-size: 3.4375rem;
    --display-l-line-height: 3.8125rem;
    --display-l-font-weight: 310;
    --display-m-font-size: 2.875rem;
    --display-m-line-height: 3.25rem;
    --display-m-font-weight: 320;
    --display-s-font-size: 2.375rem;
    --display-s-line-height: 2.75rem;
    --display-s-font-weight: 340;
    --headline-l-font-size: 1.9375rem;
    --headline-l-line-height: 2.3125rem;
    --headline-l-font-weight: 350;
    --headline-m-font-size: 1.625rem;
    --headline-m-line-height: 2rem;
    --headline-m-font-weight: 370;
    --headline-s-font-size: 1.3125rem;
    --headline-s-line-height: 1.6875rem;
    --headline-s-font-weight: 390;
    --paragraph-l-font-size: 1.75rem;
    --paragraph-l-line-height: 2.125rem;
    --paragraph-l-font-weight: 360;
    --paragraph-m-font-size: 1.4375rem;
    --paragraph-m-line-height: 1.8125rem;
    --paragraph-m-font-weight: 380;
    --paragraph-s-font-size: 1.1875rem;
    --paragraph-s-line-height: 1.5625rem;
    --paragraph-s-font-weight: 400;
  }
}

@media all and (max-width: 30rem) {
  :root {
    --display-l-font-size: 2.3125rem;
    --display-l-line-height: 2.6875rem;
    --display-l-font-weight: 340;
    --display-m-font-size: 2.0625rem;
    --display-m-line-height: 2.4375rem;
    --display-m-font-weight: 350;
    --display-s-font-size: 1.8125rem;
    --display-s-line-height: 2.1875rem;
    --display-s-font-weight: 360;
    --headline-l-font-size: 1.5625rem;
    --headline-l-line-height: 1.9375rem;
    --headline-l-font-weight: 380;
    --headline-m-font-size: 1.375rem;
    --headline-m-line-height: 1.75rem;
    --headline-m-font-weight: 390;
    --headline-s-font-size: 1.25rem;
    --headline-s-line-height: 1.625rem;
    --headline-s-font-weight: 400;
    --paragraph-l-font-size: 1.5rem;
    --paragraph-l-line-height: 1.875rem;
    --paragraph-l-font-weight: 380;
    --paragraph-m-font-size: 1.3125rem;
    --paragraph-m-line-height: 1.6875rem;
    --paragraph-m-font-weight: 390;
  }
}

/* -------------------------------------------------------------------- *
 * Base elements
 * -------------------------------------------------------------------- */

body {
  font-family: "Cera ModMed", Helvetica, Arial, sans-serif;
  color: var(--text-primary);
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);
  font-variation-settings:
    "wght" var(--body-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-l-letter-spacing);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--text-primary);
  margin: 0 0 var(--space-xs);
  padding-bottom: 0;
  text-wrap: pretty;
}

h1 {
  font-size: var(--display-m-font-size);
  line-height: var(--display-m-line-height);
  font-variation-settings:
    "wght" var(--display-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-m-letter-spacing);
}
h2 {
  font-size: var(--display-s-font-size);
  line-height: var(--display-s-line-height);
  font-variation-settings:
    "wght" var(--display-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-s-letter-spacing);
}
h3 {
  font-size: var(--headline-l-font-size);
  line-height: var(--headline-l-line-height);
  font-variation-settings:
    "wght" var(--headline-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-l-letter-spacing);
}
h4 {
  font-size: var(--headline-m-font-size);
  line-height: var(--headline-m-line-height);
  font-variation-settings:
    "wght" var(--headline-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-m-letter-spacing);
}
h5 {
  font-size: var(--headline-s-font-size);
  line-height: var(--headline-s-line-height);
  font-variation-settings:
    "wght" var(--headline-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-s-letter-spacing);
}
h6 {
  font-size: var(--title-l-font-size);
  line-height: var(--title-l-line-height);
  font-variation-settings:
    "wght" var(--title-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--title-l-letter-spacing);
}
@media all and (min-width: 68.6875rem) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    white-space: pre-line;
  }
}

p,
ul,
ol {
  margin: 0 0 var(--space-xs);
  padding-bottom: 0;
}

li {
  margin-bottom: var(--list-spacing-body-l);
}

strong,
b {
  font-variation-settings: "wght" 700;
}

/* Without this, trademark/registration/copyright symbols inherit the full
   surrounding font-size — glaring next to normal text inside large display
   headings. line-height: 0 keeps the smaller glyph from inflating the
   parent line box. */
sup,
sub {
  font-size: 0.5em;
  line-height: 0;
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

blockquote {
  font-size: var(--paragraph-m-font-size);
  line-height: var(--paragraph-m-line-height);
  font-variation-settings:
    "wght" var(--paragraph-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--paragraph-m-letter-spacing);
  margin: 0 0 var(--space-xs);
}

blockquote > cite {
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  font-variation-settings:
    "wght" var(--body-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-s-letter-spacing);
}

a {
  color: var(--link-primary);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
}
a:active {
  color: var(--link-active);
}
a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

code,
pre {
  margin-bottom: 0;
  padding: 0;
  font-family: "Courier New", Courier, monospace;
}

/* Typography utilities */
.bold,
.bold-h h1,
.bold-h h2,
.bold-h h3,
.bold-h h4,
.bold-h h5,
.bold-h h6,
.bold-b p,
.bold-b ul,
.bold-b ol,
.bold-b li {
  font-variation-settings: "wght" 700 !important;
}

.nobr {
  white-space: nowrap;
}

h1.no-margin,
h2.no-margin,
h3.no-margin,
h4.no-margin,
h5.no-margin,
h6.no-margin,
.no-margin-h h1,
.no-margin-h h2,
.no-margin-h h3,
.no-margin-h h4,
.no-margin-h h5,
.no-margin-h h6,
.no-margin,
p.no-margin,
blockquote.no-margin,
cite.no-margin,
.no-margin-b p {
  margin-bottom: 0 !important;
}

.no-margin-ul ul {
  margin-bottom: 0 !important;
}
.no-padding-ul ul {
  padding-bottom: 0 !important;
}
.no-margin-ol ol {
  margin-bottom: 0 !important;
}
.no-padding-ol ol {
  padding-bottom: 0 !important;
}
.no-margin-li ul > li:last-child {
  margin-bottom: 0 !important;
}
.no-margin-p p:last-child {
  margin-bottom: 0 !important;
}

/* -------------------------------------------------------------------- *
 * Typography — type-scale utility classes
 *
 * Apply a type-scale style directly to any element (.display-l), or to
 * descendant headings/prose/blockquotes via a modifier suffix instead
 * of restyling h1-h6 by hand:
 *   -h   applies to descendant h1-h6
 *   -b   applies to descendant p/ul/ol/li ("body" text)
 *   -bq  applies to descendant blockquote (+ cite)
 * "-fixed" variants (display/headline only) don't shrink at tablet/
 * mobile breakpoints, unlike their default counterparts.
 * -------------------------------------------------------------------- */

/*********************
 * Font Size Classes *
 *********************/

.display-l-h h1,
.display-l-h h2,
.display-l-h h3,
.display-l-h h4,
.display-l-h h5,
.display-l-h h6,
.display-l-b p,
.display-l-b ul,
.display-l-b ol,
.display-l-b li,
.display-l-bq blockquote,
.display-l-bq blockquote > cite,
.display-l,
.display-l-b,
.display-l-h,
.display-l-bq {
  font-size: var(--display-l-font-size);
  line-height: var(--display-l-line-height);
  font-variation-settings:
    "wght" var(--display-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-l-letter-spacing);
  margin-bottom: var(--space-s);
}

.display-m-h h1,
.display-m-h h2,
.display-m-h h3,
.display-m-h h4,
.display-m-h h5,
.display-m-h h6,
.display-m-b p,
.display-m-b ul,
.display-m-b ol,
.display-m-b li,
.display-m-bq blockquote,
.display-m-bq blockquote > cite,
.display-m,
.display-m-b,
.display-m-h,
.display-m-bq {
  font-size: var(--display-m-font-size);
  line-height: var(--display-m-line-height);
  font-variation-settings:
    "wght" var(--display-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-m-letter-spacing);
  margin-bottom: var(--space-xs);
}

.display-s-h h1,
.display-s-h h2,
.display-s-h h3,
.display-s-h h4,
.display-s-h h5,
.display-s-h h6,
.display-s-b p,
.display-s-b ul,
.display-s-b ol,
.display-s-b li,
.display-s-bq blockquote,
.display-s-bq blockquote > cite,
.display-s,
.display-s-b,
.display-s-h,
.display-s-bq {
  font-size: var(--display-s-font-size);
  line-height: var(--display-s-line-height);
  font-variation-settings:
    "wght" var(--display-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-s-letter-spacing);
  margin-bottom: var(--space-xs);
}

.display-l-fixed-h h1,
.display-l-fixed-h h2,
.display-l-fixed-h h3,
.display-l-fixed-h h4,
.display-l-fixed-h h5,
.display-l-fixed-h h6,
.display-l-fixed-b p,
.display-l-fixed-b ul,
.display-l-fixed-b ol,
.display-l-fixed-b li,
.display-l-fixed-bq blockquote,
.display-l-fixed-bq blockquote > cite,
.display-l-fixed,
.display-l-fixed-b,
.display-l-fixed-h,
.display-l-fixed-bq {
  font-size: var(--display-l-fixed-font-size);
  line-height: var(--display-l-fixed-line-height);
  font-variation-settings:
    "wght" var(--display-l-fixed-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-l-fixed-letter-spacing);
  margin-bottom: var(--space-s);
}

.display-m-fixed-h h1,
.display-m-fixed-h h2,
.display-m-fixed-h h3,
.display-m-fixed-h h4,
.display-m-fixed-h h5,
.display-m-fixed-h h6,
.display-m-fixed-b p,
.display-m-fixed-b ul,
.display-m-fixed-b ol,
.display-m-fixed-b li,
.display-m-fixed-bq blockquote,
.display-m-fixed-bq blockquote > cite,
.display-m-fixed,
.display-m-fixed-b,
.display-m-fixed-h,
.display-m-fixed-bq {
  font-size: var(--display-m-fixed-font-size);
  line-height: var(--display-m-fixed-line-height);
  font-variation-settings:
    "wght" var(--display-m-fixed-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-m-fixed-letter-spacing);
  margin-bottom: var(--space-xs);
}

.display-s-fixed-h h1,
.display-s-fixed-h h2,
.display-s-fixed-h h3,
.display-s-fixed-h h4,
.display-s-fixed-h h5,
.display-s-fixed-h h6,
.display-s-fixed-b p,
.display-s-fixed-b ul,
.display-s-fixed-b ol,
.display-s-fixed-b li,
.display-s-fixed-bq blockquote,
.display-s-fixed-bq blockquote > cite,
.display-s-fixed,
.display-s-fixed-b,
.display-s-fixed-h,
.display-s-fixed-bq {
  font-size: var(--display-s-fixed-font-size);
  line-height: var(--display-s-fixed-line-height);
  font-variation-settings:
    "wght" var(--display-s-fixed-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--display-s-fixed-letter-spacing);
  margin-bottom: var(--space-xs);
}

.headline-l-h h1,
.headline-l-h h2,
.headline-l-h h3,
.headline-l-h h4,
.headline-l-h h5,
.headline-l-h h6,
.headline-l-b p,
.headline-l-b ul,
.headline-l-b ol,
.headline-l-b li,
.headline-l-bq blockquote,
.headline-l-bq blockquote > cite,
.headline-l,
.headline-l-h,
.headline-l-b,
.headline-l-bq {
  font-size: var(--headline-l-font-size);
  line-height: var(--headline-l-line-height);
  font-variation-settings:
    "wght" var(--headline-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-l-letter-spacing);
  margin-bottom: var(--space-xs);
}

.headline-m-h h1,
.headline-m-h h2,
.headline-m-h h3,
.headline-m-h h4,
.headline-m-h h5,
.headline-m-h h6,
.headline-m-b p,
.headline-m-b ul,
.headline-m-b ol,
.headline-m-b li,
.headline-m-bq blockquote,
.headline-m-bq blockquote > cite,
.headline-m,
.headline-m-h,
.headline-m-b,
.headline-m-bq {
  font-size: var(--headline-m-font-size);
  line-height: var(--headline-m-line-height);
  font-variation-settings:
    "wght" var(--headline-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-m-letter-spacing);
  margin-bottom: var(--space-xs);
}

.headline-s-h h1,
.headline-s-h h2,
.headline-s-h h3,
.headline-s-h h4,
.headline-s-h h5,
.headline-s-h h6,
.headline-s-b p,
.headline-s-b ul,
.headline-s-b ol,
.headline-s-b li,
.headline-s-bq blockquote,
.headline-s-bq blockquote > cite,
.headline-s,
.headline-s-h,
.headline-s-b,
.headline-s-bq {
  font-size: var(--headline-s-font-size);
  line-height: var(--headline-s-line-height);
  font-variation-settings:
    "wght" var(--headline-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-s-letter-spacing);
  margin-bottom: var(--space-xs);
}

.headline-l-fixed-h h1,
.headline-l-fixed-h h2,
.headline-l-fixed-h h3,
.headline-l-fixed-h h4,
.headline-l-fixed-h h5,
.headline-l-fixed-h h6,
.headline-l-fixed-b p,
.headline-l-fixed-b ul,
.headline-l-fixed-b ol,
.headline-l-fixed-b li,
.headline-l-fixed-bq blockquote,
.headline-l-fixed-bq blockquote > cite,
.headline-l-fixed,
.headline-l-fixed-b,
.headline-l-fixed-h,
.headline-l-fixed-bq {
  font-size: var(--headline-l-fixed-font-size);
  line-height: var(--headline-l-fixed-line-height);
  font-variation-settings:
    "wght" var(--headline-l-fixed-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-l-fixed-letter-spacing);
  margin-bottom: var(--space-xs);
}

.headline-m-fixed-h h1,
.headline-m-fixed-h h2,
.headline-m-fixed-h h3,
.headline-m-fixed-h h4,
.headline-m-fixed-h h5,
.headline-m-fixed-h h6,
.headline-m-fixed-b p,
.headline-m-fixed-b ul,
.headline-m-fixed-b ol,
.headline-m-fixed-b li,
.headline-m-fixed-bq blockquote,
.headline-m-fixed-bq blockquote > cite,
.headline-m-fixed,
.headline-m-fixed-h,
.headline-m-fixed-b,
.headline-m-fixed-bq {
  font-size: var(--headline-m-fixed-font-size);
  line-height: var(--headline-m-fixed-line-height);
  font-variation-settings:
    "wght" var(--headline-m-fixed-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-m-fixed-letter-spacing);
  margin-bottom: var(--space-xs);
}

.headline-s-fixed-h h1,
.headline-s-fixed-h h2,
.headline-s-fixed-h h3,
.headline-s-fixed-h h4,
.headline-s-fixed-h h5,
.headline-s-fixed-h h6,
.headline-s-fixed-b p,
.headline-s-fixed-b ul,
.headline-s-fixed-b ol,
.headline-s-fixed-b li,
.headline-s-fixed-bq blockquote,
.headline-s-fixed-bq blockquote > cite,
.headline-s-fixed,
.headline-s-fixed-h,
.headline-s-fixed-b,
.headline-s-fixed-bq {
  font-size: var(--headline-s-fixed-font-size);
  line-height: var(--headline-s-fixed-line-height);
  font-variation-settings:
    "wght" var(--headline-s-fixed-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--headline-s-fixed-letter-spacing);
  margin-bottom: var(--space-xs);
}

.title-l-h h1,
.title-l-h h2,
.title-l-h h3,
.title-l-h h4,
.title-l-h h5,
.title-l-h h6,
.title-l-b p,
.title-l-b ul,
.title-l-b ol,
.title-l-b li,
.title-l-bq blockquote,
.title-l-bq blockquote > cite,
.title-l,
.title-l-h,
.title-l-b,
.title-l-bq {
  font-size: var(--title-l-font-size);
  line-height: var(--title-l-line-height);
  font-variation-settings:
    "wght" var(--title-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--title-l-letter-spacing);
  margin-bottom: var(--space-xs);
}

.title-m-h h1,
.title-m-h h2,
.title-m-h h3,
.title-m-h h4,
.title-m-h h5,
.title-m-h h6,
.title-m-b p,
.title-m-b ul,
.title-m-b ol,
.title-m-b li,
.title-m-bq blockquote,
.title-m-bq blockquote > cite,
.title-m,
.title-m-h,
.title-m-b,
.title-m-bq {
  font-size: var(--title-m-font-size);
  line-height: var(--title-m-line-height);
  font-variation-settings:
    "wght" var(--title-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--title-m-letter-spacing);
  margin-bottom: var(--space-xs);
}

.title-s-h h1,
.title-s-h h2,
.title-s-h h3,
.title-s-h h4,
.title-s-h h5,
.title-s-h h6,
.title-s-b p,
.title-s-b ul,
.title-s-b ol,
.title-s-b li,
.title-s-bq blockquote,
.title-s-bq blockquote > cite,
.title-s,
.title-s-h,
.title-s-b,
.title-s-bq {
  font-size: var(--title-s-font-size);
  line-height: var(--title-s-line-height);
  font-variation-settings:
    "wght" var(--title-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--title-s-letter-spacing);
  margin-bottom: var(--space-2xs);
}

.body-l-h h1,
.body-l-h h2,
.body-l-h h3,
.body-l-h h4,
.body-l-h h5,
.body-l-h h6,
.body-l-b p,
.body-l-b ul,
.body-l-b ol,
.body-l-b li,
.body-l-bq blockquote,
.body-l-bq blockquote > cite,
.body-l,
.body-l-h,
.body-l-b,
.body-l-bq {
  font-size: var(--body-l-font-size);
  line-height: var(--body-l-line-height);
  font-variation-settings:
    "wght" var(--body-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-l-letter-spacing);
  margin-bottom: var(--space-xs);
}

.body-l-b li {
  margin-bottom: var(--list-spacing-body-l);
}

.body-m-h h1,
.body-m-h h2,
.body-m-h h3,
.body-m-h h4,
.body-m-h h5,
.body-m-h h6,
.body-m-b p,
.body-m-b ul,
.body-m-b ol,
.body-m-b li,
.body-m-bq blockquote,
.body-m-bq blockquote > cite,
.body-m,
.body-m-h,
.body-m-b,
.body-m-bq {
  font-size: var(--body-m-font-size);
  line-height: var(--body-m-line-height);
  font-variation-settings:
    "wght" var(--body-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-m-letter-spacing);
  margin-bottom: var(--space-xs);
}

.body-m-b li {
  margin-bottom: var(--list-spacing-body-m);
}

.body-s-h h1,
.body-s-h h2,
.body-s-h h3,
.body-s-h h4,
.body-s-h h5,
.body-s-h h6,
.body-s-b p,
.body-s-b ul,
.body-s-b ol,
.body-s-b li,
.body-s-bq blockquote,
.body-s-bq blockquote > cite,
.body-s,
.body-s-h,
.body-s-b,
.body-s-bq {
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-line-height);
  font-variation-settings:
    "wght" var(--body-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-s-letter-spacing);
  margin-bottom: var(--space-2xs);
}

.body-s-b li {
  margin-bottom: var(--list-spacing-body-s);
}

.body-l-compact-h h1,
.body-l-compact-h h2,
.body-l-compact-h h3,
.body-l-compact-h h4,
.body-l-compact-h h5,
.body-l-compact-h h6,
.body-l-compact-b p,
.body-l-compact-b ul,
.body-l-compact-b ol,
.body-l-compact-b li,
.body-l-compact-bq blockquote,
.body-l-compact-bq blockquote > cite,
.body-l-compact,
.body-l-compact-h,
.body-l-compact-b,
.body-l-compact-bq {
  font-size: var(--body-l-compact-font-size);
  line-height: var(--body-l-compact-line-height);
  font-variation-settings:
    "wght" var(--body-l-compact-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-l-compact-letter-spacing);
  margin-bottom: var(--space-xs);
}

.body-l-compact-b li {
  margin-bottom: var(--list-spacing-body-l);
}

.body-m-compact-h h1,
.body-m-compact-h h2,
.body-m-compact-h h3,
.body-m-compact-h h4,
.body-m-compact-h h5,
.body-m-compact-h h6,
.body-m-compact-b p,
.body-m-compact-b ul,
.body-m-compact-b ol,
.body-m-compact-b li,
.body-m-compact-bq blockquote,
.body-m-compact-bq blockquote > cite,
.body-m-compact,
.body-m-compact-h,
.body-m-compact-b,
.body-m-compact-bq {
  font-size: var(--body-m-compact-font-size);
  line-height: var(--body-m-compact-line-height);
  font-variation-settings:
    "wght" var(--body-m-compact-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-m-compact-letter-spacing);
  margin-bottom: var(--space-xs);
}

.body-m-compact-b li {
  margin-bottom: var(--list-spacing-body-m);
}

.body-s-compact-h h1,
.body-s-compact-h h2,
.body-s-compact-h h3,
.body-s-compact-h h4,
.body-s-compact-h h5,
.body-s-compact-h h6,
.body-s-compact-b p,
.body-s-compact-b ul,
.body-s-compact-b ol,
.body-s-compact-b li,
.body-s-compact-bq blockquote,
.body-s-compact-bq blockquote > cite,
.body-s-compact,
.body-s-compact-h,
.body-s-compact-b,
.body-s-compact-bq {
  font-size: var(--body-s-compact-font-size);
  line-height: var(--body-s-compact-line-height);
  font-variation-settings:
    "wght" var(--body-s-compact-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-s-compact-letter-spacing);
  margin-bottom: var(--space-xs);
}

.body-l-compact-b li {
  margin-bottom: var(--list-spacing-body-s);
}

.paragraph-l-h h1,
.paragraph-l-h h2,
.paragraph-l-h h3,
.paragraph-l-h h4,
.paragraph-l-h h5,
.paragraph-l-h h6,
.paragraph-l-b p,
.paragraph-l-b ul,
.paragraph-l-b ol,
.paragraph-l-b li,
.paragraph-l-bq blockquote,
.paragraph-l-bq blockquote > cite,
.paragraph-l,
.paragraph-l-h,
.paragraph-l-b,
.paragraph-l-bq {
  font-size: var(--paragraph-l-font-size);
  line-height: var(--paragraph-l-line-height);
  font-variation-settings:
    "wght" var(--paragraph-l-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--paragraph-l-letter-spacing);
  margin-bottom: var(--space-xs);
}

.paragraph-l-b li {
  margin-bottom: var(--list-spacing-paragraph-l);
}

.paragraph-m-h h1,
.paragraph-m-h h2,
.paragraph-m-h h3,
.paragraph-m-h h4,
.paragraph-m-h h5,
.paragraph-m-h h6,
.paragraph-m-b p,
.paragraph-m-b ul,
.paragraph-m-b ol,
.paragraph-m-b li,
.paragraph-m-bq blockquote,
.paragraph-m-bq blockquote > cite,
.paragraph-m,
.paragraph-m-h,
.paragraph-m-b,
.paragraph-m-bq {
  font-size: var(--paragraph-m-font-size);
  line-height: var(--paragraph-m-line-height);
  font-variation-settings:
    "wght" var(--paragraph-m-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--paragraph-m-letter-spacing);
  margin-bottom: var(--space-xs);
}

.paragraph-m-b li {
  margin-bottom: var(--list-spacing-paragraph-m);
}

.paragraph-s-h h1,
.paragraph-s-h h2,
.paragraph-s-h h3,
.paragraph-s-h h4,
.paragraph-s-h h5,
.paragraph-s-h h6,
.paragraph-s-b p,
.paragraph-s-b ul,
.paragraph-s-b ol,
.paragraph-s-b li,
.paragraph-s-bq blockquote,
.paragraph-s-bq blockquote > cite,
.paragraph-s,
.paragraph-s-h,
.paragraph-s-b,
.paragraph-s-bq {
  font-size: var(--paragraph-s-font-size);
  line-height: var(--paragraph-s-line-height);
  font-variation-settings:
    "wght" var(--paragraph-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--paragraph-s-letter-spacing);
  margin-bottom: var(--space-xs);
}

.paragraph-s-b li {
  margin-bottom: var(--list-spacing-paragraph-s);
}
/* -------------------------------------------------------------------- *
 * Grid — .row / .col-*
 *
 * Responsive column-count cascade: 12 columns above 980px, 8 columns
 * from 980px down to 480px, 4 columns below 480px. Column-fraction
 * classes (.col-1-2, .col-1-3, etc.) are redefined at each tier so
 * proportions hold or collapse to full-width as the grid narrows —
 * this is what makes columns "stack" on mobile.
 * -------------------------------------------------------------------- */

.container {
  padding: 0 var(--container-padding);
}

@media all and (max-width: 61.25rem) {
  .container {
    padding: 0 1rem;
  }
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gap-wide);
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  position: relative;
}

.row > * {
  grid-column: auto;
}

.col {
  margin: 0;
}

/* Gutter modifiers */
.row.narrow {
  column-gap: var(--gap-narrow);
}
.row.condensed {
  column-gap: var(--gap-condensed);
}
.row.wide {
  column-gap: var(--gap-wide);
  row-gap: var(--gap-wide);
}
.row.xwide {
  column-gap: var(--gap-xwide);
  row-gap: var(--gap-xwide);
}

/* Force a row to a single column, or force a 5-col row back to the standard grid */
.row.force-1col {
  grid-template-columns: repeat(1, 1fr);
}

/* Column-fraction classes — desktop / default (12-column) tier */
.col-1-2 {
  grid-column: auto/span 6;
}
.col-1-3 {
  grid-column: auto/span 4;
}
.col-2-3 {
  grid-column: auto/span 8;
}
.col-1-4 {
  grid-column: auto/span 3;
}
.col-3-4 {
  grid-column: auto/span 9;
}
.col-1-6 {
  grid-column: auto/span 2;
}
.col-2-5 {
  grid-column: auto/span 5;
}
.col-3-5 {
  grid-column: auto/span 7;
}
.col-full {
  grid-column: 1 / -1;
}

.row.force-grid > .col-2-5 {
  grid-column: auto/span 4;
}

/*
 * .row--5col — an alternate 5-column row type, for asymmetric splits
 * like 1/5 + 1/5 + 3/5. Supports the same 12/8/4 collapse as the main
 * grid via .force-grid. NOTE: the original Divi CSS also had a
 * 10-column intermediate state for a ~120px viewport band (981-
 * 1099px); that was left out here as disproportionate complexity for
 * a rarely-used row type — see style-mm20.css lines 3275-3309 if it's
 * ever needed.
 */
.row--5col {
  grid-template-columns: repeat(5, 1fr);
}
.row--5col.force-grid {
  grid-template-columns: repeat(12, 1fr);
}
.row--5col > .col-1-5 {
  grid-column: auto/span 1;
}
.row--5col > .col-3-5 {
  grid-column: auto/span 3;
}
.row--5col.force-grid > .col-1-5 {
  grid-column: auto/span 2;
}
.row--5col.force-grid > .col-3-5 {
  grid-column: auto/span 6;
}
.row.force-grid > .col-1-5 {
  grid-column: auto/span 2;
}

/* Row side-margin constraint — 481px to 1099px (fixed side margins instead of a centered max-width) */
@media all and (min-width: 30.0625rem) and (max-width: 68.6875rem) {
  .row.condensed {
    padding: 0;
    margin: 0 auto 0 var(--space-7);
    max-width: calc(100% - var(--space-7) - var(--space-11));
  }
  .row.narrow {
    padding: 0 var(--space-7);
    margin: 0;
    max-width: 100%;
  }
}

/* 8-column tier — 480px to 980px (tablet + small tablet) */
@media all and (max-width: 61.25rem) {
  .row,
  .row--5col.force-grid {
    grid-template-columns: repeat(8, 1fr);
  }

  .col-1-2,
  .col-1-4,
  .col-3-4 {
    grid-column: auto/span 4;
  }
  .col-1-3,
  .col-2-3 {
    grid-column: auto/span 8;
  }
  .col-1-6 {
    grid-column: auto/span 4;
  }

  .row.force-grid > .col-1-5,
  .row.force-grid > .col-2-5,
  .row.force-grid > .col-3-5 {
    grid-column: auto/span 4;
  }

  .row.force-1col {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* 4-column tier — below 480px (mobile) */
@media all and (max-width: 30rem) {
  .row.condensed {
    padding: 0;
    margin: 0;
    max-width: calc(100% - var(--space-7));
  }
  .row.narrow {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

  .row,
  .row--5col.force-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .col-1-2,
  .col-1-4,
  .col-3-4 {
    grid-column: auto/span 4;
  }
  .col-1-3,
  .col-2-3 {
    grid-column: auto/span 4;
  }
  .col-1-6 {
    grid-column: auto/span 4;
  }

  .row.force-grid > .col-1-5 {
    grid-column: auto/span 2;
  }
  .row.force-grid > .col-2-5,
  .row.force-grid > .col-3-5 {
    grid-column: auto/span 4;
  }

  .row.force-1col {
    grid-template-columns: repeat(1, 1fr);
  }
}

/* -------------------------------------------------------------------- *
 * Utility classes — spacing
 * -------------------------------------------------------------------- */

.m-none,
div.m-none {
  margin: var(--space-none) !important;
}
.m-4xs,
div.m-4xs {
  margin: var(--space-4xs) !important;
}
.m-3xs,
div.m-3xs {
  margin: var(--space-3xs) !important;
}
.m-2xs,
div.m-2xs {
  margin: var(--space-2xs) !important;
}
.m-xs,
div.m-xs {
  margin: var(--space-xs) !important;
}
.m-s,
div.m-s {
  margin: var(--space-s) !important;
}
.m-m,
div.m-m {
  margin: var(--space-m) !important;
}
.m-l,
div.m-l {
  margin: var(--space-l) !important;
}
.m-xl,
div.m-xl {
  margin: var(--space-xl) !important;
}
.m-2xl,
div.m-2xl {
  margin: var(--space-2xl) !important;
}
.m-3xl,
div.m-3xl {
  margin: var(--space-3xl) !important;
}

.mv-none,
div.mv-none {
  margin-top: var(--space-none) !important;
  margin-bottom: var(--space-none) !important;
}
.mv-4xs,
div.mv-4xs {
  margin-top: var(--space-4xs) !important;
  margin-bottom: var(--space-4xs) !important;
}
.mv-3xs,
div.mv-3xs {
  margin-top: var(--space-3xs) !important;
  margin-bottom: var(--space-3xs) !important;
}
.mv-2xs,
div.mv-2xs {
  margin-top: var(--space-2xs) !important;
  margin-bottom: var(--space-2xs) !important;
}
.mv-xs,
div.mv-xs {
  margin-top: var(--space-xs) !important;
  margin-bottom: var(--space-xs) !important;
}
.mv-s,
div.mv-s {
  margin-top: var(--space-s) !important;
  margin-bottom: var(--space-s) !important;
}
.mv-m,
div.mv-m {
  margin-top: var(--space-m) !important;
  margin-bottom: var(--space-m) !important;
}
.mv-l,
div.mv-l {
  margin-top: var(--space-l) !important;
  margin-bottom: var(--space-l) !important;
}
.mv-xl,
div.mv-xl {
  margin-top: var(--space-xl) !important;
  margin-bottom: var(--space-xl) !important;
}
.mv-2xl,
div.mv-2xl {
  margin-top: var(--space-2xl) !important;
  margin-bottom: var(--space-2xl) !important;
}
.mv-3xl,
div.mv-3xl {
  margin-top: var(--space-3xl) !important;
  margin-bottom: var(--space-3xl) !important;
}

.mh-none,
div.mh-none {
  margin-left: var(--space-none) !important;
  margin-right: var(--space-none) !important;
}
.mh-4xs,
div.mh-4xs {
  margin-left: var(--space-4xs) !important;
  margin-right: var(--space-4xs) !important;
}
.mh-3xs,
div.mh-3xs {
  margin-left: var(--space-3xs) !important;
  margin-right: var(--space-3xs) !important;
}
.mh-2xs,
div.mh-2xs {
  margin-left: var(--space-2xs) !important;
  margin-right: var(--space-2xs) !important;
}
.mh-xs,
div.mh-xs {
  margin-left: var(--space-xs) !important;
  margin-right: var(--space-xs) !important;
}
.mh-s,
div.mh-s {
  margin-left: var(--space-s) !important;
  margin-right: var(--space-s) !important;
}
.mh-m,
div.mh-m {
  margin-left: var(--space-m) !important;
  margin-right: var(--space-m) !important;
}
.mh-l,
div.mh-l {
  margin-left: var(--space-l) !important;
  margin-right: var(--space-l) !important;
}
.mh-xl,
div.mh-xl {
  margin-left: var(--space-xl) !important;
  margin-right: var(--space-xl) !important;
}
.mh-2xl,
div.mh-2xl {
  margin-left: var(--space-2xl) !important;
  margin-right: var(--space-2xl) !important;
}
.mh-3xl,
div.mh-3xl {
  margin-left: var(--space-3xl) !important;
  margin-right: var(--space-3xl) !important;
}

.mt-none,
div.mt-none {
  margin-top: var(--space-none) !important;
}
.mt-4xs,
div.mt-4xs {
  margin-top: var(--space-4xs) !important;
}
.mt-3xs,
div.mt-3xs {
  margin-top: var(--space-3xs) !important;
}
.mt-2xs,
div.mt-2xs {
  margin-top: var(--space-2xs) !important;
}
.mt-xs,
div.mt-xs {
  margin-top: var(--space-xs) !important;
}
.mt-s,
div.mt-s {
  margin-top: var(--space-s) !important;
}
.mt-m,
div.mt-m {
  margin-top: var(--space-m) !important;
}
.mt-l,
div.mt-l {
  margin-top: var(--space-l) !important;
}
.mt-xl,
div.mt-xl {
  margin-top: var(--space-xl) !important;
}
.mt-2xl,
div.mt-2xl {
  margin-top: var(--space-2xl) !important;
}
.mt-3xl,
div.mt-3xl {
  margin-top: var(--space-3xl) !important;
}

.mr-none,
div.mr-none {
  margin-right: var(--space-none) !important;
}
.mr-4xs,
div.mr-4xs {
  margin-right: var(--space-4xs) !important;
}
.mr-3xs,
div.mr-3xs {
  margin-right: var(--space-3xs) !important;
}
.mr-2xs,
div.mr-2xs {
  margin-right: var(--space-2xs) !important;
}
.mr-xs,
div.mr-xs {
  margin-right: var(--space-xs) !important;
}
.mr-s,
div.mr-s {
  margin-right: var(--space-s) !important;
}
.mr-m,
div.mr-m {
  margin-right: var(--space-m) !important;
}
.mr-l,
div.mr-l {
  margin-right: var(--space-l) !important;
}
.mr-xl,
div.mr-xl {
  margin-right: var(--space-xl) !important;
}
.mr-2xl,
div.mr-2xl {
  margin-right: var(--space-2xl) !important;
}
.mr-3xl,
div.mr-3xl {
  margin-right: var(--space-3xl) !important;
}

.mb-none,
div.mb-none {
  margin-bottom: var(--space-none) !important;
}
.mb-4xs,
div.mb-4xs {
  margin-bottom: var(--space-4xs) !important;
}
.mb-3xs,
div.mb-3xs {
  margin-bottom: var(--space-3xs) !important;
}
.mb-2xs,
div.mb-2xs {
  margin-bottom: var(--space-2xs) !important;
}
.mb-xs,
div.mb-xs {
  margin-bottom: var(--space-xs) !important;
}
.mb-s,
div.mb-s {
  margin-bottom: var(--space-s) !important;
}
.mb-m,
div.mb-m {
  margin-bottom: var(--space-m) !important;
}
.mb-l,
div.mb-l {
  margin-bottom: var(--space-l) !important;
}
.mb-xl,
div.mb-xl {
  margin-bottom: var(--space-xl) !important;
}
.mb-2xl,
div.mb-2xl {
  margin-bottom: var(--space-2xl) !important;
}
.mb-3xl,
div.mb-3xl {
  margin-bottom: var(--space-3xl) !important;
}

.ml-none,
div.ml-none {
  margin-left: var(--space-none) !important;
}
.ml-4xs,
div.ml-4xs {
  margin-left: var(--space-4xs) !important;
}
.ml-3xs,
div.ml-3xs {
  margin-left: var(--space-3xs) !important;
}
.ml-2xs,
div.ml-2xs {
  margin-left: var(--space-2xs) !important;
}
.ml-xs,
div.ml-xs {
  margin-left: var(--space-xs) !important;
}
.ml-s,
div.ml-s {
  margin-left: var(--space-s) !important;
}
.ml-m,
div.ml-m {
  margin-left: var(--space-m) !important;
}
.ml-l,
div.ml-l {
  margin-left: var(--space-l) !important;
}
.ml-xl,
div.ml-xl {
  margin-left: var(--space-xl) !important;
}
.ml-2xl,
div.ml-2xl {
  margin-left: var(--space-2xl) !important;
}
.ml-3xl,
div.ml-3xl {
  margin-left: var(--space-3xl) !important;
}

.p-none,
div.p-none {
  padding: var(--space-none) !important;
}
.p-4xs,
div.p-4xs {
  padding: var(--space-4xs) !important;
}
.p-3xs,
div.p-3xs {
  padding: var(--space-3xs) !important;
}
.p-2xs,
div.p-2xs {
  padding: var(--space-2xs) !important;
}
.p-xs,
div.p-xs {
  padding: var(--space-xs) !important;
}
.p-s,
div.p-s {
  padding: var(--space-s) !important;
}
.p-m,
div.p-m {
  padding: var(--space-m) !important;
}
.p-l,
div.p-l {
  padding: var(--space-l) !important;
}
.p-xl,
div.p-xl {
  padding: var(--space-xl) !important;
}
.p-2xl,
div.p-2xl {
  padding: var(--space-2xl) !important;
}
.p-3xl,
div.p-3xl {
  padding: var(--space-3xl) !important;
}

.pv-none,
div.pv-none {
  padding-top: var(--space-none) !important;
  padding-bottom: var(--space-none) !important;
}
.pv-4xs,
div.pv-4xs {
  padding-top: var(--space-4xs) !important;
  padding-bottom: var(--space-4xs) !important;
}
.pv-3xs,
div.pv-3xs {
  padding-top: var(--space-3xs) !important;
  padding-bottom: var(--space-3xs) !important;
}
.pv-2xs,
div.pv-2xs {
  padding-top: var(--space-2xs) !important;
  padding-bottom: var(--space-2xs) !important;
}
.pv-xs,
div.pv-xs {
  padding-top: var(--space-xs) !important;
  padding-bottom: var(--space-xs) !important;
}
.pv-s,
div.pv-s {
  padding-top: var(--space-s) !important;
  padding-bottom: var(--space-s) !important;
}
.pv-m,
div.pv-m {
  padding-top: var(--space-m) !important;
  padding-bottom: var(--space-m) !important;
}
.pv-l,
div.pv-l {
  padding-top: var(--space-l) !important;
  padding-bottom: var(--space-l) !important;
}
.pv-xl,
div.pv-xl {
  padding-top: var(--space-xl) !important;
  padding-bottom: var(--space-xl) !important;
}
.pv-2xl,
div.pv-2xl {
  padding-top: var(--space-2xl) !important;
  padding-bottom: var(--space-2xl) !important;
}
.pv-3xl,
div.pv-3xl {
  padding-top: var(--space-3xl) !important;
  padding-bottom: var(--space-3xl) !important;
}

.ph-none,
div.ph-none {
  padding-left: var(--space-none) !important;
  padding-right: var(--space-none) !important;
}
.ph-4xs,
div.ph-4xs {
  padding-left: var(--space-4xs) !important;
  padding-right: var(--space-4xs) !important;
}
.ph-3xs,
div.ph-3xs {
  padding-left: var(--space-3xs) !important;
  padding-right: var(--space-3xs) !important;
}
.ph-2xs,
div.ph-2xs {
  padding-left: var(--space-2xs) !important;
  padding-right: var(--space-2xs) !important;
}
.ph-xs,
div.ph-xs {
  padding-left: var(--space-xs) !important;
  padding-right: var(--space-xs) !important;
}
.ph-s,
div.ph-s {
  padding-left: var(--space-s) !important;
  padding-right: var(--space-s) !important;
}
.ph-m,
div.ph-m {
  padding-left: var(--space-m) !important;
  padding-right: var(--space-m) !important;
}
.ph-l,
div.ph-l {
  padding-left: var(--space-l) !important;
  padding-right: var(--space-l) !important;
}
.ph-xl,
div.ph-xl {
  padding-left: var(--space-xl) !important;
  padding-right: var(--space-xl) !important;
}
.ph-2xl,
div.ph-2xl {
  padding-left: var(--space-2xl) !important;
  padding-right: var(--space-2xl) !important;
}
.ph-3xl,
div.ph-3xl {
  padding-left: var(--space-3xl) !important;
  padding-right: var(--space-3xl) !important;
}

.pt-none,
div.pt-none {
  padding-top: var(--space-none) !important;
}
.pt-4xs,
div.pt-4xs {
  padding-top: var(--space-4xs) !important;
}
.pt-3xs,
div.pt-3xs {
  padding-top: var(--space-3xs) !important;
}
.pt-2xs,
div.pt-2xs {
  padding-top: var(--space-2xs) !important;
}
.pt-xs,
div.pt-xs {
  padding-top: var(--space-xs) !important;
}
.pt-s,
div.pt-s {
  padding-top: var(--space-s) !important;
}
.pt-m,
div.pt-m {
  padding-top: var(--space-m) !important;
}
.pt-l,
div.pt-l {
  padding-top: var(--space-l) !important;
}
.pt-xl,
div.pt-xl {
  padding-top: var(--space-xl) !important;
}
.pt-2xl,
div.pt-2xl {
  padding-top: var(--space-2xl) !important;
}
.pt-3xl,
div.pt-3xl {
  padding-top: var(--space-3xl) !important;
}

.pr-none,
div.pr-none {
  padding-right: var(--space-none) !important;
}
.pr-4xs,
div.pr-4xs {
  padding-right: var(--space-4xs) !important;
}
.pr-3xs,
div.pr-3xs {
  padding-right: var(--space-3xs) !important;
}
.pr-2xs,
div.pr-2xs {
  padding-right: var(--space-2xs) !important;
}
.pr-xs,
div.pr-xs {
  padding-right: var(--space-xs) !important;
}
.pr-s,
div.pr-s {
  padding-right: var(--space-s) !important;
}
.pr-m,
div.pr-m {
  padding-right: var(--space-m) !important;
}
.pr-l,
div.pr-l {
  padding-right: var(--space-l) !important;
}
.pr-xl,
div.pr-xl {
  padding-right: var(--space-xl) !important;
}
.pr-2xl,
div.pr-2xl {
  padding-right: var(--space-2xl) !important;
}
.pr-3xl,
div.pr-3xl {
  padding-right: var(--space-3xl) !important;
}

.pb-none,
div.pb-none {
  padding-bottom: var(--space-none) !important;
}
.pb-4xs,
div.pb-4xs {
  padding-bottom: var(--space-4xs) !important;
}
.pb-3xs,
div.pb-3xs {
  padding-bottom: var(--space-3xs) !important;
}
.pb-2xs,
div.pb-2xs {
  padding-bottom: var(--space-2xs) !important;
}
.pb-xs,
div.pb-xs {
  padding-bottom: var(--space-xs) !important;
}
.pb-s,
div.pb-s {
  padding-bottom: var(--space-s) !important;
}
.pb-m,
div.pb-m {
  padding-bottom: var(--space-m) !important;
}
.pb-l,
div.pb-l {
  padding-bottom: var(--space-l) !important;
}
.pb-xl,
div.pb-xl {
  padding-bottom: var(--space-xl) !important;
}
.pb-2xl,
div.pb-2xl {
  padding-bottom: var(--space-2xl) !important;
}
.pb-3xl,
div.pb-3xl {
  padding-bottom: var(--space-3xl) !important;
}

.pl-none,
div.pl-none {
  padding-left: var(--space-none) !important;
}
.pl-4xs,
div.pl-4xs {
  padding-left: var(--space-4xs) !important;
}
.pl-3xs,
div.pl-3xs {
  padding-left: var(--space-3xs) !important;
}
.pl-2xs,
div.pl-2xs {
  padding-left: var(--space-2xs) !important;
}
.pl-xs,
div.pl-xs {
  padding-left: var(--space-xs) !important;
}
.pl-s,
div.pl-s {
  padding-left: var(--space-s) !important;
}
.pl-m,
div.pl-m {
  padding-left: var(--space-m) !important;
}
.pl-l,
div.pl-l {
  padding-left: var(--space-l) !important;
}
.pl-xl,
div.pl-xl {
  padding-left: var(--space-xl) !important;
}
.pl-2xl,
div.pl-2xl {
  padding-left: var(--space-2xl) !important;
}
.pl-3xl,
div.pl-3xl {
  padding-left: var(--space-3xl) !important;
}

/* -------------------------------------------------------------------- *
 * Utility classes — spacing (responsive breakpoints)
 *
 * Same spacing/margin/padding classes as above, scoped to a single
 * breakpoint tier via a suffix, matching the grid's own tiers:
 *   -p  iPad Pro portrait   981px–1099px (still a 12-column .row)
 *   -t  Tablet              768px–980px  (8-column .row)
 *   -ts Small tablet        481px–767px  (8-column .row)
 *   -m  Mobile              below 480px  (4-column .row)
 *
 * NOTE: the source Divi CSS only ever had -p/-t/-m suffixes; the
 * "small tablet" span/shift/rspan classes were mistakenly reused the
 * "-t" suffix (a copy-paste bug — same values as the real -t tier, so
 * harmless, but ambiguous), and margin/padding never had a separate
 * small-tablet tier at all (768-980 and 481-767 were merged under one
 * "-t"). Both are fixed here: every group gets its own -ts tier.
 * -------------------------------------------------------------------- */

@media all and (min-width: 61.3125rem) and (max-width: 68.6875rem) {
  /* iPad Pro portrait, 981px–1099px */
  .m-none-p,
  div.m-none-p {
    margin: var(--space-none) !important;
  }
  .m-4xs-p,
  div.m-4xs-p {
    margin: var(--space-4xs) !important;
  }
  .m-3xs-p,
  div.m-3xs-p {
    margin: var(--space-3xs) !important;
  }
  .m-2xs-p,
  div.m-2xs-p {
    margin: var(--space-2xs) !important;
  }
  .m-xs-p,
  div.m-xs-p {
    margin: var(--space-xs) !important;
  }
  .m-s-p,
  div.m-s-p {
    margin: var(--space-s) !important;
  }
  .m-m-p,
  div.m-m-p {
    margin: var(--space-m) !important;
  }
  .m-l-p,
  div.m-l-p {
    margin: var(--space-l) !important;
  }
  .m-xl-p,
  div.m-xl-p {
    margin: var(--space-xl) !important;
  }
  .m-2xl-p,
  div.m-2xl-p {
    margin: var(--space-2xl) !important;
  }
  .m-3xl-p,
  div.m-3xl-p {
    margin: var(--space-3xl) !important;
  }

  .mv-none-p,
  div.mv-none-p {
    margin-top: var(--space-none) !important;
    margin-bottom: var(--space-none) !important;
  }
  .mv-4xs-p,
  div.mv-4xs-p {
    margin-top: var(--space-4xs) !important;
    margin-bottom: var(--space-4xs) !important;
  }
  .mv-3xs-p,
  div.mv-3xs-p {
    margin-top: var(--space-3xs) !important;
    margin-bottom: var(--space-3xs) !important;
  }
  .mv-2xs-p,
  div.mv-2xs-p {
    margin-top: var(--space-2xs) !important;
    margin-bottom: var(--space-2xs) !important;
  }
  .mv-xs-p,
  div.mv-xs-p {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
  }
  .mv-s-p,
  div.mv-s-p {
    margin-top: var(--space-s) !important;
    margin-bottom: var(--space-s) !important;
  }
  .mv-m-p,
  div.mv-m-p {
    margin-top: var(--space-m) !important;
    margin-bottom: var(--space-m) !important;
  }
  .mv-l-p,
  div.mv-l-p {
    margin-top: var(--space-l) !important;
    margin-bottom: var(--space-l) !important;
  }
  .mv-xl-p,
  div.mv-xl-p {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
  }
  .mv-2xl-p,
  div.mv-2xl-p {
    margin-top: var(--space-2xl) !important;
    margin-bottom: var(--space-2xl) !important;
  }
  .mv-3xl-p,
  div.mv-3xl-p {
    margin-top: var(--space-3xl) !important;
    margin-bottom: var(--space-3xl) !important;
  }

  .mh-none-p,
  div.mh-none-p {
    margin-left: var(--space-none) !important;
    margin-right: var(--space-none) !important;
  }
  .mh-4xs-p,
  div.mh-4xs-p {
    margin-left: var(--space-4xs) !important;
    margin-right: var(--space-4xs) !important;
  }
  .mh-3xs-p,
  div.mh-3xs-p {
    margin-left: var(--space-3xs) !important;
    margin-right: var(--space-3xs) !important;
  }
  .mh-2xs-p,
  div.mh-2xs-p {
    margin-left: var(--space-2xs) !important;
    margin-right: var(--space-2xs) !important;
  }
  .mh-xs-p,
  div.mh-xs-p {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
  }
  .mh-s-p,
  div.mh-s-p {
    margin-left: var(--space-s) !important;
    margin-right: var(--space-s) !important;
  }
  .mh-m-p,
  div.mh-m-p {
    margin-left: var(--space-m) !important;
    margin-right: var(--space-m) !important;
  }
  .mh-l-p,
  div.mh-l-p {
    margin-left: var(--space-l) !important;
    margin-right: var(--space-l) !important;
  }
  .mh-xl-p,
  div.mh-xl-p {
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important;
  }
  .mh-2xl-p,
  div.mh-2xl-p {
    margin-left: var(--space-2xl) !important;
    margin-right: var(--space-2xl) !important;
  }
  .mh-3xl-p,
  div.mh-3xl-p {
    margin-left: var(--space-3xl) !important;
    margin-right: var(--space-3xl) !important;
  }

  .mt-none-p,
  div.mt-none-p {
    margin-top: var(--space-none) !important;
  }
  .mt-4xs-p,
  div.mt-4xs-p {
    margin-top: var(--space-4xs) !important;
  }
  .mt-3xs-p,
  div.mt-3xs-p {
    margin-top: var(--space-3xs) !important;
  }
  .mt-2xs-p,
  div.mt-2xs-p {
    margin-top: var(--space-2xs) !important;
  }
  .mt-xs-p,
  div.mt-xs-p {
    margin-top: var(--space-xs) !important;
  }
  .mt-s-p,
  div.mt-s-p {
    margin-top: var(--space-s) !important;
  }
  .mt-m-p,
  div.mt-m-p {
    margin-top: var(--space-m) !important;
  }
  .mt-l-p,
  div.mt-l-p {
    margin-top: var(--space-l) !important;
  }
  .mt-xl-p,
  div.mt-xl-p {
    margin-top: var(--space-xl) !important;
  }
  .mt-2xl-p,
  div.mt-2xl-p {
    margin-top: var(--space-2xl) !important;
  }
  .mt-3xl-p,
  div.mt-3xl-p {
    margin-top: var(--space-3xl) !important;
  }

  .mr-none-p,
  div.mr-none-p {
    margin-right: var(--space-none) !important;
  }
  .mr-4xs-p,
  div.mr-4xs-p {
    margin-right: var(--space-4xs) !important;
  }
  .mr-3xs-p,
  div.mr-3xs-p {
    margin-right: var(--space-3xs) !important;
  }
  .mr-2xs-p,
  div.mr-2xs-p {
    margin-right: var(--space-2xs) !important;
  }
  .mr-xs-p,
  div.mr-xs-p {
    margin-right: var(--space-xs) !important;
  }
  .mr-s-p,
  div.mr-s-p {
    margin-right: var(--space-s) !important;
  }
  .mr-m-p,
  div.mr-m-p {
    margin-right: var(--space-m) !important;
  }
  .mr-l-p,
  div.mr-l-p {
    margin-right: var(--space-l) !important;
  }
  .mr-xl-p,
  div.mr-xl-p {
    margin-right: var(--space-xl) !important;
  }
  .mr-2xl-p,
  div.mr-2xl-p {
    margin-right: var(--space-2xl) !important;
  }
  .mr-3xl-p,
  div.mr-3xl-p {
    margin-right: var(--space-3xl) !important;
  }

  .mb-none-p,
  div.mb-none-p {
    margin-bottom: var(--space-none) !important;
  }
  .mb-4xs-p,
  div.mb-4xs-p {
    margin-bottom: var(--space-4xs) !important;
  }
  .mb-3xs-p,
  div.mb-3xs-p {
    margin-bottom: var(--space-3xs) !important;
  }
  .mb-2xs-p,
  div.mb-2xs-p {
    margin-bottom: var(--space-2xs) !important;
  }
  .mb-xs-p,
  div.mb-xs-p {
    margin-bottom: var(--space-xs) !important;
  }
  .mb-s-p,
  div.mb-s-p {
    margin-bottom: var(--space-s) !important;
  }
  .mb-m-p,
  div.mb-m-p {
    margin-bottom: var(--space-m) !important;
  }
  .mb-l-p,
  div.mb-l-p {
    margin-bottom: var(--space-l) !important;
  }
  .mb-xl-p,
  div.mb-xl-p {
    margin-bottom: var(--space-xl) !important;
  }
  .mb-2xl-p,
  div.mb-2xl-p {
    margin-bottom: var(--space-2xl) !important;
  }
  .mb-3xl-p,
  div.mb-3xl-p {
    margin-bottom: var(--space-3xl) !important;
  }

  .ml-none-p,
  div.ml-none-p {
    margin-left: var(--space-none) !important;
  }
  .ml-4xs-p,
  div.ml-4xs-p {
    margin-left: var(--space-4xs) !important;
  }
  .ml-3xs-p,
  div.ml-3xs-p {
    margin-left: var(--space-3xs) !important;
  }
  .ml-2xs-p,
  div.ml-2xs-p {
    margin-left: var(--space-2xs) !important;
  }
  .ml-xs-p,
  div.ml-xs-p {
    margin-left: var(--space-xs) !important;
  }
  .ml-s-p,
  div.ml-s-p {
    margin-left: var(--space-s) !important;
  }
  .ml-m-p,
  div.ml-m-p {
    margin-left: var(--space-m) !important;
  }
  .ml-l-p,
  div.ml-l-p {
    margin-left: var(--space-l) !important;
  }
  .ml-xl-p,
  div.ml-xl-p {
    margin-left: var(--space-xl) !important;
  }
  .ml-2xl-p,
  div.ml-2xl-p {
    margin-left: var(--space-2xl) !important;
  }
  .ml-3xl-p,
  div.ml-3xl-p {
    margin-left: var(--space-3xl) !important;
  }

  .p-none-p,
  div.p-none-p {
    padding: var(--space-none) !important;
  }
  .p-4xs-p,
  div.p-4xs-p {
    padding: var(--space-4xs) !important;
  }
  .p-3xs-p,
  div.p-3xs-p {
    padding: var(--space-3xs) !important;
  }
  .p-2xs-p,
  div.p-2xs-p {
    padding: var(--space-2xs) !important;
  }
  .p-xs-p,
  div.p-xs-p {
    padding: var(--space-xs) !important;
  }
  .p-s-p,
  div.p-s-p {
    padding: var(--space-s) !important;
  }
  .p-m-p,
  div.p-m-p {
    padding: var(--space-m) !important;
  }
  .p-l-p,
  div.p-l-p {
    padding: var(--space-l) !important;
  }
  .p-xl-p,
  div.p-xl-p {
    padding: var(--space-xl) !important;
  }
  .p-2xl-p,
  div.p-2xl-p {
    padding: var(--space-2xl) !important;
  }
  .p-3xl-p,
  div.p-3xl-p {
    padding: var(--space-3xl) !important;
  }

  .pv-none-p,
  div.pv-none-p {
    padding-top: var(--space-none) !important;
    padding-bottom: var(--space-none) !important;
  }
  .pv-4xs-p,
  div.pv-4xs-p {
    padding-top: var(--space-4xs) !important;
    padding-bottom: var(--space-4xs) !important;
  }
  .pv-3xs-p,
  div.pv-3xs-p {
    padding-top: var(--space-3xs) !important;
    padding-bottom: var(--space-3xs) !important;
  }
  .pv-2xs-p,
  div.pv-2xs-p {
    padding-top: var(--space-2xs) !important;
    padding-bottom: var(--space-2xs) !important;
  }
  .pv-xs-p,
  div.pv-xs-p {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
  }
  .pv-s-p,
  div.pv-s-p {
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important;
  }
  .pv-m-p,
  div.pv-m-p {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
  }
  .pv-l-p,
  div.pv-l-p {
    padding-top: var(--space-l) !important;
    padding-bottom: var(--space-l) !important;
  }
  .pv-xl-p,
  div.pv-xl-p {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
  .pv-2xl-p,
  div.pv-2xl-p {
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
  }
  .pv-3xl-p,
  div.pv-3xl-p {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
  }

  .ph-none-p,
  div.ph-none-p {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
  }
  .ph-4xs-p,
  div.ph-4xs-p {
    padding-left: var(--space-4xs) !important;
    padding-right: var(--space-4xs) !important;
  }
  .ph-3xs-p,
  div.ph-3xs-p {
    padding-left: var(--space-3xs) !important;
    padding-right: var(--space-3xs) !important;
  }
  .ph-2xs-p,
  div.ph-2xs-p {
    padding-left: var(--space-2xs) !important;
    padding-right: var(--space-2xs) !important;
  }
  .ph-xs-p,
  div.ph-xs-p {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
  }
  .ph-s-p,
  div.ph-s-p {
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
  }
  .ph-m-p,
  div.ph-m-p {
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
  }
  .ph-l-p,
  div.ph-l-p {
    padding-left: var(--space-l) !important;
    padding-right: var(--space-l) !important;
  }
  .ph-xl-p,
  div.ph-xl-p {
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
  }
  .ph-2xl-p,
  div.ph-2xl-p {
    padding-left: var(--space-2xl) !important;
    padding-right: var(--space-2xl) !important;
  }
  .ph-3xl-p,
  div.ph-3xl-p {
    padding-left: var(--space-3xl) !important;
    padding-right: var(--space-3xl) !important;
  }

  .pt-none-p,
  div.pt-none-p {
    padding-top: var(--space-none) !important;
  }
  .pt-4xs-p,
  div.pt-4xs-p {
    padding-top: var(--space-4xs) !important;
  }
  .pt-3xs-p,
  div.pt-3xs-p {
    padding-top: var(--space-3xs) !important;
  }
  .pt-2xs-p,
  div.pt-2xs-p {
    padding-top: var(--space-2xs) !important;
  }
  .pt-xs-p,
  div.pt-xs-p {
    padding-top: var(--space-xs) !important;
  }
  .pt-s-p,
  div.pt-s-p {
    padding-top: var(--space-s) !important;
  }
  .pt-m-p,
  div.pt-m-p {
    padding-top: var(--space-m) !important;
  }
  .pt-l-p,
  div.pt-l-p {
    padding-top: var(--space-l) !important;
  }
  .pt-xl-p,
  div.pt-xl-p {
    padding-top: var(--space-xl) !important;
  }
  .pt-2xl-p,
  div.pt-2xl-p {
    padding-top: var(--space-2xl) !important;
  }
  .pt-3xl-p,
  div.pt-3xl-p {
    padding-top: var(--space-3xl) !important;
  }

  .pr-none-p,
  div.pr-none-p {
    padding-right: var(--space-none) !important;
  }
  .pr-4xs-p,
  div.pr-4xs-p {
    padding-right: var(--space-4xs) !important;
  }
  .pr-3xs-p,
  div.pr-3xs-p {
    padding-right: var(--space-3xs) !important;
  }
  .pr-2xs-p,
  div.pr-2xs-p {
    padding-right: var(--space-2xs) !important;
  }
  .pr-xs-p,
  div.pr-xs-p {
    padding-right: var(--space-xs) !important;
  }
  .pr-s-p,
  div.pr-s-p {
    padding-right: var(--space-s) !important;
  }
  .pr-m-p,
  div.pr-m-p {
    padding-right: var(--space-m) !important;
  }
  .pr-l-p,
  div.pr-l-p {
    padding-right: var(--space-l) !important;
  }
  .pr-xl-p,
  div.pr-xl-p {
    padding-right: var(--space-xl) !important;
  }
  .pr-2xl-p,
  div.pr-2xl-p {
    padding-right: var(--space-2xl) !important;
  }
  .pr-3xl-p,
  div.pr-3xl-p {
    padding-right: var(--space-3xl) !important;
  }

  .pb-none-p,
  div.pb-none-p {
    padding-bottom: var(--space-none) !important;
  }
  .pb-4xs-p,
  div.pb-4xs-p {
    padding-bottom: var(--space-4xs) !important;
  }
  .pb-3xs-p,
  div.pb-3xs-p {
    padding-bottom: var(--space-3xs) !important;
  }
  .pb-2xs-p,
  div.pb-2xs-p {
    padding-bottom: var(--space-2xs) !important;
  }
  .pb-xs-p,
  div.pb-xs-p {
    padding-bottom: var(--space-xs) !important;
  }
  .pb-s-p,
  div.pb-s-p {
    padding-bottom: var(--space-s) !important;
  }
  .pb-m-p,
  div.pb-m-p {
    padding-bottom: var(--space-m) !important;
  }
  .pb-l-p,
  div.pb-l-p {
    padding-bottom: var(--space-l) !important;
  }
  .pb-xl-p,
  div.pb-xl-p {
    padding-bottom: var(--space-xl) !important;
  }
  .pb-2xl-p,
  div.pb-2xl-p {
    padding-bottom: var(--space-2xl) !important;
  }
  .pb-3xl-p,
  div.pb-3xl-p {
    padding-bottom: var(--space-3xl) !important;
  }

  .pl-none-p,
  div.pl-none-p {
    padding-left: var(--space-none) !important;
  }
  .pl-4xs-p,
  div.pl-4xs-p {
    padding-left: var(--space-4xs) !important;
  }
  .pl-3xs-p,
  div.pl-3xs-p {
    padding-left: var(--space-3xs) !important;
  }
  .pl-2xs-p,
  div.pl-2xs-p {
    padding-left: var(--space-2xs) !important;
  }
  .pl-xs-p,
  div.pl-xs-p {
    padding-left: var(--space-xs) !important;
  }
  .pl-s-p,
  div.pl-s-p {
    padding-left: var(--space-s) !important;
  }
  .pl-m-p,
  div.pl-m-p {
    padding-left: var(--space-m) !important;
  }
  .pl-l-p,
  div.pl-l-p {
    padding-left: var(--space-l) !important;
  }
  .pl-xl-p,
  div.pl-xl-p {
    padding-left: var(--space-xl) !important;
  }
  .pl-2xl-p,
  div.pl-2xl-p {
    padding-left: var(--space-2xl) !important;
  }
  .pl-3xl-p,
  div.pl-3xl-p {
    padding-left: var(--space-3xl) !important;
  }
}

@media all and (min-width: 48rem) and (max-width: 61.25rem) {
  /* Tablet, 768px–980px */
  .m-none-t,
  div.m-none-t {
    margin: var(--space-none) !important;
  }
  .m-4xs-t,
  div.m-4xs-t {
    margin: var(--space-4xs) !important;
  }
  .m-3xs-t,
  div.m-3xs-t {
    margin: var(--space-3xs) !important;
  }
  .m-2xs-t,
  div.m-2xs-t {
    margin: var(--space-2xs) !important;
  }
  .m-xs-t,
  div.m-xs-t {
    margin: var(--space-xs) !important;
  }
  .m-s-t,
  div.m-s-t {
    margin: var(--space-s) !important;
  }
  .m-m-t,
  div.m-m-t {
    margin: var(--space-m) !important;
  }
  .m-l-t,
  div.m-l-t {
    margin: var(--space-l) !important;
  }
  .m-xl-t,
  div.m-xl-t {
    margin: var(--space-xl) !important;
  }
  .m-2xl-t,
  div.m-2xl-t {
    margin: var(--space-2xl) !important;
  }
  .m-3xl-t,
  div.m-3xl-t {
    margin: var(--space-3xl) !important;
  }

  .mv-none-t,
  div.mv-none-t {
    margin-top: var(--space-none) !important;
    margin-bottom: var(--space-none) !important;
  }
  .mv-4xs-t,
  div.mv-4xs-t {
    margin-top: var(--space-4xs) !important;
    margin-bottom: var(--space-4xs) !important;
  }
  .mv-3xs-t,
  div.mv-3xs-t {
    margin-top: var(--space-3xs) !important;
    margin-bottom: var(--space-3xs) !important;
  }
  .mv-2xs-t,
  div.mv-2xs-t {
    margin-top: var(--space-2xs) !important;
    margin-bottom: var(--space-2xs) !important;
  }
  .mv-xs-t,
  div.mv-xs-t {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
  }
  .mv-s-t,
  div.mv-s-t {
    margin-top: var(--space-s) !important;
    margin-bottom: var(--space-s) !important;
  }
  .mv-m-t,
  div.mv-m-t {
    margin-top: var(--space-m) !important;
    margin-bottom: var(--space-m) !important;
  }
  .mv-l-t,
  div.mv-l-t {
    margin-top: var(--space-l) !important;
    margin-bottom: var(--space-l) !important;
  }
  .mv-xl-t,
  div.mv-xl-t {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
  }
  .mv-2xl-t,
  div.mv-2xl-t {
    margin-top: var(--space-2xl) !important;
    margin-bottom: var(--space-2xl) !important;
  }
  .mv-3xl-t,
  div.mv-3xl-t {
    margin-top: var(--space-3xl) !important;
    margin-bottom: var(--space-3xl) !important;
  }

  .mh-none-t,
  div.mh-none-t {
    margin-left: var(--space-none) !important;
    margin-right: var(--space-none) !important;
  }
  .mh-4xs-t,
  div.mh-4xs-t {
    margin-left: var(--space-4xs) !important;
    margin-right: var(--space-4xs) !important;
  }
  .mh-3xs-t,
  div.mh-3xs-t {
    margin-left: var(--space-3xs) !important;
    margin-right: var(--space-3xs) !important;
  }
  .mh-2xs-t,
  div.mh-2xs-t {
    margin-left: var(--space-2xs) !important;
    margin-right: var(--space-2xs) !important;
  }
  .mh-xs-t,
  div.mh-xs-t {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
  }
  .mh-s-t,
  div.mh-s-t {
    margin-left: var(--space-s) !important;
    margin-right: var(--space-s) !important;
  }
  .mh-m-t,
  div.mh-m-t {
    margin-left: var(--space-m) !important;
    margin-right: var(--space-m) !important;
  }
  .mh-l-t,
  div.mh-l-t {
    margin-left: var(--space-l) !important;
    margin-right: var(--space-l) !important;
  }
  .mh-xl-t,
  div.mh-xl-t {
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important;
  }
  .mh-2xl-t,
  div.mh-2xl-t {
    margin-left: var(--space-2xl) !important;
    margin-right: var(--space-2xl) !important;
  }
  .mh-3xl-t,
  div.mh-3xl-t {
    margin-left: var(--space-3xl) !important;
    margin-right: var(--space-3xl) !important;
  }

  .mt-none-t,
  div.mt-none-t {
    margin-top: var(--space-none) !important;
  }
  .mt-4xs-t,
  div.mt-4xs-t {
    margin-top: var(--space-4xs) !important;
  }
  .mt-3xs-t,
  div.mt-3xs-t {
    margin-top: var(--space-3xs) !important;
  }
  .mt-2xs-t,
  div.mt-2xs-t {
    margin-top: var(--space-2xs) !important;
  }
  .mt-xs-t,
  div.mt-xs-t {
    margin-top: var(--space-xs) !important;
  }
  .mt-s-t,
  div.mt-s-t {
    margin-top: var(--space-s) !important;
  }
  .mt-m-t,
  div.mt-m-t {
    margin-top: var(--space-m) !important;
  }
  .mt-l-t,
  div.mt-l-t {
    margin-top: var(--space-l) !important;
  }
  .mt-xl-t,
  div.mt-xl-t {
    margin-top: var(--space-xl) !important;
  }
  .mt-2xl-t,
  div.mt-2xl-t {
    margin-top: var(--space-2xl) !important;
  }
  .mt-3xl-t,
  div.mt-3xl-t {
    margin-top: var(--space-3xl) !important;
  }

  .mr-none-t,
  div.mr-none-t {
    margin-right: var(--space-none) !important;
  }
  .mr-4xs-t,
  div.mr-4xs-t {
    margin-right: var(--space-4xs) !important;
  }
  .mr-3xs-t,
  div.mr-3xs-t {
    margin-right: var(--space-3xs) !important;
  }
  .mr-2xs-t,
  div.mr-2xs-t {
    margin-right: var(--space-2xs) !important;
  }
  .mr-xs-t,
  div.mr-xs-t {
    margin-right: var(--space-xs) !important;
  }
  .mr-s-t,
  div.mr-s-t {
    margin-right: var(--space-s) !important;
  }
  .mr-m-t,
  div.mr-m-t {
    margin-right: var(--space-m) !important;
  }
  .mr-l-t,
  div.mr-l-t {
    margin-right: var(--space-l) !important;
  }
  .mr-xl-t,
  div.mr-xl-t {
    margin-right: var(--space-xl) !important;
  }
  .mr-2xl-t,
  div.mr-2xl-t {
    margin-right: var(--space-2xl) !important;
  }
  .mr-3xl-t,
  div.mr-3xl-t {
    margin-right: var(--space-3xl) !important;
  }

  .mb-none-t,
  div.mb-none-t {
    margin-bottom: var(--space-none) !important;
  }
  .mb-4xs-t,
  div.mb-4xs-t {
    margin-bottom: var(--space-4xs) !important;
  }
  .mb-3xs-t,
  div.mb-3xs-t {
    margin-bottom: var(--space-3xs) !important;
  }
  .mb-2xs-t,
  div.mb-2xs-t {
    margin-bottom: var(--space-2xs) !important;
  }
  .mb-xs-t,
  div.mb-xs-t {
    margin-bottom: var(--space-xs) !important;
  }
  .mb-s-t,
  div.mb-s-t {
    margin-bottom: var(--space-s) !important;
  }
  .mb-m-t,
  div.mb-m-t {
    margin-bottom: var(--space-m) !important;
  }
  .mb-l-t,
  div.mb-l-t {
    margin-bottom: var(--space-l) !important;
  }
  .mb-xl-t,
  div.mb-xl-t {
    margin-bottom: var(--space-xl) !important;
  }
  .mb-2xl-t,
  div.mb-2xl-t {
    margin-bottom: var(--space-2xl) !important;
  }
  .mb-3xl-t,
  div.mb-3xl-t {
    margin-bottom: var(--space-3xl) !important;
  }

  .ml-none-t,
  div.ml-none-t {
    margin-left: var(--space-none) !important;
  }
  .ml-4xs-t,
  div.ml-4xs-t {
    margin-left: var(--space-4xs) !important;
  }
  .ml-3xs-t,
  div.ml-3xs-t {
    margin-left: var(--space-3xs) !important;
  }
  .ml-2xs-t,
  div.ml-2xs-t {
    margin-left: var(--space-2xs) !important;
  }
  .ml-xs-t,
  div.ml-xs-t {
    margin-left: var(--space-xs) !important;
  }
  .ml-s-t,
  div.ml-s-t {
    margin-left: var(--space-s) !important;
  }
  .ml-m-t,
  div.ml-m-t {
    margin-left: var(--space-m) !important;
  }
  .ml-l-t,
  div.ml-l-t {
    margin-left: var(--space-l) !important;
  }
  .ml-xl-t,
  div.ml-xl-t {
    margin-left: var(--space-xl) !important;
  }
  .ml-2xl-t,
  div.ml-2xl-t {
    margin-left: var(--space-2xl) !important;
  }
  .ml-3xl-t,
  div.ml-3xl-t {
    margin-left: var(--space-3xl) !important;
  }

  .p-none-t,
  div.p-none-t {
    padding: var(--space-none) !important;
  }
  .p-4xs-t,
  div.p-4xs-t {
    padding: var(--space-4xs) !important;
  }
  .p-3xs-t,
  div.p-3xs-t {
    padding: var(--space-3xs) !important;
  }
  .p-2xs-t,
  div.p-2xs-t {
    padding: var(--space-2xs) !important;
  }
  .p-xs-t,
  div.p-xs-t {
    padding: var(--space-xs) !important;
  }
  .p-s-t,
  div.p-s-t {
    padding: var(--space-s) !important;
  }
  .p-m-t,
  div.p-m-t {
    padding: var(--space-m) !important;
  }
  .p-l-t,
  div.p-l-t {
    padding: var(--space-l) !important;
  }
  .p-xl-t,
  div.p-xl-t {
    padding: var(--space-xl) !important;
  }
  .p-2xl-t,
  div.p-2xl-t {
    padding: var(--space-2xl) !important;
  }
  .p-3xl-t,
  div.p-3xl-t {
    padding: var(--space-3xl) !important;
  }

  .pv-none-t,
  div.pv-none-t {
    padding-top: var(--space-none) !important;
    padding-bottom: var(--space-none) !important;
  }
  .pv-4xs-t,
  div.pv-4xs-t {
    padding-top: var(--space-4xs) !important;
    padding-bottom: var(--space-4xs) !important;
  }
  .pv-3xs-t,
  div.pv-3xs-t {
    padding-top: var(--space-3xs) !important;
    padding-bottom: var(--space-3xs) !important;
  }
  .pv-2xs-t,
  div.pv-2xs-t {
    padding-top: var(--space-2xs) !important;
    padding-bottom: var(--space-2xs) !important;
  }
  .pv-xs-t,
  div.pv-xs-t {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
  }
  .pv-s-t,
  div.pv-s-t {
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important;
  }
  .pv-m-t,
  div.pv-m-t {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
  }
  .pv-l-t,
  div.pv-l-t {
    padding-top: var(--space-l) !important;
    padding-bottom: var(--space-l) !important;
  }
  .pv-xl-t,
  div.pv-xl-t {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
  .pv-2xl-t,
  div.pv-2xl-t {
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
  }
  .pv-3xl-t,
  div.pv-3xl-t {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
  }

  .ph-none-t,
  div.ph-none-t {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
  }
  .ph-4xs-t,
  div.ph-4xs-t {
    padding-left: var(--space-4xs) !important;
    padding-right: var(--space-4xs) !important;
  }
  .ph-3xs-t,
  div.ph-3xs-t {
    padding-left: var(--space-3xs) !important;
    padding-right: var(--space-3xs) !important;
  }
  .ph-2xs-t,
  div.ph-2xs-t {
    padding-left: var(--space-2xs) !important;
    padding-right: var(--space-2xs) !important;
  }
  .ph-xs-t,
  div.ph-xs-t {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
  }
  .ph-s-t,
  div.ph-s-t {
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
  }
  .ph-m-t,
  div.ph-m-t {
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
  }
  .ph-l-t,
  div.ph-l-t {
    padding-left: var(--space-l) !important;
    padding-right: var(--space-l) !important;
  }
  .ph-xl-t,
  div.ph-xl-t {
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
  }
  .ph-2xl-t,
  div.ph-2xl-t {
    padding-left: var(--space-2xl) !important;
    padding-right: var(--space-2xl) !important;
  }
  .ph-3xl-t,
  div.ph-3xl-t {
    padding-left: var(--space-3xl) !important;
    padding-right: var(--space-3xl) !important;
  }

  .pt-none-t,
  div.pt-none-t {
    padding-top: var(--space-none) !important;
  }
  .pt-4xs-t,
  div.pt-4xs-t {
    padding-top: var(--space-4xs) !important;
  }
  .pt-3xs-t,
  div.pt-3xs-t {
    padding-top: var(--space-3xs) !important;
  }
  .pt-2xs-t,
  div.pt-2xs-t {
    padding-top: var(--space-2xs) !important;
  }
  .pt-xs-t,
  div.pt-xs-t {
    padding-top: var(--space-xs) !important;
  }
  .pt-s-t,
  div.pt-s-t {
    padding-top: var(--space-s) !important;
  }
  .pt-m-t,
  div.pt-m-t {
    padding-top: var(--space-m) !important;
  }
  .pt-l-t,
  div.pt-l-t {
    padding-top: var(--space-l) !important;
  }
  .pt-xl-t,
  div.pt-xl-t {
    padding-top: var(--space-xl) !important;
  }
  .pt-2xl-t,
  div.pt-2xl-t {
    padding-top: var(--space-2xl) !important;
  }
  .pt-3xl-t,
  div.pt-3xl-t {
    padding-top: var(--space-3xl) !important;
  }

  .pr-none-t,
  div.pr-none-t {
    padding-right: var(--space-none) !important;
  }
  .pr-4xs-t,
  div.pr-4xs-t {
    padding-right: var(--space-4xs) !important;
  }
  .pr-3xs-t,
  div.pr-3xs-t {
    padding-right: var(--space-3xs) !important;
  }
  .pr-2xs-t,
  div.pr-2xs-t {
    padding-right: var(--space-2xs) !important;
  }
  .pr-xs-t,
  div.pr-xs-t {
    padding-right: var(--space-xs) !important;
  }
  .pr-s-t,
  div.pr-s-t {
    padding-right: var(--space-s) !important;
  }
  .pr-m-t,
  div.pr-m-t {
    padding-right: var(--space-m) !important;
  }
  .pr-l-t,
  div.pr-l-t {
    padding-right: var(--space-l) !important;
  }
  .pr-xl-t,
  div.pr-xl-t {
    padding-right: var(--space-xl) !important;
  }
  .pr-2xl-t,
  div.pr-2xl-t {
    padding-right: var(--space-2xl) !important;
  }
  .pr-3xl-t,
  div.pr-3xl-t {
    padding-right: var(--space-3xl) !important;
  }

  .pb-none-t,
  div.pb-none-t {
    padding-bottom: var(--space-none) !important;
  }
  .pb-4xs-t,
  div.pb-4xs-t {
    padding-bottom: var(--space-4xs) !important;
  }
  .pb-3xs-t,
  div.pb-3xs-t {
    padding-bottom: var(--space-3xs) !important;
  }
  .pb-2xs-t,
  div.pb-2xs-t {
    padding-bottom: var(--space-2xs) !important;
  }
  .pb-xs-t,
  div.pb-xs-t {
    padding-bottom: var(--space-xs) !important;
  }
  .pb-s-t,
  div.pb-s-t {
    padding-bottom: var(--space-s) !important;
  }
  .pb-m-t,
  div.pb-m-t {
    padding-bottom: var(--space-m) !important;
  }
  .pb-l-t,
  div.pb-l-t {
    padding-bottom: var(--space-l) !important;
  }
  .pb-xl-t,
  div.pb-xl-t {
    padding-bottom: var(--space-xl) !important;
  }
  .pb-2xl-t,
  div.pb-2xl-t {
    padding-bottom: var(--space-2xl) !important;
  }
  .pb-3xl-t,
  div.pb-3xl-t {
    padding-bottom: var(--space-3xl) !important;
  }

  .pl-none-t,
  div.pl-none-t {
    padding-left: var(--space-none) !important;
  }
  .pl-4xs-t,
  div.pl-4xs-t {
    padding-left: var(--space-4xs) !important;
  }
  .pl-3xs-t,
  div.pl-3xs-t {
    padding-left: var(--space-3xs) !important;
  }
  .pl-2xs-t,
  div.pl-2xs-t {
    padding-left: var(--space-2xs) !important;
  }
  .pl-xs-t,
  div.pl-xs-t {
    padding-left: var(--space-xs) !important;
  }
  .pl-s-t,
  div.pl-s-t {
    padding-left: var(--space-s) !important;
  }
  .pl-m-t,
  div.pl-m-t {
    padding-left: var(--space-m) !important;
  }
  .pl-l-t,
  div.pl-l-t {
    padding-left: var(--space-l) !important;
  }
  .pl-xl-t,
  div.pl-xl-t {
    padding-left: var(--space-xl) !important;
  }
  .pl-2xl-t,
  div.pl-2xl-t {
    padding-left: var(--space-2xl) !important;
  }
  .pl-3xl-t,
  div.pl-3xl-t {
    padding-left: var(--space-3xl) !important;
  }
}

@media all and (min-width: 30.0625rem) and (max-width: 47.9375rem) {
  /* Small tablet, 481px–767px */
  .m-none-ts,
  div.m-none-ts {
    margin: var(--space-none) !important;
  }
  .m-4xs-ts,
  div.m-4xs-ts {
    margin: var(--space-4xs) !important;
  }
  .m-3xs-ts,
  div.m-3xs-ts {
    margin: var(--space-3xs) !important;
  }
  .m-2xs-ts,
  div.m-2xs-ts {
    margin: var(--space-2xs) !important;
  }
  .m-xs-ts,
  div.m-xs-ts {
    margin: var(--space-xs) !important;
  }
  .m-s-ts,
  div.m-s-ts {
    margin: var(--space-s) !important;
  }
  .m-m-ts,
  div.m-m-ts {
    margin: var(--space-m) !important;
  }
  .m-l-ts,
  div.m-l-ts {
    margin: var(--space-l) !important;
  }
  .m-xl-ts,
  div.m-xl-ts {
    margin: var(--space-xl) !important;
  }
  .m-2xl-ts,
  div.m-2xl-ts {
    margin: var(--space-2xl) !important;
  }
  .m-3xl-ts,
  div.m-3xl-ts {
    margin: var(--space-3xl) !important;
  }

  .mv-none-ts,
  div.mv-none-ts {
    margin-top: var(--space-none) !important;
    margin-bottom: var(--space-none) !important;
  }
  .mv-4xs-ts,
  div.mv-4xs-ts {
    margin-top: var(--space-4xs) !important;
    margin-bottom: var(--space-4xs) !important;
  }
  .mv-3xs-ts,
  div.mv-3xs-ts {
    margin-top: var(--space-3xs) !important;
    margin-bottom: var(--space-3xs) !important;
  }
  .mv-2xs-ts,
  div.mv-2xs-ts {
    margin-top: var(--space-2xs) !important;
    margin-bottom: var(--space-2xs) !important;
  }
  .mv-xs-ts,
  div.mv-xs-ts {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
  }
  .mv-s-ts,
  div.mv-s-ts {
    margin-top: var(--space-s) !important;
    margin-bottom: var(--space-s) !important;
  }
  .mv-m-ts,
  div.mv-m-ts {
    margin-top: var(--space-m) !important;
    margin-bottom: var(--space-m) !important;
  }
  .mv-l-ts,
  div.mv-l-ts {
    margin-top: var(--space-l) !important;
    margin-bottom: var(--space-l) !important;
  }
  .mv-xl-ts,
  div.mv-xl-ts {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
  }
  .mv-2xl-ts,
  div.mv-2xl-ts {
    margin-top: var(--space-2xl) !important;
    margin-bottom: var(--space-2xl) !important;
  }
  .mv-3xl-ts,
  div.mv-3xl-ts {
    margin-top: var(--space-3xl) !important;
    margin-bottom: var(--space-3xl) !important;
  }

  .mh-none-ts,
  div.mh-none-ts {
    margin-left: var(--space-none) !important;
    margin-right: var(--space-none) !important;
  }
  .mh-4xs-ts,
  div.mh-4xs-ts {
    margin-left: var(--space-4xs) !important;
    margin-right: var(--space-4xs) !important;
  }
  .mh-3xs-ts,
  div.mh-3xs-ts {
    margin-left: var(--space-3xs) !important;
    margin-right: var(--space-3xs) !important;
  }
  .mh-2xs-ts,
  div.mh-2xs-ts {
    margin-left: var(--space-2xs) !important;
    margin-right: var(--space-2xs) !important;
  }
  .mh-xs-ts,
  div.mh-xs-ts {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
  }
  .mh-s-ts,
  div.mh-s-ts {
    margin-left: var(--space-s) !important;
    margin-right: var(--space-s) !important;
  }
  .mh-m-ts,
  div.mh-m-ts {
    margin-left: var(--space-m) !important;
    margin-right: var(--space-m) !important;
  }
  .mh-l-ts,
  div.mh-l-ts {
    margin-left: var(--space-l) !important;
    margin-right: var(--space-l) !important;
  }
  .mh-xl-ts,
  div.mh-xl-ts {
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important;
  }
  .mh-2xl-ts,
  div.mh-2xl-ts {
    margin-left: var(--space-2xl) !important;
    margin-right: var(--space-2xl) !important;
  }
  .mh-3xl-ts,
  div.mh-3xl-ts {
    margin-left: var(--space-3xl) !important;
    margin-right: var(--space-3xl) !important;
  }

  .mt-none-ts,
  div.mt-none-ts {
    margin-top: var(--space-none) !important;
  }
  .mt-4xs-ts,
  div.mt-4xs-ts {
    margin-top: var(--space-4xs) !important;
  }
  .mt-3xs-ts,
  div.mt-3xs-ts {
    margin-top: var(--space-3xs) !important;
  }
  .mt-2xs-ts,
  div.mt-2xs-ts {
    margin-top: var(--space-2xs) !important;
  }
  .mt-xs-ts,
  div.mt-xs-ts {
    margin-top: var(--space-xs) !important;
  }
  .mt-s-ts,
  div.mt-s-ts {
    margin-top: var(--space-s) !important;
  }
  .mt-m-ts,
  div.mt-m-ts {
    margin-top: var(--space-m) !important;
  }
  .mt-l-ts,
  div.mt-l-ts {
    margin-top: var(--space-l) !important;
  }
  .mt-xl-ts,
  div.mt-xl-ts {
    margin-top: var(--space-xl) !important;
  }
  .mt-2xl-ts,
  div.mt-2xl-ts {
    margin-top: var(--space-2xl) !important;
  }
  .mt-3xl-ts,
  div.mt-3xl-ts {
    margin-top: var(--space-3xl) !important;
  }

  .mr-none-ts,
  div.mr-none-ts {
    margin-right: var(--space-none) !important;
  }
  .mr-4xs-ts,
  div.mr-4xs-ts {
    margin-right: var(--space-4xs) !important;
  }
  .mr-3xs-ts,
  div.mr-3xs-ts {
    margin-right: var(--space-3xs) !important;
  }
  .mr-2xs-ts,
  div.mr-2xs-ts {
    margin-right: var(--space-2xs) !important;
  }
  .mr-xs-ts,
  div.mr-xs-ts {
    margin-right: var(--space-xs) !important;
  }
  .mr-s-ts,
  div.mr-s-ts {
    margin-right: var(--space-s) !important;
  }
  .mr-m-ts,
  div.mr-m-ts {
    margin-right: var(--space-m) !important;
  }
  .mr-l-ts,
  div.mr-l-ts {
    margin-right: var(--space-l) !important;
  }
  .mr-xl-ts,
  div.mr-xl-ts {
    margin-right: var(--space-xl) !important;
  }
  .mr-2xl-ts,
  div.mr-2xl-ts {
    margin-right: var(--space-2xl) !important;
  }
  .mr-3xl-ts,
  div.mr-3xl-ts {
    margin-right: var(--space-3xl) !important;
  }

  .mb-none-ts,
  div.mb-none-ts {
    margin-bottom: var(--space-none) !important;
  }
  .mb-4xs-ts,
  div.mb-4xs-ts {
    margin-bottom: var(--space-4xs) !important;
  }
  .mb-3xs-ts,
  div.mb-3xs-ts {
    margin-bottom: var(--space-3xs) !important;
  }
  .mb-2xs-ts,
  div.mb-2xs-ts {
    margin-bottom: var(--space-2xs) !important;
  }
  .mb-xs-ts,
  div.mb-xs-ts {
    margin-bottom: var(--space-xs) !important;
  }
  .mb-s-ts,
  div.mb-s-ts {
    margin-bottom: var(--space-s) !important;
  }
  .mb-m-ts,
  div.mb-m-ts {
    margin-bottom: var(--space-m) !important;
  }
  .mb-l-ts,
  div.mb-l-ts {
    margin-bottom: var(--space-l) !important;
  }
  .mb-xl-ts,
  div.mb-xl-ts {
    margin-bottom: var(--space-xl) !important;
  }
  .mb-2xl-ts,
  div.mb-2xl-ts {
    margin-bottom: var(--space-2xl) !important;
  }
  .mb-3xl-ts,
  div.mb-3xl-ts {
    margin-bottom: var(--space-3xl) !important;
  }

  .ml-none-ts,
  div.ml-none-ts {
    margin-left: var(--space-none) !important;
  }
  .ml-4xs-ts,
  div.ml-4xs-ts {
    margin-left: var(--space-4xs) !important;
  }
  .ml-3xs-ts,
  div.ml-3xs-ts {
    margin-left: var(--space-3xs) !important;
  }
  .ml-2xs-ts,
  div.ml-2xs-ts {
    margin-left: var(--space-2xs) !important;
  }
  .ml-xs-ts,
  div.ml-xs-ts {
    margin-left: var(--space-xs) !important;
  }
  .ml-s-ts,
  div.ml-s-ts {
    margin-left: var(--space-s) !important;
  }
  .ml-m-ts,
  div.ml-m-ts {
    margin-left: var(--space-m) !important;
  }
  .ml-l-ts,
  div.ml-l-ts {
    margin-left: var(--space-l) !important;
  }
  .ml-xl-ts,
  div.ml-xl-ts {
    margin-left: var(--space-xl) !important;
  }
  .ml-2xl-ts,
  div.ml-2xl-ts {
    margin-left: var(--space-2xl) !important;
  }
  .ml-3xl-ts,
  div.ml-3xl-ts {
    margin-left: var(--space-3xl) !important;
  }

  .p-none-ts,
  div.p-none-ts {
    padding: var(--space-none) !important;
  }
  .p-4xs-ts,
  div.p-4xs-ts {
    padding: var(--space-4xs) !important;
  }
  .p-3xs-ts,
  div.p-3xs-ts {
    padding: var(--space-3xs) !important;
  }
  .p-2xs-ts,
  div.p-2xs-ts {
    padding: var(--space-2xs) !important;
  }
  .p-xs-ts,
  div.p-xs-ts {
    padding: var(--space-xs) !important;
  }
  .p-s-ts,
  div.p-s-ts {
    padding: var(--space-s) !important;
  }
  .p-m-ts,
  div.p-m-ts {
    padding: var(--space-m) !important;
  }
  .p-l-ts,
  div.p-l-ts {
    padding: var(--space-l) !important;
  }
  .p-xl-ts,
  div.p-xl-ts {
    padding: var(--space-xl) !important;
  }
  .p-2xl-ts,
  div.p-2xl-ts {
    padding: var(--space-2xl) !important;
  }
  .p-3xl-ts,
  div.p-3xl-ts {
    padding: var(--space-3xl) !important;
  }

  .pv-none-ts,
  div.pv-none-ts {
    padding-top: var(--space-none) !important;
    padding-bottom: var(--space-none) !important;
  }
  .pv-4xs-ts,
  div.pv-4xs-ts {
    padding-top: var(--space-4xs) !important;
    padding-bottom: var(--space-4xs) !important;
  }
  .pv-3xs-ts,
  div.pv-3xs-ts {
    padding-top: var(--space-3xs) !important;
    padding-bottom: var(--space-3xs) !important;
  }
  .pv-2xs-ts,
  div.pv-2xs-ts {
    padding-top: var(--space-2xs) !important;
    padding-bottom: var(--space-2xs) !important;
  }
  .pv-xs-ts,
  div.pv-xs-ts {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
  }
  .pv-s-ts,
  div.pv-s-ts {
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important;
  }
  .pv-m-ts,
  div.pv-m-ts {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
  }
  .pv-l-ts,
  div.pv-l-ts {
    padding-top: var(--space-l) !important;
    padding-bottom: var(--space-l) !important;
  }
  .pv-xl-ts,
  div.pv-xl-ts {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
  .pv-2xl-ts,
  div.pv-2xl-ts {
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
  }
  .pv-3xl-ts,
  div.pv-3xl-ts {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
  }

  .ph-none-ts,
  div.ph-none-ts {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
  }
  .ph-4xs-ts,
  div.ph-4xs-ts {
    padding-left: var(--space-4xs) !important;
    padding-right: var(--space-4xs) !important;
  }
  .ph-3xs-ts,
  div.ph-3xs-ts {
    padding-left: var(--space-3xs) !important;
    padding-right: var(--space-3xs) !important;
  }
  .ph-2xs-ts,
  div.ph-2xs-ts {
    padding-left: var(--space-2xs) !important;
    padding-right: var(--space-2xs) !important;
  }
  .ph-xs-ts,
  div.ph-xs-ts {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
  }
  .ph-s-ts,
  div.ph-s-ts {
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
  }
  .ph-m-ts,
  div.ph-m-ts {
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
  }
  .ph-l-ts,
  div.ph-l-ts {
    padding-left: var(--space-l) !important;
    padding-right: var(--space-l) !important;
  }
  .ph-xl-ts,
  div.ph-xl-ts {
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
  }
  .ph-2xl-ts,
  div.ph-2xl-ts {
    padding-left: var(--space-2xl) !important;
    padding-right: var(--space-2xl) !important;
  }
  .ph-3xl-ts,
  div.ph-3xl-ts {
    padding-left: var(--space-3xl) !important;
    padding-right: var(--space-3xl) !important;
  }

  .pt-none-ts,
  div.pt-none-ts {
    padding-top: var(--space-none) !important;
  }
  .pt-4xs-ts,
  div.pt-4xs-ts {
    padding-top: var(--space-4xs) !important;
  }
  .pt-3xs-ts,
  div.pt-3xs-ts {
    padding-top: var(--space-3xs) !important;
  }
  .pt-2xs-ts,
  div.pt-2xs-ts {
    padding-top: var(--space-2xs) !important;
  }
  .pt-xs-ts,
  div.pt-xs-ts {
    padding-top: var(--space-xs) !important;
  }
  .pt-s-ts,
  div.pt-s-ts {
    padding-top: var(--space-s) !important;
  }
  .pt-m-ts,
  div.pt-m-ts {
    padding-top: var(--space-m) !important;
  }
  .pt-l-ts,
  div.pt-l-ts {
    padding-top: var(--space-l) !important;
  }
  .pt-xl-ts,
  div.pt-xl-ts {
    padding-top: var(--space-xl) !important;
  }
  .pt-2xl-ts,
  div.pt-2xl-ts {
    padding-top: var(--space-2xl) !important;
  }
  .pt-3xl-ts,
  div.pt-3xl-ts {
    padding-top: var(--space-3xl) !important;
  }

  .pr-none-ts,
  div.pr-none-ts {
    padding-right: var(--space-none) !important;
  }
  .pr-4xs-ts,
  div.pr-4xs-ts {
    padding-right: var(--space-4xs) !important;
  }
  .pr-3xs-ts,
  div.pr-3xs-ts {
    padding-right: var(--space-3xs) !important;
  }
  .pr-2xs-ts,
  div.pr-2xs-ts {
    padding-right: var(--space-2xs) !important;
  }
  .pr-xs-ts,
  div.pr-xs-ts {
    padding-right: var(--space-xs) !important;
  }
  .pr-s-ts,
  div.pr-s-ts {
    padding-right: var(--space-s) !important;
  }
  .pr-m-ts,
  div.pr-m-ts {
    padding-right: var(--space-m) !important;
  }
  .pr-l-ts,
  div.pr-l-ts {
    padding-right: var(--space-l) !important;
  }
  .pr-xl-ts,
  div.pr-xl-ts {
    padding-right: var(--space-xl) !important;
  }
  .pr-2xl-ts,
  div.pr-2xl-ts {
    padding-right: var(--space-2xl) !important;
  }
  .pr-3xl-ts,
  div.pr-3xl-ts {
    padding-right: var(--space-3xl) !important;
  }

  .pb-none-ts,
  div.pb-none-ts {
    padding-bottom: var(--space-none) !important;
  }
  .pb-4xs-ts,
  div.pb-4xs-ts {
    padding-bottom: var(--space-4xs) !important;
  }
  .pb-3xs-ts,
  div.pb-3xs-ts {
    padding-bottom: var(--space-3xs) !important;
  }
  .pb-2xs-ts,
  div.pb-2xs-ts {
    padding-bottom: var(--space-2xs) !important;
  }
  .pb-xs-ts,
  div.pb-xs-ts {
    padding-bottom: var(--space-xs) !important;
  }
  .pb-s-ts,
  div.pb-s-ts {
    padding-bottom: var(--space-s) !important;
  }
  .pb-m-ts,
  div.pb-m-ts {
    padding-bottom: var(--space-m) !important;
  }
  .pb-l-ts,
  div.pb-l-ts {
    padding-bottom: var(--space-l) !important;
  }
  .pb-xl-ts,
  div.pb-xl-ts {
    padding-bottom: var(--space-xl) !important;
  }
  .pb-2xl-ts,
  div.pb-2xl-ts {
    padding-bottom: var(--space-2xl) !important;
  }
  .pb-3xl-ts,
  div.pb-3xl-ts {
    padding-bottom: var(--space-3xl) !important;
  }

  .pl-none-ts,
  div.pl-none-ts {
    padding-left: var(--space-none) !important;
  }
  .pl-4xs-ts,
  div.pl-4xs-ts {
    padding-left: var(--space-4xs) !important;
  }
  .pl-3xs-ts,
  div.pl-3xs-ts {
    padding-left: var(--space-3xs) !important;
  }
  .pl-2xs-ts,
  div.pl-2xs-ts {
    padding-left: var(--space-2xs) !important;
  }
  .pl-xs-ts,
  div.pl-xs-ts {
    padding-left: var(--space-xs) !important;
  }
  .pl-s-ts,
  div.pl-s-ts {
    padding-left: var(--space-s) !important;
  }
  .pl-m-ts,
  div.pl-m-ts {
    padding-left: var(--space-m) !important;
  }
  .pl-l-ts,
  div.pl-l-ts {
    padding-left: var(--space-l) !important;
  }
  .pl-xl-ts,
  div.pl-xl-ts {
    padding-left: var(--space-xl) !important;
  }
  .pl-2xl-ts,
  div.pl-2xl-ts {
    padding-left: var(--space-2xl) !important;
  }
  .pl-3xl-ts,
  div.pl-3xl-ts {
    padding-left: var(--space-3xl) !important;
  }
}

@media all and (max-width: 30rem) {
  /* Mobile, below 480px */
  .m-none-m,
  div.m-none-m {
    margin: var(--space-none) !important;
  }
  .m-4xs-m,
  div.m-4xs-m {
    margin: var(--space-4xs) !important;
  }
  .m-3xs-m,
  div.m-3xs-m {
    margin: var(--space-3xs) !important;
  }
  .m-2xs-m,
  div.m-2xs-m {
    margin: var(--space-2xs) !important;
  }
  .m-xs-m,
  div.m-xs-m {
    margin: var(--space-xs) !important;
  }
  .m-s-m,
  div.m-s-m {
    margin: var(--space-s) !important;
  }
  .m-m-m,
  div.m-m-m {
    margin: var(--space-m) !important;
  }
  .m-l-m,
  div.m-l-m {
    margin: var(--space-l) !important;
  }
  .m-xl-m,
  div.m-xl-m {
    margin: var(--space-xl) !important;
  }
  .m-2xl-m,
  div.m-2xl-m {
    margin: var(--space-2xl) !important;
  }
  .m-3xl-m,
  div.m-3xl-m {
    margin: var(--space-3xl) !important;
  }

  .mv-none-m,
  div.mv-none-m {
    margin-top: var(--space-none) !important;
    margin-bottom: var(--space-none) !important;
  }
  .mv-4xs-m,
  div.mv-4xs-m {
    margin-top: var(--space-4xs) !important;
    margin-bottom: var(--space-4xs) !important;
  }
  .mv-3xs-m,
  div.mv-3xs-m {
    margin-top: var(--space-3xs) !important;
    margin-bottom: var(--space-3xs) !important;
  }
  .mv-2xs-m,
  div.mv-2xs-m {
    margin-top: var(--space-2xs) !important;
    margin-bottom: var(--space-2xs) !important;
  }
  .mv-xs-m,
  div.mv-xs-m {
    margin-top: var(--space-xs) !important;
    margin-bottom: var(--space-xs) !important;
  }
  .mv-s-m,
  div.mv-s-m {
    margin-top: var(--space-s) !important;
    margin-bottom: var(--space-s) !important;
  }
  .mv-m-m,
  div.mv-m-m {
    margin-top: var(--space-m) !important;
    margin-bottom: var(--space-m) !important;
  }
  .mv-l-m,
  div.mv-l-m {
    margin-top: var(--space-l) !important;
    margin-bottom: var(--space-l) !important;
  }
  .mv-xl-m,
  div.mv-xl-m {
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-xl) !important;
  }
  .mv-2xl-m,
  div.mv-2xl-m {
    margin-top: var(--space-2xl) !important;
    margin-bottom: var(--space-2xl) !important;
  }
  .mv-3xl-m,
  div.mv-3xl-m {
    margin-top: var(--space-3xl) !important;
    margin-bottom: var(--space-3xl) !important;
  }

  .mh-none-m,
  div.mh-none-m {
    margin-left: var(--space-none) !important;
    margin-right: var(--space-none) !important;
  }
  .mh-4xs-m,
  div.mh-4xs-m {
    margin-left: var(--space-4xs) !important;
    margin-right: var(--space-4xs) !important;
  }
  .mh-3xs-m,
  div.mh-3xs-m {
    margin-left: var(--space-3xs) !important;
    margin-right: var(--space-3xs) !important;
  }
  .mh-2xs-m,
  div.mh-2xs-m {
    margin-left: var(--space-2xs) !important;
    margin-right: var(--space-2xs) !important;
  }
  .mh-xs-m,
  div.mh-xs-m {
    margin-left: var(--space-xs) !important;
    margin-right: var(--space-xs) !important;
  }
  .mh-s-m,
  div.mh-s-m {
    margin-left: var(--space-s) !important;
    margin-right: var(--space-s) !important;
  }
  .mh-m-m,
  div.mh-m-m {
    margin-left: var(--space-m) !important;
    margin-right: var(--space-m) !important;
  }
  .mh-l-m,
  div.mh-l-m {
    margin-left: var(--space-l) !important;
    margin-right: var(--space-l) !important;
  }
  .mh-xl-m,
  div.mh-xl-m {
    margin-left: var(--space-xl) !important;
    margin-right: var(--space-xl) !important;
  }
  .mh-2xl-m,
  div.mh-2xl-m {
    margin-left: var(--space-2xl) !important;
    margin-right: var(--space-2xl) !important;
  }
  .mh-3xl-m,
  div.mh-3xl-m {
    margin-left: var(--space-3xl) !important;
    margin-right: var(--space-3xl) !important;
  }

  .mt-none-m,
  div.mt-none-m {
    margin-top: var(--space-none) !important;
  }
  .mt-4xs-m,
  div.mt-4xs-m {
    margin-top: var(--space-4xs) !important;
  }
  .mt-3xs-m,
  div.mt-3xs-m {
    margin-top: var(--space-3xs) !important;
  }
  .mt-2xs-m,
  div.mt-2xs-m {
    margin-top: var(--space-2xs) !important;
  }
  .mt-xs-m,
  div.mt-xs-m {
    margin-top: var(--space-xs) !important;
  }
  .mt-s-m,
  div.mt-s-m {
    margin-top: var(--space-s) !important;
  }
  .mt-m-m,
  div.mt-m-m {
    margin-top: var(--space-m) !important;
  }
  .mt-l-m,
  div.mt-l-m {
    margin-top: var(--space-l) !important;
  }
  .mt-xl-m,
  div.mt-xl-m {
    margin-top: var(--space-xl) !important;
  }
  .mt-2xl-m,
  div.mt-2xl-m {
    margin-top: var(--space-2xl) !important;
  }
  .mt-3xl-m,
  div.mt-3xl-m {
    margin-top: var(--space-3xl) !important;
  }

  .mr-none-m,
  div.mr-none-m {
    margin-right: var(--space-none) !important;
  }
  .mr-4xs-m,
  div.mr-4xs-m {
    margin-right: var(--space-4xs) !important;
  }
  .mr-3xs-m,
  div.mr-3xs-m {
    margin-right: var(--space-3xs) !important;
  }
  .mr-2xs-m,
  div.mr-2xs-m {
    margin-right: var(--space-2xs) !important;
  }
  .mr-xs-m,
  div.mr-xs-m {
    margin-right: var(--space-xs) !important;
  }
  .mr-s-m,
  div.mr-s-m {
    margin-right: var(--space-s) !important;
  }
  .mr-m-m,
  div.mr-m-m {
    margin-right: var(--space-m) !important;
  }
  .mr-l-m,
  div.mr-l-m {
    margin-right: var(--space-l) !important;
  }
  .mr-xl-m,
  div.mr-xl-m {
    margin-right: var(--space-xl) !important;
  }
  .mr-2xl-m,
  div.mr-2xl-m {
    margin-right: var(--space-2xl) !important;
  }
  .mr-3xl-m,
  div.mr-3xl-m {
    margin-right: var(--space-3xl) !important;
  }

  .mb-none-m,
  div.mb-none-m {
    margin-bottom: var(--space-none) !important;
  }
  .mb-4xs-m,
  div.mb-4xs-m {
    margin-bottom: var(--space-4xs) !important;
  }
  .mb-3xs-m,
  div.mb-3xs-m {
    margin-bottom: var(--space-3xs) !important;
  }
  .mb-2xs-m,
  div.mb-2xs-m {
    margin-bottom: var(--space-2xs) !important;
  }
  .mb-xs-m,
  div.mb-xs-m {
    margin-bottom: var(--space-xs) !important;
  }
  .mb-s-m,
  div.mb-s-m {
    margin-bottom: var(--space-s) !important;
  }
  .mb-m-m,
  div.mb-m-m {
    margin-bottom: var(--space-m) !important;
  }
  .mb-l-m,
  div.mb-l-m {
    margin-bottom: var(--space-l) !important;
  }
  .mb-xl-m,
  div.mb-xl-m {
    margin-bottom: var(--space-xl) !important;
  }
  .mb-2xl-m,
  div.mb-2xl-m {
    margin-bottom: var(--space-2xl) !important;
  }
  .mb-3xl-m,
  div.mb-3xl-m {
    margin-bottom: var(--space-3xl) !important;
  }

  .ml-none-m,
  div.ml-none-m {
    margin-left: var(--space-none) !important;
  }
  .ml-4xs-m,
  div.ml-4xs-m {
    margin-left: var(--space-4xs) !important;
  }
  .ml-3xs-m,
  div.ml-3xs-m {
    margin-left: var(--space-3xs) !important;
  }
  .ml-2xs-m,
  div.ml-2xs-m {
    margin-left: var(--space-2xs) !important;
  }
  .ml-xs-m,
  div.ml-xs-m {
    margin-left: var(--space-xs) !important;
  }
  .ml-s-m,
  div.ml-s-m {
    margin-left: var(--space-s) !important;
  }
  .ml-m-m,
  div.ml-m-m {
    margin-left: var(--space-m) !important;
  }
  .ml-l-m,
  div.ml-l-m {
    margin-left: var(--space-l) !important;
  }
  .ml-xl-m,
  div.ml-xl-m {
    margin-left: var(--space-xl) !important;
  }
  .ml-2xl-m,
  div.ml-2xl-m {
    margin-left: var(--space-2xl) !important;
  }
  .ml-3xl-m,
  div.ml-3xl-m {
    margin-left: var(--space-3xl) !important;
  }

  .p-none-m,
  div.p-none-m {
    padding: var(--space-none) !important;
  }
  .p-4xs-m,
  div.p-4xs-m {
    padding: var(--space-4xs) !important;
  }
  .p-3xs-m,
  div.p-3xs-m {
    padding: var(--space-3xs) !important;
  }
  .p-2xs-m,
  div.p-2xs-m {
    padding: var(--space-2xs) !important;
  }
  .p-xs-m,
  div.p-xs-m {
    padding: var(--space-xs) !important;
  }
  .p-s-m,
  div.p-s-m {
    padding: var(--space-s) !important;
  }
  .p-m-m,
  div.p-m-m {
    padding: var(--space-m) !important;
  }
  .p-l-m,
  div.p-l-m {
    padding: var(--space-l) !important;
  }
  .p-xl-m,
  div.p-xl-m {
    padding: var(--space-xl) !important;
  }
  .p-2xl-m,
  div.p-2xl-m {
    padding: var(--space-2xl) !important;
  }
  .p-3xl-m,
  div.p-3xl-m {
    padding: var(--space-3xl) !important;
  }

  .pv-none-m,
  div.pv-none-m {
    padding-top: var(--space-none) !important;
    padding-bottom: var(--space-none) !important;
  }
  .pv-4xs-m,
  div.pv-4xs-m {
    padding-top: var(--space-4xs) !important;
    padding-bottom: var(--space-4xs) !important;
  }
  .pv-3xs-m,
  div.pv-3xs-m {
    padding-top: var(--space-3xs) !important;
    padding-bottom: var(--space-3xs) !important;
  }
  .pv-2xs-m,
  div.pv-2xs-m {
    padding-top: var(--space-2xs) !important;
    padding-bottom: var(--space-2xs) !important;
  }
  .pv-xs-m,
  div.pv-xs-m {
    padding-top: var(--space-xs) !important;
    padding-bottom: var(--space-xs) !important;
  }
  .pv-s-m,
  div.pv-s-m {
    padding-top: var(--space-s) !important;
    padding-bottom: var(--space-s) !important;
  }
  .pv-m-m,
  div.pv-m-m {
    padding-top: var(--space-m) !important;
    padding-bottom: var(--space-m) !important;
  }
  .pv-l-m,
  div.pv-l-m {
    padding-top: var(--space-l) !important;
    padding-bottom: var(--space-l) !important;
  }
  .pv-xl-m,
  div.pv-xl-m {
    padding-top: var(--space-xl) !important;
    padding-bottom: var(--space-xl) !important;
  }
  .pv-2xl-m,
  div.pv-2xl-m {
    padding-top: var(--space-2xl) !important;
    padding-bottom: var(--space-2xl) !important;
  }
  .pv-3xl-m,
  div.pv-3xl-m {
    padding-top: var(--space-3xl) !important;
    padding-bottom: var(--space-3xl) !important;
  }

  .ph-none-m,
  div.ph-none-m {
    padding-left: var(--space-none) !important;
    padding-right: var(--space-none) !important;
  }
  .ph-4xs-m,
  div.ph-4xs-m {
    padding-left: var(--space-4xs) !important;
    padding-right: var(--space-4xs) !important;
  }
  .ph-3xs-m,
  div.ph-3xs-m {
    padding-left: var(--space-3xs) !important;
    padding-right: var(--space-3xs) !important;
  }
  .ph-2xs-m,
  div.ph-2xs-m {
    padding-left: var(--space-2xs) !important;
    padding-right: var(--space-2xs) !important;
  }
  .ph-xs-m,
  div.ph-xs-m {
    padding-left: var(--space-xs) !important;
    padding-right: var(--space-xs) !important;
  }
  .ph-s-m,
  div.ph-s-m {
    padding-left: var(--space-s) !important;
    padding-right: var(--space-s) !important;
  }
  .ph-m-m,
  div.ph-m-m {
    padding-left: var(--space-m) !important;
    padding-right: var(--space-m) !important;
  }
  .ph-l-m,
  div.ph-l-m {
    padding-left: var(--space-l) !important;
    padding-right: var(--space-l) !important;
  }
  .ph-xl-m,
  div.ph-xl-m {
    padding-left: var(--space-xl) !important;
    padding-right: var(--space-xl) !important;
  }
  .ph-2xl-m,
  div.ph-2xl-m {
    padding-left: var(--space-2xl) !important;
    padding-right: var(--space-2xl) !important;
  }
  .ph-3xl-m,
  div.ph-3xl-m {
    padding-left: var(--space-3xl) !important;
    padding-right: var(--space-3xl) !important;
  }

  .pt-none-m,
  div.pt-none-m {
    padding-top: var(--space-none) !important;
  }
  .pt-4xs-m,
  div.pt-4xs-m {
    padding-top: var(--space-4xs) !important;
  }
  .pt-3xs-m,
  div.pt-3xs-m {
    padding-top: var(--space-3xs) !important;
  }
  .pt-2xs-m,
  div.pt-2xs-m {
    padding-top: var(--space-2xs) !important;
  }
  .pt-xs-m,
  div.pt-xs-m {
    padding-top: var(--space-xs) !important;
  }
  .pt-s-m,
  div.pt-s-m {
    padding-top: var(--space-s) !important;
  }
  .pt-m-m,
  div.pt-m-m {
    padding-top: var(--space-m) !important;
  }
  .pt-l-m,
  div.pt-l-m {
    padding-top: var(--space-l) !important;
  }
  .pt-xl-m,
  div.pt-xl-m {
    padding-top: var(--space-xl) !important;
  }
  .pt-2xl-m,
  div.pt-2xl-m {
    padding-top: var(--space-2xl) !important;
  }
  .pt-3xl-m,
  div.pt-3xl-m {
    padding-top: var(--space-3xl) !important;
  }

  .pr-none-m,
  div.pr-none-m {
    padding-right: var(--space-none) !important;
  }
  .pr-4xs-m,
  div.pr-4xs-m {
    padding-right: var(--space-4xs) !important;
  }
  .pr-3xs-m,
  div.pr-3xs-m {
    padding-right: var(--space-3xs) !important;
  }
  .pr-2xs-m,
  div.pr-2xs-m {
    padding-right: var(--space-2xs) !important;
  }
  .pr-xs-m,
  div.pr-xs-m {
    padding-right: var(--space-xs) !important;
  }
  .pr-s-m,
  div.pr-s-m {
    padding-right: var(--space-s) !important;
  }
  .pr-m-m,
  div.pr-m-m {
    padding-right: var(--space-m) !important;
  }
  .pr-l-m,
  div.pr-l-m {
    padding-right: var(--space-l) !important;
  }
  .pr-xl-m,
  div.pr-xl-m {
    padding-right: var(--space-xl) !important;
  }
  .pr-2xl-m,
  div.pr-2xl-m {
    padding-right: var(--space-2xl) !important;
  }
  .pr-3xl-m,
  div.pr-3xl-m {
    padding-right: var(--space-3xl) !important;
  }

  .pb-none-m,
  div.pb-none-m {
    padding-bottom: var(--space-none) !important;
  }
  .pb-4xs-m,
  div.pb-4xs-m {
    padding-bottom: var(--space-4xs) !important;
  }
  .pb-3xs-m,
  div.pb-3xs-m {
    padding-bottom: var(--space-3xs) !important;
  }
  .pb-2xs-m,
  div.pb-2xs-m {
    padding-bottom: var(--space-2xs) !important;
  }
  .pb-xs-m,
  div.pb-xs-m {
    padding-bottom: var(--space-xs) !important;
  }
  .pb-s-m,
  div.pb-s-m {
    padding-bottom: var(--space-s) !important;
  }
  .pb-m-m,
  div.pb-m-m {
    padding-bottom: var(--space-m) !important;
  }
  .pb-l-m,
  div.pb-l-m {
    padding-bottom: var(--space-l) !important;
  }
  .pb-xl-m,
  div.pb-xl-m {
    padding-bottom: var(--space-xl) !important;
  }
  .pb-2xl-m,
  div.pb-2xl-m {
    padding-bottom: var(--space-2xl) !important;
  }
  .pb-3xl-m,
  div.pb-3xl-m {
    padding-bottom: var(--space-3xl) !important;
  }

  .pl-none-m,
  div.pl-none-m {
    padding-left: var(--space-none) !important;
  }
  .pl-4xs-m,
  div.pl-4xs-m {
    padding-left: var(--space-4xs) !important;
  }
  .pl-3xs-m,
  div.pl-3xs-m {
    padding-left: var(--space-3xs) !important;
  }
  .pl-2xs-m,
  div.pl-2xs-m {
    padding-left: var(--space-2xs) !important;
  }
  .pl-xs-m,
  div.pl-xs-m {
    padding-left: var(--space-xs) !important;
  }
  .pl-s-m,
  div.pl-s-m {
    padding-left: var(--space-s) !important;
  }
  .pl-m-m,
  div.pl-m-m {
    padding-left: var(--space-m) !important;
  }
  .pl-l-m,
  div.pl-l-m {
    padding-left: var(--space-l) !important;
  }
  .pl-xl-m,
  div.pl-xl-m {
    padding-left: var(--space-xl) !important;
  }
  .pl-2xl-m,
  div.pl-2xl-m {
    padding-left: var(--space-2xl) !important;
  }
  .pl-3xl-m,
  div.pl-3xl-m {
    padding-left: var(--space-3xl) !important;
  }
}

/* -------------------------------------------------------------------- *
 * Utility classes — gap
 * -------------------------------------------------------------------- */

.gap-none {
  gap: var(--gap-narrow) !important;
}
.gap-4xs {
  gap: var(--space-4xs) !important;
}
.gap-3xs {
  gap: var(--space-3xs) !important;
}
.gap-2xs {
  gap: var(--space-2xs) !important;
}
.gap-xs {
  gap: var(--space-xs) !important;
}
.gap-s {
  gap: var(--space-s) !important;
}
.gap-m {
  gap: var(--space-m) !important;
}
.gap-l {
  gap: var(--space-l) !important;
}
.gap-xl {
  gap: var(--space-xl) !important;
}
.gap-2xl {
  gap: var(--space-2xl) !important;
}
.gap-3xl {
  gap: var(--space-3xl) !important;
}

.gap-narrow {
  gap: var(--gap-narrow) !important;
}
.gap-condensed {
  gap: var(--gap-condensed) !important;
}
.gap-wide {
  gap: var(--gap-wide) !important;
}
.gap-xwide {
  gap: var(--gap-xwide) !important;
}

.rgap-none {
  row-gap: var(--gap-narrow) !important;
}
.rgap-4xs {
  row-gap: var(--space-4xs) !important;
}
.rgap-3xs {
  row-gap: var(--space-3xs) !important;
}
.rgap-2xs {
  row-gap: var(--space-2xs) !important;
}
.rgap-xs {
  row-gap: var(--space-xs) !important;
}
.rgap-s {
  row-gap: var(--space-s) !important;
}
.rgap-m {
  row-gap: var(--space-m) !important;
}
.rgap-l {
  row-gap: var(--space-l) !important;
}
.rgap-xl {
  row-gap: var(--space-xl) !important;
}
.rgap-2xl {
  row-gap: var(--space-2xl) !important;
}
.rgap-3xl {
  row-gap: var(--space-3xl) !important;
}

.rgap-narrow {
  row-gap: var(--gap-narrow) !important;
}
.rgap-condensed {
  row-gap: var(--gap-condensed) !important;
}
.rgap-wide {
  row-gap: var(--gap-wide) !important;
}
.rgap-xwide {
  row-gap: var(--gap-xwide) !important;
}

.cgap-none {
  column-gap: var(--gap-narrow) !important;
}
.cgap-4xs {
  column-gap: var(--space-4xs) !important;
}
.cgap-3xs {
  column-gap: var(--space-3xs) !important;
}
.cgap-2xs {
  column-gap: var(--space-2xs) !important;
}
.cgap-xs {
  column-gap: var(--space-xs) !important;
}
.cgap-s {
  column-gap: var(--space-s) !important;
}
.cgap-m {
  column-gap: var(--space-m) !important;
}
.cgap-l {
  column-gap: var(--space-l) !important;
}
.cgap-xl {
  column-gap: var(--space-xl) !important;
}
.cgap-2xl {
  column-gap: var(--space-2xl) !important;
}
.cgap-3xl {
  column-gap: var(--space-3xl) !important;
}

.cgap-narrow {
  column-gap: var(--gap-narrow) !important;
}
.cgap-condensed {
  column-gap: var(--gap-condensed) !important;
}
.cgap-wide {
  column-gap: var(--gap-wide) !important;
}
.cgap-xwide {
  column-gap: var(--gap-xwide) !important;
}

/* -------------------------------------------------------------------- *
 * Utility classes — grid placement (spans, shifts)
 * -------------------------------------------------------------------- */

.span-1,
div.span-1 {
  grid-column: span 1 / span 1;
}
.span-2,
div.span-2 {
  grid-column: span 2 / span 2;
}
.span-3,
div.span-3 {
  grid-column: span 3 / span 3;
}
.span-4,
div.span-4 {
  grid-column: span 4 / span 4;
}
.span-5,
div.span-5 {
  grid-column: span 5 / span 5;
}
.span-6,
div.span-6 {
  grid-column: span 6 / span 6;
}
.span-7,
div.span-7 {
  grid-column: span 7 / span 7;
}
.span-8,
div.span-8 {
  grid-column: span 8 / span 8;
}
.span-9,
div.span-9 {
  grid-column: span 9 / span 9;
}
.span-10,
div.span-10 {
  grid-column: span 10 / span 10;
}
.span-11,
div.span-11 {
  grid-column: span 10 / span 11;
}
.span-12,
div.span-12 {
  grid-column: span 10 / span 12;
}

.shift-1,
div.shift-1 {
  grid-column-start: 1 !important;
}
.shift-2,
div.shift-2 {
  grid-column-start: 2 !important;
}
.shift-3,
div.shift-3 {
  grid-column-start: 3 !important;
}
.shift-4,
div.shift-4 {
  grid-column-start: 4 !important;
}
.shift-5,
div.shift-5 {
  grid-column-start: 5 !important;
}
.shift-6,
div.shift-6 {
  grid-column-start: 6 !important;
}
.shift-7,
div.shift-7 {
  grid-column-start: 7 !important;
}
.shift-8,
div.shift-8 {
  grid-column-start: 8 !important;
}
.shift-9,
div.shift-9 {
  grid-column-start: 9 !important;
}
.shift-10,
div.shift-10 {
  grid-column-start: 10 !important;
}
.shift-11,
div.shift-11 {
  grid-column-start: 11 !important;
}
.shift-12,
div.shift-12 {
  grid-column-start: 12 !important;
}

div.rspan-1 > div,
.rspan-1 > div {
  grid-column: span 1 / span 1;
}
div.rspan-2 > div,
.rspan-2 > div {
  grid-column: span 2 / span 2;
}
div.rspan-3 > div,
.rspan-3 > div {
  grid-column: span 3 / span 3;
}
div.rspan-4 > div,
.rspan-4 > div {
  grid-column: span 4 / span 4;
}
div.rspan-5 > div,
.rspan-5 > div {
  grid-column: span 5 / span 5;
}
div.rspan-6 > div,
.rspan-6 > div {
  grid-column: span 6 / span 6;
}
div.rspan-7 > div,
.rspan-7 > div {
  grid-column: span 7 / span 7;
}
div.rspan-8 > div,
.rspan-8 > div {
  grid-column: span 8 / span 8;
}
div.rspan-9 > div,
.rspan-9 > div {
  grid-column: span 9 / span 9;
}
div.rspan-10 > div,
.rspan-10 > div {
  grid-column: span 10 / span 10;
}
div.rspan-11 > div,
.rspan-11 > div {
  grid-column: span 11 / span 11;
}
div.rspan-12 > div,
.rspan-12 > div {
  grid-column: span 12 / span 12;
}

div[class*="rspan-"].span-align-right > div {
  grid-column-start: 1 !important;
}
div[class*="rspan-"].span-align-left > div {
  grid-column-end: 13 !important;
}

div[class*="rspan-"].span-shift-1 > div {
  grid-column-start: 1 !important;
}
div[class*="rspan-"].span-shift-2 > div {
  grid-column-start: 2 !important;
}
div[class*="rspan-"].span-shift-3 > div {
  grid-column-start: 3 !important;
}
div[class*="rspan-"].span-shift-4 > div {
  grid-column-start: 4 !important;
}
div[class*="rspan-"].span-shift-5 > div {
  grid-column-start: 5 !important;
}
div[class*="rspan-"].span-shift-6 > div {
  grid-column-start: 6 !important;
}
div[class*="rspan-"].span-shift-7 > div {
  grid-column-start: 7 !important;
}
div[class*="rspan-"].span-shift-8 > div {
  grid-column-start: 8 !important;
}
div[class*="rspan-"].span-shift-9 > div {
  grid-column-start: 9 !important;
}
div[class*="rspan-"].span-shift-10 > div {
  grid-column-start: 10 !important;
}
div[class*="rspan-"].span-shift-11 > div {
  grid-column-start: 11 !important;
}
div[class*="rspan-"].span-shift-12 > div {
  grid-column-start: 12 !important;
}

.npe {
  pointer-events: none;
}

/* -------------------------------------------------------------------- *
 * Utility classes — grid placement (responsive breakpoints)
 *
 * Same -p/-t/-ts/-m tiers as the spacing breakpoints above. Column
 * count per tier matches the .row grid at that width: 12 for -p, 8 for
 * -t and -ts, 4 for -m — so e.g. .span-t-8/.span-ts-8 (full width at
 * that tier) and .span-m-4 (full width at mobile) are the practical
 * ceiling; higher span numbers aren't offered since the row doesn't
 * have that many columns to span at that width.
 * -------------------------------------------------------------------- */

@media all and (min-width: 61.3125rem) and (max-width: 68.6875rem) {
  /* iPad Pro portrait, 981px–1099px */
  div.span-p-1,
  div.span-1-p {
    grid-column: auto/span 1 !important;
  }
  div.span-p-2,
  div.span-2-p {
    grid-column: auto/span 2 !important;
  }
  div.span-p-3,
  div.span-3-p {
    grid-column: auto/span 3 !important;
  }
  div.span-p-4,
  div.span-4-p {
    grid-column: auto/span 4 !important;
  }
  div.span-p-5,
  div.span-5-p {
    grid-column: auto/span 5 !important;
  }
  div.span-p-6,
  div.span-6-p {
    grid-column: auto/span 6 !important;
  }
  div.span-p-7,
  div.span-7-p {
    grid-column: auto/span 7 !important;
  }
  div.span-p-8,
  div.span-8-p {
    grid-column: auto/span 8 !important;
  }
  div.span-p-9,
  div.span-9-p {
    grid-column: auto/span 9 !important;
  }
  div.span-p-10,
  div.span-10-p {
    grid-column: auto/span 10 !important;
  }
  div.span-p-11,
  div.span-11-p {
    grid-column: auto/span 11 !important;
  }
  div.span-p-12,
  div.span-12-p {
    grid-column: auto/span 12 !important;
  }

  .shift-p-1,
  div.shift-p-1 {
    grid-column-start: 1 !important;
  }
  .shift-p-2,
  div.shift-p-2 {
    grid-column-start: 2 !important;
  }
  .shift-p-3,
  div.shift-p-3 {
    grid-column-start: 3 !important;
  }
  .shift-p-4,
  div.shift-p-4 {
    grid-column-start: 4 !important;
  }
  .shift-p-5,
  div.shift-p-5 {
    grid-column-start: 5 !important;
  }
  .shift-p-6,
  div.shift-p-6 {
    grid-column-start: 6 !important;
  }
  .shift-p-7,
  div.shift-p-7 {
    grid-column-start: 7 !important;
  }
  .shift-p-8,
  div.shift-p-8 {
    grid-column-start: 8 !important;
  }
  .shift-p-9,
  div.shift-p-9 {
    grid-column-start: 9 !important;
  }
  .shift-p-10,
  div.shift-p-10 {
    grid-column-start: 10 !important;
  }
  .shift-p-11,
  div.shift-p-11 {
    grid-column-start: 11 !important;
  }
  .shift-p-12,
  div.shift-p-12 {
    grid-column-start: 12 !important;
  }

  div.rspan-p-1 > div,
  .rspan-p-1 > div {
    grid-column: span 1 / span 1 !important;
  }
  div.rspan-p-2 > div,
  .rspan-p-2 > div {
    grid-column: span 2 / span 2 !important;
  }
  div.rspan-p-3 > div,
  .rspan-p-3 > div {
    grid-column: span 3 / span 3 !important;
  }
  div.rspan-p-4 > div,
  .rspan-p-4 > div {
    grid-column: span 4 / span 4 !important;
  }
  div.rspan-p-5 > div,
  .rspan-p-5 > div {
    grid-column: span 5 / span 5 !important;
  }
  div.rspan-p-6 > div,
  .rspan-p-6 > div {
    grid-column: span 6 / span 6 !important;
  }
  div.rspan-p-7 > div,
  .rspan-p-7 > div {
    grid-column: span 7 / span 7 !important;
  }
  div.rspan-p-8 > div,
  .rspan-p-8 > div {
    grid-column: span 8 / span 8 !important;
  }
  div.rspan-p-9 > div,
  .rspan-p-9 > div {
    grid-column: span 9 / span 9 !important;
  }
  div.rspan-p-10 > div,
  .rspan-p-10 > div {
    grid-column: span 10 / span 10 !important;
  }
  div.rspan-p-11 > div,
  .rspan-p-11 > div {
    grid-column: span 11 / span 11 !important;
  }
  div.rspan-p-12 > div,
  .rspan-p-12 > div {
    grid-column: span 12 / span 12 !important;
  }

  div[class*="rspan-"].span-align-left-p > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-align-right-p > div {
    grid-column-end: 13 !important;
  }

  div[class*="rspan-"].span-shift-p-1 > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-shift-p-2 > div {
    grid-column-start: 2 !important;
  }
  div[class*="rspan-"].span-shift-p-3 > div {
    grid-column-start: 3 !important;
  }
  div[class*="rspan-"].span-shift-p-4 > div {
    grid-column-start: 4 !important;
  }
  div[class*="rspan-"].span-shift-p-5 > div {
    grid-column-start: 5 !important;
  }
  div[class*="rspan-"].span-shift-p-6 > div {
    grid-column-start: 6 !important;
  }
  div[class*="rspan-"].span-shift-p-7 > div {
    grid-column-start: 7 !important;
  }
  div[class*="rspan-"].span-shift-p-8 > div {
    grid-column-start: 8 !important;
  }
  div[class*="rspan-"].span-shift-p-9 > div {
    grid-column-start: 9 !important;
  }
  div[class*="rspan-"].span-shift-p-10 > div {
    grid-column-start: 10 !important;
  }
  div[class*="rspan-"].span-shift-p-11 > div {
    grid-column-start: 11 !important;
  }
  div[class*="rspan-"].span-shift-p-12 > div {
    grid-column-start: 12 !important;
  }

  .rgap-none-p {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-4xs-p {
    row-gap: var(--space-4xs) !important;
  }
  .rgap-3xs-p {
    row-gap: var(--space-3xs) !important;
  }
  .rgap-2xs-p {
    row-gap: var(--space-2xs) !important;
  }
  .rgap-xs-p {
    row-gap: var(--space-xs) !important;
  }
  .rgap-s-p {
    row-gap: var(--space-s) !important;
  }
  .rgap-m-p {
    row-gap: var(--space-m) !important;
  }
  .rgap-l-p {
    row-gap: var(--space-l) !important;
  }
  .rgap-xl-p {
    row-gap: var(--space-xl) !important;
  }
  .rgap-2xl-p {
    row-gap: var(--space-2xl) !important;
  }
  .rgap-3xl-p {
    row-gap: var(--space-3xl) !important;
  }

  .rgap-narrow-p {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-condensed-p {
    row-gap: var(--gap-condensed) !important;
  }
  .rgap-wide-p {
    row-gap: var(--gap-wide) !important;
  }
  .rgap-xwide-p {
    row-gap: var(--gap-xwide) !important;
  }
}

@media all and (min-width: 48rem) and (max-width: 61.25rem) {
  /* Tablet, 768px–980px */
  div.span-t-1,
  div.span-1-t {
    grid-column: auto/span 1 !important;
  }
  div.span-t-2,
  div.span-2-t {
    grid-column: auto/span 2 !important;
  }
  div.span-t-3,
  div.span-3-t {
    grid-column: auto/span 3 !important;
  }
  div.span-t-4,
  div.span-4-t {
    grid-column: auto/span 4 !important;
  }
  div.span-t-5,
  div.span-5-t {
    grid-column: auto/span 5 !important;
  }
  div.span-t-6,
  div.span-6-t {
    grid-column: auto/span 6 !important;
  }
  div.span-t-7,
  div.span-7-t {
    grid-column: auto/span 7 !important;
  }
  div.span-t-8,
  div.span-8-t {
    grid-column: auto/span 8 !important;
  }

  .shift-t-1,
  div.shift-t-1 {
    grid-column-start: 1 !important;
  }
  .shift-t-2,
  div.shift-t-2 {
    grid-column-start: 2 !important;
  }
  .shift-t-3,
  div.shift-t-3 {
    grid-column-start: 3 !important;
  }
  .shift-t-4,
  div.shift-t-4 {
    grid-column-start: 4 !important;
  }
  .shift-t-5,
  div.shift-t-5 {
    grid-column-start: 5 !important;
  }
  .shift-t-6,
  div.shift-t-6 {
    grid-column-start: 6 !important;
  }
  .shift-t-7,
  div.shift-t-7 {
    grid-column-start: 7 !important;
  }
  .shift-t-8,
  div.shift-t-8 {
    grid-column-start: 8 !important;
  }

  div.rspan-t-1 > div,
  .rspan-t-1 > div {
    grid-column: span 1 / span 1 !important;
  }
  div.rspan-t-2 > div,
  .rspan-t-2 > div {
    grid-column: span 2 / span 2 !important;
  }
  div.rspan-t-3 > div,
  .rspan-t-3 > div {
    grid-column: span 3 / span 3 !important;
  }
  div.rspan-t-4 > div,
  .rspan-t-4 > div {
    grid-column: span 4 / span 4 !important;
  }
  div.rspan-t-5 > div,
  .rspan-t-5 > div {
    grid-column: span 5 / span 5 !important;
  }
  div.rspan-t-6 > div,
  .rspan-t-6 > div {
    grid-column: span 6 / span 6 !important;
  }
  div.rspan-t-7 > div,
  .rspan-t-7 > div {
    grid-column: span 7 / span 7 !important;
  }
  div.rspan-t-8 > div,
  .rspan-t-8 > div {
    grid-column: span 8 / span 8 !important;
  }

  div[class*="rspan-"].span-align-left-t > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-align-right-t > div {
    grid-column-end: 9 !important;
  }

  div[class*="rspan-"].span-shift-t-1 > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-shift-t-2 > div {
    grid-column-start: 2 !important;
  }
  div[class*="rspan-"].span-shift-t-3 > div {
    grid-column-start: 3 !important;
  }
  div[class*="rspan-"].span-shift-t-4 > div {
    grid-column-start: 4 !important;
  }
  div[class*="rspan-"].span-shift-t-5 > div {
    grid-column-start: 5 !important;
  }
  div[class*="rspan-"].span-shift-t-6 > div {
    grid-column-start: 6 !important;
  }
  div[class*="rspan-"].span-shift-t-7 > div {
    grid-column-start: 7 !important;
  }
  div[class*="rspan-"].span-shift-t-8 > div {
    grid-column-start: 8 !important;
  }

  .rgap-none-t {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-4xs-t {
    row-gap: var(--space-4xs) !important;
  }
  .rgap-3xs-t {
    row-gap: var(--space-3xs) !important;
  }
  .rgap-2xs-t {
    row-gap: var(--space-2xs) !important;
  }
  .rgap-xs-t {
    row-gap: var(--space-xs) !important;
  }
  .rgap-s-t {
    row-gap: var(--space-s) !important;
  }
  .rgap-m-t {
    row-gap: var(--space-m) !important;
  }
  .rgap-l-t {
    row-gap: var(--space-l) !important;
  }
  .rgap-xl-t {
    row-gap: var(--space-xl) !important;
  }
  .rgap-2xl-t {
    row-gap: var(--space-2xl) !important;
  }
  .rgap-3xl-t {
    row-gap: var(--space-3xl) !important;
  }

  .rgap-narrow-t {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-condensed-t {
    row-gap: var(--gap-condensed) !important;
  }
  .rgap-wide-t {
    row-gap: var(--gap-wide) !important;
  }
  .rgap-xwide-t {
    row-gap: var(--gap-xwide) !important;
  }
}

@media all and (min-width: 30.0625rem) and (max-width: 47.9375rem) {
  /* Small tablet, 481px–767px */
  div.span-ts-1,
  div.span-1-ts {
    grid-column: auto/span 1 !important;
  }
  div.span-ts-2,
  div.span-2-ts {
    grid-column: auto/span 2 !important;
  }
  div.span-ts-3,
  div.span-3-ts {
    grid-column: auto/span 3 !important;
  }
  div.span-ts-4,
  div.span-4-ts {
    grid-column: auto/span 4 !important;
  }
  div.span-ts-5,
  div.span-5-ts {
    grid-column: auto/span 5 !important;
  }
  div.span-ts-6,
  div.span-6-ts {
    grid-column: auto/span 6 !important;
  }
  div.span-ts-7,
  div.span-7-ts {
    grid-column: auto/span 7 !important;
  }
  div.span-ts-8,
  div.span-8-ts {
    grid-column: auto/span 8 !important;
  }

  .shift-ts-1,
  div.shift-ts-1 {
    grid-column-start: 1 !important;
  }
  .shift-ts-2,
  div.shift-ts-2 {
    grid-column-start: 2 !important;
  }
  .shift-ts-3,
  div.shift-ts-3 {
    grid-column-start: 3 !important;
  }
  .shift-ts-4,
  div.shift-ts-4 {
    grid-column-start: 4 !important;
  }
  .shift-ts-5,
  div.shift-ts-5 {
    grid-column-start: 5 !important;
  }
  .shift-ts-6,
  div.shift-ts-6 {
    grid-column-start: 6 !important;
  }
  .shift-ts-7,
  div.shift-ts-7 {
    grid-column-start: 7 !important;
  }
  .shift-ts-8,
  div.shift-ts-8 {
    grid-column-start: 8 !important;
  }

  div.rspan-ts-1 > div,
  .rspan-ts-1 > div {
    grid-column: span 1 / span 1 !important;
  }
  div.rspan-ts-2 > div,
  .rspan-ts-2 > div {
    grid-column: span 2 / span 2 !important;
  }
  div.rspan-ts-3 > div,
  .rspan-ts-3 > div {
    grid-column: span 3 / span 3 !important;
  }
  div.rspan-ts-4 > div,
  .rspan-ts-4 > div {
    grid-column: span 4 / span 4 !important;
  }
  div.rspan-ts-5 > div,
  .rspan-ts-5 > div {
    grid-column: span 5 / span 5 !important;
  }
  div.rspan-ts-6 > div,
  .rspan-ts-6 > div {
    grid-column: span 6 / span 6 !important;
  }
  div.rspan-ts-7 > div,
  .rspan-ts-7 > div {
    grid-column: span 7 / span 7 !important;
  }
  div.rspan-ts-8 > div,
  .rspan-ts-8 > div {
    grid-column: span 8 / span 8 !important;
  }

  div[class*="rspan-"].span-align-left-ts > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-align-right-ts > div {
    grid-column-end: 9 !important;
  }

  div[class*="rspan-"].span-shift-ts-1 > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-shift-ts-2 > div {
    grid-column-start: 2 !important;
  }
  div[class*="rspan-"].span-shift-ts-3 > div {
    grid-column-start: 3 !important;
  }
  div[class*="rspan-"].span-shift-ts-4 > div {
    grid-column-start: 4 !important;
  }
  div[class*="rspan-"].span-shift-ts-5 > div {
    grid-column-start: 5 !important;
  }
  div[class*="rspan-"].span-shift-ts-6 > div {
    grid-column-start: 6 !important;
  }
  div[class*="rspan-"].span-shift-ts-7 > div {
    grid-column-start: 7 !important;
  }
  div[class*="rspan-"].span-shift-ts-8 > div {
    grid-column-start: 8 !important;
  }

  .rgap-none-ts {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-4xs-ts {
    row-gap: var(--space-4xs) !important;
  }
  .rgap-3xs-ts {
    row-gap: var(--space-3xs) !important;
  }
  .rgap-2xs-ts {
    row-gap: var(--space-2xs) !important;
  }
  .rgap-xs-ts {
    row-gap: var(--space-xs) !important;
  }
  .rgap-s-ts {
    row-gap: var(--space-s) !important;
  }
  .rgap-m-ts {
    row-gap: var(--space-m) !important;
  }
  .rgap-l-ts {
    row-gap: var(--space-l) !important;
  }
  .rgap-xl-ts {
    row-gap: var(--space-xl) !important;
  }
  .rgap-2xl-ts {
    row-gap: var(--space-2xl) !important;
  }
  .rgap-3xl-ts {
    row-gap: var(--space-3xl) !important;
  }

  .rgap-narrow-ts {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-condensed-ts {
    row-gap: var(--gap-condensed) !important;
  }
  .rgap-wide-ts {
    row-gap: var(--gap-wide) !important;
  }
  .rgap-xwide-ts {
    row-gap: var(--gap-xwide) !important;
  }
}

@media all and (max-width: 30rem) {
  /* Mobile, below 480px */
  div.span-m-1,
  div.span-1-m {
    grid-column: auto/span 1 !important;
  }
  div.span-m-2,
  div.span-2-m {
    grid-column: auto/span 2 !important;
  }
  div.span-m-3,
  div.span-3-m {
    grid-column: auto/span 3 !important;
  }
  div.span-m-4,
  div.span-4-m {
    grid-column: auto/span 4 !important;
  }

  .shift-m-1,
  div.shift-m-1 {
    grid-column-start: 1 !important;
  }
  .shift-m-2,
  div.shift-m-2 {
    grid-column-start: 2 !important;
  }
  .shift-m-3,
  div.shift-m-3 {
    grid-column-start: 3 !important;
  }
  .shift-m-4,
  div.shift-m-4 {
    grid-column-start: 4 !important;
  }

  div.rspan-m-1 > div,
  .rspan-m-1 > div {
    grid-column: span 1 / span 1 !important;
  }
  div.rspan-m-2 > div,
  .rspan-m-2 > div {
    grid-column: span 2 / span 2 !important;
  }
  div.rspan-m-3 > div,
  .rspan-m-3 > div {
    grid-column: span 3 / span 3 !important;
  }
  div.rspan-m-4 > div,
  .rspan-m-4 > div {
    grid-column: span 4 / span 4 !important;
  }

  div[class*="rspan-"].span-align-left-m > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-align-right-m > div {
    grid-column-end: 5 !important;
  }

  div[class*="rspan-"].span-shift-m-1 > div {
    grid-column-start: 1 !important;
  }
  div[class*="rspan-"].span-shift-m-2 > div {
    grid-column-start: 2 !important;
  }
  div[class*="rspan-"].span-shift-m-3 > div {
    grid-column-start: 3 !important;
  }
  div[class*="rspan-"].span-shift-m-4 > div {
    grid-column-start: 4 !important;
  }

  .rgap-none-m {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-4xs-m {
    row-gap: var(--space-4xs) !important;
  }
  .rgap-3xs-m {
    row-gap: var(--space-3xs) !important;
  }
  .rgap-2xs-m {
    row-gap: var(--space-2xs) !important;
  }
  .rgap-xs-m {
    row-gap: var(--space-xs) !important;
  }
  .rgap-s-m {
    row-gap: var(--space-s) !important;
  }
  .rgap-m-m {
    row-gap: var(--space-m) !important;
  }
  .rgap-l-m {
    row-gap: var(--space-l) !important;
  }
  .rgap-xl-m {
    row-gap: var(--space-xl) !important;
  }
  .rgap-2xl-m {
    row-gap: var(--space-2xl) !important;
  }
  .rgap-3xl-m {
    row-gap: var(--space-3xl) !important;
  }

  .rgap-narrow-m {
    row-gap: var(--gap-narrow) !important;
  }
  .rgap-condensed-m {
    row-gap: var(--gap-condensed) !important;
  }
  .rgap-wide-m {
    row-gap: var(--gap-wide) !important;
  }
  .rgap-xwide-m {
    row-gap: var(--gap-xwide) !important;
  }
}

/* -------------------------------------------------------------------- *
 * Utility classes — radius
 * -------------------------------------------------------------------- */

.radius-none {
  border-radius: var(--radius-none);
}
.radius-round {
  border-radius: var(--radius-round);
}

.radius-1 {
  border-radius: var(--radius-1);
}
.radius-2 {
  border-radius: var(--radius-2);
}
.radius-3 {
  border-radius: var(--radius-3);
}
.radius-4 {
  border-radius: var(--radius-4);
}
.radius-5 {
  border-radius: var(--radius-5);
}
.radius-6 {
  border-radius: var(--radius-6);
}
.radius-7 {
  border-radius: var(--radius-7);
}
.radius-8 {
  border-radius: var(--radius-8);
}

.radiust-1 {
  border-top-left-radius: var(--radius-1);
  border-top-right-radius: var(--radius-1);
}
.radiust-2 {
  border-top-left-radius: var(--radius-2);
  border-top-right-radius: var(--radius-2);
}
.radiust-3 {
  border-top-left-radius: var(--radius-3);
  border-top-right-radius: var(--radius-3);
}
.radiust-4 {
  border-top-left-radius: var(--radius-4);
  border-top-right-radius: var(--radius-4);
}
.radiust-5 {
  border-top-left-radius: var(--radius-5);
  border-top-right-radius: var(--radius-5);
}
.radiust-6 {
  border-top-left-radius: var(--radius-6);
  border-top-right-radius: var(--radius-6);
}
.radiust-7 {
  border-top-left-radius: var(--radius-7);
  border-top-right-radius: var(--radius-7);
}
.radiust-8 {
  border-top-left-radius: var(--radius-8);
  border-top-right-radius: var(--radius-8);
}

.radiusb-1 {
  border-bottom-left-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
}
.radiusb-2 {
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}
.radiusb-3 {
  border-bottom-left-radius: var(--radius-3);
  border-bottom-right-radius: var(--radius-3);
}
.radiusb-4 {
  border-bottom-left-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
}
.radiusb-5 {
  border-bottom-left-radius: var(--radius-5);
  border-bottom-right-radius: var(--radius-5);
}
.radiusb-6 {
  border-bottom-left-radius: var(--radius-6);
  border-bottom-right-radius: var(--radius-6);
}
.radiusb-7 {
  border-bottom-left-radius: var(--radius-7);
  border-bottom-right-radius: var(--radius-7);
}
.radiusb-8 {
  border-bottom-left-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
}

.radiusl-1 {
  border-top-left-radius: var(--radius-1);
  border-bottom-left-radius: var(--radius-1);
}
.radiusl-2 {
  border-top-left-radius: var(--radius-2);
  border-bottom-left-radius: var(--radius-2);
}
.radiusl-3 {
  border-top-left-radius: var(--radius-3);
  border-bottom-left-radius: var(--radius-3);
}
.radiusl-4 {
  border-top-left-radius: var(--radius-4);
  border-bottom-left-radius: var(--radius-4);
}
.radiusl-5 {
  border-top-left-radius: var(--radius-5);
  border-bottom-left-radius: var(--radius-5);
}
.radiusl-6 {
  border-top-left-radius: var(--radius-6);
  border-bottom-left-radius: var(--radius-6);
}
.radiusl-7 {
  border-top-left-radius: var(--radius-7);
  border-bottom-left-radius: var(--radius-7);
}
.radiusl-8 {
  border-top-left-radius: var(--radius-8);
  border-bottom-left-radius: var(--radius-8);
}

.radiusr-1 {
  border-top-right-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
}
.radiusr-2 {
  border-top-right-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
}
.radiusr-3 {
  border-top-right-radius: var(--radius-3);
  border-bottom-right-radius: var(--radius-3);
}
.radiusr-4 {
  border-top-right-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
}
.radiusr-5 {
  border-top-right-radius: var(--radius-5);
  border-bottom-right-radius: var(--radius-5);
}
.radiusr-6 {
  border-top-right-radius: var(--radius-6);
  border-bottom-right-radius: var(--radius-6);
}
.radiusr-7 {
  border-top-right-radius: var(--radius-7);
  border-bottom-right-radius: var(--radius-7);
}
.radiusr-8 {
  border-top-right-radius: var(--radius-8);
  border-bottom-right-radius: var(--radius-8);
}

.radiustl-1 {
  border-top-left-radius: var(--radius-1);
}
.radiustl-2 {
  border-top-left-radius: var(--radius-2);
}
.radiustl-3 {
  border-top-left-radius: var(--radius-3);
}
.radiustl-4 {
  border-top-left-radius: var(--radius-4);
}
.radiustl-5 {
  border-top-left-radius: var(--radius-5);
}
.radiustl-6 {
  border-top-left-radius: var(--radius-6);
}
.radiustl-7 {
  border-top-left-radius: var(--radius-7);
}
.radiustl-8 {
  border-top-left-radius: var(--radius-8);
}

.radiustr-1 {
  border-top-right-radius: var(--radius-1);
}
.radiustr-2 {
  border-top-right-radius: var(--radius-2);
}
.radiustr-3 {
  border-top-right-radius: var(--radius-3);
}
.radiustr-4 {
  border-top-right-radius: var(--radius-4);
}
.radiustr-5 {
  border-top-right-radius: var(--radius-5);
}
.radiustr-6 {
  border-top-right-radius: var(--radius-6);
}
.radiustr-7 {
  border-top-right-radius: var(--radius-7);
}
.radiustr-8 {
  border-top-right-radius: var(--radius-8);
}

.radiusbl-1 {
  border-bottom-left-radius: var(--radius-1);
}
.radiusbl-2 {
  border-bottom-left-radius: var(--radius-2);
}
.radiusbl-3 {
  border-bottom-left-radius: var(--radius-3);
}
.radiusbl-4 {
  border-bottom-left-radius: var(--radius-4);
}
.radiusbl-5 {
  border-bottom-left-radius: var(--radius-5);
}
.radiusbl-6 {
  border-bottom-left-radius: var(--radius-6);
}
.radiusbl-7 {
  border-bottom-left-radius: var(--radius-7);
}
.radiusbl-8 {
  border-bottom-left-radius: var(--radius-8);
}

.radiusbr-1 {
  border-bottom-right-radius: var(--radius-1);
}
.radiusbr-2 {
  border-bottom-right-radius: var(--radius-2);
}
.radiusbr-3 {
  border-bottom-right-radius: var(--radius-3);
}
.radiusbr-4 {
  border-bottom-right-radius: var(--radius-4);
}
.radiusbr-5 {
  border-bottom-right-radius: var(--radius-5);
}
.radiusbr-6 {
  border-bottom-right-radius: var(--radius-6);
}
.radiusbr-7 {
  border-bottom-right-radius: var(--radius-7);
}
.radiusbr-8 {
  border-bottom-right-radius: var(--radius-8);
}

/* -------------------------------------------------------------------- *
 * Utility classes — border
 * -------------------------------------------------------------------- */

.border {
  border-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}
.border-v {
  border-block-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}
.border-h {
  border-inline-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}
.border-t {
  border-top-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}
.border-r {
  border-right-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}
.border-b {
  border-bottom-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}
.border-l {
  border-left-width: 1px;
  border-style: solid;
  border-color: var(--border-primary);
}

.bsize-2 {
  border-width: 2px;
}
.bsize-4 {
  border-width: 4px;
}
.bsize-8 {
  border-width: 8px;
}

.bsize-v-2 {
  border-block-width: 2px;
}
.bsize-v-4 {
  border-block-width: 4px;
}
.bsize-v-8 {
  border-block-width: 8px;
}

.bsize-h-2 {
  border-inline-width: 2px;
}
.bsize-h-4 {
  border-inline-width: 4px;
}
.bsize-h-8 {
  border-inline-width: 8px;
}

.bsize-t-2 {
  border-top-width: 2px;
}
.bsize-t-4 {
  border-top-width: 4px;
}
.bsize-t-8 {
  border-top-width: 8px;
}

.bsize-r-2 {
  border-right-width: 2px;
}
.bsize-r-4 {
  border-right-width: 4px;
}
.bsize-r-8 {
  border-right-width: 8px;
}

.bsize-b-2 {
  border-bottom-width: 2px;
}
.bsize-b-4 {
  border-bottom-width: 4px;
}
.bsize-b-8 {
  border-bottom-width: 8px;
}

.bsize-l-2 {
  border-left-width: 2px;
}
.bsize-l-4 {
  border-left-width: 4px;
}
.bsize-l-8 {
  border-left-width: 8px;
}

.bstyle-solid {
  border-style: solid;
}
.bstyle-dashed {
  border-style: dashed;
}
.bstyle-dotted {
  border-style: dotted;
}
.bstyle-double {
  border-style: double;
}

.bcolor-brand {
  border-color: var(--border-brand);
}
.bcolor-primary {
  border-color: var(--border-primary);
} /* Default color */
.bcolor-secondary {
  border-color: var(--border-secondary);
}
.bcolor-tertiary {
  border-color: var(--border-tertiary);
}
.bcolor-focus {
  border-color: var(--border-focus);
}
.bcolor-error {
  border-color: var(--border-error);
}

/* -------------------------------------------------------------------- *
 * Utility classes — vertical alignment
 * -------------------------------------------------------------------- */

.valign-top {
  display: flex;
  justify-content: start;
  flex-direction: column;
}
.valign-middle {
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.valign-bottom {
  display: flex;
  justify-content: end;
  flex-direction: column;
}

/* -------------------------------------------------------------------- *
 * Text / background / border color utilities
 * -------------------------------------------------------------------- */

.text-primary,
.text-primary h1,
.text-primary h2,
.text-primary h3,
.text-primary h4,
.text-primary h5,
.text-primary h6,
.text-primary p,
.text-primary ul,
.text-primary li {
  color: var(--text-primary) !important;
}

.text-secondary,
.text-secondary h1,
.text-secondary h2,
.text-secondary h3,
.text-secondary h4,
.text-secondary h5,
.text-secondary h6,
.text-secondary p,
.text-secondary ul,
.text-secondary li {
  color: var(--text-secondary) !important;
}

.text-on-color,
.text-on-color h1,
.text-on-color h2,
.text-on-color h3,
.text-on-color h4,
.text-on-color h5,
.text-on-color h6,
.text-on-color p,
.text-on-color ul,
.text-on-color li {
  color: var(--text-on-color) !important;
}

.text-brand-primary,
.text-brand-primary h1,
.text-brand-primary h2,
.text-brand-primary h3,
.text-brand-primary h4,
.text-brand-primary h5,
.text-brand-primary h6,
.text-brand-primary p,
.text-brand-primary ul,
.text-brand-primary li {
  color: var(--text-brand-primary) !important;
}

.text-brand-secondary,
.text-brand-secondary h1,
.text-brand-secondary h2,
.text-brand-secondary h3,
.text-brand-secondary h4,
.text-brand-secondary h5,
.text-brand-secondary h6,
.text-brand-secondary p,
.text-brand-secondary ul,
.text-brand-secondary li {
  color: var(--text-brand-secondary) !important;
}

.text-error,
.text-error h1,
.text-error h2,
.text-error h3,
.text-error h4,
.text-error h5,
.text-error h6,
.text-error p,
.text-error ul,
.text-error li {
  color: var(--text-error) !important;
}

.text-disabled,
.text-disabled h1,
.text-disabled h2,
.text-disabled h3,
.text-disabled h4,
.text-disabled h5,
.text-disabled h6,
.text-disabled p,
.text-disabled ul,
.text-disabled li {
  color: var(--text-disabled) !important;
}

.text-on-color-disabled,
.text-on-color-disabled h1,
.text-on-color-disabled h2,
.text-on-color-disabled h3,
.text-on-color-disabled h4,
.text-on-color-disabled h5,
.text-on-color-disabled h6,
.text-on-color-disabled p,
.text-on-color-disabled ul,
.text-on-color-disabled li {
  color: var(--text-on-color-disabled) !important;
}

.text-placeholder,
.text-placeholder h1,
.text-placeholder h2,
.text-placeholder h3,
.text-placeholder h4,
.text-placeholder h5,
.text-placeholder h6,
.text-placeholder p,
.text-placeholder ul,
.text-placeholder li {
  color: var(--text-placeholder) !important;
}

.text-weak,
.text-weak h1,
.text-weak h2,
.text-weak h3,
.text-weak h4,
.text-weak h5,
.text-weak h6,
.text-weak p,
.text-weak ul,
.text-weak li {
  color: var(--text-weak) !important;
}

body a {
  color: var(--link-primary);
  text-decoration: none;
}
body a:hover {
  color: var(--link-hover);
}
body a:active {
  color: var(--link-active);
}
.link-secondary {
  color: var(--link-secondary);
}
.link-tertiary {
  color: var(--link-tertiary);
}

.bg-primary {
  background-color: var(--bg-primary);
}
.bg-neutral-1 {
  background-color: var(--bg-neutral-1);
}
.bg-neutral-2 {
  background-color: var(--bg-neutral-2);
}
.bg-brand-primary-1 {
  background-color: var(--bg-brand-primary-1);
}
.bg-brand-primary-2 {
  background-color: var(--bg-brand-primary-2);
}
.bg-brand-primary-3 {
  background-color: var(--bg-brand-primary-3);
}
.bg-brand-primary-4 {
  background-color: var(--bg-brand-primary-4);
}
.bg-error {
  background-color: var(--bg-error);
}
.bg-alert {
  background-color: var(--bg-alert);
}
.bg-success {
  background-color: var(--bg-success);
}

.border-brand {
  border: 1px solid var(--border-brand);
}
.border-primary {
  border: 1px solid var(--border-primary);
}
.border-secondary {
  border: 1px solid var(--border-secondary);
}
.border-tertiary {
  border: 1px solid var(--border-tertiary);
}
.border-focus {
  border: 1px solid var(--border-focus);
}
.border-error {
  border: 1px solid var(--border-error);
}

/* -------------------------------------------------------------------- *
 * Buttons
 *
 * Variants: primary, secondary, outline, danger
 * Sizes:    small, (default/medium), large
 * States:   hover, active, disabled, focus-visible
 * -------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  border-radius: var(--button-radius);
  border: 1px solid transparent;
  padding: var(--button-size-medium);
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  font-variation-settings:
    "wght" var(--button-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--button-letter-spacing);
  cursor: pointer;
  background-color: var(--button-primary);
  color: var(--text-on-color);
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.button:hover {
  background-color: var(--button-primary-hover);
  color: var(--text-on-color);
}
.button:active {
  background-color: var(--button-primary-active);
  color: var(--text-on-color);
}
.button:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.button--secondary {
  background-color: var(--button-secondary);
}
.button--secondary:hover {
  background-color: var(--button-secondary-hover);
  color: var(--text-on-color);
}
.button--secondary:active {
  background-color: var(--button-secondary-active);
  color: var(--text-on-color);
}

.button--outline {
  background-color: var(--button-tertiary);
  border-color: currentColor;
  color: var(--azure600);
}
.button--outline:hover {
  background-color: var(--button-tertiary-hover);
  border-color: transparent;
  color: var(--text-on-color);
}
.button--outline:active {
  background-color: var(--button-tertiary-active);
  border-color: transparent;
  color: var(--text-on-color);
}

.button--danger {
  background-color: var(--button-danger);
}
.button--danger:hover {
  background-color: var(--button-danger-hover);
  color: var(--text-on-color);
}
.button--danger:active {
  background-color: var(--button-danger-active);
  color: var(--text-on-color);
}

/* Plain text link with button-system sizing/icon spacing, no fill or
   border — for CTAs like "Learn more →" that shouldn't read as a pill. */
.button--text-link {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  color: var(--link-primary);
}
.button--text-link:hover {
  background-color: transparent;
  color: var(--link-hover);
  text-decoration: underline;
}
.button--text-link:active {
  background-color: transparent;
  color: var(--link-active);
}

.button:disabled,
.button.is-disabled {
  background-color: var(--button-disabled);
  border-color: transparent;
  color: var(--text-disabled);
  cursor: not-allowed;
}

.button--small {
  padding: var(--button-size-small);
}

.button--large {
  padding: var(--button-size-large);
}

.button--icon-only {
  padding: var(--button-size-medium);
}
.button--icon-only.button--small {
  padding: var(--button-size-small);
}
.button--icon-only.button--large {
  padding: var(--button-size-large);
}

.button .icon {
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------- *
 * Buttons — dark-section variants
 *
 * For buttons placed on a dark-background section. Same structure as
 * .button above, just swapped to the -dark button tokens — pick this
 * class instead of .button, rather than wrapping in a theme scope.
 * -------------------------------------------------------------------- */

.button--dark {
  background-color: var(--button-primary-dark);
}
.button--dark:hover {
  background-color: var(--button-primary-hover-dark);
  color: var(--text-on-color-dark);
}
.button--dark:active {
  background-color: var(--button-primary-active-dark);
  color: var(--text-on-color-dark);
}

.button--dark-secondary {
  background-color: var(--button-secondary-dark);
}
.button--dark-secondary:hover {
  background-color: var(--button-secondary-hover-dark);
  color: var(--text-on-color-dark);
}
.button--dark-secondary:active {
  background-color: var(--button-secondary-active-dark);
  color: var(--text-on-color-dark);
}

.button--dark-outline {
  background-color: var(--button-tertiary-dark);
  border-color: currentColor;
  color: var(--azure600);
}
.button--dark-outline:hover {
  background-color: var(--button-tertiary-hover-dark);
  border-color: transparent;
  color: var(--text-on-color-dark);
}
.button--dark-outline:active {
  background-color: var(--button-tertiary-active-dark);
  border-color: transparent;
  color: var(--text-on-color-dark);
}

.button--dark-danger {
  background-color: var(--button-danger-dark);
}
.button--dark-danger:hover {
  background-color: var(--button-danger-hover-dark);
  color: var(--text-on-color-dark);
}
.button--dark-danger:active {
  background-color: var(--button-danger-active-dark);
  color: var(--text-on-color-dark);
}

.button--text-link-on-dark {
  background-color: transparent;
  border-color: transparent;
  padding: 0;
  color: var(--text-accent);
}
.button--text-link-on-dark:hover {
  background-color: transparent;
  color: var(--text-accent-hover);
  text-decoration: underline;
}
.button--text-link-on-dark:active {
  background-color: transparent;
  color: var(--text-accent-active);
}

.button--dark:disabled,
.button--dark.is-disabled,
.button--dark-secondary:disabled,
.button--dark-secondary.is-disabled,
.button--dark-outline:disabled,
.button--dark-outline.is-disabled,
.button--dark-danger:disabled,
.button--dark-danger.is-disabled {
  background-color: var(--button-disabled-dark);
  border-color: transparent;
  color: var(--text-disabled-dark);
  cursor: not-allowed;
}

/* -------------------------------------------------------------------- *
 * Brand patterns
 * -------------------------------------------------------------------- */

.logo {
  color: var(--logo);
}

/* Put .logo-white on an ancestor of an inline SVG logo to force it white on a dark background */
.logo-white svg path {
  fill: var(--white) !important;
}

.link-visited {
  color: var(--link-visited);
}

/* Pill / badge links */
.pill {
  border-radius: var(--radius-round);
  border: 1px solid transparent;
  display: inline-flex;
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  justify-content: center;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--body-s-font-size);
  line-height: var(--body-s-compact-line-height);
  font-variation-settings:
    "wght" var(--body-s-font-weight),
    "wdth" var(--wdth-value);
  letter-spacing: var(--body-s-letter-spacing);
  transition: background-color 0.3s ease;
}

.pill--secondary {
  background-color: var(--pill-secondary-bg);
  color: var(--text-primary);
}
.pill--secondary:hover {
  background-color: var(--pill-secondary-bg-hover);
}
.pill--secondary:active {
  background-color: var(--pill-secondary-bg-active);
}

/* Prose links — animated underline reveal on hover. Scope body copy in a
   .prose wrapper to get this instead of the plain `a` treatment above. */
.prose a:not(.button):not(:has(img)) {
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--link-hover),
    var(--link-hover)
  );
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease-in-out;
}
.prose a:not(.button):not(:has(img)):hover {
  background-size: 100% 1px;
  color: var(--link-hover);
}
.prose a:not(.button):not(:has(img)):focus {
  outline: 2px solid var(--link-focus);
}
.prose a:not(.button):not(:has(img)):active {
  color: var(--link-active);
  background-image: linear-gradient(
    to right,
    var(--link-active),
    var(--link-active)
  );
}
.prose a.disabled:not(.button) {
  color: var(--text-disabled);
  pointer-events: none;
  cursor: default;
}
.space-xl {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
}
.space-3xl {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
}

/* Footnotes */
.footnotes {
  font-size: var(--body-s-font-size);
  line-height: 1.5rem;
  margin: var(--space-2xs) 0;
}

.footnote-link {
  color: var(--text-accent);
  text-decoration: none;
  background-image: linear-gradient(
    to right,
    var(--text-accent-hover),
    var(--text-accent-hover)
  );
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 0.3s ease-in-out;
}
.footnote-link:hover {
  background-size: 100% 1px;
  color: var(--text-accent-hover);
}
.footnote-link:focus {
  outline: 2px solid var(--text-accent-focus);
  color: var(--text-accent-focus);
}
.footnote-link:focus:hover {
  background-size: 0 1px;
}
.footnote-link:active {
  color: var(--text-accent-active);
  background-image: linear-gradient(
    to right,
    var(--text-accent-active),
    var(--text-accent-active)
  );
}