/* v248 · AX GROWTH "How it works": a step card can show the product screen for that step (behaviour in v248-shots.js).
   Wide windows with a mouse (scattered square cards, 1101px and up): the screen floats beside the card on hover or focus, a click pins it.
   Touch and narrow windows: the card or its hint opens a bottom sheet (phones) or a centred dialog (700px and up). */

/* ── Hint on the card. Stacked cards: top right, so no card changes height. Square cards: bottom left, in the empty half. ── */
#app .ps-field .ps-card .ps-shot{position:absolute;top:19px;right:18px;margin:0;--d:.6s}
@media (min-width:1101px){#app .ps-field .ps-card .ps-shot{position:static;margin:auto 0 0}}
#app .ps-field .ps-card.has-shot{cursor:pointer}   /* the whole card works as its hint */
#app .ps-shot-btn{position:relative;display:inline-flex;align-items:center;gap:7px;height:36px;margin:0;padding:0 15px 0 12px;border:1px solid rgba(255,255,255,.26);border-radius:999px;
 background:rgba(10,10,12,.46);color:rgba(255,255,255,.94);font:600 13px/1 var(--kr);letter-spacing:-.02em;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;
 transition:border-color .25s,background-color .25s,color .25s}
#app .ps-shot-btn::before{content:"";position:absolute;inset:-6px -4px}
#app .ps-shot-btn svg{flex:none;width:16px;height:16px;color:var(--fire)}
#app .ps-shot-btn:focus-visible{outline-offset:3px}
#app .ps-shot-btn.is-quiet:focus-visible{outline:0;box-shadow:none}   /* focus came back after a tap-opened screen was closed by tap */
#app .ps-shot-btn[aria-expanded="true"]{border-color:rgba(253,69,51,.9);background:rgba(253,69,51,.18);color:#fff}
@media (hover:hover){#app .ps-shot-btn:hover,#app .ps-field .ps-card.has-shot:hover .ps-shot-btn{border-color:rgba(253,69,51,.9);background:rgba(253,69,51,.18);color:#fff}}
/* One quiet cue after the card has appeared: two soft rings, then never again (the script marks the button) */
@keyframes psShotCue{0%{box-shadow:0 0 0 0 rgba(253,69,51,.5)}100%{box-shadow:0 0 0 11px rgba(253,69,51,0)}}
@media (prefers-reduced-motion:no-preference){#app .ps-field .ps-card.st-in .ps-shot-btn:not(.is-seen){animation:psShotCue 1.5s ease-out 1.7s 2}}

/* ── The layer that holds the screens ── */
.pshot{position:fixed;inset:0;z-index:95;pointer-events:none;font-family:var(--kr);-webkit-font-smoothing:antialiased}
.pshot[hidden]{display:none !important}
.pshot-fig{box-sizing:border-box;margin:0;overflow:hidden;pointer-events:auto;border:1px solid rgba(255,255,255,.17);border-radius:12px;background:#141416;
 box-shadow:0 34px 80px -20px rgba(0,0,0,.85),0 8px 24px -8px rgba(0,0,0,.6)}
.pshot-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 6px 0 12px;border-bottom:1px solid rgba(255,255,255,.08);background:#1c1c20}
.pshot-bar i{flex:none;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.pshot-bar-t{margin-left:auto;padding-right:6px;font:500 12.5px/1 var(--kr);letter-spacing:-.01em;color:rgba(255,255,255,.62);text-transform:capitalize;white-space:nowrap}
.pshot-view{position:relative;aspect-ratio:var(--ar);overflow:hidden;background:#f5f2eb}
.pshot-view img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .25s ease;-webkit-user-drag:none;user-select:none}
.pshot-view img.is-ld{opacity:1}
/* While the picture is on its way (slow connections): the empty panel is a shade darker and a light sheen crosses it. Its size is reserved either way. */
@keyframes pshotWait{0%{background-position:160% 0}100%{background-position:-60% 0}}
.pshot-view:not(.is-ld){background-color:#e7e3d9}
@media (prefers-reduced-motion:no-preference){.pshot-view:not(.is-ld){background-image:linear-gradient(100deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.85) 50%,rgba(255,255,255,0) 64%);background-size:220% 100%;background-repeat:no-repeat;animation:pshotWait 1.4s linear infinite}}
/* A picture that could not be downloaded shows its alt text instead; the next opening tries again */
.pshot-fig.is-err .pshot-view img{box-sizing:border-box;padding:16px;color:#4a494e;font:500 13px/1.6 var(--kr);letter-spacing:-.01em}
.pshot-fig figcaption{display:flex;align-items:center;gap:12px;min-height:34px;padding:7px 12px 8px;box-sizing:border-box;font:500 13px/1.4 var(--kr);letter-spacing:-.02em;color:rgba(255,255,255,.74)}
.pshot-fig figcaption>span{flex:1;min-width:0}
.pshot-fig.is-phone{padding:6px 6px 0;border-radius:22px}
.pshot-fig.is-phone .pshot-view{border-radius:16px}
.pshot-fig.is-phone figcaption{justify-content:center;text-align:center;padding:7px 6px 9px}
.pshot-fig.is-phone figcaption>span{flex:none}
.pshot-x{flex:none;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.82);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .2s,color .2s}
.pshot-x svg{width:16px;height:16px}
.pshot-x:hover{background:rgba(255,255,255,.1);color:#fff}
.pshot-x:focus-visible{outline:2px solid var(--fire);outline-offset:-2px}
.pshot.is-ptr .pshot-head .pshot-x:focus-visible{outline:0;box-shadow:none}   /* opened by a tap or click; the ring comes back with the first key press */
.pshot-bar .pshot-x{display:none;width:24px;height:24px}
.pshot-bar .pshot-x svg{width:12px;height:12px}
.pshot-zoom{flex:none;display:none;align-items:center;gap:6px;height:34px;margin:0;padding:0 12px 0 10px;border:1px solid rgba(255,255,255,.24);border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font:600 13px/1 var(--kr);letter-spacing:-.02em;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pshot-zoom svg{width:14px;height:14px;color:var(--fire)}
.pshot-zoom:focus-visible{outline:2px solid var(--fire);outline-offset:2px}

/* ── Wide windows with a mouse: screens float beside the card, placed by the script ── */
.pshot.is-pop .pshot-dim,.pshot.is-pop .pshot-head{display:none}
.pshot.is-pop .pshot-panel,.pshot.is-pop .pshot-body{display:contents}
.pshot.is-pop .pshot-fig{position:absolute;left:0;top:0;opacity:0;transform:translateY(8px) scale(.985);transition:opacity .18s ease,transform .26s cubic-bezier(.22,1,.36,1)}
.pshot.is-pop.is-on .pshot-fig{opacity:1;transform:none}
.pshot.is-pop.is-pinned .pshot-fig{border-color:rgba(253,69,51,.55)}
.pshot.is-pop.is-pinned .pshot-bar .pshot-x{display:grid}

/* ── Touch and narrow windows: a sheet from the bottom ── */
.pshot.is-sheet{z-index:120;display:flex;align-items:flex-end;justify-content:center;pointer-events:auto}
.pshot-dim{position:absolute;inset:0;background:rgba(4,4,6,.74);opacity:0;transition:opacity .28s ease;touch-action:none}
.pshot.is-on .pshot-dim{opacity:1}
.pshot.is-sheet .pshot-dim{cursor:pointer}
.pshot.is-sheet .pshot-panel{position:relative;display:flex;flex-direction:column;box-sizing:border-box;width:100%;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);padding-bottom:env(safe-area-inset-bottom);
 border:1px solid rgba(255,255,255,.16);border-bottom:0;border-radius:18px 18px 0 0;background:#101012;box-shadow:0 -24px 70px rgba(0,0,0,.7);
 transform:translateY(100%);transition:transform .36s cubic-bezier(.22,1,.36,1)}
.pshot.is-sheet.is-on .pshot-panel{transform:none}
.pshot-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 4px 18px}
.pshot-ttl{display:flex;align-items:baseline;gap:9px;margin:0;font:700 18px/1.2 var(--kr);letter-spacing:-.03em;color:#fff}
.pshot-ttl span{font:500 14px/1 var(--en);letter-spacing:.01em;color:var(--fire);text-transform:capitalize}
.pshot.is-sheet .pshot-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px;padding:4px 12px 14px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pshot.is-sheet .pshot-fig{flex:none;width:100%;box-shadow:none}
.pshot.is-sheet .pshot-fig.is-phone{align-self:center;width:min(100%,340px)}
.pshot.is-sheet .pshot-bar{height:22px}
.pshot.is-sheet .pshot-bar i{width:7px;height:7px}
.pshot.is-sheet .pshot-bar-t{display:none}
@media (max-width:699.98px){
 /* A phone cannot show a whole desktop window at a readable size: the picture stands as tall as the sheet allows (232px = the sheet's own rows plus a strip of page above it)
    and scrolls sideways; the fit button shows the whole window at the phone's width instead */
 .pshot.is-sheet .is-win .pshot-view{aspect-ratio:auto;height:max(180px,min(calc(100vh - 232px),440px));height:max(180px,min(calc(100dvh - 232px),440px));overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%)}
 .pshot.is-sheet .is-win .pshot-view.at-start{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 12px),transparent 100%)}
 .pshot.is-sheet .is-win .pshot-view.at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px);mask-image:linear-gradient(90deg,transparent 0,#000 12px)}
 .pshot.is-sheet .is-win .pshot-view.at-start.at-end{-webkit-mask-image:none;mask-image:none}
 .pshot.is-sheet .is-win .pshot-view:focus-visible{outline:2px solid var(--fire);outline-offset:-2px}
 .pshot.is-sheet .is-win .pshot-view img{width:auto;height:100%;aspect-ratio:var(--ar)}
 .pshot.is-sheet .is-win.is-fit .pshot-view{aspect-ratio:var(--ar);height:auto;overflow:hidden;-webkit-mask-image:none;mask-image:none}
 .pshot.is-sheet .is-win.is-fit .pshot-view img,.pshot.is-sheet .is-win.is-err .pshot-view img{width:100%}
 .pshot.is-sheet .pshot-zoom{display:inline-flex}
 .pshot.is-sheet .is-win figcaption{min-height:50px}
}
@media (min-width:700px){
 /* Tablets and narrow desktop windows: a centred dialog, the whole window fits */
 .pshot.is-sheet{align-items:center;padding:24px}
 .pshot.is-sheet .pshot-panel{width:min(768px,100%);max-height:100%;padding-bottom:0;border-bottom:1px solid rgba(255,255,255,.16);border-radius:16px;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .22s ease,transform .3s cubic-bezier(.22,1,.36,1)}
 .pshot.is-sheet.is-on .pshot-panel{opacity:1;transform:none}
 .pshot.is-sheet .pshot-body{padding:4px 16px 16px}
 .pshot.is-sheet.is-duo .pshot-body{flex-direction:row;align-items:flex-start;gap:14px}
 .pshot.is-sheet.is-duo .pshot-fig.is-win{flex:1;width:auto;min-width:0}
 .pshot.is-sheet.is-duo .pshot-fig.is-phone{align-self:flex-start;width:30%}
}
/* .is-now: set shortly after opening, so a fade that a busy machine never started cannot leave the screen invisible */
.pshot.is-now .pshot-fig,.pshot.is-now .pshot-panel,.pshot.is-now .pshot-dim{transition:none}
@media (prefers-reduced-motion:reduce){.pshot .pshot-fig,.pshot .pshot-panel,.pshot .pshot-dim,.pshot .pshot-view img{transition:none !important}}