.sos-page { overflow:hidden; }
.sos-hero { display:grid; grid-template-columns:1fr 330px; gap:80px; align-items:end; padding-top:92px; padding-bottom:92px; border-bottom:1px solid var(--line); }
.sos-hero h1 { font-size:clamp(54px, 7vw, 92px); }
.sos-lede { max-width:470px; margin:28px 0 0; color:var(--muted); font-size:17px; line-height:1.55; }
.contents { border-top:2px solid var(--green); padding-top:16px; display:grid; gap:0; }
.contents p { margin:0 0 12px; color:var(--green); font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.contents a { display:flex; gap:16px; border-top:1px solid var(--line); padding:12px 0; color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:.4px; }
.contents a:hover { color:var(--green); }
.contents a span { color:var(--ink); font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; }
.sos-section { display:grid; grid-template-columns:120px 1fr; gap:36px; padding-top:92px; padding-bottom:92px; border-bottom:1px solid var(--line); }
.section-number { color:var(--green); font:11px var(--mono); letter-spacing:1px; }
.sos-section h2 { font-size:clamp(34px, 4vw, 54px); letter-spacing:-2px; }
.placeholder-copy { max-width:670px; min-height:65px; margin:24px 0 0; color:var(--muted); font-size:16px; line-height:1.65; }
.accuracy-section .placeholder-copy { max-width:800px; margin-bottom:0; }
.final-copy { margin-top:30px; }
.calculation-list { margin:4px 0 0; padding-left:30px; color:var(--muted); font-size:16px; line-height:1.65; }
.calculation-list li { padding-left:8px; margin:8px 0; }
.calculation-note { margin-top:22px; }
.section-content { min-width:0; }
.accuracy-cardinals { display:grid; grid-template-columns:minmax(280px, .8fr) minmax(0, 1.5fr); gap:20px; margin-top:38px; align-items:start; }
.accuracy-side-copy, .accuracy-interactive-copy { color:var(--muted); font-size:16px; line-height:1.65; }
.accuracy-side-copy { margin:0; padding:24px; border-top:2px solid var(--green); }
.accuracy-interactive-copy { max-width:none; margin:52px 0 22px; padding:20px 0 0; border-top:2px solid var(--green); }
.accuracy-interactive-copy p { max-width:800px; margin:0 0 18px; }
.accuracy-interactive-copy p:last-child { margin-bottom:0; }
.accuracy-grid { display:grid; grid-template-columns:minmax(280px, .8fr) minmax(0, 1.5fr); gap:20px; margin-top:38px; }
.accuracy-summary, .accuracy-chart { min-width:0; padding:24px; border:1px solid var(--line); background:var(--surface); }
.team-analysis-controls { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.team-analysis-controls label, .grade-controls label { display:grid; gap:5px; color:var(--muted); font:9px var(--mono); letter-spacing:.6px; text-transform:uppercase; }
.team-analysis-controls select, .grade-controls select { min-width:82px; border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:7px 8px; font:12px var(--sans); text-transform:none; }
.accuracy-chart { overflow:hidden; }
.accuracy-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.accuracy-heading h3 { margin:5px 0 4px; font-size:20px; }
.accuracy-team-logo { width:28px; height:28px; margin-right:8px; vertical-align:-7px; object-fit:contain; }
.accuracy-team-abbreviation { margin-right:8px; color:var(--green); font:11px var(--mono); letter-spacing:1px; vertical-align:3px; }
.chart-overline { margin:0; color:var(--green); }
.chart-caption { margin:0; color:var(--muted); font:11px var(--mono); }
.chart-badge { flex:none; padding:5px 7px; color:var(--green); background:var(--soft-green); font:10px var(--mono); }
.accuracy-table { width:100%; margin-top:28px; border-collapse:collapse; font-size:12px; }
.accuracy-table th, .accuracy-table td { padding:10px 5px; border-bottom:1px solid var(--line); text-align:right; }
.accuracy-table th:first-child, .accuracy-table td:first-child { text-align:left; }
.accuracy-table th { color:var(--muted); font:10px var(--mono); text-transform:uppercase; }
.accuracy-chart .accuracy-heading { margin-bottom:12px; }
.grade-panel { margin-top:48px; padding-top:26px; border-top:2px solid var(--green); }
.grade-heading { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
.grade-heading h3 { margin:5px 0 4px; font-size:20px; }
.grade-controls { display:flex; gap:10px; }
.grade-table-wrap { overflow-x:auto; margin-top:20px; border:1px solid var(--line); background:var(--surface); }
.grade-table { width:100%; min-width:620px; border-collapse:collapse; font-size:12px; }
.grade-table th, .grade-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap; }
.grade-table thead th { color:var(--muted); font:10px var(--mono); letter-spacing:.7px; text-transform:uppercase; }
.grade-table tbody th { text-align:left; font:11px var(--mono); }
.grade-table tbody tr:last-child th, .grade-table tbody tr:last-child td { border-bottom:0; }
.grade-table strong { display:inline-grid; place-items:center; width:24px; height:24px; margin-right:5px; color:#fff; font:700 12px var(--display); }
.grade-table td span { color:var(--muted); font:10px var(--mono); }
.grade-A { background:#16804e; }.grade-B { background:#5c9b4b; }.grade-C { background:#b18b32; }.grade-D { background:#c16b32; }.grade-F { background:#b54b43; }
.grade-note { margin:12px 0 0; color:var(--muted); font:10px var(--mono); }
.chart-controls { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.chart-controls label { display:grid; gap:5px; color:var(--muted); font:9px var(--mono); letter-spacing:.6px; text-transform:uppercase; }
.chart-controls select { border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:7px 8px; font:12px var(--sans); text-transform:none; }
.accuracy-chart-wrap { width:100%; overflow:hidden; }
#accuracy-chart { display:block; width:100%; height:auto; min-height:250px; }
.chart-grid { stroke:var(--line); stroke-dasharray:3 4; }
.chart-axis, .chart-axis-label { fill:var(--muted); font:10px var(--mono); }
.chart-series { fill:none; stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.chart-point { fill:var(--surface); stroke-width:3; }
.average-line { background:#e08a24; stroke:#e08a24; }.max-line { background:#5d6ab3; stroke:#5d6ab3; }.worst-line { background:#68746d; stroke:#68746d; }.random-line { background:#c64f45; stroke:#c64f45; }
.chart-baseline { stroke-width:2; stroke-dasharray:8 5; }
.chart-baseline-label { font:9px var(--mono); }
.chart-baseline-label.worst-line { fill:#68746d; }.chart-baseline-label.random-line { fill:#c64f45; }
.chart-legend { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:5px 0 0; color:var(--muted); font:10px var(--mono); }
.legend-line { display:inline-block; width:18px; height:3px; margin-right:-8px; }
.predictions-section { border-bottom:0; padding-bottom:120px; }
.table-note { margin:22px 0 30px; color:var(--muted); font-size:14px; }
.matrix-controls { display:flex; gap:34px; margin:0 0 18px; }
.matrix-controls fieldset { border:0; margin:0; padding:0; }
.matrix-controls legend { margin-bottom:8px; color:var(--muted); font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.segmented-control { display:flex; border:1px solid var(--line); }
.segmented-control button { border:0; border-right:1px solid var(--line); background:var(--surface); padding:9px 13px; cursor:pointer; color:var(--muted); font-size:12px; }
.segmented-control button:last-child { border-right:0; }
.segmented-control button.is-selected { background:var(--green); color:#fff; }
.matrix-status { min-height:18px; margin-bottom:8px; color:var(--muted); font:10px var(--mono); text-transform:uppercase; letter-spacing:.6px; }
.matrix-wrap { overflow-x:auto; border:1px solid var(--line); background:var(--surface); }
.sos-matrix { width:100%; min-width:650px; border-collapse:collapse; font-size:13px; }
.sos-matrix th, .sos-matrix td { padding:11px 14px; border-bottom:1px solid var(--line); text-align:center; }
.sos-matrix thead th { background:var(--ink); color:var(--paper); font:10px var(--mono); letter-spacing:1px; text-transform:uppercase; }
.sos-matrix thead th:nth-child(2), .sos-matrix tbody th { text-align:left; }
.sort-button { width:100%; border:0; background:none; color:inherit; cursor:pointer; font:inherit; letter-spacing:inherit; text-transform:inherit; }
.sort-button::after { content:' ↕'; color:var(--muted); }
.sort-button.is-active::after { content:' ↑'; color:var(--green); }
.sort-button.is-desc::after { content:' ↓'; color:var(--green); }
.sos-matrix tbody tr:last-child th, .sos-matrix tbody tr:last-child td { border-bottom:0; }
.sos-matrix tbody tr:nth-child(even) { background:color-mix(in srgb, var(--soft-green) 28%, var(--surface)); }
.matrix-rank { color:var(--muted); font:11px var(--mono); }
.team-identity { display:inline-flex; align-items:center; gap:9px; }
.matrix-team-logo { width:26px; height:26px; object-fit:contain; background:transparent; mix-blend-mode:multiply; }
:root.dark .matrix-team-logo { background:#fff; mix-blend-mode:normal; }
.team-code { font-family:var(--display); font-weight:700; }
.sos-rank { display:inline-grid; place-items:center; min-width:31px; height:27px; border:1px solid var(--line); font:11px var(--mono); }
.rank-1 { background:#c7efd4; color:#155c36; border-color:#a7dcb8; }
.rank-2 { background:#e0f0d7; color:#49643c; border-color:#c7dfbb; }
.rank-3 { background:#f2ead0; color:#75652c; border-color:#e5d9b2; }
.rank-4 { background:#f5d9d0; color:#854b3e; border-color:#e5bdb2; }
:root.dark .rank-1 { background:#245638; color:#d7f4df; border-color:#39774f; }
:root.dark .rank-2 { background:#344e36; color:#dcecdf; border-color:#506b4d; }
:root.dark .rank-3 { background:#554b2d; color:#f5eac0; border-color:#75683c; }
:root.dark .rank-4 { background:#573a35; color:#f4d8d0; border-color:#795049; }
@media (max-width:800px) {
  .sos-hero { grid-template-columns:1fr; gap:55px; padding:70px 20px 66px; }
  .sos-section { grid-template-columns:1fr; gap:22px; padding:68px 20px; }
  .section-number { order:0; }
  .accuracy-grid { grid-template-columns:1fr; }
  .accuracy-cardinals { grid-template-columns:1fr; }
  .grade-heading { display:block; }
  .grade-controls { margin-top:18px; }
  .matrix-controls { flex-wrap:wrap; gap:18px; }
}
@media (max-width:480px) {
  .sos-hero h1 { font-size:52px; }
  .accuracy-summary, .accuracy-chart { padding:18px; }
  .segmented-control button { padding:9px 10px; }
}