:root {
    --comparison-bg: #070811;
    --comparison-panel: rgba(16, 18, 33, .92);
    --comparison-panel-soft: rgba(20, 22, 40, .72);
    --comparison-border: rgba(139, 124, 255, .18);
    --comparison-border-strong: rgba(139, 124, 255, .34);
    --comparison-text: #f5f4ff;
    --comparison-muted: #a9a8bb;
    --comparison-purple: #8b7cff;
    --comparison-purple-light: #b8afff;
    --comparison-green: #45d9a0;
    --comparison-orange: #ffb76b;
}

.comparison-page {
    background: var(--comparison-bg);
    color: var(--comparison-text);
}

.comparison-page *,
.comparison-page *::before,
.comparison-page *::after {
    box-sizing: border-box;
}

.comparison-page main,
.comparison-page button,
.comparison-page input {
    font-family: "Poppins", sans-serif;
}

.comparison-directory,
.comparison-detail {
    min-height: 100vh;
    overflow: hidden;
    background: radial-gradient(circle at 85% 5%, rgba(93, 74, 214, .13), transparent 26%), var(--comparison-bg);
}

.comparison-shell {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

.comparison-orb {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(8px);
    opacity: .65;
}

.comparison-orb-one {
    width: 480px;
    height: 480px;
    top: -230px;
    right: -140px;
    background: radial-gradient(circle, rgba(129, 105, 255, .24), transparent 68%);
}

.comparison-orb-two {
    width: 400px;
    height: 400px;
    top: 240px;
    left: -220px;
    background: radial-gradient(circle, rgba(46, 198, 153, .12), transparent 68%);
}

.comparison-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #858499;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 44px;
}

.comparison-breadcrumbs a {
    color: #b4b2c6;
    text-decoration: none;
}

.comparison-breadcrumbs a:hover {
    color: var(--comparison-purple-light);
}

.comparison-breadcrumbs i {
    font-size: 8px;
}

.comparison-eyebrow,
.comparison-section-heading > span,
.comparison-section-kicker,
.comparison-related > span,
.comparison-final-cta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--comparison-green);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.comparison-hero,
.comparison-detail-hero {
    position: relative;
    padding: 34px 0 72px;
    border-bottom: 1px solid rgba(139, 124, 255, .12);
}

.comparison-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    align-items: center;
    gap: 72px;
}

.comparison-hero-grid > *,
.comparison-detail-title > *,
.comparison-card-grid > *,
.comparison-popular-grid > * {
    min-width: 0;
}

.comparison-hero h1,
.comparison-detail-title h1 {
    max-width: 760px;
    margin: 17px 0 20px;
    color: var(--comparison-text);
    font-size: clamp(38px, 5vw, 62px);
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.045em;
}

.comparison-hero h1 em,
.comparison-detail-title h1 em {
    color: var(--comparison-purple-light);
    font-style: normal;
}

.comparison-hero-grid > div > p,
.comparison-detail-title > div > p {
    max-width: 720px;
    margin: 0;
    color: var(--comparison-muted);
    font-size: 16px;
    line-height: 1.8;
}

.comparison-stats {
    display: flex;
    gap: 34px;
    margin-top: 36px;
}

.comparison-stats div {
    display: grid;
    gap: 2px;
}

.comparison-stats strong {
    color: var(--comparison-text);
    font-size: 24px;
    font-weight: 650;
}

.comparison-stats span {
    color: #8e8da2;
    font-size: 11px;
}

.comparison-search-panel {
    padding: 25px;
    border: 1px solid var(--comparison-border-strong);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(24, 24, 45, .96), rgba(13, 14, 26, .96));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.comparison-search-title {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
}

.comparison-search-title > i {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 11px;
    color: var(--comparison-purple-light);
    background: rgba(139, 124, 255, .12);
}

.comparison-search-title div {
    display: grid;
}

.comparison-search-title span {
    color: var(--comparison-text);
    font-size: 14px;
    font-weight: 600;
}

.comparison-search-title small {
    color: var(--comparison-muted);
    font-size: 11px;
}

.comparison-search-panel label {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 15px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    background: rgba(4, 5, 12, .6);
}

