/* p4: P10-P12 «The city» (p4.js). Composition px. Onest for the words, the deck's dark glass for the chips. */
#p4-veil { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--veil), 0.62) 0%, rgba(var(--veil), 0.28) 20%, rgba(var(--veil), 0) 34%); }
.p4-head { position: absolute; left: 96px; top: 76px; max-width: 1380px; color: #f4f3ef; pointer-events: none;
  font: 680 76px/1.06 'Onest', sans-serif; letter-spacing: -0.03em; text-shadow: 0 2px 30px rgba(10, 14, 32, 0.75); }
/* the headline: the line of the pitch, centred on the sky over a dimmed city (#p4-dim) */
#p4-dim { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(var(--veil), 0.78) 0%, rgba(var(--veil), 0.6) 30%, rgba(var(--veil), 0.34) 60%, rgba(var(--veil), 0.3) 100%); }
#p4-headline { left: 0; right: 0; top: 124px; max-width: none; text-align: center; font-size: 84px; font-weight: 640; line-height: 1.1;
  letter-spacing: -0.028em; display: flex; flex-direction: column; align-items: center; gap: 10px; text-shadow: 0 2px 40px rgba(6, 9, 24, 0.9); }
#p4-headline .p4-l2 { color: #ffd892; }
.p4-pin { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }
.p4-tag { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; }
.p4-stem { display: block; width: 2px; height: 74px; background: linear-gradient(0deg, rgba(255, 216, 146, 0.0), rgba(255, 216, 146, 0.85)); }
/* the chips: the product name >= 32 px, the role >= 24 px (projector-readable); a dark plate, a gold edge.
   The ladder grows: .p4-s1 .. .p4-s4 (DGX Spark < DGX Station < AI server < AI factory); --k is the appear-grow. */
.p4-chip { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; padding: 16px 24px 15px; border-radius: 16px;
  background: rgba(9, 12, 26, 0.88); border: 1.5px solid rgba(255, 216, 146, 0.55); box-shadow: 0 12px 34px -12px rgba(2, 4, 14, 0.85);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 540 var(--role, 24px)/1 'Onest', sans-serif; color: #dfe2ee; transform: scale(var(--k, 1)); }
.p4-chip b { font-weight: 700; font-size: var(--name, 32px); color: #ffd892; letter-spacing: -0.01em; }
.p4-s1 { --name: 32px; --role: 24px; }
.p4-s2 { --name: 36px; --role: 26px; }
.p4-s3 { --name: 40px; --role: 28px; }
.p4-s4 { --name: 44px; --role: 30px; }
.p4-chip-uni { --name: 40px; --role: 30px; padding: 18px 26px 17px; }
.p4-chip-uni b { color: #f4f3ef; }
#p4-factory .p4-tag { bottom: auto; top: 0; transform: translate(-100%, -50%); }
#p4-factory[data-side="right"] .p4-tag { transform: translate(0, -50%); }
.p4-arrow { display: inline-block; width: 36px; height: 36px; align-self: center; margin-right: 2px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M3 13h18M14 6l7 7-7 7' fill='none' stroke='%23ffd892' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.p4-right { transform: translateX(-28px); align-items: flex-start; }
.p4-right .p4-stem { margin-left: 27px; }
.p4-tall .p4-stem { height: 120px; }
/* the university chip sits left of its beacon (the light column above stays clear) */
.p4-side { bottom: auto; top: 0; flex-direction: row; align-items: center; transform: translate(-100%, -50%) translateX(-34px); }
.p4-side .p4-stem { order: 2; width: 62px; height: 2px; background: linear-gradient(90deg, rgba(255, 216, 146, 0.85), rgba(255, 216, 146, 0)); }