* { box-sizing: border-box; }

html { background: var(--clinic-warm); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--clinic-ink);
  background: linear-gradient(135deg, #f8f5ef 0%, #f4fafc 48%, #eaf5f0 100%);
  font-family: var(--clinic-font);
  line-height: 1.55;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--clinic-green-600); outline-offset: 3px; }
#success-title:focus { outline: none; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; background: var(--clinic-blue-950); color: var(--clinic-white); border-radius: 8px; }
.skip-link:focus { top: 16px; }

.form-header { width: min(1120px, calc(100% - 40px)); margin: 0 auto; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--clinic-blue-950); text-decoration: none; font-family: var(--clinic-heading); font-size: 1.05rem; font-weight: 760; }
.brand em { color: var(--clinic-green-600); font-style: normal; }
.brand-mark { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: var(--clinic-blue-950); color: var(--clinic-white); font-size: 1.45rem; font-weight: 400; }
.back-link { display: inline-flex; min-height: 44px; align-items: center; color: var(--clinic-blue-900); font-size: .92rem; font-weight: 700; text-underline-offset: 4px; }

.form-main { width: min(940px, calc(100% - 40px)); margin: 26px auto 54px; }
.form-intro { max-width: 630px; margin: 0 auto 28px; text-align: center; }
.form-intro .eyebrow { margin-bottom: 8px; font-size: clamp(1rem, 3.2vw, 1.28rem); }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--clinic-green-700); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow span { width: 8px; height: 8px; border-radius: 99px; background: var(--clinic-green-600); }
h1, h2 { margin: 0; font-family: var(--clinic-heading); color: var(--clinic-blue-950); letter-spacing: -.035em; line-height: 1.1; }
h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.form-intro > p:last-child { max-width: 540px; margin: 0 auto; color: var(--clinic-muted); font-size: 1.05rem; }

.form-card { overflow: hidden; background: var(--clinic-white); border: 1px solid rgba(18, 63, 90, .1); border-radius: var(--clinic-radius-lg); box-shadow: var(--clinic-shadow-md); }
.progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 22px 28px 18px; list-style: none; background: linear-gradient(90deg, var(--clinic-blue-50), var(--clinic-green-50)); }
.progress li { position: relative; display: grid; justify-items: center; gap: 7px; color: var(--clinic-muted); font-size: .75rem; text-align: center; }
.progress li:not(:last-child)::after { position: absolute; top: 14px; left: calc(50% + 22px); width: calc(100% - 44px); height: 2px; background: var(--clinic-line); content: ""; }
.progress span { position: relative; z-index: 1; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--clinic-line); border-radius: 50%; background: var(--clinic-white); font-size: .82rem; font-weight: 800; }
.progress strong { font-weight: 700; }
.progress .is-current { color: var(--clinic-blue-950); }
.progress .is-current span, .progress .is-complete span { border-color: var(--clinic-green-600); background: var(--clinic-green-600); color: var(--clinic-white); }
.progress .is-complete:not(:last-child)::after { background: var(--clinic-green-600); }

form { padding: 10px clamp(28px, 4.5vw, 58px); }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { max-width: 670px; padding: 0; color: var(--clinic-blue-950); font-family: var(--clinic-heading); font-size: clamp(1.65rem, 4vw, 2.35rem); font-weight: 750; letter-spacing: -.03em; line-height: 1.14; }
.step-help { max-width: 640px; margin: 13px 0 28px; color: var(--clinic-muted); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-card { position: relative; display: flex; min-height: 70px; align-items: center; padding: 14px 18px; border: 1px solid var(--clinic-line); border-radius: var(--clinic-radius-sm); background: var(--clinic-white); color: var(--clinic-blue-950); cursor: pointer; font-weight: 740; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.choice-card:hover { border-color: var(--clinic-green-600); box-shadow: var(--clinic-shadow-sm); transform: translateY(-1px); }
.choice-card input { position: absolute; opacity: 0; }
.choice-card:has(input:checked) { border-color: var(--clinic-green-600); background: var(--clinic-green-50); box-shadow: inset 0 0 0 1px var(--clinic-green-600); }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--clinic-green-600); outline-offset: 3px; }

