/* Compact first viewport: prompt and primary action stay visible on desktop. */
@media (min-width: 721px) {
  .compare-hero { padding-top: 38px; padding-bottom: 22px; }
  .compare-hero h1 { margin: 8px 0; font-size: clamp(52px, 6.5vw, 76px); }
  .compare-hero .lead { margin: 12px auto; font-size: 18px; }
  .compare-hero ul { margin: 12px 0 0; }
  .lab-head { padding: 16px 28px; }
  .lab-head h2 { font-size: 27px; }
  #compare-form { padding: 20px 28px; }
  #compare-form .examples { margin-bottom: 13px; }
  #comparison-prompt { min-height: 108px; }
  #compare-status { margin-top: 8px; }
}

.vote-panel {
  margin-top: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  background: #fff;
  text-align: center;
}

.vote-panel h3 { margin: 7px 0 4px; font-size: 24px; }
.vote-panel > p:not(.step) { margin: 0 auto 18px; color: var(--muted); }
.vote-buttons { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; }
.vote-buttons button { border: 1px solid var(--blue); background: #fff; color: var(--blue); padding: 13px 16px; font-weight: 800; cursor: pointer; }
.vote-buttons button:hover { background: var(--blue); color: #fff; }
.vote-buttons button:disabled { cursor: default; opacity: .55; }
#vote-status { min-height: 20px; margin-top: 15px; color: var(--green); font-weight: 700; }
.vote-totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.vote-totals div { padding: 12px; background: var(--paper); }
.vote-totals strong,.vote-totals span { display: block; }
.vote-totals strong { font-size: 23px; }
.vote-totals span { color: var(--muted); font-size: 11px; }
.result-card.revealed header span { background: #e8f4ed; color: var(--green); }

@media (max-width: 720px) {
  .vote-buttons,.vote-totals { grid-template-columns: 1fr; }
}