/* Topic illustrations are distinct from the real app captures in each guide. */
.topic-cover { background: #f7f5ee; padding: 0; }
.post-cover.topic-cover, .journal-card .topic-cover, .featured-post .topic-cover, .article-related .journal-card .topic-cover { min-height: 0; }
.topic-cover img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
.featured-post .topic-cover { align-self: center; }
.article-cover.topic-cover { max-width: 820px; overflow: hidden; margin: 0 auto 48px; border: 1px solid #e9e2da; border-radius: 16px; }
.article-screenshot { margin: 32px 0 38px; }
.screenshot-open { display: flex; justify-content: center; min-width: 0; }
.screenshot-open img { display: block; width: auto; max-width: 100%; height: auto; }
.screenshot-app .screenshot-open img { width: 330px; }
.screenshot-app.krisp .screenshot-open img { width: 290px; }
.article-screenshot figcaption { max-width: 590px; margin: 17px auto 0; color: #756d78; font-size: 13px; line-height: 1.7; }
.article-screenshot figcaption small { display: block; margin-top: 5px; font-size: 11px; line-height: 1.65; color: #857c88; }
.article-screenshot figcaption small a { color: inherit; text-decoration-color: #c8bec9; }
.screenshot-wide figcaption { margin-inline: 0; }
.screenshot-wide .screenshot-open { justify-content: flex-start; }
.article-body .article-audio-example { margin-block: 34px; }
.article-audio-example .audio-rail { width: 100%; max-width: 480px; margin: 20px auto 0; }
.article-body .article-audio-example .audio-method { font-size: 12px; line-height: 1.7; color: #8a7e8e; margin-top: 12px; }
.screenshot-open:focus-visible { outline: 3px solid #b28b37; outline-offset: 4px; }
.listening-samples .listening-sample { margin: 0 0 44px; padding-bottom: 38px; border-bottom: 1px solid #e9e2da; }
.listening-samples .listening-sample:last-child { border-bottom: 0; padding-bottom: 0; }
.article-body .listening-sample > h3 { margin-bottom: 8px; }
.article-body .listening-sample > p { color: #756d78; font-size: 14px; line-height: 1.7; }
.article-body .listening-method summary { cursor: pointer; font-weight: 650; margin-block: 18px; }
.article-body .listening-method { padding: 0 20px 8px; border: 1px solid #e9e2da; border-radius: 12px; }
.article-body .compatibility-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0; padding: 0; list-style: none; counter-reset: route; }
.article-body .compatibility-route li { min-width: 0; margin: 0; padding: 16px 12px; border: 1px solid #e9e2da; border-radius: 12px; background: #faf8f3; counter-increment: route; }
.compatibility-route li::before { content: counter(route); display: block; margin-bottom: 12px; color: #8d6521; font-size: 12px; font-weight: 700; }
.compatibility-route strong, .compatibility-route span { display: block; }
.compatibility-route strong { font-size: 14px; line-height: 1.4; }
.compatibility-route span { margin-top: 8px; color: #756d78; font-size: 12px; line-height: 1.5; }
.compatibility-route .compatibility-identity { color: #725115; font-weight: 650; }
@media (max-width: 699px) {
  .article-body .compatibility-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .featured-post .topic-cover { order: -1; }
  .article-cover.topic-cover { margin-bottom: 30px; border-radius: 12px; }
  .article-screenshot { margin-block: 27px 32px; }
  .screenshot-app .screenshot-open img { width: min(310px, 100%); }
}