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

/*
 * Intuit Enterprise Suite — replica of erp.intuit.com, EDS foundation.
 * Brand font "AvenirNext forINTUIT" is a licensed kit, self-hosted here under
 * Intuit's authorization for the AEM migration proof-of-concept (mirrored from
 * erp.intuit.com's own font kit). When it isn't available, text falls back to a
 * metric-matched local Arial (avenir-fallback), then the system sans-serif.
 */

:root {
  /* matches erp.intuit.com's global :root rule (qbmds-components/styles/sbseg/fonts.css) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* colors — lifted from erp.intuit.com */
  --background-color: #fff;
  --light-color: #f7f8f3;

  /* sand */
  --tofu: #f3f2ef;
  --sky: #dbedee;
  --agave: #c2f5ff;
  --light-gray: #f4f5f8;

  /* section/form "sky" style band fill — distinct from --sky above (same
     word, unrelated token; --sky is the sand-palette teal used by
     highlight/tabs/testimonial) */
  --sky-blue: #e0edff;

  /* in-article callout fill */
  --agave-band: #d6e8f8;

  /* media-text .agave band fill */
  --cyan-band: #c2f5ff;

  /* media-text .cyan band fill, >=1200px */
  --ice-band: #eaf6f7;

  /* media-text .cyan band fill, below 1200px */
  --rail-promo: #81f2fe;

  /* blog right-rail promo card fill */
  --toc-bar-bg: #f0f4f6;

  /* blog TOC bar / rail card fill */
  --toc-bar-text: #282828;
  --wintermint: #eff4f9;
  --blog-hero-bg: var(--wintermint);

  /* blog article hero band */
  --dark-color: #6b6c72;
  --text-color: #21262a;
  --heading-color: #11181c;
  --text-muted: #6b6c72;
  --text-soft: #8d9096;
  --primary: #0077c5;

  /* Intuit blue */
  --primary-dark: #055393;
  --navy: #00254a;

  /* primary CTA / dark hero */
  --navy-hover: #001a36;
  --navy-mid: #053d6d;
  --hero-violet: #3b2f7a;
  --blue-bright: #0097e6;
  --blue-light: #34bfff;
  --green: #0a8543;
  --green-bright: #0fd46c;
  --info: #236cff;
  --link-color: #0077c5;
  --link-hover-color: #055393;
  --line: #d4d7dc;

  /* aliases used by lifted block CSS (prototype token names) */
  --text: var(--text-color);
  --heading: var(--heading-color);
  --sand: var(--light-color);
  --ink-teal: #0d333f;

  /* fonts */
  --body-font-family: "AvenirNext forINTUIT", avenir-fallback, arial, sans-serif;
  --heading-font-family: var(--body-font-family);

  /* body sizes */
  --body-font-size-m: 16px;
  --body-font-size-s: 15px;
  --body-font-size-xs: 14px;
  --body-font-size-xxs: 12px;

  /* heading sizes */
  --heading-font-size-xxl: 48px;

  /* hero h1 */
  --heading-font-size-xl: 38px;

  /* section h2 */
  --heading-font-size-l: 30px;
  --heading-font-size-m: 24px;
  --heading-font-size-s: 20px;
  --heading-font-size-xs: 18px;

  /* layout */
  --nav-height: 92px;
  --container: 1380px;
  --radius: 4px;
  --radius-card: 12px;
  --section-y: 80px;
}

/* Metric-matched fallback for the primary webfont (local Arial, zero network),
   standing in for "AvenirNext forINTUIT" while it downloads. MUST stay in the
   eager stylesheet: fonts.css loads lazily (post-LCP on mobile), so a fallback
   defined there is absent at first paint and can't prevent the hero swap shift.
   size-adjust (computed from avenir-400.woff2 vs. Arial) is the main lever since
   line box height is set by explicit line-height; ascent/descent match Avenir. */
@font-face {
  font-family: avenir-fallback;
  size-adjust: 105.4%;
  ascent-override: 91.7%;
  descent-override: 24.3%;
  line-gap-override: 0%;
  src: local('Arial');
}

