/* Fast quote. Uses the template's own custom properties so it inherits the
   North Star palette rather than restating it. */
.nsq-section { padding: 5rem 0; background: var(--accent-color-5); }
.nsq-head { max-width: 46rem; margin: 0 0 2.5rem; }
.nsq-head h2 { font-family: var(--font-family-1); text-transform: uppercase; line-height: 1.05; }
.nsq-head p { color: var(--text-color); margin-top: 1rem; }
.nsq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nsq-grid .nsq-full { grid-column: 1 / -1; }
.nsq-field label { display: block; font-family: var(--font-family-2); font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-color-6); margin-bottom: 0.4rem; }
.nsq-field input, .nsq-field select {
  width: 100%; padding: 0.85rem 1rem; background: var(--secondary);
  border: 1px solid var(--accent-color-3); color: var(--primary);
  font-family: var(--font-family-2); border-radius: 2px; }
.nsq-field input:focus, .nsq-field select:focus {
  outline: none; border-color: var(--accent-color); }
.nsq-checks { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; margin-top: 0.25rem; }
.nsq-check { display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--text-color); font-family: var(--font-family-2); font-size: 0.95rem; cursor: pointer; }
.nsq-check input { accent-color: var(--accent-color); width: 1rem; height: 1rem; }
.nsq-actions { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1.75rem; }
.nsq-fineprint { color: var(--accent-color-6); font-size: 0.85rem; max-width: 34rem; }
.nsq-result { margin-top: 2rem; padding: 1.75rem; background: var(--secondary);
  border-left: 3px solid var(--accent-color); }
.nsq-range-label { font-family: var(--font-family-2); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-color-6); margin: 0; }
.nsq-range { font-family: var(--font-family-1); font-size: clamp(2rem, 5vw, 3rem);
  color: var(--primary); margin: 0.25rem 0 0.75rem; }
.nsq-note { color: var(--text-color); font-size: 0.95rem; margin: 0 0 0.5rem; }
.nsq-flag { color: var(--accent-color); }
@media (max-width: 767px) {
  .nsq-grid { grid-template-columns: 1fr; }
  .nsq-section { padding: 3.5rem 0; }
}

/* Hero video. The template sized a YouTube iframe here; a native <video>
   needs the same cover behaviour or it letterboxes inside the banner. */
#banner-video-background { position: absolute; inset: 0; overflow: hidden; }
#banner-video-background .hero-video {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%; height: 100%;
  min-width: 100%; min-height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* The result panel now ends in a call action rather than a figure. */
.nsq-cta-line { margin: 1.5rem 0 1rem; }