/*
  Stabilized L1 proof pass for Nails, Body, and Wellness.
  Shared by design: same grid, same scale, same section rhythm.
*/

.nails-page,
.body-page,
.wellness-page {
  --lp-page: min(100% - 44px, 1180px);
  --lp-section: clamp(78px, 10vw, 128px);
  --lp-gap: clamp(26px, 4vw, 56px);
  --lp-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lp-rule: var(--rule, rgba(240, 220, 210, 0.14));
  --lp-rule-strong: var(--rule-2, rgba(240, 220, 210, 0.22));
  --lp-panel: rgba(255, 244, 235, 0.04);
  --lp-panel-2: rgba(255, 244, 235, 0.065);
}

.nails-page {
  --lp-accent: #c4687a;
  --lp-accent-2: #f0a5b6;
  --lp-index-bg: #f0d2da;
  --lp-index-card: #f7dfe5;
  --lp-index-feature: #e6bdc9;
  --lp-index-ink: #2a121b;
  --lp-hero-position: center 48%;
}

.body-page {
  --lp-accent: #d4956a;
  --lp-accent-2: #e2b78e;
  --lp-index-bg: #ebd6c1;
  --lp-index-card: #f3e1ce;
  --lp-index-feature: #ddbd9a;
  --lp-index-ink: #2d190e;
  --lp-hero-position: center 42%;
}

.wellness-page {
  --lp-accent: #c58a8a;
  --lp-accent-2: #d9b896;
  --lp-index-bg: #ead6c6;
  --lp-index-card: #f2e2d4;
  --lp-index-feature: #dcc0a8;
  --lp-index-ink: #2a1712;
  --lp-hero-position: center 45%;
}

.nails-page .container,
.body-page .container,
.wellness-page .container {
  max-width: none;
  width: var(--lp-page);
  padding-inline: 0;
}

.nails-page .topbar .container,
.body-page .topbar .container,
.wellness-page .topbar .container,
.nails-page .crumb.container,
.body-page .crumb.container,
.wellness-page .crumb.container {
  width: min(100% - 44px, 1240px);
}

.nails-page .topbar,
.body-page .topbar,
.wellness-page .topbar {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}

.nails-page .hero,
.body-page .hero,
.wellness-page .hero {
  position: relative;
  min-height: clamp(560px, 76dvh, 720px);
  height: auto;
  max-height: none;
  display: grid;
  align-items: end;
  overflow: hidden;
  padding-block: clamp(58px, 7vw, 86px) clamp(58px, 7vw, 88px);
}

.nails-page .hero::before,
.body-page .hero::before,
.wellness-page .hero::before {
  background:
    linear-gradient(90deg, rgba(15, 13, 11, 0.9), rgba(15, 13, 11, 0.66) 54%, rgba(15, 13, 11, 0.42)),
    radial-gradient(circle at 76% 36%, color-mix(in srgb, var(--lp-accent) 18%, transparent), transparent 28rem),
    linear-gradient(180deg, rgba(15, 13, 11, 0.08), rgba(15, 13, 11, 0.84)) !important;
}

.nails-page .hero-bg-img,
.body-page .hero-bg-img,
.wellness-page .hero-bg-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lp-hero-position);
  filter: saturate(0.86) contrast(1.05) brightness(0.72);
}

.nails-page .hero .container,
.body-page .hero .container,
.wellness-page .hero .container {
  position: relative;
  z-index: 3;
  max-width: none;
}

.nails-page .hero-eyebrow,
.body-page .hero-eyebrow,
.wellness-page .hero-eyebrow,
.nails-page .editorial-label,
.body-page .editorial-label,
.wellness-page .editorial-label,
.nails-page .index-card small,
.body-page .index-card small,
.wellness-page .index-card small,
.nails-page .diag-item small,
.body-page .diag-item small,
.wellness-page .diag-item small {
  color: var(--lp-accent-2);
  letter-spacing: 0.2em;
}

.nails-page .hero h1,
.body-page .hero h1,
.wellness-page .hero h1 {
  max-width: 10.4ch;
  font-size: clamp(58px, 7.2vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.nails-page .hero h1 em,
.body-page .hero h1 em,
.wellness-page .hero h1 em,
.nails-page .editorial-head h2 em,
.body-page .editorial-head h2 em,
.wellness-page .editorial-head h2 em {
  color: var(--lp-accent-2);
}

.nails-page .hero-deck,
.body-page .hero-deck,
.wellness-page .hero-deck {
  max-width: 54ch;
  margin-top: 24px;
  padding-left: 24px;
  border-left: 1px solid color-mix(in srgb, var(--lp-accent-2) 58%, transparent);
  font-size: clamp(15.5px, 1.35vw, 18px);
  line-height: 1.64;
}

.nails-page .hero-meta,
.body-page .hero-meta,
.wellness-page .hero-meta {
  max-width: 660px;
  margin-top: 28px;
}

.nails-page .hero-meta span,
.body-page .hero-meta span,
.wellness-page .hero-meta span {
  background: rgba(15, 13, 11, 0.54);
  border-color: rgba(255, 244, 235, 0.18);
}

.nails-page .diagnostic,
.body-page .diagnostic,
.wellness-page .diagnostic {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lp-accent) 8%, transparent), transparent 48%),
    rgba(255, 244, 235, 0.025);
}

