/* PicPrep: hero preview captions, video section, HOW TO page (2026-11-01) */
a.header-download,a.figma-download,a.pp-button{text-decoration:none}

/* Hero preview: tabs + caption tied to the screenshot */
.figma-screenshot>img{transition:opacity .18s ease}
.figma-screenshot>img.is-swapping{opacity:.25}
.figma-tabs{display:inline-flex;gap:4px;padding:4px;margin-top:20px;background:#f3f4f6;border-radius:12px}
.figma-tabs button{background:transparent;color:#4a5565;font-size:13px;line-height:18px;padding:8px 14px;border-radius:9px;font-weight:600}
.figma-tabs button.active{background:#fff;color:#155dfc;box-shadow:0 1px 3px #0000001f}
.figma-tabs button:not(.active):hover{background:#e5e7eb;color:#1e2939}
.figma-tabs button:focus-visible{outline:2px solid #155dfc;outline-offset:2px}
.pp-shot-caption{min-height:24px;margin:12px auto 0;max-width:640px;font-size:14px;line-height:24px;color:#4a5565}
@media(max-width:700px){
 .figma-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:354px}
 .figma-tabs button{font-size:13px;padding:8px 6px}
 .pp-shot-caption{font-size:13px;line-height:21px;min-height:42px}
}

/* Shared section bits */
.pp-container{max-width:1024px;margin:0 auto;padding:0 24px}
.pp-eyebrow{margin:0;text-align:center;font-size:14px;line-height:20px;font-weight:600;letter-spacing:1.4px;color:#155dfc}
.pp-h2{margin:12px 0 0;text-align:center;font-size:30px;line-height:38px;font-weight:800;letter-spacing:-.3px;color:#101828}
.pp-sub{max-width:560px;margin:14px auto 0;text-align:center;font-size:16px;line-height:26px;color:#6a7282}
.pp-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 20px;border-radius:10px;font-size:15px;font-weight:600;line-height:22px}
.pp-button--primary{background:#155dfc;color:#fff}
.pp-button--ghost{background:#fff;color:#155dfc;border:1px solid #c9d8fb}
.pp-button--ghost:hover{background:#eff6ff}
.pp-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:40px}

/* Video section */
.pp-video{padding:88px 0;background:#fff}
.pp-video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:44px}
.pp-video-card{margin:0;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 10px 30px #0f1c3a12}
.pp-video-frame{position:relative;aspect-ratio:16/9;background:#0b1636}
.pp-video-frame video{display:block;width:100%;height:100%;object-fit:cover;background:#0b1636}
.pp-video-card figcaption{padding:18px 20px 22px}
.pp-video-card .pp-video-title{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;line-height:24px;font-weight:700;color:#101828}
.pp-video-card .pp-video-time{font-size:12px;line-height:16px;font-weight:600;color:#155dfc;background:#eff6ff;border-radius:100px;padding:3px 9px}
.pp-video-card p{margin:8px 0 0;font-size:14px;line-height:22px;color:#6a7282}
.pp-howto-link{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
@media(max-width:760px){.pp-video{padding:64px 0}.pp-video-grid{grid-template-columns:1fr;gap:20px}.pp-h2{font-size:26px;line-height:34px}}

/* HOW TO page */
.pp-guide-hero{padding:72px 0 40px;background:linear-gradient(180deg,#f5f8ff 0%,#fff 100%);text-align:center}
.pp-guide-hero h1{margin:12px 0 0;font-size:44px;line-height:54px;font-weight:800;letter-spacing:-.8px;color:#101828}
.pp-guide-hero .pp-sub{max-width:620px}
.pp-guide-video{max-width:880px;margin:36px auto 0}
.pp-toc{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:32px auto 0;padding:0;list-style:none}
.pp-toc a{display:inline-flex;gap:8px;align-items:center;padding:8px 14px;border:1px solid #dbe4f5;border-radius:100px;background:#fff;color:#1e2939;font-size:14px;line-height:20px;font-weight:600;text-decoration:none}
.pp-toc a span{color:#155dfc;font-size:12px}
.pp-toc a:hover{border-color:#155dfc;color:#155dfc}
.pp-step{padding:64px 0;border-top:1px solid #f0f2f5}
.pp-step:nth-of-type(even){background:#fafbfd}
.pp-step-head{display:flex;align-items:center;gap:14px}
.pp-step-num{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:#155dfc;color:#fff;font-size:18px;font-weight:800}
.pp-step-head h2{margin:0;font-size:26px;line-height:34px;font-weight:800;color:#101828}
.pp-step-head p{margin:2px 0 0;font-size:14px;line-height:22px;color:#6a7282}
.pp-items{display:grid;gap:36px;margin-top:36px}
.pp-item{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center}
.pp-item h3{margin:0;font-size:18px;line-height:27px;font-weight:700;color:#101828}
.pp-item p{margin:8px 0 0;font-size:15px;line-height:26px;color:#4a5565}
.pp-item ul{margin:10px 0 0;padding-left:20px;font-size:14px;line-height:24px;color:#4a5565}
.pp-item figure{margin:0;text-align:center}
.pp-item img{display:inline-block;max-width:100%;height:auto;border:1px solid #e5e7eb;border-radius:12px;background:#fff;box-shadow:0 8px 24px #0f1c3a14}
.pp-item--narrow img{max-width:320px;width:100%}
.pp-note{margin-top:10px;padding:12px 14px;border-radius:10px;background:#eff6ff;color:#1e3a8a;font-size:13px;line-height:21px}
.pp-guide-cta{padding:72px 0;text-align:center;background:#0b1b42;color:#fff}
.pp-guide-cta h2{margin:0;font-size:28px;line-height:36px;font-weight:800}
.pp-guide-cta p{margin:12px 0 0;color:#c7d4f2;font-size:15px;line-height:24px}
.pp-guide-cta .pp-links{margin-top:28px}
.pp-guide-cta .pp-button--ghost{background:transparent;color:#fff;border-color:#4b6bc0}
.pp-guide-cta .pp-button--ghost:hover{background:#13286068}
@media(max-width:760px){
 .pp-guide-hero{padding:48px 0 28px}.pp-guide-hero h1{font-size:32px;line-height:42px}
 .pp-step{padding:48px 0}.pp-step-head h2{font-size:22px;line-height:30px}
 .pp-item{grid-template-columns:1fr;gap:16px}.pp-items{gap:32px}
}