/* =========================================================
   4models: strony narzędzi (klasa .fm-tool-page)
   Układ jak w poradnikach: nagłówek z leadem, treść 820 px,
   ankieta LimeSurvey w ramce, boks z dalszymi krokami.
   ========================================================= */

.fm-tool-page {
  padding: clamp(32px, 6vw, 72px) 0 clamp(48px, 8vw, 96px);
  background:
    radial-gradient(circle at 88% 0%, rgba(249, 89, 138, .08), transparent 26rem),
    radial-gradient(circle at 6% 30%, rgba(181, 146, 77, .07), transparent 22rem),
    var(--fm-paper);
}

.fm-tool-page__inner {
  width: min(var(--fm-wrap-narrow), 100% - 2 * var(--fm-gutter));
  margin-inline: auto;
}

/* ---------- Nagłówek ---------- */
.fm-tool-page__head { margin-bottom: clamp(28px, 4vw, 40px); }
.fm-tool-page__title {
  margin: 0 0 18px;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.06;
}
.fm-tool-page__lead {
  margin: 0;
  max-width: 720px;
  color: var(--fm-text);
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.7;
}
.fm-tool-page__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 18px 0 0; padding: 0; list-style: none;
  color: var(--fm-muted); font-size: 14px;
}
.fm-tool-page__meta li { display: inline-flex; align-items: center; gap: 8px; }
.fm-tool-page__meta li::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: linear-gradient(135deg, var(--fm-pink), var(--fm-gold));
}

/* ---------- Ankieta ---------- */
.fm-survey {
  margin: 0 0 clamp(40px, 6vw, 64px);
  padding: clamp(22px, 4vw, 40px);
  border: 1px solid var(--fm-line);
  border-radius: 28px;
  background: rgba(255, 255, 255, .78);
  box-shadow: var(--fm-shadow);
}
.fm-survey__frame {
  display: block;
  width: 100%;
  min-height: 320px;
  border: 0;
  background: transparent;
  overflow: hidden;
  transition: height .2s ease;
}
@media (max-width: 575px) {
  .fm-survey { margin-inline: calc(-1 * var(--fm-gutter) / 2); padding: 20px 16px; border-radius: 22px; }
}

/* ---------- Treść pod ankietą ---------- */
.fm-tool-page__body h2 {
  margin: 1.6em 0 .6em;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.14;
}
.fm-tool-page__body h3 {
  margin: 1.4em 0 .4em;
  font-size: clamp(20px, 2.3vw, 24px);
  line-height: 1.25;
}
.fm-tool-page__body p { margin: 0 0 1em; font-size: 18px; line-height: 1.78; }
.fm-tool-page__body ul { margin: 18px 0 24px; padding-left: 0; list-style: none; }
.fm-tool-page__body li { position: relative; margin: 0 0 12px; padding-left: 30px; font-size: 17px; line-height: 1.68; }
.fm-tool-page__body ul li::before {
  content: ""; position: absolute; left: 2px; top: .76em; width: 9px; height: 9px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .72), transparent 42%),
              linear-gradient(135deg, var(--fm-pink), var(--fm-gold));
  box-shadow: 0 0 0 4px rgba(181, 146, 77, .10);
}
.fm-tool-page__body a:not([class]) {
  color: var(--fm-pink);
  text-decoration-color: rgba(180, 86, 107, .45);
  text-underline-offset: 4px;
}

/* ---------- Boks „co dalej” jak .fm-article-bridge ---------- */
.fm-tool-page__next {
  margin: clamp(40px, 6vw, 56px) 0 0;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(181, 146, 77, .34);
  border-radius: 28px;
  background:
    radial-gradient(circle at 92% 8%, rgba(249, 89, 138, .10), transparent 16rem),
    linear-gradient(135deg, rgba(251, 248, 243, .94), rgba(248, 239, 234, .72));
  box-shadow: 0 18px 48px rgba(23, 23, 23, .06);
}
.fm-tool-page__next h2 { margin-top: 0; }
.fm-tool-page__next .fm-btn { margin-top: 8px; }