/*
  WEB-P0.1 desktop UX refinement v2.
  Desktop only: calmer typography, lighter marketplace layout, denser form flow.
  Mobile/tablet rules are intentionally left to the existing responsive styles.
*/
@media (min-width: 769px) {
  html,
  body {
    background: #f7f7f5;
    color: #202124;
  }

  body {
    font-weight: 400;
  }

  .booking-shell {
    background: #f7f7f5;
  }

  .booking-header {
    height: 58px;
    padding: 0 clamp(22px, 3vw, 42px);
    background: #ffffff;
    border-bottom: 1px solid #e6e6e3;
    backdrop-filter: none;
  }

  .brand {
    color: #111111;
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -.55px;
  }

  .secure-label {
    color: #696d70;
    font-size: 11px;
    font-weight: 500;
  }

  .secure-label span {
    color: #25a85a;
  }

  .booking-app {
    width: min(1080px, 100%);
    padding: 24px clamp(24px, 3vw, 36px) 56px;
  }

  .flow-top {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 11px;
    margin-bottom: 18px;
  }

  .back-button {
    width: 34px;
    height: 34px;
    border: 1px solid #d9d9d6;
    border-radius: 9px;
    background: #ffffff;
    color: #202124;
    box-shadow: none;
  }

  .back-button:hover {
    background: #f0f1ee;
    border-color: #c9cbc7;
  }

  .back-button svg {
    width: 16px;
  }

  .flow-title {
    color: #202124;
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.2px;
  }

  .progress-copy {
    color: #7a7e80;
    font-size: 10.5px;
    font-weight: 450;
  }

  /* Form screens: remove duplicated marketing hero on desktop. */
  #bookingApp > .hero-panel {
    display: none;
  }

  .flow-layout {
    grid-template-columns: minmax(0, 1fr) 282px;
    gap: 18px;
    align-items: start;
  }

  .form-stack {
    gap: 11px;
  }

  .section-card,
  .summary-panel,
  .payment-panel {
    border: 1px solid #e1e2df;
    border-radius: 11px;
    background: #ffffff;
    color: #202124;
    box-shadow: none;
  }

  .section-card {
    padding: 15px 17px;
  }

  .section-head {
    gap: 10px;
    margin-bottom: 11px;
  }

  .section-index {
    color: #238d4d;
    font-size: 9.5px;
    font-weight: 650;
    letter-spacing: .03em;
  }

  .section-card h2 {
    color: #202124;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.08px;
    margin-top: 1px;
  }

  .section-desc {
    color: #74787a;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.42;
    margin-top: 3px;
  }

  .option-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 7px;
  }

  .option {
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid #dadbd8;
    border-radius: 9px;
    background: #ffffff;
    color: #292b2d;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: none;
  }

  .option:hover {
    border-color: #aeb1ad;
    background: #fafbf9;
  }

  .option.selected {
    border-color: #2a9d59;
    background: #f1faf4;
    color: #172019;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(42,157,89,.14);
  }

  .option small,
  .option.selected small {
    display: block;
    color: #777b7d;
    font-size: 9.5px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 3px;
  }

  .inline-fields {
    gap: 8px;
  }

  .field label {
    color: #676b6e;
    font-size: 10px;
    font-weight: 550;
    margin-bottom: 5px;
  }

  .input,
  .textarea {
    border: 1px solid #d9dad7;
    border-radius: 9px;
    background: #ffffff;
    color: #202124;
    padding: 10px 11px;
    font-size: 13px;
    font-weight: 400;
  }

  .input:focus,
  .textarea:focus {
    border-color: #2a9d59;
    box-shadow: 0 0 0 3px rgba(42,157,89,.10);
  }

  .textarea {
    min-height: 82px;
  }

  .stepper {
    gap: 8px;
  }

  .stepper button {
    width: 36px;
    height: 36px;
    border: 1px solid #d9dad7;
    border-radius: 9px;
    background: #ffffff;
    color: #202124;
    font-size: 18px;
  }

  .stepper strong {
    min-width: 34px;
    color: #202124;
    font-size: 15px;
    font-weight: 600;
  }

  .summary-panel {
    position: sticky;
    top: 74px;
    padding: 16px;
  }

  .summary-panel h2 {
    color: #202124;
    font-size: 16px;
    font-weight: 650;
    margin: 0 0 4px;
  }

  .summary-panel > p {
    color: #777b7d;
    margin: 0 0 13px;
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.42;
  }

  .metric-grid {
    gap: 7px;
  }

  .metric {
    border: 1px solid #ecece9;
    border-radius: 9px;
    background: #f8f8f6;
    padding: 9px;
  }

  .metric span {
    color: #7a7e80;
    font-size: 8.8px;
    font-weight: 550;
    margin-bottom: 3px;
  }

  .metric strong {
    color: #202124;
    font-size: 12.5px;
    font-weight: 600;
  }

  .summary-list {
    margin: 12px 0;
    border-top: 1px solid #ecece9;
  }

  .summary-list li {
    padding: 8px 0;
    border-bottom: 1px solid #ecece9;
    color: #303336;
    font-size: 10.5px;
    font-weight: 400;
  }

  .summary-list span {
    color: #777b7d;
  }

  .summary-list strong {
    color: #202124;
    font-weight: 600;
  }

  .primary-button {
    min-height: 42px;
    border-radius: 9px;
    background: #111111;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 650;
  }

  .primary-button:hover:not(:disabled) {
    background: #2a2a2a;
  }

  .plan-note,
  .privacy-copy {
    color: #7a7e80 !important;
    font-size: 9.2px !important;
    font-weight: 400 !important;
  }

  .payment-wrap {
    max-width: 940px;
  }

  .payment-grid {
    gap: 14px;
  }

  .payment-panel {
    padding: 16px;
  }

  .payment-address {
    background: #f4faf6;
    border-color: #d8ebde;
  }

  .payment-address .panel-label,
  .payment-address p {
    color: #2c4233;
  }

  .order-total h2 {
    color: #202124;
    font-size: 15px;
    font-weight: 600;
  }

  .order-total strong {
    color: #202124;
    font-size: 21px;
    font-weight: 650;
  }

  .order-text {
    color: #777b7d;
    font-size: 11px;
    font-weight: 400;
    margin-top: 8px;
  }

  .card-form {
    gap: 10px;
  }

  .error-banner {
    border-color: #f1c8c8;
    background: #fff5f5;
    color: #8d2525;
    font-weight: 500;
  }

  /* Service selection: calmer hierarchy and compact marketplace cards. */
  body:has(#bookingApp > .service-intro),
  body:has(#bookingApp > .service-intro) .booking-shell {
    background: #f7f7f5;
  }

  body:has(#bookingApp > .service-intro) .booking-header {
    background: #ffffff;
    border-bottom-color: #e6e6e3;
  }

  body:has(#bookingApp > .service-intro) .brand {
    color: #111111;
  }

  body:has(#bookingApp > .service-intro) .secure-label {
    color: #696d70;
  }

  body:has(#bookingApp > .service-intro) .booking-app {
    width: min(1040px, 100%);
    padding-top: 22px;
    padding-bottom: 44px;
  }

  body:has(#bookingApp > .service-intro) .flow-top,
  body:has(#bookingApp > .service-intro) .service-intro,
  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid {
    max-width: 980px;
  }

  body:has(#bookingApp > .service-intro) .flow-top {
    margin-bottom: 17px;
  }

  body:has(#bookingApp > .service-intro) .flow-title {
    font-size: 17px;
    font-weight: 650;
  }

  body:has(#bookingApp > .service-intro) .service-intro .hero-panel {
    max-width: 620px;
    min-height: 0;
    padding: 0 0 17px;
    background: transparent;
  }

  body:has(#bookingApp > .service-intro) .service-intro .eyebrow {
    color: #238d4d;
    font-size: 9.5px;
    font-weight: 600;
    gap: 7px;
  }

  body:has(#bookingApp > .service-intro) .service-intro .eyebrow::before {
    width: 6px;
    height: 6px;
    flex-basis: 6px;
    box-shadow: 0 0 0 3px rgba(42,157,89,.10);
  }

  body:has(#bookingApp > .service-intro) .service-intro .hero-panel h1 {
    max-width: 580px;
    margin: 7px 0 7px !important;
    color: #202124;
    font-size: 26px !important;
    line-height: 1.12 !important;
    letter-spacing: -.45px !important;
    font-weight: 650 !important;
  }

  body:has(#bookingApp > .service-intro) .service-intro .hero-panel p {
    max-width: 580px;
    color: #6f7375;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.45;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-panel {
    grid-template-columns: minmax(0,1fr) 210px;
    gap: 22px;
    padding: 11px 13px;
    border: 1px solid #e1e2df;
    border-radius: 10px;
    background: #ffffff;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-panel > div:first-child {
    grid-template-columns: 32px minmax(0,1fr);
    column-gap: 10px;
    row-gap: 2px;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-pin {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #edf8f0;
    color: #238d4d;
    font-size: 15px;
  }

  body:has(#bookingApp > .service-intro) .service-intro .panel-label {
    color: #7a7e80;
    font-size: 8.8px;
    font-weight: 550;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-main {
    color: #202124;
    font-size: 12.5px;
    line-height: 1.32;
    font-weight: 550;
  }

  body:has(#bookingApp > .service-intro) .service-intro .address-meta {
    padding-left: 18px;
    border-left-color: #ecece9;
    color: #777b7d;
    font-size: 10.2px;
    font-weight: 400;
    line-height: 1.38;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid {
    margin: 12px auto 0;
    gap: 9px;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card {
    min-height: 80px;
    padding: 12px 14px;
    border: 1px solid #e1e2df;
    border-radius: 10px;
    background: #ffffff;
    display: grid;
    grid-template-columns: 34px minmax(0,1fr) 18px;
    grid-template-rows: auto auto;
    column-gap: 11px;
    row-gap: 2px;
    align-items: center;
    box-shadow: none;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card:hover {
    transform: translateY(-1px);
    border-color: #c6c9c5;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(0,0,0,.045);
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 32px;
    height: 32px;
    margin: 0;
    border-radius: 8px;
    background: #edf8f0;
    color: #238d4d;
    font-size: 16px;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card h2 {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
    margin: 0;
    align-self: end;
    color: #202124;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -.1px;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    align-self: start;
    color: #777b7d;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
  }

  body:has(#bookingApp > .service-intro) #bookingApp > .service-grid .service-card .arrow {
    position: static;
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    margin: 0;
    color: #4f5355;
    font-size: 16px;
  }
}