/*
 * 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 extracted from: https://www.onfi.com/ (extraction date: 2026-06-22) === */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* onfi.com brand colors */
  --brand-teal: #008c99;
  --brand-teal-dark: #00808c;
  --brand-teal-light: #81c6cc;
  --brand-green: #729533;
  --brand-green-dark: #556f26;
  --brand-green-light: #7fa73a;
  --brand-yellow: #ffd212;
  --brand-yellow-light: #ffdc45;

  /* Facts About LGS colors (LGS page stat grid) */
  --fact-teal-dark: #1e6a71;
  --fact-green: #7fa73a;
  --fact-cyan: #01c6d8;
  --fact-green-bright: #abda5a;
  --fact-teal-deep: #04656e;

  /* Facts About LGS type scale (LGS page stat grid — source-exact, non-standard
     to this grid so kept as feature tokens rather than added to the global scale).
     Mobile-first: source shrinks the fact text on small screens (cell 18.33/20,
     emphasis 25/32) so 1-col cards stay compact; desktop values restored ≥768px. */
  --fact-font-size: 18.33px;
  --fact-font-weight: 200;
  --fact-line-height: 20px;
  --fact-emphasis-font-size: 25px;
  --fact-emphasis-font-weight: 800;
  --fact-emphasis-line-height: 32px;

  /* brand semantic aliases */
  --brand-primary: var(--brand-teal);
  --brand-primary-light: var(--brand-teal-light);
  --brand-primary-dark: var(--brand-teal-dark);
  --brand-secondary: var(--brand-green);
  --brand-secondary-dark: var(--brand-green-dark);
  --brand-accent: var(--brand-yellow);
  --accent-bg: #cce8eb;
  --card-bg-light: #cce8eb;

  /* accent-section footnote fine print (eligibility text under the hero).
     Mobile-first: base is the mobile size; the ≥768px query below steps it up
     to the desktop size, matching the source's hand-off at 768px. */
  --accent-footnote-bg: #e3f9fd;
  --accent-footnote-font-size: 14px;
  --accent-footnote-line-height: 20px;
  --accent-footnote-color: #000;
  --accent-footnote-margin: 20px 0 23px;

  /* semantic colors */
  --background-color: #fff;
  --light-color: #cce8eb;
  --dark-color: #008c99;
  --text-color: #333;
  --text-color-light: #484848;
  --link-color: #729533;
  --link-hover-color: #556f26;

  /* default body-list bullet color — teal on the source (e.g. LGS "WHAT YOU
     SHOULD KNOW"). Override per context by redefining this token on a scope
     (e.g. a colored section or a block). The ISI block sets its own green
     bullet independently via --isi-bullet-color. */
  --list-bullet-color: var(--brand-teal);
  --overlay-background-color: #cce8eb;
  --error-color: #c02c57;
  --footer-background-color: #d4d5d5;
  --border-color: #d6d6d6;
  --section-divider-width: 1px;
  --section-divider-color: var(--border-color);
  --section-padding: 24px;
  --flex-group-gap: 24px;
  --border-width-s: 1px solid #ccc;

  /* fonts — Avenir LT W01 (Monotype webfonts on source); see NEEDS REVIEW note.
     The licensed Avenir name is kept first so it activates automatically once a
     portable license is added in fonts.css. "nunito sans" (self-hosted, SIL OFL)
     is the portable substitute that actually renders for visitors without Avenir
     — same approach used by the header. The avenir-*-fallback faces (size-adjusted
     local Avenir/Arial) sit after Nunito Sans to reduce CLS for users who happen
     to have a local Avenir installed.
     Body copy uses the Light (35) cut — the consumer pages (LGS/About/Savings)
     render body paragraphs in Avenir Light on the source; Roman looked too heavy.
     (The dense HCP page uses Roman for body — handled as a per-page override there.) */
  --body-font-family: "Avenir LT W01_35 Light", "nunito sans", avenir-fallback, "Avenir Next", avenir, "Segoe UI", roboto, helvetica, arial, sans-serif;

  /* Source content headings (H2–H4) use the Avenir Roman cut at weight 500 — a
     lighter "Medium" look, NOT the Heavy 800 cut. Keep the Roman name first so a
     licensed Avenir activates the correct cut; "nunito sans" renders the medium
     weight for current visitors via font-weight: 500. */
  --heading-font-family: "Avenir LT W01_55 Roman", "nunito sans", avenir-fallback, "Avenir Next", avenir, "Segoe UI", roboto, helvetica, arial, sans-serif;

  /* bold inline text (<strong>/<b>) — the real Avenir cuts are single-weight named
     families that cannot synthesize bold, so bold uses the Heavy cut by name. */
  --bold-font-family: "Avenir LT W01_85 Heavy", "nunito sans", avenir-heavy-fallback, "Avenir Next", avenir, "Segoe UI", roboto, helvetica, arial, sans-serif;

  /* light cut — fine print / footnotes (source uses Avenir LT W01_35 Light). Same
     single-weight gotcha: named family, not synthesized from a weight. */
  --light-font-family: "Avenir LT W01_35 Light", "nunito sans", avenir-fallback, "Avenir Next", avenir, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --body-line-height: 1.43;
  --heading-font-weight: 500;
  --heading-line-height: 1.1;
  --font-weight-bold: 700;
  --block-margin-top: 0.67em;
  --block-margin-bottom: 0.5em;

  /* spacing below body paragraphs/lists — source uses 23px (not the boilerplate
     10px). Override per context by redefining this token on a scope. */
  --paragraph-margin-bottom: 23px;

  /* column width classes (width-*) — shared naming convention from lundbeck-libs */
  --div-width-margin: auto;
  --div-width-align-items: flex-start;

  /* body sizes — source body copy renders at 18px (Avenir) */
  --body-font-size-m: 18px;
  --body-font-size-ms: 18px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;

  /* heading sizes (onfi base scale — non-responsive) */
  --heading-font-size-xxl: 41px;
  --heading-font-size-xl: 34px;
  --heading-font-size-l: 28px;
  --heading-font-size-m: 20px;
  --heading-font-size-s: 16px;
  --heading-font-size-xs: 14px;

  /* Display-heading scale — the source's ".headline-2" light-display treatment
     (Avenir Light, teal by default). Responsive: 22px on mobile → 28px from the
     768px breakpoint up. Used for section titles like "What is LGS?" and
     "Facts About LGS". Mobile value is the base; the ≥768 media query bumps it. */
  --display-heading-font-size: 22px;
  --display-heading-line-height: 1.28;

  /* Additional source heading treatments (LGS page + reusable):
     - onfi-quote: Avenir Light pull-quote heading (green), 22→24px
     - headline-5: Avenir Heavy uppercase "Sign #" heading, 18→26px
     - headline-6: Avenir Roman video-card mini-heading, 13.33→16px
     All step up at the 768px breakpoint. */
  --onfi-quote-font-size: 22px;
  --headline-5-font-size: 18px;
  --headline-6-font-size: 13.33px;

  /* layout — source content container is 1100px wide inside a 1400px body cap;
     tablet (768–991px) constrains content to 750px (Bootstrap-3 grid) */
  --max-width-site: 1100px;
  --max-width-tablet: 750px;
  --max-width-outer: 1400px;
  --section-padding-vertical: 40px;
  --icon-size: 24px;
  --h1-max-width: 14em;

  /* nav heights — reserved eagerly (this file loads before the header block) so
     the header holds its box and never shifts the hero when it populates.
     Narrow mobile: textbar intro wraps to 3 lines (61) + eyebrow band (83) +
     logo band (127) = 271px. At >=472px the textbar wraps to 2 lines, dropping
     the header to 256px (stepped below). Desktop collapses to a shorter bar with
     the logo tab absolutely positioned (159px, set at >=768px). */
  --nav-height: 271px;
  --nav-brand-row-height-mobile: 97px;
  --breadcrumbs-height: 34px; /* EDS internal default */
  --header-height: var(--nav-height);

  /* fixed-width / code */
  --fixed-font-family: menlo, consolas, "Liberation Mono", monospace;

  /* decoration */
  --border-radius: 0;
  --box-shadow: none;
  --transition-duration: 0.2s;
  --transition-easing: ease-in-out;

  /* button tokens — shared */
  --button-margin: 0;
  --button-border-radius: 0;
  --button-border-width: 2px;
  --button-padding: 12px 24px;
  --button-font-size: 16px;
  --button-font-weight: 500;
  --button-line-height: 1.25;
  --button-transition: 0.2s ease-in-out;

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

  /* primary — teal filled CTA (.btn-green on source) */
  --button-primary-background: var(--brand-primary);
  --button-primary-hover-background: var(--fact-cyan);
  --button-primary-color: var(--background-color);
  --button-primary-border-color: var(--brand-primary);
  --button-primary-hover-border-color: var(--brand-primary);
  --button-primary-hover-color: var(--background-color);
  --button-primary-font-family: "Avenir LT W01_65 Medium", "nunito sans", avenir-fallback, "Avenir Next", avenir, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --button-primary-font-size: 22px;
  --button-primary-padding: 14px 18px;

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

  /* accent — yellow high-impact CTA (source .btn-primary): yellow #ffd212 bg,
     teal #008c99 text, Avenir Medium 22px, 16px/20px padding, 10px radius.
     Verified identical on LGS ("Download the doctor discussion guide") and
     about-onfi ("Paying for ONFI"). Hover (source .btn-primary:hover): only the
     yellow lightens to #ffdc45 — text stays teal, no color change. */
  --button-accent-background: var(--brand-yellow);
  --button-accent-hover-background: var(--brand-yellow-light);
  --button-accent-color: var(--brand-green);
  --button-accent-border-color: var(--brand-yellow);
  --button-accent-hover-border-color: var(--brand-yellow-light);
  --button-accent-hover-color: var(--brand-green);
  --button-accent-font-family: "Avenir LT W01_65 Medium", "nunito sans", avenir-fallback, "Avenir Next", avenir, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --button-accent-font-size: 22px;
  --button-accent-padding: 14px 18px;

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

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

