.booking-hero { padding: 170px 0 108px; border-bottom: 1px solid var(--line); }
.booking-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .65fr); gap: clamp(54px, 9vw, 138px); align-items: end; }
.booking-hero-grid > *, .booking-explainer-grid > *, .booking-demo-heading > *, .booking-workbench > *, .booking-rules-head > * { min-width: 0; }
.booking-kicker { color: var(--zinc-500); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.booking-hero .booking-kicker { margin: 28px 0 14px; }
.booking-hero h1 { max-width: 11ch; font-family: var(--font-display); font-size: clamp(3.2rem, 7.2vw, 7rem); font-weight: 500; line-height: .98; }
.booking-hero-lead { max-width: 60ch; margin: 28px 0 32px; color: var(--zinc-300); font-size: 1.05rem; }
.booking-hero-schedule { border: 1px solid var(--line-2); background: #0c0c0f; }
.hero-schedule-head { display: flex; justify-content: space-between; gap: 18px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.hero-schedule-head span { color: var(--white); font-weight: 600; }
.hero-schedule-head b { color: var(--zinc-500); font-size: .78rem; font-weight: 500; }
.hero-schedule-row { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 13px 20px; border-bottom: 1px solid var(--line); font-size: .88rem; }
.hero-schedule-row time { color: var(--zinc-500); font-variant-numeric: tabular-nums; }
.hero-schedule-row span { padding-left: 12px; border-left: 1px solid var(--line-2); }
.hero-schedule-row .is-open { color: var(--white); }
.hero-schedule-row .is-busy { color: var(--zinc-600); text-decoration: line-through; text-decoration-thickness: 1px; }
.hero-schedule-foot { display: flex; align-items: center; gap: 9px; padding: 16px 20px; color: var(--zinc-400); font-size: .82rem; }
.availability-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--white); }

.booking-explainer { border-bottom: 1px solid var(--line); }
.booking-explainer-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(46px, 8vw, 120px); }
.booking-explainer h2, .booking-demo-heading h2, .booking-rules h2 { max-width: 15ch; margin-top: 12px; font-family: var(--font-display); font-size: clamp(2.35rem, 4.8vw, 4.8rem); font-weight: 500; line-height: 1.04; }
.booking-explainer-copy { display: grid; gap: 18px; align-content: end; max-width: 66ch; color: var(--zinc-300); font-size: 1.05rem; }

.booking-demo-section { padding: 104px 0 116px; border-bottom: 1px solid var(--line); }
.booking-demo-heading, .booking-rules-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); gap: 48px; align-items: end; margin-bottom: 44px; }
.booking-demo-heading > p, .booking-rules-head > p { max-width: 52ch; color: var(--zinc-400); }
.booking-progress { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-2); border-bottom: 0; background: #0c0c0f; }
.booking-progress > div { display: flex; align-items: center; gap: 11px; min-height: 56px; padding: 0 18px; color: var(--zinc-600); }
.booking-progress > div + div { border-left: 1px solid var(--line-2); }
.booking-progress span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--zinc-700); border-radius: 50%; font-size: .72rem; }
.booking-progress b { font-size: .82rem; font-weight: 500; }
.booking-progress .is-current, .booking-progress .is-complete { color: var(--white); }
.booking-progress .is-current span { border-color: var(--white); background: var(--white); color: var(--bg); }
.booking-progress .is-complete span { border-color: var(--zinc-400); }

.booking-workbench { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(340px, .62fr); border: 1px solid var(--line-2); background: #0c0c0f; }
.booking-form { padding: clamp(28px, 4vw, 52px); }
.booking-step { margin: 0; padding: 0 0 34px; border: 0; }
.booking-step + .booking-step { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }
.booking-step legend { margin-bottom: 18px; color: var(--white); font-size: 1.02rem; font-weight: 600; }
.booking-step:disabled { opacity: .36; }
.booking-choice-list { border-top: 1px solid var(--line); }
.booking-choice {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  width: 100%; min-height: 66px; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.booking-choice-mark { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--zinc-600); border-radius: 50%; }
.booking-choice-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.booking-choice.is-selected .booking-choice-mark { border-color: var(--white); }
.booking-choice.is-selected .booking-choice-mark::after { background: var(--white); }
.booking-choice-main { display: grid; gap: 1px; }
.booking-choice-main strong { color: var(--zinc-300); font-weight: 500; }
.booking-choice-main small { color: var(--zinc-500); font-size: .78rem; }
.booking-choice-price { color: var(--zinc-400); font-size: .88rem; font-variant-numeric: tabular-nums; }

.booking-employee-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.booking-employee { min-height: 96px; padding: 14px 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--zinc-400); font: inherit; cursor: pointer; }
.booking-employee strong { display: block; margin-top: 8px; color: var(--zinc-300); font-weight: 500; }
.booking-employee small { color: var(--zinc-600); }
.booking-employee-initials { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--zinc-700); border-radius: 50%; color: var(--white); font-size: .72rem; }
.booking-employee.is-selected { border-color: var(--white); background: var(--white); color: var(--bg); }
.booking-employee.is-selected strong, .booking-employee.is-selected small { color: var(--bg); }
.booking-employee.is-selected .booking-employee-initials { border-color: var(--bg); color: var(--bg); }

