body {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  margin: 0;
  color: var(--text-primary);
  background: var(--bg-main);
}

.container-main {
  max-width: none;
  margin: 0;
}

.container-header {
  max-width: 820px;
  margin: 0 auto;
}

.container-content,
.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.container-header,
.container-content {
  padding-left: 24px;
  padding-right: 24px;
}

h1, h2, h3, h4 {
  font-weight: 750;
  line-height: 1.1;
  margin: 0 0 1rem;
  clear: both;
  text-transform: none;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

h1 {
  font-size: clamp(44px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(30px, 4vw, 46px);
}

h3 {
  font-size: 22px;
}

p, li {
  font-size: 18px;
  color: var(--text-muted);
}

p {
  /* max-width: 720px;*/
  margin: 0 0 1.1rem;
}

a:link,
a:visited {
  color: var(--accent-dark);
  text-underline-offset: 3px;
}

a:hover,
a:active {
  color: var(--structure);
}

header {
  background: var(--bg-main);
  min-width: 0;
  border-bottom: none;
  padding: 88px 0 0px;
  margin-bottom: 0;
}

header p {
  font-size: 22px;
}

.container-header {
  color: var(--text-primary);
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
}

.container-content ul,
.container-footer ul, 
.container-content ol,
.container-footer ol {
      padding-left: 1.5rem;
      margin-bottom: 1.2rem;
}
.container-content ul ul,
.container-footer ul ul, 
.container-content ol ol,
.container-footer ol ol {
      padding-left: 2rem;
      margin-bottom: 1.2rem;
}
.container-content ul ul ul,
.container-footer ul ul ul,
.container-content ol ol ol,
.container-footer ol ol ol {
      padding-left: 2.5rem;
      margin-bottom: 1.2rem;
}

/* --------------------------------------------------------------------------
 * HSP content utilities
 * -------------------------------------------------------------------------- */

.eyebrow,
.mono {
  /* display: inline-block;*/ 
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  font-weight: 750;
  color: var(--structure) !important;
  margin-bottom: 18px;
}

.lead {
  font-size: 22px;
  max-width: 720px;
}

.system-block,
.pattern-break {
  border-left: 4px solid var(--accent);
  background: transparent;
  color: var(--text-primary);
  padding: 0 0 0 18px;
  margin: 34px 0;
  font-weight: 700;
}

.system-block p,
.pattern-break p {
  color: var(--text-primary);
  font-weight: 700;
}

.btn-direct,
.btn-primary,
.btn-secondary,
.btn,
.content input[type=submit] {
  display: inline-block;
  padding: 14px 22px !important;
  border-radius: 999px;
  background: var(--bg-button-primary) !important;
  color: var(--text-button-primary) !important;
  text-decoration: none !important;
  font-weight: 750;
  border: 1px solid var(--bg-button-primary) !important;
  width: auto;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.btn-secondary {
    color:var(--text-button-secondary) !important;
  background: var(--bg-button-secondary) !important;
    border: 1px solid var(--bg-button-secondary) !important;
}

.btn-direct:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn:hover,
.content input[type=submit]:hover {
  background: var(--structure) !important;
  border-color: var(--structure) !important;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 60px 0;
}

/* --------------------------------------------------------------------------
 * Full-width section bands
 * CMS output:
 * .container-content > .section > #section_X / .section-inner
 * -------------------------------------------------------------------------- */

.container-content {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  min-width: 0;
}

.container-content .section {
  width: 100%;
  margin: 0;
  padding: 88px 24px;
  overflow: visible;
  background: var(--bg-main);
}

.container-content .section-1 {
  padding-top: 0;
}

.container-content .section.section-even {
  background: var(--structure-soft);
}

.container-content .section.section-odd {
  background: var(--bg-main);
}

.container-content .section > .section-inner,
.container-content .section > div[id^="section_"] {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.container-content .section > div[id^="section_1"] {
  max-width: 770px;
}
.section-topic-list.content_list_hero > .section-inner {
  max-width: 770px;
}
.section-topic-list.content_list_hero {
  padding-top: 0;
}


/* Optional authored bands inside CMS content */
.full-width-band {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 88px 24px;
}

.full-width-band > .section-inner,
.full-width-band > .container-content,
.full-width-band > .container-header,
.full-width-band > .container-footer {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

.full-width-band.band-soft {
  background: var(--structure-soft);
}

.full-width-band.band-accent {
  background: var(--accent-soft);
}

.full-width-band.band-dark {
  background: var(--structure);
  color: #fff;
}

.full-width-band.band-dark p,
.full-width-band.band-dark li,
.full-width-band.band-dark .content_item_description,
.full-width-band.band-dark .content_list_description {
  color: #d1d5db;
}

.full-width-band.band-dark h1,
.full-width-band.band-dark h2,
.full-width-band.band-dark h3,
.full-width-band.band-dark h4 {
  color: #fff;
}

/* --------------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  header {
    padding: 64px 0 32px;
  }

  .container-content .section,
  .full-width-band {
    padding: 64px 20px;
  }
}