/* Tools
Any animations, or functions used throughout the project.
*/
:root {
    --bz-primary: #3834A5;
    --bz-secondary: #B32BD9;
    --bz-tertiary: #EF521B;
    --bz-white: #ffffff;
    --bz-black: #000000;
    --bz-light: #fafafa;
    --bz-dark: #222222;
    --bz-dgrey: #666666;
    --bz-mgrey: #CCCCCC;
    --bz-lgrey: #fafafa;

    --bz-primary-rgb: 56, 52, 165;
    --bz-secondary-rgb: 179, 43, 217;
    --bz-tertiary-rgb: 239, 82, 27;
    --bz-white-rgb: 255,255,255;
    --bz-black-rgb: 0,0,0;
    --bz-light-rgb: 250, 250, 250;
    --bz-dark-rgb: 34, 34, 34; 
    --bz-dgrey-rgb: 102, 102, 102;
    --bz-mgrey-rgb: 204, 204, 204;
    --bz-lgrey-rgb: 250, 250, 250;
  
    --bz-primary-gradient: linear-gradient(to right, rgba(20, 104, 161, 1.0), rgba(0, 176, 244, 1.0));
    --bz-secondary-gradient: linear-gradient(to right, rgba(0, 176, 244, 1.0), rgba(179, 43, 217, 1.0));
    --bz-tertiary-gradient: linear-gradient(to bottom, rgba(179, 43, 217, 1.0), rgba(255, 149, 35, 1.0));

    --bz-body-bg: #fff;
    --bz-body-text-align: left;
    --bz-font-primary: Lexend, sans-serif;
    --bz-font-secondary: Lexend, sans-serif;
    --bz-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bz-body-font-family: var(--bz-font-primary);
    --bz-body-color: #222222;
    --bz-body-font-size: 16px;
    --bz-body-font-weight: regular;
    --bz-body-line-height: 1.5;
    --bz-heading-font-family: var(--bz-font-secondary);
    --bz-link-color: #3834A5;
    --bz-link-hover-color: #B32BD9;

    --bz-gutter-x: 32px;
    --bz-gutter-y: 32px;
    --bz-container: 1140px;
    --bz-container-wide: 1240px;
    --bz-container-narrow: 980px;
    --bz-container-xnarrow: 768px;
            
    --bz-spacing: 64px;
    --bz-spacing-sm-1: 1rem;
    --bz-spacing-sm-2: 32px;
    --bz-spacing-sm-3: 64px;
    --bz-spacing-sm-4: 96px;
    --bz-spacing-sm-5: 128px;
    --bz-spacing-md-1: 1rem;
    --bz-spacing-md-2: 32px;
    --bz-spacing-md-3: 64px;
    --bz-spacing-md-4: 96px;
    --bz-spacing-md-5: 128px;
    --bz-spacing-lg-1: 1rem;
    --bz-spacing-lg-2: 32px;
    --bz-spacing-lg-3: 64px;
    --bz-spacing-lg-4: 96px;
    --bz-spacing-lg-5: 128px;
}

.container-unarrow {
  max-width: 600px !important;
}

.lp-footer__container {
  margin-top: 0 !important;
}

.btn--link {
  padding-right: 0;
  padding-left: 0;
  background: none;
  color: var(--bz-link-color);
  border-color: transparent !important;
}

.btn--link:hover,
.btn--link:focus {
  background: none;
  color: var(--bz-link-hover-color);
  border-color: transparent !important;
}

