/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

 /*
 * Design tokens — two tiers:
 *   Tier 1 (this :root) = global semantic tokens; the surface a theme/customer overrides.
 *   Tier 2 = component tokens in blocks/{name}/{name}-tokens.css, which reference these.
 *
 * Migration marker — a trailing  @boilerplate  comment marks a line that is still untouched
 *   boilerplate, NOT yet reviewed against the customer. EVERY rule line across the boilerplate's
 *   CSS carries it (declarations and selector/at-rule opening lines alike). It is TRANSIENT
 *   scaffolding, not permanent metadata:
 *     - As the customer's styling is applied, each line is either rewritten or consciously kept,
 *       and EITHER WAY its marker is DELETED. Never "flip" it — just remove it.
 *     - When no markers remain, migration is complete and this is plain CSS again.
 *   A Claude Code hook (.claude/hooks/check-boilerplate-markers.mjs) flags any line you edit but
 *   leave marked — but only in a customer migration; it stays silent in the aemdemos/ise-boilerplate
 *   source repo, where keeping markers on edits is correct. Audit remaining work (anchored on the
 *   marker token, so prose is not counted):
 *     grep -rn  '/\* @boilerplate' styles/ blocks/   (every untouched line)
 *     grep -rc  '/\* @boilerplate' styles/ blocks/   (remaining count per file)
 */
