/* selling.css: page-scoped styles for /selling (only that page loads it,
   the reference chassis's contact.css pattern). Everything shared (tokens,
   .steps, .form, .field, .alert, .cta-band) lives in styles.css; this file
   adds the two layouts that exist nowhere else on the site (the sticky
   process intro and the valuation form card) plus the states forms.js
   toggles that styles.css does not yet name (.form__field--invalid,
   .form__field--hp, .form__status). Keep it small: a page stylesheet is
   where drift starts. No inline styles anywhere, the CSP is strict
   (Trevor's ask, 2026-09-23). Mobile first; breakpoints match styles.css. */

/* Page head: the two calls to action under the lede. */
.page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 24px;
}

/* Anchor targets sit under the fixed top bar; give them room when jumped to. */
#process, #valuation { scroll-margin-top: calc(var(--bar-h) + 12px); }

/* ============ Process ============
   Intro at the left, the seven numbered steps at the right. From 900px the
   intro sticks while the steps scroll past it, so the "start with a free
   valuation" link stays in view for the whole list. */
.process { display: grid; gap: clamp(24px, 4vw, 48px); }
.process__steps { margin-bottom: 0; }
.process__steps li { padding-top: 20px; padding-bottom: 20px; }
.process__steps h3 { margin-bottom: 6px; }
@media (min-width: 900px) {
  .process { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; }
  .process__intro { position: sticky; top: calc(var(--bar-h) + 28px); }
}

/* ============ Valuation ============
   Copy at the left, the form card at the right and a little wider, since the
   form is the point of the section. */
.valuation__grid { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) {
  .valuation__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.valuation__sub {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 28px 0 12px;
}
.valuation__card { padding: clamp(22px, 3.5vw, 36px); }
.valuation__card .form__row { gap: 16px; }

/* ============ forms.js states (contract in site/assets/forms.js) ============
   Scoped under .valuation, the same way buying.css scopes its copy under
   .buying: each page stylesheet owns its own form's states until the shared
   stylesheet names them once, so no two page files can fight over a global. */
/* Honeypot: off-screen, never display:none (some bots check). Same as .hp;
   named again because forms.js's contract uses this class. */
.valuation .form__field--hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/* A missing or malformed required field: red label and border, no colour-only
   signal (the alert names the fields too). */
.valuation .form__field--invalid .field__label { color: var(--danger); }
.valuation .form__field--invalid input,
.valuation .form__field--invalid textarea {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12);
}
/* The status box is empty until the first submit; give it no height until then. */
.valuation .form__status:empty { display: none; }
.valuation .form__status .alert { margin-top: 4px; }
.valuation .form.is-sent .form__status .alert { margin-top: 0; }
.valuation .alert__body { margin: 0; }
.valuation .alert__action { margin: 14px 0 0; }
.valuation .form.is-sending .btn { cursor: progress; }