/* OneTrust renders before the lazy brand fonts settle. Its vendor font stack
   skips our metric fallback, which can rewrap the mobile banner by a full line
   when Avenir arrives. Pin banner text to the eager local fallback so its
   dimensions remain stable; !important wins over OneTrust's late-injected CSS. */
@media (width < 768px) {
  #onetrust-banner-sdk,
  #onetrust-banner-sdk #onetrust-policy-text,
  #onetrust-banner-sdk a,
  #onetrust-banner-sdk button {
    font-family: avenir-fallback, arial, sans-serif !important;
  }
}

html {
  scrollbar-gutter: stable;
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  line-height: 1.6;
}

body.appear {
  display: block;
}

/* 1Mind injects a 100px launcher, then renders and resizes its cross-origin
   iframe in two steps. Keep the mobile shell hidden at its settled size until
   the iframe reports its collapsed state. This must remain eager because the
   widget stylesheet and vendor script load in parallel. */
@media (width < 768px) {
  html.onemind-active #onemind-widget {
    right: 12px !important;
    bottom: 12px !important;
    visibility: hidden !important;
  }

  html.onemind-active.onemind-ready #onemind-widget {
    visibility: visible !important;
  }
}

header {
  height: var(--nav-height);
}

body.hide-header header {
  height: 0;
  min-height: 0;
}

body.blog-home header,
body.blog-article header,
body.category header,
body.search header,
body.research header,
body.guide header,
body.case-study header,
body.author header {
  min-height: 172px;
}

@media (width <=1299px) {
  body.blog-home header,
  body.blog-article header,
  body.category header,
  body.search header,
  body.research header,
  body.guide header,
  body.case-study header,
  body.author header {
    min-height: 117px;
  }
}

body.has-events-bar header {
  min-height: 149px;
}

@media (width <=1299px) {
  body.has-events-bar header {
    min-height: 106px;
  }
}

@media (width <=540px) {
  body.has-events-bar header {
    min-height: 122px;
  }
}

header .header,
footer .footer,
/* Raw fragment markup the CDN inlines as <header><nav>…</nav></header> /
   <footer><nav>…</nav></footer> (see akamai/ EdgeWorker). Hidden until header.js/
   footer.js consume and remove it; the reserved header height keeps this CLS-free. */
header > nav,
footer > nav {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  position: initial;
  width: auto;
  height: auto;
  margin: 0;
  overflow: initial;
  clip-path: none;
  white-space: initial;
  border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  font-family: var(--heading-font-family);
  font-weight: 400;
  line-height: 1.2;
  color: var(--heading-color);
  scroll-margin: 100px;
}

h1 {
  font-size: var(--heading-font-size-xxl);
}

h2 {
  font-size: var(--heading-font-size-xl);
}

h3 {
  font-size: var(--heading-font-size-l);
}

h4 {
  font-size: var(--heading-font-size-m);
}

h5 {
  font-size: var(--heading-font-size-s);
}

h6 {
  font-size: var(--heading-font-size-xs);
}

main > .section > .default-content-wrapper > h2.section-eyebrow,
main > .section > h2.section-eyebrow {
  margin: 0;
  padding-bottom: 20px;
  font-size: 12px;
  font-weight: 500;
  line-height: 14.4px;
  letter-spacing: 1.2px;
  color: #000;
  text-align: center;
}

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

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

main>div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

.light-gray {
  background: var(--light-gray);
  color: black;
}

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

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
p.button-wrapper {
  margin: 12px 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  border: 2px solid transparent;
  border-radius: 2.4em;
  padding: 0.5em 1.2em;
  font: inherit;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

a.button.primary,
button.button.primary {
  border-color: var(--text-color);
  background-color: var(--text-color);
  color: var(--background-color);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--dark-color);
  background-color: var(--dark-color);
  color: var(--light-color);
}

a.button.primary[aria-disabled="true"],
a.button.primary[aria-disabled="true"]:hover,
a.button.primary[aria-disabled="true"]:focus-visible,
button.button.primary:disabled,
button.button.primary:disabled:hover,
button.button.primary:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

a.button.secondary,
button.button.secondary {
  border-color: var(--text-color);
  background-color: transparent;
  color: var(--text-color);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--dark-color);
  background-color: var(--light-color);
  color: var(--dark-color);
}

