/* prompt-pages.css: prompt library page v2 (wide, results-first layout).
   Additive to /content-assets/style.css; reuses its tokens (--primary, --border, --radius…).
   Every rule is scoped to .pp-page or .pp-* classes, so other content pages are untouched. */

.pp-page .pp-wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ── hero ─────────────────────────────────────────────────────────── */
.pp-page .pp-top{padding:44px 0 6px}
.pp-hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:56px;align-items:center;padding-bottom:30px;border-bottom:1px solid var(--border)}
.pp-hero h1{margin-top:.1em}
.pp-lede{font-size:1.13rem;line-height:1.6;color:var(--muted);max-width:620px;margin:0 0 22px}
.pp-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.pp-byline{display:flex;gap:12px;align-items:center;font-size:.9rem;line-height:1.45}
.pp-byline .sub{color:var(--muted)}
.pp-hero-media .pp-video{max-width:260px;margin-left:auto}
.btn-ghost{background:#fff;color:var(--primary-600) !important;border:1px solid var(--primary-200)}
.btn-ghost:hover{background:var(--primary-50)}
@media(max-width:860px){
  .pp-hero{grid-template-columns:1fr;gap:26px}
  .pp-hero-media .pp-video{margin:0 auto;max-width:200px}
}

/* ── main column: wide grid, readable text blocks ─────────────────── */
.pp-main{padding-top:10px}
.pp-main>p,.pp-main>ul:not(.pp-chips),.pp-main>ol,.pp-main>h2,.pp-main>h3,.pp-main>.verdict,
.pp-main>.pp-formula,.pp-main>details,.pp-main>.updated{max-width:760px}

/* jump chips */
.pp-chips{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 20px;padding:0;list-style:none}
.pp-chips a{display:inline-block;font-size:.85rem;font-weight:500;color:var(--text);background:var(--bg-soft);border:1px solid var(--border);border-radius:999px;padding:.3rem .8rem;text-decoration:none}
.pp-chips a:hover{border-color:var(--primary-200);color:var(--primary-600)}

/* formula */
.pp-formula{background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin:22px 0 8px}
.pp-formula .k{display:block;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.pp-formula code{display:block;font-family:inherit;font-weight:600;color:var(--text);margin-bottom:8px}
.pp-formula p{margin:0;color:var(--muted);font-size:.95rem}

/* ── prompt → result grid ─────────────────────────────────────────── */
.pp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:4px 0 44px}
@media(max-width:900px){.pp-grid{grid-template-columns:1fr}}
.pp-card{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;align-items:start;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm);padding:16px;scroll-margin-top:84px}
@media(max-width:520px){.pp-card{grid-template-columns:104px minmax(0,1fr);gap:12px;padding:12px}}
.pp-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:2px 0 10px}
.pp-head h3{margin:0;font-size:1.06rem}
.pp-num{font-size:.8rem;font-weight:700;color:var(--muted);letter-spacing:.06em}
.pp-fmt{font-size:.72rem;font-weight:600;color:var(--primary-600);background:var(--primary-50);border:1px solid var(--primary-100);border-radius:999px;padding:.15rem .6rem}
.pp-prompt{margin:0 0 12px;padding:11px 13px;background:var(--bg-soft);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:10px;font-size:.96rem;line-height:1.55}
@media(max-width:520px){.pp-prompt{font-size:.9rem;padding:9px 11px}}
.pp-actions{display:flex;gap:8px 12px;flex-wrap:wrap;align-items:center}
.pp-copy{font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;background:#fff;color:var(--text);border:1px solid var(--border-strong);border-radius:999px;padding:.38rem .9rem}
.pp-copy:hover{border-color:var(--primary);color:var(--primary-600)}
.pp-copy.is-done{border-color:hsl(150 50% 45%);color:hsl(150 55% 30%)}
.pp-try-link{font-size:.86rem;font-weight:600}
.pp-meta{margin:10px 0 0;font-size:.78rem;line-height:1.4;color:var(--muted)}

/* result video */
.pp-video{margin:0}
.pp-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#101319}
.pp-video figcaption{font-size:.78rem;color:var(--muted);margin-top:6px;line-height:1.4}

/* no result yet: "your product here" tile, doubles as the Try CTA */
.pp-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:9/16;border-radius:12px;
  background:linear-gradient(165deg,var(--primary-50),hsl(270 70% 96%));border:1px dashed var(--primary-200);
  text-align:center;padding:10px;color:var(--primary-600);text-decoration:none !important;transition:border-color .15s,transform .15s}
