/* ======================================================
   RevTrak Global Redesign Overrides
   Staging stylesheet loaded only by child theme templates.

   Purpose:
   - Test global RevTrak visual updates safely
   - Override FWDS base styles without editing parent theme
   - Promote approved rules later into production global CSS
====================================================== */


/* ======================================================
   1. Global Design Tokens
====================================================== */

:root {
  /* Brand colors */
  --revtrak-color-blue: #01adee;
  --revtrak-color-blue-dark: #019dd8;
  --revtrak-color-blue-label: #019dd5;
  --revtrak-color-green: #70bf45;
  --revtrak-color-green-dark: #64ac3e;
  --revtrak-color-yellow: #ffc20e;
  --revtrak-color-yellow-dark: #efb60f;
  --revtrak-color-gray: #959595;
  --revtrak-color-gray-dark: #777777;
  --revtrak-color-white: #ffffff;
  --revtrak-color-black: #000000;

  /* Global text */
  --revtrak-color-text: inherit;

  /* Radius */
  --revtrak-radius-button: 100px;
  --revtrak-radius-card: 16px;

  /* Card accents */
  --revtrak-card-border-accent: var(--revtrak-color-blue);

  /* Heading colors */
  --revtrak-h1-color: var(--revtrak-color-blue);
  --revtrak-h2-color: var(--revtrak-color-black);
  --revtrak-h3-color: var(--revtrak-color-black);
  --revtrak-h4-color: #333333;
  --revtrak-h5-color: #666666;

  /* Heading weights */
  --revtrak-h1-weight: 700;
  --revtrak-h2-weight: 700;
  --revtrak-h3-weight: 600;
  --revtrak-h4-weight: 600;
  --revtrak-h5-weight: 500;

  /* Heading sizes */
  --revtrak-h1-size: 56px;
  --revtrak-h2-size: 42px;
  --revtrak-h3-size: 32px;
  --revtrak-h4-size: 24px;
  --revtrak-h5-size: 20px;

  /* Heading line heights */
  --revtrak-h1-line-height: 1.15;
  --revtrak-h2-line-height: 1.2;
  --revtrak-h3-line-height: 1.25;
  --revtrak-h4-line-height: 1.3;
  --revtrak-h5-line-height: 1.35;

  /* Button base */
  --revtrak-btn-font-weight: 700;
  --revtrak-btn-border-width: 2px;

  /* Button sizes */
  --revtrak-btn-medium-font-size: 16px;
  --revtrak-btn-medium-padding-y: 12px;
  --revtrak-btn-medium-padding-x: 24px;
  --revtrak-btn-large-font-size: 18px;
  --revtrak-btn-large-padding-y: 16px;
  --revtrak-btn-large-padding-x: 32px;

  /* Primary button = Blue */
  --revtrak-btn-primary-bg: var(--revtrak-color-blue);
  --revtrak-btn-primary-text: var(--revtrak-color-white);
  --revtrak-btn-primary-hover-bg: var(--revtrak-color-blue-dark);
  --revtrak-btn-primary-hover-text: var(--revtrak-color-white);

  /* Secondary button = Green */
  --revtrak-btn-secondary-bg: var(--revtrak-color-green);
  --revtrak-btn-secondary-text: var(--revtrak-color-white);
  --revtrak-btn-secondary-hover-bg: var(--revtrak-color-green-dark);
  --revtrak-btn-secondary-hover-text: var(--revtrak-color-white);

  /* White button */
  --revtrak-btn-white-bg: var(--revtrak-color-white);
  --revtrak-btn-white-text: var(--revtrak-color-blue);
  --revtrak-btn-white-hover-bg: var(--revtrak-color-blue);
  --revtrak-btn-white-hover-text: var(--revtrak-color-white);

  /* White 2 button = Yellow */
  --revtrak-btn-white-2-bg: var(--revtrak-color-yellow);
  --revtrak-btn-white-2-text: var(--revtrak-color-white);
  --revtrak-btn-white-2-hover-bg: var(--revtrak-color-yellow-dark);
  --revtrak-btn-white-2-hover-text: var(--revtrak-color-white);

  /* Blank button = Gray */
  --revtrak-btn-blank-bg: var(--revtrak-color-gray);
  --revtrak-btn-blank-text: var(--revtrak-color-white);
  --revtrak-btn-blank-hover-bg: var(--revtrak-color-gray-dark);
  --revtrak-btn-blank-hover-text: var(--revtrak-color-white);

  /* Form card */
  --revtrak-form-card-bottom-border-color: var(--revtrak-color-green);
  --revtrak-form-card-bottom-border-width: 8px;

  /* Form labels */
  --revtrak-form-label-color: var(--revtrak-color-blue-label);
  --revtrak-form-label-font-size: 14px;
  --revtrak-form-label-font-weight: 700;

  /* Form fields */
  --revtrak-form-field-bg: var(--revtrak-color-white);
  --revtrak-form-field-color: var(--revtrak-color-black);
  --revtrak-form-field-font-size: 16px;
  --revtrak-form-field-font-weight: 400;
  --revtrak-form-field-border-color: #bdbdbd;
  --revtrak-form-field-border-width: 1px;
  --revtrak-form-field-radius: 6px;
  --revtrak-form-field-padding-y: 10px;
  --revtrak-form-field-padding-x: 12px;
  --revtrak-form-focus-border-color: var(--revtrak-color-blue-label);
  --revtrak-form-textarea-min-height: 120px;
}


