/* Public form pages (waitlist, contact form): page title, the form card,
   the anti-bot honeypot and the thank-you panel. Needs the Jahrbuch
   tokens from the page (site.css or the waitlist's inline :root). */
  /* Page hero — small but with the same italic-display moment
     as the marketing hero. */
  h1.title {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 56px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
    text-wrap: balance;
  }
  h1.title em { font-style: italic; color: var(--coral-deep); }
  p.lead {
    font-size: 17px;
    color: var(--ink-soft);
    max-width: 56ch;
    margin: 0 0 40px;
  }

  /* FORM — Jahrbuch idiom: outlined cards, generous padding,
     pill-radius radios. */
  .card {
    background: var(--cream);
    border: 1px solid var(--ink-line);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 1px 0 var(--ink-line-soft);
  }
  .field { margin-bottom: 20px; }
  .field:last-child { margin-bottom: 0; }
  .field label.l {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--ink);
  }
  .field input[type="text"],
  .field input[type="email"],
  .field select,
  .field textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    color: inherit;
    background: var(--cream);
    border: 1px solid var(--ink-line);
    border-radius: 8px;
    transition: border-color 120ms, box-shadow 120ms;
  }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-color: var(--plum);
    box-shadow: 0 0 0 3px var(--plum-soft);
  }
  .field textarea { min-height: 7em; resize: vertical; }
  .field .hint {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 6px;
  }

  /* Size-bucket pills — same pattern as Vuetify chips on the
     SPA side, so the visual vocabulary carries over. */
  .pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .pills label {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--cream-deep);
    border: 1px solid var(--ink-line);
    border-radius: 999px;
    cursor: pointer;
    font-size: 14px;
    transition: background 120ms, border-color 120ms;
  }
  .pills label:has(input:checked) {
    background: var(--plum-soft);
    border-color: var(--plum);
    color: var(--plum-deeper);
    font-weight: 500;
  }
  .pills input[type="radio"] { margin: 0; accent-color: var(--plum); }

  /* Honeypot — off-screen, never visible to humans. */
  .honeypot {
    position: absolute; left: -9999px;
    width: 1px; height: 1px;
    opacity: 0; pointer-events: none;
  }

  /* Submit — Plum primary button, pill rounded. */
  .submit-row {
    margin-top: 28px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
  }
  .btn-submit {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 28px;
    background: var(--plum);
    color: var(--on-plum);
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background 120ms;
  }
  .btn-submit:hover { background: var(--plum-deeper); }
  .privacy-note {
    font-size: 13px;
    color: var(--ink-soft);
    max-width: 36ch;
    line-height: 1.45;
  }

  /* Errors — Coral-deep tonal alert above the form. */
  .errors {
    background: oklch(96% 0.05 32);
    border-left: 4px solid var(--coral-deep);
    color: var(--coral-deep);
    padding: 14px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
  }

  /* Altcha widget — pad it visually with the form. */
  altcha-widget { display: block; margin: 24px 0 8px; }

  /* CONFIRMATION — Green-tonal hero panel.
     Same italic-display moment, same brand, just the success
     state instead of the form. */
  .confirm {
    text-align: center;
    padding: 64px 28px;
  }
  .confirm .mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 80px; height: 80px;
    background: var(--green);
    color: var(--cream);
    border-radius: 50%;
    margin-bottom: 32px;
  }
  .confirm .mark svg { width: 36px; height: 36px; stroke: currentColor; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .confirm h2 {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 48px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
  }
  .confirm h2 em { font-style: italic; color: var(--coral-deep); }
  .confirm p {
    font-size: 16px;
    color: var(--ink-soft);
    max-width: 48ch;
    margin: 0 auto 32px;
  }
  .confirm .back {
    display: inline-block;
    padding: 12px 24px;
    background: var(--lemon);
    color: var(--on-lemon);
    text-decoration: none;
    border-radius: 999px;
    font-weight: 600;
  }

  @media (max-width: 640px) {
    h1.title { font-size: 40px; }
    .confirm h2 { font-size: 36px; }
    .card { padding: 20px; }
  }

  /* Inline field errors (contact form): message under the field, the
     field keeps what was typed. */
  .field .optional { font-weight: 400; color: var(--ink-soft); }
  .field.has-error input,
  .field.has-error textarea { border-color: var(--coral-deep); }
  .field-error {
    font-size: 13.5px;
    color: var(--coral-deep);
    margin-top: 6px;
  }
  .privacy-note a { text-decoration: underline; }