:root{--ink:#171816;--paper:#f5f5f1;--white:#fff;--line:#d9dcd5;--muted:#666b63;--green:#166b56;--mint:#d8efe4;--yellow:#f1ef9d;--coral:#df6b52}
.hair-page{background:var(--paper);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hair-page *{box-sizing:border-box;letter-spacing:0}.hair-page main{overflow:hidden}.hair-page button,.hair-page input,.hair-page textarea{font:inherit}.hair-page .topbar{position:relative;border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)}.hair-page .brand-mark{border-radius:6px}.hair-page .topnav a{font-weight:700}
.eyebrow{margin:0 0 12px;color:var(--green);font-size:12px;font-weight:850;text-transform:uppercase}
.try-on{max-width:1260px;margin:0 auto;padding:44px 28px 72px}.tool-heading{max-width:840px;margin-bottom:34px}.tool-heading h1{margin:0;font-size:62px;line-height:1.02;font-weight:800}.tool-heading>p:last-child{max-width:680px;margin:18px 0 0;color:var(--muted);font-size:18px;line-height:1.55}
.try-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);gap:36px;align-items:start}.control-panel{border-top:2px solid var(--ink)}.tool-step{padding:25px 0;border-bottom:1px solid var(--line)}.step-title{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;margin-bottom:18px}.step-title>span{display:grid;width:28px;height:28px;place-items:center;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:800}.step-title h2{margin:0;font-size:22px;line-height:1.2}.step-title p{margin:4px 0 0;color:var(--muted);font-size:12px}
.portrait-upload,.reference-upload{display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center;min-height:72px;padding:12px 15px;border:1px dashed #8b9188;border-radius:6px;background:#fff;cursor:pointer;transition:border-color .16s,background .16s}.portrait-upload:hover,.portrait-upload.is-dragging,.reference-upload:hover{border-color:var(--green);background:#f7fbf9}.portrait-upload input,.reference-upload input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0}.upload-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:var(--mint);color:var(--green);font-size:25px}.portrait-upload>span:last-child,.reference-upload>span:last-child{display:grid;gap:4px}.portrait-upload strong,.reference-upload strong{font-size:14px}.portrait-upload small,.reference-upload small{color:var(--muted);font-size:11px;line-height:1.35}.tool-status{min-height:18px;margin:9px 0 0;color:var(--muted);font-size:11px}.tool-status.is-error{color:#a8382c}
.source-tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;margin-bottom:15px;padding:3px;border-radius:6px;background:#e4e7e1}.source-tab{height:40px;border:0;border-radius:4px;background:transparent;color:#565b54;font-size:12px;font-weight:800;cursor:pointer}.source-tab.is-active{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.catalog-filters{display:flex;gap:6px;margin-bottom:10px;padding-bottom:4px;overflow-x:auto;scrollbar-width:thin}.catalog-filter{flex:0 0 auto;min-height:34px;padding:0 11px;border:1px solid #c7cbc3;border-radius:5px;background:#fff;color:#545951;font-size:10px;font-weight:800;cursor:pointer}.catalog-filter.is-active{border-color:var(--ink);background:var(--ink);color:#fff}.catalog-meta{min-height:16px;margin:0 0 10px;color:var(--muted);font-size:10px}
.style-catalog{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.style-card{position:relative;min-width:0;padding:0;overflow:hidden;border:2px solid transparent;border-radius:6px;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.style-image{position:relative;display:block}.style-card img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.style-card .style-copy{display:grid;min-height:48px;gap:2px;padding:9px 8px}.style-card b{overflow-wrap:anywhere;font-size:11px;line-height:1.2}.style-card small{color:var(--muted);font-size:9px;line-height:1.2}.style-tags{position:absolute;right:5px;bottom:5px;left:5px;display:flex;flex-wrap:wrap;gap:3px}.style-tag{padding:3px 5px;border-radius:3px;background:rgba(255,255,255,.92);color:#2f5147;font-size:7px;font-style:normal;font-weight:850;text-transform:uppercase}.style-tag.is-summer{color:#735400}.style-tag.is-autumn{color:#8b3e2f}.style-card>i{display:none;position:absolute;top:6px;right:6px;width:24px;height:24px;place-items:center;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-style:normal}.style-card[aria-pressed="true"]{border-color:var(--green)}.style-card[aria-pressed="true"]>i{display:grid}
.reference-upload{min-height:86px}.reference-list{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.reference-item{position:relative;margin:0;overflow:hidden;border-radius:6px;background:#eee}.reference-item img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}.reference-item button{position:absolute;top:5px;right:5px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(20,20,20,.82);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.package-warning{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;margin-top:12px;padding:13px 14px;border:1px solid #d9a43b;border-radius:6px;background:#fff8e8}.package-warning[hidden]{display:none}.package-warning b{font-size:12px}.package-warning p{margin:3px 0 0;color:#685d48;font-size:10px;line-height:1.4}.package-warning-actions{display:flex;gap:6px}.package-warning button{display:grid;min-width:90px;gap:2px;padding:8px 10px;border:1px solid #b78325;border-radius:5px;background:#fff;color:var(--ink);cursor:pointer}.package-warning button span{font-size:9px}.package-warning button strong{font-size:13px}.package-warning button:hover{background:#fff0cc}
.wish-field{display:grid;gap:7px;margin-top:18px;font-size:11px;font-weight:800}.wish-field span{color:var(--muted);font-weight:500}.wish-field textarea{width:100%;min-height:74px;padding:10px 12px;resize:vertical;border:1px solid #aeb3aa;border-radius:5px;background:#fff;font-size:12px;line-height:1.45}
.order-bar{padding-top:22px}.order-facts{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:13px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.order-facts span{padding:11px 8px;color:var(--muted);font-size:10px;text-align:center}.order-facts span+span{border-left:1px solid var(--line)}.order-facts b{display:block;margin-bottom:2px;color:var(--ink);font-size:14px}.order-button{display:flex;width:100%;min-height:58px;align-items:center;justify-content:space-between;gap:15px;padding:0 20px;border:0;border-radius:6px;background:var(--green);color:#fff;font-weight:800;cursor:pointer}.order-button strong{font-size:20px}.order-button:disabled{background:#abb0aa;cursor:not-allowed}.order-bar>p{margin:9px 0 0;color:var(--muted);font-size:10px;text-align:center}
.portrait-panel{position:sticky;top:18px}.portrait-frame{--demo-position:52%;position:relative;height:610px;overflow:hidden;border-radius:7px;background:#202320}.portrait-frame>img,.hair-demo-after img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%;filter:saturate(.93)}.hair-demo-after{position:absolute;z-index:1;inset:0;clip-path:inset(0 calc(100% - var(--demo-position)) 0 0)}.hair-demo-divider{position:absolute;z-index:3;top:0;bottom:0;left:var(--demo-position);width:2px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.22);transform:translateX(-1px);pointer-events:none}.hair-demo-divider i{position:absolute;top:50%;left:50%;width:38px;height:38px;border:2px solid #fff;border-radius:50%;background:rgba(17,24,21,.78);box-shadow:0 2px 12px rgba(0,0,0,.25);transform:translate(-50%,-50%)}.hair-demo-divider i:before,.hair-demo-divider i:after{content:"";position:absolute;top:11px;width:2px;height:12px;border-radius:2px;background:#fff}.hair-demo-divider i:before{left:13px}.hair-demo-divider i:after{right:13px}.hair-demo-range{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;cursor:col-resize;opacity:0}.hair-demo-label{position:absolute;z-index:2;top:14px;padding:7px 9px;border-radius:4px;background:rgba(17,24,21,.78);color:#fff;font-size:9px;font-weight:850;text-transform:uppercase;pointer-events:none}.hair-demo-label.is-after{left:14px}.hair-demo-label.is-before{right:14px}.hair-demo-caption{margin:9px 2px 0;color:var(--muted);font-size:10px;line-height:1.45}.hair-demo-caption b{color:var(--ink)}.portrait-frame.has-user-photo>img{object-fit:contain;object-position:center;background:#202320;filter:none}.portrait-frame.has-user-photo .hair-demo-after,.portrait-frame.has-user-photo .hair-demo-label,.portrait-frame.has-user-photo .hair-demo-divider,.portrait-frame.has-user-photo .hair-demo-range{display:none}.scan-line{position:absolute;z-index:5;right:0;left:0;height:2px;background:var(--yellow);box-shadow:0 0 20px var(--yellow);animation:scan 1.5s ease-in-out infinite}@keyframes scan{0%{top:10%}50%{top:90%}100%{top:10%}}
.portrait-note{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:15px 2px;border-bottom:1px solid var(--line)}.portrait-note>span{display:grid;width:26px;height:26px;place-items:center;border-radius:50%;background:var(--mint);color:var(--green);font-weight:900}.portrait-note b{font-size:12px}.portrait-note p{margin:3px 0 0;color:var(--muted);font-size:10px;line-height:1.45}.selection-summary{display:flex;justify-content:space-between;gap:15px;padding:12px 2px;font-size:10px}.selection-summary span{color:var(--muted);text-transform:uppercase}.selection-summary strong{text-align:right}
.result-section{padding:72px max(28px,calc((100vw - 1204px)/2));background:#fff}.result-heading{max-width:700px}.result-heading h2{margin:0;font-size:44px}.result-heading>p:last-child{color:var(--muted);line-height:1.5}.result-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}.result-gallery figure{margin:0;overflow:hidden;border-radius:6px;background:var(--ink);color:#fff}.result-gallery img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;cursor:zoom-in}.result-gallery figcaption{padding:11px 13px;font-size:11px}.download-report{display:inline-flex;margin-top:18px;padding:13px 17px;border-radius:5px;background:var(--ink);color:#fff;font-size:12px;font-weight:800;text-decoration:none}
.how-section{padding:78px max(28px,calc((100vw - 1204px)/2));background:#e9eee9}.how-copy{max-width:720px}.how-copy h2{margin:0;font-size:45px}.how-copy>p:last-child{color:var(--muted);font-size:15px;line-height:1.6}.how-steps{display:grid;grid-template-columns:repeat(3,1fr);margin:34px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.how-steps article{min-height:170px;padding:22px 20px}.how-steps article+article{border-left:1px solid var(--line)}.how-steps span{color:var(--coral);font-size:11px;font-weight:850}.how-steps h3{margin:20px 0 7px;font-size:20px}.how-steps p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.catalog-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.catalog-strip img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
.hair-faq{display:grid;grid-template-columns:300px 1fr;gap:70px;max-width:1204px;margin:0 auto;padding:78px 0}.hair-faq h2{margin:0;font-size:36px}.faq-list{border-top:1px solid var(--ink)}.faq-list details{padding:19px 0;border-bottom:1px solid var(--line)}.faq-list summary{position:relative;padding-right:40px;font-size:15px;font-weight:800;cursor:pointer;list-style:none}.faq-list summary:after{content:"+";position:absolute;right:8px;font-size:21px;font-weight:400}.faq-list details[open] summary:after{content:"−"}.faq-list p{max-width:750px;margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
.hair-modal{display:none;position:fixed;z-index:100;inset:0;place-items:center;padding:18px}.hair-modal.is-open{display:grid}.modal-shade{position:absolute;inset:0;width:100%;border:0;background:rgba(14,16,14,.72);cursor:pointer}.modal-panel{position:relative;width:min(490px,100%);max-height:calc(100vh - 36px);padding:30px;overflow-y:auto;border-radius:7px;background:#fff;box-shadow:0 20px 80px rgba(0,0,0,.28)}.modal-panel h2{margin:0;font-size:30px}.modal-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;background:transparent;font-size:28px;cursor:pointer}.modal-order{display:flex;align-items:center;justify-content:space-between;margin:20px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.modal-order span{font-size:12px}.modal-order strong{font-size:26px}.modal-panel>label:not(.consent-check){display:block;margin-bottom:7px;font-size:11px;font-weight:800}.modal-panel>input{width:100%;height:48px;padding:0 12px;border:1px solid #a9ada4;border-radius:4px}.consent-check{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:start;margin-top:14px;color:var(--muted);font-size:10px;line-height:1.45;cursor:pointer}.consent-check input{width:18px;height:18px;margin:0}.consent-check a,.modal-panel>small a{color:inherit}.modal-error{min-height:18px;margin:7px 0 0;color:#a33428;font-size:11px}.pay-submit{width:100%;min-height:50px;border:0;border-radius:5px;background:var(--green);color:#fff;font-weight:800;cursor:pointer}.pay-submit:disabled{opacity:.55}.modal-panel>small{display:block;margin-top:11px;color:var(--muted);font-size:9px;line-height:1.5}
@media(max-width:980px){.try-grid{grid-template-columns:1fr}.portrait-panel{position:static;display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:18px;align-items:start;grid-row:1}.portrait-frame{height:500px}.portrait-note,.selection-summary{align-self:start}.style-catalog{grid-template-columns:repeat(4,minmax(0,1fr))}.result-gallery{grid-template-columns:repeat(2,1fr)}.hair-faq{grid-template-columns:1fr;gap:25px;padding:64px 22px}}
@media(max-width:620px){.hair-page .topnav a:not(:last-child){display:none}.try-on{padding:28px 14px 55px}.tool-heading{margin-bottom:25px}.tool-heading h1{font-size:39px}.tool-heading>p:last-child{font-size:15px}.try-grid{gap:20px}.portrait-panel{display:block;margin-right:-14px;margin-left:-14px;grid-row:1}.portrait-frame{height:430px;border-radius:0}.portrait-note,.selection-summary{margin:0 14px}.control-panel{grid-row:2}.step-title h2{font-size:19px}.style-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}.style-card .style-copy{min-height:50px}.reference-list{grid-template-columns:repeat(2,1fr)}.order-facts span{padding:9px 4px;font-size:9px}.order-facts b{font-size:12px}.order-button{padding:0 15px}.result-section{padding:55px 14px}.result-heading h2,.how-copy h2{font-size:33px}.result-gallery{grid-template-columns:1fr 1fr;gap:8px}.how-section{padding:55px 14px}.how-steps{grid-template-columns:1fr}.how-steps article{min-height:0;padding:18px 4px}.how-steps article+article{border-top:1px solid var(--line);border-left:0}.how-steps h3{margin:8px 0 5px}.catalog-strip{grid-template-columns:repeat(5,150px);overflow-x:auto;margin-right:-14px}.hair-faq{padding:55px 14px}.modal-panel{padding:26px 19px}}
@media(prefers-reduced-motion:reduce){.scan-line{animation:none;top:50%}}
@media(min-width:981px){.try-on{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr);column-gap:36px;align-items:start}.tool-heading{grid-column:1}.try-grid{display:contents}.control-panel{grid-column:1;min-width:0}.portrait-panel{grid-column:2;grid-row:1 / span 2}}
.try-grid,.control-panel,.portrait-panel{min-width:0}
.hair-plans{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0;margin:24px 0 0;padding:0;border:0}.hair-plans legend{margin-bottom:9px;padding:0;color:var(--muted);font-size:10px;font-weight:800;text-transform:uppercase}.manual-plans{display:grid;gap:9px;min-width:0;padding:11px 12px;border:1px solid #c5cac2;border-radius:6px;background:#fff}.plan-intro{display:grid;gap:2px;min-width:0}.plan-intro b{font-size:12px;line-height:1.2}.plan-intro small{color:var(--muted);font-size:9px;line-height:1.25}.manual-plan-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.hair-plan{position:relative;min-width:0;cursor:pointer}.hair-plan input{position:absolute;width:1px;height:1px;opacity:0}.manual-plan-options .hair-plan>span{display:grid;min-height:54px;place-content:center;gap:5px;padding:5px;border:1px solid #d3d6d0;border-radius:4px;background:#f8f9f7;text-align:center}.manual-plan-options .hair-plan b{font-size:9px;line-height:1.1}.manual-plan-options .hair-plan strong{font-size:16px;line-height:1;white-space:nowrap}.manual-plan-options .hair-plan.is-selected>span{border:3px solid var(--green);padding:3px;background:#e5f3ec;color:var(--green);box-shadow:0 2px 8px rgba(22,107,86,.18)}.hair-plan input:focus-visible+span{outline:3px solid rgba(22,107,86,.25);outline-offset:2px}.ai-plan>span{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:100%;padding:11px 13px;border:1px solid #99c7b4;border-radius:6px;background:#eef7f2}.ai-plan i{display:grid;width:34px;height:34px;place-items:center;border-radius:5px;background:var(--green);color:#fff;font-size:10px;font-style:normal;font-weight:900}.ai-plan>span>span{display:grid;gap:3px;min-width:0}.ai-plan b{font-size:12px;line-height:1.2}.ai-plan small{color:#4f655c;font-size:9px;line-height:1.25}.ai-plan strong{font-size:21px;white-space:nowrap}.ai-plan.is-selected>span{border:3px solid var(--green);padding:9px 11px;box-shadow:0 2px 10px rgba(22,107,86,.18)}.ai-selection-panel{padding:16px;border:1px solid #b9d7c8;border-radius:6px;background:#eef7f2}.ai-selection-panel b{font-size:14px}.ai-selection-panel p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.desktop-order-slot:not(:empty){margin-top:4px;padding-top:2px;border-top:1px solid var(--line)}.desktop-order-slot .wish-field{margin-top:11px}.desktop-order-slot .order-bar{padding-top:13px}
.hair-plan.is-promo strong{display:grid;gap:2px}.hair-plan.is-promo strong s{color:#788078;font-size:9px;font-weight:600}.hair-plan.is-promo strong span{color:var(--green);font-size:17px}.hair-promo-note{margin:10px 0 0;padding:11px 13px;border:1px solid #8fc5ae;border-radius:5px;background:#edf8f3;color:#244a3d;font-size:11px;line-height:1.45}.hair-promo-note[hidden]{display:none}
@media(min-width:981px){.portrait-frame{height:clamp(430px,calc(100vh - 360px),610px)}}
@media(max-width:980px){.hair-plans{grid-template-columns:1fr}}
@media(max-width:620px){.hair-plans{margin-top:19px}.manual-plans{gap:9px;padding:12px}.manual-plan-options .hair-plan>span{min-height:52px}.manual-plan-options .hair-plan strong{font-size:15px}.ai-plan>span{grid-template-columns:34px minmax(0,1fr) auto;padding:11px}.ai-plan b{font-size:11px}.ai-plan small{font-size:8px}.ai-plan strong{font-size:18px}}
@media(max-width:620px){.package-warning{grid-template-columns:1fr}.package-warning-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.package-warning button{min-width:0}}