.comparison-search-panel label:focus-within {
    border-color: var(--comparison-purple);
    box-shadow: 0 0 0 3px rgba(139, 124, 255, .1);
}

.comparison-search-panel input {
    width: 100%;
    border: 0;
    outline: 0;
    color: var(--comparison-text);
    background: transparent;
    font-size: 13px;
}

.comparison-search-panel input::placeholder {
    color: #77768a;
}

.comparison-search-panel kbd {
    min-width: 27px;
    padding: 3px 8px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 6px;
    color: #9290a4;
    background: rgba(255, 255, 255, .04);
    text-align: center;
    font: 11px/1.4 monospace;
}

#comparison-search-status {
    margin: 11px 0 14px;
    color: #858499;
    font-size: 10px;
}

.comparison-popular-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.comparison-popular-chips span {
    color: #858499;
    font-size: 10px;
}

.comparison-popular-chips a {
    padding: 6px 9px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 999px;
    color: #c4c2d3;
    background: rgba(255, 255, 255, .025);
    font-size: 9px;
    text-decoration: none;
}

.comparison-popular-chips a:hover {
    border-color: var(--comparison-border-strong);
    color: var(--comparison-purple-light);
}

.comparison-directory-body,
.comparison-detail-body {
    padding-top: 34px;
    padding-bottom: 90px;
}

.comparison-filter-bar,
.comparison-page-nav {
    position: sticky;
    top: 76px;
    z-index: 10;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 0 72px;
    padding: 10px;
    border: 1px solid var(--comparison-border);
    border-radius: 14px;
    background: rgba(11, 12, 23, .9);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .2);
    backdrop-filter: blur(18px);
    scrollbar-width: none;
}

.comparison-filter-bar::-webkit-scrollbar,
.comparison-page-nav::-webkit-scrollbar {
    display: none;
}

