/* Mobile-first demo experience / 2026-10-13.
   Scoped to demo only; no marketing-page regressions. */
html{scroll-padding-top:20px}
body[data-page="demo"]{overflow-x:clip}
body[data-page="demo"] .app-layout{min-width:0}
body[data-page="demo"] .main-content{min-width:0}
body[data-page="demo"] .toast{bottom:calc(95px + env(safe-area-inset-bottom));left:14px;right:14px;max-width:none;width:auto;pointer-events:none}
body[data-page="demo"] .modal-backdrop{padding:calc(14px + env(safe-area-inset-top)) 12px calc(88px + env(safe-area-inset-bottom));align-items:center}
body[data-page="demo"] .modal{max-width:100%;max-height:calc(100dvh - 120px - env(safe-area-inset-bottom));overscroll-behavior:contain}
body[data-page="demo"] .demo-fashion-preview{min-width:0}
body[data-page="demo"] .demo-outfit-board{min-width:0}
@media(max-width:700px){
 body[data-page="demo"] #studio-header-mount,
 body[data-page="demo"] #studio-footer-mount{display:none!important}
 body[data-page="demo"] .kl-demo-chooser{position:relative;z-index:2;margin:0;min-height:0;padding:12px 15px 10px;border-bottom:1px solid var(--line);background:var(--paper)}
 body[data-page="demo"] .kl-demo-label,
 body[data-page="demo"] .kl-demo-note{display:none!important}
 body[data-page="demo"] .kl-demo-switch{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:7px}
 body[data-page="demo"] .kl-demo-switch a{display:grid;place-items:center;width:100%;min-width:0;min-height:42px;padding:8px;border-radius:10px}
 body[data-page="demo"] .app-layout{padding:16px 14px calc(124px + env(safe-area-inset-bottom));max-width:560px;margin-inline:auto}
 body[data-page="demo"] .side-rail{bottom:0;left:0;right:0;z-index:65;padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 26px #1818160d}
 body[data-page="demo"] .rail-links a{min-height:56px}
 body[data-page="demo"] .demo-scene-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
 body[data-page="demo"] .demo-scene-choice{min-width:0;min-height:84px}
 body[data-page="demo"] .demo-fashion-preview{display:flex;flex-direction:column}
 body[data-page="demo"] .demo-person-frame{height: min(58dvh,440px);min-height:260px}
 body[data-page="demo"] .demo-person-frame>img{height:100%;min-height:0;object-fit:cover;object-position:75% center}
 body[data-page="demo"] .demo-looks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 body[data-page="demo"] .modal-backdrop{z-index:120}
 body[data-page="demo"] .modal{max-height:calc(100dvh - 126px - env(safe-area-inset-bottom))}
}
@media(max-width:380px){
 body[data-page="demo"] .demo-scene-choice{padding:9px 7px}
 body[data-page="demo"] .demo-scene-choice strong{font-size:11px}
 body[data-page="demo"] .demo-scene-choice small{font-size:9px}
}
@media(min-width:701px){
 body[data-page="demo"].phone-embed #studio-header-mount,
 body[data-page="demo"].phone-embed #studio-footer-mount,
 body[data-page="demo"].phone-embed .kl-demo-chooser{display:none}
 body[data-page="demo"] .mobile-preview-stage{padding:12px 16px;min-height:0}
 body[data-page="demo"] .mobile-preview-toolbar{min-height:60px}
}
@media(max-width:700px){
 body[data-page="demo"].phone-embed .kl-demo-chooser{padding-top:8px}
}

/* Guided tour CTA on the product switcher */
body[data-page="demo"] .guided-entry{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:9px 14px;border-radius:10px;background:#303933;color:#fff;text-decoration:none;font-size:12px;font-weight:700;white-space:nowrap}
body[data-page="demo"] .guided-entry:hover{background:#4d5a51}
@media(max-width:700px){body[data-page="demo"] .guided-entry{display:flex;width:100%;margin-top:9px;min-height:42px}}

/* Embedded walkthrough is in normal flow, never a full-width blocking toast. */
body[data-page="demo"] .guided-journey{position:relative!important;inset:auto!important;bottom:auto!important;left:auto!important;right:auto!important;z-index:1!important;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;max-width:100%;margin:0 0 24px;padding:18px 20px;border-radius:17px;border:1px solid #dcd2c1;background:linear-gradient(115deg,#f5eee2,#fffdf9);color:#333a34;box-shadow:none}
body[data-page="demo"] .guided-counter{font-size:10px;font-weight:800;letter-spacing:.13em;color:#94765d;white-space:nowrap}
body[data-page="demo"] .guided-journey .tour-copy{min-width:0;display:grid;gap:6px}
body[data-page="demo"] .guided-journey .tour-copy strong{font-size:15px;color:#333a34}
body[data-page="demo"] .guided-journey .tour-copy small{font-size:12px;color:#7d7368;line-height:1.6}
body[data-page="demo"] .guided-meter{height:4px;border-radius:8px;overflow:hidden;background:#e5dcca;width:100%;max-width:310px;margin-top:4px}
body[data-page="demo"] .guided-meter span{display:block;height:100%;background:#8a8e71;transition:width .25s}
body[data-page="demo"] .guided-go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 17px;border:0;border-radius:10px;background:#303b34;color:#fff;font-weight:700;white-space:nowrap}
body[data-page="demo"] .guided-dismiss{background:transparent;border:0;color:#877e71;padding:9px;font-size:16px}
@media(max-width:700px){body[data-page="demo"] .guided-journey{grid-template-columns:1fr auto;gap:11px;padding:16px;margin-bottom:19px}body[data-page="demo"] .guided-counter{grid-column:1;grid-row:1}body[data-page="demo"] .guided-dismiss{grid-column:2;grid-row:1}body[data-page="demo"] .guided-journey .tour-copy{grid-column:1/-1;grid-row:2}body[data-page="demo"] .guided-go{grid-column:1/-1;grid-row:3;width:100%}}