.btn--gradient {
  background-image: linear-gradient(to right, var(--bz-primary) 0%, #B32BD9 100%);
  background-position: center;
  color: #fff;
  border: 0px solid transparent !important;
  transition: all 0.25s ease-in-out;
}

.btn--gradient:hover,
.btn--gradient:focus {
  background-size: 250%;
  color: #fff;
}

.btn--ghost {
  background-color: #fff;
  color: #666;
  border: 1px solid currentColor !important;
}

.btn--ghost:hover,
.btn--gshot:focus {
  background-color: #ddd;
  color: #333;
  border: 1px solid currentColor !important;
}

.container:has(.ratio-grid) {
  container-name: ratio-container;
  container-type: inline-size;
}

.ratio-grid {
  display: flex;
  flex-direction: column;
  gap: var(--bz-gutter-x) var(--bz-gutter-y);
}

.ratio-grid__item {
  flex: var(--col-width);
}

@container ratio-container (min-width: 690px) {
  .ratio-grid {
    flex-direction: row;
  }
}

/* Gradient Text */

.gradient-text {
  font-weight: bold;
  background: var(--bz-secondary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.section-theme--dark:not(:has(.light)) .gradient-text,
.icon-col-theme--dark:not(:has(.light))  .gradient-text {
  background: none;
  color: #fff;
  -webkit-background-clip: unset;
  -webkit-text-fill-color: unset;
  background-clip: unset;
  text-fill-color: unset;
}

.section-theme--dark:not(:has(.light))  .gradient-text *,
.icon-col-theme--dark:not(:has(.light))  .gradient-text * {
  fill: #fff;
}

.link-text {
  color: inherit;
}

/* Wells */

.well {
  padding: var(--bz-spacing-sm-2);
  border-radius: 25px;
}

.well--primary {
  background-color: var(--bz-primary);
  color: #fff;
}

.well--secondary {
  background-color: var(--bz-secondary);
  color: #fff;
}

.well--tertiary {
  background-color: var(--bz-tertiary);
  color: #fff;
}

.well--primary-gradient {
  background-image: var(--bz-primary-gradient);
  color: #fff;
}

.well--secondary-gradient {
  background-image: var(--bz-secondary-gradient);
  color: #fff;
}

.well--tertiary-gradient {
  background-image: var(--bz-tertoary-gradient);
  color: #fff;
}

.well--lgrey {
  background-color: var(--bz-lgrey);
}

.well--white {
  background-color: #fff;
  color: var(--bz-dgrey);
}

.well--blue {
  background-color: #0F77EA;
  color: #fff;
}

.well--lblue {
  background-color: #00B0F4;
  color: #fff;
}

.well--primary *,
.well--secondary *,
.well--tertiary *,
.well--primary-gradient *,
.well--secondary-gradient *,
.well--tertiary-gradient * {
  color: #fff;
}

.well--primary input[type=submit],
.well--secondary input[type=submit],
.well--tertiary input[type=submit],
.well--primary-gradient input[type=submit],
.well--secondary-gradient input[type=submit],
.well--tertiary-gradient input[type=submit] {
  color: #333;
  background-color: #fff;
  border-color: #fff;
}

.well--secondary a:hover {
  color: #fff;
}

/* 2 Col + Image */

.imgCol img {
  border-radius: 21px;
}

.container-full {
  overflow: hidden;
}

.container-full .contentCol * {
  max-width: 100%;
  width: 31rem;
  display: block;
}

.container-full .contentCol {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(2rem + 3vw) !important;
}

.container-full .two-col--img__img {
  border-radius: 0;
}

.section--two-col--img-content__wrapper .container-full {
  padding: 0;
}

.container-full .imgCol {
  padding: 0;
}

/* Checklist */

.checklist ul {
  padding: 0;
  list-style: none;
}

.checklist li {
  padding: 0.33em 0 0.33em 3em;
  position: relative;
}

.checklist li::before {
  content: '';
  background: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15 29.9999C11.1571 29.9999 7.31413 28.5372 4.38828 25.6117C-1.46276 19.7603 -1.46276 10.2396 4.38828 4.38822C10.2396 -1.46265 19.7603 -1.46282 25.6117 4.38822C31.4628 10.2396 31.4628 19.7603 25.6117 25.6117C22.6862 28.5372 18.843 29.9999 15 29.9999Z" fill="url(%23paint0_linear_309_1017)"/><path d="M11.4625 20.8958C12.1144 21.5473 13.1703 21.5472 13.822 20.8958L20.8959 13.8221C21.5475 13.1705 21.5475 12.1141 20.8959 11.4623C20.2444 10.8111 19.1882 10.811 18.5362 11.4623L12.6421 17.3564L11.464 16.1781C10.8123 15.5268 9.75612 15.5268 9.10424 16.1781C8.4527 16.8297 8.4527 17.8862 9.10424 18.5379L11.4625 20.8958Z" fill="white"/><defs><linearGradient id="paint0_linear_309_1017" x1="0" y1="29.9999" x2="32.3447" y2="27.2131" gradientUnits="userSpaceOnUse"><stop stop-color="%2300B0F4"/><stop offset="1" stop-color="%23B32BD9"/></linearGradient></defs></svg>');
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  width: 2em;
  height: 2em;
  position: absolute;
  top: 0.44em;
  left: 0;
}

.rounded {
  border-radius: 21px;
}

/* ── Zerigo Skin Health Hub — Custom Styles — Added March 2026 ── */

:root {
  --zh-primary:    #3834a5;
  --zh-secondary:  #00b0f4;
  --zh-accent1:    #0f77ea;
  --zh-accent2:    #b32bd9;
  --zh-accent3:    #ef521b;
  --zh-orange:     #ff9523;
  --zh-gray-light: #f5f5f5;
  --zh-gray-mid:   #cccccc;
  --zh-text-dark:  #333333;
  --zh-text-mid:   #666666;
  --zh-white:      #ffffff;
}

.zh-hub { font-family: Arial, sans-serif; color: var(--zh-text-dark); }
.zh-hub p { font-size: 1rem; line-height: 1.7; }

.zh-btn {
  display: inline-block; padding: 13px 30px; border-radius: 50px;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  transition: all 0.2s; cursor: pointer;
}
.zh-btn-solid  { background: var(--zh-primary); color: #fff !important; }
.zh-btn-solid:hover  { background: var(--zh-accent1); }
.zh-btn-outline { background: transparent; color: var(--zh-primary) !important; border: 2px solid var(--zh-primary); }
.zh-btn-outline:hover { background: var(--zh-primary); color: #fff !important; }

.zh-card {
  background: #fff; border-radius: 10px; padding: 26px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07); transition: box-shadow 0.2s;
}
.zh-card:hover { box-shadow: 0 6px 20px rgba(56,52,165,0.14); }

.zh-stat { background:#fff; border-top: 4px solid var(--zh-secondary); border-radius: 8px; padding: 22px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.07); }
.zh-stat-num { font-size: 2.6rem; font-weight: 700; color: var(--zh-primary); }
.zh-stat-lbl { font-size: 0.88rem; color: var(--zh-text-mid); margin-top: 6px; }

.zh-quote { border-left: 5px solid var(--zh-secondary); background: #f0f8ff; padding: 18px 22px; border-radius: 0 8px 8px 0; font-style: italic; font-size: 1.