/* Custom Demo Form Single — CSS */
/* External-linked; loads in header. Targets the single-form mounted at .gsp-cf-single-mount. */
/* Compact layout — denser than v3 (matches HS reference form's density) BUT input font-size */
/* stays at 16px because iOS Safari zooms into <input> focus when font-size < 16px. */

.gsp-cf-single-mount{width:100%;display:block}
/* Card wrapper — visually separates the form from LP copy / hero content that may sit
 * adjacent to it. Subtle border + light shadow, matches the HS iframe form's container
 * treatment on /demo so the migrated pages keep a familiar visual rhythm. */
.gsp-cf-single-mount #gsp-cf-page{max-width:min(520px,100%);margin:20px auto 24px;padding:22px 20px;font-family:Inter,system-ui,sans-serif;color:#1a1a2e;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.gsp-cf-single-mount .gsp-cf-badge{display:inline-flex;align-items:center;gap:5px;background:#e8f0fe;color:#1a3a8f;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;margin-bottom:10px}
.gsp-cf-single-mount .gsp-cf-badge svg{width:11px;height:11px}
.gsp-cf-single-mount h1{font-size:22px;font-weight:700;color:#1a1a2e;margin:0 0 4px;line-height:1.22}
.gsp-cf-single-mount .gsp-cf-sub{font-size:13px;color:#666;margin:0 0 14px;line-height:1.45}

/* No align-items override: default stretch keeps fields full-width when the
 * responsive rules flip a row to flex-direction:column (flex-start there would
 * shrink children to content width — the narrow-card bug). */
.gsp-cf-single-mount .gsp-cf-row{display:flex;gap:10px}
.gsp-cf-single-mount .gsp-cf-row>*{flex:1;min-width:0}
.gsp-cf-single-mount .gsp-cf-field{margin-bottom:10px}
.gsp-cf-single-mount .gsp-cf-field label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:3px}

.gsp-cf-single-mount .gsp-cf-input-wrap{position:relative}
.gsp-cf-single-mount .gsp-cf-input-wrap input{width:100%;box-sizing:border-box}
.gsp-cf-single-mount .gsp-cf-input-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;pointer-events:none;display:none}
.gsp-cf-single-mount .gsp-cf-input-icon.ok{display:block;color:#16a34a}
.gsp-cf-single-mount .gsp-cf-input-icon.bad{display:block;color:#dc2626}

/* Input padding tight, but font-size:16px is a HARD rule (iOS zoom prevention) */
.gsp-cf-single-mount .gsp-cf-field input{width:100%;padding:9px 32px 9px 11px;border:1.5px solid #d1d5db;border-radius:6px;font-size:16px;font-family:Inter,system-ui,sans-serif;color:#1a1a2e;background:#fff;box-sizing:border-box;transition:border-color .15s,box-shadow .15s;outline:none;min-height:40px}
.gsp-cf-single-mount .gsp-cf-field input:focus{border-color:#1a3a8f;box-shadow:0 0 0 3px rgba(26,58,143,.12)}
.gsp-cf-single-mount .gsp-cf-field input:focus-visible{outline:2px solid transparent}
.gsp-cf-single-mount .gsp-cf-field.ok input{border-color:#16a34a}
.gsp-cf-single-mount .gsp-cf-field.err input{border-color:#dc2626}
.gsp-cf-single-mount .gsp-cf-field.err input:focus{box-shadow:0 0 0 3px rgba(220,38,38,.1)}

.gsp-cf-single-mount .gsp-phone-wrap{display:flex;gap:6px;align-items:flex-start}
.gsp-cf-single-mount .gsp-phone-prefix{display:flex;align-items:center;gap:5px;padding:9px 10px;border:1.5px solid #d1d5db;border-radius:6px;background:#f9fafb;cursor:pointer;white-space:nowrap;font-size:14px;font-family:Inter,system-ui,sans-serif;color:#374151;transition:border-color .15s;flex-shrink:0;position:relative;user-select:none;min-height:40px}
.gsp-cf-single-mount .gsp-phone-prefix:focus{outline:none;border-color:#1a3a8f;box-shadow:0 0 0 3px rgba(26,58,143,.12)}
.gsp-cf-single-mount .gsp-phone-prefix:focus-visible{outline:2px solid #1a3a8f;outline-offset:1px}
.gsp-cf-single-mount .gsp-phone-prefix svg{width:10px;height:10px;color:#6b7280;flex-shrink:0}
.gsp-cf-single-mount .gsp-phone-input-wrap{flex:1;position:relative}
.gsp-cf-single-mount .gsp-phone-input-wrap input{width:100%;box-sizing:border-box}

.gsp-cf-single-mount .gsp-country-drop{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1.5px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:999;min-width:260px;max-height:280px;display:none;flex-direction:column}
.gsp-cf-single-mount .gsp-country-drop.open{display:flex}
.gsp-cf-single-mount .gsp-country-search{padding:7px 9px;border-bottom:1px solid #e5e7eb;flex-shrink:0}
/* Country search is an <input> — keep font-size:16px so iOS Safari doesn't zoom on focus */
.gsp-cf-single-mount .gsp-country-search input{width:100%;padding:6px 10px;border:1px solid #d1d5db;border-radius:5px;font-size:16px;outline:none;box-sizing:border-box;min-height:34px}
.gsp-cf-single-mount .gsp-country-search input:focus{border-color:#1a3a8f}
.gsp-cf-single-mount .gsp-country-list{overflow-y:auto;flex:1;max-height:220px}
.gsp-cf-single-mount .gsp-country-option{display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:14px;color:#374151;cursor:pointer;transition:background .1s}
.gsp-cf-single-mount .gsp-country-option:hover,.gsp-cf-single-mount .gsp-country-option.kb-focused{background:#f5f8ff}
.gsp-cf-single-mount .gsp-country-option.selected{background:#eef2fd;font-weight:600}
.gsp-cf-single-mount .gsp-country-option .gsp-country-flag{font-size:18px;line-height:1}
.gsp-cf-single-mount .gsp-country-option .gsp-country-dial{color:#9ca3af;margin-left:auto;font-size:13px}
.gsp-cf-single-mount .gsp-country-empty{padding:14px;color:#9ca3af;font-size:13px;text-align:center}

.gsp-cf-single-mount .gsp-url-hint{font-size:11px;color:#6b7280;margin-top:2px;display:none}
.gsp-cf-single-mount .gsp-url-hint.show{display:block}
.gsp-cf-single-mount .gsp-url-hint strong{color:#374151}

.gsp-cf-single-mount .gsp-cf-errmsg{font-size:11px;color:#dc2626;margin-top:3px;display:none}
.gsp-cf-single-mount .gsp-cf-field.err .gsp-cf-errmsg{display:block}

.gsp-cf-single-mount .gsp-email-typo{font-size:12px;color:#1a3a8f;margin-top:4px;display:none}
.gsp-cf-single-mount .gsp-email-typo.show{display:block}
.gsp-cf-single-mount .gsp-email-typo button{background:none;border:none;color:#1a3a8f;text-decoration:underline;cursor:pointer;font:inherit;padding:0;font-weight:600}
.gsp-cf-single-mount .gsp-email-typo button:hover{color:#142d72}

.gsp-cf-single-mount .gsp-chips-label{font-size:12px;font-weight:600;color:#374151;margin-bottom:5px}
.gsp-cf-single-mount .gsp-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.gsp-cf-single-mount .gsp-chip{padding:7px 12px;border:1.5px solid #d1d5db;border-radius:100px;font-size:13px;font-family:Inter,system-ui,sans-serif;color:#374151;background:#fff;cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap;line-height:1;min-height:34px}
.gsp-cf-single-mount .gsp-chip:hover{border-color:#1a3a8f;color:#1a3a8f;background:#f5f8ff}
.gsp-cf-single-mount .gsp-chip[aria-checked="true"]{border-color:#1a3a8f;background:#1a3a8f;color:#fff;font-weight:600}
.gsp-cf-single-mount .gsp-chip:focus-visible{outline:2px solid #1a3a8f;outline-offset:2px}
.gsp-cf-single-mount .gsp-chips-errmsg{font-size:11px;color:#dc2626;margin-top:2px;display:none}
.gsp-cf-single-mount .gsp-chips.err .gsp-chips-errmsg{display:block}

/* Help-question <select>: full native-appearance reset so the field matches our text
 * inputs (same border, padding, font, focus ring). font-size:16px is mandatory — iOS
 * Safari zooms on focus for any form control < 16px. Custom SVG chevron sits absolutely
 * positioned in front of the (now invisible) native arrow for cross-browser consistency. */
.gsp-cf-single-mount .gsp-select-wrap{position:relative;display:block}
.gsp-cf-single-mount .gsp-cf-field select{
  width:100%;
  padding:9px 34px 9px 11px;
  margin:0;
  border:1.5px solid #d1d5db;
  border-radius:6px;
  font-size:16px;
  font-family:Inter,system-ui,sans-serif;
  font-weight:400;
  line-height:1.4;
  color:#1a1a2e;
  background-color:#fff;
  background-image:none;
  box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s;
  outline:none;
  min-height:40px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
}
/* Style the placeholder option lighter so the unselected state reads as a prompt */
.gsp-cf-single-mount .gsp-cf-field select:invalid,
.gsp-cf-single-mount .gsp-cf-field select option[value=""]{color:#9ca3af}
.gsp-cf-single-mount .gsp-cf-field select option{color:#1a1a2e}
.gsp-cf-single-mount .gsp-cf-field select:focus{border-color:#1a3a8f;box-shadow:0 0 0 3px rgba(26,58,143,.12)}
.gsp-cf-single-mount .gsp-cf-field select:focus-visible{outline:2px solid transparent}
.gsp-cf-single-mount .gsp-cf-field.ok select{border-color:#16a34a}
.gsp-cf-single-mount .gsp-cf-field.err select{border-color:#dc2626}
.gsp-cf-single-mount .gsp-select-chevron{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:#6b7280;pointer-events:none;z-index:1}

.gsp-cf-single-mount .gsp-cf-radios-label{font-size:12px;font-weight:600;color:#374151;margin-bottom:5px}
.gsp-cf-single-mount .gsp-cf-radios{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.gsp-cf-single-mount .gsp-cf-radio{display:flex;align-items:center;gap:8px;cursor:pointer;padding:7px 11px;border:1.5px solid #e5e7eb;border-radius:6px;transition:border-color .12s,background .12s;min-height:36px}
.gsp-cf-single-mount .gsp-cf-radio:hover{border-color:#1a3a8f;background:#f5f8ff}
.gsp-cf-single-mount .gsp-cf-radio.selected{border-color:#1a3a8f;background:#eef2fd}
.gsp-cf-single-mount .gsp-cf-radio input{width:15px;height:15px;accent-color:#1a3a8f;flex-shrink:0;cursor:pointer}
.gsp-cf-single-mount .gsp-cf-radio input:focus-visible{outline:2px solid #1a3a8f;outline-offset:2px}
.gsp-cf-single-mount .gsp-cf-radio span{font-size:13px;color:#374151;line-height:1.3}
.gsp-cf-single-mount .gsp-cf-radios.err .gsp-cf-radios-label{color:#dc2626}
.gsp-cf-single-mount .gsp-cf-radio-errmsg{font-size:11px;color:#dc2626;margin-top:2px;display:none}
.gsp-cf-single-mount .gsp-cf-radios.err .gsp-cf-radio-errmsg{display:block}

/* Submit button — font-size 15px is fine (it's a button, not an input — no iOS zoom risk) */
.gsp-cf-single-mount .gsp-cf-btn-primary{width:100%;padding:11px;background:#146cff;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;font-family:Inter,system-ui,sans-serif;cursor:pointer;transition:background .18s,transform .12s;min-height:44px;margin-top:4px}
.gsp-cf-single-mount .gsp-cf-btn-primary:hover{background:#0e58d6;transform:translateY(-1px)}
.gsp-cf-single-mount .gsp-cf-btn-primary:active{transform:translateY(0)}
.gsp-cf-single-mount .gsp-cf-btn-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.gsp-cf-single-mount .gsp-cf-btn-primary:focus-visible{outline:3px solid rgba(20,108,255,.4);outline-offset:2px}
/* Busy state — shown while the submit is in flight (≤~4s). Sweep + spinner +
 * pulsing dots; the button stays full-opacity (overrides :disabled) so it
 * reads as "working", not "dead". All motion off under prefers-reduced-motion. */
.gsp-cf-single-mount .gsp-cf-btn-primary.gsp-cf-btn--busy,
.gsp-cf-single-mount .gsp-cf-btn-primary.gsp-cf-btn--busy:disabled{opacity:1;cursor:progress;background:linear-gradient(90deg,#146cff 0%,#4a90ff 40%,#146cff 80%);background-size:200% 100%;animation:gspCfBtnSweep 1.1s linear infinite}
.gsp-cf-single-mount .gsp-cf-spinner{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;vertical-align:-2px;margin-right:9px;animation:gspCfSpin .7s linear infinite}
.gsp-cf-single-mount .gsp-cf-busy-dots span{display:inline-block;animation:gspCfDot 1.2s ease-in-out infinite}
.gsp-cf-single-mount .gsp-cf-busy-dots span:nth-child(2){animation-delay:.15s}
.gsp-cf-single-mount .gsp-cf-busy-dots span:nth-child(3){animation-delay:.3s}
@keyframes gspCfSpin{to{transform:rotate(360deg)}}
@keyframes gspCfBtnSweep{to{background-position:-200% 0}}
@keyframes gspCfDot{0%,60%,100%{transform:translateY(0);opacity:.6}30%{transform:translateY(-3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.gsp-cf-single-mount .gsp-cf-btn-primary.gsp-cf-btn--busy,.gsp-cf-single-mount .gsp-cf-btn-primary.gsp-cf-btn--busy:disabled,.gsp-cf-single-mount .gsp-cf-spinner,.gsp-cf-single-mount .gsp-cf-busy-dots span{animation:none}}

.gsp-cf-single-mount .gsp-trust{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11px;color:#6b7280;margin:10px 0 4px;text-align:center}
.gsp-cf-single-mount .gsp-trust svg{width:12px;height:12px;color:#16a34a;flex-shrink:0}

.gsp-cf-single-mount .gsp-api-status{font-size:12px;margin-top:8px;padding:7px 10px;border-radius:6px;display:none}
.gsp-cf-single-mount .gsp-api-status.ok{display:block;background:#d1fae5;color:#065f46}
.gsp-cf-single-mount .gsp-api-status.fail{display:block;background:#fee2e2;color:#991b1b}

.gsp-cf-single-mount .gsp-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.gsp-cf-single-mount .gsp-ty{display:none;flex-direction:column;align-items:center;text-align:center;padding:30px 24px 28px}
/* Reveal class is `gsp-shown`, NOT `show`: the LeadEngine parent theme loads
 * Bootstrap 4 sitewide and its `.show{display:block!important}` beats any
 * display we set here. Under display:block the align-items:center above goes
 * inert and the two <p> (max-width + zero side margins) sit flush left while
 * the icon/h2/button still centre — the off-centre thank-you card. */
.gsp-cf-single-mount .gsp-ty.gsp-shown{display:flex}
.gsp-cf-single-mount .gsp-ty-icon{width:56px;height:56px;border-radius:50%;background:#e8f0fe;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;align-self:center;flex-shrink:0}
.gsp-cf-single-mount .gsp-ty-icon svg{width:32px;height:32px}
.gsp-cf-single-mount .gsp-ty h2{font-size:24px;font-weight:700;color:#1a1a2e;margin:0 0 8px;line-height:1.25;text-wrap:balance}
.gsp-cf-single-mount .gsp-ty p{font-size:15px;color:#555;margin:0 0 22px;line-height:1.55;max-width:420px;text-wrap:pretty}
.gsp-cf-single-mount .gsp-open-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 26px;background:#1a3a8f;color:#fff;border:none;border-radius:8px;font-family:Inter,system-ui,sans-serif;font-size:16px;font-weight:600;cursor:pointer;transition:background .18s,transform .12s;min-height:48px}
.gsp-cf-single-mount .gsp-open-btn:hover{background:#142d72;transform:translateY(-1px)}
.gsp-cf-single-mount .gsp-open-btn svg{width:18px;height:18px;flex-shrink:0}
.gsp-cf-single-mount /* p.gsp-ty-note, not .gsp-ty-note: the note IS a <p>, and `.gsp-ty p` (0,2,1)
   out-specifies a bare class (0,2,0). Left unqualified it inherits that rule's
   color:#555 AND its margin-bottom:22px — which is where the dead space above
   the divider came from. Third instance of this exact collision in this file;
   qualify state and variant rules against the element they target. */
.gsp-ty p.gsp-ty-note{font-size:12px;color:#6b7280;margin:10px 0 0}
/* Route-aware secondary CTA (2026-08-18): a divider + "Explore Plans & Pricing"
 * link below the primary reopen/watch button, for leads who dismissed the
 * scheduler/video and aren't ready to book yet. Namespaced gsp- classes only —
 * see the .gsp-shown comment above re: the Bootstrap 4 .show collision. */
.gsp-cf-single-mount .gsp-ty-divider{display:flex;align-items:center;gap:10px;width:100%;max-width:280px;color:#8b94a3;font-size:12px;margin:20px 0 12px}
.gsp-cf-single-mount .gsp-ty-divider::before,.gsp-cf-single-mount .gsp-ty-divider::after{content:"";flex:1;height:1px;background:#e3e8f2}
.gsp-cf-single-mount .gsp-ty-secondary-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;background:#fff;color:#146cff;border:1.5px solid #c8dbff;border-radius:8px;font-family:Inter,system-ui,sans-serif;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s;min-height:44px;box-sizing:border-box}
.gsp-cf-single-mount .gsp-ty-secondary-btn:hover{background:#f4f8ff}
.gsp-cf-single-mount .gsp-ty-secondary-btn:focus-visible{outline:2px solid #1a3a8f;outline-offset:2px}

@media(max-width:480px){
  .gsp-cf-single-mount #gsp-cf-page{padding:0 14px;margin:16px auto 20px}
  /* On mobile: stack the paired rows so each field gets full width */
  .gsp-cf-single-mount .gsp-cf-row{flex-direction:column;gap:0}
  .gsp-cf-single-mount .gsp-chips{gap:4px}
  /* Slightly larger chips on mobile for thumb-friendliness, but still compact */
  .gsp-cf-single-mount .gsp-chip{padding:8px 12px;font-size:13px;min-height:36px}
  .gsp-cf-single-mount .gsp-country-drop{min-width:240px}
}

/* ──────────────────────────────────────────────────────────────────────
 * Figma-aligned bare layout — opt-in via .gsp-cf-bare on the mount.
 * Tokens match designs 1:225 (side-aligned) and 1:295 (centered):
 *   border 1px #d2e3e8, radius 10px, label 14px black SemiBold,
 *   placeholder #648e9a, chips 14px/16 #648e9a, group spacing 15/25.
 * Input font-size stays 16px — iOS Safari zooms on focus below 16px.
 * Selectors use attribute prefix for IDs because the inner page wrapper
 * gets per-instance ID namespacing at runtime (gsp-cf-page-1, -2, …).
 * ────────────────────────────────────────────────────────────────────── */

.gsp-cf-single-mount.gsp-cf-bare [id^="gsp-cf-page"]{
  max-width:none;margin:0;padding:0;border:none;box-shadow:none;border-radius:0;background:transparent
}

.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field label,
.gsp-cf-single-mount.gsp-cf-bare .gsp-chips-label,
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-radios-label{
  font-size:14px;font-weight:600;line-height:20px;color:#000;margin-bottom:3px
}

/* Group spacing: 15px between groups, 25px before submit, no margin on first.
 * Row children are zeroed with > * (not > .gsp-cf-field) because the
 * teamsize radiogroup also lives inside a paired row. */
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field,
.gsp-cf-single-mount.gsp-cf-bare [role="radiogroup"],
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-row{margin:15px 0 0}
.gsp-cf-single-mount.gsp-cf-bare form > *:first-child{margin-top:0}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-row > *{margin-top:0}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-btn-primary{margin-top:25px}

/* Inputs — keep font-size:16px (iOS zoom prevention) */
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field input{
  border:1px solid #d2e3e8;border-radius:10px;padding:9px 33px 9px 12px;color:#1a1a2e
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field input::placeholder{color:#648e9a;opacity:1}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field input:focus{
  border-color:#146cff;box-shadow:0 0 0 3px rgba(20,108,255,.12)
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field.ok input{border-color:#16a34a}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field.err input{border-color:#dc2626}

/* Phone prefix — stretch wrap so prefix height auto-matches the input height
 * (input renders ~50px due to font-size:16 + line-height; without stretch the
 * prefix renders at its content height + padding and looks shorter) */
.gsp-cf-single-mount.gsp-cf-bare .gsp-phone-wrap{align-items:stretch}
/* Phone input — symmetric 12px horizontal padding. The base bare-input rule
 * reserves 33px on the right for the validation icon; in narrow side-aligned
 * columns that eats the phone number's visible characters. Phone field's
 * validation icon overlap is acceptable since the input is short text. */
.gsp-cf-single-mount.gsp-cf-bare .gsp-phone-input-wrap input{padding:9px 12px}
.gsp-cf-single-mount.gsp-cf-bare .gsp-phone-prefix{
  border:1px solid #d2e3e8;border-radius:10px;background:#f5f9fa;padding:5px 11px
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-phone-prefix:focus,
.gsp-cf-single-mount.gsp-cf-bare .gsp-phone-prefix:focus-visible{
  border-color:#146cff;outline:none;box-shadow:0 0 0 3px rgba(20,108,255,.12)
}

/* Chips — pill 14/16 #648e9a, selected = brand blue */
.gsp-cf-single-mount.gsp-cf-bare .gsp-chip{
  border:1px solid #d2e3e8;border-radius:100px;padding:12px 10px;
  font-size:14px;line-height:16px;color:#648e9a;background:#fff;min-height:34px
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-chip:hover{
  border-color:#146cff;color:#146cff;background:#f0f6ff
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-chip[aria-checked="true"]{
  border-color:#146cff;background:#146cff;color:#fff;font-weight:600
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-chip:focus-visible{outline:2px solid #146cff;outline-offset:2px}
.gsp-cf-single-mount.gsp-cf-bare .gsp-chips{gap:5px}

/* Select — keep font-size:16px (iOS zoom prevention) */
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field select{
  border:1px solid #d2e3e8;border-radius:10px;padding:9px 35px 9px 12px;color:#1a1a2e
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field select:invalid,
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field select option[value=""]{color:#648e9a}
/* Placeholder-state color for the select. The select isn't `required` (form has
 * its own validation), so :invalid never fires. :has(option[value=""]:checked)
 * matches when the empty placeholder option is the currently-selected one. */
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field select:has(option[value=""]:checked){
  color:#648e9a
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field select:focus{
  border-color:#146cff;box-shadow:0 0 0 3px rgba(20,108,255,.12)
}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field.ok select{border-color:#16a34a}
.gsp-cf-single-mount.gsp-cf-bare .gsp-cf-field.err select{border-color:#dc2626}

/* ──────────────────────────────────────────────────────────────────────
 * Centered 2-column desktop grid — opt-in via .gsp-cf-grid (composes
 * with .gsp-cf-bare). Collapses to single column below 560px.
 * .gsp-cf-row uses display:contents so paired fields become individual
 * grid items rather than a paired flex row.
 * ────────────────────────────────────────────────────────────────────── */

.gsp-cf-single-mount.gsp-cf-grid form{
  display:grid;grid-template-columns:1fr 1fr;column-gap:10px;row-gap:15px
}
.gsp-cf-single-mount.gsp-cf-grid .gsp-cf-row{display:contents}
.gsp-cf-single-mount.gsp-cf-grid .gsp-cf-field,
.gsp-cf-single-mount.gsp-cf-grid [role="radiogroup"]{margin:0}
/* Help spans both columns — grid auto-placement pairs Name|Website,
 * Company|Email, Phone|Team, then the full-width help row. */
.gsp-cf-single-mount.gsp-cf-grid [id^="f-help"]{grid-column:1 / -1}
/* Promo layout pairs Help|Promo, so the full-width span must not apply there.
 * Note on naming: `--promo` is a BEM modifier (double hyphen); `-bare`/`-grid` above
 * are older single-hyphen variant names that predate that convention — not a typo,
 * just two eras of naming coexisting on the same mount. */
.gsp-cf-single-mount.gsp-cf-grid.gsp-cf--promo [id^="f-help"]{grid-column:auto}
/* Team-size chips in the promo layout: measured on demo at 1440px, the five pills
 * overflowed the 290px column and pushed "51+" to a second row — by 5.9px in EN,
 * 2.0px in ES and 17.1px in FR ("Juste moi" is the widest label). Tightening the
 * pill padding and gap recovers ~30px, so all three locales fit one row with
 * >=16px headroom for cross-platform font-metric variance.
 * Deliberately NOT a font-size reduction: these are <button>s, so they could not
 * trigger iOS focus-zoom (that only affects text-entry controls), but 14px keeps
 * the labels legible and consistent with the rest of the bare variant. Only the
 * promo layout narrows this column, hence the --promo scope. */
.gsp-cf-single-mount.gsp-cf-bare.gsp-cf--promo .gsp-chip{padding-left:7px;padding-right:7px}
.gsp-cf-single-mount.gsp-cf-bare.gsp-cf--promo .gsp-chips{gap:4px}
.gsp-cf-single-mount.gsp-cf-grid .gsp-cf-btn-primary{grid-column:1 / -1;margin-top:40px}
.gsp-cf-single-mount.gsp-cf-grid .gsp-api-status{grid-column:1 / -1}

@media(max-width:560px){
  .gsp-cf-single-mount.gsp-cf-grid form{grid-template-columns:1fr;row-gap:0}
  .gsp-cf-single-mount.gsp-cf-grid .gsp-cf-field,
  .gsp-cf-single-mount.gsp-cf-grid [role="radiogroup"]{margin-top:15px}
  .gsp-cf-single-mount.gsp-cf-grid form > *:first-child{margin-top:0}
}

/* ──────────────────────────────────────────────────────────────────────
 * Responsive stack for side-aligned bare form (not the grid variant).
 * TWO independent triggers — either condition stacks the paired rows:
 *   1. Viewport ≤ 1030px (user-specified breakpoint, Figma 9:49)
 *   2. Container ≤ 540px (form's OWN width, catches narrow-column cases
 *      like mount#1 inside a vc_col-sm-5 outer wrapper where viewport
 *      stays desktop but the form has only ~475px to lay out two columns
 *      — phone input would cut off the placeholder otherwise)
 * The :not(.gsp-cf-grid) selector keeps this off the centered grid
 * variant, which has its own breakpoint at 560px.
 * ────────────────────────────────────────────────────────────────────── */
.gsp-cf-single-mount.gsp-cf-bare:not(.gsp-cf-grid){container-type:inline-size}
@media(max-width:1030px){
  .gsp-cf-single-mount.gsp-cf-bare:not(.gsp-cf-grid) .gsp-cf-row{
    flex-direction:column;gap:10px
  }
}
@container (max-width:540px){
  .gsp-cf-row{flex-direction:column;gap:10px}
}

/* ─── Website opt-out ─────────────────────────────────────────────────────────
   Specificity matters here and the first attempt got it wrong twice, so both
   selectors are deliberately over-qualified AND placed last:

     .gsp-cf-field label   (0,2,1) sets display:block — it beat a bare
                           .gsp-nosite (0,2,0), so the control rendered as a
                           block and broke the row.
     .gsp-cf-field input   (0,2,1) sets width:100% and min-height:40px — EQUAL
                           specificity to a bare .gsp-nosite input, and it comes
                           later in this file, so the checkbox rendered as a
                           full-width text box.

   label.gsp-nosite is (0,3,1) and the input selector (0,4,1); both now outrank
   the generics regardless of source order. The explicit resets undo the text-input
   geometry the checkbox would otherwise inherit. */
.gsp-cf-single-mount .gsp-website-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
/* Hit area only: 44px minimum tap target, grown with vertical padding that the
   negative margin cancels so nothing moves. Vertical only — horizontal padding
   would widen the label and break the two-column head row. */
.gsp-cf-single-mount .gsp-cf-field label.gsp-nosite{display:inline-flex;align-items:center;gap:5px;padding:16px 0;margin:-16px 0 -13px;font-size:11px;font-weight:500;color:#6b7280;cursor:pointer;white-space:nowrap;line-height:1;-webkit-tap-highlight-color:rgba(20,108,255,.15)}
.gsp-cf-single-mount .gsp-cf-field label.gsp-nosite:hover{color:#146cff}
.gsp-cf-single-mount .gsp-cf-field .gsp-nosite input[type="checkbox"]{width:13px;height:13px;min-height:0;flex:0 0 auto;padding:0;margin:0;border:none;border-radius:0;background:none;accent-color:#146cff;cursor:pointer}
/* CLASS hooks, not IDs. namespaceIds() rewrites every id per mounted instance
   (f-website -> f-website-1), so an #id selector in this sheet matches nothing.
   Classes are left alone, so they are the only safe state hook here. */
.gsp-cf-single-mount .gsp-cf-field.nosite .gsp-cf-input-wrap input{background:#f3f4f6;color:#9aa3af;border-style:dashed;cursor:not-allowed}
.gsp-cf-single-mount .gsp-cf-field.nosite .gsp-cf-input-wrap input::placeholder{color:#b9c0cb}
.gsp-cf-single-mount .gsp-cf-field.nosite .gsp-website-head label[for]{opacity:.5}
.gsp-cf-single-mount .gsp-cf-field.nosite .gsp-cf-input-icon{display:none}
/* The opt-out is HIDDEN until the first blank submit. A visible escape hatch on
   first paint invites "tick it to move on"; revealing it only once someone has
   actually been stopped means the default path has no visible way around the
   field, and only people who genuinely cannot comply ever see it. (0,4,1) so it
   beats the base label.gsp-nosite rule at (0,3,1). */
.gsp-cf-single-mount .gsp-cf-field:not(.show-nosite) label.gsp-nosite{display:none}
/* One message at a time. `.gsp-cf-field.err .gsp-cf-errmsg` reveals EVERY errmsg
   in the field, which showed the format and empty messages stacked together. */
.gsp-cf-single-mount .gsp-cf-field .gsp-emptymsg{display:none}
.gsp-cf-single-mount .gsp-cf-field.err-empty .gsp-emptymsg{display:block}
.gsp-cf-single-mount .gsp-cf-field.err-empty .gsp-cf-errmsg:not(.gsp-emptymsg){display:none}