a.button.secondary[aria-disabled="true"],
a.button.secondary[aria-disabled="true"]:hover,
a.button.secondary[aria-disabled="true"]:focus-visible,
button.button.secondary:disabled,
button.button.secondary:disabled:hover,
button.button.secondary:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

/* high-impact call-to-action */
a.button.accent,
button.button.accent {
  border-color: var(--link-color);
  background-color: var(--link-color);
  color: var(--background-color);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  border-color: var(--link-hover-color);
  background-color: var(--link-hover-color);
}

a.button.accent[aria-disabled="true"],
a.button.accent[aria-disabled="true"]:hover,
a.button.accent[aria-disabled="true"]:focus-visible,
button.button.accent:disabled,
button.button.accent:disabled:hover,
button.button.accent:disabled:focus-visible {
  background-color: var(--light-color);
  border-color: var(--light-color);
  color: var(--dark-color);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main>.section {
  margin: 40px 0;
}

main>.section>div {
  max-width: 1200px;
  margin: auto;
  padding: 0 24px;
}

main>.section:first-of-type {
  margin-top: 0;
}

@media (width >=1024px) {
  main>.section>div {
    padding: 0 32px;
  }
}

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

main .section.sky {
  background-color: var(--sky-blue);
}

main .section.super-blue {
  background-color: var(--info);
  color: #fff;
}

main .section.super-blue :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

main .section.super-blue .default-content-wrapper > * {
  color: #fff;
}

main .section.super-blue.form-container:has(.form.download),
main .section.super-blue.faq-container {
  background-color: var(--info);
}

main .section.super-blue .faq-toggle,
main .section.super-blue .faq-answer,
main .section.super-blue .faq-chevron {
  color: inherit;
}

main .section.super-blue .faq-list {
  border-top-color: rgb(255 255 255 / 40%);
}

main .section.super-blue .faq-item {
  border-bottom-color: rgb(255 255 255 / 40%);
}

main .section.super-blue .faq-toggle:hover,
main .section.super-blue .faq-toggle:focus-visible,
main .section.super-blue .faq-toggle:hover .faq-chevron {
  color: rgb(255 255 255 / 80%);
}

/* content width */
main>.section>div {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 40px;
}

main .section.full-bleed>div {
  max-width: none;
  padding: 0;
}


main .section {
  padding: 0;
}

main>.section {
  margin: 0;
}

main .section:empty {
  display: none;
}

.da-form-wrapper {
  display: none;
}

main .section.narrow>div {
  max-width: 1180px;

  &.default-content-wrapper {
    max-width: 820px;
    margin: 2rem auto;
  }
}

main > .section > .default-content-wrapper > h2 {
  font-size: 48px;
}

main .section.center>div.default-content-wrapper {
  text-align: center;
}

main .section.right>div.default-content-wrapper {
  text-align: right;
}

main .section.navy {
  background-color: var(--navy);
  margin: 0;
  padding: 64px 24px;

  @media (width >=1024px) {
    padding: 120px 24px;
  }
}

main .section.navy h1,
main .section.navy h2,
main .section.navy h3,
main .section.navy p {
  color: #fff;
  margin: 16px 0;
}

main .section.navy h2 {
  font-size: 40px;
  font-weight: 500;
}

main .section.navy .default-content-wrapper>p:not(.button-wrapper) {
  font-size: 20px;
}

main .section.navy a.button.primary,
main .section.navy button.button.primary {
  background: #fff;
  color: var(--navy);
  border-color: #fff;
  gap: 10px;
}

main .section.navy a.button.primary:hover {
  background: rgb(255 255 255 / 90%);
  border-color: transparent;
}

main .section.navy a.button.primary::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: currentcolor;
  mask: center / contain no-repeat url("/icons/chevron-right.svg");
  -webkit-mask: center / contain no-repeat url("/icons/chevron-right.svg");
  transition: opacity .15s ease;
}

main .section.navy a.button.secondary,
main .section.navy button.button.secondary {
  border-color: #fff;
  color: #fff;
  background-color: transparent;
}