.nails-page .diagnostic .container,
.body-page .diagnostic .container,
.wellness-page .diagnostic .container {
  width: var(--lp-page);
}

.nails-page .diag-item,
.body-page .diag-item,
.wellness-page .diag-item {
  min-height: 150px;
  padding: 26px;
}

.nails-page .visual-strip,
.body-page .visual-strip,
.wellness-page .visual-strip {
  padding-block: clamp(18px, 3vw, 36px) clamp(50px, 6vw, 76px);
  background:
    linear-gradient(180deg, rgba(255, 244, 235, 0.025), transparent 72%),
    color-mix(in srgb, var(--paper) 90%, black);
}

.nails-page .visual-strip .container,
.body-page .visual-strip .container,
.wellness-page .visual-strip .container {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  align-items: end;
}

.nails-page .visual-card,
.body-page .visual-card,
.wellness-page .visual-card {
  position: relative;
  min-height: 320px;
  overflow: hidden;
  border: 1px solid var(--lp-rule);
  background: rgba(255, 244, 235, 0.04);
}

.nails-page .visual-card:nth-child(2),
.body-page .visual-card:nth-child(2),
.wellness-page .visual-card:nth-child(2) {
  min-height: 250px;
  transform: translateY(28px);
}

.nails-page .visual-card:nth-child(3),
.body-page .visual-card:nth-child(3),
.wellness-page .visual-card:nth-child(3) {
  min-height: 380px;
}

.nails-page .visual-card img,
.body-page .visual-card img,
.wellness-page .visual-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04);
  transition: transform 800ms var(--lp-ease), filter 800ms var(--lp-ease);
}

.nails-page .visual-card::after,
.body-page .visual-card::after,
.wellness-page .visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, rgba(15, 13, 11, 0.78));
}

.nails-page .visual-card span,
.body-page .visual-card span,
.wellness-page .visual-card span {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: #fff4eb;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.35;
  text-transform: uppercase;
}

.nails-page .visual-card:hover img,
.body-page .visual-card:hover img,
.wellness-page .visual-card:hover img {
  transform: scale(1.035);
  filter: saturate(1) contrast(1.08);
}

.nails-page .editorial-section,
.body-page .editorial-section,
.wellness-page .editorial-section,
.nails-page .index,
.body-page .index,
.wellness-page .index {
  padding-block: var(--lp-section);
}

.nails-page .editorial-head,
.body-page .editorial-head,
.wellness-page .editorial-head,
.nails-page .split,
.body-page .split,
.wellness-page .split {
  gap: var(--lp-gap);
}

