/* Step by step form. Structure and behavior only: restyle freely to match the chosen direction.
   Override these variables on .flow (or :root) instead of editing the rules. */
.flow{
  --ff-ink:#16141A; --ff-ink-2:#2B2830; --ff-mute:#6A6470; --ff-mute-2:#9A939C;
  --ff-bg:#FFFDF9; --ff-rule:rgba(22,20,26,.14); --ff-rule-2:rgba(22,20,26,.28);
  --ff-accent:#E6007E; --ff-accent-soft:rgba(230,0,126,.18); --ff-err:#B00D27; --ff-err-bg:#FFF7F6;
  --ff-radius:2px; --ff-ease:cubic-bezier(.2,.7,.1,1);
  position:relative;
}
.flow .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.flow .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

/* progress */
.flow-head{display:none}
.js-flow .flow-head{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.flow-count{flex:none;display:flex;align-items:baseline;gap:6px;font-size:.8125rem;color:var(--ff-mute)}
.flow-count b{font-weight:700;font-size:1.25rem;color:var(--ff-ink);font-variant-numeric:tabular-nums}
.flow-bar{flex:1;height:3px;background:var(--ff-rule)}
.flow-bar i{display:block;height:100%;width:0;background:var(--ff-accent);transition:width .6s var(--ff-ease)}

/* steps */
.step{position:relative;padding:0 0 22px;margin-bottom:22px;border-bottom:1px dashed var(--ff-rule-2)}
.step:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.js-flow .step[hidden]{display:none}
.step.enter{animation:ffStepIn .6s var(--ff-ease) both}
@keyframes ffStepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.q{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-weight:600;font-size:1.1875rem;line-height:1.35;margin:0 0 12px;color:var(--ff-ink)}
.qn{font-size:.75rem;font-weight:600;color:var(--ff-accent);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.q .opt{font-size:.8125rem;font-weight:400;color:var(--ff-mute)}
.js-flow .step.done:not(.err) .q{color:var(--ff-ink-2)}
.js-flow .step.done:not(.err) .qn::after{content:"✓";margin-inline-start:6px;color:var(--ff-ink)}

/* inputs */
.flow input[type=text],.flow input[type=tel],.flow input[type=email],.flow textarea{width:100%;font:inherit;font-size:1.0625rem;color:var(--ff-ink);background:var(--ff-bg);border:1px solid var(--ff-rule-2);border-radius:var(--ff-radius);padding:14px 16px;transition:border-color .2s,box-shadow .2s;text-align:start}
.flow input[type=email],.flow input[type=tel]{direction:ltr;text-align:end}
.flow input::placeholder{color:var(--ff-mute-2)}
.flow input:focus,.flow textarea:focus,.sel select:focus{outline:none;border-color:var(--ff-ink);box-shadow:0 0 0 3px var(--ff-accent-soft)}
.step.err input,.step.err select,.step.err .msel summary{border-color:var(--ff-err);background-color:var(--ff-err-bg)}

/* an unticked required box is marked like any unfilled field */
.step.err-consent .consent input{border-color:var(--ff-err);background-color:var(--ff-err-bg)}

/* single choice: native select, styled */
.sel{position:relative}
.sel select{-webkit-appearance:none;appearance:none;width:100%;font:inherit;font-size:1.0625rem;color:var(--ff-ink);background:var(--ff-bg);border:1px solid var(--ff-rule-2);border-radius:var(--ff-radius);padding:14px 16px;padding-inline-end:44px;cursor:pointer;text-align:start}
.sel select:invalid{color:var(--ff-mute-2)}
.sel::after,.msel summary::after{content:"";position:absolute;inset-inline-end:18px;top:50%;width:9px;height:9px;border-left:1.6px solid var(--ff-ink);border-bottom:1.6px solid var(--ff-ink);transform:translateY(-70%) rotate(-45deg);pointer-events:none;transition:transform .25s var(--ff-ease)}

/* multiple choice: a dropdown list that opens inside the card and scrolls */
.msel{position:relative}
.msel summary{list-style:none;position:relative;display:block;cursor:pointer;font-size:1.0625rem;color:var(--ff-mute-2);background:var(--ff-bg);border:1px solid var(--ff-rule-2);border-radius:var(--ff-radius);padding:14px 16px;padding-inline-end:44px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msel summary::-webkit-details-marker{display:none}
.msel.has summary{color:var(--ff-ink)}
.msel[open] summary{border-color:var(--ff-ink)}
.msel[open] summary::after{transform:translateY(-20%) rotate(135deg)}
.msel summary:focus-visible{outline:none;border-color:var(--ff-ink);box-shadow:0 0 0 3px var(--ff-accent-soft)}
.msel-list{position:relative;margin-top:4px;max-height:232px;overflow-y:auto;overscroll-behavior:contain;background:var(--ff-bg);border:1px solid var(--ff-ink);border-radius:var(--ff-radius);padding:6px 0}
.msel-list label{display:flex;align-items:center;gap:12px;padding:11px 16px;font-size:1rem;cursor:pointer}
.msel-list label:hover{background:rgba(0,0,0,.05)}
.msel-list input{appearance:none;-webkit-appearance:none;flex:none;width:17px;height:17px;margin:0;border:1.25px solid var(--ff-ink);border-radius:2px;display:grid;place-content:center}
.msel-list input::after{content:"";width:9px;height:9px;background:var(--ff-accent);transform:scale(0);transition:transform .2s var(--ff-ease)}
.msel-list input:checked::after{transform:scale(1)}

.other{margin-top:10px}
.other[hidden]{display:none}
.msg{color:var(--ff-err);font-size:.875rem;font-weight:500;margin-top:8px}
.msg:empty{display:none}

/* navigation */
.step-nav{display:flex;align-items:center;gap:18px;margin-top:14px}
.flow:not(.js-flow) .step-nav,.js-flow .step.done .step-nav{display:none}
.step-nav .next{display:inline-flex;align-items:center;gap:10px;background:var(--ff-ink);color:var(--ff-bg);border:0;border-radius:var(--ff-radius);font:inherit;font-weight:500;font-size:.9375rem;padding:11px 20px;cursor:pointer}
.step-nav .next:hover{background:var(--ff-accent)}

/* consent */
.consent{display:flex;align-items:flex-start;gap:12px;font-size:.9375rem;line-height:1.5;color:var(--ff-ink-2);cursor:pointer;padding:14px 16px;border:1px solid var(--ff-rule-2);border-radius:var(--ff-radius);margin:16px 0 18px}
.consent:has(input:checked){border-color:var(--ff-ink);color:var(--ff-ink)}
.consent input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:2px 0 0;border:1.25px solid var(--ff-ink);border-radius:2px;display:grid;place-content:center;background:var(--ff-bg)}
.consent input::after{content:"";width:5px;height:10px;border:solid var(--ff-bg);border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg) scale(0);transition:transform .2s var(--ff-ease)}
.consent input:checked{background:var(--ff-ink)}
.consent input:checked::after{transform:translateY(-1px) rotate(45deg) scale(1)}

/* alert + submit */
.flow .alert{display:none;border-inline-start:3px solid var(--ff-err);background:var(--ff-err-bg);color:var(--ff-err);padding:13px 16px;font-weight:500;margin-bottom:20px}
.flow .alert.show{display:block}
.flow [type=submit][disabled]{opacity:.75;cursor:progress}

@media (prefers-reduced-motion: reduce){.step.enter{animation:none}.flow-bar i,.msel-list input::after,.consent input::after{transition:none}}