/* ==========================================================================
   Snare — Features (4 material cards)
   One featured Steel card with element-type bullets + three coming-soon
   material cards. Minimal & high-level. Dark, on the locked home system.
   ========================================================================== */

/* ---- Page header ---------------------------------------------------- */
.feat-head { text-align: center; max-width: 820px; margin: 0 auto; padding-top: clamp(44px, 6vw, 84px); }
.feat-head .eyebrow { display: inline-block; margin-bottom: 20px; }
.feat-head h1 { font-size: clamp(38px, 5.4vw, 68px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.02; color: #fff; margin: 0; text-wrap: balance; }
.feat-head h1 .accent { color: var(--mint); }
.feat-head p { margin: 22px auto 0; max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--white-70); text-wrap: pretty; }

.caps { max-width: 1060px; margin: clamp(48px, 7vw, 88px) auto 0; }

/* ---- Shared card shell ---------------------------------------------- */
.cap {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--white-12);
  border-radius: 18px;
  padding: clamp(28px, 3vw, 42px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 16px 38px -24px rgba(0,0,0,0.70);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cap-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; position: relative; z-index: 1; }
.cap-ico { display: none; }
  width: 46px; height: 46px; flex: 0 0 auto; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(159,232,188,0.10); color: var(--mint); border: 1px solid rgba(159,232,188,0.22);
}
.cap-ico svg { width: 24px; height: 24px; }
.cap-head h2 { margin: 0; font-size: clamp(22px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cap-status {
  margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
}
.cap-status--live { color: #06241f; background: var(--mint); }
.cap-status--soon { color: var(--mint); background: var(--mint-soft); }

/* ---- Featured Steel card -------------------------------------------- */
.cap--steel { border-color: rgba(159,232,188,0.30); margin-bottom: 100px; }
.cap--feature { margin-bottom: 100px; }
.caps > .cap:last-child { margin-bottom: 0; }

/* ---- Need something else ------------------------------------------- */
.else-block { max-width: 720px; margin: 0 auto; text-align: center; }
.else-title { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; color: #fff; text-wrap: balance; }
.else-copy { margin: 0 auto; max-width: 56ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: var(--white-70); text-wrap: pretty; }
.soon-grid--2 { grid-template-columns: repeat(2, 1fr); }
.soon-grid--1 { grid-template-columns: 1fr; }
.cap--steel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 0% 0%, rgba(159,232,188,0.09), transparent 52%);
}
.steel-lead { position: relative; z-index: 1; margin: 0 0 clamp(24px,3vw,34px); max-width: 64ch; font-size: 15.5px; line-height: 1.55; color: var(--white-70); }

.el-list {
  position: relative; z-index: 1;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.el-item { border-top: 1px solid var(--white-12); padding-top: 16px; }
.el-name { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--mint); margin-bottom: 9px; }
.el-sub { display: flex; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.5; color: var(--white-70); }
.el-sub li { display: inline; }
.el-sub li:not(:last-child)::after { content: "·"; margin: 0 6px; color: rgba(255,255,255,0.30); }
.el-sub--code { font-size: 13px; letter-spacing: 0.05em; }
.el-note { font-size: 14px; line-height: 1.5; color: var(--white-70); margin: 0; }

/* ---- Coming-soon row ------------------------------------------------ */
.soon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px,3.5vw,48px); }
.cap--soon:hover { transform: translateY(-3px); border-color: rgba(159,232,188,0.24); }
.cap--soon h2 { font-size: clamp(20px,2vw,24px); }
.cap-desc { position: relative; z-index: 1; margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--white-70); }

@media (max-width: 860px) {
  .el-list { grid-template-columns: repeat(2, 1fr); }
  .soon-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) { .el-list { grid-template-columns: 1fr; } }