.offer { margin-top: var(--space-sm); }
.offer > summary {
  list-style: none;
  display: inline-flex;
  inline-size: 100%;
  min-block-size: var(--control-height);
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-lg);
  border: var(--rule-hair) solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
.offer > summary::-webkit-details-marker { display: none; }
.offer > summary:hover, .offer[open] > summary { background: var(--color-paper-2); }
.offer > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.offer__form { margin-top: var(--space-md); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.offer__lede { margin: 0 0 var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); line-height: var(--lh-normal); }
.offer__form .button { margin-top: 0; }
.offer__form .button--accept { margin-top: var(--space-sm); }
.offer-status { margin: var(--space-sm) 0 0; font-size: var(--text-sm); min-block-size: 1.2em; color: var(--color-ink); line-height: var(--lh-normal); }
.offer-status[data-state="ok"] { color: var(--color-success); }
.offer-status[data-state="err"] { color: var(--color-error); }
.offer [hidden] { display: none !important; }
.offer__form[data-offer-done="true"] .wf-grid,
.offer__form[data-offer-done="true"] button[type="submit"] { display: none; }
.offer-result { max-inline-size: 40rem; padding-block: clamp(2.5rem, 6vw, 5rem); }
.offer-result h1 { font-family: var(--font-display); font-size: var(--text-xl); margin: 0 0 var(--space-md); }
.offer-result p { line-height: var(--lh-normal); }
.offer-result .button { margin-top: var(--space-sm); }