/* Shared booking sheet and the sales preview only. */
.sales-preview { min-width: 0; overflow: hidden; align-self: center; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg2); color: var(--text); box-shadow: 0 24px 60px -40px #0005; }
.sales-preview-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 24px 24px 12px; }
.sales-preview-head .kicker, .sales-preview-head > span { margin: 0; font-size: 13px; }
.sales-preview-head > span { color: var(--text-dim); }
.sales-preview h2 { padding: 0 24px; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; max-width: 26ch; }
.sales-options { margin: 20px 24px 0; }
.sales-option { display: grid; grid-template-columns: 30px 1fr; width: 100%; text-align: left; padding: 13px 0; color: var(--text); border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer; font: inherit; transition: color .2s; }
.sales-option > span { grid-row: span 2; padding-top: 2px; font: 13px var(--mono); color: var(--text-dim); }
.sales-option strong { font-size: 16px; font-weight: 600; }
.sales-option small { grid-column: 2; margin-top: 5px; font-size: 14px; line-height: 1.4; color: var(--text-dim); }
.sales-option[aria-pressed="true"] > span { color: var(--accent-text); }
.sales-option[aria-pressed="true"] strong::after { content: ' ↗'; color: var(--accent-text); }
.sales-option:focus-visible, .sales-launch:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sales-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 18px 24px; margin: 0; border-top: 1px solid var(--line); }
.sales-steps li { position: relative; margin: 0; padding-top: 10px; border-top: 2px solid var(--line-strong); font-size: 13px; line-height: 1.3; color: var(--text-dim); }
.sales-steps.is-running li { animation: sales-path .8s var(--ease-out) both; }
.sales-steps li:nth-child(2) { animation-delay: .12s; }.sales-steps li:nth-child(3) { animation-delay: .24s; }.sales-steps li:nth-child(4) { animation-delay: .36s; }
@keyframes sales-path { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; border-color: #44D8F2; } }
.sales-launch { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 24px; background: #44D8F2; color: #071214; font-size: 15px; font-weight: 650; line-height: 1.4; }
.sales-launch:hover { background: #75E5F7; }
.lead-open { overflow: hidden; }
.lead-dialog { position: fixed; inset: 0; max-width: none; width: min(540px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 30px; overflow: auto; border: 1px solid var(--line-strong); border-radius: var(--r-md, 16px); background: var(--bg, #F8F4EC); color: var(--text, #202220); box-shadow: 0 24px 100px #0005; }
.lead-dialog::backdrop { background: #07121499; backdrop-filter: blur(5px); }
.lead-dismiss { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; background: transparent; border: 0; color: inherit; font: 28px/1 sans-serif; cursor: pointer; }
.lead-kicker { font: 13px var(--mono); color: var(--text-dim); margin-bottom: 12px; }
.lead-dialog h2 { font-size: 28px; line-height: 1.15; padding-right: 8px; }
.lead-intro { font-size: 15px; line-height: 1.5; color: var(--text-dim); margin: 12px 0 20px; }
.lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lead-fields label, .lead-result label { display: grid; gap: 7px; min-width: 0; font-size: 14px; text-align: left; }
.lead-dialog :is(input, select, textarea) { box-sizing: border-box; width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--bg2); color: var(--text); font: 16px/1.4 var(--sans, sans-serif); }
.lead-dialog :is(input, select, textarea, button, a):focus-visible { outline: 2px solid var(--accent, #44D8F2); outline-offset: 3px; }
.lead-dialog .lead-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lead-verification, .lead-privacy, .lead-submit { grid-column: 1 / -1; }
.lead-verification:empty { display: none; }
.lead-privacy { font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.lead-privacy a { text-decoration: underline; }
.lead-dialog .btn { justify-content: center; font-size: 15px; min-height: 48px; }
.lead-submit:disabled { opacity: .65; cursor: wait; }
.lead-status { margin-top: 16px; font-size: 14px; line-height: 1.5; }
.lead-status:empty { display: none; }
.lead-result { display: grid; gap: 16px; margin-top: 16px; }
.lead-result p, .lead-close-note { font-size: 14px; line-height: 1.5; }
.lead-close-note { margin-top: 14px; color: var(--text-dim); }
.lead-fields[hidden], .lead-result[hidden], .sales-option small[hidden] { display: none; }
@media (max-width: 600px) {
  .sales-preview-head { padding: 18px 18px 10px; }
  .sales-preview h2 { padding-inline: 18px; }
  .sales-options { margin: 16px 18px 0; }
  .sales-steps { padding: 16px 18px; gap: 8px; }
  .sales-launch { padding: 15px 18px; }
  .lead-dialog { width: 100%; max-height: calc(100dvh - 16px); inset: auto 0 0; margin: 0; padding: 26px 20px max(20px, env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; }
  .lead-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lead-dialog h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) { .sales-steps.is-running li { animation: none; border-color: #44D8F2; } }

/* The pocket preview demonstrates approval without sending a message. */
.pm-actions button { flex: 1; padding: 9px 0; border-radius: 999px; font: inherit; font-weight: 620; border: 1px solid var(--line-strong); color: var(--text-dim); background: var(--surface); cursor: pointer; }
.pm-result:empty, .mobile-result:empty { display: none; }
.pm-result { margin-top: 10px; font-size: 11px; color: var(--accent-text); }
.phone-mock.is-approved .pm-item { animation: sales-path .8s var(--ease-out) both; }
.phone-mock.is-approved .pm-item:nth-of-type(2) { animation-delay: .15s; }
.phone-mock.is-approved .pm-item:nth-of-type(3) { animation-delay: .3s; }
.mobile-approve { margin-top: 14px; }
.mobile-loop .is-approved { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .phone-mock.is-approved .pm-item { animation: none; } }