/* Five visible criteria follow the asymmetric reference composition. */
html #working-principles .quality-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:28px;margin-bottom:28px}
html #working-principles .quality-head h3{margin:0;font:300 22px/1.25 Apparat,Arial,sans-serif;color:var(--ink);letter-spacing:-.025em}
html #working-principles .quality-head>p{margin:0;font:400 14px/1.6 Apparat,Arial,sans-serif;color:var(--learning-muted)}
html #working-principles .quality-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--learning-rule);border-left:1px solid var(--learning-rule)}
html #working-principles .quality-panel{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:166px;gap:36px;padding:22px 54px 24px 22px;border-right:1px solid var(--learning-rule);border-bottom:1px solid var(--learning-rule);background:transparent}
html #working-principles .quality-panel::after{content:attr(data-quality-letter);position:absolute;right:18px;top:18px;font:300 32px/1 Apparat,Arial,sans-serif;color:var(--learning-muted);opacity:.38;pointer-events:none}
html #working-principles .quality-panel h4{position:relative;margin:0;padding-left:14px;font:400 22px/1.3 Apparat,Arial,sans-serif;color:var(--ink);letter-spacing:-.025em;overflow-wrap:break-word}
html #working-principles .quality-panel h4::before{content:"";position:absolute;top:.55em;left:0;width:4px;height:4px;background:var(--acid,#b8ff38)}
html #working-principles .quality-panel p{margin:0;max-width:72ch;font:400 14px/1.55 Apparat,Arial,sans-serif;color:var(--learning-muted);overflow-wrap:anywhere}
html #working-principles .quality-panel:first-child{grid-column:1;grid-row:1/3;justify-content:flex-end;min-height:332px;gap:24px}
html #working-principles .quality-panel:first-child h4{font-size:28px}
html #working-principles .quality-panel:nth-child(2){grid-column:2;grid-row:1}
html #working-principles .quality-panel:nth-child(3){grid-column:2;grid-row:2}
/* FAQ retains its native disclosure controls with restrained typography. */
html #faq summary{font-size:16px;line-height:1.4;min-height:80px}
html #faq summary::before{font-size:15px}
html #faq details>p{font-size:14px;line-height:1.6}
@media(max-width:900px){
 html #working-principles .quality-head{grid-template-columns:minmax(0,1fr);gap:14px}
 html #working-principles .quality-panel{padding:22px 44px 22px 18px;gap:28px}
 html #working-principles .quality-panel h4{font-size:20px}
 html #working-principles .quality-panel:first-child h4{font-size:24px}
 html #faq summary{font-size:16px;min-height:76px}
}
@media(max-width:700px){
 html #working-principles .quality-grid{grid-template-columns:minmax(0,1fr)}
 html #working-principles .quality-panel:nth-child(n){grid-column:1;grid-row:auto;min-height:0;justify-content:flex-start;gap:20px;padding:22px 44px 24px 16px}
 html #working-principles .quality-panel:first-child h4{font-size:20px}
 html #working-principles .quality-panel::after{font-size:28px;right:14px}
 html #faq summary{font-size:16px;min-height:72px}
}