/* veraforma.fit: form guides (/form/) and "alternative to" pages (/compare/<app>-alternative/). Uses site.css tokens. */
.page-form main h1 em, .page-form main h2 em { font-style: normal; color: var(--accent); }
.page-form .eyebrow a { color: inherit; text-decoration: none; }
.page-form .eyebrow a:hover { text-decoration: underline; }
.page-form .section-cta { margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--border); }
.page-form .section-cta > p { color: var(--text-2); max-width: 64ch; }
.page-form .cta-h { font-size: var(--step-2); margin: 0 0 10px; }
.page-form .h-small { font-size: var(--step-1); margin: 0 0 14px; }
.page-form .page-hero .cta-pair { margin-top: 20px; }

.form-split { display: grid; gap: clamp(28px, 4vw, 56px); }
@media (min-width: 960px) { .form-split { grid-template-columns: 1.1fr .9fr; align-items: start; } }
.form-intro { color: var(--text-2); font-size: var(--step-1); line-height: 1.55; }
.form-good { margin: 18px 0 0; padding-left: 1.3em; display: grid; gap: 10px; }
.form-good li { padding-left: 4px; }
.form-list { margin: 10px 0 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--text-2); }

.form-media { display: grid; gap: 18px; }
@media (min-width: 560px) and (max-width: 959px) { .form-media { grid-template-columns: 1fr 1fr; align-items: start; } }
.form-fig svg { max-height: 380px; display: block; margin-inline: auto; }
.form-fig figcaption { padding: 0 clamp(18px, 3vw, 28px) clamp(16px, 2.5vw, 24px); }
.form-calls { margin: 0; padding: 0; list-style: none; counter-reset: call; display: grid; gap: 8px; font-size: .9375rem; color: var(--text); }
.form-calls li { counter-increment: call; display: flex; gap: 10px; align-items: baseline; }
.form-calls li::before {
  content: counter(call); flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--bg); font: 800 .75rem/1 var(--font);
}
.fg-body line, .fg-body circle { stroke: var(--text); stroke-width: 7; stroke-linecap: round; fill: none; }
.fg-body .fg-head { fill: var(--bg); stroke-width: 5; }
.fg-floor { stroke: var(--border-strong); stroke-width: 3; }
.fg-box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 2; }
.fg-bar { stroke: var(--text-2); stroke-width: 6; stroke-linecap: round; }
.fg-cable { stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 4 4; }
.fg-wt rect, .fg-wt circle { fill: var(--text-2); stroke: none; }
.fg-call circle { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.fg-call text { fill: var(--bg); font: 800 13px/1 var(--font); }

.form-photo { margin: 0; max-width: 260px; justify-self: center; }
.form-photo img { width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); }

.faults { align-items: start; }
.fault { padding: clamp(18px, 2.5vw, 24px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg); }
.fault h3 { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; font-size: 1.125rem; }
.fault__n { flex: none; font: 800 .8125rem/1 var(--mono); color: var(--accent); }
.fault p { margin: 0; color: var(--text-2); }
.fault p + p { margin-top: 8px; }
.fault strong { color: var(--text); }

.form-group-h { font-size: var(--step-1); margin: clamp(28px, 4vw, 44px) 0 14px; }
.form-group-h:first-of-type { margin-top: 0; }
.form-related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }

.page-alt .compare { min-width: 520px; }
.cmp-ref__date { color: var(--text-3); white-space: nowrap; }
.fn-list a { overflow-wrap: anywhere; }