/* Page-scoped landing visuals. Example product cards are non-interactive. */
.beauty-page { --beauty-cream: #f7f4ed; }
.marketing-site.beauty-page .site-shell { width: min(1200px, calc(100% - 96px)); }
.beauty-main { min-width: 0; }
.beauty-main h1, .beauty-main h2, .beauty-main h3, .beauty-main h4 { font-family: var(--font-display); }
.beauty-main h2 { margin: 0; font-size: clamp(2.4rem, 4.2vw, 3.9rem); line-height: 1.02; letter-spacing: -.045em; }
.beauty-main p { line-height: 1.6; }
.beauty-main figure { margin: 0; }
.beauty-main img { height: auto; }
.beauty-main .beauty-note { color: #5b5753; font-size: .8rem; line-height: 1.6; }
.beauty-note a { text-decoration: underline; text-underline-offset: 3px; font-weight: 650; }
.beauty-section { padding-block: 86px; }
.beauty-section__copy { min-width: 0; }
.beauty-section__copy > p { max-width: 480px; margin-block: 22px; color: #514c47; font-size: 1.06rem; }
.beauty-section-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 56px; margin-bottom: 38px; }
.beauty-section-heading > p, .beauty-section-heading > div > p { max-width: 505px; margin: 0; color: #514c47; font-size: 1.04rem; }
.beauty-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; }
.beauty-text-link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.beauty-text-link:hover { text-decoration-thickness: 2px; }
.beauty-hero { display: grid; grid-template-columns: 1fr 1.05fr; align-items: center; gap: 36px; padding-block: 36px 72px; }
.beauty-hero h1 { max-width: 560px; margin: 0; font-size: clamp(3rem, 4.3vw, 4.05rem); font-weight: 800; line-height: .99; letter-spacing: -.045em; }
.beauty-hero h1 > span { position: relative; white-space: nowrap; }
.beauty-hero h1 > span::after { position: absolute; content: ""; inset: auto -.03em .03em; z-index: -1; height: .2em; background: var(--site-yellow); transform: rotate(-2deg); }
.beauty-hero__copy { position: relative; isolation: isolate; min-width: 0; }
.beauty-lede { max-width: 490px; margin: 26px 0 0; color: #514c47; font-size: 1.12rem; }
.beauty-bio, .beauty-auto { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; }
.beauty-bio { border-top: 1px solid #ece8e1; }
.beauty-shop-wrap { background: var(--beauty-cream); }
.beauty-shop-wrap .beauty-section-heading { margin-bottom: 0; }
.beauty-look-showcase { width: min(100%, 560px); margin-inline: auto; }
.beauty-look-example { overflow: hidden; border: 1px solid #e2dbd4; border-radius: 20px; background: #fcf8f3; }
.beauty-look-example__photo { position: relative; }
.beauty-look-example__photo img { width: 100%; height: 330px; object-fit: cover; object-position: center 34%; }
.beauty-look-example__photo > span { position: absolute; left: 16px; top: 16px; padding: 6px 10px; border-radius: 30px; background: #fffffff2; font-size: .65rem; font-weight: 600; }
.beauty-look-example__content { padding: 24px; }
.beauty-look-example h3 { margin: 0 0 20px; font-size: 1.65rem; letter-spacing: -.03em; }
.beauty-products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.beauty-product { min-width: 0; display: flex; flex-direction: column; padding: 10px; border: 1px solid #e8e2dc; border-radius: 10px; background: white; }
.beauty-product__image { background: #f8f6f3; border-radius: 5px; }
.beauty-product-art { display: block; width: 100%; height: 100px; }
.beauty-product > strong { margin: 10px 0; font-size: .76rem; line-height: 1.4; font-weight: 650; }
.beauty-product__destination { display: flex; justify-content: space-between; gap: 5px; align-items: center; margin-top: auto; border: 1px solid #ddd5c8; border-radius: 5px; padding: 8px; font-size: .64rem; font-weight: 600; }
.beauty-auto-wrap { background: #faf9fc; }
.beauty-retailer-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-block: 22px; border-block: 1px solid #ded9d1; }
.beauty-retailer-strip > span { display: flex; align-items: center; justify-content: space-between; font: 700 1.8rem var(--font-display); }
.beauty-retailer-strip small { color: #8e857a; font-size: 1.2rem; }
.beauty-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; margin-top: 35px; }
.beauty-before { padding: 10px 24px; border-left: 2px solid #e5dfd8; }
.beauty-comparison h3 { margin: 0 0 18px; font-size: 1rem; }
.beauty-before p { margin-block: 12px; color: #756d65; font-size: 1.02rem; }
.beauty-after { display: flex; flex-direction: column; justify-content: center; padding: 30px; border-radius: 18px; background: #fff2b1; }
.beauty-after > strong { font: 700 clamp(1.8rem, 2.8vw, 2.5rem)/1.06 var(--font-display); letter-spacing: -.03em; }
.beauty-after > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: .75rem; }
.beauty-main .beauty-usecases-title { margin: 68px 0 24px; font-size: 2rem; }
.beauty-usecases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.beauty-usecases > div { padding: 20px 0; border-top: 1px solid #ded7cd; }
.beauty-usecases > div > span { font-size: 1.6rem; }
.beauty-usecases h3 { margin: 10px 0 4px; font-size: 1.25rem; }
.beauty-usecases p { margin: 0; color: #6c6258; font-size: .78rem; }
.beauty-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; border-top: 1px solid #e7e1d9; }
.beauty-faq details { border-top: 1px solid #dcd5cb; }
.beauty-faq details:last-child { border-bottom: 1px solid #dcd5cb; }
.beauty-faq summary { display: flex; min-height: 64px; justify-content: space-between; align-items: center; gap: 18px; padding-block: 18px; list-style: none; cursor: pointer; font-size: .93rem; font-weight: 650; }
.beauty-faq summary::-webkit-details-marker { display: none; }
.beauty-faq summary > span { flex: 0 0 22px; font-size: 1.4rem; font-weight: 400; text-align: center; }
.beauty-faq details[open] summary > span { transform: rotate(45deg); }
.beauty-faq details > p { margin: 0; padding: 0 32px 22px 0; color: #62594f; font-size: .89rem; }
.beauty-final { padding-block: 75px; background: #191919; color: white; text-align: center; }
.beauty-final h2 { font-size: clamp(2.8rem, 5vw, 4.8rem); }
.beauty-final p { max-width: 560px; margin: 24px auto 30px; color: #d2cec8; }
.beauty-final small { display: block; margin-top: 18px; color: #d2cec8; font-size: .78rem; }
.beauty-final .site-button:focus-visible { outline-color: white; }

.beauty-autodm-visual { min-width: 0; }
.beauty-autodm-visual img { display: block; width: 100%; border-radius: 20px; }
.beauty-profile-capture { justify-self: center; width: min(100%, 300px); overflow: hidden; border: 1px solid #e3e1d7; border-radius: 24px; box-shadow: 0 12px 35px #2423170a; }
.beauty-profile-capture img { display: block; width: 100%; }
.beauty-product__image img { display: block; width: 100%; height: 120px; object-fit: contain; }
.beauty-affiliates > .beauty-text-link { margin-top: 18px; }

@media (max-width: 1100px) {
  .marketing-site.beauty-page .site-shell { width: calc(100% - 64px); }
  .beauty-hero { gap: 28px; }
  .beauty-hero h1 { font-size: clamp(2.5rem, 4.3vw, 3.1rem); }
  .beauty-hero .beauty-actions { gap: 15px; }
  .beauty-hero .site-button { padding-inline: 20px; }
  .beauty-bio, .beauty-auto { gap: 40px; }
  .beauty-section-heading { gap: 35px; }
  .beauty-faq { gap: 40px; }
}
@media (max-width: 850px) {
  .beauty-hero { grid-template-columns: 1fr; gap: 38px; padding-top: 30px; }
  .beauty-hero__copy { max-width: 640px; }
  .beauty-hero h1 { max-width: 610px; font-size: 3.9rem; }
  .beauty-section-heading { grid-template-columns: 1fr; gap: 20px; }
  .beauty-bio, .beauty-auto { gap: 30px; }
  .beauty-auto { grid-template-columns: 1fr; }
  .beauty-autodm-visual { width: min(100%, 650px); justify-self: center; }
  .beauty-section__copy > p { font-size: .96rem; }
  .beauty-look-example__content { padding: 16px; }
  .beauty-look-example__photo img { height: 280px; }
  .beauty-products { gap: 8px; }
  .beauty-product { padding: 7px; }
  .beauty-product__destination { font-size: .58rem; padding: 7px 4px; }
  .beauty-retailer-strip > span { font-size: 1.35rem; }
  .beauty-comparison { gap: 24px; }
  .beauty-after { padding: 24px; }
  .beauty-faq { grid-template-columns: 1fr; gap: 25px; }
}
@media (max-width: 600px) {
  .marketing-site.beauty-page .site-shell { width: calc(100% - 40px); }
  .beauty-section { padding-block: 58px; }
  .beauty-main h2 { font-size: 2.55rem; }
  .beauty-hero { padding-block: 28px 52px; gap: 30px; }
  .beauty-hero h1 { font-size: clamp(2rem, 10vw, 3.2rem); line-height: 1; letter-spacing: -.045em; }
  .beauty-lede { margin-top: 20px; font-size: 1rem; }
  .beauty-actions { margin-top: 24px; gap: 16px; }
  .beauty-actions .site-button { width: 100%; }
  .beauty-bio { grid-template-columns: 1fr; gap: 28px; }
  .beauty-profile-capture { width: min(100%, 280px); }
  .beauty-bio .beauty-section__copy { grid-row: 1; }
  .beauty-section-heading { margin-bottom: 28px; }
  .beauty-section-heading > p, .beauty-section-heading > div > p { font-size: .96rem; }
  .beauty-look-example__photo img { height: 310px; }
  .beauty-look-example__content { padding: 18px; }
  .beauty-look-example h3 { font-size: 1.6rem; }
  .beauty-products { gap: 10px; }
  .beauty-product { padding: 8px; }
  .beauty-product__destination { font-size: .61rem; padding: 8px 5px; }
  .beauty-retailer-strip { grid-template-columns: 1fr; gap: 14px; }
  .beauty-retailer-strip > span { font-size: 1.5rem; }
  .beauty-comparison { grid-template-columns: 1fr; gap: 24px; }
  .beauty-before { padding-block: 0; }
  .beauty-after { padding: 25px; }
  .beauty-usecases { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .beauty-main .beauty-usecases-title { margin-top: 46px; font-size: 1.8rem; }
  .beauty-faq summary { font-size: .91rem; }
  .beauty-final { padding-block: 60px; }
  .beauty-final h2 { font-size: 2.7rem; }
  .beauty-final p { font-size: .96rem; }
}
@media (prefers-reduced-motion: reduce) { html:has(.beauty-page) { scroll-behavior: auto; } }