/* SSM program funnel questionnaire — styling for the steps injected by ssm-funnel.js.
   Uses the funnel pages' own tokens (--pine / --meadow / --text-light / --shadow-lg) with
   literal fallbacks, so this file is safe to drop on a page that defines fewer of them. */
.ssmf-step { padding: 30px 28px 26px; }
.ssmf-count {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--meadow, #4b8f5f); margin-bottom: 10px;
}
.ssmf-q {
  font-size: 23px; line-height: 1.3; font-weight: 800; margin: 0 0 8px;
  color: var(--pine, #1a3a2a);
}
.ssmf-help {
  font-size: 14px; line-height: 1.55; color: var(--text-light, #5a6b5e); margin: 0 0 18px;
}
.ssmf-opts { display: grid; gap: 10px; margin-top: 16px; }
.ssmf-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--pine, #1a3a2a);
  background: #fff; border: 1.5px solid rgba(26, 58, 42, 0.16); border-radius: 11px;
  padding: 15px 17px; transition: border-color .15s ease, background .15s ease, transform .08s ease;
}
.ssmf-opt:hover { border-color: var(--meadow, #4b8f5f); background: #f4f8f5; }
.ssmf-opt:active { transform: scale(0.995); }
.ssmf-opt:focus-visible { outline: 2px solid var(--meadow, #4b8f5f); outline-offset: 2px; }
.ssmf-opt[disabled] { opacity: .55; cursor: default; }

.ssmf-back {
  margin-top: 18px; background: none; border: none; cursor: pointer; padding: 6px 0;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-light, #5a6b5e);
}
.ssmf-back:hover { color: var(--pine, #1a3a2a); text-decoration: underline; }

.ssmf-fields { display: grid; gap: 11px; margin-top: 16px; }
/* type=text/tel with inputmode rather than type=number — number inputs blank themselves
   on formatted input, which has bitten us in the portal. */
.ssmf-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px;  /* 16px = no iOS zoom */
  color: var(--pine, #1a3a2a); background: #fff;
  border: 1.5px solid rgba(26, 58, 42, 0.16); border-radius: 11px; padding: 14px 16px;
}
.ssmf-in:focus { outline: none; border-color: var(--meadow, #4b8f5f); }
.ssmf-in::placeholder { color: #9aa39c; }

.ssmf-submit {
  width: 100%; margin-top: 18px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 800;
  color: #fff; background: linear-gradient(135deg, var(--pine, #1a3a2a), var(--meadow, #4b8f5f));
  border: none; border-radius: 11px; padding: 16px 20px;
}
.ssmf-submit:hover { filter: brightness(1.07); }
.ssmf-submit[disabled] { opacity: .65; cursor: default; filter: none; }

.ssmf-err {
  margin-top: 12px; font-size: 14px; line-height: 1.5; color: #b4443a;
  background: #fdf0ee; border: 1px solid #f3d3ce; border-radius: 9px; padding: 11px 13px;
}
.ssmf-legal {
  margin: 16px 0 0; font-size: 11px; line-height: 1.5; color: #9aa39c;
}
@media (max-width: 520px) {
  .ssmf-step { padding: 24px 18px 22px; }
  .ssmf-q { font-size: 20px; }
}