.spine{
  --side:clamp(1.25rem,4vw,3.5rem);
  --accent:#FF6001;            /* orange highlight for the active/result element in each right-side panel */
  position:relative;
  background:var(--background);color:var(--foreground);
}
.spine .kicker{color:color-mix(in oklch,var(--foreground) 50%,transparent);}
.spine-track{height:520vh;}   /* ~100vh of scroll per step; five steps */
.spine-stage{
  position:sticky;top:0;height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2rem,5vh,3.5rem) var(--side) clamp(1.25rem,3vh,2rem);
  overflow:hidden;
}
.spine-inner{
  flex:1;min-height:0;width:100%;
  display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center;
}

.spine h2{
  margin:0;color:var(--foreground);
  font-size:clamp(1.75rem,3.9vw,3.125rem);
  font-weight:600;line-height:1.02;
  letter-spacing:-.032em;text-transform:uppercase;
}
.spine h2 .dim{color:color-mix(in oklch,var(--foreground) 45%,transparent);}
.spine-note{
  margin:1.125rem 0 0;max-width:40ch;
  color:color-mix(in oklch,var(--foreground) 58%,transparent);
  font-size:clamp(.875rem,1.2vw,1rem);line-height:1.6;
}

/* --- the step rail --- */
.rail-steps{
  --axis:.5rem;              /* x of the line and every node centre */
  --node:.9375rem;           /* node diameter */
  --pad-y:.6875rem;          /* vertical padding on each step */
  position:relative;list-style:none;
  margin:clamp(2rem,4.5vh,3rem) 0 0;
  padding:0 0 0 2.25rem;
}
/* track and fill share one geometry, measured from the first and last node */
.rail-steps::before,.rfill{
  content:"";position:absolute;
  left:var(--axis);width:1px;
  top:var(--rail-top,.5rem);
  height:var(--rail-h,calc(100% - 1rem));
  transform:translateX(-50%);
}
.rail-steps::before{background:color-mix(in oklch,var(--foreground) 18%,transparent);}
.rfill{
  background:var(--foreground);
  transform:translateX(-50%) scaleY(var(--p,0));
  transform-origin:top;
}
.rstep{
  position:relative;
  padding:var(--pad-y) 0;
  cursor:pointer;
  font-size:clamp(.9375rem,1.35vw,1.1875rem);
}
/* node sits on the axis, centred on the label's first line */
.rstep::before{
  content:"";position:absolute;
  left:calc(var(--axis) - 2.25rem);
  top:calc(var(--pad-y) + .65em);
  width:var(--node);height:var(--node);
  border-radius:9999px;
  background:var(--background);
  border:1px solid color-mix(in oklch,var(--foreground) 30%,transparent);
  transform:translate(-50%,-50%);
  transition:background .35s,border-color .35s,transform .35s cubic-bezier(.16,1,.3,1);
}
.rstep.on::before{
  background:var(--foreground);border-color:var(--foreground);
  transform:translate(-50%,-50%) scale(1.15);
}
.rstep.past::before{background:var(--foreground);border-color:var(--foreground);}
.rlabel{
  display:block;
  font-size:1em;line-height:1.3;
  font-weight:600;letter-spacing:-.02em;
  color:color-mix(in oklch,var(--foreground) 38%,transparent);
  transition:color .35s;
}
.rstep.on .rlabel{color:var(--foreground);}
.rstep.past .rlabel{color:color-mix(in oklch,var(--foreground) 62%,transparent);}
.rbody{
  display:block;max-width:34ch;
  color:color-mix(in oklch,var(--foreground) 50%,transparent);
  font-size:.8125rem;line-height:1.55;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.16,1,.3,1),opacity .3s,margin .45s;
}
.rstep.on .rbody{max-height:6rem;opacity:1;margin-top:.4375rem;}