/* Avenir webfont substitute + size-adjusted system fallbacks live in styles/fonts.css */

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

body.appear {
  display: block;
}

html {
  scroll-behavior: smooth;
}

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

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

.bg-teal {
  background-color: var(--brand-teal);
  color: var(--background-color);
}

.bg-teal-dark {
  background-color: var(--fact-teal-dark);
  color: var(--background-color);
}

.bg-green-light {
  background-color: var(--fact-green);
  color: var(--background-color);
}

.color-cyan, .color-cyan a:any-link {
  color: var(--fact-cyan);
}

.color-green-bright, .color-green-bright a:any-link {
  color: var(--fact-green-bright);
}

.color-teal-deep, .color-teal-deep a:any-link {
  color: var(--fact-teal-deep);
}

.color-green, .color-green a:any-link {
  color: var(--brand-green);
}

.color-green-light, .color-green-ligh a:any-link {
  color: var(--brand-green-light);
}

.color-black {
  color: #000;
}

.color-grey {
  color: var(--text-color);
}

.color-green + sup {
  color: var(--brand-green);
}

.color-green-light + sup {
  color: var(--brand-green-light);
}

.color-grey + sup {
  color: var(--text-color);
}

.color-black + sup {
  color: #000;
}

.bg-teal-light {
  background-color: #e3f9fd;
  color: #008c9a;
    margin: 20px 0;
    text-align: center;
}

.bg-grey {
  background-color: #f2f2f2;
}

