/* ==========================================================================
   ALLOut Security · Registration form, single column card (registration-handoff.css)
   Handoff "ALLOut Portal Registration - Login", Screen 1: Registration. The LOOK only: every word
   on the page stays the form's own (Owner, 8 October 2026).
   Loaded only when the Login Handler setting "Registration form: design" is the single column card
   (functions/auth-registration.php). Every rule needs form.allout-reg--handoff: on the form itself, or
   through :has() for the page around it: the builder section that holds the form's wrap directly (never a
   section around that one) and the title column right before the form's, so nothing else on the site changes. The theme's .acfe-form rules (style.css) and live's Additional CSS use !important;
   these outrank them on this form only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens and the icons (Lucide, handoff "Icons"), as masks drawn in the text colour
   -------------------------------------------------------------------------- */
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff),
form.acfe-form.allout-reg--handoff {
  --r-navy-900: #081634; --r-navy-700: #14224a;
  --r-red-500: #E8323F; --r-red-hover: #c92632; --r-red-press: #a91f29;
  --r-link: #d11f2c; --r-link-hover: #ae1822;
  --r-blue-500: #2B4FC9; --r-ring: 0 0 0 3px rgba(43,79,201,.18);
  --r-text: #3e4658; --r-muted: #5a6379; --r-idle: #8a92a6;
  --r-border: #d2d8e4; --r-border-valid: #9fd3b4; --r-border-error: #e05560;
  --r-bg: #fbfcfd; --r-bg-error: #fff7f7;
  --r-error: #c4202c; --r-success: #1f8a4c; --r-chip: #c7cedb;
  --r-card-border: #e3e7ef; --r-panel: #f5f7fa; --r-track: #eef1f6;
  --r-font-display: 'Poppins', system-ui, sans-serif;
  --r-font-text: 'Mulish', system-ui, sans-serif;
  --r-pad: 36px;
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
  --i-building-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z'/%3E%3Cpath d='M6 12H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h2'/%3E%3Cpath d='M18 9h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M10 6h4'/%3E%3Cpath d='M10 10h4'/%3E%3Cpath d='M10 14h4'/%3E%3Cpath d='M10 18h4'/%3E%3C/svg%3E");
  --i-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16'/%3E%3Crect x='2' y='6' width='20' height='14' rx='2'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --i-alert-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
  --i-cookie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5'/%3E%3Cpath d='M8.5 8.5v.01'/%3E%3Cpath d='M16 15.5v.01'/%3E%3Cpath d='M12 12v.01'/%3E%3Cpath d='M11 17v.01'/%3E%3Cpath d='M7 14v.01'/%3E%3C/svg%3E");
  --i-help-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   1. The page area: soft grey into white, one centred column of 760px, 28px between title and card
   -------------------------------------------------------------------------- */
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) {
  background: linear-gradient(180deg, #f3f5f9 0, #fff 420px) !important;
  padding: 64px 48px 72px !important;
}
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) > .section_wrapper { max-width: 760px !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; }
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) .mcb-wrap,
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) .mcb-column,
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) .mcb-column-inner { float: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
.mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) .mcb-column:has(form.allout-reg--handoff) { margin-top: 28px !important; }

/* The title block (the builder column before the form's): centred; the heading, the line, then "Already have an account? Login". */
.mcb-column:has(+ .mcb-column form.allout-reg--handoff) .desc {
  text-align: center; font-family: var(--r-font-text); font-size: 15px; line-height: 1.5; color: var(--r-muted);
}
/* The heading is NOT touched: its font, size, weight, colour and margin stay the page's own (the Owner's Additional CSS,
   .h3-size), on every width (Owner, 8 October 2026: "I told you NOT to change the title"). The red words' colour and the
   line's colour and size are the Owner's own too (.theme_color, .bigger: "I wrote that - leave it be"). */
.mcb-column:has(+ .mcb-column form.allout-reg--handoff) .desc p.bigger {
  margin: 0 0 14px !important; font-family: var(--r-font-text); line-height: 1.5;
}
.mcb-column:has(+ .mcb-column form.allout-reg--handoff) .desc hr.no_line { display: none !important; }
.mcb-column:has(+ .mcb-column form.allout-reg--handoff) .desc a {
  color: var(--r-link) !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px;
}
.mcb-column:has(+ .mcb-column form.allout-reg--handoff) .desc a:hover { color: var(--r-link-hover) !important; }
.mcb-column:has(+ .mcb-column form.allout-reg--handoff) .desc a u { text-decoration: none; }