/* --- panels --- */
.panels{
  position:relative;
  aspect-ratio:4/3;max-height:min(56vh,30rem);
  border-radius:var(--r-4xl);
  background:color-mix(in oklch,var(--foreground) 6%,transparent);
  outline:1px solid color-mix(in oklch,var(--foreground) 12%,transparent);outline-offset:-1px;
  overflow:hidden;
}
.panel{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;gap:.75rem;
  padding:clamp(1.5rem,3vw,2.5rem);
  opacity:0;transform:translateY(14px) scale(.99);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.panel.on{opacity:1;transform:none;}
.p-cap{
  position:absolute;left:clamp(1.5rem,3vw,2.5rem);top:clamp(1.25rem,2.5vw,1.75rem);
  font-size:.625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.12em;
  color:color-mix(in oklch,var(--foreground) 42%,transparent);
}

/* generic bits reused across panels */
.pbar{height:.4375rem;border-radius:9999px;background:color-mix(in oklch,var(--foreground) 22%,transparent);width:0;}
.panel.on .pbar{animation:barGrow .8s cubic-bezier(.16,1,.3,1) forwards;}
.pbar.b-1{--w:78%}.pbar.b-2{--w:56%}.pbar.b-3{--w:88%}.pbar.b-4{--w:44%}
@keyframes barGrow{to{width:var(--w,70%)}}
.pbar.lead{height:.5625rem;background:var(--accent);}   /* panels 0 & 1: the lead bar is the orange highlight */

.sw-row{display:flex;gap:.5rem;margin-top:.5rem;}
.sw{
  width:1.75rem;height:1.75rem;border-radius:9999px;
  outline:1px solid color-mix(in oklch,var(--foreground) 18%,transparent);outline-offset:-1px;
  opacity:0;transform:scale(.7);
}
.panel.on .sw{animation:pop .5s cubic-bezier(.16,1,.3,1) forwards;}
.panel.on .sw:nth-child(2){animation-delay:.07s}
.panel.on .sw:nth-child(3){animation-delay:.14s}
.panel.on .sw:nth-child(4){animation-delay:.21s}
@keyframes pop{to{opacity:1;transform:none}}
.sw.s1{background:var(--accent)}.sw.s2{background:color-mix(in oklch,var(--foreground) 55%,transparent)}
.sw.s3{background:color-mix(in oklch,var(--foreground) 30%,transparent)}.sw.s4{background:color-mix(in oklch,var(--foreground) 14%,transparent)}

.prow{
  display:flex;align-items:center;gap:.75rem;
  padding:.5625rem .75rem;border-radius:var(--r-2xl);
  background:color-mix(in oklch,var(--foreground) 5%,transparent);
  opacity:0;transform:translateX(-10px);
}
.panel.on .prow{animation:slideIn2 .55s cubic-bezier(.16,1,.3,1) forwards;}
.panel.on .prow:nth-child(3){animation-delay:.09s}
.panel.on .prow:nth-child(4){animation-delay:.18s}
.panel.on .prow:nth-child(5){animation-delay:.27s}
@keyframes slideIn2{to{opacity:1;transform:none}}
.pav{
  width:1.625rem;height:1.625rem;border-radius:9999px;flex-shrink:0;
  background:color-mix(in oklch,var(--foreground) 16%,transparent);
  display:flex;align-items:center;justify-content:center;
  font-size:.5625rem;font-weight:600;color:color-mix(in oklch,var(--foreground) 70%,transparent);
}
.pmeta{flex:1;display:flex;flex-direction:column;gap:.3125rem;}
.ptick{
  flex-shrink:0;font-size:.5625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;
  color:color-mix(in oklch,var(--foreground) 45%,transparent);
}
.ptick.on{color:var(--accent);}   /* panel 1: the "Enriched" (done) status is the orange highlight */

.seq{display:flex;flex-direction:column;gap:0;}
.seq-i{
  position:relative;display:flex;align-items:center;gap:.875rem;
  padding:.6875rem 0 .6875rem 1.75rem;
  opacity:0;transform:translateY(8px);
}
.panel.on .seq-i{animation:slideUp2 .55s cubic-bezier(.16,1,.3,1) forwards;}
.panel.on .seq-i:nth-child(3){animation-delay:.12s}
.panel.on .seq-i:nth-child(4){animation-delay:.24s}
.panel.on .seq-i:nth-child(5){animation-delay:.36s}
@keyframes slideUp2{to{opacity:1;transform:none}}
.seq-i::before{
  content:"";position:absolute;left:.1875rem;top:0;bottom:0;width:1px;
  background:color-mix(in oklch,var(--foreground) 18%,transparent);
}
.seq-i:first-of-type::before{top:50%}
.seq-i:last-child::before{bottom:50%}
.seq-i::after{
  content:"";position:absolute;left:0;top:50%;margin-top:-.21875rem;
  width:.4375rem;height:.4375rem;border-radius:9999px;background:var(--accent);   /* panel 2: sequence timeline nodes are the orange highlight */
}
.seq-day{
  flex-shrink:0;width:3.25rem;
  font-size:.625rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:color-mix(in oklch,var(--foreground) 45%,transparent);
}
.seq-ch{
  flex-shrink:0;padding:.1875rem .5rem;border-radius:9999px;
  border:1px solid color-mix(in oklch,var(--foreground) 22%,transparent);
  font-size:.5625rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:color-mix(in oklch,var(--foreground) 72%,transparent);
}
.seq-t{font-size:.8125rem;color:color-mix(in oklch,var(--foreground) 78%,transparent);}

/* chip row reused by the audience / playbook panels; .on is the orange-filled accent chip */
.hchips{display:flex;flex-wrap:wrap;gap:.375rem;margin-top:.25rem;}
.seq-ch.on{background:var(--accent);border-color:var(--accent);color:#fff;}

/* avatar icon (panels 1 & 2) replaces the old initials */
.pav svg{width:.9375rem;height:.9375rem;}

/* research panel: a dossier being built from sources, each ticked off in orange */
.dossier{display:flex;align-items:center;gap:.75rem;margin-bottom:.25rem;}
.dav{
  width:2.5rem;height:2.5rem;border-radius:9999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklch,var(--foreground) 12%,transparent);
  color:color-mix(in oklch,var(--foreground) 55%,transparent);
}
.dav svg{width:1.375rem;height:1.375rem;}
.dmeta{flex:1;display:flex;flex-direction:column;gap:.375rem;}
.dline{height:.4375rem;border-radius:9999px;background:color-mix(in oklch,var(--foreground) 22%,transparent);}
.dline.lead{height:.5rem;background:var(--accent);}
.dline.w70{width:70%}.dline.w45{width:45%}
.dsrc-list{display:flex;flex-direction:column;gap:.34375rem;}
.dsrc-i{
  display:flex;align-items:center;gap:.625rem;
  font-size:.65625rem;color:color-mix(in oklch,var(--foreground) 60%,transparent);
}
.dsrc-t{flex:1;}
.dcheck{
  width:1rem;height:1rem;border-radius:9999px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:#fff;
  opacity:0;transform:scale(.6);
}
.dcheck svg{width:.5625rem;height:.5625rem;}
.panel.on .dcheck{animation:pop .5s cubic-bezier(.16,1,.3,1) forwards;}
.panel.on .dsrc-i:nth-child(2) .dcheck{animation-delay:.12s;}
.panel.on .dsrc-i:nth-child(3) .dcheck{animation-delay:.24s;}
.panel.on .dsrc-i:nth-child(4) .dcheck{animation-delay:.36s;}
.panel.on .dsrc-i:nth-child(5) .dcheck{animation-delay:.48s;}
.panel.on .dsrc-i:nth-child(6) .dcheck{animation-delay:.6s;}
.panel.on .dsrc-i:nth-child(7) .dcheck{animation-delay:.72s;}

/* business panel: brand mark, location and product cards */
.biz-head{display:flex;align-items:center;gap:.75rem;}
.biz-logo{
  width:2.75rem;height:2.75rem;border-radius:var(--r-2xl);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklch,var(--foreground) 10%,transparent);
  color:color-mix(in oklch,var(--foreground) 60%,transparent);
}
.biz-logo svg{width:1.5rem;height:1.5rem;}
.biz-id{flex:1;display:flex;flex-direction:column;gap:.4375rem;}
.biz-loc{display:inline-flex;align-items:center;gap:.375rem;font-size:.6875rem;color:color-mix(in oklch,var(--foreground) 55%,transparent);}
.biz-loc svg{width:.75rem;height:.75rem;color:var(--accent);flex-shrink:0;}
.biz-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;}
.prod{
  display:flex;flex-direction:column;gap:.5rem;
  padding:.625rem;border-radius:var(--r-2xl);
  background:color-mix(in oklch,var(--foreground) 5%,transparent);
  outline:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);outline-offset:-1px;
  opacity:0;transform:scale(.9);
}
.prod svg{width:1rem;height:1rem;color:color-mix(in oklch,var(--foreground) 55%,transparent);}
.panel.on .prod{animation:pop .5s cubic-bezier(.16,1,.3,1) forwards;}
.panel.on .prod:nth-child(2){animation-delay:.1s;}
.panel.on .prod:nth-child(3){animation-delay:.2s;}