.txt-size-24 {
  font-size: 24px;
}

/* mobile-first base; steps up to 16px at ≥768px (see the tablet media query) */
.txt-size-14 {
  font-size: 14px;
  line-height: 20px;
}

main .section.hcp-body {
  --list-bullet-color: #222;

  padding-inline: 15px;
}

main .section.hcp-body p {
  font-size: 16px;
  line-height: 1.43;
}

/* `txt-size-14` as a section style sizes the section's copy (e.g. HCP "Medical
   Information Inquiries"). Sits after .hcp-body p so it wins on equal
   specificity. Mobile-first base; steps up to 16px at ≥768px. */
main .section.txt-size-14 p {
  font-size: 14px;
  line-height: 20px;
}

/* HCP list items render in Avenir Roman on the source (body copy stays Light) */
main .section.hcp-body ul li {
  font-family: var(--heading-font-family);
  font-size: 16px;
  line-height: 1.43;
}

main .section.hcp-body ol li {
  font-family: var(--heading-font-family);
  font-size: 13px;
  line-height: 1.43;
}

/* inline body links stay regular weight (source), not the global bold link */
main .section.hcp-body p a:any-link {
  font-weight: 400;
}


/* Safety Profile heading: source shows 33px gap to next section */
main .section.section-spaced {
  margin-bottom: 33px;
}

/* Facts About LGS type scale — source renders each fact cell at 22px/200 with the
   emphasis words bumped to 30px/800. Scoped to the stat-grid cells (their bg-*
   classes only appear in this grid); color-only classes above are untouched. */
main .columns div.bg-teal p,
main .columns div.bg-teal-dark p,
main .columns div.bg-green-light p {
  font-size: var(--fact-font-size);
  font-weight: var(--fact-font-weight);
  line-height: var(--fact-line-height);
}

main .columns div.bg-teal p strong,
main .columns div.bg-teal-dark p strong,
main .columns div.bg-green-light p strong {
  font-size: var(--fact-emphasis-font-size);
  font-weight: var(--fact-emphasis-font-weight);
  line-height: var(--fact-emphasis-line-height);
}

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

header .header,
footer .footer {
  visibility: hidden;
}

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

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

h1 {
  font-size: var(--heading-font-size-xxl);
  margin-top: 0;
  max-width: var(--h1-max-width);
}

/* Page-title h1 (default content, not the hero) — the source renders these in
   the light heading cut at a smaller size with breathing room above and below.
   Mobile-first: 22px like the source; steps up on desktop. */
main .section > .default-content-wrapper > h1 {
  margin-top: 20px;
  margin-bottom: 32px;
  font-size: 22px;
}

/* Sitemap: section-heading links use the source's muted teal, Roman cut at
   medium weight and the source's 21px size. */
main .section.sitemap h4,
main .section.sitemap h4 a:any-link {
  font-size: 21px;
}

main .section.sitemap h4 a:any-link {
  color: #0dacbb;
  font-weight: var(--heading-font-weight);
}

/* Sitemap: the sub-links under each heading render in the Roman body cut at
   regular weight (source), not the global bold link treatment. */
main .section.sitemap > .default-content-wrapper > p a:any-link {
  font-family: var(--heading-font-family);
  font-weight: 400;
}

/* Sitemap: the page title uses the source's 32px size and spacing. */
main .section.sitemap > .default-content-wrapper > h1 {
  margin-top: 35px;
  margin-bottom: 20px;
  font-size: 32px;
}

/* Sitemap: the trailing utility-link group (Lundbeck…Terms of Use) sits apart
   from the last section with a larger gap above and looser line spacing between
   its own links, matching the source. */
main .section.sitemap > .default-content-wrapper > p:last-of-type {
  margin-top: 41px;
  line-height: 31px;
}

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

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0;
  margin-bottom: var(--paragraph-margin-bottom);
}

ul {
  padding: 0;
}

/* superscript — the ® mark and numbered citations appear site-wide (headings +
   body). Scoped raise so the small glyph never expands the line box (the browser
   default vertical-align: super disrupts heading/line rhythm). */
sup {
  font-size: 0.6em;
  line-height: 0;
  position: relative;
  top: -0.5em;
  vertical-align: baseline;
}

sub {
  font-size: 0.6em;
  line-height: 0;
  position: relative;
  bottom: -0.25em;
  vertical-align: baseline;
}

/* bold inline text — <strong>/<b> render via the named Avenir Heavy cut. Keep
   font-weight: bold so the numeric weight matches the source (700) and the
   fallback fonts activate their true bold cut. */
strong,
b {
  font-family: var(--bold-font-family);
  font-weight: bold;
}

code,
pre {
  font-family: var(--fixed-font-family);
  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: 0 15px;
}

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

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: var(--font-weight-bold);
  overflow-wrap: break-word;
  transition: color var(--transition-duration) var(--transition-easing);
}

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

/* button paragraph wrapper — spacing below CTAs */
.button-wrapper {
  margin-bottom: 45px;
}

/* Center all buttons on mobile. */
@media (width < 768px) {
  main .button-wrapper {
    text-align: center;
  }
}

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

a.button:focus {
  outline: 0;
}

/* primary — filled green CTA (native button elements default here) */
a.button.primary,
button {
  background-color: var(--button-primary-background);
  border-color: var(--button-primary-border-color);
  color: var(--button-primary-color);
  font-family: var(--button-primary-font-family);
  font-size: var(--button-primary-font-size);
  border-radius: 10px;
  padding: var(--button-primary-padding);
}

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

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

/* responsive visibility utilities (authorable via [hide-mobile] / [hide-desktop] bracket spans).
   Mobile-first base hides the desktop-only element; the ≥768px block swaps them. */
.hide-mobile {
  display: none;
}

