/* ===== Features Page ===== */
#features-page .chip{
  display:inline-block; padding:8px 12px; border-radius:999px;
  background:#fff; border:1px solid var(--ink-200); color:#0b1220;
  text-decoration:none; font-weight:600; box-shadow: var(--shadow-sm);
}
#features-page .chip:hover{ background:#f8fafc; }

/* trio cards */
#features-page .f-card{
  border:1px solid var(--ink-200); border-radius: var(--radius);
  padding:18px; background:#fff; box-shadow: var(--shadow-sm);
}
#features-page .f-icon{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  font-size:18px; color:#0b1220; margin-bottom:8px; background:#eef2ff;
}
#features-page .bg-indigo{ background:#e0e7ff; }
#features-page .bg-lime{ background:#ecfccb; }
#features-page .bg-amber{ background:#fef3c7; }

/* screenshot frame */
#features-page .shot-frame{
  border:1px solid var(--ink-200); border-radius: var(--radius-lg);
  aspect-ratio: 16 / 10; background:#fff; box-shadow: var(--shadow-lg);
}
#features-page .shot-frame img{ width:100%; height:100%; object-fit:cover; display:block; }

/* badges / lists */
#features-page .badge-soft{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:#ffffffaa; border:1px solid #ffffff4d; box-shadow: var(--shadow-sm);
  font-weight:600;
}
#features-page .badge-lite{
  display:inline-block; padding:4px 10px; border-radius:999px; background:#f1f5f9; font-size:.85rem;
}

/* check list */
#features-page .check-list{ padding-left:0; list-style:none; }
#features-page .check-list li{
  position:relative; padding-left:26px; margin-bottom:8px; color:var(--ink-700);
}
#features-page .check-list li:before{
  content:"✓"; position:absolute; left:0; top:0; color:#16a34a; font-weight:700;
}

/* small dots */
#features-page .mini-feature{
  border:1px solid var(--ink-200); border-radius:10px; padding:10px 12px; background:#fff;
}
#features-page .mini-feature .dot{
  width:8px; height:8px; border-radius:999px; background:#22c55e; display:inline-block; margin-right:8px;
}

/* AI demo */
#features-page .ai-demo{
  border:1px solid var(--ink-200); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow-sm);
}
#features-page .ai-input{
  background:#f8fafc; border:1px dashed var(--ink-200); border-radius:10px; padding:10px 12px; margin-bottom:10px;
}
#features-page .ai-output{ border:1px solid var(--ink-200); border-radius:10px; padding:12px; }
#features-page .ai-output .label{ font-size:.85rem; color:var(--ink-500); }
#features-page .tag-row{ display:flex; flex-wrap:wrap; gap:6px; }
#features-page .tag{
  display:inline-block; padding:4px 8px; border-radius:999px; background:#eef2ff; font-size:.85rem; font-weight:600;
}

/* Analytics chart card */
#features-page .chart-card{
  border:1px solid var(--ink-200); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow-sm);
  padding:14px;
}
#features-page .chart-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#features-page .mini-chart{
  display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; height:160px; align-items:end; margin-bottom:10px;
}
#features-page .mini-chart span{
  display:block; background:linear-gradient(180deg,#93c5fd,#2563eb); border-radius:6px 6px 0 0;
}
#features-page .metric-list{ margin:0; padding-left:18px; }
#features-page .metric-list li{ margin-bottom:6px; }
#features-page .up{ color:#16a34a; }

/* compare */
#features-page .compare-card{
  border:1px solid var(--ink-200); border-radius: var(--radius); background:#fff; padding:16px; box-shadow: var(--shadow-sm);
}
#features-page .x-list{ padding-left:0; list-style:none; }
#features-page .x-list li{
  position:relative; padding-left:26px; margin-bottom:8px; color:var(--ink-700);
}
#features-page .x-list li:before{
  content:"✕"; position:absolute; left:0; top:0; color:#ef4444; font-weight:700;
}