/* Bespoke bits only. UIkit 3 + brand.css handle layout and the brand look;
 * this file is just the few things UIkit doesn't give us. */

/* ── Marketing-page body paragraph size — tweak this to taste ──────────────
   Affects normal <p> in the page body (feature/use-case/hardware/contact text).
   The big lead paragraphs (hero tagline, overview) are separate: .uk-text-lead
   in brand.css (20px). The global base for ALL text is html{font-size:15px} in
   brand.css — but that's shared with the app, so change it here instead. */
main p { font-size: 18px; line-height: 1.7; }

/* Hero: 1800×600 video frame (matches neuropype.io) inside a 70px band.
   .np-hero is the uk-cover frame; the video fills it and the card sits on top. */
.np-hero-section { padding: 70px 0; }
.np-hero {
  max-width: 1800px;
  height: 600px;
  margin: 0 auto;
  background: var(--np-wash);
}
@media (max-width: 640px) {
  .np-hero { height: 420px; }
}
/* Hero card: the lead tagline drops the global 20% left indent (overview keeps
   it), and the NP icon is scaled down. */
.np-hero-section .uk-text-lead { padding-left: 0; }
.np-hero-section .uk-card img { max-width: 75%; height: auto; }

/* LSL badge next to the hardware intro → labstreaminglayer.org. */
.np-lsl {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid var(--np-accent);
  color: var(--np-accent);
  font-family: var(--np-font-head);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all .15s ease-in-out;
}
.np-lsl:hover { background: var(--np-accent); color: #fff; }

/* Use cases: gif + text rows, text alternating sides (530×335 frame, 20px gap). */
.np-usecase {
  display: flex;
  align-items: center;
  margin-bottom: 50px;
}
.np-usecase:last-child { margin-bottom: 0; }
.np-usecase-gif {
  width: 500px;
  height: 335px;
  flex: none;
  display: block;
}
.np-usecase-text { flex: 1; }
/* 20px gap on the side that faces the text. */
.np-usecase .np-usecase-gif      { margin-right: 40px; }
.np-usecase-alt .np-usecase-gif  { margin-right: 0; margin-left: 20px; }
@media (min-width: 960px) {
  .np-usecase-alt { flex-direction: row-reverse; }
}
@media (max-width: 959px) {
  .np-usecase, .np-usecase-alt { flex-direction: column; text-align: center; }
  .np-usecase-gif {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin: 0 auto 16px !important;
  }
}

/* Edition price line: bold dark Raleway. */
.np-price {
  font-family: var(--np-font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--np-ink);
}

/* Edition feature list with teal check marks. */
.np-checklist { list-style: none; padding: 0; }
.np-checklist > li { position: relative; padding-left: 24px; }
.np-checklist > li::before {
  content: "\2713";          /* ✓ */
  position: absolute;
  left: 0;
  color: var(--np-accent);
  font-weight: 700;
}

/* Hardware device lists: tighter, muted. */
.np-device-list > li { font-size: 14px; break-inside: avoid; }
.np-device-list > li:not(:first-child) { border-top: none; margin-top: 4px; padding-top: 0; }

/* Footer disclaimer: constrained, faint. */
.np-disclaimer { max-width: 760px; margin: 12px auto 0; color: rgba(255, 255, 255, .45); }

/* Trim the footer height. Scoped to <footer> so it doesn't shrink the overview
   band, which also uses .uk-section-small. (uk-section-small default ≈ 40px.) */
footer.uk-section-small { padding-top: 24px; padding-bottom: 24px; }

/* Honeypot anti-spam field (visually hidden, still submitted). */
.np-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }