/* =====================================================================
   Product page sections (views/product/sections.php, views/product-page.php)
   Prefixed "pp-" so they look the same inside template pages (Bootstrap +
   style.css) and in the standalone product pages.
   ===================================================================== */
.pp{
  --pp-orange:#ff7f00;
  --pp-orange-dark:#e86e00;
  --pp-orange-text:#b35300;
  --pp-orange-soft:#fff1e2;
  --pp-ink:#14161a;
  --pp-text:#3a3f47;
  --pp-gray:#5f6673;
  --pp-border:#eef0f3;
  --pp-bg:#fbfbfa;
  --pp-navy:#12182b;
  --pp-green:#0f7a43;
  --pp-green-soft:#e8f6ee;
  --pp-blue:#1d4ed8;
  --pp-blue-soft:#eaf0ff;
  font-family:'Inter', 'Inter Fallback', sans-serif; color:var(--pp-text); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.pp *, .pp *::before, .pp *::after{ box-sizing:border-box; }
/* The template's style.css hides every <section> ("input, section { display:none }" for its tab widget) */
.pp section, section.pp{ display:block; clear:none; }
.pp h1, .pp h2, .pp h3, .pp h4{ font-family:'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', sans-serif; color:var(--pp-ink); margin:0; line-height:1.25; letter-spacing:-.2px; }
.pp p{ margin:0; }
.pp ul{ list-style:none; margin:0; padding:0; }
.pp a{ text-decoration:none; }
.pp-container{ width:100%; max-width:1200px; margin:0 auto; padding:0 32px; }
.pp-section{ padding:80px 0; }
.pp-section.pp-alt{ background:var(--pp-bg); }
.pp-head{ text-align:center; max-width:780px; margin:0 auto 44px; }
.pp-head h2{ font-size:34px; font-weight:800; }
.pp-head p{ margin-top:14px; font-size:16.5px; color:var(--pp-gray); }
.pp-eyebrow{
  display:inline-flex; align-items:center; gap:7px; background:var(--pp-orange-soft); color:var(--pp-orange-text);
  font-size:12px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; padding:6px 13px; border-radius:30px; margin-bottom:14px;
}

/* ---------- Hero (standalone pages) ---------- */
.pp-hero{ background:linear-gradient(180deg,#fff7ef 0%, #fbfbfa 100%); padding:56px 0 64px; }
.pp-crumbs{ display:flex; flex-wrap:wrap; gap:8px; font-size:13px; color:var(--pp-gray); margin:0 0 22px; }
.pp-crumbs li + li::before{ content:'/'; margin-right:8px; color:#c4c8d0; }
.pp-crumbs a{ color:var(--pp-gray); }
.pp-crumbs a:hover{ color:var(--pp-orange-text); }
.pp-crumbs [aria-current]{ color:var(--pp-ink); font-weight:600; }
.pp-hero h1{ font-size:46px; font-weight:800; max-width:900px; letter-spacing:-.6px; }
.pp-hero h1 span{ display:block; color:var(--pp-orange-text); font-size:.58em; margin-top:12px; letter-spacing:-.2px; }
.pp-hero .pp-lead{ font-size:18px; color:var(--pp-gray); max-width:760px; margin-top:20px; }
.pp-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:30px; }

/* ---------- Buttons ---------- */
.pp-btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--pp-orange); color:#fff !important;
  font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:10px; border:2px solid var(--pp-orange);
  box-shadow:0 8px 20px rgba(255,127,0,.25); transition:background .2s, border-color .2s;
}
.pp-btn:hover{ background:var(--pp-orange-dark); border-color:var(--pp-orange-dark); }
.pp-btn-ghost{ background:#fff; color:var(--pp-ink) !important; border-color:var(--pp-border); box-shadow:none; }
.pp-btn-ghost:hover{ background:#fff; border-color:var(--pp-orange); }

/* ---------- Vision band ---------- */
.pp-vision{ background:var(--pp-navy); color:#c7cbe0; padding:70px 0; }
.pp-vision h2{ color:#fff; font-size:32px; font-weight:800; max-width:860px; }
.pp-vision p{ font-size:17px; max-width:860px; margin-top:16px; }
.pp-note{
  display:flex; gap:12px; align-items:flex-start; margin-top:26px; max-width:860px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:14px 18px; font-size:14px;
}
.pp-note i{ color:var(--pp-orange); margin-top:4px; }

/* ---------- Cards ---------- */
.pp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pp-grid-2{ grid-template-columns:repeat(2,1fr); }
.pp-grid > *, .pp-solution > *{ min-width:0; } /* long badges must not widen cards on small phones */
.pp-card{ background:#fff; border:1px solid var(--pp-border); border-radius:16px; padding:26px; }
.pp-card h3{ font-size:18px; font-weight:700; margin:14px 0 8px; }
.pp-card p{ font-size:15px; color:var(--pp-gray); }
.pp-icon{
  width:46px; height:46px; border-radius:12px; background:var(--pp-orange-soft); color:var(--pp-orange-text);
  display:inline-flex; align-items:center; justify-content:center; font-size:19px;
}

/* ---------- Solution ---------- */
.pp-solution{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.pp-solution h2{ font-size:32px; font-weight:800; }
.pp-solution p{ font-size:16.5px; margin-top:16px; }
.pp-solution-panel{ background:linear-gradient(135deg,#fff7ef,#fff); border:1px solid var(--pp-border); border-radius:20px; padding:30px; }
.pp-solution-panel li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px dashed var(--pp-border); font-weight:600; color:var(--pp-ink); }
.pp-solution-panel li:last-child{ border-bottom:0; }
.pp-solution-panel i{ color:var(--pp-orange-text); margin-top:4px; }

/* ---------- Modules with status ---------- */
.pp-legend{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin:-18px 0 34px; font-size:13.5px; }
.pp-module{ background:#fff; border:1px solid var(--pp-border); border-radius:16px; padding:24px; display:flex; flex-direction:column; }
.pp-module-head{ display:flex; gap:14px; align-items:center; }
.pp-module h3{ font-size:19px; font-weight:800; }
.pp-module > p{ font-size:14.5px; color:var(--pp-gray); margin:12px 0 14px; }
.pp-features li{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:9px 0; border-top:1px solid var(--pp-border); font-size:14.5px; color:var(--pp-ink); }
.pp-badge{ flex-shrink:0; font-size:11px; font-weight:700; letter-spacing:.2px; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.pp-badge.is-live{ background:var(--pp-green-soft); color:var(--pp-green); }
.pp-badge.is-module{ background:var(--pp-blue-soft); color:var(--pp-blue); }
.pp-badge.is-roadmap{ background:var(--pp-orange-soft); color:var(--pp-orange-text); }

/* ---------- AI ---------- */
.pp-ai{ background:linear-gradient(160deg,#12182b 0%, #1d2440 100%); color:#c7cbe0; }
.pp-ai .pp-head h2{ color:#fff; }
.pp-ai .pp-head p{ color:#aab0cc; }
.pp-ai .pp-eyebrow{ background:rgba(255,127,0,.15); color:#ffb066; }
.pp-ai-card{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:16px; padding:22px; }
.pp-ai-card .pp-icon{ background:rgba(255,127,0,.15); color:#ffb066; }
.pp-ai-card h3{ color:#fff; font-size:17px; font-weight:700; margin:14px 0 8px; }
.pp-ai-card p{ font-size:14.5px; color:#aab0cc; }
.pp-ai-card .pp-badge{ display:inline-block; margin-top:14px; }
.pp-ai .pp-badge.is-live{ background:rgba(34,197,94,.15); color:#6ee7a0; }
.pp-ai .pp-badge.is-roadmap{ background:rgba(255,127,0,.15); color:#ffb066; }
.pp-principles{ margin-top:36px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:16px; padding:26px 28px; }
.pp-principles h3{ color:#fff; font-size:19px; font-weight:800; margin-bottom:12px; }
.pp-principles li{ display:flex; gap:12px; padding:7px 0; font-size:15px; }
.pp-principles i{ color:#6ee7a0; margin-top:5px; }

/* ---------- Benefits ---------- */
.pp-benefit li{ display:flex; gap:10px; padding:7px 0; font-size:15px; }
.pp-benefit li i{ color:var(--pp-green); margin-top:5px; font-size:13px; }

/* ---------- Workflow ---------- */
.pp-steps{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; counter-reset:step; }
.pp-steps.pp-steps-5{ grid-template-columns:repeat(5,1fr); }
.pp-step{ position:relative; background:#fff; border:1px solid var(--pp-border); border-radius:14px; padding:22px 18px; counter-increment:step; }
.pp-step::before{
  content:counter(step); display:inline-flex; width:32px; height:32px; border-radius:50%; background:var(--pp-orange);
  color:#fff; font-weight:800; align-items:center; justify-content:center; font-size:14px; margin-bottom:12px;
}
.pp-step h3{ font-size:16px; font-weight:800; margin-bottom:6px; }
.pp-step p{ font-size:14px; color:var(--pp-gray); }

/* ---------- Customization + security ---------- */
.pp-check li{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--pp-border); font-size:15.5px; color:var(--pp-ink); align-items:flex-start; }
.pp-check li:last-child{ border-bottom:0; }
.pp-check li > i{ color:var(--pp-orange-text); margin-top:5px; }
.pp-check li .pp-badge{ margin-left:auto; }
.pp-small{ font-size:14px; color:var(--pp-gray); margin-top:16px !important; }

/* ---------- FAQ ---------- */
.pp-faq{ max-width:860px; margin:0 auto; }
.pp-faq details{ background:#fff; border:1px solid var(--pp-border); border-radius:12px; margin-bottom:12px; }
.pp-faq summary{
  cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; color:var(--pp-ink); font-size:16px;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.pp-faq summary::-webkit-details-marker{ display:none; }
.pp-faq summary i{ color:var(--pp-orange-text); transition:transform .2s; }
.pp-faq details[open] summary i{ transform:rotate(45deg); }
.pp-faq details p{ padding:0 22px 20px; font-size:15.5px; }

/* ---------- Related + CTA ---------- */
.pp-related{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.pp-related a{
  display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--pp-border); color:var(--pp-ink);
  padding:11px 18px; border-radius:30px; font-weight:600; font-size:14.5px;
}
.pp-related a:hover{ border-color:var(--pp-orange); color:var(--pp-orange-text); }
.pp-cta{
  background:linear-gradient(120deg,#ff8a00 0%, #f2610d 100%); border-radius:22px; padding:44px;
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; color:#fff;
}
.pp-cta h2{ color:#fff; font-size:28px; font-weight:800; }
.pp-cta p{ margin-top:8px; opacity:.95; font-size:16px; }
.pp-cta .pp-btn{ background:#fff; color:var(--pp-orange-text) !important; border-color:#fff; box-shadow:none; }
.pp-cta .pp-btn:hover{ background:var(--pp-navy); border-color:var(--pp-navy); color:#fff !important; }
.pp-cta .pp-btn-ghost{ background:transparent; color:#fff !important; border-color:rgba(255,255,255,.7); }
.pp-cta .pp-btn-ghost:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .pp-grid{ grid-template-columns:repeat(2,1fr); }
  .pp-steps, .pp-steps.pp-steps-5{ grid-template-columns:repeat(3,1fr); }
  .pp-solution{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:700px){
  .pp-container{ padding:0 20px; }
  .pp-section{ padding:56px 0; }
  .pp-grid, .pp-grid-2{ grid-template-columns:1fr; }
  .pp-steps, .pp-steps.pp-steps-5{ grid-template-columns:1fr 1fr; }
  .pp-hero h1{ font-size:31px; }
  .pp-head h2, .pp-solution h2, .pp-vision h2{ font-size:26px; }
  .pp-cta{ padding:30px 24px; }
  .pp-cta .pp-btn{ width:100%; justify-content:center; }
  .pp-features li{ flex-direction:column; gap:6px; }
  .pp-badge{ white-space:normal; }
  .pp-check li{ flex-wrap:wrap; }
  .pp-check li .pp-badge{ margin-left:28px; }
}