main .section.super-blue a.button.secondary,
main .section.super-blue button.button.secondary {
  border-color: #fff;
  color: #fff;
  background-color: transparent;
}

main .section.navy a.button.secondary:hover,
main .section.navy a.button.secondary:focus-visible {
  background-color: rgb(255 255 255 / 15%);
  border-color: #fff;
  color: #fff;
}

main .section.super-blue a.button.secondary:hover,
main .section.super-blue a.button.secondary:focus-visible {
  background-color: #fff;
  border-color: #fff;
  color: #000;
}

/* contained sections */
main>.section.contained {
  margin: 2rem auto;
  max-width: 1400px;
  border-radius: 6px;
}

/* case-studies index intro (Template: "Case Studies Index" metadata -> body.case-studies-index) */
body.case-studies-index main>.section:first-of-type .default-content-wrapper {
  max-width: 46em;
  margin: 0 auto;
  text-align: center;
}

body.case-studies-index main>.section:first-of-type h1 {
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 16px;
}

body.case-studies-index main>.section:first-of-type p {
  font-size: 17px;
  color: var(--text-muted);
}

/* blog category listing intro (Template: "Category" metadata -> body.category) */
body.category main>.section:first-of-type {
  padding-top: 5rem;
}

body.category main>.section:first-of-type .default-content-wrapper {
  max-width: 46em;
  margin: 0 auto;
  text-align: center;
}

body.category main>.section:first-of-type h1 {
  font-size: 40px;
  font-weight: 600;
  margin: 0 0 16px;
}

body.category main>.section:first-of-type p {
  font-size: 17px;
  color: var(--text-muted);
}

body.blog-home main>.section:first-of-type .default-content-wrapper {
  text-align: center;
}

body.blog-home main>.section:first-of-type h2 {
  font-size: 34px;
  font-weight: 700;
  color: #000;
  margin: 0 0 16px;
}

body.blog-home main>.section:first-of-type p {
  font-size: 16px;
  line-height: 1.5;
  color: #000;
  max-width: 46em;
  margin-inline: auto;
}

body.blog-home main>.section:not(:first-of-type) h2 {
  font-size: 28px;
  font-weight: 700;
  color: #000;
}

@media (min-width: 1024px) {
  body.blog-home main>.section:first-of-type h2 {
    font-size: 40px;
  }

  body.blog-home main>.section:not(:first-of-type) h2 {
    font-size: 34px;
  }
}

body.search main>.section:first-of-type {
  padding-top: 5rem;
}

main:has(.event-cards)>.section:first-of-type {
  background: var(--navy);
  background-image: linear-gradient(135deg, #041839 0%, #041f53 45%, #03339c 100%);
  color: #fff;
  padding: 96px 0 80px;
}

main:has(.event-cards)>.section:first-of-type .default-content-wrapper {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

main:has(.event-cards)>.section:first-of-type h1 {
  font-size: 48px;
  line-height: 1.27;
  font-weight: 500;
  color: #fff;
  margin: 0 0 20px;
}

main:has(.event-cards)>.section:first-of-type p {
  font-size: 20px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}

/* upstream runs one step: 48px until the 1200px container is reached, 60px above */
@media (width >=1200px) {
  main:has(.event-cards)>.section:first-of-type h1 {
    font-size: 60px;
  }
}

@media (width <1024px) {
  main:has(.event-cards)>.section:first-of-type {
    padding: 64px 0 56px;
  }
}

@media (width <768px) {
  main:has(.event-cards)>.section:first-of-type h1 {
    font-size: 36px;
  }
}

/* eyebrow utility */
.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

body.author main .default-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 46em;
  margin: 0 auto;
  text-align: center;
}

body.author main .default-content-wrapper p:has(picture) {
  order: -1;
  width: 160px;
  margin: 0 0 24px;
}

body.author main .default-content-wrapper p:has(picture) img {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

body.author main .default-content-wrapper p:not(:has(picture)) {
  max-width: 34em;
}

/* pull-quote (case-study article body prose) */
blockquote {
  position: relative;
  margin: 48px 0;
  padding: 0 0 0 44px;
  font-size: 28px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--heading);
}

blockquote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.1em;
  font-size: 48px;
  line-height: 1;
  color: var(--primary);
  font-weight: 700;
}