:root { /* @libs */
  /* vyepti.com brand colors */
  --brand-navy: #0b2c58;
  --brand-gray: #d4d5d5;
  --brand-green: #78a22f;
  --brand-white: #fff;
  
  /* libs brand colors */
  --brand-primary: var(--brand-navy);
  --brand-primary-light: var(--brand-gray);
  --brand-primary-dark: var(--brand-green);
  --brand-secondary: var(--brand-green);
  --brand-secondary-dark: var(--brand-gray);
  --accent-bg: var(--brand-gray);
  --card-bg-light: var(--brand-white);

  /* semantic colors */
  --background-color: #fff; /* @libs */
  --light-color: #e1f0f6; /* @libs */
  --dark-color: #046183; /* @libs */
  --text-color: #222;
  --text-color-light: #666; /* @libs */
  --link-color: #337ab7;
  --link-hover-color: #23527c; /* @libs */
  --overlay-background-color: #e1f0f6; /* @libs */
  --error-color: #c02c57; /* @boilerplate */
  --section-divider-width: 1px; /* @libs */
  --section-divider-color: var(--link-hover-color); /* @libs */
  --section-padding: 24px;
  --flex-group-gap: 24px;
  --div-width-margin: auto;
  --div-width-align-items: flex-start;
  
  /* fonts */
  --body-font-family: 'Avenir LT W01_55 Roman', avenir-fallback, arial, sans-serif;
  --heading-font-family: 'Avenir LT W01_55 Roman', avenir-fallback, arial, sans-serif;
  --body-line-height: 1.4; /* @libs */
  --heading-font-weight: 800; /* @libs */
  --heading-line-height: 1.2; /* @libs */
  --font-weight-bold: 700; /* @libs */
  --block-margin-top: 0.8em; /* @libs */
  --block-margin-bottom: 0.25em; /* @libs */

  /* body sizes */
  --body-font-size-l: 24px; /* @libs */
  --body-font-size-m: 18px; /* @libs */
  --body-font-size-s: 16px; /* @libs */
  --body-font-size-xs: 14px; /* @libs */
  --body-font-size-xxs: 10px;

  /* heading sizes (mobile-first) */
  --heading-font-size-xxl: 32px; /* @libs */
  --heading-font-size-xl: 24px; /* @libs */
  --heading-font-size-l: 20px; /* @libs */
  --heading-font-size-m: 18px; /* @libs */
  --heading-font-size-s: 18px; /* @libs */
  --heading-font-size-xs: 16px; /* @libs */

  /* layout */
  --max-width-site: 100%; /* @libs */
  --section-padding-vertical: 0;
  --section-padding-horizontal: 2%;
  --icon-size: 24px; /* @libs */
  --h1-max-width: 14em; /* @libs */

  /* nav heights */
  --nav-height: 200px; /* @libs */
  --nav-brand-row-height-mobile: 97px; /* @libs */
  --breadcrumbs-height: 34px; /* @libs */
  --header-height: 0;

  /* fixed-width / code */
  --fixed-font-family: menlo, consolas, monospace; /* @libs */

  /* button tokens — shared */
  --button-margin: 0; /* @libs */
  --button-border-radius: 100px; /* @libs */
  --button-border-width: 2px; /* @libs */
  --button-padding: 19px 25px; /* @libs */
  --button-font-size: 18px; /* @libs */
  --button-font-weight: 700; /* @libs */
  --button-line-height: 1.25; /* @libs */
  --button-transition: 0.2s ease-in-out; /* @libs */

  /* button icon (arrow on link buttons) */
  --button-icon-width: 22px; /* @libs */
  --button-icon-height: 10px; /* @libs */
  --button-icon-gap: 8px; /* @libs */
  --button-icon-opacity-hover: 0.5; /* @libs */
  --button-icon-url: url("/icons/arrow-right.svg"); /* @libs */

  /* primary — filled CTA */
  --button-primary-background: var(--brand-secondary); /* @libs */
  --button-primary-hover-background: var(--brand-secondary-dark); /* @libs */
  --button-primary-color: var(--background-color); /* @libs */
  --button-primary-border-color: var(--brand-secondary); /* @libs */
  --button-primary-hover-border-color: var(--brand-secondary-dark); /* @libs */
  --button-primary-hover-color: var(--background-color); /* @libs */

  /* secondary — outline / ghost */
  --button-secondary-background: transparent; /* @libs */
  --button-secondary-hover-background: transparent; /* @libs */
  --button-secondary-color: var(--brand-primary); /* @libs */
  --button-secondary-border-color: var(--brand-primary); /* @libs */
  --button-secondary-hover-color: var(--brand-primary-light); /* @libs */
  --button-secondary-hover-border-color: var(--brand-primary-light); /* @libs */

  /* accent — high-impact filled CTA */
  --button-accent-background: var(--brand-primary); /* @libs */
  --button-accent-hover-background: var(--brand-primary-light); /* @libs */
  --button-accent-color: var(--background-color); /* @libs */
  --button-accent-border-color: var(--brand-primary); /* @libs */
  --button-accent-hover-border-color: var(--brand-primary-light); /* @libs */
  --button-accent-hover-color: var(--background-color); /* @libs */

  /* disabled (native button elements) */
  --button-disabled-background: var(--light-color); /* @libs */
  --button-disabled-border-color: var(--light-color); /* @libs */
  --button-disabled-color: var(--text-color-light); /* @libs */

  /* on dark sections */
  --button-on-dark-background: var(--background-color); /* @libs */
  --button-on-dark-border-color: var(--background-color); /* @libs */
  --button-on-dark-color: var(--brand-primary); /* @libs */
  --button-on-dark-hover-opacity: 0.9; /* @libs */
  --button-on-dark-secondary-background: transparent; /* @libs */
  --button-on-dark-secondary-border-color: var(--background-color); /* @libs */
  --button-on-dark-secondary-color: var(--background-color); /* @libs */
  --button-on-dark-secondary-hover-background: var(--background-color); /* @libs */
  --button-on-dark-secondary-hover-border-color: var(--background-color); /* @libs */
  --button-on-dark-secondary-hover-color: var(--brand-primary); /* @libs */

}

/* fallback font for proxima-nova */
@font-face { /* @libs */
  font-family: avenir-fallback; /* @libs */
  font-weight: 400; /* @libs */
  size-adjust: 98%; /* @libs */
  src: local('Arial'); /* @libs */
}

@font-face { /* @libs */
  font-family: avenir-fallback; /* @libs */
  font-weight: 700; /* @libs */
  size-adjust: 98%; /* @libs */
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Arial'); /* @libs */
}

body { /* @libs */
  display: none; /* @libs */
  margin: 0; /* @libs */
  background-color: var(--background-color); /* @libs */
  color: var(--text-color); /* @libs */
  font-family: var(--body-font-family); /* @libs */
  font-size: var(--body-font-size-xs); /* @libs */
  line-height: var(--body-line-height); /* @libs */
}

body.appear { /* @libs */
  display: block; /* @libs */
}

.color-secondary {
  color: var(--brand-secondary);

  --link-color: var(--brand-secondary);
}

header { /* @libs */
  height: var(--header-height); /* @libs */
}

header .header,
footer .footer { /* @libs */
  visibility: hidden; /* @libs */
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] { /* @libs */
  visibility: visible; /* @libs */
}

