/* Maison Muse is a fictional, bounded booking demonstration. */
.salon-demo-page .salon-main{background:var(--sand);padding-bottom:clamp(48px,7vw,100px)}
.salon-shell{width:min(1240px,calc(100% - var(--gutter)*2));margin-inline:auto}
.salon-context{display:flex;justify-content:space-between;gap:20px;padding-block:18px;border-bottom:1px solid var(--line);font-size:14px}
.salon-context .text-link{font-size:14px}
.salon-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:end;padding-block:clamp(35px,5vw,64px)}
.salon-intro .eyebrow{margin-bottom:18px}
.salon-intro h1{font-size:clamp(48px,6vw,80px);line-height:1.05}
.salon-intro p{font-size:18px;max-width:42ch}
.salon-intro .salon-fiction{font-size:13px;margin-top:14px;color:var(--muted)}
.salon-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:28px;align-items:start}
.salon-booking{min-width:0;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.salon-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;padding:0;margin:0;border-bottom:1px solid var(--line)}
.salon-progress li{min-width:0}
.salon-progress button{border:0;border-bottom:3px solid transparent;width:100%;min-height:76px;display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 10px;background:transparent;color:var(--muted);font-size:14px}
.salon-progress button span{font-size:12px;border:1px solid var(--line);border-radius:50%;width:25px;height:25px;display:grid;place-items:center;flex-shrink:0}
.salon-progress button[aria-current=step]{color:var(--text);border-bottom-color:var(--rust);font-weight:700;background:var(--card)}
.salon-progress button[aria-current=step] span,.salon-progress button.is-done span{background:var(--rust);border-color:var(--rust);color:var(--paper)}
.salon-progress button:disabled{opacity:.65}
.salon-panel{padding:clamp(24px,3vw,40px);min-height:420px}
.salon-panel h2{font-size:clamp(34px,3.4vw,48px);line-height:1.12;scroll-margin-top:24px}
.salon-panel h2:focus{outline:none}
.salon-panel-intro{font-size:16px;color:var(--muted);margin-top:14px;margin-bottom:28px}
.salon-panel fieldset{padding:0;margin:0;border:0;min-width:0}
.salon-panel legend{font-size:14px;font-weight:700;margin-bottom:14px;padding:0}
.salon-choice{position:relative;border:1px solid var(--line);border-radius:6px;background:var(--card);min-width:0}
.salon-choice:has(input:checked){border:2px solid var(--rust);background:var(--sand)}
.salon-choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:4px}
.salon-choice input[type=radio]{position:absolute;right:20px;top:24px;width:21px;height:21px;margin:0;accent-color:var(--rust);cursor:pointer}
.salon-choice-label{display:flex;flex-direction:column;gap:8px;padding:20px 58px 20px 20px;min-height:72px;cursor:pointer;font-size:16px;line-height:1.45}
.salon-choice-title{font-weight:700;font-size:18px}
.salon-choice-description{font-size:15px;color:var(--muted);max-width:53ch}
.salon-choice-meta{font-size:14px;font-weight:700;color:var(--rust)}
.salon-services .salon-choice+.salon-choice{margin-top:12px}
.salon-stylists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.salon-stylists legend{float:none}
.salon-stylist .salon-choice-label{padding-right:20px;gap:10px}
.salon-stylist .salon-choice-title{font-family:var(--font-display);font-size:29px;font-weight:400;line-height:1.1}
.salon-initials{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:var(--dt-navy);color:var(--dt-sand);font-family:var(--font-display);font-size:24px;letter-spacing:.03em;margin-bottom:6px}
.salon-initials--jules{background:var(--dt-sand);color:var(--dt-navy);border:1px solid var(--dt-border-light)}
.salon-initials--sasha{background:var(--dt-orange);color:var(--dt-navy)}
.salon-profile{border-top:1px solid var(--line);margin:0 20px;padding-block:2px 12px}
.salon-profile summary{min-height:44px;cursor:pointer;display:list-item;align-content:center;font-size:14px;font-weight:700}
.salon-profile p{font-size:14px;line-height:1.6;color:var(--muted);margin-top:10px}
.salon-dates,.salon-times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.salon-dates .salon-choice-label,.salon-times .salon-choice-label{padding:16px 36px 16px 12px;min-height:58px;justify-content:center}
.salon-dates .salon-choice-title,.salon-times .salon-choice-title{font-size:14px}
.salon-dates .salon-choice input[type=radio],.salon-times .salon-choice input[type=radio]{width:18px;height:18px;right:11px;top:20px}
.salon-panel .salon-times{margin-top:28px}
.salon-times .salon-fine{grid-column:1/-1}
.salon-fine{font-size:13px;color:var(--muted);line-height:1.6;margin-top:18px}
.salon-controls{border-top:1px solid var(--line);padding:20px clamp(24px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px}
.salon-controls .button{margin-left:auto;font-size:15px}
.salon-back,.salon-edit{background:transparent;color:var(--text);border:0;min-height:44px;padding:8px 4px;text-decoration:underline;text-underline-offset:4px;font-size:14px}
.salon-error{margin:0 clamp(24px,3vw,40px) 24px;padding:12px 16px;border-left:3px solid var(--rust);font-size:15px;background:var(--sand)}
.salon-aside{padding:28px 24px;border-top:3px solid var(--rust);background:var(--paper);border-radius:0 0 6px 6px}
.salon-aside h2{font-size:28px;line-height:1.15}
.salon-aside .salon-fine{margin-top:10px}
.salon-summary{margin:26px 0 20px}
.salon-summary dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-top:20px}
.salon-summary dd{margin:5px 0 0;font-size:16px;line-height:1.45}
.salon-estimate{font-size:14px;font-weight:700;padding-block:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.salon-review{margin:28px 0}
.salon-review>div{display:grid;grid-template-columns:1fr auto;column-gap:18px;row-gap:5px;border-top:1px solid var(--line);padding-block:16px}
.salon-review dt{font-size:13px;color:var(--muted)}
.salon-review dd{margin:0;grid-column:1;font-size:17px}
.salon-review .salon-edit{grid-column:2;grid-row:1/3;align-self:center}
.salon-note-label{display:block;font-size:15px;font-weight:700;margin-bottom:10px}
.salon-panel select{width:100%;min-height:48px;padding:12px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:4px}
.salon-panel .salon-complete-message{font-size:22px;font-family:var(--font-display);margin-top:16px}
.salon-finish-actions{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin-top:24px}
.salon-finish-actions .text-link{font-size:14px}
.salon-note{font-size:15px}
.salon-noscript{max-width:720px;border:1px solid var(--line);padding:28px;background:var(--paper)}
@media(prefers-reduced-motion:no-preference){.salon-choice{transition:border-color 160ms ease,background-color 160ms ease}.salon-choice:hover{border-color:var(--rust)}.salon-panel{animation:salon-appear 180ms ease-out}@keyframes salon-appear{from{opacity:.8;transform:translateY(4px)}to{opacity:1;transform:none}}}
@media(max-width:1050px){.salon-workspace{grid-template-columns:minmax(0,1fr) 240px;gap:20px}.salon-panel{padding:28px}.salon-stylists{grid-template-columns:1fr}.salon-intro{gap:30px}.salon-progress button{gap:6px;padding-inline:5px}}
@media(max-width:780px){.salon-intro{grid-template-columns:1fr;gap:22px}.salon-intro p{max-width:58ch}.salon-workspace{grid-template-columns:1fr}.salon-aside{display:none}.salon-panel{min-height:0}.salon-stylists{grid-template-columns:repeat(2,minmax(0,1fr))}.salon-progress button{min-height:70px;flex-direction:column;gap:5px;font-size:12px}.salon-context{gap:10px;flex-wrap:wrap;padding-block:10px}.salon-context .text-link{font-size:13px}}
@media(max-width:480px){.salon-shell{width:calc(100% - 32px)}.salon-panel{padding:24px 18px}.salon-stylists{grid-template-columns:1fr}.salon-controls{padding:18px;gap:10px}.salon-controls .button{padding-inline:14px;font-size:14px}.salon-dates,.salon-times{gap:8px;grid-template-columns:1fr}.salon-dates .salon-choice-label,.salon-times .salon-choice-label{padding:14px 40px 14px 14px;min-height:48px}.salon-dates .salon-choice input[type=radio],.salon-times .salon-choice input[type=radio]{top:16px}.salon-choice-label{padding-right:50px}.salon-choice-title{font-size:17px}.salon-finish-actions{align-items:stretch;flex-direction:column}.salon-review dd{font-size:16px}.salon-progress button{font-size:11px}.salon-error{margin-inline:18px}}
@media(prefers-reduced-motion:reduce){.salon-demo-page *,.salon-demo-page *::before,.salon-demo-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

#salon-demo{scroll-margin-top:20px}