/* =============================================================================
 * fonts
 * ========================================================================== */

/* avenir-300 - latin */
@font-face {
  font-display: swap;
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/AvenirNext-UltraLight300.eot'); /* IE9 Compat Modes */
  src: local('AvenirNext UltraLight'), local('AvenirNext-UltraLight'),
       url('/fonts/AvenirNext-UltraLight300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AvenirNext-UltraLight300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/AvenirNext-UltraLight300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AvenirNext-UltraLight300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AvenirNext-UltraLight300.svg#AvenirNext') format('svg'); /* Legacy iOS */
}

/* avenir-400 - latin */
@font-face {
  font-display: swap;
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/AvenirNext-Regular400.eot'); /* IE9 Compat Modes */
  src: local('AvenirNext Regular'), local('AvenirNext-Regular'),
       url('/fonts/AvenirNext-Regular400.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AvenirNext-Regular400.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/AvenirNext-Regular400.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AvenirNext-Regular400.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AvenirNext-Regular400.svg#AvenirNext') format('svg'); /* Legacy iOS */
}

/* avenir-500 - latin */
@font-face {
  font-display: swap;
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/AvenirNext-Medium500.eot'); /* IE9 Compat Modes */
  src: local('AvenirNext Medium'), local('AvenirNext-Medium'),
       url('/fonts/AvenirNext-Medium500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AvenirNext-Medium500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/AvenirNext-Medium500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AvenirNext-Medium500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AvenirNext-Medium500.svg#AvenirNext') format('svg'); /* Legacy iOS */
}

/* avenir-600 - latin */
@font-face {
  font-display: swap;
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/AvenirNext-DemiBold600.eot'); /* IE9 Compat Modes */
  src: local('AvenirNext DemiBold'), local('AvenirNext-DemiBold'),
       url('/fonts/AvenirNext-DemiBold600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AvenirNext-DemiBold600.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/AvenirNext-DemiBold600.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AvenirNext-DemiBold600.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AvenirNext-DemiBold600.svg#AvenirNext') format('svg'); /* Legacy iOS */
}

/* avenir-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/AvenirNext-Bold700.eot'); /* IE9 Compat Modes */
  src: local('AvenirNext Bold'), local('AvenirNext-Bold'),
       url('/fonts/AvenirNext-Bold700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AvenirNext-Bold700.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/AvenirNext-Bold700.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AvenirNext-Bold700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AvenirNext-Bold700.svg#AvenirNext') format('svg'); /* Legacy iOS */
}

/* avenir-800 - latin */
@font-face {
  font-display: swap;
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 800;
  src: url('/fonts/AvenirNext-Heavy800.eot'); /* IE9 Compat Modes */
  src: local('AvenirNext Heavy'), local('AvenirNext-Heavy'),
       url('/fonts/AvenirNext-Heavy800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/AvenirNext-Heavy800.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/AvenirNext-Heavy800.woff') format('woff'), /* Modern Browsers */
       url('/fonts/AvenirNext-Heavy800.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/AvenirNext-Heavy800.svg#AvenirNext') format('svg'); /* Legacy iOS */
}

/* manrope-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/manrope-v20-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/manrope-v20-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* manrope-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/manrope-v20-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/manrope-v20-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* manrope-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/manrope-v20-latin-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/manrope-v20-latin-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* manrope-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/manrope-v20-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/manrope-v20-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* manrope-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/manrope-v20-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('/fonts/manrope-v20-latin-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* =============================================================================
 * styles
 * ========================================================================== */



