@layer components {
  form .row { display:flex; flex-wrap:wrap; gap: .75rem }
  
  form input[type="text"], form input[type="email"], form select, form textarea {
    width:100%; padding:.6rem .75rem; border-radius:.6rem; border: var(--hairline); background: var(--color-bg); color: var(--color-ink);
  }
  
  /* Lay out: [Name group] [Email group] [Submit] */
  form.form-container {
    display: flex;
    flex-wrap: wrap;             /* one row on wide, wraps on small */
    align-items: flex-end;       /* line up inputs with the button baseline */
    column-gap: 1rem;
    row-gap: .75rem;
  }

  /* Label above input; let each group grow */
  .form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;                  /* space between label and input */
    flex: 1 1 36%;
/*     min-width: 10em; */
  }

  /* Button keeps its existing look; just don't let it stretch */
  .form-container .submit-btn {
    flex: 0 0 auto;
    align-self: flex-end;
  }
  
    /* make the submit button share the same baseline as the inputs */
  .form-container .submit-btn {
    align-self: flex-end;                 /* sit on the same bottom line */
    height: var(--control-height, 44px);  /* match input height (fallback 44px) */
    display: inline-flex;                 /* center the label inside */
    align-items: center;
    justify-content: center;
    margin: 0;                            /* eliminate UA margins that misalign */
  }

  /* eliminate stray margins that can throw off the baseline */
  .form-container label,
  .form-container input { margin: 0; }

  /* Honeypot stays hidden */
  .additional-field { display: none; }

  /* Small screens: make the button full-width under the fields */
  @media (max-width: 720px) {
    .form-container { align-items: stretch; }
    .form-container .submit-btn { width: 100%; }
    .form-container .form-group {
    	flex: 1 1 90%;
    	width: 100%
    }
  }

}