/* PostForge Frontend CSS (scoped to .pfWrap) */
.pfWrap,.pfWrap *{box-sizing:border-box}
.pfWrap{width:100%;max-width:100%;color:#0B1220;line-height:1.75;font-size:16px}
.pfWrap img,.pfWrap video{max-width:100%!important;height:auto;display:block}
.pfWrap a{color:inherit}
.pfWrap p{margin:0 0 12px;color:#374151}
.pfWrap ul{margin:0;padding-left:18px}
.pfWrap li{margin:8px 0}

/* Tokens */
:root{
  --pfBlue:#2563eb;
  --pfCyan:#22d3ee;
  --pfBg:#f5f8ff;
  --pfCard:#fff;
  --pfLine:rgba(11,18,32,.12);
  --pfInk:#0B1220;
  --pfMuted:#42526B;
  --pfGreen:#22c55e;
  --pfRed:#dc2626;
}

/* Sections */
.pfSec{margin:14px 0;padding:16px;background:var(--pfCard);border:1px solid var(--pfLine);border-radius:16px}
.pfSec.soft{background:linear-gradient(180deg,#fff 0%, var(--pfBg) 100%)}
@media(min-width:900px){.pfSec{padding:22px}}

/* Kicker + headings */
.pfKicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--pfBlue);
  margin:0 0 10px;background:rgba(37,99,235,.08);padding:4px 10px;border-radius:999px}
.pfH1{margin:8px 0 10px;font-size:clamp(22px,6.2vw,38px);line-height:1.08;font-weight:950;letter-spacing:-.4px;color:var(--pfInk)}
.pfWrap h2{margin:18px 0 10px;font-size:clamp(18px,4.8vw,28px);line-height:1.18;font-weight:950;letter-spacing:-.2px;color:var(--pfInk)}
.pfWrap h3{margin:14px 0 8px;font-size:clamp(16px,4.2vw,20px);line-height:1.25;font-weight:900;color:var(--pfInk)}
.pfLead{margin:0 0 12px;color:var(--pfMuted);font-size:15px;line-height:1.55}
@media(min-width:900px){.pfLead{font-size:16px}}

/* HERO */
.pfHero{border:1px solid var(--pfLine);border-radius:18px;overflow:hidden;background:
  radial-gradient(900px 320px at 20% 0%, rgba(34,211,238,.18), transparent 60%),
  radial-gradient(900px 320px at 80% 0%, rgba(37,99,235,.16), transparent 60%),
  linear-gradient(180deg,#FFFFFF 0%, #F3F8FF 70%, #FFFFFF 100%)}
.pfHero > .pfHeroGrid{padding:16px 14px}
@media(min-width:900px){.pfHero > .pfHeroGrid{padding:26px 22px}}
@media(max-width:600px){.pfHero > .pfHeroGrid{padding:14px 12px}}
.pfHeroGrid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:980px){.pfHeroGrid{grid-template-columns:1.2fr .8fr;align-items:start}}
.pfHeroImg{border-radius:16px;overflow:hidden;border:1px solid var(--pfLine);background:#fff}
.pfHeroImg img{width:100%;height:auto;display:block;object-fit:cover}
@media(min-width:980px){.pfHeroImg img{min-height:260px}}

/* Buttons */
.pfBtnRow{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.pfBtnWA,.pfBtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:999px;
  font-weight:950;border:1px solid rgba(11,18,32,.14);background:#fff;text-decoration:none;
  transition:transform .08s ease, box-shadow .2s ease}
.pfBtnWA:hover,.pfBtn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(11,18,32,.08)}
.pfBtnWA{border-color:rgba(34,197,94,.35);background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(34,211,238,.10))}
.pfBtnBlue{border-color:rgba(37,99,235,.20);background:linear-gradient(135deg,rgba(37,99,235,.12),rgba(34,211,238,.10))}
@media(max-width:820px){.pfBtnWA,.pfBtn{width:100%}}

/* Numbered list (errors/steps) */
.pfListSection{margin:18px 0}
.pfListItems{display:grid;gap:12px}
.pfListItem{display:grid;grid-template-columns:38px 1fr;gap:12px;padding:14px;border:1px solid var(--pfLine);border-radius:16px;background:#fff}
.pfListNum{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:950}
.pfListTitle{margin:0 0 6px;font-size:16px;line-height:1.25;font-weight:950}
.pfListDesc{margin:0;color:var(--pfMuted);font-size:14px;line-height:1.6}

/* Highlight background blocks */
.pfBg{margin:18px 0;padding:16px;border:1px solid var(--pfLine);border-radius:16px;background:linear-gradient(180deg,#fff 0%, var(--pfBg) 100%)}
@media(min-width:900px){.pfBg{padding:22px}}
.pfGrid3{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.pfGrid3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pfCard{background:#fff;border:1px solid var(--pfLine);border-radius:16px;padding:14px}
.pfIcon{font-size:22px;line-height:1;margin:0 0 10px}

/* Video */
.pfVideoCenter{display:flex;justify-content:center}
.pfVideoBox{width:100%;max-width:720px;border:1px solid var(--pfLine);border-radius:16px;overflow:hidden;background:#000}
.pfVideoBox video{width:100%;height:auto;display:block}

/* CTA banner */
.pfCtaBanner{margin:18px 0;padding:16px;border-radius:18px;border:1px solid rgba(34,197,94,.28);
  background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,211,238,.10))}
@media(min-width:900px){.pfCtaBanner{padding:22px}}

/* Services */
.pfServicesGrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.pfServicesGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pfServiceCard{border:1px solid var(--pfLine);border-radius:16px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.pfSvImg{aspect-ratio:16/9;background:#eef2ff;border-bottom:1px solid var(--pfLine)}
.pfSvImg img{width:100%;height:100%;object-fit:cover}
.pfSvBody{padding:14px}
.pfSvBody h3{margin:0 0 8px;font-size:20px;line-height:1.2;font-weight:950;letter-spacing:-.2px}
(max-width:600px){.pfSvBody h3{font-size:18px}}
.pfSvBody h3{margin:0 0 8px}
.pfSvBody p{margin:0 0 12px}

/* FAQ */
.pfFaq{margin-top:12px}
.pfFaq details{border:1px solid var(--pfLine);border-radius:14px;background:#fff;padding:12px}
.pfFaq details+details{margin-top:10px}
.pfFaq summary{cursor:pointer;font-weight:900;list-style:none}
.pfFaq summary::-webkit-details-marker{display:none}
.pfFaqAnswer,.pfFaq .a{margin-top:8px;color:var(--pfMuted);font-size:15px;line-height:1.6}

/* Depoiments */
.pfDepoGrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:900px){.pfDepoGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pfDepoCard{border:1px solid var(--pfLine);border-radius:16px;background:#fff;overflow:hidden}
.pfDepoVidWrap{position:relative;background:#000}
.pfDepoVidWrap video{width:100%;height:auto;display:block}
.pfDepoUnmute{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;padding:8px 10px;
  background:rgba(255,255,255,.18);color:#fff;font-weight:900;cursor:pointer}
.pfDepoBody{padding:12px}
.pfDepoTitle{margin:0 0 6px;font-weight:950;color:var(--pfInk)}
.pfDepoDesc{margin:0;color:var(--pfMuted);font-size:14px;line-height:1.55}

/* Signature */
.pfSig{margin-top:18px}
.pfSigGrid{display:grid;gap:14px;grid-template-columns:1fr;align-items:start}
@media(min-width:820px){.pfSigGrid{grid-template-columns:220px 1fr;align-items:center}}
.pfSigImg img{width:100%;height:auto;border-radius:12px;border:1px solid var(--pfLine)}
.pfSigName{margin:0 0 6px;font-weight:950}
.pfSigText{margin:0;color:var(--pfMuted)}
.pfSigBtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
@media(max-width:820px){.pfSigBtns a{width:100%}}

/* Small tweaks */
.pfWrap hr{border:0;border-top:1px solid var(--pfLine);margin:18px 0}

/* Popup Maker trigger buttons - same style as pfBtnCTA */
button.pfBtnCTA, button.pfBtn {
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
button.pfBtnCTA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 999px;
  border: none;
  font-weight: 700;
  text-decoration: none !important;
}