/* ===========================================================
   LucidArc — WPForms skin
   -----------------------------------------------------------
   Makes the plugin's output look like the forms it replaced.

   Three variants, set by lucidarc_form() in inc/wpforms.php:
     .lucid-wpf--hero    homepage hero card (form 40, compact)
     .lucid-wpf--modal   floating-CTA popup (form 40, compact)
     .lucid-wpf--launch  closing CTA + /contact (form 45, two-column)

   Written to hold up under any of WPForms' three CSS settings (full, base,
   none): the plugin's own variables are set on the container so modern
   builds inherit the palette, and the properties that matter are restated
   directly underneath. The !important flags are load-bearing — wpforms-full
   ships some rules at higher specificity than a class wrapper can reach.
   =========================================================== */

/* Admin-only notice when the plugin or the form ID is missing. */
.lucid-wpf-missing {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.6px;
  color: var(--danger);
  border: 1px dashed rgba(239, 68, 68, 0.4);
  border-radius: 10px;
  padding: 14px 16px;
}

/* -----------------------------------------------------------
   Shared — palette, reset, field chrome
   ----------------------------------------------------------- */
.lucid-wpf {
  /* One gutter for the whole form, so a Name field's First/Last pair, a
     half-width field pair, and a Layout field's columns all breathe the same.
     20px is not arbitrary: WPForms gutters its layout columns with 10px of
     padding either side against a -10px row margin, and that rule outranks
     anything a theme class can say. Matching it is cheaper than fighting it —
     and note the row must NOT also carry a `gap`, or the two stack up (that
     is how the layout columns ended up 36px apart against the name row's 12). */
  --lucid-gutter: 20px;

  /* WPForms' own custom properties (1.8.1+). Anything the plugin draws from
     these picks up the brand without further work. */
  --wpforms-field-background-color: rgba(255, 255, 255, 0.03);
  --wpforms-field-border-color: var(--hairline);
  --wpforms-field-text-color: var(--ink);
  --wpforms-field-menu-color: var(--canvas);
  --wpforms-label-color: var(--mute);
  --wpforms-label-sublabel-color: var(--mute);
  --wpforms-label-error-color: var(--danger);
  --wpforms-button-background-color: var(--ink);
  --wpforms-button-text-color: var(--canvas);
  --wpforms-page-break-color: var(--accent-sunset);
  --wpforms-field-border-radius: 10px;
  --wpforms-button-border-radius: 9999px;

  color: var(--body);
}

