/* ============ Category / list pages ============ */
.cat-hero{background:
  radial-gradient(120% 110% at 88% -20%, var(--teal-bg) 0%, rgba(230,245,245,0) 55%), var(--paper);
  border-bottom:1px solid var(--border-soft)}
.cat-hero .container{display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; padding:64px 24px 68px}
.cat-hero .tag{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; color:var(--teal); background:var(--teal-bg); border-radius:999px; padding:6px 14px; margin-bottom:18px}
.cat-hero h1{font-size:40px; line-height:1.3; margin-bottom:18px}
.cat-hero p{color:var(--ink-2); font-size:16px; line-height:1.9; max-width:34em; margin:0 0 26px}
.cat-hero .pic{border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:#fff; border:1px solid var(--border)}
.cat-hero .pic img{width:100%; aspect-ratio:4/3; object-fit:cover}

.list-head{margin-bottom:var(--s5)}
.list-head .eyebrow{margin-bottom:8px}
.list-head h2{font-size:26px}

.soon{background:var(--bg-alt); border:1px dashed var(--border); border-radius:var(--r-lg); padding:40px; text-align:center; color:var(--ink-3)}
.soon b{color:var(--ink); display:block; margin-bottom:8px; font-size:16px}

@media (max-width:900px){
  .cat-hero .container{grid-template-columns:1fr; gap:28px; padding:44px 24px 48px}
  .cat-hero h1{font-size:28px}
}