/* CompareGrids editorial layer. Existing benchmark mechanics are preserved. */
@font-face {
   font-family: "MontserratArial";
   src: local("Arial"), local("ArialMT");
   font-style: normal;
   font-weight: 400;
   size-adjust: 112.5%;
   ascent-override: 86.04%;
   descent-override: 22.31%;
   line-gap-override: 0%;
}

@font-face {
   font-family: "MontserratArial";
   src: local("Arial Bold"), local("Arial-BoldMT");
   font-style: normal;
   font-weight: 700;
   size-adjust: 108.3%;
   ascent-override: 86.97%;
   descent-override: 22.55%;
   line-gap-override: 0%;
}

:root {
   --page-bg: #ffffff;
   --panel-bg: #fff;
   --header-bg: #eeeff1;
   --header-strong: #dfe1e5;
   --border: #d8dbe1;
   --border-dark: #b7bcc6;
   --text: #292d35;
   --muted: #555e6d;
   --accent: #183b70;
   --accent-dark: #173563;
   --bar: #315888;
   --bar-edge: #183b70;
   --stripe: #f7f8fa;
   --shadow: 0 3px 12px #25283008;
   color-scheme: light
}

* {
   box-sizing: border-box
}

body {
   margin: 0;
   min-width: 320px;
   background: var(--page-bg);
   color: var(--text);
   line-height: 1.6
}

a {
   color: var(--accent-dark);
   text-underline-offset: 4px
}

   a:hover {
      color: #1f3d70
   }

button, input, select, textarea {
   font: inherit
}

button, a, input, select, textarea, summary {
   touch-action: manipulation
}

:focus-visible {
   outline: 3px solid #264c8d;
   outline-offset: 4px
}

h1, h2, h3 {
   line-height: 1.18;
   letter-spacing: -.035em
}

h1 {
   font-size: clamp(32px,4vw,52px);
   font-weight: 650;
   margin: 0
}

h2 {
   font-size: 27px
}

h3 {
   font-size: 21px
}

p {
   margin: 0 0 18px
}

.topbar {
   background: #252830;
   color: #fff;
   border-bottom: 1px solid #333840
}

.nav-inner {
   max-width: 1680px;
   margin: auto;
   padding: 18px 32px;
   display: flex;
   align-items: center;
   gap: 34px
}

.brand {
   display: inline-flex;
   align-items: center;
   gap: 0;
   color: inherit;
   text-decoration: none;
   font-size: 23px;
   font-weight: 750;
   letter-spacing: -1px;
   white-space: nowrap
}

   .brand > span:not(.brand-icon):not(.beta) {
      font-weight: 400
   }

.brand-icon {
   font-size: 32px;
   color: #b7c9e5;
   margin-right: 10px;
   line-height: 1
}

.beta {
   font-size: 9px;
   letter-spacing: 1.3px;
   border: 1px solid #555e6d;
   border-radius: 4px;
   padding: 2px 5px;
   margin-left: 9px;
   color: #d1d5db
}

.topbar nav {
   display: flex;
   gap: 24px;
   margin-left: auto
}

   .topbar nav a {
      color: #c8ccd4;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      padding: 7px 0;
      border-bottom:2px solid transparent;
   }

      .topbar nav a:hover, .topbar nav a[aria-current] {
         color: #ffffff;
         border-bottom: 2px solid #ffffff
      }

.nav-cta {
   border: 1px solid #555e6d;
   border-radius: 6px;
   padding: 8px 13px;
   color: #fff;
   text-decoration: none;
   font-size: 13px;
   white-space: nowrap
}

   .nav-cta:hover {
      background: #182f56;
      color: white
   }

.skip {
   position: absolute;
   top: -70px;
   left: 12px;
   z-index: 100;
   background: white;
   padding: 12px
}

   .skip:focus {
      top: 10px
   }

.site-header, main, .site-footer {
   width: min(100% - 64px,1616px);
   margin-inline: auto
}

.site-header {
   padding: 28px 0 18px
}

.eyebrow {
   font: 700 11px/1.5 ui-monospace,SFMono-Regular,monospace;
   letter-spacing: .16em;
   color: #244784;
   text-transform: uppercase;
   margin: 0 0 8px
}

.lede {
   color: var(--muted);
   max-width: 800px;
   font-size: 16px;
   margin: 12px 0 0
}

.hero-row {
   display: flex;
   align-items: flex-end;
   justify-content: space-between;
   gap: 24px
}

.hero-stat {
   border-left: 1px solid var(--border);
   padding-left: 28px;
   flex-shrink: 0
}

   .hero-stat b {
      font-size: 36px;
      display: block;
      line-height: 1.1;
      letter-spacing: -2px
   }

   .hero-stat span {
      font-size: 12px;
      color: var(--muted)
   }

.disclosure-strip {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
   font-size: 12px;
   border-top: 1px solid var(--border);
   padding-top: 12px;
   margin-top: 18px;
   color: var(--muted)
}

   .disclosure-strip b {
      color: #1e3b6c
   }

.tabs {
   display: flex;
   gap: 4px;
   border-bottom: 1px solid var(--border);
   padding: 0 20px;
   background: #fff;
   align-items: center
}

   .tabs a {
      padding: 14px 16px;
      text-decoration: none;
      font-size: 13px;
      color: #555e6d;
      font-weight: 650
   }

      .tabs a[aria-current] {
         color: var(--accent-dark);
         border-bottom: 3px solid var(--accent)
      }

   .tabs .tab-note {
      margin-left: auto;
      font-size: 11px;
      color: var(--muted)
   }

.comparison-panel {
   border-radius: 9px;
   box-shadow: var(--shadow)
}