.lucid-wpf .wpforms-container,
.lucid-wpf .wpforms-form {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

.lucid-wpf .wpforms-head-container,
.lucid-wpf .wpforms-title,
.lucid-wpf .wpforms-description {
  display: none !important; /* headings come from the theme's card markup */
}

.lucid-wpf .wpforms-field {
  padding: 0 !important;
  margin: 0 0 14px !important;
  clear: none !important;
}

.lucid-wpf .wpforms-field-hidden,
.lucid-wpf .wpforms-field.wpforms-field-hidden { display: none !important; }

/* wpforms-full.css lays fields out with floats and percentage widths. The
   theme uses flex and grid, so those are neutralised — but ONLY on top-level
   fields. The same width classes also appear on .wpforms-field-row-block,
   the halves *inside* a Name or Address field, and stripping their float
   collapses First and Last on top of each other. Scope matters here. */
.lucid-wpf .wpforms-field-container > .wpforms-field {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}

/* WPForms 1.9 wraps grouped fields — Name, Address, checkbox and radio sets —
   in <fieldset><legend>. A fieldset carries a box of its own that nothing
   else on the form has: a UA border, padding-inline, margin-inline, and
   min-inline-size: min-content. The theme's global reset zeroes margin and
   padding but never border, so the fieldset's contents sat indented from
   every sibling field — a visible gap before and after the Name row.
   Flattened here, box and all.

   min-width matters as much as the rest: min-content stops a fieldset
   shrinking inside a flex or grid column and forces overflow on narrow
   screens. */
.lucid-wpf .wpforms-form fieldset {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  display: block;
}

.lucid-wpf .wpforms-form legend {
  padding: 0 !important;
  margin: 0 0 6px !important;
  width: 100%;
  max-width: none;
  float: none;
  display: block;
}

/* Multi-part fields keep their own internal row. Rather than half-neutralise
   WPForms' layout, the theme takes the row over completely: flex, equal
   columns, predictable gap, and no inherited horizontal spacing from either
   the row or its blocks — those are what push First/Last out of alignment
   with the fields above and below. Specificity and !important are deliberate;
   WPForms' own row rules outrank a plain two-class selector. */
.lucid-wpf .wpforms-form .wpforms-field-row {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0 var(--lucid-gutter);
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  justify-content: flex-start !important;
}

/* WPForms clears its float-era rows with ::before/::after { content: " ";
   display: table }. Invisible under block layout — but the moment the row
   becomes flex they are FLEX ITEMS, and column-gap applies on both sides of
   each one. Two zero-width phantoms at the ends turn one 12px gutter into
   three, and the extra two show up as a gap before and after the field:
   214.4 + 12 + 214.4 + 12 + 12 = the full row width, measured on the live
   site. !important is required — plain `content: none` loses to the plugin. */
.lucid-wpf .wpforms-form .wpforms-field-row::before,
.lucid-wpf .wpforms-form .wpforms-field-row::after {
  content: none !important;
  display: none !important;
}

.lucid-wpf .wpforms-form .wpforms-field-row-block {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 1 1 0;
  min-width: 0;
}

/* First/Last stay on one row at every width — a stacked name reads as two
   unrelated questions. On narrow screens the gutter tightens instead (which
   also pulls in the half-width pairs, since they share the token), along with
   the inputs' own padding. */
@media (max-width: 420px) {
  .lucid-wpf { --lucid-gutter: 12px; }
  .lucid-wpf .wpforms-field-row-block input { padding-left: 11px !important; padding-right: 11px !important; }
}

/* Sublabels sit under their input, not on the next line's rhythm. */
.lucid-wpf .wpforms-field-sublabel.after { margin-top: 5px !important; }
.lucid-wpf .wpforms-field-row-block .wpforms-field-sublabel { margin-bottom: 0 !important; }
.lucid-wpf .wpforms-sublabel-hide { display: none !important; }

/* Layout fields (WPForms 1.8.1+). The column split chosen in the form builder
   is respected — only the gutter is the theme's. Percentages are reduced by
   their share of the 16px gap. */
.lucid-wpf .wpforms-layout-column > .wpforms-field {
  float: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: auto !important;
}

/* No `gap` here on purpose — the columns' own 10px padding already supplies
   the gutter, and adding gap on top double-counts it. */
.lucid-wpf .wpforms-layout-row {
  display: flex;
  flex-wrap: wrap;
}

.lucid-wpf .wpforms-layout-column {
  min-width: 0;
  flex: 1 1 auto;
  width: auto !important;
}

.lucid-wpf .wpforms-layout-column-50 { flex-basis: calc(50% - 8px); }
.lucid-wpf .wpforms-layout-column-33 { flex-basis: calc(33.333% - 11px); }
.lucid-wpf .wpforms-layout-column-67 { flex-basis: calc(66.666% - 6px); }
.lucid-wpf .wpforms-layout-column-25 { flex-basis: calc(25% - 12px); }
.lucid-wpf .wpforms-layout-column-75 { flex-basis: calc(75% - 5px); }

@media (max-width: 620px) {
  .lucid-wpf .wpforms-layout-column { flex-basis: 100%; }
}

.lucid-wpf .wpforms-field-label,
.lucid-wpf .wpforms-field-label-inline {
  display: block;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--mute) !important;
  margin: 0 0 6px !important;
}

.lucid-wpf .wpforms-required-label {
  color: var(--accent-sunset) !important;
  font-weight: 400;
}

.lucid-wpf .wpforms-field-sublabel {
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--mute) !important;
  opacity: 0.75;
}

.lucid-wpf .wpforms-form input[type='text'],
.lucid-wpf .wpforms-form input[type='email'],
.lucid-wpf .wpforms-form input[type='tel'],
.lucid-wpf .wpforms-form input[type='url'],
.lucid-wpf .wpforms-form input[type='number'],
.lucid-wpf .wpforms-form input[type='password'],
.lucid-wpf .wpforms-form input[type='date'],
.lucid-wpf .wpforms-form select,
.lucid-wpf .wpforms-form textarea {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  padding: 11px 14px !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lucid-wpf .wpforms-form input::placeholder,
.lucid-wpf .wpforms-form textarea::placeholder {
  color: var(--mute) !important;
  opacity: 0.7;
}

.lucid-wpf .wpforms-form input:focus,
.lucid-wpf .wpforms-form select:focus,
.lucid-wpf .wpforms-form textarea:focus {
  outline: none !important;
  border-color: var(--accent-sunset) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: none !important;
}

.lucid-wpf .wpforms-form textarea {
  resize: vertical;
  min-height: 120px;
}

/* Native select arrow replaced with the theme's chevron. */
.lucid-wpf .wpforms-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%237d8187' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 11px !important;
  padding-right: 36px !important;
  cursor: pointer;
}

