/* Page-only: keep app.css clean */
.page-solutions .section--alt { background: #0B1B3D; }

/* Solutions hero: center align title, text, buttons */
.page-solutions .section-solutions-hero{
  text-align:center;
}
.page-solutions .section-solutions-hero .hero-cta{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* Accent word "Solutions" */
.page-solutions .solutions-accent{
  color:#0075ce;
}

/* Optional: keep description at a readable width */
.page-solutions .solutions-hero-desc{
  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}

/* Better anchor jumps with fixed header */
.page-solutions section[id] { scroll-margin-top: 110px; }

/* Switch buttons row */
.page-solutions .solutions-switch__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
}

/* Switch section: centered heading + text */
.page-solutions .section-solutions-switch{
  text-align:center;
}

/* Keep the text readable */
.page-solutions .solutions-switch__text{
  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}

/* Stronger “clickable chips” styling */
.page-solutions .solutions-switch__buttons{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:18px;
}

.page-solutions .solutions-switch__btn{
  border:1px solid rgba(255,255,255,.22);
  background: rgba(0, 117, 206, .10); /* subtle brand tint */
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.page-solutions .solutions-switch__btn:hover,
.page-solutions .solutions-switch__btn:focus-visible{
  transform: translateY(-2px);
  background: rgba(0, 117, 206, .18);
  border-color: rgba(0, 117, 206, .55);
}


/* 2-column variant (only used where needed) */
.page-solutions .why-grid.why-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){
  .page-solutions .why-grid.why-grid--2{
    grid-template-columns: 1fr;
  }
}

/* Optional: a small CTA row inside your existing why-card */
.page-solutions .why-card-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  text-decoration:none;
  font-weight:600;
}

/* Center the intro paragraph under section titles for the 4 solution grids */
.page-solutions #usecase > .container > p,
.page-solutions #industry > .container > p,
.page-solutions #goal > .container > p,
.page-solutions #environment > .container > p{
  text-align:center;
  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}


/* Tables (light touch) */
.page-solutions .solutions-table-wrap{
  overflow:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
}
.page-solutions .solutions-table{
  width:100%;
  border-collapse:collapse;
}
.page-solutions .solutions-table th,
.page-solutions .solutions-table td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  vertical-align:top;
}

/* Center the section titles for the two table sections */
.page-solutions #psf-title,
.page-solutions #featcmp-title{
  text-align:center;
}

/* Center-align all table cell content on Solutions page */
.page-solutions .solutions-table th,
.page-solutions .solutions-table td{
  text-align:center;
}

/* Center title + intro text in "IPNM vs Others" section */
.page-solutions #vs-title{
  text-align:center;
}
.page-solutions #vs-title + p{
  text-align:center;
  max-width: 980px;
  margin-left:auto;
  margin-right:auto;
}

/* How it works: scannable steps (not a wall of text) */
.page-solutions .solutions-how__title{
  text-align:center;
}

.page-solutions .solutions-how__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:24px;
}

@media (max-width: 992px){
  .page-solutions .solutions-how__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .page-solutions .solutions-how__grid{
    grid-template-columns: 1fr;
  }
}

.page-solutions .solutions-how__step{
  position:relative;
  padding:18px 18px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.page-solutions .solutions-how__num{
  width:34px;
  height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  border:1px solid rgba(0,117,206,.55);
  background: rgba(0,117,206,.12);
  margin-bottom:10px;
}

.page-solutions .solutions-how__h{
  margin:0 0 8px;
}

.page-solutions .solutions-how__p{
  margin:0;
  line-height:1.55;
}

/* Align Explore buttons per row without overlap */
.page-solutions #usecase .why-card,
.page-solutions #industry .why-card,
.page-solutions #goal .why-card,
.page-solutions #environment .why-card{
  display:grid;
  grid-template-rows:auto auto minmax(0, 1fr) auto;
  align-content:start;
  height:auto;
}

.page-solutions #usecase .why-card-text,
.page-solutions #industry .why-card-text,
.page-solutions #goal .why-card-text,
.page-solutions #environment .why-card-text{
  margin-bottom:14px;
}

.page-solutions #usecase .why-card-btn,
.page-solutions #industry .why-card-btn,
.page-solutions #goal .why-card-btn,
.page-solutions #environment .why-card-btn{
  margin-top:0;
  align-self:start;
}