.bento {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .bento {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
  }
  .bento .wide { grid-column: 1 / 3; grid-row: 1; }
  .bento .tall { grid-column: 3; grid-row: 1 / 3; }
  .bento .b-small-a { grid-column: 1; grid-row: 2; }
  .bento .b-small-b { grid-column: 2; grid-row: 2; }
}
.bento-item {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  background: #fff;
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
}
.bento-item .bento-ph {
  flex: 1;
  min-height: 8rem;
  background: linear-gradient(160deg, var(--brand-soft) 0%, #fff 60%);
  position: relative;
}
.bento-item .bento-ph img {
  width: 100%;
  height: 100%;
  min-height: 8rem;
  object-fit: cover;
  object-position: top center;
}
.bento-item .bento-copy { padding: 1.1rem 1.25rem; }
.bento-item h4 { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 800; }
.bento-item p { margin: 0; font-size: 0.85rem; color: var(--muted); }
.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8em;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  padding: 0.1em 0.4em;
}
.hero .kbd { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.stitch-section h3 { margin: 0 0 0.75rem; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
.stitch-section p, .stitch-section li { color: var(--muted); }
.stitch-section p:last-child { margin-bottom: 0; }
.stitch-lede { margin: 0 0 1.5rem; font-size: 1.05rem; color: var(--muted); max-width: 44rem; }
.stitch-section .section-head .stitch-lede { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; text-align: center; }
.stitch-grid { display: grid; gap: 1.5rem; }
@media (min-width: 800px) { .stitch-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.stitch-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
  box-shadow: var(--shadow);
}
.stitch-card p { margin: 0 0 1rem; }
.code-block {
  margin: 0.75rem 0 0;
  padding: 1rem 1.15rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0.65rem;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.55;
}
.code-block code { color: inherit; background: none; padding: 0; font-size: inherit; }
.stitch-note {
  margin-top: 2rem;
  padding: 1.25rem 1.35rem;
  background: var(--brand-soft);
  border: 1px solid rgba(255, 108, 77, 0.25);
  border-radius: var(--radius);
  font-size: 0.94rem;
  color: var(--ink);
}
.stitch-note strong { color: var(--brand-dark); }