/* ---- Coaching Fit Check ---- (colors come from the site brand tokens in styles.css :root) */
/* Each step's card is centered in the viewport — vertically and horizontally — at any width.
   `safe center` falls back to top-alignment when a step is taller than the screen, so nothing clips. */
.fc-wrap {
  max-width: 640px; margin: 0 auto; padding: 24px 16px;
  min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: safe center;
}

.fc-brand { color: var(--pink); font-size: 26px; font-weight: 800; text-align: center; margin: 0 0 16px; letter-spacing: -0.01em; }

.fc-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 14px; padding: 24px; box-shadow: 0 2px 16px rgba(0,0,0,.05); }

.fc-progress { font-size: 13px; color: #9c9488; letter-spacing: .04em; margin-bottom: 16px; }

.fc-intro { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.fc-intro p { margin: 0 0 12px; line-height: 1.55; }
.fc-intro .fc-time { color: #8a8178; font-size: 14px; margin-top: 2px; margin-bottom: 0; }

.fc-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.fc-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--pink); font-weight: 700; margin: 0 0 16px; }

/* Text + email fields */
.fc-field { margin: 0 0 14px; }
.fc-field label { display: block; font-size: 14px; color: #6b6258; margin-bottom: 6px; }
.fc-field input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; background: #fff; color: var(--charcoal); }

/* Confirmation checkboxes */
.fc-bridge { margin: 0 0 16px; line-height: 1.55; }
.fc-check { display: flex; gap: 11px; align-items: flex-start; padding: 13px 14px; border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 10px; cursor: pointer; line-height: 1.5; }
.fc-check input { margin: 3px 0 0; accent-color: var(--pink); width: 18px; height: 18px; flex: 0 0 auto; }
.fc-check span { font-size: 14px; }
.fc-check.on { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 9%, var(--card-bg)); }
.fc-check-lead { display: block; font-weight: 700; margin-bottom: 4px; }
.fc-list { display: block; margin: 8px 0; }
.fc-list span { display: block; margin-bottom: 3px; padding-left: 4px; font-size: 14px; }

/* Question groups */
.fc-q { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.fc-q-title { display: block; font-weight: 600; font-size: 15px; margin: 0 0 10px; line-height: 1.4; padding: 0; }
.fc-q-hint { margin: -4px 0 10px; font-size: 13px; color: #8a8178; font-style: italic; }
.fc-q textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1.5px solid var(--border); border-radius: 10px; font-size: 15px; font-family: inherit; line-height: 1.5; resize: vertical; background: #fff; color: var(--charcoal); }

/* Radio option rows */
.fc-opt { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border: 1.5px solid var(--border); border-radius: 10px; margin-bottom: 8px; cursor: pointer; line-height: 1.45; }
.fc-opt input { margin: 3px 0 0; accent-color: var(--pink); flex: 0 0 auto; }
.fc-opt span { font-size: 14px; }
.fc-opt b { font-weight: 700; }
.fc-opt.on { border-color: var(--pink); background: color-mix(in srgb, var(--pink) 9%, var(--card-bg)); }

/* Focus states */
.fc-field input:focus, .fc-q textarea:focus { outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 16%, transparent); }

/* Discount note under Q6 */
.fc-note { font-size: 13px; color: #8a6d1e; background: #fdf0d6; padding: 8px 12px; border-radius: 8px; margin: 0 0 12px; line-height: 1.4; }

/* Error + navigation */
.fc-err { color: #b23b3b; font-size: 14px; background: #f7e7e7; border-radius: 8px; padding: 10px 12px; margin: 18px 0 0; }
.fc-nav { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.fc-nav .fc-btn { width: auto; margin-top: 0; }
.fc-nav #fc-back { margin-right: auto; }
.fc-btn { background: var(--pink); color: #fff; border: 0; border-radius: 999px; padding: 14px 32px; font-size: 16px; font-family: inherit; cursor: pointer; width: 100%; margin-top: 18px; }
.fc-btn.ghost { background: transparent; color: var(--pink); border: 1.5px solid var(--border); }
.fc-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Thank-you view */
.fc-thanks { text-align: center; }
.fc-thanks-emoji { font-size: 40px; line-height: 1; }
.fc-thanks h2 { margin: 10px 0 12px; }
.fc-thanks p { line-height: 1.55; color: #4a453f; margin: 0; }