/* ──────────────────────────────────────────────
   Free Health Assessment funnel (BLUEPRINT §4)
   ────────────────────────────────────────────── */

/* Shared utilities (this template loads without home.css) */
.sej { background: var(--sej-parchment); color: var(--sej-ink); }
.sej-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.sej-eyebrow {
  font-family: var(--sej-font-body); text-transform: uppercase; letter-spacing: .22em;
  font-size: .72rem; font-weight: 700; color: var(--sej-gold-600); margin: 0 0 .6rem;
}
.sej-card__tag { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--sej-gold-600); }

.sej-assess { padding: clamp(40px,6vw,80px) 0; }

/* ── Form layout ── */
.sej-assess__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px);
  align-items: start;
}
.sej-assess__intro h1 {
  font-family: var(--sej-font-display); font-weight: 600;
  font-size: clamp(2.2rem,4.5vw,3.4rem); line-height: 1.04; color: var(--sej-green);
  margin: 0 0 1rem;
}
.sej-assess__lede { color: #5b5343; line-height: 1.6; font-size: 1.05rem; margin: 0 0 1.6rem; max-width: 32em; }
.sej-assess__points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.sej-assess__points li { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--sej-green-700); }
.sej-assess__points span { color: var(--sej-gold-600); font-weight: 800; }

/* ── Form card ── */
.sej-assess__form {
  background: var(--sej-cream); border: 1px solid var(--sej-line);
  border-radius: 20px; padding: clamp(24px,3vw,38px);
  display: grid; gap: 16px; box-shadow: var(--sej-shadow);
}
.sej-assess__form label {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--sej-font-body); font-weight: 700; font-size: .9rem; color: var(--sej-green);
}
.sej-assess__form label small { color: var(--sej-sage); font-weight: 500; }
.sej-assess__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sej-assess__form input,
.sej-assess__form select,
.sej-assess__form textarea {
  font-family: var(--sej-font-body); font-size: .98rem; font-weight: 500;
  padding: .8rem 1rem; border-radius: 10px; border: 1.5px solid var(--sej-line);
  background: #fff; color: var(--sej-ink); width: 100%;
}
.sej-assess__form input:focus,
.sej-assess__form select:focus,
.sej-assess__form textarea:focus { outline: none; border-color: var(--sej-gold); box-shadow: 0 0 0 1px var(--sej-gold); }
.sej-assess__submit { margin-top: 6px; }
.sej-assess__fine { font-size: .82rem; color: var(--sej-sage); margin: 4px 0 0; text-align: center; }
.sej-assess__err {
  background: #fbe9e2; border: 1px solid #e6b9a8; color: #8a3b1e;
  padding: 10px 14px; border-radius: 10px; font-size: .9rem; font-weight: 600;
}

/* ── Thank-you state ── */
.sej-assess__thanks { text-align: center; max-width: 620px; margin: 0 auto; }
.sej-assess__check {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--sej-green); color: var(--sej-gold); font-size: 1.8rem; font-weight: 800; margin-bottom: 18px;
}
.sej-assess__thanks h1 { font-family: var(--sej-font-display); font-size: clamp(2rem,4vw,3rem); color: var(--sej-green); margin: 0 0 .8rem; }
.sej-assess__thanks .sej-assess__lede { margin: 0 auto 2rem; }
.sej-assess__back { margin-top: 22px; }
.sej-assess__back a { color: var(--sej-gold-600); font-weight: 700; }

/* Recommended product card */
.sej-reco {
  display: flex; gap: 22px; align-items: center; text-align: left;
  background: var(--sej-cream); border: 1px solid var(--sej-line); border-radius: 18px;
  padding: 18px; text-decoration: none; color: var(--sej-ink); max-width: 480px; margin: 0 auto;
  transition: transform .3s var(--sej-ease), box-shadow .3s var(--sej-ease);
}
.sej-reco:hover { transform: translateY(-4px); box-shadow: var(--sej-shadow-lg); }
.sej-reco__media { flex: none; width: 120px; aspect-ratio: 4/5; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg,#fbf8f1,#eadfca); }
.sej-reco__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sej-reco__body { display: flex; flex-direction: column; gap: 6px; }
.sej-reco__title { font-family: var(--sej-font-display); font-size: 1.3rem; color: var(--sej-green); }
.sej-reco__price { font-weight: 800; }
.sej-reco__price .amount { color: var(--sej-green-700); }
.sej-reco .sej-btn { margin-top: 8px; align-self: flex-start; }

@media (max-width: 860px) {
  .sej-assess__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .sej-assess__row { grid-template-columns: 1fr; }
  .sej-reco { flex-direction: column; text-align: center; }
  .sej-reco__body { align-items: center; }
  .sej-reco .sej-btn { align-self: center; }
}

/* ──────────────────────────────────────────────
   Full clinical intake form
   ────────────────────────────────────────────── */
.sej-assess__head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px,4vw,44px); }
.sej-assess__head h1 { font-family: var(--sej-font-display); font-weight: 600; font-size: clamp(2rem,4.4vw,3.2rem); line-height: 1.06; color: var(--sej-green); margin: 0 0 .8rem; }
.sej-assess__form--full { display: block; max-width: 860px; margin: 0 auto; background: none; border: 0; padding: 0; box-shadow: none; }

