/* Temporary review-only layout choices. The selected option will be folded
   into the final homepage before packaging. */

@media (min-width: 761px) {
  html[data-layout="desktop-knee"] .hero,
  html[data-layout="desktop-right"] .hero,
  html[data-layout="final"] .hero {
    background:
      linear-gradient(
        180deg,
        #fffdf8 0%,
        rgba(255,253,248,0.97) 26%,
        rgba(255,253,248,0.66) 36%,
        rgba(255,253,248,0.08) 50%,
        rgba(255,253,248,0) 100%
      ),
      url("homepage-hero-option2-v1.webp?v=15-preview") center 48px / 100% auto no-repeat;
    min-height: 660px;
    padding-top: 24px;
  }

  html[data-layout="desktop-knee"] .hero-copy,
  html[data-layout="desktop-right"] .hero-copy,
  html[data-layout="final"] .hero-copy {
    width: 100%;
    max-width: none;
    position: static;
  }

  html[data-layout="desktop-knee"] .hero-headline,
  html[data-layout="desktop-right"] .hero-headline,
  html[data-layout="final"] .hero-headline {
    animation: none;
    font-size: clamp(38px, 4.25vw, 58px);
    margin: 0 auto 8px;
    max-width: 760px;
  }

  html[data-layout="desktop-knee"] .hero-sub,
  html[data-layout="desktop-right"] .hero-sub,
  html[data-layout="final"] .hero-sub {
    animation: none;
    font-size: clamp(17px, 1.8vw, 20px);
    margin-bottom: 0;
  }

  html[data-layout="desktop-knee"] .hero > .hero-copy > .hero-cta,
  html[data-layout="desktop-right"] .hero > .hero-copy > .hero-cta,
  html[data-layout="final"] .hero > .hero-copy > .hero-cta {
    animation: none;
    position: absolute;
    min-width: 360px;
    width: 360px;
    padding: 15px 32px 13px;
  }

  html[data-layout="desktop-knee"] .hero > .hero-copy > .hero-micro,
  html[data-layout="desktop-right"] .hero > .hero-copy > .hero-micro,
  html[data-layout="final"] .hero > .hero-copy > .hero-micro {
    animation: none;
    position: absolute;
    margin: 0;
    width: 360px;
    text-align: center;
  }

  html[data-layout="desktop-knee"] .hero > .hero-copy > .hero-cta {
    left: 48%;
    top: 530px;
    transform: translateX(-50%);
  }

  html[data-layout="desktop-knee"] .hero > .hero-copy > .hero-micro {
    left: 48%;
    top: 603px;
    transform: translateX(-50%);
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.72);
  }

  html[data-layout="desktop-right"] .hero > .hero-copy > .hero-cta,
  html[data-layout="final"] .hero > .hero-copy > .hero-cta {
    right: 7%;
    top: 340px;
  }

  html[data-layout="desktop-right"] .hero > .hero-copy > .hero-micro,
  html[data-layout="final"] .hero > .hero-copy > .hero-micro {
    right: 7%;
    top: 413px;
  }
}

@media (max-width: 760px) {
  html[data-layout="mobile-knee"] .header-inner,
  html[data-layout="mobile-below"] .header-inner,
  html[data-layout="final"] .header-inner {
    min-height: 58px;
    padding: 6px 14px;
  }

  html[data-layout="mobile-knee"] .brand-link img,
  html[data-layout="mobile-below"] .brand-link img,
  html[data-layout="final"] .brand-link img {
    width: min(158px, 46vw);
  }

  html[data-layout="mobile-knee"] .hero,
  html[data-layout="mobile-below"] .hero,
  html[data-layout="final"] .hero {
    padding: 18px 12px 16px;
    background:
      linear-gradient(
        180deg,
        #fffdf8 0%,
        rgba(255,253,248,0.98) 24%,
        rgba(255,253,248,0.72) 33%,
        rgba(255,253,248,0.08) 45%,
        rgba(255,253,248,0) 100%
      ),
      url("homepage-hero-option2-v1.webp?v=15-preview") 30% 138px / auto 455px no-repeat;
  }

  html[data-layout="mobile-knee"] .hero-copy,
  html[data-layout="mobile-below"] .hero-copy,
  html[data-layout="final"] .hero-copy {
    width: 100%;
    position: static;
  }

  html[data-layout="mobile-knee"] .hero-headline,
  html[data-layout="mobile-below"] .hero-headline,
  html[data-layout="final"] .hero-headline {
    animation: none;
    font-size: clamp(23px, 6.4vw, 27px);
    line-height: 1.08;
    letter-spacing: -0.6px;
    margin: 0 auto 8px;
  }

  html[data-layout="mobile-knee"] .hero-sub,
  html[data-layout="mobile-below"] .hero-sub,
  html[data-layout="final"] .hero-sub {
    animation: none;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.32;
    margin: 0 auto;
  }

  html[data-layout="mobile-knee"] .hero > .hero-copy > .hero-cta,
  html[data-layout="mobile-below"] .hero > .hero-copy > .hero-cta,
  html[data-layout="final"] .hero > .hero-copy > .hero-cta {
    animation: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: min(280px, 78vw);
    width: min(280px, 78vw);
    padding: 13px 20px 11px;
    font-size: 16px;
    border-radius: 14px;
  }

  html[data-layout="mobile-knee"] .hero > .hero-copy > .hero-micro,
  html[data-layout="mobile-below"] .hero > .hero-copy > .hero-micro,
  html[data-layout="final"] .hero > .hero-copy > .hero-micro {
    animation: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    margin: 0;
    font-size: 13px;
  }

  html[data-layout="mobile-knee"] .hero,
  html[data-layout="final"] .hero {
    min-height: 610px;
  }

  html[data-layout="mobile-knee"] .hero > .hero-copy > .hero-cta,
  html[data-layout="final"] .hero > .hero-copy > .hero-cta {
    top: 492px;
  }

  html[data-layout="mobile-knee"] .hero > .hero-copy > .hero-micro,
  html[data-layout="final"] .hero > .hero-copy > .hero-micro {
    top: 554px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.72);
  }

  /* Final mobile selection: keep Mobile 1's low button while lifting the
     photograph closer to the copy so more of her hair and head are visible. */
  html[data-layout="final"] .hero {
    background-position: center, 30% 118px;
  }

  html[data-layout="mobile-below"] .hero {
    min-height: 700px;
    background-color: #fffdf8;
    background-size: auto, auto 455px;
  }

  html[data-layout="mobile-below"] .hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 118px;
    background: #fffdf8;
    z-index: 0;
  }

  html[data-layout="mobile-below"] .hero > .hero-copy > .hero-cta {
    top: 596px;
    z-index: 1;
  }

  html[data-layout="mobile-below"] .hero > .hero-copy > .hero-micro {
    top: 658px;
    z-index: 1;
  }
}