/* unitQ Score overview: compact search hero and a dense, filterable ranking table. */
.sq-hero{
  position:relative;
  z-index:5;
  overflow:visible;
  overflow-x:clip;
  padding:128px 0 36px;
  color:#fff;
  background:
    radial-gradient(70% 80% at 100% 0,color-mix(in srgb,#1e98ff 28%,transparent),transparent 60%),
    radial-gradient(50% 60% at 0 100%,color-mix(in srgb,#8881f2 22%,transparent),transparent 60%),
    linear-gradient(180deg,#001b31,#00243f);
}
.sq-hero__in{position:relative;z-index:4;max-width:860px;overflow:visible}
.sq-hero.nx-trail-host > .wrap,
.sq-hero.nx-trail-host > .sq-hero__in,
.sq-hero > .wrap.sq-hero__in{
  position:relative;
  z-index:6;
  isolation:isolate;
}
.sq-hero .hero__trail,
.sq-hero [data-trail]{z-index:1}

.sq-hero h1{
  margin:0 0 10px;
  font-size:clamp(28px,4vw,44px);
  line-height:1.08;
  letter-spacing:-.04em;
  color:#fff;
}
.sq-lede{
  margin:0 0 8px;
  max-width:38em;
  font:400 17px/1.45 var(--head,inherit);
  color:#d4e4f1;
}
.sq-hero .sq-cta{margin:0 0 22px}
.sq-cta .btn,.sq-cta a,.sq-foot a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 20px;
  border:0;
  border-radius:999px;
  background:#1a73d9;
  color:#fff;
  font:500 15px var(--head,inherit);
  text-decoration:none;
  cursor:pointer;
  transition:background .2s;
}
.sq-cta .btn:hover,.sq-cta a:hover,.sq-foot a:hover{background:#155fb8;color:#fff}
.sq-hero .ct-hero__bar{position:absolute;left:0;right:0;bottom:5px}
.sq-hero::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:5px;
  pointer-events:none;
  background:linear-gradient(90deg,#1e98ff 0 16.66%,#3a77d6 16.66% 33.33%,#8881f2 33.33% 50%,#1db4aa 50% 66.66%,#f8586f 66.66% 83.33%,#ff8800 83.33%);
}

.sq-search{position:relative;z-index:8;scroll-margin-top:108px}
.search-unitq-score-field{position:absolute;top:-108px;width:1px;height:1px;pointer-events:none}
.sq-search h2{
  margin:0 0 6px;
  font-size:clamp(20px,2.4vw,28px);
  line-height:1.2;
  letter-spacing:-.03em;
  color:#fff;
}
.sq-search h2 strong{font-weight:500;color:#56d7fe}
.sq-search > p{
  margin:0 0 14px;
  max-width:40em;
  font:400 14px/1.5 var(--head,inherit);
  color:#b6c9da;
}
.sq-search__form{position:relative;margin:0}
.sq-search__box{
  position:relative;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:5px 5px 5px 16px;
  border-radius:999px;
  background:rgba(250,250,250,.06);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 32px 0 rgba(160,232,255,.28);
}
.sq-search__ico{
  position:absolute;
  left:18px;
  top:50%;
  width:18px;
  height:18px;
  transform:translateY(-50%);
  color:#fff;
  pointer-events:none;
  z-index:2;
}
.sq-search__i{
  display:block;
  flex:1 1 160px;
  min-width:0;
  width:auto;
  height:46px;
  padding:0 12px 0 36px;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#fff;
  font:400 16px/1.3 var(--head,inherit);
  outline:none;
  caret-color:#56d7fe;
}
.sq-search__go{
  flex:none;
  min-height:44px;
  padding:0 18px;
  border:0;
  border-radius:999px;
  background:#1a73d9;
  color:#fff;
  font:500 14px var(--head,inherit);
  cursor:pointer;
  transition:background .2s;
}
.sq-search__go:hover{background:#155fb8}
.sq-hero.nx-trail-host::after,.sq-hero .ct-hero__bar{z-index:0}
.sq-search__i::placeholder{color:rgba(255,255,255,.62)}
.sq-search__list{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:9;
  margin:0;
  padding:14px 8px 10px;
  max-height:min(380px,50vh);
  overflow:auto;
  list-style:none;
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:#001b31;
  box-shadow:0 18px 40px rgba(0,11,22,.45);
  overscroll-behavior:contain;
}
.sq-search__box.is-open .sq-search__list{display:block}
.sq-search__list a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:8px 12px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  font:500 15px/1.3 var(--head,inherit);
}
.sq-search__list a:hover,.sq-search__list a.is-on{background:rgba(255,255,255,.1)}
.sq-search__list b{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font:500 14px var(--head,inherit);color:#001b31}
.sq-search__list b.is-poor{background:#FF8474}
.sq-search__list b.is-fair{background:#FEC06B}
.sq-search__list b.is-good{background:#56D7FE}
.sq-search__list b.is-epic{background:#4FD8BA}
.sq-search__list span{flex:1;min-width:0}
.sq-search__list small{display:block;margin-top:1px;font:500 10px var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#8fb0c9}
.sq-search__more{
  margin:4px 12px 2px;
  color:#8fb0c9;
  font:500 11px var(--mono,ui-monospace,monospace);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.sq-search__empty{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  z-index:9;
  margin:0;
  padding:14px 16px;
  color:#d4e4f1;
  font:400 14px/1.5 var(--head,inherit);
  border:1px solid rgba(255,255,255,.16);
  border-radius:20px;
  background:#001b31;
  box-shadow:0 18px 40px rgba(0,11,22,.45);
}
.sq-search__empty.is-on{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.sq-search__empty a{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  color:#fff;
  font:500 13px var(--head,inherit);
  text-decoration:none;
}
.sq-search__empty a:hover{border-color:#56d7fe;color:#56d7fe}

/* Board */
.sq-board{
  padding:28px 0 80px;
  background:#f3f8fc;
  color:#001b31;
}
.sq-board__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px 24px;
  margin:0 0 16px;
}
.sq-board__head h2{
  margin:0;
  font-size:clamp(22px,2.6vw,32px);
  letter-spacing:-.04em;
  color:#001b31;
}
.sq-board__kicker{
  margin:4px 0 0;
  font:400 14px/1.45 var(--head,inherit);
  color:#4e5d6b;
  max-width:46em;
}
.sq-board__count{
  font:500 12px var(--mono,ui-monospace,monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#4e5d6b;
}
.sq-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
  padding:0;
  list-style:none;
}
.sq-filters button{
  appearance:none;
  margin:0;
  padding:5px 12px;
  border:1px solid #001b31;
  border-radius:999px;
  background:transparent;
  color:#001b31;
  font:500 13px/1.4 var(--head,inherit);
  cursor:pointer;
  white-space:nowrap;
}
.sq-filters button:hover,
.sq-filters button[aria-selected="true"]{background:#001b31;color:#fff}

.sq-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  margin:0 0 14px;
  padding:10px 14px;
  border:1px solid #d9e4ee;
  border-radius:12px;
  background:#fff;
  font:500 12px var(--mono,ui-monospace,monospace);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#4e5d6b;
}
.sq-legend b{font-weight:500;color:#001b31;letter-spacing:0;text-transform:none;font-family:var(--head,inherit)}
.sq-legend i{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;vertical-align:middle}
.sq-legend i.is-poor{background:#FF8474}
.sq-legend i.is-fair{background:#FEC06B}
.sq-legend i.is-good{background:#56D7FE}
.sq-legend i.is-epic{background:#4FD8BA}

.sq-tablewrap{
  overflow:auto;
  border:1px solid #d9e4ee;
  border-radius:16px;
  background:#fff;
  box-shadow:0 18px 40px -32px rgba(0,27,49,.35);
}
.sq-table{
  width:100%;
  min-width:720px;
  table-layout:fixed;
  border-collapse:collapse;
  color:#001b31;
}
.sq-table .sq-col-rk{width:8%}
.sq-table .sq-col-nm{width:32%}
.sq-table .sq-col-sc{width:12%}
.sq-table .sq-col-band{width:12%}
.sq-table .sq-col-split{width:22%}
.sq-table .sq-col-delta{width:14%}
.sq-table th,.sq-table td{
  padding:8px 12px;
  height:52px;
  box-sizing:border-box;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid #e6eef5;
}
.sq-table th{
  position:sticky;
  top:0;
  z-index:1;
  background:#f7fafc;
  font:500 11px var(--mono,ui-monospace,monospace);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#4e5d6b;
  white-space:nowrap;
}
.sq-table th[data-sort]{cursor:pointer}
.sq-table th[data-sort]:hover{color:#001b31}
.sq-table th[aria-sort="ascending"]::after{content:" \25B2";font-size:9px}
.sq-table th[aria-sort="descending"]::after{content:" \25BC";font-size:9px}
.sq-table tbody tr:hover td{background:#f4f9fd}
.sq-table tbody tr[hidden]{display:none}
.sq-rk{width:48px;font:500 13px var(--mono,ui-monospace,monospace);color:#4e5d6b}
.sq-nm{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%;color:#001b31;text-decoration:none;font:500 14px/1.3 var(--head,inherit)}
.sq-nm:hover{color:#1670d6}
.sq-nm:not(a):hover{color:inherit;cursor:default}

.sq-nm img{flex:none;width:28px;height:28px;border-radius:7px;object-fit:cover;background:#eaf0f6}
.sq-nm span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sq-sc{
  display:inline-grid;
  place-items:center;
  min-width:38px;
  height:28px;
  padding:0 6px;
  border-radius:8px;
  font:500 14px var(--head,inherit);
  color:#001b31;
  background:#eaf0f6;
}
.sq-sc.is-poor{background:#FF8474}
.sq-sc.is-fair{background:#FEC06B}
.sq-sc.is-good{background:#56D7FE}
.sq-sc.is-epic{background:#4FD8BA}
.sq-band{font:500 11px var(--mono,ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:#4e5d6b}
.sq-band.is-poor{color:#c4564c}
.sq-band.is-fair{color:#b36d16}
.sq-band.is-good{color:#0f6f8a}
.sq-band.is-epic{color:#0f7a68}
.sq-split{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
  width:100%;
  max-width:100%;
}
.sq-split__bar{
  display:flex;
  height:6px;
  overflow:hidden;
  border-radius:99px;
  background:#e6eef5;
}
.sq-split__bar i{display:block;height:100%}
.sq-split__bar .is-ios{background:#8881f2}
.sq-split__bar .is-and{background:#1db4aa}
.sq-split small{font:500 11px var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:#4e5d6b;white-space:nowrap}
.sq-delta{font:500 13px var(--mono,ui-monospace,monospace);white-space:nowrap}
.sq-delta.is-up{color:#0f7a68}
.sq-delta.is-down{color:#c4564c}
.sq-delta.is-flat{color:#4e5d6b}

.sq-how{
  margin:28px 0 0;
  border:1px solid #d9e4ee;
  border-radius:16px;
  background:#fff;
}
.sq-how > summary{
  cursor:pointer;
  list-style:none;
  padding:14px 18px;
  font:500 15px var(--head,inherit);
  color:#001b31;
}
.sq-how > summary::-webkit-details-marker{display:none}
.sq-how > summary::after{content:" +";float:right;color:#4e5d6b}
.sq-how[open] > summary::after{content:" -"}
.sq-how__body{padding:0 18px 22px;color:#1e3a52;font-family:Roboto,var(--body),sans-serif}
.sq-how__body h2{
  margin:22px 0 8px;
  font-size:20px;
  letter-spacing:-.03em;
  color:#001b31;
}
.sq-how__body h2:first-child{margin-top:0}
.sq-how__body h3{margin:16px 0 4px;font-size:16px;color:#001b31}
.sq-how__body p{margin:0 0 10px;font:400 15px/1.55 Roboto,var(--body),sans-serif;max-width:46em}
.sq-how__body .sq-shot{margin:16px 0}
.sq-how__body .sq-shot img{
  display:block;
  width:min(100%,760px);
  height:auto;
  border:1px solid #d9e4ee;
  border-radius:12px;
}
.sq-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  margin:22px 0 0;
  padding:18px 20px;
  border-radius:16px;
  background:#001b31;
  color:#fff;
}
.sq-foot h2{margin:0 0 4px;font-size:20px;color:#fff;letter-spacing:-.03em}
.sq-foot p{margin:0;font-size:14px;color:#b6c9da;max-width:40em}

@media(max-width:700px){
  .sq-hero{padding:112px 0 28px}
  .sq-filters{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:0 0 6px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .sq-filters::-webkit-scrollbar{display:none}
  .sq-table{min-width:640px}
  .sq-board{padding:22px 0 64px}
}
@media(prefers-reduced-motion:reduce){
  .sq-cta a,.sq-filters button,.sq-nm{transition:none}
}

.sq-search__field{position:relative;flex:1 1 160px;min-width:0;display:flex;align-items:center}
.sq-search__field .sq-search__ico{position:absolute;left:4px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#fff;pointer-events:none;z-index:2}
.sq-search__field .sq-search__i{padding-left:32px;flex:1 1 auto;width:100%}

/* Search focus: one ring on the single pill container, none on the borderless input inside it. */
.sq-search__i,.sq-search__i:focus,.sq-search__i:focus-visible{outline:0;border:0;box-shadow:none;background:transparent}
.sq-search__box:focus-within{border-color:#56d7fe;box-shadow:0 0 0 3px rgba(86,215,254,.55),0 0 32px 0 rgba(160,232,255,.28)}

/* Compact ranking list on phones: every column stays visible, no sideways scroll */
@media(max-width:700px){
  .sq-tablewrap{overflow:visible}
  .sq-table{display:block;min-width:0;width:100%}
  .sq-table colgroup{display:none}
  .sq-table thead,.sq-table tbody{display:block}
  .sq-table thead tr{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#f7fafc;border-bottom:1px solid #e6eef5;border-radius:16px 16px 0 0}
  .sq-table th{position:static;height:auto;padding:5px 10px;border:1px solid #d9e4ee;border-radius:999px;background:#fff;font-size:10px;letter-spacing:.06em}
  .sq-table tbody tr{display:grid;grid-template-columns:24px minmax(0,1fr) 40px 48px;grid-template-areas:"rk nm sc dl" "rk sp bd bd";gap:6px 8px;align-items:center;padding:10px 12px;border-bottom:1px solid #e6eef5}
  .sq-table tbody td{display:block;height:auto;padding:0;border:0;min-width:0}
  .sq-table tbody td:nth-child(1){grid-area:rk;align-self:start;padding-top:6px}
  .sq-table tbody td:nth-child(2){grid-area:nm}
  .sq-table tbody td:nth-child(3){grid-area:sc}
  .sq-table tbody td:nth-child(4){grid-area:bd}
  .sq-table tbody td:nth-child(5){grid-area:sp}
  .sq-table tbody td:nth-child(6){grid-area:dl;text-align:right}
  .sq-split small{font-size:10px;letter-spacing:.02em}
}

/* Search on phones: one rounded card, a full-width input row, then the full-width button below it.
   Explicit heights and a column layout so Safari's native search-field metrics cannot push the input over the button. */
@media (max-width:700px){
  .sq-search__box{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;padding:8px;border-radius:24px}
  .sq-search__ico{display:none}
  .sq-search__field{position:relative;display:block;flex:0 0 52px;width:100%;height:52px;min-height:52px;max-height:52px}
  .sq-search__field .sq-search__ico{display:block;left:16px;top:50%;width:20px;height:20px}
  .sq-search__field .sq-search__i,.sq-search__i{-webkit-appearance:none;appearance:none;display:block;box-sizing:border-box;flex:none;width:100%;height:52px;min-height:52px;max-height:52px;margin:0;padding:0 16px 0 48px;border-radius:16px;font-size:16px}
  .sq-search__go{flex:0 0 auto;width:100%;min-height:48px;height:48px;margin:0;padding:0 18px}
}