/* tooltip — authorable via [[tooltip]<a href="#" title="...">text</a>] bracket syntax */
.tooltip {
  cursor: pointer;
  font-weight: normal;
  font-synthesis-weight: none;
  color: rgb(114 149 51);
  border-bottom: 1px dashed rgb(114 149 51);
  position: relative;
}

/* popup box — Bootstrap-style, positioned below the trigger */
.tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  max-width: 200px;
  background: #000;
  color: var(--background-color);
  font-family: var(--body-font-family);
  font-weight: 200;
  padding: 4px 14px;
  border-radius: 4px;

  /* Our Avenir substitute (Nunito Sans) is wider and taller than the source's
     Avenir Light, so the size/leading are tuned down to match its visual weight. */
  font-size: 13.5px;
  line-height: 1.3;
  white-space: normal;
  text-align: center;
  z-index: 1070;
}

/* up-pointing arrow filling the gap between trigger and box */
.tooltip::before {
  content: '';
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-width: 0;
  border-bottom-color: #000;
  z-index: 1070;
}

.tooltip:hover::after,
.tooltip:hover::before {
  display: block;
}

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

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 {
  background-color: var(--button-secondary-hover-background);
  border-color: var(--button-secondary-hover-border-color);
  color: var(--button-secondary-hover-color);
  text-decoration: none;
  cursor: pointer;
}

/* accent — yellow CTA on yellow. Two source variants share this base:
   (1) the DEFAULT resource/community button (source `.btn-primary.btn-sm`):
       rounded 10px, sentence-case, Avenir Medium; GREEN text on light card
       backgrounds (flips to teal inside .dark bands — see below).
   (2) the high-impact PRIMARY CTA (source `.btn-primary`, e.g. "Get yours now"):
       square-ish 4px, UPPERCASE, teal — opted into via the [[cta-primary]] span. */
a.button.accent {
  padding: var(--button-accent-padding);
  border-radius: 10px;
  font-family: var(--button-accent-font-family);
  font-size: var(--button-accent-font-size);
  font-weight: 500;
  background-color: var(--button-accent-background);
  border-color: var(--button-accent-border-color);
  color: var(--button-accent-color);
}

/* No trailing arrow on accent buttons (source CTAs have no icon). */
a.button.accent::after {
  content: none;
}

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

/* Primary high-impact CTA variant (source `.btn-primary`): square-ish 4px corners,
   20px label in sentence case (the source markup carries `text-transform: uppercase`
   but overrides it back with a `.txt-normalcase` inner span, so it reads sentence
   case). Opted into by wrapping the link text in the [[cta-primary]] span in the
   document, so it stays author-controlled and reusable site-wide. */
a.button.accent:has(.cta-primary),
a.button.accent:has(.cta-primary):hover,
a.button.accent:has(.cta-primary):focus {
  border-radius: 4px;
  border-width: 1px;
  padding: 15px;
  font-size: 20px;
}

/* Primary CTA hover: the source flips the label to WHITE (the default accent /
   dark-band promo button keeps its teal text on hover — this variant is distinct).
   Scoped to .cta-primary so the LGS "Download the guide" hover is unaffected. The
   `.section.dark .columns` prefix matches the specificity of the dark-band teal
   hover rule so this white override wins. */
main .section.dark .columns a.button.accent:has(.cta-primary):hover,
main .section.dark .columns a.button.accent:has(.cta-primary):focus {
  color: #fff;
}


/* 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) {
  display: inline-flex;
  gap: var(--button-icon-gap);
  align-items: center;
  justify-content: center;
}

a.button:has(.icon)::after {
  content: none;
}

a.button .icon {
  width: 1em;
  height: 1em;
}

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

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

.icon img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}

/* body unordered lists — teal "•" bullet (matches source #008c99 marker).
   Excludes icon-bullet lists (which carry an .icon). The ISI block resets this
   for its own lists (see blocks/isi/isi.css). */
main ul:not(.icon-bullets, :has(> li > .icon, > li > :is(strong, em, a) > .icon)) > li {
  list-style: none;
  position: relative;
  padding-left: 1.25em;
}

main ul:not(.icon-bullets, :has(> li > .icon, > li > :is(strong, em, a) > .icon)) > li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--list-bullet-color);
}

/* Green-bullet sections (authored `style: green-bullets`): the source renders some
   body lists with a green bullet instead of the default teal (e.g. Savings "To the
   Pharmacist"). Opt in via section metadata rather than guessing by position. */
main .section.green-bullets {
  --list-bullet-color: var(--brand-green-light);
}

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

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

main .icon-bullet-text {
  flex: 1;
}

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

.center {
  text-align: center;

  &.columns > div > div {
    justify-content: center;
  }
}

/* sections — full-bleed; inner div constrains content to 1170px */
main > .section {
  margin: 0;
}

/* Sections with a custom background color (set via section metadata) establish
   a block formatting context so the first/last child's margin stays inside the
   colored box instead of collapsing out through the top/bottom edge. */
main > .section[data-background-color] {
  display: flow-root;
}

/* Green headings on the light-green section (matches source). */
main > .section[data-background-color="#e8efdc"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--brand-green);
}

/* Match the source's taller title band on this light-green section: 27px above
   the heading (22px section padding + 5px wrapper padding) and 20px below (vs
   the global 0.5em heading margin). Padding on the wrapper avoids margin
   collapse; scoped to the section's heading so global headings are unaffected. */
main > .section[data-background-color="#e8efdc"] > .default-content-wrapper:first-child {
  padding-top: 5px;
}

main > .section[data-background-color="#e8efdc"] .default-content-wrapper > :is(h1, h2, h3, h4, h5, h6) {
  margin-bottom: 20px;
}

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

main > .section > div {
  max-width: 100%;
  margin: auto;
  padding-inline: 15px;
}

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