.comparison-filter-bar button,
.comparison-page-nav a,
.comparison-page-nav strong {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 0 13px;
    border: 0;
    border-radius: 9px;
    color: #a9a8b9;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.comparison-filter-bar button:hover,
.comparison-filter-bar button.active,
.comparison-page-nav a:hover,
.comparison-page-nav a.active {
    color: var(--comparison-text);
    background: rgba(139, 124, 255, .13);
}

.comparison-page-nav strong {
    color: var(--comparison-text);
}

.comparison-empty {
    margin: 0 0 70px;
    padding: 56px 24px;
    border: 1px dashed var(--comparison-border-strong);
    border-radius: 18px;
    text-align: center;
}

.comparison-empty i {
    color: var(--comparison-purple-light);
    font-size: 24px;
}

.comparison-empty h2 {
    margin: 15px 0 6px;
    font-size: 22px;
}

.comparison-empty p {
    margin: 0 0 18px;
    color: var(--comparison-muted);
    font-size: 12px;
}

.comparison-empty button {
    padding: 10px 15px;
    border: 1px solid var(--comparison-border-strong);
    border-radius: 9px;
    color: var(--comparison-text);
    background: rgba(139, 124, 255, .1);
    cursor: pointer;
}

.comparison-popular-section,
.comparison-catalog-section,
.comparison-methodology {
    margin-bottom: 94px;
}

.comparison-section-heading {
    max-width: 760px;
    margin-bottom: 30px;
}

.comparison-section-heading h2,
.comparison-content-section > h2,
.comparison-related h2 {
    margin: 9px 0 10px;
    color: var(--comparison-text);
    font-size: clamp(25px, 3.2vw, 37px);
    font-weight: 620;
    line-height: 1.2;
    letter-spacing: -.035em;
}

.comparison-section-heading p,
.comparison-content-section > p,
.comparison-content-section > h3 + p,
.comparison-table-wrap + p {
    color: var(--comparison-muted);
    font-size: 13px;
    line-height: 1.85;
}

.comparison-popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.comparison-popular-grid a {
    position: relative;
    min-height: 165px;
    padding: 21px;
    overflow: hidden;
    border: 1px solid var(--comparison-border);
    border-radius: 16px;
    color: inherit;
    background: linear-gradient(145deg, rgba(21, 22, 40, .9), rgba(12, 13, 24, .92));
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease;
}

.comparison-popular-grid a:hover,
.comparison-card:hover,
.comparison-related a:hover {
    border-color: var(--comparison-border-strong);
    transform: translateY(-3px);
}

.comparison-popular-grid a > span,
.comparison-card-top span {
    color: var(--comparison-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.comparison-popular-grid strong {
    display: block;
    max-width: 88%;
    margin: 10px 0 8px;
    color: var(--comparison-text);
    font-size: 16px;
    line-height: 1.4;
}

.comparison-popular-grid strong small,
.comparison-card h3 small {
    color: #858399;
    font-size: .7em;
    font-weight: 400;
}

.comparison-popular-grid p {
    margin: 0;
    color: #9694a7;
    font-size: 11px;
    line-height: 1.65;
}

.comparison-popular-grid a > i {
    position: absolute;
    right: 20px;
    bottom: 21px;
    color: var(--comparison-purple-light);
    font-size: 11px;
}

.comparison-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.comparison-card {
    display: flex;
    min-height: 300px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .085);
    border-radius: 17px;
    color: inherit;
    background: rgba(17, 18, 31, .82);
    text-decoration: none;
    flex-direction: column;
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}

.comparison-card:hover {
    background: rgba(20, 21, 38, .94);
}

.comparison-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.comparison-card-top > i {
    color: #777589;
    font-size: 10px;
    transform: rotate(45deg);
}

.comparison-card h3 {
    margin: 18px 0 11px;
    color: var(--comparison-text);
    font-size: 18px;
    font-weight: 620;
    line-height: 1.42;
    letter-spacing: -.02em;
}

.comparison-card > p {
    margin: 0;
    color: #9997aa;
    font-size: 11px;
    line-height: 1.75;
}

.comparison-card-facts {
    display: grid;
    gap: 8px;
    margin: 17px 0;
}

.comparison-card-facts span {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #b5b3c4;
    font-size: 9px;
    line-height: 1.55;
}

.comparison-card-facts i {
    margin-top: 2px;
    color: var(--comparison-purple-light);
}

.comparison-card > strong {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 17px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: var(--comparison-purple-light);
    font-size: 10px;
    font-weight: 600;
}

.pair-card {
    min-height: 320px;
}

.pair-score {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin: 17px 0;
    padding: 12px;
    border-radius: 11px;
    background: rgba(0, 0, 0, .2);
}

.pair-score div {
    display: grid;
    gap: 3px;
}

.pair-score div:last-child {
    text-align: right;
}

.pair-score span {
    overflow: hidden;
    color: #9997aa;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pair-score strong {
    color: var(--comparison-text);
    font-size: 17px;
}

.pair-score > i {
    color: var(--comparison-green);
    font-size: 10px;
}

.methodology-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}

.methodology-grid div {
    min-height: 150px;
    padding: 20px;
    border: 1px solid var(--comparison-border);
    border-radius: 14px;
    background: rgba(16, 17, 30, .72);
}

.methodology-grid i {
    display: grid;
    width: 27px;
    height: 27px;
    margin-bottom: 16px;
    place-items: center;
    border-radius: 8px;
    color: var(--comparison-green);
    background: rgba(69, 217, 160, .09);
    font-size: 9px;
}

.methodology-grid strong {
    color: var(--comparison-text);
    font-size: 12px;
}

.methodology-grid p {
    margin: 7px 0 0;
    color: #9290a3;
    font-size: 10px;
    line-height: 1.65;
}

.comparison-disclosure,
.comparison-editorial-disclosure,
.comparison-note {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-top: 22px;
    padding: 17px 19px;
    border: 1px solid rgba(255, 183, 107, .18);
    border-radius: 12px;
    color: #aaa8ba;
    background: rgba(255, 183, 107, .045);
    font-size: 10px;
    line-height: 1.7;
}

.comparison-disclosure i,
.comparison-editorial-disclosure > i,
.comparison-note > i {
    margin-top: 3px;
    color: var(--comparison-orange);
}

.comparison-disclosure p,
.comparison-editorial-disclosure p,
.comparison-note p {
    margin: 0;
}

/* Detail page */
.comparison-detail-hero {
    padding-bottom: 52px;
}

.comparison-detail-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
}

