/* <mv-apply> styles. Tokens come from ../styles.css (--ink, --muted, --moss, --shu, --text, --sans, --mono, --ease).
   Text on frost glass (#E9E5DD floor): ink 13.24, muted 5.94, shu (errors) 5.80; white on moss 7.73 (>= 4.5:1).
   Non-text: field border #7D796F 3.46, error border shu 5.80, focus ring moss 6.15 (>= 3:1). */
mv-apply { display: block; width: 100%; max-width: 480px; color: var(--ink, #1C1F1C); font-family: var(--text, system-ui, sans-serif);
  --mvp-line: #7D796F; --mvp-fill: rgba(255, 255, 255, .5); --mvp-hair: rgba(28, 31, 28, .14); container-type: inline-size; }
.mvp { position: relative; border-radius: 28px; padding: 26px 30px 24px; }
:where(.mvp p, .mvp h3) { margin: 0; }
.mvp [hidden] { display: none !important; }

.mvp__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 6px; }
.mvp__title { font-family: var(--sans, system-ui, sans-serif); font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.022em; }
.mvp__tag { font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1; letter-spacing: 0; color: var(--muted, #57554E);
  padding: 4px 8px; border: 1px solid var(--mvp-hair); border-radius: 999px; white-space: nowrap; transform: translateY(-2px); }
.mvp__line { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--muted, #57554E); text-wrap: pretty; }

/* ---------- fields: labels above, no placeholder text ---------- */
.mvp__form { display: grid; gap: 14px; margin-top: 20px; }
.mvp__lab { display: block; margin-bottom: 6px; font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: -0.006em; cursor: pointer; }
.mvp__input { display: block; width: 100%; margin: 0; min-height: 46px; padding: 11px 14px; border: 1px solid var(--mvp-line); border-radius: 12px;
  background: var(--mvp-fill); color: var(--ink, #1C1F1C); font: inherit; font-size: 16px; line-height: 1.35; letter-spacing: -0.01em;
  -webkit-appearance: none; appearance: none; box-shadow: inset 0 1px 2px rgba(28, 31, 28, .06); transition: border-color .2s, box-shadow .2s, background-color .2s; }
textarea.mvp__input { min-height: 96px; resize: vertical; }
.mvp__input:hover { background: rgba(255, 255, 255, .62); }
.mvp__input:focus { outline: none; }
.mvp__input:focus-visible, .mvp__input:focus, .mvp__input.is-focus { border-color: var(--moss, #3F5A30); background: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px var(--moss, #3F5A30), 0 0 0 4px rgba(233, 229, 221, .9), 0 0 0 6px var(--moss, #3F5A30); }
.mvp__input[aria-invalid="true"] { border-color: var(--shu, #963820); box-shadow: 0 0 0 1px var(--shu, #963820); }
.mvp__input[aria-invalid="true"]:focus, .mvp__input[aria-invalid="true"].is-focus { box-shadow: 0 0 0 1px var(--shu, #963820), 0 0 0 4px rgba(233, 229, 221, .9), 0 0 0 6px var(--moss, #3F5A30); }
.mvp__input.is-focus, .mvp__btn.is-focus { transition: none; }
.mvp__err { display: flex; align-items: baseline; gap: 7px; margin-top: 7px; font-size: 13.5px; line-height: 1.35; color: var(--shu, #963820); }
.mvp__err::before { content: ""; flex: none; width: 12px; height: 1.5px; border-radius: 1px; background: currentColor; transform: translateY(-4px); }
.mvp__err:empty { display: none; }

/* ---------- action ---------- */
.mvp__actions { margin-top: 4px; }
.mvp__btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 30px; border: 0; border-radius: 24px;
  background: linear-gradient(160deg, #4B6A3A, #3F5A30 60%, #37502A); color: #fff; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  cursor: pointer; box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), 0 10px 24px -14px rgba(48, 40, 26, .55); transition: transform .25s var(--ease, ease), box-shadow .25s; }
.mvp__btn:hover { transform: translateY(-1px); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), 0 14px 28px -14px rgba(48, 40, 26, .6); }
.mvp__btn:active { transform: none; }
.mvp__btn:focus-visible, .mvp__btn.is-focus { outline: 2px solid var(--moss, #3F5A30); outline-offset: 3px; }
.mvp__btn:disabled { cursor: progress; opacity: .7; }
.mvp__formerr { font-size: 13.5px; line-height: 1.4; color: var(--shu, #963820); }
.mvp__formerr:empty { display: none; }

/* ---------- thank-you ---------- */
.mvp__sent { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 18px 0 20px; border-top: 1px solid var(--mvp-hair); border-bottom: 1px solid var(--mvp-hair); outline: none; }
.mvp__sent:focus-visible { outline: 2px solid var(--moss, #3F5A30); outline-offset: 4px; border-radius: 4px; }
.mvp__mark { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--moss, #3F5A30);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3); }
.mvp__mark::after { content: ""; position: absolute; left: 12px; top: 8px; width: 7px; height: 13px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mvp__thanks { font-family: var(--sans, system-ui, sans-serif); font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }

.mvp__note { margin-top: 16px; font-size: 12.5px; line-height: 1.4; color: var(--muted, #57554E); }

/* narrow: follows the component's own width (phones, or a slim column) */
@container (max-width: 419px) {
  .mvp { border-radius: 24px; padding: 22px 20px 20px; }
  .mvp__title { font-size: 22px; }
  .mvp__tag { transform: none; }
  .mvp__btn { width: 100%; }
  .mvp__thanks { font-size: 21px; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 559px) {
    .mvp { border-radius: 24px; padding: 22px 20px 20px; }
    .mvp__btn { width: 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .mvp__input, .mvp__btn { transition: none; }
  .mvp__btn:hover { transform: none; }
}