/* ═══ Link2Page · Preview page ═══
   Device frame, lock wall, sidebar cards, mobile purchase bar.
   Load order matters — index.html loads css files in numeric order. */

#previewPage{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto}

/* top sticky nav */
.prev-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;height:60px;background:rgba(8,11,18,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);gap:1rem}
.prev-nav-left{display:flex;align-items:center;gap:10px;min-width:0}
.prev-nav-tag{font-size:11px;background:rgba(108,99,255,.15);color:var(--accent2);padding:3px 10px;border-radius:20px;white-space:nowrap}

/* device-framed preview viewport — internal scrolling so animations run naturally */
.prev-device-bar{display:flex;justify-content:center;padding:14px 0 4px;background:var(--bg)}
.prev-device-toggle{display:inline-flex;background:var(--surface);border:1px solid var(--border2);border-radius:100px;padding:4px;gap:4px}
.prev-device-toggle button{font-family:var(--fb);font-size:13px;padding:8px 18px;border-radius:100px;border:none;background:transparent;color:var(--text3);cursor:pointer;transition:all .2s}
.prev-device-toggle button.on{background:var(--accent);color:#fff}
.prev-iframe-wrap{position:relative;margin:10px auto 0;overflow:hidden;height:76vh;min-height:480px;width:100%;transition:width .35s cubic-bezier(.22,1,.36,1),border-radius .35s}
.prev-iframe-wrap.mobile{width:min(400px,92vw);border:10px solid #1a1a26;border-radius:38px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
#lpFrame{width:100%;height:100%;border:none;display:block;background:#fff}

/* diagonal watermark */
.prev-wm{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden;display:flex;flex-direction:column;justify-content:space-around}
.prev-wm-row{display:flex;gap:100px;transform:rotate(-12deg);white-space:nowrap;padding:0 20px;opacity:.10}
.prev-wm-text{font-family:var(--fd);font-size:18px;font-weight:800;color:#6c63ff;letter-spacing:3px;text-transform:uppercase}

/* bottom lock wall — appears after 2 pages of free preview */
.prev-lock-wall{position:relative;background:linear-gradient(to bottom,transparent,var(--bg) 60px);padding-top:60px;padding-bottom:3rem;text-align:center;border-top:1px solid var(--border)}
.prev-lock-inner{max-width:420px;margin:0 auto;padding:0 1.5rem}
.prev-lock-inner h2{font-family:var(--fd);font-size:clamp(22px,4vw,32px);font-weight:800;letter-spacing:-0.5px;margin-bottom:.75rem}
.prev-lock-inner p{font-size:14px;color:var(--text2);margin-bottom:1.5rem;line-height:1.6}
.prev-lock-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:1.5rem}
.prev-pill{font-size:12px;padding:5px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--border2);color:var(--text2)}
.buy-btn{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;border:none;padding:14px 32px;border-radius:12px;font-size:16px;font-weight:700;font-family:var(--fb);cursor:pointer;transition:all .2s;box-shadow:0 0 30px rgba(108,99,255,.4);width:100%;max-width:320px}
.buy-btn:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(108,99,255,.6)}
.buy-btn:active{transform:scale(.98)}

/* sidebar cards */
.prev-layout{display:grid;grid-template-columns:1fr 300px;gap:2rem;max-width:1280px;margin:0 auto;padding:1.5rem 3vw 5rem}
@media(max-width:820px){.prev-layout{grid-template-columns:1fr}}
.sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.5rem;margin-bottom:1rem}
.sidebar-card h4{font-family:var(--fd);font-size:14px;font-weight:600;margin-bottom:.9rem}
.detail-row{display:flex;justify-content:space-between;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;gap:10px}
.detail-row:last-child{border-bottom:none}
.detail-key{color:var(--text3);flex-shrink:0}
.detail-val{color:var(--text);font-weight:500;text-align:right;font-size:12px}
.inc-list{display:flex;flex-direction:column;gap:9px}
.inc-item{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text2)}
.inc-icon{font-size:14px;flex-shrink:0;margin-top:1px}

/* mobile sticky bar at very bottom of screen — shows once user reaches lock wall */
.prev-mobile-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:25;background:rgba(8,11,18,.97);backdrop-filter:blur(16px);border-top:1px solid rgba(108,99,255,.3);padding:12px 20px;align-items:center;justify-content:space-between;gap:12px}
.prev-mobile-bar.show{display:flex}
@media(max-width:600px){.prev-mobile-bar{flex-direction:column;gap:8px;text-align:center}}