.sej-fieldset {
  border: 1px solid var(--sej-line); border-radius: 18px; background: var(--sej-cream);
  padding: clamp(22px,3vw,34px); margin: 0 0 22px; box-shadow: var(--sej-shadow);
}
.sej-fieldset legend {
  display: flex; align-items: center; gap: 12px; padding: 0;
  font-family: var(--sej-font-display); font-size: 1.4rem; color: var(--sej-green); margin-bottom: 8px;
}
.sej-fieldset__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--sej-green); color: var(--sej-gold); font-size: 1rem; font-weight: 700; flex: none;
}
.sej-fieldgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; margin-top: 14px; }
.sej-field { display: flex; flex-direction: column; gap: 7px; }
.sej-field.is-wide { grid-column: 1 / -1; }
.sej-field__label { font-family: var(--sej-font-body); font-weight: 700; font-size: .9rem; color: var(--sej-green); }
.sej-req { color: var(--sej-gold-600); }
.sej-field input, .sej-field select, .sej-field textarea {
  font-family: var(--sej-font-body); font-size: .98rem; font-weight: 500;
  padding: .72rem .9rem; border-radius: 10px; border: 1.5px solid var(--sej-line); background: #fff; color: var(--sej-ink); width: 100%;
}
.sej-field input:focus, .sej-field select:focus, .sej-field textarea:focus { outline: none; border-color: var(--sej-gold); box-shadow: 0 0 0 1px var(--sej-gold); }

/* Yes / No / Maybe pills */
.sej-choice { display: flex; gap: 8px; flex-wrap: wrap; }
.sej-choice label { cursor: pointer; }
.sej-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.sej-choice span {
  display: inline-block; padding: .5rem 1.1rem; border-radius: 999px; border: 1.5px solid var(--sej-line);
  background: #fff; font-weight: 600; font-size: .9rem; color: var(--sej-green-700); transition: all .18s var(--sej-ease);
}
.sej-choice label:hover span { border-color: var(--sej-gold); }
.sej-choice input:checked + span { background: var(--sej-green); color: var(--sej-parchment); border-color: var(--sej-green); }
.sej-choice input:focus-visible + span { box-shadow: 0 0 0 2px var(--sej-gold); }

/* 1–5 scale */
.sej-scale { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sej-scale__lo, .sej-scale__hi { font-size: .8rem; color: var(--sej-sage); font-weight: 600; }
.sej-scale__opts { display: inline-flex; gap: 7px; }
.sej-scale label { cursor: pointer; display: inline-flex; }
.sej-scale label input { position: absolute; opacity: 0; width: 0; height: 0; }
.sej-scale label span {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  border: 1.5px solid var(--sej-line); background: #fff; font-weight: 700; color: var(--sej-green-700); transition: all .18s var(--sej-ease);
}
.sej-scale label:hover span { border-color: var(--sej-gold); }
.sej-scale label input:checked + span { background: var(--sej-gold); color: #fff; border-color: var(--sej-gold); }
.sej-scale label input:focus-visible + span { box-shadow: 0 0 0 2px var(--sej-green); }

.sej-assess__program {
  max-width: 860px; margin: 0 auto 20px; background: rgba(197,135,26,.12);
  border: 1px solid var(--sej-gold); border-radius: 12px; padding: 14px 18px;
  color: var(--sej-green-700); font-weight: 600; font-size: .95rem;
}
.sej-assess__program strong { color: var(--sej-green); }
.sej-assess__submitrow { text-align: center; margin-top: 8px; }
.sej-assess__submit { padding: .9rem 2.2rem; font-size: 1rem; }

@media (max-width: 600px) {
  .sej-fieldgrid { grid-template-columns: 1fr; }
  .sej-scale { gap: 8px; }
  .sej-scale span { width: 38px; height: 38px; }
}
