/* ===== TaskFlow: enterprise SaaS overrides ===== */
:root {
  --tf-accent: #243447; /* desaturated slate */
  --tf-muted: #596773;
  --tf-border: rgba(36,52,71,0.06);
  --tf-surface: linear-gradient(180deg,#ffffff,#fbfdff);
}

#taskflowSection.taskflow-section {
  padding: 44px 28px;
  background: rgba(250,251,253,0.5);
  margin: 0 0 18px;
  border-radius: 12px;
}

.taskflow-header { max-width: 1100px; margin-bottom: 18px; }
.taskflow-title {
  font-size: 28px;
  line-height: 1.12;
  font-weight: 700;
  margin: 0;
  color: #0f1722;
.taskflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 20px;
  align-items: stretch; /* ensure grid items stretch to same row height */
}
  letter-spacing: -0.02em;
}
.taskflow-subtitle {
  margin-top: 8px;
  font-size: 16px;
  color: var(--tf-muted);
  max-width: 900px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
  min-height: 200px;
  height: 100%; /* fill grid row so all cards match height */
.taskflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
  gap: 20px;
  align-items:start;
}

/* card */
.taskflow-card {
  background: var(--tf-surface);
  border: 1px solid var(--tf-border);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 10px 30px rgba(15,23,34,0.06);
  transition: transform .16s ease, box-shadow .16s ease;
  display:flex; flex-direction:column; gap:12px;
  min-height: 200px;
}

.taskflow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(15,23,34,0.09);
}

.taskflow-card-header {
  display:flex; align-items:center; gap:14px;
  padding-bottom:10px; margin-bottom:10px;
  border-bottom: 1px solid rgba(15,23,34,0.04);
}

.taskflow-card-icon {
  width:52px; height:52px; border-radius:12px;
  display:grid; place-items:center; font-size:22px;
  background: linear-gradient(135deg,#f7f8fa,#ffffff);
  color:var(--tf-accent);
  box-shadow: 0 8px 20px rgba(15,23,34,0.04);
  flex-shrink:0;
}

.taskflow-card-title { margin:0; font-size:18px; font-weight:700; color:#0f1722; }
.taskflow-card-desc { margin:0; font-size:14px; color:var(--tf-muted); }

.taskflow-card-features { margin:8px 0 0; padding-left:18px; font-size:14px; color:var(--tf-muted); }
.taskflow-card-features li { margin:6px 0; }

/* Buttons */
.taskflow-card .taskflow-card-btn {
  margin-top:auto;
  height:44px;
  padding:0 18px;
  border-radius:10px;
  font-size:15px;
  font-weight:600;
  letter-spacing:0.01em;
  box-shadow:0 10px 26px rgba(36,52,71,0.06);
  display:inline-flex; align-items:center; gap:8px;
}

.taskflow-card .btn-primary {
  background: linear-gradient(180deg,#223448,#1b2f3f);
  color:#fff;
  border:none;
}
.taskflow-card .btn-primary:hover { filter:brightness(1.04); }

/* Export button: distinctive but muted green */
.taskflow-card .taskflow-export-btn.btn-success {
  background: linear-gradient(180deg,#0f766e,#0a5f58);
  color:#fff;
  border:none;
}

/* secondary */
.taskflow-card .btn-secondary {
  background:#f6f7f9;
  color:#25323b;
  border:1px solid rgba(36,52,71,0.04);
}

/* small screens */
@media (max-width:860px) {
  #taskflowSection.taskflow-section { padding: 20px; }
  .taskflow-title { font-size:22px; }
  .taskflow-subtitle { font-size:14px; }
  .taskflow-card { padding:16px; border-radius:12px; min-height:160px; }
  .taskflow-card-icon { width:44px;height:44px;font-size:18px;border-radius:10px; }
  .taskflow-card .taskflow-card-btn { height:42px; font-size:14px; border-radius:8px; }
}