/* A live label and an illustrative mobile storefront, using the studio's photo geometry. */
.white-hero{grid-template-areas:"heading preview" "intro preview";row-gap:0}
.white-hero-heading{grid-area:heading;align-self:end}
.white-hero-intro{grid-area:intro;align-self:start}
.white-hero>.brand-showcase{grid-area:preview}
.brand-showcase{min-width:0;width:100%;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel);color:var(--ink)}
.brand-showcase-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line);font-size:10px;color:var(--muted)}
.showcase-kicker{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink)}
.brand-showcase-scene{grid-area:scene;height:360px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:0;align-items:center;padding:24px 18px;background:radial-gradient(ellipse at 30% 40%,#ededed,#c9c9c9 90%);isolation:isolate}
.showcase-product{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.showcase-jar{width:118%;max-width:345px}
.brand-showcase .photo-jar{width:100%;max-width:100%;margin:0;filter:drop-shadow(3px 9px 6px #00000020)}
.brand-showcase .photo-jar>img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.showcase-object-label{display:block;text-align:center;color:#4b4b4b;font-size:10px;line-height:1.4;font-weight:700;letter-spacing:.25px}
.showcase-product>.showcase-object-label{margin-top:-9px;position:relative;padding:0 8px 8px}
.showcase-storefront{width:100%;display:flex;align-items:center;flex-direction:column;gap:10px;position:relative}
.showcase-phone{width:174px;max-width:100%;background:#1b1b1b;padding:8px;border:1px solid #494949;border-radius:28px;box-shadow:7px 13px 15px #00000024;position:relative}
.showcase-phone-camera{height:9px;width:42px;background:#1b1b1b;border-radius:0 0 8px 8px;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:1}
.showcase-phone-screen{border-radius:20px;background:#f6f5f2;color:#181818;overflow:hidden}
.showcase-phone-brand{padding:23px 12px 10px;min-height:49px;border-bottom:1px solid #d8d6d0;font-size:11px;line-height:1.12;font-weight:900;letter-spacing:-.35px;overflow-wrap:anywhere;text-transform:uppercase}
.showcase-phone-photo{height:139px;display:flex;align-items:center;justify-content:center;background:#deddd8}
.showcase-phone-photo .photo-jar{width:145px;flex-shrink:0}
.showcase-phone-copy{padding:12px 12px 10px}
.showcase-phone-copy>span{font-size:7px;font-weight:700;letter-spacing:1.2px;display:block;margin-bottom:5px}
.showcase-phone-copy>strong{font-size:16px;line-height:1.04;letter-spacing:-.5px;display:block}
.brand-showcase .showcase-phone-copy>p{font-size:9px;line-height:1.4;margin:8px 0 0;color:#595959;max-width:none}
.showcase-phone-footer{padding:9px 12px 11px;border-top:1px solid #d8d6d0;font-size:6px;font-weight:700;letter-spacing:.5px;display:flex;justify-content:space-between;gap:7px}
.showcase-phone-footer>span{font-size:11px;line-height:7px}
.brand-showcase-form{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"scene scene" "name product" "footer footer";margin:0}
.showcase-field{min-width:0;padding-top:20px}
.showcase-name-field{grid-area:name;padding-left:22px;padding-right:6px}
.showcase-product-field{grid-area:product;padding-left:6px;padding-right:22px}
.showcase-form-footer{grid-area:footer;padding:0 22px 18px}
.showcase-field label{display:block;font-size:11px;font-weight:700;margin-bottom:7px}
.showcase-field input,.showcase-field select{width:100%;min-width:0;height:46px;border:1px solid var(--field-line);border-radius:5px;background:var(--field);padding:10px;font-size:13px}
.showcase-continue{width:100%;margin-top:14px;justify-content:space-between;min-height:48px}
.brand-showcase .showcase-note{font-size:10px;line-height:1.5;max-width:none;margin:11px 0 0;color:var(--muted)}
.brand-showcase .showcase-availability{font-size:10px;line-height:1.5;max-width:none;margin:10px 0 0;color:var(--muted)}
.brand-showcase .showcase-status{font-size:11px;line-height:1.5;max-width:none;margin:9px 0 0}
.showcase-status:empty{display:none}
.showcase-fallback{padding:25px;text-align:center}
.showcase-fallback img{display:block;width:100%;height:auto;max-width:320px;margin:auto}
.brand-showcase .showcase-fallback p{max-width:none;font-size:13px}
:root[data-theme=dark] .brand-showcase-scene{background:radial-gradient(ellipse at 30% 40%,#535353,#303030 90%)}
:root[data-theme=dark] .showcase-object-label{color:#dedede}
:root[data-theme=dark] .showcase-phone{border-color:#707070;box-shadow:7px 13px 15px #00000044}
@media(max-width:1080px) and (min-width:761px){.brand-showcase-scene{height:340px;padding:22px 12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.showcase-phone{width:158px}.showcase-jar{width:120%}.showcase-phone-photo{height:122px}.showcase-phone-photo .photo-jar{width:132px}.brand-showcase-heading{padding:16px}.brand-showcase-form{grid-template-areas:"scene scene" "name name" "product product" "footer footer"}.showcase-field{padding:12px 16px 0}.showcase-name-field{padding-top:18px}.showcase-form-footer{padding:0 16px 18px}}
@media(max-width:760px){.white-hero{grid-template-areas:"heading" "intro" "preview";gap:24px;padding-top:28px}.white-hero h1{font-size:44px;line-height:1.04;letter-spacing:-2px;margin-bottom:0}.white-hero-heading .eyebrow{margin-bottom:15px}.white-hero-intro .hero-lede{font-size:16px}.brand-showcase{max-width:590px;margin:0 auto}.feature-section:has(.brand-showcase)>div:last-child{grid-row:1}.brand-showcase-form{grid-template-columns:1fr;grid-template-areas:"name" "scene" "product" "footer"}.brand-showcase-scene{height:340px}.brand-showcase-heading{padding:14px 18px}.showcase-field{padding:16px 18px}.showcase-product-field{padding-bottom:0}.showcase-form-footer{padding:0 18px 18px}.showcase-jar{max-width:320px}.showcase-field input,.showcase-field select{font-size:16px}}
@media(max-width:420px){.white-hero h1{font-size:42px}.brand-showcase-scene{height:320px;padding:22px 10px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.showcase-phone{width:148px;padding:6px;border-radius:25px}.showcase-phone-camera{top:6px}.showcase-phone-screen{border-radius:19px}.showcase-phone-brand{font-size:10px;padding:21px 10px 9px}.showcase-phone-photo{height:113px}.showcase-phone-photo .photo-jar{width:126px}.showcase-phone-copy{padding:10px}.showcase-phone-copy>strong{font-size:15px}.showcase-phone-footer{padding:8px 10px 10px;font-size:5.5px}.showcase-jar{width:120%}.brand-showcase-heading{font-size:9px}.showcase-field{padding:14px 16px}.showcase-product-field{padding-bottom:0}.showcase-form-footer{padding:0 16px 16px}}
@media(min-width:761px) and (max-width:1000px){.white-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "intro" "preview";gap:28px}.white-hero .brand-showcase{max-width:590px;margin-inline:auto}.white-hero-heading h1{margin-bottom:0}}
/* Let long names and the phone frame set the scene height without covering the controls. */
.brand-showcase-scene{height:auto;min-height:320px}
@media(prefers-reduced-motion:reduce){.showcase-continue{transition:none}.showcase-continue:hover{transform:none}}