/* ======================================================
   2. Typography
====================================================== */

body {
  color: var(--revtrak-color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  color: var(--revtrak-h1-color);
  font-size: var(--revtrak-h1-size);
  font-weight: var(--revtrak-h1-weight);
  line-height: var(--revtrak-h1-line-height);
}

h2 {
  color: var(--revtrak-h2-color);
  font-size: var(--revtrak-h2-size);
  font-weight: var(--revtrak-h2-weight);
  line-height: var(--revtrak-h2-line-height);
}

h3 {
  color: var(--revtrak-h3-color);
  font-size: var(--revtrak-h3-size);
  font-weight: var(--revtrak-h3-weight);
  line-height: var(--revtrak-h3-line-height);
}

h4 {
  color: var(--revtrak-h4-color);
  font-size: var(--revtrak-h4-size);
  font-weight: var(--revtrak-h4-weight);
  line-height: var(--revtrak-h4-line-height);
}

h5 {
  color: var(--revtrak-h5-color);
  font-size: var(--revtrak-h5-size);
  font-weight: var(--revtrak-h5-weight);
  line-height: var(--revtrak-h5-line-height);
}

p,
li {
  line-height: inherit;
}


/* ======================================================
   3. Buttons / CTAs

   Mapping:
   Primary = Blue
   Secondary = Green
   White = White
   White 2 = Yellow
   Blank = Gray
====================================================== */

.cta-btn,
.hs-button,
input[type="submit"] {
  border-width: var(--revtrak-btn-border-width);
  border-style: solid;
  border-radius: var(--revtrak-radius-button);
  font-weight: var(--revtrak-btn-font-weight);
}

.cta-btn--medium,
.cta-btn--regular {
  padding: var(--revtrak-btn-medium-padding-y) var(--revtrak-btn-medium-padding-x);
  font-size: var(--revtrak-btn-medium-font-size);
}

.cta-btn--large {
  padding: var(--revtrak-btn-large-padding-y) var(--revtrak-btn-large-padding-x);
  font-size: var(--revtrak-btn-large-font-size);
}

/* Solid: Primary = Blue */
.cta-btn.cta-btn--primary,
.cta-btn.cta-btn--primary-fill {
  background-color: var(--revtrak-btn-primary-bg) !important;
  border-color: var(--revtrak-btn-primary-bg) !important;
  color: var(--revtrak-btn-primary-text) !important;
}

.cta-btn.cta-btn--primary:hover,
.cta-btn.cta-btn--primary:focus,
.cta-btn.cta-btn--primary:active,
.cta-btn.cta-btn--primary-fill:hover,
.cta-btn.cta-btn--primary-fill:focus,
.cta-btn.cta-btn--primary-fill:active,
a:hover .cta-btn.cta-btn--primary,
a:hover .cta-btn.cta-btn--primary-fill {
  background-color: var(--revtrak-btn-primary-hover-bg) !important;
  border-color: var(--revtrak-btn-primary-hover-bg) !important;
  color: var(--revtrak-btn-primary-hover-text) !important;
}

/* Solid: Secondary = Green */
.cta-btn.cta-btn--secondary,
.cta-btn.cta-btn--secondary-fill {
  background-color: var(--revtrak-btn-secondary-bg) !important;
  border-color: var(--revtrak-btn-secondary-bg) !important;
  color: var(--revtrak-btn-secondary-text) !important;
}

.cta-btn.cta-btn--secondary:hover,
.cta-btn.cta-btn--secondary:focus,
.cta-btn.cta-btn--secondary:active,
.cta-btn.cta-btn--secondary-fill:hover,
.cta-btn.cta-btn--secondary-fill:focus,
.cta-btn.cta-btn--secondary-fill:active,
a:hover .cta-btn.cta-btn--secondary,
a:hover .cta-btn.cta-btn--secondary-fill {
  background-color: var(--revtrak-btn-secondary-hover-bg) !important;
  border-color: var(--revtrak-btn-secondary-hover-bg) !important;
  color: var(--revtrak-btn-secondary-hover-text) !important;
}

/* Solid: White */
.cta-btn.cta-btn--white,
.cta-btn.cta-btn--white-fill {
  background-color: var(--revtrak-btn-white-bg) !important;
  border-color: var(--revtrak-btn-white-bg) !important;
  color: var(--revtrak-btn-white-text) !important;
}

.cta-btn.cta-btn--white:hover,
.cta-btn.cta-btn--white:focus,
.cta-btn.cta-btn--white:active,
.cta-btn.cta-btn--white-fill:hover,
.cta-btn.cta-btn--white-fill:focus,
.cta-btn.cta-btn--white-fill:active,
a:hover .cta-btn.cta-btn--white,
a:hover .cta-btn.cta-btn--white-fill {
  background-color: var(--revtrak-btn-white-hover-bg) !important;
  border-color: var(--revtrak-btn-white-hover-bg) !important;
  color: var(--revtrak-btn-white-hover-text) !important;
}

/* Solid: White 2 = Yellow */
.cta-btn.cta-btn--white-2 {
  background-color: var(--revtrak-btn-white-2-bg) !important;
  border-color: var(--revtrak-btn-white-2-bg) !important;
  color: var(--revtrak-btn-white-2-text) !important;
}

.cta-btn.cta-btn--white-2:hover,
.cta-btn.cta-btn--white-2:focus,
.cta-btn.cta-btn--white-2:active,
a:hover .cta-btn.cta-btn--white-2 {
  background-color: var(--revtrak-btn-white-2-hover-bg) !important;
  border-color: var(--revtrak-btn-white-2-hover-bg) !important;
  color: var(--revtrak-btn-white-2-hover-text) !important;
}

/* Solid: Blank = Gray */
.cta-btn.cta-btn--blank {
  background-color: var(--revtrak-btn-blank-bg) !important;
  border-color: var(--revtrak-btn-blank-bg) !important;
  color: var(--revtrak-btn-blank-text) !important;
}

.cta-btn.cta-btn--blank:hover,
.cta-btn.cta-btn--blank:focus,
.cta-btn.cta-btn--blank:active,
a:hover .cta-btn.cta-btn--blank {
  background-color: var(--revtrak-btn-blank-hover-bg) !important;
  border-color: var(--revtrak-btn-blank-hover-bg) !important;
  color: var(--revtrak-btn-blank-hover-text) !important;
}

/* Outline: Primary = Blue */
.cta-btn.cta-btn--primary-outline {
  background-color: transparent !important;
  border-color: var(--revtrak-btn-primary-bg) !important;
  color: var(--revtrak-btn-primary-bg) !important;
}

.cta-btn.cta-btn--primary-outline:hover,
.cta-btn.cta-btn--primary-outline:focus,
.cta-btn.cta-btn--primary-outline:active,
a:hover .cta-btn.cta-btn--primary-outline {
  background-color: var(--revtrak-btn-primary-hover-bg) !important;
  border-color: var(--revtrak-btn-primary-hover-bg) !important;
  color: var(--revtrak-btn-primary-hover-text) !important;
}

/* Outline: Secondary = Green */
.cta-btn.cta-btn--secondary-outline {
  background-color: transparent !important;
  border-color: var(--revtrak-btn-secondary-bg) !important;
  color: var(--revtrak-btn-secondary-bg) !important;
}

.cta-btn.cta-btn--secondary-outline:hover,
.cta-btn.cta-btn--secondary-outline:focus,
.cta-btn.cta-btn--secondary-outline:active,
a:hover .cta-btn.cta-btn--secondary-outline {
  background-color: var(--revtrak-btn-secondary-hover-bg) !important;
  border-color: var(--revtrak-btn-secondary-hover-bg) !important;
  color: var(--revtrak-btn-secondary-hover-text) !important;
}

/* Tertiary Outline = Gray */
.cta-btn.cta-btn--tertiary-outline {
  background-color: transparent !important;
  color: var(--revtrak-btn-blank-bg) !important;
  border-color: var(--revtrak-btn-blank-bg) !important;
}

.cta-btn.cta-btn--tertiary-outline:hover,
.cta-btn.cta-btn--tertiary-outline:focus,
.cta-btn.cta-btn--tertiary-outline:active,
a:hover .cta-btn.cta-btn--tertiary-outline {
  background-color: var(--revtrak-btn-blank-hover-bg) !important;
  color: var(--revtrak-btn-blank-hover-text) !important;
  border-color: var(--revtrak-btn-blank-hover-bg) !important;
}

/* Outline: White = Yellow */
.cta-btn.cta-btn--white-outline {
  background-color: transparent !important;
  border-color: var(--revtrak-btn-white-2-bg) !important;
  color: var(--revtrak-btn-white-2-bg) !important;
}

.cta-btn.cta-btn--white-outline:hover,
.cta-btn.cta-btn--white-outline:focus,
.cta-btn.cta-btn--white-outline:active,
a:hover .cta-btn.cta-btn--white-outline {
  background-color: var(--revtrak-btn-white-2-hover-bg) !important;
  border-color: var(--revtrak-btn-white-2-hover-bg) !important;
  color: var(--revtrak-btn-white-2-hover-text) !important;
}


/* ======================================================
   4. Forms
====================================================== */

/* Only apply the accent border to boxed cards containing a HubSpot form. */
.form.form--boxed:has(.hs-form) {
  border-bottom: var(--revtrak-form-card-bottom-border-width) solid
    var(--revtrak-form-card-bottom-border-color);
}

.hs-form label,
.hs-form .hs-form-field > label {
  color: var(--revtrak-form-label-color);
  font-size: var(--revtrak-form-label-font-size);
  font-weight: var(--revtrak-form-label-font-weight);
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="url"],
.hs-form input[type="search"],
.hs-form textarea,
.hs-form select {
  padding: var(--revtrak-form-field-padding-y) var(--revtrak-form-field-padding-x);
  background-color: var(--revtrak-form-field-bg);
  border: var(--revtrak-form-field-border-width) solid
    var(--revtrak-form-field-border-color);
  border-radius: var(--revtrak-form-field-radius);
  color: var(--revtrak-form-field-color);
  font-size: var(--revtrak-form-field-font-size);
  font-weight: var(--revtrak-form-field-font-weight);
}

.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
  border-color: var(--revtrak-form-focus-border-color);
  outline: none;
}

