:root{--dp-forest:#153733;--dp-deep:#102a27;--dp-coral:#f87965;--dp-gold:#f4bd52;--dp-paper:#fffdf8;--dp-cream:#f3ede2;--dp-line:#d9d0c2;--dp-muted:#58716e;--dp-serif:"Playfair Display",Georgia,serif;--dp-sans:"DM Sans",Arial,sans-serif;--dp-content:1120px}
html{scroll-behavior:smooth}body{background:var(--dp-paper);color:var(--dp-forest);font-family:var(--dp-sans);font-size:16px;line-height:1.6}
.shell{width:min(var(--dp-content),calc(100% - 96px));margin-inline:auto}.narrow{width:min(880px,calc(100% - 96px));margin-inline:auto}
.site-header{height:82px;background:var(--dp-paper);border-bottom:1px solid var(--dp-line)}.nav-wrap,.header-inner{min-height:82px;height:82px}.logo img,.brand-logo{width:170px;height:auto}.site-header nav,.primary-nav{gap:30px}.site-header nav a,.primary-nav a,.nav-toggle{font-size:.84rem;font-weight:700}
.breadcrumb{padding-top:30px;font-size:.82rem;color:var(--dp-muted)}
h1,h2,h3,.display,.section-title{font-family:var(--dp-serif);letter-spacing:-.025em}p{color:var(--dp-muted)}
.eyebrow,.kicker{color:var(--dp-coral);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero{padding:54px 0 64px}
.hero-grid,.visual-hero-grid,.conditions-hero-grid,.treatment-hero-grid,.procedure-hero-grid,.dual-hero-grid,.case-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);gap:56px;align-items:center}
.hero h1,.visual-hero h1,.conditions-hero h1,.treatment-hero h1,.procedure-hero h1,.dual-hero h1,.case-hero h1{margin:14px 0 18px;font-family:var(--dp-serif);font-size:clamp(3.25rem,5.8vw,5.45rem);line-height:.94;letter-spacing:-.055em;color:var(--dp-forest);max-width:760px}
.hero h1 em,.visual-hero h1 em,.conditions-hero h1 em,.treatment-hero h1 em,.procedure-hero h1 em,.dual-hero h1 em,.case-hero h1 em{color:var(--dp-coral);font-weight:400}
.hero .lead,.visual-hero .lead,.conditions-hero .lead,.treatment-hero .lead,.procedure-hero .lead,.dual-hero .lead,.case-hero .lead{max-width:650px;font-size:1.12rem;line-height:1.65}
.btn,.button,.primary-button,.secondary-button{min-height:46px;border-radius:999px;font-family:var(--dp-sans);font-weight:800}
.band,.section{padding-block:68px}.band-head,.section-head{margin-bottom:32px}.band-head h2,.section-head h2,.band h2,.section h2{font-size:clamp(2.25rem,4vw,3.7rem);line-height:1.02;color:var(--dp-forest)}
.goal-strip{background:var(--dp-forest);color:#fff;padding:24px 0}.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.goal-grid>div{padding:0 24px;border-left:1px solid rgba(255,255,255,.25)}.goal-grid>div:first-child{border-left:0}.goal-grid b,.goal-grid strong,.goal-grid span{display:block}.goal-grid b,.goal-grid strong{font-family:var(--dp-serif);font-size:1.12rem}.goal-grid span{margin-top:4px;color:rgba(255,255,255,.82);font-size:.84rem}
.subnav,.section-nav,.page-nav{top:82px;background:rgba(255,253,248,.97);border-color:var(--dp-line)}
.band.cream,.band.lab,.case-band{background:var(--dp-cream);color:var(--dp-forest)}.band.lab h2,.band.lab h3,.band.lab p,.band.lab b,.band.lab strong,.band.lab span{color:var(--dp-forest)}
.band.dark,.deep-green{background:var(--dp-forest);color:#fff}.band.dark h2,.band.dark h3,.band.dark p,.deep-green h2,.deep-green h3,.deep-green p{color:#fff}
.card,.path-card,.topic-card,.condition-card,.treatment-card,.procedure-card,.case-card,.compare-panel,.lab-panel{border:1px solid var(--dp-line);border-radius:16px;background:#fff;box-shadow:none}
.lab-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:start}.lab-panel{padding:30px}.lab-model{background:var(--dp-forest);color:#fff;border-radius:12px}.lab-model h3,.lab-model p,.lab-model span,.lab-model b{color:#fff}
table{width:100%;border-collapse:collapse;background:#fff;color:var(--dp-forest)}th{background:var(--dp-forest);color:#fff;text-align:left}th,td{padding:16px;border-bottom:1px solid var(--dp-line)}td{color:var(--dp-forest)}
details{background:#fff;border:1px solid var(--dp-line);border-radius:12px;padding:16px 18px}details+details{margin-top:12px}summary{font-weight:800;color:var(--dp-forest)}
@media(max-width:1120px){.site-header .menu{display:block}.site-header nav{display:none;position:absolute;top:82px;left:0;right:0;padding:20px 24px;background:var(--dp-paper);flex-direction:column;align-items:stretch;border-bottom:1px solid var(--dp-line)}.site-header nav.open{display:flex}}
@media(max-width:980px){.shell,.narrow{width:min(100% - 48px,var(--dp-content))}.hero-grid,.visual-hero-grid,.conditions-hero-grid,.treatment-hero-grid,.procedure-hero-grid,.dual-hero-grid,.case-hero-grid{grid-template-columns:1fr;gap:36px}.goal-grid{grid-template-columns:repeat(2,1fr);row-gap:24px}.lab-grid{grid-template-columns:1fr}}
@media(max-width:700px){.shell,.narrow{width:calc(100% - 32px)}.site-header,.nav-wrap,.header-inner{height:72px;min-height:72px}.logo img,.brand-logo{width:145px}.site-header nav{top:72px}.hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero{padding:38px 0 48px}.hero h1,.visual-hero h1,.conditions-hero h1,.treatment-hero h1,.procedure-hero h1,.dual-hero h1,.case-hero h1{font-size:clamp(2.75rem,14vw,4rem)}.band,.section{padding-block:50px}.goal-grid{grid-template-columns:1fr}.goal-grid>div{border-left:0;border-top:1px solid rgba(255,255,255,.22);padding:16px 0}.goal-grid>div:first-child{border-top:0}.subnav,.section-nav,.page-nav{top:72px}}

/* One identical global header across all Learn Derm sub-pages. */
.dp-learn-shared-nav .dp-nav-button{text-decoration:none}
.dp-learn-shared-nav+.dp-learn-mobile a{color:var(--dp-forest);text-decoration:none}
.dp-learn-shared-nav+.dp-learn-mobile .dp-mobile-home{border-bottom:1px solid var(--dp-line);display:flex;font-size:15px;font-weight:800;padding:15px 0}
.dp-learn-shared-nav+.dp-learn-mobile .dp-mobile-group a{display:block;font-size:14px;font-weight:700;padding:10px 12px}
.dp-learn-shared-nav+.dp-learn-mobile .dp-mobile-group>b{color:var(--dp-gold);display:block;font-size:11px;letter-spacing:.14em;margin:14px 12px 4px}

/* Shared visual QA safeguards: diagrams stay centered, contained, and readable. */
figure{max-width:100%}
figure>svg,figure>canvas,.depth-visual>svg,.skin-map>svg{display:block;width:100%;max-width:100%;height:auto;margin-inline:auto}
.hero-visual,.hero-map,.hero-board,.hero-flow,.hero-framework{justify-self:center;width:100%;max-width:680px;margin-inline:auto}
figcaption{text-align:center;max-width:72ch;margin:.65rem auto 0}
.band.lab,.band.lab .section-head h2,.band.lab .section-head p,.band.lab .lab-result h3,.band.lab .lab-result p,.band.lab .lab-result b{color:var(--dp-forest)}
.band.lab .lab-result .model,.band.lab .lab-result .model *{color:#fff}
svg text{font-synthesis:none}
@media(max-width:700px){figure>svg,.depth-visual>svg,.skin-map>svg{min-width:0}.hero-visual,.hero-map,.hero-board,.hero-flow,.hero-framework{max-width:100%}}

.module-status-live{display:inline-flex;margin-top:12px;padding:6px 10px;border-radius:999px;background:#eef5f1;color:#173b35;font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

.module-status-note{display:inline-flex;margin-top:12px;padding:6px 10px;border-radius:999px;background:#f7f1e7;color:#52615d;font-size:.72rem;font-weight:700;line-height:1.35}