:root {
  color-scheme: light;
  --paper: #f9f3f2;
  --card: #fffdfc;
  --ink: #332633;
  --muted: #806e78;
  --line: #eadfe3;
  --rose: #ad6c85;
  --rose-deep: #874963;
  --rose-wash: #f8e9ee;
  --lilac: #ece4f1;
  --shadow: 0 14px 38px rgba(80, 43, 66, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: radial-gradient(circle at 100% 0, #f1e6ed 0, transparent 34%), var(--paper);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, 'Avenir Next', 'Segoe UI', sans-serif;
}
main { max-width: 760px; margin: auto; padding: 18px 16px 48px; }
.hero {
  position: relative;
  overflow: hidden;
  min-height: 270px;
  padding: 24px 28px 28px;
  border: 1px solid #f2e4e8;
  border-radius: 28px;
  background: linear-gradient(125deg, #fffaf8 10%, #f5e9ef 73%, #ebe2f0);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 750; letter-spacing: .025em; }
.brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--rose-deep); color: white; font-size: 19px; }
.eyebrow { margin: 0 0 7px; color: var(--rose-deep); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.hero .eyebrow { margin-top: 40px; }
h1 { position: relative; z-index: 1; max-width: 520px; margin: 0; font: 600 clamp(34px, 6vw, 52px)/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
h1 span { display: block; color: var(--rose-deep); font-style: italic; font-weight: 400; }
.hero-copy { position: relative; z-index: 1; max-width: 420px; margin: 18px 0 0; color: #685961; }
.hero-orbit { position: absolute; right: -46px; top: 44px; display: grid; place-items: center; width: 230px; height: 230px; border: 1px solid #e1cbd6; border-radius: 50%; color: #c489a2; font-size: 82px; transform: rotate(-18deg); opacity: .5; }
.owner-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 20px; border: 1px solid #f2e4e8; border-radius: 20px; background: linear-gradient(115deg, #fffaf8, #f5e9ef); box-shadow: var(--shadow); }
.owner-header .brand { flex: none; }
.owner-header-label { color: var(--rose-deep); font-size: 12px; font-weight: 750; }
.address-panel { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 15px 19px; border: 1px solid #efdde5; border-radius: 20px; background: linear-gradient(100deg, #fff9fb, #f6ebf0); box-shadow: var(--shadow); }
.address-icon { display: grid; flex: none; place-items: center; width: 39px; height: 39px; border-radius: 13px; background: #f0dfe7; color: var(--rose-deep); font-size: 27px; line-height: 1; }
.address-panel .eyebrow { margin-bottom: 2px; }
#address-text { margin: 0; font-size: 16px; font-weight: 750; }
.panel { margin-top: 18px; padding: 25px 28px 28px; border: 1px solid #f0e5e8; border-radius: 25px; background: var(--card); box-shadow: var(--shadow); }
.section-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 25px; }
.step { display: grid; flex: none; place-items: center; width: 42px; height: 42px; border-radius: 15px; background: var(--rose-wash); color: var(--rose-deep); font-family: Georgia, serif; font-size: 17px; }
h2 { margin: 0; font: 600 29px/1.1 Georgia, 'Times New Roman', serif; letter-spacing: -.03em; }
h3 { margin: 28px 0 13px; font: 600 22px/1.15 Georgia, 'Times New Roman', serif; }
label, .field-label { display: block; margin: 0 0 8px; font-size: 13px; font-weight: 700; }
label { margin-bottom: 18px; }
.field-label { margin-top: 20px; }
.field-optional { margin-left: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }
.service-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 108px;
  padding: 16px 16px 15px;
  border: 1px solid #ead9e1;
  border-radius: 19px;
  background: linear-gradient(145deg, #fffdfd, #fbf2f6);
  box-shadow: 0 5px 15px #8749630d;
  color: var(--ink);
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.service-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px #8749631c; }
.service-card.selected { border-color: var(--rose-deep); background: linear-gradient(145deg, #985b76, #79405d); box-shadow: 0 9px 20px #87496335; color: white; }
.service-name { position: relative; z-index: 1; font: 600 17px/1.2 Georgia, 'Times New Roman', serif; }
.service-meta { position: relative; z-index: 1; display: block; margin-top: 10px; opacity: .82; font-size: 12px; font-weight: 650; }
.nail-choice-section { margin: 0 0 20px; }
.nail-choice-section .field-label { margin: 0 0 10px; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.choice-button { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 50px; padding: 10px 12px 10px 15px; border: 1px solid #e9d9e1; border-radius: 15px; background: linear-gradient(145deg, #fffdfc, #faf1f5); color: #634b58; text-align: left; font-size: 13px; font-weight: 700; transition: transform .15s ease, background .15s ease; }
.choice-button:hover { transform: translateY(-1px); background: #f9e9ef; }
.choice-button.selected { border-color: var(--rose-deep); background: var(--rose-deep); color: white; }
.choice-button span { display: grid; flex: none; place-items: center; width: 19px; height: 19px; border: 1px solid #d9bfc9; border-radius: 50%; color: transparent; font-size: 12px; }
.choice-button.selected span { border-color: #ffffff69; background: #ffffff2d; color: white; }
.contact-box { margin-top: 22px; padding: 16px; border: 1px solid #e9d6df; border-radius: 17px; background: #fcf5f8; }
.contact-box .field-label { margin: 0; }
.contact-box .hint { margin: 5px 0 12px; }
.contact-box label { margin-bottom: 0; }
input, select, textarea, button { font: inherit; }
input:not([type=hidden]), select, textarea { display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; background: #fff; color: var(--ink); outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--rose); box-shadow: 0 0 0 3px #ad6c8529; }
textarea { resize: vertical; }
input[type=file] { padding: 10px; font-size: 12px; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:focus-visible { outline: 3px solid #ad6c8580; outline-offset: 2px; }
.optional { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.divider { height: 1px; margin: 24px 0; background: var(--line); }
.hint { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.primary-button, .secondary-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 49px; padding: 12px 20px; border: 0; border-radius: 14px; font-weight: 750; }
.primary-button { margin-top: 25px; background: var(--rose-deep); color: #fff; box-shadow: 0 8px 20px #87496335; }
.primary-button:hover:not(:disabled) { background: #723951; }
.primary-button span { font-size: 20px; line-height: 1; }
.secondary-button { background: var(--rose-wash); color: var(--rose-deep); }
.secondary-button:hover { background: #f2dce5; }
.calendar { padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: #fffbfc; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.calendar-head strong { font-size: 16px; font-weight: 750; text-transform: capitalize; }
.calendar-arrow { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px; background: #f5edf1; color: var(--rose-deep); font-size: 25px; line-height: 1; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.weekday { padding: 5px 0; color: var(--muted); text-align: center; font-size: 11px; font-weight: 750; }
.calendar-day { position: relative; display: grid; place-items: center; height: 48px; padding: 0 0 4px; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--ink); font-size: 13px; }
.calendar-day:hover:not(:disabled):not(.selected) { border-color: #e4c5d1; background: var(--rose-wash); }
.calendar-day.has-slots { background: #f7eaf0; color: var(--rose-deep); font-weight: 800; }
.calendar-day.selected { background: var(--rose-deep); color: #fff; }
.calendar-day:disabled { color: #c8b9c0; opacity: 1; }
.calendar-day.has-slots:disabled { background: transparent; }
.day-dot { position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.time-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.time-choice { padding: 10px 5px; border: 1px solid #e6ccd6; border-radius: 12px; background: #fffafc; color: var(--rose-deep); font-weight: 750; }
.time-choice.selected { border-color: var(--rose-deep); background: var(--rose-deep); color: white; }
.stack { display: grid; gap: 10px; }
.stack > p { margin: 0; color: var(--muted); }
.item { padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: #fffbfc; }
.item p { margin: 0 0 6px; }
.item p:last-child { margin-bottom: 0; }
.item button { margin: 8px 8px 0 0; padding: 7px 11px; border: 1px solid #e8d2dc; border-radius: 9px; background: #fff; color: var(--rose-deep); font-size: 12px; font-weight: 700; }
.contact-line { color: #6b5260; font-size: 13px; }
.contact-line a { color: var(--rose-deep); font-weight: 750; text-decoration: underline; text-underline-offset: 2px; }
.reply-form { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.reply-form textarea { margin: 0 0 9px; }
.reply-form .secondary-button { margin: 0; padding: 9px 12px; background: var(--rose-wash); }
.owner-panel { background: #fffdfa; }
.owner-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.owner-stats { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.owner-stats span { padding: 6px 10px; border-radius: 999px; background: #f7edf1; color: var(--rose-deep); font-size: 11px; font-weight: 750; white-space: nowrap; }
.owner-tabs { position: sticky; top: 8px; z-index: 10; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin: 0 0 22px; padding: 6px; border: 1px solid #eadde3; border-radius: 17px; background: #fffafc; box-shadow: 0 8px 22px #87496314; }
.owner-tabs button { min-width: 0; min-height: 42px; padding: 8px 5px; border: 0; border-radius: 12px; background: transparent; color: #795f6d; font-size: 13px; font-weight: 750; }
.owner-tabs button.selected { background: var(--rose-deep); color: #fff; box-shadow: 0 4px 12px #8749632e; }
.tab-short { display: none; }
.owner-pane > h3:first-child, .pane-heading h3 { margin-top: 0; }
.owner-pane > .hint:first-of-type { margin: 0 0 13px; }
.owner-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.owner-editor { min-width: 0; border: 1px solid #ead7e0; border-radius: 15px; background: #fffafb; }
.owner-editor[open] { grid-column: 1 / -1; }
.owner-editor summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 49px; padding: 12px 15px; color: var(--rose-deep); cursor: pointer; font-size: 13px; font-weight: 750; list-style: none; }
.owner-editor summary::-webkit-details-marker { display: none; }
.owner-editor summary::after { content: '+'; flex: none; font-size: 22px; font-weight: 400; line-height: 1; }
.owner-editor[open] summary::after { content: '−'; }
.owner-editor .subform { padding: 2px 15px 15px; border: 0; border-radius: 0; background: transparent; }
.owner-editor .subform .hint { margin: 0 0 12px; }
.owner-editor .secondary-button { min-height: 44px; }
.pane-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.pane-heading h3 { margin-bottom: 0; }
.text-button { padding: 5px 0; border: 0; background: transparent; color: var(--rose-deep); font-size: 12px; font-weight: 750; text-align: right; }
.booking-day { margin: 14px 0 0; color: var(--muted); font-size: 12px; font-weight: 800; }
.booking-card-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.booking-card-head strong { font-size: 15px; }
.booking-id { flex: none; color: var(--muted); font-size: 12px; }
.booking-card.cancelled { opacity: .65; }
.booking-more { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.booking-more summary { color: var(--rose-deep); cursor: pointer; font-size: 12px; font-weight: 750; }
.booking-more > p { margin-top: 9px; font-size: 12px; }
.booking-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.booking-actions button { margin: 0; }
.booking-edit-form { margin-top: 12px; }
.booking-edit-form .time-options { margin-bottom: 12px; }
.booking-edit-form .time-options > p { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.booking-edit-form .secondary-button { width: 100%; margin: 0; padding: 11px 14px; }
.client-search-label { margin-bottom: 15px; }
.client-note-mark { color: var(--rose-deep); font-size: 11px; font-weight: 750; }
.client-detail { display: grid; gap: 12px; }
.client-detail > h4 { margin: 10px 0 0; font: 600 19px Georgia, 'Times New Roman', serif; }
.client-detail > button { justify-self: start; padding: 8px 12px; border: 1px solid #e8d2dc; border-radius: 10px; background: #fff; color: var(--rose-deep); font-size: 12px; font-weight: 750; }
.client-detail .subform { margin: 0; }
.client-detail .subform label { margin-bottom: 12px; }
.client-detail .secondary-button { width: 100%; }
.conversation { display: grid; gap: 9px; max-height: 380px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff9fb; }
.conversation > p { margin: 0; color: var(--muted); font-size: 12px; }
.message-bubble { max-width: 88%; padding: 10px 12px; border: 1px solid #e9d7df; border-radius: 14px; background: white; }
.message-bubble.master { justify-self: end; background: #f8e9ee; }
.message-bubble small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 10px; }
.message-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
#owner-pane-services .owner-editor { margin-top: 16px; }
.owner-service-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.owner-service-head strong { font-size: 14px; }
.service-price { flex: none; max-width: 45%; color: var(--rose-deep); font-size: 13px; font-weight: 750; overflow-wrap: anywhere; text-align: right; }
.owner-service .service-status { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.owner-service.inactive { opacity: .7; }
.owner-service-actions { display: flex; gap: 8px; }
.owner-service-actions button { margin: 10px 0 0; }
.service-edit-form { margin-top: 12px; }
.service-edit-form .secondary-button { width: 100%; min-height: 44px; margin: 0; padding: 10px 14px; border: 0; border-radius: 12px; background: var(--rose-wash); }
.subform { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fffbfc; }
.subform label { margin-bottom: 14px; }
.selected-date { margin: 15px 0 12px; font-weight: 750; }
#message:empty { display: none; }
#message:not(:empty) { margin: 16px 0; padding: 12px 15px; border: 1px solid #d8bfca; border-radius: 12px; background: #fff8fb; color: var(--rose-deep); }
#message.error { border-color: #e5b4b9; background: #fff3f2; color: #ac4453; }
.owner-mode #message:not(:empty) { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; z-index: 50; width: min(500px, calc(100vw - 24px)); margin: 0; box-shadow: 0 12px 30px #8749632b; transform: translateX(-50%); }
#demo-nav { margin: 16px 0; color: var(--muted); font-size: 12px; }
#demo-nav a { color: var(--rose-deep); }
footer { padding: 27px 3px 0; color: #9b8791; text-align: center; font-size: 11px; letter-spacing: .04em; }
footer span { margin: 0 6px; color: var(--rose); }
.owner-mode footer { display: none; }
[hidden] { display: none !important; }
@media (max-width: 500px) {
  main { padding: 10px 10px 34px; }
  .owner-mode main { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
  .hero { min-height: 250px; padding: 22px 21px; border-radius: 23px; }
  .owner-header { padding: 12px 16px; }
  .hero .eyebrow { margin-top: 34px; }
  .hero-orbit { right: -105px; top: 45px; }
  .panel { padding: 21px 18px 23px; border-radius: 21px; }
  .owner-intro { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
  .owner-stats { justify-content: flex-start; }
  .owner-tabs { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 40; gap: 4px; margin: 0; padding: 8px 10px max(8px, env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; box-shadow: 0 -7px 24px #5d3c4b21; }
  .owner-tabs button { min-height: 45px; padding: 8px 2px; font-size: 11px; }
  .tab-full { display: none; }
  .tab-short { display: inline; }
  .owner-actions { grid-template-columns: 1fr; }
  .owner-editor[open] { grid-column: auto; }
  .section-heading { margin-bottom: 21px; }
  .time-options { grid-template-columns: repeat(3, 1fr); }
  .calendar { padding: 10px; }
  .calendar-grid { gap: 2px; }
  .calendar-day { height: 38px; }
  .two-fields { gap: 9px; }
  .service-options { gap: 8px; }
  .service-card { min-height: 116px; padding: 14px 13px 13px; border-radius: 16px; }
  .service-name { font-size: 15px; }
  .service-meta { font-size: 11px; }
}
@media (max-width: 360px) {
  .two-fields { grid-template-columns: 1fr; }
  .service-options { grid-template-columns: 1fr; }
  .service-card { min-height: 78px; }
}

/* Editorial palette and layout inspired by the supplied burgundy size guide and price sheets. */
:root {
  --paper: #f1efed;
  --card: #f8f7f5;
  --ink: #302b2c;
  --muted: #736a6b;
  --line: #d9ccca;
  --rose: #8f3b4e;
  --rose-deep: #681326;
  --rose-wash: #eee2e3;
  --lilac: #eee9e7;
  --shadow: none;
}
body { background: var(--paper); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; }
main { max-width: 720px; padding: 0 0 44px; background: var(--card); }
.hero { min-height: 300px; padding: 25px 35px 38px; border: 0; border-radius: 0 0 26px 26px; background: radial-gradient(circle at 55% 80%, #8f2639 0, #70182c 47%, #340a16 100%); box-shadow: none; color: #faf4ee; }
.brand { color: inherit; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 600; }
.brand-mark { width: 30px; height: 30px; border: 1px solid currentColor; background: transparent; color: inherit; font: italic 27px/1 Georgia, serif; text-transform: lowercase; }
.hero .eyebrow { margin-top: 57px; color: #efd3d4; }
.hero h1 { max-width: 560px; font: 400 clamp(42px, 7vw, 64px)/.99 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; }
.hero h1 span { margin-top: 5px; color: #e5bdc4; font-weight: 400; }
.hero-copy { max-width: 410px; margin-top: 20px; color: #f1dfe0; font-size: 14px; }
.hero-orbit { right: 17px; top: 39px; width: 155px; height: 155px; border-color: #cf8c9860; color: #d7a1aa; font-size: 54px; opacity: .35; }
.eyebrow { color: var(--rose-deep); font-size: 10px; letter-spacing: .21em; }
.panel { margin-top: 0; padding: 35px 35px 42px; border: 0; border-radius: 0; background: var(--card); box-shadow: none; }
.section-heading { gap: 14px; margin-bottom: 25px; }
.step { width: 37px; height: 37px; border: 1px solid #b88993; border-radius: 50%; background: transparent; color: var(--rose-deep); font: 15px Georgia, serif; }
h2 { font: 400 34px/1.08 Georgia, 'Times New Roman', serif; }
h3 { font: 400 22px/1.15 Georgia, 'Times New Roman', serif; }
.field-label { margin: 22px 0 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.field-optional { text-transform: none; letter-spacing: 0; }
.address-panel { margin: 0; padding: 18px 35px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--card); box-shadow: none; }
.address-icon { background: transparent; border: 1px solid #b9949b; color: var(--rose-deep); }
.owner-header { padding: 18px 35px; border: 0; border-radius: 0; background: #531021; box-shadow: none; color: #fff8f3; }
.owner-header-label { color: #ead0d4; }
.owner-panel { background: var(--card); }
.owner-stats span { border: 1px solid #ddc6c9; background: #f3eded; }
#demo-nav { padding: 0 35px; }

.length-guide { position: relative; overflow: hidden; margin: 0 0 34px; padding: 25px 24px 0; border-radius: 20px; background: radial-gradient(circle at 46% 57%, #9a2f43 0, #6c172c 52%, #3e0b1a 100%); color: #f8efe9; }
.length-guide-title { position: relative; z-index: 2; text-align: center; }
.handwritten { display: block; font: italic 72px/.85 Georgia, 'Times New Roman', serif; letter-spacing: -.1em; transform: rotate(-9deg); }
.length-guide-title p { max-width: 250px; margin: 20px auto 6px; color: #ecd3d2; font-size: 10px; line-height: 1.45; letter-spacing: .07em; text-transform: uppercase; }
.length-figure { position: relative; height: 390px; max-width: 430px; margin: auto; overflow: hidden; }
.length-figure img { position: absolute; top: -10px; left: -31px; display: block; width: 340px; max-width: none; height: auto; pointer-events: none; }
.guide-mark { position: absolute; top: var(--mark); right: 10px; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: 10px; width: 72%; padding: 5px 0; border: 0; background: transparent; color: #f3e3df; font: 17px Georgia, serif; text-align: right; }
.guide-line { display: block; flex: 1; height: 1px; background: #f1d8d399; }
.guide-mark span:last-child { width: 35px; text-align: left; }
.guide-mark:hover, .guide-mark.selected { color: #fff; font-weight: 700; }
.guide-mark.selected .guide-line { height: 2px; background: #fff; }
.guide-mark.selected span:last-child { text-decoration: underline; text-underline-offset: 5px; }
.length-guide-foot { position: relative; z-index: 2; margin: 0 -24px; padding: 11px 20px 15px; border-top: 1px solid #f3d7d349; color: #f3dedd; text-align: center; font-size: 10px; }

.price-sign { display: flex; align-items: baseline; justify-content: center; gap: 9px; padding: 11px 0 20px; color: var(--rose-deep); }
.price-sign span { font-size: 13px; letter-spacing: .06em; }
.price-sign em { font: italic 47px/.9 Georgia, 'Times New Roman', serif; letter-spacing: -.08em; }
.catalog-label { margin-top: 0; }
.service-options { display: grid; grid-template-columns: 1fr; gap: 0; }
.catalog-category { margin: 20px 0 5px; padding: 0 0 0 12px; border-left: 1px solid var(--rose); font: 400 15px/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.service-card { display: grid; grid-template-columns: 110px minmax(0,1fr); align-items: start; gap: 15px; min-height: 0; padding: 15px 10px 15px 0; border: 0; border-bottom: 1px solid #ded5d3; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); text-align: left; transform: none; }
.service-card:hover { background: #f2eceb; box-shadow: none; transform: none; }
.service-card.selected { border-color: #b68890; border-radius: 0; background: #eadbdd; box-shadow: none; color: var(--ink); }
.service-price { color: var(--rose-deep); font-size: 16px; font-weight: 500; white-space: nowrap; }
.service-copy { display: grid; gap: 5px; min-width: 0; padding-left: 14px; border-left: 1px solid #b6858e; }
.service-name { font: 700 14px/1.3 -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.service-description { color: #625c5b; font-size: 11px; line-height: 1.45; text-transform: uppercase; }
.design-extras { margin-top: 38px; }
.design-extras h3 { margin: 3px 0 9px; font-size: 30px; }
.design-notice { margin: 0 0 16px; color: var(--rose-deep); font-size: 11px; }
.design-options { border-top: 1px solid var(--line); }
.addon-option { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 15px; width: 100%; padding: 12px 10px 12px 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font-size: 13px; }
.addon-option:hover { background: #f2eceb; }
.addon-option.selected { background: #eadbdd; color: var(--rose-deep); font-weight: 700; }
.addon-price { color: var(--rose-deep); white-space: nowrap; }
.addon-option small { display: block; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.booking-flow-heading { margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.booking-flow-heading h3 { margin: 0 0 20px; font-size: 30px; }
.booking-flow-heading .eyebrow { margin-bottom: 4px; }

.calendar { border-radius: 13px; background: #f7f5f3; }
.calendar-day { border-radius: 9px; }
.calendar-day.has-slots { background: #eee2e3; }
.calendar-day.selected, .time-choice.selected, .choice-button.selected { background: var(--rose-deep); color: #fff; }
.time-choice, .choice-button { border-radius: 11px; background: #faf8f6; }
.divider { background: var(--line); }
.nail-choice-section .field-label { margin-top: 20px; }
.contact-box { border-color: var(--line); background: #f3eeed; }
input:not([type=hidden]), select, textarea { border-radius: 9px; background: #fffefa; }
.primary-button { border-radius: 10px; background: var(--rose-deep); box-shadow: none; }
.secondary-button { border-radius: 10px; background: #eadbdd; }
.item { border-radius: 11px; background: #f8f6f4; }
.owner-tabs { border-color: #dfcecf; border-radius: 12px; background: #f3eeed; box-shadow: none; }
.owner-tabs button { border-radius: 8px; }
.owner-tabs button.selected { background: var(--rose-deep); box-shadow: none; }
.owner-editor { border-color: var(--line); border-radius: 10px; background: #f8f5f3; }
.owner-editor summary { color: var(--rose-deep); }
.subform { border-radius: 10px; background: #f7f4f2; }
.owner-service .service-price { max-width: 45%; font-size: 13px; white-space: normal; }
.owner-service .service-description-owner { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.owner-service.inactive { opacity: .58; }
.archived-services-list { padding: 0 13px 13px; }
.conversation { background: #f4efed; }
.message-bubble.master { background: #eadbdd; }
footer { padding: 30px 20px 0; text-transform: uppercase; letter-spacing: .18em; }

@media (max-width: 500px) {
  main { padding: 0 0 22px; }
  .owner-mode main { padding-bottom: calc(91px + env(safe-area-inset-bottom)); }
  .hero { min-height: 288px; padding: 20px 23px 30px; border-radius: 0 0 20px 20px; }
  .hero .eyebrow { margin-top: 51px; }
  .hero-orbit { right: -35px; }
  .panel { padding: 30px 22px 35px; border-radius: 0; }
  .address-panel { padding: 16px 22px; }
  .owner-header { padding: 16px 22px; }
  #demo-nav { padding: 0 22px; }
  .length-guide { margin-left: -7px; margin-right: -7px; padding: 22px 12px 0; border-radius: 14px; }
  .length-guide-foot { margin: 0 -12px; }
  .length-figure { height: 350px; }
  .length-figure img { left: -55px; width: 310px; }
  .guide-mark { right: 2px; width: 65%; }
  .service-card, .addon-option { grid-template-columns: 88px minmax(0,1fr); gap: 10px; }
  .service-price, .addon-price { font-size: 14px; }
  .service-name { font-size: 12px; }
  .service-description { font-size: 10px; }
  .owner-tabs { border-radius: 14px 14px 0 0; }
}
@media (max-width: 360px) {
  .service-options { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
  .length-figure img { left: -72px; }
}