.use-tile-directory{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:28px;background:var(--white)}
.use-tile-intro{display:flex;flex-direction:column;gap:40px;min-width:0}
.use-tile-intro h2{font-size:clamp(36px,3.8vw,56px)}
.use-tile-image{flex:1;min-height:360px;margin:0;overflow:hidden;border-radius:var(--tl-radius);position:relative;background:var(--tl-neutral-175)}
.use-tile-image img{position:absolute;width:100%;height:100%;object-fit:cover;object-position:70% center}
.use-tile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.use-tile{height:260px;border-radius:var(--tl-radius);background:#f5f5f3;padding:28px;transition:background .18s ease}
.use-tile summary{height:100%;display:flex;align-items:center;justify-content:center;text-align:center;list-style:none;cursor:pointer;font-size:clamp(20px,1.8vw,26px);font-weight:500;line-height:1.3}
.use-tile summary::-webkit-details-marker{display:none}
.use-tile[open]{background:var(--white)}
.use-tile[open] summary{height:auto;justify-content:flex-start;text-align:left}
.use-tile-detail{padding-top:18px;display:flex;flex-direction:column;gap:20px}
.use-tile-detail p{font-size:15px;line-height:1.5;margin:0}
.use-tile-detail a{font-size:14px;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px;width:fit-content}
.use-tile :is(summary,a):focus-visible{outline:2px solid var(--accent);outline-offset:6px;border-radius:2px}
@media(max-width:1100px){.use-tile-directory{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}.use-tile{height:290px;padding:24px}.use-tile-grid{gap:16px}}
@media(max-width:800px){.use-tile-directory{grid-template-columns:1fr;gap:32px}.use-tile-intro{gap:28px}.use-tile-image{min-height:260px}.use-tile{height:280px}.use-tile-intro h2{max-width:16ch}}
@media(max-width:540px){.use-tile-grid{grid-template-columns:1fr}.use-tile{height:auto;min-height:150px}.use-tile summary{min-height:100px}.use-tile[open] summary{min-height:0}.use-tile-detail{padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.use-tile{transition:none}}
/* Longer architecture descriptions retain readable type and can grow without clipping. */
[aria-labelledby="architecture-controls-title"] .use-tile{height:auto;min-height:360px}
[aria-labelledby="architecture-controls-title"] .use-tile summary{min-height:304px}
[aria-labelledby="architecture-controls-title"] .use-tile[open] summary{min-height:0}
@media(max-width:540px){[aria-labelledby="architecture-controls-title"] .use-tile{min-height:150px}[aria-labelledby="architecture-controls-title"] .use-tile summary{min-height:100px}[aria-labelledby="architecture-controls-title"] .use-tile[open] summary{min-height:0}}