.lucid-wpf .wpforms-form select option {
  background: var(--canvas);
  color: var(--ink);
}

/* -----------------------------------------------------------
   Smart Phone field (intl-tel-input)
   -----------------------------------------------------------
   The country button is absolutely positioned over the left of the input,
   and intl-tel-input clears the way for it by setting padding-left inline
   from JavaScript. The !important padding above outranks an inline style,
   so the flag ended up sitting on top of the number.

   Rather than fight over the value, the geometry is pinned here: the button
   is a fixed 52px wide and the input reserves exactly that much. Both
   generations of intl-tel-input markup are covered — .iti__flag-container /
   .iti__selected-flag (v17, WPForms 1.8.x) and .iti__country-container /
   .iti__selected-country (v19+). */

.lucid-wpf .iti {
  display: block;
  width: 100%;
  position: relative;
}

.lucid-wpf .iti > input[type='tel'],
.lucid-wpf .iti input.wpforms-field-medium,
.lucid-wpf .iti input.wpforms-field-large,
.lucid-wpf .iti input.wpforms-field-small {
  padding-left: 60px !important;
}

/* Dial code shown next to the flag needs more room. */
.lucid-wpf .iti--separate-dial-code > input[type='tel'] { padding-left: 96px !important; }
.lucid-wpf .iti--separate-dial-code .iti__flag-container,
.lucid-wpf .iti--separate-dial-code .iti__country-container { width: 88px; }

.lucid-wpf .iti__flag-container,
.lucid-wpf .iti__country-container {
  width: 52px;
  padding: 0;
  border-right: 1px solid var(--hairline);
}

.lucid-wpf .iti__selected-flag,
.lucid-wpf .iti__selected-country {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent !important;
  border: 0;
  border-radius: 10px 0 0 10px;
  padding: 0 !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lucid-wpf .iti__selected-flag:hover,
.lucid-wpf .iti__selected-country:hover,
.lucid-wpf .iti__selected-flag:focus,
.lucid-wpf .iti__selected-country:focus {
  background: rgba(255, 255, 255, 0.05) !important;
  outline: none;
}

.lucid-wpf .iti__selected-country-primary {
  display: flex;
  align-items: center;
  gap: 5px;
}

.lucid-wpf .iti__selected-dial-code {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--body);
}

.lucid-wpf .iti__arrow {
  border-top-color: var(--mute);
  margin-left: 0;
}
.lucid-wpf .iti__arrow--up { border-bottom-color: var(--mute); }

/* Country dropdown — the plugin's default is a white panel, which is a hole
   punched in a dark card. */
.lucid-wpf .iti__country-list,
.lucid-wpf .iti__dropdown-content {
  background: var(--canvas-card) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--body) !important;
  max-height: 240px;
  margin: 4px 0 0 !important;
  padding: 6px !important;
  text-align: left;
}

.lucid-wpf .iti__country-list li,
.lucid-wpf .iti__country {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
  padding: 8px 10px !important;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--body);
  line-height: 1.4;
}

.lucid-wpf .iti__country.iti__highlight,
.lucid-wpf .iti__country:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink);
}

.lucid-wpf .iti__country-name { color: inherit; }
.lucid-wpf .iti__dial-code { color: var(--mute); }

.lucid-wpf .iti__divider {
  border-bottom: 1px solid var(--hairline) !important;
  margin: 6px 0 !important;
  padding: 0 !important;
}

/* v19+ ships a search box at the top of the dropdown. */
.lucid-wpf .iti__search-input {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--hairline) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 13.5px !important;
  padding: 9px 12px !important;
  margin-bottom: 6px;
}

/* Newer intl-tel-input reads these instead of the rules above. */
.lucid-wpf .iti {
  --iti-arrow-color: var(--mute);
  --iti-border-color: var(--hairline);
  --iti-dropdown-bg: var(--canvas-card);
  --iti-hover-color: rgba(255, 255, 255, 0.06);
  --iti-text-gray: var(--mute);
}

