/* PXLnexus page: additions on top of the PXLsuite eco.css + page.css (copied unchanged) and the approved sf.css accent swap
   (--nx #FFA500 leads, magenta #D7005A only where AI acts). Only what the PXLsuite system has no class for lives here. */
.nw, .nx-page .nw { white-space:nowrap; text-wrap:nowrap; }
.nx-page :is(.mk-link, .hc, .plate, .mk-route, .lyr):focus-visible, .nx-page .stage.l2 :is(button, .l2card):focus-visible { outline-color:var(--nx); }

/* ---------- hero: the approved clean cover ---------- */
.nx-plate-sec { position:relative; overflow:hidden; background:#0d0d0d; }
.nx-plate-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.65; }
.nx-plate-fade-l { position:absolute; inset:0; background:linear-gradient(to right,#0d0d0d 0%,rgba(13,13,13,.82) 38%,rgba(13,13,13,0) 66%); }
.nx-plate-fade-b { position:absolute; inset:0; background:linear-gradient(to top,#0d0d0d 0%,transparent 36%); }
.nx-plate-pg { position:relative; z-index:2; }
.nx-hero { min-height:calc(100vh - 80px); display:flex; flex-direction:column; justify-content:center; }
.nx-hero .nx-plate-bg { background-position:right center; opacity:.45; }
.nx-hero-inner { position:relative; z-index:2; padding-block:clamp(56px,5vw,96px) clamp(72px,6vw,112px); }
.nx-hero-logo { --lh:clamp(140px,13vw,200px); display:block; height:var(--lh); width:auto; max-width:none; margin:calc(var(--lh) * -.17) 0 clamp(8px,1vw,24px) calc(var(--lh) * -.125); }
.nx-hero h1 { margin:0 0 20px; }
.nx-sub { font-family:var(--font-h); font-weight:600; font-size:clamp(20px,1.45vw,30px); line-height:1.25; color:#fff; display:flex; align-items:center; gap:.35em; flex-wrap:wrap; margin:0 0 14px; }
.nx-hero .lead { font-size:clamp(18px,1.15vw,24px); color:var(--w60); max-width:56ch; margin:0 0 12px; }
.nx-hero .byline { font-size:clamp(14px,.7vw,16px); color:var(--w60); margin:0; }
/* Claude Code: the whole official file (wordmark centred in a 1000 x 1000 transparent square), transparent margins absorbed */
.cc-logo { height:3.9em; width:auto; max-width:none; margin:-1.14em -.2em; display:inline-block; vertical-align:middle; }

/* ---------- glass: ONE frosted card per plate section ---------- */
.glass-plate { background:rgba(13,13,13,.55); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.12); border-radius:20px; padding:clamp(24px,2.4vw,56px); }
@supports not (backdrop-filter:blur(1px)) { .glass-plate { background:rgba(13,13,13,.88); } }
.glass-plate .stage { background:transparent; border:0; border-radius:0; }
.nx-dia { margin:0; padding:0; max-width:none; }
.nx-page .fit { display:block; }                       /* desktop page: the scaled stage stays on narrow screens too */

/* ---------- the hub, in the PXLnexus accent ---------- */
.nx-page .mk-open { background:radial-gradient(1200px 520px at 72% 0%, rgba(255,165,0,.05), transparent 70%); }
.nx-page .hub::before { background:radial-gradient(closest-side, rgba(255,165,0,.14), rgba(255,165,0,0) 100%); }
.nx-page .wire { stroke:var(--nx); }
.nx-page .wdot.solid { fill:var(--nx); }
.nx-page .wdot.dash { stroke:var(--nx); }
.nx-page .plate { border-color:var(--nx); }
.nx-page .plate-go { color:var(--nx); }
.nx-page .plate-line { display:block; }
.nx-page .hc { min-height:clamp(104px,5.4vw,140px); }
.nx-page .hc .hc-n { grid-area:i; font-size:clamp(19px,1.05vw,26px); align-self:center; }
.nx-page .hc .hc-s { color:var(--nx); }
.nx-page .hub-legend .lk:last-child { color:var(--w60); }
/* AI-agent crew cards: thin accent-tinted hairline border */
.nx-page .hc.hc-agent { border-color:rgba(255,165,0,.32) !important; }
.nx-page .hc.hc-agent:hover { border-color:rgba(255,165,0,.65) !important; }
/* legend swatch for bordered cards */
.lk-bordered { display:inline-block; width:24px; height:14px; border:1px solid rgba(255,165,0,.45); border-radius:3px; vertical-align:middle; margin-right:6px; background:rgba(255,165,0,.06); }
/* studio CTA line */
.nx-cta-line { margin-top:clamp(16px,1.4vw,28px) !important; }
/* tok-logo in body copy: extra vertical breathing room so the logotype image does not crowd adjacent lines */
.nx-page p:has(.tok-logo),
.nx-page .sub:has(.tok-logo),
.nx-page .lead:has(.tok-logo),
.nx-page li:has(.tok-logo) { line-height:1.85; }
/* plate section backgrounds must not zoom or shift when child cards/buttons are hovered */
.nx-plate-sec .nx-plate-bg { transition:none !important; transform:none !important; will-change:auto !important; }
.nx-plate-sec .ths-img:hover .ths-plate { transform:none !important; }
@media (max-width:1279px) { .nx-page .hc::before, .nx-page .hc::after { display:none; } .nx-page .hc { grid-column:auto !important; grid-row:auto !important; } }
.nx-h-open { margin:0; font-size:clamp(34px,3vw,64px); }

/* ---------- headings and copy ---------- */
.nx-h-wide { margin:0 0 clamp(20px,2vw,36px); }
.nx-q-row { margin-bottom:clamp(24px,2.4vw,40px); }
.nx-q-copy { grid-column:1 / 9; }
.nx-q-copy p { color:var(--w87); font-size:clamp(17px,.85vw,21px); }
.nx-spec { margin-bottom:clamp(24px,2.4vw,40px); }
.nx-close { color:var(--w87); font-size:clamp(17px,.85vw,21px); max-width:80ch; margin:0; }
.nx-sheets { display:flex; flex-wrap:wrap; gap:8px 28px; margin:8px 0 0; }
.nx-more { margin:clamp(16px,1.6vw,28px) 0 0; }
.e-eyebrow .rail { background:var(--nx); }
.e-eyebrow.ai .rail { background:var(--ai); }
.nx-page .e-btn.e-ghost:hover { border-color:var(--nx); }
.nx-page .mk-link:hover { text-decoration-color:var(--nx); }

/* ---------- readout diagrams (PXLsuite layer 2 component) ---------- */
.mk .ro.nx-ro { background:transparent; border:0; border-top:1px solid var(--w08); border-radius:0; padding:20px 0 0; }
@media (min-width:2300px) { .mk .ro.nx-ro { border-top:0; border-left:1px solid var(--w08); padding:4px 0 0 28px; } }
.ro .ro-app img.ro-tok, .ro img.ro-tok { width:auto; height:56px; max-width:none; margin:-12px -8px -12px -7px; border-radius:0; }
.ro img.ro-tok-t { height:64px; margin:-14px -8px -14px -8px; }
.ro .v img.ro-tok { height:36px; margin:-8px -4px -8px -4px; vertical-align:middle; }
.stage.l2.nx-st .l2card { display:flex; flex-direction:column; cursor:pointer; padding:14px 16px 12px; }
.nx-st .l2card > span { flex:none; }
.nx-st .cn { text-transform:uppercase; letter-spacing:.06em; font-size:12px; }
.nx-st .cnm { height:auto; font-size:18px; line-height:24px; margin-top:4px; }
.nx-st .dl { font-size:14px; line-height:19px; margin-top:auto; padding-top:6px; }
.nx-st .l2card.tall .dl { display:none; }
.stage.l2.nx-st .l2card.tall { border-color:rgba(255,165,0,.45); }
.br-list { display:flex !important; flex-direction:column; gap:14px; margin-top:28px; font-size:17px; line-height:22px; color:var(--w87); }
.br-list span { display:flex; align-items:center; gap:10px; }
.br-list span::before { content:''; width:8px; height:8px; border-radius:1px; background:var(--nx); flex:none; }
.br-meth { margin-top:auto; padding-top:14px; font-size:14px; line-height:19px; color:var(--w60); }
.stage.l2.nx-st .l2card.gate { border-color:rgba(255,255,255,.28); justify-content:center; }
.stage.l2.nx-st .l2card.nx-node { flex-direction:row; align-items:center; justify-content:center; gap:18px; padding:0 20px; border-color:var(--nx); }
.nx-node-logo, .nx-node .cc-logo { height:64px; width:auto; max-width:none; display:block; }
.nx-node-logo { margin:-10px -12px -10px -8px; }
.nx-node .cc-logo { margin:-19px -3px; }
.nx-node-by { display:flex !important; align-items:center; gap:4px; font-size:14px; color:var(--w60); }
.nx-stagecard .cnm { font-size:22px !important; line-height:28px !important; }
.nx-stagecard .lgarea { height:auto !important; margin-top:20px; }
.nx-stagecard .lgarea .row { gap:16px !important; }
.nx-page .stage.l2 .app-ic:hover, .nx-page .stage.l2 .app-ic.sel { box-shadow:0 0 0 2px rgba(255,165,0,.75); }
.nx-stagecard .lg .rg { right:-6px; top:-6px; }
.nx-stagecard .mq { width:10px; height:10px; right:-5px; bottom:-5px; }
.nx-mcplbl { color:var(--ai); background:var(--panel); }
.nx-page .l2card:hover, .nx-page .l2card.sel { border-color:rgba(255,165,0,.6) !important; }

/* ---------- the PXLsuite backbone ---------- */
.nx-bbfig { margin-bottom:0; }
.nx-bb .l1-node { padding:22px 12px 0; }
.nx-bb .l1-node img.bb-logo { width:auto; height:44px; max-width:100%; }
.nx-bb .l1-node .sb { font-size:15px; line-height:20px; color:var(--w60); margin-top:14px; padding:0 6px; }
.nx-bb .l1-node:hover { border-color:rgba(242,183,5,.6); }
.nx-orch { margin-top:clamp(32px,3vw,56px); align-items:start; }
.nx-orch-copy { grid-column:1 / 7; }
.nx-orch-copy p { color:var(--w87); }
.nx-h3 { font-size:clamp(22px,1.4vw,30px); margin:0 0 16px; }
.mk .ro.nx-ptn { grid-column:8 / 13; border-top:0; border-left:1px solid var(--w08); padding:4px 0 0 28px; }
.nx-ptn .ro-more { display:block; margin:0; }
.nx-ptn .k { margin-bottom:14px; }
/* readable partner logos: at least the About partner row's size (clamp 32-44px), here 44-64px */
.nx-ptn .pt-l { gap:16px 24px; }
.nx-ptn .pt-l img { height:clamp(44px, 2.4vw, 64px); width:auto; max-width:none; }
.nx-pnote { font-size:14px; color:var(--w60); margin:16px 0 0; }

/* ---------- at your studio: the three layers, each opens its part of the window ---------- */
.lyrs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--gut); }
.lyr { display:flex; flex-direction:column; gap:10px; text-align:left; padding:clamp(20px,1.6vw,32px); min-height:clamp(170px,9vw,220px);
  background:#1c1c1c; border:1px solid var(--w08); border-left:3px solid var(--nx); border-radius:12px; font:inherit; color:inherit; cursor:pointer; transition:border-color .2s var(--ease); }
.lyr-pack { border-left-color:rgba(255,165,0,.5); }
.lyr-brain { border-left-color:var(--ai); }
.lyr:hover { border-top-color:rgba(255,255,255,.28); border-right-color:rgba(255,255,255,.28); border-bottom-color:rgba(255,255,255,.28); }
.lyr-k { font-family:var(--font-h); font-weight:600; font-size:clamp(20px,1.2vw,26px); color:#fff; }
.lyr-l { color:var(--w60); font-size:clamp(15px,.75vw,18px); line-height:1.5; }
.lyr-go { margin-top:auto; font-family:var(--font-h); font-weight:600; color:var(--nx); font-size:15px; }
.nx-band-l { margin:clamp(20px,1.6vw,32px) 0 0; color:var(--w87); max-width:none; }
@media (max-width:899px) { .lyrs { grid-template-columns:1fr; } }

/* ---------- results chart (the approved A8 chart) ---------- */
.nx-chart-note { position:absolute; width:420px; font-size:15px; line-height:21px; color:var(--w38); }
.nx-chart-note.small { width:auto; font-size:13px; line-height:16px; }

/* ---------- tool-sheet windows ---------- */
.xp-crumb-logo { height:40px; width:auto; max-width:none; display:block; margin:-7px -6px -7px -5px; }
.nx-win { padding-top:24px !important; }
.nx-win::before, .nx-win::after { display:none; }
.nx-win .container { display:block; max-width:920px; }
.nx-win .container > * { margin:0 0 14px; }
.nx-win .nx-wh { font-family:var(--font-h); font-weight:600; font-size:20px; color:#fff; margin:28px 0 10px; }
.nx-win .tok-logo { --th:max(2.2em, 40px); }
.nx-role { border-top:1px solid var(--w08); padding-top:4px; }
.nx-role .nx-wh { margin-top:16px; }
.nx-dep { color:var(--w60); }
.nx-rule { border-left:3px solid var(--nx); padding-left:16px; color:var(--w87); }
.nx-tbl { width:100%; border-collapse:collapse; font-size:15px; }
.nx-tbl th, .nx-tbl td { text-align:left; vertical-align:top; padding:10px 14px; border-top:1px solid var(--w08); color:var(--w87); }
.nx-tbl thead th { border-top:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--w60); font-weight:500; }
.nx-tbl tbody th { font-weight:600; color:#fff; }
.nx-tbl tbody th span { display:block; font-weight:400; color:var(--w60); font-size:13px; }
.nx-tbl td.hi { color:var(--nx); }
.nx-tbl .tok-logo { --th:36px; }

/* ---------- tooltip: PXL products show the whole logo, never a typed name ---------- */
#app-tip { border-color:rgba(255,165,0,.45); }
#app-tip .tp-tok img { height:40px; width:auto; max-width:none; display:block; margin:-7px -6px -7px -5px; border-radius:0; }
.nx-page button.lyr { text-align:left; align-items:flex-start; justify-content:flex-start; }

/* ---------- where the days go: Script to Delivery on the gold rail (PXLsuite layer 1 family) ---------- */
.nx-dia.nx-qfig { margin:clamp(8px,1vw,16px) 0 clamp(24px,2.4vw,44px); }
.nx-qband { position:absolute; background:rgba(255,165,0,.06); border-top:1px solid rgba(255,165,0,.32); border-bottom:1px solid rgba(255,165,0,.32); border-radius:16px; }
.nx-qband-lbl { position:absolute; display:flex; align-items:center; gap:4px; font-family:var(--font-h); font-weight:600; font-size:20px; line-height:26px; color:var(--w87); white-space:nowrap; }
.nx-qband-lbl .tok-logo { --th:56px; }
.nx-q .q-end { padding-top:14px; }
.nx-q .q-end .nm { margin-top:6px; }
.q-leak { position:absolute; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.q-leak b { font-family:var(--font-h); font-weight:600; font-size:21px; line-height:26px; color:#fff; }
.q-leak span { font-size:16px; line-height:22px; color:var(--w60); }
/* ---------- where the days go: the old way (readout component) ---------- */
.q-ph { position:absolute; font-size:13px; line-height:16px; letter-spacing:.08em; color:var(--w60); font-weight:500; white-space:nowrap; }
.stage.l2.nx-st .l2card.q-box .cnm { font-size:17px; line-height:22px; }
.stage.l2.nx-st .l2card.q-box .dl { font-size:15px; line-height:20px; color:var(--nx); }
.nx-q .lgd { white-space:normal; }
.nx-bridge { margin-top:clamp(24px,2.4vw,44px); }

/* 2026-10-15 option C: product names inside sentences = small icon + plain name, never the logotype */
.tok-name { white-space:nowrap; font-weight:600; color:inherit; }
.tok-ic { height:1.05em; width:auto; vertical-align:-0.16em; margin-right:.32em; display:inline-block; }

/* 2026-10-15 (Cris): the page's own menu, a short divider, then the sister product in magenta */
.bm-header .nav-menu .nav-sep { display:inline-block; width:1px; height:14px; background:rgba(255,255,255,.28); margin:0 .5rem; vertical-align:middle; }
.bm-header .nav-menu a.nav-sister { color:#D7005A; font-weight:700; }
.bm-header .nav-menu a.nav-sister:hover { color:#ff3d86; }
@media (max-width:900px) { .bm-header .nav-menu .nav-sep { display:block; width:40px; height:1px; margin:.6rem 0; } }

/* 2026-10-15 (Cris): one recognisable job icon per AI crew card (Lucide, ISC) */
.nx-page .hc .hc-n { display:flex; align-items:center; gap:.5em; }
.nx-page .hc .hc-ic { width:1.05em; height:1.05em; flex:none; color:#FFA500; }