/* Scoped to the English Bracket Maker comparison. */
.bracket-matrix-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; margin: 24px 0 18px; }
.bracket-matrix-scroll:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.bracket-matrix { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.bracket-label-col { width: 40%; }
.bracket-matrix caption { padding: 14px 16px; text-align: left; color: var(--muted); font-size: 12px; }
.bracket-matrix th, .bracket-matrix td { padding: 10px 12px; vertical-align: middle; border-top: 1px solid var(--border); overflow-wrap: break-word; }
.bracket-matrix thead th { color: var(--text); background: var(--surface); font-size: 15px; padding: 13px 10px; text-align: center; }
.bracket-matrix .bracket-plan-head th { font-size: 12px; color: var(--muted); padding: 7px 10px; }
.bracket-plan-label { display: block; margin-top: 4px; color: var(--teal); font-size: 12px; font-weight: 500; }
.bracket-matrix tbody th { padding-left: 28px; text-align: left; font-weight: 500; color: var(--text); }
.bracket-matrix td { text-align: center; }
.bracket-matrix td:last-child, .bracket-matrix #elox-plan { background: rgba(61, 212, 181, .055); }
.bracket-matrix .bracket-category th { padding: 12px 14px; background: var(--surface); color: var(--teal); font-size: 12px; font-weight: 700; }
.bracket-feature-mark { display: inline-block; font-size: 22px; line-height: 1.2; font-weight: 700; }
.bracket-feature-yes { color: #70e2ad; }
.bracket-feature-limited { color: #ffd276; }
.bracket-feature-no, .bracket-feature-unknown { color: #a9b0bf; }
.bracket-matrix .bracket-feature-note, .bracket-row-note { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 400; }
.bracket-feature-note a { display: inline-block; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; min-height: 24px; padding: 2px 0; color: inherit; text-decoration: none; }
.bracket-matrix sup { margin-left: 2px; font-size: 9px; }
.bracket-comparison-page .bracket-matrix-key { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12px; margin: 0 0 16px; }
.bracket-matrix-key > span { display: inline-flex; align-items: center; gap: 7px; }
.bracket-matrix-key .bracket-feature-mark { font-size: 17px; }
.bracket-comparison-page .bracket-matrix-notes { margin: 0 0 16px; padding-left: 22px; }
.bracket-comparison-page .bracket-matrix-notes li { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 8px; padding-left: 2px; scroll-margin-top: 110px; }
.bracket-comparison-page .bracket-walkthrough { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 26px 0 24px; padding: 0; list-style: none; }
.bracket-walkthrough li { min-width: 0; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); text-align: center; }
.bracket-walkthrough li > p { flex: 1; }
.bracket-walkthrough .resource-shot { margin: 24px auto 0; }
.bracket-comparison-page .resource-shot img { border-radius: 0; width: 100%; height: auto; }
@media (max-width: 520px) {
 .bracket-matrix { font-size: 12px; }
 .bracket-label-col { width: 38%; }
 .bracket-matrix th, .bracket-matrix td { padding: 10px 4px; }
 .bracket-matrix tbody th { padding-left: 18px; }
 .bracket-matrix thead th { font-size: 12px; padding: 10px 4px; }
 .bracket-matrix .bracket-plan-head th { font-size: 11px; padding: 7px 4px; }
 .bracket-matrix .bracket-category th { padding: 11px 9px; }
 .bracket-matrix caption { padding: 12px 9px; font-size: 11px; }
 .bracket-feature-mark { font-size: 21px; }
 .bracket-matrix .bracket-feature-note, .bracket-row-note { font-size: 12px; line-height: 1.5; }
 .bracket-plan-label { font-size: 10px; }
 .bracket-comparison-page .bracket-matrix-key { gap: 7px 14px; font-size: 11px; }
 .bracket-comparison-page .bracket-walkthrough { grid-template-columns: minmax(0, 1fr); gap: 14px; }
 .bracket-walkthrough .resource-shot { width: min(240px, 100%); }
}

/* Short, literal values for cost and stage examples. */
.bracket-price { display: block; font-size: 14px; }
.bracket-comparison-page .bracket-flow-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0; list-style: none; }
.bracket-comparison-page .bracket-flow-list li { margin: 0; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; font-size: 14px; }
@media (max-width: 520px) {
 .bracket-price { font-size: 12px; }
 .bracket-comparison-page .bracket-flow-list { grid-template-columns: minmax(0, 1fr); }
}


/* Optional verification detail, kept off the main reading path. */
.bracket-source-details { margin: 12px 0 0; border-top: 1px solid var(--border); }
.bracket-source-details > summary { display: list-item; padding: 14px 0; min-height: 44px; color: var(--muted); font-size: 12px; line-height: 1.5; cursor: pointer; }
.bracket-source-details > summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.bracket-source-details > div { padding: 0 0 8px; }
.bracket-comparison-page .bracket-price-source { margin-bottom: 0; }

/* Keep material conditions readable in this selected comparison. */
.bracket-comparison-page .reading-body .reading-footnote { color: var(--muted); }

/* Note numbers sit outside the centered value without shifting its baseline. */
.bracket-matrix .bracket-noted-value { display: inline-block; position: relative; color: inherit; text-decoration: none; }
.bracket-matrix .bracket-noted-value sup { position: absolute; left: 100%; top: -.3em; margin-left: 3px; font-size: 10px; line-height: 1; color: var(--muted); }
.bracket-matrix .bracket-noted-value:focus-visible { outline: 2px solid var(--teal); outline-offset: 5px; border-radius: 2px; }
#comparison-note-free, #comparison-note-multi { scroll-margin-top: 110px; }