.metro-app { display: grid; grid-template-columns: 4.5rem 1fr; gap: .9rem 1rem; align-items: center; margin: 0 0 2.5rem; padding: 1.25rem; border-block: 2px solid var(--ink); background: #efede3; }
.metro-app-mark { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: 1px solid #d0cbb9; border-radius: 1rem; background: var(--paper); color: #356055; }
.metro-app-mark svg { width: 3.8rem; height: 3.8rem; }
.metro-app-copy .metro-app-eyebrow { margin-bottom: .35rem; font: .63rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.metro-app-copy h2 { margin: 0 0 .3rem; font: 500 clamp(1.35rem, 5.6vw, 1.8rem)/1.12 var(--display); }
.metro-app-copy > p:last-child { font: .8rem/1.4 var(--sans); color: var(--muted); }
.metro-app-link { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: .65rem .9rem; background: var(--ink); color: var(--paper); text-decoration: none; font: 500 .85rem/1.4 var(--sans); }
.metro-app-link:hover { background: var(--blue); color: var(--paper); }
@media (max-width: 350px) { .metro-app { grid-template-columns: 3rem 1fr; padding: 1rem; gap: .75rem; } .metro-app-mark { width: 3rem; height: 3rem; border-radius: .65rem; } .metro-app-mark svg { width: 2.7rem; height: 2.7rem; } }
@media print { .metro-app { display: none; } }