/* Visual walkthroughs used only by the public How It Works and Maintenance pages. */
.pub-guide .ps-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:44px; align-items:center; }
.ps-story { min-width:0; background:transparent; }
.ps-scene { position:relative; isolation:isolate; }
.ps-house-scene { display:grid; place-items:center; aspect-ratio:16/10; }
.ps-house { position:absolute; inset:48px 0 12px; display:block; width:80%; height:calc(100% - 60px); margin-inline:auto; object-fit:contain; filter:drop-shadow(0 10px 10px color-mix(in srgb,var(--ink) 12%,transparent)); transform:perspective(800px) rotateY(-7deg); transition:transform .7s ease; }
.ps-story[data-current="1"] .ps-house { transform:perspective(800px) rotateY(0); }
.ps-story[data-current="2"] .ps-house { transform:perspective(800px) rotateY(7deg); }
.ps-photo { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 50%; border-radius:20px 20px 0 0; -webkit-mask-image:linear-gradient(to bottom,black 82%,transparent); mask-image:linear-gradient(to bottom,black 82%,transparent); }
.ps-scene-label { display:block; color:var(--brand-deep-teal); font-size:11px; font-weight:750; letter-spacing:.08em; text-transform:uppercase; }
.ps-house-scene .ps-scene-label { position:absolute; top:12px; left:0; }
.ps-content { padding:20px 0 0; }
.ps-story .ps-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:0 0 16px; }
.ps-heading > span { font-size:12px; color:var(--text-muted); font-weight:650; }
.ps-play { min-width:128px; min-height:36px; border:1px solid var(--border-color); border-radius:9px; padding:7px 11px; color:var(--ink); background:var(--card-bg); font:700 12px/1.3 Inter,sans-serif; cursor:pointer; }
.ps-play[hidden] { display:none; }
.ps-controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ps-controls.ps-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.ps-step { position:relative; min-height:58px; border:0; border-bottom:2px solid var(--border-color); padding:9px 4px; background:transparent; color:var(--text-main); font:650 12px/1.4 Inter,sans-serif; cursor:pointer; }
.ps-step span { display:block; margin-bottom:2px; font-size:11px; }
.ps-step[aria-pressed="true"] { border-color:var(--brand-deep-purple); color:var(--brand-deep-purple); }
.ps-step:disabled { cursor:default; }
.ps-step:focus-visible,.ps-play:focus-visible { outline:3px solid var(--brand-deep-blue); outline-offset:3px; }
.ps-panels { display:grid; margin-top:18px; }
.ps-panel { grid-area:1/1; min-width:0; }
.ps-story .ps-panel[hidden] { display:block !important; visibility:hidden; }
.ps-panel strong { display:block; color:var(--ink); font-size:18px; line-height:1.35; }
.pub-guide .ps-panel p { margin:7px 0 0; font-size:14px; line-height:1.5; color:var(--text-main); }
.ps-panel:not([hidden]) { animation:ps-reveal .35s ease both; }
.ps-product-section { border-top:1px solid var(--border-color); }
.ps-product-section .pf-preview { max-width:680px; }
@keyframes ps-reveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) { .pub-guide .ps-hero-grid { gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } }
@media(max-width:700px) { .pub-guide .ps-hero-grid { grid-template-columns:1fr; gap:24px; } .ps-story { width:100%; max-width:540px; margin-inline:auto; } .ps-photo { aspect-ratio:16/9; } .ps-content { padding:16px 0 0; } body:has(.ps-story:focus-within) #ai-chat-widget { visibility:hidden; } }
@media(max-width:360px) { .ps-controls.ps-four { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(prefers-reduced-motion:reduce) { .ps-house { transition:none; transform:none !important; } .ps-panel:not([hidden]) { animation:none; } }