/* The light-blue (#deedf2) band (e.g. LGS "Sign #2") insets its content an extra
   15px each side vs the global 15px — both the body copy and the colored cards
   sit ~30px off the viewport edge in the source. Keyed off the section
   background so it applies wherever this band appears, not per page. */
main > .section[data-background-color="#deedf2"] > div {
  padding-inline: 30px;
}

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

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

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

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

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

main > .section > .bg-image img {
  object-fit: cover;
}

/* section metadata - accent (light teal help strip) */
main .section.accent {
  background-color: var(--accent-footnote-bg);
  margin: 0;
  padding: 0;
}

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

main .section.accent p {
  /* source drives the band height via the paragraph margin (20px top / 23px
     bottom = 43px), not section padding */
  margin: var(--accent-footnote-margin);

  /* fine-print footnote: 16px Avenir Light, black, left-aligned (source) */
  font-family: var(--light-font-family);
  font-size: var(--accent-footnote-font-size);
  font-weight: 400;
  line-height: var(--accent-footnote-line-height);
  color: var(--accent-footnote-color);
  text-align: left;
}

/* the inline "here" link in the footnote — stays in the Light cut at 700 weight
   (source `.txt-black a`), overriding the `<strong>` Heavy styling so the link
   matches the surrounding fine print. Colour, resting text-decoration and the
   hover (darker green + underline) all come from the global `a:any-link` /
   `a:hover` rules above — no per-section override, so hover behaves site-wide. */
main .section.accent p a:any-link,
main .section.accent p a strong {
  font-family: var(--light-font-family);
  font-size: inherit;
  font-weight: 700;
}

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

/* Any section given a background color (via section-metadata) gets vertical
   breathing room so its content isn't flush against the adjacent white sections.
   Applies to all colored sections, including .dark, for consistent spacing. */
main .section[data-background-color] {
  padding-block: 22px;
}

/* the first content element (e.g. a heading) carries its own top margin, which
   would stack on top of the section padding and make the top gap larger than the
   bottom. Collapse it so the section padding alone controls the top spacing. */
main .section[data-background-color] > div:first-child > :first-child {
  margin-top: 0;
}

/* a plain (uncolored) section that sits directly above a colored one gets extra
   bottom breathing room, so the white content isn't cramped against the colored
   band that follows (matches the source's generous gap before colored sections). */
main .section:not([data-background-color]):has(+ .section[data-background-color]) {
  padding-bottom: var(--section-padding-vertical);
}

/* Resource-card sections (LGS/ONFI/Community): the source band is asymmetric —
   ~22px above the heading, ~15px below the last download link. Our download link's
   .button-wrapper carries the global 45px trailing margin, which on top of the 22px
   band padding produced a ~67px bottom gap. Zero the wrapper's bottom margin inside
   these cards and set the band's bottom inset to 15px (keep the 22px top). */
main .section.resource-cards {
  padding-block: 22px 15px;
}

main .section.resource-cards .columns .button-wrapper {
  margin-bottom: 0;
}

/* The white ONFI resource-card section has no background color, so it misses the
   [data-background-color] heading-margin collapse above — its h2's own ~22px top
   margin stacked on the 22px band padding, doubling the top gap. Collapse it so the
   band padding alone controls the top spacing, matching the colored cards' 22px. */
main .section.resource-cards > div:first-child > :first-child {
  margin-top: 0;
}

/* Display heading — the source's reusable ".headline-2" treatment: Avenir Light
   at the responsive display size (22px mobile → 28px desktop, bumped in the ≥768
   media query), centered on mobile and left-aligned from tablet up. Teal by
   default; authors add a color span-tag class for variants (e.g.
   [[headline-2,color-green]…] → green). Applied via the span-tag system on the
   heading text, matching how the source markup nests the class on an inner span.
   Reused across pages (e.g. "What is LGS?", "Facts About LGS") — do NOT add
   page-specific heading overrides; extend this class instead. */
.headline-2 {
  font-family: var(--light-font-family);
  font-weight: var(--font-weight-bold);
  font-size: var(--display-heading-font-size);
  line-height: var(--display-heading-line-height);
}

/* alignment lives on the block heading that wraps a .headline-2 span (centered
   on mobile; the ≥768 rule flips it left) */
main :is(h1, h2, h3, h4, h5, h6):has(> .headline-2) {
  text-align: center;
}

/* Pull-quote heading — the source's ".onfi-quote": the visible text sits in a
   nested <b> that the global `b,strong` rule renders in the Avenir Heavy cut, so
   this heading is Heavy (not Light), 22px mobile → 24px desktop. Our authored
   markup has no <b>, so the Heavy cut is applied by the class itself. Centered on
   mobile, left from tablet up. Typography only — color is composed via a color-*
   bracket class (source renders it light-green: [[onfi-quote,color-green-light]…]);
   teal is the inherited default. */
.onfi-quote {
  font-family: var(--bold-font-family);
  font-weight: 700;
  font-size: var(--onfi-quote-font-size);
  line-height: 1.1;
}

main :is(h1, h2, h3, h4, h5, h6):has(> .onfi-quote) {
  text-align: center;
}

/* "Sign #" heading — the source's ".headline-5.txt-weight-800": Avenir Heavy,
   uppercase, teal, 18px mobile → 26px desktop. Centered on mobile, left from
   tablet up. */
.headline-5 {
  font-family: var(--bold-font-family);
  font-weight: 400;
  font-size: var(--headline-5-font-size);
  line-height: 1.1;
  text-transform: uppercase;
}

main :is(h1, h2, h3, h4, h5, h6):has(> .headline-5) {
  text-align: center;
}

/* Video-card mini-heading — the source's ".headline-6.txt-teal": Avenir Roman,
   teal, 13.33px mobile → 16px desktop. Centered on mobile. */
