/* Page-scoped CSS from mock-site/contact.html
   Generated; do not hand-edit. */
/* ==========================================================================
   PAGE-SCOPED ONLY. Five small components, all built from site.css tokens.
   Nothing in site.css is overridden and no shared component is restyled.
   ========================================================================== */

/* --- 1. Reason card ------------------------------------------------------
   A .card with a numbered tab and a routed link list in the foot. The tab is
   the design system's "colored rule on a paper record" gesture applied to a
   card that is explicitly one of an ordered set of four. */
.reason { display: flex; flex-direction: column; }
.reason__n {
  font-family: var(--font-num); font-variant-numeric: tabular-nums;
  font-size: var(--t-micro); font-weight: 600; color: var(--accent);
  display: inline-block; padding: 2px var(--s-2); margin-bottom: var(--s-3);
  border: 1px solid var(--c-plum-200); border-radius: var(--r-xs);
  background: var(--accent-tint);
}
.reason__body { color: var(--text-soft); font-size: var(--t-small); }
.reason__body > * + * { margin-top: var(--s-3); }
.reason__foot { margin-top: auto; padding-top: var(--s-5); border-top: var(--hair); }

/* --- 2. Routed link list -------------------------------------------------
   The deflection device. Each row is "where this goes" + "what you get",
   so the reader can tell before clicking whether it is their answer. */
.routes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.routes li { display: grid; gap: 2px; }
.routes a { font-weight: 600; font-size: var(--t-small); }
.routes span { font-size: var(--t-micro); color: var(--text-mute); }

/* --- 3. The address slot -------------------------------------------------
   Deliberately conspicuous. It is a hole in the page and it should look like
   one — a dashed frame reading as "not filled in", never as a rendered value.
   Uses the system's warn tokens, which are reserved for exactly this. */
.addr {
  display: grid; gap: var(--s-2);
  padding: var(--s-5); border-radius: var(--r-md);
  border: 1px dashed var(--c-warn-line); border-left: var(--rule) solid var(--c-warn);
  background: var(--c-warn-bg);
}
.addr__k {
  font-family: var(--font-display); font-size: var(--t-eyebrow); font-weight: 700;
  letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--c-warn);
}
.addr__v { font-family: var(--font-num); font-size: var(--t-h4); font-weight: 600; color: var(--text); }
.addr__note { font-size: var(--t-micro); color: var(--text-soft); }

/* --- 4. What happens to a message ---------------------------------------
   Numbered flow. Not .steps — that component is the checkout progress rail
   and reusing it here would imply a wizard the reader is standing in. */
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-5); counter-reset: flow; }
.flow li {
  counter-increment: flow; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: var(--s-4); align-items: start;
}
.flow li::before {
  content: counter(flow); grid-row: span 2;
  display: grid; place-items: center; width: 28px; height: 28px;
  border: var(--hair-strong); border-radius: var(--r-sm);
  font-family: var(--font-num); font-size: var(--t-micro); font-weight: 600;
  color: var(--text-soft); background: var(--bg-card);
}
.flow b { display: block; font-family: var(--font-display); font-size: var(--t-small); }
.flow p { font-size: var(--t-micro); color: var(--text-mute); margin-top: 2px; }

/* --- 5. Deflection groups ------------------------------------------------
   Five groups of questions that do not need a person. Auto-fit so it is 3-up
   on a laptop, 2-up on a tablet and stacked on a phone with no breakpoint
   arithmetic.
   The 340px floor is chosen, not default: at 240px the row fitted FOUR
   columns and left the fifth group stranded alone on row two. 340px gives
   3 + 2, which reads as a deliberate arrangement, and the wider column stops
   these question-shaped links wrapping to three lines each. */
.deflect { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.deflect h3 { font-size: var(--t-h4); }
.deflect ul { list-style: none; padding: 0; margin: var(--s-4) 0 0; display: grid; gap: var(--s-3); }
.deflect a { font-size: var(--t-small); }

/* --- 6. Shared-component bug, patched page-scoped ------------------------
   ⚠ DESIGN LEAD: this is a defect in .field, not in this page, and it will
   hit every page that pairs a hinted field with an unhinted one in the same
   .form-grid row.
     .field is `display: grid` and .form-grid rows stretch by default, so a
   field whose neighbor carries a .hint inherits the taller row and grows
   its own <input> to fill it. Rendered result: "Your name" was a 50px-tall
   box beside a normal-height "Email".
   Patched here with align-content, which pins each control to its natural
   height and leaves the row height alone. The real fix belongs in site.css
   (`.field { align-content: start; }`) — not edited, it is not this page's
   file. Logged in docs/decisions-fragments/contact-page.md. */
.form-grid > .field { align-content: start; }