@font-face {
  font-family: Tochka;
  src: url("assets/fonts/Tochka-Regular.ttf") format("truetype");
  font-weight: 100 600;
  font-display: swap;
}
@font-face {
  font-family: Tochka;
  src: url("assets/fonts/Tochka-Bold.ttf") format("truetype");
  font-weight: 650 900;
  font-display: swap;
}

:root {
  --background: #f5f6f1;
  --paper: #fff;
  --ink: #24372f;
  --muted: #717a70;
  --forest: #254536;
  --lime: #d5ed91;
  --line: #e3e7dd;
  --soft: #f3f5ee;
  --danger: #a3362e;
  color-scheme: light;
  font-family: Tochka, Arial, sans-serif;
  color: var(--ink);
  background: var(--background);
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button, a, input { touch-action: manipulation; }
button { color: inherit; }
button:disabled { cursor: not-allowed; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid #739847;
  outline-offset: 4px;
}
button:focus:not(:focus-visible) { outline: none; }
h1, h2, h3, p { margin: 0; }
svg { display: block; flex-shrink: 0; }
button svg { pointer-events: none; }
[hidden] { display: none !important; }
.shell { width: min(1220px, calc(100% - 96px)); margin-inline: auto; }
.site-header { height: 91px; border-bottom: 1px solid var(--line); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark { width: 31px; height: 31px; background: var(--forest); border-radius: 50%; position: relative; }
.brand-mark::after { content: ""; position: absolute; width: 11px; height: 11px; border-radius: 50%; background: var(--lime); right: -3px; bottom: 0; box-shadow: 0 0 0 3px var(--background); }
.brand-name { font-size: 29px; font-weight: 750; letter-spacing: -1.4px; line-height: 1; }
.brand-description { font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-left: 18px; border-left: 1px solid #d8ded1; padding-left: 21px; line-height: 1.6; }
.header-badge { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #54644f; }
.status-dot { width: 6px; height: 6px; background: #6e954b; border-radius: 50%; }
.header-booking { display: flex; align-items: center; gap: 8px; border: 1px solid #d6dece; border-radius: 24px; background: transparent; min-height: 40px; padding: 0 15px; font-size: 12px; }
.header-booking:hover { background: #e9eddf; }
.hero { display: flex; justify-content: space-between; align-items: center; min-height: 233px; padding: 28px 0 21px; gap: 28px; }
.eyebrow { text-transform: uppercase; letter-spacing: 1.8px; font-size: 10px; font-weight: 700; }
.hero .eyebrow { color: #6b7d5a; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.hero .eyebrow::before { content: ""; width: 18px; height: 1px; background: #6b7d5a; }
.hero h1 { font-size: clamp(36px, 3.45vw, 50px); line-height: 1.13; letter-spacing: -2.1px; font-weight: 500; }
.hero h1 span { color: #6f8159; }
.hero-description { color: var(--muted); font-size: 13px; line-height: 1.8; margin-top: 16px; }
.hero-image { width: 350px; height: 185px; object-fit: contain; margin-right: 49px; }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 325px; column-gap: 28px; align-items: start; }
.stepper { grid-column: 1; display: flex; align-items: center; margin: 0 0 20px; padding: 0 4px; min-height: 42px; list-style: none; }
.stepper li { display: flex; align-items: center; flex: 1; }
.stepper li:last-child { flex: 0 0 auto; }
.stepper li:not(:last-child)::after { content: ""; height: 1px; background: #dce2d4; flex: 1; margin: 0 24px; }
.step-link { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; min-height: 42px; font-size: 12px; white-space: nowrap; }
.step-link:disabled { color: #899080; cursor: default; }
.step-number { display: flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; font-size: 11px; border: 1px solid #d9dfd1; background: transparent; color: #889080; }
.step-link[aria-current="step"] { color: var(--forest); font-weight: 700; }
.step-link[aria-current="step"] .step-number { background: var(--forest); color: white; border-color: var(--forest); }
.step-link.completed .step-number { background: var(--lime); border-color: var(--lime); color: var(--forest); }
.step-link.completed:hover { color: #678947; }
.step-card { grid-column: 1; padding: 30px; border: 1px solid #e5e8df; border-radius: 22px; background: var(--paper); min-width: 0; box-shadow: 0 4px 24px #28391b03; }
.section-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-top h2 { font-size: 24px; font-weight: 500; line-height: 1.3; letter-spacing: -.7px; }
.step-caption { font-size: 10px; color: #8a9181; white-space: nowrap; letter-spacing: .4px; }
.section-description { font-size: 12px; color: var(--muted); line-height: 1.8; margin-top: 7px; }
.service-list { display: grid; gap: 12px; margin-top: 25px; }
.service-choice { width: 100%; display: flex; align-items: center; gap: 17px; padding: 19px 18px; text-align: left; border: 1px solid var(--line); background: white; border-radius: 13px; transition: background .16s, border-color .16s, box-shadow .16s; min-height: 101px; }
.service-choice:hover { border-color: #a6b795; background: #fbfcf8; }
.service-choice[aria-pressed="true"] { border-color: #6a8754; background: #f4f8ec; box-shadow: 0 0 0 1px #6a8754; }
.service-icon { background: #f0f3eb; color: #4e6545; width: 53px; height: 53px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.service-choice[aria-pressed="true"] .service-icon { background: #e3edcf; }
.service-copy { flex: 1; min-width: 0; }
.service-name { display: block; font-size: 15px; line-height: 1.45; font-weight: 700; letter-spacing: -.25px; }
.service-description { display: block; color: var(--muted); font-size: 11px; line-height: 1.6; margin-top: 4px; }
.service-meta { text-align: right; white-space: nowrap; margin-left: 8px; }
.service-price { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.3px; }
.service-duration { display: block; color: var(--muted); font-size: 11px; margin-top: 5px; }
.choice-indicator { width: 19px; height: 19px; border: 1.5px solid #d5dccd; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: 2px; flex-shrink: 0; }
[aria-pressed="true"] > .choice-indicator { background: var(--forest); border-color: var(--forest); }
[aria-pressed="true"] > .choice-indicator::after { content: ""; width: 5px; height: 8px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: translateY(-1px) rotate(45deg); }
.card-actions { border-top: 1px solid #edf0e7; margin-top: 25px; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.action-note { display: flex; align-items: flex-start; gap: 9px; font-size: 10px; line-height: 1.7; color: #7c8474; }
.action-note svg { margin-top: 2px; color: #7c9068; }
.primary-button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; background: var(--forest); color: white; min-height: 48px; padding: 0 22px; border: 1px solid var(--forest); border-radius: 10px; font-size: 12px; font-weight: 700; transition: background .15s, transform .15s; white-space: nowrap; }
.primary-button svg { color: var(--lime); }
.primary-button:hover:not(:disabled) { background: #35583c; border-color: #35583c; }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.primary-button:disabled { color: #7c8874; background: #e9eee1; border-color: #e9eee1; }
.primary-button:disabled svg { color: #8b987e; }
.back-button { display: inline-flex; align-items: center; gap: 9px; border: 0; background: transparent; padding: 10px 0; min-height: 44px; font-size: 12px; color: #65735b; }
.back-button:hover { color: var(--forest); }
.sidebar { grid-column: 2; grid-row: 2; }
.summary-card { background: #edf0e5; border: 1px solid #e4e9da; border-radius: 22px; padding: 26px; }
.summary-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.summary-heading h2 { font-size: 17px; font-weight: 500; letter-spacing: -.35px; }
.summary-heading svg { color: #839170; }
.summary-list { margin: 0; display: grid; gap: 22px; }
.summary-row { display: flex; align-items: flex-start; gap: 12px; }
.summary-row > svg { margin-top: 3px; color: #829171; }
.summary-row dt { color: #7b846e; font-size: 10px; margin-bottom: 6px; }
.summary-row dd { font-size: 12px; line-height: 1.65; margin: 0; }
.summary-placeholder { color: #909882; }
.summary-secondary { display: block; font-size: 11px; color: #6f7c62; margin-top: 3px; }
.summary-total { border-top: 1px solid #dbe1d0; margin-top: 26px; padding-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.summary-total strong { font-size: 24px; font-weight: 500; letter-spacing: -.9px; }
.summary-payment { font-size: 10px; color: #7f8971; text-align: right; margin-top: 7px; }
.sidebar-note { display: flex; gap: 12px; padding: 24px 13px 0; }
.note-icon { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid #dae3cf; border-radius: 50%; color: #759356; flex-shrink: 0; }
.sidebar-note h3 { font-size: 11px; font-weight: 700; margin-top: 2px; }
.sidebar-note p { font-size: 10px; color: #7e8773; line-height: 1.9; margin-top: 5px; }
.site-footer { display: flex; align-items: center; justify-content: space-between; padding: 30px 0 25px; gap: 16px; color: #959b8e; font-size: 10px; line-height: 1.7; }
.footer-left { display: flex; align-items: center; gap: 7px; }
.footer-dot { width: 5px; height: 5px; border-radius: 50%; background: #9ba88d; }
.footer-right { display: flex; align-items: center; gap: 6px; }

/* Специалист, дата и время */
.field-heading { font-size: 12px; font-weight: 700; margin-bottom: 12px; }
.specialist-section { margin-top: 25px; }
.specialist-list { display: grid; grid-template-columns: repeat(var(--specialist-count, 2), minmax(0, 1fr)); gap: 10px; }
.specialist-choice { position: relative; padding: 17px 12px; min-width: 0; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: white; transition: border-color .15s, background .15s; }
.specialist-choice:hover { border-color: #a6b795; background: #fbfcf8; }
.specialist-choice[aria-pressed="true"] { border-color: #6a8754; background: #f4f8ec; box-shadow: 0 0 0 1px #6a8754; }
.specialist-choice .choice-indicator { position: absolute; right: 12px; top: 16px; width: 17px; height: 17px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; letter-spacing: -.4px; margin-bottom: 11px; background: #e8e4d8; color: #7a7460; }
.avatar.anna { background: #eee3d8; color: #8d7160; }
.avatar.maxim { background: #e2e8d6; color: #728459; }
.avatar.elena { background: #dfe8e5; color: #668378; }
.specialist-name { display: block; font-size: 12px; font-weight: 700; line-height: 1.6; }
.specialist-role { display: block; font-size: 10px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.date-section { margin-top: 25px; border-top: 1px solid #edf0e7; padding-top: 23px; }
.date-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.date-input { min-height: 47px; width: 208px; border: 1px solid #dbe2d2; border-radius: 9px; background: white; color: var(--ink); padding: 11px 12px; font-size: 12px; font-variant-numeric: tabular-nums; }
.date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .55; padding: 3px; }
.date-shortcuts { display: flex; gap: 7px; flex-wrap: wrap; }
.date-shortcut { font-size: 11px; min-height: 43px; border: 1px solid transparent; background: #f3f5ee; border-radius: 8px; padding: 0 11px; }
.date-shortcut[aria-pressed="true"] { background: #e5edda; color: #3f5932; border-color: #d9e4c9; }
.date-shortcut:hover { background: #e5edda; }
.date-helper { font-size: 10px; color: #828b76; margin-top: 9px; line-height: 1.7; }
.time-section { margin-top: 23px; }
.time-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.time-heading .field-heading { margin: 0; }
.time-duration { font-size: 10px; color: #849079; }
.slot-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px; }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 49px; min-width: 89px; padding: 7px 14px; border: 1px solid #dce3d3; background: white; border-radius: 9px; font-size: 13px; font-variant-numeric: tabular-nums; }
.slot:hover:not(:disabled) { border-color: #789061; background: #f5f8ef; }
.slot[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: white; }
.slot[aria-pressed="true"]:hover { background: #35583c; }
.slot:disabled { background: #f4f5f1; border-color: #ecefe6; color: #929989; }
.slot:disabled .slot-time { text-decoration: line-through; text-decoration-color: #b1b7a9; }
.slot-state { font-size: 8px; }
.slot-caption { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #849079; margin-top: 12px; }
.slot-caption .status-dot { width: 5px; height: 5px; }
.selection-hint { padding: 16px; margin-top: 13px; background: #f5f7f0; border-radius: 10px; font-size: 11px; line-height: 1.7; color: #7e886f; }
.empty-state { display: flex; gap: 13px; align-items: flex-start; background: #f5f7ef; border: 1px dashed #d9e1ce; border-radius: 11px; padding: 18px; margin-top: 14px; }
.empty-state > svg { color: #879675; margin-top: 2px; }
.empty-state h3 { font-size: 12px; font-weight: 700; line-height: 1.6; }
.empty-state p { color: #7c876e; font-size: 11px; line-height: 1.8; margin-top: 4px; }
.empty-actions { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 9px; }
.text-button { border: 0; background: transparent; color: #4e7039; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; min-height: 35px; padding: 4px 0; text-align: left; }
.text-button:hover { color: #223f2e; }

/* Контакты */
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 21px 17px; margin-top: 27px; }
.contact-field { display: flex; flex-direction: column; min-width: 0; }
.contact-field label { font-size: 12px; font-weight: 700; line-height: 1.6; margin-bottom: 8px; }
.required-mark { color: #7a9660; margin-left: 2px; }
.optional-mark { color: #92998a; font-size: 10px; font-weight: 400; margin-left: 5px; }
.contact-input { width: 100%; min-height: 49px; padding: 12px 13px; background: #fcfdfb; border: 1px solid #dbe1d4; border-radius: 9px; color: var(--ink); font-size: 12px; line-height: 1.5; }
.contact-input::placeholder { color: #9aA191; opacity: 1; }
.contact-input:hover { border-color: #9eaf8a; }
.contact-input[aria-invalid="true"] { border-color: #b44f43; background: #fffaf8; }
.field-error { font-size: 10px; color: var(--danger); line-height: 1.6; margin-top: 6px; }
.field-help { font-size: 10px; color: #8b9381; line-height: 1.7; margin-top: 7px; }
.phone-field { grid-column: 1; }
.contact-notice { display: flex; gap: 11px; align-items: flex-start; margin-top: 25px; background: #f5f7ef; border-radius: 10px; padding: 14px 16px; font-size: 10px; line-height: 1.9; color: #7d8870; }
.contact-notice svg { color: #8ba575; margin-top: 3px; }
.contact-notice strong { color: #607351; font-weight: 500; }
.contact-bottom-note { max-width: 245px; color: #969d8e; font-size: 9px; line-height: 1.8; }
.mobile-review { display: none; }
.error-banner { display: flex; align-items: flex-start; gap: 11px; background: #fff3ee; border: 1px solid #f0d5c9; padding: 14px 16px; border-radius: 10px; color: var(--danger); margin-top: 20px; }
.error-banner > svg { margin-top: 1px; }
.error-banner h3 { font-size: 12px; line-height: 1.7; }
.error-banner p { font-size: 11px; line-height: 1.8; margin-top: 3px; }
.mobile-review { display: none; }
.storage-alert { max-width: 1220px; margin: 16px auto; }

/* Подтверждение */
.success-layout { max-width: 1000px; margin: 65px auto 55px; }
.success-card { border: 1px solid #e2e7da; border-radius: 26px; background: white; display: grid; grid-template-columns: 1fr 360px; gap: 38px; padding: 40px; }
.success-intro { padding: 13px 0; }
.success-icon { height: 64px; width: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--lime); margin-bottom: 28px; position: relative; }
.success-icon::after { content: ""; position: absolute; inset: -7px; border: 1px solid #e7eddc; border-radius: 50%; }
.success-intro .eyebrow { color: #82936d; margin-bottom: 13px; }
.success-intro h1 { font-size: 34px; line-height: 1.3; letter-spacing: -1.3px; font-weight: 500; overflow-wrap: anywhere; }
.success-description { color: #7b8572; font-size: 12px; line-height: 1.9; margin-top: 18px; max-width: 320px; }
.success-saved { display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; font-size: 10px; color: #7d8a70; line-height: 1.8; }
.success-saved svg { margin-top: 2px; }
.success-actions { margin-top: 26px; }
.ticket { background: var(--forest); color: #f8faef; border-radius: 17px; padding: 27px; position: relative; overflow: hidden; }
.ticket::after { content: ""; width: 110px; height: 110px; border: 1px solid #ffffff0d; border-radius: 50%; position: absolute; right: -48px; top: -32px; }
.ticket-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 23px; }
.ticket-top .eyebrow { font-size: 9px; letter-spacing: 1.3px; color: #b6c99e; }
.confirmed-badge { font-size: 8px; padding: 5px 8px; border-radius: 20px; background: #d5ed911a; color: var(--lime); }
.ticket-service { font-size: 19px; line-height: 1.45; font-weight: 500; letter-spacing: -.4px; }
.ticket-duration { font-size: 10px; color: #adbe9f; margin-top: 8px; }
.ticket-details { display: grid; gap: 17px; margin: 23px 0 0; border-top: 1px dashed #ffffff24; padding-top: 22px; }
.ticket-details dt { font-size: 9px; color: #a2b592; margin-bottom: 5px; }
.ticket-details dd { margin: 0; font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.ticket-date { color: var(--lime); font-size: 14px !important; }
.ticket-total { margin-top: 23px; padding-top: 20px; border-top: 1px dashed #ffffff24; display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.ticket-total strong { font-size: 23px; font-weight: 500; }
.ticket-payment { color: #a2b592; font-size: 9px; margin-top: 6px; text-align: right; }
.success-footnote { display: flex; align-items: center; justify-content: center; gap: 8px; color: #929b86; font-size: 10px; line-height: 1.8; padding: 23px 16px 0; text-align: center; }
.focus-heading:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
@media (min-width: 901px) {
  .sidebar { position: sticky; top: 24px; }
}
@media (max-width: 1150px) {
  .shell { width: calc(100% - 64px); }
  .booking-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 0 22px; }
  .step-card { padding: 25px; }
  .hero-image { margin-right: 0; width: 310px; }
  .service-choice { padding: 15px 13px; gap: 12px; }
  .service-icon { width: 43px; height: 43px; border-radius: 10px; }
  .service-name { font-size: 13px; }
  .service-description { font-size: 10px; }
  .service-price { font-size: 15px; }
  .service-meta { margin-left: 0; }
  .summary-card { padding: 22px; }
  .stepper li:not(:last-child)::after { margin: 0 16px; }
  .specialist-list { gap: 8px; }
  .specialist-choice { padding: 14px 10px; }
  .specialist-name { font-size: 11px; }
  .specialist-role { font-size: 9px; }
}
@media (max-width: 900px) {
  .shell { width: min(660px, calc(100% - 48px)); }
  .hero { min-height: 224px; }
  .hero h1 { font-size: 39px; }
  .hero-image { width: 205px; height: 130px; margin-right: -5px; }
  .hero-description { font-size: 12px; }
  .booking-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .sidebar { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .summary-card { padding: 24px; }
  .summary-list { grid-template-columns: 1fr 1fr; }
  .summary-heading { margin-bottom: 22px; }
  .summary-total { margin-top: 22px; }
  .sidebar-note { display: none; }
  .step-card { padding: 27px; }
  .service-name { font-size: 15px; }
  .service-description { font-size: 11px; }
  .service-choice { padding: 18px; gap: 16px; }
  .service-icon { width: 50px; height: 50px; }
  .service-price { font-size: 17px; }
  .step-link { font-size: 12px; }
  .stepper li:not(:last-child)::after { margin: 0 23px; }
  .specialist-name { font-size: 12px; }
  .specialist-role { font-size: 10px; }
  .mobile-review { display: block; margin-top: 26px; }
  .review-heading { font-size: 12px; font-weight: 700; margin-bottom: 13px; }
  .mobile-review .summary-card { padding: 20px; border-radius: 12px; }
  .mobile-review .summary-heading { display: none; }
  .mobile-review .summary-list { display: grid; gap: 18px; }
  .contact-layout .sidebar { display: none; }
  .success-layout { margin-top: 35px; }
  .success-card { grid-template-columns: minmax(0, 1fr); padding: 32px; gap: 28px; }
  .success-intro { padding: 5px 0 0; }
  .success-description { max-width: none; }
  .success-icon { margin-bottom: 24px; }
  .success-actions { margin-top: 20px; }
  .success-intro h1 { font-size: 32px; }
  .success-saved { margin-top: 20px; }
}
@media (max-width: 600px) {
  .shell { width: calc(100% - 36px); }
  .site-header { height: 73px; }
  .brand { gap: 10px; }
  .brand-name { font-size: 26px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-mark::after { width: 9px; height: 9px; }
  .brand-description { display: none; }
  .header-badge { font-size: 10px; gap: 7px; }
  .header-booking { font-size: 10px; padding: 0 11px; }
  .hero { min-height: unset; padding: 28px 0 27px; }
  .hero-image { display: none; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 1.3px; margin-bottom: 12px; }
  .hero h1 { font-size: 35px; letter-spacing: -1.5px; line-height: 1.16; }
  .hero-description { font-size: 11px; margin-top: 14px; line-height: 1.9; }
  .stepper { padding: 0 2px; margin-bottom: 15px; }
  .step-link { font-size: 10px; gap: 7px; min-height: 44px; }
  .step-number { width: 25px; height: 25px; font-size: 10px; }
  .stepper li:not(:last-child)::after { margin: 0 10px; }
  .step-card { border-radius: 17px; padding: 22px 18px; }
  .section-top h2 { font-size: 22px; letter-spacing: -.7px; }
  .step-caption { font-size: 8px; }
  .section-description { font-size: 11px; line-height: 1.8; margin-top: 7px; }
  .service-list { gap: 11px; margin-top: 21px; }
  .service-choice { display: grid; grid-template-columns: 40px minmax(0, 1fr) 17px; gap: 0 11px; padding: 15px 12px; min-height: 117px; border-radius: 11px; }
  .service-icon { width: 40px; height: 40px; grid-column: 1; grid-row: 1; border-radius: 9px; }
  .service-icon svg { width: 23px; height: 23px; }
  .service-copy { grid-column: 2; grid-row: 1; }
  .service-name { font-size: 12px; line-height: 1.5; letter-spacing: -.3px; }
  .service-description { font-size: 9px; line-height: 1.6; margin-top: 3px; }
  .service-meta { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 12px; text-align: left; margin-top: 9px; }
  .service-price { font-size: 14px; }
  .service-duration { font-size: 9px; margin-top: 0; }
  .service-duration::before { content: "·"; padding-right: 9px; color: #9ba88d; }
  .service-choice > .choice-indicator { grid-column: 3; grid-row: 1; width: 17px; height: 17px; align-self: start; margin-top: 3px; margin-left: 0; }
  .card-actions { margin-top: 22px; padding-top: 18px; gap: 13px; flex-wrap: wrap; }
  .card-actions .primary-button { flex: 1; min-width: 180px; min-height: 49px; padding-inline: 16px; font-size: 11px; gap: 18px; }
  .service-actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .service-actions .primary-button { width: 100%; flex: auto; order: -1; }
  .action-note { justify-content: center; font-size: 9px; align-items: center; }
  .action-note svg { margin-top: 0; }
  .action-note br { display: none; }
  .sidebar { margin-top: 16px; }
  .summary-card { border-radius: 16px; padding: 23px 20px; }
  .summary-heading h2 { font-size: 16px; }
  .summary-heading { margin-bottom: 21px; }
  .summary-list { grid-template-columns: 1fr; gap: 18px; }
  .summary-row dd { font-size: 11px; }
  .summary-total strong { font-size: 23px; }
  .site-footer { align-items: flex-start; padding: 26px 0; flex-direction: column; gap: 6px; font-size: 9px; }
  .specialist-section { margin-top: 22px; }
  .specialist-list { grid-template-columns: 1fr; gap: 9px; }
  .specialist-choice { display: grid; grid-template-columns: 38px minmax(0, 1fr) 17px; gap: 0 12px; padding: 13px 12px; align-items: center; }
  .avatar { grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; margin: 0; font-size: 11px; }
  .specialist-name { grid-column: 2; font-size: 12px; }
  .specialist-role { grid-column: 2; font-size: 9px; margin-top: 1px; }
  .specialist-choice .choice-indicator { position: static; grid-column: 3; grid-row: 1 / 3; margin: 0; }
  .field-heading { font-size: 11px; margin-bottom: 11px; }
  .date-section { margin-top: 22px; padding-top: 21px; }
  .date-row { gap: 10px; }
  .date-input { width: 100%; font-size: 13px; min-height: 48px; }
  .date-shortcut { min-height: 44px; font-size: 10px; padding: 0 13px; }
  .date-helper { font-size: 9px; }
  .time-section { margin-top: 22px; }
  .time-duration { font-size: 9px; }
  .slot-list { gap: 8px; }
  .slot { flex: 1; max-width: 105px; min-width: 79px; min-height: 49px; font-size: 13px; }
  .slot-caption { font-size: 9px; line-height: 1.7; }
  .back-button { font-size: 10px; }
  .empty-state { padding: 15px 12px; gap: 9px; }
  .empty-state h3 { font-size: 11px; }
  .empty-state p, .text-button { font-size: 10px; }
  .text-button { min-height: 44px; }
  .empty-actions { column-gap: 13px; margin-top: 4px; }
  .contact-fields { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 24px; }
  .contact-field label { font-size: 11px; }
  .contact-input { font-size: 16px; min-height: 50px; }
  .contact-input::placeholder { font-size: 12px; }
  .field-help { font-size: 9px; }
  .contact-notice { font-size: 9px; padding: 13px 12px; gap: 9px; margin-top: 23px; }
  .contact-bottom-note { font-size: 9px; order: 3; max-width: none; }
  .contact-actions { gap: 13px; }
  .contact-actions .primary-button { min-width: 194px; gap: 9px; }
  .mobile-review { margin-top: 24px; }
  .mobile-review .summary-list { gap: 17px; }
  .error-banner { padding: 13px 12px; gap: 9px; }
  .error-banner p { font-size: 10px; }
  .success-layout { margin-top: 25px; margin-bottom: 20px; }
  .success-card { padding: 25px 19px 19px; border-radius: 20px; gap: 25px; }
  .success-intro { padding: 5px 4px 0; }
  .success-icon { width: 52px; height: 52px; margin-bottom: 27px; }
  .success-intro h1 { font-size: 27px; letter-spacing: -1px; }
  .success-intro .eyebrow { font-size: 9px; letter-spacing: 1.3px; }
  .success-description { font-size: 11px; }
  .success-saved { font-size: 9px; }
  .success-actions .primary-button { width: 100%; }
  .ticket { padding: 23px 21px; border-radius: 13px; }
  .ticket-service { font-size: 18px; }
  .success-footnote { font-size: 9px; }
}