/* headings */
h1,
h2,
h3,
h4,
h5,
h6 { /* @libs */
  margin-top: var(--block-margin-top); /* @libs */
  margin-bottom: var(--block-margin-bottom); /* @libs */
  font-family: var(--heading-font-family); /* @libs */
  font-weight: var(--heading-font-weight); /* @libs */
  line-height: var(--heading-line-height); /* @libs */
  scroll-margin: 40px; /* @libs */
}

h1 { /* @libs */
  font-size: var(--heading-font-size-xxl); /* @libs */
  line-height: 1.125; /* @libs */
  color: var(--text-color); /* @libs */
  margin-top: 0; /* @libs */
  max-width: var(--h1-max-width); /* @libs */
}

h2 { /* @libs */
  font-size: var(--heading-font-size-xl); /* @libs */
  line-height: var(--heading-line-height); /* @libs */
}

h3 { /* @libs */
  font-size: var(--heading-font-size-l); /* @libs */
  font-weight: var(--font-weight-bold); /* @libs */
  line-height: 1.6; /* @libs */
  margin-bottom: 0; /* @libs */
}

h4 { /* @libs */
  font-size: var(--heading-font-size-l);
  font-weight: var(--font-weight-bold); /* @libs */
  line-height: 22px;
  text-align: center;
}

h5 { /* @libs */
  font-size: var(--heading-font-size-s); /* @libs */
  font-weight: var(--font-weight-bold); /* @libs */
  line-height: 1.22; /* @libs */
  text-align: center;
}

h6 { /* @libs */
  font-size: var(--heading-font-size-xs); /* @libs */
  font-weight: var(--font-weight-bold); /* @libs */
}

p,
dl,
ol,
ul,
pre,
blockquote { /* @libs */
  margin-top: var(--block-margin-top); /* @libs */
  margin-bottom: var(--block-margin-bottom); /* @libs */
}

code,
pre { /* @libs */
  font-family: var(--fixed-font-family); /* @libs */
  font-size: var(--body-font-size-s); /* @libs */
}

pre { /* @libs */
  padding: 16px; /* @libs */
  border-radius: 8px; /* @libs */
  background-color: var(--light-color); /* @libs */
  overflow-x: auto; /* @libs */
  white-space: pre; /* @libs */
}

main {
  padding: 0 10px;
}

/* 404 error shell — full-bleed header; boilerplate error block unchanged */

body.error-page main > .section {
  margin: 0;
}

body.error-page main.error {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
}

body.error-page main.error > .section.error-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 48px 24px 64px 40px;
}

body.error-page main.error > .section.error-block > div {
  margin: 0;
  max-width: none;
  padding: 0;
  width: 100%;
}

body.error-page main.error .error-number {
  display: block;
  width: auto;
  height: clamp(3.5rem, 8vw, 6.5rem);
}

body.error-page main.error .error-number text {
  font-family: var(--heading-font-family);
  font-weight: 700;
}

body.error-page main.error .error-message {
  margin: 0 0 24px;
  font-size: var(--heading-font-size-xl);
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-color);
}

body.error-page main.error .button-container {
  margin: 0;
}

@media (width >= 768px) {
  body.error-page main.error > .section.error-block {
    padding: 64px 32px 80px 48px;
  }
}

main > div { /* @libs */
  margin: 40px 16px; /* @libs */
}

input,
textarea,
select,
button { /* @libs */
  font: inherit; /* @libs */
}

/* links */
a { /* @libs */
  color: var(--link-color); /* @libs */
  overflow-wrap: break-word; /* @libs */
}

a:hover { /* @libs */
  color: var(--link-hover-color); /* @libs */
}

/* buttons — shared structure */
a.button,
button { /* @libs */
  box-sizing: border-box; /* @libs */
  display: inline-block; /* @libs */
  max-width: 100%; /* @libs */
  margin: var(--button-margin); /* @libs */
  padding: var(--button-padding); /* @libs */
  border: var(--button-border-width) solid transparent; /* @libs */
  border-radius: var(--button-border-radius); /* @libs */
  font-family: var(--body-font-family); /* @libs */
  font-size: var(--button-font-size); /* @libs */
  font-style: normal; /* @libs */
  font-weight: var(--button-font-weight); /* @libs */
  line-height: var(--button-line-height); /* @libs */
  text-align: center; /* @libs */
  text-decoration: none; /* @libs */
  white-space: nowrap; /* @libs */
  cursor: pointer; /* @libs */
  overflow: hidden; /* @libs */
  text-overflow: ellipsis; /* @libs */
  transition: var(--button-transition); /* @libs */
}

