/* Scree's shared product illustrations and native language navigation. */
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.feature-card { border: 1px solid var(--line); background: var(--panel); padding: 20px; }
.feature-card h3 { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; color: var(--fg); }
.feature-card h3::before { content: '# '; color: var(--accent); }
.feature-card p { font-size: 12.5px; color: var(--fg-dim); margin: 0; }
.scree-shot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 28px; }
.scree-shot { margin: 0; }
.scree-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: var(--panel); }
.scree-shot figcaption { margin-top: 8px; color: var(--fg-dim); font-size: 11px; line-height: 1.45; }
.scree-shot--hero { margin-top: 34px; }
.scree-shot--hero figcaption { max-width: 58ch; }
.prose + .link-rows { margin-top: 26px; }
.scree-languages { padding-bottom: 14px; font-size: 12.5px; }
.scree-languages summary { cursor: pointer; padding: 8px 0; width: fit-content; }
.scree-languages ul { display: flex; flex-wrap: wrap; list-style: none; gap: 6px 16px; padding: 8px 0; }
.scree-languages a { display: inline-block; padding: 6px 8px; border: 1px solid var(--line); }
.scree-languages [aria-current="true"] { color: var(--accent); border-color: var(--accent); }
.doc-body, .prose, .feature-card { overflow-wrap: anywhere; }
@media (max-width: 780px) {
    .feature-grid { grid-template-columns: 1fr; }
    .bar { padding: 16px 0; gap: 12px; flex-wrap: wrap; }
    .bar-right { gap: 12px; }
}