.headline-6 {
  font-family: var(--bold-font-family);
  font-weight: 400;
  font-size: var(--headline-6-font-size);
  line-height: 1.1;
}

main :is(h1, h2, h3, h4, h5, h6):has(> .headline-6) {
  text-align: center;
}

/* HCP "PRIMARY ENDPOINT" tab label — the source renders it as a teal pill badge
   (`.nav-tabs > li.active > a`): white 16px Avenir Roman on the teal brand color,
   10px/15px padding, square corners. Authored via [[accent]…] on a heading; the
   span is styled as an inline-block badge. Alignment is controlled by the authored
   section/heading class (the source centers it via `[[accent,center]]`). */
main :is(h1, h2, h3, h4, h5, h6) > .accent {
  display: inline-block;
  padding: 10px 15px;
  background-color: var(--brand-teal);
  font-family: var(--heading-font-family);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--background-color);
  text-transform: none;
}

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

/* section metadata - dark (teal) */
main .section.dark {
  background-color: var(--brand-teal);
  color: var(--background-color);
  margin: 0;

  /* Source teal band is asymmetric: 22px top inset, a tight ~10px bottom (the
     band ends just below the trailing "Need help?" line rather than adding a
     full matching bottom inset). */
  padding: 22px 0 30px;

  /* source runs the free-trial card body copy one step down from the global
     18px (footnote then resolves to ~13px via its 0.83em rule) */
  font-size: 16px;
}

/* Collapse the trailing content block's own bottom margin inside the dark band
   so the section's tight 10px bottom padding alone controls the gap below the
   last line ("Need help?"), matching the source. */
main .section.dark > .default-content-wrapper:last-child > :last-child {
  margin-bottom: 0;
}

/* Promo-card text (columns block inside a dark section, e.g. LGS "Start the
   conversation", about-onfi "Thinking about adding ONFI?") — source renders the
   copy in Avenir Roman at the full 18px, not the 16px free-trial-card size.
   Source paragraph spacing here is 10px (not the global 23px), which keeps the
   green band compact. */
main .section.dark .columns p {
  font-family: var(--heading-font-family); /* Avenir 55 Roman */
  font-size: 18px;
  margin-bottom: 10px;
}

/* Offer band's default-content copy (the "Need help?" / "Get answers…" line, which
   lives in the section's default-content-wrapper, not the columns cell): the source
   scales it down on mobile like the rest of the offer card — 14px/20px on phones,
   16px/1.43 from 768px up (see the desktop override below). */
main .section.dark > .default-content-wrapper p {
  font-size: 14px;
  line-height: 20px;
}

main .section.dark > .default-content-wrapper a {
  text-decoration: none;
}

/* Promo-card row: source uses a tight ~15px gutter between the icon and text
   columns (not the default 24px columns gap). */
main .section.dark .columns > div {
  gap: 15px;
}

/* Promo-card accent button on a dark band (LGS "Download the guide", Savings
   "Get yours now"): source line-height 16px (button height ~50px; the global 1.25
   read too tall) and TEAL text (the default accent is green for light-card
   resource buttons; the source flips to teal on the colored promo bands). */
main .section.dark .columns a.button.accent {
  line-height: 16px;
  color: var(--brand-teal);

  /* Mobile: CTA fills its column (source behavior) at the source's 18px label. */
  display: block;
  width: 100%;
  font-size: 18px;
}

/* Promo-card lead heading ("Start the conversation"): the source renders this
   first line at 20px Avenir Roman (the body line below stays 18px). Scoped to the
   first paragraph of the dark promo card's text cell. */
main .section.dark .columns > div > .width-83 > p:first-child {
  font-size: 20px;
}

main .section.dark .columns a.button.accent:hover,
main .section.dark .columns a.button.accent:focus {
  color: var(--brand-teal);
}

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

main .section.dark a:not(.button.accent) {
  color: var(--background-color);
}

main .section.dark a:not(.button.accent):hover {
  color: var(--brand-teal-light);
}

/* "Get yours now" wrapper (dark section) uses tighter vertical margins. */
main .section.dark .button-wrapper {
  margin-top: 15px;
  margin-bottom: 15px;
}

/* Offer card: the source leaves a larger 26px gap between the "Access…" title and
   the primary CTA (vs the 15px above). Scoped to the offer band's cta-primary
   button-wrapper so the LGS "Download the guide" promo (no title directly above
   its button) keeps the tighter 15px. */
main .section.dark .button-wrapper:has(a.button.accent .cta-primary) {
  margin-top: 26px;
}

/* Spacing that was previously authored with trailing <br> tags in the document
   (stripped by Document Authoring on publish), now reproduced structurally:
   - the page title sits above the teal box. Combined with the 40px plain→colored
     padding-bottom and the band's 22px top padding, this lands the title→box gap
     at ~113px and title→offer-heading at ~135px, matching the source at both
     mobile and ≥1920px desktop. */
main > .section:has(+ .section.dark) > .default-content-wrapper > h1 {
  margin-bottom: 73px;
}


/* Top breathing room for the terms section that follows the teal box (was an
   empty &nbsp; paragraph at the top of the document, stripped on publish). */
main .section.dark + .section > .default-content-wrapper {
  padding-top: 36px;
}

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

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

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

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

