/* landing/cases.css — the "Use cases" card grid (photo cases + benefit cards). */

/* ═══ USE CASES ═══ */
.cases{background:var(--warm);padding:0 2.5rem 7rem}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:1100px;margin:3.5rem auto 0}
.case{
  background:#fff;border:1px solid var(--warm3);border-radius:16px;
  overflow:hidden;
  transition:transform 200ms var(--ease-out),box-shadow 200ms var(--ease-out),border-color 200ms ease-out;
}
@media(hover:hover) and (pointer:fine){
  .case:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(45,38,32,0.1);border-color:var(--copper)}
}
.case:active{transform:scale(0.99)}
.case-photo{aspect-ratio:4/5;background-size:cover;background-position:center;position:relative}
.case-photo::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(45,38,32,0.8))}
.case-label{position:absolute;bottom:1rem;left:1rem;right:1rem;z-index:1}
.case-cat{font-size:0.58rem;letter-spacing:0.2em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,0.7)}
.case-name{font-family:var(--font-d);font-weight:800;font-size:1.1rem;letter-spacing:-0.015em;color:#fff;margin-top:0.2rem;line-height:1.1}
.case-foot{padding:0.85rem 1rem 1rem;font-size:0.78rem;color:#5C5040;line-height:1.45;border-top:1px solid #F0E6D2;background:#FDFAF4}
/* Use-case benefit cards (no photo — dark title on cream, not the white overlay label) */
.benefit-body{padding:1.6rem;display:flex;flex-direction:column;gap:0.5rem}
.benefit-emoji{font-size:2rem;line-height:1}
.benefit-title{font-family:var(--font-d);font-weight:800;font-size:1.15rem;letter-spacing:-0.015em;color:#2D2620;line-height:1.15}
.benefit-desc{font-size:0.85rem;color:#5C5040;line-height:1.5}