.nails-page .editorial-head h2,
.body-page .editorial-head h2,
.wellness-page .editorial-head h2,
.nails-page .index-card h2,
.body-page .index-card h2,
.wellness-page .index-card h2 {
  font-size: clamp(42px, 5.8vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

.nails-page .editorial-head p,
.body-page .editorial-head p,
.wellness-page .editorial-head p {
  max-width: 58ch;
  font-size: clamp(15.5px, 1.35vw, 17px);
  line-height: 1.72;
}

.nails-page .pathways,
.body-page .pathways,
.wellness-page .pathways {
  gap: 14px;
}

.nails-page .pathway,
.body-page .pathway,
.wellness-page .pathway {
  min-height: 0;
  border-color: var(--lp-rule);
  background: var(--lp-panel);
}

@media (min-width: 880px) {
  .nails-page .pathway,
  .nails-page .pathway:nth-child(even),
  .body-page .pathway,
  .body-page .pathway:nth-child(even),
  .wellness-page .pathway,
  .wellness-page .pathway:nth-child(even) {
    grid-template-columns: 0.28fr minmax(0, 1fr) 0.34fr;
  }
}

.nails-page .path-num,
.nails-page .path-copy,
.nails-page .path-aside,
.body-page .path-num,
.body-page .path-copy,
.body-page .path-aside,
.wellness-page .path-num,
.wellness-page .path-copy,
.wellness-page .path-aside {
  padding: 26px;
}

.nails-page .path-copy h3,
.body-page .path-copy h3,
.wellness-page .path-copy h3 {
  font-size: clamp(34px, 4vw, 52px);
}

.nails-page .path-copy p,
.body-page .path-copy p,
.wellness-page .path-copy p {
  max-width: 64ch;
  font-size: 15px;
  line-height: 1.68;
}

.nails-page .pathway:hover .path-aside a,
.body-page .pathway:hover .path-aside a,
.wellness-page .pathway:hover .path-aside a {
  color: var(--lp-accent-2);
}

.nails-page .matrix,
.body-page .matrix,
.wellness-page .matrix {
  gap: 1px;
  border-color: var(--lp-rule);
  background: var(--lp-rule);
}

.nails-page .matrix-card,
.body-page .matrix-card,
.wellness-page .matrix-card {
  min-height: 220px;
  padding: 26px;
  background: color-mix(in srgb, var(--paper-2) 88%, black);
}

.nails-page .matrix-card b,
.body-page .matrix-card b,
.wellness-page .matrix-card b {
  color: var(--lp-accent-2);
  font-size: 28px;
}

.nails-page .editor-note,
.body-page .editor-note,
.wellness-page .editor-note {
  padding: 28px;
  background: var(--lp-panel-2);
}

.nails-page .editor-note p,
.body-page .editor-note p,
.wellness-page .editor-note p {
  font-size: clamp(23px, 2.5vw, 30px);
}

.nails-page .rule-list article,
.body-page .rule-list article,
.wellness-page .rule-list article {
  padding: 26px;
}

.nails-page .index,
.body-page .index,
.wellness-page .index {
  background: var(--lp-index-bg);
}

.nails-page .index-grid,
.body-page .index-grid,
.wellness-page .index-grid {
  gap: 1px;
}

.nails-page .index-card,
.body-page .index-card,
.wellness-page .index-card {
  padding: 28px;
  background: var(--lp-index-card);
}

.nails-page .index-card:first-child,
.body-page .index-card:first-child,
.wellness-page .index-card:first-child {
  background: var(--lp-index-feature);
}

.nails-page .index-card h2,
.nails-page .index-card h3,
.nails-page .index-card p,
.body-page .index-card h2,
.body-page .index-card h3,
.body-page .index-card p,
.wellness-page .index-card h2,
.wellness-page .index-card h3,
.wellness-page .index-card p {
  color: var(--lp-index-ink);
}

.nails-page .index-card h3,
.body-page .index-card h3,
.wellness-page .index-card h3 {
  font-size: clamp(28px, 3vw, 36px);
}

.nails-page .index-card a,
.nails-page .index-card small,
.body-page .index-card a,
.body-page .index-card small,
.wellness-page .index-card a,
.wellness-page .index-card small {
  color: color-mix(in srgb, var(--lp-index-ink) 68%, var(--lp-accent));
}

.nails-page .pathway,
.nails-page .matrix-card,
.nails-page .index-card,
.body-page .pathway,
.body-page .matrix-card,
.body-page .index-card,
.wellness-page .pathway,
.wellness-page .matrix-card,
.wellness-page .index-card {
  transition:
    border-color 520ms var(--lp-ease),
    background-color 520ms var(--lp-ease),
    transform 520ms var(--lp-ease);
}

.nails-page .pathway:hover,
.nails-page .matrix-card:hover,
.nails-page .index-card:hover,
.body-page .pathway:hover,
.body-page .matrix-card:hover,
.body-page .index-card:hover,
.wellness-page .pathway:hover,
.wellness-page .matrix-card:hover,
.wellness-page .index-card:hover {
  transform: translateY(-2px);
}

@media (max-width: 760px) {
  .nails-page,
  .body-page,
  .wellness-page {
    --lp-page: min(100% - 32px, 1180px);
    --lp-section: 72px;
  }

  .nails-page .hero,
  .body-page .hero,
  .wellness-page .hero {
    min-height: auto;
    padding-block: 48px 62px;
  }

  .nails-page .hero h1,
  .body-page .hero h1,
  .wellness-page .hero h1 {
    font-size: clamp(48px, 14vw, 66px);
  }

  .nails-page .hero-meta,
  .body-page .hero-meta,
  .wellness-page .hero-meta {
    grid-template-columns: 1fr;
  }

  .nails-page .visual-strip .container,
  .body-page .visual-strip .container,
  .wellness-page .visual-strip .container {
    grid-template-columns: 1fr;
  }

  .nails-page .visual-card,
  .nails-page .visual-card:nth-child(2),
  .nails-page .visual-card:nth-child(3),
  .body-page .visual-card,
  .body-page .visual-card:nth-child(2),
  .body-page .visual-card:nth-child(3),
  .wellness-page .visual-card,
  .wellness-page .visual-card:nth-child(2),
  .wellness-page .visual-card:nth-child(3) {
    min-height: 280px;
    transform: none;
  }

  .nails-page .path-num,
  .nails-page .path-copy,
  .nails-page .path-aside,
  .nails-page .matrix-card,
  .nails-page .index-card,
  .body-page .path-num,
  .body-page .path-copy,
  .body-page .path-aside,
  .body-page .matrix-card,
  .body-page .index-card,
  .wellness-page .path-num,
  .wellness-page .path-copy,
  .wellness-page .path-aside,
  .wellness-page .matrix-card,
  .wellness-page .index-card {
    padding: 22px;
  }
}