.comparison-intro {
   padding: 16px 20px 0
}

   .comparison-intro h2 {
      font-size: 18px;
      letter-spacing: -.025em
   }

   .comparison-intro p {
      font-size: 12px;
      margin: 6px 0 10px
   }

.filter-drawer {
   border-top: 1px solid #e5e7eb;
   background: #f8f9fb
}

   .filter-drawer > summary {
      padding: 12px 20px;
      font-size: 13px;
      cursor: pointer;
      color: #183059;
      font-weight: 650
   }

      .filter-drawer > summary::marker {
         color: var(--accent)
      }

#compare-controls {
   padding: 3px 20px 17px
}

.filter-option {
   background: white;
   border-radius: 4px;
   font-size: 12px;
   min-height: 30px;
   padding: 4px 8px
}

   .filter-option:has(input:checked) {
      background: #e9edf3;
      border-color: #bbc1ca;
      color: #162c52
   }

   .filter-option:hover {
      background: #e0e5ed;
      border-color: #555e6d
   }

.filter-fieldset legend {
   font-size: 12px
}

.filter-list {
   gap: 6px 8px
}

.comparison-table {
   font-size: 12px
}

   .comparison-table thead th {
      color: #182f57
   }

   .comparison-table thead tr.range-row th {
      background: #eef0f5
   }

   .comparison-table tbody tr:hover {
      background: #e7ebf2
   }

.chart-bar {
   background: linear-gradient(90deg,#b5c1d6,#2a5298)
}

.comparison-table .total-cell {
   color: #172e55
}

.comparison-table th[aria-sort="descending"], .comparison-table th[aria-sort="ascending"] {
   color: #142747;
   background: #e0e2e6
}

.comparison-table th, .comparison-table td {
   border-color: #e0e2e6
}

.table-footnote {
   font-size: 12px;
   color: var(--muted);
   padding: 14px 20px;
   margin: 0;
   border-top: 1px solid var(--border)
}

.below-grid {
   margin: 40px 0
}

.section-top {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   gap: 16px;
   margin-bottom: 20px
}

   .section-top h2 {
      margin: 0
   }

   .section-top a {
      font-size: 13px
   }

.cards {
   display: grid;
   grid-template-columns: repeat(3,minmax(0,1fr));
   gap: 18px
}

.resource-card {
   padding: 25px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: #fff
}

   .resource-card h3 {
      margin: 20px 0 12px
   }

   .resource-card p {
      font-size: 14px;
      color: var(--muted)
   }

   .resource-card a {
      font-size: 13px;
      font-weight: 700
   }

.card-no {
   font: 12px ui-monospace,monospace;
   color: #555d6c
}

.services-band {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 24px;
   background: #dde3ec;
   border: 1px solid #cdd1d8;
   padding: 28px 32px;
   margin: 32px 0 44px;
   border-radius: 8px
}

   .services-band h2 {
      margin: 0 0 8px;
      font-size: 26px
   }

   .services-band p {
      color: #484f5c;
      margin: 0;
      font-size: 14px
   }

.button {
   display: inline-block;
   padding: 11px 20px;
   border: 1px solid #183b70;
   border-radius: 5px;
   background: #183b70;
   color: #fff;
   text-decoration: none;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer
}

   .button:hover {
      background: #10294f;
      color: white
   }

   .button.secondary {
      color: #182f57;
      background: #fff;
      border-color: #c9cdd5
   }

.cg-footer {
   margin: 0;
   background: #252830;
   color: #c5cad2;
   padding: 44px max(32px,calc((100vw - 1616px)/2)) 22px
}

.footer-main {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 40px
}

.cg-footer .brand {
   color: white;
   font-size: 22px
}

.cg-footer p {
   margin-top: 16px;
   font-size: 14px;
   color: #adb3be
}

.cg-footer h2 {
   font-size: 11px;
   letter-spacing: .08em;
   text-transform: uppercase;
   color: #eceff5;
   margin: 0 0 17px
}

.cg-footer a:not(.brand) {
   color: #c0c5cd;
   font-size: 12px
}

.footer-main > div:not(:first-child) > a {
   display: block;
   text-decoration: none;
   margin: 8px 0
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   gap: 20px;
   border-top: 1px solid #3e444f;
   padding-top: 20px;
   margin-top: 35px;
   font-size: 11px;
   color: #555e6d
}

.small {
   font-size: 12px !important
}

.content-main {
   max-width: 1120px;
   padding-bottom: 64px
}

.page-heading {
   max-width: 860px;
   padding: 38px 0 34px
}

   .page-heading .eyebrow {
      margin-top: 24px
   }

.breadcrumb {
   font-size: 12px;
   text-decoration: none;
   color: var(--muted)
}

.prose {
   max-width: 820px
}

   .prose h2 {
      margin-top: 38px
   }

   .prose p, .prose li {
      color: #4a515e
   }

   .prose li {
      margin: 8px 0
   }

.pending {
   border: 1px solid #e1c87b;
   border-left: 4px solid #c5972e;
   background: #fff8e4;
   border-radius: 5px;
   padding: 16px 20px;
   margin: 20px 0;
   color: #664d18;
   font-size: 14px
}

   .pending strong {
      font: 700 10px ui-monospace,monospace;
      letter-spacing: .1em
   }

   .pending p {
      color: #664d18;
      margin: 6px 0 0
   }

.note {
   background: #e5eaf1;
   border-left: 3px solid #555e6d;
   padding: 18px 22px;
   margin: 24px 0
}

   .note p:last-child {
      margin: 0
   }

.meta-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 14px;
   background: white
}

   .meta-table th, .meta-table td {
      padding: 13px 16px;
      border-bottom: 1px solid var(--border);
      text-align: left;
      vertical-align: top
   }

   .meta-table th {
      background: #e9ebee;
      font-weight: 650
   }

   .meta-table td:first-child {
      font-weight: 600
   }