.comparison-detail-title h1 {
    max-width: 900px;
    margin-bottom: 15px;
    font-size: clamp(38px, 5.2vw, 66px);
}

.comparison-detail-title > a,
.comparison-final-cta > a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 17px;
    border: 1px solid var(--comparison-border-strong);
    border-radius: 10px;
    color: var(--comparison-text);
    background: rgba(139, 124, 255, .1);
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.comparison-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 30px;
    color: #8f8da0;
    font-size: 10px;
}

.comparison-detail-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.comparison-detail-meta i {
    color: var(--comparison-green);
}

.comparison-quick-answer {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    margin-bottom: 22px;
    padding: 25px;
    border: 1px solid var(--comparison-border-strong);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(139, 124, 255, .105), rgba(69, 217, 160, .035));
}

.comparison-quick-answer > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 11px;
    color: var(--comparison-purple-light);
    background: rgba(139, 124, 255, .12);
}

.comparison-quick-answer span {
    color: var(--comparison-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.comparison-quick-answer h2 {
    margin: 5px 0 8px;
    color: var(--comparison-text);
    font-size: 20px;
    font-weight: 600;
}

.comparison-quick-answer p {
    margin: 0;
    color: #bbb9ca;
    font-size: 12px;
    line-height: 1.75;
}

.comparison-page-nav {
    margin-bottom: 0;
}

.comparison-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 48px;
    align-items: start;
}

.comparison-article {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.comparison-page-nav {
    position: sticky;
    top: 88px;
    z-index: 8;
    display: grid;
    gap: 5px;
    overflow: visible;
    margin: 88px 0 0;
    padding: 17px;
    border: 1px solid var(--comparison-border);
    border-radius: 14px;
    background: rgba(13, 14, 26, .86);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .2);
    backdrop-filter: blur(16px);
}

.comparison-page-nav strong,
.comparison-page-nav a {
    width: 100%;
    min-height: 0;
    padding: 8px;
    border-radius: 8px;
    font-size: 10px;
}

.comparison-page-nav strong {
    padding-bottom: 10px;
    color: var(--comparison-text);
    font-size: 11px;
}

.comparison-page-nav a:hover,
.comparison-page-nav a.active {
    color: var(--comparison-text);
    background: rgba(139, 124, 255, .11);
}

.comparison-content-section {
    position: relative;
    padding: 88px 0 6px;
    scroll-margin-top: 145px;
}

.comparison-section-number {
    position: absolute;
    top: 83px;
    right: calc(100% + 28px);
    color: rgba(139, 124, 255, .28);
    font-size: 18px;
    font-weight: 700;
}

.comparison-content-section > h3 {
    margin: 34px 0 8px;
    color: var(--comparison-text);
    font-size: 19px;
    font-weight: 600;
}

.comparison-snapshot-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.comparison-snapshot-grid > * {
    min-height: 175px;
    padding: 20px;
    border: 1px solid var(--comparison-border);
    border-radius: 15px;
    background: rgba(17, 18, 32, .78);
}

.comparison-snapshot-grid article {
    display: flex;
    flex-direction: column;
}

.comparison-snapshot-grid article > span,
.comparison-snapshot-grid article p {
    color: #9d9bad;
    font-size: 10px;
    line-height: 1.6;
}

.comparison-snapshot-grid article > strong {
    margin: auto 0 3px;
    color: var(--comparison-text);
    font-size: 39px;
    font-weight: 600;
}

.comparison-snapshot-grid article > strong small {
    color: #858399;
    font-size: 12px;
    font-weight: 400;
}

.comparison-snapshot-grid article p {
    margin: 0;
}

.comparison-snapshot-grid > div {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
}

.comparison-snapshot-grid > div > span {
    color: var(--comparison-purple-light);
    font-size: 36px;
    font-weight: 600;
}

.comparison-snapshot-grid > div > small {
    color: #9391a4;
    font-size: 9px;
}

.comparison-snapshot-grid > div > i {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--comparison-green);
    font-size: 12px;
}

.comparison-snapshot-grid > div > em {
    grid-column: 1 / -1;
    align-self: end;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    color: #858399;
    font-size: 9px;
    font-style: normal;
}