a.button:focus { /* @libs */
  outline: 0; /* @libs */
}

/* primary — filled CTA (native button elements default here) */
a.button.primary,
button { /* @libs */
  background-color: var(--button-primary-background); /* @libs */
  border-color: var(--button-primary-border-color); /* @libs */
  color: var(--button-primary-color); /* @libs */
}

a.button.primary:hover,
a.button.primary:focus,
button:hover,
button:focus { /* @libs */
  background-color: var(--button-primary-hover-background); /* @libs */
  border-color: var(--button-primary-hover-border-color); /* @libs */
  color: var(--button-primary-hover-color); /* @libs */
  cursor: pointer; /* @libs */
}

button:disabled,
button:disabled:hover { /* @libs */
  background-color: var(--button-disabled-background); /* @libs */
  border-color: var(--button-disabled-border-color); /* @libs */
  color: var(--button-disabled-color); /* @libs */
  cursor: unset; /* @libs */
}

/* secondary — outline / ghost (default for unclassified link buttons) */
a.button.secondary,
a.button:not(.primary, .accent),
button.secondary { /* @libs */
  background-color: var(--button-secondary-background); /* @libs */
  border-color: var(--button-secondary-border-color); /* @libs */
  color: var(--button-secondary-color); /* @libs */
}

a.button.secondary:hover,
a.button.secondary:focus,
a.button:not(.primary, .accent):hover,
a.button:not(.primary, .accent):focus,
button.secondary:hover,
button.secondary:focus { /* @libs */
  background-color: var(--button-secondary-hover-background); /* @libs */
  border-color: var(--button-secondary-hover-border-color); /* @libs */
  color: var(--button-secondary-hover-color); /* @libs */
  text-decoration: none; /* @libs */
  cursor: pointer; /* @libs */
}

/* accent — high-impact filled CTA */
a.button.accent { /* @libs */
  background-color: var(--button-accent-background); /* @libs */
  border-color: var(--button-accent-border-color); /* @libs */
  color: var(--button-accent-color); /* @libs */
}

a.button.accent:hover,
a.button.accent:focus { /* @libs */
  background-color: var(--button-accent-hover-background); /* @libs */
  border-color: var(--button-accent-hover-border-color); /* @libs */
  color: var(--button-accent-hover-color); /* @libs */
  text-decoration: none; /* @libs */
  cursor: pointer; /* @libs */
}

/* arrow icon on link buttons */
a.button::after { /* @libs */
  content: ""; /* @libs */
  display: inline-block; /* @libs */
  width: var(--button-icon-width); /* @libs */
  height: var(--button-icon-height); /* @libs */
  margin-left: var(--button-icon-gap); /* @libs */
  vertical-align: middle; /* @libs */
  background-color: currentcolor; /* @libs */
  mask-image: var(--button-icon-url); /* @libs */
  mask-size: contain; /* @libs */
  mask-repeat: no-repeat; /* @libs */
  mask-position: center; /* @libs */
  transition: var(--button-transition); /* @libs */
}

a.button:hover::after,
a.button:focus::after { /* @libs */
  opacity: var(--button-icon-opacity-hover); /* @libs */
}

/* explicit authored icon (e.g. :search:) replaces the default arrow and uses
   flex gap so spacing sits between icon and text on whichever side it's authored */
a.button:has(.icon) { /* @libs */
  display: inline-flex; /* @libs */
  gap: var(--button-icon-gap); /* @libs */
  align-items: center; /* @libs */
  justify-content: center; /* @libs */
}

a.button:has(.icon)::after { /* @libs */
  content: none; /* @libs */
}

a.button .icon { /* @libs */
  width: 1em; /* @libs */
  height: 1em; /* @libs */
}

main img { /* @libs */
  max-width: 100%; /* @libs */
  width: auto; /* @libs */
  height: auto; /* @libs */
}

.icon { /* @libs */
  display: inline-block; /* @libs */
  height: var(--icon-size); /* @libs */
  width: var(--icon-size); /* @libs */
}