.table-wrap {
   overflow: auto;
   border: 1px solid var(--border);
   border-radius: 7px
}

.source-table {
   min-width: 750px
}

   .source-table td {
      font-size: 12px
   }

.tag {
   display: inline-block;
   background: #e8ecf2;
   color: #1f3d71;
   padding: 3px 7px;
   border-radius: 3px;
   font: 10px ui-monospace,monospace
}

   .tag.draft {
      color: #745714;
      background: #fff2d0
   }

.toc {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin: 16px 0 32px
}

   .toc a {
      padding: 6px 12px;
      border: 1px solid var(--border);
      border-radius: 5px;
      text-decoration: none;
      font-size: 12px;
      background: white
   }

.faq-item {
   border-bottom: 1px solid var(--border);
   padding: 18px 0
}

   .faq-item summary {
      font-weight: 650;
      font-size: 17px;
      cursor: pointer
   }

   .faq-item p {
      margin: 15px 0 0;
      color: var(--muted);
      max-width: 850px
   }

.form-panel {
   background: white;
   border: 1px solid var(--border);
   border-radius: 8px;
   padding: 28px;
   max-width: 720px
}

.field {
   display: block;
   font-size: 14px;
   font-weight: 600;
   margin: 0 0 20px
}

   .field input, .field select, .field textarea {
      display: block;
      width: 100%;
      border: 1px solid #acb2bd;
      background: #fff;
      padding: 11px 12px;
      margin-top: 7px;
      border-radius: 5px;
      color: #152a4e
   }

   .field textarea {
      min-height: 135px;
      resize: vertical
   }

.check-label {
   display: flex;
   gap: 10px;
   font-size: 13px;
   margin: 16px 0 24px
}

   .check-label input {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      accent-color: #183b70
   }

.form-panel button:disabled {
   opacity: .65;
   cursor: not-allowed
}

.status {
   font-size: 14px;
   margin-top: 16px
}

.glossary {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px
}

   .glossary article {
      padding: 22px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 6px;
      scroll-margin-top: 20px
   }

   .glossary h2 {
      font-size: 20px;
      margin: 0 0 12px
   }

   .glossary p {
      font-size: 14px;
      color: var(--muted);
      margin: 0
   }

.step {
   display: grid;
   grid-template-columns: 42px 1fr;
   gap: 16px;
   border-top: 1px solid var(--border);
   padding: 26px 0
}

   .step > b {
      color: #555e6d;
      font: 18px ui-monospace,monospace
   }

   .step h2 {
      margin: 0 0 10px
   }

   .step p:last-child {
      margin-bottom: 0
   }

.editor-note {
   font-size: 12px;
   color: #7e5d14
}

.search-label {
   font-size: 13px;
   display: block;
   margin-bottom: 20px
}

   .search-label input {
      margin-left: 10px;
      padding: 9px 12px;
      max-width: 100%;
      border: 1px solid #adb4bf;
      border-radius: 5px
   }

.source-meta {
   display: block;
   color: #79602e;
   font-size: 10px;
   margin-top: 5px
}

.article-grid {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 36px
}

.article-aside {
   background: #e3e8f0;
   padding: 22px;
   align-self: start;
   border-radius: 7px;
   font-size: 14px
}

   .article-aside h2 {
      font-size: 20px;
      margin-top: 0
   }

.methodology {
   display: none
}

@media(max-width:1000px) {
   .nav-inner {
      gap: 18px;
      padding-inline: 24px
   }

   .topbar nav {
      gap: 15px
   }

   .brand {
      font-size: 20px
   }

   .beta {
      display: none
   }

   .nav-cta {
      font-size: 12px
   }

   .site-header, main, .site-footer {
      width: calc(100% - 40px)
   }

   .cards {
      gap: 12px
   }

   .footer-main {
      gap: 24px
   }

   .resource-card {
      padding: 20px
   }

   .hero-stat {
      display: none
   }
}

@media(max-width:760px) {
   .nav-inner {
      flex-wrap: wrap;
      padding: 15px 20px;
      gap: 10px;
      justify-content: space-between
   }

   .topbar nav {
      order: 3;
      width: 100%;
      overflow: auto;
      margin: 0;
      gap: 22px
   }

      .topbar nav a {
         white-space: nowrap;
         font-size: 12px
      }

   .site-header, main {
      width: calc(100% - 28px)
   }

   .site-header {
      padding-top: 24px
   }

   h1 {
      font-size: 33px
   }

   .lede {
      font-size: 14px
   }

   .disclosure-strip {
      font-size: 11px
   }

   .tabs {
      padding: 0 5px
   }

      .tabs a {
         padding: 12px 10px;
         font-size: 12px
      }

   .tab-note {
      display: none
   }

   .comparison-intro {
      padding: 14px 14px 0
   }

      .comparison-intro p {
         font-size: 11px
      }

   .cards, .glossary, .article-grid {
      grid-template-columns: 1fr
   }

   .services-band {
      padding: 22px;
      display: block
   }

      .services-band a {
         margin-top: 20px
      }

   .footer-main {
      grid-template-columns: 1fr 1fr
   }

      .footer-main > div:first-child {
         grid-column: 1/-1
      }

   .cg-footer {
      padding: 32px 22px
   }

   .footer-bottom {
      display: block
   }

      .footer-bottom span {
         display: block;
         margin: 8px 0
      }

   .content-main {
      padding-bottom: 40px
   }

   .page-heading {
      padding-top: 25px
   }

   .section-top {
      display: block
   }

      .section-top a {
         display: inline-block;
         margin-top: 10px
      }

   .search-label input {
      display: block;
      margin: 8px 0 0;
      width: 100%
   }

   .form-panel {
      padding: 20px
   }
}

