/* ==========================================================================
   Mega-Net Software — Product Page System (EHR Cloud / ERP Cloud, etc.)
   A distinct visual language for deep-dive product pages: dark navy +
   the Mega-Net brand orange (same accent as style.css / the logo),
   Cormorant Garamond display / DM Sans body, sidebar navigation.
   This is intentionally separate from assets/css/style.css (the main
   marketing site's navy/orange system) — it does not touch or depend on
   that file, so the rest of the site is unaffected.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root{
  --navy-950:#0D1B2A;   /* page background */
  --navy-900:#13253A;   /* sidebar / elevated panels */
  --navy-850:#1A3049;   /* nested elevation, hover states */
  --orange-500:#FF8E1C; /* primary accent — brand orange, matches style.css */
  --orange-600:#E67812; /* deeper orange */
  --orange-pale:rgba(255,142,28,0.12);
  --cream:#F4EFE4;      /* primary text on navy */
  --text-muted:#9FAAB8; /* secondary text on navy */
  --text-faint:#8793A3; /* ≥4.5:1 (AA) on navy-900 sidebar and navy-950 footer */
  --border:rgba(244,239,228,0.12);
  --border-strong:rgba(244,239,228,0.2);
  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:22px;
  --sidebar-w:288px;

  --font-display:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:'DM Sans', 'Segoe UI', sans-serif;
}

.pp *{box-sizing:border-box;}
.pp{
  margin:0;
  background:var(--navy-950);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  max-width:100vw;
  position:relative;
}
.pp h1,.pp h2,.pp h3{
  font-family:var(--font-display);
  font-weight:600;
  color:#fff;
  margin:0 0 0.5em;
  line-height:1.18;
}
.pp a{color:inherit; text-decoration:none;}
.pp img{max-width:100%; display:block;}
.pp :focus-visible{outline:2px solid var(--orange-500); outline-offset:3px;}

/* ---------- Shell: sidebar + content ---------- */
.pp-shell{
  display:flex;
  min-height:100vh;
}

.pp-sidebar{
  flex:0 0 var(--sidebar-w);
  width:var(--sidebar-w);
  background:var(--navy-900);
  border-right:1px solid var(--border);
  padding:1.75rem 1.5rem 2rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:1.75rem;
}

.pp-brand{
  display:flex; align-items:center; gap:10px;
  padding-bottom:1.5rem;
  border-bottom:1px solid var(--border);
}
.pp-brand img{height:34px; width:auto;}
.pp-brand-text{display:flex; flex-direction:column; line-height:1.2;}
.pp-brand-text strong{font-family:var(--font-display); font-size:1.05rem; color:#fff; font-weight:700;}
.pp-brand-text span{font-size:0.68rem; letter-spacing:0.06em; color:var(--orange-500); text-transform:uppercase;}

.pp-nav-group h4{
  font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--text-faint); margin:0 0 0.7rem; font-weight:600;
}
.pp-nav-group ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px;}
.pp-nav-group a{
  display:block; padding:8px 10px; border-radius:var(--radius-sm);
  font-size:0.9rem; color:var(--text-muted); transition:background .15s ease, color .15s ease;
}
.pp-nav-group a:hover{background:var(--navy-850); color:var(--cream);}
.pp-nav-group a.is-active{background:var(--orange-pale); color:var(--orange-500); font-weight:600;}
.pp-nav-group a.is-current{color:#fff; font-weight:600;}
.pp-nav-group a.is-current::after{content:" —"; color:var(--orange-500);}

.pp-sidebar-cta{
  margin-top:auto;
  padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:flex; flex-direction:column; gap:10px;
}
.pp-sidebar-cta p{font-size:0.8rem; color:var(--text-muted); margin:0 0 4px;}

/* ---------- Mobile top bar + off-canvas sidebar ---------- */
.pp-topbar{
  display:none;
  align-items:center; justify-content:space-between;
  padding:14px 18px;
  background:var(--navy-900);
  border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.pp-topbar .pp-brand{border-bottom:none; padding-bottom:0;}
.pp-menu-btn{
  background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:8px 10px; cursor:pointer;
}
.pp-menu-btn span{display:block; width:20px; height:2px; background:var(--cream); margin:4px 0; border-radius:2px;}

@media (max-width:960px){
  .pp-shell{flex-direction:column;}
  .pp-topbar{display:flex;}
  .pp-sidebar{
    position:fixed; top:0; left:0; height:100vh; z-index:60;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.22,.9,.32,1);
    box-shadow:20px 0 40px -20px rgba(0,0,0,0.5);
  }
  .pp-sidebar.is-open{transform:translateX(0);}
  .pp-sidebar-backdrop{
    display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:55;
  }
  .pp-sidebar-backdrop.is-open{display:block;}
}

/* ---------- Main content ---------- */
.pp-main{flex:1 1 auto; min-width:0;}
.pp-container{max-width:820px; margin:0 auto; padding:0 2.5rem;}
@media (max-width:640px){ .pp-container{padding:0 1.25rem;} }

.pp-section{padding:4.5rem 0;}
.pp-section:first-of-type{padding-top:3.5rem;}
@media (max-width:640px){ .pp-section{padding:3rem 0;} }
.pp-section + .pp-section{border-top:1px solid var(--border);}

.pp-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--orange-500); font-weight:600; margin-bottom:0.9rem;
}
.pp-eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--orange-500);}

