/* ═══ Link2Page · Creation flow (steps 1-4) ═══
   Overlay pages, template picker cards, questions, product form, generating screen, mobile fixed CTA bar (body.lb-flow hides bottom nav). PITFALL: flow pages have a fadeUp animation whose transform breaks position:fixed inside them — use sticky.
   Load order matters — index.html loads css files in numeric order. */

.overlay-page{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);overflow-y:auto;animation:fadeUp .35s cubic-bezier(.22,1,.36,1) both}
.flow-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:1.6rem}
.step-dots{display:flex;gap:7px}
.ov-back{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px;font-weight:600;cursor:pointer;background:var(--surface2);border:1px solid var(--border2);font-family:var(--fb);padding:10px 18px;border-radius:100px;transition:all .2s;box-shadow:0 4px 14px rgba(0,0,0,.15)}
.ov-back:hover{border-color:var(--accent);color:var(--accent2);transform:translateX(-2px)}
.ov-back .ic{width:15px;height:15px}
.ov-nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;height:64px;background:color-mix(in srgb, var(--bg) 92%, transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.ov-back{display:flex;align-items:center;gap:8px;color:var(--text2);font-size:14px;cursor:pointer;background:none;border:none;font-family:var(--fb);transition:color .2s}
.ov-back:hover{color:var(--text)}
.ov-logo{font-family:var(--fd);font-weight:800;font-size:16px;color:var(--text)}
.ov-logo span{color:var(--accent)}
.step-dots{display:flex;align-items:center;gap:6px}
.sd{width:28px;height:3px;border-radius:2px;background:var(--surface2);transition:background .3s,width .3s}
.sd.active{width:40px;background:var(--accent)}
.sd.done{background:var(--green)}
.ov-inner{max-width:760px;margin:0 auto;padding:3rem 5vw 7rem}
@media(max-width:768px){.overlay-page{padding-bottom:92px}}
.ov-heading{margin-bottom:2.5rem}
.ov-heading h2{font-family:var(--fd);font-size:clamp(26px,4vw,42px);font-weight:800;letter-spacing:-1px;margin-bottom:.5rem}
.ov-heading p{color:var(--text2);font-size:15px}
.ov-cta-bar{position:sticky;bottom:0;z-index:400;background:color-mix(in srgb, var(--bg) 95%, transparent);backdrop-filter:blur(16px);border-top:1px solid var(--border);padding:1rem 5vw;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
/* flow pages: full-height column so the CTA bar always sits at the bottom, never mid-screen */
#pickerPage,#questionsPage,#productPage{flex-direction:column}
#pickerPage .ov-inner,#questionsPage .ov-inner,#productPage .ov-inner{flex:1 0 auto;width:100%}
@media(max-width:768px){
  /* focused flow: hide global bottom nav (bar has its own Back) and pin the CTA to the true bottom.
     NOTE: fixed is broken here — the page's fadeUp animation leaves a transform that turns
     fixed into absolute-in-scroller. sticky bottom:0 pins to the scrollport and is immune. */
  body.lb-flow .bottom-nav{display:none}
  body.lb-flow{padding-bottom:0}
  body.lb-flow #pickerPage,body.lb-flow #questionsPage,body.lb-flow #productPage{padding-bottom:0}
  .ov-cta-bar{flex-wrap:nowrap;gap:10px;padding:12px 4vw calc(12px + env(safe-area-inset-bottom))}
  .ov-cta-bar #tplPickerLabel,.ov-cta-bar #pfStatus{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
  .ov-cta-bar .qs-plabel{font-size:11px}
  .ov-cta-bar .qs-track{max-width:90px}
  .ov-cta-bar .back-btn{padding:11px 14px;font-size:13px;white-space:nowrap;flex-shrink:0}
  .ov-cta-bar .next-btn{padding:12px 18px;font-size:14px;white-space:nowrap;flex-shrink:0}
}

.back-btn{background:transparent;border:1px solid var(--border2);color:var(--text2);padding:10px 20px;border-radius:10px;font-size:14px;font-family:var(--fb);cursor:pointer;transition:all .18s}
.back-btn:hover{color:var(--text);background:var(--surface)}
.next-btn{background:var(--accent);color:#fff;border:none;padding:11px 28px;border-radius:10px;font-size:15px;font-weight:500;font-family:var(--fb);cursor:pointer;transition:all .2s;opacity:.35;pointer-events:none;box-shadow:0 0 30px rgba(108,99,255,.3)}
.next-btn.ready{opacity:1;pointer-events:all}
.next-btn.ready:hover{transform:translateY(-2px);box-shadow:0 0 50px rgba(108,99,255,.5)}
.chip-badge{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border2);border-radius:100px;padding:5px 14px;font-size:12px;color:var(--text2)}
.chip-badge strong{color:var(--text)}

.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.tpl-card{border:1.5px solid var(--border);border-radius:16px;overflow:hidden;cursor:pointer;transition:border-color .25s,transform .25s,box-shadow .25s;position:relative;background:var(--surface)}
.tpl-card:hover,.tpl-card:focus-visible{border-color:var(--border2);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.tpl-card.selected{border:2px solid var(--accent) !important;box-shadow:0 0 0 3px rgba(108,99,255,.25),0 20px 50px rgba(0,0,0,.5);transform:translateY(-4px)}
.tpl-sel-badge{position:absolute;top:10px;right:10px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;opacity:0;transition:opacity .2s;z-index:4}
.tpl-card.selected .tpl-sel-badge{opacity:1}
.tpl-info{padding:12px 14px;background:var(--surface)}
.tpl-info h4{font-family:var(--fd);font-size:14px;font-weight:600;margin-bottom:2px}
.tpl-info p{font-size:11px;color:var(--text3)}
.tpl-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.tpl-tag{font-size:10px;padding:2px 8px;border-radius:10px;font-weight:500}

/* ── animated preview clip: hover plays a scroll-through of a sample page ── */
.tpl-preview{height:172px;position:relative;overflow:hidden}
.tpl-clip{position:absolute;top:0;left:0;right:0;display:flex;flex-direction:column;will-change:transform}
.tpl-card:hover .tpl-clip,.tpl-card:focus-visible .tpl-clip{animation:clipScroll 5.5s cubic-bezier(.45,.05,.35,.95) infinite}
@keyframes clipScroll{0%,7%{transform:translateY(0)}44%,58%{transform:translateY(calc(-100% + 172px))}93%,100%{transform:translateY(0)}}
.tpl-play{position:absolute;bottom:8px;right:8px;font-size:10px;letter-spacing:.4px;background:rgba(8,11,18,.72);color:#e6e9f2;padding:3px 10px;border-radius:20px;backdrop-filter:blur(6px);opacity:.9;transition:opacity .2s;pointer-events:none;z-index:3}
.tpl-card:hover .tpl-play,.tpl-card:focus-visible .tpl-play{opacity:0}
@media(hover:none){.tpl-clip{animation:clipScroll 8s linear infinite}.tpl-play{display:none}}
@media(prefers-reduced-motion:reduce){.tpl-clip{animation:none !important}}

/* mini-page skeleton shared by all templates */
.mp-nav{height:20px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;flex-shrink:0}
.mp-logo{width:34px;height:5px;border-radius:2px}
.mp-navbtn{width:28px;height:10px;border-radius:5px}
.mp-hero{padding:18px 12px 14px;display:flex;flex-direction:column;align-items:center;gap:5px}
.mp-badge{width:46px;height:6px;border-radius:6px;opacity:.7}
.mp-h{width:74%;height:8px;border-radius:2px}
.mp-h2{width:52%}
.mp-sub{width:60%;height:4px;border-radius:2px;opacity:.45}
.mp-btn{width:58px;height:15px;border-radius:8px;margin-top:6px}
.mp-img{margin:0 12px;height:66px;border-radius:8px;flex-shrink:0}
.mp-feats{display:flex;gap:6px;padding:12px}
.mp-feat{flex:1;height:46px;border-radius:8px}
.mp-revs{display:flex;flex-direction:column;gap:6px;padding:0 12px 12px}
.mp-rev{height:26px;border-radius:6px}
.mp-cta{margin:0 12px 16px;height:54px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.mp-ctabtn{width:66px;height:15px;border-radius:8px}

/* per-template colour themes */
.mc-t1{background:#fff}.mc-t1 .mp-logo,.mc-t1 .mp-h{background:#111}.mc-t1 .mp-sub{background:#999}.mc-t1 .mp-badge{background:#ececec}.mc-t1 .mp-navbtn,.mc-t1 .mp-btn{background:#111}.mc-t1 .mp-img{background:linear-gradient(135deg,#e8e5df,#cfcabf)}.mc-t1 .mp-feat,.mc-t1 .mp-rev{background:#f4f2ee}.mc-t1 .mp-cta{background:#111}.mc-t1 .mp-ctabtn{background:#fff}
.mc-t2{background:radial-gradient(circle at 18% 12%,rgba(108,99,255,.4),transparent 45%),radial-gradient(circle at 85% 60%,rgba(34,211,238,.32),transparent 45%),#0d1024}.mc-t2 .mp-logo,.mc-t2 .mp-h{background:#fff}.mc-t2 .mp-sub{background:rgba(255,255,255,.5)}.mc-t2 .mp-badge{background:rgba(34,211,238,.35)}.mc-t2 .mp-navbtn,.mc-t2 .mp-btn,.mc-t2 .mp-ctabtn{background:linear-gradient(90deg,#6c63ff,#22d3ee)}.mc-t2 .mp-img{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}.mc-t2 .mp-feat,.mc-t2 .mp-rev{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.mc-t2 .mp-cta{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.mc-t3{background:#faf8f4}.mc-t3 .mp-logo,.mc-t3 .mp-h{background:#1a1a1a}.mc-t3 .mp-sub{background:#a89f8f}.mc-t3 .mp-badge{background:#e7e0d3}.mc-t3 .mp-navbtn,.mc-t3 .mp-btn{background:#1a1a1a;border-radius:0}.mc-t3 .mp-img{background:linear-gradient(160deg,#d9d2c5,#b8ad99);border-radius:0}.mc-t3 .mp-feat,.mc-t3 .mp-rev{background:#efeae2;border-radius:0}.mc-t3 .mp-cta{background:#1a1a1a;border-radius:0}.mc-t3 .mp-ctabtn{background:#faf8f4;border-radius:0}
.mc-t4{background:#0f0f0f}.mc-t4 .mp-logo,.mc-t4 .mp-h{background:#fff}.mc-t4 .mp-h{height:12px}.mc-t4 .mp-sub{background:rgba(255,255,255,.4)}.mc-t4 .mp-badge{background:#ffe600;opacity:1}.mc-t4 .mp-navbtn,.mc-t4 .mp-btn{background:#ffe600;border-radius:0}.mc-t4 .mp-img{background:repeating-linear-gradient(45deg,#181818 0 10px,#101010 10px 20px);border:1px solid rgba(255,230,0,.35);border-radius:0}.mc-t4 .mp-feat,.mc-t4 .mp-rev{background:#161616;border:1px solid rgba(255,230,0,.2);border-radius:0}.mc-t4 .mp-cta{background:#ffe600;border-radius:0}.mc-t4 .mp-ctabtn{background:#000;border-radius:0}
.mc-t5{background:#fff}.mc-t5 .mp-logo,.mc-t5 .mp-h{background:#1a1a1a}.mc-t5 .mp-sub{background:#8a8a8a}.mc-t5 .mp-badge{background:#c0392b;opacity:1;width:74px}.mc-t5 .mp-navbtn,.mc-t5 .mp-btn{background:#c0392b}.mc-t5 .mp-img{background:linear-gradient(135deg,#f2f2f2,#e0e0e0)}.mc-t5 .mp-feat{background:#f9f9f9;border:1px solid #eee}.mc-t5 .mp-rev{background:#fdecea}.mc-t5 .mp-cta{background:#c0392b}.mc-t5 .mp-ctabtn{background:#fff}
.mc-t6{background:#f6f4ee}.mc-t6 .mp-logo,.mc-t6 .mp-h{background:#1a2e24}.mc-t6 .mp-sub{background:#9aa89b}.mc-t6 .mp-badge{background:#dde8dc}.mc-t6 .mp-navbtn,.mc-t6 .mp-btn{background:#62795f;border-radius:20px}.mc-t6 .mp-img{background:linear-gradient(150deg,#dde8dc,#b7c9b3);border-radius:42% 58% 55% 45%/30% 30% 40% 40%}.mc-t6 .mp-feat,.mc-t6 .mp-rev{background:#e8f0eb;border-radius:12px}.mc-t6 .mp-cta{background:#2d4a3e;border-radius:16px}.mc-t6 .mp-ctabtn{background:#f6f4ee;border-radius:20px}
.mc-t7{background:#0c0b09}.mc-t7 .mp-logo,.mc-t7 .mp-h{background:#f4ead8}.mc-t7 .mp-sub{background:rgba(212,180,131,.55)}.mc-t7 .mp-badge{background:rgba(212,180,131,.4)}.mc-t7 .mp-navbtn,.mc-t7 .mp-btn{background:#d4b483;border-radius:0}.mc-t7 .mp-img{background:linear-gradient(160deg,#1c1812,#2a2318);border:1px solid rgba(212,180,131,.4);border-radius:0}.mc-t7 .mp-feat,.mc-t7 .mp-rev{background:rgba(212,180,131,.07);border:1px solid rgba(212,180,131,.22);border-radius:0}.mc-t7 .mp-cta{background:transparent;border:1px solid rgba(212,180,131,.5);border-radius:0}.mc-t7 .mp-ctabtn{background:#d4b483;border-radius:0}
.mc-t8{background:#fff3c4}.mc-t8 .mp-logo,.mc-t8 .mp-h{background:#2d2d2d}.mc-t8 .mp-sub{background:#b09a4e}.mc-t8 .mp-badge{background:#4ecdc4;opacity:1}.mc-t8 .mp-navbtn,.mc-t8 .mp-btn{background:#ff6b9d;border:1.5px solid #2d2d2d;box-shadow:2px 2px 0 #2d2d2d}.mc-t8 .mp-img{background:linear-gradient(135deg,#ffd166,#ffb347);border:1.5px solid #2d2d2d}.mc-t8 .mp-feat{background:#fff;border:1.5px solid #2d2d2d;border-radius:10px}.mc-t8 .mp-rev{background:#ffe08a;border-radius:10px}.mc-t8 .mp-cta{background:#ff6b9d;border:1.5px solid #2d2d2d;box-shadow:3px 3px 0 #2d2d2d}.mc-t8 .mp-ctabtn{background:#fff}

.q-block{margin-bottom:2rem}
.q-label{font-family:var(--fd);font-size:17px;font-weight:600;margin-bottom:.35rem;display:flex;align-items:center;gap:10px}
.q-num{width:26px;height:26px;border-radius:50%;background:rgba(108,99,255,.15);color:var(--accent2);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.q-hint{font-size:13px;color:var(--text3);margin-bottom:.85rem;margin-left:36px}
.q-chips{display:flex;flex-wrap:wrap;gap:9px;margin-left:36px}
.q-chip{padding:8px 16px;border-radius:100px;border:1px solid var(--border2);background:var(--surface);color:var(--text2);font-size:13px;cursor:pointer;transition:all .15s;font-family:var(--fb);user-select:none}
.q-chip:hover{border-color:rgba(108,99,255,.5);color:var(--text)}
.q-chip.sel{border-color:var(--accent);background:rgba(108,99,255,.12);color:var(--accent2);font-weight:500}
.q-chip.sel::before{content:'✓ '}
.q-open{margin-left:36px;width:calc(100% - 36px);background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:var(--fb);font-size:14px;border-radius:12px;padding:12px 16px;resize:vertical;min-height:72px;transition:border-color .2s;outline:none;margin-top:10px;box-sizing:border-box}
.q-open:focus{border-color:var(--accent)}
.q-open::placeholder{color:var(--text3)}
.q-divider{height:1px;background:var(--border);margin:2rem 0}
.qs-progress-wrap{display:flex;align-items:center;gap:10px;flex:1}
.qs-track{flex:1;max-width:200px;height:4px;background:var(--surface2);border-radius:2px;overflow:hidden}
.qs-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--cyan));border-radius:2px;width:0%;transition:width .4s}
.qs-plabel{font-size:12px;color:var(--text3);white-space:nowrap}
.qs-summary{display:none;margin-top:1.5rem;background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:1.25rem 1.5rem;animation:fadeUp .4s ease both}
.qs-summary.show{display:block}
.qs-sum-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.qs-sum-row:last-child{border-bottom:none}
.qs-sum-key{color:var(--text3)}
.qs-sum-val{color:var(--text);font-weight:500;text-align:right;max-width:60%}

.pf-group{display:flex;flex-direction:column;gap:6px}
.pf-label{font-size:13px;color:var(--text2);font-weight:500}
.pf-input{background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:var(--fb);font-size:14px;border-radius:12px;padding:11px 16px;outline:none;transition:border-color .2s;width:100%;box-sizing:border-box;resize:vertical}
.pf-input:focus{border-color:var(--accent)}
.pf-input::placeholder{color:var(--text3)}
.pf-apikey-box{background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.2);border-radius:14px;padding:1.25rem 1.25rem 1rem}
.pf-note{font-size:12px;color:var(--text3);padding:10px 14px;background:rgba(108,99,255,.06);border:1px solid rgba(108,99,255,.15);border-radius:10px;line-height:1.6}
.pf-url-zone{border:1.5px dashed var(--border2);border-radius:20px;padding:2.5rem 2rem;text-align:center;transition:border-color .25s,background .25s}
.pf-url-zone.has-url{border-color:var(--accent);border-style:solid;background:rgba(108,99,255,.04)}
.pf-url-input{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--border2);color:var(--text);font-family:var(--fb);font-size:15px;border-radius:12px;padding:13px 18px;outline:none;transition:border-color .2s;text-align:center}
.pf-url-input:focus{border-color:var(--accent)}
.pf-url-input::placeholder{color:var(--text3);font-size:13px}
.pf-pull{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 14px;font-size:13px;color:var(--text2)}
.pf-pull span{font-size:18px}
.pf-toggle{background:none;border:none;color:var(--text2);font-size:13px;cursor:pointer;font-family:var(--fb);padding:6px 0;transition:color .2s}
.pf-toggle:hover{color:var(--text)}
.pf-helper{margin-top:14px;padding:1.25rem;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.pf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.pf-grid{grid-template-columns:1fr}}

#generatingPage{display:none;position:fixed;inset:0;z-index:200;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem}
.gen-ring{width:80px;height:80px;border-radius:50%;margin:0 auto 2rem;border:3px solid var(--surface2);border-top-color:var(--accent);border-right-color:var(--cyan);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.gen-title{font-family:var(--fd);font-size:26px;font-weight:700;margin-bottom:.5rem}
.gen-step-msg{font-size:15px;color:var(--accent2);min-height:24px;margin-bottom:2rem}
.gen-steps{display:flex;flex-direction:column;gap:10px;max-width:360px;width:100%}
.gen-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:14px;color:var(--text3);transition:all .4s}
.gen-row.active{border-color:rgba(108,99,255,.4);color:var(--text2);background:rgba(108,99,255,.06)}
.gen-row.done{border-color:rgba(52,211,153,.3);color:var(--green);background:rgba(52,211,153,.05)}
.gen-dot{width:8px;height:8px;border-radius:50%;background:var(--surface2);flex-shrink:0;transition:background .3s}
.gen-row.active .gen-dot{background:var(--accent);animation:pulse 1s infinite}
.gen-row.done .gen-dot{background:var(--green);animation:none}