/* ============================================================
   INTERLOCK — component: why-now timeline + punchline
   ============================================================ */
.timeline{border-left:1px solid var(--line-bright);margin-left:8px;padding-left:40px;max-width:760px}
.tl-item{position:relative;padding-bottom:48px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-45px;top:7px;
  width:9px;height:9px;background:var(--bg);border:1px solid var(--green);
  transform:rotate(45deg);
}
.tl-item.hot::before{background:var(--green);box-shadow:0 0 12px rgba(54,242,139,.6)}
.tl-date{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--green);text-transform:uppercase;margin-bottom:8px}
.tl-item h3{font-family:var(--disp);font-weight:600;font-size:1.15rem;margin-bottom:8px}
.tl-item p{color:var(--text-dim);font-size:.97rem;max-width:56ch}

/* punchline composes .panel */
.whynow-punch{
  margin-top:64px;padding:32px 36px;
  font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.4;
  max-width:760px;
}
.whynow-punch em{font-style:normal;color:var(--green)}