.comparison-score-legend {
    display: flex;
    gap: 20px;
    margin: 24px 0 14px;
    color: #a9a7b8;
    font-size: 10px;
}

.comparison-score-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.comparison-score-legend i {
    width: 9px;
    height: 9px;
    border-radius: 3px;
}

.left-color,
.left-bar {
    background: var(--comparison-purple);
}

.right-color,
.right-bar {
    background: var(--comparison-green);
}

.comparison-score-chart {
    display: grid;
    gap: 19px;
    padding: 25px;
    border: 1px solid var(--comparison-border);
    border-radius: 17px;
    background: rgba(14, 15, 27, .82);
}

.score-row {
    display: grid;
    grid-template-columns: 165px 1fr 1fr;
    align-items: center;
    gap: 14px;
}

.score-label {
    display: grid;
    gap: 3px;
}

.score-label strong {
    color: #d9d7e5;
    font-size: 10px;
    font-weight: 500;
}

.score-label span {
    color: #777589;
    font-size: 8px;
}

.score-track {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
}

.score-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
}

.comparison-note {
    border-color: rgba(139, 124, 255, .16);
    background: rgba(139, 124, 255, .04);
}

.comparison-note > i {
    color: var(--comparison-purple-light);
}

.comparison-table-wrap {
    overflow-x: auto;
    margin: 25px 0 17px;
    border: 1px solid var(--comparison-border);
    border-radius: 16px;
    background: rgba(14, 15, 27, .82);
}

.comparison-table-wrap table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    text-align: left;
}

.comparison-table-wrap th,
.comparison-table-wrap td {
    padding: 17px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .065);
    color: #aaa8ba;
    font-size: 10px;
    line-height: 1.65;
    vertical-align: top;
}

.comparison-table-wrap thead th {
    color: var(--comparison-text);
    background: rgba(139, 124, 255, .08);
    font-weight: 600;
}

.comparison-table-wrap tbody th {
    width: 22%;
    color: #d4d2df;
    font-weight: 500;
}

.comparison-table-wrap tr:last-child th,
.comparison-table-wrap tr:last-child td {
    border-bottom: 0;
}

.comparison-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 25px;
}

.comparison-choice-grid article {
    padding: 25px;
    border: 1px solid var(--comparison-border);
    border-radius: 16px;
    background: rgba(16, 17, 31, .8);
}

.comparison-choice-grid article > i {
    display: grid;
    width: 38px;
    height: 38px;
    margin-bottom: 22px;
    place-items: center;
    border-radius: 10px;
    color: var(--comparison-purple-light);
    background: rgba(139, 124, 255, .1);
}

.comparison-choice-grid article > span {
    color: var(--comparison-green);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.comparison-choice-grid h3 {
    margin: 8px 0 9px;
    color: var(--comparison-text);
    font-size: 17px;
    font-weight: 600;
}

.comparison-choice-grid p,
.comparison-choice-grid li {
    color: #9e9cae;
    font-size: 10px;
    line-height: 1.75;
}

.comparison-choice-grid ul {
    display: grid;
    gap: 8px;
    margin: 17px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .07);
    list-style: none;
}

.comparison-choice-grid li {
    display: flex;
    gap: 8px;
}

.comparison-choice-grid li i {
    margin-top: 5px;
    color: var(--comparison-green);
    font-size: 8px;
}

.comparison-workflow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 11px;
    margin-top: 24px;
}

.comparison-workflow div {
    display: grid;
    min-height: 120px;
    padding: 16px;
    border: 1px solid var(--comparison-border);
    border-radius: 13px;
    background: rgba(16, 17, 31, .7);
}

.comparison-workflow div span {
    color: var(--comparison-purple-light);
    font-size: 11px;
    font-weight: 700;
}

.comparison-workflow div strong {
    align-self: end;
    color: var(--comparison-text);
    font-size: 12px;
}

.comparison-workflow div small {
    color: #8e8c9f;
    font-size: 8px;
    line-height: 1.5;
}

.comparison-workflow > i {
    color: #656377;
    font-size: 9px;
}

.comparison-cost-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 25px;
}

.comparison-cost-grid div {
    padding: 18px;
    border: 1px solid var(--comparison-border);
    border-radius: 13px;
    background: rgba(16, 17, 31, .7);
}

