.demo-layout {
        display: flex;
        min-height: 100vh;
        background: #f4f6fa;
        font-family: 'IBM Plex Sans', sans-serif;
      }
      .demo-sidebar {
        width: 260px;
        background: #0e1f47;
        color: #fff;
        padding: 24px 20px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        position: fixed;
        height: 100vh;
        z-index: 10;
      }
      .demo-sidebar-brand {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .demo-sidebar-brand img { width: 32px; height: 32px; background: #fff; border-radius: 8px; padding: 2px; filter: none; }
      .demo-sidebar-brand span { font-weight: 800; font-family: 'Bricolage Grotesque', sans-serif; font-size: 20px; letter-spacing: -0.02em; }
      .demo-sidebar-badge {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        background: rgba(255,255,255,0.1);
        padding: 6px 10px;
        border-radius: 6px;
        width: fit-content;
        color: #9dbab3;
      }
      .demo-nav { display: flex; flex-direction: column; gap: 6px; flex: 1; }
      .demo-nav button {
        background: transparent;
        border: none;
        color: #b7c6de;
        text-align: left;
        padding: 10px 14px;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .demo-nav button:hover { background: rgba(255,255,255,0.05); color: #fff; }
      .demo-nav button.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 600; }
      .demo-sidebar-footer { padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; flex-direction: column; gap: 12px; }
      .demo-sidebar-footer button, .demo-sidebar-footer a {
        width: 100%;
        padding: 12px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        transition: opacity 0.2s;
        border: none;
      }
      .demo-return-home { display:block; box-sizing:border-box; border:1px solid rgba(255,255,255,.28) !important; color:#fff; text-decoration:none; }
      .demo-return-home:hover { background:rgba(255,255,255,.08); }
      .btn-customer { background: #1470e0; color: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; }
      .btn-customer:hover { opacity: 0.9; }
      .btn-signup { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.3); text-decoration: none; }
      .btn-signup:hover { background: rgba(255,255,255,0.05); color: #fff; }

      .demo-main {
        flex: 1;
        margin-left: 260px;
        padding: 48px;
        max-width: 1100px;
      }
      .demo-header { margin-bottom: 32px; }
      .demo-header h1 { font-size: 32px; font-family: 'Bricolage Grotesque', sans-serif; margin-bottom: 8px; color: #0e1f47; }
      .demo-header p { color: #6f7d94; font-size: 15px; margin: 0; max-width: 600px; }

      .demo-view { display: none; animation: demoFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
      .demo-view.active { display: block; }
      @keyframes demoFadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

      .demo-panel { background: #fff; border: 1px solid #dce3ed; border-radius: 12px; padding: 24px; box-shadow: 0 4px 20px rgba(21, 42, 94, 0.03); margin-bottom: 24px; }
      .demo-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
      .demo-panel-head h2 { font-size: 18px; font-family: 'Bricolage Grotesque', sans-serif; margin: 0; color: #0e1f47; }
      .demo-grid { display: grid; gap: 20px; }
      .demo-grid-2 { grid-template-columns: 1fr 1fr; }
      .demo-grid-4 { grid-template-columns: repeat(4, 1fr); }

      .demo-stat { padding: 20px; border-radius: 10px; border: 1px solid #edf1f7; background: #fff; }
      .demo-stat b { display: block; font-size: 32px; font-family: 'Bricolage Grotesque', sans-serif; margin-bottom: 4px; color: #0e1f47; line-height: 1; }
      .demo-stat span { display: block; color: #6f7d94; font-size: 13px; font-weight: 500; margin-bottom: 4px; }
      .demo-stat em { display: block; color: #0e9f6e; font-size: 12px; font-style: normal; }

      .demo-booking-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid #edf1f7; transition: all 0.3s; }
      .demo-booking-row:last-child { border-bottom: none; padding-bottom: 0; }
      .demo-booking-info { flex: 1; }
      .demo-booking-info b { display: block; font-size: 15px; color: #0e1f47; margin-bottom: 4px; font-weight: 600; }
      .demo-booking-meta { color: #6f7d94; font-size: 13px; display: flex; gap: 8px; align-items: center; }
      .demo-booking-time { text-align: right; margin-left: 20px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
      .demo-booking-time span { font-size: 14px; font-weight: 600; color: #0e1f47; }

      .demo-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
      .demo-badge.pending { background: #fbf0dc; color: #b4741c; }
      .demo-badge.accepted { background: #dff3ea; color: #0e9f6e; }
      .demo-badge.completed { background: #f0f2f5; color: #6f7d94; }
      .demo-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

      .demo-btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all 0.2s; border: none; font-family: inherit; }
      .demo-btn-primary { background: #1470e0; color: #fff; }
      .demo-btn-primary:hover { background: #105bb5; }
      .demo-btn-success { background: #0e9f6e; color: #fff; }
      .demo-btn-success:hover { background: #0b8058; }
      .demo-btn-danger { background: transparent; border: 1px solid #e2cbc7; color: #c0392b; }
      .demo-btn-danger:hover { background: #fdf5f4; }
      .demo-btn-ghost { background: transparent; border: 1px solid #dce3ed; color: #0e1f47; }
      .demo-btn-ghost:hover { background: #f4f6fa; }

      .demo-actions { display: flex; gap: 8px; }

      /* Settings / Form Elements */
      .demo-form-group { margin-bottom: 20px; }
      .demo-form-group label { display: block; font-size: 13px; font-weight: 600; color: #4a5a7c; margin-bottom: 8px; }
      .demo-input { width: 100%; padding: 12px 14px; border: 1px solid #dce3ed; border-radius: 8px; font-size: 14px; background: #fff; color: #0e1f47; transition: border-color 0.2s; font-family: inherit; }
      .demo-input:focus { outline: none; border-color: #1470e0; box-shadow: 0 0 0 3px rgba(20, 112, 224, 0.1); }

      /* Services List */
      .demo-service { display: flex; justify-content: space-between; align-items: center; padding: 16px; border: 1px solid #edf1f7; border-radius: 10px; margin-bottom: 10px; }
      .demo-service b { font-size: 15px; color: #0e1f47; display: block; margin-bottom: 4px; }
      .demo-service p { color: #6f7d94; font-size: 13px; margin: 0; }
      .demo-service-price { font-weight: 600; color: #0e1f47; font-size: 15px; }

      /* Calendar */
      .demo-cal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
      .demo-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: #edf1f7; border: 1px solid #edf1f7; border-radius: 8px; overflow: hidden; }
      .demo-cal-day-name { background: #f8fafc; padding: 10px; text-align: center; font-size: 12px; font-weight: 600; color: #6f7d94; }
      .demo-cal-day { background: #fff; min-height: 80px; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
      .demo-cal-day.empty { background: #f8fafc; color: #b7c6de; }
      .demo-cal-date { font-size: 13px; font-weight: 600; color: #0e1f47; margin-bottom: 4px; }
      .demo-cal-event { background: #eaf2fc; color: #1470e0; font-size: 11px; font-weight: 600; padding: 4px 6px; border-radius: 4px; border-left: 2px solid #1470e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .demo-cal-event.green { background: #dff3ea; color: #0e9f6e; border-left-color: #0e9f6e; }

      /* Interactive Notification */
      .demo-toast { position: fixed; bottom: 30px; right: 30px; background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 10px 40px rgba(14, 31, 71, 0.15); border: 1px solid #dce3ed; width: 340px; z-index: 100; transform: translateY(120%); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
      .demo-toast.show { transform: translateY(0); }
      .demo-toast-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
      .demo-toast-header b { font-size: 14px; color: #0e1f47; }
      .demo-toast-header small { color: #6f7d94; font-size: 12px; }
      .demo-toast-body { font-size: 13.5px; color: #4a5a7c; line-height: 1.5; margin-bottom: 16px; }

      /* Full customer booking simulation */
      .demo-overlay { position:fixed; inset:0; z-index:200; display:block; overflow:hidden; background:#fff; opacity:0; pointer-events:none; transition:opacity .2s ease; }
      .demo-overlay.active { opacity:1; pointer-events:auto; }
      body.demo-customer-open .pwa-install-card { display:none !important; }
      body.page-demo .pwa-install-card { display:none !important; }
      .demo-customer-page { --brand-primary:#1470e0; --brand-surface:#fff; --brand-bg:#f4f6fa; --brand-text:#0e1f47; --brand-radius:8px; width:100%; height:100%; overflow-y:auto; background:var(--brand-bg); color:var(--brand-text); font-family:var(--brand-font); }
      .demo-customer-toolbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; min-height:54px; padding:8px 24px; border-bottom:1px solid rgba(14,31,71,.1); background:rgba(255,255,255,.96); backdrop-filter:blur(12px); }
      .demo-customer-url { display:flex; align-items:center; gap:8px; color:#6f7d94; font-size:13px; }
      .demo-customer-url span { color:#0e9f6e; font-size:10px; }
      .demo-exit-customer { display:flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid #dce3ed; border-radius:9px; background:#fff; color:#0e1f47; font-weight:700; cursor:pointer; }
      .demo-customer-hero { padding:48px 24px; text-align:center; }
      .demo-customer-hero[data-layout="bold"] { text-align:left; padding-inline:max(24px,calc((100% - 1060px)/2)); }
      .demo-customer-hero[data-layout="bold"] .mock-public-logo { margin-left:0 !important; }
      .demo-customer-hero h1 { margin:0; color:inherit; font-size:clamp(30px,5vw,48px); line-height:1.05; }
      .mock-public-logo { width:64px; height:64px; background:#fff; border-radius:var(--brand-radius); display:grid; place-items:center; color:var(--brand-primary); font-size:26px; font-weight:800; box-shadow:0 8px 25px rgba(0,0,0,.1); }
      .demo-customer-main { width:min(1100px,calc(100% - 32px)); margin:0 auto; padding:34px 0 64px; }
      .demo-customer-progress { display:flex; align-items:center; justify-content:center; max-width:540px; margin:0 auto 28px; }
      .demo-customer-progress span { display:flex; align-items:center; gap:7px; color:color-mix(in srgb,var(--brand-text) 55%,transparent); font-size:13px; font-weight:700; white-space:nowrap; }
      .demo-customer-progress span::first-letter { display:grid; place-items:center; }
      .demo-customer-progress span.active,.demo-customer-progress span.complete { color:var(--brand-primary); }
      .demo-customer-progress i { width:70px; height:1px; margin:0 14px; background:color-mix(in srgb,var(--brand-text) 18%,transparent); }
      .demo-customer-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:24px; }
      .demo-customer-card,.demo-customer-summary { border:1px solid color-mix(in srgb,var(--brand-text) 12%,transparent); border-radius:calc(var(--brand-radius) + 6px); background:var(--brand-surface); box-shadow:0 18px 50px rgba(14,31,71,.07); }
      .demo-phone-content { padding:clamp(24px,5vw,44px); background:transparent; color:var(--brand-text); }
      .demo-phone-content h2 { margin:0; color:inherit; font-size:clamp(25px,4vw,34px); }
      .demo-customer-eyebrow { margin:0 0 8px; color:var(--brand-primary); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
      .demo-customer-lead { margin:9px 0 26px; opacity:.68; }
      .mock-option { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; padding:18px; border:1px solid color-mix(in srgb,var(--brand-text) 15%,transparent); border-radius:var(--brand-radius); background:var(--brand-surface); color:var(--brand-text); cursor:pointer; transition:border-color .2s,transform .2s,box-shadow .2s; }
      .mock-option:hover { border-color:var(--brand-primary); box-shadow:0 8px 22px color-mix(in srgb,var(--brand-primary) 12%,transparent); transform:translateY(-1px); }
      .mock-option b { display:block; margin-bottom:4px; color:inherit; font-size:16px; }
      .mock-option span { opacity:.62; font-size:13px; }
      .mock-option-price { color:var(--brand-primary); font-size:16px; font-weight:800; }
      .mock-back { margin:0 0 28px; padding:0; border:0; background:transparent; color:var(--brand-primary); font-weight:700; cursor:pointer; }
      .mock-field { display:block; margin:22px 0 0; }
      .mock-field>span:first-child,.mock-section-label { display:block; margin:0 0 7px; font-size:13px; font-weight:700; }
      .mock-field .demo-input { width:100%; min-height:46px; border-color:color-mix(in srgb,var(--brand-text) 18%,transparent); background:var(--brand-surface); color:var(--brand-text); }
      .mock-date-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:24px 0; }
      .mock-date-strip button { padding:12px 8px; border:1px solid color-mix(in srgb,var(--brand-text) 15%,transparent); border-radius:var(--brand-radius); background:transparent; color:inherit; font-weight:700; cursor:pointer; }
      .mock-date-strip small { display:block; margin-top:3px; opacity:.58; font-weight:500; }
      .mock-date-strip button.selected { border-color:var(--brand-primary); background:color-mix(in srgb,var(--brand-primary) 10%,var(--brand-surface)); color:var(--brand-primary); }
      .mock-show-days { margin:-12px 0 22px; padding:0; border:0; background:transparent; color:var(--brand-primary); font-size:13px; font-weight:800; cursor:pointer; }
      .mock-time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
      .mock-time { padding:12px 5px; border:1px solid color-mix(in srgb,var(--brand-text) 15%,transparent); border-radius:var(--brand-radius); background:transparent; color:inherit; font-size:13px; font-weight:700; cursor:pointer; transition:all .2s; }
      .mock-time:hover,.mock-time.selected { border-color:var(--brand-primary); background:var(--brand-primary); color:#fff; }
      .mock-details-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
      .mock-wide { grid-column:1/-1; }
      .mock-offer-input { display:flex !important; }
      .mock-offer-input input { border-radius:var(--brand-radius) 0 0 var(--brand-radius) !important; }
      .mock-offer-input button { padding:0 14px; border:0; border-radius:0 var(--brand-radius) var(--brand-radius) 0; background:color-mix(in srgb,var(--brand-primary) 12%,var(--brand-surface)); color:var(--brand-primary); font-weight:800; cursor:pointer; }
      .mock-offer-input button.applied { background:#dff3ea; color:#087565; }
      .mock-consent { display:flex; align-items:flex-start; gap:9px; margin:20px 0 4px; font-size:12px; line-height:1.45; opacity:.75; }
      .mock-form-error { grid-column:1/-1; margin:12px 0 0; color:#b42318; font-size:13px; font-weight:700; }
      .mock-btn { width:100%; padding:14px; border:0; border-radius:var(--brand-radius); background:var(--brand-primary); color:#fff; font-size:15px; font-weight:800; cursor:pointer; transition:filter .2s,transform .2s; }
      .mock-btn:hover { filter:brightness(.94); transform:translateY(-1px); }
      .demo-customer-summary { position:sticky; top:78px; padding:24px; }
      .demo-pro-pill { display:inline-flex; padding:5px 9px; border-radius:999px; background:color-mix(in srgb,var(--brand-primary) 12%,var(--brand-surface)); color:var(--brand-primary); font-size:11px; font-weight:800; }
      .demo-customer-summary h3 { margin:16px 0; color:inherit; }
      .demo-customer-summary dl,.demo-customer-summary dl div { margin:0; }
      .demo-customer-summary dl div { padding:13px 0; border-bottom:1px solid color-mix(in srgb,var(--brand-text) 10%,transparent); }
      .demo-customer-summary dt { margin-bottom:4px; opacity:.56; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
      .demo-customer-summary dd { margin:0; font-size:14px; font-weight:700; }
      .demo-customer-trust { display:flex; flex-direction:column; gap:6px; margin:22px 0; padding:15px; border-radius:var(--brand-radius); background:color-mix(in srgb,var(--brand-primary) 7%,var(--brand-surface)); font-size:12px; }
      .demo-customer-trust span { opacity:.65; }
      .demo-customer-summary>small { opacity:.5; }
      .mock-success { flex-direction:column; align-items:center; text-align:center; }
      .mock-success-icon { display:grid; place-items:center; width:70px; height:70px; margin-bottom:20px; border-radius:50%; background:#dff3ea; color:#087565; }
      .mock-success>p:not(.demo-customer-eyebrow) { max-width:52ch; line-height:1.6; opacity:.68; }
      .mock-confirmation { display:grid; grid-template-columns:1fr 1fr; width:100%; margin:24px 0; border:1px solid color-mix(in srgb,var(--brand-text) 12%,transparent); border-radius:var(--brand-radius); }
      .mock-confirmation span { padding:16px; text-align:left; font-size:11px; text-transform:uppercase; opacity:.68; }
      .mock-confirmation span+span { border-left:1px solid color-mix(in srgb,var(--brand-text) 12%,transparent); }
      .mock-confirmation strong { display:block; margin-top:5px; color:var(--brand-text); font-size:14px; text-transform:none; opacity:1; }

      @media (max-width: 900px) {
  .demo-main { margin-left: 0; padding: 24px 16px; }
  .demo-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
      @media (max-width: 600px) {
        .demo-grid-2, .demo-grid-4 { grid-template-columns: 1fr; }
        .demo-sidebar-footer { flex-direction: column; }
        .demo-booking-row { flex-direction: column; gap: 12px; }
        .demo-booking-time { text-align: left; margin-left: 0; align-items: flex-start; }
        .demo-customer-toolbar { min-height:50px; padding:7px 12px; }
        .demo-customer-url { max-width:58vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
        .demo-exit-customer span { display:none; }
        .demo-exit-customer { padding:8px; }
        .demo-customer-hero { padding:30px 18px; }
        .demo-customer-main { width:min(100% - 20px,720px); padding:22px 0 40px; }
        .demo-customer-progress span b { display:none; }
        .demo-customer-progress i { width:42px; margin-inline:9px; }
        .demo-customer-layout { grid-template-columns:1fr; gap:14px; }
        .demo-customer-summary { position:static; order:-1; padding:16px; }
        .demo-customer-summary h3,.demo-customer-trust,.demo-customer-summary>small { display:none; }
        .demo-customer-summary dl { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .demo-customer-summary dl div { padding:10px 0 0; border:0; }
        .demo-customer-summary dl div:last-child { display:none; }
        .demo-phone-content { padding:24px 18px; }
        .mock-details-grid { grid-template-columns:1fr; }
        .mock-wide { grid-column:auto; }
        .mock-time-grid { grid-template-columns:repeat(2,1fr); }
        .mock-confirmation { grid-template-columns:1fr; }
        .mock-confirmation span+span { border-left:0; border-top:1px solid color-mix(in srgb,var(--brand-text) 12%,transparent); }
      }
.demo-btn:focus-visible, .demo-nav button:focus-visible, .demo-service:focus-visible, .mock-option:focus-visible, .mock-time:focus-visible {
  outline: 2px solid #1470e0;
  outline-offset: 2px;
}

.demo-mobile-top { display: none; }
@media (max-width: 900px) {
  .demo-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid #edf1f7;
    position: sticky;
    top: 0;
    z-index: 20;
  }
    .demo-sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(280px, 100vw);
    box-sizing: border-box;
    overflow-x: hidden;
    transform: translateX(-100%);
    transition: transform 0.3s;
    height: 100vh;
    overflow-y: auto;
    flex-wrap: nowrap;
    z-index: 100;
  }
  .demo-nav button {
    white-space: normal;
    word-break: break-word;
  }
  .demo-sidebar.open {
    transform: translateX(0);
  }
  .demo-nav { flex-direction: column; overflow-x: visible; }
  .demo-layout { overflow-x: hidden; }
}

.demo-service:focus-visible { outline: 2px solid #1470e0; outline-offset: 2px; }
.mock-option:focus-visible { outline: 2px solid #1470e0; outline-offset: 2px; }
.mock-time:focus-visible { outline: 2px solid #1470e0; outline-offset: 2px; }
.demo-overlay[hidden], .demo-phone-content[hidden], .demo-toast[hidden] { display: none !important; }
.demo-inline-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:center; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #edf1f7; }
.demo-form-group { display:block; margin:0; }
.demo-form-group > span, .demo-color-grid span { display:block; margin-bottom:5px; color:#4a5a7c; font-size:12px; font-weight:600; }
.demo-form-group textarea { resize:vertical; }
.demo-check { display:flex; align-items:center; gap:7px; color:#4a5a7c; font-size:13px; }
.demo-check-grid { display:flex; flex-wrap:wrap; gap:12px; }
.demo-brand-controls { display:flex; flex-direction:column; gap:14px; }
.demo-brand-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.demo-brand-preview-shell { padding:0; overflow:hidden; background:#f4f6fa; }
.demo-preview-label { display:flex; justify-content:space-between; gap:10px; padding:11px 14px; border-bottom:1px solid #dce3ed; background:#fff; color:#0e1f47; font-size:12px; font-weight:700; }
.demo-preview-label small { color:#6f7d94; font-weight:500; }
.demo-brand-preview-body { flex:1; padding:22px; background:var(--brand-surface); color:var(--brand-text); font-family:var(--brand-font); }
.demo-brand-preview-body h3 { margin:0 0 14px; color:inherit; font-size:18px; }
.demo-preview-progress { display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:20px; font-size:10px; font-weight:700; }
.demo-preview-progress span { opacity:.45; }
.demo-preview-progress span.active,.demo-preview-progress span.complete { color:var(--brand-primary); opacity:1; }
.demo-preview-progress i { width:24px; height:1px; background:color-mix(in srgb,var(--brand-text) 18%,transparent); }
.demo-preview-step { display:none; animation:demoFadeIn .25s ease; }
.demo-preview-step.active { display:block; }
.demo-preview-service { display:flex; width:100%; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px; padding:13px; border:1px solid color-mix(in srgb,var(--brand-text) 16%,transparent); border-radius:var(--brand-radius); background:var(--brand-surface); color:var(--brand-text); text-align:left; cursor:pointer; }
.demo-preview-service:hover { border-color:var(--brand-primary); }
.demo-preview-service span { display:flex; flex-direction:column; }
.demo-preview-service b { font-size:14px; }
.demo-preview-service small { margin-top:2px; opacity:.65; font-size:12px; }
.demo-preview-service strong { color:var(--brand-primary); }
.demo-preview-back { margin:0 0 10px; padding:0; border:0; background:transparent; color:var(--brand-primary); font-size:11px; font-weight:700; cursor:pointer; }
.demo-preview-days,.demo-preview-times { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:12px; }
.demo-preview-team { width:100%; margin-bottom:9px; padding:8px; border:1px solid color-mix(in srgb,var(--brand-text) 16%,transparent); border-radius:var(--brand-radius); background:var(--brand-surface); color:var(--brand-text); font-size:10px; }
.demo-preview-days button,.demo-preview-times button { padding:9px 4px; border:1px solid color-mix(in srgb,var(--brand-text) 16%,transparent); border-radius:var(--brand-radius); background:transparent; color:var(--brand-text); font-size:10px; font-weight:700; cursor:pointer; }
.demo-preview-days button.selected { border-color:var(--brand-primary); color:var(--brand-primary); }
.demo-preview-days small { display:block; margin-top:2px; opacity:.55; font-size:9px; }
.demo-preview-more { margin:-5px 0 12px; padding:0; border:0; background:transparent; color:var(--brand-primary); font-size:10px; font-weight:800; cursor:pointer; }
.demo-preview-times button:hover { border-color:var(--brand-primary); background:var(--brand-primary); color:#fff; }
.demo-preview-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px; }
.demo-preview-fields span { padding:11px; border:1px solid color-mix(in srgb,var(--brand-text) 16%,transparent); border-radius:var(--brand-radius); color:color-mix(in srgb,var(--brand-text) 55%,transparent); font-size:11px; }
#brand-preview-button { width:100%; margin-top:6px; padding:12px; border:0; background:var(--brand-primary); color:#fff; font-weight:700; }
.demo-color-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.demo-color-grid input { display:block; width:100%; height:38px; padding:2px; border:1px solid #dce3ed; border-radius:8px; background:#fff; }
@media (max-width: 600px) {
  .demo-color-grid { grid-template-columns:repeat(2,1fr); }
  .demo-inline-form { grid-template-columns:1fr; }
  .demo-brand-actions { grid-template-columns:1fr; }
}