/* Our HubSpot forms (inc/forms-api.php). Built on the theme tokens, so they follow
   light and dark mode like the rest of the page. */
.cc-nf { display: grid; gap: 16px; font-family: var(--sans); color: var(--fg); text-align: left; position: relative; }
.cc-nf-row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .cc-nf-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-nf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Narrow cards (landing page side card) keep one column. */
.cc-lp-formcard .cc-nf-row { grid-template-columns: minmax(0, 1fr); }
.cc-nf-field { min-width: 0; }
.cc-nf-field[hidden] { display: none; }
.cc-nf-field > label, .cc-nf-field legend { display: block; font: 500 13.5px/1.4 var(--sans); color: var(--fg); margin: 0 0 6px; padding: 0; }
.cc-nf fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.cc-nf-req { color: var(--accent); margin-left: 2px; }
.cc-nf-desc { margin: -2px 0 8px; font: 400 12.5px/1.5 var(--sans); color: var(--fg-2); }
.cc-nf input[type="text"], .cc-nf input[type="email"], .cc-nf input[type="tel"], .cc-nf input[type="number"],
.cc-nf input[type="date"], .cc-nf input[type="url"], .cc-nf select, .cc-nf textarea {
  display: block; width: 100%; box-sizing: border-box; margin: 0;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-2); border-radius: 9px;
  padding: 11px 14px; font: 400 14.5px/1.4 var(--sans);
  outline: none; transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none; appearance: none;
}
.cc-nf select {
  padding-right: 38px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.cc-nf textarea { min-height: 112px; resize: vertical; }
.cc-nf input::placeholder, .cc-nf textarea::placeholder { color: var(--fg-3); }
.cc-nf input:focus, .cc-nf select:focus, .cc-nf textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cc-nf-check { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.5 var(--sans); color: var(--fg-1); margin: 0 0 8px; cursor: pointer; }
.cc-nf-check input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--accent); }
.cc-nf-legal { display: grid; gap: 8px; }
.cc-nf-legal-text, .cc-nf-rich { font: 400 12.5px/1.6 var(--sans); color: var(--fg-2); }
.cc-nf-legal-text p, .cc-nf-rich p { margin: 0 0 6px; }
.cc-nf-rich h2, .cc-nf-rich h3, .cc-nf-rich h4 { margin: 4px 0 2px; font: 600 19px/1.3 var(--sans); letter-spacing: -.2px; color: var(--fg); }
.cc-nf-legal a, .cc-nf-rich a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.cc-nf-actions { display: flex; align-items: center; gap: 12px; }
.cc-nf-submit { cursor: pointer; }
.cc-nf-submit[disabled] { opacity: .65; cursor: progress; }
.cc-nf.is-sending .cc-nf-submit::after { content: ""; display: inline-block; width: 12px; height: 12px; margin-left: 8px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: cc-nf-spin .7s linear infinite; }
@keyframes cc-nf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cc-nf.is-sending .cc-nf-submit::after { animation: none; } }
.cc-nf-field.is-invalid input, .cc-nf-field.is-invalid select, .cc-nf-field.is-invalid textarea { border-color: var(--accent); }
.cc-nf-error { margin: 6px 0 0; font: 500 12.5px/1.4 var(--sans); color: var(--accent); }
.cc-nf-status { font: 500 13px/1.4 var(--sans); color: var(--accent); min-height: 0; }
.cc-nf-status:empty { display: none; }
.cc-nf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.cc-nf-thanks { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius, 12px); background: var(--bg-1); color: var(--fg); font: 400 15px/1.6 var(--sans); outline: none; }
.cc-nf-thanks p { margin: 0 0 8px; }
.cc-nf-thanks p:last-child { margin: 0; }