/* DermPrep Idea 9.41 — Learn Derm + Resources canonical subpage system */
:root{
  --dp941-hero-max:620px;
  --dp941-hero-max-long:680px;
  --dp941-canonical-h1:clamp(3.35rem,5vw,5.15rem);
  --dp941-forest:#0B4A3F;
  --dp941-dark:#083A32;
  --dp941-coral:#F07A62;
  --dp941-cream:#F7F1E7;
  --dp941-paper:#FFFDF8;
  --dp941-text:#173F38;
  --dp941-muted:#5F706B;
  --dp941-line:rgba(23,63,56,.16);
  --dp941-header-offset:72px;
}

/* ---------- One canonical Learn Derm / Resources hero hierarchy ---------- */
body.dp-learn-page :is(.tomorrow-hero,.foundations-hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero,.hero) h1,
body.dp-resource-page .resource-hero h1{
  max-width:var(--dp941-hero-max)!important;
  margin:14px 0 18px!important;
  font-family:"Playfair Display",Georgia,serif!important;
  font-size:var(--dp941-canonical-h1)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
  text-wrap:balance!important;
  color:var(--dp941-forest)!important;
  -webkit-text-fill-color:var(--dp941-forest)!important;
}
body.dp-learn-page :is(.tomorrow-hero,.foundations-hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero,.hero) h1 em,
body.dp-resource-page .resource-hero h1 em{
  color:var(--dp941-coral)!important;
  -webkit-text-fill-color:var(--dp941-coral)!important;
  font-size:.95em!important;
  font-weight:500!important;
  line-height:inherit!important;
}
/* Landing page remains slightly more editorial, but uses the same relationship. */
body.dp-learn-page .hub-hero h1{
  max-width:var(--dp941-hero-max-long)!important;
  font-size:clamp(3.55rem,5.2vw,5.35rem)!important;
  line-height:.96!important;
  letter-spacing:-.045em!important;
  text-wrap:balance!important;
}
body.dp-learn-page .hub-hero h1 em{font-size:.95em!important;font-weight:500!important}
body.dp-learn-page .hub-hero{padding-top:46px!important;padding-bottom:42px!important}
body.dp-learn-page .hub-hero + .section{padding-top:54px!important}

/* Standard hero grids. Tomorrow Mode remains intentionally one-column. */
body.dp-learn-page :is(.foundations-hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero,.hero:not(.tomorrow-hero)){
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)!important;
  gap:48px!important;
  align-items:center!important;
}
body.dp-resource-page .resource-hero{
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)!important;
  gap:48px!important;
  align-items:center!important;
}
body.dp-resource-page .resource-hero-copy{max-width:var(--dp941-hero-max-long)!important}
body.dp-resource-page .resource-mark{min-height:260px!important;border-radius:22px!important}

/* Shared hero vertical rhythm. */
body.dp-learn-page :is(.tomorrow-hero,.foundations-hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero,.hero:not(.hub-hero)){
  padding-top:46px!important;
  padding-bottom:56px!important;
}
body.dp-resource-page .resource-hero.shell{padding-top:46px!important;padding-bottom:48px!important}

/* Eyebrow / breadcrumb / CTA consistency. */
body.dp-learn-page .eyebrow,
body.dp-resource-page .eyebrow{
  color:var(--dp941-coral)!important;
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:.72rem!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
}
body.dp-learn-page .breadcrumb,
body.dp-resource-page .breadcrumb{
  margin-bottom:0!important;
  color:#6A7A76!important;
  font-size:.8rem!important;
}
body.dp-learn-page .actions a,
body.dp-learn-page .actions button,
body.dp-resource-page .resource-hero a.back{
  min-height:44px!important;
  align-items:center!important;
}

/* Goal/info bands: same visual height and rhythm. */
body.dp-learn-page .goal-strip{padding:22px 0!important}
body.dp-learn-page .goal-grid{align-items:stretch!important}
body.dp-learn-page .goal-grid>div{padding:2px 24px!important;display:flex!important;flex-direction:column!important;justify-content:center!important}
body.dp-learn-page .goal-grid b,
body.dp-learn-page .goal-grid strong{font-size:1.08rem!important}
body.dp-learn-page .goal-grid span{font-size:.82rem!important;line-height:1.45!important}

/* ---------- Secondary sticky navigation / anchor overlap ---------- */
body.dp-learn-page :is(.procedure-nav,.foundation-nav,.visual-nav,.condition-nav,.treatment-nav,.page-nav){
  top:var(--dp941-header-offset)!important;
  z-index:20!important;
}
body.dp-learn-page section[id],
body.dp-learn-page div[id]{scroll-margin-top:148px!important}
body.dp-learn-page .procedure-nav + .section{padding-top:70px!important}

/* ---------- Procedures biopsy schematic: protected label rail ---------- */
body.dp-learn-page .depth-visual{
  padding:24px!important;
  overflow:hidden!important;
}
body.dp-learn-page .depth-visual svg{
  display:block!important;
  width:100%!important;
  height:auto!important;
  overflow:visible!important;
}
body.dp-learn-page .depth-visual text{
  font-family:"DM Sans",Arial,sans-serif!important;
  font-size:13px!important;
  font-weight:800!important;
  fill:var(--dp941-text)!important;
}
body.dp-learn-page .depth-visual .layer-label{
  font-size:12px!important;
  font-weight:700!important;
}
body.dp-learn-page .depth-visual p{
  margin:14px 0 0!important;
  color:var(--dp941-muted)!important;
  font-size:10.5px!important;
  line-height:1.45!important;
}

