/* ============================================================
   SUJA — Product/Service Page Design System (.suja-pp-*)
   Used by: CareAxes HMIS (32738), future Gyneye, Suja AI, RCM,
   Research, Services pages. Distinct from homepage system —
   tighter section padding, alternating bg rhythm, internal-hero.
   ============================================================ */

:root{
  --suja-pp-container:1240px;
  --suja-pp-bg-light:#f8fafc;
  --suja-pp-bg-dark:#0c1e35;
  --suja-pp-card-border:#e2e8f0;
  --suja-pp-card-shadow:0 4px 20px rgba(15,23,42,0.04);
  --suja-pp-card-shadow-hover:0 12px 32px rgba(15,23,42,0.08);
}

/* === Internal hero === */
.suja-pp-hero{ min-height:560px; }
.suja-pp-hero .elementor-container{ max-width:var(--suja-pp-container) !important; align-items:center; }
.suja-pp-hero-eyebrow .elementor-heading-title{
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:#0891b2 !important;
  margin-bottom:14px;
}
.suja-pp-hero-title .elementor-heading-title{
  font-family:"Plus Jakarta Sans",sans-serif !important;
  font-size:clamp(30px,3.4vw,46px) !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  letter-spacing:-0.01em;
  color:#0c1e35 !important;
  margin-bottom:18px;
}
.suja-pp-hero-sub .elementor-widget-text-editor p{
  font-size:17px;
  line-height:1.6;
  color:#475569;
  max-width:560px;
  margin:0 0 30px;
}
.suja-pp-hero-image img{
  border-radius:18px;
  box-shadow:0 30px 60px -18px rgba(12,30,53,0.22), 0 10px 24px -8px rgba(12,30,53,0.10);
  width:100%;
  height:auto;
}

/* === Generic section eyebrow + heading === */
.suja-pp-eyebrow .elementor-heading-title{
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:2px !important;
  text-transform:uppercase !important;
  color:#0891b2 !important;
}
.suja-pp-heading .elementor-heading-title{
  font-family:"Plus Jakarta Sans",sans-serif !important;
  font-size:clamp(26px,3vw,38px) !important;
  font-weight:800 !important;
  line-height:1.15 !important;
  color:#0c1e35 !important;
}
.suja-pp-lede .elementor-widget-text-editor p{
  font-size:16px;
  line-height:1.65;
  color:#475569;
  max-width:680px;
  margin:0 auto 24px;
}

/* === Value pill strip === */
.suja-pp-pills{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.suja-pp-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 18px;
  border-radius:999px;
  background:rgba(8,145,178,0.08);
  color:#0891b2;
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:0.4px;
}

