/* Kuma Operating System router page (/KOS)
   Page-scoped structure only: hero, the three-card grid, pills and the bottom anchor. The soft
   surfaces (radius, gradient, translucent borders, shadows, entrance motion) are shared with the
   other diagnostic pages and live in suite.css. Selectors are prefixed kos-. Loaded after styles.css. */

.kos-sr{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Hero ---------- */
.kos-hero{padding:96px 0 48px;}
.kos-micro{
  margin:0; font-family:'Lato',Arial,sans-serif; font-size:.82rem; letter-spacing:.02em;
  color:rgba(11,21,35,.6);
}

/* ---------- Matrix: three instruments side by side on desktop ---------- */
.kos-matrix{background:var(--cream); padding:24px 0 96px;}
.kos-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:24px; align-items:stretch;}
.kos-card{display:flex; flex-direction:column; height:100%; padding:32px;}
.kos-card-top{display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:20px;}
.kos-tag{
  font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.08em; color:var(--teal);
}
.kos-status{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:rgba(11,21,35,.6); padding:5px 12px;
}
.kos-status::before{content:""; width:7px; height:7px; border-radius:50%; border:var(--hairline) solid rgba(11,21,35,.4); background:transparent;}
.kos-status-active{color:var(--navy);}
.kos-status-active::before{background:var(--teal); border-color:var(--teal);}

.kos-card-title{font-size:1.5rem; margin:0 0 12px;}
.kos-hook{font-size:.98rem; color:rgba(26,26,26,.78); margin:0 0 22px;}

.kos-pills{list-style:none; margin:0 0 32px; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
.kos-pills li{
  font-family:'Lato',Arial,sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.01em;
  color:var(--navy); padding:5px 10px; white-space:nowrap;
}

.kos-card-cta{margin-top:auto;}
.kos-card-cta .btn{width:100%; justify-content:center; text-align:center; padding-left:14px; padding-right:14px; font-size:.88rem; white-space:nowrap;}
.kos-card .btn:focus-visible{outline:2px solid var(--teal); outline-offset:3px;}

/* ---------- Bottom anchor: navy strip, same family as #scorecard and #contact ---------- */
.kos-anchor{background:radial-gradient(120% 85% at 50% 0%, #152740 0%, var(--navy) 100%); padding:84px 0;}
.kos-anchor h2{color:#fff; max-width:760px; margin:0 0 16px;}
.kos-anchor p{color:rgba(255,255,255,.8); max-width:640px; margin:0 0 28px;}
.kos-anchor-link{color:#fff; border-bottom-color:rgba(255,255,255,.4); line-height:1.5;}
.kos-anchor-link:hover{border-bottom-color:#fff;}
.kos-anchor-link:focus-visible{outline:2px solid var(--teal-on-dark); outline-offset:4px;}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .kos-hero{padding:64px 0 32px;}
  .kos-grid{grid-template-columns:1fr; max-width:560px; margin:0 auto;}
  .kos-matrix{padding-bottom:64px;}
  .kos-anchor{padding:64px 0;}
}