.magnolia-form {
  --mf-form-bg:#fff; --mf-title:#302d2a; --mf-description:#746b64; --mf-label:#302d2a;
  --mf-field-text:#302d2a; --mf-placeholder:#8a817a; --mf-field-bg:#fcfbfa; --mf-border:#ded9d4;
  --mf-select-bg:#fcfbfa; --mf-select-text:#302d2a; --mf-backdrop-filter:none;
  --mf-focus:#735647; --mf-choice:#735647; --mf-link:#735647; --mf-button-bg:#735647;
  --mf-button-text:#fff; --mf-button-hover-bg:#654a3d; --mf-button-hover-text:#fff;
  --mf-success-bg:#f0f7f0; --mf-success-text:#285b32; --mf-error-bg:#fff1f0; --mf-error-text:#b42318;
  --mf-field-radius:10px; --mf-button-radius:10px; --mf-form-radius:20px; --mf-form-padding:clamp(20px,4vw,40px);
  --mf-field-padding-y:13px; --mf-field-padding-x:15px; --mf-gap-row:24px; --mf-gap-column:20px;
  box-sizing:border-box; color:var(--mf-title); font:400 16px/1.5 system-ui,sans-serif; max-width:720px; width:100%;
  margin:0 auto; padding:var(--mf-form-padding); background:var(--mf-form-bg); border:0;
  border-radius:var(--mf-form-radius); box-shadow:0 12px 40px #352b200a;
  -webkit-backdrop-filter:var(--mf-backdrop-filter); backdrop-filter:var(--mf-backdrop-filter);
}
.magnolia-form * { box-sizing:border-box; }
.magnolia-form [hidden] { display:none!important; }
.magnolia-form .mf-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--mf-gap-row) var(--mf-gap-column); }
.magnolia-form .mf-field { min-width:0; grid-column:1/-1; }
.magnolia-form .mf-half { grid-column:auto; }
.magnolia-form label,.magnolia-form legend { display:block; font-size:.9em; font-weight:600; margin:0 0 8px; color:var(--mf-label); }
.magnolia-form input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.magnolia-form textarea,.magnolia-form select {
  width:100%; max-width:100%; border:1px solid var(--mf-border); border-radius:var(--mf-field-radius); background:var(--mf-field-bg);
  padding:var(--mf-field-padding-y) var(--mf-field-padding-x); font:inherit; color:var(--mf-field-text);
  transition:border-color .2s,box-shadow .2s; min-height:50px;
}
.magnolia-form input::placeholder,.magnolia-form textarea::placeholder { color:var(--mf-placeholder); opacity:1; }
.magnolia-form select { background-color:var(--mf-select-bg); color:var(--mf-select-text); color-scheme:var(--mf-select-scheme,normal); }
.magnolia-form select option { background:var(--mf-select-bg); color:var(--mf-select-text); font:inherit; }
.magnolia-form input:focus,.magnolia-form textarea:focus,.magnolia-form select:focus { border-color:var(--mf-focus); outline:2px solid var(--mf-focus); outline-offset:2px; }
.magnolia-form input[aria-invalid=true],.magnolia-form select[aria-invalid=true],.magnolia-form textarea[aria-invalid=true] { border-color:var(--mf-error-text); }
.magnolia-form fieldset { border:0; margin:0; padding:0; min-width:0; }
.magnolia-form .mf-help { display:block; color:var(--mf-description); margin-top:6px; font-size:.8em; white-space:pre-line; }
.magnolia-form .mf-error { color:var(--mf-error-text); font-size:.8em; display:block; }
.magnolia-form a { color:var(--mf-link); }
.magnolia-form .mf-row { position:relative; margin:14px 0; padding:18px; border:1px solid var(--mf-border); border-radius:var(--mf-field-radius); background:var(--mf-field-bg); }
.magnolia-form .mf-choice { display:flex; align-items:baseline; gap:9px; font-weight:400; }
.magnolia-form .mf-choice input,.magnolia-form select { accent-color:var(--mf-choice); }
.magnolia-form button { font:inherit; cursor:pointer; }
.magnolia-form button:focus-visible { outline:3px solid var(--mf-focus); outline-offset:3px; }
.magnolia-form .mf-add { border:1px dashed var(--mf-border); border-radius:var(--mf-field-radius); color:var(--mf-link); background:transparent; padding:12px 18px; }
.magnolia-form .mf-remove { border:0; background:transparent; color:var(--mf-error-text); padding:8px 0 0; font-size:.8em!important; }
.magnolia-form .mf-submit { display:flex; justify-content:center; align-items:center; gap:30px; width:100%; padding:16px 24px; border:0;
  border-radius:var(--mf-button-radius); background:var(--mf-button-bg); color:var(--mf-button-text); font-weight:600!important;
  margin-top:22px; transition:background-color .2s,color .2s; }
.magnolia-form .mf-submit:hover { background:var(--mf-button-hover-bg); color:var(--mf-button-hover-text); }
.magnolia-form .mf-submit:disabled { opacity:.6; cursor:wait; }
.magnolia-form .mf-add:disabled { opacity:.5; cursor:default; }
.magnolia-form .mf-feedback { white-space:pre-line; margin-top:16px; font-size:.9em; }
.magnolia-form .mf-feedback.mf-success { padding:18px; background:var(--mf-success-bg); color:var(--mf-success-text); border-radius:var(--mf-field-radius); }
.magnolia-form .mf-feedback.mf-failure { padding:18px; background:var(--mf-error-bg); color:var(--mf-error-text); border-radius:var(--mf-field-radius); }
.magnolia-form .mf-trap { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media(max-width:600px) {
  .magnolia-form .mf-half { grid-column:1/-1; }
  .magnolia-form .mf-fields { gap:var(--mf-gap-row); }
  .magnolia-form { border-radius:min(var(--mf-form-radius),14px); }
}