/* Shared type scale for the original page-builder pages (Home, How It Works, About Us),
   matching the newer pages (Offer, Contact, Privacy, Terms):
   Helvetica, 16px body text in slate gray, bold navy headings, bold buttons. */
.fl-builder-content {
  --jh-navy: #1c2c4c;
  --jh-text: #4a5568;
  font-family: Helvetica, Verdana, Arial, sans-serif;
}

/* Body text */
.fl-builder-content .fl-rich-text p,
.fl-builder-content .fl-rich-text li,
.fl-builder-content .fl-callout-text p,
.fl-builder-content .fl-callout-text,
.fl-builder-content .fl-html p {
  font-size: 16px;
  line-height: 1.7;
}
.fl-builder-content .fl-rich-text p,
.fl-builder-content .fl-callout-text p,
.fl-builder-content .fl-html p {
  margin-bottom: 14px;
}

/* Headings: bold; navy unless the section sets its own color (light text on photos and dark bands) */
.fl-builder-content h1,
.fl-builder-content h2,
.fl-builder-content h3,
.fl-builder-content h4 {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* Buttons: one size and weight, like the Offer and Contact pages */
.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button span {
  font-size: 18px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Colors, only on white sections (rows with a photo or dark background keep their light text) */
.fl-builder-content .fl-row-bg-none h1,
.fl-builder-content .fl-row-bg-none h2,
.fl-builder-content .fl-row-bg-none h3,
.fl-builder-content .fl-row-bg-none h4,
.fl-builder-content .fl-row-bg-none .reil__row h3,
#about-core-value h3 {
  color: var(--jh-navy);
  font-weight: 700;
}
.fl-builder-content .fl-row-bg-none .fl-rich-text p,
.fl-builder-content .fl-row-bg-none .fl-callout-text,
.fl-builder-content .fl-row-bg-none .fl-callout-text p,
.fl-builder-content .fl-row-bg-none .fl-html p {
  color: var(--jh-text);
}
/* Old inline grays and navy body text from the page builder -> the shared body color */
.fl-builder-content .fl-row-bg-none p span[style*="#808080"],
.fl-builder-content .fl-row-bg-none p span[style*="#1d2e50"],
.fl-builder-content .fl-row-bg-none p span[style*="#424957"] {
  color: var(--jh-text) !important;
}

/* Call-to-action hover: a navy fill sweeps across from left to right, like a loading bar */
.fl-builder-content a.fl-button {
  background-image: linear-gradient(#1c2c4c, #1c2c4c) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  transition: background-size 0.45s ease-out, color 0.2s !important;
}
.fl-builder-content a.fl-button:hover,
.fl-builder-content a.fl-button:focus-visible {
  background-size: 100% 100% !important;
}
@media (prefers-reduced-motion: reduce) {
  .fl-builder-content a.fl-button { transition: none !important; }
}
/* Keep each button's resting color on hover/focus so the sweep (not an instant color swap) shows */
.fl-builder-content a.fl-button:hover,
.fl-builder-content a.fl-button:focus { background-color: #428bca !important; }
.fl-builder-content .fl-node-54f77186243ec a.fl-button:hover,
.fl-builder-content .fl-node-54f77186243ec a.fl-button:focus { background-color: #267bbe !important; }
/* How It Works button has a blue gradient: sweep the navy over it instead of replacing it */
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button {
  background-image: linear-gradient(#1c2c4c, #1c2c4c), linear-gradient(#469add 0%, #287cbf 100%) !important;
  background-size: 0% 100%, 100% 100% !important;
}
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button:hover,
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button:focus-visible {
  background-size: 100% 100%, 100% 100% !important;
}
/* The About Us intro box had its own hover color rule (#about-header-box a:hover); keep the resting blue so the sweep shows */
#about-header-box a.fl-button:hover,
#about-header-box a.fl-button:focus { background-color: #428bca !important; }
/* No outline around the buttons: the border blends in and the sweep covers it too */
.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:hover,
.fl-builder-content a.fl-button:focus,
.fl-builder-content a.fl-button:active {
  border-color: transparent !important;
  background-origin: border-box !important;
  background-clip: border-box !important;
}
/* Make the fill slightly taller than the button so no sliver of the base color shows at the edges */
.fl-builder-content a.fl-button { background-size: 0% calc(100% + 4px) !important; }
.fl-builder-content a.fl-button:hover,
.fl-builder-content a.fl-button:focus-visible { background-size: 100% calc(100% + 4px) !important; }
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button { background-size: 0% calc(100% + 4px), 100% 100% !important; }
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button:hover,
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button:focus-visible { background-size: 100% calc(100% + 4px), 100% 100% !important; }

/* Home hero on phones: the headline ran edge to edge. Give it side margins and a phone-sized font. */
@media (max-width: 767px) {
  .fl-node-5575d4f34eddc h1,
  .fl-node-5575d4f34eddc p { padding-left: 20px !important; padding-right: 20px !important; }
  .fl-node-5575d4f34eddc h1,
  .fl-node-5575d4f34eddc h1 span { font-size: 30px !important; line-height: 1.2 !important; }
  .fl-node-5575d4f34eddc p,
  .fl-node-5575d4f34eddc p span { font-size: 19px !important; line-height: 1.4 !important; }
}

/* All call-to-action buttons use the logo blue (#257ABE); the navy sweep fills over it on hover */
.fl-builder-content a.fl-button,
.fl-builder-content a.fl-button:visited,
.fl-builder-content a.fl-button:hover,
.fl-builder-content a.fl-button:focus,
.fl-builder-content a.fl-button:active,
#about-header-box a.fl-button:hover,
#about-header-box a.fl-button:focus { background-color: #257abe !important; }
/* How It Works button: drop its old gradient so it matches the others */
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button { background-image: linear-gradient(#1c2c4c, #1c2c4c) !important; background-size: 0% calc(100% + 4px) !important; }
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button:hover,
.fl-builder-content .fl-node-5ecb1428ae553 a.fl-button:focus-visible { background-size: 100% calc(100% + 4px) !important; }

/* Home hero photo: the faces sit in the top third, so crop from there instead of the middle
   (centered, wide screens cut the man's face off under the menu) */
.fl-node-5575d4f34eddc > .fl-row-content-wrap { background-position: center 18%; }