/* Ranking page: an editorial scoreboard built from the homepage's cyan, ink and paper language. */
.ranking-page {
  --ranking-ink: #080909;
  --ranking-paper: #f4f5f1;
  --ranking-white: #ffffff;
  --ranking-cyan: #1ab2bf;
  --ranking-cyan-light: #8cecf1;
  --ranking-yellow: #fff02a;
  --ranking-gray: #d8dddc;
  --ranking-line: rgba(8, 9, 9, .2);
  background: var(--ranking-paper);
  color: var(--ranking-ink);
  font-family: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.ranking-page .hero-header {
  position: relative;
  z-index: 5;
  min-height: 132px;
  background: var(--ranking-paper);
  color: var(--ranking-ink);
}

.ranking-page .hero-content {
  min-height: 132px !important;
  height: auto !important;
  overflow: visible !important;
  padding: 0 0 22px;
  background: var(--ranking-paper) !important;
}

.ranking-page .hero-nav-shell {
  width: min(1549px, calc(100% - 64px));
  height: 72px;
  margin: 30px auto 0;
}

.ranking-page .hero-navigation {
  background: var(--ranking-white);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
}

.ranking-page .hero-navigation a { color: var(--ranking-ink); }
.ranking-page .hero-navigation .is-current { color: var(--ranking-ink); background: linear-gradient(100deg, #71e0e7, #2fc1c8); }
.ranking-page .hero-main,
.ranking-page .hero-year,
.ranking-page .hero-grid-mark { display: none; }

.ranking-main { display: block; width: 100%; }
.ranking-main h1,
.ranking-main h2,
.ranking-main h3,
.ranking-main p { margin: 0; }
.ranking-main a { color: inherit; }
.ranking-main img { display: block; max-width: 100%; }
.ranking-section__inner { width: min(1440px, calc(100% - 96px)); margin: 0 auto; }
.ranking-overline,
.ranking-kicker,
.platform-rank-card__type,
.style-card__meta,
.ranking-intro__index,
.ranking-intro__signal-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; }

.ranking-intro {
  position: relative;
  isolation: isolate;
  min-height: 630px;
  overflow: hidden;
  background: var(--ranking-cyan);
  color: var(--ranking-white);
}

.ranking-intro::before,
.ranking-intro::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.ranking-intro::before {
  top: -150px;
  right: 9%;
  width: 38vw;
  max-width: 570px;
  height: 390px;
  border-radius: 44% 18% 52% 21%;
  background: rgba(255, 255, 255, .18);
  transform: rotate(14deg);
}

.ranking-intro::after {
  right: -80px;
  bottom: -210px;
  width: 470px;
  height: 470px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgba(255, 255, 255, .1), 0 0 0 60px rgba(255, 255, 255, .1);
}

.ranking-intro__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: end; width: min(1440px, calc(100% - 96px)); min-height: 630px; margin: 0 auto; padding: 72px 0 78px; }
.ranking-intro__copy { max-width: 920px; }
.ranking-kicker { margin-bottom: 54px !important; color: var(--ranking-ink); }
.ranking-intro h1 { font-size: clamp(4.2rem, 8.2vw, 8.5rem); font-weight: 700; letter-spacing: -.07em; line-height: .92; }
.ranking-intro h1 span { color: var(--ranking-ink); }
.ranking-intro__lead { max-width: 600px; margin-top: 48px !important; font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.42; }
.ranking-intro__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 58px; }
.ranking-intro__index { padding: 12px 0; border-top: 1px solid rgba(255, 255, 255, .55); border-bottom: 1px solid rgba(255, 255, 255, .55); }
.ranking-theme-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid rgba(255, 255, 255, .75); border-radius: 999px; background: transparent; color: var(--ranking-white); cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ranking-theme-toggle:hover,
.ranking-theme-toggle:focus-visible { background: rgba(255, 255, 255, .14); outline: 2px solid var(--ranking-white); outline-offset: 3px; }
.ranking-theme-toggle__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ranking-yellow); }
.ranking-intro__signal { display: flex; position: relative; flex-direction: column; align-items: flex-end; justify-content: flex-end; min-height: 320px; padding: 34px 0; }
.ranking-intro__signal strong { position: relative; z-index: 1; color: var(--ranking-ink); font-size: clamp(4.6rem, 7vw, 8rem); letter-spacing: -.1em; line-height: .9; }
.ranking-intro__signal-label { position: relative; z-index: 1; margin-top: 25px; color: var(--ranking-ink); text-align: right; }
.ranking-spark { position: absolute; display: block; border: 1px solid var(--ranking-ink); }
.ranking-spark--one { top: 20px; right: 42px; width: 220px; height: 220px; border-radius: 43% 57% 52% 48%; background: var(--ranking-yellow); }
.ranking-spark--two { right: 100px; bottom: 100px; width: 90px; height: 90px; border-radius: 50%; background: transparent; }

