.compare-hero {
  background: #FFFFFF;
}
.profiles,
.matrix-section,
.footprint-section,
.scenario-section {
  padding: 7.5rem 0;
}
.profile-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid #D7DCD9;
  border-left: 1px solid #D7DCD9;
}
.profile-list article {
  display: flex;
  flex-direction: column;
  min-height: 390px;
  padding: 3rem;
  border-right: 1px solid #D7DCD9;
  border-bottom: 1px solid #D7DCD9;
  background: #FFFFFF;
}
.profile-list h3 {
  margin-top: 3rem;
  font-size: 1.5rem;
}
.profile-list p {
  margin-top: 1.25rem;
  color: #5B6872;
}
.profile-list a {
  margin-top: auto;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
}
.profile-list .profile-low,
.profile-list .profile-basic,
.profile-list .profile-caution,
.profile-list .profile-primary {
  position: relative;
}
.profile-list .profile-low,
.profile-list .profile-basic {
  border-top: 4px solid #E49A24;
}
.profile-list .profile-caution {
  position: relative;
  border-top: 4px solid #C7474F;
}
.profile-list .profile-status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.25rem 0.5rem;
  background: #E49A24;
  color: #FFFFFF;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.3;
  text-transform: uppercase;
}
.profile-list .profile-caution .profile-status {
  background: #C7474F;
  color: #FFFFFF;
}
.profile-list .profile-primary {
  position: relative;
  border-top: 4px solid #087D49;
  background: #E4F3EA;
}
.profile-list .profile-primary .profile-status {
  background: #087D49;
  color: #FFFFFF;
}
.matrix-section {
  background: #FFFFFF;
}
.matrix-legend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}
.matrix-legend > span {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #5B6872;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.58rem;
  text-transform: uppercase;
}
.state {
  width: 9px;
  height: 9px;
  box-sizing: border-box;
}
.state.built {
  background: #18A66A;
}
.state.helper {
  border: 2px solid #18A66A;
}
.state.owned {
  background: #C7474F;
}
.comparison-table-wrap {
  max-width: 100%;
  border: 1px solid #D7DCD9;
  overscroll-behavior-inline: contain;
}
.comparison-table {
  width: 100%;
  min-width: 1100px;
  border-collapse: collapse;
  table-layout: fixed;
  background: #FFFFFF;
  font-size: 0.76rem;
}
.comparison-table th,
.comparison-table td {
  padding: 0.9rem;
  border-right: 1px solid #D7DCD9;
  border-bottom: 1px solid #D7DCD9;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
}
.comparison-table thead th {
  background: #13212B;
  color: #FFFFFF;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comparison-table thead .project-home-link {
  display: inline-block;
  margin-left: 0.25rem;
  color: #E49A24;
  font-size: 0.8rem;
  line-height: 1;
  text-decoration: none;
  vertical-align: -0.04em;
}
.comparison-table thead .project-home-link:hover,
.comparison-table thead .project-home-link:focus-visible {
  color: #FFFFFF;
}
.comparison-table thead th:first-child {
  width: 19%;
  background: #0B171E;
}
.comparison-table tbody th {
  background: #f4f5f0;
  color: #13212B;
  font-weight: 600;
}
.comparison-table tbody td {
  position: relative;
  padding-left: 1.9rem;
  color: #5B6872;
}
.comparison-table tbody td::before {
  content: "";
  position: absolute;
  top: 1.12rem;
  left: 0.75rem;
  width: 9px;
  height: 9px;
  box-sizing: border-box;
}
.comparison-table td[data-state="built"]::before {
  background: #18A66A;
}
.comparison-table td[data-state="helper"]::before {
  border: 2px solid #18A66A;
}
.comparison-table td[data-state="owned"]::before {
  background: #C7474F;
}
.comparison-table td:last-child {
  background: rgba(228, 242, 242, 0.45);
}
.comparison-table tbody tr:hover th,
.comparison-table tbody tr:hover td {
  background: #FFF2D8;
}
.comparison-table code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.95em;
}
.matrix-note {
  max-width: 920px;
  margin: 1.9rem 0 0;
  padding: 1.25rem 1.9rem;
  border: 1px solid #D7DCD9;
  border-left: 3px solid #C7474F;
  background: #F6F7F3;
  color: #5B6872;
  font-size: 0.84rem;
}
.footprint-section {
  background: #F6F7F3;
}
.dependency-list {
  border-top: 1px solid #D7DCD9;
  border-left: 1px solid #D7DCD9;
}
.dependency-list article {
  display: grid;
  grid-template-columns: 210px minmax(320px, 1fr) minmax(260px, 0.9fr);
  align-items: center;
  gap: 1.9rem;
  padding: 1.9rem;
  border-right: 1px solid #D7DCD9;
  border-bottom: 1px solid #D7DCD9;
  background: #FFFFFF;
}
.dependency-name > span,
.fit-library > span {
  color: #87939B;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.dependency-name h3 {
  margin-top: 0.55rem;
  font-size: 1.15rem;
}
.dependency-parts {
  margin: 0;
  padding-left: 1rem;
}
.dependency-parts li {
  padding: 0.12rem 0;
  color: #87939B;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.02em;
  line-height: 1.45;
  text-transform: uppercase;
}
.dependency-parts li::marker {
  color: #34434C;
  font-size: 0.7em;
}
.dependency-parts .dependency-base {
  color: #87939B;
  font-weight: 400;
}
.dependency-parts .dependency-base::marker {
  color: #87939B;
}
.dependency-parts .dependency-focus {
  color: #13212B;
  font-weight: 700;
}
.dependency-parts .dependency-focus::marker {
  color: #13212B;
}
.dependency-parts .dependency-optional {
  color: #05616B;
  font-weight: 600;
}
.dependency-parts .dependency-optional::marker {
  color: #05616B;
}
.dependency-primary .dependency-parts .dependency-focus {
  color: #087D49;
}
.dependency-primary .dependency-parts .dependency-focus::marker {
  color: #087D49;
}
.dependency-list article > p {
  margin: 0;
  color: #5B6872;
  font-size: 0.82rem;
}
.dependency-list .dependency-primary {
  border-left: 4px solid #087E8B;
  background: rgba(228, 242, 242, 0.45);
}
.scenario-section {
  background: #FFFFFF;
}
.fit-list {
  border-top: 1px solid #D7DCD9;
  border-left: 1px solid #D7DCD9;
}
.fit-list article {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 3rem;
  padding: 3rem;
  border-right: 1px solid #D7DCD9;
  border-bottom: 1px solid #D7DCD9;
  background: #F6F7F3;
}
.fit-library strong {
  display: block;
  margin-top: 0.55rem;
  color: #13212B;
  font-size: 1rem;
}
.fit-list h3 {
  font-size: 1.5rem;
}
.fit-list p {
  max-width: 800px;
  margin: 0.85rem 0 0;
  color: #5B6872;
}
.fit-list .fit-primary {
  border-left: 4px solid #087E8B;
  background: #E4F2F2;
}
.fit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.9rem;
  margin-top: 1.25rem;
}
.fit-actions a {
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
}
.scope-band {
  padding: 4.8rem 0;
  background: #13212B;
  color: #C7D2D4;
}
.scope-grid {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  align-items: start;
  gap: 3rem;
}
.scope-grid h2 {
  color: #FFFFFF;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}
.scope-grid > p:last-child {
  color: #9FB0B4;
}
@media (max-width: 1000px) {
  .profile-list {
    grid-template-columns: 1fr 1fr;
  }
  .profile-list article {
    min-height: 320px;
  }
  .dependency-list article {
    grid-template-columns: 180px minmax(0, 1fr);
  }
  .dependency-list article > p {
    grid-column: 2;
  }
  .scope-grid {
    grid-template-columns: 1fr 1fr;
  }
  .scope-grid .eyebrow {
    grid-column-start: 1;
    grid-column-end: -1;
  }
}
@media (min-width: 1161px) {
  .comparison-table thead th {
    position: sticky;
    top: 68px;
    z-index: 2;
  }
}
@media (max-width: 1160px) {
  .comparison-table-wrap {
    overflow-x: auto;
  }
}
@media (max-width: 760px) {
  .profile-list {
    grid-template-columns: 1fr;
  }
  .profile-list article {
    min-height: 0;
  }
  .dependency-list article,
  .fit-list article {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding: 1.9rem 1.25rem;
  }
  .dependency-list article > p {
    grid-column: 1;
  }
  .fit-library {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #D7DCD9;
  }
  .scope-grid {
    grid-template-columns: 1fr;
  }
  .scope-grid .eyebrow {
    grid-column: 1;
  }
}