@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] as a 3-column grid, so Submit
     stays inline with the inputs and never wraps off on its own. When space
     tightens the grid drops columns (below) and Submit spans the inputs' width. */
  form.form-container {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    column-gap: 1rem;
    row-gap: .75rem;
    /* One control height for both the inputs and the Submit button, so they
       line up top and bottom on a row (the button was 44px vs ~47px inputs). */
    --control-height: 2.95rem;
  }

  /* Label above input. Column width comes from the grid track. */
  .form-container .form-group {
    display: flex;
    flex-direction: column;
    gap: .4rem;                  /* space between label and input */
    min-width: 0;                /* let the 1fr column shrink without overflow */
  }

  /* Submit sits in the auto (3rd) column, bottom-aligned with the inputs. */
  .form-container .submit-btn {
    align-self: 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 */
    white-space: nowrap;                  /* keep the label on one line */
    min-width: 9em;                       /* reserve width so the "Submitting…" label doesn't reflow the column */
  }

  /* Inputs take the same control height as the button so the row lines up. */
  .form-container input { height: var(--control-height); }

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

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

  /* Tablet: Name + Email share the top row; Submit drops below, spanning the
     full width of both inputs. */
  @media (max-width: 720px) {
    form.form-container { grid-template-columns: 1fr 1fr; }
    .form-container .submit-btn { grid-column: 1 / -1; width: auto; }
  }
  /* Mobile: stack the fields, Submit full width under them. */
  @media (max-width: 460px) {
    form.form-container { grid-template-columns: 1fr; }
  }

}