.unl{
  --unl-grad-start:#dc353b; --unl-grad-mid:#853d8e; --unl-grad-end:#2ca8d7;
  --unl-line:#8f8f8f;         /* divider + frame line (wide grey) */
  --unl-box-bg:transparent;   /* frame sits on the page background */
  --unl-border-width:1px;
  --unl-radius:20px;
  container-type:inline-size; /* stack by the widget's OWN width, not the viewport */
}

/* ---- Frame: heading | fields | button on one row (wide screens) ---- */
.unl__box{
  display:grid;
  grid-template-columns:minmax(240px,1.15fr) minmax(220px,1fr) minmax(200px,.9fr);
  align-items:stretch;
  background:var(--unl-box-bg);
  border:var(--unl-border-width) solid var(--unl-line);
  border-radius:var(--unl-radius);
  overflow:hidden;             /* clip the button flush into the frame's rounded corners */
  position:relative;
}

.unl__head{
  grid-column:1;
  display:flex; flex-direction:column; justify-content:center;
}
.unl__heading{
  display:flex; align-items:center;
  padding:24px 32px;
  color:#fff; font-weight:800; line-height:1.05;
  font-size:clamp(1.4rem,2.2vw,2rem);
}
.unl__subheading{
  display:flex; align-items:center;
  padding:0 32px 24px;
  color:#cfcfcf; font-weight:500; line-height:1.3;
  font-size:clamp(.95rem,1.2vw,1.1rem);
}

.unl__fields{
  grid-column:2;
  display:flex; flex-direction:column;
  border-left:var(--unl-border-width) solid var(--unl-line);   /* vertical divider after heading */
}
.unl__field{ flex:1; display:flex; }
.unl__field--name{ border-bottom:var(--unl-border-width) solid var(--unl-line); }   /* divider between the two inputs */
.unl__field input{
  width:100%; background:transparent; color:#fff;
  border:0; padding:18px 22px; font-size:1rem;
}
.unl__field input::placeholder{ color:#8a8a8a; }
.unl__field input:focus{ outline:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14); }

.unl__button{
  grid-column:3; align-self:stretch;          /* exact frame height, no overhang */
  margin:0; border:0; border-radius:0;         /* square left; box clips the right into the frame radius */
  cursor:pointer;
  color:#fff; font-weight:800; letter-spacing:.4px;
  font-size:clamp(1.2rem,1.5vw,1.45rem);
  background-image:linear-gradient(90deg,var(--unl-grad-start) 0%,var(--unl-grad-mid) 52%,var(--unl-grad-end) 100%);
  transition:filter .15s ease;
}
.unl__button:hover{ filter:brightness(1.08); }
.unl__button:disabled{ opacity:.6; cursor:default; filter:none; }

/* ---- Consent + status: below the frame, indented under the fields column ---- */
.unl__consent{
  display:flex; align-items:center; gap:10px;
  justify-content:flex-start; padding-left:38%;   /* start under the fields, matching the mockup */
  margin-top:18px; color:#cfcfcf; font-size:.95rem;
}
.unl__consent input[type=checkbox]{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  border:2px solid #fff; background:#e9e9e9; cursor:pointer; flex:0 0 auto;
}
.unl__consent input[type=checkbox]:checked{ background:var(--unl-grad-start); border-color:var(--unl-grad-start); }

.unl__status{ margin:10px 0 0; text-align:right; color:#cfcfcf; min-height:1.2em; }
.unl__status--ok{ color:#4ade80; }
.unl__status--err{ color:#f87171; }

.unl__hp{ position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden; }

/* ---- reCAPTCHA: hide Google's floating badge; show required attribution text
   in the form flow instead (Google ToS allows hiding only with visible branding). */
.grecaptcha-badge{ visibility:hidden; }
.unl__recaptcha-note{
  margin:10px 0 0; text-align:right; color:#8a8a8a; font-size:.78rem; line-height:1.4;
}
.unl__recaptcha-note a{ color:inherit; text-decoration:underline; }

/* ---- Narrow (tablet + phone): vertical stack, button flush at the bottom ----
   Container query: stacks whenever the WIDGET is <=680px wide, regardless of
   viewport, so a narrow Elementor column never squishes the 3-column row.
   (3-col needs ~660px; below 760 gives it comfortable margin.) */
@container (max-width:760px){
  .unl{ --unl-line:rgba(255,255,255,.85); }   /* frame reads white when stacked */
  .unl__box{
    grid-template-columns:1fr;
    overflow:hidden;                           /* clip the button to the rounded frame */
  }
  /* drop the explicit column placement so the cells stack in one column
     instead of re-creating implicit columns 2 and 3 */
  .unl__head, .unl__fields, .unl__button{ grid-column:1; grid-row:auto; }
  .unl__head{
    border-bottom:var(--unl-border-width) solid var(--unl-line);
  }
  .unl__heading{
    justify-content:center; text-align:center;
    padding:28px 22px; font-size:clamp(1.8rem,6vw,2.2rem);
  }
  .unl__subheading{
    justify-content:center; text-align:center;
    padding:0 22px 28px;
  }
  .unl__fields{ border-left:0; }
  .unl__field input{ text-align:center; }
  .unl__field--email{ border-bottom:var(--unl-border-width) solid var(--unl-line); }  /* divider above button */
  .unl__button{
    margin:0; width:100%; min-height:66px; padding:18px;
    border-radius:0; box-shadow:none;
  }
  .unl__consent{ justify-content:flex-start; padding-left:0; margin-top:16px; }
  .unl__status{ text-align:center; }
}