@media (width < 768px) {
  main .section.dark,
  main .section.dark :is(h1, h2, h3, h4, h5, h6, p) {
    text-align: center;
    padding-inline: 15px;
  }

  /* Dark-section card images are block images (unaffected by text-align); center
     them so they sit above the centered copy like the source's stacked mobile
     layout, with the source's trailing gap. The image fills its column naturally
     (capped at its intrinsic size), so a small icon stays icon-sized while a
     larger card image spans the column — no per-image width hardcode. */
  main .section.dark .columns .columns-img-col img {
    margin-block: 10px 20px;
    margin-inline: auto;
  }

  /* Icon promo card (e.g. About "Thinking about adding ONFI?"): reproduce the
     source's stacked mobile band exactly. The source band is 383px tall: 60px from
     the band top to the icon, icon (96), ~20px to the 18px heading, 18px copy, the
     CTA, then 50px to the band bottom. Scoped to the icon card via its unique
     .width-16 column so the Savings offer card (width-42/50) keeps its own spacing.

     Band padding: 40px top + the icon's 20px top margin below = 60px above the icon;
     50px bottom (with the button-wrapper's bottom margin zeroed so the padding alone
     sets the trailing gap). */
  main .section.dark:has(.columns .width-16) {
    padding-block: 40px 50px;
  }

  /* 20px top keeps 60px above the icon (40px band padding + 20px); 10px bottom gives
     the source's ~10px icon-to-heading gap. */
  main .section.dark .columns > div > .width-16.columns-img-col img {
    margin-block: 20px 10px;
  }

  main .section.dark .columns > div > .width-16.columns-img-col p {
    margin-bottom: 0;
  }

  /* Collapse the row's flex gutter so the icon's own bottom margin is the sole
     icon-to-heading gap (otherwise the gutter stacks on top of it). */
  main .section.dark .columns > div:has(> .width-16) {
    gap: 0;
  }

  /* Icon card heading: source is 18px, with a 30px gap down to the "Learn more" line
     (source composes it from the heading's 10px bottom padding + 10px margin + the
     copy's 10px top padding; reproduced here as a single 30px bottom margin). The
     width-83 first-child rule elsewhere sizes the LGS promo card's lead line to 20px. */
  main .section.dark .columns > div:has(> .width-16) > .width-83 > p:first-child {
    font-size: 18px;
    margin-bottom: 30px;
  }

  /* Source uses a tight 10px gap between the card copy and its CTA; the 50px band
     padding-bottom above sets the trailing gap, so zero the wrapper's bottom margin. */
  main .section.dark .columns > div:has(> .width-16) .button-wrapper {
    margin-top: 10px;
    margin-bottom: 0;
  }

  main .section > .default-content-wrapper > h1 {
    max-width: none;
    text-align: center;
  }

  /* Sitemap: the source centers the whole link listing once the mobile header
     (hamburger) takes over. */
  main .section.sitemap > .default-content-wrapper {
    text-align: center;
  }

  /* Sitemap: the source gives the title more breathing room below the mobile
     header than on desktop. */
  main .section.sitemap > .default-content-wrapper > h1 {
    margin-top: 66px;
  }

  /* HCP "PRIMARY ENDPOINT" pill badge: the source shrinks it on mobile (11px /
     10px 6px) vs the 16px / 10px 15px desktop size in the base rule above. Mobile
     only so desktop keeps the larger badge. */
  main :is(h1, h2, h3, h4, h5, h6) > .accent {
    padding: 10px 6px;
    font-size: 11px;
  }

  .center-mobile { text-align: center; }
  .left-mobile { text-align: left; }
  .right-mobile { text-align: right; }

  /* A display heading (one wrapping a .headline-2 span) inside a centered section
     is centered by the .section.center rules (specificity 0,3,2). The plain
     utilities (0,1,0) can't override that, so an author-applied *-mobile class had
     no effect on those titles (e.g. HCP "ONFI Demonstrated…"). Match the section
     rule's specificity and place it later so the author's mobile alignment wins. */
  main :is(h1, h2, h3, h4, h5, h6).center-mobile { text-align: center; }
  main :is(h1, h2, h3, h4, h5, h6).left-mobile { text-align: left; }
  main :is(h1, h2, h3, h4, h5, h6).right-mobile { text-align: right; }
  main .section.center :is(h1, h2, h3, h4, h5, h6).center-mobile { text-align: center; }
  main .section.center :is(h1, h2, h3, h4, h5, h6).left-mobile { text-align: left; }
  main .section.center :is(h1, h2, h3, h4, h5, h6).right-mobile { text-align: right; }

  /* Section title the source shrinks on mobile (25px vs the 34px h2 desktop size),
     e.g. Savings "ONFI® (clobazam)". Author opts in per heading with the [[title-sm]]
     bracket class, hoisted onto the heading by scripts.js so the whole title
     (text, ®, icon) scales and centers. Not icon-keyed — the About page carries the
     same CIV icon but keeps 34px, so only headings the author tags shrink. Mobile
     only; desktop keeps 34px. */
  main :is(h1, h2, h3, h4, h5, h6).title-sm {
    font-size: 25px;
    line-height: 27.5px;
    text-align: center;
  }

}

/* wider mobile (≥472px): the header textbar intro wraps to 2 lines instead of 3,
   so the reserved header height drops 15px (271 → 256) to stay flush with the
   hero (no white gap) while still holding the box against load-time collapse */
@media (width >= 472px) {
  :root {
    --nav-height: 256px;
  }
}

