/*
 * 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 {
  /* sabril brand colors */
  --brand-purple: #652d89;
  --brand-green-light: #77a22f;
  --brand-green-dark: #4b7602;
  --brand-orange: #ee8a21;
  --brand-orange-dark: #d97817;/* @libs */

  /* libs brand colors */
  --brand-primary: var(--brand-purple);
  --brand-primary-light: var(--brand-green-light);
  --brand-primary-dark: var(--brand-green-dark);
  --brand-secondary: var(--brand-orange);
  --brand-secondary-dark: var(--brand-orange-dark);
  --accent-bg: #e1f0f6;/* @libs */
  --card-bg-light: #eff6f9;
  --card-bg-neutral: #f5f5f5;/* @libs */

  /* semantic colors */
  --background-color: #fff;/* @libs */
  --light-color: #e1f0f6;/* @libs */
  --dark-color: #046183;/* @libs */
  --text-color: #000;/* @libs */
  --text-color-light: #666;/* @libs */
  --link-color: var(--brand-primary);/* @libs */
  --link-hover-color: #7ebcc6;/* @libs */
  --overlay-background-color: #e1f0f6;/* @libs */
  --error-color: #c02c57;/* @boilerplate */
  --section-divider-width: 4px;/* @libs */
  --section-divider-color: #d1d1d1;
  --section-padding: 24px;
  --flex-group-gap: 24px;
  --div-width-margin: auto;
  --div-width-align-items: flex-start;

  /* fonts */
  --body-font-family: 'Arial Regular', 'Helvetica Neue', helvetica, arial, sans-serif;

  /* Source headings use the bold-by-design "Arial Bold" face, so they read bold
     regardless of font-weight. Prefer it here so headings match the source even
     where a weight override applies (e.g. info-cards h1); the rest of the stack
     is the fallback when "Arial Bold" is unavailable. */
  --heading-font-family: 'Arial Bold', 'Helvetica Neue', helvetica, arial, sans-serif;
  --body-line-height: 1.4;/* @libs */
  --heading-font-weight: 700;
  --heading-line-height: 1.2;/* @libs */
  --font-weight-bold: 700;/* @libs */
  --block-margin-top: 20px;/* @libs */
  --block-margin-bottom: 10px;/* @libs */

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

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

  /* layout */
  --max-width-site: 1120px;/* @libs */
  --section-padding-vertical: 40px;/* @libs */
  --icon-size: 24px;/* @libs */
  --h1-max-width: 100%;/* @libs */

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

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

  /* button tokens — shared */
  --button-margin: 12px 0;/* @libs */
  --button-border-radius: 10px;/* @libs */
  --button-border-width: 2px;/* @libs */
  --button-padding: 8px 27px;/* @libs */
  --button-font-size: 15px;/* @libs */
  --button-line-height: 1.5;/* @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 */

}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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-s);/* @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 */
  color: var(--brand-primary);/* @libs */
}

h1, .size-h1 {/* @libs */
  font-size: var(--heading-font-size-xxl);/* @libs */
  line-height: 1.125;/* @libs */
  color: var(--brand-primary);/* @libs */
  max-width: var(--h1-max-width);/* @libs */
  margin: .67em 0;
}

h2, .size-h2 {/* @libs */
  font-size: var(--heading-font-size-m);/* @libs */
  line-height: var(--heading-line-height);/* @libs */

}

h3, .size-h3 {/* @libs */
  font-size: var(--heading-font-size-s);/* @libs */
  font-weight: var(--font-weight-bold);/* @libs */
  line-height: 1.2;
}

h4, .size-h4 {/* @libs */
  font-size: var(--heading-font-size-m);/* @libs */
  font-weight: var(--font-weight-bold);/* @libs */
  line-height: 1.5;/* @libs */
}

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

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

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

main p.button-wrapper {
  margin: var(--button-margin);
}

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

b, strong {
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-bold);
}

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

main {
  box-sizing: border-box;
  padding: 0 15px;
}

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

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

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

/* buttons — shared structure */
main a.button,
main span.button a,
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-size: var(--button-font-size);/* @libs */
  font-style: normal;/* @libs */
  line-height: var(--button-line-height);/* @libs */
  text-align: center;/* @libs */
  text-decoration: none;/* @libs */
  cursor: pointer;/* @libs */
  transition: var(--button-transition);/* @libs */
  background-color: var(--button-primary-background);/* @libs */
  border-color: var(--button-primary-border-color);/* @libs */
  color: var(--button-primary-color);/* @libs */
}

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