/* Checkbox / radio lists */
.lucid-wpf .wpforms-form ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lucid-wpf .wpforms-form ul li {
  margin: 0 0 6px;
  color: var(--body);
  font-size: 14px;
}
.lucid-wpf .wpforms-form input[type='checkbox'],
.lucid-wpf .wpforms-form input[type='radio'] {
  accent-color: var(--accent-sunset);
  margin-right: 8px;
}

/* -----------------------------------------------------------
   Submit button — the theme's pill
   ----------------------------------------------------------- */
.lucid-wpf .wpforms-submit-container {
  padding: 0 !important;
  margin-top: 4px;
}

.lucid-wpf .wpforms-form button[type='submit'] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--ink) !important;
  color: var(--canvas) !important;
  border: 1px solid var(--ink) !important;
  border-radius: 9999px !important;
  padding: 14px 20px !important;
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  box-shadow: none !important;
  transition: all 0.25s ease;
}

.lucid-wpf .wpforms-form button[type='submit']:hover:not(:disabled) {
  background: transparent !important;
  color: var(--ink) !important;
  border-color: var(--ink) !important;
}

.lucid-wpf .wpforms-form button[type='submit']:disabled,
.lucid-wpf .wpforms-form button[type='submit'].wpforms-disabled {
  opacity: 0.6;
  cursor: progress;
}

/* -----------------------------------------------------------
   Validation + confirmation
   ----------------------------------------------------------- */
.lucid-wpf .wpforms-form label.wpforms-error,
.lucid-wpf .wpforms-form em.wpforms-error {
  display: block;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-style: normal;
  color: var(--danger) !important;
  margin-top: 6px;
}

.lucid-wpf .wpforms-form input.wpforms-error,
.lucid-wpf .wpforms-form select.wpforms-error,
.lucid-wpf .wpforms-form textarea.wpforms-error {
  border-color: rgba(239, 68, 68, 0.55) !important;
}

.lucid-wpf .wpforms-error-container,
.lucid-wpf .wpforms-error-container-full {
  background: rgba(239, 68, 68, 0.08) !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
  border-radius: 10px;
  padding: 14px 16px !important;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--danger) !important;
}

/* Mirrors the theme's .form-success block. */
.lucid-wpf .wpforms-confirmation-container-full,
.lucid-wpf div.wpforms-confirmation-container-full {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid var(--hairline) !important;
  border-left: 3px solid var(--accent-sunset) !important;
  border-radius: 12px;
  padding: 18px 20px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 1.4px;
  line-height: 1.7 !important;
  text-transform: uppercase;
}

.lucid-wpf .wpforms-confirmation-container-full p { margin: 0 !important; }
.lucid-wpf .wpforms-confirmation-container-full a { color: var(--accent-sunset-soft) !important; }

/* -----------------------------------------------------------
   Variants — hero card and popup modal (compact, form 40)
   -----------------------------------------------------------
   One field per row, except where the form marks a field half-width — set
   per field in WPForms under Advanced → Field Size / CSS Classes, using
   "wpforms-one-half wpforms-first" and "wpforms-one-half wpforms-last".
   That reproduces the email + mobile pair the original card had. */
.lucid-wpf--hero .wpforms-field-container,
.lucid-wpf--modal .wpforms-field-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--lucid-gutter);
}

.lucid-wpf--hero .wpforms-field,
.lucid-wpf--modal .wpforms-field {
  flex: 1 1 100%;
  min-width: 0;
  margin-bottom: 10px !important;
}

/* Direct children only. The width classes below also appear on
   .wpforms-field-row-block — the First/Last halves inside a Name field — and
   sizing those as if they were top-level fields breaks the name row. */
.lucid-wpf--hero .wpforms-field-container > .wpforms-one-half,
.lucid-wpf--modal .wpforms-field-container > .wpforms-one-half { flex: 1 1 calc(50% - var(--lucid-gutter) / 2); }

.lucid-wpf--hero .wpforms-field-container > .wpforms-one-third,
.lucid-wpf--modal .wpforms-field-container > .wpforms-one-third { flex: 1 1 calc(33.333% - var(--lucid-gutter) * 2 / 3); }

.lucid-wpf--hero .wpforms-form button[type='submit'],
.lucid-wpf--modal .wpforms-form button[type='submit'] {
  margin-top: 8px;
}

/* A layout row is a full-width band inside the flex column stack. */
.lucid-wpf--hero .wpforms-layout-row,
.lucid-wpf--modal .wpforms-layout-row { flex: 1 1 100%; }