/* tablet (≥768px): Bootstrap-3 container 750px */
@media (width >= 768px) {
  /* responsive visibility swap: on desktop hide the mobile-only element and
     reveal the desktop-only one (mobile-first base hides .hide-mobile above). */
  .hide-desktop {
    display: none;
  }

  .hide-mobile {
    display: revert;
  }

  main .section-dark {
    padding: 0;
  }
  
  main .section.dark .columns a.button.accent {
    display: inline-block;
    width: auto;
    min-width: 296px;
    font-size: var(--button-accent-font-size);
  }

  /* Offer band's "Need help?" default-content copy scales back up to 16px on
     desktop (mobile-first base is 14px above). */
  main .section.dark > .default-content-wrapper p {
    font-size: 16px;
    line-height: 1.43;
  }

  /* txt-size-14 steps up to 16px on desktop (mobile-first base is 14px above),
     both as an inline span and as a section style. */
  .txt-size-14,
  main .section.txt-size-14 p {
    font-size: 16px;
    line-height: 1.43;
  }

 /* desktop bar = the nav rows' real content height (textbar 46 + eyebrow 62 +
     main-list 42 + progress 8 = 158). 159 over-reserved by ~1px, and the
     transparent header let that strip show white — the seam under the sticky
     header where the ISI anchor lands.
     Facts grid type scales back up to the source's larger tablet/desktop sizes
     (cell 22/28, emphasis 30/32) now that cards sit in 2–3 fixed-height columns. */
  :root {
    --nav-height: 158px;
    --fact-font-size: 22px;
    --fact-line-height: 28px;
    --fact-emphasis-font-size: 30px;
    --fact-emphasis-line-height: 32px;

    /* accent footnote steps up from the mobile base to the desktop size */
    --accent-footnote-font-size: 16px;
    --accent-footnote-line-height: 22.86px;

    /* display heading (.headline-2) scales up to 28px/1.2em and left-aligns from
       tablet up (22px/centered on mobile) */
    --display-heading-font-size: 28px;
    --display-heading-line-height: 1.2;

    /* other source heading treatments step up at tablet (see mobile base) */
    --onfi-quote-font-size: 24px;
    --headline-5-font-size: 26px;
    --headline-6-font-size: 16px;
  }

  main > .section > div {
    max-width: var(--max-width-tablet);
  }

  main :is(h1, h2, h3, h4, h5, h6):has(> .headline-2),
  main :is(h1, h2, h3, h4, h5, h6):has(> .onfi-quote),
  main :is(h1, h2, h3, h4, h5, h6):has(> .headline-5),
  main :is(h1, h2, h3, h4, h5, h6):has(> .headline-6) {
    text-align: left;
  }

  /* centered section keeps display headings centered on desktop */
  main .section.center :is(h1, h2, h3, h4, h5, h6):has(> .headline-2),
  main .section.center :is(h1, h2, h3, h4, h5, h6):has(> .onfi-quote),
  main .section.center :is(h1, h2, h3, h4, h5, h6):has(> .headline-5),
  main .section.center :is(h1, h2, h3, h4, h5, h6):has(> .headline-6) {
    text-align: center;
  }

  /* …but the page-title H1 stays left, full width (2-line wrap like source) */
  main .section.center h1:has(> .headline-2) {
    max-width: none;
    text-align: left;
  }

  /* page-title h1 steps up to the source's desktop size */
  main .section > .default-content-wrapper > h1 {
    font-size: 36px;
  }

  /* .headline-2 h1: size lives on the span; inherit the h1's 36px */
  main h1 > .headline-2 {
    font-size: inherit;
  }

  /* HCP endpoint: title + graph share the graph's 672px column (732 = 672 + 30px×2 gutter) */
  main .section.endpoint > .default-content-wrapper:first-child,
  main .section.endpoint > .columns-wrapper:has(.graph1) {
    max-width: 732px;
    margin-inline: 0;
  }

  /* narrow-heading section-style variant — constrains the intro heading width
     (authored via the section metadata "style" keyword, so it's independent of
     heading text/id and doesn't affect other h3s or sections). Desktop only. */
  main .section.narrow-heading > .default-content-wrapper > h3 {
    width: 83.3333%;
  }

  /* ==== Start widths ==== */

  /* Column width classes (shared naming convention from lundbeck-libs). A column
     authored with a [width-N] code marker (e.g. [width-25]) gets class `width-N`
     via decorateCellClass and takes a fixed fraction of the row; siblings share
     the rest. Desktop only — columns stack full-width on mobile. */
  div[class^="width-"], div[class*=" width-"] {
    margin: var(--div-width-margin);
  }

  .width-83 {
    width: 81.5%;
  }

  .width-75 {
    width: 73.5%;
  }

  .width-66 {
    width: 64.5%;
  }

  .width-50 {
    width: 48.5%;
  }

  .width-42 {
    width: 40.5%;
  }

  .width-33 {
    width: 31.5%;
  }

  .width-25 {
    width: 23.5%;
  }

  .width-16 {
    width: 10%;
  }

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

/* small desktop (≥992px): Bootstrap-3 container 970px */
@media (width >= 992px) {
  body[data-breadcrumbs] {
    --header-height: calc(var(--nav-height) + var(--breadcrumbs-height));
  }

  main > .section > div {
    max-width: 970px;
    margin-right: 16.5%;
  }

  /* On page-nav pages the fixed sidebar already offsets content from the left (via
     the section padding-left in page-nav.css), so the boilerplate's 16.5% right
     margin above just double-offsets and shrinks the usable content width. Zero it
     so content fills the space beside the sidebar and matches the source's content
     row width (this is a global content-layout concern, not a page-nav-block one). */
  body.has-page-nav main > .section > div {
    margin-right: 0;
  }

  /* Sitemap has no page-nav sidebar, so drop the boilerplate's 16.5% right offset
     and center the content block; the narrow link column then left-aligns within
     it, matching the source's content row. */
  main > .section.sitemap > div {
    margin-right: auto;
  }

  /* The offer band's default-content text (the "If you qualify…" heading and the
     "Need help?" line) is constrained to Bootstrap's col-md-10 (83.33%) in the
     source, leaving ~1/6 empty on the right — this is what makes the heading wrap
     after "trial". The voucher columns row itself is NOT capped (it stays wider,
     ~col-md-11), so only the default-content wrappers get the cap, not the
     columns-wrapper. Scoped to .section.dark so other sections keep full width. */
  main .section.dark > .default-content-wrapper {
    max-width: 83.333%;
    margin-left: 0;
    margin-right: auto;
  }

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

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

/* desktop (≥1200px): source content container 1100px */
@media (width >= 1200px) {
  main > .section > div {
    max-width: var(--max-width-site);
  }
}