@media (min-width: 1201px) {
  .site-logo {
    width: 350px;
    flex-basis: 350px;
  }
}

.site-header nav a {
  height: 38px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 9px;
  transition: color .18s ease,
              background-color .18s ease,
              border-color .18s ease,
              box-shadow .18s ease;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: #0875f7;
  background-color: #edf6ff;
  border-color: #0875f7;
  box-shadow: 0 5px 14px rgba(8, 117, 247, .12);
  outline: none;
}
.site-header nav a:hover::after,
.site-header nav a:focus-visible::after {
  opacity: 0;
}

/* Full-height navigation tabs requested for every section. */
.site-header nav { gap: 0; align-self: stretch; }
.site-header nav a {
  height: 66px;
  min-width: 96px;
  padding: 0 18px;
  justify-content: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.site-header nav a:hover,
.site-header nav a:focus-visible {
  color: #fff;
  background: #0a3e78;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.floating { display: none !important; }
.product-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.product-card { min-width: 0; overflow: hidden; }
.product-copy b,
.product-copy small { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 900px) {
  .site-header nav a { height: 46px; min-width: 104px; }
}

.feature-card:nth-child(1) > img { content: url('assets/icons/shield.webp'); }
.feature-card:nth-child(2) > img { content: url('assets/icons/server.webp'); }
.feature-card:nth-child(3) > img { content: url('assets/icons/speedometer.webp'); }
.feature-card:nth-child(4) > img { content: url('assets/icons/devices.webp'); }
.feature-card:nth-child(5) > img { content: url('assets/icons/check.webp'); }
.guide-card:nth-child(1) > img { content: url('assets/icons/gaming.webp'); }
.guide-card:nth-child(2) > img { content: url('assets/icons/speedometer.webp'); }
.guide-card:nth-child(3) > img { content: url('assets/icons/devices.webp'); }
.guide-card:nth-child(4) > img { content: url('assets/icons/support.webp'); }
.site-map-grid > a:nth-child(1) > img:first-child { content: url('assets/icons/trophy.webp'); }
.site-map-grid > a:nth-child(2) > img:first-child { content: url('assets/icons/speedometer.webp'); }
.site-map-grid > a:nth-child(3) > img:first-child { content: url('assets/icons/star.webp'); }
.site-map-grid > a:nth-child(4) > img:first-child { content: url('assets/icons/book.webp'); }
.site-map-grid > a:nth-child(5) > img:first-child { content: url('assets/icons/question.webp'); }
.site-map-grid > a:nth-child(6) > img:first-child { content: url('assets/icons/news.webp'); }

/* Every raster icon has its own bounded slot. Generated assets already carry
   transparent safety padding; these guards prevent flex/grid shrink or bleed. */
.section-title > img,
.audience-card > img,
.feature-card > img,
.guide-card > img,
.criteria-card > img,
.platform-card > img,
.site-map-grid > a > img:first-child,
.brand-icon,
.tiny-brand,
.score img,
.platform-mini img,
.node-row img,
.detail-row img,
.ranking-note img {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}
.audience-card,
.feature-card,
.guide-card,
.criteria-card,
.platform-card,
.site-map-grid > a { overflow: hidden; }
.hero-actions .primary img { filter: brightness(0) invert(1); }

/* Consistent hover lift for every card surface across the static site. */
.product-card,
.dimension-bar,
.node-table,
.audience-card,
.feature-card,
.compare-table,
.platform-card,
.ranking-note,
.detail-table,
.guide-card,
.faq-grid > button,
.data-note,
.article-card,
.criteria-card,
.site-map-grid > a {
  transition: transform .22s cubic-bezier(.2,.8,.2,1),
              box-shadow .22s ease,
              border-color .22s ease,
              background-color .22s ease;
  will-change: transform;
}
.product-card:hover,
.dimension-bar:hover,
.node-table:hover,
.audience-card:hover,
.feature-card:hover,
.compare-table:hover,
.platform-card:hover,
.ranking-note:hover,
.detail-table:hover,
.guide-card:hover,
.faq-grid > button:hover,
.data-note:hover,
.article-card:hover,
.criteria-card:hover,
.site-map-grid > a:hover {
  transform: translateY(-5px);
  border-color: #b8d7fb;
  background-color: #fff;
  box-shadow: 0 14px 30px rgba(20, 91, 180, .14);
}
.product-card:focus-visible,
.guide-card:focus-visible,
.article-card:focus-visible,
.site-map-grid > a:focus-visible,
.faq-grid > button:focus-visible {
  outline: 3px solid rgba(11, 115, 246, .3);
  outline-offset: 3px;
  transform: translateY(-5px);
}
@media (prefers-reduced-motion: reduce) {
  .product-card,
  .dimension-bar,
  .node-table,
  .audience-card,
  .feature-card,
  .compare-table,
  .platform-card,
  .ranking-note,
  .detail-table,
  .guide-card,
  .faq-grid > button,
  .data-note,
  .article-card,
  .criteria-card,
  .site-map-grid > a {
    transition: none;
    will-change: auto;
  }
}
.footer-brand > img { content: url('assets/footer-logo.png'); filter: none; }

/* Keep node regions readable as one compact line in the 50-region tables. */
.node-head,.node-row{grid-template-columns:46px minmax(180px,1.75fr) 1.25fr .85fr 1fr}
.node-row b{min-width:0;white-space:nowrap;overflow:visible}
.node-row b img{flex:none}
@media(max-width:600px){.node-head,.node-row{grid-template-columns:44px minmax(148px,1.65fr) 1fr .72fr}.node-row b{white-space:nowrap}}

/* Give the comparison and detail tables a more breathable row rhythm. */
.compare-row{height:60px}
.detail-row{height:48px}
/* Homepage spacing and criterion-card copy need room after the global type-size increase. */
body:not(.inner-page) main > .section{padding-top:52px}
body:not(.inner-page) .criteria-card{height:auto;min-height:148px;align-items:flex-start;padding:17px 20px;overflow:hidden}
body:not(.inner-page) .criteria-card div{min-width:0}
body:not(.inner-page) .criteria-card p{margin-bottom:0;white-space:normal}
@media(max-width:700px){body:not(.inner-page) main > .section{padding-top:42px}body:not(.inner-page) .criteria-card{min-height:0}}
.ranking-pagination{display:flex;justify-content:center;gap:8px;margin:32px auto 0}.ranking-pagination a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 10px;border:1px solid #cfe2fb;border-radius:9px;color:#176cf6;background:#fff;font-weight:700}.ranking-pagination a.active{color:#fff;background:#176cf6;border-color:#176cf6}

/* News images always keep their original aspect ratio: no cropping or stretching. */
.article-card>img{display:block;height:auto !important;object-fit:contain !important}
.article-cover{display:block;width:auto !important;height:auto !important;max-width:100%;object-fit:contain !important}

/* The homepage's compact cards have a fixed height. News cards are editorial cards,
   so reserve a full thumbnail area and a separate text area instead of hiding copy. */
.news-list .article-card{display:flex !important;flex-direction:column;height:auto !important;min-height:0;padding:0 !important;gap:0 !important}
.news-list .article-card>img{display:block;width:100%;height:190px !important;flex:none;object-fit:contain !important;background:#eef7ff;border-radius:0}
.news-list .article-card>div{display:block !important;flex:none !important;min-width:0;padding:18px 20px 20px !important}
.news-list .article-card b{display:block;min-height:0;margin:0;white-space:normal}
.news-list .article-card p{display:block;min-height:0;margin:10px 0;color:#52729d;white-space:normal}
.news-list .article-card time{display:block}

/* Desktop news listing: three editorial cards per row, with the sidebar unchanged. */
.news-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media(max-width:980px){.news-list{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media(max-width:680px){.news-list{grid-template-columns:1fr !important}}

/* Keep the compact homepage news cards readable without crowding the grid. */
.article-grid .article-card p{font-size:14px;line-height:1.55}