.project-example{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin:26px 0 36px}.example-label{background:var(--green);color:#fff;padding:14px 22px;font-size:.8rem}.example-heading{display:flex;align-items:flex-start;gap:15px;padding:20px 24px;border-top:1px solid var(--line)}.annotation-number{flex:none;display:grid;place-items:center;border-radius:50%;background:var(--clay);color:#fff;width:32px;height:32px;font-size:1rem}.example-heading strong{font-size:1.18rem}.example-heading p,.example-photo p{font-size:.95rem;line-height:1.6;margin:7px 0 0}.example-photo{padding:0 24px 22px}.example-photo svg{display:block;width:100%;max-height:240px;height:auto;border-radius:10px}.example-heading .button{margin-top:15px;font-size:.75rem;letter-spacing:0;white-space:normal;min-height:44px}.website-checklist label{display:flex;gap:13px;align-items:flex-start;min-height:44px;padding:15px 0;border-top:1px solid var(--line);cursor:pointer;font-size:1rem;line-height:1.5}.website-checklist input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--green)}.article-body section{min-width:0}.article-body section:first-child h2{margin-top:0}.do-dont-grid p{font-size:.96rem;line-height:1.6}.article-body a:focus-visible,.article-body input:focus-visible{outline:3px solid var(--clay);outline-offset:4px}@media(max-width:720px){.example-heading{padding:17px 15px;gap:10px}.example-photo{padding:0 15px 17px}.example-label{padding:12px 15px}.example-heading .button{width:100%}.article-hero h1{font-size:clamp(1.9rem,8.1vw,2.55rem)}.article-body .faq-list summary{min-height:52px}.article-body .example-heading p{font-size:.94rem}}