blockquote p {
  margin: 0;
}

blockquote cite {
  display: block;
  margin-top: 14px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: var(--text-muted);
}

a.button:any-link,
button.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 30px;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  text-decoration: none;
  margin: 0;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

a.button.primary,
button.button.primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

a.button.primary:hover {
  background: var(--navy-hover);
  border-color: var(--navy-hover);
}

a.button.secondary,
button.button.secondary {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}

a.button.secondary:hover {
  background: rgb(0 37 74 / 6%);
}

.section.dark a.button.secondary,
.hero a.button.secondary {
  color: #fff;
  border-color: #fff;
}

.section.dark a.button.secondary:hover,
.hero a.button.secondary:hover {
  background: #fff;
  color: #09222a;
  border-color: #fff;
}

.section.dark .block p,
.section.dark .block :is(h1, h2, h3, h4, h5, h6),
.section.dark .block :is(ul, ol), 
.section.dark > .default-content-wrapper > :is(h1, h2, h3, h4, h5, h6),
.section.dark > .default-content-wrapper > p {
  color: #fff;
}

p.button-wrapper {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0;
}

body {
  font-weight: 400;
}

a {
  color: var(--link-color);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

@media (width <768px) {
  :root {
    --section-y: 48px;
    --nav-height: 60px;
  }

  main>.section>div {
    padding: 0 20px;
  }
}

.library-metadata-wrapper {
  display: none;
}

body:not(.case-study, .blog-article, .research) .section:not(:first-of-type)>.default-content-wrapper> :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: center;
}

body.blog-home .section:not(:first-of-type)>.default-content-wrapper> :is(h1, h2, h3, h4, h5, h6) {
  text-align: left;
  margin-top: 6rem;
}

