.category-depth{padding:64px 5%;border-top:1px solid #bbb}.category-depth>h2{font-size:clamp(28px,3.3vw,44px);font-weight:400;line-height:1.2;margin:0 0 28px}.category-depth>p{max-width:960px;line-height:1.8;margin:0 0 24px}.example-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.example-card{border:1px solid #bbb;padding:28px;min-width:0}.example-card h3{font-size:22px;line-height:1.4;font-weight:500;margin:0 0 24px;overflow-wrap:anywhere}.example-card dl{margin:0 0 28px}.example-card dl>div{padding:12px 0;border-bottom:1px solid #ccc}.example-card dt{font-size:13px;margin-bottom:6px;color:#555}.example-card dd{margin:0;line-height:1.65;overflow-wrap:anywhere}.example-card p{line-height:1.7}.example-card .btn{max-width:100%;white-space:normal;text-align:start;line-height:1.5;min-height:44px}.example-notice{font-size:15px}.example-card[id]{scroll-margin-top:110px}@media(max-width:760px){.category-depth{padding:44px 6%}.example-grid{grid-template-columns:1fr}.example-card{padding:22px}}
/* R21: first-screen configuration context on detail pages. */
.category-hero:has(.hero-spec-summary){min-height:clamp(460px,65vh,660px)}
.category-hero:has(.hero-spec-summary) .category-visual{padding:36px 4vw}
.category-hero:has(.hero-spec-summary) .category-visual img{max-height:46vh}
.category-copy:has(.hero-spec-summary){padding:100px 4vw 32px}
.category-copy:has(.hero-spec-summary) h1{font-size:clamp(36px,4.2vw,62px);margin:16px 0}
.category-copy:has(.hero-spec-summary)>p{font-size:16px;margin:0 0 16px}
.hero-spec-summary{width:100%;border-block:1px solid #bbb;padding:14px 0;margin-bottom:20px;line-height:1.5}
.hero-spec-summary>span{display:block;font-size:12px;color:#555;margin-bottom:5px}
.hero-spec-summary>a{font-size:15px;text-decoration:underline;text-underline-offset:3px}
.category-copy .hero-spec-summary p{font-size:14px;line-height:1.5;margin:6px 0 0}
@media(max-width:800px){.category-hero:has(.hero-spec-summary){min-height:0}.category-copy:has(.hero-spec-summary){order:-1;padding:110px 24px 28px}.category-hero:has(.hero-spec-summary) .category-visual{min-height:0;height:210px;padding:20px}.category-hero:has(.hero-spec-summary) .category-visual img{height:165px}.category-copy:has(.hero-spec-summary) h1{font-size:36px}.category-hero:has(.hero-spec-summary) .category-visual span{bottom:8px}}