*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:#f4f3ec;color:#163e36;font-size:var(--type-body);line-height:var(--type-leading-body)}
button,input,select{font:inherit}
button,a,input,select{touch-action:manipulation}
button,a{cursor:pointer}
a{color:inherit;text-decoration:none}
button{color:inherit;border:1px solid #bdc9c0;background:transparent;border-radius:var(--radius-sm);min-height:46px;padding:10px 17px}
button:hover,a.primary:hover{background:#dbe6dc}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #c45124;outline-offset:4px}
[hidden]{display:none!important}
.demo-bar{background:#163e36;color:#fff;padding:9px 4vw;display:flex;justify-content:space-between;gap:12px;font-size:var(--type-caption)}
header,main,footer{width:min(1240px,92%);margin:auto}
header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:26px 0;border-bottom:1px solid #c9d0c6}
.logo{font-size:var(--type-logo-large);font-weight:700;letter-spacing:-2px}
.logo span{color:#af431e;margin-left:8px;font-size:var(--type-logo-large)}
nav{display:flex;gap:5px;background:#e6e9df;border-radius:var(--radius-md);padding:4px}
nav button{border:0}
nav button[aria-pressed=true]{background:#163e36;color:white}
nav span{font-size:var(--type-caption)}
.reset{font-size:var(--type-caption)}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:60px;align-items:center;padding:65px 0 85px}
.eyebrow{font-size:var(--type-caption);font-weight:700;letter-spacing:1.5px}
h1{letter-spacing:-4px;margin:24px 0}
h1 em{font-style:normal;color:#49705c}
.lead{max-width:460px;color:#4b6257;font-size:var(--type-lead);margin:28px 0}
.primary{display:inline-flex;align-items:center;justify-content:center;min-height:50px;background:#163e36;color:white;border:0;border-radius:var(--radius-sm);padding:14px 22px;font-weight:600;font-size:var(--type-ui)}
.primary:hover{background:#28574b!important;color:white}
.benefits{display:flex;flex-wrap:wrap;gap:18px;font-size:var(--type-caption);margin-top:32px}
.visual{height:550px;background:#dfE5d8;border-radius:140px 12px 12px 12px;position:relative;overflow:hidden}
.orb{position:absolute;width:390px;height:390px;border-radius:50%;background:#c2d0b8;top:45px;left:60px}
.visual-star{position:absolute;font-size:var(--type-display);color:#163e36;line-height:var(--type-leading-body);top:-5px;right:15px;transform:rotate(15deg)}
.visual-note{position:absolute;left:38px;bottom:42px;font-size:var(--type-section);font-weight:700;line-height:var(--type-leading-body);letter-spacing:-2px}
.visual-note span{display:block;font-size:var(--type-caption);letter-spacing:1px;margin-top:20px}
.floating{position:absolute;top:270px;right:24px;background:#fafaf4;padding:20px 24px;border-radius:var(--radius-md);transform:rotate(-5deg);box-shadow:0 12px 25px #163e3614;display:grid;gap:9px}
.floating span{font-size:var(--type-caption)}
.floating strong{font-size:var(--type-lead)}
.booking{padding:65px 0;border-top:1px solid #c9d0c6}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:40px}
.section-head p:last-child{color:#4b6257}
h2{letter-spacing:-2px;margin:20px 0 0}
form{display:grid;grid-template-columns:1.25fr 1fr;gap:70px}
fieldset{border:0;padding:0;margin:0 0 35px}
legend{font-size:var(--type-ui);font-weight:600;margin-bottom:18px}
.service-options{display:grid;gap:10px}
.service-options label{display:flex;align-items:center;gap:15px;background:#e9ece2;border:1px solid #c9d0c6;border-radius:var(--radius-sm);padding:18px;cursor:pointer}
.service-options label:has(input:checked){border:2px solid #163e36;padding:17px;background:#dfe8da}
.service-options strong,.service-options small{display:block}
.service-options small{color:#4b6257;font-size:var(--type-caption);margin-top:5px}
input[type=radio],input[type=checkbox]{accent-color:#163e36;width:20px;height:20px;flex-shrink:0}
.area-label{display:flex;justify-content:space-between;margin-bottom:15px}
input[type=range]{width:100%;accent-color:#163e36;height:35px}
.range-labels{display:flex;justify-content:space-between;font-size:var(--type-caption);color:#4b6257;margin:5px 0 35px}
.extras{display:grid;gap:8px}
.extras label{display:flex;gap:12px;align-items:center;padding:12px 0;cursor:pointer}
.extras span{display:flex;justify-content:space-between;gap:20px;width:100%}
.extras b{font-weight:400;color:#4b6257}
.summary{background:#fffef8;border-radius:var(--radius-md);padding:30px;border:1px solid #d0d8ca;align-self:start}
.summary h3{font-size:var(--type-card);letter-spacing:-1px;margin:13px 0 24px}
.price-row{display:flex;justify-content:space-between;font-size:var(--type-ui);margin:10px 0;gap:15px}
.total{border-top:1px solid #ccd2c7;margin-top:23px;padding-top:20px;display:grid;gap:4px}
.total span{font-size:var(--type-caption)}
.total strong{font-size:var(--type-section);letter-spacing:-2px}
.included{font-size:var(--type-caption);color:#4b6257;margin:14px 0 25px}
.summary>label{display:block;font-size:var(--type-ui);margin:16px 0 7px}
input:not([type=range],[type=radio],[type=checkbox]),select{width:100%;min-height:48px;border:1px solid #bdc9c0;background:white;color:#163e36;border-radius:var(--radius-sm);padding:11px 12px;font-size:var(--type-body);min-width:0}
.summary .primary{width:100%;margin-top:23px}
.summary small{display:block;font-size:var(--type-ui);color:#4b6257;margin-top:12px}
#form-error{color:#a13016;font-size:var(--type-ui)}
.how{padding:45px 0 65px;border-top:1px solid #c9d0c6}
.how>div{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.how ol{padding-left:20px;line-height:var(--type-leading-body)}
.how a{font-weight:600;font-size:var(--type-ui)}
footer{border-top:1px solid #c9d0c6;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:30px 0;font-size:var(--type-caption)}
#manager{padding:55px 0}
.manager-title{font-size:var(--type-title)}
.stats{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:15px;margin-bottom:30px}
.stats article{background:#e2e9dc;padding:23px;border-radius:var(--radius-md)}
.stats span{font-size:var(--type-caption);display:block}
.stats strong{font-size:var(--type-section);display:block;margin-top:10px}
.toolbar{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin:25px 0}
.toolbar label{font-size:var(--type-ui)}
.toolbar input,.toolbar select{margin-top:8px}
.order{display:grid;grid-template-columns:1.5fr 1fr 1fr;align-items:center;gap:20px;background:#fffef8;border:1px solid #d0d8ca;border-radius:var(--radius-md);padding:24px;margin-bottom:12px}
.order h3{margin:0 0 5px;font-size:var(--type-card)}
.order p{color:#4b6257;margin:5px 0}
.order select{font-size:var(--type-body)}
.order label{font-size:var(--type-ui);display:grid;gap:7px}
.order strong{font-size:var(--type-card)}
.status{display:inline-block;border-radius:var(--radius-sm);background:#e2e9dc;font-size:var(--type-caption);padding:4px 8px;margin-bottom:10px}
.storage-note{color:#4b6257;font-size:var(--type-caption)}
#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);width:min(500px,90%);background:#163e36;color:white;padding:16px 22px;box-shadow:0 6px 35px #163e3630;border-radius:var(--radius-md);z-index:5;font-size:var(--type-ui)}
dialog{border:1px solid #bdc9c0;border-radius:var(--radius-md);padding:30px;background:#f4f3ec;color:#163e36;width:min(480px,90%)}
dialog::backdrop{background:#102a2477}
dialog h2{font-size:var(--type-card);margin:0}
dialog button{margin:8px 5px 0 0}
@media(max-width:800px){.hero{gap:30px}
.visual{height:460px}
.visual-star{font-size:var(--type-display)}
.visual-note{font-size:var(--type-title)}
.floating{top:235px;right:15px}
.floating strong{font-size:var(--type-body)}
form{gap:25px}
.summary{padding:22px}
.order{grid-template-columns:1fr 1fr}
.order>label{grid-column:1/-1}
.manager-title{font-size:var(--type-title)}
}
@media(max-width:600px){.demo-bar{flex-direction:column;gap:3px}
header{flex-wrap:wrap;padding:16px 0;gap:12px}
.logo{font-size:var(--type-logo)}
.logo span{font-size:var(--type-logo-large)}
header nav{order:3;width:100%}
nav button{flex:1;font-size:var(--type-ui)}
.reset{padding:8px 12px}
.hero{grid-template-columns:1fr;padding:35px 0 45px;gap:35px}
h1{letter-spacing:-2px}
.visual{height:330px;border-top-left-radius:90px}
.visual-star{font-size:var(--type-display);right:0;top:-40px}
.orb{width:270px;height:270px;left:40px;top:20px}
.visual-note{left:25px;bottom:25px;font-size:var(--type-title)}
.floating{top:135px;right:15px;padding:16px}
.lead{font-size:var(--type-lead)}
.benefits{gap:12px}
.booking{padding:35px 0}
.section-head{display:block;margin-bottom:28px}
.section-head p:last-child{margin-top:20px}
form{grid-template-columns:1fr;gap:5px}
.summary{padding:23px}
.how>div{grid-template-columns:1fr}
.how ol{font-size:var(--type-ui)}
.stats{grid-template-columns:1fr 1fr;gap:10px}
.stats article{padding:17px}
.stats article:last-child{grid-column:1/-1}
.toolbar{grid-template-columns:1fr;gap:12px}
.order{padding:18px;gap:12px;grid-template-columns:1fr}
.order>label{grid-column:auto}
.manager-title{font-size:var(--type-title);letter-spacing:-2px}
footer{flex-wrap:wrap;gap:12px}
footer span{font-size:var(--type-caption)}
footer>a:last-child{width:100%}
.extras span{font-size:var(--type-ui);gap:10px}
#notice{bottom:12px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}
:root{--ink:#163e36;--soft:#e2e9dc;--paper:#fffef8;--error:#a13016;--edge:#c9d0c6;--space:24px}
.stepper{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 30px}
.stepper span{padding:10px 13px;border:1px solid var(--edge);border-radius:var(--radius-sm);font-size:var(--type-caption);color:#4b6257}
.stepper span[aria-current=step]{background:var(--ink);color:white;border-color:var(--ink)}
.stepper span.complete{background:var(--soft);color:var(--ink)}
.wizard-main{min-width:0}
.step-title{font-size:var(--type-title);letter-spacing:-1px;margin:10px 0 25px;line-height:var(--type-leading-body)}
.wizard-main fieldset{margin-bottom:25px}
.wizard-main legend{font-size:var(--type-ui)}
.step-actions{display:flex;justify-content:space-between;gap:12px;margin-top:25px;padding-top:20px;border-top:1px solid var(--edge)}
button:disabled{opacity:.5;cursor:not-allowed}
button:active,.primary:active{transform:translateY(1px)}
.field{display:grid;gap:8px;margin-bottom:20px;font-size:var(--type-ui)}
.field small{font-size:var(--type-caption);color:#4b6257}
.field textarea{font:inherit;font-size:var(--type-body);resize:vertical;min-height:90px;border:1px solid #bdc9c0;border-radius:var(--radius-sm);padding:12px;color:var(--ink);background:white;width:100%}
.field [aria-invalid=true]{border:2px solid var(--error)}
.field-error{color:var(--error);font-size:var(--type-ui)}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.slot-grid label{position:relative;display:flex;align-items:center;justify-content:center;min-height:52px;border:1px solid #bdc9c0;border-radius:var(--radius-sm);cursor:pointer;gap:8px;font-size:var(--type-ui)}
.slot-grid label:has(input:checked){background:var(--ink);color:white}
.slot-grid label:has(input:disabled){background:#e7e9e0;color:#596359;cursor:not-allowed}
.slot-grid input{width:16px;height:16px}
.slot-grid small{font-size:var(--type-caption)}
.slot-grid label:has(input:focus-visible){outline:3px solid #c45124;outline-offset:3px}
.tip{padding:15px 18px;background:var(--soft);border-radius:var(--radius-sm);color:#3e5b4a;font-size:var(--type-ui);margin-top:22px}
.review-list{margin:0}
.review-list>div{display:flex;justify-content:space-between;gap:25px;padding:14px 0;border-bottom:1px solid var(--edge)}
.review-list dt{color:#4b6257;font-size:var(--type-body)}
.review-list dd{margin:0;text-align:right;font-size:var(--type-body);max-width:65%;overflow-wrap:anywhere}
.edit-step{margin-top:20px;font-size:var(--type-caption)}
.summary-context{border-top:1px solid var(--edge);padding-top:15px;font-size:var(--type-caption);line-height:1.5;color:#4b6257;margin-top:20px}
.summary{position:sticky;top:20px}
.inline-error{color:var(--error);font-size:var(--type-caption);min-height:1em}
.result{max-width:740px;margin:65px auto;padding:40px;background:var(--paper);border:1px solid var(--edge);border-radius:var(--radius-lg)}
.result-check{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--soft);font-size:var(--type-card)}
.result>p:not(.eyebrow){color:#4b6257;font-size:var(--type-caption)}
.result-summary{margin:25px 0}
.result-actions{display:flex;flex-wrap:wrap;gap:12px}
.empty{padding:45px 25px;border:1px dashed #9aaea0;border-radius:var(--radius-md);text-align:center}
.empty h3{font-size:var(--type-title);margin:0 0 12px}
.empty p{color:#4b6257}
.empty button{margin-top:15px}
.client-order{padding:28px;margin:20px 0;background:var(--paper);border:1px solid var(--edge);border-radius:var(--radius-md)}
.client-order-head{display:flex;justify-content:space-between;gap:16px}
.client-order h3{margin:0;font-size:var(--type-card)}
.client-order p{color:#4b6257;overflow-wrap:anywhere}
.timeline{display:flex;gap:8px;margin:24px 0}
.timeline span{flex:1;border-top:3px solid #cad3c5;padding-top:10px;font-size:var(--type-caption);color:#4b6257}
.timeline span.current,.timeline span.past{border-color:var(--ink);color:var(--ink)}
.client-actions{display:flex;flex-wrap:wrap;gap:10px}
.client-actions button{font-size:var(--type-ui)}
.cancelled-note{color:var(--error)!important}
.order p{overflow-wrap:anywhere}
.order select{min-width:0}
.order>div{min-width:0}
.summary small{line-height:1.5}
.loading-label{display:flex;gap:10px;align-items:center}
.spinner{width:16px;height:16px;border:2px solid #ffffff66;border-top-color:white;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}
}
#my-orders{padding:55px 0}
.how{margin-top:35px}
#customer-tab,#my-tab,#manager-tab{white-space:normal}
.step-content-enter{animation:appear .18s ease-out}
@keyframes appear{from{opacity:.5;transform:translateY(5px)}
to{opacity:1;transform:none}
}
@media(max-width:800px){header{flex-wrap:wrap}
header nav{order:3;width:100%;justify-content:center}
.summary{position:static}
.slot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){nav button{padding:10px 7px;font-size:var(--type-ui)}
.stepper{gap:6px}
.stepper span{font-size:var(--type-caption);padding:8px 9px}
.step-title{font-size:var(--type-title)}
.result{padding:25px;margin:30px auto}
.review-list>div{gap:15px}
.review-list dd{font-size:var(--type-body)}
.client-order{padding:20px}
.client-order-head{flex-direction:column;gap:10px}
.timeline{gap:6px}
.timeline span{font-size:var(--type-caption)}
.step-actions button{padding:12px;font-size:var(--type-ui)}
.wizard-main{margin-bottom:25px}
form{gap:20px}
}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}
.step-content-enter{animation:none}
}