/* =====================================================================
   Claude Code Power Pack - product page styles
   Scope: every rule sits under .pbs-ccpp so it can't leak site-wide.
   File: wp-content/themes/promptbuildship/assets/css/claude-code-power-pack.css
   Enqueue: conditionally for is_single('claude-code-power-pack') only.
   ===================================================================== */

.pbs-ccpp{
  --orange:#FF8235;
  --blue:#2D9CFF;
  --purple:#9D5DFF;
  --green:#00D084;
  --yellow:#FFD200;
  --cream:#FDFBF7;
  --cream-2:#F6F0E2;
  --ink:#1A1A1A;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --shadow-xs: 3px 3px 0 var(--ink);

  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  font-size:17px;
  overflow-x:hidden;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,210,0,.06), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(157,93,255,.06), transparent 45%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding:32px 32px 80px;
}
.pbs-ccpp *,
.pbs-ccpp *::before,
.pbs-ccpp *::after{ box-sizing:border-box; }

.pbs-ccpp h1,
.pbs-ccpp h2,
.pbs-ccpp h3,
.pbs-ccpp .display{
  font-family:"Bangers","Luckiest Guy",system-ui,sans-serif;
  font-weight:400;
  letter-spacing:.02em;
  line-height:1;
  margin:0;
}
.pbs-ccpp .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }

/* Inline code + chip share the same look. <code> is used in post body
   because wptexturize leaves it alone; .codechip stays for the chip rows. */
.pbs-ccpp .codechip,
.pbs-ccpp code{
  font-family:"JetBrains Mono",monospace;
  font-size:.88em;
  background:var(--cream);
  padding:1px 6px;
  border:1.5px solid var(--ink);
  border-radius:5px;
  white-space:nowrap;
  color:var(--ink);
}

.pbs-ccpp .pbs-wrap{ max-width:960px; margin:0 auto; }

/* Utility - replaces the inline style on the "16 specialist agents..." intro p */
.pbs-ccpp .pbs-intro{
  margin:0 0 22px;
  font-weight:600;
  font-size:17px;
  max-width:60ch;
}

/* ============ HERO ============ */
.pbs-ccpp .pbs-hero{
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:28px;
  box-shadow: var(--shadow);
  padding:36px 40px 40px;
  position:relative;
  overflow:hidden;
}
.pbs-ccpp .pbs-hero::before,
.pbs-ccpp .pbs-hero::after{
  content:"";
  position:absolute;
  width:160px; height:160px;
  background: radial-gradient(circle, var(--ink) 1.2px, transparent 1.6px) 0 0/14px 14px;
  opacity:.16;
  pointer-events:none;
}
.pbs-ccpp .pbs-hero::before{ top:-30px; right:-30px; }
.pbs-ccpp .pbs-hero::after { bottom:-30px; left:-30px; }

.pbs-ccpp .pbs-hero-grid{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
  gap:36px;
  align-items:center;
}
@media (max-width:780px){
  .pbs-ccpp .pbs-hero{ padding:28px 22px 30px; }
  .pbs-ccpp .pbs-hero-grid{ grid-template-columns:1fr; gap:22px; }
}

.pbs-ccpp .pbs-hero-art{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:22px;
  padding:12px;
  box-shadow: var(--shadow);
  transform: rotate(-2deg);
  position:relative;
}
.pbs-ccpp .pbs-hero-art img{ display:block; width:100%; height:auto; border-radius:14px; }
.pbs-ccpp .pbs-hero-art .ribbon{
  position:absolute;
  top:-16px; right:-14px;
  background:var(--orange);
  color:var(--cream);
  font-family:"Bangers",sans-serif;
  font-size:16px;
  letter-spacing:.04em;
  border:2.5px solid var(--ink);
  border-radius:10px;
  padding:5px 12px;
  box-shadow: var(--shadow-xs);
  transform: rotate(8deg);
}
.pbs-ccpp .pbs-hero-art .ribbon-2{
  position:absolute;
  bottom:-14px; left:-14px;
  background:var(--yellow);
  color:var(--ink);
  font-family:"Bangers",sans-serif;
  font-size:14px;
  letter-spacing:.06em;
  border:2.5px solid var(--ink);
  border-radius:10px;
  padding:5px 12px;
  box-shadow: var(--shadow-xs);
  transform: rotate(-6deg);
}

.pbs-ccpp .pbs-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:5px 12px;
  box-shadow: var(--shadow-xs);
  margin-bottom:14px;
}

.pbs-ccpp .pbs-h1{
  font-size: clamp(38px, 5vw, 60px);
  line-height:.98;
  margin:6px 0 0;
  max-width:14ch;
}
.pbs-ccpp .pbs-h1 .stop  { color:var(--orange); }
.pbs-ccpp .pbs-h1 .start { color:var(--purple); }
.pbs-ccpp .pbs-h1 .it    { color:var(--blue);   }

.pbs-ccpp .pbs-lede{
  font-size:17px;
  font-weight:600;
  max-width:50ch;
  margin:18px 0 0;
}
.pbs-ccpp .pbs-lede em{
  font-style:normal;
  background:var(--yellow);
  padding:0 6px;
  border-radius:6px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}

.pbs-ccpp .pbs-cta-row{
  margin-top:22px;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center;
}
.pbs-ccpp .pbs-buy{
  display:inline-block;
  transition: transform .12s ease, filter .12s ease;
  filter: drop-shadow(4px 4px 0 var(--ink));
  line-height:0;
}
.pbs-ccpp .pbs-buy img{ display:block; width:100%; max-width:340px; height:auto; }
.pbs-ccpp .pbs-buy:hover{ transform: translate(-1px,-1px) rotate(-1deg); filter: drop-shadow(6px 6px 0 var(--ink)); }
.pbs-ccpp .pbs-buy:active{ transform: translate(3px,3px); filter: drop-shadow(1px 1px 0 var(--ink)); }
.pbs-ccpp .pbs-buy.big img{ max-width:420px; }

/* Secondary readme button (next to Buy Now in hero) */
.pbs-ccpp .pbs-readme{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Nunito",sans-serif;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  color:var(--ink);
  background:var(--cream);
  border:2.5px solid var(--ink);
  border-radius:10px;
  padding:10px 14px;
  box-shadow: var(--shadow-xs);
  transition: transform .12s ease, box-shadow .12s ease;
  white-space:nowrap;
}
.pbs-ccpp .pbs-readme:hover{ transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.pbs-ccpp .pbs-readme:active{ transform: translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }

.pbs-ccpp .pbs-micro{
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
  color:var(--ink);
  opacity:.75;
  line-height:1.55;
}
.pbs-ccpp .pbs-micro b{ color:var(--green); opacity:1; }

/* ============ TRUST STRIP ============ */
.pbs-ccpp .pbs-trust{
  margin-top:24px;
  background:var(--ink);
  color:var(--cream);
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow: var(--shadow-sm);
  padding:14px 20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  justify-content:space-between;
  align-items:center;
}
.pbs-ccpp .pbs-trust .t{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700;
  font-size:14px;
  color:var(--cream);
}
.pbs-ccpp .pbs-trust .t::before{
  content:"";
  width:16px; height:16px;
  border:2px solid var(--cream);
  border-radius:5px;
  background:var(--green);
  flex:0 0 auto;
  box-shadow: 1.5px 1.5px 0 rgba(253,251,247,.4);
}

/* ============ SECTION HEADER ============ */
.pbs-ccpp .pbs-section-h{
  margin: 56px 0 16px;
  display:flex; align-items:baseline; gap:14px;
  flex-wrap:wrap;
}
.pbs-ccpp .pbs-section-h h2{
  font-size: clamp(30px, 3.4vw, 44px);
}
.pbs-ccpp .pbs-section-h .rule{
  flex:1;
  height:6px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 8px, transparent 8px 16px);
  opacity:.55;
  min-width:60px;
}
.pbs-ccpp .pbs-section-h .num{
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
  padding:4px 10px;
  border:2px solid var(--ink);
  border-radius:8px;
  background:var(--cream-2);
}

/* ============ PROBLEM BLOCK ============ */
.pbs-ccpp .pbs-problem{
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:30px 34px 32px;
  position:relative;
}
.pbs-ccpp .pbs-problem p{
  font-size:17px;
  font-weight:500;
  margin:0 0 14px;
  max-width:62ch;
}
.pbs-ccpp .pbs-problem p:last-child{ margin-bottom:0; }
.pbs-ccpp .pbs-problem p em{
  font-style:normal;
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:0 6px;
  font-weight:700;
  box-shadow: 2px 2px 0 var(--ink);
}

