.comparison-scroll { overflow-x: auto; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.comparison { width: 100%; min-width: 860px; border-collapse: collapse; text-align: left; }
.comparison th, .comparison td { padding: 18px 16px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; }
.comparison th:last-child, .comparison td:last-child { border-right: 0; background: var(--raised); }
.comparison thead th { font: 500 .68rem/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.comparison thead th:last-child { color: var(--accent); }
.comparison tbody th { width: 150px; font: 500 .68rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.comparison tbody td { color: var(--ink-soft); line-height: 1.55; }
.control-section { padding-bottom: clamp(70px, 9vw, 120px); }
.control-layout { display: grid; grid-template-columns: 1.3fr .7fr; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.state-grid { display: grid; grid-template-columns: 1fr 1fr; }
.state-grid article { min-height: 220px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.state-grid article:nth-last-child(-n+2) { border-bottom: 0; }
.state-dot { display: block; width: 9px; height: 9px; margin-bottom: 30px; border-radius: 50%; }
.state-dot.active { background: #2f8f5b; box-shadow: 0 0 0 4px rgba(47,143,91,.16); }
.state-dot.approval { background: #d28a21; box-shadow: 0 0 0 4px rgba(210,138,33,.16); }
.state-dot.full { background: #8e58b5; box-shadow: 0 0 0 4px rgba(142,88,181,.16); }
.state-dot.paused { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.state-grid small { font: 500 .62rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.state-grid h3 { margin-top: 10px; font: 400 1.35rem/1.2 var(--serif); }
.state-grid p { margin-top: 12px; color: var(--ink-soft); line-height: 1.6; }
.key-panel { padding: 28px; background: var(--raised); }
.key-list { margin-top: 20px; border-top: 1px solid var(--line); }
.key-list > div { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); }
.key-list kbd { width: 48px; padding: 7px 0; border: 1px solid var(--line-strong); background: var(--bone); text-align: center; font: 500 .72rem var(--mono); }
.key-list span { color: var(--ink-soft); }
.key-panel > p { margin-top: 24px; color: var(--muted); line-height: 1.65; }
.capability-section { padding-bottom: clamp(80px, 10vw, 130px); }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--line); }
.capability-grid article { min-height: 210px; padding: 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.capability-grid article > span { font: 500 .62rem var(--mono); color: var(--accent); }
.capability-grid h3 { margin-top: 42px; font: 400 1.35rem/1.2 var(--serif); }
.capability-grid p { margin-top: 12px; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 900px) {
  .control-layout { grid-template-columns: 1fr; }
  .key-panel { border-top: 1px solid var(--line); }
  .capability-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .state-grid { grid-template-columns: 1fr; }
  .state-grid article { min-height: 190px; border-right: 0; }
  .state-grid article:nth-last-child(2) { border-bottom: 1px solid var(--line); }
  .capability-grid { grid-template-columns: 1fr; }
}