/* Shared comparison styles stay scoped to the public guide and store overlay. */
.mb-page { margin: 0 auto; max-width: 1632px; padding: 20px 24px 40px; }
.mb-panel { background: #191d24; border: 1px solid #776044; border-radius: 10px; box-shadow: 0 22px 70px #0009; color: #f5f7fb; overflow: hidden; }
.mb-heading { align-items: center; background: #20242c; border-bottom: 1px solid #675438; display: flex; gap: 20px; justify-content: center; min-height: 82px; padding: 14px 60px; position: relative; }
.mb-heading img { height: 50px; object-fit: contain; width: 155px; }
.mb-heading h1, .mb-heading h2 { color: #fff3d5; font-family: 'PT Sans Caption', sans-serif; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0; text-shadow: none; text-transform: none; }
.mb-guide { display: flex; flex-direction: column; font-family: Roboto, sans-serif; min-height: 0; }
.mb-page .mb-guide { max-height: 80vh; }
.mb-panel .mb-legend { align-items: center; border-bottom: 1px solid #414752; color: #d8dde7; display: flex; flex-wrap: wrap; font: 13px/1.5 Roboto, sans-serif; gap: 6px 18px; padding: 10px 18px; }
.mb-legend > span { align-items: center; display: inline-flex; gap: 5px; line-height: 1.5; }
.mb-legend b { color: #ffd477; font-size: 20px; line-height: 1; }
.mb-legend .mb-check { color: #ffd477; display: inline-flex; }
.mb-hint { margin-left: auto; }
.mb-swipe { color: #ffd477; display: none; }
.mb-scroll { min-height: 0; overflow: auto; position: relative; overscroll-behavior: contain; scrollbar-color: #b99455 #20242c; scrollbar-width: thin; }
.mb-scroll:focus-visible { outline: 2px solid #ffd477; outline-offset: -2px; }
.mb-panel .mb-matrix { border-collapse: separate; border-spacing: 0; color: #f5f7fb; font: 15px/1.5 Roboto, sans-serif; margin: 0; table-layout: fixed; width: 1582px; min-width: 1582px; }
.mb-feature-col { width: 230px; }
.mb-rank-col { width: 104px; }
.mb-matrix th, .mb-matrix td { border-bottom: 1px solid #ffffff0c; box-sizing: border-box; line-height: 1.5; text-shadow: none; }
.mb-matrix thead th { background: #222833; border-bottom: 1px solid #86704c; height: 160px; padding: 12px 4px; position: sticky; text-align: center; top: 0; vertical-align: middle; z-index: 3; }
.mb-matrix thead .mb-feature-head { color: #fff3d5; font-size: 18px; left: 0; padding-left: 18px; text-align: left; z-index: 5; }
.mb-rank-icon { background: #141820; border: 1px solid color-mix(in srgb, var(--rank-color) 45%, #333b48); border-radius: 10px; display: block; height: 88px; margin: 0 auto 8px; position: relative; width: 88px; }
.mb-rank-icon-premium { background: #59616a; }
.mb-rank-icon img { image-rendering: pixelated; left: var(--icon-left); max-width: none; object-fit: contain; position: absolute; top: var(--icon-top); }
.mb-rank-icon-premium img { image-rendering: auto; }
.mb-panel .mb-rank-name { color: var(--rank-color); display: block; font-size: 14px; font-weight: 700; line-height: 1.4; min-height: 40px; text-shadow: none; }
.mb-matrix .mb-vip { background: #30291f; border-left: 1px solid #b9945570; }
.mb-matrix thead .mb-vip { background: #373023; }
.mb-category-row th { background: #313949; color: #ffdb8b; font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 11px 18px; text-align: left; text-transform: uppercase; }
.mb-category-row th > span { display: block; left: 18px; line-height: 1.5; position: sticky; width: 320px; }
.mb-category-row i { color: #ffdb8b; margin-right: 7px; width: 16px; }
.mb-matrix .mb-feature { background: #20252e; border-right: 1px solid #424956; left: 0; padding: 14px 14px 14px 18px; position: sticky; text-align: left; vertical-align: middle; z-index: 2; }
.mb-matrix tr[data-benefit]:nth-child(odd) .mb-feature { background: #252b35; }
.mb-matrix tr[data-benefit]:nth-child(odd) td { background-color: #ffffff04; }
.mb-matrix tr[data-benefit]:hover td { background-color: #ffffff08; }
.mb-panel .mb-rule summary { align-items: baseline; color: #f5f7fb; cursor: pointer; display: flex; font: 500 15px/1.5 Roboto, sans-serif; gap: 8px; justify-content: space-between; list-style: none; }
.mb-rule summary::-webkit-details-marker { display: none; }
.mb-rule summary > span { color: #c2cad9; flex-shrink: 0; font-size: 14px; line-height: 1.5; }
.mb-rule summary:hover, .mb-rule[open] summary { color: #ffdb8b; }
.mb-rule summary:focus-visible, .mb-footnotes summary:focus-visible { outline: 2px solid #ffd477; outline-offset: 4px; }
.mb-panel .mb-rule div { color: #d7deeb; font: 13px/1.6 Roboto, sans-serif; padding-top: 10px; }
.mb-panel .mb-rule p, .mb-panel .mb-footnotes p { color: inherit; font: inherit; margin: 0 0 8px; text-shadow: none; }
.mb-matrix .mb-value { height: 62px; padding: 12px 6px; text-align: center; vertical-align: middle; }
.mb-cell-label { color: #f5f7fb; font-size: 15px; font-weight: 700; line-height: 1.5; white-space: pre-line; }
.mb-panel .mb-value small { color: #c9d1df; display: block; font: 12px/1.5 Roboto, sans-serif; margin-top: 3px; }
.mb-value.mb-unavailable .mb-cell-label { color: #9da8ba; font-size: 20px; font-weight: 400; }
.mb-value .mb-check { color: var(--rank-color); display: inline-flex; }
.mb-check-mark { display: block; height: 24px; width: 24px; }
.mb-legend .mb-check-mark { height: 19px; width: 19px; }
.mb-value .mb-unlimited { color: var(--rank-color); font-size: 25px; }
.mb-panel .mb-row-note { color: #ccd4e2; display: block; font: 12px/1.5 Roboto, sans-serif; margin-top: 4px; }
.mb-panel .mb-footnotes { border-top: 1px solid #69583e; color: #d7deeb; font: 13px/1.65 Roboto, sans-serif; padding: 16px 18px; }
.mb-footnotes summary { color: #ffdb8b; cursor: pointer; font-weight: 600; line-height: 1.5; }
.mb-footnotes ul { margin: 12px 0; padding-left: 20px; }
.mb-panel .mb-footnotes p { margin: 12px 0 0; }
.mb-footnotes li { line-height: 1.65; margin-bottom: 7px; }
.mb-modal .modal-dialog { margin: 18px auto; max-width: 1584px; min-height: calc(100% - 36px); width: calc(100% - 40px); }
.mb-modal .modal-content { max-height: calc(100vh - 36px); }
.mb-modal .modal-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0; }
.mb-modal .mb-heading { flex-shrink: 0; }
.mb-modal .mb-close { align-items: center; background: #ffffff08; border: 1px solid #ffffff30; border-radius: 5px; color: #eef2fa; display: flex; font: 28px/1 Roboto, sans-serif; height: 38px; justify-content: center; padding: 0; position: absolute; right: 16px; top: 22px; width: 38px; }
.mb-modal .mb-close:hover { background: #ffffff18; color: #fff; }
.mb-modal .mb-close:focus-visible { outline: 2px solid #ffd477; outline-offset: 3px; }
.mb-sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
#item-store-page .store-rank-teaser { align-items: center; background: linear-gradient(180deg, #70552e, #362716); border: 1px solid #bb9554; border-radius: 3px; box-shadow: inset 0 1px 0 #e4c78a66, inset 0 -2px 0 #160e07aa, 0 2px 4px #0004; color: #ffdf8d; display: inline-flex; gap: 10px; margin-bottom: 16px; min-height: 44px; padding: 12px 18px; text-decoration: none; }
#item-store-page .store-rank-teaser > i { color: #ffdf8d; font-size: 20px; }
#item-store-page .store-rank-teaser strong { color: #ffdf8d; font-size: 15px; font-weight: 700; }
#item-store-page .store-rank-teaser:hover { background: linear-gradient(180deg, #7b5d30, #49331b); border-color: #e1bb72; }
#item-store-page .store-rank-teaser:focus-visible { outline: 2px solid #ffd477; outline-offset: 3px; }
@media (max-width: 1630px) { .mb-swipe { display: inline; } }
@media (max-width: 767px) {
    .mb-page { padding: 44px 10px 30px; }
    .mb-heading { flex-direction: column; gap: 5px; min-height: 100px; padding: 12px 48px; }
    .mb-heading img { height: 38px; width: 118px; }
    .mb-heading h1, .mb-heading h2 { font-size: 20px; }
    .mb-panel .mb-legend { column-gap: 12px; padding: 8px 12px; }
    .mb-legend .mb-hint { display: block; margin-left: 0; width: 100%; }
    .mb-hint .mb-swipe { display: block; }
    .mb-feature-col { width: 160px; }
    .mb-panel .mb-matrix { width: 1512px; min-width: 1512px; }
    .mb-matrix .mb-feature, .mb-matrix thead .mb-feature-head { padding-left: 12px; padding-right: 10px; }
    .mb-category-row th { padding-left: 12px; }
    .mb-category-row th > span { left: 12px; }
    .mb-panel .mb-rule summary { font-size: 14px; gap: 5px; }
    .mb-modal .modal-dialog { margin: 8px auto; min-height: calc(100% - 16px); width: calc(100% - 16px); }
    .mb-modal .modal-content { max-height: calc(100vh - 16px); }
    .mb-modal .mb-close { right: 10px; top: 12px; }
    #item-store-page .store-rank-teaser { gap: 9px; padding: 12px; }
    #item-store-page .store-rank-teaser strong { font-size: 13px; }
}