/* Shared by the React homepage and standalone methodology document. */
@font-face {
  font-family: K100ShellText;
  src: url("/fonts/k100/geist.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: K100ShellBrand;
  src: url("/fonts/k100/league-spartan-black.ttf") format("truetype");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: K100ShellHeading;
  src: url("/fonts/k100/manrope.ttf") format("truetype");
  font-weight: 400 800;
  font-display: swap;
}
.rankings-shell-slot {
  display: contents;
}
.rankings-methodology-page,
.rankings-graphic-shell {
  --interactive-default: #6172f7;
  --interactive-hover: #5b6edf;
  --interactive-subtle: #eef0ff;
}
/* The standalone document does not use Tailwind's paragraph/heading reset. */
:where(.rankings-nomination-panel) :where(p, h2) {
  margin: 0;
}

html:has(.rankings-page),
body:has(.rankings-page),
html:has(.rankings-shell),
body:has(.rankings-shell) {
  background-color: #0c0c0c;
}
.rankings-page,
.rankings-shell {
  --u: min(1px, 0.05787037vw);
  --campaign-bg: #0c0c0c;
  --campaign-surface: #171716;
  --campaign-text: #f6f6f5;
  --campaign-secondary: #c0c0c0;
  --campaign-muted: #b6b3b3;
  --campaign-rule: #303030;
  background: var(--campaign-bg);
  color: var(--campaign-text);
  color-scheme: dark;
  min-height: 100vh;
  overflow: clip;
  font-family: var(--font-geist, "K100ShellText"), sans-serif;
  font-weight: 400;
}
.rankings-logo {
  font-family: var(--font-rankings-heading, "K100ShellHeading"), sans-serif;
  font-weight: 400;
}
.rankings-page a,
.rankings-page button {
  -webkit-tap-highlight-color: transparent;
}
.rankings-page :is(a, button):focus-visible {
  outline: 2px solid var(--interactive-default);
  outline-offset: 6px;
}
.rankings-page section[id] {
  scroll-margin-top: 24px;
}
.rankings-skip {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px 20px;
  background: var(--campaign-text);
  color: var(--campaign-bg);
  transform: translateY(-150%);
}
.rankings-skip:focus {
  transform: none;
}
.rankings-header {
  background: var(--campaign-surface);
}
.rankings-masthead {
  max-width: 1728px;
  margin: auto;
  height: calc(72 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(36 * var(--u));
  border: 1px solid var(--campaign-rule);
  background: #171717;
}
.rankings-logo {
  position: relative;
  display: block;
  width: 2.1em;
  height: 0.747em;
  font-family: var(--font-rankings-brand, "K100ShellBrand"), sans-serif;
  font-weight: 900;
  font-size: calc(49.124 * var(--u));
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: white;
}
.rankings-logo__letter,
.rankings-logo__number {
  position: absolute;
  top: 0;
}
.rankings-logo__letter {
  left: 0;
  height: 0.747em;
  background: linear-gradient(180deg, #ec047b -34.063%, #6172f7 68.125%);
  background-clip: text;
  color: transparent;
}
.rankings-logo__number {
  left: 0.56961em;
}
.rankings-logo--hero {
  position: absolute;
  top: calc(43 * var(--u));
  left: 0;
  font-size: calc(214.182 * var(--u));
}
.rankings-logo--hero .rankings-logo__letter {
  color: white;
  background: none;
}
.rankings-logo--footer {
  left: calc(2.7 * var(--u));
  font-size: calc(124.493 * var(--u));
}
.rankings-cta {
  letter-spacing: calc(-0.4 * var(--u));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--u));
  border: 0;
  border-radius: 40px;
  background: var(--interactive-default);
  color: white;
  font-size: calc(20 * var(--u));
  height: calc(58 * var(--u));
  padding-inline: calc(42 * var(--u));
  white-space: nowrap;
  transition: background-color .15s;
}
.rankings-cta:hover {
  background: var(--interactive-hover);
}
.rankings-cta img {
  flex-shrink: 0;
}
.rankings-cta--primary {
  width: calc(316 * var(--u));
  justify-content: flex-start;
}
.rankings-cta--primary .rankings-cta__label {
  width: calc(173 * var(--u));
  flex-shrink: 0;
  text-align: left;
}
.rankings-cta--primary > img {
  width: calc(29 * var(--u));
  height: auto;
}
.rankings-cta--header {
  height: calc(48 * var(--u));
  width: calc(258 * var(--u));
  border-radius: calc(11 * var(--u));
  padding-inline: 0;
  font-family: var(--font-rankings-heading, "K100ShellHeading"), sans-serif;
  font-size: calc(19 * var(--u));
  font-weight: 600;
  letter-spacing: calc(-0.76 * var(--u));
}
.rankings-cta--footer {
  width: calc(345.625 * var(--u));
  justify-content: flex-start;
  gap: calc(21.875 * var(--u));
  height: calc(70 * var(--u));
  padding-inline: calc(46 * var(--u));
  background: white;
  color: #171717;
  border: 3px solid var(--interactive-default);
  font-size: calc(21.875 * var(--u));
}
.rankings-cta--footer .rankings-cta__label {
  width: calc(188 * var(--u));
  flex-shrink: 0;
  text-align: left;
}
.rankings-cta--footer > img {
  width: calc(32 * var(--u));
  height: auto;
}
.rankings-cta--footer:hover {
  background: var(--interactive-subtle);
}
.rankings-cta--methodology {
  width: calc(259.823 * var(--u));
  height: calc(42 * var(--u));
  padding-inline: calc(30.171 * var(--u));
  gap: calc(14.367 * var(--u));
  border-radius: 999px;
  font-size: calc(14.367 * var(--u));
  margin-top: calc(30.5 * var(--u));
}
.rankings-cta--methodology img {
  width: calc(21 * var(--u));
  height: auto;
}
.rankings-nomination-panel {
  max-width: 1727px;
  margin: calc(101 * var(--u)) auto 0;
  padding: calc(115 * var(--u)) calc(84 * var(--u)) calc(73 * var(--u));
  border: 1px solid #d4d2d233;
  border-radius: calc(74 * var(--u)) calc(74 * var(--u)) 0 0;
  background: #080909;
  text-align: center;
}
.rankings-nomination-panel > .rankings-logo {
  display: block;
  margin-inline: auto;
}
.rankings-nomination-panel__eyebrow {
  margin-top: calc(24 * var(--u));
  font-size: calc(15 * var(--u));
  line-height: calc(22 * var(--u));
  color: #bdbdbc;
  letter-spacing: calc(3.3 * var(--u));
}
.rankings-nomination-panel h2 {
  margin-top: calc(14 * var(--u));
  font-size: calc(82 * var(--u));
  line-height: calc(92 * var(--u));
  letter-spacing: calc(-2 * var(--u));
  font-family: var(--font-rankings-heading, "K100ShellHeading"), sans-serif;
  font-weight: 400;
}
.rankings-nomination-panel h2 span {
  color: #999998;
}
.rankings-nomination-panel > .rankings-cta {
  margin-top: calc(38 * var(--u));
}
.rankings-nomination-panel footer {
  margin-top: calc(100 * var(--u));
  margin-right: calc(6 * var(--u));
  padding-top: calc(27 * var(--u));
  border-top: 1px solid #363737;
  display: grid;
  grid-template-columns: calc(206 * var(--u)) calc(777 * var(--u)) minmax(0, 1fr);
  column-gap: calc(149 * var(--u));
  justify-content: space-between;
  align-items: start;
  text-align: left;
  font-size: calc(18 * var(--u));
  line-height: calc(26 * var(--u));
}
.rankings-nomination-panel footer p:first-child {
  padding-top: calc(11.5 * var(--u));
  display: flex;
  gap: calc(5 * var(--u));
}
.rankings-nomination-panel__copyright {
  letter-spacing: calc(-0.2 * var(--u));
  color: #999998;
}
.rankings-nomination-panel footer a {
  color: #bdbdbc;
}
.rankings-nomination-panel__copyright {
  text-align: right;
  font-size: calc(16 * var(--u));
  line-height: calc(22 * var(--u));
}
.rankings-nomination-panel__disclaimer {
  padding-top: calc(3 * var(--u));
  color: #b1b1ad;
  text-align: center;
  font-size: calc(14 * var(--u));
  line-height: calc(19 * var(--u));
  letter-spacing: calc(-0.2 * var(--u));
}
@media (min-width: 1729px) {
  .rankings-nomination-panel {
    width: 1727px;
  }
}
@media (max-width: 1279px) {
  .rankings-page,
  .rankings-shell {
    --u: 0.75px;
  }
  .rankings-masthead {
    height: 64px;
    padding-inline: 24px;
  }
  .rankings-cta--header {
    width: auto;
    padding-inline: 20px;
    height: 44px;
    font-size: 14px;
  }
  .rankings-cta--methodology {
    width: max-content;
    max-width: 100%;
    min-height: 44px;
    padding-inline: 20px;
    gap: 12px;
    font-size: 14px;
    margin-top: 24px;
  }
  .rankings-cta--methodology img {
    width: 20px;
  }
  .rankings-nomination-panel {
    margin-top: 90px;
    padding: 80px 32px 36px;
    border-radius: 36px 36px 0 0;
  }
  .rankings-nomination-panel h2 {
    font-size: 54px;
    line-height: 1.2;
  }
  .rankings-nomination-panel__eyebrow {
    font-size: 11px;
    letter-spacing: 2px;
  }
  .rankings-nomination-panel footer {
    grid-template-columns: 1fr 1fr;
    margin-right: 0;
    gap: 24px;
    font-size: 14px;
  }
  .rankings-nomination-panel footer p:first-child {
    padding-top: 0;
  }
  .rankings-nomination-panel__disclaimer {
    grid-column: 1 / -1;
    order: 3;
    padding-top: 0;
    font-size: 12px;
    line-height: 18px;
  }
  .rankings-nomination-panel__copyright {
    font-size: 12px;
    line-height: 20px;
  }
}
@media (max-width: 599px) {
  .rankings-cta {
    min-height: 44px;
    font-size: 16px;
  }
  .rankings-cta--header {
    font-size: 13px;
    min-height: 44px;
  }
  .rankings-cta--methodology {
    font-size: 13px;
  }
  .rankings-nomination-panel {
    padding-inline: 24px;
  }
  .rankings-nomination-panel h2 {
    font-size: 40px;
    letter-spacing: -1px;
  }
  .rankings-nomination-panel footer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 64px;
  }
  .rankings-nomination-panel__copyright,
.rankings-nomination-panel__disclaimer {
    text-align: left;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rankings-cta {
    transition: none;
  }
}


/* Keep campaign-shell focus styles outside the generator's existing controls. */
.rankings-shell > .rankings-skip:focus-visible,
.rankings-shell :is(.rankings-header, .rankings-nomination-panel) a:focus-visible {
  outline: 2px solid var(--interactive-default);
  outline-offset: 6px;
}