/* 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:1px solid #d6dbcd;
  color:var(--ink);
  overflow:hidden;
}
.diffusion-chart-header{
  display:flex;
  justify-content:center;
  padding-bottom:22px;
  /* Center over the two curve labels, including the right label's mobile inset. */
  padding-left:min(18.833333%,calc(30.5% - 35px));
}
.diffusion-chart .diffusion-heading{
  margin:0;
  text-align:center;
  font-family:var(--sans);
  font-size:clamp(26px,2.3vw,34px);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-.035em;
}
.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;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:#b0401f}
.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-chart-header{padding-bottom:20px}
  .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-chart-header{padding-bottom:22px}
  .diffusion-chart .diffusion-heading{font-size:clamp(18px,5.8vw,26px);max-width:none;white-space:nowrap}
  .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}
}

/* Fit the desktop opening to the available screen height. */
@media(min-width:801px){
  .vision-hero{
    display:grid;
    grid-template-rows:auto minmax(288px,1fr);
    row-gap:clamp(20px,2.5vh,28px);
    height:calc(100vh - var(--header-height));
    height:calc(100svh - var(--header-height));
    min-height:min-content;
    padding-top:clamp(20px,3vh,32px);
    padding-bottom:24px;
  }
  .vision-hero h1{margin:0}
  .vision-hero .diffusion-chart{
    display:flex;
    flex-direction:column;
    min-height:0;
    margin:0;
    padding-top:clamp(16px,2.5vh,28px);
    padding-bottom:clamp(16px,2.3vh,24px);
  }
  .vision-hero .diffusion-chart-header{flex:none;padding-bottom:8px}
  .vision-hero .diffusion-plot{flex:1;min-height:0;aspect-ratio:auto;margin-top:8px}
}