.comparison-cost-grid i {
    color: var(--comparison-green);
    font-size: 13px;
}

.comparison-cost-grid strong {
    display: block;
    margin: 13px 0 6px;
    color: var(--comparison-text);
    font-size: 11px;
}

.comparison-cost-grid p {
    margin: 0;
    color: #9290a3;
    font-size: 9px;
    line-height: 1.6;
}

.comparison-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 25px;
}

.comparison-pros-cons-grid > article {
    overflow: hidden;
    border: 1px solid var(--comparison-border);
    border-radius: 16px;
    background: rgba(16, 17, 31, .76);
}

.pros-cons-product {
    display: grid;
    gap: 3px;
    padding: 20px;
    border-bottom: 1px solid var(--comparison-border);
    background: rgba(139, 124, 255, .055);
}

.pros-cons-product span {
    color: var(--comparison-text);
    font-size: 15px;
    font-weight: 600;
}

.pros-cons-product small {
    color: var(--comparison-green);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.pros-list,
.cons-list {
    padding: 18px 20px;
}

.pros-list {
    border-bottom: 1px solid rgba(255, 255, 255, .065);
}

.pros-list h3,
.cons-list h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    color: var(--comparison-text);
    font-size: 11px;
}

.pros-list h3 i,
.pros-list li i {
    color: var(--comparison-green);
}

.cons-list h3 i,
.cons-list li i {
    color: #ff8596;
}

.pros-list ul,
.cons-list ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pros-list li,
.cons-list li {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 7px;
    color: #a4a2b4;
    font-size: 9px;
    line-height: 1.65;
}

.pros-list li i,
.cons-list li i {
    margin-top: 4px;
    font-size: 7px;
}

.comparison-tradediary-edge {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
    margin-top: 15px;
    padding: 21px;
    border: 1px solid rgba(69, 217, 160, .2);
    border-radius: 15px;
    background: rgba(69, 217, 160, .055);
}

.comparison-tradediary-edge > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #07130f;
    background: var(--comparison-green);
}

.comparison-tradediary-edge span,
.comparison-value-verdict > span,
.winner-heading span {
    color: var(--comparison-green);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.comparison-tradediary-edge h3 {
    margin: 5px 0 5px;
    color: var(--comparison-text);
    font-size: 15px;
}

.comparison-tradediary-edge p,
.comparison-value-verdict p,
.comparison-alternative-note p {
    margin: 0;
    color: #a3a1b3;
    font-size: 10px;
    line-height: 1.7;
}

.comparison-value-verdict {
    display: grid;
    gap: 5px;
    margin-top: 16px;
    padding: 20px;
    border: 1px solid var(--comparison-border-strong);
    border-radius: 14px;
    background: rgba(139, 124, 255, .07);
}

.comparison-value-verdict > strong {
    color: var(--comparison-text);
    font-size: 13px;
}

.comparison-winner-card {
    margin-top: 24px;
    padding: 27px;
    border: 1px solid rgba(69, 217, 160, .3);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(69, 217, 160, .11), rgba(139, 124, 255, .08));
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}

.winner-heading {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
}

.winner-heading > i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 12px;
    color: #07130f;
    background: var(--comparison-green);
    font-size: 17px;
}

.winner-heading h3 {
    margin: 4px 0 0;
    color: var(--comparison-text);
    font-size: 20px;
}

.winner-heading > strong {
    padding: 7px 11px;
    border: 1px solid rgba(69, 217, 160, .25);
    border-radius: 999px;
    color: var(--comparison-green);
    background: rgba(69, 217, 160, .08);
    font-size: 9px;
    text-transform: uppercase;
}

.comparison-winner-card > p {
    margin: 22px 0;
    color: #bbb9c9;
    font-size: 11px;
    line-height: 1.8;
}

.winner-reasons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 22px;
}

.winner-reasons div {
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 11px;
    background: rgba(4, 7, 12, .2);
}

.winner-reasons i {
    color: var(--comparison-green);
    font-size: 11px;
}

.winner-reasons strong,
.winner-reasons span {
    display: block;
}

.winner-reasons strong {
    margin: 10px 0 4px;
    color: var(--comparison-text);
    font-size: 10px;
}