/* ---------- Communication Across Levels: light card must be readable ---------- */
body.dp-learn-page .audience-output{
  background:#FFFDFC!important;
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
  border:1px solid rgba(23,63,56,.10)!important;
  box-shadow:none!important;
}
body.dp-learn-page .audience-output :is(h1,h2,h3,h4,p,li,strong,span){
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
  opacity:1!important;
}
body.dp-learn-page .audience-output p{color:#405D57!important;-webkit-text-fill-color:#405D57!important}
body.dp-learn-page .audience-tabs button{
  background:#FFFDFC!important;
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
  border-color:var(--dp941-text)!important;
}
body.dp-learn-page .audience-tabs button.active{
  background:var(--dp941-coral)!important;
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
  border-color:var(--dp941-coral)!important;
}
body.dp-learn-page .audience-tabs button:hover,
body.dp-learn-page .audience-tabs button:focus-visible{
  border-color:var(--dp941-coral)!important;
  color:var(--dp941-coral)!important;
  -webkit-text-fill-color:var(--dp941-coral)!important;
}
body.dp-learn-page .audience-tabs button.active:hover,
body.dp-learn-page .audience-tabs button.active:focus-visible{
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
}

/* General protection: light cards nested in dark bands must use dark text. */
body.dp-learn-page .deep-green :is(.audience-output,.light-card,.rapid-card,.finder),
body.dp-learn-page .deep-green :is(.audience-output,.light-card,.rapid-card,.finder) :is(h1,h2,h3,h4,p,li,strong,span,label){
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
}

/* ---------- Homepage learning→practice handoff ---------- */
body.dp937-page #root .bottom{
  min-height:0!important;
  height:auto!important;
  padding:52px max(32px,6vw)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:42px!important;
  background:#0B4A3F!important;
  border-bottom:1px solid rgba(247,241,231,.18)!important;
}
body.dp937-page #root .bottom>div{max-width:760px!important}
body.dp937-page #root .bottom span{
  color:var(--dp941-coral)!important;
  font-weight:900!important;
  letter-spacing:.14em!important;
}
body.dp937-page #root .bottom h2{
  margin:10px 0 12px!important;
  max-width:760px!important;
  color:var(--dp941-cream)!important;
  -webkit-text-fill-color:var(--dp941-cream)!important;
  font-size:clamp(2.6rem,4vw,4.15rem)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
}
body.dp937-page #root .bottom h2 em{color:var(--dp941-cream)!important;-webkit-text-fill-color:var(--dp941-cream)!important;font-weight:500!important}
body.dp937-page #root .bottom .handoff-copy{
  margin:0!important;
  max-width:54ch!important;
  color:rgba(247,241,231,.84)!important;
  -webkit-text-fill-color:rgba(247,241,231,.84)!important;
  font-size:1rem!important;
  line-height:1.55!important;
}
body.dp937-page #root .bottom .cta.light{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  padding:0 20px!important;
  background:var(--dp941-cream)!important;
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
  border-radius:10px!important;
  text-decoration:none!important;
  font-weight:800!important;
}
body.dp937-page #root .bottom .cta.light:hover,
body.dp937-page #root .bottom .cta.light:focus-visible{
  background:var(--dp941-coral)!important;
  color:var(--dp941-text)!important;
  -webkit-text-fill-color:var(--dp941-text)!important;
}

/* Resource page hero typography exactly matches Learn Derm subpages. */
body.dp-resource-page .resource-hero h1{max-width:var(--dp941-hero-max)!important}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  body.dp-learn-page :is(.foundations-hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero,.hero:not(.tomorrow-hero):not(.hub-hero)),
  body.dp-resource-page .resource-hero{
    grid-template-columns:1fr!important;
    gap:30px!important;
  }
  body.dp-learn-page :is(.hero-visual,.resource-mark),
  body.dp-resource-page .resource-mark{max-width:680px!important}
}
@media(max-width:700px){
  body.dp-learn-page :is(.tomorrow-hero,.foundations-hero,.visual-hero,.conditions-hero,.treatment-hero,.procedure-hero,.dual-hero,.case-hero,.hero) h1,
  body.dp-resource-page .resource-hero h1{
    max-width:100%!important;
    font-size:clamp(2.75rem,13vw,3.8rem)!important;
    line-height:.97!important;
  }
  body.dp-learn-page .hub-hero h1{font-size:clamp(2.9rem,13.5vw,4rem)!important}
  body.dp-learn-page .depth-visual{
    padding:16px!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
  body.dp-learn-page .depth-visual svg{
    min-width:680px!important;
    width:680px!important;
  }
  body.dp937-page #root .bottom{
    padding:36px 24px!important;
    display:block!important;
  }
  body.dp937-page #root .bottom h2{font-size:clamp(2.35rem,11vw,3.35rem)!important}
  body.dp937-page #root .bottom .cta.light{margin-top:22px!important}
}
@media(prefers-reduced-motion:reduce){
  body.dp937-page #root .bottom .cta.light{transition:none!important}
}