/* DermPrep Idea 9.36 — final shared UX / graphic design system */
:root{
  --dp936-forest:#0B4A3F;
  --dp936-dark:#083A32;
  --dp936-coral:#F07A62;
  --dp936-cream:#F7F1E7;
  --dp936-paper:#FFFDFC;
  --dp936-text:#173F38;
  --dp936-muted:#65736f;
  --dp936-gold:#B99A5E;
  --dp936-line:rgba(23,63,56,.16);
  --dp936-dark-text:#F7F1E7;
  --dp936-dark-muted:rgba(247,241,231,.78);
  --dp936-dark-divider:rgba(247,241,231,.16);
  --dp936-shell:1220px;
  --dp936-r-card:16px;
  --dp936-r-control:10px;
  --dp936-shadow-sm:0 5px 20px rgba(8,58,50,.045);
  --dp936-shadow-card:0 14px 36px rgba(8,58,50,.075);
  --dp936-shadow-overlay:0 24px 56px rgba(8,58,50,.16);
  --dp936-focus:0 0 0 3px rgba(240,122,98,.45);
}

/* True site shell: dark footer must visually own the bottom edge. */
html{
  min-height:100%;
  margin:0;
  background:var(--dp936-dark);
}
body.dp936-page{
  min-height:100dvh!important;
  margin:0!important;
  display:flex!important;
  flex-direction:column!important;
  background:var(--dp936-dark)!important;
}
body.dp936-page > header,
body.dp936-page > .dp-nav,
body.dp936-page > .dp-mobile-panel{
  flex:0 0 auto;
}
body.dp936-page > main{
  flex:0 0 auto;
  width:100%;
  background:#fffdf8;
}
body.dp936-page > .dp-global-footer{
  flex:0 0 auto;
  margin-top:auto!important;
  margin-bottom:0!important;
}
body.dp936-page::after,
.dp-global-footer::after{
  display:none!important;
  content:none!important;
}

/* Consistent editorial canvas */
body.dp936-page .shell,
body.dp936-page .pm-shell,
body.dp936-page .qp-shell,
body.dp936-page .dp-footer-inner,
body.dp936-page .dp-footer-bottom{
  width:min(var(--dp936-shell),calc(100% - 64px));
  margin-left:auto;
  margin-right:auto;
}

/* Quieter breadcrumbs */
body.dp936-page .breadcrumb,
body.dp936-page .pm-breadcrumb,
body.dp936-page .qp-breadcrumb{
  color:#71807b!important;
  font-size:.78rem!important;
  line-height:1.4!important;
  padding-top:20px!important;
  padding-bottom:8px!important;
}
body.dp936-page .breadcrumb a,
body.dp936-page .pm-breadcrumb a,
body.dp936-page .qp-breadcrumb a{
  color:#536762!important;
  text-decoration-color:rgba(83,103,98,.35)!important;
}