.criteria-section { background: var(--ranking-paper); }
.criteria-section .ranking-section__inner { display: grid; grid-template-columns: minmax(260px, .76fr) minmax(0, 1.45fr); gap: clamp(48px, 9vw, 150px); padding: 136px 0 150px; }
.ranking-section__heading h2 { margin-top: 22px !important; font-size: clamp(3.1rem, 5.5vw, 6.25rem); letter-spacing: -.075em; line-height: .94; }
.ranking-overline { color: var(--ranking-cyan); }
.criteria-section__body { padding-top: 38px; }
.criteria-section__intro { max-width: 600px; font-size: clamp(1.15rem, 1.7vw, 1.6rem); line-height: 1.4; }
.criteria-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 64px; border: 1px solid var(--ranking-line); background: var(--ranking-line); }
.criteria-card { min-height: 218px; padding: 28px 30px 32px; background: var(--ranking-paper); }
.criteria-card:nth-child(2) { background: #e7ebe9; }
.criteria-card:nth-child(3) { background: var(--ranking-ink); color: var(--ranking-white); }
.criteria-card:nth-child(4) { background: var(--ranking-cyan-light); }
.criteria-card__number { display: block; margin-bottom: 35px; color: var(--ranking-cyan); font-size: 13px; font-weight: 700; }
.criteria-card:nth-child(3) .criteria-card__number { color: var(--ranking-yellow); }
.criteria-card h3 { font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.1; }
.criteria-card p { margin-top: 18px !important; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.42; }

.platform-ranking { padding: 130px 0 150px; background: var(--ranking-white); }
.ranking-section__heading--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .5fr); gap: 60px; align-items: end; }
.ranking-section__note { max-width: 350px; justify-self: end; padding-bottom: 8px; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.45; }
.platform-ranking__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 82px 0 0; padding: 0; list-style: none; counter-reset: rank; }
.platform-rank-card { position: relative; display: grid; grid-template-columns: 43% minmax(0, 1fr); min-height: 272px; border: 1px solid var(--ranking-ink); background: var(--ranking-paper); }
.platform-rank-card--feature { grid-template-columns: 48% minmax(0, 1fr); background: var(--ranking-cyan-light); }
.platform-rank-card__rank { position: absolute; z-index: 2; top: 14px; left: 14px; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--ranking-ink); color: var(--ranking-white); font-size: 12px; font-weight: 700; }
.platform-rank-card__media { display: block; min-width: 0; border-right: 1px solid var(--ranking-ink); line-height: 0; }
.platform-rank-card__media img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.platform-rank-card__content { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 32px 28px 28px; }
.platform-rank-card__type { color: #167984; }
.platform-rank-card h3 { max-width: 290px; margin-top: 20px !important; font-size: clamp(1.25rem, 2vw, 2rem); letter-spacing: -.045em; line-height: 1.02; }
.platform-rank-card__content > p:not(.platform-rank-card__type) { margin-top: 19px !important; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.38; }
.platform-rank-card__link { margin-top: auto; padding-top: 24px; color: var(--ranking-ink); font-size: 13px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.platform-rank-card__link span { display: inline-block; margin-left: 6px; font-size: 18px; text-decoration: none; }
.platform-rank-card__link:hover,
.platform-rank-card__link:focus-visible { color: #167984; outline: 2px solid currentColor; outline-offset: 5px; }

.style-section { background: var(--ranking-ink); color: var(--ranking-white); }
.style-section .ranking-section__inner { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.45fr); gap: clamp(48px, 9vw, 150px); padding: 140px 0 160px; }
.style-section .ranking-section__heading h2 { color: var(--ranking-white); }
.style-section__content { padding-top: 38px; }
.style-section__intro { max-width: 570px; font-size: clamp(1.2rem, 1.8vw, 1.65rem); line-height: 1.35; }
.style-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 62px; }
.style-card { display: flex; flex-direction: column; min-height: 258px; padding: 25px 28px 28px; color: var(--ranking-ink); }
.style-card--yellow { background: var(--ranking-yellow); }
.style-card--dark { background: #4e4e4e; color: var(--ranking-white); }
.style-card--aqua { background: var(--ranking-cyan); }
.style-card--line { border: 1px solid rgba(255, 255, 255, .55); color: var(--ranking-white); }
.style-card__mark { font-size: 12px; font-weight: 700; }
.style-card h3 { margin-top: 44px !important; font-size: clamp(1.3rem, 2.1vw, 2.05rem); letter-spacing: -.04em; line-height: 1; }
.style-card p { margin-top: 17px !important; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.4; }
.style-card__meta { margin-top: auto; padding-top: 28px; opacity: .72; }

.reading-section { background: var(--ranking-paper); }
.reading-section__inner { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1fr); gap: clamp(55px, 11vw, 190px); padding: 144px 0 155px; }
.reading-section__visual { position: relative; min-height: 490px; padding: 50px; background: var(--ranking-yellow); }
.reading-section__ring { position: absolute; top: 50%; left: 50%; width: 270px; height: 270px; border: 1px solid var(--ranking-ink); border-radius: 50%; transform: translate(-50%, -50%); }
.reading-section__ring::before { position: absolute; inset: 33px; border: 1px solid var(--ranking-ink); border-radius: 50%; content: ""; }
.reading-section__axis { position: absolute; top: 50%; left: 50%; display: block; background: var(--ranking-ink); opacity: .4; }
.reading-section__axis--horizontal { width: 100%; height: 1px; transform: translate(-50%, -50%); }
.reading-section__axis--vertical { width: 1px; height: 100%; transform: translate(-50%, -50%); }
.reading-section__visual strong { position: absolute; right: 34px; bottom: 33px; font-size: 76px; letter-spacing: -.12em; line-height: .85; }
.reading-section__visual small { position: absolute; top: 32px; left: 34px; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.4; }
.reading-section__copy { padding-top: 20px; }
.reading-section__copy > p:not(.ranking-overline) { max-width: 470px; margin-top: 42px !important; font-size: clamp(1.15rem, 1.6vw, 1.5rem); line-height: 1.4; }
.reading-list { display: grid; gap: 0; margin: 57px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ranking-line); }
.reading-list li { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 18px; padding: 25px 0; border-bottom: 1px solid var(--ranking-line); }
.reading-list li > span { color: var(--ranking-cyan); font-size: 12px; font-weight: 700; }
.reading-list h3 { font-size: 18px; line-height: 1.1; }
.reading-list p { margin-top: 8px !important; font-family: Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.4; }

