/* ch-next.css — Hire. PLACEMENT ONLY. Every surface is a real JUWEL class (.pf-card, .pf-btn, .pf-starter, .pf-sheet, .jb-group,
   .jb-row, .jb-pill, .jb-note, .jb-kicker, .pf-title/.pf-body/.pf-caption); this file lays them out and reveals them.
   Colours and type come from --jb-* / --pf-* tokens only. Motion is opacity + transform only. */

#stage > .nx-root {
  position: absolute; inset: 0; pointer-events: none;
  --nx-top: 76px;            /* below the header */
  --nx-bar: 88px;            /* above the scene bar */
  --nx-strip: 220px;         /* above JUWEL (set from JS) */
  --nx-bottom: var(--nx-bar);
  color: var(--jb-ink);
}
#stage > .nx-root.strip { --nx-bottom: var(--nx-strip); }

/* hidden until revealed: visibility (not opacity) so nothing hidden is focusable; the page rises in on opacity + transform */
.nx-root:not(.on) { visibility: hidden; opacity: 0; }
.nx-root.on { opacity: 1; transition: opacity var(--jb-fade-slow-dur) var(--jb-fade-slow); }
.nx-root:not(.now) .nx-col { transform: translateY(var(--jb-s-12)); }
.nx-root.on:not(.now) .nx-col { transform: none; transition: transform var(--jb-arrive-dur) var(--jb-ease-arrive); }
.nx-root.on:not(.now) .nx-right { transition-delay: .12s; }
.nx-root.now, .nx-root.now .nx-col { transition: none; transform: none; }

/* the content: one scroll column between the header and the scene bar (or JUWEL) */
.nx-page { position: absolute; inset: var(--nx-top) 0 var(--nx-bottom) 0; overflow-x: hidden; overflow-y: auto; pointer-events: auto;
  padding: 6px var(--pf-gutter) var(--jb-s-16); overscroll-behavior: contain; scrollbar-width: thin; }
.nx-wrap { max-inline-size: 1120px; margin-inline: auto; display: grid; gap: var(--jb-s-16); align-items: start; }
@media (min-width: 900px) { .nx-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--jb-s-32); } }
/* mid widths: the hero gets the wider column so the name stays on one line and the Hire button stays near the top */
@media (min-width: 900px) and (max-width: 1199px) { .nx-wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.nx-col { display: grid; gap: var(--jb-s-16); align-content: start; min-inline-size: 0; }

/* the scroll area ends above JUWEL / the scene bar: fade the cut edge so a clipped row reads as "more below", not as broken
   (the fade is exactly the 16px bottom padding, so no text is faded once scrolled to the end) */
.nx-page { -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent); mask-image: linear-gradient(#000 calc(100% - 16px), transparent); }

/* hero */
.nx-hero { padding: var(--jb-s-24); display: grid; gap: var(--jb-s-12); justify-items: start; }
.nx-name { margin: 0; font: var(--jb-type-display-xl); color: var(--jb-ink); text-wrap: balance; }
@media (max-width: 480px) { .nx-name { font-size: 40px; line-height: 46px; } }
.nx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--jb-s-8) var(--jb-s-12); }
.nx-email { -webkit-user-select: text; user-select: text; cursor: text; overflow-wrap: anywhere; }
.nx-actions { display: flex; flex-wrap: wrap; gap: var(--jb-s-8); }
.nx-quiet { margin-inline-start: calc(-1 * var(--pf-s8)); }
.nx-starters { justify-content: flex-start; margin-block-start: var(--jb-s-4); }
.nx-root a.pf-starter { text-decoration: none; }

/* offers + proof */
.nx-right .pf-title { text-wrap: balance; }
.nx-offers { list-style: none; margin: 0; padding: 0; }
.nx-offer { flex-wrap: wrap; }
.nx-offer .jb-row__text { flex: 1 1 220px; }
.nx-offer .pf-btn { flex: none; }
.nx-proof { padding: var(--jb-s-16) var(--jb-s-20); display: grid; gap: var(--jb-s-12); }
.nx-vision { display: grid; gap: var(--jb-s-4); }
.nx-vision .pf-body { color: var(--jb-ink); }
.nx-right > .jb-note { margin: 0; }

/* short screens (ctx.compact or H < 520, class set from JS): tighter hero so the main button stays in the first screen */
.nx-root.compact .nx-hero { padding: var(--jb-s-16); gap: var(--jb-s-8); }
.nx-root.compact .nx-name { font-size: 32px; line-height: 38px; }
.nx-root.compact .nx-email, .nx-root.compact .nx-who { display: none; }
@media (max-width: 480px) { .nx-wrap { row-gap: var(--jb-s-16); } .nx-col { gap: var(--jb-s-8); } .nx-hero { padding: var(--jb-s-16); gap: var(--jb-s-8); } .nx-email { display: none; } }
@media (min-width: 700px) {
  #stage > .nx-root.compact { --nx-bar: 72px; }
  .nx-root.compact .nx-quiet { display: none; }
  .nx-root.compact .nx-wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: var(--jb-s-24); }
}

/* the game sheet: below the header and always above JUWEL and her pair (the strip), so the window gets the whole width and nobody stands on it */
.nx-sheet { position: absolute; inset: var(--nx-top) var(--pf-gutter) var(--nx-sheet-b, var(--nx-strip)); pointer-events: auto;
  display: flex; flex-direction: column; min-block-size: 0; overflow: hidden; }
.nx-sheet .pf-sheet__head { flex: none; flex-direction: row-reverse; }
.nx-sheet .pf-sheet__body { flex: 1 1 auto; min-block-size: 0; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; }
.nx-sheet .pf-caption { text-align: center; }
.nx-frame { align-self: center; position: relative; overflow: hidden; background: var(--jb-surface-2); border-radius: var(--jb-r-16);
  aspect-ratio: 16 / 10;
  inline-size: min(100%, calc((100dvh - var(--nx-top) - var(--nx-sheet-b, var(--nx-strip)) - 120px) * 1.6)); }
/* portrait phones: the window fills the sheet's body (a 16:10 box would waste the height) */
@media (max-width: 700px) { .nx-frame { aspect-ratio: auto; inline-size: 100%; block-size: 100%; align-self: stretch; } }
.nx-frame iframe { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; display: block; }
.nx-frame__msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--jb-s-16); }

/* a deep link never shows the 3D layer: it must not swallow hovers and clicks */
#world3d:empty { pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .nx-root, .nx-root .nx-col { transition: none !important; transform: none !important; } }