/* Foam designer showcase: a story-style slider of real designer screens (home, /foam-inserts, the phone card on /designer)
   and the pop-up tour. Self-contained (no site.css needed) so the designer page can use it too. Built by designer_show() in build.py. */
.dsx{--o:#E85112;--ink:#161616;--char:#212121;--paper:#F5F2EA;position:relative;max-width:640px;width:100%;color:inherit}
.dsx-frame{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:var(--char);box-shadow:0 18px 50px -18px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none}
.dsx-s{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.dsx-s.on{opacity:1}
.dsx-s img,.dsx-s video{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover;display:block;margin:0}
.dsx-s .b{opacity:0}
.dsx-s.on.go .b{animation:dsx-in var(--d,4.4s) linear forwards}
@keyframes dsx-in{0%,38%{opacity:0}50%,100%{opacity:1}}
.dsx-s.on.go .b.wipe{opacity:1;animation:dsx-wipe var(--d,4.4s) linear forwards}
@keyframes dsx-wipe{0%,10%{clip-path:inset(0 0 100% 0)}44%,100%{clip-path:inset(0 0 0 0)}}
.dsx-s .b.wipe{clip-path:inset(0 0 100% 0)}
.dsx-s.on.go .zoom{animation:dsx-zoom var(--d,4.4s) ease-out forwards;transform-origin:78% 80%}
@keyframes dsx-zoom{0%{transform:scale(1)}100%{transform:scale(1.14)}}
/* scan line sweeping over the photo while it is traced */
.dsx-scan{position:absolute;left:0;right:0;height:22%;top:-22%;background:linear-gradient(180deg,rgba(232,81,18,0),rgba(232,81,18,.28) 70%,rgba(255,140,80,.85) 99%,rgba(232,81,18,0));mix-blend-mode:screen;opacity:0}
.dsx-s.on.go .dsx-scan{animation:dsx-scan var(--d,4.4s) linear forwards}
@keyframes dsx-scan{0%,10%{top:-22%;opacity:1}44%{top:78%;opacity:1}50%,100%{top:78%;opacity:0}}
.dsx-tag{position:absolute;left:12px;bottom:12px;font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;background:rgba(22,22,22,.82);color:#fff;padding:7px 9px;border-radius:6px}
.dsx-tag{display:grid}
.dsx-tag span{grid-area:1/1}
.dsx-tag i{font-style:normal;color:var(--o)}
.dsx-tag .t2{opacity:0}
.dsx-s.on.go .dsx-tag.two .t1{animation:dsx-t1 var(--d,4.4s) linear forwards}
.dsx-s.on.go .dsx-tag .t2{animation:dsx-t2 var(--d,4.4s) linear forwards}
@keyframes dsx-t1{0%,47%{opacity:1}49%,100%{opacity:0}}
@keyframes dsx-t2{0%,47%{opacity:0}49%,100%{opacity:1}}
.dsx-bars{position:absolute;left:10px;right:10px;top:10px;display:flex;gap:5px;z-index:2}
.dsx-bars button{flex:1;height:14px;padding:5px 0;margin:0;border:0;background:none;cursor:pointer}
.dsx-bars button span{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.dsx-bars button span i{display:block;height:100%;width:0;background:#fff}
.dsx-bars button.done span i{width:100%}
.dsx-cap{min-height:4.6em;margin-top:14px}
.dsx-cap b{display:block;font-size:1.12rem;line-height:1.2;margin-bottom:4px}
.dsx-cap b em{font-style:normal;color:var(--o)}
.dsx-cap p{margin:0;opacity:.78;font-size:.95rem;line-height:1.45}
.dsx-cap [data-dsx-c]{display:none}
.dsx-cap [data-dsx-c].on{display:block;animation:dsx-up .4s ease}
@keyframes dsx-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.dsx-play{display:inline-flex;align-items:center;gap:10px;margin-top:6px;font:inherit;font-weight:700;color:inherit;text-decoration:none;cursor:pointer;background:none;border:0;padding:6px 0}
.dsx-play .p{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--o);color:#fff;flex:none}
.dsx-play .p svg{width:13px;height:13px;fill:currentColor;margin-left:2px}
.dsx-play:hover .p{transform:scale(1.07)}
.dsx-play small{font-weight:400;opacity:.7}

/* the pop-up tour */
.dsx-tour{border:0;padding:0;margin:auto;width:min(980px,94vw);max-width:none;max-height:94vh;border-radius:16px;background:var(--dsx-bg,#1b1b1b);color:#f3f1ec;overflow:auto;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.dsx-tour::backdrop{background:rgba(10,10,10,.78)}
.dsx-tour .dsx{max-width:none}
.dsx-tour-in{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;padding:26px;align-items:center}
.dsx-tour .dsx-frame{box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.dsx-tour .dsx-cap{margin:0;min-height:0}
.dsx-tour .dsx-cap b{font-size:1.6rem;margin-bottom:10px;font-family:inherit}
.dsx-tour .dsx-cap p{font-size:1rem;opacity:.85}
.dsx-tour .dsx-cap ul{margin:14px 0 0;padding:0;list-style:none;font-size:.92rem;opacity:.85}
.dsx-tour .dsx-cap li{padding-left:20px;position:relative;margin:6px 0}
.dsx-tour .dsx-cap li::before{content:"";position:absolute;left:2px;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--o)}
.dsx-k{font:700 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#EE7D4D;margin-bottom:10px;display:block}
.dsx-x{position:absolute;top:10px;right:12px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.dsx-x:hover{background:rgba(255,255,255,.2)}
.dsx-end{position:absolute;inset:0;display:none;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:8% 9%;background:linear-gradient(135deg,rgba(22,22,22,.94),rgba(33,33,33,.86)),var(--char);color:#fff}
.dsx-end.on{display:flex;animation:dsx-up .4s ease}
.dsx-end h3{margin:0;font-size:clamp(1.4rem,3.2vw,2.1rem);line-height:1.12;max-width:20ch}
.dsx-end p{margin:0;opacity:.82;max-width:44ch;line-height:1.45}
.dsx-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.dsx-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:8px;font-weight:700;text-decoration:none;border:1px solid rgba(255,255,255,.35);color:#fff;background:transparent;font:inherit;font-weight:700;cursor:pointer}
.dsx-btn.red{background:var(--o);border-color:var(--o)}
.dsx-btn svg{width:15px;height:15px}
.dsx-again{background:none;border:0;color:#fff;opacity:.7;text-decoration:underline;cursor:pointer;font:inherit;padding:4px 0}
.dsx-tour-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
@media (max-width:760px){
  .dsx-tour{width:100vw;height:100%;max-height:none;border-radius:0;margin:0}
  .dsx-tour-in{grid-template-columns:1fr;gap:16px;padding:58px 16px 22px;min-height:100%;align-content:center;box-sizing:border-box}
  .dsx-tour .dsx-cap b{font-size:1.3rem}
  .dsx-tour .dsx-cap ul{display:none}
  .dsx-tour-cta{margin-top:12px}
  .dsx-tour-cta .dsx-btn{flex:1;justify-content:center}
}
html.dsx-lock{overflow:hidden}
.dsx.paused *,.dsx.paused *::before,.dsx.paused *::after{animation-play-state:paused!important}
/* page band: copy beside the slider */
.dsx-band{display:grid;grid-template-columns:1fr minmax(0,1.15fr);gap:52px;align-items:center}
.dsx-band .dsx{justify-self:end}
.dsx-band .lead{max-width:46ch}
.dsx-pts{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:8px}
.dsx-pts li{position:relative;padding-left:24px}
.dsx-pts li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:3px;background:#E85112}
@media (max-width:900px){.dsx-band{grid-template-columns:1fr;gap:26px}.dsx-band .dsx{justify-self:stretch;max-width:none}}
.dsx-hero-play{display:inline-flex;align-items:center;gap:9px;margin-top:16px;color:inherit;font-weight:700;text-decoration:none}
.dsx-hero-play svg{width:30px;height:30px;padding:9px 8px 9px 10px;border-radius:50%;background:#E85112;fill:#fff;box-sizing:border-box}
.dzp-card .dsx{margin:16px 0 4px}
.dzp-card .dsx-cap{min-height:6.2em}
.dzp-card .dsx-play{margin-top:0}
/* v3: gentle drift on still photos, call-outs and price cards timed as fractions of the slide (--d); sizes in cqw so they fit any frame */
.dsx-frame{container-type:inline-size}
.dsx-s.on.go .ken{animation:dsx-ken var(--d,4.4s) linear forwards;transform-origin:50% 50%}
@keyframes dsx-ken{0%{transform:scale(1.02)}100%{transform:scale(1.1)}}
.dsx-cos,.dsx-cards{position:absolute;inset:0;pointer-events:none}
.dsx-co{position:absolute;left:var(--x);top:var(--y);transform:translate(-1.2cqw,-50%);display:flex;align-items:center;gap:1.4cqw;max-width:44cqw;background:rgba(22,22,22,.9);color:#fff;border-radius:1.4cqw;padding:1.3cqw 1.8cqw 1.3cqw 1.4cqw;font:500 2.3cqw/1.25 system-ui,sans-serif;opacity:0;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.dsx-co b{display:block;color:#EE7D4D;font-size:2.4cqw;letter-spacing:.02em}
.dsx-co i{flex:none;width:1.8cqw;height:1.8cqw;border-radius:50%;background:var(--o);box-shadow:0 0 0 .7cqw rgba(232,81,18,.35)}
.dsx-s.on.go .dsx-co{animation:dsx-pop .5s cubic-bezier(.2,.9,.3,1.2) forwards;animation-delay:calc(var(--d,4.4s) * (0.08 + var(--n) * 0.17))}
@keyframes dsx-pop{from{opacity:0;transform:translate(-1.2cqw,-50%) scale(.85)}to{opacity:1;transform:translate(-1.2cqw,-50%) scale(1)}}
.dsx-card{position:absolute;display:block;opacity:0;background:rgba(245,242,234,.96);color:#161616;border-radius:1.6cqw;padding:1.8cqw 2.4cqw;box-shadow:0 10px 30px rgba(0,0,0,.4);transform:translateY(14px);max-width:60cqw}
.dsx-card:nth-child(1){left:6cqw;top:8cqw}
.dsx-card:nth-child(2){right:6cqw;top:34cqw}
.dsx-card:nth-child(3){left:6cqw;bottom:14cqw}
.dsx-card small{display:block;font:600 1.9cqw/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#6b665e;margin-bottom:.5cqw}
.dsx-card b{display:block;font:800 6.4cqw/1 system-ui,sans-serif;letter-spacing:-.01em}
.dsx-card b sup{font-size:.5em;vertical-align:top;margin-left:1px}
.dsx-card b span{font-size:.42em;font-weight:600;color:#6b665e}
.dsx-card em{display:block;font-style:normal;font-size:2.2cqw;color:#3a3732;margin-top:.8cqw}
.dsx-card kbd{display:inline-block;font:700 2cqw/1 ui-monospace,Menlo,monospace;background:#161616;color:#fff;padding:.9cqw 1.3cqw;border-radius:.9cqw;margin:.4cqw .8cqw 0 0}
.dsx-card.alt{background:var(--o);color:#fff}
.dsx-card.alt small,.dsx-card.alt em,.dsx-card.alt b span{color:rgba(255,255,255,.85)}
.dsx-card.alt kbd{background:#fff;color:#161616}
.dsx-card.go{background:rgba(22,22,22,.9);color:#fff}
.dsx-card.go b{font-size:2.9cqw} .dsx-card.go em{color:rgba(255,255,255,.75)}
.dsx-s.on.go .dsx-card{animation:dsx-card .55s cubic-bezier(.2,.9,.3,1.15) forwards;animation-delay:calc(var(--d,4.4s) * (0.04 + var(--n) * 0.2))}
@keyframes dsx-card{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}