:root {
  --dd-teal: #65baaf;
  --dd-darkmint: #20655e;
  --dd-text: #242a2e;
  --dd-font-heading: "AvenirNext", Helvetica, Arial, sans-serif;
  --dd-font-text: "Manrope", Helvetica, Arial, sans-serif;
}
body { font-family: var(--dd-font-text); color: var(--dd-text); font-size: 18px; line-height: 1.65; }
h1, h2, h3, .brand { font-family: var(--dd-font-heading); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.14; font-weight: 600; }
h2 { font-size: 1.65rem; line-height: 1.25; }
a { color: var(--dd-darkmint); text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--dd-darkmint); outline-offset: 4px; }
.container-xl { max-width: 1180px; }
.site-header { background: #fff; border-bottom: 1px solid #e5ecea; }
.brand-logo { max-width: 180px; height: auto; }
.brand-intro { background: #edf7f4; padding: clamp(3rem, 8vw, 7rem) 0; }
.eyebrow { color: var(--dd-darkmint); font-weight: 700; margin-bottom: 1.5rem; }
.intro-text { max-width: 640px; }
.brand-shop-card { background: #fff; border: 1px solid #d9e9e3; padding: 2rem; border-radius: 12px; }
.btn { font-weight: 600; padding: .7rem 1.15rem; border-radius: 5px; }
.btn-teal, .jj-btn-primary { color: #172e2a; background: var(--dd-teal); border: 1px solid var(--dd-teal); }
.btn-teal:hover, .jj-btn-primary:hover { color: #fff; background: var(--dd-darkmint); border-color: var(--dd-darkmint); }
.btn-outline-teal, .jj-btn-ghost, .btn-coral { color: var(--dd-darkmint); border: 1px solid var(--dd-darkmint); background: transparent; }
.btn-outline-teal:hover, .jj-btn-ghost:hover, .btn-coral:hover { color: #fff; background: var(--dd-darkmint); }
.site-footer { padding: 3rem 0; font-size: .95rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: start; }
.footer-links button { padding: 0; border: 0; background: none; color: var(--dd-darkmint); text-decoration: underline; }
.section { padding: 5rem 0; }
.skip-link { position: absolute; top: -100px; left: 1rem; z-index: 1100; padding: .75rem; background: #fff; }
.skip-link:focus { top: 1rem; }
.cookie-text-logo { font: 600 1.5rem var(--dd-font-heading); color: var(--dd-darkmint); text-decoration: none; }
.dd-cookie-settings .modal-content { border: 0; border-radius: 5px; }
.dd-cookie-banner{position:fixed;right:0;bottom:0;left:0;z-index:1040;padding:18px;pointer-events:none;opacity:0;transform:translateY(12px);transition:opacity .18s ease,transform .18s ease}.dd-cookie-banner[hidden]{display:none!important}.dd-cookie-banner.is-visible{pointer-events:auto;opacity:1;transform:translateY(0)}.dd-cookie-banner-panel{width:min(820px,100%);max-height:calc(100dvh - 36px);margin:0 auto;overflow:auto;background:#fff;border:1px solid rgba(15,92,88,.1);border-radius:3px;box-shadow:0 24px 70px rgba(15,92,88,.18)}.dd-cookie-banner-body{padding:32px}.dd-cookie-banner-text{margin:18px 0;color:#3f4d50}.dd-cookie-banner-links{display:flex;gap:10px;flex-wrap:wrap;color:var(--dd-teal);font-weight:500}.dd-cookie-banner-actions,.dd-cookie-settings-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.dd-cookie-grid{display:grid;grid-template-columns:300px 1fr;min-height:520px}.dd-cookie-sidebar{background:#edf8f5;padding:28px}.dd-cookie-panel{padding:28px}.dd-cookie-tabs{margin-top:24px;gap:8px}.dd-cookie-tab{border:0;background:#fff;border-radius:3px;padding:12px 14px;text-align:left;font-family:var(--dd-font-heading);font-size:15px;line-height:20px;font-weight:500;color:#334246}.dd-cookie-tab.active{background:var(--dd-teal);color:#fff}.dd-cookie-close{position:absolute;right:18px;top:18px;z-index:3}.dd-cookie-toggle-row{display:flex;align-items:center;gap:12px;margin-top:16px}.dd-switch input{display:none}.dd-switch-slider{display:block;width:52px;height:28px;border-radius:20px;background:#c9d4d2;position:relative}.dd-switch-slider:before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;left:3px;top:3px;background:#fff;transition:.18s}.dd-switch input:checked+.dd-switch-slider{background:var(--dd-teal)}.dd-switch input:checked+.dd-switch-slider:before{transform:translateX(24px)}.dd-switch-label{font-weight:500}.dd-switch-label.is-on{color:var(--dd-teal)}

.dd-cookie-tab.active { background: var(--dd-darkmint); }
.dd-switch { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.dd-switch input { display: block; position: absolute; opacity: 0; width: 52px; height: 28px; margin: 0; }
.dd-switch input:focus-visible + .dd-switch-slider { outline: 3px solid var(--dd-darkmint); outline-offset: 3px; }
@media (max-width: 991.98px) {
  .navbar-nav { padding-top: 1rem; }
  .dd-cookie-grid { grid-template-columns: 1fr; }
  .dd-cookie-sidebar, .dd-cookie-panel { padding: 24px; }
}
@media (max-width: 1199.98px) {
  .row.g-5 { --bs-gutter-x: 1.5rem; }
}
@media (max-width: 767.98px) {
  body { font-size: 16px; }
  .brand-shop-card { padding: 1.5rem; }
  .dd-cookie-banner { padding: 12px; }
  .dd-cookie-banner-panel { max-height: calc(100dvh - 24px); }
  .dd-cookie-banner-body { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.brand-intro { position: relative; padding-bottom: clamp(7rem, 10vw, 10rem); }
.section-wave { position: absolute; bottom: -1px; left: 0; display: block; width: 100%; height: 48px; color: var(--dd-wave-color, #fff); pointer-events: none; }
.section-wave--hero { height: clamp(40px, 6vw, 90px); }
.section-wave--page-header { height: clamp(24px, 3vw, 48px); }
.section-wave--section { height: clamp(24px, 3vw, 48px); }
.wave-top, .wave-bottom, .wave-both { position: relative; }
.section.wave-both { padding-block: clamp(5rem, 8vw, 7rem); }
.section.wave-top { padding-top: clamp(5rem, 8vw, 7rem); }
.section.wave-bottom { padding-bottom: clamp(5rem, 8vw, 7rem); }
.section-wave--bottom { color: var(--dd-wave-bottom-color, var(--dd-wave-color, #fff)); }

/* Shared editorial components. */
.brand-page-header { position: relative; background: #edf7f4; padding: clamp(2.5rem, 6vw, 5rem) 0 5rem; }
.brand-page-header--hero { padding: clamp(3rem, 8vw, 7rem) 0 clamp(7rem, 10vw, 10rem); }
.brand-page-header--page-header h1 { font-size: clamp(2.2rem, 4vw, 3.25rem); }
.header-image { display: block; width: 100%; height: auto; border-radius: 12px; }
.component-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); padding-top: 2rem; padding-bottom: 4rem; }
.direct-answer, .content-cta, .evidence-note { padding: clamp(1.5rem, 4vw, 2.5rem); border-radius: 12px; }
.direct-answer { background: #f4f8f7; border-left: 4px solid var(--dd-teal); }
.content-cta { background: #edf7f4; }
.evidence-note { border: 1px solid #d9e9e3; }
.evidence-label { color: var(--dd-darkmint); font-weight: 700; }
.related-card { border-top: 2px solid var(--dd-teal); padding: 1.5rem 0; }
.related-card h3 { font-size: 1.35rem; }
.editorial-info { border-top: 1px solid #d9e9e3; padding-top: 2rem; font-size: .95rem; }
.editorial-credits { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin-top: 1.5rem; }
.editorial-credits dd { margin-top: .35rem; }
.source-list { padding-left: 1.5rem; overflow-wrap: anywhere; }
.source-list li + li { margin-top: 1rem; }
.preview-notice { font-size: .9rem; color: #475a55; }

.section-wave--top { top: -1px; bottom: auto; transform: rotate(180deg); color: var(--dd-wave-top-color, var(--dd-wave-color, #fff)); }
.header-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.has-background-image::before { content: ""; position: absolute; inset: 0; background: rgba(237, 247, 244, .94); z-index: 1; }
.has-background-image > .container-xl, .has-background-image > .section-wave { z-index: 2; }

/* Homepage reference and brand navigation. */
.site-header .navbar > .container-xl { flex-wrap: wrap; }
.header-utilities { font-size: .9rem; }
.header-utilities > a:not(.btn) { text-decoration: none; }
.brand-navigation { flex-basis: 100% !important; padding-top: 1rem; margin-top: .75rem; border-top: 1px solid #e5ecea; }
.brand-navigation .nav-link { font-size: .88rem; font-weight: 600; color: var(--dd-text); padding: .4rem 0; }
.brand-navigation .nav-link:hover { color: var(--dd-darkmint); }
.brand-navigation .nav-link[aria-current="page"] { color: var(--dd-darkmint); text-decoration: underline; text-decoration-thickness: 2px; }
.mobile-utilities { display: grid; gap: 1rem; padding-top: 1.5rem; }
.page-home-index .brand-page-header .header-image { max-width: 290px; margin: 0 auto; filter: drop-shadow(0 20px 20px #22463d18); }
.page-home-index .brand-page-header--hero { padding-top: clamp(3rem, 6vw, 5rem); padding-bottom: clamp(5rem, 7vw, 8rem); }
.home-trust { padding-top: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid #d9e9e3; }
.home-trust-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; font-size: .85rem; }
.home-trust-strip p { margin-bottom: .6rem; }
.trust-value, .dermatest-badge__title { font: 600 1.05rem/1.5 var(--dd-font-heading); }
.trust-detail { font-size: .78rem; color: #475a55; }
.dermatest-badge { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1rem; padding-block: 1.25rem; margin-bottom: 1rem; border-top: 1px solid #d9e9e3; font-size: .85rem; }
.dermatest-badge > div { flex: 1 1 180px; }
.dermatest-badge p { margin-bottom: .5rem; }
.dermatest-badge__seal { flex: 0 0 130px; width: 130px; height: auto; }
@media (max-width: 1199.98px) { .home-trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .home-trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .home-trust-strip { grid-template-columns: 1fr; gap: 1.25rem; } }
.brand-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 0; }
.brand-facts dt { font: 600 1.05rem/1.5 var(--dd-font-heading); margin-bottom: .5rem; }
.brand-facts dd { font-size: .9rem; margin: 0; }
.brand-facts a { text-decoration-thickness: 1px; text-underline-offset: .2em; }
.editorial-todos { margin-top: 1.5rem; padding: 1rem 0; border-top: 1px solid #d9e9e3; font-size: .85rem; color: #43534e; }
.editorial-todos summary { cursor: pointer; font-weight: 600; }
.editorial-todos summary:focus-visible { outline: 2px solid var(--dd-darkmint); outline-offset: 4px; }
.editorial-todos dl { margin-bottom: 0; }
.editorial-todos dl > div + div { margin-top: 1rem; }
.editorial-todos dd { margin: .35rem 0 0; }
.brand-timeline { list-style: none; padding: 0; margin: 0; }
.brand-timeline li { padding: 1.5rem 0; border-top: 1px solid #b9d6ce; }
.brand-timeline h3 { font-size: 1.4rem; }
.brand-timeline .eyebrow { margin-bottom: .75rem; }
.section-heading { max-width: 740px; margin-bottom: 2.5rem; }
.section-heading h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin-bottom: 1.5rem; }
.section-heading .eyebrow { margin-bottom: 1rem; }
.section-mint { background: #edf7f4; }
.section-warm { background: #f8f6f2; }
.skin-concept-frame { padding: clamp(1rem, 3vw, 2rem); border: 2px solid #80bcb1; border-radius: 22px; background: #f4f9f7; }
.concept-frame-label { color: var(--dd-darkmint); font-weight: 700; margin-bottom: 1.5rem; }
.skin-pillar { background: #fff; border-radius: 12px; padding: 1.5rem; }
.skin-pillar { display: flex; flex-direction: column; }
.pillar-link { margin-top: auto; font-size: .9rem; font-weight: 600; }
.skin-pillar--base { background: #dceee8; }
.pillar-meta { display: flex; align-items: center; gap: .75rem; color: var(--dd-darkmint); font-size: .9rem; margin-bottom: 1.75rem; font-weight: 600; }
.skin-pillar h3 { font-size: 1.55rem; }
.pillar-detail, .concept-frame-note { font-size: .95rem; }
.concept-frame-note { margin-top: 1.5rem; max-width: 800px; }
.support-steps { counter-reset: steps; list-style: none; padding: 0; }
.support-steps li { display: flex; gap: 1.25rem; padding: 0 0 2rem; }
.support-steps li::before { counter-increment: steps; content: counter(steps, decimal-leading-zero); color: var(--dd-darkmint); font: 500 1.3rem var(--dd-font-heading); padding-top: .15rem; }
.support-steps h3 { font-size: 1.4rem; }
.content-note { font-size: .88rem; line-height: 1.6; color: #43534e; }
.knowledge-card { border-top: 2px solid #b9d6ce; padding: 1.5rem 1rem 1.5rem 0; }
.knowledge-card h3 { font-size: 1.4rem; }
.knowledge-card--featured { background: #edf7f4; border-top-color: var(--dd-darkmint); padding: 1.5rem; border-radius: 0 0 12px 12px; }
.knowledge-card .eyebrow { font-size: .8rem; margin-bottom: .9rem; }
.testimonial { background: #fff; padding: clamp(1.5rem, 4vw, 3rem); margin: 0; border-radius: 14px; }
.testimonial blockquote { font: 500 clamp(1.5rem, 2.4vw, 2rem)/1.4 var(--dd-font-heading); }
.testimonial figcaption { font-weight: 600; margin: 1.5rem 0; }
.testimonial-context { font-size: .85rem; color: #43534e; }
.product-route { border: 1px solid #d9e9e3; border-radius: 14px; padding: 2rem; }
.product-code { display: block; font: 500 2.7rem var(--dd-font-heading); color: var(--dd-darkmint); margin-bottom: 1.5rem; }
.product-route h3 { font-size: 1.55rem; }
.brand-contact { font-style: normal; padding: 1.5rem; background: #edf7f4; border-radius: 12px; line-height: 1.9; overflow-wrap: anywhere; }
.product-comparison .product-route { display: flex; flex-direction: column; background: #fff; }
.product-comparison .product-route > a { margin-top: auto; }
.product-facts { margin: 1.25rem 0 2rem; }
.product-facts > div + div { margin-top: 1rem; }
.product-facts dt { font-size: .8rem; color: #43534e; }
.product-facts dd { margin: .2rem 0 0; }
.concept-routine h3 { font-size: 1.35rem; }
.concept-start { padding-left: 1.5rem; }
.concept-start li { padding-left: .5rem; }
.concept-start li + li { margin-top: 1.5rem; }
.home-reading-width { max-width: 940px; }
.knowledge-reading-width { max-width: 940px; }
.historical-media { margin: 2rem 0; }
.historical-media-placeholder { aspect-ratio: 4 / 3; display: grid; align-content: center; gap: .6rem; padding: 1rem; background: #fff; border: 1px solid #d9e9e3; font-size: .95rem; }
.historical-media-placeholder span { color: #43534e; font-size: .8rem; }
.historical-media-asset { display: block; width: 100%; height: auto; }
.content-navigation { padding-bottom: 2rem; border-bottom: 1px solid #d9e9e3; }
.content-navigation ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 2rem; padding-left: 1.5rem; margin-bottom: 0; font-size: .95rem; }
.knowledge-section > h2, .topic-focus > h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 1.5rem; }
.knowledge-section > .eyebrow, .topic-focus > .eyebrow { margin-bottom: .75rem; }
.knowledge-section h3 { font-size: 1.4rem; margin-top: 2rem; margin-bottom: 1rem; }
.knowledge-section h2, .knowledge-section h3 { hyphens: auto; overflow-wrap: anywhere; }
.source-reference { font-size: .85em; }
.symptom-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin: 2rem 0; }
.symptom-overview > div { border-top: 2px solid #b9d6ce; padding-top: 1rem; }
.symptom-overview dt { font-family: var(--dd-font-heading); font-size: 1.2rem; margin-bottom: .5rem; }
.symptom-overview dd { margin: 0; }
.medical-guidance { padding: 1.5rem; border-left: 4px solid #9e7544; background: #faf6ef; margin-top: 2rem; }
.medical-guidance h3 { margin-top: 0; }
.topic-focus { padding: clamp(1.5rem, 4vw, 2.5rem); background: #edf7f4; border-radius: 12px; border-top: 3px solid var(--dd-darkmint); }
.knowledge-table { --bs-table-bg: transparent; --bs-table-color: var(--dd-text); font-size: .95rem; }
.knowledge-table th, .knowledge-table td { padding: 1rem; vertical-align: top; }
.knowledge-table thead { background: #edf7f4; }
.knowledge-table th:first-child { width: 34%; }
.care-basics { padding-left: 1.3rem; }
.care-basics li + li { margin-top: .85rem; }
.content-navigation a, .knowledge-section a, .editorial-info a { overflow-wrap: anywhere; }
#quellen, #weiterlesen { scroll-margin-top: 1.5rem; }
@media (max-width: 575.98px) {
  .content-navigation ol, .symptom-overview { grid-template-columns: 1fr; }
  .knowledge-table th, .knowledge-table td { padding: .75rem .5rem; }
}
.brand-faq .accordion-item { border: 0; border-bottom: 1px solid #d9e9e3; }
.brand-faq .accordion-button { font: 600 1.15rem/1.4 var(--dd-font-heading); padding: 1.5rem 0; color: var(--dd-text); background: #fff; box-shadow: none; gap: 1rem; }
.brand-faq .accordion-button:not(.collapsed) { color: var(--dd-darkmint); }
.brand-faq .accordion-button:focus-visible { outline: 3px solid var(--dd-darkmint); outline-offset: 2px; }
.brand-faq .accordion-body { padding: 0 2rem 1.5rem 0; }
.home-next-step { padding: 0 0 4rem; }
.home-next-step .content-cta { padding: clamp(2rem, 6vw, 4rem); }
.home-next-step h2 { font-size: clamp(2rem, 3vw, 2.8rem); }
section[id] { scroll-margin-top: 1.5rem; }
@media (max-width: 991.98px) {
  .brand-navigation { margin-top: 1rem; }
  .brand-navigation .nav-link { padding: .75rem 0; }
  .page-home-index .brand-page-header .header-image { max-width: 210px; }
  .brand-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 3.5rem 0; }
}
@media (max-width: 575.98px) {
  .brand-facts { grid-template-columns: 1fr; gap: 1.25rem; }
}