.text-label { display: block; margin: 0 0 8px; color: var(--clinic-blue-950); font-weight: 760; }
.text-label span { color: var(--clinic-muted); font-weight: 500; }
.input-group + .input-group { margin-top: 18px; }
input[type="text"], input[type="tel"], textarea { width: 100%; border: 1px solid var(--clinic-line); border-radius: var(--clinic-radius-sm); background: var(--clinic-white); color: var(--clinic-ink); padding: 14px 15px; transition: border-color .16s ease, box-shadow .16s ease; }
textarea { min-height: 150px; resize: vertical; }
input:hover, textarea:hover { border-color: #a8c4c8; }
input:focus, textarea:focus { border-color: var(--clinic-green-600); box-shadow: 0 0 0 3px rgba(23, 121, 101, .15); outline: none; }
.field-error { min-height: 1.35em; margin: 7px 0 0; color: var(--clinic-danger); font-size: .86rem; font-weight: 650; }
.field-meta { display: flex; justify-content: space-between; gap: 12px; color: var(--clinic-muted); font-size: .82rem; }
.field-meta .field-error { flex: 1; }
.form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 20px; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--clinic-green-600); border-radius: 12px; padding: 12px 20px; background: var(--clinic-green-600); color: var(--clinic-white); font: inherit; font-weight: 800; text-decoration: none; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
.button:hover { border-color: var(--clinic-green-700); background: var(--clinic-green-700); transform: translateY(-1px); }
.button:disabled { cursor: wait; opacity: .7; transform: none; }
.button--secondary { border-color: var(--clinic-line); background: var(--clinic-white); color: var(--clinic-blue-950); }
.button--secondary:hover { border-color: var(--clinic-blue-900); background: var(--clinic-blue-50); }
.form-notice { margin-bottom: 24px; border-radius: var(--clinic-radius-sm); padding: 13px 15px; background: #fff7e8; color: #6c4e10; font-size: .92rem; }
.form-notice.is-error { background: #fff0f0; color: var(--clinic-danger); }
.form-success { max-width: 570px; margin: 0 auto; padding: clamp(36px, 8vw, 76px) clamp(24px, 6vw, 50px); text-align: center; }
.form-success h2 { font-size: clamp(1.9rem, 5vw, 2.7rem); }
.form-success p { margin: 14px auto 25px; color: var(--clinic-muted); }
.form-success .back-link { display: inline-block; margin-top: 20px; }
.success-icon { display: grid; width: 58px; height: 58px; margin: 0 auto 18px; place-items: center; border-radius: 50%; background: var(--clinic-green-100); color: var(--clinic-success); font-size: 1.8rem; font-weight: 800; }
.form-footer { width: min(800px, calc(100% - 40px)); margin: 0 auto 32px; color: var(--clinic-muted); font-size: .82rem; text-align: center; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 600px) {
  .form-header { width: min(100% - 28px, 1120px); min-height: 72px; }
  .back-link { font-size: .82rem; }
  .form-main { width: min(100% - 28px, 940px); margin-top: 18px; }
  .form-intro { margin-bottom: 26px; text-align: left; }
  .form-intro > p:last-child { margin-left: 0; }
  .form-card { border-radius: var(--clinic-radius-md); }
  .progress { padding: 17px 12px 15px; }
  .progress strong { display: none; }
  .progress li:not(:last-child)::after { left: calc(50% + 18px); width: calc(100% - 36px); }
  form { padding: 18px 16px 22px; }
  .choice-grid, .choice-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .choice-card { min-height: 56px; padding: 11px 12px; font-size: .9rem; line-height: 1.28; }
  .form-actions { flex-direction: column-reverse; margin-top: 18px; }
  .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
