/* D-103 use-case hub (/for, UseCaseHub.astro): the changelog's hero rhythm (beige, ruled breadcrumb row), one card per
   "Zamp for <platform>" page and the "by business" solutions as rows. Square geometry, one border colour, type roles
   from site-v7 (data-zamp-type). */
.zuh { --zuh-line: var(--ds-border, #e6e1da); --zuh-beige: var(--ds-ground-beige, #f6f5f3); --zuh-forest: var(--ds-forest, #183e3d); --zuh-ink2: var(--ds-ink-secondary, #323232); --zuh-cap: var(--ds-ink-caption, #838383); --zuh-g: clamp(20px, 4.2vw, 60px); }
.zuh-wrap { max-width: 80rem; margin: 0 auto; padding: 0 var(--zuh-g); box-sizing: content-box; }
.zuh :is(h1, h2, h3, p) { margin: 0; }
html body main .zuh :is(ul, ol), html body main .zuh li { margin-left: 0; padding-left: 0; list-style: none; }
.zuh-hero { padding: 48px 0 72px; background: var(--zuh-beige); border-bottom: 1px solid var(--zuh-line); }
.zuh-top { margin-bottom: 56px; padding-bottom: 16px; border-bottom: 1px solid var(--zuh-line); }
.zuh-top .z-crumbs { margin: 0; font-size: 13px; }
.zuh-hero h1 { max-width: 16ch; }
.zuh-hero [data-zamp-type="lead"] { max-width: 38rem; margin-top: 20px; color: var(--zuh-ink2); }
.zuh-body { padding: 72px 0 96px; }
.zuh-body h2 { margin-bottom: 28px; }
.zuh-h2b { margin-top: 72px; }
.zuh-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; }
.zuh-card { display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 240px; box-sizing: border-box; padding: 32px; background: #fff; border: 1px solid var(--zuh-line); color: #000; text-decoration: none; }
.zuh-card:hover { border-color: #000; }
.zuh-card__mark { display: grid; place-items: center; width: 56px; height: 56px; background: var(--zuh-beige); box-shadow: 0 0 0 1px var(--zuh-line); }
.zuh-card__mark img { display: block; width: 32px; height: 32px; object-fit: contain; }
.zuh-card p { font: 400 16px/1.5 var(--z-font-body); color: var(--zuh-ink2); }
.zuh-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font: 500 15px/1.3 var(--z-font-body); }
.zuh-card__go i, .zuh-biz i { display: inline-grid; width: 16px; height: 16px; }
.zuh-card__go svg, .zuh-biz svg { width: 16px; height: 16px; }
.zuh-biz { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--zuh-line); }
.zuh-biz a { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--zuh-line); color: #000; text-decoration: none; }
.zuh-biz a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.zuh-biz b { font: 500 18px/1.3 var(--z-font-body); }
.zuh-biz span { font: 400 16px/1.5 var(--z-font-body); color: var(--zuh-ink2); }
@media (max-width: 991px) { .zuh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
 .zuh-hero { padding: 32px 0 48px; } .zuh-top { margin-bottom: 36px; }
 .zuh-body { padding: 48px 0 64px; } .zuh-cards { grid-template-columns: 1fr; gap: 16px; } .zuh-card { min-height: 0; padding: 24px; }
 .zuh-biz a { grid-template-columns: 1fr auto; gap: 6px 16px; } .zuh-biz span { grid-column: 1; }
 .zuh-biz i { grid-column: 2; grid-row: 1 / span 2; }
}