/* --------------------------------------------------------------------------
   2. The card: the form itself, white, thin edge, 4px corners, soft shadow
   -------------------------------------------------------------------------- */
form.acfe-form.allout-reg--handoff {
  box-sizing: border-box; width: 100%; margin: 0 !important; padding: 0 !important;
  background: #fff; border: 1px solid var(--r-card-border); border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(20,34,74,.25);
  overflow: hidden; text-align: left;
  font-family: var(--r-font-text); color: var(--r-text);
}

/* The progress (registration-handoff.js): the 4px track at the very top, its fill red to navy, "3 of 7 completed" right. */
form.allout-reg--handoff .allout-reg-progress__track { height: 4px; background: var(--r-track); }
form.allout-reg--handoff .allout-reg-progress__fill { width: 0; height: 100%; background: linear-gradient(90deg, var(--r-red-500), var(--r-navy-700)); transition: width .3s ease; }
form.allout-reg--handoff p.allout-reg-progress__label {
  margin: 0 !important; padding: 12px var(--r-pad) 0; text-align: right;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.4; color: var(--r-muted);
}

/* ACF's message after the server refused the form ("Validation failed. 2 fields require attention"): under the
   progress (registration-handoff.js moves it there; ACF puts it above the bar), drawn as the login card's error
   box: the tint, the red alert icon on the left, navy words, a grey × at the top right. */
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message {
  position: relative; display: flex !important; align-items: flex-start; gap: 10px; box-sizing: border-box;
  width: auto !important; max-width: none !important; min-height: 0 !important;
  margin: 12px var(--r-pad) 10px !important; padding: 12px 44px 12px 14px !important;
  background: #fff1f2 !important; border: 1px solid #ffe0e2 !important; border-radius: 4px !important;
  box-shadow: none !important; color: var(--r-navy-900) !important;
}
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message::before {
  content: ""; flex: none; width: 18px; height: 18px; margin-top: 1px;
  background-color: var(--r-red-500); -webkit-mask: var(--i-alert-circle) center / 18px 18px no-repeat; mask: var(--i-alert-circle) center / 18px 18px no-repeat;
}
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message p {
  margin: 0 !important; padding: 0 !important;
  font-family: var(--r-font-text) !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.4 !important; color: var(--r-navy-900) !important;
}
/* ACF's × (acf-icon -cancel, a dashicons letter): a grey × of its own, no circle; darker on hover. */
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message a.acf-notice-dismiss {
  position: absolute !important; top: 7px !important; right: 8px !important; display: block !important;
  width: 28px !important; height: 28px !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important;
  color: var(--r-muted) !important; opacity: 1 !important; text-decoration: none !important;
}
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message a.acf-notice-dismiss::before {
  content: "" !important; display: block !important; width: 16px !important; height: 16px !important; margin: 6px !important;
  font-family: inherit !important; background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message a.acf-notice-dismiss:hover { color: var(--r-navy-900) !important; background: rgba(8, 22, 52, .06) !important; }
form.acfe-form.allout-reg--handoff > .acf-notice.acf-error-message a.acf-notice-dismiss:focus-visible { outline: 2px solid var(--r-blue-500) !important; outline-offset: 0; }

/* --------------------------------------------------------------------------
   3. The body: a grid, two columns on a desktop, one on a phone (240px minimum each)
   -------------------------------------------------------------------------- */
form.acfe-form.allout-reg--handoff .acf-fields {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 18px !important;
  margin: 0 !important; padding: 8px var(--r-pad) 0 !important; border: 0 !important;
}
form.acfe-form.allout-reg--handoff .acf-fields > .acf-field {
  display: flex !important; flex-direction: column; gap: 6px;
  width: auto !important; min-width: 0; float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important;
}
form.acfe-form.allout-reg--handoff .acf-fields > .acf-field[data-name="allout_emailaddress"],
form.acfe-form.allout-reg--handoff .acf-fields > .acf-field-message,
form.acfe-form.allout-reg--handoff .acf-fields > .allout-reg-rules { grid-column: 1 / -1; }

/* The label (15px, navy, the red *), and its helper under it. */
form.acfe-form.allout-reg--handoff .acf-field .acf-label { display: flex; flex-direction: column; gap: 6px; margin: 0 !important; }
form.acfe-form.allout-reg--handoff .acf-field .acf-label label {
  display: block !important; margin: 0 !important; padding: 0;
  font-family: var(--r-font-text); font-size: 15px !important; font-weight: 700 !important; line-height: 1.4; letter-spacing: 0 !important; color: var(--r-navy-700) !important;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-label .acf-required { color: var(--r-red-500) !important; }
form.acfe-form.allout-reg--handoff .acf-field .acf-label p.description {
  margin: 0 !important; padding: 0; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5; color: var(--r-muted) !important;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-input { display: flex; flex-direction: column; gap: 6px; }

/* --------------------------------------------------------------------------
   4. The input row: icon left, input, tick (or the eye) right
   -------------------------------------------------------------------------- */
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap { position: relative; overflow: visible; }
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap input {
  display: block;
  box-sizing: border-box !important; width: 100% !important; height: 50px !important;
  margin: 0 !important; padding: 0 44px !important;
  font-family: var(--r-font-text) !important; font-size: 15px !important; line-height: 1.4 !important;
  color: var(--r-navy-700) !important; background: var(--r-bg) !important;
  border: 1px solid var(--r-border) !important; border-radius: 4px !important;
  box-shadow: none !important; outline: none !important;
  transition: border-color .15s, box-shadow .15s;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap input::placeholder { color: var(--r-idle) !important; opacity: 1; }
/* Valid as they type; error once touched (or the server's own, ACF's acf-error); focus over both. */
form.acfe-form.allout-reg--handoff .acf-field.is-valid .acf-input-wrap input { border-color: var(--r-border-valid) !important; }
form.acfe-form.allout-reg--handoff .acf-field.is-error .acf-input-wrap input,
form.acfe-form.allout-reg--handoff .acf-field.acf-error .acf-input-wrap input { border-color: var(--r-border-error) !important; background: var(--r-bg-error) !important; }
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap input:focus {
  border-color: var(--r-blue-500) !important; box-shadow: var(--r-ring) !important; background: #fff !important;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--r-bg) inset !important; box-shadow: 0 0 0 1000px var(--r-bg) inset !important;
  -webkit-text-fill-color: var(--r-navy-700) !important;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, var(--r-ring) !important; box-shadow: 0 0 0 1000px #fff inset, var(--r-ring) !important; }

/* The leading icon: grey, navy once valid, red in error. Never takes a click. */
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap::before {
  content: ""; position: absolute; z-index: 1; top: 50%; left: 14px; width: 18px; height: 18px; margin-top: -9px;
  background-color: var(--r-idle); -webkit-mask: var(--icon, none) center / 18px 18px no-repeat; mask: var(--icon, none) center / 18px 18px no-repeat;
  pointer-events: none; transition: background-color .15s;
}
form.acfe-form.allout-reg--handoff .acf-field.is-valid .acf-input-wrap::before { background-color: var(--r-navy-700); }
form.acfe-form.allout-reg--handoff .acf-field.is-error .acf-input-wrap::before,
form.acfe-form.allout-reg--handoff .acf-field.acf-error .acf-input-wrap::before { background-color: var(--r-error); }
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_emailaddress"] { --icon: var(--i-mail); }
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_firstname"],
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_lastname"] { --icon: var(--i-user); }
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_company"] { --icon: var(--i-building-2); }
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_title"] { --icon: var(--i-briefcase); }
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_password"],
form.acfe-form.allout-reg--handoff .acf-field[data-name="allout_passwordrepeat"] { --icon: var(--i-lock); }

/* The green tick, once valid (not on the password fields: they have the eye). */
form.acfe-form.allout-reg--handoff .acf-field .acf-input-wrap::after {
  content: ""; position: absolute; z-index: 1; top: 50%; right: 14px; width: 18px; height: 18px; margin-top: -9px;
  background-color: var(--r-success); -webkit-mask: var(--i-check) center / 18px 18px no-repeat; mask: var(--i-check) center / 18px 18px no-repeat;
  pointer-events: none; opacity: 0;
}
form.acfe-form.allout-reg--handoff .acf-field.is-valid:not(.allout-reg-field--eye) .acf-input-wrap::after { opacity: 1; }
/* No tick on a field the server refused (ACF's acf-error), until ACF clears it. */
form.acfe-form.allout-reg--handoff .acf-field.is-valid.acf-error .acf-input-wrap::after { opacity: 0; }
form.acfe-form.allout-reg--handoff .acf-field.allout-reg-field--eye .acf-input-wrap::after { display: none; }

/* The eye (registration-handoff.js): 38x38 at the right, eye while hidden, eye-off while shown. */
form.acfe-form.allout-reg--handoff .acf-field button.allout-reg-eye {
  position: absolute; z-index: 2; top: 50%; right: 6px; display: grid; place-items: center;
  width: 38px !important; height: 38px !important; min-width: 0 !important; margin: -19px 0 0 !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important;
  color: var(--r-muted) !important; cursor: pointer; transition: background .15s, color .15s;
}
form.acfe-form.allout-reg--handoff .acf-field button.allout-reg-eye:hover { background: var(--r-track) !important; color: var(--r-navy-700) !important; }
form.acfe-form.allout-reg--handoff .acf-field button.allout-reg-eye:focus-visible { outline: none; box-shadow: var(--r-ring) !important; }
form.acfe-form.allout-reg--handoff .allout-reg-eye[data-shown="false"] .allout-reg-eye__hide,
form.acfe-form.allout-reg--handoff .allout-reg-eye[data-shown="true"] .allout-reg-eye__show { display: none; }

/* --------------------------------------------------------------------------
   5. The line under a field: ours (the browser check) and ACF's (the server's answer), the same look
   -------------------------------------------------------------------------- */
form.acfe-form.allout-reg--handoff .allout-reg-error:not([hidden]) {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--r-error);
}
form.acfe-form.allout-reg--handoff .allout-reg-error[hidden] { display: none !important; }
form.acfe-form.allout-reg--handoff .allout-reg-error__icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
form.acfe-form.allout-reg--handoff .acf-field .acf-input > .acf-notice.-error {
  order: 3; position: relative; display: block;
  margin: 0 !important; padding: 0 0 0 20px !important; background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--r-error) !important;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-input > .acf-notice.-error::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 14px; height: 14px;
  background-color: var(--r-error); -webkit-mask: var(--i-alert-circle) center / 14px 14px no-repeat; mask: var(--i-alert-circle) center / 14px 14px no-repeat;
}
form.acfe-form.allout-reg--handoff .acf-field .acf-input > .acf-notice.-error p { margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--r-error) !important; }
/* A link in the server's message (the address to write to, Login Handler page): the line's own red, underlined. */
form.acfe-form.allout-reg--handoff .acf-field .acf-input > .acf-notice.-error a:not(.acf-notice-dismiss) { color: inherit !important; text-decoration: underline !important; text-underline-offset: 2px; }
/* The meter (password-meter.js), when it is switched on, stays under the Password input. */
form.acfe-form.allout-reg--handoff .acf-field .acf-input > .allout-pwm { order: 2; margin: 0 !important; }

/* --------------------------------------------------------------------------
   6. The two rules under the passwords (registration-handoff.js): a chip each, grey, green once met
   -------------------------------------------------------------------------- */
form.acfe-form.allout-reg--handoff .allout-reg-rules { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: -6px; }
form.acfe-form.allout-reg--handoff .allout-reg-rule { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--r-muted); }
form.acfe-form.allout-reg--handoff .allout-reg-rule__chip { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--r-chip); color: #fff; transition: background .2s; }
form.acfe-form.allout-reg--handoff .allout-reg-rule.is-met { color: var(--r-success); }
form.acfe-form.allout-reg--handoff .allout-reg-rule.is-met .allout-reg-rule__chip { background: var(--r-success); }

/* --------------------------------------------------------------------------
   7. The notes (the form's message field): the hint, then the cookie and help texts as grey panels
   -------------------------------------------------------------------------- */
/* (0,5,1): the field rule above, (0,4,1), would take its padding and border away. */
form.acfe-form.allout-reg--handoff .acf-fields > .acf-field.acf-field-message { padding-top: 20px !important; border-top: 1px solid var(--r-card-border) !important; }
form.acfe-form.allout-reg--handoff .acf-field-message .acf-label { display: none !important; }
form.acfe-form.allout-reg--handoff .acf-field-message .acf-input { gap: 12px; }
/* The hint: its display, bottom margin, weight and italic are the Owner's own Additional CSS (.password-hint-label), left as they are. */
form.acfe-form.allout-reg--handoff .acf-field-message .password-hint-label {
  margin-top: 0 !important; font-size: 14px; line-height: 1.5; color: var(--r-navy-700) !important;
}
/* A panel per paragraph: a block (its words and links flow as one text), the icon hung on the left. */
form.acfe-form.allout-reg--handoff .acf-field-message .acf-input > p {
  position: relative; margin: 0 !important; padding: 14px 16px 14px 48px !important;
  background: var(--r-panel); border-radius: 4px;
  font-size: 14px; line-height: 1.6; color: var(--r-text);
}
form.acfe-form.allout-reg--handoff .acf-field-message .acf-input > p::before {
  content: ""; position: absolute; left: 16px; top: 15px; width: 20px; height: 20px;
  background-color: var(--r-navy-700); -webkit-mask: var(--i-help-circle) center / 20px 20px no-repeat; mask: var(--i-help-circle) center / 20px 20px no-repeat;
}
form.acfe-form.allout-reg--handoff .acf-field-message .acf-input > p:first-of-type::before { -webkit-mask-image: var(--i-cookie); mask-image: var(--i-cookie); }
form.acfe-form.allout-reg--handoff .acf-field-message a {
  color: var(--r-link) !important; font-weight: 700; text-decoration: underline !important; text-underline-offset: 3px;
}
form.acfe-form.allout-reg--handoff .acf-field-message a:hover { color: var(--r-link-hover) !important; }
form.acfe-form.allout-reg--handoff .acf-field-message a[href^="mailto:"] { white-space: nowrap; }
form.acfe-form.allout-reg--handoff .acf-field-message a u { text-decoration: none; }

/* --------------------------------------------------------------------------
   8. Submit: centred, red, 320px wide (full width on a phone), the arrow after the words
   -------------------------------------------------------------------------- */
form.acfe-form.allout-reg--handoff .acf-form-submit {
  display: flex; justify-content: center; margin: 0 !important; padding: 26px var(--r-pad) var(--r-pad) !important;
}
form.acfe-form.allout-reg--handoff .acf-form-submit .acf-button {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; width: 100% !important; max-width: 320px; height: 52px !important; margin: 0 !important; padding: 0 20px !important;
  background: var(--r-red-500) !important; border: 0 !important; border-radius: 4px !important;
  box-shadow: 0 10px 22px -10px rgba(232,50,63,.7) !important;
  font-family: var(--r-font-display) !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: #fff !important;
  cursor: pointer; transition: background .15s, transform .1s;
}
form.acfe-form.allout-reg--handoff .acf-form-submit .acf-button:hover { background: var(--r-red-hover) !important; }
form.acfe-form.allout-reg--handoff .acf-form-submit .acf-button:active { background: var(--r-red-press) !important; transform: translateY(1px); }
form.acfe-form.allout-reg--handoff .acf-form-submit .acf-button:focus-visible { outline: 2px solid var(--r-navy-900) !important; outline-offset: 3px !important; }
form.acfe-form.allout-reg--handoff .allout-reg-submit__icon { flex: none; width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   9. Phone (480px and under): tighter page and card, Submit full width (the heading is the page's own)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  .mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff) { padding: 40px 16px 72px !important; }
  .mcb-section:has(> .section_wrapper > .wrap form.allout-reg--handoff),
  form.acfe-form.allout-reg--handoff { --r-pad: 20px; }
  form.acfe-form.allout-reg--handoff .acf-form-submit .acf-button { max-width: 100%; }
}

/* No movement for those who ask for none. */
@media (prefers-reduced-motion: reduce) {
  form.acfe-form.allout-reg--handoff,
  form.acfe-form.allout-reg--handoff *,
  form.acfe-form.allout-reg--handoff *::before,
  form.acfe-form.allout-reg--handoff *::after { transition: none !important; }
  form.acfe-form.allout-reg--handoff .acf-form-submit .acf-button:active { transform: none; }
}