/* ════════════════════════════════════════════════════════════
   SLIDE 7 — THE NETWORK EFFECT (displayed #7, data-index 6)
   Styling is class-based (.nfx-*) so it survives future reorders;
   only the entrance cascade (Task 5) is gated on
   .slide[data-index="6"].active — the deck-standard entrance trigger.
   Title accent + punchline use --cyan (slide one-off, not the deck's
   lilac --accent-soft); cyan unifies the teal/blue palette here.
═══════════════════════════════════════════════════════════════ */

.nfx-layout{
  position:relative; /* anchor for the runtime-measured .nfx-beams-layer overlay */
  width:100%; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:clamp(6px,1.1vh,13px);
  /* top clears the lifted pill; left clears the 72px sidenav rail (deck standard) */
  padding:var(--pill-reserve) clamp(24px,4vw,64px) clamp(14px,2.6vh,32px) 80px;
  text-align:center;
}
.nfx-header{ display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1.1vh,13px); max-width:min(1340px,100%); }
.nfx-title{ margin:0; max-width:min(1330px,95vw); font-size:clamp(26px,3.05vw,42px); }   /* beats .deck-slide-title's 920px cap: fewer lines = more room for the phones */
/* override the deck-wide lilac accent (.deck-slide-title span uses !important) — cyan unifies this slide's palette */
.nfx-title span{ color:var(--cyan) !important; text-shadow:0 0 18px rgba(0,223,244,0.45); }

.nfx-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,3vw,56px);
  width:100%; max-width:min(1180px,100%); align-items:stretch;
  flex:1 1 auto; min-height:0;   /* absorb the leftover height -> the phones get it */
}
.nfx-col{ display:flex; flex-direction:column; align-items:center; gap:clamp(4px,0.7vh,9px); min-height:0; }

/* ── Phone mockups (replaced the generic person-trees, 2026-08-02).
   Screen-rect constants are the deck's existing ones, shared with slide 06's hero:
   the punched-out hiw-frame.webp bezel paints ABOVE the screen and its lip overhangs the edges. ── */
.nfx-phone{
  position:relative; flex:1 1 auto; min-height:0;
  aspect-ratio:3436 / 7125; max-width:100%; align-self:center;
}
.nfx-phone__screen{
  position:absolute; left:2.998%; top:1.207%; width:94.005%; height:97.600%;
  border-radius:14.86% / 6.90%;
  object-fit:cover; object-position:top; z-index:1; display:block;
}
.nfx-phone__bezel{
  position:relative; z-index:2; display:block; width:100%; height:100%;
  object-fit:contain; pointer-events:none;
  filter:drop-shadow(0 18px 38px rgba(0,10,44,0.55));
}
.nfx-col--friends{ color:var(--blue-bright); }
.nfx-col--workplace{ color:var(--indigo); }
.nfx-col--family{ color:var(--teal); }
.nfx-label{ font-size:clamp(10px,0.8vw,12px); letter-spacing:0.22em; font-weight:700; color:currentColor; }
.nfx-caption{ margin:0; color:#fff; font-weight:700; font-size:clamp(12px,1.02vw,15px); }

/* Context badge (friends/workplace/family) sits at the bottom of the hero avatar and is always white,
   regardless of the column's currentColor. WORKPLACE/FAMILY symbols use stroke="currentColor" → color:#fff
   whitens the stroke; FRIENDS' filled shapes take fill:#fff. The big silhouette keeps its column color. */

/* Runtime-measured beams overlay (2026-06-12): 12 triangles, apex at each
   leaf's feet, base spanning EXACTLY its 12-person group in the band (outer
   edge of person 1 → outer edge of person 12). Geometry set by
   network-effect.js from getBoundingClientRect (recomputed on resize +
   activation) — static per-tree beams couldn't align with the full-width
   band across viewports. */
body.deck-mobile 
/* Continuous 144-person crowd band under all three trees (2026-06-12).
   Colored per third to read as the three networks merging into one crowd. */

/* No margin-top:auto — the punchline rides up directly beneath the grid/baseline
   (close to the three-column visualization) instead of being pinned to the slide's bottom edge. */
.nfx-punch{ margin-top:clamp(4px,0.9vh,11px); display:flex; flex-direction:column; gap:2px; }
.nfx-punch__lead{ margin:0; color:#fff; font-weight:700; font-size:clamp(15px,1.4vw,21px); }
.nfx-punch__hook{ margin:clamp(3px,0.6vh,8px) 0; color:var(--cyan); font-weight:800; font-size:clamp(20px,2vw,30px); text-shadow:0 0 22px rgba(0,223,244,0.5); } /* breathing room above/below — 2026-06-12 */
.nfx-punch__growth{ margin:0; color:#fff; font-weight:700; font-size:clamp(14px,1.25vw,19px); }

/* ── Entrance cascade — gated on the slide's active state (deck pattern).
   Wrapped in no-preference so reduced-motion shows the final state at rest. ── */
@media (prefers-reduced-motion: no-preference){
  .slide[data-index="6"] .nfx-header,
  .slide[data-index="6"] .nfx-label,
  .slide[data-index="6"] .nfx-phone,
  .slide[data-index="6"] .nfx-caption,
  .slide[data-index="6"] .nfx-punch__lead,
  .slide[data-index="6"] .nfx-punch__hook,
  .slide[data-index="6"] .nfx-punch__growth{ opacity:0; }

  .slide[data-index="6"].active .nfx-header{ animation:nfxFade .5s ease .05s forwards; }
  .slide[data-index="6"].active .nfx-label{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) .20s forwards; }
  .slide[data-index="6"].active .nfx-caption{ animation:nfxFade .5s ease .35s forwards; }
  .slide[data-index="6"].active .nfx-phone{ animation:nfxRise .55s cubic-bezier(.22,1,.36,1) .45s forwards; }
  .slide[data-index="6"].active .nfx-punch__lead{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) 1.0s forwards; }
  .slide[data-index="6"].active .nfx-punch__hook{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) 1.15s forwards; }
  .slide[data-index="6"].active .nfx-punch__growth{ animation:nfxRise .5s cubic-bezier(.22,1,.36,1) 1.3s forwards; }
}

@keyframes nfxFade{ to{ opacity:1; } }
@keyframes nfxRise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }