.page { padding-block: var(--space-7) var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }

.head { display: flex; flex-direction: column; gap: var(--space-2); }
.back { font-size: var(--text-base); text-decoration: none; font-weight: 600; font-family: var(--font-heading); }
.back:hover { text-decoration: underline; }
.title { font-size: var(--text-2xl); }
.when { color: var(--color-text-subtle); }

.form { display: flex; flex-direction: column; gap: var(--space-6); }

.section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sectionTitle { font-size: var(--text-md); }
.sectionNote { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: calc(var(--space-3) * -1); }

.modePrice { display: block; font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: 2px; }

.quote { border-color: var(--color-accent); }
.quoteRow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.quoteAmount { font-family: var(--font-heading); font-size: var(--text-xl); color: var(--color-accent-text); font-variant-numeric: tabular-nums; }
.quoteNote { font-size: var(--text-sm); color: var(--color-text-subtle); margin-top: var(--space-3); }

.summary { display: grid; gap: var(--space-2); margin: 0; }
.summary > div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); font-size: var(--text-base); }
.summary dt { color: var(--color-text-subtle); font-size: var(--text-sm); }
.summary dd { margin: 0; }

.fieldset { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.legend { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-base); padding: 0; margin-bottom: var(--space-1); }

.consentError { color: var(--color-danger); font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2); }

.actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.cancel { font-size: var(--text-base); color: var(--color-text-subtle); text-decoration: none; }
.cancel:hover { text-decoration: underline; }

@media (max-width: 520px) {
  .summary > div { grid-template-columns: 1fr; gap: 0; }
}