.pp-ph:hover{border-style:solid;border-color:var(--primary);transform:translateY(-1px)}
.pp-ph-play{width:34px;height:34px;border-radius:999px;background:var(--grad);position:relative;box-shadow:0 6px 16px hsl(252 56% 57%/.3)}
.pp-ph-play::after{content:"";position:absolute;left:13px;top:10px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.pp-ph-t{font-size:.82rem;font-weight:700;line-height:1.25}
.pp-ph-s{font-size:.7rem;line-height:1.3;color:var(--muted)}
.pp-ph-big .pp-ph-play{width:48px;height:48px}
.pp-ph-big .pp-ph-play::after{left:19px;top:15px;border-left-width:14px;border-top-width:9px;border-bottom-width:9px}
.pp-ph-big .pp-ph-t{font-size:1rem}.pp-ph-big .pp-ph-s{font-size:.8rem}
@media(max-width:520px){.pp-ph-s{display:none}.pp-ph-t{font-size:.74rem}}

/* ── Promptbook lead magnet ───────────────────────────────────────── */
.pp-book{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;background:var(--primary-50);border:1px solid var(--primary-200);border-radius:20px;padding:24px 26px;margin:8px 0 30px}
.pp-grid .pp-book{grid-column:1/-1;margin:4px 0}
.pp-book .pp-book-title{margin:0 0 .3em;font-size:1.2rem;font-weight:700;color:var(--text)}
.pp-book p{margin:0;color:var(--muted);font-size:.95rem}
.pp-book form{display:flex;flex-direction:column;gap:8px;min-width:300px}
.pp-book .row{display:flex;gap:8px}
.pp-book input[type=email]{flex:1;min-width:0;font:inherit;font-size:.95rem;padding:.65rem .9rem;border:1px solid var(--border-strong);border-radius:999px;background:#fff}
.pp-book label{font-size:.78rem;color:var(--muted);display:flex;gap:6px;align-items:flex-start;line-height:1.35}
.pp-book .btn{padding:.65rem 1.2rem;font-size:.95rem}
.pp-book .pp-note{margin-top:6px;font-size:.8rem;color:hsl(30 80% 35%)}
@media(max-width:760px){.pp-book{grid-template-columns:1fr}.pp-book form{min-width:0}}

/* ── how to run them ──────────────────────────────────────────────── */
.pp-howto{background:var(--bg-band);border:1px solid var(--border);border-radius:20px;padding:28px 28px 24px;margin:10px 0 40px}
.pp-howto h2{margin:0 0 16px}
.pp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;list-style:none;margin:0 0 20px;padding:0;counter-reset:pp-step}
@media(max-width:760px){.pp-steps{grid-template-columns:1fr}}
.pp-steps li{counter-increment:pp-step;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--shadow-sm)}
.pp-steps li::before{content:counter(pp-step);display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:.85rem;margin-bottom:10px}
.pp-steps b{display:block;margin-bottom:4px}
.pp-steps span{color:var(--muted);font-size:.93rem;line-height:1.5}
.pp-howto-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pp-howto-cta .fine{margin:0;font-size:.86rem;color:var(--muted);max-width:620px}

/* buttons that only work with JS stay hidden until the script runs */
.pp-js-only[hidden]{display:none !important}

/* anchors land below the sticky header */
.pp-page [id]{scroll-margin-top:84px}
.pp-updated{margin:0;font-size:.88rem;color:var(--muted)}

/* hero: 2×2 strip of result posters linking to their cards */
.pp-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:280px;margin-left:auto}
.pp-strip-item{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#101319;text-decoration:none !important}
.pp-strip-item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .25s}
.pp-strip-item:hover img{transform:scale(1.04)}
.pp-strip-play{position:absolute;left:8px;bottom:30px;width:26px;height:26px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.pp-strip-play::after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid var(--primary-600);border-top:6px solid transparent;border-bottom:6px solid transparent}
.pp-strip-cap{position:absolute;left:0;right:0;bottom:0;padding:18px 8px 7px;font-size:.72rem;font-weight:600;line-height:1.2;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.pp-strip-note{max-width:280px;margin:8px 0 0 auto;font-size:.75rem;color:var(--muted);text-align:center}
@media(max-width:860px){
  .pp-strip{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;margin:0}
  .pp-strip-play{display:none}
  .pp-strip-note{max-width:none;margin:8px 0 0;text-align:left}
}
.pp-strip-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:8px;
  background:linear-gradient(165deg,var(--primary-50),hsl(270 70% 96%));border:1px dashed var(--primary-200);color:var(--primary-600)}
.pp-strip-ph .pp-ph-t{font-size:.74rem}
@media(max-width:860px){.pp-strip-ph .pp-ph-play{width:24px;height:24px}.pp-strip-ph .pp-ph-play::after{left:9px;top:6px;border-left-width:8px;border-top-width:6px;border-bottom-width:6px}}

/* examples-plugin mount point: static video/tile is the fallback the plugin can replace */
.pp-media{min-width:0}

.pp-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.pp-note{font-size:14px;line-height:1.5}