.nl1 {
  --nl1-ink: var(--nl1-title-color); --nl1-muted: var(--nl1-text-color); --nl1-surface: var(--nl1-band-bg);
  --nl1-btn-bg: var(--nl1-accent); --nl1-btn-fg: var(--nl1-on-accent); --nl1-mark: var(--nl1-highlight);
  background: var(--nl1-bg); padding: var(--nl1-pad); font-family: var(--nl1-text-font);
}
.nl1-accent {
  --nl1-ink: var(--nl1-on-accent); --nl1-muted: color-mix(in srgb, var(--nl1-on-accent) 78%, transparent); --nl1-surface: var(--nl1-accent);
  --nl1-btn-bg: var(--nl1-on-accent); --nl1-btn-fg: var(--nl1-accent); --nl1-mark: var(--nl1-on-accent);
}
.nl1-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--nl1-form-w)); align-items: center; gap: 20px clamp(24px, 4vw, 56px);
  padding: var(--nl1-band-pad); background: var(--nl1-surface); color: var(--nl1-ink); border-radius: var(--nl1-radius);
}
.nl1-full .nl1-band { background: transparent; border-radius: 0; border-block: 1px solid var(--nl1-border); padding-inline: 0; }
.nl1-boxed .nl1-band { border: 1px solid var(--nl1-border); }

.nl1-copy { display: flex; align-items: center; gap: 18px; min-width: 0; }
.nl1-icon {
  display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%;
  color: var(--nl1-mark); border: 1.5px solid color-mix(in srgb, var(--nl1-mark) 55%, transparent);
  background: color-mix(in srgb, var(--nl1-mark) 10%, transparent);
}
.nl1-kicker {
  margin-bottom: 4px; font-family: var(--fx-font-accent); font-size: 11.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--nl1-mark);
}
.nl1 .nl1-title {
  font-family: var(--nl1-title-font); font-size: clamp(20px, 2.6vw, var(--nl1-title-size)); font-weight: var(--nl1-title-weight);
  line-height: 1.12; letter-spacing: -.015em; color: var(--nl1-ink);
}
.nl1-text { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--nl1-muted); }

.nl1-form { display: grid; gap: 10px; min-width: 0; }
.nl1-flash { margin: 0; }
.nl1-line {
  display: flex; align-items: stretch; gap: 6px; padding: 5px;
  background: var(--nl1-field-bg); border: 1px solid var(--nl1-border); border-radius: var(--nl1-btn-radius);
  transition: border-color .15s, box-shadow .15s;
}
.nl1-line:focus-within { border-color: var(--nl1-btn-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--nl1-btn-bg) 28%, transparent); }
.nl1-input {
  flex: 1 1 0; min-width: 0; padding: 10px 14px; border: 0; background: transparent; color: var(--nl1-title-color);
  font-size: 15px; border-radius: var(--nl1-btn-radius);
}
.nl1-input::placeholder { color: color-mix(in srgb, var(--nl1-title-color) 45%, transparent); }
.nl1-input:focus { outline: none; }
.nl1-name { flex: 0 1 36%; border-right: 1px solid var(--nl1-border); border-radius: 0; }
.nl1-btn {
  display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 11px 20px; cursor: pointer;
  border: 0; border-radius: var(--nl1-btn-radius); background: var(--nl1-btn-bg); color: var(--nl1-btn-fg);
  font-weight: 700; font-size: 14.5px; line-height: 1.1; white-space: nowrap; transition: filter .15s;
}
.nl1-accent .nl1-btn { background: var(--nl1-accent); color: var(--nl1-on-accent); }
.nl1-btn:hover { filter: brightness(1.08); }
.nl1-btn:focus-visible { outline: 2px solid var(--nl1-title-color); outline-offset: 2px; }
.nl1-consent { display: flex; align-items: flex-start; gap: 10px; padding-inline: 6px; font-size: 12.5px; line-height: 1.45; color: var(--nl1-muted); }
.nl1-consent input { flex: none; width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--nl1-btn-bg); cursor: pointer; }
.nl1-consent label { cursor: pointer; }

@media (max-width: 980px) {
  .nl1-band { grid-template-columns: minmax(0, 1fr); }
  .nl1-form { max-width: var(--nl1-form-w); }
}
@media (max-width: 620px) {
  .nl1-band { padding: 24px 20px; }
  .nl1-full .nl1-band { padding: 24px 0; }
  .nl1-copy { align-items: flex-start; }
  .nl1-icon { width: 42px; height: 42px; }
  .nl1-line { flex-wrap: wrap; border-radius: min(var(--nl1-btn-radius), 18px); }
  .nl1-name { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--nl1-border); }
  .nl1-btn { flex: 1 1 100%; justify-content: center; border-radius: min(var(--nl1-btn-radius), 14px); }
  .nl1-form { max-width: none; }
}
