/* Slate Forms — public + embed surface (premium design).
 *
 * Self-contained: styles every control inside .forms-public-card so the
 * live form looks polished regardless of the host design system. In embed
 * mode (?embed=1) the canvas + chrome are dropped to sit inside an iframe.
 */

.forms-public {
    --f-accent:   var(--accent, #2563EB);
    --f-accent-d: var(--accent-deep, #1D4ED8);
    --f-ink:      #0F172A;
    --f-muted:    #64748B;
    --f-line:     #E4E7EC;
    --f-line-2:   #EEF1F5;
    --f-surface:  #FFFFFF;
    --f-soft:     #F7F8FA;
    --f-radius:   14px;
    --f-radius-s: 11px;
    --f-ring:     rgba(37, 99, 235, 0.16);
    margin: 0; padding: 0;
    min-height: 100vh; min-height: 100dvh;
    background:
        radial-gradient(1200px 480px at 50% -10%, rgba(37,99,235,0.06), transparent 60%),
        var(--bg, #F4F5F7);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color: var(--f-ink);
    -webkit-font-smoothing: antialiased;
}
body.forms-public-embed { background: transparent; min-height: 0; }

/* Make the hidden attribute authoritative (host .btn sets display:inline-flex). */
.forms-public [hidden] { display: none !important; }

.forms-public-shell { display: flex; justify-content: center; align-items: flex-start; padding: 56px 18px; }
body.forms-public-embed .forms-public-shell { padding: 0; }

.forms-public-card {
    width: 100%; max-width: 600px;
    background: var(--f-surface);
    border: 1px solid var(--f-line);
    border-radius: 22px;
    padding: 40px 38px 34px;
    box-shadow: 0 1px 1px rgba(16,24,40,0.04), 0 18px 50px -18px rgba(16,24,40,0.22);
}
body.forms-public-embed .forms-public-card {
    border-radius: 0; box-shadow: none; border: 0; padding: 26px 22px; max-width: 100%;
}

/* ── Header ─────────────────────────────────────────────────── */
.forms-public-header { margin-bottom: 26px; }
.forms-public-header h1 {
    font-family: var(--font-display, "Syne", -apple-system, sans-serif);
    margin: 0 0 7px; font-size: 25px; line-height: 1.18; letter-spacing: -0.022em; font-weight: 700;
}
.forms-public-desc { color: var(--f-muted); margin: 0; font-size: 15px; line-height: 1.55; }

/* ── Fields + labels ────────────────────────────────────────── */
.forms-public-card .field { margin-bottom: 18px; }
.forms-public-card .field:last-of-type { margin-bottom: 24px; }
.forms-public-card .field-label,
.forms-public-card label.field-label {
    display: block; margin: 0 0 7px;
    font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em; color: #344054;
}
.forms-public-card .field-required { color: var(--f-accent); }
.forms-public-card .field-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--f-muted); }
.forms-public-card .field-error { margin-top: 7px; font-size: 12.5px; font-weight: 500; color: #DC2626; }

/* ── Inputs / selects / textareas (premium) ─────────────────── */
.forms-public-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.forms-public-card select,
.forms-public-card textarea {
    width: 100%; box-sizing: border-box;
    appearance: none; -webkit-appearance: none;
    background: var(--f-surface);
    border: 1.5px solid var(--f-line);
    border-radius: var(--f-radius);
    padding: 13px 15px;
    font-size: 15px; line-height: 1.4; color: var(--f-ink); font-family: inherit;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.forms-public-card input::placeholder,
.forms-public-card textarea::placeholder { color: #98A2B3; }
.forms-public-card input:hover:not(:focus),
.forms-public-card select:hover:not(:focus),
.forms-public-card textarea:hover:not(:focus) { border-color: #D0D5DD; }
.forms-public-card input:focus,
.forms-public-card select:focus,
.forms-public-card textarea:focus {
    outline: none; border-color: var(--f-accent);
    box-shadow: 0 0 0 4px var(--f-ring);
}
.forms-public-card textarea { min-height: 120px; resize: vertical; }
.forms-public-card select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; cursor: pointer;
}

/* ── Checkbox / radio (custom) ──────────────────────────────── */
.forms-public-card input[type="checkbox"],
.forms-public-card input[type="radio"] {
    appearance: none; -webkit-appearance: none;
    width: 20px; height: 20px; flex: none; margin: 0;
    border: 1.5px solid #CBD2DC; background: #fff; cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.forms-public-card input[type="checkbox"] { border-radius: 6px; }
.forms-public-card input[type="radio"]  { border-radius: 999px; }
.forms-public-card input[type="checkbox"]:hover,
.forms-public-card input[type="radio"]:hover { border-color: var(--f-accent); }
.forms-public-card input[type="checkbox"]:checked,
.forms-public-card input[type="radio"]:checked { border-color: var(--f-accent); background: var(--f-accent); }
.forms-public-card input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-position: center; background-repeat: no-repeat;
}
.forms-public-card input[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; }
.forms-public-card input[type="checkbox"]:focus-visible,
.forms-public-card input[type="radio"]:focus-visible { box-shadow: 0 0 0 4px var(--f-ring); }
.forms-public-card .form-radio-group label,
.forms-public-card .field > label[style*="flex"] { gap: 10px !important; font-size: 14.5px; }

/* ── Buttons (premium) ──────────────────────────────────────── */
.forms-public-card .btn {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1;
    padding: 13px 20px; border-radius: 12px; border: 1.5px solid transparent;
    cursor: pointer; transition: transform .12s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
    -webkit-tap-highlight-color: transparent;
}
.forms-public-card .btn:active { transform: translateY(1px); }
.forms-public-card .btn-primary,
.forms-public-card button[type="submit"] {
    color: #fff;
    background: var(--f-accent);
    box-shadow: 0 1px 2px rgba(16,24,40,.10);
}
.forms-public-card .btn-primary:hover,
.forms-public-card button[type="submit"]:hover { background: var(--f-accent-d); box-shadow: 0 2px 8px -2px rgba(16,24,40,.20); }
.forms-public-card .btn-block { width: 100%; }
.forms-public-card .btn-lg { padding: 15px 22px; font-size: 15.5px; border-radius: 13px; }
.forms-public-card .btn:not(.btn-primary):not([type="submit"]) {
    background: #fff; color: #344054; border-color: var(--f-line);
}
.forms-public-card .btn:not(.btn-primary):not([type="submit"]):hover { background: var(--f-soft); border-color: #D0D5DD; }

/* ── Multi-step wizard ──────────────────────────────────────── */
.forms-steps-head { margin-bottom: 24px; }
.forms-steps-meta { font-size: 12.5px; font-weight: 600; color: var(--f-muted); margin-bottom: 10px; letter-spacing: .01em; }
.forms-steps-title { color: var(--f-ink); }
.forms-steps-title:not(:empty)::before { content: " · "; color: var(--f-muted); }
.forms-steps-bar { height: 7px; border-radius: 999px; background: var(--f-line-2); overflow: hidden; }
.forms-steps-bar-fill {
    height: 100%; width: 0; border-radius: 999px;
    background: linear-gradient(90deg, var(--f-accent), #60A5FA);
    transition: width .35s cubic-bezier(.4,0,.2,1);
}
.forms-step { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
/* Directional slide + staggered entrance — children animate, delay set by JS. */
@keyframes forms-in-next { from { opacity: 0; transform: translate3d(26px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes forms-in-prev { from { opacity: 0; transform: translate3d(-26px, 0, 0); } to { opacity: 1; transform: none; } }
.forms-step.anim-next > * { animation: forms-in-next .5s both cubic-bezier(.16, 1, .3, 1); }
.forms-step.anim-prev > * { animation: forms-in-prev .5s both cubic-bezier(.16, 1, .3, 1); }
@media (prefers-reduced-motion: reduce) {
    .forms-step.anim-next > *, .forms-step.anim-prev > * { animation: none !important; }
}
.forms-steps-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--f-line-2); }
.forms-steps-nav [data-forms-back] { margin-right: auto; }
.forms-steps-nav .btn { min-width: 124px; }

/* ── Section heading ────────────────────────────────────────── */
.forms-heading { margin: 26px 0 6px; padding-top: 8px; border-top: 1px solid var(--f-line-2); }
.forms-heading:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.forms-heading h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.forms-heading p { margin: 5px 0 0; font-size: 13.5px; color: var(--f-muted); line-height: 1.5; }

/* ── Range / slider (custom track + thumb) ──────────────────── */
.forms-range { display: flex; align-items: center; gap: 16px; }
.forms-range input[type="range"] {
    flex: 1; min-width: 0; height: 26px; background: transparent; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.forms-range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: var(--f-line-2); }
.forms-range input[type="range"]::-moz-range-track { height: 6px; border-radius: 999px; background: var(--f-line-2); }
.forms-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; margin-top: -7px; width: 20px; height: 20px; border-radius: 999px;
    background: #fff; border: 2px solid var(--f-accent); box-shadow: 0 2px 6px rgba(16,24,40,.18); transition: transform .1s ease;
}
.forms-range input[type="range"]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 999px; background: #fff; border: 2px solid var(--f-accent); box-shadow: 0 2px 6px rgba(16,24,40,.18);
}
.forms-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.forms-range output {
    min-width: 3em; text-align: center; font-weight: 700; font-size: 14px; color: var(--f-accent);
    font-variant-numeric: tabular-nums; background: var(--f-soft); border: 1px solid var(--f-line); border-radius: 9px; padding: 6px 10px;
}

/* ── Rating (stars) ─────────────────────────────────────────── */
.forms-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; font-size: 34px; line-height: 1; }
.forms-rating input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.forms-rating label { color: #D9DEE6; cursor: pointer; transition: color .12s ease, transform .12s ease; }
.forms-rating label:hover { transform: scale(1.12); }
.forms-rating input:checked ~ label,
.forms-rating label:hover,
.forms-rating label:hover ~ label { color: #FBBF24; }
.forms-rating input:focus-visible + label { outline: 2px solid var(--f-accent); outline-offset: 3px; border-radius: 4px; }

/* ── Calculated field ───────────────────────────────────────── */
.forms-calc-out {
    display: inline-flex; align-items: center; min-width: 96px; min-height: 30px;
    font-size: 19px; font-weight: 700; color: var(--f-ink); font-variant-numeric: tabular-nums;
    padding: 8px 14px; background: linear-gradient(180deg, var(--f-soft), #fff);
    border: 1.5px solid var(--f-line); border-radius: 12px;
}

/* ── Signature pad ──────────────────────────────────────────── */
.sig-pad { border: 1.5px solid var(--f-line); border-radius: var(--f-radius); overflow: hidden; background: #fff; }
.sig-tabs { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--f-line); background: var(--f-soft); }
.sig-tab { border: 0; background: transparent; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var(--f-muted); cursor: pointer; border-radius: 8px; }
.sig-tab:hover { color: var(--f-ink); }
.sig-tab.is-active { color: var(--f-accent); background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.sig-clear { margin-left: auto; border: 0; background: transparent; padding: 7px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--f-muted); cursor: pointer; border-radius: 8px; }
.sig-clear:hover { color: #DC2626; background: #FEF2F2; }
.sig-stage { position: relative; }
.sig-canvas {
    display: block; width: 100%; height: 150px; touch-action: none; cursor: crosshair;
    background:
        linear-gradient(#fff, #fff) padding-box,
        repeating-linear-gradient(transparent, transparent 39px, var(--f-line-2) 39px, var(--f-line-2) 40px);
}
/* Empty-state guide, centred inside the blank draw canvas (draw mode only). */
.sig-stage::before {
    content: "Sign here";
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    font-size: 15px; font-style: italic; color: var(--f-muted); opacity: .5; pointer-events: none;
}
.sig-pad.mode-draw.is-empty .sig-stage::before { display: flex; }
/* In Type mode the ruled drawing lines are pointless — show a clean surface. */
.sig-pad.mode-type .sig-canvas { background: #fff; }
.sig-type-input {
    position: absolute; left: 14px; right: 14px; top: 14px; box-sizing: border-box;
    border: 1.5px solid var(--f-line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px;
    background: #fff; color: var(--f-ink); outline: none;
}
.sig-type-input:focus { border-color: var(--f-accent); box-shadow: 0 0 0 3px var(--f-ring); }
.sig-pad.sig-invalid { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,.14); }

/* ── Success state ──────────────────────────────────────────── */
.forms-public-success { text-align: center; padding-top: 30px; }
.forms-public-success h1 { margin: 18px 0 8px; font-size: 24px; }
.forms-public-success p { color: var(--f-muted); font-size: 15px; }
.forms-public-success-icon {
    width: 64px; height: 64px; margin: 0 auto; border-radius: 999px;
    background: var(--success-soft, #ECFDF5); color: var(--success, #16A34A); display: grid; place-items: center;
    box-shadow: 0 0 0 8px rgba(22,163,74,.06);
}
.forms-public-success-icon svg { width: 30px; height: 30px; }

/* ── Footer ─────────────────────────────────────────────────── */
.forms-public-footer { text-align: center; padding: 26px 16px 34px; font-size: 12.5px; color: #98A2B3; }

/* ── Alerts ─────────────────────────────────────────────────── */
.forms-public-card .alert { border-radius: 12px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 18px; }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 560px) {
    .forms-public-shell { padding: 22px 12px; }
    .forms-public-card { padding: 26px 20px 22px; border-radius: 18px; }
    .forms-public-header h1 { font-size: 22px; }
    .forms-steps-nav { flex-wrap: wrap; }
    .forms-steps-nav .btn { flex: 1; min-width: 0; }
    .forms-steps-nav [data-forms-back] { flex-basis: 100%; order: 3; margin-right: 0; }
}

/* ─── Choice cards (select/radio "Display as cards") ────────── */
.forms-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.forms-card-wrap { position: relative; }
.forms-card-wrap input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.forms-card {
    display: flex; align-items: center; gap: 14px; height: 100%; box-sizing: border-box;
    padding: 16px 18px; cursor: pointer;
    background: var(--f-surface); border: 1.5px solid var(--f-line); border-radius: var(--f-radius);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .12s ease;
}
.forms-card:hover { border-color: #C7D2E0; transform: translateY(-1px); box-shadow: 0 10px 24px -14px rgba(16,24,40,.30); }
.forms-card-ico {
    flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
    background: var(--f-soft); color: var(--f-muted); transition: background .15s ease, color .15s ease;
}
.forms-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forms-card-title { font-size: 15px; font-weight: 700; color: var(--f-ink); }
.forms-card-desc { font-size: 12.5px; color: var(--f-muted); line-height: 1.4; }
.forms-card-check {
    margin-left: auto; flex: none; width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
    color: #fff; background: var(--f-accent); opacity: 0; transform: scale(.6);
    transition: opacity .16s var(--ease, ease), transform .16s cubic-bezier(.34,1.56,.64,1);
}
.forms-card-check svg { width: 14px; height: 14px; }
.forms-card-wrap input:checked + .forms-card {
    border-color: var(--f-accent); background: rgba(37,99,235,.045); box-shadow: inset 0 0 0 1px var(--f-accent);
}
.forms-card-wrap input:checked + .forms-card .forms-card-title { color: var(--f-accent-d); }
.forms-card-wrap input:checked + .forms-card .forms-card-ico { background: rgba(37,99,235,.12); color: var(--f-accent); }
.forms-card-wrap input:checked + .forms-card .forms-card-check { opacity: 1; transform: scale(1); }
.forms-card-wrap input:focus-visible + .forms-card { box-shadow: 0 0 0 4px var(--f-ring); border-color: var(--f-accent); }

/* ─── Two-column layout (half-width fields, reference .f-grid) ─ */
.forms-public-card form, .forms-step { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; }
.forms-public-card form > *, .forms-step > * { grid-column: 1 / -1; }
.forms-public-card .field--half { grid-column: span 1; }
@media (max-width: 560px) { .forms-public-card .field--half { grid-column: 1 / -1; } }

/* ─── Section heading → uppercase eyebrow + divider rule ─────── */
.forms-heading { margin: 28px 0 10px; padding-top: 0; border-top: 0; }
.forms-heading:first-child { margin-top: 0; }
.forms-heading h3 {
    display: flex; align-items: center; gap: 14px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--f-muted);
}
.forms-heading h3::after { content: ""; flex: 1; height: 1px; background: var(--f-line); }
.forms-heading p { margin: 6px 0 0; }

/* ─── Step header (per-step title, reference style) ─────────── */
.forms-steps-bar { margin-bottom: 26px; }
.forms-step-head { margin-bottom: 22px; }
/* A step with no title/subtitle should not reserve a big empty gap. */
.forms-step-head.is-bare { margin-bottom: 8px; }
.forms-step-head.is-bare .forms-step-eyebrow { margin-bottom: 0; }
.forms-step-eyebrow {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 10px;
    font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--f-accent);
}
.forms-step-dot { width: 18px; height: 2px; border-radius: 2px; background: var(--f-accent); }
.forms-step-title {
    font-family: var(--font-display, "Syne", -apple-system, sans-serif);
    margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.018em; line-height: 1.12; color: var(--f-ink);
}
.forms-step-sub { margin: 10px 0 0; font-size: 15px; color: var(--f-muted); line-height: 1.55; }
@media (max-width: 560px) { .forms-step-title { font-size: 20px; } }

/* ─── Form-title kicker (small brand line on multi-step forms) ─ */
.forms-public-kicker {
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--f-muted); margin-bottom: 22px;
}

/* ─── Input leading icons (email→✉, phone→☎, etc.) ──────────── */
.forms-inp { position: relative; }
.forms-inp-ico {
    position: absolute; left: 15px; top: 0; bottom: 0;
    display: flex; align-items: center; color: #98A2B3; pointer-events: none;
    transition: color .16s ease;
}
.forms-inp-ico svg { width: 18px; height: 18px; }
.forms-public-card .forms-inp input.has-ico { padding-left: 46px !important; }
.forms-inp:focus-within .forms-inp-ico { color: var(--f-accent); }

/* Tidy the gap before the step nav (was last-field margin + nav margin). */
.forms-step > .field:last-of-type { margin-bottom: 4px; }

/* ─── Inline validation (live green-check / red state) ──────── */
.forms-inp-status {
    position: absolute; right: 13px; top: 0; bottom: 0; width: 20px;
    display: none; pointer-events: none;
}
.field.is-valid .forms-inp .forms-inp-status {
    display: block;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/18px no-repeat;
}
.field.is-valid .forms-inp:not(.forms-inp-native) input { padding-right: 40px; }
.forms-public-card .field.is-valid input:not(:focus),
.forms-public-card .field.is-valid select:not(:focus),
.forms-public-card .field.is-valid textarea:not(:focus) { border-color: #10B981 !important; }
.forms-public-card .field.is-invalid input:not(:focus),
.forms-public-card .field.is-invalid select:not(:focus),
.forms-public-card .field.is-invalid textarea:not(:focus) { border-color: #EF4444 !important; background: #FEF6F6 !important; }
.field.is-invalid .field-label { color: #B42318; }
.field .js-err { animation: forms-in-next .25s ease; }

/* ─── Numbered step rail (①②③) ──────────────────────────────── */
/* Compact, grouped cluster — ①②③ sit together (no connector lines),
   not spread across the full width. */
.forms-rail { display: inline-flex; align-items: center; gap: 10px; list-style: none; margin: 0 0 20px; padding: 0; }
.forms-rail-item { display: flex; align-items: center; }
.forms-rail-dot {
    flex: none; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; background: var(--f-line-2); color: var(--f-muted);
    transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
.forms-rail-item.is-active .forms-rail-dot { background: var(--f-accent); color: #fff; box-shadow: 0 0 0 3px var(--f-ring); }
.forms-rail-item.is-done  .forms-rail-dot {
    color: transparent; cursor: pointer;
    background: var(--f-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (max-width: 480px) { .forms-rail-dot { width: 20px; height: 20px; font-size: 10px; } }

/* ─── Compact density (per-form Appearance setting) ─────────── */
.forms-density-compact.forms-public-card { padding: 28px 26px 24px; border-radius: 18px; }
.forms-density-compact .field { margin-bottom: 13px; }
.forms-density-compact .field:last-of-type { margin-bottom: 18px; }
.forms-density-compact .field-label { font-size: 12.5px; margin-bottom: 5px; }
.forms-density-compact input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.forms-density-compact select,
.forms-density-compact textarea { padding: 10px 13px; font-size: 14px; border-radius: 11px; }
.forms-density-compact .forms-inp input.has-ico { padding-left: 42px !important; }
.forms-density-compact textarea { min-height: 92px; }
.forms-density-compact .btn { padding: 11px 18px; font-size: 14px; }
.forms-density-compact .btn-lg { padding: 12px 18px; font-size: 14.5px; }
.forms-density-compact .forms-public-header h1 { font-size: 22px; }
.forms-density-compact .forms-step-title { font-size: 19px; }
.forms-density-compact .forms-step-head { margin-bottom: 16px; }
.forms-density-compact .forms-step-sub { font-size: 14px; }
.forms-density-compact .forms-card { padding: 13px 15px; }
.forms-density-compact .forms-card-ico { width: 40px; height: 40px; }
.forms-density-compact .forms-cards { gap: 10px; }
.forms-density-compact .forms-rail { margin-bottom: 18px; }
.forms-density-compact .forms-steps-nav { margin-top: 18px; }
.forms-density-compact .forms-rating { font-size: 28px; }

/* ─── Responsive — phones & small tablets ───────────────────── */
@media (max-width: 600px) {
    .forms-public-shell { padding: 14px 10px; }
    .forms-public-card { padding: 24px 18px 20px; border-radius: 16px; }
    .forms-public-header h1 { font-size: 21px; }
    .forms-step-title { font-size: 20px; }
    .forms-step-head { margin-bottom: 16px; }
    /* iOS zooms inputs under 16px on focus — force 16px on phones. */
    .forms-public-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    .forms-public-card select,
    .forms-public-card textarea { font-size: 16px !important; }
    .forms-cards { grid-template-columns: 1fr; gap: 10px; }
    .forms-card { padding: 14px 15px; }
    .forms-card-ico { width: 42px; height: 42px; }
    .forms-range { gap: 10px; }
    .forms-rating { font-size: 30px; }
    .forms-density-compact.forms-public-card { padding: 22px 16px 18px; }
}
@media (max-width: 400px) {
    .forms-public-card { padding: 20px 14px 16px; }
    .forms-public-kicker { margin-bottom: 16px; }
    .forms-rail { margin-bottom: 16px; gap: 8px; }
    .forms-rail-dot { width: 19px; height: 19px; font-size: 10px; }
    .forms-step-title { font-size: 20px; }
    .forms-public-header h1 { font-size: 20px; }
    .forms-card-desc { font-size: 12px; }
}

/* ─── Small-device responsiveness ───────────────────────────── */
@media (max-width: 600px) {
    .forms-public-shell { padding: 14px 10px; }
    .forms-public-card { padding: 22px 16px 18px; border-radius: 16px; }
    .forms-public-header h1 { font-size: 21px; }
    .forms-step-title { font-size: 20px; }
    .forms-step-head { margin-bottom: 16px; }
    /* iOS zoom guard — inputs must be >= 16px so Safari doesn't zoom on focus */
    .forms-public-card input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
    .forms-public-card select,
    .forms-public-card textarea { font-size: 16px !important; }
    .forms-cards { grid-template-columns: 1fr; gap: 10px; }   /* one choice card per row */
    .forms-card { padding: 13px 14px; }
    .forms-card-ico { width: 42px; height: 42px; }
    .forms-rating { font-size: 30px; }
    .forms-public-kicker { margin-bottom: 18px; }
}
@media (max-width: 400px) {
    .forms-public-card { padding: 18px 13px 14px; }
    .forms-rail { gap: 8px; }
    .forms-rail-dot { width: 19px; height: 19px; font-size: 10px; }
    .forms-step-title { font-size: 19px; }
    .forms-card-ico { width: 38px; height: 38px; }
}

/* ─── Appearance: filled field style ────────────────────────── */
.forms-fields-filled input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.forms-fields-filled select,
.forms-fields-filled textarea { background: var(--f-soft); border-color: transparent; }
.forms-fields-filled input:hover:not(:focus),
.forms-fields-filled select:hover:not(:focus),
.forms-fields-filled textarea:hover:not(:focus) { background: #EEF1F5; border-color: transparent; }
.forms-fields-filled input:focus,
.forms-fields-filled select:focus,
.forms-fields-filled textarea:focus { background: #fff; border-color: var(--f-accent); }

/* ─── Appearance: corner shapes ─────────────────────────────── */
.forms-shape-pill .btn { border-radius: 999px; }
.forms-shape-square .btn,
.forms-shape-square input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
.forms-shape-square select,
.forms-shape-square textarea,
.forms-shape-square .forms-card,
.forms-shape-square .forms-calc-out { border-radius: 6px; }

/* ─── Appearance: hidden labels (visually hidden, kept for AT) ─ */
.forms-hide-labels .field > label.field-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