.winner-reasons span {
    color: #9997a9;
    font-size: 8px;
    line-height: 1.55;
}

.comparison-winner-card > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 17px;
    border-radius: 10px;
    color: #07130f;
    background: var(--comparison-green);
    font-size: 10px;
    font-weight: 700;
    text-decoration: none;
}

.comparison-alternative-note {
    margin-top: 14px;
    padding: 18px 20px;
    border: 1px solid var(--comparison-border);
    border-radius: 13px;
    background: rgba(16, 17, 31, .68);
}

.comparison-alternative-note strong {
    display: block;
    margin-bottom: 5px;
    color: var(--comparison-text);
    font-size: 11px;
}

.comparison-test-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 25px 0 0;
    padding: 0;
    list-style: none;
}

.comparison-test-list li {
    display: flex;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--comparison-border);
    border-radius: 13px;
    background: rgba(16, 17, 31, .68);
}

.comparison-test-list li > span {
    display: grid;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    color: var(--comparison-purple-light);
    background: rgba(139, 124, 255, .1);
    font-size: 9px;
    font-weight: 700;
}

.comparison-test-list strong {
    color: var(--comparison-text);
    font-size: 11px;
}

.comparison-test-list p {
    margin: 5px 0 0;
    color: #9290a3;
    font-size: 9px;
    line-height: 1.65;
}

.comparison-mistakes {
    margin-top: 35px;
    padding: 24px;
    border: 1px solid rgba(255, 183, 107, .16);
    border-radius: 16px;
    background: rgba(255, 183, 107, .035);
}

.comparison-mistakes h3 {
    margin: 0 0 16px;
    color: var(--comparison-text);
    font-size: 16px;
}

.comparison-mistakes > div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.comparison-mistakes span {
    color: var(--comparison-orange);
    font-size: 9px;
    font-weight: 700;
}

.comparison-mistakes p {
    margin: 0;
    color: #a3a1b2;
    font-size: 10px;
    line-height: 1.65;
}

.comparison-faq details {
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.comparison-faq details:first-of-type {
    margin-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.comparison-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 19px 0;
    color: #e3e1eb;
    font-size: 12px;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
}

.comparison-faq summary::-webkit-details-marker {
    display: none;
}

.comparison-faq summary i {
    color: var(--comparison-purple-light);
    font-size: 9px;
    transition: transform .2s ease;
}

.comparison-faq details[open] summary i {
    transform: rotate(45deg);
}

.comparison-faq details p {
    max-width: 790px;
    margin: -5px 0 19px;
    color: #9f9dae;
    font-size: 10px;
    line-height: 1.8;
}

.comparison-related {
    padding-top: 92px;
}

.comparison-related > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 23px;
}

.comparison-related a {
    position: relative;
    min-height: 185px;
    padding: 20px;
    border: 1px solid var(--comparison-border);
    border-radius: 15px;
    color: inherit;
    background: rgba(16, 17, 31, .75);
    text-decoration: none;
    transition: transform .25s ease, border-color .25s ease;
}

.comparison-related small {
    color: var(--comparison-green);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.comparison-related strong {
    display: block;
    margin: 10px 0 7px;
    color: var(--comparison-text);
    font-size: 13px;
    line-height: 1.45;
}

.comparison-related p {
    margin: 0;
    color: #9290a3;
    font-size: 9px;
    line-height: 1.65;
}

.comparison-related a > i {
    position: absolute;
    right: 18px;
    bottom: 18px;
    color: var(--comparison-purple-light);
    font-size: 9px;
}

.comparison-editorial-disclosure {
    margin-top: 76px;
}

.comparison-editorial-disclosure strong {
    display: block;
    margin-bottom: 4px;
    color: #dddbe6;
    font-size: 10px;
}

.comparison-final-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 28px;
    padding: 30px;
    border: 1px solid var(--comparison-border-strong);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(139, 124, 255, .12), rgba(69, 217, 160, .045));
}