/* === Card grid === */
.suja-pp-card{
  background:#ffffff;
  border:1px solid var(--suja-pp-card-border);
  border-radius:14px;
  padding:24px;
  box-shadow:var(--suja-pp-card-shadow);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%;
}
.suja-pp-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--suja-pp-card-shadow-hover);
  border-color:#cbd5e1;
}
.suja-pp-card-icon{
  width:44px; height:44px;
  border-radius:10px;
  background:rgba(8,145,178,0.08);
  color:#0891b2;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:20px;
  margin-bottom:14px;
}
.suja-pp-card-icon--red{ background:rgba(239,68,68,0.08); color:#ef4444; }
.suja-pp-card-title{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:17px;
  font-weight:700;
  line-height:1.3;
  color:#0c1e35;
  margin:0 0 8px;
}
.suja-pp-card-desc{
  font-family:"DM Sans",sans-serif;
  font-size:14px;
  line-height:1.6;
  color:#475569;
  margin:0;
}

/* === Stakeholder persona cards === */
.suja-pp-persona{
  background:#ffffff;
  border:1px solid var(--suja-pp-card-border);
  border-radius:16px;
  padding:28px 24px;
  box-shadow:var(--suja-pp-card-shadow);
  height:100%;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.suja-pp-persona:hover{ transform:translateY(-3px); box-shadow:var(--suja-pp-card-shadow-hover); }
.suja-pp-persona-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:#0891b2; margin:0 0 10px;
}
.suja-pp-persona-title{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:18px; font-weight:800; color:#0c1e35; margin:0 0 14px; line-height:1.25;
}
.suja-pp-persona-pain{
  font-family:"DM Sans",sans-serif; font-size:14px; font-style:italic;
  color:#64748b; padding:10px 12px; border-left:2px solid #0891b2;
  background:rgba(8,145,178,0.04); margin:0 0 16px; border-radius:0 8px 8px 0;
}
.suja-pp-persona-list{ list-style:none; padding:0; margin:0 0 18px; }
.suja-pp-persona-list li{
  font-family:"DM Sans",sans-serif; font-size:13.5px; line-height:1.55;
  color:#334155; padding:4px 0 4px 22px; position:relative;
}
.suja-pp-persona-list li::before{
  content:""; position:absolute; left:0; top:11px;
  width:14px; height:2px; background:#0891b2; border-radius:2px;
}
.suja-pp-persona-outcome{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:13.5px; font-weight:700;
  color:#0c1e35; padding:12px 14px; background:#f1f5f9; border-radius:10px;
  margin:auto 0 0;
}

/* === Specialty pill strip === */
.suja-pp-specialty-grid{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:980px; margin:0 auto;
}
.suja-pp-specialty-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:999px;
  background:#ffffff; border:1px solid var(--suja-pp-card-border);
  color:#0c1e35; font-family:"Plus Jakarta Sans",sans-serif;
  font-size:13px; font-weight:600;
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.suja-pp-specialty-pill:hover{ border-color:#0891b2; color:#0891b2; transform:translateY(-1px); }
.suja-pp-spec-dot{
  width:6px; height:6px; border-radius:50%; background:#0891b2;
}

/* === AI dark band === */
.suja-pp-ai-band{ background-color:var(--suja-pp-bg-dark) !important; }
.suja-pp-ai-band .elementor-heading-title{ color:#ffffff !important; }
.suja-pp-ai-band .suja-pp-eyebrow .elementor-heading-title{ color:#22d3ee !important; }
.suja-pp-ai-band .elementor-widget-text-editor p,
.suja-pp-ai-band .elementor-widget-text-editor{ color:#cbd5e1 !important; }
.suja-pp-ai-band .suja-pp-card{
  background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.10);
  backdrop-filter:blur(6px);
}
.suja-pp-ai-band .suja-pp-card-title{ color:#ffffff; }
.suja-pp-ai-band .suja-pp-card-desc{ color:#cbd5e1; }
.suja-pp-ai-band .suja-pp-card-icon{ background:rgba(34,211,238,0.12); color:#22d3ee; }

/* === Outcome stats === */
.suja-pp-stat{ text-align:center; padding:20px 12px; }
.suja-pp-stat-num{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:clamp(36px,4.5vw,56px);
  font-weight:800; line-height:1;
  color:#0891b2; display:block; margin-bottom:8px;
}
.suja-pp-stat-label{
  font-family:"Plus Jakarta Sans",sans-serif;
  font-size:14px; font-weight:700;
  color:#0c1e35; display:block; margin-bottom:6px;
  text-transform:uppercase; letter-spacing:1px;
}
.suja-pp-stat-context{
  font-family:"DM Sans",sans-serif;
  font-size:13px; line-height:1.5; color:#475569;
}

/* === Implementation journey === */
.suja-pp-journey{
  display:grid; grid-template-columns:repeat(5,1fr); gap:16px;
  max-width:1100px; margin:0 auto; position:relative;
}
.suja-pp-journey::before{
  content:""; position:absolute; top:24px; left:8%; right:8%; height:2px;
  background:linear-gradient(90deg, rgba(8,145,178,0) 0%, #0891b2 15%, #0891b2 85%, rgba(8,145,178,0) 100%);
  z-index:0;
}
.suja-pp-journey-step{ position:relative; text-align:center; z-index:1; }
.suja-pp-journey-num{
  width:48px; height:48px; border-radius:50%; background:#ffffff;
  border:2px solid #0891b2; color:#0891b2;
  font-family:"Plus Jakarta Sans",sans-serif; font-size:18px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:12px;
}
.suja-pp-journey-title{
  font-family:"Plus Jakarta Sans",sans-serif; font-size:14px; font-weight:700;
  color:#0c1e35; margin:0 0 6px;
}
.suja-pp-journey-desc{
  font-family:"DM Sans",sans-serif; font-size:12.5px; line-height:1.5;
  color:#64748b; margin:0;
}
@media (max-width:991px){
  .suja-pp-journey{ grid-template-columns:repeat(2,1fr); }
  .suja-pp-journey::before{ display:none; }
}
@media (max-width:600px){
  .suja-pp-journey{ grid-template-columns:1fr; }
}

/* === FAQ accordion === */
.suja-pp-faq .elementor-toggle-item{
  background:#ffffff; border:1px solid var(--suja-pp-card-border) !important;
  border-radius:12px; margin-bottom:10px; overflow:hidden;
}
.suja-pp-faq .elementor-tab-title{
  padding:18px 20px !important;
  font-family:"Plus Jakarta Sans",sans-serif !important;
  font-size:15px !important; font-weight:700 !important;
  color:#0c1e35 !important; border:0 !important;
}
.suja-pp-faq .elementor-tab-content{
  padding:0 20px 18px !important;
  font-family:"DM Sans",sans-serif !important;
  font-size:14px !important; line-height:1.65 !important;
  color:#475569 !important; border:0 !important;
}

/* === Compliance badges === */
.suja-pp-badges{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:center;
}
.suja-pp-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:10px;
  background:#ffffff; border:1px solid var(--suja-pp-card-border);
  font-family:"Plus Jakarta Sans",sans-serif; font-size:13px; font-weight:700;
  color:#0c1e35;
}

/* === Responsive === */
@media (max-width:991px){
  .suja-pp-hero{ min-height:auto; padding-top:60px !important; padding-bottom:60px !important; }
}