.section > .default-content-wrapper {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (width < 768px) {
  main { overflow-x: clip; }
}


main > .section.spacer-top-s { margin-top: 1rem; }
main > .section.spacer-top-m { margin-top: 1.5rem; }
main > .section.spacer-top-l { margin-top: 2.5rem; }
main > .section.spacer-top-xl { margin-top: 4rem; }
main > .section.spacer-top-xxl { margin-top: 6rem; }
main > .section.spacer-bottom-s { margin-bottom: 1rem; }
main > .section.spacer-bottom-m { margin-bottom: 1.5rem; }
main > .section.spacer-bottom-l { margin-bottom: 2.5rem; }
main > .section.spacer-bottom-xl { margin-bottom: 4rem; }
main > .section.spacer-bottom-xxl { margin-bottom: 6rem; }
main > .section.spacer-bottom-xxxl { margin-bottom: 8rem; }
main > .section.spacer-bottom-xxxxl { margin-bottom: 10rem; }

main > .section .block.spacer-top-s { margin-top: 1rem; }
main > .section .block.spacer-top-m { margin-top: 1.5rem; }
main > .section .block.spacer-top-l { margin-top: 2.5rem; }
main > .section .block.spacer-top-xl { margin-top: 4rem; }
main > .section .block.spacer-top-xxl { margin-top: 6rem; }
main > .section .block.spacer-bottom-s { margin-bottom: 1rem; }
main > .section .block.spacer-bottom-m { margin-bottom: 1.5rem; }
main > .section .block.spacer-bottom-l { margin-bottom: 2.5rem; }
main > .section .block.spacer-bottom-xl { margin-bottom: 4rem; }
main > .section .block.spacer-bottom-xxl { margin-bottom: 6rem; }
main > .section .block.spacer-bottom-xxxl { margin-bottom: 8rem; }
main > .section .block.spacer-bottom-xxxxl { margin-bottom: 10rem; }

main > .section.padding-top-s { padding-top: 1rem; }
main > .section.padding-top-m { padding-top: 1.5rem; }
main > .section.padding-top-l { padding-top: 2.5rem; }
main > .section.padding-top-xl { padding-top: 4rem; }
main > .section.padding-top-xxl { padding-top: 6rem; }
main > .section.padding-bottom-s { padding-bottom: 1rem; }
main > .section.padding-bottom-m { padding-bottom: 1.5rem; }
main > .section.padding-bottom-l { padding-bottom: 2.5rem; }
main > .section.padding-bottom-xl { padding-bottom: 4rem; }
main > .section.padding-bottom-xxl { padding-bottom: 6rem; }
main > .section.padding-bottom-xxxl { padding-bottom: 8rem; }
main > .section.padding-bottom-xxxxl { padding-bottom: 10rem; }

main > .section .block.padding-top-s { padding-top: 1rem; }
main > .section .block.padding-top-m { padding-top: 1.5rem; }
main > .section .block.padding-top-l { padding-top: 2.5rem; }
main > .section .block.padding-top-xl { padding-top: 4rem; }
main > .section .block.padding-top-xxl { padding-top: 6rem; }
main > .section .block.padding-bottom-s { padding-bottom: 1rem; }
main > .section .block.padding-bottom-m { padding-bottom: 1.5rem; }
main > .section .block.padding-bottom-l { padding-bottom: 2.5rem; }
main > .section .block.padding-bottom-xl { padding-bottom: 4rem; }
main > .section .block.padding-bottom-xxl { padding-bottom: 6rem; }
main > .section .block.padding-bottom-xxxl { padding-bottom: 8rem; }
main > .section .block.padding-bottom-xxxxl { padding-bottom: 10rem; }

main > .section > .default-content-wrapper > .button-wrapper {
  margin-top: 2rem;
}

main > .section.colored-background {
  padding-top: 3rem;
  padding-bottom: 3rem;

  > div.default-content-wrapper, > .div.default-content-wrapper > :is(h1, h2, h3, h4, h5, h6) {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
  }
}

main > .section.blue-divider {
  > .default-content-wrapper {
    border-top: 2px solid var(--info);
  }

  &.narrow > .default-content-wrapper {
    @media (width >= 1024px) {
      padding-left: 0;
      padding-right: 0;
    }
  }
}

.section.dark-background > .default-content-wrapper :is(h1, h2, h3, h4, h5, h6, ol, ul, li, p),
.section.dark-background .block :is(h1, h2, h3, h4, h5, h6, ol, ul, li, p) { 
  color: #fff; 
}

main > .section.dark-background > .default-content-wrapper > .button-wrapper a.button,
main > .section.dark-background > .default-content-wrapper > .button-wrapper button {
  background: #fff;
  color: var(--navy);

  &:hover {
    background: rgb(238 244 246);
  }
}

main > .section.dark-background > .default-content-wrapper > .button-wrapper a.button.secondary,
main > .section.dark-background > .default-content-wrapper > .button-wrapper button.secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;

  &:hover {
    background: #fff;
    color: var(--navy);
  }
}

.section.light-background > .default-content-wrapper :is(h1, h2, h3, h4, h5, h6) {
  color: var(--heading-color);
}

.section.light-background .block :is(ol, ul, li, p) { 
  color: var(--text-color); 
}

.section.left > .default-content-wrapper :is(h2, h3, h4, h5, h6, p) {
  text-align: left !important;
}

.modal dialog.web-survey-dialog {
  max-width: 1000px;
}

body.block-library > main > .section {
  margin: 2rem 0;
}

body.block-library > main > .section > .default-content-wrapper > h1 {
  font-size: 36px;
  text-align: left !important;
  margin-top: 0;
  background: var(--navy);
  color: #fff;
  padding: 1rem;
  margin-bottom: 2rem;
}

 body.block-library .library-metadata {
  display: none;
 }

 body.block-library header,
 body.block-library footer {
  display: none;
 }

body.block-library .section > .default-content-wrapper {
  padding:0
}

body.author-guide > main > .section > .default-content-wrapper :is(h1, h2, h3, h4, h5, h6, p, ul, li) {
  text-align: left !important;
}

/* Adjust LivePerson chat bubble image size */
/* stylelint-disable-next-line selector-class-pattern */
.LPMcontainer > img {
    height: 338px;
}

main > .section.large-text > .default-content-wrapper p {
  font-size: 20px;
}

main > .section.large-text > .default-content-wrapper :is(h3, h4, h5, h6) {
  margin-bottom: 2rem;
}