.fsc-compare { max-width: 100%; margin: 2rem 0; color: #172337; font: inherit; }
.fsc-compare * { box-sizing: border-box; }
.fsc-compare h2 { margin: 0 0 .75rem; }
.fsc-compare__intro, .fsc-compare__source { max-width: 76ch; color: #43536a; }
.fsc-compare__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 1.2rem 0 .7rem; }
.fsc-compare__card { width: 100%; max-width: 420px; min-width: 0; padding: 16px; border: 1px solid #d9e2eb; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(16, 36, 61, .08); }
.fsc-compare__card-head { display: flex; align-items: center; gap: 12px; min-height: 64px; margin-bottom: 12px; }
.fsc-compare__card-head h3 { margin: 0; font-size: 1rem; line-height: 1.25; }
.fsc-compare__photo { display: block; flex: 0 0 60px; width: 60px; height: 60px; }
.fsc-compare__photo img { display: block; width: 60px; height: 60px; object-fit: contain; }
.fsc-compare__bars { display: grid; gap: 8px; }
.fsc-compare__bar-row { display: grid; grid-template-columns: minmax(95px, 42%) 1fr; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; line-height: 1.2; }
.fsc-compare__track { display: block; height: 11px; overflow: hidden; border-radius: 20px; background: #dfe3e7; }
.fsc-compare__fill { display: block; height: 100%; border-radius: inherit; background: #0068ad; }
.fsc-compare__card--multi .fsc-compare__fill { background: #009b45; }
.fsc-compare__metrics { margin: 0 0 1.2rem; max-width: 76ch; }
.fsc-compare__metrics summary { cursor: pointer; color: #1457a5; font-weight: 700; }
.fsc-compare__metrics dl { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .8rem; margin: .7rem 0; }
.fsc-compare__metrics dt { font-weight: 700; }
.fsc-compare__metrics dd { margin: 0; }
.fsc-compare__hint { display: none; margin: 0 0 .5rem; font-size: .875rem; color: #43536a; }
.fsc-compare__scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d9e2eb; border-radius: 8px; }
.fsc-compare__scroll:focus-visible { outline: 3px solid #e9a400; outline-offset: 3px; }
.fsc-compare table { width: 100%; min-width: 740px; border-collapse: separate; border-spacing: 0; table-layout: fixed; margin: 0; }
.fsc-compare th, .fsc-compare td { padding: 14px 16px; border: 0; border-bottom: 1px solid #d9e2eb; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.fsc-compare thead th { background: #edf3f8; font-weight: 700; }
.fsc-compare thead th:first-child, .fsc-compare tbody th { width: 145px; }
.fsc-compare tbody th { background: #f8fafc; font-weight: 700; }
.fsc-compare tbody tr:last-child > * { border-bottom: 0; }
.fsc-compare a { color: #1457a5; text-decoration: underline; text-underline-offset: 2px; }
.fsc-compare a:focus-visible { outline: 3px solid #e9a400; outline-offset: 3px; }
.fsc-compare__links a { display: inline-flex; min-height: 44px; align-items: center; padding: 8px 12px; border-radius: 4px; background: #1457a5; color: #fff; text-decoration: none; font-weight: 700; }
.fsc-compare__links a:hover { background: #0d407d; color: #fff; }
.fsc-compare__variants summary { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; color: #1457a5; font-weight: 700; }
.fsc-compare__variants summary:focus-visible { outline: 3px solid #e9a400; outline-offset: 3px; }
.fsc-compare__variants ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.fsc-compare__variants li + li { margin-top: .5rem; }
.fsc-compare__variants a, .fsc-compare__links .fsc-compare__variants a { display: inline; min-height: 0; padding: 0; border-radius: 0; background: none; color: #1457a5; text-decoration: underline; font-weight: 400; }
.fsc-compare__variants a:hover, .fsc-compare__links .fsc-compare__variants a:hover { background: none; color: #0d407d; }
.fsc-compare__source { font-size: .9rem; margin-top: .75rem; }
@media (max-width: 760px) {
  .fsc-compare__cards { grid-template-columns: 1fr; }
  .fsc-compare__card { padding: 14px; }
  .fsc-compare__hint { display: block; }
  .fsc-compare table { width: max-content; min-width: 740px; }
  .fsc-compare thead th:first-child, .fsc-compare tbody th { position: sticky; left: 0; z-index: 1; width: 125px; box-shadow: 1px 0 #d9e2eb; }
  .fsc-compare thead th:first-child { z-index: 2; }
  .fsc-compare thead th:not(:first-child), .fsc-compare td { width: 205px; }
}