:root{
  --primary-color:#003366;
  --accent-color:#006699;
  --light-bg:#f5f8fa;
  --text-color:#222;
  --card-bg:#fff;
  --radius:16px;
  --shadow:0 6px 18px rgba(0,0,0,.08);
}

.ps .container{width:min(1200px,92vw);margin:0 auto}

/* Hero */
.ps-hero{
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  color:#fff;
  padding: clamp(2rem, 5vw, 3rem) 0;
}
.ps-hero h1{margin:0 0 .35rem; font-size: clamp(1.8rem, 4vw, 2.4rem)}
.ps-hero .lead{margin:0 0 .75rem; opacity:.95; max-width: 70ch}
.hero-ctas{display:flex;gap:.75rem;flex-wrap:wrap}

/* Readiness */
.ps-readiness{background:var(--light-bg); padding:1.5rem 0}
.ps-readiness h2{color:var(--primary-color); margin:0 0 .75rem}
.ready-grid{
  display:grid; gap:.75rem;
  grid-template-columns: repeat(5, minmax(0,1fr));
}
.ready-grid li{
  background:var(--card-bg); border:1px solid #e6eef5; border-radius:12px;
  padding:.75rem; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:.25rem;
}
.ready-grid .label{font-size:.8rem; opacity:.8}
.ready-grid strong{color:var(--text-color)}
.ready-grid small{opacity:.8}
@media (max-width: 980px){ .ready-grid{grid-template-columns: repeat(2,1fr)} }
@media (max-width: 520px){ .ready-grid{grid-template-columns: 1fr} }

/* Capabilities */
.ps-capabilities{background:#fff; padding:1.75rem 0}
.ps-capabilities h2{color:var(--primary-color); margin:0 0 .25rem}
.ps-capabilities .muted{opacity:.9; margin:0 0 .75rem}
.cap-grid{
  display:grid; gap:1.25rem;
  grid-template-columns: repeat(3, minmax(0,1fr));
}
.cap-grid .cap{min-height:100%}
.card{
  background:var(--card-bg); border:1px solid #e6eef5; border-radius:var(--radius);
  box-shadow:var(--shadow); padding: clamp(1rem, 3vw, 1.25rem);
}
.card h3{margin:.1rem 0 .5rem; color:var(--primary-color)}
.tick{list-style:none; padding:0; margin:0; display:grid; gap:.4rem}
.tick li{padding-left:1.25rem; position:relative}
.tick li::before{content:"✓"; position:absolute; left:0; color:var(--accent-color); font-weight:700}
@media (max-width: 980px){ .cap-grid{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .cap-grid{grid-template-columns: 1fr} }

/* Delivery & Process */
.ps-delivery{background:var(--light-bg); padding:1.75rem 0}
.ps-delivery h2{color:var(--primary-color); margin:0 0 .75rem}
.delivery-grid{display:grid; gap:1.25rem; grid-template-columns: 1fr 1fr}
.steps{margin:.25rem 0 0; padding-left:1.2rem}
.steps li{margin:.25rem 0}
@media (max-width: 820px){ .delivery-grid{grid-template-columns:1fr} }

/* Codes */
.ps-codes{background:#fff; padding:1.75rem 0}
.ps-codes h2{color:var(--primary-color); margin:0 0 .75rem}
.codes{display:grid; gap:1.25rem; grid-template-columns:1fr 1fr}
.mono{list-style:none; padding:0; margin:0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace}
.mono li{padding:.25rem .5rem; border:1px dashed #d6e3ef; border-radius:8px; margin-bottom:.35rem}
@media (max-width: 680px){ .codes{grid-template-columns:1fr} }

/* Partners (light variant) */
.ps-partners{
  /* background:var(--light-bg);  */
  padding:1.25rem 0
}
.ps-partners .light-text{margin:0 0 .5rem; text-align:center; font-weight:600; color:var(--text-color)}
.ps-partners .logos{display:flex; gap:1.25rem; align-items:center; justify-content:center; flex-wrap:wrap}
.ps-partners img{height:30px; width:auto; filter:grayscale(15%); opacity:.9}

/* FAQ */
.ps-faq{background:#fff; padding:1.75rem 0}
.ps-faq h2{color:var(--primary-color); margin:0 0 .75rem}
.ps-faq details{border:1px solid #e6eef5; border-radius:10px; padding:.6rem .75rem; margin:.5rem 0}
.ps-faq summary{cursor:pointer; font-weight:600}
.ps-faq p{margin:.5rem 0 0}

/* Buttons (reuse) */
.btn{
  --_bg:var(--primary-color); --_fg:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; text-decoration:none; font-weight:600;
  border-radius:12px; padding:.6rem 1rem; border:2px solid transparent;
  color:var(--_fg); background:var(--_bg);
  transition:filter .2s ease, transform .06s ease;
}
.btn--primary:hover{filter:brightness(1.05)}
.btn--ghost{background:#fff; color:var(--accent-color); border-color: rgba(0,102,153,.35)}
.btn--ghost:hover{background:#f7fbff}
.btn:active{transform:translateY(1px)}
.muted{opacity:.85}


.main-header {
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  padding: 0 2%;
  padding-top: 5px;
}
.main-header > div {
  display: none;
}
@media (max-width: 768px) {
  .main-header > div {
    display: flex;
  }
}