/* primary — filled CTA (native button elements default here) */
a.button.primary,
main span.button a,
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,
span.button a:hover,
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,
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,
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 */
}

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 */
}

main ul {
  list-style: none;
  padding-left: 0;
}

main ol {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}

main ol>li {
  margin: 0;
  padding: 0;
}

main ul>li {
  padding-left: 1em;
  text-indent: -1em;
}

main ul>li::before {
  content: "\2022";
  padding-right: .5em;
  color: var(--brand-primary);
}

main ul > li > p {
  margin: 0;
  display: inline;
}

main ul > li > ul {
  list-style: none;
  margin: 0;
}

main ul > li > ul > li::before {
    content: "-";
    padding-right: .5em;
  }

/* 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 */
}

/* 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 ==== */

.shadow {
  &.columns-img-col {
    margin: 0 15px 10px;
    box-shadow: 4px 3px 25px #919191;

    p {
      margin: 0;
    }
  }
}

.shadow-purple {
  box-shadow: 3px 3px 10px 0 rgb(101 45 137 / 40%);
}

.smalltext {
  padding-bottom: 20px;

  p {
    display: inline-block;
    font-size: 15px;
    line-height: 1.3em;
    padding-right: 4%;
  }

  h3 {
    line-height: 1.6;
  }
}

.purple, .purple a, .brand-primary, .brand-primary a {
  color: var(--brand-primary);
}

.brand-primary-light, .brand-primary-light a, .green, .green a {
  color: var(--brand-primary-light);
}

.orange, .orange a, .brand-orange, .brand-orange a {
  color: var(--brand-orange);
}

.references {
  p strong,
  li strong {
    color: var(--brand-primary);
  }

  a:not(.button) {
      text-decoration: none;
      border-bottom: 1px solid;
  }
}



/* sections */
main>.section {/* @libs */
  border-radius: 10px;
  max-width: var(--max-width-site);/* @boilerplate */
  margin: 24px auto 0;/* @boilerplate */
}

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 {
  margin-top: 0;
}
  */

main>.section.divider {
  position: relative;
  padding-bottom: 10px;

  &.green {
    border-bottom: 2px solid var(--brand-green-light);
    margin: 15px auto 0;
    border-radius: 0;
  }
}

/* 404 "Return to Homepage" link keeps the source site's orange, not the global purple */
main>.section.divider a[href="/"] {
  color: var(--brand-secondary);
}

main>.section.divider a[href="/"]:hover {
  color: var(--brand-secondary-dark);
}

/* Full-bleed divider line without widening the section (keeps content aligned) */
main>.section.divider:not(.green)::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 16px);
  height: var(--section-divider-width);
  background-color: var(--section-divider-color);
  pointer-events: none;
}

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

/* 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;
}

/* 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 (teal) */
main .section.dark {/* @libs */
  background-color: var(--brand-primary);/* @libs */
  color: var(--background-color);/* @libs */
  margin: 0;/* @libs */
  padding: var(--section-padding-vertical) 0;/* @libs */
}

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 a {/* @libs */
  color: var(--background-color);/* @libs */
}

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

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);
}

main .section[data-background-color] {
  padding: 10px 25px 20px;
  margin: 24px auto 10px;
}

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

@media (width >=768px) {/* @libs */
  :root {/* @libs */
    /* heading sizes scale up on desktop */
    --body-font-size-m: 16px;/* @libs */
    --body-font-size-s: 16px;/* @libs */
    --body-font-size-xs: 14px;/* @libs */
    --heading-font-size-xxl: 30px;/* @libs */
    --heading-font-size-xl: 24px;/* @libs */
    --heading-font-size-l: 24px;/* @libs */
    --heading-font-size-m: 22px;/* @libs */
    --heading-font-size-s: 16px;/* @libs */
    --heading-font-size-xs: 16px;/* @libs */
  }

  /* ==== 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.divider:not(.green)::after {
    display: none;
  }

  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;
  }
}

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

  header {/* @libs */
    height: calc(var(--nav-height) + 23px);/* @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 .flex-group {
    flex-direction: row;
    align-items: stretch;
  }

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

@media (width >=1200px) {
  header {/* @libs */
    height: var(--nav-height);/* @libs */
  }

  /* sabril.net: .container-fluid caps at 1200px, centered on wide desktops */
  main {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

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