@media print {
   .topbar, .cg-footer, .services-band, .filter-drawer, .tabs, .skip {
      display: none
   }

   body {
      background: white
   }

   .content-main, .site-header, main {
      width: 100%
   }

   .pending {
      break-inside: avoid
   }

   .cards, .glossary {
      display: block
   }

      .resource-card, .glossary article {
         break-inside: avoid
      }

   .comparison-table {
      font-size: 8px
   }
}
/* One readable identity/score column on mobile; remaining metrics scroll. */
/*
@media screen and (max-width:799px){
.comparison-table .chart-cell,.comparison-table .chart-header,.comparison-table .filter-column,.comparison-table .index-header,.comparison-table .id-column{display:none!important}
.comparison-table .mobile-column{width:158px;min-width:158px;max-width:158px;position:sticky!important;left:0!important;right:auto!important;z-index:12!important;background:#eef1f6!important}
.comparison-table tbody>tr>td.mobile-cell{padding:6px 8px;line-height:1.2}
.mobile-content{width:141px;height:34px}.mobile-top{height:16px;line-height:16px;gap:6px;margin:0}.mobile-id{width:141px;height:17px;font-size:12px;line-height:17px;overflow:hidden;text-overflow:ellipsis;padding-left:0}.mobile-total{color:#182f58}.mobile-index{color:#515a68}.comparison-table .mobile-checkbox{width:15px;height:15px;flex-basis:15px}.comparison-table thead th.mobile-filter-header .mobile-checkbox{left:13px}.comparison-table thead th.mobile-filter-header .mobile-filter-label{left:36px;font-size:11px}.comparison-table .mobile-column::before{display:none}.topbar nav{flex-wrap:wrap;gap:2px 18px;overflow:visible}.topbar nav a{padding:5px 0}
}*/
@media screen and (max-width:799px) {
   .comparison-table .mobile-column {
      left: auto !important;
      right: 0 !important;
      border-left: 1px solid #bec3cc
   }
}

[hidden] {
   display: none !important
}

/* Final typography and dark-navy palette. Montserrat is bundled in fonts.css. */
:root {
   --accent: #102e59;
   --accent-dark: #10294d;
   --bar: #163862;
   --bar-edge: #0c2447;
   --header-bg: #f0f2f6;
   --header-strong: #e2e7ef;
   --page-bg: #fff;
   --text: #292d35
}

body, h1, h2, h3, h4, p, a, button, input, select, textarea, table, .eyebrow, .card-no, .tag, .pending strong, .step > b, .mobile-total, .mobile-difference {
   font-family: Montserrat,MontserratArial,Arial,sans-serif
}

body {
   font-size: 15px
}

.eyebrow {
   font-size: 10px;
   letter-spacing: .13em
}

.brand {
   font-family: Montserrat,MontserratArial,Arial,sans-serif;
   letter-spacing: -1px;
   font-size: 22px
}

.brand-icon {
   font-family: Arial,sans-serif;
   color: #d8e1ef
}

.topbar {
   background: #252830
}

   .topbar nav a {
      font-size: 12px
   }

.nav-inner {
   gap: 22px
}

.topbar nav {
   gap: 18px
}

.nav-cta {
   font-size: 12px
}

.beta {
   font-size: 8px
}

.button {
   background: #102e59;
   border-color: #102e59
}

   .button:hover {
      background: #0a2040
   }

   .button.secondary {
      background: white;
      color: #102e59
   }

.chart-bar {
   background: #163862
}

.comparison-table .total-cell, .mobile-total {
   color: #102e59
}

.comparison-table th[aria-sort="ascending"], .comparison-table th[aria-sort="descending"] {
   color: #102e59
}

.comparison-table {
   font-size: 11px
}

   .comparison-table .mobile-total, .comparison-table .mobile-difference {
      font-size: 10px;
      letter-spacing: -.4px
   }

.footer-main {
   grid-template-columns: 1.6fr repeat(4,1fr);
   gap: 30px
}

.cg-footer {
   background: #252830
}

.table-wrap {
   max-width: 100%
}

@media(max-width:1200px) {
   .nav-inner {
      flex-wrap: wrap;
      gap: 10px 20px
   }

   .topbar nav {
      order: 3;
      width: 100%;
      margin: 0;
      justify-content: flex-start;
      gap: 24px
   }

   .nav-cta {
      margin-left: auto
   }

   .brand {
      font-size: 22px
   }

   .footer-main {
      gap: 20px
   }
}

@media(max-width:760px) {
   .topbar nav {
      gap: 2px 15px;
      flex-wrap: wrap
   }

      .topbar nav a {
         font-size: 11px
      }

   .footer-main {
      grid-template-columns: 1fr 1fr
   }

      .footer-main > div:first-child {
         grid-column: 1/-1
      }

   .site-header h1 {
      font-size: 29px
   }

   .lede {
      font-size: 13px
   }

   .comparison-intro h2 {
      font-size: 17px
   }

   .comparison-table .mobile-id {
      font-size: 11px
   }

   .nav-inner {
      padding: 14px 16px
   }

   .comparison-table .mobile-column {
      min-width: 158px;
      max-width: 158px
   }

   .meta-table {
      font-size: 12px
   }

      .meta-table th, .meta-table td {
         padding: 10px
      }
}