/* Signature Pimp Me reasoning panel */
body.dp936-page .dp936-pimp-signature{
  position:relative!important;
  overflow:hidden!important;
  min-height:0!important;
  padding:30px 32px 28px!important;
  border:0!important;
  border-radius:var(--dp936-r-card)!important;
  background:linear-gradient(145deg,var(--dp936-dark) 0%,var(--dp936-forest) 100%)!important;
  color:var(--dp936-dark-text)!important;
  box-shadow:var(--dp936-shadow-card)!important;
}
.dp936-kicker{
  margin:0 0 12px;
  color:var(--dp936-coral)!important;
  font:800 .68rem/1 "DM Sans",sans-serif!important;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.dp936-pimp-signature h2{
  position:relative;
  z-index:2;
  max-width:12ch;
  margin:0!important;
  color:var(--dp936-cream)!important;
  font:600 clamp(2.15rem,3.25vw,3rem)/.98 "Playfair Display",serif!important;
  letter-spacing:-.035em!important;
  text-wrap:balance;
}
.dp936-signature-lead{
  position:relative;
  z-index:2;
  max-width:46ch;
  margin:14px 0 22px!important;
  color:var(--dp936-dark-muted)!important;
  font:500 .94rem/1.55 "DM Sans",sans-serif!important;
}
.dp936-reasoning-path{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 10px;
  padding:14px 0 2px;
  border-top:1px solid var(--dp936-dark-divider);
}
.dp936-reasoning-path span{
  color:var(--dp936-cream);
  font:800 .72rem/1.2 "DM Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.dp936-reasoning-path span b{
  color:var(--dp936-coral);
  margin-right:5px;
  font-size:.66rem;
}
.dp936-reasoning-path i{
  color:var(--dp936-coral);
  font-style:normal;
  font-weight:800;
}
.dp936-signature-foot{
  position:relative;
  z-index:2;
  margin:18px 0 0!important;
  color:var(--dp936-cream)!important;
  font:700 .83rem/1.45 "DM Sans",sans-serif!important;
}
.dp936-derm-motif{
  position:absolute;
  right:-28px;
  bottom:-20px;
  width:240px;
  opacity:.08;
  pointer-events:none;
}
.dp936-derm-motif svg{
  width:100%;
  fill:none;
  stroke:var(--dp936-cream);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Calm Learn Derm signature */
.dp936-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.8fr);
  gap:48px!important;
  align-items:start!important;
}
.dp936-learn-signature{
  padding:26px 28px;
  border:1px solid var(--dp936-line);
  border-radius:var(--dp936-r-card);
  background:linear-gradient(145deg,#fffdfa 0%,#f8f1e6 100%);
  box-shadow:var(--dp936-shadow-sm);
}
.dp936-learn-signature h2{
  margin:0 0 10px;
  color:var(--dp936-forest);
  font:600 clamp(1.85rem,2.7vw,2.5rem)/1 "Playfair Display",serif;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.dp936-learn-signature > p:not(.dp936-kicker){
  margin:0;
  color:#536762;
  font:500 .92rem/1.55 "DM Sans",sans-serif;
}
.dp936-learn-path{
  margin-top:20px;
  padding-top:15px;
  border-top:1px solid rgba(23,63,56,.12);
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
  align-items:center;
  color:var(--dp936-forest);
  font:800 .7rem/1.25 "DM Sans",sans-serif;
  text-transform:uppercase;
  letter-spacing:.045em;
}
.dp936-learn-path i{font-style:normal;color:var(--dp936-coral)}

/* Reduce generic boxiness while retaining clear interactive affordance */
body.dp936-page a.featured-card,
body.dp936-page .pm-card,
body.dp936-page .pm932-mode-card,
body.dp936-page .pm930-card{
  border-color:var(--dp936-line)!important;
  border-radius:var(--dp936-r-card)!important;
  box-shadow:var(--dp936-shadow-sm)!important;
}
body.dp936-page a.featured-card:hover,
body.dp936-page .pm-card:hover,
body.dp936-page .pm932-mode-card:hover,
body.dp936-page .pm930-card:hover{
  border-color:rgba(240,122,98,.42)!important;
  box-shadow:var(--dp936-shadow-card)!important;
  transform:translateY(-2px);
}

/* Focus as brand, without suppressing accessibility */
body.dp936-page a:focus-visible,
body.dp936-page button:focus-visible,
body.dp936-page select:focus-visible,
body.dp936-page input:focus-visible,
body.dp936-page textarea:focus-visible{
  outline:3px solid rgba(240,122,98,.58)!important;
  outline-offset:3px!important;
}

/* Canonical controls */
body.dp936-page input,
body.dp936-page select,
body.dp936-page textarea{
  border-radius:var(--dp936-r-control)!important;
  border-color:rgba(23,63,56,.24)!important;
}
body.dp936-page .button,
body.dp936-page .pm-button,
body.dp936-page .qp-primary,
body.dp936-page button[type="submit"]{
  min-height:44px;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
body.dp936-page .button:hover,
body.dp936-page .pm-button:hover,
body.dp936-page .qp-primary:hover,
body.dp936-page button[type="submit"]:hover{
  transform:translateY(-1px);
}

/* Compact pre-footers / continuation regions */
body.dp936-page .pm930-continuation{
  padding-top:34px!important;
  padding-bottom:34px!important;
}
body.dp936-page .pm930-continuation h2{
  font-size:clamp(1.8rem,3vw,2.6rem)!important;
}
body.dp936-page .pm930-continuation-copy{
  display:none!important;
}

/* Canonical global footer */
.dp-global-footer{
  width:100%;
  background:var(--dp936-dark)!important;
  color:var(--dp936-dark-text)!important;
  font-family:"DM Sans",Arial,sans-serif;
  padding:30px 0 20px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.dp-global-footer .dp-footer-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:start;
}
.dp-footer-brand{max-width:520px}
.dp-footer-logo-plate{
  display:inline-flex!important;
  padding:7px 10px!important;
  border-radius:8px!important;
  background:var(--dp936-cream)!important;
  text-decoration:none!important;
}
.dp-footer-logo{
  display:block!important;
  width:138px!important;
  height:auto!important;
  filter:none!important;
  opacity:1!important;
}
.dp-footer-desc{
  margin:12px 0 0!important;
  max-width:46ch;
  color:var(--dp936-dark-muted)!important;
  font-size:.82rem!important;
  line-height:1.55!important;
}
.dp-footer-nav{
  display:flex!important;
  flex-wrap:wrap;
  justify-content:flex-end!important;
  gap:10px 18px!important;
  padding-top:5px;
}
.dp-footer-nav a{
  font-size:.77rem!important;
  font-weight:800!important;
  text-decoration:none!important;
}
.dp-footer-bottom{
  margin-top:22px!important;
  padding-top:15px!important;
  border-top:1px solid var(--dp936-dark-divider)!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-end!important;
  gap:28px!important;
}
.dp-footer-legal,
.dp-footer-trust{
  margin:0!important;
  color:var(--dp936-dark-muted)!important;
  font-size:.68rem!important;
  line-height:1.5!important;
}
.dp-footer-trust{margin-top:4px!important}
.dp-footer-email{
  white-space:nowrap;
  font-size:.72rem!important;
  font-weight:800!important;
}
.dp-global-footer a,
.dp-global-footer a:link,
.dp-global-footer a:visited{
  color:var(--dp936-cream)!important;
  -webkit-text-fill-color:var(--dp936-cream)!important;
  text-decoration-color:rgba(247,241,231,.42)!important;
  text-underline-offset:3px!important;
}
.dp-global-footer a:hover,
.dp-global-footer a:focus-visible{
  color:var(--dp936-coral)!important;
  -webkit-text-fill-color:var(--dp936-coral)!important;
  text-decoration-color:var(--dp936-coral)!important;
}

/* Dark surfaces share one link language */
body.dp936-page .pm930-education a,
body.dp936-page .pm930-education a:visited,
body.dp936-page .pm-trust a,
body.dp936-page .pm-trust a:visited{
  color:var(--dp936-cream)!important;
}
body.dp936-page .pm930-education a:hover,
body.dp936-page .pm930-education a:focus-visible,
body.dp936-page .pm-trust a:hover,
body.dp936-page .pm-trust a:focus-visible{
  color:var(--dp936-coral)!important;
}

/* Avoid browser-purple visited links in branded interactive regions */
body.dp936-page main a:visited{
  color:inherit;
}
body.dp936-page main .button:visited,
body.dp936-page main .pm-button:visited,
body.dp936-page main .pm-card:visited,
body.dp936-page main .featured-card:visited{
  color:inherit!important;
}

/* Remove any visual footprint from developer-style report links if legacy JS/cache injects one */
body.dp936-page .dp-report-link{display:none!important}

/* Sources anchor should clear sticky nav */
body.dp936-page #sources{scroll-margin-top:96px}

/* Responsive composition */
@media (max-width:900px){
  .dp936-hero-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .dp936-pimp-signature{padding:26px!important}
  .dp-global-footer .dp-footer-inner{
    grid-template-columns:1fr!important;
    gap:24px!important;
  }
  .dp-footer-nav{
    justify-content:flex-start!important;
  }
}
@media (max-width:640px){
  body.dp936-page .shell,
  body.dp936-page .pm-shell,
  body.dp936-page .qp-shell,
  body.dp936-page .dp-footer-inner,
  body.dp936-page .dp-footer-bottom{
    width:min(100% - 32px,var(--dp936-shell))!important;
  }
  .dp936-pimp-signature{
    padding:22px 20px!important;
    border-radius:14px!important;
  }
  .dp936-pimp-signature h2{
    font-size:clamp(1.9rem,10vw,2.55rem)!important;
  }
  .dp936-reasoning-path{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .dp936-reasoning-path i{display:none}
  .dp936-reasoning-path span{
    padding:9px 0;
    border-top:1px solid rgba(247,241,231,.1);
  }
  .dp936-derm-motif{display:none}
  .dp936-learn-signature{padding:22px 20px}
  .dp-global-footer{
    padding:26px 0 18px!important;
  }
  .dp-footer-nav{
    display:grid!important;
    grid-template-columns:1fr 1fr;
    gap:0!important;
    margin-top:4px;
  }
  .dp-footer-nav a{
    display:flex;
    align-items:center;
    min-height:44px;
  }
  .dp-footer-bottom{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:14px!important;
  }
  .dp-footer-email{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  body.dp936-page *,
  .dp-nav *{
    transition:none!important;
    scroll-behavior:auto!important;
  }
  body.dp936-page a.featured-card:hover,
  body.dp936-page .pm-card:hover,
  body.dp936-page .pm932-mode-card:hover,
  body.dp936-page .pm930-card:hover,
  body.dp936-page .button:hover,
  body.dp936-page .pm-button:hover{
    transform:none!important;
  }
}
@media print{
  html,body.dp936-page{background:#fff!important}
  .dp-global-footer{
    background:#fff!important;
    color:#111!important;
    border-top:1px solid #bbb!important;
    padding:14px 0!important;
  }
  .dp-global-footer *{color:#111!important}
  .dp-footer-logo-plate{background:#fff!important;padding:0!important}
}