/* WAI LAB — shared editorial language for Personalizza, Routine, Confronta
   and product detail. Visual-only layer: no functional selectors or states. */

:root {
  --wl-hero-top: 48px;
  --wl-hero-width: min(1280px, calc(100% - 80px));
  --wl-functional-paper: #fbf8f2;
  --wl-functional-warm: #eee8de;
  --wl-functional-ink: #171916;
  --wl-functional-rule: rgba(47, 52, 49, .16);
  --wl-functional-shadow: 0 24px 70px rgba(49, 44, 37, .08);
}

/* Desktop hero scale: aligned with the quieter editorial hierarchy used
   across Cerca and INCI Library. Mobile keeps its existing proportions. */
@media (min-width: 981px) {
  .wl-app-shell .wl-home-v12 .wl-home-v12-copy h1 {
    font-size: clamp(62px, 6.2vw, 88px);
    line-height: .91;
  }
}

/* Shared editorial hero */
.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero {
  position: relative;
  display: flex;
  min-height: 340px;
  align-items: center;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid var(--wl-functional-rule);
  background: var(--wl-functional-paper);
  isolation: isolate;
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::before {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 49%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
}

.wl-app-shell .wl-profile-page .wl-section-hero::before {
  background-image: url('/wai-lab/editorial/home-v12/guide-hydration.webp');
  background-position: center 48%;
}

.wl-app-shell .wl-routine-page .wl-section-hero::before {
  background-image: url('/wai-lab/editorial/home-v12/guide-routine.webp');
  background-position: center 52%;
}

.wl-app-shell .wl-compare-page .wl-section-hero::before {
  background-image: url('/wai-lab/editorial/home-v12/guide-compare.webp');
  background-position: center 48%;
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, #fbf8f2 0%, #fbf8f2 47%, rgba(251, 248, 242, .9) 58%, rgba(251, 248, 242, .12) 82%);
  content: '';
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero .wl-search-hero-inner {
  display: flex;
  box-sizing: border-box;
  width: min(1280px, calc(100% - 80px));
  max-width: none;
  min-height: 340px;
  flex-direction: column;
  justify-content: flex-start;
  margin-inline: auto;
  padding: 48px 52% 42px 0;
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero .wl-eyebrow {
  margin: 0 0 20px;
  color: #6f685f;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .22em;
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero h1 {
  max-width: 680px;
  margin: 0 0 18px;
  color: var(--wl-functional-ink);
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(52px, 4.7vw, 66px);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: .94;
  text-wrap: balance;
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero h1 span {
  color: #aa8245;
}

.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero p {
  max-width: 620px;
  margin: 0;
  color: #50575a;
  font-size: 15px;
  line-height: 1.48;
}

.wl-app-shell .wl-compare-page .wl-section-hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}

.wl-app-shell .wl-compare-page .wl-section-hero-actions .wl-back,
.wl-app-shell .wl-compare-page .wl-compare-new {
  min-height: 42px;
  margin: 0;
  padding: 0 16px;
  border: 1px solid rgba(31, 39, 35, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  cursor: pointer;
}

.wl-app-shell .wl-compare-page .wl-section-hero-actions .wl-back {
  border-color: transparent;
  background: transparent;
}

.wl-app-shell .wl-compare-page .wl-compare-count {
  margin-left: 4px;
  color: #6b706c;
  font-size: 11px;
}

/* Personalizza */
/* Preferiti uses the same hero metrics and an existing editorial asset. */
.wl-app-shell .wl-favorites-page .wl-section-hero::before {
  background-image: url('/wai-lab/editorial/home-v12/guide-niacinamide.webp');
  background-position: center 48%;
}
.wl-app-shell .wl-favorites-page > .wl-results-section {
  width: var(--wl-hero-width);
}
.wl-favorites-toolbar,
.wl-favorites-clear-panel,
.wl-favorites-clear-panel > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.wl-favorites-toolbar { margin-bottom: 24px; }
.wl-app-shell .wl-favorites-page :is(.wl-favorites-toolbar, .wl-favorites-clear-panel) .wl-btn {
  border-radius: 999px;
  min-height: 44px;
}
.wl-favorites-toolbar p,
.wl-favorites-clear-panel p { margin: 0; color: var(--wl-muted); font-size: 14px; line-height: 1.6; }
.wl-favorites-clear-panel {
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid var(--wl-functional-rule);
  border-radius: 16px;
  background: var(--wl-functional-paper);
}
.wl-favorites-clear-panel p { flex: 1 1 280px; }
.wl-favorites-clear-panel .wl-btn-primary { background: #202a25; color: #fff; }
.wl-favorites-clear-panel .wl-btn { white-space: normal; }
@media (max-width: 540px) {
  .wl-favorites-clear-panel > div { width: 100%; }
  .wl-favorites-clear-panel .wl-btn { flex: 1 1 120px; padding: 10px 14px; }
}

.wl-app-shell .wl-profile-page .wl-profile-form {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(1040px, calc(100% - 64px));
  max-width: 1040px;
  min-height: 500px;
  margin-top: -38px;
  padding: 42px 48px 72px;
  border: 1px solid var(--wl-functional-rule);
  border-radius: 24px;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--wl-functional-shadow);
  scroll-margin-top: 100px;
}

.wl-app-shell .wl-profile-page .wl-profile-progress {
  color: #77746f;
  font-size: 9px;
  letter-spacing: .2em;
}

.wl-app-shell .wl-profile-page .wl-profile-progress b {
  color: #202823;
  font-size: 11px;
}

.wl-app-shell .wl-profile-page .wl-profile-progress-track {
  height: 2px;
  margin-top: 16px;
  background: #dedbd5;
}

.wl-app-shell .wl-profile-page .wl-profile-progress-track span {
  background: #27362e;
}

.wl-app-shell .wl-profile-page .wl-profile-section {
  min-height: 260px;
  padding: 52px 0 32px;
}

.wl-app-shell .wl-profile-page .wl-profile-section h2 {
  max-width: 820px;
  margin-bottom: 24px;
  color: var(--wl-functional-ink);
  font-size: clamp(36px, 4.2vw, 52px);
  letter-spacing: -.035em;
  line-height: 1.04;
}

.wl-app-shell .wl-profile-page .wl-profile-name-input {
  width: min(100%, 520px);
  min-height: 60px;
  border-color: var(--wl-functional-rule);
  border-radius: 16px;
  background: #fff;
}

.wl-app-shell .wl-profile-page .wl-choice-row .wl-choice {
  min-height: 44px;
  border-color: var(--wl-functional-rule);
  background: #fff;
}

.wl-app-shell .wl-profile-page .wl-choice-row .wl-choice.is-active {
  border-color: #26362d;
  background: #e9eee9;
  color: #24332b;
}

.wl-app-shell .wl-profile-page .wl-profile-navigation {
  padding: 22px 0 0;
}

.wl-app-shell .wl-profile-page .wl-profile-navigation .wl-btn,
.wl-app-shell .wl-profile-page .wl-profile-complete .wl-btn {
  min-width: 132px;
  border-radius: 999px;
}

.wl-app-shell .wl-profile-page .wl-profile-navigation .wl-btn-primary,
.wl-app-shell .wl-profile-page .wl-profile-complete .wl-btn-primary {
  border-color: #202a25;
  background: #202a25;
  color: #fff;
}

.wl-app-shell .wl-profile-page .wl-profile-complete {
  border: 1px solid var(--wl-functional-rule);
  border-radius: 20px;
  background: #f4f0e9;
  box-shadow: none;
}

/* Routine */
.wl-start-over { margin-block: 16px; }
.wl-start-over-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.wl-app-shell .wl-start-over .wl-btn { min-height: 44px; border-radius: 999px; font-size: 13px; letter-spacing: 0; white-space: normal; }
.wl-app-shell .wl-start-over .wl-btn:disabled { opacity: .45; cursor: default; }
.wl-app-shell .wl-start-over .wl-btn-primary { background: #202a25; color: #fff; }
.wl-start-over-confirm { margin-top: 14px; padding: 18px; border: 1px solid var(--wl-functional-rule); border-radius: 16px; background: var(--wl-functional-paper); }
.wl-start-over-confirm p { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--wl-muted); }
.wl-routine-remove { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 6px; padding: 8px 10px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: #68736b; text-decoration: none; font: inherit; font-size: 12px; cursor: pointer; }
.wl-routine-remove:hover { color: var(--wl-sage-deep); background: #edf0eb; }
.wl-routine-remove:focus-visible { outline: 2px solid var(--wl-sage-deep); outline-offset: 2px; }
.wl-existing-exclusions { margin-block: 20px; padding: 18px 20px; border: 1px solid #ddd9ce; border-radius: 12px; background: #faf8f3; }
.wl-existing-exclusions h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; }
.wl-existing-exclusions > p, .wl-existing-exclusions article p { margin: 6px 0; font-size: 14px; line-height: 1.55; }
.wl-existing-exclusions article { padding-top: 12px; margin-top: 12px; border-top: 1px solid #e5e0d6; }
.wl-existing-exclusions small { display: block; color: #626a63; font-size: 13px; line-height: 1.5; }
.wl-existing-exclusion-product { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: transparent; color: #28382d; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.wl-existing-exclusion-product svg { flex-shrink: 0; }
.wl-existing-exclusion-product:focus-visible { outline: 2px solid var(--wl-sage-deep); outline-offset: 3px; }
.wl-routine-edited-note { margin-top: 24px; color: var(--wl-muted); line-height: 1.6; font-size: 14px; }
.wl-routine-alternative-select { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 540px) {
  .wl-start-over-buttons > button { flex: 1 1 130px; }
}
.wl-app-shell .wl-routine-page .wl-routine-builder {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(1220px, calc(100% - 64px));
  margin-top: -38px;
  padding: 40px 42px;
  border: 1px solid var(--wl-functional-rule);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--wl-functional-shadow);
}

.wl-app-shell .wl-routine-page .wl-routine-builder-copy h2 {
  margin-top: 0;
  color: var(--wl-functional-ink);
  font-size: clamp(40px, 4.3vw, 58px);
  line-height: 1;
}

.wl-app-shell .wl-routine-page .wl-routine-builder-copy p {
  font-size: 14px;
}

.wl-app-shell .wl-routine-page .wl-routine-mode {
  gap: 10px;
}

.wl-app-shell .wl-routine-page .wl-routine-mode button {
  min-height: 66px;
  padding: 12px 16px;
  border-color: var(--wl-functional-rule);
  border-radius: 14px;
  background: #fff;
}

.wl-app-shell .wl-routine-page .wl-routine-mode button.is-active {
  border-color: #26332c;
  background: #eef1ed;
  box-shadow: inset 0 0 0 1px #26332c;
}

.wl-app-shell .wl-routine-page .wl-routine-generate {
  min-height: 50px;
  border-radius: 999px;
  background: #202a25;
  color: #fff;
}

.wl-app-shell .wl-routine-page :is(.wl-routine-rationale, .wl-routine-safe, .wl-routine-item, .wl-routine-choice-row) {
  border-color: var(--wl-functional-rule);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

/* Confronta */
.wl-app-shell .wl-compare-page > .wl-container {
  position: relative;
  z-index: 2;
}

.wl-app-shell .wl-compare-page .wl-empty-state {
  box-sizing: border-box;
  max-width: 820px;
  min-height: 360px;
  margin-top: -38px;
  padding: 82px 34px;
  border: 1px solid var(--wl-functional-rule);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--wl-functional-shadow);
}

.wl-app-shell .wl-compare-page .wl-empty-state h3 {
  margin-top: 18px;
  font-size: 34px;
}

.wl-app-shell .wl-compare-page .wl-empty-state .wl-btn {
  border-radius: 999px;
  background: #202a25;
  color: #fff;
}

.wl-app-shell .wl-compare-page :is(.wl-compare-mobile-product, .wl-compare-mobile-glance, .wl-compare-mobile-section, .wl-compare-table-wrap) {
  border-color: var(--wl-functional-rule);
  border-radius: 18px;
  background: #fff;
  box-shadow: none;
}

/* Product detail: editorial split, white packshot surface preserved. */
.wl-app-shell .wl-product-page .wl-product-layout {
  box-sizing: border-box;
  width: min(1280px, calc(100% - 80px));
  padding-top: 34px;
}

.wl-app-shell .wl-product-page .wl-back {
  margin-bottom: 22px;
}

.wl-app-shell .wl-product-page .wl-product-hero-card {
  box-sizing: border-box;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--wl-functional-rule);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--wl-functional-shadow);
}

.wl-app-shell .wl-product-page .wl-product-large-media {
  min-height: 620px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.wl-app-shell .wl-product-page .wl-product-large-media .wl-real-product-image {
  width: min(92%, 520px) !important;
  max-width: min(92%, 520px) !important;
  height: auto !important;
  max-height: 88% !important;
}

.wl-app-shell .wl-product-page .wl-product-summary {
  display: flex;
  min-width: 0;
  min-height: 620px;
  flex-direction: column;
  justify-content: center;
  padding: 58px 54px;
  background: #f4f0e9;
}

.wl-app-shell .wl-product-page .wl-product-summary h1 {
  font-size: clamp(48px, 4.7vw, 70px);
  line-height: .96;
}

.wl-app-shell .wl-product-page .wl-score-row > div,
.wl-app-shell .wl-product-page .wl-official-price,
.wl-app-shell .wl-product-page .wl-product-actions :is(.wl-btn, .wl-icon-btn) {
  border-color: var(--wl-functional-rule);
  border-radius: 16px;
  background: rgba(255, 255, 255, .8);
}

@media (max-width: 980px) {
  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero .wl-search-hero-inner {
    padding-right: 44%;
  }

  .wl-app-shell .wl-product-page .wl-product-summary {
    padding-inline: 36px;
  }
}

@media (max-width: 820px) {
  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero {
    min-height: 380px;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::before {
    width: 64%;
    opacity: .82;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::after {
    background: linear-gradient(90deg, #fbf8f2 0%, rgba(251, 248, 242, .98) 50%, rgba(251, 248, 242, .72) 73%, rgba(251, 248, 242, .18) 100%);
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero .wl-search-hero-inner {
    width: min(100% - 36px, 720px);
    min-height: 380px;
    padding: 48px 30% 44px 0;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero h1 {
    font-size: clamp(45px, 10.5vw, 64px);
  }

  .wl-app-shell .wl-profile-page .wl-profile-form,
  .wl-app-shell .wl-routine-page .wl-routine-builder {
    width: calc(100% - 36px);
    margin-top: -26px;
    padding: 32px 26px 56px;
    border-radius: 20px;
  }

  .wl-app-shell .wl-routine-page .wl-routine-builder {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .wl-app-shell .wl-compare-page .wl-empty-state {
    width: calc(100% - 36px);
    min-height: 320px;
    margin-top: -26px;
    padding: 68px 24px;
    border-radius: 20px;
  }

  .wl-app-shell .wl-product-page .wl-product-layout {
    width: calc(100% - 36px);
    padding-top: 24px;
  }

  .wl-app-shell .wl-product-page .wl-product-hero-card {
    grid-template-columns: 1fr;
    min-height: 0;
    border-radius: 20px;
  }

  .wl-app-shell .wl-product-page .wl-product-large-media {
    min-height: 430px;
  }

  .wl-app-shell .wl-product-page .wl-product-large-media .wl-real-product-image {
    width: min(96%, 430px) !important;
    max-width: min(96%, 430px) !important;
    max-height: 90% !important;
  }

  .wl-app-shell .wl-product-page .wl-product-summary {
    min-height: 0;
    padding: 38px 28px 42px;
  }
}

@media (max-width: 540px) {
  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero {
    min-height: 350px;
  }

  .wl-app-shell .wl-routine-page .wl-section-hero {
    min-height: 430px;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::before {
    width: 72%;
    opacity: .58;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::after {
    background: linear-gradient(90deg, #fbf8f2 0%, rgba(251, 248, 242, .96) 58%, rgba(251, 248, 242, .56) 100%);
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero .wl-search-hero-inner {
    width: calc(100% - 28px);
    min-height: inherit;
    padding: 42px 19% 40px 0;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero h1 {
    font-size: clamp(42px, 12vw, 52px);
    line-height: .96;
  }

  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero p {
    font-size: 14px;
    line-height: 1.45;
  }

  .wl-app-shell .wl-compare-page .wl-section-hero-actions {
    align-items: flex-start;
    gap: 8px;
  }

  .wl-app-shell .wl-compare-page .wl-section-hero-actions .wl-back,
  .wl-app-shell .wl-compare-page .wl-compare-new {
    min-height: 40px;
    padding-inline: 12px;
    font-size: 11px;
  }

  .wl-app-shell .wl-profile-page .wl-profile-form,
  .wl-app-shell .wl-routine-page .wl-routine-builder {
    width: calc(100% - 24px);
    margin-top: -20px;
    padding: 28px 20px 46px;
    border-radius: 18px;
  }

  .wl-app-shell .wl-profile-page .wl-profile-section {
    min-height: 250px;
    padding-top: 42px;
  }

  .wl-app-shell .wl-profile-page .wl-profile-section h2 {
    font-size: 36px;
  }

  .wl-app-shell .wl-profile-page .wl-profile-navigation {
    gap: 10px;
  }

  .wl-app-shell .wl-profile-page .wl-profile-navigation .wl-btn {
    min-width: 0;
    flex: 1;
  }

  .wl-app-shell .wl-routine-page .wl-routine-builder-copy h2 {
    font-size: 39px;
  }

  .wl-app-shell .wl-compare-page .wl-empty-state {
    width: calc(100% - 24px);
    margin-top: -20px;
  }

  .wl-app-shell .wl-product-page .wl-product-layout {
    width: calc(100% - 24px);
    padding-top: 18px;
  }

  .wl-app-shell .wl-product-page .wl-product-large-media {
    min-height: 390px;
  }

  .wl-app-shell .wl-product-page .wl-product-large-media .wl-real-product-image {
    width: min(100%, 390px) !important;
    max-width: min(100%, 390px) !important;
  }

  .wl-app-shell .wl-product-page .wl-product-summary {
    padding: 34px 22px 38px;
  }

  .wl-app-shell .wl-product-page .wl-product-summary h1 {
    font-size: clamp(38px, 10.4vw, 44px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero::before {
    transition: none;
  }
}

/* One starting line and gutter across navigation pages, including Home.
   Keep these independent of each hero's image and content height. */
@media (max-width: 820px) {
  :root { --wl-hero-width: calc(100% - 36px); }
}
@media (max-width: 600px) {
  :root { --wl-hero-top: 42px; --wl-hero-width: calc(100% - 28px); }
}
.wl-app-shell .wl-home-v13 .wl-home-v13-hero-inner,
.wl-app-shell .wl-search-category-page .wl-category-explorer,
.wl-app-shell .wl-ingredients-page .wl-ingredients-hero .wl-ingredients-hero-inner,
.wl-app-shell :is(.wl-profile-page, .wl-routine-page, .wl-compare-page, .wl-favorites-page) .wl-section-hero .wl-search-hero-inner,
.wl-app-shell .wl-results-page .wl-results-hero-main > .wl-container {
  width: var(--wl-hero-width);
  max-width: none;
  margin-inline: auto;
  padding-top: var(--wl-hero-top);
}
.wl-app-shell .wl-home-v13 .wl-home-v13-hero-inner { align-items: flex-start; }
.wl-app-shell .wl-home-v13 .wl-home-v13-copy > .wl-eyebrow { display: block; }

/* Informational pages: shared starting line, typographic hierarchy, no imagery. */
.wl-app-shell :is(.wl-method-hero, .wl-policy-hero) {
  padding: 0;
  background: var(--wl-functional-paper);
  border-bottom: 1px solid var(--wl-functional-rule);
}
.wl-app-shell :is(.wl-method-hero-inner, .wl-policy-hero-inner) {
  box-sizing: border-box;
  width: var(--wl-hero-width);
  max-width: none;
  margin-inline: auto;
  padding: var(--wl-hero-top) 0 40px;
}
.wl-app-shell :is(.wl-method-hero, .wl-policy-hero) .wl-eyebrow {
  display: block;
  margin: 0 0 20px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .22em;
  color: #6f685f;
}
.wl-app-shell :is(.wl-method-hero, .wl-policy-hero) h1 {
  max-width: 900px;
  margin: 0 0 18px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(36px, 4.7vw, 66px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.035em;
  text-wrap: balance;
  color: var(--wl-functional-ink);
}
.wl-app-shell :is(.wl-method-hero, .wl-policy-hero) h1 span { color: #aa8245; }
.wl-app-shell :is(.wl-method-hero, .wl-policy-hero) p {
  max-width: 760px;
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: #50575a;
}
.wl-app-shell :is(.wl-method-grid, .wl-policy-content, .wl-method-principle-inner) {
  box-sizing: border-box;
  width: var(--wl-hero-width);
  max-width: none;
  margin-inline: auto;
}
.wl-app-shell :is(.wl-method-grid, .wl-policy-content) { padding-block: 40px 56px; }
.wl-app-shell :is(.wl-method-grid, .wl-policy-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}
.wl-app-shell :is(.wl-method-grid, .wl-policy-grid) article {
  min-height: 0;
  padding: 26px 0 30px;
  border: 0;
  border-top: 1px solid var(--wl-functional-rule);
  background: none;
}
.wl-app-shell :is(.wl-method-grid, .wl-policy-grid, .wl-policy-sections) h2 {
  margin: 12px 0;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(23px, 2vw, 28px);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: -.015em;
}
.wl-app-shell :is(.wl-method-grid, .wl-policy-content) p {
  max-width: 72ch;
  font-size: 15px;
  line-height: 1.75;
  color: #50575a;
}
.wl-app-shell .wl-method-principle {
  padding: 36px 0 40px;
  background: #f3f4ef;
  border-block: 1px solid var(--wl-functional-rule);
}
.wl-app-shell .wl-method-principle blockquote {
  max-width: 760px;
  margin: 14px 0 18px;
  font-size: clamp(27px, 2.6vw, 36px);
  line-height: 1.2;
  letter-spacing: -.025em;
}
.wl-app-shell .wl-method-principle p { max-width: 72ch; font-size: 15px; line-height: 1.75; }
.wl-app-shell .wl-method-principle .wl-editorial-link { margin-top: 20px; font-size: 14px; }
.wl-app-shell .wl-policy-lead { padding: 24px 0 32px; background: none; border: 0; }
.wl-app-shell .wl-policy-lead h2 {
  max-width: 850px;
  margin: 12px 0;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.25;
  font-weight: 400;
}
.wl-app-shell .wl-policy-sections { max-width: 850px; }
.wl-app-shell .wl-policy-sections article { padding: 24px 0; border-bottom: 1px solid var(--wl-functional-rule); }
.wl-app-shell :is(.wl-policy-note, .wl-policy-status) {
  padding: 20px 24px;
  margin-block: 0 28px;
  background: #f3f4ef;
  border: 0;
  border-left: 2px solid #9a7651;
  border-radius: 0;
}
.wl-retinoid-notice { margin-block: 16px; padding: 16px; border-left: 2px solid #9a7651; background: #f6f2e9; }
.wl-retinoid-notice p { margin: 6px 0; font-size: 14px; line-height: 1.65; }
.wl-retinoid-notice a { color: inherit; font-size: 12px; text-underline-offset: 3px; }
@media (max-width: 600px) {
  .wl-app-shell :is(.wl-method-grid, .wl-policy-grid) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .wl-app-shell :is(.wl-method-hero-inner, .wl-policy-hero-inner) { padding-bottom: 30px; }
  .wl-app-shell :is(.wl-method-grid, .wl-policy-content) { padding-block: 24px 36px; }
}