/* ══════════════════════════════
   SLIDE 04 — PROBLEM ("crushing logos" graph)
══════════════════════════════ */
.s4-graph-layout{
  width:100%;
  height:100%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:clamp(8px,1.6vh,18px);
  padding:var(--pill-reserve) clamp(24px,3.5vw,56px) clamp(16px,2.4vh,28px) 80px;
  background:var(--deck-navy);
}
.s4-graph-stage{
  position:relative;
  z-index:1;                 /* canvas sits BELOW the header text */
  flex:1;
  width:100%;
  min-height:0;
  /* Pull the graph UP behind the "Day 0…" note + "Behavior remains unchanged." so it
     fills most of the slide (>=65% of content); "300K+ longevity apps" stays clear
     above. The header text is z-indexed above the canvas; the decay curve lives in the
     lower/left so the centered text only overlays the graph's empty top. 2026-06-09. */
  margin-top:calc(-1 * clamp(60px,11.5vh,126px));
}
.s4-graph-layout .s4-problem-head{ position:relative; z-index:2; } /* header text paints above the canvas */
body.deck-mobile .s4-graph-stage{ margin-top:0; }                  /* mobile keeps its own stacked layout */
.s4-graph-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.s4-graph-note{
  max-width:calc(100% - 12px);
  margin:0;
  text-align:center;
  line-height:1.35;
  font-size:clamp(29px,3.5vw,48px); /* match .deck-slide-title — 2026-06-09 */
  font-weight:600;
  color:var(--text); /* same color as the "300K+" title (.deck-slide-title) — 2026-06-12; was rgba(255,255,255,0.82) */
  text-shadow:0 2px 14px rgba(0,0,0,0.6);
  pointer-events:none;
  white-space:nowrap; /* one line on desktop — overridden to normal on mobile so it wraps at the pipe (2026-06-11) */
}
.s4-graph-note span{ color:var(--accent-soft); }
/* Retired hero figure (man-with-watches) reused as a faded bottom-right corner mark on the graph. */
.s4-graph-figure{
  position:absolute;
  right:0;
  bottom:56px;          /* feet rest on the x-axis line (H − PB, PB=56) */
  z-index:0;            /* behind the canvas curves → reads as a ghost */
  height:68%;           /* ~2x the old 34% */
  width:auto;
  max-width:56%;
  opacity:0.45;         /* faded ghost */
  object-fit:contain;
  object-position:bottom right;
  pointer-events:none;
}
.s4-graph-sr{
  position:absolute;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
body.deck-mobile .s4-graph-layout{ padding:var(--pill-reserve) 14px 14px; }
body.deck-mobile .s4-graph-note{ font-size:clamp(20px,5vw,30px); white-space:normal; }
body.deck-mobile .s4-graph-figure{ height:44%; max-width:50%; }