/* =========================================================
   Product shots — rebuilt, re-toned crops of the Pixen app
   ========================================================= */
.shot{margin:0;position:relative;perspective:1800px;--sa:var(--acc,var(--royal-2))}
.shot-stage{position:relative;perspective:1600px;opacity:0;transform:translateY(48px) rotateX(12deg) scale(.965);transform-origin:50% 100%;transition:opacity 1s var(--ease),transform 1.4s var(--ease)}
.shot.in .shot-stage{opacity:1;transform:none}
.shot-glow{position:absolute;left:6%;right:6%;bottom:-40px;height:70%;background:radial-gradient(closest-side,var(--sa),transparent);filter:blur(50px);opacity:.28;pointer-events:none;z-index:0}
.shot-card{position:relative;z-index:1;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.2);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 24px 48px -24px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.5);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .6s var(--ease)}
.shot-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;z-index:5;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);pointer-events:none}
.shot-card[data-fade~="bottom"]{-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.shot-card[data-fade~="right"]{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.shot-sheen{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(90,110,220,.05),transparent 45%);opacity:0;transition:opacity .4s}
.shot-card:hover .shot-sheen{opacity:1}
.shot-ui{position:absolute;left:0;top:0;transform-origin:0 0}
.shot .moment-cap{margin-top:22px}
.shot-hint{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.shot-hint::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sa);box-shadow:0 0 10px var(--sa);animation:shotPulse 2s ease-in-out infinite}
@keyframes shotPulse{50%{opacity:.35}}

/* small screens: keep UI legible, pan horizontally */
.shot-card.pan{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;transform:none!important}
.shot-card.pan::-webkit-scrollbar{display:none}
.shot-card.pan .shot-pin{display:none}
.shot-card.pan .shot-sheen{display:none}

/* wider proof rows for product shots */
.proof.wide{grid-template-columns:4fr 7fr;gap:72px}
.proof.flip.wide{grid-template-columns:7fr 4fr}
@media (max-width:980px){.proof.wide,.proof.flip.wide{grid-template-columns:1fr;gap:48px}}

/* pins */
.shot-pin{position:absolute;z-index:6;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#1e2a78;color:#fff;font:700 11px/22px 'Inter',sans-serif;text-align:center;cursor:default;
  box-shadow:0 0 0 4px rgba(30,42,120,.16),0 6px 18px rgba(20,24,60,.35);opacity:0;transform:scale(.4);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.shot-pin.on{opacity:1;transform:none}
.shot-pin::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #1e2a78;opacity:0;animation:pinRing 2.6s ease-out infinite}
@keyframes pinRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(2.2)}}
.shot-pin span{position:absolute;top:50%;left:30px;transform:translate(-4px,-50%);white-space:nowrap;background:#1e2a78;color:#fff;font:500 12px/1 'Inter',sans-serif;padding:8px 11px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s var(--ease);box-shadow:0 10px 30px rgba(0,0,0,.4)}
.shot-pin.l span{left:auto;right:30px;transform:translate(4px,-50%)}
.shot-pin:hover span,.shot-pin.peek span{opacity:1;transform:translate(0,-50%)}

/* ---------------- tour ---------------- */
.tour{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start}
.tour-tabs{display:grid;gap:4px}
.tour-tab{position:relative;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:22px 0 24px;color:var(--muted);cursor:pointer;font:inherit}
.tour-tab .i{font:500 12px/1 var(--sans);letter-spacing:.14em;color:var(--dim)}
.tour-tab h3{margin:10px 0 0;color:var(--muted);transition:color .3s}
.tour-tab p{margin:0;font-size:15px;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .5s var(--ease),margin .5s var(--ease)}
.tour-tab.on h3{color:var(--text)}
.tour-tab.on .i{color:var(--ta)}
.tour-tab.on p{max-height:90px;opacity:1;margin-top:10px}
.tour-tab .bar{position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--ta);box-shadow:0 0 10px var(--ta)}
.tour-tab.on .bar{width:var(--p,0%)}
.tour-panels{display:grid}
.tour-panel{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.tour-panel.on{opacity:1;visibility:visible}
@media (max-width:980px){.tour{grid-template-columns:1fr;gap:32px}.tour-tabs{grid-template-columns:repeat(4,1fr);gap:12px}.tour-tab p{display:none}.tour-tab h3{font-size:20px}}
@media (max-width:600px){.tour-tabs{grid-template-columns:1fr 1fr}}


/* Production fix: let grid/flex children shrink so wide (panning) shots scroll inside their card
   instead of stretching the page beyond the viewport on small screens. */
.tour>*,.tour-panels>*,.tour-panel,.proof>*,.split-hero>*,.pixie>*,figure.shot,.shot-stage{min-width:0}
@media (max-width:980px){.tour{grid-template-columns:minmax(0,1fr)}.tour-tabs>*{min-width:0}}
.moment-cap .shot-cap{margin-right:14px}