.signature-beauty{
  color:#302037}
.signature-beauty>p{
  max-width:78ch;
  font-size:1rem;
  line-height:1.75}
.signature-builder{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)) auto;
  gap:16px;
  align-items:end;
  margin:26px 0}
.signature-builder label{
  display:block;
  font-size:1rem;
  font-weight:700;
  margin-bottom:8px}
.signature-builder select,.signature-builder button{
  font:inherit;
  min-height:48px;
  padding:12px;
  border-radius:10px;
  border:1px solid #a68bab;
  max-width:100%;
  width:100%;
  background:#fff;
  color:#302037}
.signature-builder button{
  background:#543064;
  color:white;
  font-weight:700;
  cursor:pointer}
.signature-builder :focus-visible,.signature-beauty a:focus-visible{
  outline:3px solid #7b4ba0;
  outline-offset:3px}
.signature-recipe{
  border-left:5px solid #765288;
  background:#f4edf8;
  padding:22px;
  margin:24px 0}
.signature-recipe h3{
  font-size:1.25rem;
  margin-top:0}
.signature-recipe p{
  font-size:1rem;
  line-height:1.75}
.signature-look-notes{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px}
.signature-look-notes p{
  line-height:1.75}
.signature-step-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
  margin:28px 0}
.signature-step{
  background:#fff;
  overflow:hidden;
  border-radius:14px;
  min-width:0;
  box-shadow:0 3px 20px #3020370b}
.signature-step figure{
  margin:0}
.signature-step img{
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  display:block;
  background:#f3f0f4;
  height:auto}
.signature-step figcaption{
  padding:12px 20px;
  font-size:.875rem;
  color:#60466b}
.signature-step>div{
  padding:0 20px 20px}
.signature-step h3{
  font-size:1.25rem;
  line-height:1.4}
.signature-step p{
  font-size:1rem;
  line-height:1.75}
.signature-tip{
  font-weight:650}
.signature-example{
  background:#f4edf8;
  padding:12px;
  border-radius:8px}
.signature-product-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:18px;
  margin:26px 0}
.signature-product{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  min-width:0;
  box-shadow:0 3px 20px #3020370b;
  scroll-margin-top:100px}
.signature-product img{
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  background:white;
  display:block}
.signature-product-copy{
  padding:16px}
.signature-product h3{
  font-size:1.125rem;
  margin:8px 0}
.signature-product-name{
  font-size:1rem;
  font-weight:650;
  line-height:1.5}
.signature-product dl{
  font-size:.875rem;
  line-height:1.6}
.signature-product dl div{
  margin:12px 0}
.signature-product dt{
  font-weight:750}
.signature-product dd{
  margin:3px 0;
  overflow-wrap:anywhere}
.signature-product a{
  font-size:.875rem;
  line-height:1.7;
  overflow-wrap:anywhere}
.signature-product details{
  font-size:.875rem;
  line-height:1.6;
  margin-top:15px}
.signature-product summary{
  cursor:pointer}
.signature-beauty h2{
  overflow-wrap:anywhere}
.signature-step a,.signature-beauty>a{
  color:#513263;
  text-decoration:underline;
  text-underline-offset:3px}
@media(max-width:1100px){
  .signature-product-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))}
.signature-builder{
  grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .signature-step-grid,.signature-builder,.signature-look-notes{
  grid-template-columns:1fr}
.signature-product-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px}
.signature-product-copy{
  padding:12px}
.signature-product h3{
  font-size:1rem}
.signature-product-name{
  font-size:.9375rem}
.signature-recipe{
  padding:18px}
.signature-step-grid{
  gap:20px}
}