/* ──────────────────────────────────────────────────────────────────────────
   product-page.css — shared styling for the dedicated per-item product pages
   (godmode.html, godmode-plus.html, good-loop.html, and future plan pages).

   Loaded AFTER /style.css so its rules win on equal specificity. Reuses the
   global nav / footer / .container from /style.css; everything here is
   namespaced with a `pp-` prefix so it never collides with page-local CSS
   elsewhere (evolution.css, one-shot.css, pricing.css all define their own
   .hero / .btn-main / .price-box).

   No JS depends on these classes. FAQs use native <details>/<summary>.
   Buttons keep a near-black label on a bright fill (the non-negotiable
   contrast rule) and set the colour on :link/:visited so the global
   a:link rule in /style.css can never repaint them.
   ────────────────────────────────────────────────────────────────────────── */

.pp-main { position: relative; z-index: 1; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.pp-hero {
  padding: 96px 0 72px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 0%, var(--green-glow) 0%, transparent 60%);
}
.pp-prefix {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--green-dim);
  margin: 0 0 18px;
}
.pp-h1 {
  font-size: clamp(34px, 6vw, 60px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--green);
  text-shadow: 0 0 30px var(--green-glow);
  margin: 0 0 18px;
}
.pp-h1 .pp-h1-dim { color: var(--text); display: block; font-weight: 600; }
.pp-tagline {
  font-size: clamp(16px, 2.4vw, 21px);
  color: var(--text);
  font-weight: 600;
  margin: 0 0 14px;
}
.pp-intro {
  max-width: 620px;
  margin: 0 auto 30px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
}
.pp-cta-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Buttons (contrast-safe: near-black label on bright fill) ───────────── */
.pp-btn,
.pp-btn:link,
.pp-btn:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green);
  color: #001a06;
  padding: 15px 36px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.pp-btn:hover {
  background: #33ff66;
  color: #001a06;
  box-shadow: 0 0 40px var(--green-glow-strong);
  transform: translateY(-2px);
}
.pp-btn-ghost,
.pp-btn-ghost:link,
.pp-btn-ghost:visited {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-dim);
  padding: 15px 36px;
  font-family: "JetBrains Mono", monospace;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.pp-btn-ghost:hover { border-color: var(--green); color: var(--green); }

/* ── Generic section ───────────────────────────────────────────────────── */
.pp-section { padding: 72px 0; border-bottom: 1px solid var(--border); }
.pp-section.pp-alt { background: linear-gradient(180deg, var(--bg) 0%, #04060a 50%, var(--bg) 100%); }
.pp-step-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--green-dim);
  margin: 0 0 12px;
}
.pp-h2 {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 800;
  color: var(--green);
  text-shadow: 0 0 20px var(--green-glow);
  margin: 0 0 16px;
  line-height: 1.15;
}
.pp-h2-dim { color: var(--text); }
.pp-sub {
  max-width: 680px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 36px;
}

/* ── Key-point callout ─────────────────────────────────────────────────── */
.pp-keypoint {
  border-left: 3px solid var(--green);
  background: var(--green-glow);
  padding: 18px 22px;
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  margin: 28px 0;
  border-radius: 0 4px 4px 0;
}