/* audience panel: filter criteria + a grid of matching accounts (orange = in range) */
.filters{display:flex;flex-wrap:wrap;gap:.375rem;}
.filter{
  display:inline-flex;align-items:center;gap:.3125rem;
  padding:.25rem .5625rem;border-radius:9999px;
  background:color-mix(in oklch,var(--foreground) 6%,transparent);
  outline:1px solid color-mix(in oklch,var(--foreground) 10%,transparent);outline-offset:-1px;
  font-size:.625rem;font-weight:600;color:color-mix(in oklch,var(--foreground) 72%,transparent);
}
.filter svg{width:.75rem;height:.75rem;color:var(--accent);flex-shrink:0;}
.aud-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:.3125rem;margin:.125rem 0;}
.ad{aspect-ratio:1;border-radius:9999px;background:color-mix(in oklch,var(--foreground) 12%,transparent);}
.ad.on{background:var(--accent);}

.cal{
  display:grid;grid-template-columns:repeat(5,1fr);gap:.375rem;
  margin-top:.25rem;
}
.cd{
  aspect-ratio:1;border-radius:var(--r-2xl);
  background:color-mix(in oklch,var(--foreground) 5%,transparent);
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding:.375rem .4375rem;
  font-size:.5625rem;font-weight:600;color:color-mix(in oklch,var(--foreground) 30%,transparent);
}
.cd.hit{
  background:var(--accent);color:#fff;   /* panel 3: booked calendar slots are the orange highlight */
  opacity:0;transform:scale(.86);
}
.panel.on .cd.hit{animation:pop .6s .35s cubic-bezier(.16,1,.3,1) forwards;}
.cal-note{
  display:flex;align-items:center;gap:.5rem;margin-top:.875rem;
  font-size:.75rem;color:color-mix(in oklch,var(--foreground) 70%,transparent);
  opacity:0;
}
.panel.on .cal-note{animation:pop .5s .6s ease forwards;}
.cal-note b{color:var(--accent);font-weight:600;}

