/* Landing deck — shared slide chrome for slides 2–9 (the hero is slide 1; its own rules live in landing.css).
   Every slide is one idea on one screen: eyebrow → serif headline with a gradient phrase → one line of lede →
   a visual that explains it. Slide-specific rules live in css/slides/sN.css, every selector scoped to .nx-sN.
   The night sky, the fixed header and the dot rail are page-level so the slides read as one continuous deck. */

/* ---------- the page is one night sky ---------- */
body.nx-deck{ background: var(--nx-deep); color: var(--nx-ink); }
body.nx-deck::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 70% 30%, rgba(98,74,255,.20), transparent 62%),
    radial-gradient(900px 600px at 10% 90%, rgba(224,64,154,.08), transparent 70%),
    linear-gradient(180deg, var(--nx-night) 0%, var(--nx-night-2) 55%, var(--nx-deep) 100%); }
.nx-sky{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:.9; }

/* header stays with you through the deck; it picks up a glass backing once you scroll */
body.nx-deck .nx-header{ position:fixed; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
body.nx-deck .nx-header.is-scrolled{ background: rgba(9,10,30,.72); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgba(160,170,255,.14); }

/* snap one slide at a time on roomy screens only; proximity never traps a tall slide */
@media (min-width: 1081px) and (min-height: 700px){
  html.nx-snap{ scroll-snap-type: y proximity; }
  .nx-slide, .nx-hero{ scroll-snap-align: start; }
}
html.nx-snap{ scroll-padding-top: 0; }

/* ---------- a slide ---------- */
.nx-slide{ position:relative; min-height: min(100svh, 1100px); display:flex; align-items:center; overflow-x: clip;
  padding: clamp(96px, 12vh, 124px) 0 clamp(48px, 8vh, 84px); color: var(--nx-ink); }
.nx-slide:focus, .nx-hero:focus{ outline:none; } /* a rail click moves focus into the slide (deck.js); the slide itself needs no ring */
.nx-slide-inner{ position:relative; z-index:1; width:100%; max-width:1640px; margin:0 auto; padding-inline: clamp(16px, 5.7vw, 92px); }

/* layouts: copy left + visual right, visual left + copy right, or centered copy over a wide visual */
.nx-split{ display:grid; grid-template-columns: minmax(320px, 0.45fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 56px); align-items:center; }
.nx-split.is-flipped{ grid-template-columns: minmax(0, 1fr) minmax(320px, 0.45fr); }
.nx-split.is-flipped > .nx-copy-block{ order:2; }
.nx-centered{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.nx-centered .nx-copy-block{ max-width: 900px; }
.nx-centered .nx-lede{ margin-inline:auto; }
.nx-visual{ position:relative; min-width:0; }
.nx-centered .nx-visual{ width:100%; margin-top: clamp(28px, 4vh, 48px); }

/* ---------- type ---------- */
/* eyebrow: a red-outlined pill with a REC dot (as on the hero) or plain letter-spaced caps */
.nx-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-family: var(--font-mono); font-size:.75rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--nx-ink); border:1.5px solid rgba(255,75,62,.7); border-radius:999px; padding:5px 13px; }
.nx-eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--nx-rec); box-shadow: 0 0 10px var(--nx-rec); }
.nx-eyebrow.is-plain{ border:0; padding:0; letter-spacing:.32em; color: var(--nx-ink-dim); }
.nx-eyebrow.is-plain::before{ display:none; }
.nx-h2{ font-family: var(--font-display); font-weight:400; font-size: clamp(2.6rem, min(4.7vw, 8.4vh), 5rem); /* vh term: wide-but-short screens keep the slide above the fold */ line-height:.98; letter-spacing:-.015em; margin: 22px 0 0; text-wrap: balance; }
.nx-h2 .nx-grad{ font-weight:700; letter-spacing:-.005em; } /* the mocks set every gradient phrase heavier than its first line (Instrument Serif has one weight; the browser emboldens it) */
.nx-h2 .nx-line{ display:block; width:fit-content; } /* fit-content: a gradient phrase spans its own words, not the column */
.nx-centered .nx-h2 .nx-line{ margin-inline:auto; }
.nx-lede{ margin-top: 22px; font-size: clamp(1.02rem, 1.2vw, 1.18rem); line-height:1.6; color: var(--nx-ink-dim); max-width: 34em; text-wrap: pretty; }
.nx-copy-block .nx-ctas{ margin-top: 30px; }

/* ---------- reusable pieces ---------- */
/* neon frame: a gradient border (::before), a softened copy of it (::after — Chrome clips the blur to the ring, so it
   reads as a glowing band) and an outer halo from directional shadows in the ring's colour order */
.nx-neon{ position:relative; border-radius: var(--nx-r, 22px); background: rgba(10,11,34,.84);
  box-shadow: 0 40px 100px -40px rgba(0,0,0,.85),
    -14px -6px 46px -16px rgba(63,214,255,.55), 14px 8px 46px -16px rgba(224,64,154,.55),
    0 -10px 60px -26px rgba(93,123,255,.55), 0 12px 60px -26px rgba(155,92,255,.5); }