.comparison-final-cta h2 {
    margin: 7px 0 6px;
    color: var(--comparison-text);
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.comparison-final-cta p {
    margin: 0;
    color: #a5a3b5;
    font-size: 10px;
}

.comparison-final-cta > a {
    border: 0;
    color: #0b0c12;
    background: var(--comparison-green);
}

@media (max-width: 1100px) {
    .comparison-hero-grid { gap: 36px; }
    .comparison-card-grid { grid-template-columns: repeat(2, 1fr); }
    .methodology-grid { grid-template-columns: repeat(3, 1fr); }
    .comparison-detail-layout { grid-template-columns: minmax(0, 1fr) 205px; gap: 30px; }
    .comparison-section-number { position: static; display: block; margin-bottom: 6px; }
}

@media (max-width: 820px) {
    .comparison-shell { width: min(100% - 28px, 720px); }
    .comparison-hero, .comparison-detail-hero { padding-top: 24px; padding-bottom: 50px; }
    .comparison-breadcrumbs { margin-bottom: 28px; }
    .comparison-hero-grid { grid-template-columns: 1fr; }
    .comparison-detail-title { align-items: flex-start; flex-direction: column; }
    .comparison-stats { flex-wrap: wrap; }
    .comparison-popular-grid { grid-template-columns: repeat(2, 1fr); }
    .methodology-grid { grid-template-columns: repeat(2, 1fr); }
    .comparison-filter-bar { top: 64px; margin-bottom: 52px; }
    .comparison-detail-layout { display: flex; flex-direction: column; gap: 0; }
    .comparison-page-nav { order: -1; position: sticky; top: 64px; display: flex; width: 100%; overflow-x: auto; margin: 0 0 52px; padding: 10px; }
    .comparison-page-nav strong, .comparison-page-nav a { width: auto; min-height: 34px; padding: 0 11px; white-space: nowrap; }
    .comparison-snapshot-grid { grid-template-columns: 1fr 1fr; }
    .comparison-snapshot-grid > div { grid-column: 1 / -1; grid-row: 2; }
    .score-row { grid-template-columns: 125px 1fr 1fr; }
    .comparison-workflow { grid-template-columns: 1fr 1fr; }
    .comparison-workflow > i { display: none; }
    .comparison-cost-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .comparison-shell { width: calc(100vw - 22px); max-width: calc(100vw - 22px); }
    .comparison-search-panel { width: 100%; min-width: 0; }
    .comparison-hero h1, .comparison-detail-title h1 { max-width: 100%; font-size: 34px; overflow-wrap: break-word; }
    .comparison-hero-grid > div > p, .comparison-detail-title > div > p { font-size: 13px; }
    .comparison-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .comparison-stats strong { font-size: 21px; }
    .comparison-stats span { font-size: 8px; line-height: 1.45; }
    .comparison-search-panel { padding: 18px; }
    .comparison-directory-body, .comparison-detail-body { padding-top: 22px; padding-bottom: 60px; }
    .comparison-filter-bar, .comparison-page-nav { margin-bottom: 42px; }
    .comparison-popular-section, .comparison-catalog-section, .comparison-methodology { margin-bottom: 68px; }
    .comparison-popular-grid, .comparison-card-grid, .methodology-grid, .comparison-choice-grid, .comparison-test-list, .comparison-related > div, .comparison-pros-cons-grid { grid-template-columns: 1fr; }
    .comparison-card { min-height: 275px; padding: 20px; }
    .comparison-quick-answer { grid-template-columns: 1fr; padding: 20px; }
    .comparison-content-section { padding-top: 66px; }
    .comparison-snapshot-grid { grid-template-columns: 1fr; }
    .comparison-snapshot-grid > div { grid-column: auto; grid-row: auto; }
    .comparison-score-chart { padding: 18px; }
    .score-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .score-label { grid-column: 1 / -1; grid-template-columns: 1fr auto; }
    .comparison-workflow, .comparison-cost-grid { grid-template-columns: 1fr; }
    .winner-reasons { grid-template-columns: 1fr; }
    .winner-heading { grid-template-columns: auto 1fr; }
    .winner-heading > strong { grid-column: 1 / -1; justify-self: start; }
    .comparison-workflow div { min-height: 100px; }
    .comparison-final-cta { align-items: flex-start; padding: 23px; flex-direction: column; }
    .comparison-final-cta > a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .comparison-page *, .comparison-page *::before, .comparison-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}