/* ============================================================
   Module: feature — bento grids, spotlight panels, app cards.
   ============================================================ */

/* ---------- Bento grid (hero feature showcase) ---------- */
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
}
@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
}
@media (min-width: 1020px) {
  .bento { grid-template-columns: repeat(3, 1fr); }
  .bento .span-2 { grid-column: span 2; }
}

/* ---------- Spotlight panel (king-feature band) ---------- */
.spotlight {
  position: relative;
  overflow: clip;
  border-radius: calc(var(--r-card) + 8px);
  border: 1px solid var(--border);
  background: var(--surface);
  background-image: var(--card-wash);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4.5vw, 56px);
}
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3));
}
.spotlight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (min-width: 980px) {
  .spotlight-grid { grid-template-columns: 1fr 1fr; }
}
.spotlight h2 { max-width: 17ch; }
.spotlight .lead { margin-bottom: var(--s5); }

/* Checklist inside spotlights */
.checklist { list-style: none; margin: 0 0 var(--s6); padding: 0; }
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  margin-bottom: var(--s3);
  color: var(--text-2);
  font-weight: 600;
}
.checklist li strong { color: var(--text); font-weight: 700; }
.checklist .tick {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  color: var(--accent-text);
}
.checklist .tick svg { width: 13px; height: 13px; }

/* ---------- App cards (platform suite) ---------- */
.app-card { display: flex; flex-direction: column; gap: var(--s2); }
.app-card .app-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--s3);
  border-radius: 22.37%;             /* Aura app-icon tile fills the slot — same icon as the store listing */
  box-shadow: var(--shadow-sm);
}
.app-card .app-icon img { width: 100%; height: 100%; display: block; }
.app-card .app-meta {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.app-card .app-link {
  margin-top: auto;
  padding-top: var(--s4);
  font-weight: 700;
  font-size: var(--fs-label);
}

/* ---------- Audience router (home) ---------- */
.router-card {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-height: 100%;
  text-decoration: none;
  color: inherit;
}
.router-card:hover { text-decoration: none; }
.router-card .router-go {
  margin-top: auto;
  padding-top: var(--s4);
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  font-size: var(--fs-label);
  color: var(--link);
}
.router-card .router-go svg { width: 16px; height: 16px; transition: transform var(--t-std) var(--ease-out); }
.router-card:hover .router-go svg { transform: translateX(4px); }

/* ---------- Partner Program doors: secondary entry points ---------- */
.door-extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s6);
}

/* ---------- Compliance/trust band items ---------- */
.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
}
.trust-item .tile { margin-bottom: 0; flex-shrink: 0; }
.trust-item h3 { font-size: var(--fs-title); margin-bottom: var(--s1); }
.trust-item p { color: var(--text-2); font-size: var(--fs-label); margin: 0; }