/* ── Feature / layer grid ──────────────────────────────────────────────── */
.pp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.pp-feat {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px;
  transition: border-color 0.2s, transform 0.2s;
}
.pp-feat:hover { border-color: var(--green-muted); transform: translateY(-3px); }
.pp-feat-key {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 2px;
  margin: 0 0 8px;
}
.pp-feat-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
.pp-feat-body { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* ── Numbered steps ────────────────────────────────────────────────────── */
.pp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.pp-step {
  background: var(--bg-terminal);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 22px;
}
.pp-step-n {
  font-family: "JetBrains Mono", monospace;
  font-size: 26px;
  font-weight: 800;
  color: var(--green-muted);
  margin: 0 0 10px;
}
.pp-step-t { font-size: 15px; font-weight: 700; color: var(--green); margin: 0 0 8px; }
.pp-step-b { font-size: 14px; color: var(--text-dim); line-height: 1.65; margin: 0; }

/* ── Price box ─────────────────────────────────────────────────────────── */
.pp-price-wrap { display: flex; justify-content: center; }
.pp-price-box {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 2px solid var(--green);
  border-radius: 6px;
  padding: 30px 28px;
  box-shadow: 0 0 50px var(--green-glow), inset 0 0 40px var(--green-glow);
  text-align: left;
}
.pp-price-tag {
  display: inline-block;
  background: var(--green);
  color: #001a06;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 2px;
  margin: 0 0 14px;
}
.pp-price-name { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 12px; }
.pp-price-big { margin: 0 0 4px; }
.pp-price-big .pp-dollar { font-size: 24px; color: var(--green); vertical-align: top; }
.pp-price-big .pp-num { font-size: 52px; font-weight: 800; color: var(--green); text-shadow: 0 0 30px var(--green-glow); }
.pp-price-big .pp-per { font-size: 16px; color: var(--text-muted); }
.pp-price-alt { font-size: 13px; color: var(--text-muted); margin: 0 0 18px; }
.pp-price-alt .pp-alt-amt { color: var(--text-dim); font-weight: 600; }
.pp-price-list { list-style: none; padding: 0; margin: 0 0 22px; }
.pp-price-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-price-list li .pp-ck { position: absolute; left: 0; color: var(--green); font-weight: 700; }
.pp-buy { width: 100%; justify-content: center; margin: 4px 0 0; }
.pp-buy-alt,
.pp-buy-alt:link,
.pp-buy-alt:visited {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
}
.pp-buy-alt:hover { color: var(--text-dim); text-decoration: underline; }
.pp-buy-alt .pp-alt-amt { color: var(--text-dim); font-weight: 600; }
.pp-guarantee {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin: 16px 0 0;
}

/* ── Cross-sell band (steer toward the plan / bundle) ──────────────────── */
.pp-crosssell {
  background: var(--bg-card);
  border: 1px solid var(--green-muted);
  border-radius: 6px;
  padding: 26px 28px;
  margin: 0 auto;
  max-width: 720px;
  text-align: center;
}
.pp-crosssell h3 { font-size: 18px; color: var(--green); margin: 0 0 10px; font-weight: 700; }
.pp-crosssell p { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0 0 18px; }
.pp-crosssell .pp-save {
  color: var(--green);
  font-weight: 700;
}

/* ── FAQ (native <details>, no JS) ─────────────────────────────────────── */
.pp-faq-item {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 10px;
  background: var(--bg-card);
  overflow: hidden;
}
.pp-faq-q {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pp-faq-q::-webkit-details-marker { display: none; }
.pp-faq-q::after { content: "+"; color: var(--green); font-size: 20px; line-height: 1; }
.pp-faq-item[open] .pp-faq-q::after { content: "\2212"; }
.pp-faq-item[open] .pp-faq-q { color: var(--green); }
.pp-faq-a { padding: 0 20px 18px; color: var(--text-dim); font-size: 14px; line-height: 1.7; }

/* ── Final CTA ─────────────────────────────────────────────────────────── */
.pp-final { text-align: center; padding: 84px 0; }
.pp-final h2 { font-size: clamp(26px, 4vw, 38px); color: var(--green); margin: 0 0 14px; text-shadow: 0 0 20px var(--green-glow); }
.pp-final p { color: var(--text-dim); font-size: 16px; margin: 0 0 28px; }
.pp-note { color: var(--text-muted); font-size: 12px; margin: 24px 0 0; }

/* ── Disambiguation banner (skill vs plan) ─────────────────────────────── */
.pp-banner {
  background: rgba(255, 140, 0, 0.08);
  border: 1px solid rgba(255, 140, 0, 0.4);
  border-radius: 4px;
  padding: 14px 18px;
  margin: 0 auto 28px;
  max-width: 720px;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.6;
}
.pp-banner b { color: #ffae42; }

@media (max-width: 640px) {
  .pp-hero { padding: 64px 0 52px; }
  .pp-section { padding: 52px 0; }
  .pp-price-box { padding: 24px 20px; }
}