/* contact.html page-specific styles. Tokens only, no raw sizes/colors.
   Layout idea: the form IS the page. No interludes; the piece just settles
   (finale, small scale) behind the head, then everything below is frame. */

.contact-head{
  padding:calc(var(--nav-h) + var(--space-8)) 0 var(--space-6);
  min-height:auto;
}
.contact-head .lbl{ margin-bottom:var(--space-4) }
.contact-head h1{ margin-top:var(--space-2) }
.contact-head .lead{ margin-top:var(--space-5) }
/* .meta is already defined in style.css (used on the homepage contact chapter);
   reused verbatim here, just tightened to the head's own rhythm */
.contact-head .meta{ margin-top:var(--space-6) }

.contact-form-section{ padding-top:0 }

/* success banner for ?sent=1, toggled by contact.js. Never hidden with only
   CSS opacity: the hidden attribute keeps it out of the accessibility tree
   until a real send happens. */
.sent-banner{
  margin:0 0 var(--space-5);
  padding:var(--space-4) var(--space-5);
  background:var(--panel);
  border:1px solid var(--blue-light);
  border-radius:var(--radius-2);
  color:var(--paper);
  font-size:var(--step-0);
  max-width:none;
}

/* button plus one reassurance line beside it, wrapping to stacked on narrow forms */
.form-cta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-4);
  margin-top:var(--space-2);
}
.form-cta .btn{ margin-top:0 }
.form-cta .reassure{
  margin:0;
  color:var(--muted);
  font-size:var(--step--1);
  line-height:1.45;
  max-width:32ch;
}
@media (max-width:480px){
  .form-cta{ flex-direction:column; align-items:stretch }
  .form-cta .reassure{ max-width:none }
}

/* what happens next: three numbered rows, same ledger rhythm as the homepage
   facts chapter but without the hairline rule (this is a short close, not a
   long list) */
.contact-next{ padding-top:0 }
.next-steps{
  list-style:none;
  margin:var(--space-6) 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--space-6);
}
.next-steps li{
  display:grid;
  grid-template-columns:2.5rem 1fr;
  column-gap:var(--space-4);
}
.next-steps h3{ margin:0 0 var(--space-2) }
.next-steps p{ margin:0; color:var(--muted); max-width:var(--measure) }