/* ============ WHAT'S INSIDE ============ */
.pbs-ccpp .pbs-inside-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
  margin-bottom:22px;
}
@media (max-width:680px){
  .pbs-ccpp .pbs-inside-grid{ grid-template-columns:1fr; }
}
.pbs-ccpp .pbs-feature{
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow: var(--shadow-sm);
  padding:22px 22px 20px;
  position:relative;
  overflow:hidden;
}
.pbs-ccpp .pbs-feature .ftag{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:var(--cream-2);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:3px 9px;
  margin-bottom:12px;
}
.pbs-ccpp .pbs-feature.f1 .ftag{ background:#FFE2CC; }
.pbs-ccpp .pbs-feature.f2 .ftag{ background:#D6ECFF; }
.pbs-ccpp .pbs-feature.f3 .ftag{ background:#E6D6FF; }
.pbs-ccpp .pbs-feature.f4 .ftag{ background:#FFF3B0; }
.pbs-ccpp .pbs-feature h3{
  font-size:22px;
  line-height:1;
  margin:2px 0 8px;
}
.pbs-ccpp .pbs-feature p{
  font-size:15px;
  font-weight:500;
  margin:0;
}
.pbs-ccpp .pbs-feature ul.agents{
  list-style:none;
  padding:0;
  margin:12px 0 0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
}
.pbs-ccpp .pbs-feature ul.agents li{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:600;
  color:var(--ink);
  background:var(--cream);
  padding:2px 8px;
  border:1.5px solid var(--ink);
  border-radius:6px;
  line-height:1.4;
  white-space:nowrap;
}

/* Highlight rows under the feature grid */
.pbs-ccpp .pbs-row{
  display:grid;
  grid-template-columns: 56px minmax(0,1fr);
  gap:18px;
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow: var(--shadow-sm);
  padding:20px 22px;
  align-items:center;
  margin-bottom:14px;
}
.pbs-ccpp .pbs-row .badge{
  display:flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  border-radius:14px;
  box-shadow: var(--shadow-xs);
  font-family:"Bangers",sans-serif;
  font-size:28px;
  line-height:1;
}
.pbs-ccpp .pbs-row.r2 .badge{ background:var(--green); }
.pbs-ccpp .pbs-row.r3 .badge{ background:var(--blue); color:var(--cream); }
.pbs-ccpp .pbs-row h3{
  font-size:22px;
  line-height:1;
  margin:0 0 4px;
}
.pbs-ccpp .pbs-row p{
  font-size:15px;
  font-weight:500;
  margin:0;
  max-width:64ch;
}
.pbs-ccpp .pbs-row .stack{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px;
}
.pbs-ccpp .pbs-row .stack .codechip{ font-size:12px; }

/* ============ MID-CTA BAND ============ */
.pbs-ccpp .pbs-midcta{
  margin-top:36px;
  background:var(--ink);
  color:var(--cream);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:28px 32px;
  display:grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.pbs-ccpp .pbs-midcta::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 0 0, rgba(255,130,53,.22), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(157,93,255,.22), transparent 38%);
  pointer-events:none;
}
@media (max-width:720px){
  .pbs-ccpp .pbs-midcta{ grid-template-columns:1fr; padding:24px 22px; gap:20px; }
}
.pbs-ccpp .pbs-midcta h2{
  color:var(--cream);
  font-size: clamp(28px, 3vw, 38px);
  line-height:1;
  margin:0;
}
.pbs-ccpp .pbs-midcta h2 .y{ color:var(--yellow); }
.pbs-ccpp .pbs-midcta h2 .o{ color:var(--orange); }
.pbs-ccpp .pbs-midcta .mc-sub{
  color:#E9E3D5;
  font-weight:600;
  margin:10px 0 0;
  font-size:15px;
  max-width:40ch;
}
.pbs-ccpp .pbs-midcta .mc-buy{
  display:flex; flex-direction:column; gap:10px; align-items:flex-start;
  position:relative;
}
.pbs-ccpp .pbs-midcta .mc-buy .pbs-micro{
  color:#E9E3D5;
  opacity:.95;
}
.pbs-ccpp .pbs-midcta .mc-buy .pbs-micro b{ color:var(--green); }

/* ============ WHO FOR ============ */
.pbs-ccpp .pbs-whofor{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:18px;
}
@media (max-width:680px){
  .pbs-ccpp .pbs-whofor{ grid-template-columns:1fr; }
}
.pbs-ccpp .pbs-whocard{
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:24px 26px 22px;
  background:var(--cream-2);
}
.pbs-ccpp .pbs-whocard.no{
  background:var(--cream);
  transform: rotate(.4deg);
}
.pbs-ccpp .pbs-whocard.yes{
  transform: rotate(-.4deg);
}
.pbs-ccpp .pbs-whocard .wtag{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"Bangers",sans-serif;
  font-size:22px;
  line-height:1;
  background:var(--green);
  color:var(--ink);
  border:2.5px solid var(--ink);
  border-radius:10px;
  padding:5px 12px 4px;
  box-shadow: var(--shadow-xs);
  margin-bottom:14px;
}
.pbs-ccpp .pbs-whocard.no .wtag{ background:var(--orange); }
.pbs-ccpp .pbs-whocard h3{
  font-size:22px;
  margin:0 0 12px;
}
.pbs-ccpp .pbs-whocard ul{
  list-style:none;
  padding:0; margin:0;
  display:grid; gap:10px;
}
.pbs-ccpp .pbs-whocard ul li{
  display:flex; align-items:flex-start; gap:10px;
  font-weight:600;
  font-size:15px;
}
.pbs-ccpp .pbs-whocard ul li::before{
  content:"";
  flex:0 0 auto;
  width:16px; height:16px;
  margin-top:3px;
  background:var(--green);
  border:2px solid var(--ink);
  border-radius:5px;
  box-shadow:1.5px 1.5px 0 var(--ink);
}
.pbs-ccpp .pbs-whocard.no ul li::before{
  background:var(--cream-2);
  border-radius:50%;
}

/* ============ STEPS ============ */
.pbs-ccpp .pbs-steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}
@media (max-width:780px){
  .pbs-ccpp .pbs-steps{ grid-template-columns:1fr; }
}
.pbs-ccpp .pbs-step{
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:24px 22px 22px;
  position:relative;
}
.pbs-ccpp .pbs-step .stepnum{
  position:absolute;
  top:-18px; left:18px;
  width:46px; height:46px;
  border-radius:50%;
  border:3px solid var(--ink);
  background:var(--orange);
  color:var(--ink);
  font-family:"Bangers",sans-serif;
  font-size:26px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-xs);
  line-height:1;
}
.pbs-ccpp .pbs-step.s2 .stepnum{ background:var(--blue); }
.pbs-ccpp .pbs-step.s3 .stepnum{ background:var(--purple); color:var(--cream); }
.pbs-ccpp .pbs-step h3{
  font-size:24px;
  line-height:1;
  margin:8px 0 8px;
}
.pbs-ccpp .pbs-step p{
  font-size:15px;
  font-weight:500;
  margin:0;
}
.pbs-ccpp .pbs-step p + p{ margin-top:8px; }

/* ============ BUILDER CRED ============ */
.pbs-ccpp .pbs-cred{
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:22px;
  box-shadow: var(--shadow);
  padding:30px 34px 28px;
  display:grid;
  grid-template-columns: 140px minmax(0,1fr);
  gap:26px;
  align-items:start;
}
@media (max-width:620px){
  .pbs-ccpp .pbs-cred{ grid-template-columns:1fr; gap:18px; padding:24px 22px 24px; }
}
.pbs-ccpp .pbs-cred-avatar{
  width:140px; height:140px;
  border:3px solid var(--ink);
  border-radius:24px;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
  transform: rotate(-2deg);
  background:var(--cream);
}
@media (max-width:620px){
  .pbs-ccpp .pbs-cred-avatar{ width:120px; height:120px; }
}
.pbs-ccpp .pbs-cred-avatar img{ display:block; width:100%; height:100%; object-fit:cover; }
.pbs-ccpp .pbs-cred .eyebrow{
  display:inline-block;
  margin-bottom:14px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.12em;
  background:var(--blue);
  color:var(--cream);
  border:2px solid var(--ink);
  border-radius:6px;
  padding:3px 9px;
  box-shadow: var(--shadow-xs);
}
.pbs-ccpp .pbs-cred h2{
  font-size: clamp(28px, 3vw, 38px);
  margin:12px 0 12px;
}
.pbs-ccpp .pbs-cred h2 .o{ color:var(--orange); }
.pbs-ccpp .pbs-cred p{
  font-size:16px;
  font-weight:500;
  margin:0 0 12px;
  max-width:62ch;
}
.pbs-ccpp .pbs-cred-links{
  margin-top:6px;
  display:flex; gap:12px; flex-wrap:wrap;
}
.pbs-ccpp .pbs-cred-links a{
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  color:var(--ink);
  background:var(--cream);
  border:2px solid var(--ink);
  border-radius:8px;
  padding:6px 12px;
  box-shadow: var(--shadow-xs);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pbs-ccpp .pbs-cred-links a:hover{ transform: translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }

/* ============ FAQ ============ */
.pbs-ccpp .pbs-faq{
  margin-top:8px;
  display:grid;
  gap:14px;
}
.pbs-ccpp .pbs-faq details{
  background:var(--cream-2);
  border:3px solid var(--ink);
  border-radius:18px;
  box-shadow: var(--shadow-sm);
  overflow:hidden;
}
.pbs-ccpp .pbs-faq summary{
  list-style:none;
  cursor:pointer;
  padding:18px 24px 18px 22px;
  font-weight:800;
  font-size:17px;
  display:flex; align-items:center; gap:14px;
}
.pbs-ccpp .pbs-faq summary::-webkit-details-marker{ display:none; }
.pbs-ccpp .pbs-faq summary::after{
  content:"+";
  margin-left:auto;
  font-family:"Bangers",sans-serif;
  font-size:32px;
  line-height:1;
  color:var(--orange);
}
.pbs-ccpp .pbs-faq details[open] summary::after{ content:"\2013"; color:var(--purple); }
.pbs-ccpp .pbs-faq summary .qnum{
  flex:0 0 auto;
  font-family:"Bangers",sans-serif;
  font-size:22px;
  background:var(--yellow);
  border:2px solid var(--ink);
  border-radius:8px;
  padding:2px 8px;
  line-height:1;
  box-shadow: 2px 2px 0 var(--ink);
}
.pbs-ccpp .pbs-faq .answer{
  padding: 0 24px 22px 60px;
  font-size:15px;
  font-weight:500;
}
.pbs-ccpp .pbs-faq .answer p{ margin:0 0 10px; }
.pbs-ccpp .pbs-faq .answer p:last-child{ margin-bottom:0; }
@media (max-width:520px){
  .pbs-ccpp .pbs-faq summary{ padding:16px 18px; font-size:15px; gap:10px; }
  .pbs-ccpp .pbs-faq summary .qnum{ font-size:18px; padding:2px 6px; }
  .pbs-ccpp .pbs-faq .answer{ padding:0 18px 18px 44px; font-size:14px; }
}

/* ============ FINAL CTA ============ */
.pbs-ccpp .pbs-final{
  margin-top:48px;
  background:var(--ink);
  color:var(--cream);
  border:3px solid var(--ink);
  border-radius:28px;
  box-shadow: var(--shadow);
  padding:46px 44px 42px;
  position:relative;
  overflow:hidden;
  text-align:center;
}
.pbs-ccpp .pbs-final::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 0 0, rgba(255,130,53,.22), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(157,93,255,.25), transparent 40%);
  pointer-events:none;
}
.pbs-ccpp .pbs-final::after{
  content:"";
  position:absolute;
  width:200px; height:200px;
  background: radial-gradient(circle, rgba(253,251,247,.18) 1.4px, transparent 1.8px) 0 0/16px 16px;
  top:-40px; right:-50px;
  pointer-events:none;
}
.pbs-ccpp .pbs-final-inner{ position:relative; }
.pbs-ccpp .pbs-final h2{
  color:var(--cream);
  font-size: clamp(38px, 4.6vw, 60px);
  line-height:1;
  margin:0;
  text-align:center;
}
.pbs-ccpp .pbs-final h2 .o{ color:var(--orange); }
.pbs-ccpp .pbs-final h2 .y{ color:var(--yellow); }
.pbs-ccpp .pbs-final h2 .g{ color:var(--green); }
.pbs-ccpp .pbs-final .f-sub{
  color:#E9E3D5;
  font-weight:600;
  margin:18px auto 26px;
  font-size:17px;
  max-width:50ch;
}
.pbs-ccpp .pbs-final .f-micro{
  margin:18px auto 0;
  display:inline-grid;
  grid-template-columns: auto auto auto auto;
  column-gap:14px;
  row-gap:4px;
  text-align:left;
  font-family:"JetBrains Mono",monospace;
  font-size:13px;
  font-weight:700;
  color:#E9E3D5;
  opacity:.95;
  line-height:1.6;
}
.pbs-ccpp .pbs-final .f-micro b{ color:var(--green); }
@media (max-width:520px){
  .pbs-ccpp .pbs-final .f-micro{ font-size:12px; column-gap:10px; }
}

/* ============ SMALL-SCREEN TWEAKS ============ */
@media (max-width:520px){
  .pbs-ccpp{ padding:20px 14px 56px; }
  .pbs-ccpp .pbs-h1{ font-size:38px; }
  .pbs-ccpp .pbs-buy img{ max-width:260px; }
  .pbs-ccpp .pbs-buy.big img{ max-width:300px; }
  .pbs-ccpp .pbs-trust .t{ font-size:13px; }
  .pbs-ccpp .pbs-problem{ padding:22px 20px 22px; }
  .pbs-ccpp .pbs-final{ padding:34px 22px 30px; }
  .pbs-ccpp .pbs-section-h h2{ font-size:28px; }
}