/* Hallmark · shape: Product-led · genre: modern-minimal · theme: Custom dark booking pass (by user request) · job: book
 * signature: professionals at work and an editable test workspace · fonts: Manrope · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 · focus: make booking visible immediately */
body { color-scheme: dark; }
h1,h2,h3 { font-weight:700; letter-spacing:var(--tracking-display); }
h1 { font-size:clamp(40px,5.2vw,72px); line-height:1.08; }
h2 { font-size:clamp(30px,3.4vw,48px); line-height:1.14; }
h3 { font-size:22px; line-height:1.25; letter-spacing:-.02em; }
button,input,select,textarea { color:var(--color-ink); }
input::placeholder,textarea::placeholder { color:var(--color-muted); opacity:1; }
.site-header { min-height:100px; border-bottom:1px solid var(--color-rule); }
.wordmark { font-weight:700; letter-spacing:-.05em; }
.wordmark svg { color:var(--color-accent); }
.brand-period { color:var(--color-accent); }
.main-nav a,.login-link { font-size:14px; }
.main-nav a:hover,.login-link:hover,.text-link:hover { color:var(--color-accent); }
.button,.button-paper { background:var(--color-accent); color:var(--color-accent-ink); border-color:var(--color-transparent); font-weight:600; border-radius:var(--radius-control); min-height:48px; }
.button:hover,.button-paper:hover { background:var(--color-accent-hover); color:var(--color-accent-ink); }
.button-outline { background:var(--color-transparent); color:var(--color-ink); border-color:var(--color-card-edge); }
.button-outline:hover { background:var(--color-paper-3); color:var(--color-ink); }
.button-small { min-height:44px; }
.button-danger { background:var(--color-error); color:var(--color-dark); }
.button-danger:hover { background:var(--color-error-paper); color:var(--color-error); }
button:disabled,.button:disabled { background:var(--color-paper-3); color:var(--color-muted); border-color:var(--color-rule); }
.booking-hero { padding-top:var(--space-2xl); padding-bottom:var(--space-32); }
.booking-hero-layout { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); align-items:center; gap:var(--space-2xl); }
.hero-service-visual { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); grid-template-rows:repeat(2,minmax(0,1fr)); gap:var(--space-sm); height:440px; overflow:clip; border-radius:var(--radius-card); }
.hero-service-visual img { width:100%; height:100%; object-fit:cover; min-width:0; min-height:0; }
.hero-service-visual .hero-work-main { grid-row:1/3; object-position:50% 42%; }
.hero-service-visual .hero-work-beauty { object-position:50% 45%; }
.hero-service-visual .hero-work-tech { object-position:50% 45%; }
.demo-client-notice { margin-top:var(--space-28); }
.demo-client-notice .text-link { margin-left:var(--space-sm); }
.demo-workspace-banner { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-md); padding:var(--space-20) var(--space-lg); background:var(--color-paper-3); border-radius:var(--radius-card); margin-top:var(--space-28); }
.demo-workspace-banner strong { display:block; color:var(--color-accent); font-size:16px; font-weight:600; }
.demo-workspace-banner p { margin-top:var(--space-2xs); font-size:13px; color:var(--color-muted); }
.demo-workspace-banner .form-actions { margin-top:0; }
.booking-hero-copy { min-width:0; }
.booking-hero h1 { max-width:14ch; }
.booking-hero-copy>p { max-width:43ch; font-size:17px; line-height:1.7; color:var(--color-muted); margin-top:var(--space-lg); }
.booking-hero .hero-actions { gap:var(--space-lg); margin-top:var(--space-32); flex-wrap:wrap; }
.hero-directions { display:flex; flex-wrap:wrap; gap:var(--space-xs) var(--space-20); margin-top:var(--space-xl); font-size:12px; color:var(--color-muted); }
.hero-directions a { padding-block:var(--space-xs); }
.hero-directions a:hover { color:var(--color-ink); text-decoration:underline; }
.booking-preview { min-width:0; padding:var(--space-28); background:var(--color-paper-2); border-radius:var(--radius-card); }
.preview-top { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); padding-bottom:var(--space-lg); font-size:14px; }
.preview-top strong { font-weight:600; }
.preview-top .badge { background:var(--color-paper-3); color:var(--color-muted); }
.preview-modes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-2xs); padding:var(--space-2xs); background:var(--color-dark); border-radius:var(--radius-control); }
.preview-modes button { min-height:44px; border:0; border-radius:var(--radius-pill); color:var(--color-muted); background:var(--color-transparent); font-size:12px; }
.preview-modes button[aria-pressed=true] { background:var(--color-paper-3); color:var(--color-ink); }
.preview-date { display:flex; align-items:center; justify-content:space-between; margin-top:var(--space-28); color:var(--color-ink-2); font-size:13px; }
.preview-date svg { width:18px; height:18px; color:var(--color-muted); }
.preview-slots { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xs); margin-top:var(--space-md); min-height:96px; }
.preview-slots button { min-height:44px; padding:var(--space-xs); border:1px solid var(--color-input-edge); border-radius:var(--radius-control); background:var(--color-transparent); color:var(--color-ink-2); font-size:13px; font-variant-numeric:tabular-nums; }
.preview-slots button:hover { background:var(--color-paper-3); }
.preview-slots button[aria-pressed=true] { background:var(--color-accent); border-color:var(--color-accent); color:var(--color-accent-ink); font-weight:600; }
.preview-selection { margin-top:var(--space-lg); padding-top:var(--space-20); border-top:1px solid var(--color-rule); display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--space-xs) var(--space-md); }
.preview-selection>span:first-child { color:var(--color-muted); font-size:12px; }
.preview-selection strong { font-size:32px; font-weight:600; letter-spacing:-.03em; line-height:1.1; grid-column:2; grid-row:1/3; font-variant-numeric:tabular-nums; }
.preview-selection>span:last-child { color:var(--color-ink-2); font-size:11px; }
.preview-link { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); border-top:1px solid var(--color-rule); padding-top:var(--space-20); margin-top:var(--space-20); font-size:12px; color:var(--color-muted); }
.preview-link:hover { color:var(--color-accent); }
.preview-link svg { width:18px; height:18px; }
.preview-queue-explainer { grid-column:1/-1; font-size:14px; line-height:1.7; color:var(--color-ink-2); margin-block:var(--space-xs); }
.booking-hero .search-bar { margin:var(--space-48) 0 0; padding:var(--space-sm); background:var(--color-paper-2); box-shadow:none; border-radius:var(--radius-card); }
.booking-hero .search-bar>label { padding:var(--space-2xs) var(--space-sm); gap:var(--space-sm); }
.booking-hero .search-bar input { background:var(--color-transparent); border:1px solid var(--color-input-edge); border-radius:var(--radius-control); min-height:44px; padding:var(--space-xs); font-size:14px; }
.booking-hero .search-bar>label>svg { color:var(--color-muted); width:20px; height:20px; }
.section { padding-block:var(--space-80); }
.section-head { align-items:flex-start; gap:var(--space-32); }
.section-head>p { max-width:43ch; padding-top:var(--space-xs); font-size:15px; }
.category-chips { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 var(--space-32); margin:var(--space-xl) 0 0; }
.category-chips .chip { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-md); min-height:80px; border:0; border-bottom:1px solid var(--color-rule); border-radius:0; padding:var(--space-20) 0; font-size:15px; font-weight:500; color:var(--color-ink-2); background:var(--color-transparent); }
.category-chips .chip svg { color:var(--color-muted); width:24px; height:24px; }
.category-chips .chip:hover { background:var(--color-transparent); color:var(--color-accent); }
.category-chips .chip:hover svg { color:var(--color-accent); }
.business-section { padding-block:var(--space-80); border-block:1px solid var(--color-rule); }
.business-intro { grid-template-columns:minmax(0,1fr) minmax(0,.8fr); gap:var(--space-2xl); }
.business-intro h2 { max-width:19ch; }
.business-intro p { max-width:44ch; }
.demo-toolbar { color:var(--color-ink-2); }
.demo-schedule .badge { color:var(--color-ink-2); background:var(--color-paper-3); }
.demo-schedule .is-current .badge { color:var(--color-accent-ink); background:var(--color-accent); }
.queue-number,.schedule-time,.ticket-number { font-family:var(--font-body); font-variant-numeric:tabular-nums; font-weight:600; }
.queue-demo .queue-number { color:var(--color-accent); font-size:52px; }
.queue-demo h3 { font-size:22px; font-weight:600; }
.queue-demo p { max-width:44ch; }
.how-grid { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-2xl); }
.how-list h3 { font-size:21px; font-weight:600; }
.how-list p { max-width:60ch; }
.how-list li::before { color:var(--color-muted); font-family:var(--font-body); font-size:14px; font-weight:500; }
.faq-list summary { font-size:16px; }
.faq-list p { font-size:14px; max-width:68ch; }
.footer-top .wordmark { font-size:42px; }
.site-footer { padding-top:var(--space-2xl); }
.page-head h1 { font-size:clamp(36px,4vw,56px); max-width:22ch; }
.page-head>p { max-width:60ch; }
.field input,.field select,.field textarea { border-color:var(--color-input-edge); background:var(--color-paper-2); color:var(--color-ink); }
.field input:hover,.field select:hover,.field textarea:hover { border-color:var(--color-muted); }
.badge-active { background:var(--color-accent); color:var(--color-accent-ink); }
.badge-success { color:var(--color-success); }
.empty-state h2 { font-size:clamp(28px,3.5vw,42px); }
.company-entry { padding:var(--space-lg); background:var(--color-paper-2); border:0; border-radius:var(--radius-card); }
.company-entry .entry-symbol { display:flex; align-items:center; justify-content:flex-start; gap:var(--space-sm); aspect-ratio:auto; min-height:56px; background:var(--color-transparent); border-radius:0; color:var(--color-muted); font-size:12px; }
.entry-symbol svg { color:var(--color-accent); width:24px; height:24px; }
.company-entry h3 { font-size:24px; font-weight:600; margin-top:var(--space-lg); }
.company-entry:hover { background:var(--color-paper-3); }
.auth-art { display:flex; flex-direction:column; justify-content:space-between; min-height:620px; background:var(--color-dark); padding:var(--space-xl); }
.auth-art>div { position:static; padding:0; }
.auth-art h1 { color:var(--color-ink); font-size:40px; line-height:1.15; max-width:18ch; }
.auth-art p { max-width:40ch; }
.auth-pass { display:flex; flex-direction:column; gap:var(--space-md); }
.auth-pass>span:first-child { color:var(--color-accent); font-size:24px; font-weight:700; }
.auth-pass>strong { color:var(--color-ink); font-size:76px; letter-spacing:-.04em; font-variant-numeric:tabular-nums; line-height:1.2; }
.auth-pass>span:last-child { color:var(--color-muted); font-size:13px; }
.auth-form>h2 { font-size:32px; }
.booking-panel>h2 { font-size:28px; }
.company-about h3 { font-size:22px; font-weight:600; }
.booking-success h1 { max-width:20ch; font-size:clamp(36px,4.5vw,56px); }
.success-mark { background:var(--color-accent); color:var(--color-accent-ink); }
.legal h1 { font-size:clamp(36px,4vw,56px); }
.legal h2 { font-size:26px; }
.booking-ticket { background:var(--color-paper-2); }
.toast { background:var(--color-accent); color:var(--color-accent-ink); }
.site-footer .footer-bottom { color:var(--color-muted); }
@media(max-width:1100px) {
  .site-header { min-height:88px; }
  .booking-hero-layout { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--space-32); }
  .booking-hero h1 { font-size:56px; }
  .booking-hero .hero-actions { gap:var(--space-md); }
  .booking-preview { padding:var(--space-lg); }
  .hero-service-visual { height:400px; }
  .hero-directions { gap:var(--space-2xs) var(--space-md); margin-top:var(--space-lg); }
  .business-intro { gap:var(--space-xl); }
}
@media(max-width:760px) {
  .site-header { min-height:76px; }
  .booking-hero { padding-top:var(--space-xl); }
  .booking-hero-layout { grid-template-columns:minmax(0,1fr); gap:var(--space-xl); }
  .booking-hero h1 { font-size:clamp(38px,8.8vw,60px); max-width:15ch; }
  .booking-hero-copy>p { margin-top:var(--space-20); font-size:15px; max-width:40ch; }
  .booking-hero .hero-actions { margin-top:var(--space-lg); gap:var(--space-20); }
  .hero-directions { margin-top:var(--space-20); font-size:11px; }
  .booking-preview { padding:var(--space-lg); }
  .hero-service-visual { height:310px; gap:var(--space-xs); }
  .demo-workspace-banner { padding:var(--space-md); align-items:flex-start; }
  .demo-client-notice .text-link { display:block; margin-left:0; margin-top:var(--space-xs); }
  .preview-selection strong { font-size:28px; }
  .booking-hero .search-bar { margin-top:var(--space-lg); grid-template-columns:minmax(0,1fr); gap:var(--space-xs); padding:var(--space-sm); }
  .booking-hero .search-bar>label+label { border-left:0; border-top:1px solid var(--color-rule); }
  .booking-hero .search-bar .button { width:100%; }
  .section { padding-block:var(--space-56); }
  .section-head { flex-direction:column; gap:var(--space-20); }
  .section-head h2 { font-size:32px; }
  .section-head>p { max-width:42ch; padding-top:0; }
  .category-chips { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 var(--space-20); margin-top:var(--space-lg); }
  .category-chips .chip { min-height:76px; gap:var(--space-sm); font-size:13px; }
  .category-chips .chip svg { width:20px; height:20px; }
  .business-section { padding-block:var(--space-56); }
  .business-intro { grid-template-columns:minmax(0,1fr); gap:var(--space-lg); }
  .business-intro h2 { font-size:32px; }
  .demo-schedule { margin-top:var(--space-xl); }
  .queue-demo .queue-number { font-size:48px; }
  .how-grid { grid-template-columns:minmax(0,1fr); gap:var(--space-32); }
  .how-grid>h2 { font-size:32px; }
  .how-list h3 { font-size:19px; }
  .faq-list summary { font-size:15px; }
  .auth-art { position:static; top:auto; min-height:0; padding:var(--space-lg); gap:var(--space-32); }
  .auth-pass>strong { font-size:52px; }
  .auth-art h1 { font-size:28px; }
  .auth-pass { display:none; }
  .auth-form>h2 { font-size:28px; }
  .page-head h1 { font-size:36px; }
  .company-entry { padding:var(--space-20); }
  .booking-panel>h2 { font-size:25px; }
  .footer-top .wordmark { font-size:36px; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}
.button:active,.preview-slots button:active,.preview-modes button:active { transform:translateY(1px); }