.nx-neon::before, .nx-neon::after{ content:''; position:absolute; inset:0; border-radius: inherit; padding: var(--nx-neon-w, 4px); background: var(--nx-neon);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.nx-neon::before{ filter: brightness(1.2) saturate(1.2); }
.nx-neon::after{ inset:-3px; filter: blur(18px) brightness(1.8) saturate(1.4); }
.nx-neon > *{ position:relative; z-index:1; }

/* the glowing floor + reflection under a visual */
.nx-floor-glow{ position:absolute; left:4%; right:4%; bottom:-64px; height:90px; pointer-events:none; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(155,92,255,.42), rgba(63,214,255,.12) 55%, transparent 75%); filter: blur(18px); z-index:-1; } /* -1: never haze over a tilted stage */

/* Remy, the mascot (transparent webp poses in /img/remy/); the glow is CSS so it matches every background */
.nx-remy-img{ display:block; width:100%; height:auto; filter: drop-shadow(0 0 14px rgba(155,92,255,.55)) drop-shadow(0 0 34px rgba(255,110,90,.22)); }

/* ---------- the dot rail (built by deck.js from the slides on the page) ---------- */
.nx-rail{ position:fixed; right: clamp(6px, .6vw, 14px); /* hugs the edge so it sits on clear sky, never on a slide's neon */ top:50%; transform:translateY(-50%); z-index:30; display:flex; flex-direction:column; gap:14px; align-items:center; }
.nx-rail::before{ content:''; position:absolute; top:-22px; bottom:-22px; left:50%; width:1px; background: linear-gradient(180deg, transparent, rgba(160,170,255,.25), transparent); z-index:-1; }
.nx-rail a{ display:grid; place-items:center; width:18px; height:18px; border-radius:50%; }
.nx-rail a i{ width:7px; height:7px; border-radius:50%; background: rgba(160,170,255,.38); display:block; transition: height .3s ease, background .3s ease, box-shadow .3s ease; }
.nx-rail a:hover i{ background: rgba(200,210,255,.8); }
.nx-rail a[aria-current="true"] i{ height:18px; border-radius:6px; background: var(--nx-cyan); box-shadow: 0 0 12px var(--nx-cyan); }
.nx-rail a:focus-visible{ outline:2px solid var(--nx-cyan); outline-offset:2px; }
@media (max-width: 1080px){ .nx-rail{ display:none; } }

/* ---------- smaller screens ---------- */
@media (max-width: 1080px){
  .nx-slide{ min-height:0; padding: clamp(100px, 11vh, 112px) 0 clamp(40px, 7vh, 64px); } /* ≥ the 82px fixed header + ~18px, so an anchor jump never tucks the eyebrow under it */
  .nx-split, .nx-split.is-flipped{ grid-template-columns: minmax(0, 1fr); }
  .nx-split.is-flipped > .nx-copy-block{ order:0; }
  .nx-visual{ margin-top: 8px; }
}
@media (max-width: 640px){
  .nx-h2{ font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .nx-centered{ align-items:flex-start; text-align:left; }
  .nx-centered .nx-lede{ margin-inline:0; }
  .nx-centered .nx-h2 .nx-line{ margin-inline:0; }
}

/* ---------- after the deck: questions and the footer, on the same sky ---------- */
.nx-faq{ max-width:none; padding: clamp(72px, 12vh, 128px) 0 clamp(56px, 9vh, 96px); }
.nx-faq .container{ max-width: 860px; }
.nx-faq .nx-h2{ margin: 0 0 24px; font-size: clamp(2.2rem, 3.6vw, 3.4rem); }
.nx-faq .accordion-item{ border-color: rgba(160,170,255,.16); }
.nx-faq .accordion-trigger{ font-size: 1.08rem; }
.nx-faq .accordion-trigger:focus-visible{ outline: 2px solid var(--nx-cyan); outline-offset: 4px; border-radius: 6px; }
.nx-faq .accordion-item:not([data-open="true"]) .accordion-panel{ visibility:hidden; transition: max-height .25s ease, visibility 0s linear .25s; } /* closed answers leave the accessibility tree too */
.nx-faq .accordion-item[data-open="true"] .accordion-panel{ visibility:visible; transition: max-height .25s ease, visibility 0s; }
.nx-footer{ border-top-color: rgba(160,170,255,.14); background: rgba(7,8,26,.6); color: var(--nx-ink-dim); } /* ink-dim, not app.css's faint ink: AA on the night sky */
.nx-footer .container{ max-width:1640px; padding-inline: clamp(16px, 5.7vw, 92px); } /* lines up with the header */

/* ---------- landing-only overrides of app.css ---------- */
/* primary CTA: #fff9f7 on the app's #ff4b3e is 3.2:1; this red is 4.6:1 (AA) and keeps the neon glow */
body.nx-deck .btn-primary{ background:#d93025; }
body.nx-deck .btn-primary:hover{ background:#c92a1f; }
/* ?still=1 (screenshot checks): nothing loops, not even the logo's recording light */
.nx-still .brand-lockup .brand-rec{ animation:none; }