.hs-form textarea {
  min-height: var(--revtrak-form-textarea-min-height);
}


/* ======================================================
   5. Cards
====================================================== */

.column-card,
.column-card--card,
.column-card--card-2,
.post,
.team-card {
  border-radius: var(--revtrak-radius-card);
}

.column-card--card,
.column-card--card-2 {
  border-bottom-color: var(--revtrak-card-border-accent);
}


/* ======================================================
   6. Images
====================================================== */

.module__picture img,
.column-card__image img {
  border-radius: var(--revtrak-radius-card);
}


/* ======================================================
   7. RevTrak Products Mega Menu
====================================================== */

.site-header .mega-menu--products {
  width: 940px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--revtrak-color-white);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 40px rgba(28, 29, 31, 0.14);
}

.site-header .mega-menu--products .mega-menu__grid,
.site-header .mega-menu--products .products-menu {
  width: 100% !important;
  max-width: none !important;
}

.site-header .mega-menu--products .products-menu {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.site-header .mega-menu--products .products-menu__left h4,
.site-header .mega-menu--products .products-menu__right > h4 {
  margin: 0 0 18px;
  color: #7a7a7a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Solutions column */
.site-header .mega-menu--products .products-menu__left {
  min-width: 0;
  padding: 28px;
  background: #f4f8fb;
  border-right: 1px solid #dce5eb;
}

.site-header .mega-menu--products .products-menu__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .mega-menu--products .products-menu__links li {
  margin: 0;
  padding: 0;
}

.site-header .mega-menu--products .products-menu__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--revtrak-radius-button);
  color: #333333;
  text-decoration: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.site-header .mega-menu--products .products-menu__links a:hover,
.site-header .mega-menu--products .products-menu__links a:focus-visible {
  background: var(--revtrak-color-white);
  color: #006fba;
  text-decoration: none;
}

.site-header .mega-menu--products .products-menu__links a:focus-visible {
  outline: 2px solid #006fba;
  outline-offset: 2px;
}

.site-header .mega-menu--products .products-menu__solution-icon {
  display: block;
  width: 18px;
  max-width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

.site-header .mega-menu--products .products-menu__solution-title {
  display: block;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.site-header .mega-menu--products .products-menu__links a:hover .products-menu__solution-title,
.site-header .mega-menu--products .products-menu__links a:focus-visible .products-menu__solution-title {
  color: var(--revtrak-color-blue);
}

/* Products column */
.site-header .mega-menu--products .products-menu__right {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 28px;
}

.site-header .mega-menu--products .products-menu__cards {
  display: grid !important;
  grid-template-columns: repeat(4, 145px) !important;
  align-items: start;
  justify-content: start;
  gap: 8px !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

.site-header .mega-menu--products .products-menu__card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 145px !important;
  min-width: 145px !important;
  height: 84px;
  min-height: 84px;
  margin: 0 !important;
  padding: 12px;
  overflow: hidden;
  border-radius: 10px;
  text-align: center;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.site-header .mega-menu--products .products-menu__card:hover,
.site-header .mega-menu--products .products-menu__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(28, 29, 31, 0.14);
  text-decoration: none;
}

.site-header .mega-menu--products .products-menu__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.site-header .mega-menu--products .products-menu__card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 0 6px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.site-header .mega-menu--products .products-menu__card-icon {
  display: block;
  width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  object-fit: contain;
}

.site-header .mega-menu--products .products-menu__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.site-header .mega-menu--products .products-menu__card-title {
  display: block;
  width: 100%;
  max-width: 100%;
  color: inherit !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.site-header .mega-menu--products .products-menu__card-description {
  display: none;
}

.site-header .mega-menu--products .products-menu__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #1c1d1f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


/* ======================================================
   8. Blog Resource Sidebar
====================================================== */

.blog-post__resources .column-card {
  display: block;
  padding: 24px;
  border-bottom: 4px solid #ffc72c;
  border-radius: 12px;
  box-shadow: none;
}

.blog-post__resources .column-card__image {
  display: none;
}

.blog-post__resources .column-card__inner,
.blog-post__resources .column-card__content {
  width: 100%;
}

.blog-post__resources .column-card__content {
  padding: 0;
}

.blog-post__resources .column-card__title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.4;
}

.blog-post__resources .column-card__title-link {
  color: inherit;
  text-decoration: none;
}

.blog-post__resources .column-card__cta {
  font-weight: 600;
}


/* ======================================================
   9. Spacing / Layout Polish
====================================================== */

/* Add spacing overrides here after staged QA confirms need. */


/* ======================================================
   10. Page-Specific Exceptions
   Use sparingly. Document every exception.
====================================================== */

/* Example:
.hs-content-id-123456 .some-class {
  property: value;
}
*/
Library
/
Moe Career and RevTrak
/
revtrak-global-redesign-clean.css


/* ======================================================
   RevTrak Global Redesign Overrides
   Staging stylesheet loaded only by child theme templates.

   Purpose:
   - Test global RevTrak visual updates safely
   - Override FWDS base styles without editing parent theme
   - Promote approved rules later into production global CSS
====================================================== */


/* ======================================================
   1. Global Design Tokens
====================================================== */

:root {
  /* Brand colors */
  --revtrak-color-blue: #01adee;
  --revtrak-color-blue-dark: #019dd8;
  --revtrak-color-blue-label: #019dd5;
  --revtrak-color-green: #70bf45;
  --revtrak-color-green-dark: #64ac3e;
  --revtrak-color-yellow: #ffc20e;
  --revtrak-color-yellow-dark: #efb60f;
  --revtrak-color-gray: #959595;
  --revtrak-color-gray-dark: #777777;
  --revtrak-color-white: #ffffff;
  --revtrak-color-black: #000000;

  /* Global text */
  --revtrak-color-text: inherit;

  /* Radius */
  --revtrak-radius-button: 8px;
  --revtrak-radius-card: 16px;

  /* Card accents */
  --revtrak-card-border-accent: var(--revtrak-color-blue);

  /* Heading colors */
  --revtrak-h1-color: var(--revtrak-color-blue);
  --revtrak-h2-color: var(--revtrak-color-black);
  --revtrak-h3-color: var(--revtrak-color-black);
  --revtrak-h4-color: #333333;
  --revtrak-h5-color: #666666;

  /* Heading weights */
  --revtrak-h1-weight: 700;
  --revtrak-h2-weight: 700;
  --revtrak-h3-weight: 600;
  --revtrak-h4-weight: 600;
  --revtrak-h5-weight: 500;

  /* Heading sizes */
  --revtrak-h1-size: 56px;
  --revtrak-h2-size: 42px;
  --revtrak-h3-size: 32px;
  --revtrak-h4-size: 24px;
  --revtrak-h5-size: 20px;

  /* Heading line heights */
  --revtrak-h1-line-height: 1.15;
  --revtrak-h2-line-height: 1.2;
  --revtrak-h3-line-height: 1.25;
  --revtrak-h4-line-height: 1.3;
  --revtrak-h5-line-height: 1.35;

  /* Button base */
  --revtrak-btn-font-weight: 700;
  --revtrak-btn-border-width: 2px;

  /* Button sizes */
  --revtrak-btn-medium-font-size: 16px;
  --revtrak-btn-medium-padding-y: 12px;
  --revtrak-btn-medium-padding-x: 24px;
  --revtrak-btn-large-font-size: 18px;
  --revtrak-btn-large-padding-y: 16px;
  --revtrak-btn-large-padding-x: 32px;

  /* Primary button = Blue */
  --revtrak-btn-primary-bg: var(--revtrak-color-blue);
  --revtrak-btn-primary-text: var(--revtrak-color-white);
  --revtrak-btn-primary-hover-bg: var(--revtrak-color-blue-dark);
  --revtrak-btn-primary-hover-text: var(--revtrak-color-white);

  /* Secondary button = Green */
  --revtrak-btn-secondary-bg: var(--revtrak-color-green);
  --revtrak-btn-secondary-text: var(--revtrak-color-white);
  --revtrak-btn-secondary-hover-bg: var(--revtrak-color-green-dark);
  --revtrak-btn-secondary-hover-text: var(--revtrak-color-white);

  /* White button */
  --revtrak-btn-white-bg: var(--revtrak-color-white);
  --revtrak-btn-white-text: var(--revtrak-color-blue);
  --revtrak-btn-white-hover-bg: var(--revtrak-color-blue);
  --revtrak-btn-white-hover-text: var(--revtrak-color-white);

  /* White 2 button = Yellow */
  --revtrak-btn-white-2-bg: var(--revtrak-color-yellow);
  --revtrak-btn-white-2-text: var(--revtrak-color-white);
  --revtrak-btn-white-2-hover-bg: var(--revtrak-color-yellow-dark);
  --revtrak-btn-white-2-hover-text: var(--revtrak-color-white);

  /* Blank button = Gray */
  --revtrak-btn-blank-bg: var(--revtrak-color-gray);
  --revtrak-btn-blank-text: var(--revtrak-color-white);
  --revtrak-btn-blank-hover-bg: var(--revtrak-color-gray-dark);
  --revtrak-btn-blank-hover-text: var(--revtrak-color-white);

  /* Form card */
  --revtrak-form-card-bottom-border-color: var(--revtrak-color-green);
  --revtrak-form-card-bottom-border-width: 8px;

  /* Form labels */
  --revtrak-form-label-color: var(--revtrak-color-blue-label);
  --revtrak-form-label-font-size: 14px;
  --revtrak-form-label-font-weight: 700;

  /* Form fields */
  --revtrak-form-field-bg: var(--revtrak-color-white);
  --revtrak-form-field-color: var(--revtrak-color-black);
  --revtrak-form-field-font-size: 16px;
  --revtrak-form-field-font-weight: 400;
  --revtrak-form-field-border-color: #bdbdbd;
  --revtrak-form-field-border-width: 1px;
  --revtrak-form-field-radius: 6px;
  --revtrak-form-field-padding-y: 10px;
  --revtrak-form-field-padding-x: 12px;
  --revtrak-form-focus-border-color: var(--revtrak-color-blue-label);
  --revtrak-form-textarea-min-height: 120px;
}


/* ======================================================
   2. Typography
====================================================== */

body {
  color: var(--revtrak-color-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 {
  color: var(--revtrak-h1-color);
  font-size: var(--revtrak-h1-size);
  font-weight: var(--revtrak-h1-weight);
  line-height: var(--revtrak-h1-line-height);
}

h2 {
  color: var(--revtrak-h2-color);
  font-size: var(--revtrak-h2-size);
  font-weight: var(--revtrak-h2-weight);
  line-height: var(--revtrak-h2-line-height);
}

h3 {
  color: var(--revtrak-h3-color);
  font-size: var(--revtrak-h3-size);
  font-weight: var(--revtrak-h3-weight);
  line-height: var(--revtrak-h3-line-height);
}

h4 {
  color: var(--revtrak-h4-color);
  font-size: var(--revtrak-h4-size);
  font-weight: var(--revtrak-h4-weight);
  line-height: var(--revtrak-h4-line-height);
}

h5 {
  color: var(--revtrak-h5-color);
  font-size: var(--revtrak-h5-size);
  font-weight: var(--revtrak-h5-weight);
  line-height: var(--revtrak-h5-line-height);
}

p,
li {
  line-height: inherit;
}


/* ======================================================
   3. Buttons / CTAs

   Mapping:
   Primary = Blue
   Secondary = Green
   White = White
   White 2 = Yellow
   Blank = Gray
====================================================== */

.cta-btn,
.hs-button,
input[type="submit"] {
  border-width: var(--revtrak-btn-border-width);
  border-style: solid;
  border-radius: var(--revtrak-radius-button);
  font-weight: var(--revtrak-btn-font-weight);
}

.cta-btn--medium,
.cta-btn--regular {
  padding: var(--revtrak-btn-medium-padding-y) var(--revtrak-btn-medium-padding-x);
  font-size: var(--revtrak-btn-medium-font-size);
}

.cta-btn--large {
  padding: var(--revtrak-btn-large-padding-y) var(--revtrak-btn-large-padding-x);
  font-size: var(--revtrak-btn-large-font-size);
}

/* Solid: Primary = Blue */
.cta-btn.cta-btn--primary,
.cta-btn.cta-btn--primary-fill {
  background-color: var(--revtrak-btn-primary-bg) !important;
  border-color: var(--revtrak-btn-primary-bg) !important;
  color: var(--revtrak-btn-primary-text) !important;
}

.cta-btn.cta-btn--primary:hover,
.cta-btn.cta-btn--primary:focus,
.cta-btn.cta-btn--primary:active,
.cta-btn.cta-btn--primary-fill:hover,
.cta-btn.cta-btn--primary-fill:focus,
.cta-btn.cta-btn--primary-fill:active,
a:hover .cta-btn.cta-btn--primary,
a:hover .cta-btn.cta-btn--primary-fill {
  background-color: var(--revtrak-btn-primary-hover-bg) !important;
  border-color: var(--revtrak-btn-primary-hover-bg) !important;
  color: var(--revtrak-btn-primary-hover-text) !important;
}

/* Solid: Secondary = Green */
.cta-btn.cta-btn--secondary,
.cta-btn.cta-btn--secondary-fill {
  background-color: var(--revtrak-btn-secondary-bg) !important;
  border-color: var(--revtrak-btn-secondary-bg) !important;
  color: var(--revtrak-btn-secondary-text) !important;
}

.cta-btn.cta-btn--secondary:hover,
.cta-btn.cta-btn--secondary:focus,
.cta-btn.cta-btn--secondary:active,
.cta-btn.cta-btn--secondary-fill:hover,
.cta-btn.cta-btn--secondary-fill:focus,
.cta-btn.cta-btn--secondary-fill:active,
a:hover .cta-btn.cta-btn--secondary,
a:hover .cta-btn.cta-btn--secondary-fill {
  background-color: var(--revtrak-btn-secondary-hover-bg) !important;
  border-color: var(--revtrak-btn-secondary-hover-bg) !important;
  color: var(--revtrak-btn-secondary-hover-text) !important;
}

/* Solid: White */
.cta-btn.cta-btn--white,
.cta-btn.cta-btn--white-fill {
  background-color: var(--revtrak-btn-white-bg) !important;
  border-color: var(--revtrak-btn-white-bg) !important;
  color: var(--revtrak-btn-white-text) !important;
}

.cta-btn.cta-btn--white:hover,
.cta-btn.cta-btn--white:focus,
.cta-btn.cta-btn--white:active,
.cta-btn.cta-btn--white-fill:hover,
.cta-btn.cta-btn--white-fill:focus,
.cta-btn.cta-btn--white-fill:active,
a:hover .cta-btn.cta-btn--white,
a:hover .cta-btn.cta-btn--white-fill {
  background-color: var(--revtrak-btn-white-hover-bg) !important;
  border-color: var(--revtrak-btn-white-hover-bg) !important;
  color: var(--revtrak-btn-white-hover-text) !important;
}

/* Solid: White 2 = Yellow */
.cta-btn.cta-btn--white-2 {
  background-color: var(--revtrak-btn-white-2-bg) !important;
  border-color: var(--revtrak-btn-white-2-bg) !important;
  color: var(--revtrak-btn-white-2-text) !important;
}

.cta-btn.cta-btn--white-2:hover,
.cta-btn.cta-btn--white-2:focus,
.cta-btn.cta-btn--white-2:active,
a:hover .cta-btn.cta-btn--white-2 {
  background-color: var(--revtrak-btn-white-2-hover-bg) !important;
  border-color: var(--revtrak-btn-white-2-hover-bg) !important;
  color: var(--revtrak-btn-white-2-hover-text) !important;
}

/* Solid: Blank = Gray */
.cta-btn.cta-btn--blank {
  background-color: var(--revtrak-btn-blank-bg) !important;
  border-color: var(--revtrak-btn-blank-bg) !important;
  color: var(--revtrak-btn-blank-text) !important;
}

.cta-btn.cta-btn--blank:hover,
.cta-btn.cta-btn--blank:focus,
.cta-btn.cta-btn--blank:active,
a:hover .cta-btn.cta-btn--blank {
  background-color: var(--revtrak-btn-blank-hover-bg) !important;
  border-color: var(--revtrak-btn-blank-hover-bg) !important;
  color: var(--revtrak-btn-blank-hover-text) !important;
}

/* Outline: Primary = Blue */
.cta-btn.cta-btn--primary-outline {
  background-color: transparent !important;
  border-color: var(--revtrak-btn-primary-bg) !important;
  color: var(--revtrak-btn-primary-bg) !important;
}

.cta-btn.cta-btn--primary-outline:hover,
.cta-btn.cta-btn--primary-outline:focus,
.cta-btn.cta-btn--primary-outline:active,
a:hover .cta-btn.cta-btn--primary-outline {
  background-color: var(--revtrak-btn-primary-hover-bg) !important;
  border-color: var(--revtrak-btn-primary-hover-bg) !important;
  color: var(--revtrak-btn-primary-hover-text) !important;
}

/* Outline: Secondary = Green */
.cta-btn.cta-btn--secondary-outline {
  background-color: transparent !important;
  border-color: var(--revtrak-btn-secondary-bg) !important;
  color: var(--revtrak-btn-secondary-bg) !important;
}

.cta-btn.cta-btn--secondary-outline:hover,
.cta-btn.cta-btn--secondary-outline:focus,
.cta-btn.cta-btn--secondary-outline:active,
a:hover .cta-btn.cta-btn--secondary-outline {
  background-color: var(--revtrak-btn-secondary-hover-bg) !important;
  border-color: var(--revtrak-btn-secondary-hover-bg) !important;
  color: var(--revtrak-btn-secondary-hover-text) !important;
}

/* Outline: White = Yellow */
.cta-btn.cta-btn--white-outline {
  background-color: transparent !important;
  border-color: var(--revtrak-btn-white-2-bg) !important;
  color: var(--revtrak-btn-white-2-bg) !important;
}

.cta-btn.cta-btn--white-outline:hover,
.cta-btn.cta-btn--white-outline:focus,
.cta-btn.cta-btn--white-outline:active,
a:hover .cta-btn.cta-btn--white-outline {
  background-color: var(--revtrak-btn-white-2-hover-bg) !important;
  border-color: var(--revtrak-btn-white-2-hover-bg) !important;
  color: var(--revtrak-btn-white-2-hover-text) !important;
}


/* ======================================================
   4. Forms
====================================================== */

/* Only apply the accent border to boxed cards containing a HubSpot form. */
.form.form--boxed:has(.hs-form) {
  border-bottom: var(--revtrak-form-card-bottom-border-width) solid
    var(--revtrak-form-card-bottom-border-color);
}

.hs-form label,
.hs-form .hs-form-field > label {
  color: var(--revtrak-form-label-color);
  font-size: var(--revtrak-form-label-font-size);
  font-weight: var(--revtrak-form-label-font-weight);
}

.hs-form input[type="text"],
.hs-form input[type="email"],
.hs-form input[type="tel"],
.hs-form input[type="number"],
.hs-form input[type="url"],
.hs-form input[type="search"],
.hs-form textarea,
.hs-form select {
  padding: var(--revtrak-form-field-padding-y) var(--revtrak-form-field-padding-x);
  background-color: var(--revtrak-form-field-bg);
  border: var(--revtrak-form-field-border-width) solid
    var(--revtrak-form-field-border-color);
  border-radius: var(--revtrak-form-field-radius);
  color: var(--revtrak-form-field-color);
  font-size: var(--revtrak-form-field-font-size);
  font-weight: var(--revtrak-form-field-font-weight);
}

.hs-form input:focus,
.hs-form textarea:focus,
.hs-form select:focus {
  border-color: var(--revtrak-form-focus-border-color);
  outline: none;
}

.hs-form textarea {
  min-height: var(--revtrak-form-textarea-min-height);
}


/* ======================================================
   5. Cards
====================================================== */

.column-card,
.column-card--card,
.column-card--card-2,
.post,
.team-card {
  border-radius: var(--revtrak-radius-card);
}

.column-card--card,
.column-card--card-2 {
  border-bottom-color: var(--revtrak-card-border-accent);
}


/* ======================================================
   6. Images
====================================================== */

.module__picture img,
.column-card__image img {
  border-radius: var(--revtrak-radius-card);
}


/* ======================================================
   7. RevTrak Products Mega Menu
====================================================== */

.site-header .mega-menu--products {
  width: 940px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--revtrak-color-white);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 16px 40px rgba(28, 29, 31, 0.14);
}

.site-header .mega-menu--products .mega-menu__grid,
.site-header .mega-menu--products .products-menu {
  width: 100% !important;
  max-width: none !important;
}

.site-header .mega-menu--products .products-menu {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.site-header .mega-menu--products .products-menu__left h4,
.site-header .mega-menu--products .products-menu__right > h4 {
  margin: 0 0 18px;
  color: #7a7a7a;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Solutions column */
.site-header .mega-menu--products .products-menu__left {
  min-width: 0;
  padding: 28px;
  background: #f4f8fb;
  border-right: 1px solid #dce5eb;
}

.site-header .mega-menu--products .products-menu__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header .mega-menu--products .products-menu__links li {
  margin: 0;
  padding: 0;
}

.site-header .mega-menu--products .products-menu__links a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--revtrak-radius-button);
  color: #333333;
  text-decoration: none;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.site-header .mega-menu--products .products-menu__links a:hover,
.site-header .mega-menu--products .products-menu__links a:focus-visible {
  background: var(--revtrak-color-white);
  color: #006fba;
  text-decoration: none;
}

.site-header .mega-menu--products .products-menu__links a:focus-visible {
  outline: 2px solid #006fba;
  outline-offset: 2px;
}

.site-header .mega-menu--products .products-menu__solution-icon {
  display: block;
  width: 18px;
  max-width: 18px;
  height: 18px;
  flex: 0 0 18px;
  object-fit: contain;
}

.site-header .mega-menu--products .products-menu__solution-title {
  display: block;
  color: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.site-header .mega-menu--products .products-menu__links a:hover .products-menu__solution-title,
.site-header .mega-menu--products .products-menu__links a:focus-visible .products-menu__solution-title {
  color: var(--revtrak-color-blue);
}

/* Products column */
.site-header .mega-menu--products .products-menu__right {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 28px;
}

.site-header .mega-menu--products .products-menu__cards {
  display: grid !important;
  grid-template-columns: repeat(4, 145px) !important;
  align-items: start;
  justify-content: start;
  gap: 8px !important;
  width: 100% !important;
  margin: 0;
  padding: 0;
}

.site-header .mega-menu--products .products-menu__card {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 145px !important;
  min-width: 145px !important;
  height: 84px;
  min-height: 84px;
  margin: 0 !important;
  padding: 12px;
  overflow: hidden;
  border-radius: 10px;
  text-align: center;
  text-decoration: none !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease;
}

.site-header .mega-menu--products .products-menu__card:hover,
.site-header .mega-menu--products .products-menu__card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(28, 29, 31, 0.14);
  text-decoration: none;
}

.site-header .mega-menu--products .products-menu__card:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.site-header .mega-menu--products .products-menu__card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 0 6px;
  border-radius: 6px;
  flex: 0 0 auto;
}

.site-header .mega-menu--products .products-menu__card-icon {
  display: block;
  width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  object-fit: contain;
}

.site-header .mega-menu--products .products-menu__card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.site-header .mega-menu--products .products-menu__card-title {
  display: block;
  width: 100%;
  max-width: 100%;
  color: inherit !important;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.site-header .mega-menu--products .products-menu__card-description {
  display: none;
}

.site-header .mega-menu--products .products-menu__badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #1c1d1f;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}


/* ======================================================
   8. Blog Resource Sidebar
====================================================== */

.blog-post__resources .column-card {
  display: block;
  padding: 24px;
  border-bottom: 4px solid #ffc72c;
  border-radius: 12px;
  box-shadow: none;
}

.blog-post__resources .column-card__image {
  display: none;
}

.blog-post__resources .column-card__inner,
.blog-post__resources .column-card__content {
  width: 100%;
}

.blog-post__resources .column-card__content {
  padding: 0;
}

.blog-post__resources .column-card__title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  line-height: 1.4;
}

.blog-post__resources .column-card__title-link {
  color: inherit;
  text-decoration: none;
}

.blog-post__resources .column-card__cta {
  font-weight: 600;
}


/* ======================================================
   9. Spacing / Layout Polish
====================================================== */

/* Add spacing overrides here after staged QA confirms need. */


/* ======================================================
   10. Page-Specific Exceptions
   Use sparingly. Document every exception.
====================================================== */

/* Example:
.hs-content-id-123456 .some-class {
  property: value;
}
*/