/* Website-specific page rules. Stacks on top of ../styles.css which
   provides the full NeoHelio token sheet. Most things you'd expect on a
   marketing site (smooth scroll, link styles, scrollbar visibility) live
   here so the brand book's artboard rules aren't disturbed. */

html, body {
  margin: 0;
  padding: 0;
  background: var(--nh-bg);
  color: var(--nh-ink);
  font-family: var(--nh-sans);
  -webkit-font-smoothing: antialiased;
}

html { scroll-behavior: smooth; }

#root { min-height: 100vh; display: flex; flex-direction: column; }

/* Re-enable scrollbars on body — the brand-book .nh-board nukes them
   inside artboards, but on a real page we want native scroll. */
body::-webkit-scrollbar { display: block; width: 10px; }
body::-webkit-scrollbar-thumb { background: var(--nh-line-2); border-radius: 4px; }
body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }
body::-webkit-scrollbar-track { background: var(--nh-bg); }
body { scrollbar-width: thin; scrollbar-color: var(--nh-line-2) var(--nh-bg); }

a { color: inherit; text-decoration: none; }

/* A reusable hairline-grid backdrop — same logic as .nh-grid-bg but for
   long pages (no radial vignette, just fades top + bottom). */
.site-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--nh-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--nh-grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* Section spacing — the page rhythm. Sections breathe; this matches the
   "warmer / more breathing room" tone from the brief. */
.site-section {
  position: relative;
  padding: 128px 80px;
  border-top: 1px solid var(--nh-line);
}
.site-section--tight { padding: 88px 80px; }
.site-section--first { border-top: none; }

@media (max-width: 960px) {
  .site-section { padding: 80px 32px; }
}

/* Page-width content well */
.site-wrap { max-width: 1280px; margin: 0 auto; position: relative; }

/* Eyebrow + heading patterns */
.site-eyebrow {
  font-family: var(--nh-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--nh-accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.site-eyebrow .rule {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: var(--nh-accent);
  opacity: 0.6;
}

.site-h2 {
  font-family: var(--nh-display);
  font-weight: 500;
  font-size: 56px;
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin: 20px 0 0;
  color: var(--nh-ink);
  text-wrap: balance;
}
.site-h3 {
  font-family: var(--nh-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--nh-ink);
}

.site-lede {
  font-family: var(--nh-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--nh-ink-2);
  max-width: 680px;
  margin: 28px 0 0;
}

.site-body {
  font-family: var(--nh-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--nh-ink-2);
  max-width: 600px;
}

/* Buttons — match brand book .nh-btn but slightly bigger on web */
.site-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--nh-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 24px;
  border: 1px solid var(--nh-line-2);
  background: rgba(255,255,255,0.02);
  color: var(--nh-ink-2);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s ease;
}
.site-btn:hover { border-color: var(--nh-accent); color: var(--nh-accent); }
.site-btn--primary {
  background: var(--nh-accent);
  color: var(--nh-bg);
  border-color: var(--nh-accent);
  font-weight: 600;
}
.site-btn--primary:hover { color: var(--nh-bg); filter: brightness(1.08); }

/* Striped placeholder — used wherever a real image would go */
.site-placeholder {
  position: relative;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(245,158,11,0.04) 0,
      rgba(245,158,11,0.04) 2px,
      transparent 2px,
      transparent 14px
    ),
    var(--nh-bg-2);
  border: 1px solid var(--nh-line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.site-placeholder::before,
.site-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.site-placeholder::before {
  background: linear-gradient(135deg, transparent 49.5%, var(--nh-line) 49.5%, var(--nh-line) 50.5%, transparent 50.5%);
}
.site-placeholder::after {
  background: linear-gradient(45deg, transparent 49.5%, var(--nh-line) 49.5%, var(--nh-line) 50.5%, transparent 50.5%);
}
.site-placeholder__label {
  position: relative;
  font-family: var(--nh-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nh-ink-3);
  background: var(--nh-bg);
  padding: 4px 10px;
  border: 1px solid var(--nh-line);
}

/* Image-slot — re-skin the web component's default look to our card style */
image-slot {
  --is-border: 1px solid var(--nh-line);
  --is-bg: var(--nh-bg-2);
  --is-label-color: var(--nh-ink-3);
  --is-label-font: var(--nh-mono);
}

/* Scroll cue — gentle bounce on the arrow */
.nh-scroll-cue__arrow {
  display: inline-block;
  animation: nh-scroll-bounce 1.8s ease-in-out infinite;
}
@keyframes nh-scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.8; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Responsive layer — collapse multi-column inline grids to single column
   on small screens, tighten paddings, scale display typography.
   The marketing pages use inline styles, so this layer overrides them
   with !important specifically inside the media query.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tablet / smaller laptop */
@media (max-width: 960px) {
  /* Section padding handled above. Heading sizes step down. */
  .site-h2 { font-size: 44px; }
  .site-lede { font-size: 19px; }
}

/* Phone */
@media (max-width: 720px) {
  /* Sections — tighter padding for narrow viewports */
  .site-section { padding: 64px 20px; border-top-width: 1px; }
  .site-section--tight { padding: 48px 20px; }

  /* Hero sections — they live outside .site-section, neutralise the
     inline padding via the wrapping <section style="…"> pattern. */
  section[style*="overflow: hidden"] {
    padding: 32px 20px 40px !important;
    min-height: auto !important;
  }

  /* Display typography */
  .site-h2 { font-size: 32px; }
  .site-h3 { font-size: 20px; }
  .site-lede { font-size: 16px; line-height: 1.45; }
  .site-body { font-size: 14.5px; }

  /* Big editorial headings inside hero sections use clamp() already but
     need an extra ceiling on phones. */
  section[style*="overflow: hidden"] h1 {
    font-size: clamp(40px, 11vw, 64px) !important;
    letter-spacing: -0.03em !important;
  }

  /* Buttons — smaller padding on phones */
  .site-btn { padding: 11px 16px; font-size: 11px; }

  /* Eyebrows */
  .site-eyebrow { font-size: 10px; letter-spacing: 0.22em; }

  /* Generic: collapse any inline multi-column grid to a single column.
     This covers home/product/company section layouts without touching
     each JSX file. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    row-gap: 32px !important;
  }

  /* Scale down hero side glows so they don't push horizontal scroll */
  .nh-glow { transform: scale(0.6) !important; }

  /* Site grid pattern: smaller cells on phone */
  .site-grid { background-size: 32px 32px !important; }

  /* Top nav — hide the request-access pill and tighten spacing */
  nav[style*="position: sticky"] {
    padding: 0 20px !important;
    height: 60px !important;
  }
  nav[style*="position: sticky"] > div:nth-child(2) {
    gap: 18px !important;
  }
  nav[style*="position: sticky"] > div:nth-child(2) a {
    font-size: 13px !important;
    padding: 20px 0 !important;
  }
  nav[style*="position: sticky"] > div:last-child {
    display: none !important;
  }

  /* Footer — single column on phones; the 4-col grid is via inline style */
  footer { padding: 56px 20px 32px !important; }

  /* Big aspect-ratio screenshot frames — keep them readable */
  div[style*="aspect-ratio"] { aspect-ratio: 4 / 3 !important; }
}

/* Very narrow phones */
@media (max-width: 380px) {
  .site-section, .site-section--tight { padding-left: 16px; padding-right: 16px; }
  section[style*="overflow: hidden"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  nav[style*="position: sticky"] { padding: 0 16px !important; }
  section[style*="overflow: hidden"] h1 {
    font-size: clamp(36px, 10vw, 52px) !important;
  }
}