/* NeuroScale-specific 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. The big lead paragraphs (hero tagline,
   overview) use .uk-text-lead (20px, from brand.css). */
main p { font-size: 18px; line-height: 1.7; }

/* ── Hero: full-bleed cover background (neuroscale_hero.png) scaled to the page
      width, NeuroScale mark + title/tagline centered on top. ─────────────────── */
.ns-hero {
  background: var(--np-wash) url(/static/img/neuroscale_hero.png) no-repeat center center;
  background-size: cover;
}
.ns-hero-inner { padding: 120px 0; text-align: center; }
/* Translucent white card behind the mark + title/subtitle so they read clearly
   over the hero image; shrink-wraps its content and centers in the band. */
.ns-hero-box {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  max-width: 92vw;
  padding: 34px 48px;
  text-align: left;
  background: rgba(255, 255, 255, .6);
  border-radius: 6px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .12);
}
.ns-hero-mark { width: 130px; height: auto; flex: none; }
/* Title in the brand heading font (Raleway) — uk-heading-* would pull the
   system stack. Subtitle shares the title's left edge (no lead indent). */
.ns-hero-title {
  margin: 0;
  font-family: var(--np-font-head);
  font-weight: 500;
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  line-height: 1.1;
  color: var(--np-ink);
}
/* Bold keyword subtitle inside the H1 — plain block span so it shares the title's
   left edge (uk-text-lead was pulling a different font + indent). */
.ns-hero-subtitle {
  display: block;
  margin: 6px 0 0;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--np-ink);
}
/* Expansive one-line blurb under the subtitle (muted, smaller) — the description
   tier, mirroring the neuropype.io hero. */
.ns-hero-blurb {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--np-muted);
}
@media (max-width: 640px) {
  .ns-hero-inner { padding: 72px 0; }
  .ns-hero-box { flex-direction: column; gap: 16px; text-align: center; padding: 28px 30px; }
  .ns-hero-mark { width: 120px; }
}

/* ── Feature / service cards: subtle light-grey gradient tint so they lift off
      the section behind them (works on both white and dark sections). Text is
      forced to ink so it stays readable inside `uk-light` (dark) sections. ───── */
.ns-card {
  background: linear-gradient(180deg, #fcfcfd 0%, #eceef1 100%);
  border: 1px solid var(--np-line);
  border-radius: 5px;
  color: var(--np-ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
/* Force ink on the title too — inside a dark (uk-section-secondary / uk-light)
   section UIkit would otherwise colour the card title white. */
.ns-card .uk-card-title,
.ns-card h3 { color: var(--np-ink) !important; }
/* Extra breathing room between the icon and the text block. */
.ns-card-icon { margin-right: 8px; }

/* ── Use cases: image + text rows, image alternating sides ────────────────── */
.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;
  object-fit: cover;      /* varied source aspect ratios fill the frame, no distortion */
}
.np-usecase-text { flex: 1; }
/* 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: 40px; }
@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;
    aspect-ratio: 500 / 335;
    margin: 0 auto 16px !important;
  }
}

/* ── NeuroPype deploy band: brand-teal, so it separates from the dark Services
      section above and reads as an on-brand call-to-action. ─────────────────── */
.ns-neuropype { background-color: var(--np-accent); }
.ns-steps-desktop { max-width: 900px; width: 100%; height: auto; }

/* Footer disclaimer: constrained, faint (on the dark footer). */
.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 other
   uk-section-small bands. */
footer.uk-section-small { padding-top: 24px; padding-bottom: 24px; }

/* Markdown/legal pages: keep images tidy in the article flow. */
.np-article img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
.np-article li { margin-bottom: 6pt; }