/* buying.css: page-scoped layout for /buying and nothing else.
   Trevor's ask, 2026-09-23: keep Jas's colours and look. Every colour, radius
   and shadow here is a token from styles.css; this file only adds the layout
   the Buying page needs (the two-column steps, the guide form card) and the
   forms.js contract classes styles.css does not carry yet. Loaded after
   styles.css by site/buying.html alone, so nothing leaks into other pages.
   A real file, never a style attribute: the CSP is strict. */

/* ============ Page head ============ */
/* The two buttons under the lede: get the guide (in-page) and Let's Talk. */
.buying__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ============ Steps ============ */
/* Six steps read as one column on phones. From 900px they sit two across so
   the list is not a tall stack beside all that empty width; the numbers
   still read left to right, top to bottom. */
@media (min-width: 900px) {
  .buying__steps { grid-template-columns: 1fr 1fr; gap: 18px; }
}

/* ============ The guide: copy left, form card right ============ */
.guide { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) {
  .guide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 5vw, 72px); }
}
.guide__intro .ticks { margin-bottom: 1.4em; }
.guide__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold); /* the one gold accent on this screen */
  border-radius: var(--radius);
  padding: clamp(22px, 3.5vw, 36px);
  box-shadow: var(--shadow-2);
}
.guide__card-title { font-size: 24px; margin-bottom: 18px; }

/* ============ forms.js contract ============
   forms.js toggles classes that styles.css does not define yet:
   .form__fields wraps every control and is hidden after success,
   .form__field wraps one control (paired with styles.css's .field for the
   layout), .form__field--hp is the honeypot (paired with .hp) and
   .form__field--invalid marks a required field the visitor missed.
   Scoped to .buying so a later site-wide definition in styles.css can take
   over without a specificity fight. */
.buying .form__fields { display: grid; gap: 18px; }
.buying .form__field--hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.buying .form__field--invalid .field__label { color: var(--danger); }
.buying .form__field--invalid input { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.12); }
.buying .field__optional { font-weight: 400; font-size: 13px; color: var(--ink-2); margin-left: 4px; }
/* The status box is a grid row of the form; when nothing has rendered in it
   yet it should take no space (and no gap). */
.buying .form__status:empty { display: none; }
.buying .alert__body { margin: 0; }
.buying .alert__action { margin: 12px 0 0; }
/* After success only the alert remains; give it the card's full width and
   a little air below the title. */
.buying .guide-form.is-sent .form__status { margin-top: 0; }