/* PostLoft landing page. Scoped under body.pp-page. Loaded only on /postloft/. */
body.pp-page{background:#f7f5ff}
body.pp-page h1,body.pp-page h2,body.pp-page h3{font-family:"Bricolage Grotesque","Lato",sans-serif;letter-spacing:-.03em}
.logo-mark{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.15em;flex:none}
.reveal{opacity:0;transform:translateY(18px);animation:pp-in .7s ease forwards}
.reveal.d2{animation-delay:.12s}.reveal.d3{animation-delay:.24s}
@keyframes pp-in{to{opacity:1;transform:none}}
@keyframes pp-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---------- hero ---------- */
.v2-hero{position:relative;overflow:hidden;color:#fff;background:#07130e;padding:64px 0 0}
.v2-hero h1,.v2-hero h2,.v2-hero p{color:#fff}
.mesh{position:absolute;inset:0;pointer-events:none}
.mesh i{position:absolute;border-radius:50%;filter:blur(30px);opacity:.9}
.mesh i:nth-child(1){width:480px;height:480px;background:#0B9444;left:-260px;top:-260px;opacity:.75}
.mesh i:nth-child(2){width:460px;height:460px;background:#7C5CFC;right:-80px;top:-160px;opacity:.75}
.mesh i:nth-child(3){width:380px;height:380px;background:#FF4D8D;right:12%;bottom:-200px;opacity:.55}
.mesh i:nth-child(4){width:300px;height:300px;background:#FF8A3D;left:30%;top:40%;opacity:.4}
.mesh i:nth-child(5){width:280px;height:280px;background:#3B82F6;left:8%;bottom:-80px;opacity:.45}
.v2-hero .wrap{position:relative;z-index:1}
.v2-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;padding-bottom:36px}
.v2-kicker{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);padding:.35rem .7rem;border-radius:999px;margin:0 0 1.1rem}
.v2-kicker b{color:#b6ffd0}
.v2-hero h1{font-size:clamp(2.7rem,5.4vw,4.5rem);line-height:.98;font-weight:800;margin:0 0 1rem;max-width:14ch}
.v2-hero h1 em{font-style:normal;background:linear-gradient(100deg,#b6ffd0,#d9c8ff 55%,#ffd0e0);-webkit-background-clip:text;background-clip:text;color:transparent}
.v2-sub{font-size:1.12rem;line-height:1.55;color:rgba(255,255,255,.88);max-width:46ch;margin:0 0 1.5rem}
.v2-cta{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.v2-hero .btn-primary{background:#0B9444;box-shadow:0 10px 30px -12px rgba(11,148,68,.9);padding:1.05rem 1.4rem;font-size:1.05rem}
.v2-hero .btn-primary:hover{background:#087535}
.v2-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.v2-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}
.v2-fine{margin:1rem 0 0;font-size:.86rem;color:rgba(255,255,255,.75)}
.v2-fine b{color:#fff}

/* floating mock stage */
.stage{position:relative;height:640px}
.stage .mk{box-shadow:0 22px 44px -18px rgba(0,0,0,.5)}
.stage .f-ig,.stage .f-li,.stage .f-x{position:absolute;animation:pp-float 7s ease-in-out infinite}
.stage .f-ig{left:0;top:0;width:246px;z-index:2}
.stage .f-li{right:0;top:18px;width:250px;z-index:1;animation-delay:-2.4s}
.stage .f-x{left:28px;bottom:6px;width:280px;z-index:3;animation-delay:-4s}
.stage .scene{aspect-ratio:4/3;max-height:148px}
.stage .scene-wide{max-height:108px}
.stage .mk-cap{font-size:.8rem;max-height:4.6em;overflow:hidden}

/* works-with */
.works{position:relative;z-index:1;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;padding:16px 0 20px;border-top:1px solid rgba(255,255,255,.14);margin-top:8px}
.works span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.works ul{display:flex;gap:1.3rem;list-style:none;padding:0;margin:0;flex-wrap:wrap;align-items:center}
.works li{display:flex;align-items:center;gap:.45rem;margin:0;color:#fff;font-weight:700;font-size:.92rem}
.works .logo-mark{width:18px;height:18px}
.works .on-dark .logo-mark{filter:brightness(0) invert(1)}

/* ---------- post mockups ---------- */
.mk{background:#fff;color:#1c1e21;border-radius:16px;overflow:hidden;border:1px solid rgba(15,23,42,.08)}
.mk b,.mk strong{color:inherit}
.mk-top{display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem}
.mk-top .who{min-width:0}
.mk-top b{display:block;font-size:.9rem;line-height:1.15}
.mk-top small{display:block;color:#65676b;font-size:.75rem}
.mk .logo-mark{margin-left:auto;width:18px;height:18px}
.av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;flex:none;font-size:.95rem}
.av-ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b 55%,#6228d7)}
.av-li{background:#0A66C2;border-radius:8px}
.av-fb{background:#0866FF}
.av-x{background:#111}
.scene{position:relative;aspect-ratio:1;overflow:hidden}
.scene-wide{aspect-ratio:16/9}
.scene-bun{background:radial-gradient(circle at 50% 58%,#f6d7a7 0 18%,transparent 19%),radial-gradient(circle at 50% 46%,#e8a15a 0 34%,#c46b2c 35% 46%,transparent 47%),linear-gradient(160deg,#f8e7cf,#e7b07a 40%,#f3d2a4)}
.scene-bun::after{content:"";position:absolute;left:32%;top:30%;width:36%;height:28%;border-radius:50%;border:6px solid rgba(255,236,210,.75);border-bottom-color:transparent;transform:rotate(-20deg)}
.scene-loaf{background:linear-gradient(#f4e7d4,#e7d3b4);background-image:linear-gradient(#f4e7d4,#e7d3b4)}
.scene-loaf::before{content:"";position:absolute;left:12%;right:12%;bottom:16%;height:58%;border-radius:80px 80px 30px 30px;background:linear-gradient(#c9844a,#8d4b24);box-shadow:inset 0 -12px 0 rgba(255,220,170,.25)}
.scene-loaf::after{content:"";position:absolute;left:28%;right:28%;bottom:42%;height:10px;border-radius:8px;background:repeating-linear-gradient(90deg,#f0c48a 0 10px,#8d4b24 10px 14px);transform:skewX(-8deg)}
.scene-cafe{background:linear-gradient(180deg,#f8e6d4,#f3d3b4)}
.scene-cafe::before{content:"";position:absolute;left:28%;top:20%;width:38%;height:52%;background:#fff;border-radius:6px 6px 16px 16px;box-shadow:inset 0 -22px 0 #6f3b22}
.scene-cafe::after{content:"";position:absolute;left:62%;top:28%;width:16%;height:22%;border:5px solid #6f3b22;border-left:0;border-radius:0 16px 16px 0}
.scene-cake{background:linear-gradient(180deg,#ffe8f1,#fff5e8)}
.scene-cake::before{content:"";position:absolute;left:22%;right:22%;bottom:18%;height:46%;border-radius:8px 8px 14px 14px;background:linear-gradient(#ff8fb8,#e35d8c);box-shadow:0 -28px 0 -6px #fff,0 -46px 0 -8px #f6c14b}
.scene-cake::after{content:"";position:absolute;left:48%;bottom:62%;width:8px;height:34px;background:#6b3a22;border-radius:4px;box-shadow:0 -16px 0 6px #ff5a3c}
.mk-bar{display:flex;gap:.7rem;padding:.55rem .8rem .15rem;color:#262626}
.mk-bar svg{width:22px;height:22px}
.mk-bar .sp{margin-left:auto}
.mk-cap{padding:.15rem .9rem .2rem;font-size:.88rem;line-height:1.45;white-space:pre-line}
.mk-cap b{margin-right:.3rem}
.mk-hash{padding:0 .9rem .6rem;color:#00376b;font-size:.82rem}
.mk-foot{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem .8rem .7rem;border-top:1px solid #f0f2f5;font-size:.78rem;color:#65676b}
.mk-li .mk-cap,.mk-fb .mk-cap,.mk-x .mk-cap{color:#1c1e21}
.mk-li{border-radius:12px}
.mk-react{display:flex;gap:1rem;padding:.35rem .9rem .7rem;color:#65676b;font-size:.8rem;font-weight:700}
.mk-x{border-radius:16px}
.mk-x .mk-cap{font-size:.95rem;padding-top:.2rem}
.idea{margin:.55rem .2rem 0;font-size:.8rem;color:#5c6570}
.idea b{color:#111}

/* ---------- generator ---------- */
.v2-tool{position:relative;padding:72px 0;background:linear-gradient(180deg,#fff,#f4fbf6 40%,#fff)}
.v2-tool-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:2.5rem;align-items:start}
.v2-tool h2{font-size:clamp(1.8rem,3vw,2.6rem);margin:.3rem 0 .6rem}
.grad{background:linear-gradient(100deg,#0B9444,#7C5CFC 60%,#FF4D8D);-webkit-background-clip:text;background-clip:text;color:transparent}
.pp-tool{background:#fff;border:1px solid #e6e2f2;border-radius:20px;padding:1.3rem 1.3rem 1rem;box-shadow:0 20px 50px -28px rgba(88,60,180,.45)}
.pp-tool-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.9rem;font-weight:800}
.pp-dot{width:10px;height:10px;border-radius:50%;background:#0B9444;box-shadow:0 0 0 5px rgba(11,148,68,.18)}
.pp-quota{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;color:#087535;background:#eefbf3;border:1px solid rgba(11,148,68,.25);padding:.25rem .6rem;border-radius:999px}
.pp-f{display:block;margin:0 0 .75rem}
.pp-f>span{display:block;font-size:.82rem;font-weight:800;margin-bottom:.28rem;color:#14181f}
.pp-f>span i{font-style:normal;font-weight:500;color:#6b7280}
.pp-f input[type=text],.pp-f textarea,.pp-f select{width:100%;font:inherit;font-size:.95rem;color:#14181f;background:#fff;border:1px solid #e3e0ea;border-radius:10px;padding:.62rem .75rem}
.pp-f textarea{resize:vertical;min-height:72px;line-height:1.45}
.pp-f input:focus,.pp-f textarea:focus,.pp-f select:focus{outline:none;border-color:#7C5CFC;box-shadow:0 0 0 3px rgba(124,92,252,.18)}
.pp-row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.pp-plats{display:flex;flex-wrap:wrap;gap:.4rem}
.pp-plat{position:relative;cursor:pointer}
.pp-plat input{position:absolute;opacity:0}
.pp-plat span{display:inline-flex;align-items:center;gap:.4rem;font-size:.86rem;font-weight:800;padding:.42rem .75rem;border:1px solid #e3e0ea;border-radius:999px;color:#4b5563;background:#fff}
.pp-plat input:checked+span{background:#14181f;color:#fff;border-color:#14181f}
.pp-plat input:checked+span .logo-mark{filter:brightness(0) invert(1)}
.pp-plat input:focus-visible+span{outline:3px solid rgba(124,92,252,.45);outline-offset:2px}
.pp-go{width:100%;margin-top:.2rem;padding:1rem 1.2rem;font-size:1.05rem;border-radius:12px}
.pp-go.loading{opacity:.85;cursor:progress}
.pp-tool-foot{display:flex;justify-content:space-between;gap:.6rem;margin-top:.65rem;font-size:.8rem;color:#6b7280;flex-wrap:wrap}
.pp-link{background:none;border:0;padding:0;font:inherit;font-weight:800;color:#087535;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pp-codebox{background:#f6f3ff;border:1px dashed #c4b5fd;border-radius:12px;padding:.75rem .8rem .15rem;margin-bottom:.7rem}
.pp-codemsg{font-size:.85rem;margin:-.2rem 0 .55rem}.pp-codemsg.ok{color:#087535;font-weight:800}.pp-codemsg.bad{color:#DC2626}
.pp-err{color:#DC2626;font-weight:800;font-size:.9rem;margin:.6rem 0 0}

/* ---------- output ---------- */
.v2-out{padding:64px 0 72px;background:linear-gradient(180deg,#fff7fb,#f4f0ff 40%,#f3fbf6)}
.v2-out-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.v2-out-head h2{font-size:clamp(1.6rem,3vw,2.3rem);margin:0 0 .2rem}
.pp-actions{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.pp-export{display:flex;border:1px solid #0B9444;border-radius:10px;overflow:hidden;background:#fff}
.pp-export select{border:0;font:inherit;font-size:.86rem;padding:0 .55rem;background:#fff}
.pp-progress{margin:0 0 1rem}.pp-progress>div{height:8px;background:#e7e3f5;border-radius:99px;overflow:hidden}
.pp-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#0B9444,#7C5CFC);transition:width .4s}
.pp-progress p{font-family:var(--f-mono);font-size:.75rem;color:#6b7280;margin:.35rem 0 0}
.pp-cal{margin-bottom:1.3rem;overflow-x:auto}
.pp-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));gap:4px;min-width:660px}
.pp-cal-h{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;color:#6b7280;padding:0 .25rem .15rem}
.pp-cal-d{background:#fff;border:1px solid #eceaf3;border-radius:8px;min-height:62px;padding:.28rem}
.pp-cal-d.has{background:#fbfaff;border-color:#ddd6fe}
.pp-cal-n{font-family:var(--f-mono);font-size:.66rem;color:#9aa1ab}
.pp-cal-item{display:block;text-decoration:none;color:#14181f;background:#efe9ff;border-left:3px solid #7C5CFC;border-radius:4px;padding:.12rem .3rem;margin-top:.15rem;font-size:.7rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-cal-item b{font-family:var(--f-mono);color:#5b21b6}
.pp-switch{display:flex;gap:.3rem;margin-bottom:.55rem}
.pp-tab{display:inline-flex;align-items:center;gap:.3rem;background:#fff;border:1px solid #e6e2f2;border-radius:999px;font:inherit;font-size:.78rem;font-weight:800;color:#4b5563;padding:.28rem .6rem;cursor:pointer}
.pp-tab.on{background:#14181f;color:#fff;border-color:#14181f}
.pp-tab.on .logo-mark{filter:brightness(0) invert(1)}
.pp-tab .logo-mark{width:14px;height:14px}
.pp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem;align-items:start}
.pp-post{scroll-margin-top:90px}
.pp-post:target .mk{box-shadow:0 0 0 3px #7C5CFC}
.pp-copybtn{font:inherit;font-size:.8rem;font-weight:800;padding:.35rem .7rem;border-radius:8px;border:1px solid #0B9444;background:#fff;color:#087535;cursor:pointer}
.pp-copybtn:hover,.pp-copybtn.ok{background:#0B9444;color:#fff}
.pp-note{display:flex;gap:.45rem;align-items:flex-start;font-size:.86rem;color:#4b5563;margin:1.1rem 0 0}
.pp-note svg{width:18px;height:18px;flex:none;margin-top:3px}
.pp-upsell{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;padding:1.3rem 1.4rem;border-radius:16px;background:linear-gradient(120deg,#0B9444,#087535 40%,#5b21b6);color:#fff}
.pp-upsell h3,.pp-upsell p{color:#fff;margin:0}
.pp-upsell h3{margin-bottom:.2rem}
.pp-upsell .btn-primary{background:#fff;color:#087535}
.pp-upsell .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

/* ---------- sections ---------- */
.v2-sec{padding:80px 0}
.v2-sec h2{font-size:clamp(1.8rem,3.2vw,2.7rem);margin:.2rem 0 .5rem}
.soft{background:#fff}
.wash{background:linear-gradient(180deg,#fff,#f7f4ff)}
.sand{background:linear-gradient(180deg,#fff8f1,#fff)}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;list-style:none;padding:0;margin:1.6rem 0 0}
.steps3 li{margin:0;border-radius:18px;padding:1.4rem 1.3rem 1.3rem;color:#fff;min-height:190px}
.steps3 h3{color:#fff;font-size:1.25rem;margin:.8rem 0 .35rem}
.steps3 p{margin:0;color:rgba(255,255,255,.92)}
.steps3 .n{font-family:var(--f-mono);font-size:.8rem;opacity:.85}
.s1{background:linear-gradient(160deg,#0B9444,#14b866)}
.s2{background:linear-gradient(160deg,#7C5CFC,#a78bfa)}
.s3{background:linear-gradient(160deg,#FF8A3D,#ff5d8f)}
.step-ico{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.step-ico svg{width:22px;height:22px}
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.5rem}
.feat{background:#fff;border:1px solid #eeeaf8;border-radius:16px;padding:1.15rem 1.15rem 1rem;box-shadow:0 10px 30px -24px rgba(40,20,80,.5);transition:transform .2s,box-shadow .2s}
.feat:hover{transform:translateY(-3px);box-shadow:0 16px 36px -22px rgba(40,20,80,.45)}
.feat .blob{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;margin-bottom:.7rem}
.feat h3{font-size:1.05rem;margin:0 0 .25rem}
.feat p{margin:0;color:#4b5563;font-size:.95rem}
.b1{background:#0B9444}.b2{background:#7C5CFC}.b3{background:#FF4D8D}.b4{background:#FF8A3D}.b5{background:#3B82F6}.b6{background:#111}

.flow{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:center;margin-top:1.6rem}
.browser{background:#fff;border:1px solid #eceaf3;border-radius:16px;overflow:hidden;box-shadow:0 16px 40px -28px rgba(0,0,0,.4)}
.browser .bar{display:flex;gap:.35rem;align-items:center;padding:.55rem .7rem;background:#f6f5fb;border-bottom:1px solid #eceaf3}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.browser .bar i:nth-child(2){background:#febc2e}.browser .bar i:nth-child(3){background:#28c840}
.browser .url{margin-left:.4rem;font-family:var(--f-mono);font-size:.72rem;color:#6b7280;background:#fff;border-radius:6px;padding:.15rem .5rem}
.browser .body{padding:1rem 1.1rem 1.2rem}
.browser h3{font-size:1.15rem;margin:0 0 .4rem}
.browser p{font-size:.9rem;color:#4b5563;margin:0 0 .4rem}
.arrow{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0B9444,#7C5CFC);color:#fff;font-size:1.4rem;box-shadow:0 10px 24px -12px #7C5CFC}
.month{background:#fff;border-radius:16px;padding:1rem;border:1px solid #eceaf3;box-shadow:0 16px 40px -28px rgba(0,0,0,.4)}
.month h3{margin:0 0 .7rem;font-size:1.05rem}
.chips{display:grid;gap:.4rem}
.chips div{display:flex;gap:.5rem;align-items:center;background:#faf8ff;border-radius:10px;padding:.45rem .6rem;font-size:.86rem;font-weight:700}
.chips .logo-mark{width:16px;height:16px}

.plats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem;margin-top:1.4rem}
.plats .mk{max-width:420px}
.eg-note{font-size:.9rem;color:#4b5563;max-width:70ch}

.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.5rem;align-items:stretch}
.tier{background:#fff;border:1px solid #eceaf3;border-radius:18px;padding:1.3rem 1.25rem 1.2rem;display:flex;flex-direction:column;box-shadow:0 12px 30px -24px rgba(0,0,0,.35)}
.tier .tag{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:#6b7280}
.tier .price{font-family:"Bricolage Grotesque",Lato,sans-serif;font-weight:800;font-size:2.6rem;letter-spacing:-.03em;margin:.35rem 0 .1rem;color:#14181f}
.tier .per{font-size:.85rem;color:#6b7280;margin-bottom:.8rem}
.tier ul{list-style:none;padding:0;margin:0 0 1.1rem}
.tier li{display:flex;gap:.45rem;margin:.35rem 0;font-size:.95rem}
.tier li::before{content:"✓";color:#0B9444;font-weight:800}
.tier .btn{margin-top:auto}
.tier.hot{background:linear-gradient(#fff,#fff) padding-box,linear-gradient(160deg,#0B9444,#7C5CFC,#FF4D8D) border-box;border:2px solid transparent;transform:translateY(-6px);box-shadow:0 20px 40px -24px rgba(124,92,252,.6)}
.tier.hot .tag{color:#7C5CFC;font-weight:700}

.faq-wrap{max-width:760px}
.faq details{background:#fff;border:1px solid #eceaf3;border-radius:14px;padding:0 1.1rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:800;padding:1rem 1.6rem 1rem 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);color:#7C5CFC;font-size:1.3rem}
.faq details[open] summary::after{content:"–"}
.faq details>div{color:#4b5563;padding-bottom:1rem}

.finale{position:relative;overflow:hidden;border-radius:24px;padding:3rem 2.2rem;background:#07130e;color:#fff}
.finale h2,.finale p{color:#fff}
.finale h2{font-size:clamp(1.8rem,4vw,2.8rem);max-width:16ch;margin:0 0 .6rem}
.finale p{max-width:46ch;color:rgba(255,255,255,.88)}
.finale .mesh{opacity:.9}

.pp-modal{position:fixed;inset:0;z-index:200;background:rgba(10,8,20,.6);display:flex;align-items:center;justify-content:center;padding:1rem}
.pp-modal[hidden]{display:none}
.pp-modal-card{background:#fff;border-radius:18px;max-width:440px;width:100%;padding:1.5rem;position:relative;max-height:92vh;overflow:auto}
.pp-modal-card h3{font-size:1.4rem;margin:.2rem 0}
.pp-modal-price{color:#4b5563}.pp-modal-price b{font-size:1.6rem;color:#14181f}
.pp-modal-small{font-size:.8rem;color:#6b7280}
.pp-x{position:absolute;top:.7rem;right:.7rem;width:34px;height:34px;border-radius:50%;border:1px solid #eceaf3;background:#fff;cursor:pointer}
.pp-fallback ol{padding-left:1.15rem;margin:0 0 1rem}
.pp-ok{font-weight:800;color:#087535;font-size:1.1rem}
.pp-code{display:flex;gap:.5rem;align-items:center;background:#f3fbf6;border:1px dashed #0B9444;border-radius:12px;padding:.7rem .8rem}
.pp-code code{font-family:var(--f-mono);font-size:1.05rem;font-weight:700;flex:1}

@media (max-width:980px){
  .v2-grid,.v2-tool-grid,.flow{grid-template-columns:1fr}
  .stage{height:auto;display:grid;gap:.8rem}
  .stage .mk,.stage .f-ig,.stage .f-li,.stage .f-x{position:static;width:100%;max-width:420px;animation:none}
  .stage .scene,.stage .scene-wide{max-height:none;aspect-ratio:1}
  .arrow{transform:rotate(90deg);margin:0 auto}
  .steps3,.feats,.tiers,.plats{grid-template-columns:1fr 1fr}
  .tier.hot{transform:none}
}
@media (max-width:640px){
  .v2-hero{padding:28px 0 0}
  .v2-kicker{font-size:.66rem;letter-spacing:.04em}
  .v2-hero h1{font-size:2.35rem}
  .v2-sub{font-size:1rem}
  .steps3,.feats,.tiers,.plats{grid-template-columns:1fr}
  .works{gap:.7rem}
  .pp-actions,.pp-export{width:100%}
  .finale{padding:2rem 1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .stage .mk{animation:none}
  .feat{transition:none}
}

.pp-points{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.4rem}
.pp-points li{display:flex;gap:.5rem;align-items:flex-start;margin:0;font-weight:700}
.pp-points svg{width:18px;height:18px;flex:none;margin-top:3px;color:#0B9444}

.demo-shot{position:relative}
.demo-logo{position:absolute;top:8px;left:8px;width:28px;height:28px;border-radius:8px;background:#fff;color:#0B9444;font-weight:800;display:grid;place-items:center;font-size:.8rem;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.demo-head{position:absolute;left:8px;right:8px;bottom:28px;color:#fff;font-family:"Bricolage Grotesque",Lato,sans-serif;font-weight:800;font-size:.95rem;line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.55)}
.scene-wide .demo-head{bottom:10px;font-size:.82rem}
.demo-cta{position:absolute;left:8px;bottom:8px;background:#F4A261;color:#14202b;font-size:.68rem;font-weight:800;border-radius:99px;padding:.12rem .45rem}
.scene::after{pointer-events:none}
.pp-brand{background:#f7f5ff;border:1px solid #e4def6;border-radius:14px;padding:.75rem .8rem .2rem;margin:.2rem 0 .8rem}
.pp-brand-top{display:flex;justify-content:space-between;gap:.6rem;align-items:baseline;margin-bottom:.55rem}
.pp-brand-top b{font-size:.9rem}
.pp-brand-top span{font-size:.75rem;color:#6b7280;text-align:right}
.pp-brand-row{display:flex;gap:.55rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:.4rem}
.pp-logo-up{position:relative;width:54px;height:54px;border-radius:12px;border:1px dashed #c4b5fd;background:#fff;overflow:hidden;cursor:pointer;display:grid;place-items:center;flex:none}
.pp-logo-up img{width:100%;height:100%;object-fit:contain;background:#fff}
.pp-logo-up span{position:absolute;inset:auto 0 0 0;background:rgba(20,16,40,.72);color:#fff;font-size:.62rem;text-align:center;padding:.1rem}
.pp-logo-up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pp-swatch{font-size:.68rem;font-weight:800;color:#4b5563;display:grid;gap:.15rem}
.pp-swatch input{width:42px;height:32px;border:1px solid #e4def6;border-radius:8px;padding:0;background:#fff}
.pp-font{margin:0;min-width:120px;flex:1}
.pp-canvas{width:100%;height:auto;display:block;background:#eee}
.pp-tools{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:.45rem 0 .2rem}
.pp-tools input,.pp-tools select{font:inherit;font-size:.8rem;border:1px solid #e4def6;border-radius:8px;padding:.32rem .45rem;background:#fff}
.pp-tools input{flex:1;min-width:140px}
.pp-regen{font:inherit;font-size:.78rem;font-weight:800;border:1px solid #7C5CFC;background:#fff;color:#5b21b6;border-radius:8px;padding:.32rem .55rem;cursor:pointer}
.pp-regen:hover{background:#7C5CFC;color:#fff}
.pp-imgnote{font-size:.75rem;color:#6b7280;margin:.2rem 0 0}

/* ---------- v4: real examples showcase ---------- */
.av-img{background:#fff;overflow:hidden;padding:0}
.av-img img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.mk-li .av-img img{border-radius:8px}
.ex-shot{display:block;background:#efe9e2}
.ex-shot img{display:block;width:100%;height:auto}
.ex-cap.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
.ex-cap.open{display:block;-webkit-line-clamp:unset}
.ex-tags{color:#0a66c2}
.ex-more{background:none;border:0;padding:0 .9rem .5rem;color:#65676b;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.ex-more:hover{color:#1c1e21;text-decoration:underline}
.mk-li .ex-shot,.mk-fb .ex-shot{margin-top:.5rem}
.mk-x .ex-shot{margin:0 .9rem .6rem;border-radius:14px;overflow:hidden;border:1px solid #e5e7eb}
.stage .ex-shot{background:#2b1d14}
.stage .f-li .mk-cap{max-height:4.4em}
.stage .ex-more{display:none}

.ex-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f7f4ff 60%,#fff7ef 100%)}
.ex-sec::before{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(124,92,252,.22),transparent 65%);pointer-events:none}
.ex-sec::after{content:"";position:absolute;width:520px;height:520px;left:-220px;bottom:-200px;border-radius:50%;background:radial-gradient(circle,rgba(255,138,61,.2),transparent 65%);pointer-events:none}
.ex-sec .wrap{position:relative;z-index:1}
.ex-head{max-width:860px}
.ex-head .eyebrow{color:#7C5CFC}
.ex-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1.12fr);gap:1.4rem;align-items:start;margin-top:1.8rem}
.ex-card{box-shadow:0 24px 48px -30px rgba(20,16,40,.45)}
.ex-col{display:grid;gap:1.2rem}
.ex-reel{margin:0;display:flex;flex-direction:column;align-items:center;gap:.9rem}
.phone{position:relative;width:100%;max-width:300px;aspect-ratio:9/19;border-radius:42px;padding:12px;background:linear-gradient(160deg,#1b1530,#0b0a10);box-shadow:0 30px 60px -28px rgba(20,16,40,.7),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:31px;background:#2b1d14}
.phone .notch{position:absolute;top:20px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:12px;background:#0b0a10;z-index:2}
.ph-badge{position:absolute;right:22px;bottom:24px;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:#14181f;border-radius:999px;padding:.25rem .6rem;z-index:2}
.ex-reel figcaption{font-size:.86rem;color:#4b5563;text-align:center;max-width:300px;line-height:1.45}
.ex-reel figcaption b{display:block;color:#14181f;font-family:"Bricolage Grotesque",Lato,sans-serif;font-size:1rem}
.ex-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:1.4rem;margin-top:1.4rem;align-items:start}
.ex-note{font-size:.85rem;color:#4b5563;margin:.7rem .2rem 0}
.ex-zip{background:#0f0d1a;color:#fff;border-radius:20px;padding:1.4rem 1.4rem 1.2rem;box-shadow:0 24px 48px -30px rgba(20,16,40,.6);position:relative;overflow:hidden}
.ex-zip::before{content:"";position:absolute;inset:auto -80px -120px auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(11,148,68,.45),transparent 70%)}
.ex-zip h3{color:#fff;margin:0 0 .3rem;font-size:1.35rem}
.ex-zip .eyebrow{color:#b6ffd0}
.ex-zip .muted{color:rgba(255,255,255,.72);font-size:.88rem}
.zip-list{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.45rem;position:relative}
.zip-list li{display:grid;grid-template-columns:auto 1fr;column-gap:.7rem;align-items:baseline;margin:0;padding:.55rem .7rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08)}
.zip-list code{font-size:.82rem;color:#d9c8ff;font-weight:700}
.zip-list span{font-size:.9rem;color:#fff}
.zip-list small{grid-column:1/-1;font-family:var(--f-mono);font-size:.7rem;color:rgba(255,255,255,.55);margin-top:.2rem;overflow-wrap:anywhere}
@media (max-width:1100px){
  .ex-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .ex-col{grid-column:1/-1;grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .stage .ex-shot img{max-height:none}
}
@media (max-width:700px){
  .ex-grid,.ex-row2,.ex-col{grid-template-columns:1fr}
  .ex-col{grid-column:auto}
  .phone{max-width:260px}
  .ex-sec{padding:56px 0}
}
.phone{aspect-ratio:auto}
.phone video{height:auto;aspect-ratio:9/16}
.phone .notch{top:18px;width:70px;height:18px}
.stage .f-ig .mk-hash{display:none}
.stage .f-ig .mk-cap{max-height:3em}
@media (max-width:980px){.stage .f-ig .mk-hash{display:block}.stage .f-ig .mk-cap{max-height:4.6em}}
.stage{height:668px}
.pp-vidbox{margin:.4rem 0 .2rem}.pp-vidbox video{width:100%;max-height:420px;border-radius:12px;background:#111;display:block}
.pp-hd,.pp-vid{border-color:#0B9444;color:#0b7a39}.pp-hd:hover,.pp-vid:hover{background:#0B9444;color:#fff}
.pp-regen:disabled{opacity:.55;cursor:wait}