/* /nexa hero — the home page's language, minus the instrument.
   The machine (turning rings) is the HOME page's signature. Here the product itself is the
   visual, so the hero ground stays flat and the family shows in the parts instead: hairline
   seams, mono micro-labels struck in the accent ink, the emphasised noun, and the shared readouts.

   Loaded last — after nexa.css, hero-split.css and the player's own files — so it owns only
   what it changes: the screen's finish, the play button, and the guide rail, which stops
   being a playlist with thumbnails and becomes four flat steps under the screen. The player
   itself is untouched: same markup hooks, same mp4s, same founder note. */

.dj { overflow-x: hidden; }
.dj .field { display: none; }
.dj .bar { position: relative; z-index: 5; }

/* ---------- hero ---------- */
/* This page carries a 16/9 product screen beside the copy, so it runs wider than the home
   page's text-only measure. machine.css is shared, so the wider frame is scoped to .dj and
   the home page keeps its 1140. */
.dj .nx.mx { max-width: 1280px; padding: 0 clamp(24px, 4.5vw, 64px); }
.dj .nx { position: relative; }
.dj-hero { position: relative; z-index: 2; padding: clamp(40px, 7vh, 84px) 0 0; }
.dj .hero-intro { align-items: center; }

/* Same sentence shape as the home page: a stated line, then the qualifier dropping back to
   secondary ink with the serif italic carrying the noun. Size stays at hero-split's clamp —
   "The agentic coding" has to hold one line or the rise animation tears it in half. */
.dj .trio { letter-spacing: -.038em; line-height: 1.04; }
.dj .trio .muted { color: var(--ink-60); }
.dj .trio em {
  font-weight: 700;
  color: var(--ink); letter-spacing: -.032em;
}
.dj .nx-sub { margin-top: 0; max-width: 42ch; color: var(--ink-60); }

/* ---------- the screen, standing on its own ---------- */
/* The only accent left on the frame is a hairline along the top edge — the same one-stroke
   accent the section labels and step numbers use. */
.dj .hero-stage { gap: clamp(16px, 1.6vw, 22px); align-content: center; }
.dj .video-screen {
  border-radius: 14px;
  box-shadow: 0 30px 80px -34px var(--glass-shadow);
}
.dj .video-screen::before {
  content: ""; position: absolute; z-index: 5; top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: .55;
  pointer-events: none;
}
/* The poster is a bright marketing frame and this page is near-black, so at rest it is
   pulled back the same way the plates below are — dimmed and desaturated — and comes up to
   full only when you reach for it. Quiet page, live on intent. Both treatments are scoped to
   is-armed so nothing touches the picture once real video is playing. */
.dj .video-player.is-armed .video-poster {
  opacity: .72; filter: saturate(.72) contrast(1.04);
  transition: opacity .45s ease, filter .45s ease;
}
.dj .hero-stage:hover .video-player.is-armed .video-poster,
.dj .video-player.is-armed:focus-within .video-poster { opacity: 1; filter: none; }
.dj .video-player.is-armed .video-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 78% 70% at 50% 46%, transparent 40%, rgba(4,7,12,.42) 100%);
  transition: opacity .45s ease;
}
.dj .hero-stage:hover .video-player.is-armed .video-screen::after { opacity: .45; }
/* the scrim exists to sink a bright frame into a near-black page; on the light theme there is
   nothing to sink it into and it just muddies the poster, so it becomes a light haze instead */
[data-theme="light"] .dj .video-player.is-armed .video-screen::after {
  background: radial-gradient(ellipse 78% 70% at 50% 46%, transparent 46%, rgba(238,240,246,.30) 100%);
}
[data-theme="light"] .dj .video-player.is-armed .video-poster { opacity: .84; filter: saturate(.8); }

.dj .hero-play {
  width: 62px; height: 62px; border-radius: 50%;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--glass-border));
  color: var(--ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, opacity .25s ease;
}
.dj .hero-play:hover { transform: scale(1.08); background: color-mix(in srgb, var(--accent) 22%, transparent); }
.dj .hero-play .pp svg { width: 20px; height: 20px; }

/* ---------- the guide rail becomes four steps ---------- */
/* hero-split.css already parks the rail below the screen; this strips what is left of the
   playlist chrome so the four guides read as numbered steps, like the rows further down. */
.dj .video-rail,
.dj .video-player.rail-hidden .video-rail {
  position: static; margin: 0; padding: 0; border: 0; background: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}
/* No box, no fill, no second border under a screen that already has one: each guide is a
   seam with a number and a label, the way the rows further down the page read. The active
   step is the one whose seam is struck in the accent ink. */
.dj .video-list {
  display: flex; gap: clamp(12px, 1.8vw, 26px); overflow: visible;
  -webkit-mask-image: none; mask-image: none;
}
.dj .video-card {
  position: relative; flex: 1 1 0; min-width: 0; width: auto;
  display: grid; gap: 4px; padding: 13px 0 2px;
  border: 0; border-radius: 0; background: none;
  color: var(--ink-60); text-align: left; cursor: pointer;
  transition: color .2s ease;
}
/* the seam is drawn, not bordered, so lighting it never nudges the row by a pixel */
.dj .video-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--hairline);
  transition: background .2s ease, opacity .2s ease;
}
.dj .video-card:hover:not(:disabled) { background: none; color: var(--ink); }
.dj .video-card:hover:not(:disabled)::before { background: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }
.dj .video-card.active { background: none; color: var(--ink); }
.dj .video-card.active::before { background: var(--accent); }
.dj .video-card u {
  text-decoration: none; font-family: var(--mono, monospace);
  font-size: var(--fs-micro); letter-spacing: .2em; color: var(--ink-40);
  transition: color .2s ease;
}
.dj .video-card.active u, .dj .video-card:hover:not(:disabled) u { color: var(--accent); }
.dj .video-card b {
  font-size: var(--fs-copy); font-weight: 600; letter-spacing: -.012em; color: currentColor;
}
.dj .video-card i { font-style: normal; font-size: var(--fs-body); color: var(--ink-40); }

/* ---------- the rows that came before, in the new chassis ---------- */
/* Sections, readouts, plates, closing block and footer all come from machine.css — the file
   this page shares with the home page. Only the blocks the old page brought with it (the
   brand rail, the thread story, pricing, reviews) are re-seated here. */
.dj-hero .mx-hud { margin-top: clamp(46px, 7.5vh, 86px); padding-top: 24px; }
.dj .orch { margin-top: clamp(38px, 6vh, 66px); }
.dj .mx-sec > .px-lead { margin: 16px 0 0; max-width: 58ch; color: var(--ink-60); font-size: var(--fs-sub); }
.dj .px-grid, .dj .rv { margin-top: clamp(30px, 5vh, 52px); }
.dj .rv-note { margin-top: 22px; }

@media (max-width: 640px) {
  .dj .video-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
  .dj .video-card { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dj .video-poster, .dj .hero-play, .dj .video-card { transition: none; }
}