.pp-section h2{font-size:clamp(1.6rem,3.2vw,2.2rem);}
.pp-lede{color:var(--text-muted); font-size:1.08rem; max-width:62ch; margin:0 0 0.5em;}

/* ---------- Hero ---------- */
.pp-hero h1{font-size:clamp(2.1rem,5vw,3.1rem); max-width:16ch;}
.pp-hero .pp-lede{font-size:1.2rem; margin:1rem 0 1.75rem;}
.pp-hero-points{
  display:flex; flex-wrap:wrap; gap:0.6rem 1.6rem; margin:0 0 2rem;
  font-size:0.92rem; color:var(--text-muted);
}
.pp-hero-points span{display:flex; align-items:center; gap:8px;}
.pp-hero-points svg{color:var(--orange-500); flex-shrink:0;}
.pp-ctas{display:flex; gap:12px; flex-wrap:wrap;}

.pp-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; border-radius:999px; font-weight:600; font-size:0.94rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-family:var(--font-body);
}
/* .pp prefix: out-ranks the generic ".pp a{color:inherit}" so the navy label actually applies */
.pp .pp-btn-primary{background:var(--orange-500); color:var(--navy-950);}
.pp-btn-primary:hover{background:#FF9F3D; transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(255,142,28,0.45);}
.pp-btn-ghost{border:1.5px solid var(--border-strong); color:var(--cream);}
.pp-btn-ghost:hover{border-color:var(--orange-500); color:var(--orange-500); transform:translateY(-2px);}
.pp-btn-block{width:100%; justify-content:center;}

/* ---------- Cards / feature groups ---------- */
.pp-grid{display:grid; gap:1.1rem;}
.pp-grid-2{grid-template-columns:1fr;}
@media (min-width:600px){ .pp-grid-2{grid-template-columns:repeat(2,1fr);} }

.pp-card{
  background:var(--navy-900); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.5rem;
}
.pp-card .pp-icon{
  width:40px; height:40px; border-radius:10px; background:var(--orange-pale); color:var(--orange-500);
  display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
}
.pp-card h3{font-size:1.15rem; margin-bottom:0.4rem; color:#fff;}
.pp-card p{font-size:0.93rem; color:var(--text-muted); margin:0;}

.pp-feature-group{margin-bottom:2.25rem;}
.pp-feature-group:last-child{margin-bottom:0;}
.pp-feature-group h3{
  font-family:var(--font-body); font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase;
  color:var(--orange-500); font-weight:700; margin-bottom:0.9rem;
}
.pp-feature-group ul{list-style:none; margin:0; padding:0;}
.pp-feature-group li{
  display:flex; gap:10px; align-items:flex-start; padding:0.55rem 0;
  border-top:1px solid var(--border); font-size:0.96rem; color:var(--cream);
}
.pp-feature-group li:first-child{border-top:none;}
.pp-feature-group li svg{flex-shrink:0; margin-top:4px; color:var(--orange-500);}
.pp-feature-group li strong{color:#fff;}
.pp-feature-group li span.detail{display:block; color:var(--text-muted); font-size:0.88rem; margin-top:2px;}

/* ---------- Role badges ---------- */
.pp-roles{display:flex; flex-wrap:wrap; gap:0.6rem;}
.pp-role-badge{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--navy-900); border:1px solid var(--border); border-radius:999px;
  padding:8px 14px; font-size:0.87rem; color:var(--cream);
}
.pp-role-badge svg{color:var(--orange-500);}

/* ---------- Callout / differentiator panel ---------- */
.pp-callout{
  background:linear-gradient(155deg, var(--navy-900), var(--navy-850));
  border:1px solid var(--border-strong); border-radius:var(--radius-lg);
  padding:2rem;
}
.pp-callout p{color:var(--text-muted); font-size:1rem;}
.pp-callout p:last-child{margin-bottom:0;}
.pp-callout strong{color:var(--orange-500); font-weight:600;}

/* ---------- Final CTA ---------- */
.pp-final-cta{
  background:linear-gradient(155deg, var(--navy-900), var(--navy-950));
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:3rem 2.25rem; text-align:center;
}
.pp-final-cta h2{margin-bottom:0.4em;}
.pp-final-cta p{color:var(--text-muted); max-width:52ch; margin:0 auto 1.75rem;}
.pp-final-cta .pp-ctas{justify-content:center;}

/* ---------- Note / placeholder callouts ---------- */
.pp-note{
  border-left:3px solid var(--orange-500); background:var(--orange-pale);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:0.85rem 1.1rem; font-size:0.87rem; color:var(--text-muted); margin-top:1.25rem;
}
.pp-note strong{color:var(--cream);}

/* ---------- Footer (compact, page-scoped) ---------- */
.pp-footer{
  border-top:1px solid var(--border); padding:2.25rem 0 3rem;
  font-size:0.85rem; color:var(--text-faint);
}
.pp-footer a{color:var(--text-muted);}
.pp-footer a:hover{color:var(--orange-500);}
.pp-footer-links{display:flex; flex-wrap:wrap; gap:1.25rem; margin-bottom:1rem;}