#top .hero-layout { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); align-items:center; gap:clamp(24px,4vw,58px); }
#top h1 { font-size:clamp(34px,5vw,60px); }
.hero-art { margin:0; position:relative; border:1px solid rgba(218,233,248,.5); box-shadow:18px 18px 0 rgba(6,28,52,.32); }
.hero-concept { width:100%; height:auto; display:block; }
.hero-dimension { position:absolute; top:18px; right:18px; width:55px; height:55px; opacity:.9; filter:drop-shadow(0 1px 3px #0a1a2e); }
.hero-art figcaption { position:absolute; bottom:0; left:0; right:0; padding:7px 10px; background:rgba(14,31,53,.88); color:#f1efe7; font:11px "JetBrains Mono",monospace; }
@media(max-width:860px){#top .hero-layout { grid-template-columns:1fr; } .hero-art { max-width:550px; } }
.profile-heading,.card-id { display:flex; gap:18px; align-items:center; }
.profile-heading h1 { margin:.15em 0 .35em; }
.profile-heading { margin:26px 0 16px; }
.profile-badge { display:inline-block; margin:5px 8px 5px 0; padding:5px 9px; border:1px solid #697b8e; border-radius:3px; font:600 11px/1.4 "JetBrains Mono",monospace; color:#315273; letter-spacing:.06em; }
.profile-badge.tested { color:#123a6b; background:#e3ecf7; border-color:#b7c9de; }
.profile-badge.sponsored { color:#775418; background:#f8edda; border-color:#d7b46e; }
.logo-tile { flex:none; width:64px; height:64px; display:flex; justify-content:center; align-items:center; padding:6px; box-sizing:border-box; background:#f7f8fa; border:1px solid #cad3d8; border-radius:4px; overflow:hidden; }
.logo-tile img { max-width:100%; max-height:100%; object-fit:contain; }
.logo-fallback { font:700 30px "Space Grotesk",sans-serif; color:#123a6b; }
.tool { overflow:hidden; }
.tool .top { gap:10px; }
.tool-identity { display:flex; align-items:center; gap:10px; min-width:0; }
.tool-media { width:100%; aspect-ratio:16 / 9; background:#e7ecee; position:relative; margin-bottom:14px; }
.tool-media>img { width:100%; height:100%; object-fit:contain; }
.tool-media small { position:absolute; left:0; right:0; bottom:0; color:#fff; background:#1e344cda; padding:4px 7px; font-size:10px; }
.tool-placeholder { display:flex; align-items:center; justify-content:center; gap:18px; white-space:nowrap; height:100%; color:#123a6b; letter-spacing:.15em; font:700 24px "Space Grotesk",sans-serif; background-image:linear-gradient(#123a6b1a 1px,transparent 1px),linear-gradient(90deg,#123a6b1a 1px,transparent 1px); background-size:24px 24px; }
.tool-placeholder span { opacity:.55; }
.tool-pricing { font-size:12px; color:#596c78; margin-bottom:10px; }
.tool-badges { margin:8px 0 6px; }
#sponsoredGrid { margin:28px 0; border-block:2px solid #bd9e62; padding:15px 0; }
#sponsoredGrid .grid { margin-top:15px; }
.profile-card { padding:0; overflow:hidden; }
.profile-card .card-content { padding:18px; }
.profile-card h2 { margin:0; }
.profile-card .reference-label { display:block; margin-bottom:3px; }
.card-id { align-items:flex-start; margin-bottom:14px; }
.card-image { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#f0f2f1; margin:0; }
.card-image img { display:block; width:100%; height:100%; object-fit:contain; }
.card-image figcaption { position:absolute; inset:auto 0 0; padding:6px 10px; background:rgba(16,34,52,.86); color:#fff; font-size:10px; }
.image-empty { display:grid; place-items:center; background-color:#eef1ef; background-image:linear-gradient(rgba(18,58,107,.10) 1px, transparent 1px),linear-gradient(90deg, rgba(18,58,107,.10) 1px, transparent 1px); background-size:26px 26px; }
.image-empty span { color:#123a6b; font:700 30px "Space Grotesk",sans-serif; letter-spacing:.25em; }
.image-empty i { font-style:normal; font-weight:400; opacity:.5; }
.card-bottom { border-top:1px solid #d4dada; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:14px; font-size:12px; }
.profile-chips { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.profile-chips span { padding:5px 9px; background:#e9edf0; border:1px solid #ced8db; border-radius:3px; font-size:12px; }
.profile-filters,.compare-form { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin:24px 0; padding:16px; background:#e8ebea; border:1px solid #d0d9da; }
.profile-filters label,.compare-form label { font:600 11px "JetBrains Mono",monospace; letter-spacing:.04em; display:grid; gap:6px; }
.profile-filters select,.compare-form select { min-height:40px; border:1px solid #aab9c3; background:#fff; padding:6px 8px; min-width:130px; max-width:210px; }
.profile-filters .profile-check { display:flex; align-items:center; min-height:40px; }
.profile-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:20px; }
.gallery-item { margin:0; } .gallery-item button { width:100%; border:0; padding:0; background:transparent; cursor:zoom-in; }
.gallery-item img { width:100%; aspect-ratio:16 / 9; object-fit:contain; background:#ebf0f0; }
.gallery-item figcaption { font-size:12px; line-height:1.5; color:#526274; }
.comparison { position:relative; aspect-ratio:16 / 9; width:100%; overflow:hidden; background:#e6e9eb; }
.comparison img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.comparison .comparison-after { clip-path:inset(0 50% 0 0); }
.comparison input { position:absolute; inset:auto 10% 10px; width:80%; }
.image-dialog { max-width:min(90vw,1100px); max-height:90vh; padding:20px; border:0; box-shadow:0 12px 80px #14243888; }
.image-dialog img { display:block; max-width:100%; max-height:70vh; margin:auto; }
.image-dialog::backdrop { background:rgba(9,23,38,.8); }
.profile-video { aspect-ratio:16 / 9; } .profile-video iframe { border:0; width:100%; height:100%; }
.scrollx { overflow-x:auto; } .compare-table { border-collapse:collapse; min-width:560px; width:100%; }
.compare-table th,.compare-table td { padding:14px; border:1px solid #cad5da; text-align:left; vertical-align:top; }
@media(max-width:600px){.profile-filters label,.profile-filters select,.compare-form label,.compare-form select { width:100%; max-width:none; }.profile-heading { align-items:flex-start; }.profile-card .card-content { padding:14px; }.card-bottom { flex-wrap:wrap; }}
/* Give homepage labels their own space rather than squeezing the tool name. */
@media(max-width:1366px){
  .tool .top{flex-direction:column;align-items:stretch;gap:12px}
  .tool .tag{order:-1;align-self:flex-start;white-space:nowrap;flex-shrink:0;font-size:12px;line-height:1.5;letter-spacing:0;padding:5px 8px;text-align:left}
  .tool-identity{width:100%;gap:10px}
  .tool .logo-tile{width:48px;height:48px}
  .tool .name{font-size:19px;white-space:nowrap;overflow-wrap:normal;word-break:normal}
  .tool-badges{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 10px}
  .tool .profile-badge{white-space:nowrap;flex-shrink:0;font-size:12px;line-height:1.5;margin:0;padding:5px 9px}
  .tool .profile-chips span{white-space:nowrap}
  .toolfoot{flex-wrap:wrap;justify-content:flex-start;gap:8px 18px}
  .toolfoot a,.toolfoot button{white-space:nowrap;font-size:12px}
}