/* Client wizard */
.wrap { max-width: 720px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 32px) 140px; }
.hdr.client { padding-bottom: 8px; }
.hotel-tag { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 32px; text-align: right; }
.hotel-tag img { max-height: 30px; max-width: 110px; width: auto; }
.hotel-tag span { max-width: 140px; line-height: 1.2; }
@media (max-width: 520px) { .hotel-tag span { display: none; } .hdr .logo { width: 100px; } }

.progress { max-width: 720px; margin: 0 auto; padding: 14px clamp(20px, 5vw, 32px) 0; }
.progress .bar { height: 1px; background: var(--rule); position: relative; margin-top: 10px; }
.progress .bar i { position: absolute; left: 0; top: -.5px; height: 2px; background: var(--charcoal); transition: width .7s var(--ease); }
.progress .row { display: flex; justify-content: space-between; gap: 12px; }

/* welcome */
.welcome { text-align: center; padding-top: clamp(24px, 7vh, 64px); }
.welcome .hotelblock { margin-bottom: 40px; }
.welcome .hotelblock img { max-height: 72px; max-width: 220px; width: auto; margin: 0 auto 22px; }
.welcome h1 { margin-bottom: 18px; }
.welcome .lead { max-width: 480px; margin: 0 auto 44px; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: left; margin: 0 auto 52px; max-width: 640px; border-top: 1px solid var(--rule); padding-top: 28px; }
.three .numeral { font-size: 20px; display: block; margin-bottom: 4px; }
.three .label-sm { display: block; margin-bottom: 6px; }
@media (max-width: 560px) { .three { grid-template-columns: 1fr; gap: 18px; } }
.welcome .actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.welcome .link { font-size: 15px; }

/* step */
.step { padding-top: clamp(28px, 6vh, 56px); }
.step .head { margin-bottom: 36px; }
.step .head .caption { margin-top: 8px; max-width: 520px; }
.step .statement { margin-bottom: 4px; }

/* KPI card */
.kpi { padding: 26px 0 30px; border-top: 1px solid var(--rule); }
.kpi:last-of-type { border-bottom: 1px solid var(--rule); }
.kpi .t { font-family: var(--gar); font-weight: 300; font-size: 21px; line-height: 1.2; }
.kpi .m { color: var(--sage); font-size: 14px; margin: 2px 0 16px; }
.rate { display: grid; grid-template-columns: repeat(5, 1fr) 1.15fr; gap: 6px; border: 0; padding: 0; margin: 0 0 6px; }
.rate button { height: 54px; border: 1px solid var(--write); font-family: var(--gar); font-weight: 400; font-size: 22px; line-height: 1; background: transparent; transition: background .25s, color .25s, border-color .25s; touch-action: manipulation; }
.rate button.na { font-size: 13px; letter-spacing: .15em; }
.rate button:hover { border-color: var(--charcoal); }
.rate button[aria-checked="true"] { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }
.rate-read { min-height: 22px; font-size: 14px; color: var(--sage); }
.kpi .in { font-size: 16px; margin-top: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 28px; font-size: 13px; color: var(--sage); }
.legend b { font-family: var(--gar); font-weight: 400; color: var(--charcoal); margin-right: 4px; }

/* items */
.item { padding: 26px 0 8px; border-top: 1px solid var(--rule); }
.item:last-of-type { border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.item .label-sm { margin-bottom: 4px; }
.item .hint { margin-bottom: 14px; }
.item .field { margin-bottom: 20px; }
.item .field > .label-tiny { text-transform: none; letter-spacing: .04em; font-family: var(--sans); font-size: 14px; color: var(--sage); }

/* radio-like options */
.opts { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; }
.opts button { padding: 11px 22px; border: 1px solid var(--write); font-family: var(--gar); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.opts button[aria-checked="true"] { background: var(--charcoal); color: var(--cream); border-color: var(--charcoal); }

/* action rows */
.arow { border-top: 1px solid var(--rule); padding: 20px 0 6px; position: relative; }
.arow .rm { position: absolute; right: 0; top: 16px; }
.arow .field { margin-bottom: 20px; }
.arow .grid3x { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 0 24px; }
@media (max-width: 560px) { .arow .grid3x { grid-template-columns: 1fr; } }
.add { margin-top: 10px; }

/* sign-off */
.sig { font-family: var(--gar); font-style: italic; font-weight: 300; font-size: 22px; min-height: 40px; padding-top: 6px; border-bottom: 1px solid var(--write); }

/* summary + review */
.sum, .rv.sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 28px 0; padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
@media (max-width: 520px) { .sum { grid-template-columns: 1fr; gap: 12px; } }
.rvh { margin: 40px 0 14px; }
.rvitem { padding: 18px 0; border-top: 1px solid var(--rule); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 10px; }
@media (max-width: 640px) { .grid3 { grid-template-columns: 1fr; } }
.calc { margin-top: 6px; }

/* bottom bar */
.bar-bottom { position: fixed; left: 0; right: 0; bottom: 0; background: var(--cream); border-top: 1px solid var(--rule); padding: 14px clamp(20px, 5vw, 32px) calc(14px + env(safe-area-inset-bottom)); z-index: 20; }
.bar-bottom .in-bar { max-width: 720px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.bar-bottom .r { text-align: right; }
.saved { font-size: 13px; color: var(--sage); text-align: center; white-space: nowrap; }
.saved.err { color: var(--charcoal); }
.saved .dot { display: inline-block; width: 5px; height: 5px; background: var(--sage); margin-right: 7px; vertical-align: middle; }
.saved.busy .dot { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }
@media (max-width: 420px) { .saved span.t { display: none; } }

/* done */
.done { text-align: center; padding-top: clamp(40px, 10vh, 100px); }
.done .mark { width: 92px; height: 92px; margin: 0 auto 30px; }
.done .statement { margin-bottom: 14px; }
.done .lead { max-width: 440px; margin: 0 auto 36px; }
.done .actions { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.err-page { text-align: center; padding-top: 20vh; }
.review-name { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--rule); }

/* hotel logo in the page footer */
.page-foot { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--rule); text-align: center; }
.page-foot img { max-height: 44px; max-width: 200px; width: auto; margin: 0 auto; }