.platform-cta { background: var(--ranking-cyan); color: var(--ranking-white); }
.platform-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: 50px; align-items: end; width: min(1440px, calc(100% - 96px)); min-height: 430px; margin: 0 auto; padding: 76px 0 85px; }
.platform-cta h2 { margin-top: 23px !important; color: var(--ranking-white); font-size: clamp(3.5rem, 6vw, 6.5rem); letter-spacing: -.08em; line-height: .9; }
.platform-cta__copy > p:not(.ranking-overline) { max-width: 550px; margin-top: 38px !important; color: var(--ranking-ink); font-size: clamp(1.15rem, 1.7vw, 1.55rem); line-height: 1.35; }
.platform-cta__actions { display: grid; gap: 12px; }
.ranking-button { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 18px 24px; border: 1px solid var(--ranking-ink); color: var(--ranking-ink) !important; font-size: 15px; font-weight: 700; text-decoration: none; }
.ranking-button span { font-size: 22px; }
.ranking-button--dark { background: var(--ranking-ink); color: var(--ranking-white) !important; }
.ranking-button--ghost { background: transparent; }
.ranking-button:hover,
.ranking-button:focus-visible { transform: translateY(-2px); outline: 2px solid var(--ranking-ink); outline-offset: 3px; }

.ranking-page [data-homepage-region="15-footer"] { padding-top: 0 !important; background: var(--ranking-ink); }
.ranking-page [data-homepage-region="15-footer"] > [data-homepage-region-content] { min-height: 0 !important; padding-top: 64px; }
.ranking-page .footer-nav-secondary { row-gap: 15px; }
.ranking-page .footer-settings { align-self: center; min-height: 44px; padding: 10px 18px; border: 1px solid rgba(255, 255, 255, .55); border-radius: 999px; background: transparent; color: var(--ranking-white); cursor: pointer; font: inherit; font-size: 13px; }
.ranking-page .footer-settings:hover,
.ranking-page .footer-settings:focus-visible { border-color: var(--ranking-cyan-light); outline: 2px solid var(--ranking-cyan-light); outline-offset: 3px; }
.ranking-page [data-consent-banner] { font-family: Arial, Helvetica, sans-serif; }
.ranking-page .consent-preferences { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .28); font-size: 13px; }
.ranking-page .consent-preferences button { justify-self: start; min-height: 40px; padding: 8px 14px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: inherit; }

