/* Promptifi — ChatGPT for Sales ecosystem design system.
   Scoped to .pfcg so nothing here can reach another template.
   Inherits the live Webflow design-system variables with hex fallbacks. */
.pfcg{
  --cg-navy:var(--_colors---core-accent-color--accent-tertiary-hover,#0f2d52);
  --cg-navy-2:var(--_colors---core-accent-color--accent-tertiary,#1c4675);
  --cg-navy-deep:var(--_colors---button--button-primary-bg-hover,#091a33);
  --cg-coral:var(--_colors---core-accent-color--accent-primary,#d4551a);
  --cg-coral-hi:var(--_colors---core-accent-color--accent-primary-hover,#a8400d);
  --cg-cream:var(--_colors---core-accent-color--accent-secondary,#f5f1ea);
  --cg-cream-2:var(--_colors---core-accent-color--accent-secondary-hover,#e8e2d5);
  --cg-ink:#1a1f2c;
  --cg-mute:#4a5568;
  --cg-line:#0f2d522e;
  --cg-line-2:#0f2d5214;
  --cg-white:#fff;
  --cg-serif:"Fraunces",Georgia,serif;
  --cg-sans:"Instrument Sans","Onest",system-ui,-apple-system,sans-serif;
  --cg-mono:"DM Mono","SF Mono",Menlo,monospace;
  --cg-r:14px; --cg-r-s:10px;
  --cg-sp:clamp(56px,7vw,96px);
  --cg-shadow:0 1px 2px #0f2d520a,0 8px 24px #0f2d5210;
  font-family:var(--cg-sans); color:var(--cg-ink);
  -webkit-font-smoothing:antialiased;
}
.pfcg *,.pfcg *::before,.pfcg *::after{box-sizing:border-box}
.pfcg img,.pfcg svg{max-width:100%;height:auto}
.pfcg-wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.pfcg-narrow{max-width:760px}

/* ---------- type ---------- */
.pfcg h1,.pfcg h2,.pfcg h3,.pfcg h4{font-family:var(--cg-serif);color:var(--cg-navy);
  font-weight:600;line-height:1.15;letter-spacing:-.012em;margin:0 0 .5em}
.pfcg h1{font-size:clamp(2rem,4.6vw,3.35rem);line-height:1.06;letter-spacing:-.022em}
.pfcg h2{font-size:clamp(1.55rem,2.9vw,2.3rem);margin-top:0}
.pfcg h3{font-size:clamp(1.16rem,1.9vw,1.42rem)}
.pfcg h4{font-size:1.03rem;font-family:var(--cg-sans);font-weight:650}
.pfcg p,.pfcg li{font-size:1.045rem;line-height:1.68;color:var(--cg-mute);margin:0 0 1.05em}
.pfcg .pfcg-lead{font-size:clamp(1.1rem,1.7vw,1.28rem);line-height:1.6;color:#2d3a4d}
.pfcg strong{color:var(--cg-navy);font-weight:640}
.pfcg a{color:var(--cg-coral-hi);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px;transition:color .15s}
.pfcg a:hover{color:var(--cg-coral)}
.pfcg ul,.pfcg ol{margin:0 0 1.15em;padding-left:1.25em}
.pfcg li{margin-bottom:.5em}
.pfcg :focus-visible{outline:2px solid var(--cg-coral);outline-offset:3px;border-radius:4px}
.pfcg-eyebrow{font-family:var(--cg-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cg-coral-hi);margin:0 0 .75rem;font-weight:500}

/* ---------- section rhythm ---------- */
.pfcg-sec{padding:var(--cg-sp) 0;border-top:1px solid var(--cg-line-2)}
.pfcg-sec:first-of-type{border-top:0}
.pfcg-sec--cream{background:var(--cg-cream)}
.pfcg-sec--navy{background:var(--cg-navy);color:#cfd8e6}
.pfcg-sec--navy h2,.pfcg-sec--navy h3{color:var(--cg-cream)}
.pfcg-sec--navy p,.pfcg-sec--navy li{color:#b8c4d6}
.pfcg-sec--navy a{color:#f0b898}
.pfcg-sec__head{max-width:720px;margin-bottom:2.4rem}
.pfcg-sec__head p{margin-bottom:0}

/* ---------- breadcrumb ---------- */
.pfcg-crumb{font-size:.82rem;font-family:var(--cg-mono);padding:1.4rem 0 0;color:#7b8798}
.pfcg-crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0}
.pfcg-crumb li{margin:0;font-size:.82rem;color:#7b8798}
.pfcg-crumb li+li::before{content:"/";margin-right:.45rem;color:#b3bdca}
.pfcg-crumb a{color:#7b8798;text-decoration:none}
.pfcg-crumb a:hover{color:var(--cg-coral-hi);text-decoration:underline}

/* ---------- hero ---------- */
.pfcg-hero{padding:2.2rem 0 var(--cg-sp);background:
  radial-gradient(120% 90% at 88% -10%,#f7f3ec 0%,rgba(247,243,236,0) 62%),var(--cg-white)}
.pfcg-hero h1{max-width:16ch}
.pfcg-hero .pfcg-lead{max-width:60ch}
.pfcg-answer{border-left:3px solid var(--cg-coral);background:var(--cg-cream);
  padding:1.15rem 1.35rem;border-radius:0 var(--cg-r-s) var(--cg-r-s) 0;margin:1.6rem 0}
.pfcg-answer p{margin:0;color:#2d3a4d;font-size:1.06rem}
.pfcg-answer p+p{margin-top:.7em}
.pfcg-verified{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--cg-mono);
  font-size:.72rem;letter-spacing:.05em;color:#6b7789;background:var(--cg-white);
  border:1px solid var(--cg-line);border-radius:999px;padding:.42rem .85rem;margin-top:1.5rem}
.pfcg-verified::before{content:"";width:6px;height:6px;border-radius:50%;background:#3f9d6a;flex:none}

/* ---------- buttons ---------- */
.pfcg-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.8rem 0 0}
.pfcg-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.8rem 1.4rem;border-radius:var(--cg-r-s);font-weight:600;font-size:.96rem;
  font-family:var(--cg-sans);text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background .16s,color .16s,border-color .16s;line-height:1.2}
.pfcg-btn--primary{background:var(--cg-coral);color:#fff}
.pfcg-btn--primary:hover{background:var(--cg-coral-hi);color:#fff}
.pfcg-btn--ghost{background:transparent;color:var(--cg-navy);border-color:var(--cg-navy)}
.pfcg-btn--ghost:hover{background:var(--cg-navy);color:var(--cg-cream)}
.pfcg-sec--navy .pfcg-btn--ghost{color:var(--cg-cream);border-color:#ffffff5c}
.pfcg-sec--navy .pfcg-btn--ghost:hover{background:var(--cg-cream);color:var(--cg-navy)}

/* ---------- cards ---------- */
.pfcg-grid{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.pfcg-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.pfcg-card{background:var(--cg-white);border:1px solid var(--cg-line);border-radius:var(--cg-r);
  padding:1.5rem;display:flex;flex-direction:column;transition:border-color .16s,box-shadow .16s}
.pfcg-card:hover{border-color:#0f2d5240;box-shadow:var(--cg-shadow)}
.pfcg-card h3{margin-bottom:.45rem}
.pfcg-card p{font-size:.955rem;margin-bottom:1rem}
.pfcg-card p:last-of-type{margin-bottom:1rem}
.pfcg-card__link{margin-top:auto;font-weight:600;font-size:.93rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:.35rem;min-height:24px}
.pfcg-card__link::after{content:"→";transition:transform .16s;display:inline-block}
.pfcg-card__link:hover::after{transform:translateX(3px)}
.pfcg-sec--cream .pfcg-card{background:var(--cg-white)}

/* ---------- use this / use something else ---------- */
.pfcg-when{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin:1.5rem 0}
.pfcg-when__col{border-radius:var(--cg-r);padding:1.4rem 1.5rem;border:1px solid var(--cg-line)}
.pfcg-when__col--use{background:#f2f7f3;border-color:#3f9d6a3d}
.pfcg-when__col--else{background:var(--cg-cream);border-color:#d4551a2e}
.pfcg-when__col h3{font-family:var(--cg-sans);font-size:1rem;font-weight:680;
  display:flex;align-items:center;gap:.5rem;margin-bottom:.85rem}
.pfcg-when__col--use h3::before{content:"";width:9px;height:9px;border-radius:2px;background:#3f9d6a;flex:none}
.pfcg-when__col--else h3::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--cg-coral);flex:none}
.pfcg-when__col ul{margin:0;padding-left:1.15em}
.pfcg-when__col li{font-size:.95rem;margin-bottom:.55em}
.pfcg-when__col li:last-child{margin-bottom:0}

/* ---------- tables (accessible scroll region) ---------- */
.pfcg-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--cg-line);
  border-radius:var(--cg-r);background:var(--cg-white);margin:1.5rem 0}
.pfcg-tablewrap:focus-visible{outline:2px solid var(--cg-coral);outline-offset:2px}
.pfcg-table{width:100%;border-collapse:collapse;min-width:560px;font-size:.94rem}
.pfcg-table caption{text-align:left;padding:1rem 1.15rem .35rem;font-family:var(--cg-mono);
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#7b8798}
.pfcg-table th,.pfcg-table td{padding:.85rem 1.15rem;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--cg-line-2);line-height:1.55}
.pfcg-table thead th{background:var(--cg-cream);color:var(--cg-navy);font-weight:650;
  font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.pfcg-table tbody tr:last-child td{border-bottom:0}
.pfcg-table tbody th{color:var(--cg-navy);font-weight:640}
.pfcg-table td{color:var(--cg-mute)}

/* ---------- callout ---------- */
.pfcg-callout{background:var(--cg-cream);border:1px solid var(--cg-line);border-radius:var(--cg-r);
  padding:1.5rem 1.65rem;margin:1.6rem 0}
.pfcg-callout--rule{background:#fbf6f1;border-color:#d4551a33}
.pfcg-callout h3{font-family:var(--cg-sans);font-size:1rem;font-weight:680;margin-bottom:.7rem}
.pfcg-callout>:last-child{margin-bottom:0}
.pfcg-quote{border-left:3px solid var(--cg-coral);padding-left:1.2rem;margin:1.6rem 0;
  font-family:var(--cg-serif);font-size:clamp(1.1rem,1.9vw,1.32rem);line-height:1.45;color:var(--cg-navy)}
.pfcg-quote p{font-family:inherit;font-size:inherit;color:inherit;margin:0}

/* ---------- copyable block ---------- */
.pfcg-pre{background:var(--cg-navy);color:#dbe4f0;border-radius:var(--cg-r);padding:1.3rem 1.45rem;
  font-family:var(--cg-mono);font-size:.855rem;line-height:1.62;white-space:pre-wrap;
  word-break:break-word;overflow-x:auto;margin:0}
.pfcg-copywrap{margin:1.4rem 0}
.pfcg-copywrap__bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--cg-navy-deep);border-radius:var(--cg-r) var(--cg-r) 0 0;padding:.6rem .75rem .6rem 1.35rem}
.pfcg-copywrap__bar+.pfcg-pre{border-radius:0 0 var(--cg-r) var(--cg-r)}
.pfcg-copywrap__label{font-family:var(--cg-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8fa2bd}
.pfcg-copy{min-height:44px;min-width:96px;padding:.45rem .9rem;border-radius:7px;border:1px solid #ffffff33;
  background:transparent;color:var(--cg-cream);font-family:var(--cg-sans);font-size:.83rem;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s}
.pfcg-copy:hover{background:#ffffff1a;border-color:#ffffff5c}
.pfcg-copy[disabled]{opacity:.45;cursor:not-allowed}
.pfcg-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- TOC ---------- */
.pfcg-toc{margin:0}
.pfcg-toc__title{font-family:var(--cg-mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;
  color:#7b8798;margin:0 0 .8rem}
.pfcg-toc ol{list-style:none;margin:0;padding:0;counter-reset:pfcgtoc}
.pfcg-toc li{margin:0 0 .1rem;font-size:.9rem}
.pfcg-toc a{display:flex;gap:.6rem;padding:.42rem .6rem;border-radius:7px;text-decoration:none;
  color:var(--cg-mute);border-left:2px solid transparent;min-height:32px;align-items:center}
.pfcg-toc a:hover{background:var(--cg-cream);color:var(--cg-navy)}
.pfcg-toc a[aria-current="true"]{color:var(--cg-navy);font-weight:640;
  border-left-color:var(--cg-coral);background:var(--cg-cream)}
.pfcg-toc__count{margin-left:auto;font-family:var(--cg-mono);font-size:.72rem;color:#9aa5b4}
.pfcg-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start}
.pfcg-layout__aside{position:sticky;top:88px;max-height:calc(100vh - 120px);overflow-y:auto;
  padding-right:.35rem;scrollbar-width:thin}
.pfcg-tocmobile{display:none;margin:0 0 1.8rem;border:1px solid var(--cg-line);
  border-radius:var(--cg-r);background:var(--cg-white);overflow:hidden}
.pfcg-tocmobile>summary{list-style:none;cursor:pointer;padding:.95rem 1.15rem;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;font-weight:640;color:var(--cg-navy);font-size:.95rem}
.pfcg-tocmobile>summary::-webkit-details-marker{display:none}
.pfcg-tocmobile>summary::after{content:"+";font-family:var(--cg-mono);font-size:1.1rem;color:var(--cg-coral)}
.pfcg-tocmobile[open]>summary::after{content:"–"}
.pfcg-tocmobile .pfcg-toc{padding:0 .6rem .8rem}

/* ---------- FAQ ---------- */
.pfcg-faq{border-top:1px solid var(--cg-line)}
.pfcg-faq__item{border-bottom:1px solid var(--cg-line)}
.pfcg-faq__item>summary{list-style:none;cursor:pointer;padding:1.15rem .5rem 1.15rem 0;min-height:48px;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--cg-serif);font-size:1.08rem;font-weight:600;color:var(--cg-navy)}
.pfcg-faq__item>summary::-webkit-details-marker{display:none}
.pfcg-faq__item>summary::after{content:"+";font-family:var(--cg-mono);color:var(--cg-coral);
  font-size:1.2rem;flex:none;line-height:1}
.pfcg-faq__item[open]>summary::after{content:"–"}
.pfcg-faq__body{padding:0 0 1.25rem}
.pfcg-faq__body>:last-child{margin-bottom:0}

/* ---------- steps ---------- */
.pfcg-steps{list-style:none;counter-reset:pfcgstep;padding:0;margin:1.5rem 0}
.pfcg-steps li{counter-increment:pfcgstep;position:relative;padding:0 0 1.35rem 3.1rem;margin:0;
  border-left:1px solid var(--cg-line);margin-left:1rem}
.pfcg-steps li:last-child{border-left-color:transparent;padding-bottom:0}
.pfcg-steps li::before{content:counter(pfcgstep);position:absolute;left:-1rem;top:-.15rem;
  width:2rem;height:2rem;border-radius:50%;background:var(--cg-navy);color:var(--cg-cream);
  font-family:var(--cg-mono);font-size:.82rem;display:flex;align-items:center;justify-content:center}
.pfcg-steps li>strong:first-child{display:block;color:var(--cg-navy);margin-bottom:.2rem}

/* ---------- sibling nav ---------- */
.pfcg-siblings{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));margin-top:1.6rem}
.pfcg-sibling{display:block;padding:1.05rem 1.2rem;border:1px solid var(--cg-line);border-radius:var(--cg-r-s);
  background:var(--cg-white);text-decoration:none;transition:border-color .16s,transform .16s}
.pfcg-sibling:hover{border-color:var(--cg-coral);transform:translateY(-2px)}
.pfcg-sibling__k{display:block;font-family:var(--cg-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cg-coral-hi);margin-bottom:.35rem}
.pfcg-sibling__t{display:block;font-weight:640;color:var(--cg-navy);font-size:.97rem;line-height:1.35}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .pfcg-layout{grid-template-columns:minmax(0,1fr)}
  .pfcg-layout__aside{display:none}
  .pfcg-tocmobile{display:block}
}
@media (max-width:767px){
  .pfcg-grid,.pfcg-grid--2,.pfcg-when,.pfcg-siblings{grid-template-columns:minmax(0,1fr)}
  .pfcg-card{padding:1.25rem}
  .pfcg-cta{flex-direction:column;align-items:stretch}
  .pfcg-btn{width:100%}
  .pfcg-table{min-width:520px}
  .pfcg-copywrap__bar{flex-direction:column;align-items:stretch;gap:.6rem;padding:.75rem}
  .pfcg-copy{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .pfcg *,.pfcg *::before,.pfcg *::after{transition:none!important;animation:none!important}
}

/* ---------- 50-prompt article: card system ---------- */
.pfcg-grp{padding:var(--cg-sp) 0 calc(var(--cg-sp) * .55);border-top:1px solid var(--cg-line-2)}
.pfcg-grp .pfcg-sec__head{margin-bottom:1.8rem}
.pfcg-pcgrid{display:grid;gap:1.15rem;grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.pfcg-pc{background:var(--cg-white);border:1px solid var(--cg-line);border-radius:var(--cg-r);
  padding:1.5rem;display:flex;flex-direction:column;scroll-margin-top:96px}
.pfcg-pc:hover{border-color:#0f2d5240}
.pfcg-pc__head{display:flex;gap:.95rem;align-items:flex-start;margin-bottom:1.05rem}
.pfcg-pc__n{font-family:var(--cg-mono);font-size:.82rem;color:var(--cg-coral-hi);background:var(--cg-cream);
  border-radius:7px;padding:.3rem .5rem;flex:none;line-height:1;min-width:2.1rem;text-align:center}
.pfcg-pc__t{font-size:1.1rem;margin:0 0 .3rem;line-height:1.3}
.pfcg-pc__g{font-family:var(--cg-mono);font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;
  color:#8b95a5;margin:0 0 .55rem}
.pfcg-pc__chips{list-style:none;display:flex;flex-wrap:wrap;gap:.32rem;margin:0;padding:0}
.pfcg-pc__chips li{font-size:.7rem;font-family:var(--cg-mono);color:var(--cg-navy-2);
  background:var(--cg-cream);border:1px solid var(--cg-line-2);border-radius:999px;
  padding:.2rem .55rem;margin:0;line-height:1.5}
.pfcg-pc__fields{margin:0 0 1.1rem;padding:0;display:grid;gap:.65rem}
.pfcg-pc__f dt{font-family:var(--cg-mono);font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cg-coral-hi);margin-bottom:.2rem}
.pfcg-pc__f dd{margin:0;font-size:.925rem;line-height:1.6;color:var(--cg-mute)}
.pfcg-pc__prompt{margin-top:auto}
.pfcg-pc__prompt .pfcg-copywrap__bar{border-radius:var(--cg-r-s) var(--cg-r-s) 0 0}
.pfcg-pc__preview{border-radius:0 0 var(--cg-r-s) var(--cg-r-s);font-size:.8rem;max-height:12.5em;
  overflow:hidden;position:relative;color:#b9c6da}
.pfcg-pc[data-pfcg-state="loaded"] .pfcg-pc__preview{display:none}
.pfcg-pc [data-pfcg-body] .pfcg-pre{border-radius:0 0 var(--cg-r-s) var(--cg-r-s);font-size:.82rem}
.pfcg-pc__msg{font-size:.87rem;color:var(--cg-navy);background:var(--cg-cream);
  border:1px solid #d4551a33;border-left:3px solid var(--cg-coral);
  border-radius:0 var(--cg-r-s) var(--cg-r-s) 0;padding:.7rem .9rem;margin:.6rem 0 0}
.pfcg-pc__canon{margin:.85rem 0 0;font-size:.87rem}
.pfcg-pc__canon a{font-weight:600;text-decoration:none}
.pfcg-pc__canon a:hover{text-decoration:underline}
.pfcg-pc[data-pfcg-state="error"] .pfcg-pc__preview{opacity:.5}
.pfcg--article .pfcg-layout__aside{top:80px}
@media (max-width:767px){
  .pfcg-pcgrid{grid-template-columns:minmax(0,1fr)}
  .pfcg-pc{padding:1.25rem}
  .pfcg-pc__head{gap:.7rem}
}

/* ---------- article sticky TOC bar (no cross-embed layout wrapper) ---------- */
.pfcg-tocbar{position:sticky;top:0;z-index:40;background:#fffffff2;
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--cg-line-2);border-bottom:1px solid var(--cg-line)}
.pfcg-tocbar .pfcg-toc__title{display:none}
.pfcg-tocbar .pfcg-toc ol{display:flex;gap:.2rem;overflow-x:auto;scrollbar-width:thin;
  padding:.5rem 0;-webkit-overflow-scrolling:touch}
.pfcg-tocbar .pfcg-toc li{flex:none;margin:0}
.pfcg-tocbar .pfcg-toc a{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;
  border-radius:7px 7px 0 0;padding:.4rem .7rem;font-size:.86rem;min-height:40px}
.pfcg-tocbar .pfcg-toc a[aria-current="true"]{border-left:0;border-bottom-color:var(--cg-coral);background:var(--cg-cream)}
.pfcg-tocbar .pfcg-toc__count{margin-left:.4rem;opacity:.75}
@media (max-width:767px){ .pfcg-tocbar{display:none} }
