@charset "utf-8";
/* ==========================================================================
   HubSpot form, wearing the SmartLab contact form's clothes.

   Loaded only by contact.html. The embed is created with `css: ''` and
   `cssRequired: ''` so HubSpot injects none of its own stylesheets and this
   file is the only thing styling the form.

   Every value here is read from a token or copied from the `.cform` rules in
   smartlab-v2-product.css, so the two forms cannot drift apart — change .cform
   and this follows, because it inherits the same custom properties.

   HubSpot's class names are stable and documented, but the exact markup can
   change if the form is edited in HubSpot (a new field type, a consent block).
   Anything not covered below falls back to inheriting the page's typography
   rather than to HubSpot's default styling, which is the safer failure mode.
   ========================================================================== */

/* --- The form element ---------------------------------------------------- */
.cform__hs .hs-form,
.cform__hs form {
  display: flex; flex-direction: column; gap: 20px;
}

/* HubSpot wraps rows in <fieldset>. Strip the UA styling and let its
   form-columns-N classes drive the grid, matching .cform__row. */
.cform__hs fieldset {
  border: 0; margin: 0; padding: 0; max-width: none;
  display: grid; gap: 20px;
}
.cform__hs fieldset.form-columns-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.cform__hs fieldset.form-columns-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.cform__hs fieldset.form-columns-1 { grid-template-columns: 1fr; }
/* HubSpot sizes its columns with inline-ish width classes; neutralise them so
   the grid above is what actually decides the layout. */
.cform__hs fieldset .hs-form-field,
.cform__hs fieldset .input { width: auto; float: none; margin: 0; }

/* --- Fields -------------------------------------------------------------- */
.cform__hs .hs-form-field { display: flex; flex-direction: column; gap: 7px; }
.cform__hs .hs-form-field > label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--ink);
  display: block; margin: 0;
}
.cform__hs .hs-form-required { color: var(--accent-ink); }
.cform__hs .hs-field-desc {
  font-size: .8125rem; line-height: 1.55; color: var(--ink-3); margin: 0;
}

/* HubSpot wraps every control in <div class="input">. It has no styling of its
   own here; it just must not constrain the control's width. */
.cform__hs .input { width: 100%; margin: 0; }

/* --- Controls — identical to .cform input/select/textarea ---------------- */
.cform__hs input[type=text],
.cform__hs input[type=email],
.cform__hs input[type=tel],
.cform__hs input[type=number],
.cform__hs input[type=url],
.cform__hs select,
.cform__hs textarea {
  font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  padding: 13px 15px; width: 100%; box-sizing: border-box;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.cform__hs textarea { resize: vertical; min-height: 110px; }
.cform__hs input::placeholder,
.cform__hs textarea::placeholder { color: var(--ink-3); }

.cform__hs input:focus,
.cform__hs select:focus,
.cform__hs textarea:focus {
  outline: 2px solid transparent; outline-offset: 2px;   /* forced-colors: see .cform */
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* The same chevron as .cform select, drawn in --ink-3. The two vendor prefixes
   matter: without them Safari keeps its native select arrow and draws this
   chevron as well, which is the one way these fields can end up looking
   different from their neighbours on an otherwise correct page. */
.cform__hs select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 13px;
  padding-right: 40px;
}
/* Safari ignores background-image on a select in forced-colors / some legacy
   modes; the field still reads correctly, it just gets the native arrow. */

/* --- Checkboxes and radios ---------------------------------------------- */
.cform__hs .inputs-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cform__hs .inputs-list li label {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-base); font-weight: 400; line-height: 1.55; color: var(--ink-2);
}
.cform__hs .inputs-list input[type=checkbox],
.cform__hs .inputs-list input[type=radio] {
  width: auto; margin: 3px 0 0; accent-color: var(--accent-fill); flex: none;
}

/* --- Consent / legal text ----------------------------------------------- */
.cform__hs .legal-consent-container,
.cform__hs .hs-richtext {
  font-size: .8125rem; line-height: 1.6; color: var(--ink-3);
}
.cform__hs .legal-consent-container p:not(:last-child) { margin-bottom: 10px; }
.cform__hs .hs-richtext a,
.cform__hs .legal-consent-container a { color: var(--accent-ink); font-weight: 700; }

/* --- Submit — reuses the .btn / .btn--accent look ------------------------ */
.cform__hs .hs_submit .actions { margin: 4px 0 0; padding: 0; }
.cform__hs input[type=submit].hs-button,
.cform__hs .hs-button {
  /* Copied from .btn + .btn--accent rather than shared, because HubSpot renders
     an <input type=submit> and .btn's rules are scoped to .btn. */
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 15px 26px; border-radius: var(--r-pill); border: 1px solid transparent;
  background: var(--accent-fill); color: var(--accent-on);
  box-shadow: var(--shadow-sm); cursor: pointer; text-align: center;
  align-self: flex-start; width: auto;
  transition: background-color var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.cform__hs input[type=submit].hs-button:hover,
.cform__hs .hs-button:hover {
  background: transparent; color: var(--accent-ink); border-color: var(--accent-ink);
}
.cform__hs .hs-button:disabled { opacity: .55; cursor: default; }

/* --- Validation --------------------------------------------------------- */
.cform__hs .hs-error-msgs {
  list-style: none; margin: 0; padding: 0;
}
.cform__hs .hs-error-msg,
.cform__hs .hs-error-msgs label {
  font-size: .8125rem; font-weight: 400; line-height: 1.5; color: #b3261e;  /* 5.9:1 on white */
}
.cform__hs .hs-input.error,
.cform__hs .hs-input.invalid { border-color: #b3261e; }
.cform__hs .hs_error_rollup { margin: 0; }
.cform__hs .hs_error_rollup .hs-error-msgs label { font-weight: 700; }

/* --- The thank-you state ------------------------------------------------ */
.cform__hs .submitted-message {
  font-size: var(--fs-lg); line-height: 1.6; color: var(--ink-2);
  background: var(--accent-tint); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 24px 26px;
}
.cform__hs .submitted-message p:not(:last-child) { margin-bottom: 12px; }

/* While the embed is still loading, hold the space so the card does not jump. */
.cform__hs:empty { min-height: 420px; }
.cform__hsFallback { font-size: var(--fs-base); line-height: 1.65; color: var(--ink-2); }
.cform__hsFallback a { color: var(--accent-ink); font-weight: 700; }

@media (max-width: 767px) {
  .cform__hs fieldset.form-columns-2,
  .cform__hs fieldset.form-columns-3 { grid-template-columns: 1fr; }
}