.spine-foot{
  flex-shrink:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;
  margin-top:clamp(1.25rem,3vh,2rem);
  padding-top:clamp(1.125rem,2.5vh,1.625rem);
  border-top:1px solid color-mix(in oklch,var(--foreground) 18%,transparent);
}
.spine-foot .foot-line{color:var(--foreground);margin:0;}
.spine-foot .foot-line .dim{color:color-mix(in oklch,var(--foreground) 55%,transparent);}
.spine-foot .textlink{color:var(--foreground);border-bottom-color:color-mix(in oklch,var(--foreground) 60%,transparent);}

@media (prefers-reduced-motion:reduce){
  .panel,.pbar,.sw,.prow,.seq-i,.cd.hit,.cal-note,.dcheck,.prod{animation:none !important;transition:none !important;}
  .panel.on .pbar{width:var(--w,70%);}
  .dcheck,.prod{opacity:1;transform:none;}
}

@media (max-width:940px){
  .spine-track{height:auto;}
  .spine-stage{position:static;height:auto;padding:clamp(3.5rem,8vh,5rem) var(--side);}
  .spine-inner{grid-template-columns:1fr;gap:2rem;}
  .panels{aspect-ratio:5/4;min-height:17rem;max-height:none;order:2;}   /* min-height floor so the 7-row research dossier never clips on small phones */
  .spine-foot{margin-top:2rem;padding-bottom:1rem;}
  .spine-left{order:1;}
  .rstep .rbody{max-height:6rem;opacity:1;margin-top:.4375rem;}
  .rstep .rlabel{color:color-mix(in oklch,var(--foreground) 82%,transparent);}
  .spine-foot .textlink{margin-left:0;}
}