/* The product is the first screen. Every main surface uses the available width. */
:root { --header-height:72px; --page-gutter:clamp(20px,2.4vw,46px); }
html { scroll-padding-top:24px; }
body { overflow-x:clip; }
.site-header, .home-mode .site-header {
  position:relative; inset:auto; height:var(--header-height); padding-inline:var(--page-gutter);
  background:#101214; border-bottom:1px solid #ffffff15; gap:25px; z-index:20;
}
.brand { font-size:15px; letter-spacing:.025em; gap:11px; }
.brand-mark { width:29px; height:29px; }
.main-nav { gap:28px; font-size:11px; }
.main-nav a { display:inline-flex; align-items:center; gap:8px; color:#c6c8c7; }
.main-nav a:hover { color:#fff; }
.main-nav .nav-admin { padding-left:25px; font-size:11px; }
.beta-badge { min-width:65px; padding:7px 12px; font-size:9px; }
.page-width { width:100%; max-width:none; margin-inline:0; padding-inline:var(--page-gutter); }
.home-demo { width:100%; min-width:0; background:#0b0d0e; }
.demo-mode .site-footer { display:none; }
.demo-mode #main, .demo-mode #route { min-height:calc(100svh - var(--header-height)); }
.demo-loading { position:relative; isolation:isolate; min-height:calc(100svh - var(--header-height)); display:flex; align-items:center; padding:7%; }
.demo-loading:after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#080b0ee8,transparent); }
.demo-loading>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.demo-loading h1 { font-size:clamp(52px,6.3vw,116px); letter-spacing:-.065em; margin-block:24px; line-height:1; }
.demo-loading p { max-width:380px; font-size:13px; color:#d7d6cf; }
.demo-load-error { min-height:calc(75svh - var(--header-height)); padding:10vh var(--page-gutter); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:20px; }
.demo-load-error h1 { font-size:clamp(30px,5vw,62px); }
.demo-load-error p { color:var(--muted); }
.demo-catalog { padding-block:64px 36px; border-top:1px solid #ffffff13; }
.section-heading { margin-bottom:28px; }
.section-heading h2, .home-mode .section-heading h2 { font-size:clamp(32px,3.5vw,58px); margin-top:10px; letter-spacing:-.055em; }
.section-heading .eyebrow { font-size:9px; }
.short-entry { gap:10px; min-height:44px; padding:10px 0; color:#cecdc7; }
.short-entry>span { width:30px; height:30px; border:1px solid #ffffff40; border-radius:50%; display:grid; place-items:center; font-size:8px; }
.demo-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.demo-salon-card { min-width:0; position:relative; min-height:370px; height:clamp(320px,30vw,580px); overflow:hidden; display:flex; isolation:isolate; background:#1a1e21; }
.demo-salon-card>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s; z-index:-2; }
.demo-salon-card:after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#070a0b50,transparent 30%,#070a0b25 45%,#070a0bf0); z-index:-1; }
.demo-salon-card:hover>img, .demo-salon-card:focus-visible>img { transform:scale(1.04); }
.demo-card-flag { position:absolute; top:20px; left:22px; font-size:8px; text-transform:uppercase; letter-spacing:.12em; display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid #ffffff40; background:#11141775; backdrop-filter:blur(10px); border-radius:2px; }
.demo-card-flag>i { width:5px; height:5px; background:var(--scene-accent,var(--accent)); border-radius:50%; }
.demo-card-index { position:absolute; right:22px; top:23px; font-size:10px; color:#e8e4dc; letter-spacing:.1em; }
.demo-card-copy { width:100%; margin-top:auto; display:flex; flex-direction:column; padding:27px; gap:13px; }
.demo-card-copy>small { font-size:9px; letter-spacing:.09em; text-transform:uppercase; color:#d3cec4; }
.demo-card-copy>strong { max-width:390px; font-size:clamp(26px,2.7vw,45px); font-weight:450; letter-spacing:-.05em; line-height:1.04; }
.demo-card-copy>span { display:flex; justify-content:space-between; align-items:center; font-size:10px; color:#d3cec4; border-top:1px solid #ffffff28; padding-top:14px; margin-top:5px; }
.demo-card-copy i { font-size:22px; font-style:normal; color:var(--scene-accent,var(--accent)); }
.demo-catalog-note { margin-top:18px; font-size:10px; color:#9d9f9a; letter-spacing:.02em; }
.home-mode .discovery { padding-block:36px 45px; }
.home-mode .room-empty { padding:24px 0; gap:20px; }
.home-mode .room-empty h3 { font-size:20px; }
.home-mode .room-empty p { font-size:12px; max-width:620px; }
.home-mode .room-empty .text-button { padding-inline:15px; }
.home-mode .merchant-strip:empty { display:none; }
.home-mode .merchant-tile { padding-block:12px; }
.home-mode .room-card { min-height:380px; }
.site-footer { padding-block:28px 20px; }
.site-footer small { margin-top:0; }
.admin-content { max-width:none; padding:34px var(--page-gutter); }
.admin-shell { min-height:calc(100svh - var(--header-height)); }
.demo-settings-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:22px; }
.demo-settings-heading h2 { margin-top:10px; }
.demo-settings-heading p:last-child { max-width:700px; color:var(--muted); font-size:12px; }
.demo-settings-heading>a { flex-shrink:0; }
.demo-settings-note { margin-top:16px; max-width:750px; }
@media(min-width:1900px) {
  .demo-card-grid { gap:22px; }
  .admin-panels { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:1050px) {
  .main-nav { gap:20px; }
  .main-nav .nav-admin { font-size:0; padding-left:16px; gap:0; }
  .nav-admin span { font-size:19px; margin:0; }
  .demo-salon-card { min-height:310px; }
  .demo-card-copy { padding:21px; }
  .demo-card-flag { left:17px; top:16px; font-size:7px; }
  .demo-card-index { right:17px; top:20px; }
}
@media(max-width:760px) {
  :root { --header-height:64px; --page-gutter:20px; }
  .site-header, .home-mode .site-header { gap:14px; }
  .brand { font-size:13px; gap:8px; }
  .brand-mark { width:25px; height:25px; }
  .main-nav { gap:15px; }
  .main-nav a { font-size:10px; }
  .main-nav a:nth-child(1), .main-nav a:nth-child(3), .main-nav .nav-admin { display:none; }
  .main-nav a:nth-child(2) { display:inline-flex; }
  .beta-badge { min-width:52px; padding:6px 9px; font-size:8px; }
  .demo-catalog { padding-block:38px 24px; }
  .section-heading { flex-direction:row; align-items:flex-end; gap:16px; margin-bottom:23px; }
  .section-heading h2, .home-mode .section-heading h2 { font-size:34px; }
  .section-heading .eyebrow { font-size:7px; letter-spacing:.1em; }
  .short-entry { font-size:0; }
  .short-entry>span { font-size:9px; width:38px; height:38px; }
  .demo-card-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .demo-salon-card { height:320px; min-height:0; }
  .demo-salon-card:first-child { grid-column:1/-1; height:410px; }
  .demo-card-copy { padding:19px; gap:11px; }
  .demo-card-copy>strong { font-size:26px; }
  .demo-salon-card:first-child .demo-card-copy>strong { font-size:42px; }
  .demo-card-copy>small { font-size:7px; line-height:1.5; }
  .demo-card-flag { font-size:6px; padding:6px 8px; left:14px; top:14px; letter-spacing:.06em; }
  .demo-card-index { display:none; }
  .home-mode .discovery .section-heading { flex-wrap:wrap; }
  .filter-pills { align-self:auto; }
  .home-mode .room-empty { padding-block:20px; }
  .home-mode .room-empty .text-button { margin-top:14px; padding-left:0; }
  .demo-settings-heading { flex-direction:column; gap:18px; }
  .site-footer { grid-template-columns:1fr 1fr; gap:20px; }
  .site-footer p { text-align:right; }
}
/* On a phone, keep the explanation beside the picture in the same viewport;
   the conversation follows and the offer button moves directly to its form. */
@media(max-width:780px) {
  .demo-theatre { grid-template-columns:minmax(0,1fr); grid-template-rows:56px minmax(300px,calc(100svh - 380px)) auto auto; }
  .demo-topbar { grid-row:1; grid-column:1; }
  .demo-workspace { display:contents; }
  .demo-stage { grid-row:2; grid-column:1; height:auto; min-height:0; max-height:none; }
  .demo-guide { grid-row:3; grid-column:1; padding:16px 18px; gap:12px; }
  .demo-guide-label { gap:12px; }
  .demo-guide-label strong { font-size:12px; }
  .demo-guide-number { font-size:28px; }
  .demo-guide-label>.demo-icon-button { width:34px; height:34px; min-width:34px; }
  .demo-caption>p { font-size:11px; line-height:1.6; }
  .demo-chapters { margin-top:12px; }
  .demo-chapters small { margin-top:6px; }
  .demo-guide-actions { padding-top:9px; }
  .demo-sidebar { grid-row:4; grid-column:1; }
  .demo-theatre:fullscreen,.demo-theatre.is-expanded { grid-template-rows:56px minmax(300px,calc(100svh - 316px)) auto auto; }
}
@media(max-width:390px) {
  :root { --page-gutter:16px; }
  .site-header, .home-mode .site-header { gap:10px; }
  .main-nav a:nth-child(2) { font-size:9px; gap:4px; }
  .demo-salon-card { height:280px; }
  .demo-card-copy { padding:14px; }
  .demo-card-copy>strong { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) { .demo-salon-card>img { transition:none; } }