/* Half-width top-level fields go full width on a narrow screen. Again: direct
   children only — a Name field's First/Last row must stay a row. */
@media (max-width: 520px) {
  .lucid-wpf--hero .wpforms-field-container > .wpforms-one-half,
  .lucid-wpf--modal .wpforms-field-container > .wpforms-one-half,
  .lucid-wpf--hero .wpforms-field-container > .wpforms-one-third,
  .lucid-wpf--modal .wpforms-field-container > .wpforms-one-third { flex: 1 1 100%; }
}

/* The popup is short by design — keep a long form scrollable inside it
   rather than letting it push the panel past the viewport. */
.lucid-wpf--modal { max-height: 62vh; overflow-y: auto; }
.lucid-wpf--modal::-webkit-scrollbar { width: 6px; }
.lucid-wpf--modal::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 9999px;
}

/* -----------------------------------------------------------
   Variant — launch panel (two columns, like the old .form-grid)
   ----------------------------------------------------------- */
/* The panel does NOT impose a column grid of its own.

   Form 45 expresses its own two-column structure with a WPForms Layout field
   (Email | Company, then Vertical | Monthly ad spend), and a Layout field is
   itself wrapped in a single .wpforms-field. Forcing a 1fr 1fr grid on the
   container therefore squeezed that whole two-column block into one half of
   the panel and stranded the Name field in the other — the front end stopped
   matching the form builder.

   So: fields run full width by default, the Layout field's own row supplies
   the columns (see the shared .wpforms-layout-* rules above), and a field
   given "wpforms-one-half" in Advanced → CSS Classes still pairs up. What you
   arrange in the builder is what renders. */
.lucid-wpf--launch .wpforms-field-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--lucid-gutter);
}

.lucid-wpf--launch .wpforms-field {
  flex: 1 1 100%;
  min-width: 0;
  margin-bottom: 18px !important;
}

.lucid-wpf--launch .wpforms-field-container > .wpforms-one-half { flex: 1 1 calc(50% - var(--lucid-gutter) / 2); }
.lucid-wpf--launch .wpforms-field-container > .wpforms-one-third { flex: 1 1 calc(33.333% - var(--lucid-gutter) * 2 / 3); }

/* Long answers and the submit always take the full width. */
.lucid-wpf--launch .wpforms-field-textarea,
.lucid-wpf--launch .wpforms-field-layout,
.lucid-wpf--launch .wpforms-field-full,
.lucid-wpf--launch .wpforms-one-full,
.lucid-wpf--launch .wpforms-submit-container {
  flex: 1 1 100%;
}

/* Fields stacked inside a layout column sit closer than top-level ones. */
.lucid-wpf--launch .wpforms-layout-column > .wpforms-field { margin-bottom: 16px !important; }
.lucid-wpf--launch .wpforms-layout-column > .wpforms-field:last-child { margin-bottom: 0 !important; }
.lucid-wpf--launch .wpforms-field-layout { margin-bottom: 2px !important; }

@media (max-width: 760px) {
  .lucid-wpf--launch .wpforms-field-container > .wpforms-one-half,
  .lucid-wpf--launch .wpforms-field-container > .wpforms-one-third { flex: 1 1 100%; }
}

.lucid-wpf--launch .wpforms-form textarea { min-height: 140px; }

.lucid-wpf--launch .wpforms-submit-container { margin-top: 8px; }

.lucid-wpf--launch .wpforms-form button[type='submit'] {
  width: auto;
  min-width: 200px;
  padding: 14px 22px !important;
  font-size: 15px !important;
}

@media (max-width: 760px) {
  .lucid-wpf--launch .wpforms-field { margin-bottom: 14px !important; }
  .lucid-wpf--launch .wpforms-form button[type='submit'] { width: 100%; }
}

/* The launch panel plays its own arc-and-ember success animation
   (front-page.php / page-contact.php), so WPForms' message is suppressed —
   but only once a page script has confirmed it is taking over. Without the
   is-handled flag the plugin's message shows normally, so a JS failure
   degrades to "visible confirmation" rather than "silent success". */
.lucid-wpf--launch.is-handled .wpforms-confirmation-container-full {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -----------------------------------------------------------
   Layout glue for the containers the forms sit in
   ----------------------------------------------------------- */
.launch-form .launch-secondary { display: block; margin-top: 16px; }
.launch-form-body .launch-secondary { display: block; margin-top: 16px; }