.booking-days { display: grid; grid-template-columns: repeat(6, minmax(74px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: thin; }
.booking-day { min-width: 74px; min-height: 68px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--zinc-500); font: inherit; cursor: pointer; }
.booking-day span, .booking-day strong { display: block; }
.booking-day span { font-size: .72rem; text-transform: capitalize; }
.booking-day strong { margin-top: 3px; color: var(--zinc-300); font-weight: 500; }
.booking-day.is-selected { border-color: var(--white); background: var(--white); color: var(--bg); }
.booking-day.is-selected strong { color: var(--bg); }
.booking-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 18px; }
.booking-time { min-height: 46px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: transparent; color: var(--zinc-300); font: inherit; cursor: pointer; }
.booking-time:hover { border-color: var(--zinc-500); }
.booking-time.is-selected { border-color: var(--white); background: var(--white); color: var(--bg); }
.booking-empty { margin-top: 14px; color: var(--zinc-600); font-size: .82rem; }

.booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.booking-fields label { color: var(--zinc-400); font-size: .82rem; }
.booking-fields input { display: block; width: 100%; min-height: 48px; margin-top: 7px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--white); font: inherit; }
.booking-fields input:focus { outline: 2px solid var(--white); outline-offset: 2px; }
.booking-consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; color: var(--zinc-400); font-size: .82rem; cursor: pointer; }
.booking-consent input { margin-top: 4px; accent-color: var(--white); }

.booking-summary { padding: clamp(28px, 4vw, 44px); border-top: 1px solid var(--white); border-left: 1px solid var(--line-2); background: var(--bg); }
.booking-summary-head { display: flex; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); }
.booking-summary-head span { color: var(--white); font-size: 1.1rem; font-weight: 600; }
.booking-summary-head b { color: var(--zinc-500); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.booking-summary dl { margin: 0; }
.booking-summary dl > div { display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.booking-summary dt { color: var(--zinc-500); }
.booking-summary dd { margin: 0; color: var(--zinc-300); text-align: right; }
.booking-summary-price { margin: 30px 0 24px; }
.booking-summary-price span { color: var(--zinc-500); font-size: .8rem; }
.booking-summary-price strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 3.2rem; font-weight: 500; line-height: 1; }
.booking-summary .btn { width: 100%; justify-content: space-between; }
.booking-summary .btn:disabled { background: var(--zinc-700); color: var(--zinc-500); cursor: not-allowed; }
.booking-summary > p { margin-top: 14px; color: var(--zinc-600); font-size: .78rem; }

.booking-confirmation { grid-column: 1 / -1; padding: clamp(46px, 8vw, 92px); background: var(--bg); text-align: center; }
.booking-confirmation[hidden] { display: none; }
.confirmation-mark { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 26px; border: 1px solid var(--white); border-radius: 50%; font-size: 1.25rem; }
.booking-confirmation h3 { margin: 10px auto 18px; font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4.6rem); font-weight: 500; }
.booking-confirmation > p:not(.booking-kicker) { max-width: 64ch; margin-right: auto; margin-left: auto; color: var(--zinc-300); }
.booking-confirmation .confirmation-note { margin-top: 20px; color: var(--zinc-500) !important; font-size: .88rem; }
.booking-confirmation .btn { margin-top: 30px; }

.booking-rules-head { margin-bottom: 44px; }
.booking-rule-list { border-top: 1px solid var(--line-2); }
.booking-rule-list article { display: grid; grid-template-columns: minmax(180px, .4fr) minmax(0, 1fr); gap: 36px; align-items: baseline; padding: 28px 0; border-bottom: 1px solid var(--line-2); }
.booking-rule-list h3 { font-size: 1.35rem; font-weight: 500; }
.booking-rule-list p { max-width: 58ch; color: var(--zinc-400); }

@media (max-width: 1000px) {
  .booking-hero-grid, .booking-workbench { grid-template-columns: 1fr; }
  .booking-hero-schedule { max-width: 620px; }
  .booking-summary { border-left: 0; }
}
@media (max-width: 760px) {
  .booking-hero { padding: 140px 0 76px; }
  .booking-hero h1 { max-width: 100%; font-size: clamp(3rem, 14vw, 5rem); overflow-wrap: break-word; }
  .booking-explainer-grid, .booking-demo-heading, .booking-rules-head { grid-template-columns: 1fr; gap: 28px; }
  .booking-demo-section { padding: 78px 0; }
  .booking-progress b { display: none; }
  .booking-progress > div { justify-content: center; padding: 0 8px; }
  .booking-form, .booking-summary { width: 100%; min-width: 0; padding: 28px 22px; }
  .booking-employee-list { grid-template-columns: 1fr 1fr; }
  .booking-fields { grid-template-columns: 1fr; }
  .booking-rule-list article { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 520px) {
  .booking-times { grid-template-columns: repeat(3, 1fr); }
  .booking-choice { grid-template-columns: 24px minmax(0, 1fr); padding: 11px 0; }
  .booking-choice-price { grid-column: 2; }
  .booking-summary-price strong { font-size: 2.8rem; }
}