/*
 * Home (Kiln/UI/HomeView.swift): what Kiln does, the one button that starts something new, your products, what's
 * waiting on you, and how it works.
 */
.hero { display: flex; align-items: flex-start; gap: 20px; }
.hero-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hero-title { font-size: 30px; line-height: 1.15; letter-spacing: -0.015em; }
.hero-lead { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); max-width: 640px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 6px; }
@media (max-width: 599px) {
  .hero { flex-direction: column; gap: 14px; }
  .hero .mark--large { width: 44px; height: 44px; border-radius: 13px; }
  .hero-title { font-size: 24px; }
}

.home-section { display: flex; flex-direction: column; gap: 10px; }

.product-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.product-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--card); box-shadow: var(--shadow);
  color: var(--ink); text-decoration: none; min-width: 0;
}
.product-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration: none; }
.product-card-name { font-size: 16.5px; font-weight: 600; }
.product-card-summary { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: auto; padding-top: 4px; font-size: 12.5px; color: var(--ink-soft); }

/* Features waiting on you (NeedsYouRow). */
.needs-you { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.need {
  --tint: var(--wait); --tint-text: var(--wait-text);
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border-radius: var(--radius);
  border: 1px solid var(--rule); background: var(--card);
  color: var(--ink); text-decoration: none;
}
.need:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); text-decoration: none; }
.need--build { --tint: var(--pass); --tint-text: var(--pass); }
.need-icon { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--tint) 14%, transparent); color: var(--tint-text); }
.need-icon svg { width: 15px; height: 15px; }
.need-text { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.need-title { font-size: 14.5px; font-weight: 600; }
.need-ask { font-size: 13px; color: var(--ink-soft); }
.need-action { font-size: 13px; font-weight: 600; color: var(--tint-text); white-space: nowrap; }
@media (max-width: 599px) {
  .need-action { display: none; }
}

/* How it works (HowStep). */
.how-step { display: flex; flex-direction: column; gap: 10px; }
.how-step-head { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 600; }
.how-step-icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 13%, transparent); color: var(--accent-text); flex: none; }
.how-step-icon svg { width: 14px; height: 14px; }
.how-step p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }