/* /demos: hero (copy left, scattered screenshot collage right), a logo row that jumps to a
   platform, how to sign in, then the demo sites as image tiles grouped by platform. */

/* ---------- hero collage ---------- */
.dm-collage{position:relative;height:clamp(320px,34vw,440px)}
.dm-tile{position:absolute;display:block;width:36%;aspect-ratio:16/9;overflow:hidden;background:#E9E8E4;border-radius:12px;border:3px solid #fff;box-shadow:0 26px 54px -22px rgba(17,18,20,.38),0 2px 8px rgba(17,18,20,.1);transform:rotate(var(--r,0deg))}
.dm-tile img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}
.dm-tile:focus-visible{border-radius:12px;outline-offset:4px}
.dm-tile-1{left:-2%;top:2%;--r:-7deg;z-index:1;--z:10px}
.dm-tile-2{left:31%;top:-2%;width:34%;--r:3deg;z-index:2;--z:20px}
.dm-tile-3{right:-1%;top:4%;width:34%;--r:7deg;z-index:1;--z:10px}
.dm-tile-4{left:1%;top:34%;width:38%;--r:4deg;z-index:3;--z:30px}
.dm-tile-5{left:33%;top:29%;--r:-4deg;z-index:4;--z:40px}
.dm-tile-6{right:0;top:37%;width:34%;--r:-6deg;z-index:3;--z:30px}
.dm-tile-7{left:5%;top:66%;--r:-3deg;z-index:5;--z:50px}
.dm-tile-8{left:37%;top:61%;width:38%;--r:5deg;z-index:6;--z:60px}
.dm-tile-9{right:1%;top:71%;width:30%;--r:4deg;z-index:5;--z:50px}

/* 3D on hover (31 Oct): the collage leans toward the pointer (page-demos.js sets --rx/--ry) and the
   tile under it lifts forward. --z on each tile follows its z-index so the depth matches the layering.
   Mouse and trackpad only; touch screens and reduced motion keep the flat collage. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .dm-collage{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
  .dm-collage.is-tilting{transition-duration:.12s}
  .dm-tile{transform:translateZ(var(--z,0px)) rotate(var(--r,0deg));transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
  .dm-tile:hover,.dm-tile:focus-visible{transform:translateZ(calc(var(--z,0px) + 70px)) rotate(calc(var(--r,0deg) * .4));box-shadow:0 40px 70px -24px rgba(17,18,20,.45),0 4px 12px rgba(17,18,20,.12)}
}

/* ---------- platform jump logos ---------- */
.dm-platstrip{padding:22px 0}
.dm-plats{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
.dm-plat{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:8px 22px;border:1px solid var(--line-2);border-radius:999px;background:#fff;transition:border-color .18s,transform .18s}
.dm-plat:hover{border-color:var(--ink);transform:translateY(-1px)}
.dm-plat:focus-visible{outline-offset:4px}
.dm-plat img{display:block;width:auto;height:22px;filter:grayscale(1) brightness(0);opacity:.72;transition:opacity .18s}
.dm-plat:hover img,.dm-plat:focus-visible img{opacity:1}
.dm-plat-wordpress img{height:46px;margin:-12px 0}
.dm-plat-woocommerce img{height:20px}
.dm-plat-magento img{height:30px;margin:-2px 0}

.dm-steps{--n:4}
.dm-how{scroll-margin-top:calc(var(--head) + 8px)}
.dm-how .sec-head{margin-bottom:clamp(28px,4vw,44px)}
.dm-sec{scroll-margin-top:calc(var(--head) + 8px)}
.dm-sec .sec-head{margin-bottom:clamp(28px,4vw,40px)}
.dm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.dm-card{display:flex;flex-direction:column;overflow:hidden;background:var(--card,#fff);border:1px solid var(--line);border-radius:18px;scroll-margin-top:calc(var(--head) + 24px);transition:border-color .25s,box-shadow .25s}
/* Arrived from a hero mockup: ring the card so it is clear which site was picked. */
.dm-card:target{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.dm-shot{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top center;background:#E9E8E4}
.dm-body{display:flex;flex-direction:column;flex:1;gap:6px;padding:20px 22px 22px}
.dm-card h3{font:600 1.15rem/1.3 var(--font-head);letter-spacing:-.015em;color:var(--ink)}
.dm-builder{color:var(--muted);font-size:.95rem;line-height:1.45}
.dm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:16px}
.dm-more{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px}
@media (max-width:1000px){
  .dm-steps{--n:2}
  .dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .dm-collage{height:clamp(240px,58vw,340px);margin-top:4px}
}
@media (max-width:640px){
  .dm-steps{--n:1}
  .dm-grid{grid-template-columns:minmax(0,1fr)}
  .dm-collage{height:clamp(190px,62vw,230px)}
  .dm-tile,.dm-tile:focus-visible{border-width:2px;border-radius:8px}
  .dm-plats{gap:8px}
  .dm-plat{padding:8px 16px}
}