/* Copyright (c) 2026 CALMIC SDN BHD (SSM 202201031605).
   Proprietary and confidential. Unauthorised copying or distribution prohibited.

   Capability popup. Kept in its own file so a landing-page redesign does not drop
   it, and so its styles are not buried in the page stylesheet. */

.cap-dialog{
  width:min(940px, 94vw); max-height:88vh; padding:0; border:1px solid var(--line);
  border-radius:6px; background:var(--white); color:var(--ink);
  box-shadow:0 40px 90px rgba(16,45,39,.32); overflow:hidden;
}
.cap-dialog::backdrop{background:rgba(16,45,39,.55); backdrop-filter:blur(3px)}
.cap-dialog[open]{display:flex; flex-direction:column}

.cap-head{
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px;
  padding:24px 30px 18px; border-bottom:1px solid var(--line); background:var(--forest);
  color:#f2f4ea;
}
.cap-head .eyebrow{color:#b4c9b8}
.cap-head .eyebrow-dot{background:var(--lime)}
.cap-head h2{
  font:800 clamp(22px,2.6vw,30px)/1.15 var(--display);
  letter-spacing:-.045em; margin:12px 0 6px; color:#f7f6ed;
}
.cap-lede{font-size:12px; color:#a9bdb0; max-width:54ch; margin:0; line-height:1.7}
.cap-close{
  flex:0 0 auto; width:34px; height:34px; border-radius:4px;
  border:1px solid rgba(226,242,219,.3); background:transparent; color:#dbe7dd;
  font-size:19px; line-height:1; cursor:pointer;
}
.cap-close:hover{background:rgba(226,242,219,.12); color:#fff}

.cap-body{
  overflow-y:auto; padding:22px 30px 8px;
  display:grid; grid-template-columns:1fr 1fr; gap:2px 34px;
}
.cap-group{break-inside:avoid; padding:14px 0; border-bottom:1px solid #e6e7dd}
.cap-group h3{
  font:500 9px var(--mono); text-transform:uppercase; letter-spacing:.12em;
  color:#3e6b4f; margin:0 0 8px;
}
.cap-group ul{margin:0; padding-left:16px}
.cap-group li{font-size:12.5px; line-height:1.7; color:#4b5c53; margin-bottom:4px}
.cap-group strong{color:#1c3028}
.cap-group--limits{grid-column:1/-1; border-bottom:0}
.cap-group--limits h3{color:#8a6a1f}
.cap-group--limits li{color:#6b5c3a}

.cap-foot{
  display:flex; align-items:center; gap:22px; padding:16px 30px;
  border-top:1px solid var(--line); background:#eff1e6;
}
.cap-foot .button{background:var(--forest); color:#fff}
.cap-foot .text-link{color:#315840}

@media(max-width:820px){
  .cap-body{grid-template-columns:1fr; padding:18px 20px 6px}
  .cap-head{padding:20px 20px 14px}
  .cap-foot{padding:14px 20px; gap:14px; flex-wrap:wrap}
  .cap-dialog{max-height:92vh; border-radius:4px}
}
@media(prefers-reduced-motion:no-preference){
  .cap-dialog[open]{animation:capIn .18s ease-out}
  @keyframes capIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
}