/* ARI Showcase R7 lane c: front desk "why you need it" cards. base.css tokens only; the card itself is .r7-explain in r7.css. */
.r7c-why { margin: 0; }
.r7c-why .r7-explain-why { overflow-wrap: anywhere; }
.r7c-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; background: var(--fill); border: 1px solid var(--line); color: var(--dim); font: 600 11px/1.5 var(--chrome-font); letter-spacing: .04em; text-transform: uppercase; }
.r7c-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.r7c-more[hidden] { display: none; }
.r7c-more .cn-b { flex: 1 1 200px; justify-content: center; white-space: normal; text-align: center; }

.r7c-why .r7-explain { padding: 10px 12px; }
.r7c-why .r7-explain-why { font-size: 13px; line-height: 1.35; }
.r7c-row { width: 100%; max-width: 760px; flex: none; }
.r7c-row .r7-explain { box-sizing: border-box; }
@media (min-width: 701px) and (max-width: 1000px) { .r7c-row { flex-direction: row; gap: 10px; } .r7c-row .r7-explain { flex: 1 1 0; min-width: 0; } }
@media (max-width: 700px) { .r7c-row { gap: 6px; } .r7c-row .r7-explain { padding: 8px 10px; } .r7c-row .r7-explain-why { font-size: 12.5px; } }