/* SEO checker, on top of /brand.css. The preview mock-ups imitate Google, Facebook/LinkedIn, Slack and X, so they keep those products' own colours. */
form{display:flex;gap:10px;margin:var(--sp-3) 0 8px;flex-wrap:wrap}
input[type=url],#share input{flex:1 1 260px;min-width:0;width:auto;font:15px var(--mono)}
#go:disabled{cursor:wait}
#status{min-height:1.7em;margin:0}
#status.error{color:var(--danger)}
.score{display:flex;align-items:center;gap:var(--sp-2);margin:28px 0 8px}
.score b{font:800 56px/1 var(--display)}
.score span{color:var(--text)}
.checks{list-style:none;padding:0!important;margin:var(--sp-2) 0;display:grid;gap:8px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:4px 10px;padding:12px 14px;margin:0;background:var(--white);border-radius:12px}
.checks li i{font-style:normal;font-weight:700}
.checks li strong{font-size:15px}
.checks li p{grid-column:2;margin:0;font-size:14px;overflow-wrap:anywhere}
.pass i{color:var(--ok)}.warn i{color:var(--warn)}.fail i{color:var(--danger)}
.previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--sp-2);margin:var(--sp-2) 0}
.pv h3{font:600 13px var(--body);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px}
.pv .card{padding:0;border-radius:12px;overflow:hidden;background:#fff;color:#1d2129;font-family:system-ui,-apple-system,sans-serif;box-shadow:var(--shadow)}
.card .img{aspect-ratio:1.91/1;background:#e4e6eb center/cover no-repeat;display:grid;place-items:center;color:#5f6368;font-size:13px}
.card .img img{width:100%;height:100%;object-fit:cover;display:block}
.card .body{padding:10px 12px}
.card .host{font-size:12px;color:#65676b;text-transform:uppercase}
.card .t{font-weight:600;font-size:15px;margin:2px 0;overflow-wrap:anywhere}
.card .d{font-size:13px;color:#65676b;overflow-wrap:anywhere}
.google{background:#fff;color:#202124;border-radius:12px;padding:14px 16px;font-family:arial,sans-serif;box-shadow:var(--shadow)}
.google .u{font-size:12px;color:#4d5156;overflow-wrap:anywhere}
.google .t{color:#1a0dab;font-size:20px;line-height:1.3;margin:4px 0;overflow-wrap:anywhere}
.google .d{font-size:14px;color:#4d5156;line-height:1.58;overflow-wrap:anywhere}
.slack{border-left:4px solid #ddd;padding:2px 0 2px 12px;background:#1a1d21;border-radius:4px;color:#d1d2d3;font-family:system-ui,sans-serif}
.slack .host{font-weight:700;font-size:13px}
.slack .t{color:#1d9bd1;font-weight:700;font-size:15px;overflow-wrap:anywhere}
.slack .d{font-size:14px;overflow-wrap:anywhere}
.slack img{max-width:100%;max-height:200px;border-radius:8px;margin-top:6px;display:block}
.x{border:1px solid #2f3336;border-radius:16px;overflow:hidden;background:#000;color:#e7e9ea;font-family:system-ui,sans-serif}
.x .img{aspect-ratio:1.91/1;background:#16181c;display:grid;place-items:center;color:#8b9095;font-size:13px}
.x .img img{width:100%;height:100%;object-fit:cover;display:block}
.x .body{padding:10px 12px;font-size:14px}
.x .host{color:#8b9095}
#share{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.ctabox{margin:36px 0 0;padding:var(--sp-3);border-radius:var(--r-lg);background:var(--white)}
.ctabox p{margin:0 0 14px}