/* === "The same fault, two futures" — comparison timeline (injected) ===
   Center spine = shared time axis. Left = status quo, right = with 42Hz.
   Beam fills on scroll; each step reveals as its node passes center. */

.hz-tf{max-width:74rem;margin:0 auto;padding:7rem 2rem 3rem;}
.hz-tf-head{display:flex;justify-content:space-between;gap:3rem 4rem;align-items:flex-start;flex-wrap:wrap;margin-bottom:3.2rem;}
.hz-tf-eyebrow{display:flex;align-items:center;gap:.8rem;
  font:500 11px/1 "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:#FBB320;}
.hz-tf-eyebrow::before{content:"";width:32px;height:1px;background:#FBB320;opacity:.6;}
.hz-tf h2{font:600 clamp(30px,5vw,52px)/1.05 Inter,sans-serif;letter-spacing:-.035em;color:#fff;margin:1.4rem 0 0;max-width:16ch;}
.hz-tf h2 .dim{color:rgb(255 255 255/.4);}
.hz-tf-intro{font:400 16px/1.6 Inter,sans-serif;color:rgb(255 255 255/.6);max-width:30rem;padding-top:.6rem;}

/* ---- timeline shell ---- */
.hz-tl{position:relative;}

/* column headers */
.hz-tl-heads{display:grid;grid-template-columns:1fr 64px 1fr;align-items:end;margin-bottom:2.2rem;}
.hz-tl-heads .h{display:flex;flex-direction:column;gap:.7rem;}
.hz-tl-heads .h.l{align-items:flex-end;text-align:right;}
.hz-tl-heads .h.r{align-items:flex-start;text-align:left;}
.hz-tl-chip{font:600 11px/1 "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;padding:.5rem .75rem;border-radius:6px;}
.hz-tl-chip.loss{color:#e0876b;border:1px solid rgba(217,96,59,.4);background:rgba(217,96,59,.08);}
.hz-tl-chip.win{color:#0a0a0a;background:#FBB320;}
.hz-tl-sub{font:600 15px/1.3 Inter,sans-serif;letter-spacing:-.02em;color:rgb(255 255 255/.85);max-width:18ch;}

/* spine + beam (centered) */
.hz-tl-line{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-1px);
  background:linear-gradient(to bottom,transparent,rgb(255 255 255/.12) 6%,rgb(255 255 255/.12) 94%,transparent);}
.hz-tl-beam{position:absolute;top:0;left:0;width:100%;height:0;border-radius:2px;
  background:linear-gradient(to bottom,rgb(251 179 32/.15),#FBB320);
  box-shadow:0 0 14px rgb(251 179 32/.55);will-change:height;}

/* one event, paired across the spine */
.hz-tl-step{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:start;padding:1.5rem 0;}
.hz-tl-side{opacity:0;transition:opacity .6s ease,transform .65s cubic-bezier(.2,.7,.2,1);}
.hz-tl-side.l{text-align:right;padding-right:2rem;transform:translateX(-18px);}
.hz-tl-side.r{text-align:left;padding-left:2rem;transform:translateX(18px);}
.hz-tl-step.in .hz-tl-side{opacity:1;transform:none;}
.hz-tl-side .t{font:500 13px/1.4 "JetBrains Mono",monospace;letter-spacing:.03em;margin-bottom:.5rem;}
.hz-tl-side.l .t{color:#e0876b;}
.hz-tl-side.r .t{color:#FBB320;}
.hz-tl-side .d{font:400 13.5px/1.55 Inter,sans-serif;color:rgb(255 255 255/.72);}
.hz-tl-who{display:none;}
.tf-loss{color:#e0876b;font-weight:600;}
.tf-win{color:#FBB320;font-weight:600;}
.tf-dim{color:rgb(255 255 255/.4);}

/* node on the spine */
.hz-tl-node{grid-column:2;justify-self:center;position:relative;z-index:2;margin-top:.2rem;
  width:14px;height:14px;border-radius:50%;background:#0a0a0a;border:2px solid rgb(255 255 255/.22);
  transition:border-color .5s ease,background .5s ease,box-shadow .5s ease;}
.hz-tl-step.in .hz-tl-node{border-color:#FBB320;background:#FBB320;
  box-shadow:0 0 0 4px rgb(251 179 32/.15),0 0 16px rgb(251 179 32/.55);}

/* closing totals row */
.hz-tl-totals{position:relative;display:grid;grid-template-columns:1fr 64px 1fr;align-items:start;
  margin-top:.6rem;padding-top:2rem;}
.hz-tl-totals .hz-tl-side{opacity:1;transform:none;}
.hz-tl-totals .n{font:600 clamp(34px,6vw,46px)/1 Inter,sans-serif;letter-spacing:-.04em;}
.hz-tl-totals .l .n{color:#d9603b;}
.hz-tl-totals .r .n{color:#FBB320;}
.hz-tl-totals .c{margin-top:.85rem;font:400 12px/1.55 "JetBrains Mono",monospace;color:rgb(255 255 255/.35);}
.hz-tl-node.final{width:18px;height:18px;margin-top:.1rem;border-color:#FBB320;background:#FBB320;
  box-shadow:0 0 0 5px rgb(251 179 32/.18),0 0 20px rgb(251 179 32/.6);}

/* ---- mobile: collapse to a single left spine, sides stacked under each node ---- */
@media (max-width:780px){
  .hz-tf{padding:4.5rem 1.25rem 2rem;}
  .hz-tl-heads{display:none;}
  .hz-tl-line{left:19px;}
  .hz-tl-step,.hz-tl-totals{grid-template-columns:40px 1fr;grid-template-areas:"node l" "node r";gap:0 .4rem;}
  .hz-tl-node{grid-area:node;}
  .hz-tl-side.l{grid-area:l;text-align:left;padding:0 0 1.1rem;transform:translateX(16px);}
  .hz-tl-side.r{grid-area:r;text-align:left;padding:0;transform:translateX(16px);}
  .hz-tl-who{display:inline-block;font:600 10px/1 "JetBrains Mono",monospace;letter-spacing:.1em;
    text-transform:uppercase;margin-bottom:.5rem;padding:.3rem .5rem;border-radius:5px;}
  .hz-tl-side.l .hz-tl-who{color:#e0876b;border:1px solid rgba(217,96,59,.4);}
  .hz-tl-side.r .hz-tl-who{color:#0a0a0a;background:#FBB320;}
  .hz-tl-totals .l .hz-tl-side{padding-bottom:1.5rem;}
}

@media (prefers-reduced-motion:reduce){
  .hz-tl-side{transition:none;}
}