:root{
  --plum:#351043; --deep:#210820; --gold:#c99a34; --pink:#dc3174;
  --cream:#faf6f0; --paper:#fffdf9; --ink:#2d222b; --muted:#6e626b; --line:#eadfd8;
  --shadow:0 16px 36px rgba(53,16,67,.12); --radius:24px;
}
*{box-sizing:border-box} html{background:#efe8e4} body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:linear-gradient(180deg,#f8f2ed,#efe7e2);min-height:100vh}
button,input,select{font:inherit} button{cursor:pointer} #app-shell{width:min(100%,560px);min-height:100vh;margin:auto;background:var(--cream);box-shadow:0 0 40px rgba(0,0,0,.08);position:relative;padding-bottom:86px}
.topbar{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;background:rgba(250,246,240,.93);backdrop-filter:blur(16px);z-index:20;border-bottom:1px solid rgba(90,45,70,.06)}
.brand{border:0;background:none;color:var(--plum);display:flex;align-items:baseline;padding:0}.brand-mark{font-family:Georgia,serif;font-size:30px;letter-spacing:-3px}.brand-word{font-family:Georgia,serif;font-size:24px;margin-left:4px}.top-actions{display:flex;gap:8px}.icon-btn{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:var(--paper);position:relative}.cart-btn span{position:absolute;top:-2px;right:-3px;background:var(--pink);color:white;width:18px;height:18px;border-radius:50%;font-size:10px;display:grid;place-items:center}
.view{min-height:calc(100vh - 154px)}.page{padding:18px 18px 36px}.page-title{padding:10px 4px 18px}.page-title h1,.section-heading h2{font-family:Georgia,serif;color:var(--plum);margin:2px 0}.page-title h1{font-size:34px}.page-title p:last-child{color:var(--muted);margin:8px 0 0;line-height:1.45}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.14em;margin:0 0 8px}.purple{color:var(--plum)}.gold{color:var(--gold)}
.image-card,.wig-hero,.learn-hero,.services-image{border-radius:28px;overflow:hidden;box-shadow:var(--shadow)}.hero-card{height:420px;position:relative;background-size:cover;background-position:center}.hero-image{background-image:linear-gradient(90deg,rgba(31,7,31,.86),rgba(31,7,31,.35) 52%,rgba(31,7,31,.05)),url('assets/hero.png')}.hero-overlay{position:absolute;inset:0;padding:34px 24px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#fff;max-width:75%}.hero-overlay h1{font-family:Georgia,serif;font-size:38px;line-height:1.03;margin:0 0 12px}.hero-overlay p:not(.eyebrow){line-height:1.45;margin:0 0 20px}.btn{border:0;border-radius:14px;padding:13px 18px;font-weight:750}.btn.primary{background:var(--plum);color:#fff}.btn.secondary{background:#efe2ec;color:var(--plum)}.btn.light{background:#fff;color:var(--plum)}.btn.ghost-light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.55)}.btn.full{width:100%;margin-top:16px}.text-link{border:0;background:none;color:var(--pink);font-weight:750;padding:0}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin:26px 2px 14px}.section-heading h2{font-size:24px}.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quick-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;text-align:left;padding:16px;min-height:132px;color:var(--ink);box-shadow:0 8px 20px rgba(53,16,67,.05)}.quick-card b,.quick-card small{display:block}.quick-card b{color:var(--plum);margin:10px 0 4px}.quick-card small{color:var(--muted)}.quick-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:#f2e5ec;color:var(--plum);font-size:20px}
.feature-card{margin-top:22px;border-radius:24px;padding:20px;display:grid;grid-template-columns:1.4fr .8fr;gap:16px;overflow:hidden}.soft-card{background:#efe1e8}.dark-card{background:var(--deep);color:#fff}.feature-card h3{font-family:Georgia,serif;font-size:24px;color:var(--plum);margin:4px 0 7px}.dark-card h3{color:#fff}.feature-card p{line-height:1.45;margin:0 0 12px}.feature-thumb{border-radius:18px;background-size:cover;background-position:center}.curls-thumb{background-image:url('assets/curls.png')}.product-thumb{background-image:url('assets/products.png')}
.article-feature{width:100%;display:grid;grid-template-columns:120px 1fr;gap:14px;border:1px solid var(--line);background:var(--paper);padding:12px;border-radius:20px;text-align:left;color:var(--ink)}.article-image{height:112px;border-radius:16px;background-size:cover;background-position:center}.oil-image{background-image:url('assets/products.png')}.article-feature h3{font-family:Georgia,serif;color:var(--plum);margin:7px 0}.article-feature p{color:var(--muted);margin:0}.tag{display:inline-block;font-size:10px;font-weight:800;background:#f1e6eb;color:var(--plum);padding:6px 8px;border-radius:999px}.gold-tag{background:rgba(201,154,52,.15);color:#8a6413}
.tabs{display:flex;gap:6px;background:#eee4e8;padding:5px;border-radius:16px;margin-bottom:18px}.tab{flex:1;border:0;background:transparent;border-radius:12px;padding:10px;color:var(--muted);font-weight:700}.tab.active{background:#fff;color:var(--plum);box-shadow:0 4px 10px rgba(53,16,67,.08)}.tab-panel{display:none}.tab-panel.active{display:block}.form-card,.profile-form{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:18px}.form-card label,.profile-form label{display:block;font-size:12px;font-weight:800;color:var(--plum);margin-bottom:14px}.form-card select,.profile-form input{width:100%;margin-top:7px;padding:13px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink)}.save-note{color:#2d7b59;font-size:12px}.routine-hero{padding:22px;border-radius:24px;background:linear-gradient(135deg,var(--plum),#7d245d);color:white}.routine-hero h2{font-family:Georgia,serif;font-size:28px;margin:0 0 8px}.routine-hero p{margin:0;line-height:1.45}.routine-list{display:grid;gap:10px;margin:16px 0}.routine-item{display:grid;grid-template-columns:42px 1fr;gap:12px;background:var(--paper);padding:14px;border:1px solid var(--line);border-radius:18px}.routine-num{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#eee2eb;color:var(--plum);font-weight:800}.routine-item b{color:var(--plum)}.routine-item p{margin:4px 0 0;color:var(--muted);font-size:13px}.coach-note{display:flex;gap:12px;padding:16px;border-radius:18px;background:#f1e7cd}.coach-note>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#fff;font-family:Georgia,serif}.coach-note p{margin:4px 0 0;font-size:13px}.journal-empty{text-align:center;padding:32px 18px;background:var(--paper);border-radius:22px;border:1px solid var(--line)}.journal-icon{font-size:38px}.journal-empty h3{font-family:Georgia,serif;color:var(--plum);font-size:24px;margin:8px 0}.journal-list{display:grid;gap:10px;margin-top:14px}.journal-entry{padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}.journal-entry p{margin:5px 0 0;color:var(--muted)}
.category-chips{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:9px 13px;border-radius:999px;color:var(--muted)}.chip.active{background:var(--plum);color:white;border-color:var(--plum)}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.product-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}.product-photo{height:160px;background-size:cover;background-position:center}.product-body{padding:13px}.product-body h3{font-family:Georgia,serif;color:var(--plum);margin:0 0 4px;font-size:17px}.product-body p{color:var(--muted);font-size:12px;margin:0 0 8px}.price-row{display:flex;align-items:center;justify-content:space-between}.price{font-weight:850}.mini-btn{border:0;background:var(--plum);color:white;padding:8px 10px;border-radius:10px;font-size:12px}
.wig-hero{height:310px;background:linear-gradient(90deg,rgba(42,8,38,.88),rgba(42,8,38,.26)),url('assets/curls.png') center/cover;display:flex;align-items:center;padding:24px;color:#fff}.wig-hero>div{max-width:65%}.wig-hero h2,.learn-hero h2{font-family:Georgia,serif;font-size:30px;margin:10px 0}.wig-hero p,.learn-hero p{line-height:1.45}.wardrobe-card{margin-top:22px;border:1px solid var(--line);background:#fff;border-radius:22px;padding:20px}.wardrobe-card h3{font-family:Georgia,serif;color:var(--plum);font-size:22px;margin:4px 0 8px}.wardrobe-card p{color:var(--muted);line-height:1.45}
.services-image{height:260px;background:linear-gradient(90deg,rgba(42,8,38,.15),rgba(42,8,38,.02)),url('assets/curls.png') center/cover;margin-bottom:16px;border-radius:22px}.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.service-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:16px;text-align:left;color:var(--ink)}.service-card span{font-size:24px;color:var(--plum)}.service-card h3{font-family:Georgia,serif;color:var(--plum);font-size:19px;margin:8px 0 5px}.service-card p{font-size:12px;color:var(--muted);margin:0;line-height:1.4}.how-card{margin-top:18px;background:#efe5e9;border-radius:22px;padding:18px}.how-card h2{font-family:Georgia,serif;color:var(--plum);margin-top:0}.how-card ol{list-style:none;padding:0;margin:0;counter-reset:steps}.how-card li{position:relative;padding:11px 0 11px 48px;border-bottom:1px solid rgba(53,16,67,.10)}.how-card li:last-child{border:0}.how-card li:before{counter-increment:steps;content:counter(steps);position:absolute;left:0;top:8px;width:32px;height:32px;border-radius:50%;background:var(--pink);color:#fff;display:grid;place-items:center;font-weight:800}.how-card b,.how-card span{display:block}.how-card span{font-size:12px;color:var(--muted);margin-top:3px}
.learn-hero{height:300px;background:linear-gradient(90deg,rgba(42,8,38,.9),rgba(42,8,38,.25)),url('assets/final.png') center/cover;display:flex;align-items:center;padding:24px;color:#fff}.learn-hero>div{max-width:68%}.lesson-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.lesson-grid article{background:#fff;border:1px solid var(--line);border-radius:20px;padding:16px}.lesson-grid article>span{font-size:26px}.lesson-grid h3{font-family:Georgia,serif;color:var(--plum);font-size:19px;margin:8px 0 5px}.lesson-grid p{font-size:12px;color:var(--muted);line-height:1.4;margin:0}
.profile-hero{text-align:center;padding:25px 10px}.avatar{margin:auto;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--plum),var(--pink));color:white;font-family:Georgia,serif;font-size:30px;box-shadow:var(--shadow)}.profile-hero h1{font-family:Georgia,serif;color:var(--plum);font-size:30px;margin:12px 0 5px}.profile-hero p{color:var(--muted);margin:0}.profile-menu{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;margin-bottom:16px}.profile-menu button{width:100%;display:grid;grid-template-columns:34px 1fr 20px;align-items:center;gap:10px;border:0;border-bottom:1px solid var(--line);background:#fff;padding:14px;text-align:left;color:var(--ink)}.profile-menu button:last-child{border-bottom:0}.profile-menu b,.profile-menu small{display:block}.profile-menu small{color:var(--muted);margin-top:2px}.profile-menu em{font-size:24px;color:#a597a1;font-style:normal}
.bottom-nav{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(100%,560px);height:76px;padding:8px 8px max(8px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,253,249,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);z-index:30}.nav-item{border:0;background:transparent;color:#8d8089;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}.nav-item span{font-size:20px}.nav-item small{font-size:10px}.nav-item.active{color:var(--plum);font-weight:800}
dialog{width:min(92%,480px);border:0;border-radius:24px;padding:0;box-shadow:0 30px 70px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(24,7,23,.55);backdrop-filter:blur(4px)}.modal-close{position:absolute;right:14px;top:12px;border:0;background:#f2e8ed;width:34px;height:34px;border-radius:50%;font-size:22px;color:var(--plum);z-index:2}#modalContent{padding:30px 22px 22px}#modalContent h2{font-family:Georgia,serif;color:var(--plum);margin-top:0}.modal-form label{display:block;font-weight:750;color:var(--plum);font-size:12px;margin:12px 0}.modal-form input,.modal-form select,.modal-form textarea{display:block;width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:12px}.modal-form textarea{min-height:90px;resize:vertical}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;background:var(--deep);color:#fff;padding:12px 18px;border-radius:999px;font-size:13px;z-index:100;box-shadow:var(--shadow)}
@media(min-width:900px){#app-shell{width:min(1180px,100%);padding-bottom:0}.topbar{padding:0 34px}.bottom-nav{position:sticky;top:68px;bottom:auto;transform:none;left:auto;width:100%;height:58px;grid-template-columns:repeat(7,auto);justify-content:center;gap:20px;border-top:0;border-bottom:1px solid var(--line)}.nav-item{flex-direction:row;padding:0 10px}.page{padding:30px 36px 55px}.home-page{display:grid;grid-template-columns:1.2fr .8fr;gap:24px}.home-page>.hero-card{grid-row:span 3}.home-page>.section-heading:first-of-type,.home-page>.quick-grid,.home-page>.feature-card{grid-column:2}.home-page>.section-heading:last-of-type,.home-page>.article-feature{grid-column:1/-1}.product-grid{grid-template-columns:repeat(4,1fr)}.service-grid,.lesson-grid{grid-template-columns:repeat(4,1fr)}.page-title{max-width:760px}.form-card{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.form-card .btn,.form-card .save-note{grid-column:1/-1}.hero-card{height:520px}.wig-hero,.learn-hero{height:390px}.services-image{height:360px}}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap}.wig-service-bridge{margin-top:18px;border-radius:22px;padding:20px;background:linear-gradient(135deg,#f3e5ed,#fff9f2);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:18px}.wig-service-bridge h3{font-family:Georgia,serif;color:var(--plum);font-size:22px;margin:4px 0 7px}.wig-service-bridge p{margin:0;color:var(--muted);line-height:1.45}.build-note{margin-top:14px;padding:14px 16px;border:1px dashed #d8c7d1;border-radius:16px;color:var(--muted);display:flex;justify-content:space-between;gap:12px;font-size:12px}.build-note b{color:var(--plum)}.cart-list{display:grid;gap:10px;margin:14px 0}.cart-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px;border:1px solid var(--line);border-radius:14px}.cart-row b,.cart-row small{display:block}.cart-row small{margin-top:4px;color:var(--muted)}.cart-row button{align-self:center;border:0;background:#f3e5ed;color:var(--plum);border-radius:10px;padding:8px 10px}.cart-total{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--line);font-size:18px}.cart-actions{display:grid;gap:8px;margin-top:14px}.match-card{padding:15px;border-radius:16px;background:#f5eaf0;margin:12px 0}.match-card h3{font-family:Georgia,serif;color:var(--plum);margin:0 0 5px}.match-actions{display:grid;gap:9px;margin-top:14px}@media(max-width:520px){.wig-service-bridge{align-items:flex-start;flex-direction:column}.wig-service-bridge .btn{width:100%}}

.empty-state{grid-column:1/-1;padding:28px;border:1px dashed var(--line);border-radius:18px;background:var(--paper);text-align:center;color:var(--muted)}.empty-state b{color:var(--plum)}.empty-state p{margin:6px 0 0}


/* BBHair MVP v6 — shared pilot layer */
.pilot-gate{position:fixed;inset:0;z-index:1000;background:rgba(31,8,30,.82);backdrop-filter:blur(10px);display:grid;place-items:center;padding:20px;overflow:auto}.pilot-gate-card{width:min(100%,520px);background:#fffaf4;border-radius:28px;padding:26px;box-shadow:0 30px 90px rgba(0,0,0,.38)}.pilot-logo{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--plum),var(--pink));color:#fff;font:700 22px Georgia,serif;margin-bottom:14px}.pilot-gate h1{font:700 30px Georgia,serif;color:var(--plum);margin:5px 0 12px}.pilot-gate p{color:var(--muted);line-height:1.5}.pilot-privacy{background:#f2e8ed;padding:12px 14px;border-radius:14px;font-size:12px}.pilot-error{background:#fff0f0;color:#9b2424;border:1px solid #f0caca;padding:10px 12px;border-radius:12px;margin:12px 0;font-size:12px}.pilot-gate form{display:grid;gap:12px;margin-top:16px}.pilot-gate label{font-size:12px;font-weight:800;color:var(--plum)}.pilot-gate label span{font-weight:500;color:var(--muted)}.pilot-gate input[type=text],.pilot-gate input[type=email],.pilot-gate input:not([type]){width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.pilot-gate input[name=name],.pilot-gate input[name=email]{width:100%;margin-top:6px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}.consent-check{display:grid!important;grid-template-columns:20px 1fr;gap:9px;align-items:start;font-weight:600!important}.consent-check input{margin-top:3px}.pilot-footnote{display:block;text-align:center;color:var(--muted)}.feedback-fab{position:fixed;right:max(16px,calc((100vw - min(1180px,100vw))/2 + 16px));bottom:90px;z-index:80;border:0;border-radius:999px;padding:11px 15px;background:var(--plum);color:#fff;box-shadow:var(--shadow);font-weight:800}.feedback-fab span{margin-left:4px}.pilot-status-card{display:flex;align-items:center;gap:11px;padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-top:14px}.cloud-dot{width:11px;height:11px;border-radius:50%;background:#2cb777;box-shadow:0 0 0 4px rgba(44,183,119,.12)}.pilot-status-card b,.pilot-status-card small{display:block}.pilot-status-card b{color:var(--plum)}.pilot-status-card small{color:var(--muted);margin-top:3px}.modal-form label span{font-weight:500;color:var(--muted)}
@media(min-width:900px){.feedback-fab{bottom:24px}}


/* BBHair MVP v7 — customer experience */
.collection-note{font-size:12px;color:var(--muted)}
.service-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.request-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;max-width:none}
.request-title-row>div{max-width:760px}
.pilot-callout{display:flex;gap:10px;align-items:center;background:#f4ead0;border:1px solid #e8d8a8;border-radius:16px;padding:12px 14px;margin-bottom:18px;color:#6b5520}.pilot-callout b{color:#4a3710}.pilot-callout span{font-size:12px}
.loading-card{grid-column:1/-1;padding:26px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--muted);text-align:center}
.request-list{display:grid;gap:14px}.request-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px}.request-card-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.request-card h3{font-family:Georgia,serif;color:var(--plum);font-size:22px;margin:3px 0 0}.status-pill{display:inline-flex;align-items:center;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800;background:#f0e5ea;color:var(--plum)}.status-ready{background:#dcf6e7;color:#176d45}.status-care,.status-styling{background:#fff0c7;color:#7a5712}.request-details{color:var(--muted);line-height:1.5;margin:14px 0}.request-meta{display:flex;gap:22px;flex-wrap:wrap;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.request-meta span{display:grid;gap:3px;color:var(--muted);font-size:12px}.request-meta b{color:var(--ink);font-size:11px;text-transform:uppercase;letter-spacing:.06em}.request-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:14px}.request-steps span{position:relative;padding-top:15px;text-align:center;font-size:10px;color:#a897a2}.request-steps span:before{content:'';position:absolute;top:2px;left:50%;transform:translateX(-50%);width:9px;height:9px;border-radius:50%;background:#d7cbd2}.request-steps span.done{color:var(--plum);font-weight:800}.request-steps span.done:before{background:var(--pink);box-shadow:0 0 0 3px rgba(220,49,116,.12)}
.success-mark{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#e1f6e8;color:#1b7c4d;font-size:26px;font-weight:900;margin-bottom:12px}.request-confirmation{display:grid;grid-template-columns:1fr auto;gap:9px 18px;background:#f7f0f4;border-radius:16px;padding:14px;margin:14px 0}.request-confirmation span{color:var(--muted);font-size:12px}.request-confirmation b{color:var(--plum);text-align:right}
.wig-detail-photo{height:270px;border-radius:18px;background-position:center;background-size:cover;margin:-8px 0 18px}.wig-detail-sub{color:var(--muted);margin:4px 0}.wig-detail-price{font:700 26px Georgia,serif;color:var(--plum);margin:10px 0 14px}.wig-spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wig-spec-grid>div{background:#f7f0f4;border-radius:14px;padding:11px}.wig-spec-grid span,.wig-spec-grid b{display:block}.wig-spec-grid span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:4px}.wig-spec-grid b{font-size:12px;color:var(--plum)}.care-note{margin:12px 0;padding:12px 14px;border-left:3px solid var(--gold);background:#fff8e8;border-radius:0 12px 12px 0}.care-note b{color:var(--plum)}.care-note p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}.wardrobe-item .tag{display:inline-block;margin-bottom:6px}.wardrobe-service{margin-top:12px;text-align:left}
@media(max-width:620px){.request-title-row{align-items:flex-start;flex-direction:column}.request-title-row .btn{width:100%}.service-actions{grid-template-columns:1fr}.request-card-head{flex-direction:column}.request-steps{grid-template-columns:1fr;gap:0}.request-steps span{text-align:left;padding:7px 0 7px 24px}.request-steps span:before{left:7px;top:10px;transform:none}.wig-spec-grid{grid-template-columns:1fr}.feedback-fab{bottom:84px}.pilot-callout{align-items:flex-start;flex-direction:column}}


/* BBHair MVP v8 — identity, routing, learning and broader representation */
.account-nudge-slot:empty{display:none}.account-nudge{margin:18px 0 4px;border-radius:20px;padding:16px 18px;background:linear-gradient(135deg,#32103f,#6f245c);color:#fff;display:flex;justify-content:space-between;gap:16px;align-items:center}.account-nudge h3{font:700 19px Georgia,serif;margin:0 0 5px}.account-nudge p{margin:0;color:#eadfe7;font-size:12px;line-height:1.45}.account-nudge .btn{flex:0 0 auto}.account-card{margin-top:14px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px}.account-card h3{font:700 20px Georgia,serif;color:var(--plum);margin:0 0 6px}.account-card p{margin:0;color:var(--muted);line-height:1.45}.account-card .account-email{display:block;color:var(--plum);font-weight:800;margin-top:8px}.account-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px}.account-badge{display:inline-flex;gap:6px;align-items:center;border-radius:999px;padding:6px 9px;background:#e4f5ea;color:#176c45;font-size:11px;font-weight:800}.account-badge.anon{background:#f6ead0;color:#6e5319}.account-session-note{display:block;margin-top:9px;color:var(--muted);font-size:11px;line-height:1.4}.auth-check{display:grid;place-items:center;text-align:center;padding:18px 4px}.auth-check .auth-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#ece1ed;color:var(--plum);font-size:24px;margin-bottom:10px}.auth-check h2{font:700 26px Georgia,serif;color:var(--plum);margin:0 0 8px}.auth-check p{color:var(--muted);line-height:1.5}.auth-note{font-size:11px;color:var(--muted);margin-top:8px}
.learn-diverse-hero{border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#2a0a30,#702355);color:#fff;display:grid;grid-template-columns:1fr 1.25fr;min-height:310px;box-shadow:var(--shadow)}.learn-diverse-copy{padding:28px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.learn-diverse-copy h2{font:700 34px/1.03 Georgia,serif;margin:0 0 12px}.learn-diverse-copy p:not(.eyebrow){line-height:1.5;color:#eee1ea;margin:0 0 18px}.learn-diverse-photo{background:url('assets/learn_group_clean.png') center/cover;min-height:310px}.masterclass-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.masterclass-card{border:0;border-radius:24px;min-height:260px;padding:22px;text-align:left;color:#fff;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;box-shadow:var(--shadow);position:relative;overflow:hidden}.masterclass-card:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,5,28,.05),rgba(25,5,28,.9));z-index:0}.masterclass-card>*{position:relative;z-index:1}.masterclass-card h3{font:700 26px/1.05 Georgia,serif;margin:10px 0 8px}.masterclass-card p{line-height:1.45;margin:0 0 12px;color:#f2e9ef}.masterclass-card .lesson-meta{font-size:11px;font-weight:800;color:#e3cf9f}.oil-master{background:url('assets/final.png') center/cover}.signs-master{background:url('assets/model_redhead.png') center/cover}.lesson-grid-v8{gap:12px}.lesson-card-v8{padding:0;border:1px solid var(--line);background:#fff;border-radius:20px;overflow:hidden;text-align:left;color:var(--ink)}.lesson-card-v8>div:last-child{padding:14px}.lesson-card-v8 h3{font:700 18px Georgia,serif;color:var(--plum);margin:5px 0}.lesson-card-v8 p{font-size:12px;color:var(--muted);line-height:1.4;margin:0}.lesson-photo{height:145px;background-size:cover;background-position:center}.lp-black{background-image:url('assets/model_black_group.png')}.lp-asian{background-image:url('assets/model_asian_clean.png')}.lp-redhead{background-image:url('assets/model_redhead.png')}.lp-short{background-image:url('assets/model_short_clean.png')}.back-link{border:0;background:none;padding:6px 0 14px;color:var(--plum);font-weight:800}.lesson-hero-v8{border-radius:28px;overflow:hidden;background:#fff;border:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px}.lesson-hero-copy{padding:28px}.lesson-hero-copy h1{font:700 36px/1.02 Georgia,serif;color:var(--plum);margin:8px 0 12px}.lesson-hero-copy p{color:var(--muted);line-height:1.55}.lesson-hero-image{min-height:330px;background-size:cover;background-position:center}.lesson-body{max-width:860px;margin:0 auto}.lesson-intro{font:italic 18px/1.55 Georgia,serif;color:var(--plum);padding:18px 0}.lesson-section{background:#fff;border:1px solid var(--line);border-radius:20px;padding:18px;margin:12px 0}.lesson-section h2{font:700 22px Georgia,serif;color:var(--plum);margin:0 0 8px}.lesson-section p,.lesson-section li{color:var(--muted);line-height:1.55}.lesson-section ul,.lesson-section ol{padding-left:20px}.lesson-callout{border-radius:20px;padding:18px;background:#f2e5ec;margin:16px 0}.lesson-callout b{font:700 20px Georgia,serif;color:var(--plum)}.lesson-callout p{margin:6px 0 0;color:var(--muted)}.sign-list{display:grid;gap:10px}.sign-item{display:grid;grid-template-columns:42px 1fr;gap:12px;padding:14px;border:1px solid var(--line);background:#fff;border-radius:18px}.sign-item .sign-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#efe4eb;color:var(--plum);font-weight:900}.sign-item h3{font:700 17px Georgia,serif;color:var(--plum);margin:0 0 4px}.sign-item p{margin:0;color:var(--muted);line-height:1.45}.lesson-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.lesson-progress{margin:16px 0;padding:14px;border-radius:16px;background:#fff8e8;border:1px solid #eedfb7;color:#6b5520}.learn-complete{color:#1d7b4e;font-size:11px;font-weight:800;margin-top:8px}.inclusive-note{font-size:12px;color:var(--muted);text-align:center;margin-top:18px}.route-debug{display:none}
@media(min-width:900px){.learn-page-v8 .lesson-grid-v8{grid-template-columns:repeat(4,1fr)}.lesson-hero-v8{grid-template-columns:1.05fr .95fr}.account-nudge{margin-top:0}}
@media(max-width:720px){.learn-diverse-hero,.lesson-hero-v8{grid-template-columns:1fr}.learn-diverse-photo{min-height:260px}.learn-diverse-copy h2{font-size:29px}.masterclass-grid{grid-template-columns:1fr}.lesson-hero-image{min-height:250px}.lesson-hero-copy h1{font-size:31px}.account-nudge{align-items:flex-start;flex-direction:column}.account-nudge .btn{width:100%}}

/* BBHair MVP v9 — stable pilot base, richer desktop experience, natural + relaxed care */
.desktop-only-nav{display:none}
.profile-upgrade-callout{grid-column:1/-1;border:1px solid #ead7a2;background:linear-gradient(135deg,#fff7df,#fbf0cf);border-radius:18px;padding:14px 16px;color:#624a13}
.profile-upgrade-callout b{font-family:Georgia,serif;font-size:18px;color:var(--plum)}
.profile-upgrade-callout p{margin:5px 0 0;line-height:1.45;font-size:12px}
.hair-state-field{grid-column:1/-1;border:0;margin:0;padding:0 0 6px;min-width:0}
.hair-state-field legend{font-size:12px;font-weight:800;color:var(--plum);margin-bottom:9px}
.segmented-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segmented-choice label{margin:0!important;position:relative}
.segmented-choice input{position:absolute;opacity:0;pointer-events:none}
.segmented-choice span{display:block;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 15px;min-height:82px;transition:.18s ease}
.segmented-choice b,.segmented-choice small{display:block}.segmented-choice b{font:700 18px Georgia,serif;color:var(--plum)}.segmented-choice small{font-size:11px;color:var(--muted);font-weight:500;margin-top:5px;line-height:1.35}
.segmented-choice input:checked+span{border-color:#8e3a75;background:linear-gradient(135deg,#f4e9f0,#fff8f4);box-shadow:0 0 0 3px rgba(112,35,87,.10)}
.wardrobe-layout-v9{display:grid;gap:18px}.wardrobe-side-v9{border:1px solid var(--line);background:linear-gradient(150deg,#fffaf5,#f3e5ed);border-radius:24px;padding:22px;align-self:start}.wardrobe-side-v9 h3{font:700 25px/1.08 Georgia,serif;color:var(--plum);margin:5px 0 10px}.wardrobe-side-v9 p:not(.eyebrow){color:var(--muted);line-height:1.55}.wardrobe-side-v9 .btn{width:100%;margin:8px 0 14px}.wardrobe-side-v9 .text-link{display:block;text-align:left}

@media(max-width:899px){
  .desktop-only-nav{display:none!important}
  .segmented-choice{grid-template-columns:1fr}
  .wardrobe-side-v9{margin-top:4px}
}

@media(min-width:900px){
  body{background:
    radial-gradient(circle at 8% 8%,rgba(199,153,196,.25),transparent 24%),
    radial-gradient(circle at 92% 20%,rgba(218,181,117,.18),transparent 25%),
    linear-gradient(180deg,#eee5e2,#f6efea 48%,#eee6e2)}
  #app-shell{width:min(1440px,calc(100% - 48px));min-height:100vh;border-left:1px solid rgba(100,60,80,.08);border-right:1px solid rgba(100,60,80,.08);box-shadow:0 0 58px rgba(53,16,67,.10)}
  .topbar{height:76px;padding:0 48px}.brand-mark{font-size:34px}.brand-word{font-size:27px}.icon-btn{width:44px;height:44px}
  .bottom-nav{top:76px;height:62px;gap:14px;background:rgba(255,253,249,.94);box-shadow:0 7px 20px rgba(53,16,67,.035)}
  .desktop-only-nav{display:flex}.nav-item{padding:0 14px;gap:7px;border-radius:999px}.nav-item:hover{background:#f4eaf0}.nav-item.active{background:#efe3eb}.nav-item small{font-size:12px}.nav-item span{font-size:17px}
  .page{padding:44px 54px 72px}.page-title{padding:8px 2px 24px;max-width:880px}.page-title h1{font-size:44px;line-height:1.04}.page-title p:last-child{font-size:16px;max-width:760px}
  .hero-card{height:590px}.hero-overlay{padding:54px 46px;max-width:68%}.hero-overlay h1{font-size:52px}.quick-card{min-height:148px;padding:20px}.quick-card b{font-size:17px}.feature-card{padding:26px}.feature-card h3{font-size:29px}.article-feature{grid-template-columns:180px 1fr;padding:16px}.article-image{height:135px}.article-feature h3{font-size:22px}
  .home-page{grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr);gap:30px}.home-page>.hero-card{grid-row:span 3}.home-page>.section-heading:first-of-type,.home-page>.quick-grid,.home-page>.feature-card{grid-column:2}.home-page>.section-heading:last-of-type,.home-page>.article-feature{grid-column:1/-1}
  .form-card{padding:24px;gap:12px 20px}.form-card select,.profile-form input{padding:14px 15px}.hair-profile-card-v9{grid-template-columns:1fr 1fr}.hair-state-field,.profile-upgrade-callout,.hair-profile-card-v9 .btn,.hair-profile-card-v9 .save-note{grid-column:1/-1}
  .hair-page-v9 .routine-list{grid-template-columns:1fr 1fr;gap:12px}.hair-page-v9 .routine-item{min-height:104px;padding:18px}.hair-page-v9 .routine-item:last-child{grid-column:1/-1}.hair-page-v9 .routine-hero{padding:28px}.hair-page-v9 .routine-hero h2{font-size:34px}.hair-page-v9 .coach-note{padding:20px}
  .product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.product-photo{height:205px}.product-body{padding:16px}.product-body h3{font-size:20px}.wig-hero{height:440px;padding:40px}.wig-hero>div{max-width:50%}.wig-hero h2{font-size:42px}.services-image{height:440px}.service-card{padding:22px;min-height:150px}.service-card h3{font-size:22px}
  .request-page-v9 .request-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.request-page-v9 .request-card{padding:22px}.request-page-v9 .pilot-callout{max-width:100%}
  .wardrobe-layout-v9{grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}.wardrobe-layout-v9>.product-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}.wardrobe-side-v9{position:sticky;top:158px;padding:28px}
  .profile-page-v9{display:grid;grid-template-columns:minmax(300px,.72fr) minmax(600px,1.55fr);gap:22px 28px;align-items:start}.profile-page-v9 .profile-hero{grid-column:1;grid-row:1;background:linear-gradient(145deg,#fff9f3,#f1e4ed);border:1px solid var(--line);border-radius:26px;padding:32px 22px;text-align:left}.profile-page-v9 .profile-hero .avatar{margin:0 0 18px}.profile-page-v9 .profile-hero h1{font-size:34px}.profile-page-v9 .profile-menu{grid-column:2;grid-row:1 / span 2;margin:0}.profile-page-v9 .profile-menu button{padding:20px 18px}.profile-page-v9 .profile-menu b{font-size:16px}.profile-page-v9 .profile-menu small{font-size:12px}.profile-page-v9 .profile-form{grid-column:1;grid-row:2;margin:0}.profile-page-v9 .account-card{grid-column:1;grid-row:3;margin:0}.profile-page-v9 .pilot-status-card{grid-column:2;grid-row:3;margin:0}.profile-page-v9 .build-note{grid-column:2;grid-row:4;margin:0}.profile-page-v9 .account-card h3{font-size:23px}
  .learn-diverse-hero{min-height:390px}.learn-diverse-photo{min-height:390px}.learn-diverse-copy{padding:38px}.learn-diverse-copy h2{font-size:43px}.masterclass-card{min-height:330px;padding:30px}.masterclass-card h3{font-size:31px}.lesson-photo{height:190px}.lesson-hero-v8{grid-template-columns:1fr 1fr}.lesson-hero-copy{padding:38px}.lesson-hero-copy h1{font-size:44px}.lesson-hero-image{min-height:400px}
  dialog{width:min(92%,560px)}.wig-detail-photo{height:330px}
  .feedback-fab{right:max(24px,calc((100vw - min(1440px,calc(100vw - 48px)))/2 + 24px));bottom:28px}
}

@media(min-width:1280px){
  .page{padding-left:64px;padding-right:64px}.home-page{gap:36px}.profile-page-v9{grid-template-columns:360px minmax(720px,1fr)}
  .request-page-v9 .request-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wardrobe-layout-v9{grid-template-columns:minmax(0,1fr) 380px}
}
.community-strip-v9{margin-top:24px;border:1px solid var(--line);border-radius:24px;padding:20px;background:linear-gradient(135deg,#fffaf5,#f3e7ef);display:grid;gap:18px}.community-strip-v9 h3{font:700 24px/1.1 Georgia,serif;color:var(--plum);margin:4px 0 8px}.community-strip-v9 p:not(.eyebrow){color:var(--muted);line-height:1.5;margin:0}.community-faces-v9{display:flex;align-items:center}.face-v9{width:58px;height:58px;border-radius:50%;border:4px solid #fff;background-size:cover;background-position:center;box-shadow:0 8px 18px rgba(53,16,67,.12)}.face-v9+ .face-v9{margin-left:-12px}.face-black{background-image:url('assets/model_black_group.png')}.face-blonde{background-image:url('assets/model_blonde.png')}.face-asian{background-image:url('assets/model_asian_clean.png')}.face-redhead{background-image:url('assets/model_redhead.png')}
@media(min-width:900px){.home-page>.community-strip-v9{grid-column:1/-1;grid-template-columns:1fr auto;align-items:center;padding:28px 32px}.community-strip-v9 h3{font-size:30px;max-width:800px}.community-strip-v9 p:not(.eyebrow){max-width:850px}.face-v9{width:76px;height:76px}}


/* =========================================================
   BBHair MVP v10 — Signature Experience
   Premium editorial beauty UI, responsive desktop + mobile
   ========================================================= */

:root{
  --plum:#351043;
  --plum-2:#5c174f;
  --plum-3:#7b245f;
  --wine:#2a091f;
  --rose:#b92467;
  --pink:#df3a7c;
  --champagne:#d6aa56;
  --champagne-soft:#f4e7c4;
  --blush:#f2e5ec;
  --lilac:#eee5f2;
  --cream:#fbf6ef;
  --cream-2:#f5ede7;
  --paper:#fffdf9;
  --ink:#2d2029;
  --muted:#756771;
  --line:#eaded8;
  --shadow-soft:0 12px 32px rgba(53,16,67,.08);
  --shadow-luxe:0 24px 70px rgba(44,10,42,.16);
}

html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 7% 8%,rgba(207,157,193,.23),transparent 24%),
    radial-gradient(circle at 92% 14%,rgba(222,190,132,.18),transparent 24%),
    linear-gradient(180deg,#f7efea 0%,#f8f2ee 48%,#f0e6e2 100%);
}
button,.btn,.quick-card,.product-card,.service-card,.lesson-card-v8,.profile-menu button{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;
}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(220,49,116,.22);
  outline-offset:2px;
}

/* ---------- V10 HOME ---------- */
.home-page-v10{display:block!important}
.home-splash-v10{display:grid;gap:18px}
.hero-v10{position:relative;isolation:isolate;box-shadow:var(--shadow-luxe)}
.hero-v10:after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle at 18% 22%,rgba(211,165,95,.20),transparent 24%),
    linear-gradient(180deg,transparent 60%,rgba(31,7,30,.23));
}
.hero-v10 .hero-overlay{z-index:1}
.hero-lead-v10{font-size:16px}
.hero-cta-v10{display:inline-flex;align-items:center;gap:12px}
.hero-cta-v10 span{font-size:20px}
.hero-quote-v10{
  margin:28px 0 0;padding:0;border:0;color:#f6e9ee;
  font:italic 17px/1.35 Georgia,serif;max-width:310px;
}
.world-panel-v10{
  border:1px solid rgba(106,64,86,.12);
  border-radius:30px;
  padding:20px;
  background:
    radial-gradient(circle at 92% 0%,rgba(212,174,111,.24),transparent 27%),
    linear-gradient(145deg,rgba(255,253,249,.97),rgba(246,234,239,.96));
  box-shadow:var(--shadow-soft);
}
.world-heading-v10{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:15px}
.world-heading-v10 h2{font:700 30px/1.04 Georgia,serif;color:var(--plum);margin:2px 0 0}
.world-heading-v10>span{font:italic 14px Georgia,serif;color:#8b657b;transform:rotate(-2deg);padding-top:7px;text-align:right}
.quick-grid-v10{display:grid;grid-template-columns:1fr;gap:10px}
.quick-card-v10{
  position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) 28px;align-items:center;gap:12px;
  min-height:104px!important;padding:9px 10px!important;border-radius:20px!important;
  background:rgba(255,255,255,.82)!important;overflow:hidden;box-shadow:0 10px 24px rgba(53,16,67,.055)!important;
}
.quick-card-v10:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(53,16,67,.11)!important;border-color:#dbc6d4}
.quick-card-v10 .quick-media{display:block;width:76px;height:84px;border-radius:15px;background-size:cover;background-position:center}
.q-hair{background-image:url('assets/application.png')}.q-shop{background-image:url('assets/products.png')}.q-wigs{background-image:url('assets/model_brunette_clean.png')}.q-service{background-image:url('assets/scalp.png')}
.quick-copy-v10{min-width:0}.quick-copy-v10 .quick-icon{width:28px;height:28px;border-radius:10px;font-size:15px;margin-bottom:2px}
.quick-copy-v10 b{font:700 18px Georgia,serif!important;margin:2px 0 1px!important}
.quick-copy-v10 small{font-size:11px!important}.quick-copy-v10 em{display:block;color:#8f7e89;font-style:normal;font-size:10px;margin-top:4px}
.quick-card-v10>i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#f3dfc6;color:var(--plum);font-weight:900}
.focus-card-v10{margin-top:14px!important;grid-template-columns:1.3fr .7fr!important;border:1px solid rgba(120,73,96,.08);box-shadow:none}
.focus-card-v10 .feature-thumb{min-height:116px}
.focus-card-v10 h3{font-size:27px}

.trust-ribbon-v10{
  margin:20px 0 0;border-radius:26px;overflow:hidden;padding:17px 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  background:
    radial-gradient(circle at 82% 10%,rgba(225,90,146,.18),transparent 24%),
    linear-gradient(110deg,#26081f 0%,#48103c 54%,#6a1e57 100%);
  box-shadow:var(--shadow-luxe);color:#fff;
}
.trust-ribbon-v10>div{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.trust-ribbon-v10 span{grid-row:1/span 2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(235,202,135,.45);color:#f3d58d;font-size:18px}
.trust-ribbon-v10 b{font-size:12px}.trust-ribbon-v10 small{font-size:10px;color:#eadde6;margin-top:2px}

.home-editorial-grid-v10{display:grid;gap:18px;margin-top:22px}
.learn-preview-v10,.recommend-preview-v10{
  border:1px solid rgba(118,75,95,.11);border-radius:28px;padding:18px;
  background:rgba(255,253,249,.86);box-shadow:var(--shadow-soft);
}
.editorial-heading-v10{margin:0 2px 14px!important}
.editorial-heading-v10 h2{font-size:25px}
.learning-stage-v10{display:grid;gap:12px}
.article-feature-v10{
  grid-template-columns:130px 1fr!important;border:0!important;
  background:linear-gradient(145deg,#fff8ef,#f6e9ef)!important;padding:10px!important;
  box-shadow:none!important
}
.article-feature-v10 .article-image{height:150px}.article-feature-v10 h3{font-size:22px}.article-feature-v10 p{font-size:12px;line-height:1.45;margin-bottom:8px}.article-feature-v10 strong{font-size:10px;color:#8a7481}
.lesson-stack-v10{display:grid;gap:9px}
.lesson-stack-v10>button{
  border:1px solid var(--line);background:#fff;border-radius:17px;padding:8px;
  display:grid;grid-template-columns:62px 1fr 28px;gap:10px;align-items:center;text-align:left;color:var(--ink)
}
.lesson-stack-v10>button:hover{transform:translateX(3px);box-shadow:var(--shadow-soft)}
.mini-lesson-photo{width:62px;height:54px;border-radius:12px;background-size:cover;background-position:center}
.ml-one{background-image:url('assets/model_redhead.png')}.ml-two{background-image:url('assets/model_black_group.png')}.ml-three{background-image:url('assets/model_blonde.png')}
.lesson-stack-v10 b,.lesson-stack-v10 small{display:block}.lesson-stack-v10 b{font:700 14px/1.15 Georgia,serif;color:var(--plum)}.lesson-stack-v10 small{font-size:9px;color:var(--muted);margin-top:3px}.lesson-stack-v10 i{font-style:normal;color:var(--champagne);font-size:14px}

.discovery-grid-v10{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.discover-card-v10{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;padding:0 0 12px;text-align:left;color:var(--ink)}
.discover-card-v10:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.discover-photo{display:block;height:132px;background-size:cover;background-position:center}
.d-one{background-image:url('assets/model_asian_clean.png')}.d-two{background-image:url('assets/model_black_group.png')}.d-three{background-image:url('assets/model_redhead.png')}
.discover-card-v10 b,.discover-card-v10 small,.discover-card-v10 em{display:block;padding:0 11px}.discover-card-v10 b{font:700 16px Georgia,serif;color:var(--plum);margin-top:10px}.discover-card-v10 small{font-size:10px;color:var(--muted);margin-top:3px}.discover-card-v10 em{font-size:10px;color:var(--pink);font-style:normal;font-weight:800;margin-top:8px}
.finder-card-v10{
  margin-top:10px;width:100%;border:0;border-radius:20px;padding:16px;
  display:grid;grid-template-columns:40px 1fr auto;gap:11px;align-items:center;text-align:left;color:#fff;
  background:linear-gradient(135deg,#361042,#7a215d);box-shadow:var(--shadow-soft)
}
.finder-card-v10>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#f4d693}
.finder-card-v10 b,.finder-card-v10 small{display:block}.finder-card-v10 b{font:700 16px Georgia,serif}.finder-card-v10 small{font-size:10px;color:#eadfe7;margin-top:3px}.finder-card-v10 i{font-style:normal;font-size:10px;font-weight:800;color:#f5d98f}

.community-strip-v10{
  margin-top:22px;border-radius:30px;padding:22px;display:grid;gap:18px;
  background:
    linear-gradient(100deg,rgba(255,248,242,.96),rgba(243,222,233,.96)),
    url('assets/learn_group_clean.png') right/contain no-repeat;
  border:1px solid rgba(115,67,91,.10);overflow:hidden
}
.community-strip-v10 h3{font:700 26px/1.08 Georgia,serif;color:var(--plum);margin:4px 0 9px;max-width:720px}
.community-strip-v10 p:not(.eyebrow){color:var(--muted);line-height:1.55;margin:0;max-width:760px}
.community-visual-v10{display:flex;align-items:center;gap:16px}.community-faces-v10{display:flex}.face-v10{width:62px;height:62px;border-radius:50%;border:4px solid #fff;background-size:cover;background-position:center;box-shadow:0 8px 18px rgba(53,16,67,.12)}.face-v10+.face-v10{margin-left:-12px}
.f-black{background-image:url('assets/model_black_group.png')}.f-blonde{background-image:url('assets/model_blonde.png')}.f-asian{background-image:url('assets/model_asian_clean.png')}.f-redhead{background-image:url('assets/model_redhead.png')}
.community-visual-v10 strong{font:italic 16px/1.25 Georgia,serif;color:#79536d}

/* ---------- premium treatment across the app ---------- */
.page-title h1{letter-spacing:-.02em}
.page-title:after{content:"";display:block;width:46px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--champagne),var(--pink));margin-top:15px}
.tabs{background:linear-gradient(90deg,#eee1e9,#f4eaee);padding:6px}
.tab.active{box-shadow:0 8px 18px rgba(53,16,67,.07)}
.form-card,.profile-form,.request-card,.wardrobe-card,.lesson-section{
  box-shadow:0 12px 30px rgba(53,16,67,.045);
}
.product-card{box-shadow:0 10px 28px rgba(53,16,67,.055)}
.product-card:hover{transform:translateY(-4px);box-shadow:0 20px 38px rgba(53,16,67,.11);border-color:#d9c4d2}
.product-photo{position:relative}.product-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,rgba(39,8,31,.10))}
.service-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#fff,#fbf4f7)}
.service-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-44px;top:-44px;background:radial-gradient(circle,rgba(224,59,125,.12),transparent 66%)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:#d8bfd0}
.profile-menu{box-shadow:var(--shadow-soft)}
.profile-menu button:hover{background:linear-gradient(90deg,#fff,#fbf3f7);padding-left:18px}
.account-card,.pilot-status-card,.build-note{box-shadow:0 10px 24px rgba(53,16,67,.04)}
.lesson-card-v8:hover{transform:translateY(-4px);box-shadow:var(--shadow-soft)}
.masterclass-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-luxe)}
.wig-service-bridge{background:linear-gradient(100deg,#f8eaf0,#fff8ed)!important}
.how-card{background:linear-gradient(145deg,#f2e6ec,#f8f1ed)}
.feedback-fab{background:linear-gradient(135deg,#351043,#6f1d59);box-shadow:0 16px 34px rgba(53,16,67,.25)}

/* ---------- auth gate: first impression matters ---------- */
.pilot-gate{background:rgba(35,10,31,.84);backdrop-filter:blur(14px)}
.pilot-gate-card{
  position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(145deg,#fffaf4,#f9f1ed);box-shadow:0 36px 110px rgba(19,2,18,.48)
}
.pilot-gate-card .pilot-logo{box-shadow:0 12px 24px rgba(76,17,62,.20)}
.pilot-gate h1{font-size:34px;line-height:1.02;letter-spacing:-.02em}
.pilot-gate input{transition:border .15s,box-shadow .15s}
.pilot-gate input:focus{border-color:#a45a8a;box-shadow:0 0 0 4px rgba(153,68,120,.09)}
.auth-check{text-align:center}.auth-icon{width:64px;height:64px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:#f0e3ee;color:var(--plum);font-size:24px}

/* ---------- responsive layout ---------- */
@media(min-width:900px){
  #app-shell{
    width:100%;max-width:none;margin:0;box-shadow:none;border:0;
    background:
      radial-gradient(circle at 9% 16%,rgba(218,181,204,.16),transparent 20%),
      radial-gradient(circle at 92% 10%,rgba(222,191,133,.13),transparent 22%),
      linear-gradient(180deg,#fbf6f0,#f8f1ec 48%,#f4ece8);
  }
  .topbar{padding-left:max(38px,calc((100vw - 1540px)/2 + 38px));padding-right:max(38px,calc((100vw - 1540px)/2 + 38px));background:rgba(251,246,240,.92)}
  .bottom-nav{width:100%;padding-left:max(30px,calc((100vw - 1540px)/2));padding-right:max(30px,calc((100vw - 1540px)/2));justify-content:center}
  .page{width:min(1540px,calc(100% - 56px));max-width:none;margin:0 auto;padding:42px 0 72px}
  .home-splash-v10{grid-template-columns:minmax(0,1.2fr) minmax(480px,.86fr);gap:22px}
  .hero-v10{height:650px}
  .hero-v10 .hero-overlay{padding:62px 52px;max-width:62%}
  .hero-v10 .hero-overlay h1{font-size:58px}
  .hero-lead-v10{font-size:18px!important}
  .hero-quote-v10{font-size:21px}
  .world-panel-v10{padding:24px}
  .quick-grid-v10{grid-template-columns:1fr 1fr}
  .quick-card-v10{grid-template-columns:82px minmax(0,1fr) 28px;min-height:122px!important}
  .quick-card-v10 .quick-media{width:82px;height:98px}
  .world-heading-v10 h2{font-size:35px}
  .focus-card-v10{min-height:162px}
  .trust-ribbon-v10{grid-template-columns:repeat(4,1fr);padding:20px 26px;margin-top:24px}
  .home-editorial-grid-v10{grid-template-columns:1.08fr .92fr;gap:22px;margin-top:24px}
  .learn-preview-v10,.recommend-preview-v10{padding:22px}
  .learning-stage-v10{grid-template-columns:1.12fr .88fr;align-items:stretch}
  .article-feature-v10{grid-template-columns:180px 1fr!important;min-height:286px}
  .article-feature-v10 .article-image{height:100%;min-height:256px}
  .lesson-stack-v10{align-content:stretch}
  .lesson-stack-v10>button{min-height:82px}
  .discover-photo{height:176px}
  .community-strip-v10{grid-template-columns:1fr auto;align-items:center;padding:28px 34px}
  .community-strip-v10 h3{font-size:34px}
  .community-visual-v10{padding-right:12px}.face-v10{width:72px;height:72px}
  .profile-page-v9 .profile-hero{
    background:
      radial-gradient(circle at 80% 0%,rgba(210,166,100,.18),transparent 28%),
      linear-gradient(145deg,#fff9f3,#f0e1ea);
  }
  .pilot-gate{padding:36px}
  .pilot-gate-card{
    width:min(1080px,calc(100vw - 72px));min-height:630px;padding:64px 64px 54px 58%;
  }
  .pilot-gate-card:before{
    content:"";position:absolute;inset:0 48% 0 0;
    background:
      linear-gradient(180deg,rgba(39,7,32,.10),rgba(39,7,32,.34)),
      url('assets/hero.png') center/cover;
  }
  .pilot-gate-card:after{
    content:"BEAUTY • CARE • CONFIDENCE";position:absolute;left:38px;bottom:38px;color:#fff;
    letter-spacing:.16em;font-size:11px;font-weight:800;z-index:1;text-shadow:0 2px 8px rgba(0,0,0,.35)
  }
  .pilot-gate-card>*{position:relative;z-index:2}
  .pilot-gate-card .pilot-logo{width:64px;height:64px;font-size:24px}
  .pilot-gate form{gap:15px}
  .pilot-gate input[name=name],.pilot-gate input[name=email],.pilot-gate input[type=text],.pilot-gate input[type=email]{padding:14px}
  .feedback-fab{right:30px}
}

@media(min-width:1280px){
  .page{width:min(1600px,calc(100% - 72px))}
  .home-splash-v10{grid-template-columns:minmax(0,1.28fr) minmax(520px,.82fr)}
  .hero-v10{height:680px}
}

@media(max-width:899px){
  .home-page-v10{padding-top:14px}
  .home-splash-v10{grid-template-columns:1fr}
  .hero-v10{height:465px}
  .hero-v10 .hero-overlay{max-width:78%;padding:30px 22px}
  .hero-v10 .hero-overlay h1{font-size:39px}
  .hero-quote-v10{display:none}
  .world-panel-v10{padding:15px;border-radius:24px}
  .world-heading-v10>span{display:none}
  .quick-grid-v10{grid-template-columns:1fr 1fr}
  .quick-card-v10{display:block;min-height:184px!important;padding:0!important}
  .quick-card-v10 .quick-media{width:100%;height:92px;border-radius:0}
  .quick-copy-v10{padding:10px 11px 12px;display:block}
  .quick-copy-v10 .quick-icon{display:none}
  .quick-copy-v10 b{font-size:17px!important}
  .quick-copy-v10 em{display:none}
  .quick-card-v10>i{position:absolute;right:10px;bottom:10px;width:26px;height:26px}
  .focus-card-v10{grid-template-columns:1fr 94px!important}
  .trust-ribbon-v10{grid-template-columns:1fr 1fr;border-radius:22px}
  .home-editorial-grid-v10{grid-template-columns:1fr}
  .learning-stage-v10{grid-template-columns:1fr}
  .discovery-grid-v10{grid-template-columns:repeat(3,minmax(0,1fr))}
  .discover-photo{height:118px}
  .discover-card-v10 b{font-size:14px}
  .finder-card-v10{grid-template-columns:36px 1fr}.finder-card-v10>i{display:none}
  .community-strip-v10{padding:20px}
  .community-visual-v10{justify-content:space-between}
  .face-v10{width:52px;height:52px}
  .community-visual-v10 strong{font-size:13px}
  .pilot-gate-card:before,.pilot-gate-card:after{display:none}
}

@media(max-width:520px){
  .page{padding-left:14px;padding-right:14px}
  .hero-v10{height:430px}
  .hero-v10 .hero-overlay{max-width:86%;padding:28px 18px}
  .hero-v10 .hero-overlay h1{font-size:36px}
  .world-heading-v10 h2{font-size:27px}
  .quick-card-v10{min-height:172px!important}
  .quick-card-v10 .quick-media{height:82px}
  .trust-ribbon-v10{grid-template-columns:1fr;padding:16px}
  .trust-ribbon-v10>div{grid-template-columns:34px 1fr}
  .trust-ribbon-v10 span{width:32px;height:32px}
  .discovery-grid-v10{grid-template-columns:1fr 1fr}
  .discover-card-v10:nth-child(3){grid-column:1/-1}
  .discover-card-v10:nth-child(3) .discover-photo{height:150px}
  .community-visual-v10{align-items:flex-end}
  .face-v10{width:48px;height:48px}
  .community-visual-v10 strong{display:none}
}

/* v10 utility polish */
::-webkit-scrollbar{width:10px;height:8px}::-webkit-scrollbar-track{background:#f2e9e4}::-webkit-scrollbar-thumb{background:#cdb9c5;border-radius:99px;border:2px solid #f2e9e4}

/* =========================================================
   BBHair MVP v12 — Signature Editorial
   Composition-first. Fewer boxes. Purple leads.
   ========================================================= */
:root{
  --v12-ink:#2f0a38;
  --v12-plum:#3b0b45;
  --v12-purple:#67206f;
  --v12-violet:#8f46a0;
  --v12-lilac:#eadcf0;
  --v12-lilac2:#f5edf7;
  --v12-cream:#fbf6f0;
  --v12-paper:#fffdf9;
  --v12-gold:#e0b55f;
  --v12-muted:#74666f;
  --v12-line:rgba(71,31,67,.13);
}

body{background:linear-gradient(180deg,#f7eff3 0%,#fbf6f0 38%,#f7f0ed 100%)}
#app-shell{background:transparent}
.topbar{background:rgba(251,247,242,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(72,33,65,.08)}
.brand-mark{background:linear-gradient(145deg,#4b1057,#a52378)}

/* global editorial rhythm */
.v12-home,.v12-shop-page,.v12-wigs-page,.v12-services-page{display:block!important}
.v12-home button,.v12-shop-page button,.v12-wigs-page button,.v12-services-page button{cursor:pointer}
.v12-section-head{display:flex;justify-content:space-between;align-items:end;gap:28px;margin:0 0 20px}
.v12-section-head h2,.v12-shop-heading h2{font:700 38px/1.02 Georgia,serif;color:var(--v12-ink);margin:4px 0 0;letter-spacing:-.02em}
.v12-section-head>p{max-width:560px;color:var(--v12-muted);line-height:1.55;margin:0}
.v12-section-head.compact{align-items:center}
.v12-link-light{appearance:none;border:0;background:none;color:#fff;text-decoration:underline;text-underline-offset:5px;font-weight:800;padding:10px 0}

/* HERO */
.v12-hero{min-height:650px;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:.98fr 1.02fr;background:var(--v12-plum);box-shadow:0 30px 80px rgba(46,9,44,.20)}
.v12-hero-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:70px 64px;color:#fff;background:
 radial-gradient(circle at 8% 90%,rgba(143,70,160,.38),transparent 30%),
 radial-gradient(circle at 90% 12%,rgba(224,181,95,.12),transparent 24%),
 linear-gradient(150deg,#270625 0%,#431049 58%,#67206f 100%)}
.v12-hero-copy:after{content:"";position:absolute;width:290px;height:290px;border-radius:50%;border:1px solid rgba(224,181,95,.18);right:-110px;bottom:-120px}
.v12-hero-copy h1{font:700 62px/.98 Georgia,serif;margin:12px 0 24px;letter-spacing:-.035em;position:relative;z-index:1}
.v12-hero-lead{font-size:20px;line-height:1.5;max-width:520px;margin:0;color:#f3e9ef;position:relative;z-index:1}
.v12-hero-actions{display:flex;align-items:center;gap:24px;margin-top:32px;position:relative;z-index:1}
.v12-hero-signature{display:flex;gap:16px;align-items:center;margin-top:54px;color:#eadddf;position:relative;z-index:1}.v12-hero-signature span{width:42px;height:1px;background:var(--v12-gold)}.v12-hero-signature em{font:italic 17px Georgia,serif}
.v12-hero-art{position:relative;background:
 linear-gradient(90deg,rgba(58,11,67,.16),transparent 24%),
 url('assets/final.png') center/cover no-repeat}
.v12-hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 72%,rgba(30,5,29,.32))}
.v12-hero-badge{position:absolute;left:30px;bottom:28px;z-index:2;background:rgba(255,253,249,.92);backdrop-filter:blur(10px);padding:13px 16px;border-radius:16px;color:var(--v12-ink);box-shadow:0 12px 30px rgba(31,8,30,.16)}.v12-hero-badge small,.v12-hero-badge b{display:block}.v12-hero-badge small{font-size:9px;letter-spacing:.14em;color:#8f6a82;font-weight:900}.v12-hero-badge b{font:700 16px Georgia,serif;margin-top:2px}

/* personalized focus */
.v12-focus{margin-top:18px;padding:24px 30px;border-radius:24px;display:grid;grid-template-columns:minmax(250px,.8fr) minmax(300px,1.2fr) auto;align-items:center;gap:28px;background:linear-gradient(100deg,#f1e3ef,#fff9ef);border:1px solid var(--v12-line)}
.v12-focus h2{font:700 28px Georgia,serif;color:var(--v12-ink);margin:2px 0}.v12-focus p{color:var(--v12-muted);line-height:1.5;margin:0}.v12-focus>button{border:0;background:var(--v12-ink);color:#fff;border-radius:999px;padding:13px 18px;font-weight:800;white-space:nowrap}.v12-focus>button span{margin-left:10px}

/* pathways: editorial list, not boxes */
.v12-pathways{margin-top:48px;padding:40px 0 20px}
.v12-path-list{border-top:1px solid var(--v12-line)}
.v12-path-list>button{width:100%;border:0;border-bottom:1px solid var(--v12-line);background:transparent;display:grid;grid-template-columns:72px 1fr 48px;align-items:center;gap:16px;padding:22px 8px;text-align:left;color:var(--v12-ink)}
.v12-path-list>button:hover{background:linear-gradient(90deg,rgba(235,220,240,.65),rgba(255,255,255,0));padding-left:16px}
.v12-path-list span{font:700 11px/1 Arial,sans-serif;letter-spacing:.16em;color:#986a92}.v12-path-list b{display:block;font:700 28px/1 Georgia,serif}.v12-path-list small{display:block;color:var(--v12-muted);margin-top:5px;font-size:13px}.v12-path-list i{font-style:normal;width:38px;height:38px;border:1px solid #d8c2d8;border-radius:50%;display:grid;place-items:center;color:var(--v12-purple);font-size:18px}

/* learning feature */
.v12-learn-feature{margin-top:36px;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1.06fr .94fr;min-height:430px;background:#321039;box-shadow:0 24px 60px rgba(49,11,47,.15)}
.v12-learn-photo{background:url('assets/products.png') center/cover no-repeat;min-height:430px}
.v12-learn-copy{padding:58px 54px;color:#fff;display:flex;flex-direction:column;justify-content:center}.v12-learn-copy h2{font:700 44px/1.02 Georgia,serif;margin:8px 0 18px}.v12-learn-copy>p{color:#e8dce5;line-height:1.65;max-width:540px}.v12-learn-copy .btn{align-self:flex-start;margin-top:14px}.v12-learn-mini{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.v12-learn-mini span{border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 11px;font-size:10px;color:#f0e4ed}

/* authentic proof */
.v12-proof-section{margin-top:52px}
.v12-proof-grid{display:grid;grid-template-columns:1.25fr .85fr .62fr;gap:16px;align-items:stretch}
.v12-proof{margin:0;border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--v12-line);display:flex;flex-direction:column;min-width:0}
.v12-proof img{display:block;width:100%;height:330px;object-fit:contain;background:#f2ece8}.v12-proof-wide img{object-fit:contain}.v12-proof-tall img{object-fit:contain;background:#f2ece8}
.v12-proof>div{padding:18px 20px 20px;background:#fff}.v12-proof span{font-size:9px;letter-spacing:.13em;font-weight:900;color:#8b4d86}.v12-proof h3{font:700 21px/1.05 Georgia,serif;color:var(--v12-ink);margin:5px 0 4px}.v12-proof p{font-size:12px;color:var(--v12-muted);margin:0}
.v12-proof-note{font-size:11px;color:#8a7b84;margin:12px 4px 0}

/* product showcase: original photos presented honestly */
.v12-products-section{margin-top:52px;border-radius:34px;overflow:hidden;display:grid;grid-template-columns:.78fr 1.22fr;background:linear-gradient(130deg,#2b082d,#54135b 55%,#78236f);color:#fff;box-shadow:0 28px 70px rgba(48,9,46,.16)}
.v12-product-intro{padding:50px 44px;display:flex;flex-direction:column;justify-content:center}.v12-product-intro h2{font:700 42px/1.02 Georgia,serif;margin:8px 0 15px}.v12-product-intro>p{color:#eadfe7;line-height:1.6}.v12-product-intro .btn{align-self:flex-start;margin-top:14px}
.v12-product-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:18px;background:rgba(255,255,255,.05)}
.v12-product-shot{border:0;background:#fff;border-radius:22px;overflow:hidden;padding:0;text-align:left;color:var(--v12-ink);display:flex;flex-direction:column;min-width:0}.v12-product-shot:hover{transform:translateY(-4px)}
.v12-product-shot img{display:block;width:100%;height:270px;object-fit:contain;background:#fff;padding:16px}.v12-product-shot>div{padding:15px 16px 18px;background:#fff;border-top:1px solid #eee3e4}.v12-product-shot small,.v12-product-shot b{display:block}.v12-product-shot small{font-size:9px;letter-spacing:.14em;color:#9a5f91;font-weight:900}.v12-product-shot b{font:700 18px Georgia,serif;margin-top:4px}

/* inclusive */
.v12-inclusive{margin-top:52px;border-radius:32px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;background:linear-gradient(135deg,#f3e8f4,#fff7ef);border:1px solid var(--v12-line)}
.v12-inclusive-photo{min-height:350px;background:url('assets/learn_group_clean.png') center/cover no-repeat}.v12-inclusive>div:last-child{padding:48px;display:flex;flex-direction:column;justify-content:center}.v12-inclusive h2{font:700 38px/1.05 Georgia,serif;color:var(--v12-ink);margin:8px 0 14px}.v12-inclusive p:not(.eyebrow){color:var(--v12-muted);line-height:1.6}

/* SHOP */
.v12-shop-hero{border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:390px;background:#3a0b43;box-shadow:0 26px 62px rgba(48,9,46,.16)}
.v12-shop-hero>div:first-child{padding:58px 52px;color:#fff;display:flex;flex-direction:column;justify-content:center}.v12-shop-hero h1{font:700 50px/1 Georgia,serif;margin:8px 0 18px}.v12-shop-hero p{color:#eadce6;line-height:1.6;max-width:560px}.v12-shop-hero .btn{align-self:flex-start;margin-top:12px}.v12-shop-hero-art{background:url('assets/products.png') center/cover no-repeat}
.v12-shop-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin:38px 0 15px}.v12-shop-heading>p{max-width:480px;color:var(--v12-muted);line-height:1.5;margin:0}
.v12-product-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px!important}.v12-product-grid .product-card{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--v12-line);box-shadow:0 12px 30px rgba(56,16,52,.05)}
.v12-product-grid .product-photo{height:330px;background:#fff;display:grid;place-items:center;padding:18px}.v12-product-grid .product-photo img{width:100%;height:100%;object-fit:contain;display:block}.v12-product-grid .product-body{padding:18px 20px 20px}.v12-product-grid .product-body h3{font-size:24px}.v12-product-grid .product-body p{min-height:auto}.v12-product-grid .price-row{margin-top:18px}
.v12-shop-principle{margin-top:28px;padding:28px 30px;border-radius:24px;display:grid;grid-template-columns:48px 1fr auto;gap:18px;align-items:center;background:linear-gradient(115deg,#2c082f,#621b68);color:#fff}.v12-shop-principle>span{width:46px;height:46px;border:1px solid rgba(224,181,95,.42);border-radius:50%;display:grid;place-items:center;font:700 16px Georgia,serif;color:#f3d88c}.v12-shop-principle h3{font:700 27px Georgia,serif;margin:3px 0 4px}.v12-shop-principle p{margin:0;color:#eadfe7;font-size:12px}

/* WIGS */
.v12-wigs-hero{border-radius:32px;overflow:hidden;display:grid;grid-template-columns:.9fr 1.1fr;min-height:450px;background:linear-gradient(145deg,#2a072d,#5d175f);box-shadow:0 26px 62px rgba(48,9,46,.16)}
.v12-wigs-hero>div:first-child{padding:58px 52px;color:#fff;display:flex;flex-direction:column;justify-content:center}.v12-wigs-hero h1{font:700 52px/1 Georgia,serif;margin:8px 0 18px}.v12-wigs-hero p{color:#ecdee9;line-height:1.6;max-width:520px}.v12-wigs-hero-photo{background:url('assets/curls.png') center/cover no-repeat}
.v12-wig-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important}.v12-wig-grid .product-card{border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--v12-line)}.v12-wig-grid .product-photo{height:300px;padding:0;background:#efe6e8}.v12-wig-grid .product-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}.v12-wig-grid .product-body{padding:17px}.v12-wig-grid .product-body h3{font-size:21px}.v12-wig-grid .product-body p{font-size:11px;min-height:32px}
.v12-wig-bridge{margin-top:26px;border-radius:28px;padding:34px 38px;display:flex;justify-content:space-between;align-items:center;gap:24px;background:linear-gradient(110deg,#2a082d,#702174);color:#fff}.v12-wig-bridge h2{font:700 35px/1.05 Georgia,serif;margin:6px 0 8px}.v12-wig-bridge p{margin:0;color:#e9dce8;max-width:760px}

/* SERVICES */
.v12-services-hero{border-radius:32px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;min-height:470px;background:linear-gradient(145deg,#2b082e,#641b67);box-shadow:0 26px 62px rgba(48,9,46,.16)}
.v12-services-hero>div:first-child{padding:58px 52px;color:#fff;display:flex;flex-direction:column;justify-content:center}.v12-services-hero h1{font:700 54px/.98 Georgia,serif;margin:8px 0 18px}.v12-services-hero p{color:#eadce7;line-height:1.6;max-width:560px}.v12-services-hero .btn{align-self:flex-start;margin-top:12px}.v12-services-art{background:url('assets/curls.png') center/cover no-repeat}
.v12-service-menu{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0 44px;border-top:1px solid var(--v12-line);border-bottom:1px solid var(--v12-line)}
.v12-service-menu>button{border:0;border-right:1px solid var(--v12-line);background:transparent;text-align:left;padding:22px 18px;display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto auto;column-gap:10px;color:var(--v12-ink)}.v12-service-menu>button:last-child{border-right:0}.v12-service-menu span{grid-row:1/span 3;font-size:10px;letter-spacing:.12em;color:#9b7095}.v12-service-menu b{font:700 18px Georgia,serif}.v12-service-menu small{font-size:10px;color:var(--v12-muted);margin-top:3px}.v12-service-menu i{font-style:normal;margin-top:10px;color:#8a3a83}
.v12-service-menu>button:hover{background:#f2e6f2}
.v12-service-proof-grid{display:grid;grid-template-columns:1.15fr 1fr .65fr;gap:16px}.v12-service-proof-grid article{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--v12-line)}.v12-service-proof-grid img{width:100%;height:340px;object-fit:contain;background:#f1ebe8;display:block}.v12-service-proof-grid article.portrait img{object-fit:contain}.v12-service-proof-grid article>div{padding:16px 18px 19px}.v12-service-proof-grid small{font-size:9px;letter-spacing:.13em;color:#985f92;font-weight:900}.v12-service-proof-grid h3{font:700 20px Georgia,serif;color:var(--v12-ink);margin:4px 0 0}
.v12-how{margin-top:34px;border-radius:28px;background:linear-gradient(130deg,#2b082f,#5e185f);color:#fff;padding:34px;display:grid;grid-template-columns:.55fr 1.45fr;gap:30px}.v12-how h2{font:700 32px Georgia,serif;margin:7px 0}.v12-how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.v12-how li{padding:14px;border-left:1px solid rgba(255,255,255,.17)}.v12-how li span,.v12-how li b,.v12-how li small{display:block}.v12-how li span{color:#e6c66f;font-size:10px;font-weight:900}.v12-how li b{font-size:13px;margin-top:8px}.v12-how li small{font-size:10px;color:#e2d4df;margin-top:4px;line-height:1.4}

/* product card compatibility */
.product-photo{background-image:none!important;overflow:hidden}.product-photo img{display:block}

/* desktop canvas */
@media(min-width:900px){
  #app-shell{width:100%;max-width:none;margin:0;border:0;box-shadow:none}
  .topbar{padding-left:max(38px,calc((100vw - 1480px)/2 + 38px));padding-right:max(38px,calc((100vw - 1480px)/2 + 38px))}
  .page{width:min(1480px,calc(100% - 60px));max-width:none;margin:0 auto;padding:38px 0 76px}
  .bottom-nav{width:100%;justify-content:center}
}

/* tablet */
@media(max-width:1100px){
  .v12-hero{grid-template-columns:1fr 1fr;min-height:560px}.v12-hero-copy{padding:50px 40px}.v12-hero-copy h1{font-size:50px}
  .v12-proof-grid{grid-template-columns:1fr 1fr}.v12-proof-tall{grid-column:1/-1}.v12-proof-tall img{height:300px}
  .v12-products-section{grid-template-columns:1fr}.v12-product-intro{padding-bottom:30px}.v12-product-showcase{padding:0 18px 18px}
  .v12-wig-grid{grid-template-columns:1fr 1fr!important}
  .v12-service-menu{grid-template-columns:1fr 1fr}.v12-service-menu>button:nth-child(2){border-right:0}.v12-service-menu>button:nth-child(-n+2){border-bottom:1px solid var(--v12-line)}
  .v12-service-proof-grid{grid-template-columns:1fr 1fr}.v12-service-proof-grid article.portrait{grid-column:1/-1}.v12-service-proof-grid article.portrait img{height:300px}
  .v12-how{grid-template-columns:1fr}.v12-how ol{grid-template-columns:1fr 1fr}
}

/* mobile */
@media(max-width:760px){
  .page{padding:14px 14px 92px}.v12-section-head,.v12-shop-heading{display:block}.v12-section-head h2,.v12-shop-heading h2{font-size:30px}.v12-section-head>p,.v12-shop-heading>p{margin-top:10px}
  .v12-hero{grid-template-columns:1fr;min-height:auto;border-radius:25px}.v12-hero-copy{padding:34px 24px 30px;min-height:410px}.v12-hero-copy h1{font-size:43px}.v12-hero-lead{font-size:16px}.v12-hero-actions{gap:14px;flex-wrap:wrap}.v12-hero-signature{margin-top:32px}.v12-hero-art{min-height:330px;background-position:center}.v12-hero-badge{left:18px;bottom:17px}
  .v12-focus{grid-template-columns:1fr;gap:10px;padding:19px 20px}.v12-focus>button{justify-self:start}
  .v12-pathways{margin-top:32px;padding-top:18px}.v12-path-list>button{grid-template-columns:44px 1fr 38px;padding:19px 4px}.v12-path-list b{font-size:23px}
  .v12-learn-feature{grid-template-columns:1fr;min-height:auto;border-radius:25px}.v12-learn-photo{min-height:260px}.v12-learn-copy{padding:32px 24px}.v12-learn-copy h2{font-size:35px}
  .v12-proof-section{margin-top:36px}.v12-proof-grid{grid-template-columns:1fr}.v12-proof img,.v12-proof-tall img{height:auto;max-height:410px;object-fit:contain}.v12-proof-tall{grid-column:auto}
  .v12-products-section{margin-top:36px;border-radius:25px}.v12-product-intro{padding:32px 24px}.v12-product-intro h2{font-size:35px}.v12-product-showcase{grid-template-columns:1fr;padding:0 14px 14px}.v12-product-shot{display:grid;grid-template-columns:140px 1fr;align-items:center}.v12-product-shot img{height:150px;padding:10px}.v12-product-shot>div{border-top:0;border-left:1px solid #eee3e4}
  .v12-inclusive{grid-template-columns:1fr;margin-top:36px;border-radius:25px}.v12-inclusive-photo{min-height:290px}.v12-inclusive>div:last-child{padding:30px 24px}.v12-inclusive h2{font-size:31px}
  .v12-shop-hero,.v12-wigs-hero,.v12-services-hero{grid-template-columns:1fr;min-height:auto;border-radius:25px}.v12-shop-hero>div:first-child,.v12-wigs-hero>div:first-child,.v12-services-hero>div:first-child{padding:34px 24px}.v12-shop-hero h1,.v12-wigs-hero h1,.v12-services-hero h1{font-size:42px}.v12-shop-hero-art,.v12-wigs-hero-photo,.v12-services-art{min-height:270px}
  .v12-product-grid{grid-template-columns:1fr!important}.v12-product-grid .product-photo{height:300px}.v12-wig-grid{grid-template-columns:1fr!important}.v12-wig-grid .product-photo{height:330px}
  .v12-shop-principle{grid-template-columns:42px 1fr}.v12-shop-principle .btn{grid-column:1/-1;justify-self:start}
  .v12-wig-bridge{display:block;padding:28px 24px}.v12-wig-bridge h2{font-size:30px}.v12-wig-bridge .btn{margin-top:18px}
  .v12-service-menu{grid-template-columns:1fr;margin-bottom:32px}.v12-service-menu>button{border-right:0!important;border-bottom:1px solid var(--v12-line)!important}.v12-service-menu>button:last-child{border-bottom:0!important}
  .v12-service-proof-grid{grid-template-columns:1fr}.v12-service-proof-grid article.portrait{grid-column:auto}.v12-service-proof-grid img,.v12-service-proof-grid article.portrait img{height:auto;max-height:450px;object-fit:contain}
  .v12-how{padding:26px 22px;border-radius:24px}.v12-how ol{grid-template-columns:1fr}.v12-how li{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
}

/* V12 brand wordmark */
.brand-full{font:700 29px/1 Georgia,serif;color:var(--v12-ink);letter-spacing:-.03em}
.brand{gap:0}.brand .brand-full{display:inline-block}
@media(min-width:900px){
  .pilot-gate-card:before{
    background:
      linear-gradient(180deg,rgba(39,7,32,.08),rgba(39,7,32,.30)),
      url('assets/final.png') center/cover!important;
  }
}

/* =========================================================
   BBHair MVP v13 — Image Integrity & Editorial Polish
   Section-specific image rules. No universal stretching.
   ========================================================= */

/* Real-work proof: composites are authored for their frame. */
.v13-proof-pair{position:relative}
.v13-pair-labels{
  position:absolute;left:14px;right:14px;top:14px;z-index:3;
  display:flex;justify-content:space-between;pointer-events:none
}
.v13-pair-labels span{
  background:rgba(49,12,58,.9);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:6px 10px;font:800 9px/1 Arial,sans-serif;letter-spacing:.12em;
  box-shadow:0 6px 18px rgba(35,7,37,.16)
}
.v12-proof-grid{grid-template-columns:1.18fr 1fr .82fr;gap:18px}
.v12-proof img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:#f7f0ee
}
.v12-proof-tall img{aspect-ratio:16/9;object-fit:cover;background:#efe6f1}
.v12-proof>div{min-height:112px}
.v12-proof-note{font-size:12px;line-height:1.45}

/* Services: same proof treatment; imagery determines the composition. */
.v12-service-proof-grid{grid-template-columns:1.12fr 1.12fr .86fr;gap:18px}
.v12-service-proof-grid article{position:relative}
.v12-service-proof-grid img,
.v12-service-proof-grid article.portrait img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:#f4ecef
}

/* Product media: square, whole package visible, never crop. */
.v12-product-grid{align-items:stretch}
.v12-product-grid .product-card{display:flex;flex-direction:column}
.v12-product-grid .product-photo{
  height:auto!important;aspect-ratio:1/1;padding:0!important;
  display:grid;place-items:center;background:linear-gradient(145deg,#f3e7f3,#fff9f3)
}
.v12-product-grid .product-photo:after{display:none}
.v12-product-grid .product-photo img{
  width:100%;height:100%;object-fit:contain!important;object-position:center!important;
  display:block
}
.v12-product-grid .product-body{display:flex;flex-direction:column;flex:1}
.v12-product-grid .price-row{margin-top:auto;padding-top:18px}

.v12-product-showcase{gap:14px}
.v12-product-shot{background:linear-gradient(145deg,#f2e5f1,#fff8ef)}
.v12-product-shot img{
  width:100%;height:auto;aspect-ratio:1/1;object-fit:contain!important;
  background:transparent!important;padding:0!important
}
.v12-product-shot>div{border-top:1px solid rgba(85,42,76,.09)}

/* Wigs: preserve the complete inspiration photo instead of cutting heads/hair. */
.v12-wig-grid .product-card{display:flex;flex-direction:column;background:#fff}
.v12-wig-grid .product-photo{
  height:auto!important;aspect-ratio:4/3;padding:10px!important;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#eee1ec 0%,#faf1e9 100%)
}
.v12-wig-grid .product-photo:after{display:none}
.v12-wig-grid .product-photo img{
  width:100%;height:100%;object-fit:contain!important;object-position:center!important;
  border-radius:14px;display:block
}
.v12-wig-grid .product-body{display:flex;flex-direction:column;flex:1}
.v12-wig-grid .price-row{margin-top:auto}

/* Wig detail modal follows the same "show the whole look" rule. */
.wig-detail-photo{
  background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;
  background-color:#f1e5ed!important
}

/* Learn: two-column editorial cards instead of shallow face crops. */
.lesson-grid-v8{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
.lesson-card-v8{
  display:grid;grid-template-columns:minmax(180px,42%) 1fr;min-height:210px;
  align-items:stretch;background:#fff
}
.lesson-card-v8>div:last-child{padding:22px 20px;display:flex;flex-direction:column;justify-content:center}
.lesson-card-v8 h3{font-size:23px}
.lesson-photo{height:auto!important;min-height:210px;background-size:cover;background-repeat:no-repeat}
.lp-black{background-image:url('assets/learn_moisture_protein.jpg')!important;background-position:center 28%}
.lp-asian{background-image:url('assets/learn_scalp.jpg')!important;background-position:center 18%}
.lp-redhead{background-image:url('assets/learn_wigcare.jpg')!important;background-position:center 20%}
.lp-short{background-image:url('assets/learn_ingredient_short.jpg')!important;background-position:center 22%}
.signs-master{background-image:url('assets/learn_wigcare.jpg')!important;background-position:center 20%!important}

/* Lesson hero image: don't over-zoom portraits. */
.lesson-hero-image{
  background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;
  background:linear-gradient(145deg,#efe2ec,#fff7ef)
}

/* High-resolution wig focal behavior, if a browser ever falls back to cover. */
.item-softwave .product-photo img{object-position:center 42%!important}
.item-silkpress .product-photo img{object-position:center 42%!important}
.item-curlmuse .product-photo img{object-position:center 28%!important}
.item-classic .product-photo img{object-position:center 24%!important}

/* Mobile: independent image geometry, not desktop squeezed smaller. */
@media(max-width:760px){
  .lesson-grid-v8{grid-template-columns:1fr!important}
  .lesson-card-v8{grid-template-columns:124px 1fr;min-height:150px}
  .lesson-photo{min-height:150px}
  .lesson-card-v8>div:last-child{padding:16px 14px}
  .lesson-card-v8 h3{font-size:19px}

  .v12-wig-grid .product-photo{aspect-ratio:1/1;padding:8px!important}
  .v12-product-grid .product-photo{aspect-ratio:1/1}

  .v12-product-shot{grid-template-columns:126px 1fr!important}
  .v12-product-shot img{width:126px!important;height:126px!important;aspect-ratio:1/1!important}

  .v12-proof img,.v12-proof-tall img,
  .v12-service-proof-grid img,.v12-service-proof-grid article.portrait img{
    max-height:none!important;aspect-ratio:16/9!important;object-fit:cover!important
  }
  .v13-pair-labels{left:10px;right:10px;top:10px}
  .v13-pair-labels span{font-size:8px;padding:5px 8px}
}

/* Keep before/after labels out of card-content styling. */
.v12-proof>.v13-pair-labels,
.v12-service-proof-grid article>.v13-pair-labels{
  position:absolute!important;left:14px!important;right:14px!important;top:14px!important;
  z-index:4!important;display:flex!important;justify-content:space-between!important;
  padding:0!important;background:transparent!important;border:0!important;min-height:0!important;height:auto!important
}
.v12-proof>.v13-pair-labels span,
.v12-service-proof-grid article>.v13-pair-labels span{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  width:auto!important;height:auto!important;min-width:0!important;
  padding:6px 10px!important;border-radius:999px!important;
  background:rgba(49,12,58,.92)!important;color:#fff!important;
  font:800 9px/1 Arial,sans-serif!important;letter-spacing:.12em!important;
  box-shadow:0 6px 18px rgba(35,7,37,.16)!important
}

/* Featured masterclass: show the whole portrait instead of a giant face crop. */
.signs-master{
  background-color:#5a243e!important;
  background-image:url('assets/learn_wigcare.jpg')!important;
  background-size:auto 100%!important;
  background-position:right center!important;
  background-repeat:no-repeat!important
}
.signs-master:before{
  background:linear-gradient(90deg,rgba(37,7,34,.94) 0%,rgba(37,7,34,.74) 44%,rgba(37,7,34,.18) 100%)!important
}
.signs-master h3,.signs-master p,.signs-master .lesson-meta,.signs-master .tag{max-width:72%}
@media(max-width:760px){
 .signs-master{background-size:auto 100%!important;background-position:80% center!important}
 .signs-master h3,.signs-master p,.signs-master .lesson-meta,.signs-master .tag{max-width:86%}
}


/* =========================================================
   BBHair MVP v14 — Catalogue Asset Integration
   Unified #F3ECF8 media ground + square, no-crop proof/product rules.
   ========================================================= */
:root{--bbhair-media:#F3ECF8}

/* The new assets were authored as square catalogue tiles. Respect them. */
.v12-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px}
.v12-proof img,.v12-proof-tall img{
  width:100%!important;height:auto!important;aspect-ratio:1/1!important;
  object-fit:contain!important;object-position:center!important;background:var(--bbhair-media)!important
}
.v12-proof-wide img{object-fit:contain!important}
.v12-proof>div{min-height:112px}
.v14-self-labeled>.v13-pair-labels{display:none!important}

.v12-service-proof-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px}
.v12-service-proof-grid img,.v12-service-proof-grid article.portrait img{
  width:100%!important;height:auto!important;aspect-ratio:1/1!important;
  object-fit:contain!important;object-position:center!important;background:var(--bbhair-media)!important
}
.v12-service-proof-grid article>div:not(.v13-pair-labels){min-height:84px}

/* Product catalogue: exact BBHair media color, complete pack visible, no crop. */
.v12-product-grid .product-photo,.v12-product-shot,.v12-product-shot img{
  background:var(--bbhair-media)!important
}
.v12-product-grid .product-photo img,.v12-product-shot img{
  object-fit:contain!important;object-position:center!important
}
.v12-product-shot img{aspect-ratio:1/1!important}

/* Wig catalogue: never stretch or cut full-length units. */
.v12-wig-grid .product-photo{background:var(--bbhair-media)!important;aspect-ratio:1/1!important;padding:0!important}
.v12-wig-grid .product-photo img{object-fit:contain!important;object-position:center!important;border-radius:0!important}

@media(max-width:1100px) and (min-width:761px){
  .v12-proof-grid,.v12-service-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .v12-proof-grid>article:last-child,.v12-service-proof-grid>article:last-child{grid-column:1/-1;max-width:560px;width:100%;justify-self:center}
}

@media(max-width:760px){
  .v12-proof-grid,.v12-service-proof-grid{grid-template-columns:1fr!important}
  .v12-proof-grid>article:last-child,.v12-service-proof-grid>article:last-child{grid-column:auto;max-width:none}
  .v12-proof img,.v12-proof-tall img,.v12-service-proof-grid img,.v12-service-proof-grid article.portrait img{
    aspect-ratio:1/1!important;object-fit:contain!important;max-height:none!important;background:var(--bbhair-media)!important
  }
  .v12-product-shot{grid-template-columns:118px 1fr!important}
  .v12-product-shot img{width:118px!important;height:118px!important;aspect-ratio:1/1!important}
  .v12-wig-grid .product-photo{aspect-ratio:1/1!important}
}

/* v14: the Revamp artwork already carries its own Before/After labels. */
.v12-proof-grid article.v14-self-labeled>.v13-pair-labels,
.v12-service-proof-grid article.v14-self-labeled>.v13-pair-labels{
  display:none!important
}


/* =========================================================
   BBHair MVP v14.1 — Finish Pass
   Proof refresh, mobile feedback clearance, tighter section rhythm.
   ========================================================= */

/* Reduce the dead band between the product story and inclusivity story. */
.v12-inclusive{margin-top:28px!important}

/* The new revamp artwork is already fully authored; never crop it. */
.v12-proof-grid article.v14-self-labeled img,
.v12-service-proof-grid article.v14-self-labeled img{
  object-fit:contain!important;
  object-position:center!important;
  background:var(--bbhair-media)!important;
}

/* Desktop/tablet navigation belongs directly beneath the sticky header.
   The nav element lives after <main>, so sticky alone can appear at the end
   of the page. Fixed placement makes its location deterministic. */
@media(min-width:900px){
  .bottom-nav{
    position:fixed!important;
    top:76px!important;bottom:auto!important;
    left:0!important;right:0!important;transform:none!important;
    width:100%!important;height:62px!important;
    z-index:19!important;
  }
  .view{padding-top:62px}
  .v12-inclusive{margin-top:30px!important}
}

/* Mobile: keep feedback available without sitting across copy/cards. */
@media(max-width:760px){
  .page{padding-bottom:126px!important}
  .feedback-fab{
    width:48px!important;height:48px!important;padding:0!important;
    display:grid!important;place-items:center!important;
    right:14px!important;bottom:90px!important;
    font-size:18px!important;
    box-shadow:0 12px 28px rgba(53,16,67,.28)!important;
  }
  .feedback-fab span{display:none!important}
  .v12-inclusive{margin-top:24px!important}
}

/* =========================================================
   BBHair MVP v14.2 — Service Experience Polish
   Bring Services up to the same calm, premium visual language as Shop.
   ========================================================= */

/* Header: BBHair wordmark should be type, not a purple block. */
.brand-mark{
  background:none!important;
  color:var(--plum)!important;
  box-shadow:none!important;
  border-radius:0!important;
}

/* Learn: show the full diverse group and use ingredients for Ingredient Intelligence. */
.learn-diverse-photo{
  background-image:url('assets/learn_group_clean.png')!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#F3ECF8!important;
}
.lp-short{
  background-image:url('assets/ingredients.png')!important;
  background-position:center!important;
  background-size:cover!important;
}

/* Premium services hero: real work rather than an over-cropped generic background. */
.v14-services-hero{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  overflow:hidden;
  border-radius:32px;
  min-height:470px;
  background:linear-gradient(145deg,#2b082e,#641b67);
  box-shadow:0 26px 62px rgba(48,9,46,.16);
}
.v14-services-hero-copy{
  padding:58px 52px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.v14-services-hero-copy h1{
  font:700 54px/.98 Georgia,serif;
  margin:8px 0 18px;
}
.v14-services-hero-copy>p:not(.eyebrow){
  color:#eadce7;
  line-height:1.6;
  max-width:540px;
}
.v14-services-hero-copy .btn{align-self:flex-start;margin-top:12px}
.v14-services-hero-visual{
  position:relative;
  min-height:470px;
  display:grid;
  place-items:center;
  padding:26px;
  background:linear-gradient(145deg,#F3ECF8,#eadcf0);
}
.v14-services-hero-visual img{
  width:100%;
  height:100%;
  max-height:418px;
  object-fit:contain;
  object-position:center;
  border-radius:22px;
  display:block;
}
.v14-services-hero-note{
  position:absolute;
  left:42px;
  bottom:38px;
  padding:11px 14px;
  border-radius:14px;
  background:rgba(48,9,52,.92);
  color:#fff;
  box-shadow:0 12px 28px rgba(41,8,43,.18);
}
.v14-services-hero-note small,.v14-services-hero-note b{display:block}
.v14-services-hero-note small{font-size:8px;letter-spacing:.15em;color:#e9cb73;font-weight:900}
.v14-services-hero-note b{font:700 17px Georgia,serif;margin-top:3px}

/* Service catalogue mirrors the product story: one branded frame, clean cards. */
.v14-service-catalogue{
  margin-top:26px;
  padding:20px;
  border-radius:30px;
  display:grid;
  grid-template-columns:.74fr 1.26fr;
  gap:18px;
  background:linear-gradient(110deg,#300833,#6d2071);
  box-shadow:0 20px 52px rgba(48,9,46,.10);
}
.v14-service-intro{
  padding:34px 28px;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.v14-service-intro h2{font:700 38px/1.04 Georgia,serif;margin:8px 0 14px}
.v14-service-intro>p:not(.eyebrow){color:#eadce7;line-height:1.55;margin:0;max-width:430px}
.v14-service-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.v14-service-card{
  border:0;
  border-radius:20px;
  background:#fff;
  min-height:148px;
  padding:18px;
  display:grid;
  grid-template-columns:48px 1fr 26px;
  gap:12px;
  align-items:center;
  text-align:left;
  color:var(--v12-ink);
  box-shadow:0 8px 20px rgba(34,8,34,.05);
  transition:transform .2s ease,box-shadow .2s ease;
}
.v14-service-card:hover{transform:translateY(-3px);box-shadow:0 16px 30px rgba(34,8,34,.10)}
.v14-service-icon{
  width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;
  background:#F3ECF8;color:#6f2677;
  font-size:10px;font-weight:900;letter-spacing:.08em;
}
.v14-service-card small{display:block;font-size:8px;letter-spacing:.14em;color:#a05a98;font-weight:900;margin-bottom:4px}
.v14-service-card b{display:block;font:700 20px/1.08 Georgia,serif;color:var(--v12-ink)}
.v14-service-card p{font-size:10px;line-height:1.4;color:var(--v12-muted);margin:5px 0 0}
.v14-service-card i{font-style:normal;color:#7c2e7a;font-size:20px}

.v14-service-proof{margin-top:42px}
.v14-service-proof .v12-section-head>p{max-width:540px;color:var(--v12-muted);line-height:1.5}
.v14-how{margin-top:28px}

@media(max-width:1100px){
  .v14-services-hero{grid-template-columns:1fr 1fr}
  .v14-service-catalogue{grid-template-columns:1fr}
  .v14-service-intro{padding:26px 24px 12px}
}

@media(max-width:760px){
  .v14-services-hero{
    grid-template-columns:1fr;
    min-height:auto;
    border-radius:25px;
  }
  .v14-services-hero-copy{padding:34px 24px 30px}
  .v14-services-hero-copy h1{font-size:42px}
  .v14-services-hero-visual{
    min-height:auto;
    padding:14px;
  }
  .v14-services-hero-visual img{
    width:100%;height:auto;max-height:none;
    aspect-ratio:1/1;
    object-fit:contain;
    border-radius:18px;
  }
  .v14-services-hero-note{left:26px;bottom:26px}

  .v14-service-catalogue{
    margin-top:18px;
    padding:14px;
    border-radius:25px;
    grid-template-columns:1fr;
    gap:12px;
  }
  .v14-service-intro{padding:22px 10px 14px}
  .v14-service-intro h2{font-size:31px}
  .v14-service-grid{grid-template-columns:1fr;gap:10px}
  .v14-service-card{
    min-height:112px;
    grid-template-columns:42px 1fr 22px;
    padding:14px;
    border-radius:18px;
  }
  .v14-service-icon{width:38px;height:38px}
  .v14-service-card b{font-size:19px}
  .v14-service-card p{font-size:10px}
  .v14-service-proof{margin-top:34px}

  /* Keep Learn portraits/ingredients fully readable in compact cards. */
  .learn-diverse-photo{min-height:250px!important;background-size:contain!important}
  .lp-short{background-size:cover!important;background-position:center!important}
}

/* =========================================================
   BBHair MVP v14.3 — Results Simplification
   Branding lives in the Services hero; Results is pure proof.
   ========================================================= */
.v143-results-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.v143-result-card{
  position:relative;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(88,43,80,.11);
  border-radius:24px;
  background:var(--bbhair-media,#F3ECF8);
  box-shadow:0 12px 32px rgba(48,9,46,.055);
}
.v143-result-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  object-position:center;
  background:var(--bbhair-media,#F3ECF8);
}
.v143-result-card>.v13-pair-labels{
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  top:16px!important;
  z-index:4!important;
  display:flex!important;
  justify-content:space-between!important;
  padding:0!important;
  pointer-events:none;
}
.v143-result-card>.v13-pair-labels span{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:7px 11px!important;
  border-radius:999px!important;
  background:rgba(49,12,58,.92)!important;
  color:#fff!important;
  font:800 9px/1 Arial,sans-serif!important;
  letter-spacing:.12em!important;
  box-shadow:0 6px 18px rgba(35,7,37,.16)!important;
}

/* The full purple BBHair campaign artwork belongs only in the service hero. */
.v143-services-hero-art{
  padding:18px!important;
  background:linear-gradient(145deg,#3a0b43,#6b2579)!important;
}
.v143-services-hero-art img{
  width:100%!important;
  height:100%!important;
  max-height:434px!important;
  object-fit:contain!important;
  object-position:center!important;
  border-radius:22px!important;
  background:#4f1c62;
}

@media(max-width:760px){
  .v143-results-grid{grid-template-columns:1fr;gap:14px}
  .v143-result-card{border-radius:20px}
  .v143-result-card>.v13-pair-labels{left:12px!important;right:12px!important;top:12px!important}
  .v143-result-card>.v13-pair-labels span{padding:6px 9px!important;font-size:8px!important}
  .v143-services-hero-art{padding:12px!important}
  .v143-services-hero-art img{height:auto!important;max-height:none!important;aspect-ratio:1/1!important}
}


/* =========================================================
   BBHair MVP v14.4 — Final Results Scale Polish
   Curly revamp proof uses the same square source, enlarged only
   inside its card so the hair carries equal visual weight.
   ========================================================= */
.v144-revamp-result img{
  transform:scale(1.115);
  transform-origin:center center;
}
@media(max-width:760px){
  .v144-revamp-result img{
    transform:scale(1.18);
  }
}

/* =========================================================
   BBHair MVP v14.5 — Auth + Results Integrity Hotfix
   Logged-out desktop gate must remain readable across browsers;
   Results must never zoom/crop the authored transformation image.
   ========================================================= */
@media(min-width:900px){
  .pilot-gate-card{
    width:min(1080px,calc(100vw - 72px))!important;
    min-height:630px!important;
    padding:64px 64px 54px clamp(430px,41vw,600px)!important;
  }
  .pilot-gate-card:before{
    inset:0 auto 0 0!important;
    width:52%!important;
  }
}

.v144-revamp-result img,
.v143-result-card.v144-revamp-result img{
  transform:none!important;
  transform-origin:center center!important;
}
@media(max-width:760px){
  .v144-revamp-result img,
  .v143-result-card.v144-revamp-result img{
    transform:none!important;
  }
}

/* =========================================================
   BBHair MVP v14.7 — Final Media Framing
   Desktop inclusive portrait keeps every head in frame.
   Results use landscape-authored proof assets so the hair fills
   the card naturally without CSS zoom, stretch or clipping.
   ========================================================= */
@media(min-width:761px){
  .v12-inclusive-photo{
    background-image:url('assets/learn_group_landscape_v147.webp')!important;
    background-size:cover!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
  }
}
.v143-result-card img{
  aspect-ratio:auto!important;
  width:100%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  background:#F3ECF8!important;
}

/* v15.1 — admin entry is only injected for verified Admin accounts. */
.admin-entry-slot:empty{display:none}
.admin-entry-card{margin-top:14px;border:1px solid #dbc8d5;border-radius:18px;padding:14px 15px;background:linear-gradient(135deg,#2d0c33,#54134d);color:#fff;display:grid;grid-template-columns:42px 1fr 18px;gap:12px;align-items:center;text-decoration:none;box-shadow:0 10px 24px rgba(53,16,67,.10)}
.admin-entry-card:hover{transform:translateY(-1px)}
.admin-entry-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#c99a34,#e4bf68);color:#2d0c33;font:800 16px Georgia,serif}
.admin-entry-card b,.admin-entry-card small{display:block}.admin-entry-card b{font:700 18px Georgia,serif}.admin-entry-card small{color:#eadfe7;margin-top:3px;line-height:1.35}.admin-entry-card em{font-size:26px;font-style:normal;color:#d8c8d4}
@media(min-width:900px){.profile-page-v9 .admin-entry-slot{grid-column:1;grid-row:4;margin:0}.profile-page-v9 .pilot-status-card{grid-column:2;grid-row:3}.profile-page-v9 .build-note{grid-column:2;grid-row:4}}

/* v15.3 dynamic catalogue */
.mini-btn:disabled{opacity:.52;cursor:not-allowed;filter:saturate(.6)}


/* v15.6.3 — truthful catalogue media fallbacks. Never borrow another item's image. */
.product-photo{position:relative}
.catalogue-media-placeholder{position:absolute;inset:0;display:grid;place-items:center;background:var(--bbhair-media,#F3ECF8);color:#4a0d4f;font:900 28px/1 Georgia,serif;letter-spacing:.02em}
.product-photo img{position:relative;z-index:1}
.wig-detail-photo{position:relative;display:grid;place-items:center;overflow:hidden;background-image:none!important;background:var(--bbhair-media,#F3ECF8)!important}
.wig-detail-photo .catalogue-media-placeholder{font-size:40px}
.wig-detail-photo img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;display:block}

/* v15.7 services foundation */
.service-booking-hint{margin:-4px 0 2px;padding:9px 11px;border-radius:10px;background:#f7eff4;color:var(--plum);font-size:11px;font-weight:800}
.service-photo-fields{border:1px solid var(--line);border-radius:14px;padding:12px;display:grid;gap:10px;margin:4px 0 0;background:#fffafc}.service-photo-fields legend{padding:0 6px;color:var(--plum);font-weight:850;font-size:12px}.service-photo-fields legend span{color:var(--muted);font-weight:600}.service-photo-fields label{display:grid;gap:6px}.service-photo-fields input[type=file]{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px;color:var(--ink)}.service-photo-fields small{color:var(--muted);line-height:1.4}.service-submit-state{min-height:16px;font-size:11px;color:var(--muted)}
.request-update{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f8f1f5;border:1px solid #eadde5}.request-update b{color:var(--plum);font-size:11px}.request-update p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.45}


/* v15.8 notifications + magic-link handoff */
.notification-btn span{position:absolute;top:-2px;right:-3px;background:var(--pink);color:#fff;min-width:18px;height:18px;padding:0 4px;border-radius:999px;font-size:10px;display:grid;place-items:center;font-weight:800}.notification-btn span[hidden]{display:none}.notification-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.notification-head h2{margin-bottom:4px!important}.notification-list{display:grid;gap:8px;margin-top:14px;max-height:min(60vh,520px);overflow:auto}.notification-row{width:100%;border:1px solid var(--line);border-radius:16px;background:#fff;padding:13px;display:grid;grid-template-columns:8px 1fr auto;gap:10px;align-items:start;text-align:left;color:var(--ink)}.notification-row.unread{background:#fbf4f8;border-color:#dac3d2}.notification-dot{width:7px;height:7px;border-radius:50%;background:transparent;margin-top:7px}.notification-row.unread .notification-dot{background:var(--pink)}.notification-row b{display:block;color:var(--plum);font-family:Georgia,serif;font-size:16px}.notification-row small{display:block;color:var(--muted);line-height:1.4;margin-top:3px}.notification-row em{display:block;color:#907f8a;font-size:10px;font-style:normal;margin-top:7px}.notification-row>i{font-style:normal;color:var(--plum);font-size:20px;align-self:center}.notification-empty{text-align:center;padding:28px 12px;color:var(--muted)}.notification-empty b{display:block;color:var(--plum);font:700 18px Georgia,serif;margin-bottom:5px}.auth-handoff-screen{min-height:100vh;display:grid;place-items:center;padding:22px;background:linear-gradient(160deg,#fbf7f3,#efe5ef)}.auth-handoff-card{width:min(100%,430px);background:#fffaf4;border:1px solid var(--line);border-radius:26px;padding:28px;text-align:center;box-shadow:var(--shadow)}.auth-handoff-card .pilot-logo{margin:0 auto 14px}.auth-handoff-card h1{font:700 30px Georgia,serif;color:var(--plum);margin:0 0 10px}.auth-handoff-card p{color:var(--muted);line-height:1.5}.auth-handoff-card .btn{margin-top:12px}
@media(max-width:520px){.top-actions{gap:6px}.icon-btn{width:38px;height:38px}.notification-list{max-height:55vh}}

.push-pref{margin:12px 0 4px;padding:12px 13px;border:1px solid var(--line);border-radius:16px;background:#fbf7fb;display:flex;align-items:center;justify-content:space-between;gap:12px}
.push-pref.enabled{background:#f1faf5;border-color:#cfe8da}
.push-pref b{display:block;color:var(--plum);font-size:13px}
.push-pref small{display:block;color:var(--muted);line-height:1.35;margin-top:3px}
.push-pref .btn{white-space:nowrap}
.request-card.push-target{outline:3px solid rgba(85,24,91,.22);outline-offset:3px}
@media(max-width:520px){.push-pref{align-items:flex-start;flex-direction:column}.push-pref .btn{width:100%}}

/* v15.10 managed, permission-cleared Results (original proof card framing preserved) */
.result-managed{align-self:start}.result-managed .result-pair-media{display:grid;grid-template-columns:1fr 1fr;min-height:170px;background:#f3ecf8}
.result-managed .result-pair-media img{width:100%!important;height:100%!important;min-height:170px;object-fit:contain!important;aspect-ratio:auto!important}
.result-story-link{display:block;width:100%;text-align:left;background:#fffaf6;border:0;border-top:1px solid rgba(88,43,80,.11);padding:12px 16px;font-weight:800;color:#351043;cursor:pointer;font-size:13px}
.result-story-link:hover{text-decoration:underline}.result-image-error{min-height:140px}.result-image-error:after{content:'Image temporarily unavailable';display:block;color:#6d5c6e;text-align:center;padding:32px;font-size:12px}
.result-proof-unavailable{grid-column:1/-1;text-align:center;padding:34px 15px;color:#6d5c6e;background:#faf5fb;border-radius:20px}
.result-story-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}.result-story-photo-pair img{width:100%;height:auto;object-fit:contain;background:#f3ecf8;border-radius:12px}

/* v15.11 — tester feedback with private screenshots, voice notes and conversations */
#modal:has(.feedback-inbox-head){width:min(95vw,730px);max-height:min(92dvh,920px);overflow:auto}
.feedback-modal-title>p:not(.eyebrow),.feedback-inbox-head>p:not(.eyebrow){font-size:13px;color:var(--muted);line-height:1.55;margin:-2px 0 14px}
.feedback-file-note{display:block;margin:4px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}
.feedback-form-state{font-size:12px;line-height:1.4;color:var(--plum);min-height:3px;margin:3px 0}
.feedback-upload-label input[type=file]{font-size:12px;min-width:0;max-width:100%;overflow:hidden}
.feedback-inbox-tools{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.feedback-inbox-tools .btn{flex:1;min-width:140px}
.feedback-inbox-list{display:grid;gap:8px;max-height:230px;overflow:auto;padding:3px 3px 5px}
.feedback-inbox-item{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:11px 12px;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;color:var(--plum)}
.feedback-inbox-item.selected{border-color:#b985a4;background:#fbf1f7}
.feedback-inbox-item b{display:block;font:700 15px Georgia,serif}
.feedback-inbox-item small,.feedback-inbox-item em{display:block;font-size:11px;color:var(--muted);font-style:normal;line-height:1.45;margin-top:3px}
.feedback-inbox-item small{overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feedback-inbox-item>span:last-child{font-size:23px}
.feedback-empty{padding:18px;background:#f9f2f8;border-radius:14px;color:var(--muted);font-size:13px}
.feedback-warning{font-size:12px;color:#963c37;background:#fff1ef;border:1px solid #e4b3ad;border-radius:12px;padding:12px}
.feedback-thread{border:1px solid var(--line);background:#fffaf9;border-radius:17px;margin-top:18px;padding:14px}
.feedback-thread-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px;color:var(--plum)}
.feedback-thread-head>b{font:700 18px Georgia,serif}.feedback-thread-head>span{font-size:11px;font-weight:800;background:#eedfeb;border-radius:999px;padding:6px 9px}
.feedback-bubble{width:min(90%,570px);padding:11px 13px;border-radius:15px;margin:10px 0;background:#fff;border:1px solid var(--line)}
.feedback-bubble.mine{margin-left:auto;background:#f5e8f0;border-color:#e9cbdf}
.feedback-bubble strong{font-size:12px;color:var(--plum)}.feedback-bubble p{margin:6px 0;font-size:13px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.feedback-bubble small{font-size:10px;color:var(--muted)}
.feedback-private-files{margin:16px 0;padding:11px;background:#fff;border:1px solid var(--line);border-radius:12px}.feedback-private-files>b{display:block;color:var(--plum);font-size:12px}
.feedback-file{margin-top:12px;border-top:1px solid var(--line);padding-top:10px;display:grid;gap:7px;overflow-wrap:anywhere;font-size:11px}.feedback-file-preview img{display:block;max-width:min(100%,330px);max-height:250px;object-fit:contain;border-radius:10px}
.feedback-file-preview audio{width:100%;max-width:360px}.feedback-file-preview a{color:var(--plum)}
.feedback-attach-form{padding:13px 0;border-top:1px solid var(--line)}.feedback-attach-form .btn{font-size:12px}.feedback-attach-form small{display:block;font-size:10px;color:var(--muted);margin-top:7px}
#feedbackAttachStatus,#feedbackFollowupStatus{font-size:11px;color:var(--plum);min-height:2px}
#feedbackFollowupForm{border-top:1px solid var(--line);padding-top:12px;margin-top:13px}
#viewFeedbackFromNotifications{margin-top:10px}
@media(max-width:600px){#modal:has(.feedback-inbox-head){width:min(98vw,730px);max-height:96dvh}#modal:has(.feedback-inbox-head) #modalContent{padding:25px 15px 18px}.feedback-inbox-list{max-height:190px}.feedback-thread{padding:11px}.feedback-bubble{width:96%}}

/* v15.12 — clear, private feedback attachments and optional announcements */
#modal:has(.feedback-modal-title){width:min(94vw,610px);max-height:min(94dvh,920px);overflow:auto}
.feedback-media-label{display:block;margin:14px 0 7px;color:var(--plum);font-weight:800;font-size:12px}
.feedback-media-label small{font-weight:500;color:var(--muted)}
.feedback-media-composer{border:1px solid #e9d9e4;border-radius:16px;background:#fffafc;padding:11px;min-width:0}
.feedback-media-composer input[type=file][hidden],.feedback-camera-choices[hidden],.feedback-voice-controls[hidden]{display:none!important}
.feedback-media-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.feedback-media-action{border:1px solid #e9d6e3;background:#fff;color:var(--plum);border-radius:12px;min-height:49px;padding:7px 4px;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;gap:6px}
.feedback-media-action span{font-size:11px}.feedback-media-action:focus-visible,.feedback-camera-choices button:focus-visible{outline:3px solid #ba7aa7;outline-offset:2px}
.feedback-camera-choices{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px;margin-top:8px;border-radius:12px;background:#f2e7f0}
.feedback-camera-choices span{font-size:11px;color:var(--plum);font-weight:800;margin-right:auto}
.feedback-camera-choices button,.feedback-voice-controls button{border:1px solid #d7bfd0;background:#fff;color:var(--plum);padding:9px 11px;border-radius:10px;font-size:12px;font-weight:800}
.feedback-voice-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:9px;padding:10px;border:1px solid #e5b5cb;border-radius:12px;background:#fff2f7}
.feedback-recording-indicator{font-size:12px;color:#8e2450;font-weight:850;margin-right:auto}.feedback-recording-indicator:first-letter{color:#d21e4f}
.feedback-chosen-files{display:grid;gap:7px;margin-top:9px}
.feedback-chosen-file{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;align-items:center;background:#fff;border:1px solid #eadce4;border-radius:11px;padding:8px 10px;font-size:11px}
.feedback-chosen-name{min-width:0;overflow-wrap:anywhere;color:var(--plum);font-weight:750}.feedback-chosen-name small{font-size:10px;color:var(--muted)}
.feedback-chosen-file>button{background:#f4e8ef;border:0;border-radius:50%;width:29px;height:29px;font-size:19px;color:var(--plum)}
.feedback-chosen-file audio,.feedback-chosen-file video{grid-column:1/-1;width:100%;max-height:210px;border-radius:10px}
.feedback-media-note:not(:empty){font-size:11px;line-height:1.45;margin:7px 0;color:var(--plum);font-weight:650}
.feedback-media-composer .feedback-file-note{margin:9px 0 0}
.feedback-file-preview video{display:block;width:100%;max-width:360px;max-height:340px;background:#120b1b;border-radius:10px}
.feedback-announcement-toggle{display:flex!important;align-items:flex-start;gap:11px;background:#fbf4f9;border:1px solid #e7d4df;border-radius:15px;margin:11px 0;padding:12px!important;cursor:pointer}
.feedback-announcement-toggle input[type=checkbox]{width:18px!important;min-width:18px;height:18px;margin:1px 0!important;padding:0!important;accent-color:var(--plum)}
.feedback-announcement-toggle b,.feedback-announcement-toggle small{display:block}.feedback-announcement-toggle b{font-size:12px;color:var(--plum)}.feedback-announcement-toggle small{color:var(--muted);font-size:11px;line-height:1.45;margin-top:4px;font-weight:500}
.feedback-announcement-toggle span{min-width:0}
@media(max-width:480px){.feedback-media-action{flex-direction:column;gap:2px;min-height:57px}.feedback-media-action span{font-size:10px}.feedback-media-composer{padding:9px}#modal:has(.feedback-modal-title) #modalContent{padding:25px 16px 17px}}


/* v15.12.1 — clearer feedback capture */
.feedback-recording-indicator [data-feedback-recording-state]{font-weight:850}
.feedback-voice-controls:not([hidden]) .feedback-recording-indicator{min-width:0}

/* v15.13 — first-time user onboarding */
.auth-check-v1513{padding:6px 0 2px}.auth-check-v1513 .eyebrow{margin:2px 0 5px}.auth-next-steps{width:100%;margin:14px 0 12px;padding:0;list-style:none;counter-reset:authsteps;display:grid;gap:8px;text-align:left}.auth-next-steps li{counter-increment:authsteps;position:relative;padding:11px 12px 11px 45px;background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);font-size:13px;line-height:1.4}.auth-next-steps li:before{content:counter(authsteps);position:absolute;left:12px;top:9px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--plum);color:#fff;font-size:11px;font-weight:850}.auth-spam-tip{width:100%;display:grid;gap:3px;text-align:left;background:#f4ead0;border:1px solid #e7d59c;border-radius:14px;padding:11px 13px;margin:2px 0 12px}.auth-spam-tip b{color:#5b4415;font-size:12px}.auth-spam-tip span{color:#735f31;font-size:11px;line-height:1.45}.auth-email-actions{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;margin-top:4px}.auth-resend-note{width:100%;border-radius:12px;padding:9px 11px;margin:4px 0 2px;background:#eaf6ee;color:#286543;font-size:11px;font-weight:750}
.first-time-onboarding{text-align:center}.first-time-onboarding .onboarding-mark{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--plum),var(--pink));color:#fff;font:700 22px Georgia,serif;box-shadow:0 12px 28px rgba(76,17,62,.18)}.first-time-onboarding h2{font-size:30px!important;line-height:1.05;margin-bottom:8px!important}.onboarding-lead{max-width:430px;margin:0 auto 16px;color:var(--muted);line-height:1.5}.onboarding-start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:16px 0}.onboarding-start-grid button{border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 10px;text-align:left;min-height:118px;color:var(--ink);box-shadow:0 7px 18px rgba(53,16,67,.04)}.onboarding-start-grid button:hover,.onboarding-start-grid button:focus-visible{border-color:#cda9c2;box-shadow:0 10px 22px rgba(53,16,67,.08)}.onboarding-start-grid span{display:block;font-size:21px;margin-bottom:7px}.onboarding-start-grid b,.onboarding-start-grid small{display:block}.onboarding-start-grid b{color:var(--plum);font:700 15px Georgia,serif;line-height:1.2}.onboarding-start-grid small{color:var(--muted);font-size:10px;line-height:1.35;margin-top:5px}.onboarding-feedback-tip{display:grid;grid-template-columns:34px 1fr;gap:10px;text-align:left;padding:13px 14px;border-radius:16px;background:#f7eef5;border:1px solid #ead8e5;margin-top:12px}.onboarding-feedback-tip>span{font-size:22px}.onboarding-feedback-tip b{color:var(--plum);font-size:12px}.onboarding-feedback-tip p{margin:4px 0 0;color:var(--muted);font-size:11px;line-height:1.45}.onboarding-alert-card{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:16px;background:#fff;padding:12px 13px;margin-top:10px}.onboarding-alert-card.enabled{background:#eff8f2}.onboarding-alert-icon{font-size:21px}.onboarding-alert-card b,.onboarding-alert-card small{display:block}.onboarding-alert-card b{color:var(--plum);font-size:12px}.onboarding-alert-card small{margin-top:3px;color:var(--muted);font-size:10px;line-height:1.4}.onboarding-alert-card .btn{padding:9px 11px;white-space:nowrap}.onboarding-alert-status{min-height:0;margin:5px 4px 0;text-align:left;color:var(--muted);font-size:10px}.onboarding-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px}.onboarding-actions .btn{min-width:150px}
@media(max-width:620px){.onboarding-start-grid{grid-template-columns:1fr}.onboarding-start-grid button{min-height:auto;display:grid;grid-template-columns:32px 1fr;column-gap:6px;padding:12px 13px}.onboarding-start-grid button span{grid-row:1 / span 2;margin:0;align-self:center}.onboarding-start-grid button b,.onboarding-start-grid button small{grid-column:2}.onboarding-alert-card{grid-template-columns:30px 1fr}.onboarding-alert-card .btn{grid-column:1 / -1;width:100%}.onboarding-actions{flex-direction:column}.onboarding-actions .btn{width:100%}.auth-email-actions{display:grid}.auth-email-actions .btn{width:100%}}

/* v15.14 — Learn library now renders published Supabase content while preserving v14.7 styling */
.learn-card-meta-v1514{display:block;margin-top:9px;color:#8b7785;font-size:10px;font-weight:780;line-height:1.35}
.learn-empty-v1514{grid-column:1/-1;border:1px dashed var(--line);border-radius:18px;padding:22px;background:#fff;color:var(--muted)}
.learn-empty-v1514 b{display:block;color:var(--plum);font:700 18px Georgia,serif;margin-bottom:5px}.learn-empty-v1514 p{margin:0;line-height:1.5}
.lesson-numbered-v1514{margin:10px 0}.lesson-special-v1514{border-left:4px solid #c99a34}.lesson-special-v1514.tip{background:#fff9e9}.lesson-special-v1514.warning{background:#fff4f1;border-left-color:#b9555c}.lesson-special-v1514.quote{background:#f7eff5;border-left-color:#7c3a70}
.lesson-special-v1514>small{display:block;text-transform:uppercase;letter-spacing:.11em;font-weight:850;font-size:9px;color:#8b6a32;margin-bottom:5px}
.learn-related-v1514{border:1px solid var(--line);border-radius:20px;background:#fff;padding:18px;margin:16px 0;display:grid;gap:16px}.learn-related-group-v1514 .eyebrow{margin-bottom:8px}.learn-related-pills-v1514{display:flex;gap:8px;flex-wrap:wrap}.learn-related-pill-v1514{border:1px solid #dfcfd9;background:#fbf4f8;color:var(--plum);border-radius:999px;padding:8px 11px;font-size:11px;font-weight:800;text-decoration:none}
.masterclass-card[style*="background-image"]{background-size:cover;background-position:center}
@media(max-width:720px){.learn-related-v1514{padding:14px}.learn-related-pill-v1514{width:100%;text-align:center}}

/* =========================================================
   v16.7.0 — Whole-app glow-up
   Airier surfaces, consistent controls, lighter PWA/navigation
   ========================================================= */
:root{
  --surface-soft:#fcf9f6;
  --surface-card:#fffdfb;
  --line-soft:#ece2dc;
  --shadow-air:0 10px 28px rgba(53,16,67,.055);
}
body{background:linear-gradient(180deg,#faf6f2 0%,#f4ece8 100%)}
#app-shell{background:#fbf8f4;box-shadow:0 0 34px rgba(53,16,67,.055)}
.topbar{background:rgba(255,252,248,.94);border-bottom-color:rgba(86,52,70,.08)}
.icon-btn{background:#fffdfb;border-color:var(--line-soft);box-shadow:none}.icon-btn:hover{background:#f7eef3}
.bottom-nav{background:rgba(255,253,250,.96);border-top-color:var(--line-soft);box-shadow:0 -6px 22px rgba(53,16,67,.04)}
.nav-item{border-radius:14px}.nav-item.active{background:#f1e6ed;color:var(--plum)}
.page{max-width:1220px;margin:0 auto}
.page-title{padding-bottom:16px}.page-title p:last-child{max-width:68ch}
.btn{min-height:44px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.2}
.btn.primary{box-shadow:0 8px 18px rgba(53,16,67,.13)}.btn.secondary{background:#f1e7ed}.btn.light{box-shadow:none}.text-link{min-height:36px}
.form-card,.profile-form,.product-card,.service-card,.wardrobe-card,.request-card,.journal-empty,.routine-item{background:var(--surface-card);border-color:var(--line-soft);box-shadow:none}
.form-card,.profile-form{border-radius:20px}.form-card select,.profile-form input,.modal-form input,.modal-form select,.modal-form textarea{min-height:46px;background:#fff;border-color:var(--line-soft)}
.tabs{background:#f0e7eb;padding:4px;border-radius:14px}.tab{min-height:42px}.tab.active{box-shadow:none;border:1px solid #eadde5}
.quick-card,.article-feature,.learn-preview-v10,.recommend-preview-v10{box-shadow:var(--shadow-air)}
.quick-card:hover,.product-card:hover,.service-card:hover{transform:translateY(-2px)}
.product-card,.service-card{border-radius:18px}.product-body{padding:14px}.service-card{padding:15px}
.category-chips{scrollbar-width:none}.category-chips::-webkit-scrollbar{display:none}.chip{background:#fffdfb;border-color:var(--line-soft)}
.pilot-callout,.account-card,.build-note,.profile-upgrade-callout{box-shadow:none}
dialog{border-radius:22px;box-shadow:0 28px 70px rgba(42,9,31,.20)}dialog::backdrop{background:rgba(32,14,28,.42)}
.modal-close{background:#f4eaf0}

@media(min-width:900px){
  body{background:linear-gradient(180deg,#f7f1ed 0%,#fbf8f4 45%,#f4ece8 100%)}
  #app-shell{width:min(1480px,calc(100% - 42px));border-color:rgba(92,54,74,.06);box-shadow:0 0 46px rgba(53,16,67,.065)}
  .topbar{height:72px;padding:0 44px}.bottom-nav{top:72px;height:58px;gap:9px;box-shadow:0 5px 18px rgba(53,16,67,.025)}
  .nav-item{padding:0 13px;gap:6px}.nav-item:hover{background:#f7eef3}.nav-item.active{background:#f0e5ec}
  .page{padding:38px 48px 66px}.page-title h1{font-size:42px}
}
@media(max-width:760px){
  #app-shell{background:#fbf8f4}.topbar{height:64px;padding:0 16px}.brand-mark{font-size:29px}.brand-word{font-size:23px}
  .bottom-nav{height:72px;padding:6px 6px max(7px,env(safe-area-inset-bottom));gap:2px}.nav-item{min-width:0}.nav-item span{font-size:18px}.nav-item small{font-size:9px}.nav-item.active{background:#f2e8ee}
  .page{padding:16px 14px 32px}.page-title h1{font-size:32px}.page-title p:last-child{font-size:14px}
  .quick-grid,.service-grid,.product-grid{gap:10px}.form-card,.profile-form{padding:15px;border-radius:18px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}