/* ============================================================
   Bento Grid — animated, scroll-triggered fade-in.
   Monochrome, hairline separators (no shadows, no gradients).
   Built per UI/UX Pro Max "Trust & Authority" guidance.
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(170px, auto);
  gap: 1px;                       /* 1px gap over a gray bg = hairline rules */
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.bento-card {
  background: var(--surface);
  padding: clamp(1.4rem, 2.5vw, 2.1rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  /* entrance animation */
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.bento-card.is-visible { opacity: 1; transform: none; }

.bento-card--lg   { grid-column: span 2; grid-row: span 2; }
.bento-card--wide { grid-column: span 2; }
.bento-card--dark { background: var(--be-black); color: var(--be-white); }
.bento-card--alt  { background: var(--surface-alt); }

.bento-eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted);
}
.bento-card--dark .bento-eyebrow { color: var(--be-gray); }

.bento-num {
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(2.75rem, 1.8rem + 4vw, 4.75rem); letter-spacing: -0.02em;
}
.bento-title {
  font-family: var(--font-head); font-weight: 700; line-height: 1.15;
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); text-wrap: balance;
}
.bento-body { font-size: .92rem; color: var(--text-muted); max-width: 42ch; text-align: left; hyphens: manual; }
.bento-card--dark .bento-body { color: #cfcfcf; }

/* lifecycle mini-list inside the large cell */
.bento-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.bento-steps li {
  display: flex; gap: .8rem; align-items: baseline;
  border-top: 1px solid var(--rule); padding-top: .55rem;
  font-family: var(--font-head); font-weight: 700; letter-spacing: .02em;
}
.bento-card--dark .bento-steps li { border-color: #333; }
.bento-steps .n { font-size: .75rem; color: var(--be-gray); min-width: 1.6em; }

.bento-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.bento-tag {
  font-family: var(--font-head); font-weight: 700; font-size: .78rem; letter-spacing: .04em;
  border: 1px solid currentColor; padding: .3em .7em; border-radius: 2px;
}

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-card--lg { grid-row: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento-card--lg, .bento-card--wide { grid-column: span 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card { opacity: 1; transform: none; transition: none; }
}