/* ═══════════════════════════════════════════════════════════════════════════════
   monitorMyLawn — /contact. Page-scoped; composes with assets/css/marketing.css
   rather than competing with it. Tokens only — no hex outside tokens.css.

   The form shell is marketing.css's .vizframe (border + radius + header bar); only
   the field rhythm, the two-column doc and the success plate live here.

   .eyebrow USED TO LIVE HERE, duplicated from faq.css. Track S promoted it into
   marketing.css and both copies were deleted.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ---- Honeypot -------------------------------------------------------------
   Must be invisible to people and to assistive tech, but STILL SUBMITTED and still
   fillable by a naive bot. display:none is the wrong tool — many bots skip those, and
   base.css enforces [hidden] with !important which would fight us. Park it off-canvas
   instead, and keep it out of the tab order (tabindex=-1 on the input itself).
   DO NOT "TIDY" THIS INTO display:none OR [hidden]. It breaks the spam trap. */
.hp-field {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ═══ MASTHEAD ════════════════════════════════════════════════════════════════
   .helpmast IS GONE. It was a verbatim fork of the block in faq.css, and its
   `align-items: end` bottom-aligned the two columns — which is what pushed this
   page's eyebrow 45px below the top of its own right-hand column while /support was
   14px out and /faq 69px out, three different offsets from one shared pattern.
   The masthead is now marketing.css's .pagehero, whose .pagehero__grid hangs both
   columns off a single hairline. Nothing masthead-shaped belongs in this file. */

/* ═══ DOC ═════════════════════════════════════════════════════════════════════
   [ form | routes ] at >=1000px. The success plate and the form share the main
   column, because contact.js hides the FORM on success — anything else would leave
   a hole where the form used to be. */
.contactdoc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2xl); }
.contactdoc > * { min-width: 0; }
@media (min-width: 1000px) {
  .contactdoc { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--sp-3xl); align-items: start; }
  /* --stick-top, not a hard-coded 86px: marketing.css derives it from --hdr-h (+ the
     height of a sticky .contents--rail on pages that carry one), and the two copies
     of that number had already drifted apart across the help sheets. */
  .contactdoc__side { position: sticky; top: var(--stick-top); }
}
.contactdoc__main .form-banner { margin-bottom: var(--sp-lg); }

/* The three .pagehero__slot index links jump to blocks that are not .section[id],
   so marketing.css's blanket anchor offset does not reach them. Same constant. */
#message-us, .sidecard[id] { scroll-margin-top: var(--anchor-top); }

/* ═══ FORM ════════════════════════════════════════════════════════════════════ */
.contact-form { display: block; }
.contact-form .vizframe__head { gap: var(--sp-md) var(--sp-lg); }
.contact-form__body { padding: var(--sp-xl); display: grid; gap: var(--sp-xl); }

/* Grouped fields. fieldset/legend is the accessible grouping primitive; it just
   needs its default chrome removed. */
.cform__set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--sp-lg); }
/* A <legend> anchors to its fieldset's own TOP border edge — the classic cut-out —
   so a border-top here would be drawn straight through the label. The divider
   between groups goes on the BOTTOM of the preceding set instead. */
.cform__set:not(:last-child) { border-bottom: 1px solid var(--mml-rule); padding-bottom: var(--sp-xl); }
/* A <legend> is NOT a grid item even when its fieldset is display:grid — Chrome
   lays it out against the fieldset's top border edge — so `gap` does not apply to
   it and the space beneath it has to be an explicit margin. Measured: 0px without. */
.cform__set > legend {
  padding: 0; margin: 0 0 var(--sp-md);
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--mml-text-3);
}

/* Two-up on desktop, stacked on phones. auto-fit keeps it honest without a breakpoint. */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--sp-lg);
}
.form-row .field, .cform__set .field { margin: 0; }
.cform__set label { font-size: .8rem; font-weight: 600; letter-spacing: -.005em; }
.cform__set label .muted { font-weight: 400; }
.contact-form .input, .contact-form .select, .contact-form .textarea { font-size: .92rem; padding: .6rem .7rem; }
.contact-form .textarea { min-height: 168px; resize: vertical; line-height: 1.55; }
.contact-form .help { line-height: 1.5; }
.contact-form .help [data-char-count] { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.contact-form__foot {
  display: flex; align-items: center; gap: var(--sp-lg); flex-wrap: wrap;
  border-top: 1px solid var(--mml-rule); background: var(--mml-surface-hover);
  padding: var(--sp-lg) var(--sp-xl);
}
.contact-form__foot p { margin: 0; max-width: 42ch; }
/* The submit button owns its busy state so the label cannot shift width mid-request. */
.contact-form__foot .btn.is-busy { opacity: .7; cursor: progress; }

/* ═══ SUCCESS ═════════════════════════════════════════════════════════════════ */
.contact-success {
  border: 1px solid rgba(var(--mml-primary-rgb), .45);
  border-radius: var(--r-xl);
  background: rgba(var(--mml-primary-rgb), .07);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-3xl) var(--sp-xl);
  text-align: center; display: grid; gap: var(--sp-sm); justify-items: center;
}
.contact-success__mark {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-content: center;
  border: 1px solid rgba(var(--mml-primary-rgb), .5);
  background: rgba(var(--mml-primary-rgb), .12);
  color: var(--mml-link); font-size: 1.35rem; margin-bottom: var(--sp-xs);
}
.contact-success h2 { margin: 0; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); letter-spacing: -.022em; }
.contact-success h2:focus-visible { outline: 2px solid var(--mml-primary); outline-offset: 4px; }
.contact-success p { margin: 0; max-width: 52ch; }

/* ═══ SIDE: the other routes ══════════════════════════════════════════════════ */
.contactdoc__side { display: grid; gap: 0; border-top: 1px solid var(--mml-rule); }
.sidecard { padding: var(--sp-lg) 0; border-bottom: 1px solid var(--mml-rule); }
.sidecard h2 { margin: 0 0 var(--sp-sm); display: flex; align-items: center; gap: var(--sp-sm); }
.sidecard h2 i { color: var(--mml-link); font-size: 1em; }
.sidecard p { margin: 0; font-size: .87rem; line-height: 1.6; color: var(--mml-text-2); }
.sidecard p + p { margin-top: var(--sp-sm); }
.sidecard__mail {
  font-family: var(--font-mono); font-size: .85rem; font-weight: 700;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}