/* PXLsuite page, layout from the approved mockup_v001 (Round 15). Layout system from layout-redesign_v001.md: one 12-col container for everything.
   Palette: gold #f2b705 leads (one gold fill per screen: the button), magenta #D7005A only where AI acts. Sora headings, Roboto body. */

:root { --m:16px; --sec:64px; --gut:16px; }
@media (min-width:700px)  { :root { --m:40px; --sec:80px; --gut:24px; } }
@media (min-width:1100px) { :root { --m:64px; --sec:96px; } }
@media (min-width:1700px) { :root { --m:80px; --gut:32px; } }
@media (min-width:2300px) { :root { --m:160px; --sec:128px; } }

.pg { width:min(100% - 2 * var(--m), 2240px); margin-inline:auto; }
.g12 { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); }
@media (max-width:899px) { .g12 { grid-template-columns:minmax(0,1fr); row-gap:24px; } .g12 > * { grid-column:1 / -1 !important; } }
.mk { font-size:clamp(16px, .62vw + 5px, 19px); }
.mk-sec { padding-block:var(--sec); }
.mk h2:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mk h1 { font-size:clamp(38px, 3.8vw, 88px); line-height:1.02; letter-spacing:-.015em; font-weight:700; margin:0; max-width:none; }
.mk h2 { font-size:clamp(30px, 2.5vw, 56px); line-height:1.1; letter-spacing:-.01em; font-weight:600; margin:0 0 24px; }
.mk .sub { font-size:inherit; max-width:68ch; color:var(--w60); }
.mk .big { font-size:clamp(20px, 1.4vw, 28px); margin:0 0 16px; }
.mk p { max-width:68ch; text-wrap:pretty; }
.mk h1, .mk h2, .mk h3 { text-wrap:balance; }
.mk-link { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0; background:none; border:0; font:inherit; color:var(--w87); cursor:pointer;
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.35); text-underline-offset:5px; transition:color .2s var(--ease), text-decoration-color .2s; }
.mk-link:hover { color:#fff; text-decoration-color:var(--gold); }
.mk-link:focus-visible, .hc:focus-visible, .plate:focus-visible, .sr:focus-visible, .mk-route:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.mk .e-btn { min-height:52px; padding:0 32px; font-size:17px; }

.head-row { align-items:start; margin-bottom:clamp(32px, 3vw, 56px); }
.head-row > h2 { grid-column:1 / 7; margin:0; }
.head-side { grid-column:8 / 13; }
.head-side > p:last-child { margin-bottom:0; }
.head-side .sub { margin-bottom:16px; }

/* ================= A. ecosystem opener ================= */
.mk-open { padding-top:clamp(32px, 3.2vw, 72px); padding-bottom:calc(var(--sec) * .5); background:radial-gradient(1200px 520px at 72% 0%, rgba(242,183,5,.05), transparent 70%); }
.open-copy { align-items:end; margin-bottom:clamp(32px, 3.6vw, 72px); }
.open-copy h1 { grid-column:1 / 8; }
.open-side { grid-column:8 / 13; }
.open-side .lead { font-size:clamp(18px, 1.15vw, 24px); color:var(--w60); margin:0; max-width:46ch; }
.open-side .ctas { margin-top:24px; align-items:center; gap:28px; }

.hub { position:relative; display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); column-gap:var(--gut); align-items:center; }
.hub::before { content:''; position:absolute; left:50%; top:50%; width:44%; aspect-ratio:1.5; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(242,183,5,.16), rgba(242,183,5,0) 100%); pointer-events:none; z-index:0; }
.hub-wires { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.hcol { display:flex; flex-direction:column; gap:clamp(16px, 1.1vw, 28px); position:relative; z-index:1; }
.hcol-l { grid-column:1 / 4; }
.hcol-r { grid-column:10 / 13; }
.wire { fill:none; stroke:var(--gold); transition:stroke-opacity .2s var(--ease), stroke-width .2s var(--ease); }
.wire.solid { stroke-width:2; stroke-opacity:.7; }
.wire.dash  { stroke-width:1.5; stroke-opacity:.5; stroke-dasharray:5 5; }
.wdot.solid { fill:var(--gold); }
.wdot.dash  { fill:#0d0d0d; stroke:var(--gold); stroke-width:1.75; }
.wire.on { stroke-opacity:1; stroke-width:2.5; }
.hub.hov .wire:not(.on), .hub.hov .wdot:not(.on) { opacity:.4; }
.hub.hov .hc:not(.on) { opacity:.5; }

.hc { position:relative; display:grid; grid-template-columns:56px minmax(0,1fr) auto; grid-template-areas:"i t s"; align-items:center; column-gap:16px;
  min-height:clamp(112px, 6.2vw, 160px); padding:20px 24px; background:var(--panel); border:1px solid rgba(255,255,255,.10); border-radius:16px;
  text-align:left; font:inherit; color:inherit; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); }
.hc img { grid-area:i; width:56px; height:56px; display:block; }
.hc-t { grid-area:t; display:flex; flex-direction:column; gap:4px; min-width:0; }
.hc-n { font-family:var(--font-h); font-weight:700; font-size:clamp(22px, 1.1vw, 28px); line-height:1.15; color:#fff; }
.hc-l { font-size:clamp(15px, .65vw, 17px); line-height:1.4; color:var(--w60); }
.hc-s { grid-area:s; align-self:start; font-size:12px; letter-spacing:.08em; color:var(--w60); font-weight:500; white-space:nowrap; }
.hc.dash { border-style:dashed; border-color:rgba(255,255,255,.22); }
.hc:hover, .hc.on { background:#212125; border-color:rgba(255,255,255,.3); }
.hc .ring { right:-6px; top:-6px; }
@media (max-width:1699px) { .hc { grid-template-areas:"i t" "i s"; grid-template-columns:56px minmax(0,1fr); row-gap:2px; } .hc-s { align-self:end; } }

.plate { position:relative; z-index:1; grid-column:5 / 9; display:flex; flex-direction:column; align-items:flex-start; gap:20px; padding:clamp(28px, 2.4vw, 52px);
  background:var(--panel); border:2px solid var(--gold); border-radius:20px; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:background .2s var(--ease); }
.plate:hover { background:#1c1c1c; }
.plate-logo { width:clamp(200px, 12.5vw, 300px); height:auto; display:block; }
.plate-line { font-family:var(--font-h); font-weight:600; font-size:clamp(20px, 1.45vw, 32px); line-height:1.3; color:#fff; text-wrap:balance; }
.plate-words { font-size:clamp(14px, .62vw, 17px); color:var(--w60); }
.plate-go { font-family:var(--font-h); font-weight:600; font-size:clamp(15px, .7vw, 18px); color:var(--gold); }
.hub-legend { display:flex; flex-wrap:wrap; align-items:center; gap:12px 36px; margin-top:clamp(24px, 2.4vw, 48px); font-size:15px; color:var(--w60); }
.hub-legend .lk { display:inline-flex; align-items:center; gap:10px; }

@media (max-width:1279px) {
  .hub { grid-template-columns:1fr 1fr; gap:var(--gut); align-items:stretch; }
  .hub::before, .hub-wires { display:none; }
  .hcol { display:contents; }
  .plate { grid-column:1 / -1; grid-row:1; }
  .hc { min-height:96px; padding:14px 16px; grid-template-columns:44px minmax(0,1fr); column-gap:12px; z-index:1; }
  .hc img { width:44px; height:44px; }
  .hc-n { font-size:18px; }
  .hc-l { font-size:14px; }
  .hc::before { content:''; position:absolute; width:2px; background:var(--gold); top:calc(-1 * var(--gut)); bottom:calc(-1 * var(--gut)); z-index:-1; }
  .hc::after  { content:''; position:absolute; top:50%; height:0; border-top:2px solid var(--gold); width:calc(var(--gut) / 2); z-index:-1; }
  .hc[data-k="bid"] { grid-column:1; grid-row:2; } .hc[data-k="flow"] { grid-column:1; grid-row:3; } .hc[data-k="rv"] { grid-column:1; grid-row:4; }
  .hc[data-k="connect"] { grid-column:2; grid-row:2; } .hc[data-k="tools"] { grid-column:2; grid-row:3; } .hc[data-k="lib"] { grid-column:2; grid-row:4; }
  .hc[data-k="bid"]::before, .hc[data-k="flow"]::before, .hc[data-k="rv"]::before { right:calc(-1 * var(--gut) / 2 - 1px); }
  .hc[data-k="connect"]::before, .hc[data-k="tools"]::before, .hc[data-k="lib"]::before { left:calc(-1 * var(--gut) / 2 - 1px); }
  .hc[data-k="bid"]::after, .hc[data-k="flow"]::after, .hc[data-k="rv"]::after { right:calc(-1 * var(--gut) / 2); }
  .hc[data-k="connect"]::after, .hc[data-k="tools"]::after, .hc[data-k="lib"]::after { left:calc(-1 * var(--gut) / 2); }
  .hc[data-k="rv"]::before, .hc[data-k="lib"]::before { bottom:50%; }
  .hc.dash::after { border-top-style:dashed; }
  .hc.dash::before { background:none; }
  .hc[data-k="lib"]::before, .hc[data-k="rv"]::before { background:var(--gold); }
}
@media (max-width:699px) {
  .hc-l { display:none; }
  .hc { min-height:88px; }
  .hc-s { font-size:11px; }
  .plate { gap:14px; padding:20px; }
  .plate-words { display:none; }
  .hub-legend { gap:8px 20px; font-size:14px; }
  .open-side .ctas { gap:16px; flex-wrap:wrap; }
  .open-side .ctas .e-btn { width:100%; }
}

/* ================= B. workflow ================= */
.legend-l1 { display:flex; flex-wrap:wrap; gap:6px 24px; font-size:14px; color:var(--w60); margin:0; }
.legend-l1 span { display:inline-flex; align-items:center; gap:8px; }
.legend-l1 b { display:inline-block; flex:none; width:12px; height:12px; border-radius:50%; }
.k-f { background:var(--gold); }
.k-h { border:2px solid var(--gold); }
.k-d { border:2px dashed var(--w38); border-radius:3px !important; }
.k-a { border:2.5px solid var(--ai); }
.mk .dia { margin:0; max-width:none; padding:0; }
.mk .fit-l1 { width:100%; }
.mk .fit-l2 { aspect-ratio:1760 / 872; }
.replay-row { display:flex; justify-content:flex-end; margin-top:8px; }
@media (max-width:1099px) { #l1-replay { display:none !important; } .mk .dia { padding:0; } }
.m1 { max-width:560px; }

.sg { margin-top:clamp(40px, 4vw, 80px); }
.sg-tabs { display:none; }
.sg-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); column-gap:var(--gut); }
.sg-h { font-family:var(--font-h); font-weight:700; font-size:clamp(20px, 1.3vw, 28px); letter-spacing:.02em; margin:0 0 8px; }
.sg-o { color:var(--w60); font-size:clamp(15px, .7vw, 18px); margin:0 0 20px; max-width:none; }
.sg-f { margin:0 0 20px; aspect-ratio:16 / 10; overflow:hidden; border-radius:12px; border:1px solid var(--w08); background:#101010; }
.sg-f img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; cursor:zoom-in; border:0; border-radius:0; box-shadow:none; }
.sg-rows { display:flex; flex-direction:column; }
.sr { position:relative; display:grid; grid-template-columns:24px minmax(0,1fr) auto; column-gap:14px; align-items:start; width:100%; padding:14px 12px 14px 4px;
  background:none; border:0; border-top:1px solid var(--w08); text-align:left; font:inherit; color:inherit; cursor:pointer; transition:background .2s var(--ease); }
.sr:hover { background:#161616; }
.sr-ic { position:relative; width:24px; height:24px; margin-top:2px; }
.sr-ic img { width:24px; height:24px; display:block; object-fit:contain; }
.sr .ring { right:-6px; top:-6px; width:12px; height:12px; border-width:2px; }
.sr-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.sr-n { font-family:var(--font-h); font-weight:600; font-size:clamp(16px, .8vw, 19px); color:#fff; }
.sr-l { font-size:clamp(14px, .65vw, 16px); line-height:1.45; color:var(--w60); }
.sr-go { color:var(--w60); font-size:22px; line-height:1; align-self:center; }
.sr.coming { cursor:default; border-left:2px dashed var(--w38); padding-left:12px; margin-left:-2px; }
.sr.coming:hover { background:none; }
.sr-c { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--w60); align-self:center; }
@media (min-width:1700px) {
  .sg-grid { grid-template-rows:auto auto auto repeat(4, auto); }
  .sg-col { display:grid; grid-row:1 / span 7; grid-template-rows:subgrid; }
  .sg-rows { display:grid; grid-row:4 / span 4; grid-template-rows:subgrid; }
  .sg-rows > .sr { align-self:stretch; }
}
@media (min-width:1100px) and (max-width:1699px) { .sg-grid { grid-template-columns:repeat(2, minmax(0,1fr)); row-gap:48px; } }
@media (max-width:1099px) {
  .sg-tabs { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; padding:4px; background:var(--panel); border:1px solid var(--w08); border-radius:12px; margin-bottom:24px; }
  .sg-tabs button { min-height:48px; padding:0 4px; border:0; border-radius:8px; background:none; font:500 13px/1.2 var(--font-b); letter-spacing:.04em; color:var(--w60); cursor:pointer; transition:background .2s var(--ease), color .2s; }
  .sg-tabs button[aria-selected="true"] { background:#2a2a2e; color:#fff; }
  .sg-tabs button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
  .sg-grid { display:block; }
  .sg-col { display:none; }
  .sg[data-active="PLAN"] [data-stage="PLAN"], .sg[data-active="MAKE"] [data-stage="MAKE"],
  .sg[data-active="TRACK + REVIEW"] [data-stage="TRACK + REVIEW"], .sg[data-active="DIRECT"] [data-stage="DIRECT"] { display:block; }
  .sg-h { display:none; }
}

/* ================= C. pipeline ================= */
.ths-row { align-items:center; }
.origin { grid-column:1 / 6; }
.origin h2 { margin-bottom:24px; }
.origin p { color:var(--w87); margin-bottom:1em; }
.ths-row .ths-card { grid-column:7 / 13; }
.pipe-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gut); align-items:stretch; }
.pipe-grid .dia { min-width:0; }
.mk .ro { position:static; width:auto; height:auto; padding:20px 24px; overflow:visible; }
.ro-hint { font-size:15px; color:var(--w60); }
.ro-more { display:none; }
.mcp-l { display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin-bottom:24px; font-size:15px; color:var(--w87); }
.mcp-l span { display:inline-flex; align-items:center; gap:8px; }
.mcp-l img { width:28px; height:28px; object-fit:contain; border-radius:4px; }
.mcp-l .n8n { font-family:var(--font-h); font-weight:600; }
.mcp-l .n8 { color:var(--w60); }
.pt-l { display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; }
.pt-l img { height:32px; width:auto; max-width:96px; object-fit:contain; border-radius:6px; }
.pipe-note { margin:20px 0 0; color:var(--w60); }
@media (min-width:2300px) {
  .pipe-grid { grid-template-columns:minmax(0,1760fr) minmax(0,448fr); }
  .mk .ro { padding:28px; }
  .ro-more { display:block; margin-top:24px; }
  .ro .ro-grid { grid-template-columns:1fr; gap:20px; }
  .ro .ro-in .v.cols { columns:1; }
}
@media (max-width:1099px) { .pipe-grid .ro { display:none; } }
@media (max-width:899px) { .origin, .ths-row .ths-card { grid-column:1 / -1; } }

/* ================= D. AI, one back card per stage, magenta rail across ================= */
.ai-h { box-shadow:none; }
.aic-row { position:relative; display:grid; grid-template-columns:3fr 5fr 3fr 2.4fr; gap:var(--gut); padding-top:28px; }
.aic-row::before { content:''; position:absolute; left:0; right:0; top:8px; height:2px; background:var(--ai); }
.aic { position:relative; background:var(--panel); border:1px solid var(--w08); border-top:2px solid rgba(215,0,90,.55); border-radius:16px; padding:clamp(20px, 1.6vw, 32px); min-width:0; }
.aic-node { position:absolute; left:clamp(20px, 1.6vw, 32px); top:-27px; width:16px; height:16px; border-radius:50%; border:2.5px solid var(--ai); background:var(--bg); }
.aic-h { font-family:var(--font-b) !important; font-size:13px !important; letter-spacing:.12em !important; font-weight:500 !important; color:var(--w60) !important; margin:0 0 16px !important; text-transform:uppercase; }
.aic-l { list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.aic-i { display:grid; grid-template-columns:32px minmax(0,1fr); gap:14px; align-items:start; font-size:clamp(15px, .65vw, 17px); line-height:1.5; color:var(--w60); }
.aic-i img { width:32px; height:32px; object-fit:contain; border-radius:6px; display:block; }
.aic-i b { display:block; font-family:var(--font-h); font-weight:600; font-size:clamp(16px, .8vw, 19px); color:#fff; margin-bottom:2px; }
.aic-i.none b::after { content:''; }
.aic-apps { list-style:none; margin:0 0 18px; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(40px, 1fr)); gap:10px; }
.aic-apps li { position:relative; width:40px; height:40px; }
.aic-apps img { width:40px; height:40px; object-fit:contain; border-radius:8px; display:block; }
.aic-apps .mq { position:absolute; right:-3px; bottom:-3px; width:9px; height:9px; background:var(--ai); box-shadow:0 0 0 2px var(--panel); }
.aic-msg { margin:0; font-size:clamp(15px, .7vw, 18px); line-height:1.55; color:var(--w87); max-width:none !important; }
@media (min-width:1100px) and (max-width:1699px) { .aic-row { grid-template-columns:repeat(2, minmax(0,1fr)); } .aic-make { grid-row:span 2; } }
@media (max-width:1099px) {
  .aic-row { grid-template-columns:minmax(0,1fr); padding:0 0 0 28px; gap:20px; }
  .aic-row::before { left:7px; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .aic-node { left:-28px; top:24px; }
}

/* ================= E. built by ================= */
.bt-band { align-items:start; background:var(--surface); border:1px solid var(--w08); border-radius:20px; padding:clamp(24px, 2.8vw, 64px); column-gap:clamp(24px, 3vw, 64px); }
.bt-left { grid-column:1 / 4; }
.bt-right { grid-column:5 / 13; }
.bt-fig { margin:0 0 24px; aspect-ratio:4 / 5; overflow:hidden; border-radius:12px; }
.bt-fig img { width:100%; height:100%; object-fit:cover; object-position:50% 20%; display:block; filter:grayscale(.2) contrast(1.05); }
.bt-cert { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.bt-cert li:not(:last-child) { font-family:"DM Mono", monospace; font-size:12px; line-height:1.4; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(242,183,5,.34); border-radius:100px; padding:5px 12px; }
.bt-ves { display:inline-flex; align-items:center; gap:12px; min-height:44px; text-decoration:none; color:var(--w60) !important; }
.bt-ves img { height:36px; width:auto; }
.bt-right h2 { margin-bottom:8px; }
.bt-role { font-family:var(--font-h); font-weight:600; font-size:clamp(18px, 1.2vw, 26px); color:var(--w60); margin:0 0 24px; }
.bt-bio { color:var(--w87); margin:0; max-width:68ch; }
.bt-ledger { margin:clamp(24px, 2.4vw, 48px) 0 0; }
.bt-row { display:grid; grid-template-columns:minmax(150px, 2fr) 6fr; column-gap:var(--gut); align-items:center; padding:clamp(16px, 1.3vw, 28px) 0; border-top:1px solid var(--w08); }
.bt-row dt { font-size:clamp(14px, .65vw, 17px); color:var(--w60); }
.bt-row dd { margin:0; display:flex; flex-direction:column; gap:10px; }
.bt-clients, .bt-studios, .bt-partners { display:flex; flex-wrap:wrap; align-items:center; gap:14px clamp(20px, 2.4vw, 48px); }
.bt-clients img { height:clamp(40px, 2.6vw, 60px); width:auto; max-width:140px; object-fit:contain; }
.bt-studios img { height:clamp(16px, 1vw, 24px); width:auto; max-width:110px; object-fit:contain; filter:brightness(0) invert(1); }
.bt-partners img { height:clamp(32px, 2vw, 44px); width:auto; max-width:120px; object-fit:contain; border-radius:6px; }
.bt-note { font-size:14px; color:var(--w60); }
@media (max-width:899px) {
  .bt-left { display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; align-items:center; }
  .bt-fig { aspect-ratio:1; margin:0; }
  .bt-cert { grid-column:1 / -1; }
  .bt-row { grid-template-columns:1fr; row-gap:12px; }
  .bt-clients, .bt-partners { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:center; }
  .bt-clients img, .bt-partners img { width:100%; height:44px; max-width:none; object-fit:contain; }
  .bt-studios { gap:14px 22px; }
}

/* ================= F. spec strip + contact ================= */
.spec { list-style:none; margin:0 0 var(--sec); padding:clamp(24px, 2vw, 40px) 0 0; border-top:1px solid var(--w08); display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gut); }
.spec li { font-size:clamp(15px, .7vw, 18px); line-height:1.5; color:var(--w60); }
.spec b { display:block; font-family:var(--font-h); font-weight:600; font-size:clamp(17px, .95vw, 22px); color:#fff; margin-bottom:8px; }
@media (max-width:1099px) { .spec { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px var(--gut); } }
.ct-row2 { align-items:center; }
.ctm { grid-column:1 / 7; }
.ct-lead { color:var(--w87); font-size:clamp(17px, .85vw, 21px); margin:0 0 32px; }
.ct-routes { grid-column:8 / 13; list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.mk-route { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:16px; min-height:72px; padding:14px 20px; background:var(--panel); border:1px solid var(--w08); border-radius:14px;
  color:inherit !important; text-decoration:none !important; transition:border-color .2s var(--ease), background .2s var(--ease); }
.mk-route:hover { border-color:rgba(255,255,255,.28); background:#1c1c1c; }
.rt-i { width:44px; height:44px; display:grid; place-items:center; color:var(--w87); border:1px solid rgba(255,255,255,.14); border-radius:10px; }
.rt-i svg { width:22px; height:22px; }
.rt-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.rt-l { font-family:var(--font-h); font-weight:600; font-size:clamp(16px, .85vw, 20px); color:#fff; }
.rt-s { font-size:clamp(14px, .65vw, 16px); color:var(--w60); overflow-wrap:anywhere; }
.rt-a { color:var(--w60); font-size:24px; line-height:1; }
@media (max-width:899px) { .ctm, .ct-routes { grid-column:1 / -1; } .ctm .e-btn { width:100%; } .mk-last { padding-bottom:calc(var(--sec) - 8px); } }
@media (prefers-reduced-motion:reduce) { .hc, .plate, .wire, .sr, .mk-link, .mk-route { transition:none; } }

/* ---- fixes after first look ---- */
@media (max-width:1099px) { .pipe-note, .legend-l1 { display:none; } }
@media (max-width:1279px) {
  .hc { padding:12px; column-gap:10px; grid-template-columns:40px minmax(0,1fr); }
  .hc img { width:40px; height:40px; }
  .hc-n { font-size:16px; overflow-wrap:anywhere; }
  .hc-s { white-space:normal; font-size:11px; line-height:1.25; }
}
@media (max-width:479px) {   /* Round 23: the longest name, PXLconnect, stays on one line at 360 */
  .hc { padding:12px 10px; column-gap:8px; grid-template-columns:32px minmax(0,1fr); }
  .hc img { width:32px; height:32px; }
  .hc-n { font-size:14px; overflow-wrap:normal; white-space:nowrap; }
}
@media (max-width:899px) {
  .bt-row dd.bt-clients, .bt-row dd.bt-partners { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; align-items:center; }
  .bt-row dd.bt-clients img { width:100%; height:44px; max-width:none; object-fit:contain; }
}
.bt-row dd.bt-clients { flex-direction:row; }

/* opener: hidden only while the one-time intro is about to play (html.js-anim, set in <head>, removed by page.js or after 3 s) */
.js-anim .hub .hc, .js-anim .hub .plate, .js-anim .hub-wires { opacity:0; }
.wpulse { pointer-events:none; }
.hub[data-anim="running"] .hc, .hub[data-anim="running"] .plate, .hub[data-anim="running"] .wire { transition:none !important; }
.head-side .sub, .sg-o, .ct-lead { text-wrap:balance; }

/* ---------- Round 17: icons only, one size, tooltip ---------- */
#app-tip { position:fixed; z-index:600; max-width:300px; padding:12px 14px; background:#0f0f10; border:1px solid rgba(242,183,5,.45); border-radius:10px; box-shadow:0 12px 40px rgba(0,0,0,.6);
  display:flex; flex-direction:column; gap:4px; pointer-events:none; font:400 14px/1.45 'Roboto', sans-serif; color:rgba(255,255,255,.72); }
#app-tip[hidden] { display:none; }
#app-tip .tp-h { display:flex; align-items:center; gap:10px; }
#app-tip .tp-h img { width:28px; height:28px; object-fit:contain; border-radius:5px; }
#app-tip b { font:600 15px/1.2 'Sora', sans-serif; color:#fff; }
#app-tip .tp-r { color:rgba(255,255,255,.87); }
#app-tip .tp-m { color:#fff; font-size:13px; display:flex; align-items:center; gap:6px; }
#app-tip .tp-m::before { content:''; width:8px; height:8px; background:var(--ai); display:inline-block; }
#app-tip .tp-x { color:rgba(255,255,255,.6); font-size:13px; }
.app-ic { cursor:help; }
.stage.l2 .l2card:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.stage.l2 .lgarea .row { gap:6px; }
.stage.l2 .app-ic { position:relative; display:block; flex:none; border-radius:6px; }
.stage.l2 .app-ic img { width:100%; height:100%; object-fit:contain; display:block; border-radius:5px; }
.stage.l2 .app-ic:hover, .stage.l2 .app-ic.sel { box-shadow:0 0 0 2px rgba(242,183,5,.7); }
.ro .ro-app { display:flex; align-items:center; gap:12px; }
.ro .ro-app img { width:40px; height:40px; object-fit:contain; border-radius:6px; }
/* layer 1: the ComfyUI tile and the satellites are icon tiles (32px icon, same as the host apps) */
.stage.l1 button.app-ic { font:inherit; color:inherit; cursor:help; }
.stage.l1 .l1-comfy { padding:0; justify-content:center; align-items:center; border-radius:14px; }
.stage.l1 .l1-comfy img { width:32px !important; height:32px !important; }
.stage.l1 .l1-sat { justify-content:center; padding:0; }
.stage.l1 .l1-sat img { width:32px; height:32px; }
.stage.l1 .l1-sat.dashed { background:transparent; }
.stage.l1 .l1-hostic { position:absolute; top:726px; width:32px; height:32px; padding:0; border:0; background:none; border-radius:6px; }
.stage.l1 .l1-hostic img { width:32px; height:32px; display:block; }
.stage.l1 .app-ic:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* AI section MAKE card: icons only, one size */
.aic-apps li { width:40px; height:40px; }
.aic-app { position:relative; display:block; width:40px; height:40px; padding:0; border:0; background:none; border-radius:8px; }
.aic-app img { width:40px; height:40px; object-fit:contain; border-radius:8px; display:block; }
.aic-app .mq { position:absolute; right:-3px; bottom:-3px; width:9px; height:9px; background:var(--ai); box-shadow:0 0 0 2px var(--panel); }
.aic-app:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
/* phones: one icon size (28px) in the accordion */
.m2 .lr .lg, .m2 .lr .lg img { width:28px !important; height:28px !important; }
.m2 .lr .lg.long, .m2 .lr .lg.long img { width:auto !important; }
.m2 .lr .lg img { object-fit:contain; border-radius:5px; }
.m1 .app-ic { width:28px !important; height:28px !important; }
.stage.l1 .l1-hostic img { position:static !important; top:auto !important; }

/* About credentials (Round 19): line 1 = the two gold capsules side by side; line 2 = "Proud member of" + the VES logo */
.bt-cert { display:flex !important; flex-wrap:wrap; gap:8px; }
.bt-cert li:not(:last-child) { white-space:nowrap; }
.bt-cert li:last-child { flex:0 0 100%; }
.bt-right .bt-cert { margin-top:clamp(20px, 2vw, 32px); }

/* 3D libraries (Round 20): nine logos as supplied, one square size (32 in the L1 stage, 28 on phones, 32 in the stage cards), wrap when needed */
.lib-ic { display:block; flex:none; padding:0; border:0; background:none; border-radius:6px; cursor:help; }
.lib-ic img { width:100%; height:100%; display:block; object-fit:contain; border-radius:6px; }
.lib-ic:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.stage.l1 .l1-libbox .logos { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }   /* ten libraries on one row: 10x32 + 9x8 = 392 <= 394 inner */
.stage.l1 .l1-libbox .lib-ic { width:32px; height:32px; }
.m1-feed .box .logos { display:flex; flex-wrap:wrap; gap:8px; }
.m1-feed .box .lib-ic, .m1-feed .box .lib-ic img { width:28px !important; height:28px !important; }
.liblogos { display:flex; flex-wrap:wrap; gap:8px; }
.liblogos .lib-ic { width:32px; height:32px; }

/* ---- Round 24: the six side cards carry each tool's official lockup, as supplied, like the centre plate ---- */
.hc { --lk-h:clamp(40px, 2.2vw, 56px); grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"i s" "t t"; row-gap:10px; align-content:center; }
.hc .hc-logo { grid-area:i; height:var(--lk-h); width:auto; max-width:100%; justify-self:start; align-self:center; }
.hc-s { align-self:center; }
@media (max-width:1699px) { .hc { grid-template-areas:"i s" "t t"; grid-template-columns:minmax(0,1fr) auto; } .hc-s { align-self:center; } }
@media (max-width:1279px) { .hc { --lk-h:36px; grid-template-columns:minmax(0,1fr) auto; } }
@media (max-width:699px)  { .hc { --lk-h:30px; grid-template-columns:minmax(0,1fr); grid-template-areas:"i" "s"; row-gap:8px; } .hc-s { align-self:start; } }
@media (max-width:479px)  { .hc { --lk-h:27px; grid-template-columns:minmax(0,1fr); } }
.aic-cx { margin-bottom:18px; }

/* ---------- B2026-10-14: Logo tokens (tok-logo) and opener chip (chip-nexus) ----------
   PNGs carry ~48px transparent left margin in a 384px-height image.
   --pr = right-pad ratio (matches TOKEN_PAD in pxlnexus-deck templates.js).
   height is relative to the current font-size so the mark scales with the heading. */
.tok-logo { --th:max(2.3em, 44px); height:var(--th); width:auto; vertical-align:middle; display:inline-block;
  position:relative; top:-0.04em;
  /* the whole official file at a size where the wordmark reads; negative margins absorb its transparent padding (never cropped).
     right margin = exact right-transparent-pad compensation so the following word starts at the last visible glyph edge. */
  margin:calc(var(--th) * -0.3) calc(var(--pr,0) * -1 * var(--th)) calc(var(--th) * -0.3) calc(var(--th) * -0.125 + 0.06em); }

/* Opener chip "Orchestrated by [PXLnexus]" */
.open-chip { margin:16px 0 0; line-height:1; }
.chip-nexus { display:inline-flex; align-items:center; gap:6px; padding:6px 18px 6px 14px;
  border:1px solid rgba(215,0,90,.45); border-radius:24px; text-decoration:none !important;
  font-size:clamp(13px,.7vw,15px); color:var(--w87) !important;
  transition:border-color .2s, background .2s; }
.chip-nexus:hover { border-color:var(--mag); background:rgba(215,0,90,.06); }
.chip-nexus .tok-logo { --th:52px; margin-top:-8px; margin-bottom:-8px; }   /* visible art spans 9-44px of the 52px file: the chip wraps it */

/* Pipeline pointer to PXLnexus */
.pl-nexus-ptr { margin:24px 0 0; }
.pl-nexus-ptr .tok-logo { --th:max(2.2em, 50px); }

/* ---------- B5 2026-10-14: nexus three-line band (replaces #ai) ---------- */
.mk-nexus { background:rgba(215,0,90,.04); border-top:1px solid rgba(215,0,90,.18);
  border-bottom:1px solid rgba(215,0,90,.18); }
.nx-band { display:flex; flex-direction:column; gap:clamp(20px,2vw,32px); }
.nx-band h2 { margin:0; font-size:clamp(28px,2.4vw,48px); }
.nx-band h2 .tok-logo { --th:1.6em; }
.nx-lines { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(12px,1.2vw,20px); }
.nx-lines li { font-size:clamp(17px,1.15vw,22px); color:var(--w87); line-height:1.5; }
.nx-lines li .tok-logo { --th:max(2.2em, 48px); }
.nx-cta { margin:0; }
.nx-cta .tok-logo { --th:max(2.2em, 48px); }

/* ---------- B7 2026-10-14: about one-liner ---------- */
.mk-about-min { padding:clamp(24px,3vw,48px) 0; }
.bt-one { font-size:clamp(15px,.9vw,18px); color:var(--w60); margin:0; }
.bt-one .tok-logo { --th:46px; }

/* ---------- Contact B8: fourth route uses tok-logo ---------- */
.ct-routes .tok-logo { --th:46px; }