.icon img { /* @libs */
  height: 100%; /* @libs */
  width: 100%; /* @libs */
  object-fit: contain; /* @libs */
}

/* icon bullet lists — :has() prevents FOUC before JS adds .icon-bullets */
main ul:has(> li > .icon, > li > :is(strong, em, a) > .icon) { /* @libs */
  list-style: none; /* @libs */
  margin: 0; /* @libs */
  padding: 0; /* @libs */
}

main ul.icon-bullets > li,
main li.icon-bullet-item { /* @libs */
  display: flex; /* @libs */
  align-items: flex-start; /* @libs */
  gap: 12px; /* @libs */
  list-style: none; /* @libs */
}

main .icon-bullet-text { /* @libs */
  flex: 1; /* @libs */
}

main .icon.icon-bullet { /* @libs */
  flex-shrink: 0; /* @libs */
  margin-top: 0.15em; /* @libs */
}

/* single-purpose text utility; !important so it reliably wins over
   block-level paragraph rules (e.g. columns' 22px line-height) wherever
   an author or block explicitly opts in. */
.small-text {
  display: block;
  font-size: var(--body-font-size-xs) !important;
  line-height: 1.2 !important;
}

/* responsive visibility utilities (authorable via [hide-mobile] / [hide-desktop] bracket spans) */

/* ==== START alignment + display for mobile ==== */
.hide-mobile {
  display: none;
}

.center, .center-mobile, .center-desktop,
.left, .left-mobile, .left-desktop,
.right, .right-mobile, .right-desktpo {
  &:not(.cards) {
    ol {
      width: fit-content;
    }

    ul {
      width: fit-content;
    }

    li {
    text-align: left;
  }
 }
}

.center, .center-mobile {
  text-align: center;

  &.columns .columns-img-col img {
    display: inline-block;
  }

  ol, ul {
    margin-left: auto;
    margin-right: auto;
  }
}

.left, .left-mobile {
  text-align: left;

  &.columns .columns-img-col img {
    display: inline-block;
  }
}

.right, .right-mobile {
  text-align: right;

  &.columns .columns-img-col img {
    display: inline-block;
  }

  ol, ul {
    margin-left: auto;
  }
}

/* ==== END alignment + display for mobile ==== */

/* sections */
main > .section { /* @libs */
  margin: 0 10px;
}

main > .section > div:not(.bg-image) { /* @boilerplate */
  max-width: var(--max-width-site); /* @boilerplate */
  margin: auto; /* @boilerplate */
  padding: 0 var(--spacing-m); /* @boilerplate */
}

/* Section metadata: background image sits behind content */
main > .section:has(> .bg-image) { /* @boilerplate */
  position: relative; /* @boilerplate */
  overflow: hidden; /* @boilerplate */
}

main > .section:has(> .bg-image) > div:not(.bg-image) { /* @boilerplate */
  position: relative; /* @boilerplate */
  z-index: 1; /* @boilerplate */
}

main > .section > .bg-image { /* @boilerplate */
  position: absolute; /* @boilerplate */
  inset: 0; /* @boilerplate */
  z-index: 0; /* @boilerplate */
  pointer-events: none; /* @boilerplate */
}

main > .section > .bg-image picture,
main > .section > .bg-image img { /* @boilerplate */
  display: block; /* @boilerplate */
  width: 100%; /* @boilerplate */
  height: 100%; /* @boilerplate */
}

main > .section > .bg-image img { /* @boilerplate */
  object-fit: cover; /* @boilerplate */
}

main > .section:first-of-type { /* @boilerplate */
  margin-top: 0; /* @boilerplate */
}

main > .section.divider > div:last-child { /* @libs */
  border-bottom: var(--section-divider-width) solid var(--section-divider-color); /* @libs */
  padding-bottom: var(--section-padding);
}

main > .section > div { /* @libs */
  max-width: 540px; /* @libs */
  margin: auto; /* @libs */
  padding: 0 15px; /* @libs */
}

/* section metadata - accent (light blue help strip) */
main .section.accent { /* @libs */
  background-color: var(--accent-bg); /* @libs */
  margin: 0; /* @libs */
  padding: 20px 0; /* @libs */
}

main .section.accent > div { /* @libs */
  display: flex; /* @libs */
  align-items: center; /* @libs */
  justify-content: center; /* @libs */
  gap: 12px; /* @libs */
}

