/* ===== Mode (Step 4) ===== */
:root{ --radius: 8px; }

.step[data-step="4"] .mode-headline,
.mode-headline{
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-2);
}
.step[data-step="4"] .mode-note,
.mode-note{
  margin: 0 0 var(--space-3);
  color: #657497;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.45;
}

.mode-grid{
  display:grid; grid-template-columns: 1fr;
  gap: var(--space-4); align-items: stretch;
}

.mode-card{
  display:grid; align-content:center; justify-items:center; gap:12px;
  min-height: 180px; padding: 26px;
  background: #fff; border: 1.5px solid #fff; border-radius: var(--radius);
  transition: border-color .12s ease, box-shadow .12s ease;
  cursor:pointer; user-select:none;
}
.mode-card:hover{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--brand) 22%, transparent);
}
input[type="radio"][name="mode"]{ position:absolute; opacity:0; pointer-events:none; }
input[type="radio"][name="mode"]:checked + label.mode-card,
label.mode-card:has(> input[type="radio"][name="mode"]:checked),
.mode-card.is-selected{
  border-color: var(--brand);
}

.mode-title{
  margin:0; font-size: clamp(22px, 3.2vw, 32px);
  font-weight: 900; line-height: 1.2; color: var(--text); text-align:center;
}
.mode-desc{
  margin:0; font-size: clamp(15px, 2.6vw, 18px);
  font-weight: 700; line-height: 1.45; color: #6B7280; text-align:center;
}

@media (max-width: 900px){
  .mode-card{ min-height: 160px; padding: 22px; }
}