/* Supplied logo, navy color variant. Embedded to keep the package HTML/CSS/JS only. */
.brand .brand-icon {
   display: inline-block;
   flex: 0 0 48px;
   width: 48px;
   height: 48px;
   margin-right: 10px;
   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMzUwIDExNjUiPgogICA8ZGVmcz4KICAgICAgPG1hc2sgaWQ9InJlYXItY3V0Ij4KICAgICAgICAgPHJlY3Qgd2lkdGg9IjEzNTAiIGhlaWdodD0iMTE2NSIgZmlsbD0id2hpdGUiLz4KICAgICAgICAgPHBhdGggZD0iTTIxNCAyODUgTDgyMiAzNTUgUTkzMyAzNjkgOTMzIDQ4MCBMOTMzIDEwNTUgUTkzMyAxMTY0IDgyNCAxMTUwIEwxOTQgMTA3MSBROTggMTA1OSA5OCA5NTAgTDk4IDM4MyBROTggMjcyIDIxNCAyODVaIiBmaWxsPSJibGFjayIvPgogICAgICA8L21hc2s+CiAgIDwvZGVmcz4KICAgPHBhdGggZmlsbD0id2hpdGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTM2MCwtMjQwbTIxNCAyODUgNjA4IDcwcTExMSAxNCAxMTEgMTI1djU3NXEwIDEwOS0xMDkgOTVsLTYzMC03OXEtOTYtMTItOTYtMTIxdi01NjdxMC0xMTEgMTE2LTk4em0tNCA4OSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bTIzMSAzMSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bTIzMSAzMSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bS00NjIgMTA0IDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptMjMxIDMxIDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptMjMxIDMxIDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptLTQ2MiAxMDQgMTUxIDIwcTIyIDMgMjIgMjR2ODRxMCAyMy0yMyAyMGwtMTUxLTIwcS0yMS0zLTIxLTI1di03OXEwLTI3IDIyLTI0em0yMzEgMzEgMTUxIDIwcTIyIDMgMjIgMjR2ODRxMCAyMy0yMyAyMGwtMTUxLTIwcS0yMS0zLTIxLTI1di03OXEwLTI3IDIyLTI0em0yMzEgMzEgMTUxIDIwcTIyIDMgMjIgMjR2ODRxMCAyMy0yMyAyMGwtMTUxLTIwcS0yMS0zLTIxLTI1di03OXEwLTI3IDIyLTI0em0tNDYyIDEwNCAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bTIzMSAzMSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bTIzMSAzMSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6IiBtYXNrPSJ1cmwoI3JlYXItY3V0KSIvPgogICA8cGF0aCBmaWxsPSJ3aGl0ZSIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJtMjE0IDI4NSA2MDggNzBxMTExIDE0IDExMSAxMjV2NTc1cTAgMTA5LTEwOSA5NWwtNjMwLTc5cS05Ni0xMi05Ni0xMjF2LTU2N3EwLTExMSAxMTYtOTh6bS00IDg5IDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptMjMxIDMxIDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptMjMxIDMxIDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptLTQ2MiAxMDQgMTUxIDIwcTIyIDMgMjIgMjR2ODRxMCAyMy0yMyAyMGwtMTUxLTIwcS0yMS0zLTIxLTI1di03OXEwLTI3IDIyLTI0em0yMzEgMzEgMTUxIDIwcTIyIDMgMjIgMjR2ODRxMCAyMy0yMyAyMGwtMTUxLTIwcS0yMS0zLTIxLTI1di03OXEwLTI3IDIyLTI0em0yMzEgMzEgMTUxIDIwcTIyIDMgMjIgMjR2ODRxMCAyMy0yMyAyMGwtMTUxLTIwcS0yMS0zLTIxLTI1di03OXEwLTI3IDIyLTI0em0tNDYyIDEwNCAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bTIzMSAzMSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bTIzMSAzMSAxNTEgMjBxMjIgMyAyMiAyNHY4NHEwIDIzLTIzIDIwbC0xNTEtMjBxLTIxLTMtMjEtMjV2LTc5cTAtMjcgMjItMjR6bS00NjIgMTA0IDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptMjMxIDMxIDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHptMjMxIDMxIDE1MSAyMHEyMiAzIDIyIDI0djg0cTAgMjMtMjMgMjBsLTE1MS0yMHEtMjEtMy0yMS0yNXYtNzlxMC0yNyAyMi0yNHoiLz4KPC9zdmc+Cg==);
   background-position: center;
   background-size: contain;
   background-repeat: no-repeat;
   font-size: 0;
   line-height: 0
}

.brand .brand-wordmark {
   display: inline-flex;
   align-items: baseline;
   gap: 0;
   line-height: 1.15;
   letter-spacing: -1px;
   font-family: Montserrat,MontserratArial,Arial,sans-serif
}

   .brand .brand-wordmark > span:first-child {
      font-weight: 750
   }

   .brand .brand-wordmark > span:last-child {
      font-weight: 400
   }

.topbar a.brand, .topbar a.brand:visited, .topbar a.brand:hover, .topbar a.brand:focus, .topbar a.brand:active, .cg-footer a.brand, .cg-footer a.brand:visited, .cg-footer a.brand:hover, .cg-footer a.brand:focus, .cg-footer a.brand:active {
   color: #fff;
   text-decoration: none;
   opacity: 1;
   background: transparent
}

.brand .brand-wordmark, .brand:hover .brand-wordmark, .brand:focus .brand-wordmark, .brand .brand-wordmark > span {
   color: inherit;
   transition: none
}

@media(max-width:760px) {
   .brand .brand-icon {
      flex-basis: 40px;
      width: 40px;
      height: 40px;
      margin-right: 7px
   }

   .topbar .brand {
      font-size: 20px
   }
}