main .section.accent p { /* @libs */
  margin: 0; /* @libs */
  font-size: var(--body-font-size-ms); /* @libs */
}

main .section.accent img { /* @libs */
  max-width: unset; /* @libs */
  width: 54px; /* @libs */
  height: 54px; /* @libs */
}

/* section metadata - light */
main .section.light,
main .section.highlight { /* @libs */
  background-color: var(--light-color); /* @libs */
  margin: 0; /* @libs */
  padding: var(--section-padding-vertical) 0; /* @libs */
}

/* section metadata - dark (header) */
main .section.dark { /* @libs */
  background-color: var(--brand-primary); /* @libs */
  color: var(--background-color); /* @libs */
  padding: var(--section-padding-vertical) var(--section-padding-horizontal) 16px; /* @libs */
  margin: 0;
  font-size: var(--body-font-size-xxs);
}

main .section.dark h1,
main .section.dark h2,
main .section.dark h3,
main .section.dark h4,
main .section.dark h5,
main .section.dark h6 { /* @libs */
  color: var(--background-color); /* @libs */
}

main .section.dark .columns-img-col p {
  margin: 1px 0 8px;
}

main .section.dark a { /* @libs */
  color: var(--background-color); /* @libs */
}

main .section.dark a:hover { /* @libs */
  color: var(--brand-teal-light); /* @libs */
}

main .section.dark img {
  margin: auto;
}

main .section.dark a.button.primary,
main .section.dark a.button.accent,
main .section.dark a.button:not(.secondary) { /* @libs */
  background-color: var(--button-on-dark-background); /* @libs */
  border-color: var(--button-on-dark-border-color); /* @libs */
  color: var(--button-on-dark-color); /* @libs */
}

main .section.dark a.button.primary:hover,
main .section.dark a.button.primary:focus,
main .section.dark a.button.accent:hover,
main .section.dark a.button.accent:focus,
main .section.dark a.button:not(.secondary):hover,
main .section.dark a.button:not(.secondary):focus { /* @libs */
  background-color: var(--button-on-dark-background); /* @libs */
  border-color: var(--button-on-dark-border-color); /* @libs */
  color: var(--button-on-dark-color); /* @libs */
  opacity: var(--button-on-dark-hover-opacity); /* @libs */
}

main .section.dark a.button.secondary { /* @libs */
  background-color: var(--button-on-dark-secondary-background); /* @libs */
  border-color: var(--button-on-dark-secondary-border-color); /* @libs */
  color: var(--button-on-dark-secondary-color); /* @libs */
}

main .section.dark a.button.secondary:hover,
main .section.dark a.button.secondary:focus { /* @libs */
  background-color: var(--button-on-dark-secondary-hover-background); /* @libs */
  border-color: var(--button-on-dark-secondary-hover-border-color); /* @libs */
  color: var(--button-on-dark-secondary-hover-color); /* @libs */
}

/* section metadata - stats-callout (light-blue→white gradient, rounded top corners).
   Source: vyepti.com clinical-study-results and real-life-impact callouts.
   The light-blue background-color is authored on the section metadata and applied
   inline via applySectionBackgroundDecorations(); this rule layers the white fade
   + rounded corners on top.
   Box model measured from the live source:
   - The gradient box (section) is ALWAYS full width (max-width 100%, no side
     margin). It carries 15px side padding below 768px; at 768+ the inner
     container owns the gutters so the section padding drops to 0.
   - The inner content (.container equivalent) carries the responsive caps,
     centered with margin auto: <576 fluid, 576+ = 540, 768+ = 720,
     992+ = 960, 1200+ = 1140 (Bootstrap container widths), each with 15px gutters. */
main .section.stats-callout {
  max-width: 100%;
  margin: 0;
  background-image: linear-gradient(180deg, #e8f3f5 20%, #fff 53%, #fff 100%);
  border-radius: 23px 23px 0 0;
  padding: var(--section-padding-vertical) 15px;
  text-align: center;
}

/* Inner content carries the responsive container caps, centered. box-sizing keeps
   the 15px gutters inside the width instead of adding to it. */
main .section.stats-callout > div:not(.bg-image) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 15px;
}

main .section.stats-callout h2,
main .section.stats-callout h4 {
  color: var(--brand-primary);
}

