/* Luma — clean monochrome presentation theme, inspired by the supplied reference. */
:root {
  --cream: #ffffff;
  --paper: #ffffff;
  --forest: #1b1b1b;
  --forest2: #343434;
  --sage: #686868;
  --mint: #f5f5f5;
  --mintDeep: #e3e3e3;
  --blush: #ededed;
  --blushLight: #f8f8f8;
  --sand: #ededed;
  --text: #1c1c1c;
  --body: #666666;
  --muted: #8a8a8a;
  --line: #e5e5e5;
  --coral: #222222;
  --coralDark: #121212;
}

body { background: #fff; color: var(--text); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 3px solid #606060;
  outline-offset: 3px;
}
.eyebrow, .demo-intro .label { color: #626262; }
.eyebrow::before, .demo-intro .label::before { background: #555; }
.heading, .heading em, .hero h1, .hero h1 .accent, .contact h2, .contact h2 em {
  color: #181818;
}
.heading em, .contact h2 em {
  font: 800 1em/1.1 var(--sans);
  font-style: normal;
  letter-spacing: -.065em;
  background: linear-gradient(to top, #ebebeb 0 20%, transparent 20% 100%);
}
.hero h1 .accent {
  font: 800 1em/1.06 var(--sans);
  font-style: normal;
  letter-spacing: -.08em;
}
.hero h1 .accent::after { display: none; }
.intro, .hero-sub, .hero-note, .result-heading p, .contact-text { color: #646464; }
.hero-sub strong, .result-heading strong, .intro strong, .contact-text strong, .result-card p strong { color: #222; }
.btn, .btn.pink {
  background: #202020;
  color: #fff;
  border: 1px solid #202020;
  box-shadow: 0 9px 23px rgba(0,0,0,.08);
}
.btn:hover, .btn.pink:hover {
  background: #363636;
  border-color: #363636;
  color: #fff;
  box-shadow: 0 11px 25px rgba(0,0,0,.13);
}
.plain-link, .section-next { color: #222; border-color: #c8c8c8; }
.plain-link:hover, .section-next:hover { color: #000; }
.section-next span { background: #f1f1f1; color: #222; }

/* Header and first impression */
.nav { background: rgba(255,255,255,.94); border-bottom: 1px solid #ededed; }
.brand, .menu-btn { color: #151515; }
.brand i { color: #555; }
.nav-links { color: #525252; }
.nav-links a:not(.btn):hover { color: #000; }
.nav-links .btn {
  color: #202020;
  background: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 3px 14px rgba(0,0,0,.035);
}
.nav-links .btn:hover { background: #f7f7f7; color: #111; border-color: #bcbcbc; }
.hero {
  background: radial-gradient(circle, #ececec 0.72px, transparent 0.9px) 0 0 / 19px 19px, #fff;
}
.hero::before { background: transparent; opacity: 0; }
.hero-kicker { background: #f4f4f4; color: #4c4c4c; border: 1px solid #e6e6e6; }
.hero-kicker::before { background: #666; }
.hero-note .spark, .hero-orbit { color: #777; }
.arch { background: #ebebeb; box-shadow: 15px 19px 0 #f1f1f1; }
.arch::after { background: rgba(255,255,255,.11); }
.arch img, .who-image img { filter: grayscale(100%) brightness(1.1) contrast(.92); }
.hero-ui {
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 25px 60px rgba(0,0,0,.12);
}
.mock-top { background: #fafafa; border-color: #ededed; }
.mock-brand { color: #202020; }
.mock-state { color: #666; }
.mock-state::before { color: #595959; }
.mock-caption strong { color: #292929; }
.mock-caption span { color: #838383; }
.mock-appointments { border-color: #e5e5e5; }
.mock-time { background: #fbfbfb; border-color: #eee; color: #858585; }
.mock-slot { color: #464646; border-color: #eee; }
.mock-slot small { color: #777; }
.mock-slot.busy { background: #f6f6f6; }
.mock-slot.empty, .hero-window-trigger {
  background: #ebebeb;
  border-left: 4px solid #626262;
  color: #1d1d1d;
}
.mock-slot.empty small { color: #303030; }
.hero-window-trigger:hover, .hero-window-trigger:focus-visible {
  background: #dedede;
  box-shadow: inset 0 0 0 1px #bdbdbd;
}
.hero-window-trigger:focus-visible { outline-color: #555; }
.mock-notice { background: #f5f5f5; border-color: #e7e7e7; }
.mock-notice b { background: #dfdfdf; color: #333; }
.mock-notice div { color: #333; }
.mock-notice small { color: #777; }
.floating-tag {
  background: #fff;
  color: #333;
  border: 1px solid #e7e7e7;
  box-shadow: 0 11px 26px rgba(0,0,0,.085);
}
.ribbon { background: #f8f8f8; color: #3f3f3f; border-top: 1px solid #eee; border-bottom: 1px solid #eee; }
.ribbon small { color: #7d7d7d; }
.ribbon-track i { color: #818181; }

/* Interactive appointment storyboard */
.demo { background: #f8f8f8; }
.demo-intro .label { color: #3a3a3a; }
.demo-intro .label::before { background: #3d3d3d; box-shadow: 0 0 0 5px rgba(0,0,0,.06); }
.demo-intro .hint {
  background: #fff; color: #5b5b5b; border: 1px solid #e6e6e6;
}
.demo-play { background: #292929; border-color: #292929; color: #fff; }
.demo-play:hover { background: #454545; border-color: #454545; }
.demo-play[aria-pressed=true] { background: #fff; border-color: #d5d5d5; color: #242424; }
.demo-box { background: #fff; border: 1px solid #e5e5e5; box-shadow: 0 20px 60px rgba(0,0,0,.065); }
.stages { background: #f2f2f2; }
.stage { background: #fff; border-color: #e1e1e1; color: #686868; }
.stage:hover { background: #f8f8f8; border-color: #aaa; }
.stage.active { background: #242424; border-color: #242424; color: #fff; }
.stage-num, .stage-arr { color: #8a8a8a; }
.stage.active .stage-num, .stage.active .stage-arr { color: #efefef; }
.demo-progress { background: #e6e6e6; }
.demo-progress span { background: #333; }
.demo-display { background: radial-gradient(circle at 15% 84%, #eaeaea 0, transparent 42%), #fafafa; }
.demo-display::before { color: rgba(0,0,0,.04); }
.app-screen, .demo-toast { background: #fff; border-color: #e4e4e4; box-shadow: 0 15px 35px rgba(0,0,0,.07); }
.demo-toast { color: #3e3e3e; }
.demo-toast::before { background: #ebebeb; color: #333; }
.demo-counter { color: #707070; }
.demo-info h3 { color: #232323; }
.event-feed { border-color: #ebebeb; }
.event-item .bullet { background: #eaeaea; color: #424242; }
.event-item strong { color: #333; }
.event-item small, .demo-note { color: #888; }
.app-btn { background: #222; color: #fff; }
.app-btn:hover { background: #393939; }

/* On-screen CRM prototype */
.proto-topbar { background: #f8f8f8; border-color: #e8e8e8; }
.proto-brand, .proto-salon strong, .proto-choice strong,
.proto-calendar-head strong, .proto-receipt-top strong { color: #242424; }
.proto-monogram { background: #222; color: #fff; }
.proto-context, .proto-caption { color: #858585; }
.proto-body { color: #333; }
.proto-avatar, .proto-avatar.salon-avatar, .proto-avatar.master-avatar {
  background: #eaeaea;
  color: #363636;
}
.proto-salon small, .proto-choice small, .proto-calendar-head small,
.proto-receipt-top small { color: #8d8d8d; }
.proto-online, .proto-selected, .proto-status-tag {
  background: #f1f1f1; border-color: #e6e6e6; color: #4c4c4c;
}
.proto-choice { background: #fcfcfc; border-color: #e8e8e8; }
.proto-choice-check { background: #e7e7e7; color: #383838; }
.proto-date strong { color: #292929; }
.proto-date span { color: #858585; }
.proto-body .time-choices button { background: #fff; border-color: #d9d9d9; color: #4f4f4f; }
.proto-body .time-choices button:hover { border-color: #888; }
.proto-body .time-choices button.selected { background: #272727; color: #fff; border-color: #272727; }
.proto-body .app-btn { background: #242424; color: #fff; }
.proto-body .app-btn:hover { background: #444; }
.proto-calendar-slot { background: #fafafa; border-color: #e5e5e5; }
.proto-calendar-slot b { color: #343434; }
.proto-calendar-slot small { color: #777; }
.proto-calendar-slot.fresh { background: #eaeaea; border-color: #bcbcbc; border-left: 4px solid #444; }
.proto-calendar-slot.vacant { background: #fff; border-color: #d5d5d5; }
.proto-messages span { background: #f5f5f5; color: #505050; }
.proto-alert { background: #f3f3f3; border-color: #dedede; }
.proto-alert-icon { background: #dedede; color: #333; }
.proto-alert strong { color: #292929; }
.proto-alert small { color: #777; }
.proto-free-window { background: #f2f2f2; border: 1px dashed #a9a9a9; }
.proto-free-window small, .proto-free-window strong { color: #393939; }
.proto-free-window > span { background: #dfdfdf; color: #333; }
.proto-actions > div { background: #fbfbfb; color: #515151; border-color: #e6e6e6; }
.proto-actions b { background: #e8e8e8; color: #393939; }
.proto-success > span { background: #ececec; color: #242424; }
.proto-success small { color: #777; }
.proto-success strong { color: #292929; }
.proto-booking-receipt { background: #fbfbfb; border-color: #e3e3e3; }
.proto-receipt-top { border-color: #e5e5e5; }
.proto-receipt-top > span:last-child { color: #333; }
.proto-receipt-line span { color: #888; }
.proto-receipt-line b { color: #333; }
.proto-final-notice { background: #f0f0f0; color: #4b4b4b; }

/* Three-scan rhythm and estimate */
.result { background: #fff; }
.result-title em { color: #161616; background: linear-gradient(to top, #eaeaea 0 20%, transparent 20%); }
.result-side p, .result-card p { color: #777; }
.result-card, .result-card:nth-child(2), .result-card:nth-child(3) {
  background: #fbfbfb; border-color: #e5e5e5;
  box-shadow: 0 9px 23px rgba(0,0,0,.045);
}
.result-card:hover { box-shadow: 0 14px 28px rgba(0,0,0,.085); }
.result-card .number { background: #ededed; color: #444; }
.result-card h3 { color: #242424; }
.contrast { background: #f7f7f7; }
.calculator-copy .heading { color: #1b1b1b; }
.calculator-subtitle { color: #383838; border-color: #dcdcdc; }
.calculator-card {
  background: #fff; border-color: #e0e0e0;
  box-shadow: 0 19px 45px rgba(0,0,0,.075);
}
.calculator-head { color: #262626; }
.calculator-head-icon { background: #efefef; color: #444; }
.calculator-label { color: #505050; }
.calculator-label output { background: #f1f1f1; color: #262626; }
.calculator-field input[type=range] { accent-color: #323232; }
.calculator-field input[type=range]:focus-visible { outline-color: #666; }
.calc-presets > span { color: #777; }
.calc-preset { background: #f8f8f8; color: #616161; border-color: #dedede; }
.calc-preset:hover { background: #eee; border-color: #aaa; }
.calc-preset.active { background: #272727; border-color: #272727; color: #fff; }
.calc-scale { color: #888; }
.calculator-result { background: #f4f4f4; color: #626262; border-color: #e8e8e8; }
.calculator-result strong { color: #141414; }
.calculator-result small, .calculator-disclaimer { color: #777; }
.calculator-metrics span { background: #fff; color: #5d5d5d; }
.calculator-metrics b { color: #252525; }

/* For whom, contact and questions */
.who { background: #fff; }
.who-image { background: #e6e6e6; box-shadow: 0 14px 32px rgba(0,0,0,.065); }
.who-row { border-color: #e8e8e8; }
.who-row .icon { color: #777; }
.who-row strong { color: #282828; }
.who-row p { color: #777; }
.contact { background: #f6f6f6; color: #222; }
.contact::before { border-color: rgba(0,0,0,.075); }
.contact::after { color: rgba(0,0,0,.028); }
.contact .eyebrow { color: #666; }
.contact h2, .contact h2 em { color: #1b1b1b; }
.contact-text, .contact-points { color: #636363; }
.contact-points span::before { color: #444; }
.contact-card {
  background: #fff; color: #262626;
  border: 1px solid #e5e5e5;
  box-shadow: 0 17px 40px rgba(0,0,0,.065);
}
.contact-card h3 { color: #202020; }
.contact-card .form-caption, .form-caveat { color: #7a7a7a; }
.field span { color: #535353; }
.field select, .field input { color: #333; border-color: #dcdcdc; background: #fff; }
.field select:focus, .field input:focus { border-color: #777; box-shadow: 0 0 0 3px rgba(0,0,0,.065); }
.lead-result { background: #f4f4f4; border-color: #dedede; color: #383838; }
.copy-lead { background: #fff; color: #333; border-color: #d1d1d1; }
.faq { background: #fafafa; }
.faq h2 { color: #242424; }
.faq-list, .faq details { border-color: #e3e3e3; }
.faq summary { color: #333; }
.faq summary::after { color: #666; }
.faq details p { color: #777; }
.footer { background: #fff; border-top-color: #ededed; color: #777; }
.footer .brand { color: #1d1d1d; }
.mobile-cta { background: #fff; border-top: 1px solid #e7e7e7; box-shadow: 0 -5px 19px rgba(0,0,0,.055); }
.reading-progress { background: #292929; }

@media (max-width: 800px) {
  .nav-links { background: #fff; border-color: #e7e7e7; }
}
@media (max-width: 530px) {
  .hero { background-size: 18px 18px; }
  .hero h1 { color: #181818; }
  .mock-slot.empty { border-left-width: 3px; }
  .demo-tools .hint { background: #fff; }
  .app-screen { background: #fff; }
  .calculator-result strong { color: #171717; }
  .contact-card { border-radius: 19px; }
  .mobile-cta .btn { color: #fff; }
}