/* Static chart adapted from the approved refined design. Labels stay readable at every width. */
.diffusion-chart{
  --arrow-inset:clamp(8px,1.2vw,18px);
  --arrow-tip-offset:.83px;
  margin:0 0 28px;
  padding:40px 48px 36px;
  background:#eef1e8;
  border:0;
  color:var(--ink);
  overflow:hidden;
}
.diffusion-plot{position:relative;width:100%;aspect-ratio:12/5;min-height:320px;margin-top:8px}
.diffusion-gap-fill{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(238,96,57,.09),rgba(238,96,57,.015)),repeating-linear-gradient(135deg,transparent 0 6px,rgba(238,96,57,.09) 6px 7px);
  clip-path:url(#diffusion-gap-clip);
}
.diffusion-curves{position:relative;display:block;width:100%;height:100%;overflow:visible}
.diffusion-curves path,.diffusion-curves line{vector-effect:non-scaling-stroke}
.diffusion-grid{stroke:#d3d9ca;stroke-width:1;stroke-dasharray:2 5}
.diffusion-baseline{stroke:#a9b3a0;stroke-width:1}
.diffusion-ticks{stroke:#b9c2b0;stroke-width:1}
.diffusion-curve{stroke-width:2.6;stroke-linecap:round}
.diffusion-potential{stroke:#1f3d2e}
.diffusion-experience{stroke:#8a9681}
.diffusion-labels{position:absolute;inset:0;pointer-events:none}
.diffusion-chart .diffusion-label{
  position:absolute;
  top:16%;
  transform:translate(-50%,-100%);
  padding-bottom:18px;
  margin:0;
  white-space:nowrap;
  font-family:var(--sans);
  font-size:clamp(18px,1.55vw,21px);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.02em;
}
.diffusion-label-potential{left:30.5%;color:#1f3d2e}
.diffusion-label-experience{left:min(88.333333%,calc(100% - 35px));color:#5f6b58}
.diffusion-point,.diffusion-origin{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.diffusion-point{top:16%;width:9px;height:9px}
.diffusion-point-potential{left:30.5%;background:#1f3d2e;box-shadow:0 0 0 6.5px rgba(31,61,46,.1)}
.diffusion-point-experience{left:88.333333%;background:#8a9681;box-shadow:0 0 0 6.5px rgba(138,150,129,.14)}
.diffusion-origin{left:6.666667%;top:88%;width:8px;height:8px;background:#eef1e8;border:1.6px solid #1f3d2e}
.diffusion-opportunity{
  position:absolute;
  /* Curve intersections at y=230; equal inset includes the arrowhead's projecting tip. */
  left:calc(28.645872% + var(--arrow-inset) - var(--arrow-tip-offset));
  right:calc(21.726012% + var(--arrow-inset) + var(--arrow-tip-offset));
  top:46%;
  transform:translateY(-50%);
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:14px;
}
.diffusion-arrow-line{height:1.6px;background:#ee6039;position:relative}
.diffusion-arrow-head:after{content:"";position:absolute;right:0;top:50%;width:8px;height:8px;border-top:1.6px solid #ee6039;border-right:1.6px solid #ee6039;transform:translateY(-50%) rotate(45deg)}
.diffusion-annotation{font-family:var(--mono);font-size:12px;font-weight:400;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#b0401f}
.diffusion-gap-label{position:absolute;left:0;right:0;bottom:calc(100% + 8px);margin:0;text-align:center;white-space:normal;text-wrap:balance}
.diffusion-time{position:absolute;left:6.666667%;top:94.8%;transform:translateY(-50%);display:flex;gap:12px;align-items:center;font-family:var(--mono);font-size:11px;line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:#6d786a}
.diffusion-time>span{font-family:var(--sans);font-size:20px;line-height:1;letter-spacing:0}
@media(max-width:800px){
  .diffusion-chart{padding:30px 28px 26px}
  .diffusion-plot{min-height:320px;margin-top:18px}
}
@media(max-width:560px){
  .diffusion-chart{--arrow-tip-offset:.62px;margin-bottom:22px;padding:26px 16px 22px}
  .diffusion-plot{aspect-ratio:auto;height:300px;min-height:0;margin-top:20px}
  .diffusion-chart .diffusion-label{font-size:14px;line-height:1.3;letter-spacing:-.015em;padding-bottom:14px}
  .diffusion-curve{stroke-width:2.4}
  .diffusion-point{width:7px;height:7px}
  .diffusion-point-potential{box-shadow:0 0 0 4.5px rgba(31,61,46,.1)}
  .diffusion-point-experience{box-shadow:0 0 0 4.5px rgba(138,150,129,.14)}
  .diffusion-origin{width:7px;height:7px;border-width:1.4px}
  .diffusion-opportunity{gap:8px}
  .diffusion-annotation{font-size:11px;letter-spacing:.05em}
  .diffusion-arrow-head:after{width:6px;height:6px}
  .diffusion-time{gap:9px}
}
@media(max-width:360px){
  .diffusion-chart{padding-left:12px;padding-right:12px}
  .diffusion-plot{height:280px}
}

/* Compact homepage panel: keep the graphic proportional to the hero copy. */
.hero-diffusion{
  container-type:inline-size;
  min-width:0;
  align-self:end;
  margin:0 0 44px;
  padding:30px 28px 26px;
  --arrow-inset:10px;
}
.hero-diffusion .diffusion-plot{aspect-ratio:1.75;min-height:0;height:auto;margin-top:12px}
.hero-diffusion .diffusion-label{font-size:clamp(14px,4cqw,18px);padding-bottom:14px}
.hero-diffusion .diffusion-opportunity{gap:10px}
.hero-diffusion .diffusion-annotation{font-size:11px;letter-spacing:.05em}
@media(min-width:1600px){
  .hero-diffusion{margin-bottom:40px}
}
@media(max-width:1150px){
  .hero-diffusion{padding:26px 20px 24px}
}
@media(max-width:800px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-diffusion{width:100%;max-width:560px;margin:0 auto 30px;align-self:start}
  .hero-diffusion .diffusion-plot{aspect-ratio:1.6}
}
@media(max-width:560px){
  .hero-diffusion{padding:22px 16px 18px;margin-bottom:25px;--arrow-inset:8px}
  .hero-diffusion .diffusion-plot{aspect-ratio:1.3;margin-top:12px}
  .hero-diffusion .diffusion-opportunity{gap:8px}
}
@media(max-width:360px){
  .hero-diffusion{padding-left:12px;padding-right:12px}
}