/* Shared Skin spoke layout
   Used by Procell, Acne, Melasma, Chemical Peels, and PRP Skin Rejuvenation.
   Global header, footer, buttons, tokens, skip link, and Explore Page navigation
   remain owned by shared site styles. */

.skin-page {
  color: var(--ink);
  background: var(--white);
}

/* Hero */
.skin-hero {
  padding: 78px 0 62px;
  background: linear-gradient(135deg, #fff 0%, var(--ivory) 72%, #f4efe7 100%);
  border-bottom: 1px solid rgba(23, 23, 23, .08);
}

.skin-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 46px;
  align-items: center;
}

.skin-eyebrow {
  margin: 0 0 22px;
  color: var(--gold-dark);
  font: 600 13px/1.3 var(--sans);
  letter-spacing: .27em;
  text-transform: uppercase;
}

.skin-hero h1,
.skin-section h2,
.skin-callout h2 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.035em;
}

.skin-hero h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(44px, 4.4vw, 55px);
  line-height: 1.12;
}

.skin-hero h1 em,
.skin-section h2 em,
.skin-callout h2 em {
  color: var(--gold-dark);
  font-weight: 400;
  font-style: italic;
  letter-spacing: .055em;
}

.skin-rule {
  width: 74px;
  height: 1px;
  margin: 18px 0 20px;
  background: var(--gold);
}

.skin-hero__lead {
  max-width: 740px;
  margin: 0 0 25px;
  color: #443c34;
  font: 400 19px/1.55 var(--serif);
}

.skin-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.skin-card {
  padding: 28px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(166, 124, 55, .25);
  box-shadow: 0 16px 44px rgba(34, 25, 11, .055);
}

.skin-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--bronze);
  font: 400 22px/1.25 var(--serif);
}

.skin-card p {
  margin: 0;
  color: #484848;
  font: 400 14.5px/1.66 var(--sans);
}

/* Section typography and cards */
.skin-section {
  padding: 64px 0;
}

.skin-section--soft {
  background: var(--ivory);
}

.skin-section--pearl {
  background: #f1ece4;
}

.skin-section__head {
  max-width: 820px;
  margin-bottom: 29px;
}

.skin-section__head > .skin-eyebrow {
  margin-bottom: 28px;
}

.skin-section__head--center {
  margin: 0 auto 34px;
  text-align: center;
}

.skin-section h2,
.skin-callout h2 {
  margin: 0 0 14px;
  font-size: clamp(34px, 3.3vw, 40px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.skin-intro {
  margin: 0;
  color: #414141;
  font: 400 16.5px/1.7 var(--sans);
}

.skin-text-link {
  color: var(--bronze);
  font-weight: 600;
}

.skin-text-link:hover,
.skin-text-link:focus-visible {
  color: var(--gold-dark);
}

.skin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.skin-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.skin-item {
  min-height: 100%;
  padding: 25px;
  background: #fff;
  border: 1px solid rgba(23, 23, 23, .11);
  box-shadow: 0 10px 28px rgba(34, 25, 11, .025);
}

.skin-item h3 {
  margin: 0 0 10px;
  color: var(--bronze);
  font: 400 23px/1.2 var(--serif);
}

.skin-item p,
.skin-item li {
  color: #464646;
  font: 400 14.5px/1.66 var(--sans);
}

.skin-item p:last-child {
  margin-bottom: 0;
}

.skin-item a {
  color: var(--bronze);
  font-weight: 600;
}

.skin-list {
  margin: 12px 0 0;
  padding-left: 19px;
}

/* Four-step treatment pathway */
.skin-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(23, 23, 23, .12);
  box-shadow: 0 10px 30px rgba(34, 25, 11, .025);
}

.skin-path__step {
  padding: 23px;
  background: #fff;
  border-right: 1px solid rgba(23, 23, 23, .12);
}

.skin-path__step:last-child {
  border-right: 0;
}

.skin-path__n {
  display: block;
  margin-bottom: 9px;
  color: var(--gold-dark);
  font: 600 11px var(--sans);
  letter-spacing: .14em;
}

.skin-path__step strong {
  display: block;
  margin-bottom: 7px;
  color: var(--bronze);
  font: 400 20px var(--serif);
}

.skin-path__step span {
  color: #555;
  font: 400 13.5px/1.58 var(--sans);
}

/* Comparison tables */
.skin-comparison {
  overflow-x: auto;
  background: #fff;
  border: 1px solid rgba(23, 23, 23, .09);
}

.skin-comparison table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.skin-comparison th,
.skin-comparison td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(23, 23, 23, .1);
  font: 400 14px/1.55 var(--sans);
  text-align: left;
  vertical-align: top;
}

.skin-comparison tr:last-child td {
  border-bottom: 0;
}

.skin-comparison th {
  color: var(--bronze);
  background: #fbfaf7;
  font-weight: 700;
}

.skin-note {
  max-width: 900px;
  padding: 4px 0 4px 20px;
  color: #3e3e3e;
  border-left: 3px solid var(--gold);
  font: 400 15.5px/1.65 var(--sans);
}

/* FAQ */
.skin-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.skin-faq details {
  padding: 18px 20px;
  background: #fff;
  border: 1px solid rgba(23, 23, 23, .12);
}

.skin-faq summary {
  color: var(--bronze);
  font: 600 15px/1.4 var(--sans);
  cursor: pointer;
}

.skin-faq details p {
  margin: 12px 0 0;
  color: #4c4c4c;
  font: 400 14px/1.65 var(--sans);
}

/* Final location CTA */
.skin-callout {
  padding: 60px 0;
  color: #fff;
  background: #1f1d1a;
}

.skin-callout h2 {
  color: #fff;
}

/* Brighter brand gold is reserved for emphasis on dark Skin callouts. */
.skin-callout h2 em,
.skin-callout .skin-eyebrow {
  color: #e0ad44;
}

.skin-callout p {
  max-width: 760px;
  color: #e8e1d5;
  font: 400 15.5px/1.65 var(--sans);
}

.skin-callout__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 34px;
  align-items: center;
}

.skin-location-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.skin-mini {
  color: #666;
  font: 400 13px/1.6 var(--sans);
}

.skin-page header .book {
  white-space: nowrap;
}

.skin-page section[id] {
  scroll-margin-top: 24px;
}

/* Tablet */
@media(max-width: 900px) {
  .skin-hero {
    padding: 68px 0 56px;
  }

  .skin-hero__grid,
  .skin-callout__grid {
    grid-template-columns: 1fr;
  }

  .skin-grid {
    grid-template-columns: 1fr 1fr;
  }

  .skin-path {
    grid-template-columns: 1fr 1fr;
  }

  .skin-path__step {
    border-right: 1px solid rgba(23, 23, 23, .12);
    border-bottom: 1px solid rgba(23, 23, 23, .12);
  }

  .skin-path__step:nth-child(even) {
    border-right: 0;
  }

  .skin-path__step:nth-last-child(-n+2) {
    border-bottom: 0;
  }
}

/* Mobile */
@media(max-width: 640px) {
  .skin-hero {
    padding: 56px 0 48px;
  }

  .skin-hero h1 {
    font-size: clamp(38px, 10.4vw, 48px);
  }

  .skin-hero h1 em,
  .skin-section h2 em,
  .skin-callout h2 em {
    letter-spacing: .035em;
  }

  .skin-eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
    letter-spacing: .22em;
  }

  .skin-hero__lead {
    font-size: 17px;
  }

  .skin-section {
    padding: 50px 0;
  }

  .skin-section__head {
    margin-bottom: 24px;
  }

  .skin-section h2,
  .skin-callout h2 {
    font-size: clamp(28px, 7.8vw, 32px);
  }

  .skin-grid,
  .skin-grid--2,
  .skin-faq,
  .skin-path {
    grid-template-columns: 1fr;
  }

  .skin-path__step,
  .skin-path__step:nth-child(even),
  .skin-path__step:nth-last-child(-n+2) {
    border-right: 0;
    border-bottom: 1px solid rgba(23, 23, 23, .12);
  }

  .skin-path__step:last-child {
    border-bottom: 0;
  }

  .skin-actions,
  .skin-location-links {
    flex-direction: column;
  }

  .skin-actions .pb-btn,
  .skin-location-links .pb-btn {
    width: 100%;
    text-align: center;
  }

  .skin-callout {
    padding: 52px 0;
  }
}