/* flex sections — a run of adjacent style=flex sections is wrapped by JS in a
.flex-group; the group is its own independent flex context (no crossover with
other groups). Section-level only: equal-width columns regardless of block type.
Stacks below 900px, side-by-side at >=900px. */
main .flex-group {
display: flex;
flex-direction: column;
gap: var(--flex-group-gap);
}

main .flex-group > .section.flex {
margin: 0;
}

@media (width >= 576px) {
  main .section.stats-callout > div:not(.bg-image) {
    max-width: 540px;
  }
}

@media (width >= 768px) { /* @libs */

  body {
    padding-left: 10px;
  }

  body.error-page {
    padding-left: 0;
  }

  /* ==== START alignment + display for desktop ==== */
  .hide-desktop {
    display: none;
  }

  .hide-mobile {
    display: revert;
  }

  .center-mobile, .left-mobile, .right-mobile {
    text-align: revert;

    ol, ul {
    margin-left: revert;
    margin-right: revert;
    }

    &:not(.cards) li {
      text-align: revert;
    }
  }

  .center-desktop {
    text-align: center;
  
    &.columns .columns-img-col img {
      display: inline-block;
    }
  
    ol, ul {
      margin-left: auto;
      margin-right: auto;
    }
  
    &:not(.cards) li {
      text-align: left;
    }
  }
  
  .left-desktop {
    text-align: left;
  
    &.columns .columns-img-col img {
      display: inline-block;
    }
  }
  
  .right-desktop {
    text-align: right;
  
    &.columns .columns-img-col img {
      display: inline-block;
    }
  
    ol, ul {
      margin-left: auto;
    }
  
    &:not(.cards) li {
      text-align: left;
    }
  }

  /* ==== END alignment + display for desktop ==== */
  
    /* ==== Start widths ==== */

div[class^="width-"], div[class*=" width-"] {
  margin: var(--div-width-margin);
}

.width-75 {
  width: 73.5%;
}

.width-66 {
  width: 64.5%;
}

.width-50 {
  width: 48.5%;
}

.width-33 {
  width: 31.5%;
}

.width-25 {
  width: 23.5%;
}

.columns > div:has(> div[class^="width-"],> div[class*=" width-"]) {
  align-items: var(--div-width-align-items);

  > div[class^="width-"],> div[class*=" width-"] {
    flex: none;
  }
}

/* ==== End widths ==== */

    main .section.stats-callout {
      padding: var(--section-padding-vertical) 0;
    }

    main > .section > div { /* @libs */
      max-width: 720px; /* @libs */
    }
  
    main .section.stats-callout > div:not(.bg-image) {
      max-width: 720px;
    }

    /* section metadata - dark (teal) */
main .section.dark {
  font-size: var(--body-font-size-xs);
  min-height: 125px;
  padding: 1% 4.5% 2% 5px;
}

main .section.dark .columns-img-col p {
  padding: 12px 0 0;
}

main .section.dark img {
  margin: unset;
}

main .section.dark .columns > div {
  align-items: unset;
}

main .section.dark .columns-img-col {
  max-width: 25%
}

  }

@media (width >= 992px) { /* @libs */
  body[data-breadcrumbs] { /* @libs */
    --header-height: calc(var(--nav-height) + var(--breadcrumbs-height)); /* @libs */
  }

main > .section > div { /* @libs */
  max-width: var(--max-width-site); /* @libs */
  padding: 0 32px; /* @libs */
}

main > .section > div:not(.bg-image) { /* @boilerplate */
  padding: 0 var(--spacing-l); /* @boilerplate */
}

main .section.stats-callout > div:not(.bg-image) {
  max-width: 960px;
}

  main .section.accent > div { /* @libs */
    gap: 30px; /* @libs */
  }

  main .section.dark { /* @libs */
    font-size: var(--body-font-size-xs);
    min-height: 125px;
    padding: 1% 4.5% 1% 95px;
  }

  main .section.dark .columns-wrapper {
    margin: unset;
    max-width: unset;
  }

  main .flex-group {
    flex-direction: row;
    align-items: stretch;
  }

  main .flex-group > .section.flex {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (width >= 1200px) {
  main .section.stats-callout > div:not(.bg-image) {
    max-width: 1140px;
  }

  main .section.dark { /* @libs */
    font-size: var(--body-font-size-xs);
    min-height: 125px;
    padding: 1.5% 15% 1% 95px;
  }
}