/* ── Announcement popups ──────────────────────────────────────────────────
   Two queued modals: the new default photo model, then the hardware line-up.
   Built on the site's own tokens (--void-2, --grad-3, --hairline, the mono
   eyebrow) so they read as part of the page rather than as an ad dropped on
   top of it. Never stacked — the second waits for the first to close, because
   two dialogs at once get dismissed unread.
   ------------------------------------------------------------------------ */

.pop-ov{
  position:fixed; inset:0; z-index:900;
  background:rgba(3,4,10,.78); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  display:flex; align-items:center; justify-content:center; padding:22px;
  opacity:0; pointer-events:none; transition:opacity .32s ease;
}
.pop-ov.on{opacity:1; pointer-events:auto}

.pop{
  position:relative; width:100%; max-width:520px; max-height:calc(100vh - 44px);
  overflow:hidden auto; background:var(--void-2);
  border:1px solid var(--hairline); border-radius:var(--r-lg);
  box-shadow:var(--sh-card);
  transform:translateY(14px) scale(.985); opacity:0;
  transition:transform .38s cubic-bezier(.16,1,.3,1), opacity .38s ease;
}
.pop-ov.on .pop{transform:none; opacity:1}
.pop::before{content:''; position:absolute; inset:0 0 auto; height:2px; background:var(--grad-3)}

.pop-x{
  position:absolute; top:13px; right:13px; z-index:3;
  width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--hairline); border-radius:var(--r-pill);
  background:rgba(6,7,13,.55); color:var(--ink-dim);
  cursor:pointer; transition:.18s;
}
.pop-x:hover{color:var(--ink); border-color:var(--hairline-hi); background:rgba(6,7,13,.85)}

.pop-body{padding:30px 30px 24px}
.pop .eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 12px;
}
.pop h3{font-size:clamp(23px,3.4vw,29px); line-height:1.14; letter-spacing:-.02em; margin:0}
.pop p{color:var(--ink-dim); font-size:15px; line-height:1.55; margin:14px 0 0}
.pop strong{color:var(--ink); font-weight:600}

/* Keeps the dialog from collapsing on the one slide with no image —
   a panel that jumps size between slides reads as a glitch. */
.pop .slot-body{min-height:320px}

.pop-fig{
  margin:20px 0 0; border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden;
  background:var(--void-3);
}
.pop-fig img{display:block; width:100%}
.pop-fig figcaption{
  padding:9px 13px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em;
  color:var(--ink-mute); border-top:1px solid var(--hairline);
}

/* stat / option rows */
.pop-rows{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
.pop-rows li{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--hairline); border-radius:14px; background:var(--glass);
  padding:12px 15px; font-size:14.5px;
}
.pop-rows li b{font-weight:600}
.pop-rows li span{margin-left:auto; color:var(--ink-dim); font-family:var(--font-mono); font-size:12.5px}

/* the two machines */
.pop-kit{display:grid; gap:10px; margin-top:18px}
.pop-kit a{
  display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit;
  border:1px solid var(--hairline); border-radius:16px; background:var(--glass);
  padding:14px 16px; transition:.18s;
}
.pop-kit a:hover{border-color:var(--hairline-hi); background:var(--glass-2)}
.pop-kit .nm{font-size:15px; font-weight:600; letter-spacing:-.01em}
.pop-kit .sub{font-size:12.5px; color:var(--ink-mute); margin-top:2px}
.pop-kit .pr{margin-left:auto; text-align:right; white-space:nowrap}
.pop-kit .pr b{display:block; font-size:17px; font-weight:700}
.pop-kit .pr em{font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-mute)}

.pop-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:0 30px 28px;
}
.pop-dots{display:flex; align-items:center; gap:6px}
.pop-dots button{
  width:6px; height:6px; padding:0; border:0; border-radius:var(--r-pill);
  background:var(--hairline-hi); cursor:pointer; transition:.22s;
}
.pop-dots button.on{width:20px; background:var(--grad-3)}
.pop-foot .btn{margin-left:auto}
.pop-foot .btn-ghost{margin-left:0}

@media(max-width:560px){
  .pop-body{padding:26px 22px 20px}
  .pop-foot{padding:0 22px 24px}
}