[data-ranking-theme="dark"] body { background: #11191a; }
[data-ranking-theme="dark"] .ranking-page { --ranking-paper: #11191a; --ranking-white: #182223; --ranking-ink: #effdfc; --ranking-gray: #293738; --ranking-line: rgba(239, 253, 252, .24); }
[data-ranking-theme="dark"] .ranking-page .hero-navigation { background: #effdfc; }
[data-ranking-theme="dark"] .ranking-page .hero-navigation a { color: #11191a; }
[data-ranking-theme="dark"] .ranking-page .hero-content,
[data-ranking-theme="dark"] .ranking-page .hero-header { background: #11191a !important; }
[data-ranking-theme="dark"] .ranking-page .criteria-card:nth-child(2) { background: #293738; }
[data-ranking-theme="dark"] .ranking-page .platform-rank-card { background: #192526; }
[data-ranking-theme="dark"] .ranking-page .platform-rank-card--feature { background: #3fa7ad; }
[data-ranking-theme="dark"] .ranking-page .ranking-button--ghost { color: var(--ranking-ink) !important; }

@media (max-width: 1100px) {
  .ranking-page .hero-nav-shell { width: calc(100% - 48px); }
  .ranking-intro::after { right: 0; }
  .ranking-intro__inner,
  .ranking-section__inner,
  .platform-cta__inner { width: min(100% - 64px, 880px); }
  .ranking-intro__inner { grid-template-columns: minmax(0, 1fr) 220px; }
  .ranking-intro { min-height: 570px; }
  .ranking-intro__inner { min-height: 570px; }
  .ranking-intro__signal { min-height: 250px; }
  .ranking-spark--one { width: 170px; height: 170px; }
  .criteria-section .ranking-section__inner,
  .style-section .ranking-section__inner { gap: 55px; }
  .platform-ranking__list { gap: 16px; }
  .platform-rank-card,
  .platform-rank-card--feature { grid-template-columns: 1fr; }
  .platform-rank-card__media { border-right: 0; border-bottom: 1px solid var(--ranking-ink); }
  .platform-rank-card__media img { height: 220px; min-height: 0; }
  .platform-rank-card__content { min-height: 245px; }
  .reading-section__inner { gap: 60px; }
}

@media (max-width: 900px) {
  .criteria-section .ranking-section__inner,
  .style-section .ranking-section__inner { display: block; }
  .ranking-main h1,
  .ranking-main h2,
  .ranking-main h3,
  .ranking-main p { overflow-wrap: anywhere; }
}

@media (max-width: 700px) {
  .ranking-page .hero-header,
  .ranking-page .hero-content { min-height: 96px !important; }
  .ranking-page .hero-content { padding-bottom: 16px; }
  .ranking-page .hero-nav-shell { width: calc(100% - 32px); height: auto; margin-top: 16px; }
  .ranking-intro__inner,
  .ranking-section__inner,
  .platform-cta__inner { width: calc(100% - 40px); }
  .ranking-intro { min-height: 0; }
  .ranking-intro__inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 52px 0 65px; }
  .ranking-kicker { margin-bottom: 35px !important; }
  .ranking-intro h1 { font-size: clamp(3.35rem, 16vw, 5.4rem); }
  .ranking-intro__lead { margin-top: 32px !important; font-size: 1.05rem; }
  .ranking-intro__tools { align-items: stretch; margin-top: 40px; }
  .ranking-intro__index { width: 100%; }
  .ranking-theme-toggle { justify-content: center; }
  .ranking-intro__signal { align-items: flex-start; min-height: 205px; margin-top: 20px; padding: 22px 0; }
  .ranking-intro__signal strong { font-size: 5.4rem; }
  .ranking-spark--one { top: 0; right: 10px; width: 155px; height: 155px; }
  .ranking-spark--two { right: 54px; bottom: 32px; width: 55px; height: 55px; }
  .ranking-intro__signal-label { align-self: flex-end; margin-top: 14px; }
  .criteria-section .ranking-section__inner,
  .style-section .ranking-section__inner,
  .reading-section__inner { display: block; padding: 76px 0 82px; }
  .ranking-section__heading h2 { margin-top: 17px !important; font-size: clamp(3rem, 14vw, 5rem); }
  .criteria-section__body,
  .style-section__content { padding-top: 44px; }
  .criteria-grid,
  .style-grid { grid-template-columns: 1fr; margin-top: 42px; }
  .criteria-card { min-height: 180px; padding: 23px; }
  .criteria-card__number { margin-bottom: 25px; }
  .platform-ranking { padding: 78px 0 84px; }
  .ranking-section__heading--split { display: block; }
  .ranking-section__note { margin-top: 34px; }
  .platform-ranking__list { grid-template-columns: 1fr; margin-top: 47px; }
  .platform-rank-card__media img { height: clamp(185px, 54vw, 280px); }
  .platform-rank-card__content { min-height: 0; padding: 24px 22px 24px; }
  .platform-rank-card h3 { margin-top: 15px !important; }
  .platform-rank-card__link { margin-top: 25px; padding-top: 0; }
  .style-card { min-height: 218px; padding: 23px; }
  .style-card h3 { margin-top: 32px !important; }
  .reading-section__visual { min-height: 330px; margin-bottom: 50px; padding: 30px; }
  .reading-section__ring { width: 205px; height: 205px; }
  .reading-section__visual strong { right: 22px; bottom: 24px; font-size: 55px; }
  .reading-section__visual small { top: 23px; left: 23px; }
  .reading-section__copy { padding-top: 0; }
  .reading-section__copy > p:not(.ranking-overline) { margin-top: 32px !important; }
  .reading-list { margin-top: 42px; }
  .platform-cta__inner { display: block; min-height: 0; padding: 72px 0 78px; }
  .platform-cta h2 { font-size: clamp(3.3rem, 14vw, 5.1rem); }
  .platform-cta__actions { margin-top: 48px; }
  .ranking-page [data-homepage-region="15-footer"] > [data-homepage-region-content] { padding-top: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .ranking-button { transition: none; }
}