/* Lighter rear grid and matching lighter-weight Compare wordmark. */
.brand .brand-wordmark > span:first-child, .brand:hover .brand-wordmark > span:first-child, .brand:focus .brand-wordmark > span:first-child, .brand:active .brand-wordmark > span:first-child {
   font-weight: 400;
   color: #ffffff
}

/* Benchmark-size ruler, adapted from the supplied reference header. */
.header-ruler {
   height: 29px;
   background: linear-gradient(#4a505a,#4a505a) 0 0/100% 1px no-repeat,repeating-linear-gradient(90deg,#c9cdd5 0 1px,transparent 1px 80px) 0 0/100% 10px no-repeat,repeating-linear-gradient(90deg,#69717d 0 1px,transparent 1px 8px) 0 0/100% 5px no-repeat,#30343d
}

.header-ruler-labels {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   width: min(100% - 64px,1616px);
   margin: 0 auto;
   padding: 13px 0 0;
   list-style: none;
   color: #c1c7d0;
   font-family: Montserrat,MontserratArial,Arial,sans-serif;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: .03em;
   line-height: 1;
   font-variant-numeric: tabular-nums
}

   .header-ruler-labels li:last-child {
      color: #fff;
      font-weight: 650
   }

@media(max-width:1000px) {
   .header-ruler-labels {
      width: calc(100% - 40px)
   }
}

@media(max-width:760px) {
   .header-ruler-labels {
      width: calc(100% - 32px);
      font-size: 9px
   }

   .header-ruler {
      height: 28px
   }
}

@media print {
   .header-ruler {
      display: none
   }
}

/* Long-form editorial pages */
.article-page {
   max-width: 1160px
}

.article-heading {
   max-width: 960px
}

   .article-heading h1 {
      max-width: 940px;
      font-size: clamp(30px,4vw,49px);
      line-height: 1.14
   }

   .article-heading .lede {
      max-width: 780px;
      font-size: 18px
   }

.article-meta {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 12px;
   color: var(--muted);
   margin: 22px 0 10px;
   font-variant-numeric: tabular-nums
}

.article-evidence {
   display: inline-block;
   border-left: 3px solid var(--accent);
   padding: 5px 12px;
   background: #f3f5f8;
   color: #173563;
   font-size: 12px;
   margin: 0
}

.article-layout {
   display: grid;
   grid-template-columns: minmax(0,760px) minmax(190px,260px);
   gap: 64px;
   align-items: start;
   padding-bottom: 64px
}

.article-body {
   font-size: 16px;
   line-height: 1.85;
   overflow-wrap: break-word
}

   .article-body > h2 {
      font-size: 25px;
      line-height: 1.3;
      margin: 44px 0 20px;
      scroll-margin-top: 24px
   }

      .article-body > h2:first-child {
         margin-top: 0
      }

   .article-body p {
      margin-bottom: 20px
   }

   .article-body sup {
      line-height: 0;
      font-size: 11px
   }

.evidence-link {
   display: inline-block;
   font-size: 12px
}

.article-aside {
   position: sticky;
   top: 24px;
   max-height: calc(100vh - 48px);
   overflow: auto;
   border-left: 1px solid var(--border);
   padding-left: 24px
}

.article-toc ol {
   list-style: none;
   margin: 14px 0 22px;
   padding: 0
}

.article-toc li {
   margin: 0 0 12px;
   line-height: 1.4
}

.article-toc a {
   font-size: 12px;
   text-decoration: none;
   color: #4b5566
}

   .article-toc a:hover {
      text-decoration: underline;
      color: var(--accent)
   }

.article-toc .back-blog {
   color: var(--accent);
   font-weight: 650
}

.article-table-wrap {
   overflow-x: auto;
   margin: 22px 0 26px;
   border: 1px solid var(--border);
   border-radius: 6px
}

.article-table {
   width: 100%;
   border-collapse: collapse;
   font-size: 12px;
   line-height: 1.55;
   text-align: left
}

   .article-table caption {
      text-align: left;
      font-size: 12px;
      font-weight: 600;
      padding: 14px 16px;
      background: #f3f5f8;
      color: #173563
   }

   .article-table th, .article-table td {
      padding: 12px 14px;
      border-top: 1px solid var(--border);
      vertical-align: top
   }

   .article-table thead {
      background: #f9fafb
   }

   .article-table th {
      font-weight: 650
   }

.article-sources {
   border-top: 2px solid #173563;
   margin-top: 44px;
   padding-top: 12px;
   font-size: 13px;
   line-height: 1.7;
   overflow-wrap: anywhere
}

   .article-sources h2, .article-related h2 {
      font-size: 23px
   }

   .article-sources ol {
      padding-left: 22px;
      margin-bottom: 24px
   }

   .article-sources li {
      padding-left: 4px;
      margin-bottom: 10px;
      scroll-margin-top: 24px
   }

.article-related {
   margin-top: 36px;
   border-top: 1px solid var(--border);
   padding-top: 12px
}

.article-related-link {
   display: block;
   padding: 16px 0;
   border-bottom: 1px solid var(--border);
   text-decoration: none;
   font-weight: 600;
   font-size: 15px
}

   .article-related-link span {
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: var(--muted);
      margin-bottom: 5px;
      font-weight: 500
   }

.blog-intro {
   padding: 22px 26px;
   border: 1px solid var(--border);
   border-left: 3px solid var(--accent);
   margin-bottom: 30px;
   background: #f8f9fb
}

   .blog-intro p:last-child {
      margin-bottom: 0
   }

.blog-cards {
   grid-template-columns: repeat(2,minmax(0,1fr));
   gap: 20px
}

.blog-card {
   display: flex;
   flex-direction: column
}

   .blog-card h2 {
      font-size: 23px;
      line-height: 1.25;
      margin: 14px 0
   }

      .blog-card h2 a {
         text-decoration: none;
         color: var(--text)
      }

         .blog-card h2 a:hover {
            color: var(--accent);
            text-decoration: underline
         }

   .blog-card > p {
      font-size: 14px
   }

   .blog-card .blog-reading {
      font-size: 11px;
      color: var(--muted);
      margin-top: auto;
      margin-bottom: 12px
   }

.blog-read {
   font-size: 13px;
   font-weight: 650;
   align-self: flex-start
}

.blog-follow {
   border-top: 1px solid var(--border);
   margin: 38px 0 52px;
   padding-top: 20px;
   max-width: 850px
}

   .blog-follow h2 {
      font-size: 25px
   }

@media(max-width:1050px) {
   .article-layout {
      gap: 32px;
      grid-template-columns: minmax(0,1fr) 210px
   }

   .article-body {
      font-size: 15px
   }
}

@media(max-width:760px) {
   .article-layout {
      display: flex;
      flex-direction: column;
      gap: 30px
   }

   .article-aside {
      order: -1;
      position: static;
      max-height: none;
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 18px
   }

   .article-toc ol {
      columns: 2;
      column-gap: 20px;
      margin-bottom: 12px
   }

   .article-toc li {
      break-inside: avoid
   }

   .article-layout > div {
      width: 100%;
      min-width: 0
   }

   .article-heading .lede {
      font-size: 16px
   }

   .article-body {
      font-size: 15px;
      line-height: 1.8
   }

      .article-body > h2 {
         font-size: 23px;
         margin-top: 36px
      }

   .blog-cards {
      grid-template-columns: 1fr
   }

   .blog-intro {
      padding: 20px
   }

   .article-table th, .article-table td {
      padding: 10px 8px
   }

   .article-evidence {
      font-size: 11px
   }
}

@media(max-width:380px) {
   .article-toc ol {
      columns: 1
   }

   .article-table {
      font-size: 11px
   }
}

@media print {
   .article-aside, .article-related, .article-meta + .article-evidence, .blog-follow {
      display: none
   }

   .article-layout {
      display: block
   }

   .article-page {
      width: 100%;
      max-width: none
   }

   .article-body {
      font-size: 11pt;
      line-height: 1.5
   }

      .article-body > h2 {
         break-after: avoid
      }

   .article-table-wrap {
      overflow: visible;
      break-inside: avoid
   }

   .article-sources {
      break-before: auto
   }
}

.blog-card h2 a {
   font-size: inherit;
   line-height: inherit;
   font-weight: inherit;
   letter-spacing: inherit
}


/* Semibold emphasis keeps dense Montserrat tables readable. */
table th, table strong, table b, .comparison-table thead tr.range-row th, .comparison-table tbody th[scope="row"], .comparison-table .sort-button, .comparison-table .feature-sort-button, .comparison-table .total-cell, .comparison-table .total-header, .comparison-table .raw-category-summary, .comparison-table .raw-set-summary, .comparison-table .index-cell, .comparison-table .mobile-id, .comparison-table .mobile-filter-label, .comparison-table .cell-title-marker, .meta-table th, .article-table th {
   font-weight: 600 !important
}

.seo-breadcrumb {
   display: flex;
   flex-wrap: wrap;
   gap: 5px 8px;
   font-size: 12px;
   line-height: 1.6;
   color: var(--muted);
   margin-bottom: 24px
}

   .seo-breadcrumb a {
      text-decoration: none
   }

      .seo-breadcrumb a:hover {
         text-decoration: underline
      }

.static-evidence {
   margin: 36px 0;
   padding: 24px;
   border: 1px solid var(--border);
   border-radius: 8px;
   background: #f8f9fb
}

   .static-evidence h2 {
      font-size: 24px;
      margin: 0 0 14px
   }

   .static-evidence p, .crawler-summary {
      font-size: 13px;
      max-width: 1050px
   }

   .static-evidence details {
      margin: 18px 0
   }

   .static-evidence summary {
      cursor: pointer;
      font-weight: 600;
      color: var(--accent);
      padding: 12px 0
   }

   .static-evidence table {
      background: white
   }

   .static-evidence caption {
      text-align: left;
      font-weight: 600;
      padding: 12px 0
   }

   .static-evidence .table-wrap {
      margin: 12px 0
   }

.crawler-summary {
   margin-top: 24px
}

.article-meta {
   flex-wrap: wrap
}

@media(max-width:600px) {
   .static-evidence {
      padding: 16px
   }

      .static-evidence .meta-table {
         font-size: 12px
      }

      .static-evidence th, .static-evidence td {
         padding: 8px
      }

   .seo-breadcrumb {
      font-size: 11px
   }
}

/* Shared navy header and benchmark chart color. */
.topbar {
   background: #0a284d;
   border-bottom-color: #0a284d
}

.header-ruler {
   background-color: #0a284d
}

.comparison-table tbody tr:not(.is-unknown) .chart-bar {
   background: #0a284d;
   border-color: #0a284d
}

/* Readable labels above headings and article cards. */
.eyebrow, .card-no {
   font-family: Montserrat,MontserratArial,Arial,sans-serif;
   font-size: 13px;
   font-weight: 500;
   font-style: normal;
   font-stretch: normal;
   line-height: 1.65;
   letter-spacing: .06em;
   text-transform: uppercase
}

.eyebrow {
   margin-bottom: 12px
}

.card-no {
   display: block
}

@media(max-width:600px) {
   .eyebrow, .card-no {
      font-size: 12px;
      line-height: 1.65;
      letter-spacing: .05em
   }
}

/* Semantic FAQ headings retain the existing disclosure layout. */
.faq-item summary h2 {
   display: inline;
   margin: 0;
   font: inherit;
   letter-spacing: normal;
   line-height: inherit
}

.prose h3 {
   margin-top: 28px;
   line-height: 1.35
}

/* Compact sticky navigation; table overlays share the measured menu offset. */
:root {
   --sticky-nav-height: 0px
}

@media screen {
   .has-sticky-nav .topbar {
      position: sticky;
      top: 0;
      z-index: 2000;
      background: transparent;
      border: 0;
      pointer-events: none
   }

   .topbar .nav-inner {
      background: #0a284d;
      pointer-events: auto;
      max-width: none;
      transition: padding .22s ease,gap .22s ease
   }

   .topbar .brand-icon {
      transition: width .22s ease,height .22s ease,flex-basis .22s ease
   }

   .topbar .brand {
      transition: font-size .22s ease
   }

   .topbar.is-compact .nav-inner {
      padding-top: 6px;
      padding-bottom: 6px
   }

   .topbar.is-compact .brand-icon {
      width: 28px;
      height: 28px;
      flex-basis: 28px
   }

   .topbar.is-compact .brand {
      font-size: 17px
   }

   .topbar.is-compact .nav-cta {
      padding-top: 5px;
      padding-bottom: 5px
   }

   .topbar.is-measuring * {
      transition: none !important
   }

   .comparison-sticky-header {
      display: none !important;
      top: var(--sticky-nav-height) !important;
      z-index: 1500 !important
   }

   .has-sticky-grid-head .comparison-sticky-header {
      display: block !important
   }

   .article-aside {
      top: calc(var(--sticky-nav-height) + 20px);
      max-height: calc(100vh - var(--sticky-nav-height) - 40px)
   }

   html {
      scroll-padding-top: calc(var(--sticky-nav-height) + 16px)
   }

   [id] {
      scroll-margin-top: calc(var(--sticky-nav-height) + 16px)
   }
}

.comparison-table .is-negative-total, .comparison-table .mobile-total.is-negative-total {
   color: #b42318 !important
}

.contact-panel {
   max-width: 820px
}

@media screen and (max-width:1150px) {
   .topbar nav {
      flex-wrap: wrap;
      overflow: visible;
      gap: 2px 18px;
      min-width: 0
   }

      .topbar nav a {
         white-space: nowrap;
         flex-shrink: 0
      }

   .topbar.is-compact .nav-inner {
      gap: 3px 16px
   }

   .topbar.is-compact nav a {
      padding-top: 3px;
      padding-bottom: 3px
   }
}

@media(prefers-reduced-motion:reduce) {
   .topbar * {
      transition: none !important
   }
}

/* Wrap navigation instead of creating a horizontal menu scroller. */
@media screen and (max-width:1150px) {
   .topbar nav {
      flex-wrap: wrap;
      overflow: visible
   }

      .topbar nav a {
         font-size: 12px
      }

   .topbar.is-compact nav {
      row-gap: 2px
   }
}

@media screen and (max-width:360px) {
   .topbar .nav-inner {
      column-gap: 8px;
      padding-inline: 12px
   }

   .topbar .nav-cta {
      font-size: 10px;
      padding-inline: 7px
   }

   .topbar .brand {
      font-size: 18px
   }

   .topbar .brand-icon {
      width: 32px;
      height: 32px;
      flex-basis: 32px
   }
}

/* Use the existing content width and service box design. */
.methodology-page > .prose {
   max-width: none
}

.services-band > div {
   min-width: 0
}

.services-band > .button {
   flex-shrink: 0
}

.services-band p + p {
   margin-top: 12px
}

.services-band p a {
   margin-top: 0
}

.comparison-intro .benchmark-context {
   font-size: 12px;
   line-height: 1.7;
   margin-top: 10px
}

/* Usage explanation follows the existing resource-card layout. */
.usage-guide > p{color:var(--muted,#4a515e);max-width:100%;margin:0 0 24px}
.usage-guide .note{margin-top:24px}


/* Mobile: always use the compact header, independently of scroll state. */
@media screen and (max-width:760px) {
   .topbar .nav-inner,
   .topbar.is-compact .nav-inner {
      padding-top: 6px;
      padding-bottom: 6px;
      gap: 3px 16px;
      transition: none;
   }

   .topbar .brand-icon,
   .topbar.is-compact .brand-icon {
      width: 28px;
      height: 28px;
      flex-basis: 28px;
      transition: none;
   }

   .topbar .brand,
   .topbar.is-compact .brand {
      font-size: 17px;
      transition: none;
   }

   .topbar .nav-cta,
   .topbar.is-compact .nav-cta {
      padding-top: 5px;
      padding-bottom: 5px;
      transition: none;
   }

   .topbar nav,
   .topbar.is-compact nav {
      row-gap: 2px;
   }

   .topbar nav a,
   .topbar.is-compact nav a {
      padding-top: 3px;
      padding-bottom: 3px;
   }
}

@media screen and (max-width:360px) {
   .topbar .nav-inner,
   .topbar.is-compact .nav-inner {
      column-gap: 8px;
   }
}


/* Initial layout and measurement must not animate.
   Scroll transitions are enabled only after initialization. */
@media screen {
   html:not(.nav-transitions-ready) .topbar,
   html:not(.nav-transitions-ready) .topbar *,
   .topbar.is-measuring,
   .topbar.is-measuring * {
      transition: none !important;
   }

   /* Match the border geometry before and after JS initialization. */
   .topbar {
      border: 0;
   }
}